/* ==========================================================================
   Seitenaufbau für alle Seiten (IT-Service Kinder, Runschmiede, Shop, Kundenbereich).
   Wird nach rs.css und dem seiteneigenen Stylesheet geladen.

   Das System, an dem man alle Seiten wiedererkennt:
   1. Rahmen: Der Inhalt steht in einer Spalte mit feinen senkrechten Linien links und rechts,
      jeder Abschnitt ist durch eine durchgehende waagerechte Linie getrennt.
   2. Abschnittsnummer: Jeder Abschnitt trägt oben links eine kleine Nummer (01, 02, …).
   3. Gitternetz: Der Kopfbereich jeder Seite hat ein feines 32-px-Raster.
   4. Zellen: Listen von Leistungen, Plattformen, Beispielen usw. stehen in Zellen,
      die sich eine 1-px-Linie teilen, statt in einzelnen schwebenden Karten.
   ========================================================================== */

:root{
  --frame:1160px;
  --cell-pad:24px;
  --sec-pad:80px;
}

/* ---------- 1. Rahmen ---------- */
:root .wrap{max-width:var(--frame);padding-inline:32px}
:root .wrap.narrow{max-width:var(--frame)}
:root .wrap.narrow > *{max-width:760px}
:root :is(.rs-top,.rs-hero,.hero,.rs-section,.band,.rs-foot) > .wrap,
:root main > .rs-legal,
:root main > .wrap{border-inline:1px solid var(--line)}
:root main > .rs-legal{max-width:var(--frame);margin-inline:auto;padding-inline:32px}
:root main > .rs-legal > *{max-width:760px}

/* Kopfzeile: bleibt beim Scrollen stehen */
:root .rs-top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:saturate(1.4) blur(8px)}
:root .rs-top .wrap{min-height:64px}

/* Abschnitte: einheitlicher Abstand, durchgehende Trennlinie */
:root :is(.rs-section,.band){padding-block:0;border-top:1px solid var(--line);position:relative;counter-increment:rs-sec}
:root :is(.rs-section,.band) > .wrap{padding-block:var(--sec-pad)}
:root main{counter-reset:rs-sec}
:root .rs-foot{margin-top:0;padding-block:0;border-top:1px solid var(--line)}
:root .rs-foot > .wrap{padding-block:48px 32px}

/* ---------- 2. Abschnittsnummer ---------- */
:root :is(.rs-section,.band)::before{
  content:counter(rs-sec,decimal-leading-zero);
  position:absolute;top:0;left:max(0px,calc((100% - var(--frame)) / 2));
  font:500 12px/1 var(--mono);color:var(--muted);
  padding:7px 12px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg)
}

/* ---------- 3. Gitternetz im Kopfbereich ---------- */
:root :is(.rs-hero,.hero){padding-block:0;border-bottom:0}
:root :is(.rs-hero,.hero) > .wrap{
  padding-block:88px 72px;position:relative;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:32px 32px;background-position:-1px -1px;
}
/* Raster nur hinter dem Text andeuten, nach unten und rechts auslaufen lassen */
:root :is(.rs-hero,.hero) > .wrap::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,var(--bg) 92%),linear-gradient(90deg,transparent 40%,var(--bg) 100%);
}
:root :is(.rs-hero,.hero) > .wrap > *{position:relative}
:root :is(.rs-h1,.hero h1){font-size:clamp(34px,5vw,56px);font-weight:600;letter-spacing:-.025em;line-height:1.08}

/* ---------- Einheitliche Typografie ---------- */
:root :is(.rs-h2,.h2){font-size:clamp(26px,3vw,36px);font-weight:600;letter-spacing:-.02em}
:root :is(.rs-h3,.h3){font-weight:600}
:root .muted-p{font-size:16px}
:root .band .h2{margin-bottom:12px}

/* ---------- 4. Zellen ---------- */
:root :is(.it-services,.platgrid,.seglist,.p-rows,.p-examples,.p-cases,.p-layers,.p-ops,.it-contact){
  display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  padding:0;list-style:none;margin-top:28px;max-width:none
}
:root :is(.it-services > div,.platgrid > .plat,.seglist > li,.p-rows > .p-row,.p-examples > li,.p-layers > li){
  background:var(--surface);padding:var(--cell-pad);margin:0;border:0;border-radius:0
}

/* Leistungen IT-Service: 2 Spalten */
:root .it-services{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Plattformen im Shop: 4 Spalten */
:root .platgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
:root .platgrid > .plat:hover{background:var(--surface-2)}
/* Einsatzzwecke im Shop */
:root .seglist{grid-template-columns:1fr}
:root .seglist > li{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
/* Portal: Wo du was erledigst */
:root .p-rows-wrap{grid-template-columns:1fr}
:root .p-rows{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:20px}
:root .p-rows > .p-row{display:flex;flex-direction:column;gap:8px}
/* Portal: Beispiele */
:root .p-examples{grid-template-columns:1fr;font-size:16px}
/* Portal: Aufbau in Schichten, nummeriert wie die Abschnitte */
:root .p-layers{grid-template-columns:repeat(2,minmax(0,1fr));counter-reset:layer}
:root .p-layers > li{counter-increment:layer}
:root .p-layers > li::before{content:counter(layer,decimal-leading-zero);display:block;font:500 12px/1 var(--mono);color:var(--muted);margin-bottom:10px}
/* Definitionslisten als Zeilen: Begriff links, Text rechts */
:root :is(.p-cases,.p-ops,.it-contact){grid-template-columns:220px 1fr}
:root :is(.p-cases,.p-ops,.it-contact) > :is(dt,dd){background:var(--surface);padding:18px var(--cell-pad);margin:0}
:root :is(.p-cases,.p-ops,.it-contact) > dt{font-weight:600;color:var(--fg);font-size:16px}
:root :is(.p-cases,.p-ops,.it-contact) > dd{color:var(--muted)}
:root .it-contact > dd{color:var(--fg)}

/* Panels, Karten, FAQ, Tabellen: gleiche Fläche wie Zellen */
:root :is(.rs-panel,.card,.it-faq,.poplist,.rs-table-wrap,.rs-shot){border-radius:var(--r);border-color:var(--line);box-shadow:none}
:root .it-note{background:var(--surface);border:1px solid var(--line);max-width:none}
:root .rs-table th{font-family:var(--font)}

/* Shop-Grundbot: Preis als Zelle neben Beliebten Addons */
:root .pricegrid{gap:32px}

/* Schmale Bildschirme */
@media (max-width:960px){
  :root .platgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  :root :is(.p-rows,.p-layers){grid-template-columns:1fr}
}
@media (max-width:640px){
  :root{--cell-pad:18px;--sec-pad:56px}
  :root .wrap{padding-inline:16px}
  :root :is(.it-services,.platgrid){grid-template-columns:1fr}
  :root .seglist > li{grid-template-columns:1fr}
  :root :is(.p-cases,.p-ops,.it-contact){grid-template-columns:1fr}
  :root :is(.p-cases,.p-ops,.it-contact) > dd{padding-top:0}
  :root :is(.p-cases,.p-ops,.it-contact) > dt{padding-bottom:6px}
  :root :is(.rs-hero,.hero) > .wrap{padding-block:56px 48px}
}

/* Formularseiten (Anmelden, Registrieren): Rahmen volle Breite, Formular schmal */
:root .wrap.p-auth{max-width:var(--frame);margin-inline:auto;padding-block:72px 88px}
:root .wrap.p-auth > *{max-width:460px}