/* =========================================================================
   lyvor.io/demo/rechnungen — styles.css  (Task 6)
   Tokens/Reset/Bühne/Footer-Muster aus /demo/demo.css übernommen (eine Marke,
   ein Look). Eigenständig ist nur die Klärfall-Bühne: helle „Kern"-Karten vs.
   sichtbar gedimmte „Zielbild"-Karten (SZENE-RE-ZONEN).

   A11y-Entscheid zur Zielbild-Dimmung: gedimmt wird die KARTEN-CHROME
   (Fläche, Rahmen gestrichelt, Akzent), NICHT der Fließtext per opacity —
   sonst fiele der Textkontrast unter AA. Die Zielbild-Zone bleibt dadurch
   deutlich als „noch nicht im Kundenbetrieb" lesbar und trotzdem barrierefrei.
   ========================================================================= */

:root{
  /* Bühne — identisch zur Live-Site / zu /demo */
  --ink:#05060b; --ink2:#0a0c14; --glass:rgba(18,22,34,.55);
  --line:rgba(226,234,255,.1); --hair:rgba(226,234,255,.05);
  --txt:#f1f3f9; --dim:#a6acbe; --lab:#9298ab;
  --blue:#5fa8ff; --cyan:#9fe0ff; --core:#eaf4ff; --done:#3bd694;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Klärfall-Zonen */
  --kern-bg:rgba(95,168,255,.07); --kern-bd:rgba(95,168,255,.30); --kern-acc:#9fe0ff;
  --zb-bg:rgba(226,234,255,.035); --zb-bd:rgba(226,234,255,.18);  --zb-acc:#a6acbe;
  --prio:#f0b962; --stopp:#e08a96;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{background:var(--ink);color:var(--txt)}
body{font-family:var(--sans);font-size:17px;line-height:1.6;min-height:100vh;
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
::selection{background:rgba(95,168,255,.3)}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
         clip:rect(0,0,0,0);white-space:nowrap;border:0}

.skip-link{position:absolute;left:16px;top:-48px;z-index:60;background:var(--core);color:#0a0c14;
  font-weight:650;font-size:14px;padding:10px 18px;border-radius:999px;transition:top .2s}
.skip-link:focus{top:16px}

:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}

.stage-glow{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 760px at 50% 14%,rgba(52,84,180,.26),transparent 58%),
    radial-gradient(760px 520px at 82% 74%,rgba(95,168,255,.09),transparent 62%),
    var(--ink)}

.topbar,main,footer{position:relative;z-index:1}
.shell{max-width:1080px;margin:0 auto;padding:0 24px}

/* ── Topbar ── */
.topbar{padding:22px 0 6px}
.topbar .shell{display:flex;align-items:center}
.brand{display:inline-flex;align-items:center;opacity:.9;transition:opacity .3s}
.brand:hover{opacity:1}
.brand .wordmark{font-size:17px;font-weight:700;letter-spacing:.42em;padding-left:.42em;
  background:linear-gradient(180deg,#fff,#96a0b8);-webkit-background-clip:text;
  background-clip:text;color:transparent}

/* =========================================================================
   KOPF
   ========================================================================= */
.re-buehne{text-align:center;padding:clamp(44px,8vh,96px) 0 clamp(22px,4vh,40px)}
.re-buehne .eyebrow{display:block;font-size:12.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--lab);margin:0 auto 16px;max-width:64ch;line-height:1.4}
.re-buehne h1{font-size:clamp(28px,5.2vw,50px);font-weight:640;line-height:1.1;letter-spacing:-.02em;
  max-width:20ch;margin:0 auto}
.re-buehne h1 .n{color:var(--core)}
.re-buehne .sub{color:var(--dim);font-size:clamp(15.5px,2.1vw,18px);max-width:60ch;margin:18px auto 0;line-height:1.55}

/* =========================================================================
   BANNER — DEMO-01 (wörtlich) + DEMO-02 direkt daneben
   ========================================================================= */
.re-banner-wrap{padding:0 0 clamp(26px,4vh,44px)}
.re-banner-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:14px;
  max-width:1000px;margin:0 auto}
.re-banner{border-radius:14px;padding:16px 20px;font-size:14.5px;line-height:1.55;
  border:1px solid var(--line);background:var(--glass)}
.re-banner--01{display:flex;align-items:flex-start;gap:.7em;font-weight:600;color:var(--core);
  border-color:rgba(240,185,98,.42);background:rgba(240,185,98,.10)}
.re-banner--01 .re-banner-icon{color:var(--prio);font-size:15px;line-height:1.5;flex:none}
.re-banner--02{color:var(--dim)}
.re-banner--02 b{color:var(--txt);font-weight:640}

@media (max-width:760px){
  .re-banner-grid{grid-template-columns:1fr}
}

/* =========================================================================
   FÄLLE
   ========================================================================= */
.re-faelle-sektion{padding:0 0 clamp(36px,6vh,72px);scroll-margin-top:88px}

/* No-JS zuerst: statische Karten sind der Grundzustand, JS blendet um. */
.re-interaktiv{display:none}
.re-shell.re-js .re-interaktiv{display:block}
.re-shell.re-js .re-nojs{display:none}

/* ── Tab-Leiste (Fallauswahl) ── */
.re-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:22px}
.re-tab{display:flex;flex-direction:column;gap:5px;text-align:left;cursor:pointer;
  background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:13px 15px;
  color:var(--dim);transition:border-color .25s,background .25s,color .25s,transform .25s}
.re-tab:hover{border-color:rgba(95,168,255,.4);color:var(--txt);transform:translateY(-1px)}
.re-tab.is-aktiv{background:rgba(95,168,255,.12);border-color:rgba(95,168,255,.55);color:var(--txt)}
.re-tab-nr{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.re-tab-titel{font-size:14px;line-height:1.4;font-weight:560}

@media (max-width:900px){ .re-tabs{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .re-tabs{grid-template-columns:1fr} }

/* ── Bühne des gewählten Falls ── */
.re-buehne-panel{border:1px solid var(--line);border-radius:18px;background:var(--ink2);
  padding:clamp(18px,3vw,30px);box-shadow:0 40px 100px -50px rgba(0,0,0,.9)}
.re-buehne-panel:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

.re-bild-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;
  padding-bottom:14px;border-bottom:1px solid var(--hair);margin-bottom:18px}
.re-bild-lieferant{font-size:13px;color:var(--lab);letter-spacing:.02em}
.re-bild-lieferant b{color:var(--blue);font-weight:650}
.re-bild-titel{font-size:clamp(16px,2.4vw,19px);font-weight:620;color:var(--txt);flex-basis:100%;line-height:1.35}

.re-flag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:3px 9px;border-radius:999px}
.re-flag--prio{color:#f0b962;background:rgba(240,185,98,.15);border:1px solid rgba(240,185,98,.42)}

/* Stationsspur = sichtbarer Erzählbogen (Eingang → … → Übergabe) */
.re-spur{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin:0 0 20px}
.re-spur-punkt{display:inline-flex;align-items:center;gap:.5em;padding:5px 12px 5px 6px;
  border-radius:999px;font-size:12.5px;font-weight:600;color:var(--lab);
  border:1px solid var(--line);background:rgba(226,234,255,.04)}
.re-spur-nr{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:700;background:rgba(226,234,255,.09);color:inherit;flex:none}
.re-spur-punkt.is-erledigt{color:var(--done);border-color:rgba(59,214,148,.38);background:rgba(59,214,148,.09)}
.re-spur-punkt.is-erledigt .re-spur-nr{background:rgba(59,214,148,.18)}
.re-spur-punkt.is-erledigt.is-zielbild{color:var(--zb-acc);border-color:var(--zb-bd);
  background:rgba(226,234,255,.05)}
.re-spur-punkt.is-erledigt.is-zielbild .re-spur-nr{background:rgba(226,234,255,.09)}
.re-spur-punkt.is-aktiv{color:#08131f;background:var(--cyan);border-color:var(--cyan);font-weight:700}
.re-spur-punkt.is-aktiv .re-spur-nr{background:rgba(8,19,31,.20)}
.re-spur-punkt.is-zielbild{border-style:dashed}

/* Schritt-Karte: Kern hell vs. Zielbild gedimmt (Chrome-Dimmung, Text bleibt AA) */
.re-schritt{border-radius:14px;padding:clamp(16px,2.4vw,22px);border:1px solid}
.re-schritt--kern{background:var(--kern-bg);border-color:var(--kern-bd)}
.re-schritt--zielbild{background:var(--zb-bg);border-color:var(--zb-bd);border-style:dashed}

.re-schritt-zone{display:inline-flex;align-items:center;gap:.5em;font-size:11.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.re-schritt--kern .re-schritt-zone{color:var(--kern-acc)}
.re-schritt--zielbild .re-schritt-zone{color:var(--zb-acc)}
.re-zone-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.re-schritt--zielbild .re-zone-dot{background:transparent;border:1.5px solid currentColor}

.re-schritt-titel{font-size:clamp(17px,2.6vw,21px);font-weight:640;line-height:1.3;margin-bottom:10px}
.re-schritt-tag{display:inline-block;font-family:var(--mono);font-size:12.5px;color:var(--dim);
  background:rgba(226,234,255,.06);border:1px solid var(--hair);border-radius:8px;
  padding:5px 10px;margin-bottom:12px}
.re-schritt-text{color:var(--dim);font-size:15.5px;line-height:1.65;max-width:72ch}

.re-entwurf-tag{display:inline-block;margin-top:12px;font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#9fe0ff;
  background:rgba(95,168,255,.14);border:1px solid rgba(95,168,255,.38);
  border-radius:999px;padding:4px 11px}

/* I-2: In der Zielbild-Zone tragen Pill und Chip die Zielbild-Akzente, nicht die Kern-Akzente.
   Umfärbung statt opacity — der Textkontrast bleibt damit AA-konform. */
.re-schritt--zielbild .re-entwurf-tag,
.re-schritt--zielbild .re-schritt-tag,
.re-schritt--zielbild .re-entwurf-tag{color:var(--zb-acc);background:rgba(226,234,255,.06);
  border-color:var(--zb-bd)}
/* gleiche Regel für die statischen No-JS-Karten */
.re-schritte li.re-schritt--zielbild .re-entwurf-tag,
.re-schritte li.re-schritt--zielbild .re-schritt-tag{color:var(--zb-acc);
  background:rgba(226,234,255,.06);border-color:var(--zb-bd)}

.re-endstand{margin-top:16px;padding-top:14px;border-top:1px solid var(--hair);
  color:var(--done);font-size:15px;font-weight:600;line-height:1.5}
.re-endstand-mark{color:var(--done)}

/* Steuerung */
.re-steuerung{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px;
  padding-top:16px;border-top:1px solid var(--hair)}
.re-fortschritt{font-size:13px;color:var(--lab);font-variant-numeric:tabular-nums;
  margin:0 auto;order:0}

.re-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-size:14.5px;font-weight:620;padding:11px 20px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;transition:transform .25s,background .25s,border-color .25s,opacity .25s}
.re-btn--primary{background:var(--core);color:#0a0c14}
.re-btn--primary:hover{transform:translateY(-1px)}
.re-btn--ghost{background:transparent;border-color:var(--line);color:var(--txt)}
.re-btn--ghost:hover{border-color:rgba(95,168,255,.5)}
.re-btn--replay{background:rgba(95,168,255,.14);border-color:rgba(95,168,255,.4);color:var(--core)}
.re-btn:disabled{opacity:.38;cursor:not-allowed;transform:none}
.re-btn[hidden]{display:none}

.re-hint{margin-top:14px;font-size:13.5px;color:var(--lab);text-align:center}

/* =========================================================================
   NO-JS-FUNDAMENT — sechs Fälle als lesbare statische Karten
   ========================================================================= */
.re-nojs{display:flex;flex-direction:column;gap:18px}
.re-fall{border:1px solid var(--line);border-radius:16px;background:var(--ink2);
  padding:clamp(16px,2.6vw,26px)}
.re-fall-h{font-size:clamp(16px,2.4vw,19px);font-weight:640;line-height:1.35;margin-bottom:6px}
.re-fall-nr{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue);margin-right:.6em;vertical-align:.12em}
.re-fall-meta{font-size:13px;color:var(--lab);margin-bottom:14px}
.re-fall-meta b{color:var(--blue);font-weight:650}
.re-fall-meta .re-flag{margin-left:.5em}

.re-schritte{list-style:none;display:flex;flex-direction:column;gap:10px;counter-reset:re}
.re-schritte li{position:relative;border-radius:12px;padding:14px 16px;border:1px solid;
  font-size:15px;line-height:1.6;color:var(--dim)}
.re-schritte li b{color:var(--txt);font-weight:640}
.re-schritte li.re-schritt--kern{background:var(--kern-bg);border-color:var(--kern-bd)}
.re-schritte li.re-schritt--zielbild{background:var(--zb-bg);border-color:var(--zb-bd);border-style:dashed}

.re-zone-tag{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--kern-acc);margin-bottom:6px}
.re-zone-tag--zb{color:var(--zb-acc)}

.re-fuss{margin-top:22px;font-size:13.5px;color:var(--lab);text-align:center;max-width:76ch;
  margin-left:auto;margin-right:auto;line-height:1.55}

/* =========================================================================
   CTA + Footer (Muster aus /demo)
   ========================================================================= */
.re-cta{padding:0 0 clamp(40px,7vh,80px)}
.re-cta-band{max-width:820px;margin:0 auto;text-align:center;border:1px solid var(--line);
  border-radius:18px;background:var(--glass);padding:clamp(24px,4vw,38px)}
.re-cta-lead{font-size:clamp(16px,2.4vw,19px);color:var(--txt);max-width:52ch;margin:0 auto 22px;line-height:1.5}
.re-cta-buttons{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.re-cta-secondary{display:inline-block;margin-top:20px;font-size:14.5px;color:var(--dim);
  border-bottom:1px solid var(--line);padding-bottom:2px}
.re-cta-secondary:hover{color:var(--txt)}

.demo-footer{border-top:1px solid var(--hair);padding:34px 0 44px;font-size:13.5px;color:var(--lab)}
.foot-nav{display:flex;flex-wrap:wrap;gap:28px 56px;margin-bottom:26px}
.foot-col{display:flex;flex-direction:column;gap:7px}
.foot-h{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.foot-col a:hover{color:var(--txt)}
.foot-imp{border-top:1px solid var(--hair);padding-top:20px;line-height:1.7;max-width:86ch}
.foot-imp h4{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);margin:14px 0 4px}
.foot-imp h4:first-child{margin-top:0}

/* =========================================================================
   MOBILE (390) + REDUCED MOTION
   ========================================================================= */
@media (max-width:560px){
  body{font-size:16px}
  .shell{padding:0 18px}
  .re-steuerung{flex-direction:column;align-items:stretch}
  .re-steuerung .re-btn{width:100%}
  .re-fortschritt{order:-1;text-align:center;margin:0 0 4px}
  .re-cta-buttons .re-btn{width:100%}
  .re-spur{flex-wrap:wrap}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .re-tab:hover,.re-btn:hover{transform:none}
}