/* ============================================================
   Overalt. Nach Apples Human Interface Guidelines.
   Systemschrift statt Webfont, Apples Systemfarben fuer Flaechen und
   Text, eine Toenung (Rolex-Gruen) ausschliesslich fuer Interaktion.
   Zustand (gut, Achtung) nimmt Systemgruen und Systemorange und zaehlt
   nicht als Akzent. Abstaende aus einer Skala (4/8/12/16/24/32).
   Referenz: Design-Artifact "Overalt Design", 02.09.2026.
   Abgeglichen mit den HIG, Stand iOS 27 (abgerufen 26.09.2026), siehe
   docs/design/hig-stand.md: Systemfarben in den Werten von 2025,
   Schriftgroessen nur aus den Textstilen von iOS und macOS.
   ============================================================ */
:root{
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;

  /* Flaechen: systemGroupedBackground, secondary, tertiary */
  --ground:#f2f2f7; --surface:#ffffff; --surface-2:#f2f2f7; --surface-3:#e5e5ea;
  /* Trennstriche: separator 29 %, opaque fuer Raender */
  --line:rgba(60,60,67,.29); --line-soft:rgba(60,60,67,.14);
  /* Text: label, secondaryLabel, tertiaryLabel */
  --ink:#000000; --ink-2:rgba(60,60,67,.6); --ink-3:rgba(60,60,67,.3);
  /* Fuellungen fuer Felder und Zweitknoepfe: systemFill */
  --fill:rgba(120,120,128,.2); --fill-2:rgba(120,120,128,.16);
  /* Toenung: Rolex-Gruen. 6,6:1 auf Weiss. */
  --accent:#0b6b44; --accent-soft:rgba(11,107,68,.12); --accent-line:rgba(11,107,68,.35);
  --on-accent:#ffffff;
  --accent-hell:#1a8a5c; --accent-dunkel:#0a5636;
  /* Zustand: systemOrange, systemGreen, Stand HIG Color 09.06.2025.
     Flaechen aus den Standardwerten (#ff8d28, #34c759), Text aus den Werten
     fuer erhoehten Kontrast (#c55300, #008932): die Standardwerte haben als
     Text auf Weiss nur rund 2:1, diese 4,5:1. */
  --warn:#c55300; --warn-soft:rgba(255,141,40,.14); --warn-line:rgba(255,141,40,.4);
  --good:#008932; --good-soft:rgba(52,199,89,.14); --good-line:rgba(52,199,89,.4);
  /* systemRed, nur fuer zerstoerende Handlungen (HIG Buttons, Rolle destructive) */
  --rot:#ff383c;
  /* Kein Kartenschatten. Der einzige Schatten liegt auf dem gefuellten Knopf. */
  --shadow:none;
  --shadow-hoch:0 8px 24px -8px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.08);
  --radius:10px;
  /* Glas fuer die Leisten: 72 % Deckung plus Weichzeichner, siehe .tableiste.
     --glas-glanz ist die obere Lichtkante (Specular Highlight). Apple hat sie
     mit iOS 27 verstaerkt: sie trennt Glas von milchiger Flaeche. Im Dunkeln
     deutlich schwaecher, sonst wird aus der Kante ein Leuchtstreifen. */
  --glas:rgba(255,255,255,.72);
  --glas-glanz:rgba(255,255,255,.6);
  /* Seit Schritt 2 (27.09.2026) schwebt das Glas: Tableiste, Such-Kreis und
     Seitenleiste liegen mit Rand und weichem Schatten ueber dem Inhalt
     (HIG Materials, Liquid Glass). */
  --glas-rand:rgba(255,255,255,.75);
  --glas-schatten:0 8px 28px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06);

  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#000000; --surface:#1c1c1e; --surface-2:#2c2c2e; --surface-3:#3a3a3c;
    --line:rgba(84,84,88,.65); --line-soft:rgba(84,84,88,.4);
    --ink:#ffffff; --ink-2:rgba(235,235,245,.6); --ink-3:rgba(235,235,245,.3);
    --fill:rgba(120,120,128,.36); --fill-2:rgba(120,120,128,.32);
    --accent:#3fc48c; --accent-soft:rgba(63,196,140,.18); --accent-line:rgba(63,196,140,.4);
    --on-accent:#00160c;
    --accent-hell:#5ad9a3; --accent-dunkel:#2aa874;
    --warn:#ff9230; --warn-soft:rgba(255,146,48,.16); --warn-line:rgba(255,146,48,.4);
    --good:#30d158; --good-soft:rgba(48,209,88,.16); --good-line:rgba(48,209,88,.4);
    --rot:#ff4245;
    --shadow:none;
    --shadow-hoch:0 8px 24px -8px rgba(0,0,0,.7), 0 1px 3px rgba(0,0,0,.5);
    --glas:rgba(28,28,30,.72);
    --glas-glanz:rgba(255,255,255,.14);
    --glas-rand:rgba(255,255,255,.14);
    --glas-schatten:0 8px 28px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --ground:#000000; --surface:#1c1c1e; --surface-2:#2c2c2e; --surface-3:#3a3a3c;
  --line:rgba(84,84,88,.65); --line-soft:rgba(84,84,88,.4);
  --ink:#ffffff; --ink-2:rgba(235,235,245,.6); --ink-3:rgba(235,235,245,.3);
  --fill:rgba(120,120,128,.36); --fill-2:rgba(120,120,128,.32);
  --accent:#3fc48c; --accent-soft:rgba(63,196,140,.18); --accent-line:rgba(63,196,140,.4);
  --on-accent:#00160c;
  --accent-hell:#5ad9a3; --accent-dunkel:#2aa874;
  --warn:#ff9230; --warn-soft:rgba(255,146,48,.16); --warn-line:rgba(255,146,48,.4);
  --good:#30d158; --good-soft:rgba(48,209,88,.16); --good-line:rgba(48,209,88,.4);
  --rot:#ff4245;
  --shadow:none;
  --shadow-hoch:0 8px 24px -8px rgba(0,0,0,.7), 0 1px 3px rgba(0,0,0,.5);
  --glas:rgba(28,28,30,.72);
  --glas-glanz:rgba(255,255,255,.14);
  --glas-rand:rgba(255,255,255,.14);
  --glas-schatten:0 8px 28px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3);
}

/* Am Mac ist der Grund in Dunkel Fenstergrau, nicht Schwarz: #000 ist die
   OLED-Farbe des iPhones, macOS-Fenster liegen auf #1e1e1e. Die Flaechen
   ruecken eine Stufe mit nach oben, sonst laegen die Boxen (#1c1c1e)
   unsichtbar auf dem Grund. Am Handy bleibt alles wie es ist. */
@media (min-width:901px) and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--ground:#1e1e1e; --surface:#2c2c2e; --surface-2:#3a3a3c; --surface-3:#48484a}
}
@media (min-width:901px){
  :root[data-theme="dark"]{--ground:#1e1e1e; --surface:#2c2c2e; --surface-2:#3a3a3c; --surface-3:#48484a}
}

/* Kontrast erhoehen (Bedienungshilfen). HIG Color verlangt fuer jede Farbe
   einen Wert dafuer. Orange und Gruen sind die Apple-Werte fuer erhoehten
   Kontrast. Fuer Zweittext und Linien nennen die HIG keine Zahl; die Werte
   hier sind angehoben, bis einer aus den Apple Design Resources vorliegt. */
@media (prefers-contrast:more){
  :root{--line:rgba(60,60,67,.5); --ink-2:rgba(60,60,67,.8); --ink-3:rgba(60,60,67,.6)}
}
@media (prefers-contrast:more) and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--line:rgba(84,84,88,.9); --ink-2:rgba(235,235,245,.8); --ink-3:rgba(235,235,245,.6);
    --warn:#ffa056; --good:#4ad968}
}
@media (prefers-contrast:more){
  :root[data-theme="dark"]{--line:rgba(84,84,88,.9); --ink-2:rgba(235,235,245,.8); --ink-3:rgba(235,235,245,.6);
    --warn:#ffa056; --good:#4ad968}
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:13px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-weight:600; letter-spacing:-.01em}
.num,.c,.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.disp{font-weight:600; letter-spacing:-.015em}
/* In der Ebene basis wie die Grundform der Knoepfe (siehe dort), sonst
   nimmt a{color:inherit} den Knopf-Links die Toenung und der Fokusring
   den Kapseln die Rundung. */
@layer basis{
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-radius:3px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* ---------- Rahmen ---------- */
.rahmen{display:grid; grid-template-columns:226px minmax(0,1fr); min-height:100vh}
/* Am Handy gibt es keine Seitenleiste: die vier Orte stehen in der
   Tableiste unten (siehe .tableiste), der Rest liegt hinter dem Profilbild. */
@media (max-width:900px){.rahmen{grid-template-columns:minmax(0,1fr)}}

/* Quellenliste nach macOS: eine schwebende Glas-Tafel mit Rand und
   Schatten statt einer Flaeche mit Linie rechts (HIG Sidebars: "sidebars
   can float above content in the Liquid Glass layer"). Symbole vor dem Text
   in der Toenung (HIG Sidebars, 08.06.2026: "By default, sidebar icons use
   your app's accent colors"), die aktive Zeile in der Toenung. In SwiftUI:
   NavigationSplitView mit List(.sidebar). */
.seitenleiste{
  background:var(--glas); border:.5px solid var(--glas-rand); border-radius:18px;
  box-shadow:var(--glas-schatten), inset 0 .5px 0 var(--glas-glanz);
  -webkit-backdrop-filter:blur(20px) saturate(1.8); backdrop-filter:blur(20px) saturate(1.8);
  display:flex; flex-direction:column; padding:var(--s3) var(--s2) var(--s2);
  gap:var(--s5); position:sticky; top:10px; height:calc(100vh - 20px); margin:10px 0 10px 10px;
}
/* Muss NACH der Definition stehen, sonst gewinnt deren display:flex. */
@media (max-width:900px){.seitenleiste{display:none}}
/* kopf-marke und nicht marke: .marke ist seit der Fristanzeige vergeben,
   und die spaetere Regel gewinnt. Der Hamburger landete dadurch unter dem
   Logo statt daneben. */
.kopf-marke{display:flex; align-items:center; justify-content:space-between; gap:var(--s2)}
/* Lockup aus Zeichen und Wortmarke, eine Regel fuer alle drei Stellen
   (Seitenleiste, Anmeldung, Fuss von Mehr):
   1. Kasten des Zeichens : Versalhoehe der Wortmarke = phi : 1. Hier 24px zu
      14,8px (SF Semibold 21px). Der sichtbare aeussere Ring fuellt 68 % des
      Kastens und steht damit buendig auf der Versalhoehe, mit dem ueblichen
      Ueberhang runder Formen von rund 10 %.
   2. Abstand Zeichen zu Wortmarke = Versalhoehe / phi, hier 9px.
   3. Freiraum rundum mindestens eine Versalhoehe (8px Seitenleiste + 8px
      hier = 16px).
   4. line-height:1 legt die Versalmitte auf die Mitte des Kastens, also auf
      die Mitte des aeusseren Rings. Der Punkt oben rechts ist der Sog und
      darf aus der Mitte fallen.
   5. Strichstaerke des Zeichens (8 % des Kastens = 1,9px) entspricht dem
      Stamm der Semibold in 21px, deshalb wirken beide aus einem Guss.
   Keine Sperrung: die gehoert zu Versalien, nicht zu einer Wortmarke in
   Gemischtschreibung. */
.logo{display:flex; align-items:center; gap:9px; padding:var(--s2) var(--s2) 0;
      text-decoration:none; color:inherit}
.logo svg{width:24px; height:24px; flex:none; color:var(--accent)}
.logo:hover .sub{color:var(--accent)}
.logo .sub{font-size:21px; line-height:1; font-weight:600; letter-spacing:-.01em; color:var(--ink)}
.seitenleiste nav{display:flex; flex-direction:column; gap:1px}
/* Gruppenueberschrift wie im Finder: 11px, Semibold, Zweittext, keine
   Versalien. */
.nav-titel{
  font-size:11px; font-weight:600; letter-spacing:.02em;
  color:var(--ink-2); padding:var(--s4) var(--s2) var(--s1);
}
.seitenleiste a,.abmelden{
  display:flex; align-items:center; gap:var(--s2);
  padding:5px var(--s2); border-radius:6px;
  font-size:13px; color:var(--ink); text-decoration:none; line-height:1.35;
}
.seitenleiste a:hover,.abmelden:hover{background:var(--fill-2); color:var(--ink)}
.seitenleiste a[aria-current="true"]{background:var(--accent-soft); color:var(--accent); font-weight:500}
/* nav und Fuss, nicht die Seitenleiste als Ganzes: das Logo ist auch ein
   <a> darin und soll seine 28px behalten. */
.seitenleiste nav a svg,.seiten-fuss a svg,.abmelden svg{flex:none; width:15px; height:15px; color:var(--accent)}
.seitenleiste a[aria-current="true"] svg{color:var(--accent)}
.seitenleiste .n{
  margin-left:auto; font-family:var(--mono); font-size:11px;
  color:var(--ink-2); font-variant-numeric:tabular-nums;
}
.seitenleiste a[aria-current="true"] .n{color:var(--accent)}
.seitenleiste .n.warn{color:var(--warn); font-weight:600}
.seiten-fuss{
  margin-top:auto; display:flex; flex-direction:column; gap:1px;
  border-top:.5px solid var(--line); padding-top:var(--s2);
}
.seiten-fuss form{margin:0}
.abmelden{width:100%; border:0; background:transparent; font:inherit; font-size:13px; cursor:pointer; text-align:left; color:var(--ink-2)}

.inhalt{display:flex; flex-direction:column; min-width:0}
/* Die Fensterleiste hat keine eigene Flaeche und keine Haarlinie mehr.
   Was darunter scrollt, verschwimmt an der Kante (HIG Toolbars: "use a
   ScrollEdgeEffectStyle ... to distinguish the toolbar area"). In SwiftUI
   die .toolbar mit dem Scroll-Kanteneffekt des Systems. */
.leiste{
  display:flex; align-items:center; gap:var(--s4);
  padding:0 var(--s5); height:52px; flex:none;
  background:transparent; isolation:isolate;
  position:sticky; top:0; z-index:5;
}
.leiste::before{
  content:""; position:absolute; inset:0 0 -18px 0; z-index:-1; pointer-events:none;
  background:color-mix(in srgb, var(--ground) 72%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  -webkit-mask-image:linear-gradient(#000 60%, transparent); mask-image:linear-gradient(#000 60%, transparent);
}
/* Suchfeld rechts in der Fensterleiste (HIG Search fields: "Put a search
   field at the trailing side of the toolbar"). SwiftUI: .searchable. */
.leiste-suche-form{margin:0; display:contents}
.leiste .leiste-suche{flex:none; width:220px; height:32px; border-radius:16px}
/* In der Betriebsliste sucht am Mac das Feld in der Fensterleiste; das in
   der Liste bleibt fuer das iPhone. Die Zahl daneben bleibt stehen (R17). */
@media (min-width:901px){.liste-kopf .such-zeile .suche{display:none}}
.liste-kopf .such-zeile{justify-content:flex-end}
.leiste .titel-zeile{font-size:13px; font-weight:600; margin-right:auto}
.leiste .datum,.leiste .zahl{font-size:12px; color:var(--ink-3)}
.leiste .zahl{display:flex; align-items:baseline; gap:var(--s1)}
.leiste .zahl .disp{font-family:var(--mono); font-size:13px; color:var(--ink)}

/* ---------- Split: Liste und Datensatz ---------- */
.split{display:grid; grid-template-columns:284px minmax(0,1fr); flex:1; min-height:0}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}}
.liste{border-right:1px solid var(--line); background:var(--surface); overflow-y:auto}
.liste-kopf{padding:var(--s2); border-bottom:1px solid var(--line-soft); position:sticky; top:0; background:var(--surface); z-index:2}
.suche{
  height:36px; width:100%; border:0; border-radius:10px; box-sizing:border-box;
  background:var(--fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='14' height='14' fill='none' stroke='%238e8e93' stroke-width='1.6'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cline x1='13' y1='13' x2='17' y2='17' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 10px center;
  padding:0 var(--s2) 0 32px; font:inherit; font-size:13px; color:var(--ink);
}
.suche::placeholder{color:var(--ink-2)}
.suche:focus{outline:none; background-color:var(--surface); box-shadow:0 0 0 2px var(--accent-line)}
/* Suchzeile ausserhalb des Listenkopfs: Unbelegt hat keine Sichtenleiste,
   nur das Feld und den Knopf (R19). */
.such-zeile{display:flex; gap:var(--s2); align-items:center; margin-bottom:var(--s2)}
.such-zeile .suche{flex:1 1 auto; min-width:0}
.eintrag{
  display:grid; grid-template-columns:1fr auto; gap:2px var(--s2); width:100%;
  min-height:44px; padding:10px var(--s4);
  text-decoration:none; color:var(--ink); position:relative;
}
/* Trennstrich beginnt am Text, nicht am Rand der Liste: ::after statt border,
   sonst liefe die Linie unter die 16px Innenabstand hinaus bis zur Kante. */
.eintrag:not(:last-child)::after{content:""; position:absolute; left:var(--s4); right:0; bottom:0; height:.5px; background:var(--line)}
.eintrag:hover{background:var(--surface-2)}
.eintrag[aria-current="true"]{background:var(--accent-soft)}
.eintrag[aria-current="true"]::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent)}
.eintrag .f{font-size:13px; font-weight:600; line-height:1.35}
.eintrag .c{font-size:11px; color:var(--ink-3)}
.eintrag .m{grid-column:1/-1; font-size:11px; color:var(--ink-2); display:flex; align-items:center; gap:var(--s1)}
.punkt{width:10px; height:10px; border-radius:99px; flex:none; background:var(--ink-3)}
.punkt.lead{background:var(--good)} .punkt.termin{background:var(--warn)}

.detail{padding:var(--s5); overflow-y:auto}
.d-kopf{display:flex; align-items:flex-start; gap:var(--s3); flex-wrap:wrap}
.d-kopf h1{margin:0; font-size:22px; line-height:1.2}
.d-titel{min-width:0; flex:1 1 auto}
.d-sub{font-size:12px; color:var(--ink-2); margin-top:3px; line-height:1.5}
.d-sub .pill{margin-left:var(--s1); vertical-align:1px}
.dq-hinweis{
  flex-basis:100%; font-size:12px; color:var(--ink-2); margin:var(--s2) 0 0;
  background:var(--surface-2); border-left:2px solid var(--ink-3);
  padding:var(--s2) var(--s3); border-radius:0 var(--radius) var(--radius) 0;
}
.dq-hinweis b{color:var(--ink); font-weight:600}

/* ---------- Aktionsleiste ---------- */
.aktionen{display:flex; gap:var(--s2); margin-top:var(--s4); flex-wrap:wrap; align-items:center}
.tat{position:relative}
/* Drei Stufen. Hervorgehoben mit Material (Verlauf plus Schatten aus dem
   Knopf-Labor), Zweitknopf als ruhige Kapsel, Drittknopf nur Text. */
/* Die Grundform liegt in einer eigenen Ebene. Styles ausserhalb einer Ebene
   gewinnen immer gegen sie, egal wie spezifisch. Vorher schlug die
   :not()-Kette mit ihren zwoelf Gliedern jede Klassenregel, und
   .anruf-nein, .nach button und .knopf-text wirkten nie (Messung
   26.09.2026). Die Kette bleibt, damit dieselben Knoepfe die Grundform
   bekommen wie bisher. Kein Verlauf, keine Innenschatten: der Zweitknopf
   entspricht .buttonStyle(.bordered). */
@layer basis{
.tat>summary,.knopf-link,button{font:inherit; cursor:pointer}
.tat>summary,.knopf-link,
button:not(.haupt):not(.abmelden):not(.zeile):not(.seg button):not(.passwort-auge):not(.neu-knopf):not(.haupt-knopf):not(.tor-knopf):not(.anruf-waehlen):not(.mini):not(.haken-knopf):not(.uhr-knopf){
  display:inline-block; height:34px; line-height:34px; padding:0 14px; font-size:15px; font-weight:600;
  background:var(--fill-2); color:var(--accent); border:0; border-radius:17px; vertical-align:middle;
  list-style:none; user-select:none; text-decoration:none; text-align:center;
  transition:transform .12s ease-out, filter .12s ease-out;
}
.tat>summary:active,.knopf-link:active,
button:not(.haupt):not(.abmelden):not(.zeile):not(.seg button):not(.passwort-auge):not(.neu-knopf):not(.haupt-knopf):not(.tor-knopf):not(.anruf-waehlen):not(.mini):not(.haken-knopf):not(.uhr-knopf):active{
  transform:scale(.96); filter:brightness(.94);
}
}
.tat>summary::-webkit-details-marker{display:none}
/* Zerstoerende Handlungen in Systemrot (HIG Buttons, Rolle destructive).
   Erkannt am Ziel des Formulars, damit die Vorlagen unveraendert bleiben. */
form[action$="/widerspruch"] button,form[action$="/unzustellbar"] button,
form[action$="/verwerfen"] button{color:var(--rot)}
.tat>summary.haupt,.formular button.haupt,.neu-knopf,.haupt-knopf,.tor-knopf,.anruf-waehlen{
  height:50px; border-radius:12px; font-size:17px; font-weight:600;
  color:var(--on-accent); border:0; display:inline-flex; align-items:center; justify-content:center;
  /* Eine getoente Flaeche wie .buttonStyle(.glassProminent). Der Verlauf
     mit drei Schatten aus dem Knopf-Labor hat kein Gegenstueck mehr im
     System (HIG Buttons und Color, Liquid Glass). */
  background:var(--accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .12s ease-out, filter .12s ease-out;
  cursor:pointer; text-decoration:none;
}
.tat>summary.haupt:hover,.formular button.haupt:hover,.neu-knopf:hover,.haupt-knopf:hover,.tor-knopf:hover,.anruf-waehlen:hover{filter:brightness(1.05)}
.tat>summary.haupt:active,.formular button.haupt:active,.neu-knopf:active,.haupt-knopf:active,.tor-knopf:active,.anruf-waehlen:active{
  transform:scale(.97); filter:brightness(.94);
}
/* Drittknopf: nur Text, kein Grund. Fuer leise Wege wie "Wieder ab Start". */
.knopf-text{background:none; border:0; padding:0; color:var(--accent); font:inherit; font-size:13px; font-weight:500; cursor:pointer; text-decoration:none}
.knopf-text:hover{text-decoration:underline}
.tat[open]>summary{filter:brightness(1.05)}
@media (prefers-reduced-motion:reduce){
  .tat>summary,.knopf-link,button,.neu-knopf,.haupt-knopf,.tor-knopf,.anruf-waehlen{transition:none!important}
  .tat>summary:active,.knopf-link:active,button:active,.neu-knopf:active,.haupt-knopf:active,.tor-knopf:active,.anruf-waehlen:active{transform:none!important}
}
.tat-form{
  position:absolute; z-index:20; top:calc(100% + var(--s1)); left:0; width:376px;
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  box-shadow:var(--shadow-hoch); padding:var(--s3);
}
.tat-form .reihe{display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:var(--s2)}
.knopf-link{margin-left:auto}

/* ---------- Kaesten ---------- */
.spalten{display:grid; grid-template-columns:268px minmax(0,1fr); gap:var(--s4); margin-top:var(--s5); align-items:start}
@media (max-width:900px){.spalten{grid-template-columns:minmax(0,1fr)}}
/* Gruppierte Liste statt Karte: die Box selbst ist nur noch die Flaeche.
   Die Gruppenueberschrift steht als eigenes Element DAVOR, nicht als Kopf
   darin, genau wie in Einstellungen.app. */
.box{background:var(--surface); border-radius:var(--radius); overflow:hidden; margin-bottom:22px}
.box-kopf{
  display:flex; align-items:center; gap:var(--s2);
  padding:0 var(--s4) 7px; margin-top:var(--s5);
  font-size:13px; text-transform:uppercase; letter-spacing:.08px;
  color:var(--ink-2); font-weight:600;
}
.box-kopf:first-child{margin-top:0}
.box-kopf .n{margin-left:auto; font-family:var(--mono); color:var(--ink-2); letter-spacing:0; text-transform:none}
.feld{
  position:relative; display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:2px var(--s3);
  min-height:44px; padding:10px var(--s4); font-size:13px; color:var(--ink);
  text-align:right;
}
.feld:not(:last-child)::after{content:""; position:absolute; left:var(--s4); right:0; bottom:0; height:.5px; background:var(--line)}
.feld .k{flex:none; font-size:13px; font-weight:400; text-transform:none; letter-spacing:0; color:var(--ink); text-align:left; margin-bottom:0}
.feld b{font-weight:600; text-align:left}
/* Der Wert steht nie als nackter Text da: ohne eigenes Element kann Flex ihn
   nicht schrumpfen, und ein langer Wert liefe unter der Box hindurch statt
   umzubrechen. .v traegt genau das nach, wo die Vorlage sonst nur Text haette. */
.feld .v,.feld>a:last-child,.feld>.num:last-child{flex:1 1 auto; min-width:0; text-align:right; overflow-wrap:break-word}
.feld a.v{color:var(--accent); text-decoration:none}
.feld a.v:hover{text-decoration:underline}
.aufgabe{position:relative; display:grid; grid-template-columns:18px 1fr; gap:var(--s2); min-height:44px; padding:10px var(--s4); align-items:start}
.aufgabe:not(:last-child)::after{content:""; position:absolute; left:var(--s4); right:0; bottom:0; height:.5px; background:var(--line)}
.aufgabe .t{display:block; font-size:13px}
.aufgabe .d{display:block; font-size:12px; color:var(--ink-3); margin-top:1px}
.aufgabe .d.heute{color:var(--warn); font-weight:600}
.wert{position:relative; display:flex; justify-content:space-between; align-items:baseline; min-height:44px; padding:10px var(--s4); font-size:13px}
.wert:not(:last-child)::after{content:""; position:absolute; left:var(--s4); right:0; bottom:0; height:.5px; background:var(--line)}
.wert span{color:var(--ink-3); font-size:12px}
.wert b{font-family:var(--mono); font-weight:600}
.befund{border-left:2px solid var(--accent)}
.befund .txt{padding:var(--s3); font-size:13px; line-height:1.6}
.befund .auf{padding:0 var(--s3) var(--s3); font-size:13px; color:var(--ink-2); line-height:1.6}
.befund .auf b{color:var(--ink); font-weight:600}

/* ---------- Verlauf ---------- */
.verlauf .vl{position:relative; display:flex; gap:var(--s3); align-items:flex-start; padding:10px var(--s4); min-height:44px}
.verlauf .vl:not(:last-child)::after{content:""; position:absolute; left:calc(var(--s4) + 64px + var(--s3)); right:0; bottom:0; height:.5px; background:var(--line)}
.vl-zeit{flex:0 0 64px; font-size:13px; line-height:18px; color:var(--ink-2); padding-top:2px; font-variant-numeric:tabular-nums}
.vl-sym{flex:none; width:28px; height:28px; border-radius:7px; background:var(--fill); display:flex; align-items:center; justify-content:center; color:var(--ink)}
.vl-sym.fehlt{background:var(--warn-soft); color:var(--warn)}
.vl-text{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px}
.vl-text .t{font-size:13px; line-height:1.45; color:var(--ink)}
.vl-text .t .pill{font-size:11px; padding:1px 6px; margin-left:2px; vertical-align:1px}
.vl-text .beleg{font-size:13px; line-height:1.5; color:var(--ink-2); overflow-wrap:anywhere; white-space:pre-line}
.vl-text .beleg.fehlt{color:var(--warn); white-space:normal}
.vl-text .nach{margin-top:var(--s1)}

/* ---------- Schlange (Heute) ---------- */
.wrap{padding:var(--s5)}
/* ---------- Segment: fuer Sichten mit 2 bis 4 Werten ---------- */
.seg-zeile{display:flex; align-items:center; justify-content:space-between; gap:var(--s2); margin-bottom:var(--s3)}
.seg{display:flex; align-items:center; gap:2px; background:var(--fill); border-radius:9px; padding:2px}
.seg button,.seg a{
  flex:1; font:inherit; font-size:13px; font-weight:500; border:0; background:transparent;
  color:var(--ink-2); padding:5px var(--s2); border-radius:7px; cursor:pointer;
  text-decoration:none; text-align:center; white-space:nowrap;
}
.seg button:active,.seg a:active{transform:none; filter:none}
.seg button[aria-current="true"],.seg a[aria-current="true"]{
  flex:1; background:var(--surface); color:var(--ink); font-weight:600;
  box-shadow:0 3px 8px rgba(0,0,0,.12);
}
.seg .anz{font-family:var(--mono); font-size:11px; margin-left:var(--s1)}
.seg-zeile .rest{flex:none; font-size:12px; color:var(--ink-3)}
/* Die vier Handy-Knoepfe sind durch das Auswahlmenue ersetzt (25.09.2026):
   alle Sichten passen nicht in eine Reihe, und vier davon waren am Handy
   ueberhaupt nicht erreichbar. Am Schreibtisch bleibt das Menue unsichtbar,
   dort steht die Seitenleiste mit allen daneben. */
.sichten-wahl{display:none}
@media (max-width:900px){
  .sichten-wahl{display:flex; gap:var(--s2); align-items:center; margin-bottom:var(--s2)}
  .sichten-wahl select{
    flex:1 1 auto; min-width:0; padding:9px 10px; font:inherit; font-size:15px;
    color:var(--ink); background:var(--surface-2); border:1px solid var(--line);
    border-radius:var(--radius);
  }
}
.sichten-zahl{font-size:12px; color:var(--ink-3); flex:none}
/* hidden setzt sichten.js; ohne diese Zeile gewaenne display aus .mini. */
.sichten-knopf[hidden]{display:none}
.liste-kopf .such-zeile{margin-bottom:0}
.schlange{border:1px solid var(--line); border-radius:8px; background:var(--surface); overflow:hidden}
.zeile{
  display:grid; grid-template-columns:24px minmax(160px,1.1fr) minmax(180px,1.5fr) auto auto 92px 32px;
  gap:0 var(--s3); align-items:center; padding:var(--s2) var(--s3);
  border-bottom:1px solid var(--line-soft);
  background:transparent; border-left:0; border-right:0; border-top:0;
  width:100%; text-align:left; font:inherit; color:var(--ink);
  position:relative;
}
.zeile:last-child{border-bottom:0}
.zeile:hover{background:var(--surface-2)}
/* Drei getrennte Ziele statt eines Knopfes um alles: Haken links, Akte in
   der Mitte, Uhr rechts. Solange die Zeile ein einziger Knopf war, hakte jeder
   Tipp sie ab, auch der, mit dem man sie nur ansehen wollte. */
.haken-knopf,.uhr-knopf{
  display:grid; place-items:center; width:100%; min-height:34px;
  background:none; border:0; padding:0; margin:0; box-shadow:none;
  color:inherit; cursor:pointer; border-radius:8px;
}
.uhr-knopf{color:var(--ink-3)}
.uhr-knopf:hover{color:var(--accent); background:var(--fill-2)}
/* Der Link traegt den Firmennamen und deckt ueber ::after die ganze Zeile ab.
   Die beiden Knoepfe liegen darueber, sonst faengt der Link ihre Klicks ab. */
.z-link{color:inherit; text-decoration:none}
.z-link::after{content:""; position:absolute; inset:0}
.zeile:hover .z-link{text-decoration:underline; text-underline-offset:2px}
.zeile .haken-knopf,.zeile .uhr-knopf{position:relative; z-index:1}
.haken{width:17px; height:17px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; color:transparent; flex:none; background:var(--surface)}
.zeile:hover .haken{border-color:var(--good); color:var(--good)}
.zeile.fertig .haken{background:var(--good); border-color:var(--good); color:var(--surface)}
.z-firma{font-size:13px; font-weight:500}
.z-was{font-size:13px; color:var(--ink-2)}
.z-was .kanal{color:var(--ink); font-weight:500}
.z-wert{font-family:var(--mono); font-size:12px; color:var(--ink-2); white-space:nowrap}
.z-frist{font-family:var(--mono); font-size:12px; color:var(--ink-3); text-align:right; white-space:nowrap}
.zeile.heute .z-frist{color:var(--ink); font-weight:600}
.zeile.spaet .z-frist{color:var(--warn); font-weight:600}
.zeile.verschieben{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s3);
  background:var(--surface-2);
}
.verschieb-wahl{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); margin-left:auto}
/* Der Telefonknopf in der Zeile (R18). Er muss ueber dem ::after-Overlay des
   Firmenlinks liegen, sonst faengt der Link seinen Tipp ab, so wie bei Haken
   und Uhr. */
.z-tel{
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:5px;
  margin-left:var(--s2); padding:3px 9px; border-radius:99px;
  font-size:12px; text-decoration:none; color:var(--accent);
  background:var(--accent-soft); white-space:nowrap;
}
.z-tel b{font-family:var(--mono); font-weight:500}
.z-tel:hover{filter:brightness(1.05)}
/* R8: der Haken fragt nach. Dasselbe Muster wie der Verschiebe-Streifen, die
   Zeile wird selbst zum Streifen. Darin steht der Schnellweg der Akte mit
   seinen eigenen Regeln (.anruf-wahl, .anruf-ja); hier nur, was der Streifen
   anders braucht. Oeffnet sich "Ja", nimmt das Formular die ganze Breite,
   wie im Feld der Pipeline. */
.zeile.frage{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s3);
  background:var(--surface-2);
}
.frage-text{font-size:12px; color:var(--ink-2)}
.zeile.frage .frage-wahl{flex-wrap:wrap; align-items:flex-start; margin-left:auto}
.zeile.frage .frage-wahl:has(.anruf-ja[open]),
.zeile.frage form.frage-wahl{flex:1 1 100%; margin-left:0}
.zeile.frage .anruf-ja[open]{flex:1 1 100%}
/* Die Zeile in der Akte (R18): ohne Firma, Status und Wert bleiben Haken,
   Aufgabe, Frist und Uhr. Sie sitzt in einer .box und braucht deren Rahmen
   nicht doppelt. */
.box .zeile.kompakt{grid-template-columns:24px minmax(0,1fr) auto 32px; padding:var(--s2) var(--s3)}
.box .zeile.kompakt:hover{background:transparent}
.zeile.frage form.frage-wahl textarea{
  width:100%; margin-top:4px; padding:8px 10px; font:inherit; font-size:13px;
  color:var(--ink); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); resize:vertical; min-height:76px;
}

/* ---------- Pillen ---------- */
/* Marke statt Pille: kein Rahmen, kein Versal-Text, nur Flaeche und Farbe.
   Seit 26.09.2026 dieselben Farben wie der Punkt in der Liste (.punkt):
   Termin orange, gewonnen gruen, der Rest grau. Die Toenung bleibt der
   Interaktion vorbehalten (HIG Color: eine Farbe, eine Bedeutung). */
.pill{font-size:12px; padding:2px var(--s2); border-radius:8px; white-space:nowrap; font-weight:600}
.pill.termin{background:var(--warn-soft); color:var(--warn)}
.pill.lead{background:var(--good-soft); color:var(--good)}
.pill.kontakt,.pill.raus{background:var(--fill); color:var(--ink-2)}
.pill.warn-pill{background:var(--warn-soft); color:var(--warn)}

/* ---------- Formulare ----------
   Ein Feld ist eine Listenzeile: Beschriftung links als normaler Text, Wert
   rechts, kein Rahmen. Nur die Textarea bleibt blockig, dafuer traegt sie
   .hat-block und bricht aus der Zeile aus. */
.formular{display:flex; flex-direction:column; gap:0; padding:var(--s3)}
.formular label{
  position:relative; display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:2px var(--s3);
  min-height:44px; padding:10px 0; font-size:13px; font-weight:400;
  text-transform:none; letter-spacing:0; color:var(--ink); text-align:right;
}
/* Immer eine Linie, nicht nur "ausser der letzten Zeile": .reihe steckt Felder
   nebeneinander in eigene Container, ":last-child" zaehlt dort pro Reihe statt
   pro Formular und liesse Luecken zwischen zwei Reihen offen. */
.formular label::after{content:""; position:absolute; left:0; right:0; bottom:0; height:.5px; background:var(--line)}
.formular label:has(textarea){flex-direction:column; align-items:stretch; text-align:left}
.formular input,.formular select{
  flex:1 1 auto; min-width:80px; font:inherit; font-size:13px; text-transform:none;
  letter-spacing:0; font-weight:400; color:var(--ink); background:none; border:0;
  border-radius:0; padding:0; text-align:right;
}
.formular textarea{
  font:inherit; font-size:13px; text-transform:none; letter-spacing:0; font-weight:400;
  color:var(--ink); background:var(--fill); border:0; border-radius:10px;
  padding:8px 10px; margin-top:4px; text-align:left;
}
.formular input::placeholder{color:var(--ink-3)}
.formular input:focus,.formular select:focus{outline:none}
.formular textarea:focus{outline:none; box-shadow:0 0 0 2px var(--accent-line)}
.formular textarea{min-height:66px; resize:vertical; line-height:1.55}
.formular .unter{flex-basis:100%; text-align:left}
.formular button.haupt{align-self:flex-start; padding:0 var(--s5); margin-top:var(--s3)}
.nach{flex-basis:100%; display:flex; gap:var(--s1); margin-top:var(--s2)}
.nach input{
  flex:1; min-width:0; font:inherit; font-size:12px; padding:5px var(--s2);
  border-radius:var(--radius); border:1px solid var(--line);
  background:var(--surface); color:var(--ink);
}

/* ---------- Einstellungen und Listen ---------- */
.ein-raster{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:var(--s4); padding:var(--s5); align-items:start}
.hinweis{margin:0; padding:0 var(--s3) var(--s3); font-size:12px; color:var(--ink-3); line-height:1.55}
.formular .hinweis{padding:0}
.meldung{margin:0; padding:var(--s2) var(--s3); font-size:13px; border-bottom:1px solid var(--line-soft)}
.meldung.gut{background:var(--good-soft); color:var(--good)}
.meldung.schlecht{background:var(--warn-soft); color:var(--warn)}
.feld .rollen{flex-basis:100%; display:block; font-size:12px; color:var(--ink-3); text-align:left; margin-top:1px}

/* Die Landeseite ist das einzige Feld mit Aktionen UND einer langen Adresse.
   Ohne eigene Regel quetscht das Flex-Raster beides in eine Zeile: die
   Adresse brach dann ueber drei Zeilen und das Wort "Freigeben" senkrecht
   Buchstabe fuer Buchstabe. Deshalb Knoepfe rechts in einer Zeile, die
   Adresse darunter ueber die volle Breite. */
.feld-landeseite{align-items:center}
.feld-landeseite .ls-tat{display:flex; align-items:center; gap:var(--s2); flex:none}
/* Das Formular verschwindet aus dem Layout, der Knopf wird direktes
   Flex-Kind. Sonst sitzt zwischen beiden Knoepfen ein Block, der bricht. */
.feld-landeseite .ls-tat form{display:contents}
.feld-landeseite .ls-tat>a,.feld-landeseite .ls-tat button{white-space:nowrap; flex:none}
.feld-landeseite .ls-adresse{flex-basis:100%; text-align:left; margin-top:var(--s1);
  font-size:12px; color:var(--ink-3); overflow-wrap:anywhere}
/* Monospace nur fuer die Adresse selbst. Ein ganzer Satz in Monospace liest
   sich wie eine Fehlermeldung, und genau das soll der Hinweis nicht sein. */
.feld-landeseite .ls-adresse.mono{font-family:var(--mono)}
.feld .zurueck{font-size:11px; color:var(--good); background:var(--good-soft); border:1px solid var(--good-line); border-radius:4px; padding:1px var(--s1); margin-left:var(--s1)}
.u-firma{font-size:13px; font-weight:500; color:var(--ink); text-decoration:none}
.u-firma:hover{color:var(--accent)}

/* ---------- Leerzustaende und Fussnoten ---------- */
.leer{padding:var(--s6) var(--s5); text-align:center; color:var(--ink-3); font-size:13px}
.leer .disp{display:block; font-size:15px; color:var(--ink-2); margin-bottom:var(--s1); font-weight:500}
.leer-klein{margin:0; padding:var(--s3); color:var(--ink-3); font-size:13px}
.fuss-hinweis{margin:var(--s5) 0 0; font-size:12px; color:var(--ink-3); line-height:1.65; max-width:78ch}
.fuss-hinweis b{color:var(--ink-2); font-weight:600}
.daten{display:grid; grid-template-columns:auto 1fr; gap:3px var(--s3); margin:0; font-size:13px; padding:var(--s3)}
.daten dt{color:var(--ink-3)}
.daten dd{margin:0}
.umbruch{overflow-wrap:anywhere}

/* Ein Posten, der aus mehr besteht als Beschriftung und Wert.
   .feld ist eine Flexzeile mit text-align:right, gedacht fuer "Name links,
   kurzer Wert rechts". Ein Block mit Zitat und Werteliste darin sah aus wie
   ein Satzfehler: das Zitat rechtsbuendig, die Werte in einer 231 Pixel
   schmalen Spalte umgebrochen. Gemessen am 15.09.2026 auf /crm/angefangen.
   Traeger bleibt .feld, damit Trennlinie und Polsterung dieselben sind wie
   ueberall sonst; nur der Fluss darin wird wieder ein Block. */
.feld.v-zeile{display:block; text-align:left}
/* Der Zustand, der Arbeit verlangt: angefangen und liegengeblieben. Eine
   allgemeine .warn-Klasse gibt es hier nicht, nur .seitenleiste .n.warn und
   .mehr-liste .n.warn; ein <b class="warn"> erbte deshalb stumm das Grau von
   .rollen. Gemessen am 15.09.2026, rgba(60,60,67,.3) statt der Warnfarbe.
   Zwei Klassen tief, damit es .rollen ueberbietet. */
.rollen .v-offen{color:var(--warn); font-weight:600}
.v-zeile .aufhaenger{margin:6px 0 4px}
.v-zeile .analyse{margin:6px 0 4px;white-space:pre-line}
.v-zeile .analyse.offen{color:var(--ink-3)}
.v-zeile .daten{padding:0; grid-template-columns:max-content 1fr; gap:2px var(--s3)}
.v-zeile .daten dd{text-align:left}
.lead-block{padding:var(--s2) var(--s3); border-bottom:1px solid var(--line-soft)}
.lead-block:last-child{border-bottom:0}
.lead-kopf{display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap}
.l-kampagne{font-size:13px; font-weight:500}

/* Muss .seitenleiste a ueberbieten, sonst gewinnt dessen ink-2 ueber die
   Spezifitaet und die Beschriftung verschwindet auf dem blauen Grund. */
.seitenleiste .neu-knopf{gap:var(--s2); margin-top:var(--s3); color:var(--on-accent)}
.seitenleiste .neu-knopf:hover{color:var(--on-accent)}
.seitenleiste .neu-knopf svg{color:currentColor}


.wrap.schmal{max-width:560px}
.formular.gross{padding:var(--s5); border:1px solid var(--line); border-radius:8px; background:var(--surface)}
.formular.gross .pflicht input{font-weight:600}
.unter{
  font-size:12px; color:var(--ink-3); text-transform:none; letter-spacing:0;
  font-weight:400; line-height:1.5; margin-top:1px;
}
.formular .tasten{display:flex; align-items:center; gap:var(--s3); margin-top:var(--s2)}
.formular button.haupt.gross{font-size:13px; padding:9px var(--s5); margin:0}
.meldung.rund{border:1px solid var(--warn-line); border-radius:8px; margin-bottom:var(--s3)}
.mehr{border-top:1px solid var(--line-soft); padding-top:var(--s3)}
.mehr>summary{
  font-size:13px; color:var(--ink-2); cursor:pointer; list-style:none;
  display:flex; align-items:center; gap:var(--s1); user-select:none;
}
.mehr>summary::-webkit-details-marker{display:none}
.mehr>summary::before{content:"+"; font-family:var(--mono); color:var(--ink-3)}
.mehr[open]>summary::before{content:"–"}
.mehr>summary:hover{color:var(--ink)}
.mehr-felder{display:flex; flex-direction:column; gap:var(--s3); margin-top:var(--s3)}
.h-zeile{
  display:flex; align-items:baseline; gap:var(--s3); padding:6px var(--s3);
  border-bottom:1px solid var(--line-soft); font-size:12px;
}
.h-zeile:last-child{border-bottom:0}
.h-wann{font-family:var(--mono); font-size:11px; color:var(--ink-3); white-space:nowrap}
.h-was{flex:1; color:var(--ink-2)}
.h-wer{font-size:11px; color:var(--ink-3); white-space:nowrap}
.konflikt{
  margin:var(--s4) 0 0; padding:var(--s3) var(--s4);
  background:var(--warn-soft); border:1px solid var(--warn-line);
  border-left:3px solid var(--warn); border-radius:0 8px 8px 0;
}
.konflikt b{color:var(--warn); font-size:12px; text-transform:uppercase; letter-spacing:.07em}
.konflikt p{margin:var(--s1) 0 0; font-size:13px; color:var(--ink-2)}
.k-stand{
  margin-top:var(--s2); padding:var(--s2) var(--s3);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
}
.k-titel{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:600}
.k-wert{font-size:13px; color:var(--ink)}

/* Wellen ------------------------------------------------------------------ */
/* Tabelle nach macOS: 13px, Kopf 11px Semibold im Zweittext ohne
   Versalien, Zeilen 28px, Trennstriche .5px, kein Rahmen aussen (den hat
   die Box schon nicht mehr). Ausgewaehlt heisst hier: Haken gesetzt. */
.tab{width:100%; border-collapse:collapse; font-size:13px}
.tab th{
  text-align:left; font-size:11px; font-weight:600; letter-spacing:0;
  color:var(--ink-2); height:28px; padding:4px var(--s3);
  border-bottom:.5px solid var(--line); white-space:nowrap}
.tab td{height:28px; padding:4px var(--s3); border-bottom:.5px solid var(--line); vertical-align:middle}
.tab tr:last-child td{border-bottom:0}
.tab tbody tr:hover td{background:var(--surface-2)}
.tab tr:has(input:checked) td{background:var(--accent-soft)}
.tab .r{text-align:right}
.tab .tat{display:inline-block; vertical-align:middle}
/* Wellen: Name mit Tag und Art, darunter die Orte; Touren als leise Zeile darunter. */
.welle-name b{white-space:nowrap}
.welle-name .m{display:block; font-size:12px; font-weight:400; color:var(--ink-2); max-width:260px}
.tour-zeile td{height:24px; font-size:12px; color:var(--ink-2)}
/* Am Handy scrollt die Tabelle in ihrer Box, statt dass die Box sie abschneidet. */
@media (max-width:900px){
  .box:has(> .tab){overflow-x:auto}
  .tab{min-width:680px}
}
.hinweis-klein{font-size:12px; color:var(--ink-3); line-height:1.5; margin:var(--s1) 0 var(--s2)}

/* Frist-Marke: „überfällig" passte nie in die 58px breite Spalte und lief
   ueber den rechten Rand hinaus. Jetzt eine Marke in fester Spaltenbreite. */
.marke{
  display:inline-block; padding:2px 7px; border-radius:99px;
  font-size:11px; font-weight:600;
  letter-spacing:.01em; line-height:1.5; white-space:nowrap}
.marke.spaet{background:var(--warn-soft); color:var(--warn); border:1px solid var(--warn-line)}
/* Der Scan ist ein Signal, keine Warnung und nichts zum Antippen. Deshalb
   neutral wie jede andere Auskunft, in Liste, Akte und Pipeline gleich. */
.marke.scan{background:var(--fill); color:var(--ink-2)}
/* Unzustellbar ist ein Datenmangel und bleibt grau, nicht rot: der Betrieb
   hat nichts falsch gemacht, nur die Adresse stimmt nicht. */
.marke.unzustellbar{background:var(--fill); color:var(--ink-2); border:1px solid var(--line)}
.d-sub .marke{margin-left:var(--s1); vertical-align:1px}
.warnung{
  display:flex; gap:6px; align-items:flex-start; margin:var(--s2) 0 0;
  padding:var(--s2); border-radius:6px; font-size:12px; line-height:1.5;
  background:var(--warn-soft); color:var(--warn); border:1px solid var(--warn-line)}
.mit-einheit{position:relative; display:block; flex:1 1 auto; min-width:80px}
.mit-einheit input{width:100%; padding-right:22px}
.mit-einheit i{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-style:normal; font-size:12px; color:var(--ink-3); pointer-events:none}
.leiste .uhr{font-family:var(--mono); font-variant-numeric:tabular-nums}
.haupt-knopf{padding:0 var(--s5)}
.tab td label{cursor:pointer}

/* ---------- Anmeldung ----------------------------------------------------
   Eigene Welt: hier gibt es keine Seitenleiste und keine Kopfzeile, also auch
   keinen Grund, das Raster des Buchs nachzubauen. Die Karte steht mittig auf
   dem Grund, die Marke darueber. */
.tor{min-height:100vh; display:grid; place-items:center; padding:var(--s5) var(--s3);
     background:var(--ground)}
.tor-mitte{width:100%; max-width:376px}
.tor-marke{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-bottom:var(--s5); color:var(--ink)}
/* Dasselbe Lockup eine Stufe groesser: 32px Kasten, 28px Wortmarke
   (Versalhoehe 19,7px = 32/phi), Abstand 19,7/phi = 12px. */
.tor-marke svg{width:32px; height:32px; flex:none; color:var(--accent)}
.tor-titel{font-size:28px; line-height:1; font-weight:600; letter-spacing:-.01em}
.tor-karte{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:var(--s5) var(--s4) var(--s4); box-shadow:var(--shadow-hoch)}
.tor-karte h1{margin:0; font-size:22px; font-weight:600; letter-spacing:-.015em; text-align:center}
.tor-unter{margin:6px 0 var(--s4); font-size:13px; color:var(--ink-3); text-align:center}
.tor-feld{position:relative; display:block; margin-bottom:var(--s2)}
.tor-feld svg{
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  color:var(--ink-3); pointer-events:none}
.tor-feld input{
  width:100%; padding:10px 12px 10px 34px; font:inherit; font-size:13px;
  color:var(--ink); background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--radius)}
.tor-feld input::placeholder{color:var(--ink-3)}
.tor-feld input:focus{outline:none; border-color:var(--accent); background:var(--surface);
  box-shadow:0 0 0 3px var(--accent-soft)}
.tor-feld:focus-within svg{color:var(--accent)}
.tor-knopf{width:100%; margin-top:var(--s3)}
.tor-knopf:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.tor-haken{
  display:flex; align-items:center; gap:8px; margin-top:var(--s3);
  font-size:13px; color:var(--ink-2); cursor:pointer}
.tor-haken input{width:14px; height:14px; accent-color:var(--accent); cursor:pointer}
.tor-fuss{
  margin-top:var(--s4); text-align:center; font-size:12px; line-height:1.6;
  color:var(--ink-3)}

/* ---------- Passwort sichtbar machen -------------------------------------- */
.hat-auge{position:relative}
.passwort-auge{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; border:0; border-radius:var(--radius);
  background:none; color:var(--ink-3); cursor:pointer;
}
.passwort-auge:hover{color:var(--ink)}
/* Das Auge sitzt im Feld, der Text darf nicht darunter laufen. */
.hat-auge input[type="password"],.hat-auge input[type="text"]{padding-right:42px}
/* In den Einstellungen sitzt das Feld unter einer Beschriftung im selben
   <label>, die Mitte waere also die Mitte von beidem. Deshalb dort am Feld
   ausrichten statt am Elternteil. */
.formular .hat-auge{display:flex; flex-direction:column}
.formular .passwort-auge{top:auto; bottom:3px; transform:none; height:28px}

/* ---------- Rueckmeldung nach dem Speichern ------------------------------- */
.erfolg{
  margin:0 0 var(--s3); padding:9px var(--s3); font-size:13px;
  color:var(--ink); background:var(--good-soft); border:1px solid var(--good-line);
  border-left:3px solid var(--good);
  border-radius:var(--radius);
}
/* Am Schreibtisch unsichtbar: dort steht die Seitenleiste daneben und jeder
   Ort ist einen Klick weit. Am Handy siehe unten. */
.zurueck-oben{display:none}
/* Ab 900px ist die Seitenleiste weg und die Tableiste da, also genau hier. */
@media (max-width:900px){
  .zurueck-oben{display:flex; align-items:center; gap:6px; min-height:44px; font-size:17px; color:var(--accent); text-decoration:none; padding:calc(var(--s1) + env(safe-area-inset-top)) var(--s1) var(--s1); margin:0}
  .zurueck-oben svg{flex:none}
  .zurueck-oben:active{opacity:.6}
}
.zurueck-liste{
  display:none; margin-bottom:var(--s2); font-size:13px; color:var(--accent);
  text-decoration:none; padding:8px 0;
}

/* ---------- Anruf-Schnellweg ----------------------------------------------
   Steht in der Akte ganz oben. Am Schreibtisch eine ruhige Zeile, auf dem
   Handy der Hauptweg: Meldung, Akte, waehlen, nachdiktieren.
   -------------------------------------------------------------------------- */
.anruf{
  /* Volle Breite und eigene Zeile: .aktionen ist eine Flex-Reihe, ohne das
     stellt sich der Block neben die Knoepfe und wird gequetscht. */
  flex-basis:100%; max-width:100%; margin-bottom:var(--s2);
}
.anruf-waehlen{gap:var(--s2); padding:0 var(--s5)}
.anruf-waehlen b{font-family:var(--mono); font-size:15px; letter-spacing:.01em}
.anruf-danach{display:flex; align-items:center; gap:var(--s2); margin-top:var(--s2);
  flex-wrap:wrap}
.anruf-frage{font-size:12px; color:var(--ink-2)}
.anruf-wahl{display:flex; align-items:center; gap:var(--s2); margin-left:auto}
.anruf-ja summary{
  list-style:none; cursor:pointer; display:inline-block; height:34px; line-height:34px;
  padding:0 14px; font-size:15px; font-weight:600; border:0; border-radius:17px;
  background:var(--accent-soft); color:var(--accent); text-align:center;
}
.anruf-ja summary::-webkit-details-marker{display:none}
.anruf-ja[open] summary{margin-bottom:var(--s2)}
.anruf-ja textarea{
  width:100%; margin-top:4px; padding:8px 10px; font:inherit; font-size:13px;
  color:var(--ink); background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--radius); resize:vertical; min-height:76px;
}
.anruf-ja textarea:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
/* "Nicht erreicht" ist der Zweitknopf aus der Grundform, "Ja" dieselbe
   Kapsel getoent. Die fruehere Regel hier wirkte nie, siehe @layer basis. */
.anruf-nein{white-space:nowrap}

/* ---------- Handy ----------------------------------------------------------
   Das CRM ist ein Desktop-Werkzeug. Auf dem Handy zaehlt genau eine Situation:
   die Meldung nach einem QR-Scan ist gekommen, und der Anruf soll jetzt raus.
   Alles hier dient diesem Weg, der Rest bleibt Schreibtischarbeit.

   Die 900px sind schon die Grenze der vorhandenen Regeln weiter oben. Sie
   griffen bis zum 31.08.2026 nie, weil die Seite auf width=1280 genagelt war.
   -------------------------------------------------------------------------- */
@media (max-width:700px){

  /* iOS zoomt in JEDES Eingabefeld unter 16px hinein und bleibt danach
     hineingezoomt. Auf der Anmeldeseite passiert das wegen autofocus sofort
     beim Oeffnen, die Karte haengt dann halb ausserhalb des Bildschirms.
     16px ist kein Geschmack, sondern die Schwelle von Safari. */
  input, select, textarea, .suche{font-size:16px !important}

  /* Daumen statt Mauszeiger: der Hervorgehobene ist mit 50px schon darueber,
     nur der bare Bare-Fallback ohne eigene Stufe braucht die Hilfe. */
  @layer basis{button:not(.haupt):not(.abmelden):not(.zeile):not(.seg button):not(.passwort-auge):not(.knopf-link):not(.haken-knopf):not(.uhr-knopf){min-height:44px}}

  .tor{padding:var(--s4) var(--s3)}
  .tor-karte{padding:var(--s4) var(--s3) var(--s3)}

  /* Die Aufgabenzeile ist ein Sechs-Spalten-Raster mit Mindestbreiten und
     braucht damit 456px. Bei 393px lief sie nicht nur ueber, sie wurde vom
     overflow:hidden der Schlange ABGESCHNITTEN: Frist und Status waren
     schlicht weg, ohne Scrollbalken, ohne Hinweis. Gemessen, nicht vermutet.
     Auf dem Handy bricht sie deshalb in drei Zeilen um. */
  /* 44px, nicht 24: die Spalte IST die Trefflaeche. Gemessen bei 393px war
     der Haken 24px breit, also rund vier Millimeter, und er wird mit dem
     Daumen im Stehen getroffen. Der Kreis bleibt 17px und sitzt mittig. */
  .zeile{
    grid-template-columns:44px minmax(0,1fr) auto 44px;
    grid-template-areas:
      "haken firma frist uhr"
      "haken was   was   uhr"
      "haken pille wert  uhr";
    gap:3px var(--s2); align-items:start; text-align:left; padding:var(--s3);
  }
  /* Haken und Uhr spannen ueber alle drei Zeilen und sind damit von selbst
     daumengross, ohne dass ein min-height das Raster aufblaeht. */
  .zeile .haken-knopf{grid-area:haken; align-self:stretch}
  .zeile .uhr-knopf{grid-area:uhr; align-self:stretch}
  .zeile .z-firma{grid-area:firma; min-width:0}
  .zeile .z-frist{grid-area:frist}
  .zeile .z-was{grid-area:was; min-width:0}
  .zeile .pill{grid-area:pille; justify-self:start}
  .zeile .z-wert{grid-area:wert; justify-self:end}
  /* Daumengross, und auf eigener Zeile unter der Aufgabe: der tel-Link ist
     das einzige Ziel in der Zeile, das aus dem CRM herausfuehrt. */
  .z-tel{display:flex; width:max-content; margin:6px 0 0; padding:8px 12px; font-size:15px; min-height:44px}
  /* Der Frage-Streifen bricht das Drei-Zeilen-Raster auf: er hat keine
     Bereiche und darf sie nicht erben, sonst stapeln sich die Knoepfe in der
     Haken-Spalte. Die Knoepfe darunter nehmen die ganze Breite. */
  .zeile.frage{grid-template-columns:none; grid-template-areas:none; padding:var(--s3)}
  .zeile.frage .frage-wahl{margin-left:0; width:100%}
  .box .zeile.kompakt{
    grid-template-columns:44px minmax(0,1fr) auto 44px;
    grid-template-areas:"haken was frist uhr";
  }

  .leiste{flex-wrap:wrap; gap:var(--s2) var(--s3)}
  .inhalt{padding:var(--s3)}
  .wrap,.ein-raster{padding:var(--s1) var(--s1) var(--s5)}

  .d-kopf h1{font-size:22px; font-weight:700; letter-spacing:.35px; line-height:28px}
  .d-sub{font-size:15px; margin-top:6px}
  .detail{padding:var(--s1) var(--s1) var(--s5)}

  /* Die Klappformulare haengen am Schreibtisch als 376px breites Menue unter
     ihrem Knopf. Auf dem Handy ragt genau das ueber den rechten Rand hinaus
     und macht die ganze Seite seitlich scrollbar. Gemessen, nicht vermutet.
     Hier gehoeren sie in den normalen Fluss. */
  .aktionen{gap:var(--s2)}
  .tat{position:static; flex-basis:calc(50% - var(--s2)/2)}
  .aktionen .tat>summary,.aktionen .knopf-link{display:block; height:auto; line-height:1.3; text-align:center; padding:11px var(--s2)}
  .tat-form{
    position:static; width:100%; margin-top:var(--s2);
    box-shadow:none; padding:var(--s3) var(--s2);
  }
  /* Ein offenes Formular nimmt die ganze Breite, sonst tippt man in eine Spalte. */
  .aktionen:has(.tat[open]) .tat[open]{flex-basis:100%}
  .aktionen .knopf-link{margin-left:0; flex-basis:calc(50% - var(--s2)/2)}

  /* Liste und Akte stehen hier untereinander. Wer einen Betrieb antippt,
     bliebe also oben in der Liste stehen und muesste daran vorbeiscrollen.
     Deshalb: eine offene Akte verdeckt die Liste, und ein Rueckweg erscheint.
     Die Liste bleibt im Markup, das Zurueck kostet also keinen Seitenaufruf. */
  .split.hat-akte .liste{display:none}
  .split.hat-akte .zurueck-liste{display:flex; align-items:center; gap:6px; min-height:44px; font-size:17px; padding:calc(var(--s1) + env(safe-area-inset-top)) var(--s1) var(--s1); margin:0}
  .zurueck-liste svg{flex:none}
  /* Ohne Akte gibt es hier nichts zu zeigen, der Platzhalter ist Schreibtischtext. */
  .split:not(.hat-akte) .detail{display:none}

  /* Der Anruf ist auf dem Handy die Hauptsache, nicht eine Zeile unter vielen. */
  .anruf-waehlen{width:100%; padding:0 var(--s3); font-size:17px}
  .anruf-waehlen b{font-size:17px}
  .anruf-danach{flex-direction:column; align-items:stretch; gap:var(--s2)}
  .anruf-wahl{margin-left:0; display:grid; grid-template-columns:1fr 1fr; gap:var(--s2)}
  .anruf-ja{grid-column:1}
  .anruf-ja summary{width:100%; height:auto; line-height:1.3; padding:11px}
  .anruf-nein{width:100%}
  /* Ist das Memo offen, braucht es die ganze Breite, sonst tippt man in eine
     Spalte. Der Kindselektor ist Pflicht: ohne ">" trifft form:last-child auch
     das Memo-Formular INNERHALB von .anruf-ja und blendet genau das Feld aus,
     das man gerade braucht. */
  .anruf-wahl:has(.anruf-ja[open]){grid-template-columns:1fr}
  .anruf-wahl:has(.anruf-ja[open]) > form:last-child{display:none}
}

/* ---------- Textstile am iPhone --------------------------------------------
   Ernests Plan vom 02.09.2026 (Schritt 2.1) sah fuer Listen 17 px am Handy
   und 13 px am Mac vor; umgesetzt war es nur in Mehr und Tour. Hier fuer
   Heute, Liste und Akte nachgezogen, in den iOS-Stilen: .headline 17,
   .body 17, .subheadline 15, .footnote 13.
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .z-firma{font-size:17px; font-weight:600; line-height:22px}
  .z-was{font-size:15px; line-height:20px}
  .z-wert,.z-frist{font-size:13px}
  .pill{font-size:13px}
  .eintrag .f{font-size:17px; line-height:22px}
  .eintrag .m{font-size:15px; line-height:20px}
  .eintrag .c{font-size:13px}
  .feld,.feld .k,.wert,.aufgabe .t{font-size:17px}
  .wert span,.aufgabe .d{font-size:15px}
  .vl-text .t{font-size:17px; line-height:22px}
  .vl-text .beleg{font-size:15px; line-height:20px}
  .befund .txt{font-size:17px}
  .befund .auf{font-size:15px}
  .formular label{font-size:17px}
  .erfolg,.leer{font-size:15px}
  .fuss-hinweis{font-size:13px}
}

/* ---------- Tableiste: vier Orte und die Suche am Handy --------------------
   Seit Schritt 2 (27.09.2026) eine schwebende Glas-Kapsel ueber dem Inhalt,
   rechts daneben die Suche als eigener Kreis (HIG Tab bars: "A tab bar
   floats above content ... on a Liquid Glass background"; "A tab bar can
   include a dedicated search tab at the trailing end"). Statt einer
   Haarlinie verschwimmt der Inhalt zur unteren Kante hin (Scroll-Kante).
   SwiftUI: TabView mit Tab und Tab(role: .search), .badge an Unbelegt.
   -------------------------------------------------------------------------- */
.tabbereich{display:none}
@media (max-width:900px){
  .tabbereich{display:block}
  /* Scroll-Kante unten: der Inhalt verschwimmt, bevor er unter die Kapsel
     laeuft. Nur Unschaerfe mit Verlauf, keine Linie, keine Flaeche. */
  .tabbereich::before{
    content:""; position:fixed; left:0; right:0; bottom:0; z-index:29; pointer-events:none;
    height:calc(96px + env(safe-area-inset-bottom));
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    -webkit-mask-image:linear-gradient(transparent, #000 70%); mask-image:linear-gradient(transparent, #000 70%);
  }
  .tableiste,.such-tab{
    position:fixed; z-index:30; bottom:max(12px, env(safe-area-inset-bottom));
    background:var(--glas); border:.5px solid var(--glas-rand);
    box-shadow:var(--glas-schatten), inset 0 .5px 0 var(--glas-glanz);
    -webkit-backdrop-filter:blur(20px) saturate(1.8); backdrop-filter:blur(20px) saturate(1.8);
  }
  .tableiste{
    left:var(--s4); right:calc(var(--s4) + 62px + 10px); height:62px; border-radius:31px;
    display:flex; align-items:center; justify-content:space-around; padding:0 6px;
  }
  .tableiste a{
    position:relative; flex:1 1 0; min-width:0; max-width:86px;
    display:flex; flex-direction:column; align-items:center; gap:2px;
    padding:5px 0; border-radius:26px; text-decoration:none;
    font-size:10px; font-weight:600; line-height:1.2; color:var(--ink);
    -webkit-tap-highlight-color:transparent;
  }
  .tableiste a span{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .tableiste a svg{width:26px; height:26px; flex:none}
  /* Der aktive Ort in der Toenung auf einer leichten Flaeche, wie die
     Auswahl in der Tableiste von iOS. */
  .tableiste a[aria-current="true"]{color:var(--accent); background:var(--fill-2)}
  .tableiste a:active{opacity:.6}
  /* Badge: rotes Oval mit weisser Zahl, nur fuer Unbelegt. */
  .tableiste .badge{
    position:absolute; top:1px; left:calc(50% + 6px); min-width:18px; height:18px; padding:0 5px;
    border-radius:9px; background:var(--rot); color:#fff;
    font-size:12px; font-weight:600; line-height:18px; text-align:center; font-variant-numeric:tabular-nums;
  }
  .such-tab{
    right:var(--s4); width:62px; height:62px; border-radius:50%;
    display:grid; place-items:center; color:var(--ink); text-decoration:none;
    -webkit-tap-highlight-color:transparent;
  }
  .such-tab[aria-current="true"]{color:var(--accent)}
  .such-tab:active{opacity:.6}
  /* Damit die letzte Zeile nicht unter der Kapsel verschwindet. */
  .inhalt{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
  .leiste .leiste-suche,.leiste-suche-form{display:none}
  /* Am Handy steht der grosse Titel im Inhalt, ohne Scroll-Kante; die
     bringt dort die kompakte Kopfzeile mit. */
  .leiste::before{display:none}
}
/* Ohne Weichzeichner oder auf Wunsch (Transparenz reduzieren) werden die
   Leisten deckend und die Scroll-Kanten verschwinden. Der Text bleibt
   derselbe. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .tableiste,.such-tab,.kopf-kompakt,.seitenleiste{background:var(--surface)}
  .leiste::before{background:var(--ground)}
}
@media (prefers-reduced-transparency:reduce){
  .tableiste,.such-tab,.kopf-kompakt,.seitenleiste{background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none}
  .tabbereich::before{display:none}
  .leiste::before{background:var(--ground); -webkit-backdrop-filter:none; backdrop-filter:none; -webkit-mask-image:none; mask-image:none}
}

/* ---------- Grosser Titel am Handy --------------------------------------
   Die Kopfzeile des Schreibtischs wird am Handy zum grossen Titel (34px,
   Large Title nach HIG) mit dem Nutzer als Kreis rechts. Beim Scrollen
   blendet kopf.js die kompakte Kopfzeile aus Glas ein.
   -------------------------------------------------------------------------- */
.avatar,.kopf-kompakt{display:none}
@media (max-width:900px){
  .leiste{
    position:static; height:auto; border:0; background:transparent; z-index:auto;
    display:grid; grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"datum datum" "titel avatar";
    align-items:end; gap:0 var(--s3);
    /* Als App vom Home-Bildschirm laeuft der Inhalt unter die Statusleiste,
       der Titel braucht dann den Abstand nach oben. In Safari ist er 0. */
    padding:calc(var(--s2) + env(safe-area-inset-top)) var(--s1) var(--s2);
  }
  .leiste .titel-zeile{
    grid-area:titel; margin:0; min-width:0; overflow-wrap:anywhere;
    font-size:34px; font-weight:700; letter-spacing:.37px; line-height:41px;
  }
  /* Das Datum nur ueber Heute, wo es die Frage beantwortet, die die Seite
     stellt. Die Uhr und die Abschluesse bleiben Schreibtischsache. */
  .leiste .datum{grid-area:datum; display:none; font-size:13px; font-weight:600; color:var(--ink-2)}
  body[data-seite="heute"] .leiste .datum:not(.uhr){display:block}
  .leiste .uhr,.leiste .zahl{display:none}
  .avatar{
    grid-area:avatar; display:flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:17px; margin-bottom:5px;
    background:var(--fill); color:var(--ink-2); font-size:13px; font-weight:600;
    text-decoration:none; -webkit-tap-highlight-color:transparent;
  }
  .avatar:active{opacity:.6}
  .kopf-kompakt{
    position:fixed; top:0; left:0; right:0; z-index:30;
    display:flex; align-items:center; justify-content:center;
    padding:env(safe-area-inset-top) var(--s4) 0;
    font-size:17px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    /* Kein Glasbalken mit Haarlinie mehr: der Titel steht auf einer
       Scroll-Kante, die nach unten ausblendet (HIG Scroll views). */
    background:color-mix(in srgb, var(--ground) 72%, transparent);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    -webkit-mask-image:linear-gradient(#000 70%, transparent); mask-image:linear-gradient(#000 70%, transparent);
    height:calc(56px + env(safe-area-inset-top));
    opacity:0; pointer-events:none; transition:opacity .18s ease-out;
  }
  .kopf-kompakt.sichtbar{opacity:1}
  .inhalt:has(.split.hat-akte) .leiste{display:none}
}

/* ---------- Mehr: der vierte Ort ---------- */
.mehr-seite{max-width:560px}
.mehr-liste form{margin:0}
.mehr-liste>a,.mehr-liste .abmelden{
  position:relative; display:flex; align-items:center; gap:var(--s3);
  width:100%; min-height:44px; padding:10px var(--s4); border-radius:0;
  font:inherit; font-size:13px; color:var(--ink); text-decoration:none;
  background:transparent; border:0; cursor:pointer; text-align:left;
}
.mehr-liste>a:hover,.mehr-liste .abmelden:hover{background:var(--surface-2); color:var(--ink)}
.mehr-liste>a:not(:last-child)::after{content:""; position:absolute; left:calc(var(--s4) + 27px); right:0; bottom:0; height:.5px; background:var(--line)}
.mehr-liste svg{flex:none; color:var(--ink-2)}
.mehr-liste .t{flex:1 1 auto; min-width:0}
.mehr-liste .n{font-family:var(--mono); font-size:12px; color:var(--ink-2)}
.mehr-liste .n.warn{color:var(--warn); font-weight:600}
/* Chevron rechts, wie in jeder Einstellungen-Liste: der Weg geht weiter. */
.mehr-liste>a::before{
  content:""; order:9; width:7px; height:7px; flex:none; margin-right:3px;
  border-right:1.5px solid var(--ink-3); border-bottom:1.5px solid var(--ink-3);
  transform:rotate(-45deg);
}
.mehr-liste .abmelden{color:var(--accent); justify-content:center}
.mehr-liste .abmelden svg{color:var(--accent)}
.mehr-liste .abmelden .t{flex:none}
.mehr-marke{display:flex; align-items:center; justify-content:center; gap:5px; margin:var(--s5) 0 0; font-size:12px; line-height:1; color:var(--ink-3)}
.mehr-marke svg{width:14px; height:14px; flex:none; color:var(--ink-3)}
@media (max-width:900px){
  .mehr-liste>a,.mehr-liste .abmelden{font-size:17px; padding:11px var(--s4)}
  .mehr-liste svg{width:20px; height:20px}
  .mehr-liste>a:not(:last-child)::after{left:calc(var(--s4) + 32px)}
}

/* ---------- Tour: die Fahrradrunde, gebaut fuers Handy ----------------
   Zwei Zeilen als Gruppe (Welle, Start), ein hervorgehobener Knopf, dann die
   Halte als Liste in Etappen: Nummer, Name, Strasse und Ort, rechts die
   Etappe. Darunter je Halt die Tatenzeile, um die Nummernspalte eingerueckt.
   Der eine hervorgehobene Knopf wechselt mit dem Stand: Tour planen, Tour
   starten, Route oeffnen.
   -------------------------------------------------------------------------- */
.tour{max-width:600px}
.tour-form{padding:0; margin-bottom:0}
.tour-form label{padding:10px var(--s4)}
.tour-form label::after{left:var(--s4)}
.tour-form label:last-child::after{display:none}
/* 16px, sonst zoomt iOS Safari beim Tippen in die Seite */
.tour .formular input,.tour .formular select{font-size:16px}
.tour-planen{width:100%; margin:var(--s4) 0 22px}
.halte{list-style:none; margin:0 0 22px; padding:0}
.halt{position:relative; padding:10px var(--s4) 12px}
.halt:not(:last-child)::after{content:""; position:absolute; left:calc(var(--s4) + 24px + var(--s3)); right:0; bottom:0; height:.5px; background:var(--line)}
.halt-zeile{display:flex; gap:var(--s3); align-items:flex-start}
.halt-nr{flex:0 0 24px; font-size:13px; line-height:20px; color:var(--ink-2)}
.halt-text{flex:1 1 auto; min-width:0; display:flex; flex-direction:column}
.halt-text .f{font-size:13px; font-weight:600; line-height:20px}
.halt-text .m{font-size:12px; line-height:16px; color:var(--ink-2)}
.halt-km{flex:none; font-size:13px; line-height:20px; color:var(--ink-2)}
.halt-taten{display:flex; gap:var(--s2); align-items:center; margin-top:var(--s2); padding-left:calc(24px + var(--s3))}
.halt-taten .knopf-link{margin-left:0}
.halt-taten .einwurf{padding:0; margin-left:auto}
/* Kapsel statt Hervorgehoben: in einer Listenzeile waere 50px zu hoch. */
.halt-taten .einwurf button.haupt{
  height:36px; padding:0 var(--s4); border-radius:18px; font-size:15px; margin:0;
}
/* Ein eingeworfener Halt bleibt in der Liste, damit die Nummern stimmen,
   tritt aber zurueck; die Nummer wird gruen, das ist der Haken. */
.halt.eingeworfen .f,.halt.eingeworfen .m{color:var(--ink-3)}
.halt.eingeworfen .halt-nr{color:var(--accent); font-weight:600}
/* Der Haken darf schrumpfen, sonst laeuft er am Handy aus der Zeile. */
.halt-haken{margin-left:auto; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:13px; font-weight:600; color:var(--accent); white-space:nowrap}
.tour-ende{margin:var(--s3) 0 var(--s5); text-align:center}
.tour-ende form{display:inline}
@media (max-width:900px){
  .halt-nr,.halt-km{font-size:15px; line-height:22px}
  .halt-text .f{font-size:17px; line-height:22px}
  .halt-text .m{font-size:15px; line-height:20px}
  .halt-haken{font-size:15px}
}

/* ==========================================================================
   Ziel: der Zaehler der Briefkampagne.
   Diese Seite wird abfotografiert und in eine Gruppe geschickt. Sie ist
   deshalb nach dem ersten Bildschirm gebaut: eine grosse Zahl, ein Balken,
   vier Kacheln. Wer nur den Screenshot sieht, weiss trotzdem Bescheid.
   ========================================================================== */
.ziel-kopf{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:var(--s5) 0 var(--s6);
}
/* clamp statt fester Groesse: auf dem iPhone SE darf die Zahl schrumpfen,
   auf dem Mac soll sie nicht ins Alberne wachsen. */
.ziel-gross{
  font-size:clamp(56px, 17vw, 88px); font-weight:650; letter-spacing:-.04em;
  line-height:1; color:var(--ink);
}
.ziel-unter{margin-top:var(--s2); font-size:15px; color:var(--ink-2)}
.ziel-unter b{color:var(--accent); margin-left:var(--s1); font-weight:600}

/* Der Balken ist ein SVG, siehe die Begruendung in ziel.html: die CSP
   verwirft Inline-Styles, eine Breite in Prozent kann also nicht am Element
   stehen. Die Rundung macht der Container, die Balken selbst sind eckig. */
.ziel-balken{
  display:block; width:100%; max-width:420px; height:10px;
  margin:var(--s4) 0 0; border-radius:99px; overflow:hidden;
}
.b-spur{fill:var(--fill-2)}
.b-ist{fill:var(--accent)}
/* Die Marke liegt mal auf der grauen Spur, mal im gruenen Balken, je
   nachdem ob der Plan vorn liegt. --ink hat gegen beide Kontrast, --ink-2
   verschwand im Gruen. */
.b-marke{fill:var(--ink); opacity:.55}
.ziel-lage{margin:var(--s3) 0 0; font-size:13px; color:var(--ink-2); max-width:34ch}
.ziel-lage b{font-weight:600}
.ziel-lage.warn b{color:var(--warn)}
.ziel-lage.good b{color:var(--good)}

/* Vier Kacheln, am Handy zwei mal zwei, am Mac in einer Reihe. auto-fit
   statt fester Spaltenzahl: zwischen 600 und 900px liegt sonst ein Bereich,
   in dem eine Kachel allein in der zweiten Reihe steht. */
.ziel-kacheln{
  display:grid; gap:var(--s2); grid-template-columns:repeat(2, minmax(0, 1fr));
  margin-bottom:22px;
}
@media (min-width:700px){
  .ziel-kacheln{grid-template-columns:repeat(4, minmax(0, 1fr))}
}
.ziel-kachel{
  display:flex; flex-direction:column; gap:2px;
  background:var(--surface); border-radius:var(--radius);
  padding:var(--s3); min-width:0;
}
@media (min-width:400px){.ziel-kachel{padding:var(--s3) var(--s4)}}
.ziel-kachel.betont{background:var(--accent-soft)}
.k-zahl{font-size:clamp(20px, 6.5vw, 26px); font-weight:600; letter-spacing:-.02em; color:var(--ink); line-height:1.15}
.ziel-kachel.betont .k-zahl{color:var(--accent-dunkel)}
.k-text{font-size:13px; color:var(--ink-2)}
.k-fuss{font-size:11px; color:var(--ink-3); margin-top:2px}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ziel-kachel.betont .k-zahl{color:var(--accent-hell)}
}
:root[data-theme="dark"] .ziel-kachel.betont .k-zahl{color:var(--accent-hell)}

.ziel-block{margin-bottom:22px}
.ziel-titel{
  margin:0 0 var(--s2); font-size:13px; font-weight:600; color:var(--ink-2);
  text-transform:uppercase; letter-spacing:.04em;
}
.ziel-phasen{list-style:none; margin:0; padding:0; background:var(--surface); border-radius:var(--radius); overflow:hidden}
/* Jede Zelle wird ausdruecklich gesetzt. Mit automatischer Platzierung
   rutschte die Zahl nach links und der Name nach rechts: ein Element mit
   grid-row und ohne grid-column darf sich die Spalte selbst suchen. */
.ziel-phasen li{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 var(--s3);
  padding:var(--s3) var(--s4); border-bottom:.5px solid var(--line-soft);
}
.ziel-phasen li:last-child{border-bottom:0}
.ziel-phasen li.laeuft{background:var(--accent-soft)}
.ziel-phasen li.vorbei .p-name,.ziel-phasen li.vorbei .p-soll{color:var(--ink-3)}
.p-name{grid-column:1; grid-row:1; font-size:13px; font-weight:500; color:var(--ink)}
.p-zeit{grid-column:1; grid-row:2; font-size:11px; color:var(--ink-2)}
.p-soll{
  grid-column:2; grid-row:1 / span 2; align-self:center; text-align:right;
  font-size:17px; font-weight:600; color:var(--ink);
}

.ziel-liste{margin:0; padding:0; background:var(--surface); border-radius:var(--radius); overflow:hidden}
.ziel-liste > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
  padding:var(--s3) var(--s4); border-bottom:.5px solid var(--line-soft);
}
.ziel-liste > div:last-child{border-bottom:0}
.ziel-liste dt{font-size:13px; color:var(--ink-2); margin:0}
.ziel-liste dd{margin:0; font-size:15px; color:var(--ink); font-weight:500}
.ziel-liste .summe dt,.ziel-liste .summe dd{font-weight:600; color:var(--ink)}
.ziel-fuss{margin:var(--s2) 0 0; font-size:11px; color:var(--ink-3); line-height:1.6; max-width:70ch}


/* ---------- Welle abschicken ----------------------------------------------
 * Die Karte ist breiter als die uebrigen Tat-Formulare, weil sie eine Liste
 * traegt. Bis zum 16.09.2026 stand hier nur ein Datum und ein vorangekreuzter
 * Haken "selbst eingeworfen": wer nicht hinsah, buchte null Euro Porto fuer
 * eine Sendung, die 23,75 gekostet hat. */
/* Die Karte steht in einer rechtsbuendigen Tabellenzelle und erbt deren
 * Ausrichtung. Ohne diese Zeile stehen Beschriftungen, Rollen und der Knopf
 * rechts, und der Blick springt bei jeder Zeile. Gesehen im iPhone-Profil. */
.tat-form.abschicken{width:420px; text-align:left}
.tat-form.abschicken .k-zeile{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-top:var(--s3)}
/* Ein Nebenweg, kein Knopf: er darf nicht wichtiger aussehen als das
 * Abschicken darunter. Die Ausnahme steht zusaetzlich oben in der :not()-Kette
 * der Basisregel, so wie tor-knopf und neu-knopf es auch tun. Ohne diesen
 * Eintrag gewinnt die Basisregel, denn acht :not() schlagen jede Klassenregel
 * hier unten. Gemessen am berechneten Stil, nicht vermutet. */
.mini{
  background:none; border:0; padding:0; margin:0;
  font-size:12px; font-weight:400; color:var(--accent);
  text-decoration:underline; text-underline-offset:2px; cursor:pointer;
  box-shadow:none; width:auto}
.mini:hover{color:var(--ink)}

/* Die Liste bleibt scrollbar, damit eine Welle mit 80 Betrieben die Karte
 * nicht ueber den Bildschirmrand schiebt. */
.auswahl{
  list-style:none; margin:var(--s1) 0 0; padding:0;
  max-height:186px; overflow-y:auto;
  border:1px solid var(--line); border-radius:6px; background:var(--surface-2)}
.auswahl li+li{border-top:1px solid var(--line)}
.auswahl label{
  display:flex; align-items:center; gap:8px; padding:7px 10px;
  font-size:13px; cursor:pointer}
.auswahl label:hover{background:var(--accent-soft)}
.auswahl input{width:14px; height:14px; accent-color:var(--accent); flex:none; cursor:pointer}
.auswahl .n{color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.auswahl .o{margin-left:auto; color:var(--ink-3); font-size:12px; flex:none}
/* Die persoenliche Zeile (R13) steht unter dem Namen, nicht daneben: sie
   ist ein Satz, kein Merkmal, und bei 393px waere die Spalte daneben zwei
   Woerter breit. Die Regel fuer .auswahl input meint die Haken, deshalb
   hier die Breite ausdruecklich zurueck. */
.auswahl .zeilen-feld{
  display:block; width:calc(100% - 20px); height:auto; margin:0 10px 7px;
  padding:5px 8px; font:inherit; font-size:13px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  cursor:text; box-sizing:border-box;
}
/* Die Brief-Vorlage je Kampagne (R13) klappt unter ihrer Tabellenzeile auf. */
.vorlage-zeile td{padding-top:0}
.vorlage summary{cursor:pointer; font-size:13px; color:var(--ink-2)}
.vorlage .formular{margin-top:var(--s2)}
.auswahl .zeilen-feld:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}

/* Drei Moeglichkeiten, keine vorausgewaehlt. Die Wahl ist der Punkt. */
.versandart{border:0; margin:var(--s3) 0 0; padding:0}
.versandart legend{padding:0; margin-bottom:var(--s1)}
.versandart .art{
  display:flex; align-items:flex-start; gap:8px; padding:8px 10px;
  border:1px solid var(--line); border-radius:6px; margin-top:6px;
  font-size:13px; cursor:pointer}
.versandart .art:hover{border-color:var(--accent)}
.versandart .art input{margin-top:2px; accent-color:var(--accent); flex:none; cursor:pointer}
.versandart .art:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}
.versandart .art b{display:block; font-weight:600; color:var(--ink)}
.versandart .art small{display:block; color:var(--ink-3); font-size:12px; margin-top:1px}

.versandart .bon{display:none; padding:6px 10px 0 32px}
.versandart .art:has(input[value="post"]:checked)+.bon{display:block}
.versandart .bon input{width:96px; text-align:right}
.versandart .bon .einheit{margin-left:6px; font-size:12px; color:var(--ink-2)}
.versandart .bon .hinweis-klein{margin:6px 0 0}
.versandart .bon .warnt{color:var(--warn)}

/* Am Schreibtisch darf die Karte nie ueber den Fensterrand hinauswachsen: eine
 * Welle mit 40 Betrieben schoebe den Knopf sonst unter die Kante, und niemand
 * findet ihn. Gemessen im 1440er Fenster, nicht vermutet. */
.tat-form.abschicken{max-height:calc(100vh - 160px); overflow-y:auto}

/* Am Handy scrollt die Wellentabelle seitlich. Eine Karte, die an ihrer letzten
 * Spalte klebt, steht dann halb ausserhalb des Bildschirms und wird unten von
 * der Navigationsleiste verdeckt. Deshalb liegt sie hier als Blatt ueber der
 * Seite statt neben dem Knopf, mit eigenem Scroll und Abstand zur Leiste. */
@media (max-width:900px){
  .tat-form.abschicken{
    position:fixed; z-index:60;
    top:auto; left:50%; transform:translateX(-50%);
    bottom:calc(72px + env(safe-area-inset-bottom));
    width:min(94vw,420px);
    max-height:min(74vh, calc(100vh - 160px));
    box-shadow:var(--shadow-hoch);
  }
  /* Die Liste darf hier weniger hoch sein, damit Versandart und Knopf sicher
     ins Bild passen, ohne dass man in zwei Ebenen scrollt. */
  .tat-form.abschicken .auswahl{max-height:132px}
  /* Mit persoenlicher Zeile (R13) ist jeder Eintrag doppelt so hoch; bei
     132px stand nur anderthalb Betrieb im Bild. */
  .tat-form.abschicken .auswahl.mit-zeile{max-height:264px}
}

/* ---------- Aufnahme hinzufuegen und abspielen ---------- */
/* Das Standard-Dateifeld ist auf dem Handy ein blasser Text neben einem
   winzigen Knopf. Das eigentliche Feld wird versteckt und das Label traegt
   den sichtbaren, daumengrossen Knopf. */
.datei-knopf{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 16px; border-radius:22px;
  background:var(--fill-2); color:var(--accent);
  font-size:16px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.datei-knopf input[type="file"]{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}
.aufnahme{display:block; width:100%; max-width:420px; margin-top:8px}

@media (max-width:900px){
  /* 16px, sonst zoomt iOS beim Antippen in das Feld hinein und bleibt drin. */
  .nach input[name="beleg_text"]{font-size:16px}
  .nach{flex-wrap:wrap; gap:8px}
  .datei-knopf{width:100%}
  .aufnahme{max-width:100%}
}


/* Pipeline, seit 23.09.2026. Spalten nebeneinander, waagerecht scrollbar; auf
   dem Handy untereinander. Die Karten wandern von selbst (app/pipeline.py). */
.pipeline-kopf{display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap; padding:var(--s3) var(--s4) 0}
.pipeline-wahl{display:flex; gap:var(--s2); flex-wrap:wrap}
.pipeline-wahl a{padding:4px 10px; border-radius:999px; border:1px solid var(--line-soft); color:var(--ink-2); font-size:13px; text-decoration:none}
.pipeline-wahl a[aria-current="true"]{background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line)}
.pipeline-wahl .n{opacity:.7; margin-left:4px}
.pipeline{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(165px,1fr); gap:var(--s3); padding:var(--s3) var(--s4) var(--s5); overflow-x:auto; align-items:start}
.pipeline-spalte{min-width:0}
.pipeline-spalte .box-kopf{margin:0 0 var(--s2)}
.karte{display:grid; gap:2px; padding:10px 12px; margin-bottom:var(--s2); border-radius:10px; background:var(--surface); border:1px solid var(--line-soft); color:inherit; text-decoration:none}
.karte:hover{border-color:var(--ink-3)}
.k-name{font-weight:600; font-size:13px}
.k-zeile{font-size:13px; color:var(--ink-2)}
.k-still{font-size:12px; color:var(--ink-3)}
.k-zeichen{display:flex; gap:4px; flex-wrap:wrap}
.zeichen{font-size:11px; padding:1px 6px; border-radius:999px; background:var(--fill-2); color:var(--ink-2)}
.zeichen.scan{background:var(--fill); color:var(--ink-2)}
.zeichen.faellig{background:var(--warn-soft); color:var(--warn)}
.zeichen.leise{background:none; color:var(--ink-3)}
.karte-link{display:block; margin:-4px 0 var(--s2); font-size:13px; padding-left:12px}
.pipeline-leer{font-size:12px; color:var(--ink-3); margin:0 0 var(--s2) 2px}
.pipeline-seitlich{padding:0 var(--s4) var(--s5)}
.pipeline-seitlich summary{cursor:pointer; color:var(--ink-2); font-size:13px; margin-bottom:var(--s2)}
.pipeline-seitlich .karte{max-width:420px}
fieldset.weiter{border:1px solid var(--line-soft); border-radius:8px; padding:var(--s2) var(--s3); display:grid; gap:6px}
fieldset.weiter legend{font-size:13px; color:var(--ink-2); padding:0 4px}
.formular fieldset.weiter label.wahl{display:flex; flex-direction:row; justify-content:flex-start; gap:8px; align-items:center; font-weight:600; margin-top:6px}
.formular fieldset.weiter label.wahl input[type="radio"]{width:18px; min-width:0; flex:none; margin:0}
@media (max-width:900px){
  .pipeline{grid-auto-flow:row; grid-auto-columns:auto}
}

/* Das Feld einer Karte (pipeline_feld.html). Rechts neben der Pipeline, beim
   Scrollen stehend; am Handy ueber der Pipeline, ganze Breite. */
.pipeline-rahmen.mit-feld{display:grid; grid-template-columns:minmax(0,1fr) 380px; align-items:start}
.pipeline-rahmen .pipeline{min-width:0}
.pipeline-feld{position:sticky; top:56px; max-height:calc(100vh - 70px); overflow-y:auto; margin:var(--s3) var(--s4) var(--s4) 0;
  padding:var(--s3) var(--s4); background:var(--surface); border-radius:var(--radius); border:1px solid var(--line-soft)}
.feld-kopf{display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s2)}
.feld-kopf h2{font-size:17px; margin:0}
.feld-zu{font-size:22px; line-height:1; color:var(--ink-2); text-decoration:none; padding:0 4px}
.feld-sub{margin:4px 0 var(--s2); font-size:13px; color:var(--ink-2)}
.feld-daten{display:grid; grid-template-columns:max-content 1fr; gap:4px var(--s3); margin:var(--s2) 0; font-size:13px}
.feld-daten dt{color:var(--ink-2)}
.feld-daten dd{margin:0; overflow-wrap:anywhere}
.feld-block{border-top:1px solid var(--line-soft); padding:var(--s2) 0}
.feld-block h3, .feld-block summary{font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-2); margin:0 0 var(--s2); cursor:pointer}
.feld-block textarea{width:100%}
.feld-block .anruf-wahl{display:flex; gap:var(--s2); flex-wrap:wrap; align-items:flex-start}
.feld-block .anruf-ja[open]{flex:1 1 100%}
.feld-verlauf{list-style:none; margin:0; padding:0; font-size:13px; display:grid; gap:4px}
.feld-verlauf .num{color:var(--ink-3); margin-right:6px}
.feld-akte{display:block; margin-top:var(--s2); font-size:13px}
.karte[aria-current="true"]{border-color:var(--accent-line); box-shadow:0 0 0 1px var(--accent-line)}
.pipeline-meldung{margin:var(--s2) var(--s4) 0}
@media (max-width:900px){
  .pipeline-rahmen.mit-feld{grid-template-columns:1fr}
  .pipeline-feld{position:static; max-height:none; margin:var(--s2) var(--s3); order:-1}
}