/* Partner-Portal oeltank-entfernen.de — Werkzeug-Oberfläche (Operate), hell.
   Aufbau wie kaizen-OS: feste Seitenleiste links (Marke oben, Menü als Pillen, Konto unten),
   ruhige weiße Flächen mit feiner Kante auf kühlem Grund, großer Seitentitel mit Unterzeile.
   Farben bleiben die der Hauptseite: Markenblau #14538c, alle Neutraltöne leicht ins Blau getönt.
   Stand einer Anfrage = Textmarke (Wort + Ton), nie Farbe allein. */

[hidden] { display: none !important; }

:root {
  color-scheme: light;

  /* Marke */
  --brand: #14538c;
  --brand-dark: #0e3a63;
  --brand-wash: #eef4fa;   /* Zeile/Fläche beim Überfahren */
  --brand-tint: #e3edf7;

  /* Flächen: Grund kühl, Karten und Seitenleiste weiß (wie kaizen-OS: Karte = Leiste) */
  --bg: #f3f6f9;
  --surface: #ffffff;
  --surface-2: #f6f8fb;     /* Tabellenkopf, Einsatzflächen */
  --line: #dfe6ed;          /* feine Kante */
  --line-soft: #e9eef3;     /* Zeilentrenner */
  --field: #738397;         /* Rand von Eingabefeldern, >= 3:1 auf Weiß */

  /* Text */
  --ink: #14202c;
  --ink-soft: #4a5b6c;      /* 7:1 auf Weiß, 6,4:1 auf --bg */
  --ink-menu: #3a4a5b;

  /* Zustände: Tönung + dunkle Schrift aus demselben Farbton */
  --warn-bg: #fcf5e4;
  --warn-line: #ebd9a9;
  --warn-tint: #fbefd5;
  --warn-ink: #5e3d06;
  --warn-ink-2: #6b4709;
  --good-tint: #e4f2ea;
  --good-ink: #1d5236;
  --danger-tint: #fbeaea;
  --danger-line: #e8bcbc;
  --danger-ink: #8f2a2a;

  --radius: 14px;
  --radius-s: 10px;
  --shadow-s: 0 1px 2px rgba(20, 32, 44, 0.05), 0 2px 8px -2px rgba(20, 32, 44, 0.07);
  --shadow-m: 0 4px 12px -2px rgba(20, 32, 44, 0.12), 0 12px 28px -8px rgba(20, 32, 44, 0.14);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --leiste: 16rem;
  --kopf-mobil: 3.5rem;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: #b3c0cd transparent;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 1rem/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  accent-color: var(--brand);
  caret-color: var(--brand);
}

::selection { background: #bcd5ee; color: var(--ink); }

h1, h2, h3, p, dl, dd, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
h2 { font-size: 1.125rem; line-height: 1.3; font-weight: 600; text-wrap: balance; }
h3 { font-size: 0.9375rem; line-height: 1.35; font-weight: 600; }

a {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--brand-dark); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
/* Programmatischer Fokus auf Titel und Inhalt (Seitenwechsel, Sprunglink): kein Ring um Text. */
h1[tabindex="-1"]:focus,
.pp-inhalt:focus { outline: none; }

label { display: block; font-size: 0.875rem; font-weight: 600; }

.pp-leise { color: var(--ink-soft); font-size: 0.875rem; }

.pp-nur-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.pp-icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
}

.pp-sprung {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 2px solid var(--brand);
  border-radius: var(--radius-s);
  color: var(--brand-dark);
  font-weight: 600;
  transform: translateY(-200%);
}
.pp-sprung:focus { transform: none; }

/* ------------------------------------------------------------------ Felder und Knöpfe */

input,
select,
textarea,
button { font: inherit; }

input:not([type="file"]):not([type="hidden"]),
select,
textarea {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.6rem 0.8rem;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--field);
  border-radius: var(--radius-s);
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
textarea { min-height: 6rem; line-height: 1.5; resize: vertical; }
::placeholder { color: #5c6a78; opacity: 1; }

input:not([type="file"]):hover,
select:hover,
textarea:hover { border-color: var(--ink-soft); }

input:not([type="file"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--brand);
  outline-offset: 1px;
}

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%234a5b6c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1rem;
}

/* Gesperrt (Anfrage anonymisiert): erkennbar flach und grau, nicht nur blasser */
input:not([type="file"]):not([type="hidden"]):disabled,
select:disabled,
textarea:disabled {
  background-color: #eef2f6;
  border-color: #c9d3de;
  border-style: dashed;
  color: #566676;
  cursor: not-allowed;
  -webkit-text-fill-color: #566676;
  opacity: 1;
}
/* Nur zur Anzeige (E-Mail beim Passwort-Festlegen): ruhig, ohne Bearbeiten-Rahmen. */
input[readonly] {
  background-color: var(--surface-2);
  border-color: var(--line);
  color: var(--ink-soft);
}
select:disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%239aa7b5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Hauptknopf: Marke gefüllt. Gilt auch für die nackten Knöpfe der einfachen Seiten. */
.pp-knopf,
.pp-formular button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0 1.25rem;
  background: var(--brand);
  border: 1px solid var(--brand);
  border-radius: var(--radius-s);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(14, 58, 99, 0.2);
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.pp-knopf:hover,
.pp-formular button:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.pp-knopf:active,
.pp-formular button:active { transform: translateY(1px); }
button.pp-knopf:disabled {
  background: #dfe6ee;
  border-color: #dfe6ee;
  box-shadow: none;
  color: #566676;
  cursor: not-allowed;
  transform: none;
}

/* Zweitknopf (Datei wählen): weiß mit Markenkante */
.pp-knopf.pp-knopf-zweit {
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: none;
  color: var(--brand-dark);
}
.pp-knopf.pp-knopf-zweit:hover { background: var(--brand-wash); color: var(--brand-dark); }

/* ------------------------------------------------------------------ Einfache Seiten (Anmelden, Link, Fehler) */

body.pp-einfach {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 1.5rem 1rem;
}

.pp-karte-einfach {
  width: min(100%, 27rem);
  padding: 1.75rem 1.5rem 2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-m);
}

.pp-marke {
  color: var(--ink-soft);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}
.pp-karte-einfach p.pp-marke {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line-soft);
}
.pp-karte-einfach p.pp-marke::before {
  content: "";
  flex: none;
  width: 2rem;
  height: 2rem;
  background: url("/icon.svg") center / contain no-repeat;
}

.pp-karte-einfach h1 {
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.pp-karte-einfach p { margin-block: 0.75rem; max-width: 65ch; }
.pp-karte-einfach a { font-weight: 600; }

.pp-formular {
  display: grid;
  gap: 0.375rem;
  margin-top: 1.5rem;
}
.pp-formular label { margin-top: 0.75rem; }
.pp-formular label:first-of-type { margin-top: 0; }
.pp-formular button { width: 100%; margin-top: 1.25rem; }

.pp-fehler {
  padding: 0.75rem 1rem;
  background: var(--danger-tint);
  border: 1px solid var(--danger-line);
  border-radius: var(--radius-s);
  color: var(--danger-ink);
  font-weight: 600;
}
.pp-karte-einfach .pp-fehler { margin-block: 1rem; }
.pp-karte-einfach .pp-nebenlink { margin-top: 1.25rem; font-size: 0.9375rem; }

/* ------------------------------------------------------------------ Laden und Ladefehler (direkt in #app) */

.pp-app { min-height: 100vh; min-height: 100dvh; }

.pp-app > .pp-laden,
.pp-app > .pp-fehler {
  width: min(100% - 2rem, 32rem);
  margin: 3rem auto 0;
}
.pp-laden {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.25rem 1rem;
  color: var(--ink-soft);
}
.pp-laden::before {
  content: "";
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: pp-dreh 0.8s linear infinite;
}
@keyframes pp-dreh { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ Rahmen: Seitenleiste links, Inhalt rechts */

.pp-rahmen {
  display: grid;
  grid-template-columns: var(--leiste) minmax(0, 1fr);
  align-items: start;
  min-height: 100vh;
  min-height: 100dvh;
}

.pp-seitenleiste {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  background: var(--surface);
  border-right: 1px solid var(--line);
}

/* Marke oben, 4rem hoch wie in kaizen-OS */
.pp-kopfzeile {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  height: 4rem;
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--line);
}
.pp-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  min-height: 2.75rem;
  color: var(--ink);
  text-decoration: none;
}
.pp-logo:hover { color: var(--ink); }
.pp-logo img { flex: none; width: 2rem; height: 2rem; border-radius: 8px; }
.pp-logo-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pp-logo-text strong { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.pp-logo-text span { color: var(--ink-soft); font-size: 0.75rem; }

.pp-menue-knopf {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.pp-menue-knopf:hover { background: var(--brand-wash); border-color: #c4d4e4; }
.pp-menue-knopf .pp-icon { width: 1.25rem; height: 1.25rem; }

.pp-menue {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

/* Menü: Pillen wie in kaizen-OS, aktive Seite in Markenblau gefüllt */
.pp-navigation {
  flex: 1;
  min-height: 0;
  padding: 1rem 0.75rem;
  overflow-y: auto;
  scrollbar-width: thin;
}
.pp-navigation ul { display: grid; gap: 0.25rem; }

.pp-menuepunkt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border-radius: 12px;
  color: var(--ink-menu);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.pp-menuepunkt .pp-icon { width: 1.25rem; height: 1.25rem; }
.pp-menuetext { flex: 1; min-width: 0; }
.pp-menuepunkt:hover {
  background: #eaf0f6;
  color: var(--ink);
  text-decoration: none;
}
.pp-menuepunkt[aria-current] {
  background: var(--brand);
  box-shadow: 0 4px 12px -2px rgba(20, 83, 140, 0.35);
  color: #fff;
}
.pp-menuepunkt[aria-current]:hover { background: var(--brand-dark); color: #fff; }
.pp-menuepunkt[aria-current]:focus-visible { outline-color: var(--brand); outline-offset: 2px; }

.pp-zaehler {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.5rem;
  background: #e6edf4;
  border-radius: 999px;
  color: #33475b;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pp-zaehler-neu { background: var(--brand); color: #fff; }
.pp-menuepunkt[aria-current] .pp-zaehler { background: rgba(255, 255, 255, 0.2); color: #fff; }
.pp-menuepunkt[aria-current] .pp-zaehler-neu { background: #fff; color: var(--brand-dark); }

/* Konto unten an der Leiste */
.pp-konto {
  flex: none;
  padding: 0.875rem 0.75rem 1rem;
  border-top: 1px solid var(--line);
}
.pp-firma,
.pp-email {
  padding-inline: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-firma { font-size: 0.9375rem; font-weight: 600; line-height: 1.35; white-space: normal; text-wrap: balance; }
.pp-email { color: var(--ink-soft); font-size: 0.8125rem; line-height: 1.4; }
.pp-abmelden { margin-top: 0.625rem; }
.pp-knopf-leise {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  background: transparent;
  border: 0;
  border-radius: 12px;
  color: var(--ink-menu);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.pp-knopf-leise .pp-icon { width: 1.25rem; height: 1.25rem; }
.pp-knopf-leise:hover { background: #eaf0f6; color: var(--ink); }

/* ------------------------------------------------------------------ Inhalt */

.pp-inhalt {
  container-type: inline-size;
  width: 100%;
  max-width: 76rem;
  min-width: 0;
  margin-inline: auto;
  padding: 2rem 2.5rem 4rem;
}

/* Der eine inszenierte Moment: der Seiteninhalt blendet beim Seitenwechsel kurz ein. */
.pp-inhalt > * { animation: pp-ein 0.24s var(--ease) both; }
@keyframes pp-ein { from { opacity: 0; transform: translateY(6px); } }

/* Seitenkopf: großer Titel, Unterzeile, rechts optional die Standmarke */
.pp-seitenkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1.5rem;
}
.pp-seitenkopf-text { flex: 1 1 18rem; min-width: 0; }
.pp-seitenkopf h1 {
  font-size: 1.75rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.pp-unterzeile {
  max-width: 65ch;
  margin-top: 0.375rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.5;
  text-wrap: pretty;
}
.pp-seitenkopf > .pp-standmarke { flex: none; align-self: flex-start; margin-top: 0.1875rem; padding: 0.375rem 0.875rem; font-size: 0.875rem; }

.pp-hinweis {
  margin-bottom: 1.25rem;
  padding: 0.75rem 1rem;
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-s);
  color: var(--warn-ink);
  font-size: 0.9375rem;
  font-weight: 500;
}

.pp-leer {
  padding: 2.5rem 1.5rem;
  background: var(--surface);
  border: 1px dashed #b3c0cd;
  border-radius: var(--radius);
  color: var(--ink-soft);
  text-align: center;
  text-wrap: balance;
}

/* Abschnitte */
.pp-abschnitt { margin-top: 2rem; }
.pp-abschnitt-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 1rem;
  margin-bottom: 0.75rem;
}
.pp-abschnitt-kopf a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}
.pp-abschnitt-kopf a:hover { text-decoration: underline; }

/* „Bitte nachtragen“: eine warme Fläche, die Tabelle liegt direkt darauf (keine Karte in der Karte) */
.pp-abschnitt-hinweis {
  padding: 1.25rem 1.5rem 0.5rem;
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius);
}
.pp-abschnitt-hinweis h2 { color: var(--warn-ink); }
.pp-abschnitt-text {
  max-width: 65ch;
  margin: 0.25rem 0 1rem;
  color: var(--warn-ink-2);
  font-size: 0.9375rem;
}

/* ------------------------------------------------------------------ Kennzahlen: eine ruhige Leiste, keine Kacheln */

.pp-kennzahlen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-s);
}
.pp-kennzahl {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  padding: 1rem 1.125rem;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.15s var(--ease);
}
.pp-kennzahl strong {
  font-size: 1.375rem;
  line-height: 1.2;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.pp-kennzahl span { color: var(--ink-soft); font-size: 0.875rem; line-height: 1.3; }

a.pp-kennzahl { padding-right: 2.5rem; }
a.pp-kennzahl strong { color: var(--brand); }
a.pp-kennzahl::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%2314538c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.15s var(--ease);
}
a.pp-kennzahl:hover { background: var(--brand-wash); }
a.pp-kennzahl:hover::after { transform: translateX(2px); }
a.pp-kennzahl:focus-visible { outline-offset: -3px; }

@container (min-width: 50rem) {
  .pp-kennzahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pp-kennzahl { padding: 1.25rem 1.5rem; }
  .pp-kennzahl strong { font-size: 1.625rem; }
  a.pp-kennzahl { padding-right: 2.75rem; }
}

/* ------------------------------------------------------------------ Tabellen */

.pp-tabelle-rahmen {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-s);
}
.pp-tabelle {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9375rem;
}
.pp-tabelle th,
.pp-tabelle td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: middle;
}
.pp-tabelle th {
  padding-block: 0.625rem;
  background: var(--surface-2);
  border-bottom-color: var(--line);
  color: var(--ink-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}
.pp-tabelle tbody tr:last-child td { border-bottom: 0; }
.pp-tabelle th:first-child,
.pp-tabelle td:first-child { padding-left: 1.25rem; }
.pp-tabelle th:last-child,
.pp-tabelle td:last-child { padding-right: 1.25rem; }

.pp-sp-nr { white-space: nowrap; font-variant-numeric: tabular-nums; }
td.pp-sp-nr a { font-weight: 600; text-decoration: none; }
td.pp-sp-nr a:hover { text-decoration: underline; }
.pp-sp-datum { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.pp-sp-ort { font-weight: 500; }
.pp-sp-anliegen { min-width: 11rem; }
.pp-sp-stand { white-space: nowrap; }
th.pp-sp-zahl,
td.pp-sp-zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.pp-sp-zahl { font-weight: 500; }
.pp-sp-rechnung { white-space: nowrap; }
.pp-sp-notiz { max-width: 22rem; overflow-wrap: anywhere; color: var(--ink-soft); }
.pp-sp-datei { overflow-wrap: anywhere; }

.pp-zeile-klickbar { cursor: pointer; transition: background-color 0.12s var(--ease); }
.pp-zeile-klickbar:hover,
.pp-zeile-klickbar:focus-within { background: var(--brand-wash); }

/* „fehlt“: dezent warm, nicht schreiend */
.pp-fehlt {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  background: var(--warn-tint);
  border: 1px solid var(--warn-line);
  border-radius: 999px;
  color: var(--warn-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  justify-self: start;
}

/* Tabelle auf der warmen Fläche: transparent, mit warmen Trennern */
.pp-abschnitt-hinweis .pp-tabelle-rahmen {
  margin-inline: -0.5rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.pp-abschnitt-hinweis .pp-tabelle th { background: transparent; border-bottom-color: var(--warn-line); color: var(--warn-ink-2); }
.pp-abschnitt-hinweis .pp-tabelle td { border-bottom-color: #f0e4c2; }
.pp-abschnitt-hinweis .pp-zeile-klickbar:hover,
.pp-abschnitt-hinweis .pp-zeile-klickbar:focus-within { background: rgba(255, 255, 255, 0.6); }
.pp-abschnitt-hinweis .pp-fehlt { background: #fff; }

/* ------------------------------------------------------------------ Stand-Marke: kleine Pille, je Stand ein ruhiger Ton */

.pp-standmarke {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.25rem 0.75rem;
  background: var(--brand-tint);
  border: 1px solid #c4d6e8;
  border-radius: 999px;
  color: var(--brand-dark);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.pp-standmarke::before {
  content: "";
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: currentColor;
}
/* neu: am auffälligsten, gefüllt */
.pp-standmarke[data-stand="neu"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.pp-standmarke[data-stand="kontaktiert"] { background: #e4edf6; border-color: #bfd2e5; color: #1c4a73; }
.pp-standmarke[data-stand="angebot"] { background: var(--warn-tint); border-color: var(--warn-line); color: var(--warn-ink); }
.pp-standmarke[data-stand="auftrag"] { background: #dff0e6; border-color: #b4d8c3; color: var(--good-ink); }
/* abgelehnt: gedämpft, ohne Punkt-Betonung */
.pp-standmarke[data-stand="abgelehnt"] { background: #eceff3; border-color: #d5dce4; color: #4a5a6b; }
.pp-standmarke[data-stand="abgelehnt"]::before { opacity: 0.55; }

/* ------------------------------------------------------------------ Detailansicht einer Anfrage */

.pp-zurueck {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  margin: -0.5rem 0 0.25rem -0.25rem;
  padding: 0 0.5rem 0 0.25rem;
  border-radius: var(--radius-s);
  color: var(--ink-soft);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.pp-zurueck:hover { background: #eaf0f6; color: var(--ink); text-decoration: none; }
.pp-zurueck .pp-icon { width: 1.125rem; height: 1.125rem; }

.pp-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
@container (min-width: 46rem) {
  .pp-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
}

.pp-tafel {
  padding: 1.25rem 1.25rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-s);
}
.pp-tafel > h2 { margin-bottom: 1rem; }

/* Kontakt: Telefon und E-Mail als große Tippflächen */
.pp-kontakt { display: grid; gap: 0.5rem; }
.pp-kontaktlink {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.5rem 1rem;
  background: var(--brand-wash);
  border: 1px solid #cddfef;
  border-radius: var(--radius-s);
  color: var(--brand-dark);
  font-size: 1.0625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.pp-kontaktlink > span { min-width: 0; overflow-wrap: anywhere; }
.pp-kontaktlink:hover { background: var(--brand-tint); border-color: #b4cde4; color: var(--brand-dark); text-decoration: none; }
.pp-kontaktlink .pp-icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--brand); }

/* Angaben als Raster Beschriftung / Wert, feine Zeilentrenner */
.pp-angaben {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr);
  margin-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
}
.pp-angaben dt,
.pp-angaben dd {
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.9375rem;
}
.pp-angaben dt { padding-right: 1.25rem; color: var(--ink-soft); }
.pp-angaben dd { font-weight: 500; overflow-wrap: anywhere; }

.pp-nachricht {
  margin-top: 1.5rem;
  padding: 0.875rem 1rem;
  background: var(--surface-2);
  border-radius: var(--radius-s);
}
.pp-nachricht h3 { margin-bottom: 0.375rem; color: var(--ink-soft); font-size: 0.875rem; }
.pp-nachricht p {
  max-width: 65ch;
  font-size: 0.9375rem;
  line-height: 1.55;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Bearbeitung: Stand, Wert und Notiz, Rechnung — drei Gruppen, durch Linien getrennt */
.pp-tafel-bearbeitung { display: grid; gap: 1.25rem; align-content: start; }
.pp-tafel-bearbeitung > h2 { margin-bottom: 0; }

.pp-feld { display: grid; gap: 0.375rem; }
.pp-feld label { color: var(--ink); }

.pp-werte {
  display: grid;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-soft);
}
.pp-werte .pp-knopf { justify-self: start; min-width: 11rem; }

.pp-upload {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 0.625rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-soft);
}
.pp-upload > * { max-width: 100%; }
.pp-upload > .pp-rechnungsliste { justify-self: stretch; }

.pp-rechnungsliste { border-bottom: 1px solid var(--line-soft); }
.pp-rechnungsliste:empty { display: none; }
.pp-rechnungsliste li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1rem;
  min-height: 2.75rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.9375rem;
}
.pp-rechnungsliste li:first-child { border-top: 0; }
.pp-dateilink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  min-width: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
  text-decoration: none;
}
.pp-dateilink:hover { text-decoration: underline; }
td .pp-dateilink { min-height: 0; }

/* Eingabe für Dateien: unsichtbar, aber per Tastatur erreichbar; der Label-Knopf trägt den Fokusring */
.pp-datei {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}
.pp-upload:focus-within .pp-knopf-zweit {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.pp-upload:has(.pp-datei:disabled) .pp-knopf-zweit {
  background: #eef2f6;
  border: 1px dashed #c9d3de;
  color: #566676;
  cursor: not-allowed;
  pointer-events: none;
}

/* Rückmeldung: bleibt am unteren Bildrand sichtbar, solange die Tafel länger ist als der Schirm */
.pp-meldung {
  position: sticky;
  bottom: 1rem;
  z-index: 2;
  padding: 0.75rem 1rem;
  background: var(--good-tint);
  border: 1px solid #b4d8c3;
  border-radius: var(--radius-s);
  box-shadow: 0 4px 12px -2px rgba(20, 32, 44, 0.14);
  color: var(--good-ink);
  font-size: 0.9375rem;
  font-weight: 600;
}
.pp-meldung:empty { display: none; }
.pp-meldung.pp-fehler { background: var(--danger-tint); border-color: var(--danger-line); color: var(--danger-ink); }

/* ------------------------------------------------------------------ Schmal: Zeilen werden zu gestapelten Blöcken */

@media (max-width: 719px) {
  .pp-tabelle-rahmen { overflow: visible; }
  .pp-tabelle,
  .pp-tabelle tbody { display: block; }
  .pp-tabelle thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
  .pp-tabelle tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 0.875rem 1rem 0.75rem;
    border-bottom: 1px solid var(--line-soft);
  }
  .pp-tabelle tbody tr:last-child { border-bottom: 0; }
  .pp-tabelle td,
  .pp-tabelle td:first-child,
  .pp-tabelle td:last-child {
    display: grid;
    grid-template-columns: 6.75rem minmax(0, 1fr);
    grid-column: 1 / -1;
    gap: 0 0.75rem;
    align-items: baseline;
    padding: 0.1875rem 0;
    border: 0;
    text-align: left;
    white-space: normal;
  }
  .pp-tabelle td::before {
    content: attr(data-label);
    color: var(--ink-soft);
    font-size: 0.8125rem;
    font-weight: 500;
  }
  /* Nr. = Kopfzeile des Blocks, die Standmarke rechts daneben */
  .pp-tabelle td.pp-sp-nr,
  .pp-tabelle td.pp-sp-nr:first-child {
    display: block;
    grid-column: 1;
    grid-row: 1;
    padding: 0 0 0.375rem;
    font-size: 1.0625rem;
  }
  .pp-tabelle td.pp-sp-nr::before { display: none; }
  .pp-tabelle td.pp-sp-nr a { display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: -0.4375rem; }
  .pp-tabelle td.pp-sp-stand {
    display: block;
    grid-column: 2;
    grid-row: 1;
    padding: 0 0 0.375rem;
  }
  .pp-tabelle td.pp-sp-stand::before { display: none; }
  .pp-tabelle td.pp-sp-zahl { text-align: left; }
  .pp-sp-notiz { max-width: none; }
  .pp-sp-anliegen { min-width: 0; }
  .pp-tabelle .pp-zeile-klickbar:active { background: var(--brand-tint); }

  /* warme Fläche: Trenner in Warm */
  .pp-abschnitt-hinweis .pp-tabelle tr { border-bottom-color: #f0e4c2; }
  .pp-abschnitt-hinweis .pp-tabelle-rahmen { margin-inline: -0.5rem; }
}

/* ------------------------------------------------------------------ Mobil und Tablet: Kopfleiste oben, Menü klappt als Panel auf */

@media (max-width: 959px) {
  .pp-rahmen { display: block; }

  .pp-seitenleiste {
    z-index: 30;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .pp-kopfzeile {
    height: var(--kopf-mobil);
    padding: 0 1rem;
    border-bottom: 0;
  }
  .pp-menue-knopf { display: inline-flex; }

  .pp-menue {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    max-height: calc(100dvh - var(--kopf-mobil));
    overflow-y: auto;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-m);
  }
  .pp-rahmen[data-menue="offen"] .pp-menue {
    display: flex;
    animation: pp-panel 0.18s var(--ease) both;
  }
  .pp-navigation { flex: none; overflow: visible; padding: 0.75rem 0.75rem 0.5rem; }
  .pp-konto { padding-top: 0.75rem; }

  .pp-inhalt { padding: 1.25rem 1rem 3rem; }
  .pp-seitenkopf { margin-bottom: 1.25rem; }
  .pp-seitenkopf h1 { font-size: 1.5rem; }
  .pp-abschnitt { margin-top: 1.75rem; }
  .pp-abschnitt-hinweis { padding: 1rem 1rem 0.5rem; }
}
@keyframes pp-panel { from { opacity: 0; transform: translateY(-6px); } }

@media (max-width: 479px) {
  .pp-tafel { padding: 1rem 1rem 1.25rem; }
  /* Eine normale E-Mail-Adresse soll auf dem Telefon in einer Zeile bleiben */
  .pp-kontaktlink { gap: 0.625rem; padding-inline: 0.75rem; font-size: 0.9375rem; }
  .pp-werte .pp-knopf { justify-self: stretch; }
  .pp-karte-einfach { padding: 1.5rem 1.25rem 1.75rem; }
}

/* ------------------------------------------------------------------ Bewegung, Kontrast, erzwungene Farben */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .pp-laden::before { border-top-color: var(--line); border-right-color: var(--brand); }
}

@media (prefers-contrast: more) {
  :root {
    --line: #4d5a67;
    --line-soft: #6b7886;
    --field: #14202c;
    --ink-soft: #14202c;
    --ink-menu: #14202c;
  }
  :focus-visible { outline-width: 3px; }
  a { text-decoration-thickness: 2px; }
  .pp-tabelle-rahmen,
  .pp-tafel,
  .pp-kennzahlen,
  .pp-karte-einfach { box-shadow: none; }
  .pp-menuepunkt[aria-current] { box-shadow: none; outline: 2px solid var(--ink); outline-offset: -2px; }
  .pp-standmarke { border-color: currentColor; }
  .pp-hinweis,
  .pp-abschnitt-hinweis { background: #fff; border-color: var(--ink); color: var(--ink); }
  .pp-abschnitt-hinweis h2,
  .pp-abschnitt-text,
  .pp-abschnitt-hinweis .pp-tabelle th { color: var(--ink); }
  .pp-meldung,
  .pp-fehler { background: #fff; border-width: 2px; border-color: currentColor; }
  ::placeholder { color: var(--ink-soft); }
}

@media (forced-colors: active) {
  select { appearance: auto; background-image: none; }
  .pp-menuepunkt[aria-current] { outline: 3px solid Highlight; outline-offset: -3px; }
  .pp-standmarke,
  .pp-fehlt { border: 1px solid CanvasText; }
  .pp-standmarke::before { background: CanvasText; }
  .pp-tabelle-rahmen,
  .pp-tafel,
  .pp-kennzahlen { border: 1px solid CanvasText; }
}