/* ==========================================================================
   Gemeinsames Design für IT-Service Kinder, Runschmiede und den Kundenbereich

   Grundregeln
   - Dunkler Hintergrund als Standard. Heller Modus per Schalter.
   - Eine Akzentfarbe (gedecktes Blau), nur für Buttons und Links.
   - Eine Schriftfamilie: IBM Plex Sans. IBM Plex Mono nur für technische Werte
     wie Rechnungsnummern, Bot-IDs und Preise.
   - Einheitlich 8 px Eckenradius, gleiche Abstände, gleicher Button-Stil.
   - Keine Raster, Verläufe, Glow-Effekte, Terminal-Attrappen oder Deko-Rahmen.
   ========================================================================== */

@font-face{font-family:"IBM Plex Sans";src:url("fonts/ibm-plex-sans.woff") format("woff");font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/ibm-plex-sans-italic.woff") format("woff");font-weight:100 700;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-400.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-500.woff") format("woff");font-weight:500 700;font-display:swap}

:root{
  /* Flächen */
  --bg:#faf8f5; --surface:#ffffff; --surface-2:#f3efe9; --line:#e4ded5; --line-strong:#cfc7bb;
  /* Text */
  --fg:#1f2328; --muted:#5a6067; --faint:#7d838a;
  /* Akzent: nur Buttons und Links */
  --accent:#2f5d8a; --accent-hover:#244a6f; --accent-soft:#e7eef5; --accent-ink:#ffffff;
  /* Zustände (nur für echte Statusanzeigen) */
  --ok:#2e7d4f; --ok-soft:#e4f1e8; --warn:#8a5a00; --warn-soft:#fbf0dc; --bad:#b3261e; --bad-soft:#fbe4e1;

  /* Schrift und Form */
  --font:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:8px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px;

  /* Kompatibilität mit älteren Klassen im Shop */
  --ember:var(--accent); --ember-soft:var(--accent-soft); --ember-ink:var(--accent-ink); --steel:var(--accent);
  --f-display:var(--font); --f-body:var(--font); --f-mono:var(--mono);
  --chat-bg:#e9e5de; --bubble:#ffffff; --kbd:#e4ded5;
  color-scheme:light;
}
/* Dunkler Modus: Standard. Hell nur, wenn der Besucher es über den Schalter wählt */
:root:not([data-theme="light"]){
  --bg:#18191b; --surface:#212327; --surface-2:#2a2d31; --line:#34373c; --line-strong:#464a50;
  --fg:#ecebe8; --muted:#aaa7a1; --faint:#8a8780;
  --accent:#8fb3d9; --accent-hover:#a9c6e4; --accent-soft:#233140; --accent-ink:#10161d;
  --ok:#7cc79a; --ok-soft:#1d3326; --warn:#e2b45e; --warn-soft:#3a2e15; --bad:#f08a80; --bad-soft:#3d1f1c;
  --chat-bg:#1d1f22; --bubble:#2a2d31; --kbd:#34373c;
  color-scheme:dark;
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font);line-height:1.2;margin:0;text-wrap:balance;font-weight:600;letter-spacing:-.01em}
p{margin:0}
a{color:var(--accent);text-underline-offset:2px}
a:hover{color:var(--accent-hover)}
img{max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.tnum{font-variant-numeric:tabular-nums}
.wrap{max-width:1160px;margin:0 auto;padding-inline:20px}
.narrow{max-width:760px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--accent);color:var(--accent-ink);padding:8px 14px;border-radius:var(--r);font-weight:600}
.skip:focus{left:16px}

/* ---------- Typografie ---------- */
.rs-kicker{display:block;font-size:15px;font-weight:600;color:var(--muted);margin-bottom:var(--s2)}
.rs-h1{font-size:clamp(32px,4.6vw,52px);font-weight:600;letter-spacing:-.02em;line-height:1.12}
.rs-h1 em{font-style:normal;color:var(--muted)}
.rs-h2{font-size:clamp(24px,2.8vw,32px)}
.rs-h3{font-size:19px}
.rs-lead{font-size:18px;color:var(--muted);max-width:60ch}
.rs-muted{color:var(--muted)}
.rs-small{font-size:14px;color:var(--muted)}
.rs-prose p+p{margin-top:var(--s4)}
.rs-prose{max-width:68ch}

/* ---------- Kopfzeile (auf allen Seiten gleich aufgebaut) ---------- */
.rs-top{background:var(--surface);border-bottom:1px solid var(--line)}
.rs-top .wrap{display:flex;align-items:center;gap:var(--s5);min-height:68px;flex-wrap:wrap}
.rs-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg)}
.rs-brand:hover{color:var(--fg)}
.rs-mark{flex:none;width:34px;height:34px;border-radius:var(--r);background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:700;font-size:17px;letter-spacing:-.02em}
.rs-brand-name{font-weight:600;font-size:18px;line-height:1.15}
.rs-brand-name small{display:block;font-weight:400;font-size:13px;color:var(--muted)}
.rs-nav{display:flex;gap:var(--s1);margin-left:auto;flex-wrap:wrap}
.rs-nav a{padding:8px 12px;border-radius:var(--r);text-decoration:none;color:var(--fg);font-size:15px}
.rs-nav a:hover{background:var(--surface-2);color:var(--fg)}
.rs-nav a[aria-current="page"]{color:var(--accent);font-weight:600}
.rs-top-actions{display:flex;align-items:center;gap:var(--s2)}
.rs-top-actions form{margin:0}
.rs-iconbtn{width:38px;height:38px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);cursor:pointer;display:grid;place-items:center;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600}
.rs-iconbtn:hover{color:var(--fg);border-color:var(--line-strong)}

/* ---------- Buttons ---------- */
.rs-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);border:1px solid var(--line-strong);background:var(--surface);color:var(--fg);border-radius:var(--r);padding:10px 18px;font-weight:600;font-size:15px;line-height:1.3;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s}
.rs-btn:hover{border-color:var(--fg);color:var(--fg)}
.rs-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.rs-btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-ink)}
.rs-btn.danger{color:var(--bad);border-color:var(--bad)}
.rs-btn.danger:hover{background:var(--bad-soft)}
.rs-btn.sm{padding:7px 12px;font-size:14px}
.rs-btn.lg{padding:13px 22px;font-size:16px}
.rs-btn.block{width:100%}
.rs-btn:disabled{opacity:.5;cursor:not-allowed}
.rs-actions{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}

/* ---------- Flächen ---------- */
.rs-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5)}
.rs-grid{display:grid;gap:var(--s4)}
.rs-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rs-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rs-grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.rs-section{padding-block:var(--s8)}
.rs-section-h{margin-bottom:var(--s6);max-width:68ch}
.rs-section-h p{color:var(--muted);margin-top:var(--s3)}
.rs-hero{padding-block:var(--s8) var(--s7)}

/* Definitionsliste für Angaben (z. B. Kontakt, Vertragsdaten) */
.rs-dl{display:grid;grid-template-columns:max-content 1fr;gap:var(--s2) var(--s5);margin:0}
.rs-dl dt{color:var(--muted)}
.rs-dl dd{margin:0}

/* Einfache Liste mit Punkt */
.rs-list{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:var(--s2)}
.rs-list li::marker{color:var(--faint)}

/* Nummerierte Schritte (nur für echte Abläufe) */
.rs-steps{list-style:none;margin:0;padding:0;counter-reset:st;display:flex;flex-direction:column;gap:var(--s4)}
.rs-steps > li{counter-increment:st;display:grid;grid-template-columns:32px 1fr;gap:var(--s3);align-items:start}
.rs-steps > li::before{content:counter(st);width:32px;height:32px;border-radius:var(--r);background:var(--surface-2);color:var(--fg);font-weight:600;display:grid;place-items:center}
.rs-steps b{display:block}
.rs-steps p,.rs-steps span{color:var(--muted)}

/* Status (nur wo ein Zustand angezeigt werden muss) */
.rs-state{display:inline-block;font-size:13px;font-weight:600;padding:2px 8px;border-radius:4px;background:var(--surface-2);color:var(--muted)}
.rs-state.ok{background:var(--ok-soft);color:var(--ok)}
.rs-state.warn{background:var(--warn-soft);color:var(--warn)}
.rs-state.bad{background:var(--bad-soft);color:var(--bad)}

/* Tabellen */
.rs-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.rs-table{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.rs-table th{font-size:14px;font-weight:600;color:var(--muted);text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.rs-table td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.rs-table tr:last-child td{border-bottom:0}
.rs-table .num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

/* Formulare */
.rs-form{display:flex;flex-direction:column;gap:var(--s4)}
.rs-field{display:flex;flex-direction:column;gap:6px}
.rs-field label{font-size:15px;font-weight:600}
.rs-field small{color:var(--muted);font-size:14px}
.rs-input{width:100%;min-width:0;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);padding:11px 12px;color:var(--fg);font-size:16px}
.rs-input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.rs-input[aria-invalid="true"]{border-color:var(--bad)}
.rs-check{display:flex;gap:10px;align-items:flex-start;font-size:15px;cursor:pointer}
.rs-check input{accent-color:var(--accent);margin-top:4px;width:17px;height:17px;flex:none}
.rs-alert{border-radius:var(--r);padding:12px 16px;font-size:15px;border:1px solid var(--line);background:var(--surface-2)}
.rs-alert.ok{background:var(--ok-soft);border-color:transparent}
.rs-alert.bad{background:var(--bad-soft);border-color:transparent}
.rs-alert.warn{background:var(--warn-soft);border-color:transparent}

/* Bilder */
.rs-shot{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.rs-shot img{display:block;width:100%}
.rs-shot figcaption{font-size:14px;color:var(--muted);padding:10px 14px;border-top:1px solid var(--line)}
.rs-illu{display:block;width:100%;height:auto}

/* ---------- Fußzeile (auf allen Seiten gleich) ---------- */
.rs-foot{background:var(--surface);border-top:1px solid var(--line);padding-block:var(--s7) var(--s6);margin-top:var(--s7);font-size:15px}
.rs-foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:var(--s6)}
.rs-foot h2{font-size:15px;font-weight:600;margin-bottom:var(--s3)}
.rs-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rs-foot a{color:var(--muted);text-decoration:none}
.rs-foot a:hover{color:var(--accent);text-decoration:underline}
.rs-foot a[aria-current="true"]{color:var(--fg);font-weight:600}
.rs-foot address{font-style:normal;color:var(--muted)}
.rs-foot-bottom{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line);color:var(--faint);font-size:14px;display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}

/* Rechtstexte */
.rs-legal{max-width:760px;padding-block:var(--s7) var(--s8)}
.rs-legal h1{font-size:clamp(28px,4vw,38px);margin-bottom:var(--s3)}
.rs-legal h2{font-size:20px;margin:var(--s6) 0 var(--s2)}
.rs-legal p,.rs-legal li{margin:0 0 var(--s3);max-width:70ch}

@media (max-width:960px){
  .rs-grid.c3,.rs-grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rs-nav{order:3;width:100%;margin-left:0;overflow-x:auto;flex-wrap:nowrap;padding-bottom:var(--s2)}
  .rs-nav a{flex:none}
  .rs-top-actions{margin-left:auto}
  .rs-foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .rs-grid.c2,.rs-grid.c3,.rs-grid.c4,.rs-foot-grid{grid-template-columns:1fr}
  .wrap{padding-inline:16px}
  .rs-hero{padding-block:var(--s7) var(--s6)}
  .rs-section{padding-block:var(--s7)}
  .rs-dl{grid-template-columns:1fr;gap:2px}
  .rs-dl dd{margin-bottom:var(--s3)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}