/* ---------------------------------------------------------------
   Schriften, lokal ausgeliefert. Kein Aufruf zu Google.
   Beide Familien sind variable Fonts, eine Datei deckt 400–700 ab.
   --------------------------------------------------------------- */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/bricolage-grotesque-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/bricolage-grotesque-latinext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/ibm-plex-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/ibm-plex-sans-latinext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------------------------------------------------------------
   Farben der Seite. Die sieben Grundwerte stehen fest. Die
   -text-Varianten sind abgedunkelte Fassungen von Kupfer und
   "Unter Minimum": die Originale erreichen auf Papier nur 2,9 bzw.
   3,2 zu 1 und wären als Fließtext nicht lesbar genug (WCAG AA
   verlangt 4,5). Flächen, Punkte und Linien nutzen die Originale.
   --------------------------------------------------------------- */
:root{
  --papier:#F5F7F4;
  --tinte:#17253A;
  --kupfer:#C8824F;
  --kupfer-text:#A25F2E;
  --erfuellt:#2F7D5B;
  --unter:#C8781E;
  --unter-text:#9A5A12;
  --offen:#D9DFE4;
  --linie:#DDE3E0;

  --karte:#FFFFFF;
  --gedaempft:#55636F;
  --raster:rgba(23,37,58,.07);
  --schatten:0 1px 2px rgba(23,37,58,.05);
  --radius:10px;
  --spalte:1160px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --papier:#131C27;
    --tinte:#E6EBE8;
    --kupfer:#E0A472;
    --kupfer-text:#E0A472;
    --erfuellt:#6FC79B;
    --unter:#E9A54E;
    --unter-text:#E9A54E;
    --offen:#2A3644;
    --linie:#2A3644;
    --karte:#18222E;
    --gedaempft:#A9B5BE;
    --raster:rgba(230,235,232,.06);
    --schatten:none;
    color-scheme:dark;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--papier);color:var(--tinte);
  font:400 17px/1.62 'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  overflow-wrap:break-word;
}
h1,h2,h3,.marke{font-family:'Bricolage Grotesque','IBM Plex Sans',sans-serif;font-weight:600;letter-spacing:-.015em;line-height:1.15;text-wrap:balance}
h1{font-size:clamp(2rem,1.2rem + 3.4vw,3.5rem);margin:0 0 .5em}
h2{font-size:clamp(1.45rem,1.1rem + 1.4vw,2.1rem);margin:0 0 .6em}
h3{font-size:1.08rem;margin:0 0 .35em;letter-spacing:-.005em}
p{margin:0 0 1em}
a{color:var(--kupfer-text)}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--kupfer-text);outline-offset:3px;border-radius:4px}

.huelle{max-width:var(--spalte);margin:0 auto;padding-inline:20px}
.schmal{max-width:720px}
section{padding-block:clamp(56px,8vw,104px)}
.augenmerk{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--kupfer-text);font-weight:600;margin:0 0 .9em}
.fuehrung{font-size:clamp(1.05rem,1rem + .4vw,1.24rem);color:var(--gedaempft);max-width:46ch}

/* Rasterhintergrund — das einzige Motiv der Seite */
.raster{
  background-image:
    repeating-linear-gradient(to right,var(--raster) 0 1px,transparent 1px 68px),
    repeating-linear-gradient(to bottom,var(--raster) 0 1px,transparent 1px 34px);
}

/* Kopf */
header.kopf{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--papier) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--linie)}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:13px}
.marke{display:inline-flex;align-items:center;gap:10px;font-size:1.22rem;color:var(--tinte);text-decoration:none;font-weight:700}
.marke img{display:block;width:34px;height:34px;flex:0 0 auto}
.kopf nav{display:flex;gap:20px;font-size:.92rem}
.kopf nav a{color:var(--gedaempft);text-decoration:none}
.kopf nav a:hover{color:var(--tinte);text-decoration:underline}
.kopf nav .nav-anmelden{color:var(--tinte);font-weight:600;padding:6px 14px;border:1.5px solid var(--tinte);border-radius:999px;line-height:1}
.kopf nav .nav-anmelden:hover{background:color-mix(in srgb,var(--tinte) 7%,transparent);text-decoration:none}
/* „30 Tage testen“ führt direkt zur Anmeldung (05.10.2026) und steht deshalb als Knopf da. */
.kopf nav .nav-testen{color:var(--tinte);background:#fff;font-weight:600;padding:6px 14px;border:1.5px solid #fff;border-radius:999px;line-height:1}
.kopf nav .nav-testen:hover{background:rgba(255,255,255,.88);color:var(--tinte);text-decoration:none}
.hero-fuss{margin:10px 0 0;font-size:.86rem;color:var(--gedaempft)}
/* Unter 760px verschwindet das Sprungmenü — der Anmeldeknopf bleibt, sonst
   käme man vom Handy aus nicht in die Anwendung. */
@media (max-width:760px){
  .kopf nav{display:flex;gap:0}
  .kopf nav a{display:none}
  .kopf nav .nav-anmelden{display:inline-flex;align-items:center;font-size:.9rem}
  /* „30 Tage testen“ bleibt auch schmal stehen (Klick-Durchgang 09.10.2026):
     Wer vom Handy kommt, soll nicht erst nach unten suchen. */
  .kopf nav .nav-testen{display:inline-flex;align-items:center;font-size:.85rem;padding:6px 10px;margin-right:6px;white-space:nowrap;border-color:var(--tinte)}
  .kopf nav .nav-anmelden{white-space:nowrap}
  /* „Preise“ bleibt ebenfalls (Entscheidung 09.10.2026) — als schlichter Link. */
  .kopf nav .nav-preise{display:inline-flex;align-items:center;font-size:.85rem;padding:6px 8px;margin-right:2px;white-space:nowrap}
}
/* Ganz schmal (bis 480px) passt der Schriftzug neben drei Einträgen nicht —
   dann steht nur das Zeichen, der Name steht gleich darunter in der Überschrift. */
@media (max-width:480px){
  .kopf .marke{font-size:0;gap:0}
  .kopf-innen{gap:8px}
}

/* Knöpfe der Seite */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:var(--radius);font:600 1rem/1 'IBM Plex Sans',sans-serif;text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:transform .12s ease,background-color .12s ease}
.knopf-haupt{background:var(--tinte);color:var(--papier)}
.knopf-haupt:hover{transform:translateY(-1px)}
.knopf-zweit{background:transparent;color:var(--tinte);border-color:var(--tinte)}
.knopf-zweit:hover{background:color-mix(in srgb,var(--tinte) 7%,transparent)}
@media (prefers-reduced-motion:reduce){.knopf:hover{transform:none}}

/* Hero */
.hero{border-bottom:1px solid var(--linie);padding-block:clamp(48px,7vw,92px)}
.hero-gitter{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,4vw,56px);align-items:center}
@media (max-width:900px){.hero-gitter{grid-template-columns:1fr}}
.hero-rechts{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,2.8vw,32px)}
.hero-marke{display:block;width:clamp(132px,15vw,192px);height:auto;margin:0}
@media (max-width:900px){
  /* Einspaltig löst sich die rechte Spalte auf: erst die Marke, dann der
     Text, dann die Statistik — sonst stünde die Marke ganz unten. */
  .hero-gitter{grid-template-columns:1fr}
  .hero-rechts{display:contents}
  .hero-gitter > div:first-child{order:2}
  .hero-marke{order:1;width:clamp(112px,26vw,152px)}
  .hero-gitter .karte{order:3}
}
.hero h1 span{color:var(--kupfer-text)}
.hero-tat{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.karte{background:var(--karte);border:1px solid var(--linie);border-radius:14px;box-shadow:var(--schatten)}
.karte-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--linie);font-size:.82rem;color:var(--gedaempft)}
.karte-leib{padding:14px 16px}

table.stat{width:100%;border-collapse:collapse;font-size:.83rem}
table.stat th{text-align:left;font-weight:600;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--gedaempft);padding:5px 8px;border-bottom:1px solid var(--linie)}
table.stat th.z,table.stat td.z{text-align:center}
table.stat td{padding:6px 8px;border-bottom:1px solid var(--linie);white-space:nowrap}
table.stat tr:last-child td{border-bottom:0}
.ist{font-variant-numeric:tabular-nums;font-weight:600}
.ist.gut{color:var(--erfuellt)}
.ist.knapp{color:var(--unter-text)}
.grenze{font-weight:400;color:var(--gedaempft)}
/* Personenstand im Kopf: Balken wie in der App (Min bis Max hell, Geplantes voll) */
.sb{position:relative;display:block;width:64px;height:6px;margin:0 auto 3px;border-radius:3px;background:var(--linie);overflow:hidden}
.sb .sb-bereich{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--erfuellt) 30%,transparent)}
.sb.knapp .sb-bereich{background:color-mix(in srgb,var(--unter-text) 30%,transparent)}
.sb .sb-fuell{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:3px;background:var(--erfuellt);transition:width .9s ease-out}
.sb.knapp .sb-fuell{background:var(--unter-text)}
@media (prefers-reduced-motion: reduce){.sb .sb-fuell{transition:none}}

/* Der Unterschied */
.dreisatz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,40px);margin-top:8px}
/* „Wo du gerade stehst“ — der Abschnitt, der die Lage beschreibt, bevor
   die Seite von sich redet. Leicht getönt, damit er sich absetzt. */
.heute{background:color-mix(in srgb,var(--kupfer) 6%,var(--papier));border-block:1px solid var(--linie)}
/* Ein schmalerer, mittig stehender Block: der Abschnitt ist ein
   Zwischenruf, kein Kapitel — so wirkt die Fläche gewollt statt leer. */
.heute-innen{max-width:820px}
.heute-text{max-width:100%}
.heute-text .fuehrung{max-width:100%}
.heute-text p{margin-bottom:1em}
.heute-text p:last-child{margin-bottom:0}
/* Der Satz, der vom Zustand zur Lösung überleitet — abgesetzt durch eine
   kupferne Kante, damit das Auge weiß, wo der Abschnitt hinwill. */
.heute-schluss{border-left:3px solid var(--kupfer);padding-left:16px;margin-top:1.3em;font-weight:500}
@media (max-width:840px){.dreisatz{grid-template-columns:1fr}}
.dreisatz > div{border-top:2px solid var(--kupfer);padding-top:16px}
.dreisatz p:last-child{margin-bottom:0}

/* Perspektiven */
.persp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,34px)}
@media (max-width:900px){.persp{grid-template-columns:1fr}}
.persp article{background:var(--karte);border:1px solid var(--linie);border-radius:14px;padding:22px 20px;box-shadow:var(--schatten)}
.persp .nr{font-family:'Bricolage Grotesque',sans-serif;font-size:.8rem;font-weight:700;color:var(--kupfer-text);letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:8px}
.persp p:last-child{margin-bottom:0}
.persp ul{margin:12px 0 0;padding-left:0;list-style:none;font-size:.92rem;color:var(--gedaempft)}
.persp ul li{padding-left:18px;position:relative;margin-bottom:5px}
.persp ul li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--kupfer)}

/* =====================================================================
   DEMO — der Aufbau der Anwendung, in den Farben dieser Seite.
   Übernommen sind Struktur und Verhalten: dunkle Kopfleiste mit den
   echten Reiternamen, weiße Karten, Monatskalender mit KW-Spalte,
   Schichtkacheln, Veröffentlichen-Schalter. Das Blau der Anwendung
   ist durch Tinte und Kupfer ersetzt, damit sich das Fenster in die
   Seite einfügt statt sich abzusetzen. Alle Werte hängen an eigenen
   Variablen am Fenster — außerhalb färbt nichts davon ab.
   ===================================================================== */
.fenster{
  /* Die Anwendung kennt keinen Dunkelmodus — ihre Schicht- und
     Dienstfarben würden darin verfälscht. Das Fenster bleibt deshalb
     immer hell. Die Werte der Seite werden hier noch einmal gesetzt,
     damit alles darin den hellen Wert bekommt, auch wenn die Seite
     ringsum dunkel ist. */
  --papier:#F5F7F4;
  --tinte:#17253A;
  --kupfer:#C8824F;
  --kupfer-text:#A25F2E;
  --erfuellt:#2F7D5B;
  --unter:#C8781E;
  --unter-text:#9A5A12;
  --offen:#D9DFE4;
  --linie:#DDE3E0;
  --karte:#FFFFFF;
  --gedaempft:#55636F;

  --f-grund:color-mix(in srgb,var(--tinte) 5%,var(--papier));
  --f-karte:var(--karte);
  --f-linie:var(--linie);
  --f-text:var(--tinte);
  --f-matt:var(--gedaempft);
  --f-still:color-mix(in srgb,var(--tinte) 6%,var(--karte));
  /* Schicht- und Dienstfarben wie in der Anwendung: Früh bernstein,
     Spät blau, der Dienst violett. Sie müssen sich nicht in die
     Seitenpalette fügen — das Fenster ist ein eigener Gegenstand, und
     bunte Schichten sind genau das, was man dort sehen will. */
  --f-frueh:#F59E0B;
  --f-spaet:#3B82F6;
  --f-abteilung:#9333EA;
  --f-frei:color-mix(in srgb,var(--kupfer) 8%,var(--karte));
  --f-info-bg:#E7EBEF;  --f-info-tx:#17253A;
  --f-gut-bg:#E2F0E9;   --f-gut-tx:#1F5A40;
  --f-warn-bg:#FBEEDC;  --f-warn-tx:#7A4A0F;
  --f-ablehnen:#A33A2B;   /* roter Umriss des Ablehnen-Knopfes */
  --f-schatten:0 2px 10px rgba(23,37,58,.06);
  color-scheme:light;
  border-radius:18px;overflow:hidden;
  border:1px solid var(--linie);
  box-shadow:0 14px 40px rgba(23,37,58,.10);
  font-size:14px;line-height:1.5;color:var(--f-text);
  background:var(--f-grund);
}
.fenster *{box-sizing:border-box}

/* Kopfleiste — bleibt in beiden Modi dunkel, wie das Band „Betrieb“ */
.ap-kopf{background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 50%,#1e40af 100%);color:#fff;position:relative;z-index:2}
.ap-kopf-innen{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 18px;flex-wrap:wrap}
.ap-titel{font-size:1.05rem;font-weight:700;display:flex;align-items:center;gap:9px;flex-shrink:0;font-family:'Bricolage Grotesque',sans-serif}
.ap-titel img{width:30px;height:30px;display:block}
.ap-user{display:flex;align-items:center;gap:8px;font-size:.82rem;white-space:nowrap;flex-shrink:0}
.ap-user .ap-rolle{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:rgba(245,247,244,.17);padding:3px 8px;border-radius:10px}
.ap-reiter{display:flex;gap:0;overflow-x:auto;flex:1;justify-content:center;scrollbar-width:none}
.ap-reiter::-webkit-scrollbar{display:none}
.ap-reiter button{padding:8px 12px;cursor:pointer;font:500 .78rem/1.5 'IBM Plex Sans',sans-serif;color:rgba(245,247,244,.72);border:none;background:none;white-space:nowrap;transition:color .2s;position:relative;min-height:36px}
.ap-reiter button::after{content:'';position:absolute;left:12px;right:12px;bottom:0;height:2px;background:#C8824F;transform:scaleX(0);transition:transform .25s ease}
.ap-reiter button:hover{color:#F5F7F4}
.ap-reiter button[aria-selected="true"]{color:#F5F7F4;font-weight:600}
.ap-reiter button[aria-selected="true"]::after{transform:scaleX(1)}
.ap-reiter button:focus-visible{outline:2px solid #C8824F;outline-offset:-3px;border-radius:6px}
@media (max-width:860px){
  .ap-kopf-innen{padding:9px 12px}
  .ap-reiter{order:3;width:100%;flex:none;justify-content:flex-start;border-top:1px solid rgba(245,247,244,.14);padding-top:3px}
  .ap-reiter button{padding:6px 10px;font-size:.74rem}
}

/* Ansicht-Umschalter, dem Rollen-Banner der Anwendung nachgebaut */
.ap-ansicht{padding:10px 14px;background:color-mix(in srgb,var(--kupfer) 11%,var(--papier));color:var(--tinte);font-size:.78rem;font-weight:600;border-bottom:1px solid color-mix(in srgb,var(--kupfer) 45%,transparent)}
.ap-ansicht-wahl{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.ap-ansicht-text{margin:8px auto 0;max-width:76ch;text-align:center;font-weight:400;font-size:.76rem;line-height:1.55;color:var(--tinte)}
.ap-ansicht button{font:600 .75rem/1 'IBM Plex Sans',sans-serif;padding:7px 11px;min-height:32px;border:1px solid var(--kupfer-text);border-radius:8px;background:var(--karte);color:var(--kupfer-text);cursor:pointer}
.ap-ansicht button[aria-pressed="true"]{background:var(--kupfer-text);color:var(--papier)}

.ap-leib{padding:14px;display:flex;flex-direction:column;gap:14px}
@media (max-width:520px){.ap-leib{padding:10px}}
.ap-karte{background:var(--f-karte);border:1px solid var(--f-linie);border-radius:14px;box-shadow:var(--f-schatten);padding:16px}
@media (max-width:520px){.ap-karte{padding:12px}}
.ap-karte-kopf{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--f-linie)}
.ap-karte-kopf h3{font-size:.9rem;font-weight:600;color:var(--f-text);margin:0;font-family:'IBM Plex Sans',sans-serif;letter-spacing:0}

.ap-monat{display:flex;align-items:center;gap:8px}
.ap-monat .mn-btn{background:none;border:1px solid var(--f-linie);border-radius:10px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--f-matt)}
.ap-monat .mn-btn[disabled]{opacity:.4}
.ap-monat .mn-label{font-size:.92rem;font-weight:600;min-width:135px;text-align:center}

.ap-btn{display:inline-flex;align-items:center;gap:5px;padding:8px 15px;min-height:36px;border:1.5px solid transparent;border-radius:8px;font:600 .8rem/1 'IBM Plex Sans',sans-serif;cursor:pointer}
.ap-btn-haupt{background:var(--tinte);color:var(--papier)}
.ap-btn-zweit{background:transparent;color:var(--f-text);border-color:var(--f-linie)}
/* Ablehnen: roter Umriss neben dem gefüllten Annehmen. */
.ap-btn-ablehnen{background:transparent;color:var(--f-ablehnen);border-color:var(--f-ablehnen)}
.ap-btn-zweit:hover{border-color:var(--f-text)}
.ap-btn-strich{background:transparent;color:var(--kupfer-text);border-color:var(--kupfer-text)}
.ap-btn-klein{padding:5px 10px;min-height:28px;font-size:.72rem}
.ap-kopf-tat{display:flex;gap:6px;flex-wrap:wrap}
.ap-btn-strich:hover{background:color-mix(in srgb,var(--kupfer) 12%,transparent)}
.ap-btn[disabled]{opacity:.4;cursor:default}

.ap-alert{padding:10px 14px;border-radius:12px;font-size:.8rem;margin-bottom:10px}
.ap-alert-success{background:var(--f-gut-bg);color:var(--f-gut-tx)}
.ap-alert-info{background:var(--f-info-bg);color:var(--f-info-tx)}
.ap-alert-warn{background:var(--f-warn-bg);color:var(--f-warn-tx)}

/* Veröffentlichen-Schalter */
.ap-pub{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}
.ap-pub input{opacity:0;width:0;height:0;position:absolute}
.ap-pub .slider{position:absolute;inset:0;background:var(--offen);border-radius:24px;cursor:pointer;transition:.25s}
.ap-pub .slider:before{content:'';position:absolute;width:18px;height:18px;left:3px;bottom:3px;background:var(--karte);border-radius:50%;transition:.25s;box-shadow:0 1px 3px rgba(23,37,58,.3)}
.ap-pub input:checked+.slider{background:var(--erfuellt)}
.ap-pub input:checked+.slider:before{transform:translateX(20px)}
.ap-pub input:focus-visible+.slider{outline:2px solid var(--kupfer-text);outline-offset:2px}
.ap-werkzeug{display:flex;gap:8px;flex-wrap:wrap;align-items:center;border-left:3px solid var(--kupfer);padding-left:10px;margin-bottom:12px}
.ap-karte-schmal{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:10px 14px;margin-bottom:12px}
.ap-filter{font-size:.75rem;padding:4px 8px;border-radius:6px;border:1px solid var(--f-linie);background:var(--f-karte);color:var(--f-text);width:auto}
/* Gesperrt ist es nur, weil die Demo einen einzigen Dienst kennt — lesbar
   bleiben soll es trotzdem. Browser grauen sonst auf etwa 4:1 herunter. */
.ap-filter:disabled{color:var(--f-text);opacity:1;-webkit-text-fill-color:var(--f-text)}
.ap-stat-titel{font-size:.9rem;font-weight:600;color:var(--f-text);margin:0 0 8px}
.ap-frist-tat{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-left:auto}

/* Kalender */
.ap-kal-huelle{overflow-x:auto;border-radius:12px;-webkit-overflow-scrolling:touch}
table.ap-kal{border-collapse:separate;border-spacing:3px;width:100%;min-width:680px;table-layout:fixed}
table.ap-kal th{background:var(--f-still);padding:7px 4px;text-align:center;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--f-matt);border-radius:8px}
table.ap-kal th.kw{width:38px}
table.ap-kal td{border-radius:8px;padding:4px;vertical-align:top;background:var(--f-karte);border:1px solid var(--f-linie)}
table.ap-kal td.kwz{text-align:center;font-weight:600;font-size:.72rem;background:var(--f-still);color:var(--f-matt);vertical-align:middle;width:38px}
table.ap-kal td.leer{background:transparent;border-color:transparent}
table.ap-kal td.we,table.ap-kal td.feiertag{background:var(--f-frei)}
.kal-tag{font-size:.7rem;font-weight:600;color:var(--f-matt);margin-bottom:2px;text-align:right;height:20px;line-height:20px}
td.heute .kal-tag{display:flex;align-items:center;justify-content:center;background:var(--kupfer-text);color:var(--papier);border-radius:50%;width:20px;height:20px;margin-left:auto}
.kal-kopfzeile{display:flex;justify-content:space-between;align-items:center;gap:4px;height:20px}
.kal-feiertag{font-size:.62rem;color:var(--unter-text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
abbr[title]{text-decoration:none}
/* Am Telefon rückt der Kalender enger zusammen — wie in der Anwendung,
   die dort ebenfalls schmaler wird und seitlich geschoben werden kann. */
@media (max-width:560px){
  table.ap-kal{min-width:600px;border-spacing:2px}
  table.ap-kal th{font-size:.66rem;padding:5px 2px}
  table.ap-kal th.kw,table.ap-kal td.kwz{width:28px;font-size:.64rem}
  table.ap-kal td{padding:2px}
  .kal-tag{font-size:.62rem;height:17px;line-height:17px}
  td.heute .kal-tag{width:17px;height:17px}
  .kal-kopfzeile{height:17px}
  .kachel{padding:3px 4px;margin:1px 0}
  .kachel .k-name{font-size:.58rem}
  .kachel .k-zeit{font-size:.55rem}
  .kachel .k-person{font-size:.62rem}
  .kachel select{font-size:.6rem}
}

/* Schichtkacheln. Die Farbe kommt aus --k-farbe, die Klasse setzt sie. */
.kachel{display:block;width:100%;text-align:left;padding:4px 5px;border-radius:8px;font-size:.72rem;margin:2px 0;overflow:hidden;font-family:inherit;color:var(--f-text);
  --k-farbe:var(--f-frueh);
  background:color-mix(in srgb,var(--k-farbe) 13%,var(--f-karte));
  border:1px solid color-mix(in srgb,var(--k-farbe) 22%,transparent);
  border-left:3px solid var(--k-farbe)}
.kachel.k-spaet{--k-farbe:var(--f-spaet)}
.kachel.k-voll{background:color-mix(in srgb,var(--k-farbe) 26%,var(--f-karte))}
.kachel.k-fremd{background:var(--f-still);color:var(--f-matt);border-left-color:color-mix(in srgb,var(--k-farbe) 45%,transparent)}
.kachel.k-aus{background:repeating-linear-gradient(135deg,var(--f-still) 0 3px,var(--f-karte) 3px 6px);color:var(--f-matt);border-left-color:color-mix(in srgb,var(--k-farbe) 40%,transparent)}
.kachel.k-angeboten{border-style:dashed;border-width:1.5px;border-color:var(--unter-text)}
.kachel.leerplatz{background:none;border-color:transparent;visibility:hidden}
.kachel .k-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:0 4px;flex-wrap:wrap;margin-bottom:1px}
.kachel .k-name{font-size:.63rem;font-weight:700;white-space:nowrap}
.kachel .k-zeit{font-size:.63rem;font-weight:400;opacity:.9}
.kachel .k-person{display:flex;align-items:center;gap:2px;font-size:.68rem;font-weight:600;line-height:1.3;min-width:0}
.kachel .k-person > span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kachel .k-weg{flex-shrink:0;cursor:pointer;opacity:.65;font-size:.85rem;line-height:1;padding:1px 4px;border:0;background:none;color:inherit;border-radius:4px;min-width:20px}
.kachel .k-weg:hover{opacity:1;background:color-mix(in srgb,var(--tinte) 10%,transparent)}
.kachel .k-marke{display:block;font-size:.58rem;font-weight:600;color:var(--unter-text);margin-top:1px}
.kachel select{font-size:.68rem;width:100%;border:none;background:transparent;cursor:pointer;padding:1px 0 0;color:var(--f-matt);font-family:inherit}
.kachel select:focus-visible{outline:2px solid var(--kupfer-text);border-radius:4px}
.kachel.waehlbar{cursor:pointer}
.kachel.waehlbar:hover{border-color:var(--k-farbe)}

/* Statistik in der Demo */
table.ap-stat{width:100%;border-collapse:collapse;font-size:.78rem}
table.ap-stat th{text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--f-matt);font-weight:700;padding:5px 8px;border-bottom:1px solid var(--f-linie)}
table.ap-stat td{padding:6px 8px;border-bottom:1px solid var(--f-linie);white-space:nowrap}
table.ap-stat tr:last-child td{border-bottom:0}
table.ap-stat .z{text-align:center}
.ap-ist{font-variant-numeric:tabular-nums;font-weight:600}
.ap-ist.gut{color:var(--erfuellt)}
.ap-ist.knapp{color:var(--unter-text)}
.ap-grenze{font-weight:400;color:var(--f-matt)}

/* Kennzahlkacheln der Team-Übersicht */
.ap-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,165px),1fr));gap:10px}
.ap-kachel{background:var(--f-karte);border:1px solid var(--f-linie);border-radius:14px;padding:13px 12px;box-shadow:var(--f-schatten);text-align:center;border-top:3px solid var(--kupfer)}
.ap-kachel .wert{font-size:1.25rem;font-weight:700;color:var(--f-text);display:flex;align-items:center;justify-content:center;gap:10px;font-variant-numeric:tabular-nums}
.ap-kachel .beschriftung{font-size:.7rem;color:var(--f-matt);margin-top:3px;line-height:1.35}
.ap-punkt{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0}

.ap-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:10px;font-size:.7rem;font-weight:600}
.ap-punkt-klein{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:1px}
/* Dienstmarke: eine farbige Pille mit dem Dienstnamen. */
.ap-abt{display:inline-block;padding:2px 8px;border-radius:12px;font-size:.7rem;font-weight:600;color:#fff;background:var(--f-abteilung);white-space:nowrap}
/* Abschnittszeile innerhalb der Börsen-Tabelle — „➡️ Abgabe" und „🔄 Tausch". */
.ap-abschnitt{padding:10px 8px 4px;font-weight:700;font-size:.8rem;background:var(--f-still);border-top:2px solid var(--f-linie)}
.ap-chip-gut{background:var(--f-gut-bg);color:var(--f-gut-tx)}
.ap-chip-warn{background:var(--f-warn-bg);color:var(--f-warn-tx)}
.ap-chip-still{background:var(--f-info-bg);color:var(--f-info-tx)}
.ap-tab-rollt{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.ap-liste{width:100%;border-collapse:collapse;font-size:.8rem}
table.ap-liste th{text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--f-matt);font-weight:700;padding:6px 8px;border-bottom:1px solid var(--f-linie)}
table.ap-liste td{padding:8px;border-bottom:1px solid var(--f-linie);vertical-align:middle}
table.ap-liste tr:last-child td{border-bottom:0}
.ap-leerlauf{padding:16px 8px;text-align:center;color:var(--f-matt);font-size:.82rem}
.ap-leer-links{text-align:left;padding:6px 8px;font-size:.78rem}
.ap-frist{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.78rem;color:var(--f-matt);margin-bottom:10px}
.ap-frist input{border:1px solid var(--f-linie);border-radius:8px;padding:4px 8px;font:600 .75rem 'IBM Plex Sans',sans-serif;color:var(--f-text);background:var(--f-karte);min-height:32px}
.ap-maxfeld{display:flex;flex-wrap:wrap;align-items:center;gap:14px;background:var(--f-still);border:1px solid var(--f-linie);border-radius:10px;padding:11px 13px;margin-bottom:12px;font-size:.8rem}
.ap-maxfeld label{font-weight:600;display:inline-flex;align-items:center;gap:7px}
.ap-maxfeld input{width:62px;padding:5px 8px;border:1px solid var(--f-linie);border-radius:8px;font:600 .82rem 'IBM Plex Sans',sans-serif;min-height:32px;color:var(--f-text);background:var(--f-karte)}
.ap-hinweis{font-size:.74rem;color:var(--f-matt);margin:14px 0 0;padding-top:9px;border-top:1px dashed var(--f-linie);line-height:1.5}
/* Erklärungen sind Beiwerk der Seite, nicht Text der Anwendung — deshalb
   tragen sie einen Aufkleber, damit niemand sie für Teil der Software hält. */
.ap-hinweis::before{content:"Erklärung";display:inline-block;margin-right:7px;padding:1px 6px;border-radius:6px;
  background:color-mix(in srgb,var(--kupfer) 16%,transparent);color:var(--kupfer-text);
  font-size:.6rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;vertical-align:1px}
.ap-legende{display:flex;gap:14px;flex-wrap:wrap;font-size:.72rem;color:var(--f-matt);margin-bottom:10px;align-items:center}
.ap-legende span{display:inline-flex;align-items:center;gap:6px}
.ap-legende i{width:13px;height:13px;border-radius:4px;display:inline-block;border-left:3px solid var(--k-farbe,var(--f-frueh))}

/* Meldungen der Anwendung */
#apMeldungen{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;z-index:60;display:flex;flex-direction:column;gap:8px;width:min(400px,calc(100% - 32px));pointer-events:none}
.ap-meldung{padding:10px 16px;border-radius:12px;color:#F5F7F4;font-size:.85rem;box-shadow:0 6px 20px rgba(23,37,58,.25);line-height:1.4;background:#17253A}
.ap-meldung.erfolg{background:#1F5A40;color:#fff}
.ap-meldung.info{background:#7A4A0F;color:#fff}

.demo-fuss{font-size:.86rem;color:var(--gedaempft);margin-top:16px;max-width:74ch}
.demo-weiter{margin:26px 0 12px;font-size:1.02rem;max-width:60ch}
.demo-weiter-tat{margin:0}
.testen-tat{margin:0 0 10px}
.preise{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:30px}
@media (min-width:900px){.preise{grid-template-columns:repeat(4,1fr)}}
.preise article{border:1px solid var(--linie);border-radius:10px;padding:20px 22px;display:flex;flex-direction:column;gap:4px}
.preise .pr-offen{background:rgba(0,0,0,.02)}
.pr-groesse{font-size:.86rem;color:var(--gedaempft);letter-spacing:.02em}
.pr-zahl{font-size:1.9rem;font-weight:700;line-height:1.15}
.pr-offen .pr-zahl{font-size:1.25rem;font-weight:600}
.pr-takt{font-size:.86rem;color:var(--gedaempft)}
.pr-jahresumme{font-size:.92rem;font-weight:600;margin-top:2px}
.pr-gratis{display:inline-block;font-size:.72rem;font-weight:600;color:#fff;background:#C8824F;border-radius:999px;padding:1px 8px;margin-left:4px;vertical-align:1px;white-space:nowrap}
.pr-hinweis{font-size:.8rem;color:var(--gedaempft)}
.pr-monatlich{font-size:.82rem;color:var(--gedaempft);margin-top:8px;padding-top:8px;border-top:1px solid var(--linie)}
.pr-dazu{margin:0 0 18px;padding-left:1.1em;max-width:70ch}
.pr-dazu li{margin-bottom:7px}
.pr-jahr{margin:0 0 14px;max-width:70ch}
.pr-weise{width:100%;max-width:820px;border-collapse:collapse;margin:0 0 18px;font-size:.93rem}
.pr-weise th,.pr-weise td{text-align:left;vertical-align:top;padding:9px 12px;border-bottom:1px solid var(--linie)}
.pr-weise thead th{font-size:.86rem;color:var(--gedaempft);font-weight:600}
.pr-weise tbody th{font-weight:600;white-space:nowrap;width:7em}
@media (max-width:560px){.pr-weise{font-size:.86rem}.pr-weise th,.pr-weise td{padding:8px 6px}.pr-weise tbody th{width:auto}}
.pr-fuss{font-size:.86rem;color:var(--gedaempft);margin:0}
.pr-hilfe{margin-top:10px;max-width:70ch}
.pr-plus{grid-column:1/-1;margin:0;font-size:.9rem;color:var(--tinte);padding:10px 4px 0}
@media (min-width:900px){.pr-plus{grid-column:1/4}}
.pr-takt-wahl{display:inline-flex;border:1px solid var(--linie);border-radius:999px;padding:3px;margin:0 0 22px;background:var(--karte)}
.pr-takt-knopf{border:0;background:transparent;color:var(--gedaempft);font:600 .9rem/1 'IBM Plex Sans',sans-serif;padding:9px 16px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.pr-takt-knopf[aria-pressed="true"]{background:var(--tinte);color:var(--papier)}
.pr-takt-knopf[aria-pressed="true"] .pr-gratis{background:var(--papier);color:var(--tinte)}
.pr-statt{font-size:.86rem;color:var(--gedaempft)}
.pr-statt s{text-decoration-thickness:1.5px}
.pr-zahlm{font-size:1.9rem;font-weight:700;line-height:1.15}
.preise[data-takt="jahr"] .pr-nur-monat,.preise[data-takt="jahr"] .pr-zahlm{display:none}
.preise[data-takt="monat"] .pr-nur-jahr,.preise[data-takt="monat"] .pr-zahl,.preise[data-takt="monat"] .pr-statt{display:none}
.preise[data-takt="monat"] .pr-offen .pr-zahl{display:block}
.preise[data-takt="monat"] .pr-jahresumme{font-weight:400;color:var(--gedaempft)}
.pr-link{font-size:.86rem;font-weight:600;color:var(--tinte);margin-top:auto;padding-top:8px}
.pr-mehr{margin:6px 0 0;padding-left:1.05em;font-size:.8rem;line-height:1.4;color:var(--gedaempft)}
.pr-mehr li{margin-bottom:5px}
.preise[data-takt="monat"] .pr-offen .pr-takt{display:block}
.testen-fuss{font-size:.86rem;color:var(--gedaempft);max-width:66ch}
.lieber-fragen{margin-top:34px;border-top:1px solid var(--linie);padding-top:22px}
.lieber-fragen summary{cursor:pointer;font-weight:600}
.lieber-fragen[open] summary{margin-bottom:18px}
.demo-fuss strong{color:var(--tinte)}
.demo-schritte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 26px;padding:0;list-style:none;counter-reset:schritt}
@media (max-width:780px){.demo-schritte{grid-template-columns:1fr}}
.demo-schritte li{counter-increment:schritt;position:relative;padding-left:38px;font-size:.95rem;color:var(--gedaempft)}
.demo-schritte li::before{content:counter(schritt);position:absolute;left:0;top:-1px;width:27px;height:27px;border-radius:50%;background:var(--kupfer);color:#fff;font:700 .85rem/27px 'Bricolage Grotesque',sans-serif;text-align:center}
.demo-schritte strong{color:var(--tinte)}

/* Für wen */
.fuerwen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,34px)}
@media (max-width:900px){.fuerwen{grid-template-columns:1fr}}
.fuerwen article{border-left:3px solid var(--kupfer);padding-left:18px}
.fuerwen p:last-child{margin-bottom:0}

/* Funktionsliste */
.funktionen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:clamp(20px,2.6vw,36px)}
.funktionen h3{border-bottom:1px solid var(--linie);padding-bottom:8px;margin-bottom:12px}
.funktionen ul{margin:0;padding-left:0;list-style:none;font-size:.93rem;color:var(--gedaempft)}
.funktionen li{margin-bottom:8px;padding-left:16px;position:relative;line-height:1.5}
.funktionen li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:1.5px;background:var(--kupfer)}
.funktionen strong{color:var(--tinte);font-weight:600}

/* Betrieb — bleibt in beiden Modi dunkel, deshalb feste Werte */
.betrieb{background:#17253A;color:#F5F7F4}
.betrieb.raster{background-image:repeating-linear-gradient(to right,rgba(245,247,244,.06) 0 1px,transparent 1px 68px),repeating-linear-gradient(to bottom,rgba(245,247,244,.06) 0 1px,transparent 1px 34px)}
.betrieb h2{color:#F5F7F4}
.betrieb .augenmerk{color:#C8824F}
.betrieb dl{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 28px;margin:0}
@media (max-width:1100px){.betrieb dl{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.betrieb dl{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.betrieb dl{grid-template-columns:1fr}}
.betrieb dt{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:1rem;margin-bottom:5px}
.betrieb dd{margin:0;font-size:.9rem;line-height:1.5;color:#B8C2CC}

/* Formular */
.formular{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:660px){.formular{grid-template-columns:minmax(0,1fr)}}
.feld{display:flex;flex-direction:column;gap:6px}
.feld.breit{grid-column:1/-1}
.feld label{font-size:.85rem;font-weight:600}
.feld input,.feld textarea,.feld select{font:400 1rem/1.5 'IBM Plex Sans',sans-serif;padding:11px 13px;border:1.5px solid var(--linie);border-radius:9px;background:var(--karte);color:var(--tinte);min-height:48px}
.feld textarea{min-height:120px;resize:vertical}
.feld input:focus,.feld textarea:focus,.feld select:focus{border-color:var(--kupfer-text)}
.feld select{-webkit-appearance:none;appearance:none;padding-right:38px;line-height:1.5;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2355636F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
@media (prefers-color-scheme:dark){.feld select{
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23A9B5BE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}}
.honig{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

footer{border-top:1px solid var(--linie);padding-block:34px;font-size:.86rem;color:var(--gedaempft)}
.fuss-innen{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;justify-content:space-between}
.fuss-marke{display:inline-flex;align-items:center;gap:12px}
.fuss-marke img{display:block;width:54px;height:54px;flex:0 0 auto}
footer a{color:var(--gedaempft)}
.sprung{position:absolute;left:-9999px}
a.sprung:focus{left:20px;top:10px;z-index:99;background:var(--tinte);color:var(--papier);padding:10px 16px;border-radius:8px}

/* ---------- Vorschlag 17.09.2026: Kernpunkte, Zickzack mit Bildern ---------- */
.kurz{padding-block:28px;border-block:1px solid var(--linie);background:var(--karte)}
.kurz-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.kurz-liste li{font-size:.92rem;line-height:1.4;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.kurz-zeichen{font-size:1.5rem}
@media (max-width:1100px){.kurz-liste{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.kurz-liste{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.kurz-liste{grid-template-columns:1fr}.kurz-liste li{flex-direction:row;align-items:center;text-align:left;gap:12px}}
.zz{display:flex;flex-direction:column;gap:clamp(56px,8vw,96px)}
.zz-zeile{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,4vw,56px);align-items:center}
.zz-andersrum .zz-text{order:2}
.zz-text p{max-width:48ch}
.zz-klein{font-size:.9rem;color:var(--gedaempft)}
.zz-bild{margin:0}
.zz-bild img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--linie);box-shadow:0 12px 34px rgba(23,37,58,.12)}
.zz-bild figcaption{font-size:.85rem;color:var(--gedaempft);margin-top:10px}
.zz-handy{justify-self:center;max-width:300px}
.zz-handy img{border-radius:26px;border:6px solid var(--tinte)}
@media (max-width:820px){.zz-zeile{grid-template-columns:1fr}.zz-andersrum .zz-text{order:0}}
.push{display:flex;gap:12px;align-items:flex-start;margin-top:18px;max-width:390px;padding:12px 14px;border-radius:18px;
  background:rgba(255,255,255,.75);backdrop-filter:blur(8px);border:1px solid var(--linie);box-shadow:0 8px 24px rgba(23,37,58,.12);font-size:.9rem;line-height:1.35;color:#17253A}
.push img{border-radius:9px;flex-shrink:0}
.push-kopf{display:flex;justify-content:space-between;font-size:.75rem;color:#55636F;margin-bottom:2px}
.push-kopf b{text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.fw-liste{margin:18px 0 0;padding-left:1.1em;max-width:70ch}
.fw-liste li{margin-bottom:.6em}
.alle-funktionen summary{cursor:pointer;list-style:none;display:flex;flex-direction:column;gap:6px}
.alle-funktionen summary::-webkit-details-marker{display:none}
.af-zeile{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(1.3rem,1.1rem + 1vw,1.8rem);font-weight:600}
.af-zeile::after{content:" ▸";color:var(--kupfer-text)}
.alle-funktionen[open] .af-zeile::after{content:" ▾"}
.alle-funktionen .funktionen{margin-top:30px}

.leiste-gross{--f-karte:#fff;--f-linie:#DDE3E0;--f-text:#17253A;--f-matt:#55636F;--f-schatten:0 10px 30px rgba(23,37,58,.08);grid-template-columns:1fr 1fr !important;gap:14px !important}
.leiste-gross .ap-kachel{padding:20px 14px}
.leiste-gross .wert{font-size:1.7rem !important}
.leiste-gross .beschriftung{font-size:.85rem !important}
.bedarf-karte{background:#fff;border:1px solid var(--linie);border-radius:14px;padding:22px 24px;box-shadow:0 10px 30px rgba(23,37,58,.08)}
.bk-kopf{font-weight:600;margin-bottom:16px;color:#17253A}
.bk-zeile{display:grid;grid-template-columns:11.5em 1fr 2.5em;align-items:center;gap:12px;margin:10px 0;font-size:.95rem}
.bk-zeile b{text-align:right;font-size:1.15rem}
.bk-balken{height:12px;background:#eef0f3;border-radius:6px;overflow:hidden}
.bk-balken i{display:block;height:100%;background:#17253A;border-radius:6px}
.bk-balken.warn i{background:#C8824F}.bk-balken.gut i{background:#3f8f5a}
.bk-fazit{margin:16px 0 0;font-size:.9rem;color:#3f5a45}
@media (max-width:560px){.bk-zeile{grid-template-columns:1fr 2.5em}.bk-zeile .bk-balken{grid-column:1/3;grid-row:2}}
/* Kopfleiste im Farbverlauf der App */
header.kopf{background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 50%,#1e40af 100%);backdrop-filter:none;border-bottom:0;box-shadow:0 4px 16px rgba(0,0,0,.18)}
.kopf .marke{color:#fff}
.kopf nav a{color:rgba(255,255,255,.82)}
.kopf nav a:hover{color:#fff}
.kopf nav .nav-anmelden{color:#fff;border-color:rgba(255,255,255,.85)}
.kopf nav .nav-anmelden:hover{background:rgba(255,255,255,.12)}
.kopf a:focus-visible{outline-color:#fff}
.fw-liste a{color:inherit;text-decoration:underline;text-decoration-color:var(--kupfer)}

/* Unterseiten: Hero mit Bild, Ablauf mit Handy */
.unter-gitter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:center}
.hero-bild{margin:0}
.hero-bild img{box-shadow:0 16px 40px rgba(23,37,58,.16)}
.hero-bild figcaption{margin-top:12px}
@media (max-width:900px){
  .unter-gitter{grid-template-columns:1fr;gap:0}
  .unter-gitter .hero-bild{margin-top:clamp(40px,7vw,64px)}
}
.ablauf-gitter{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:clamp(36px,5vw,72px);align-items:center}
.ablauf-gitter .zz-handy{max-width:260px;justify-self:end}
.ablauf-gitter .zz-handy img{border-width:5px;border-radius:22px}
@media (max-width:820px){
  .ablauf-gitter{grid-template-columns:1fr;gap:0}
  .ablauf-gitter .zz-handy{justify-self:center;max-width:260px;margin-top:clamp(36px,6vw,48px)}
}

/* Für wen: vier Karten mit dem Plan der jeweiligen Zielgruppe */
.fw-karten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.fw-karten li{margin:0}
.fw-karten a{display:flex;flex-direction:column;height:100%;background:var(--karte);border:1px solid var(--linie);border-radius:14px;overflow:hidden;color:inherit;text-decoration:none;box-shadow:var(--schatten);transition:transform .15s,box-shadow .15s}
.fw-karten a:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(23,37,58,.12)}
.fw-karten img{display:block;width:100%;height:150px;object-fit:cover;object-position:top left;border-bottom:1px solid var(--linie)}
.fw-karten strong{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:1.1rem;margin:16px 18px 6px}
.fw-karten span{font-size:.92rem;line-height:1.5;color:var(--gedaempft);margin:0 18px;flex:1}
.fw-karten em{font-style:normal;font-weight:600;font-size:.9rem;color:var(--kupfer-text);margin:14px 18px 18px}
.fw-karten em::after{content:" →"}
@media (max-width:1000px){.fw-karten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.fw-karten{grid-template-columns:1fr}.fw-karten img{height:130px}}

/* Preis-Anriss auf der Startseite (seit 22.09.2026): Band mit Stufen-Reihe */
.preis-band{background:var(--karte);border-block:1px solid var(--linie)}
.preis-band-innen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center}
.preis-band-text p{max-width:46ch}
.preis-stufen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.preis-stufen li{border:1px solid var(--linie);border-radius:12px;padding:16px 18px;background:var(--papier);display:flex;flex-direction:column;gap:2px}
.preis-stufen .ps-bis{font-size:.82rem;color:var(--gedaempft)}
.preis-stufen .ps-zahl{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.7rem;line-height:1.15}
.preis-stufen .ps-takt{font-size:.85rem;color:var(--gedaempft)}
.preis-stufen .ps-offen{border-style:dashed}
.preis-stufen .ps-offen .ps-zahl{font-size:1.3rem;padding-top:.25em}
.preis-band-hilfe{grid-column:1/-1;margin-top:8px}
@media (max-width:820px){.preis-band-innen{grid-template-columns:1fr}.preis-band-hilfe{grid-column:auto}}
@media (max-width:420px){.preis-stufen{grid-template-columns:1fr 1fr;gap:10px}.preis-stufen li{padding:12px 14px}}
.preis-ab{border:1px solid var(--linie);border-radius:14px;background:var(--papier);padding:26px 28px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;justify-self:end;max-width:420px}
.preis-ab .pa-ab{font-size:.9rem;color:var(--gedaempft);text-transform:uppercase;letter-spacing:.1em}
.preis-ab .pa-zahl{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(2.4rem,2rem + 1.5vw,3.2rem);line-height:1.05;color:var(--kupfer-text)}
.preis-ab .pa-takt{font-size:1rem;margin-top:4px}
.preis-ab .pa-klein{font-size:.85rem;color:var(--gedaempft);margin-top:10px;line-height:1.5}
@media (max-width:820px){.preis-ab{justify-self:start;max-width:none}}
.fuss-innen small{display:block;font-size:.8rem;color:var(--gedaempft);margin-top:4px}
.fuss-innen{align-items:flex-start}
.fuss-marke{display:flex;align-items:center;gap:12px}
.fuss-spalten{display:flex;flex-direction:column;gap:6px;font-size:.88rem}
.fuss-spalten p{margin:0}
.fuss-spalten b{display:inline-block;min-width:7.5em;color:var(--gedaempft);font-weight:600}
@media (max-width:700px){.fuss-spalten b{display:block;min-width:0;margin-top:6px}}

/* Planungsregeln als Schema (03.10.2026): je Regel Zahl und Stufe */
.regel-karte{background:var(--karte);border:1px solid var(--linie);border-radius:14px;box-shadow:0 12px 34px rgba(23,37,58,.12);padding:18px 20px;font-size:.9rem}
.rk-kopf{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.95rem;margin:0 0 6px;color:var(--tinte)}
.rk-abschnitt{margin-top:16px}
.rk-zeile{display:grid;grid-template-columns:1fr auto auto;gap:6px 12px;align-items:center;padding:7px 0;border-top:1px solid var(--linie)}
.rk-name{line-height:1.35}
.rk-wert{font-variant-numeric:tabular-nums;font-weight:600;min-width:2.6em;text-align:right}
.rk-stufen{display:inline-flex;border:1px solid var(--linie);border-radius:999px;overflow:hidden;white-space:nowrap}
.rk-stufen span{padding:3px 9px;font-size:.76rem;color:var(--gedaempft)}
.rk-stufen span.an{background:var(--tinte);color:var(--papier);font-weight:600}
.rk-fest{font-size:.76rem;color:var(--gedaempft);border:1px dashed var(--linie);border-radius:999px;padding:3px 9px;white-space:nowrap;justify-self:end}
@media (max-width:560px){.rk-zeile{grid-template-columns:1fr auto}.rk-stufen,.rk-fest{grid-column:1/-1;justify-self:start}}