/* =========================================================================
   PAARWERK — Gestaltungssystem
   Funktionales Plakat: Raster sichtbar, keine Rundungen, keine Schatten,
   Farbe nach Funktion statt nach Geschmack.
   ========================================================================= */

@font-face{
  font-family:"Space Grotesk";
  src:url("schrift/space-grotesk.woff2") format("woff2");
  font-weight:500 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("schrift/plex-sans.woff2") format("woff2");
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
}

:root{
  color-scheme:light;

  --ff-display:"Space Grotesk",system-ui,sans-serif;
  --ff-text:"IBM Plex Sans",system-ui,sans-serif;

  --fs-marke:  clamp(.875rem, .84rem + .15vw, 1rem);
  --fs-label:  .75rem;
  --fs-mini:   clamp(.8125rem, .79rem + .12vw, .875rem);
  --fs-body:   clamp(1.0625rem, 1.02rem + .22vw, 1.1875rem);
  --fs-lead:   clamp(1.1875rem, 1.06rem + .65vw, 1.5rem);
  --fs-h3:     clamp(1.125rem, 1.05rem + .4vw, 1.375rem);
  --fs-h2:     clamp(1.75rem, 1.32rem + 2.1vw, 2.875rem);
  --fs-h1:     clamp(2rem, 1.12rem + 4.4vw, 4.25rem);
  --fs-preis:  clamp(2.5rem, 1.9rem + 3vw, 4rem);

  --ink:       #10131A;
  --ink-2:     #3C4351;
  --canvas:    #ECEEF0;
  --paper:     #FFFFFF;
  --linie:     #C3C8D0;
  --raster:    #D9DDE3;

  --sys-blau:  #1F3FD8;
  --sys-ocker: #E5A400;
  --sys-gruen: #0F6B4F;
  --sys-rot:   #D8331F;
  --sys-blau-t:#DCE2FB;
  --sys-ocker-t:#FBEECB;

  --s0:4px; --s1:8px; --s2:12px; --s3:16px; --s4:24px;
  --s5:32px; --s6:48px; --s7:64px; --s8:96px; --s9:128px;

  --rule-1:2px; --rule-2:4px; --rule-3:8px;
  --radius:0;
  --maxw:1200px;
  --gutter:clamp(16px,4.5vw,40px);
  --kopf-h:56px;
}

/* ------------------------------------------------------------- Grundlage - */

*{ box-sizing:border-box; }
html{ overflow-x:clip; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--kopf-h) + 16px); }

body{
  margin:0;
  padding-top:var(--kopf-h);
  font-family:var(--ff-text);
  font-weight:400;
  font-size:var(--fs-body);
  line-height:1.62;
  color:var(--ink);
  background:var(--canvas);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}

img,svg,table{ max-width:100%; }
svg{ display:block; }

h1,h2,h3,.preis,.marke{ font-family:var(--ff-display); font-weight:700; margin:0; }
h1{ font-size:var(--fs-h1); line-height:.96; letter-spacing:-.022em; text-wrap:balance; hyphens:manual; }
h2{ font-size:var(--fs-h2); line-height:1.02; letter-spacing:-.018em; text-wrap:balance; hyphens:manual; }
h3{ font-size:var(--fs-h3); line-height:1.15; letter-spacing:-.01em; font-weight:500; }

p,li{ max-width:60ch; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word; }
p{ margin:0 0 var(--s3); }
p:last-child{ margin-bottom:0; }

a{ color:inherit; }

.label{
  font-family:var(--ff-text);
  font-weight:600;
  font-size:var(--fs-label);
  text-transform:uppercase;
  letter-spacing:.15em;
  line-height:1;
  margin:0 0 var(--s3);
  display:block;
}
.mini{ font-size:var(--fs-mini); color:var(--ink-2); }
.preis{ font-size:var(--fs-preis); line-height:.9; letter-spacing:-.03em; font-feature-settings:"tnum" 1; }

:focus-visible{ outline:var(--rule-2) solid var(--sys-ocker); outline-offset:3px; }

/* ------------------------------------------------------------- Raster ---- */

.raster{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:grid;
  gap:var(--s4);
  grid-template-columns:repeat(4,minmax(0,1fr));
  position:relative;
  z-index:1;
}
.raster>*{ min-width:0; }
.pos-a,.pos-b,.pos-c,.pos-d,.pos-voll{ grid-column:1/-1; }

@media (min-width:760px){
  .raster{ grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--s5); }
  .pos-a{ grid-column:1/8; }
  .pos-b{ grid-column:8/13; }
  .pos-c{ grid-column:3/13; }
  .pos-d{ grid-column:1/6; }
  .pos-voll{ grid-column:1/-1; }
}

/* sichtbare Spuren des Rasters */
.spuren{
  position:absolute; inset:0;
  pointer-events:none; z-index:0;
  max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gutter);
  display:grid; gap:var(--s4);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (min-width:760px){ .spuren{ grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--s5); } }
.spuren i{ border-left:var(--rule-1) solid var(--raster); opacity:.55; }
.spuren i:last-child{ border-right:var(--rule-1) solid var(--raster); }
@media (max-width:359px){ .spuren{ display:none; } }

/* ------------------------------------------------------------- Baender --- */

.feld{ padding-block:clamp(56px,8.5vw,128px); position:relative; }
.feld--blau { background:var(--sys-blau);    color:var(--paper); border-top:var(--rule-3) solid var(--ink); }
.feld--ocker{ background:var(--sys-ocker-t); color:var(--ink);   border-top:var(--rule-3) solid var(--sys-ocker); }
.feld--gruen{ background:var(--sys-gruen);   color:var(--paper); border-top:var(--rule-3) solid var(--ink); }
.feld--hell { background:var(--paper);       color:var(--ink);   border-top:var(--rule-3) solid var(--ink); }
.feld--grau { background:var(--canvas);      color:var(--ink);   border-top:var(--rule-3) solid var(--ink); }

.feld--blau a,.feld--gruen a{ color:var(--paper); }
.feld--blau .mini,.feld--gruen .mini{ color:rgba(255,255,255,.82); }
.feld--blau .label{ color:rgba(255,255,255,.78); }
/* Auf dem Gruen reichte .72 nicht fuer 4,5:1 bei 12px/600. */
.feld--gruen .label{ color:rgba(255,255,255,.92); }

/* Verweise im Fliesstext brauchen eine groessere Beruehrflaeche, ohne den
   Zeilenfall zu zerstoeren. */
.feld p a,
.orga a,
.frage a,
.zugang__fuss a,
.hinweis p a,
.anbieter p a,
.dok p a,
.dok li a,
.dok dd a{
  display:inline-block;
  padding-block:7px;
}

/* ------------------------------------------------------------- Kopf ------ */

.kopf{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:40;
  height:var(--kopf-h);
  background:var(--sys-blau); color:var(--paper);
  border-bottom:var(--rule-2) solid var(--ink);
}
.kopf__in{
  height:100%;
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
}
.marke{
  font-size:var(--fs-marke); letter-spacing:-.01em;
  text-decoration:none; color:var(--paper);
  display:inline-flex; align-items:center; gap:var(--s1);
  min-height:44px;
}
.marke svg{ flex:0 0 18px; }
.kopf__rechts{ display:flex; align-items:center; gap:var(--s4); }
.kopf__rechts a{
  font-size:var(--fs-mini); color:var(--paper);
  text-decoration:underline; text-underline-offset:4px;
  text-decoration-thickness:var(--rule-1);
  min-height:44px; display:inline-flex; align-items:center;
}
.kopf__preis{ font-size:var(--fs-mini); font-weight:600; white-space:nowrap; }
@media (max-width:419px){ .kopf__rechts a{ display:none; } }

/* ------------------------------------------------------------- Datenblatt  */

.datenblatt{ padding-block:clamp(48px,7vw,104px) clamp(40px,6vw,80px); position:relative; }
.datenblatt h1{ margin-bottom:var(--s4); }
.datenblatt .vorspann{ font-size:var(--fs-lead); line-height:1.32; max-width:34ch; color:var(--ink-2); }

.daten{
  list-style:none; margin:var(--s6) 0 0; padding:0;
  border-top:var(--rule-2) solid var(--ink);
  display:grid; gap:0;
}
.daten li{
  max-width:none;
  display:flex; justify-content:space-between; gap:var(--s3);
  padding-block:var(--s2);
  border-bottom:var(--rule-1) solid var(--linie);
  font-size:var(--fs-mini);
}
.daten b{ font-weight:600; }
.daten span{ color:var(--ink-2); text-align:right; }

.sprung{
  display:inline-flex; align-items:center; gap:var(--s1);
  margin-top:var(--s5); min-height:44px;
  font-weight:600; font-size:var(--fs-mini);
  text-decoration:underline; text-underline-offset:5px;
  text-decoration-thickness:var(--rule-1);
}

/* ------------------------------------------------------------- Abgrenzung  */

.gegen{ display:grid; gap:var(--s5); }
@media (min-width:760px){ .gegen{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s7); } }
.gegen__teil{ border-top:var(--rule-3) solid var(--ink); padding-top:var(--s4); }
.gegen__teil--nicht{ border-top-color:var(--sys-rot); }
.gegen__teil ul{ list-style:none; margin:var(--s3) 0 0; padding:0; }
.gegen__teil li{ padding-block:var(--s2); border-bottom:var(--rule-1) solid var(--linie); }

/* ------------------------------------------------------------- Methode ---- */

.bausteine{ list-style:none; margin:0; padding:0; display:grid; gap:var(--rule-2); }
@media (min-width:760px){ .bausteine{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.baustein{
  max-width:none;
  background:var(--paper); color:var(--ink);
  padding:var(--s4);
  border-left:var(--rule-3) solid var(--sys-blau);
}
.baustein h3{ margin-bottom:var(--s2); }
.baustein p{ margin:0; font-size:var(--fs-mini); color:var(--ink-2); }
.baustein svg{ margin-bottom:var(--s3); }

/* ------------------------------------------------------------- Zugang ----- */

.zugang{ padding:0; border-top:var(--rule-3) solid var(--ink); }
.zugang__grid{ display:grid; }
@media (min-width:760px){ .zugang__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.karte{ padding:clamp(32px,5vw,64px) var(--gutter); display:flex; flex-direction:column; }
.karte--basis{ background:var(--canvas); color:var(--ink); }
.karte--voll { background:var(--sys-blau); color:var(--paper); }
@media (min-width:760px){
  .karte--basis{ padding-inline:max(var(--gutter), calc((100vw - var(--maxw))/2 + var(--gutter))) var(--s6); }
  .karte--voll { padding-inline:var(--s6) max(var(--gutter), calc((100vw - var(--maxw))/2 + var(--gutter))); }
}
.karte h3{ font-size:var(--fs-h3); margin-bottom:var(--s1); }
.karte .preis{ margin-block:var(--s2) var(--s0); }
.karte__einmal{ font-size:var(--fs-mini); margin-bottom:var(--s4); }
.karte ul{ list-style:none; margin:0 0 var(--s5); padding:0; }
.karte li{
  padding-block:var(--s2);
  border-top:var(--rule-1) solid currentColor;
  font-size:var(--fs-mini);
  max-width:none;
}
.karte li:last-child{ border-bottom:var(--rule-1) solid currentColor; }
.karte .knopf{ margin-top:auto; }

.knopf{
  display:block; width:100%; min-height:56px;
  padding:var(--s3) var(--s4);
  border:var(--rule-2) solid currentColor; border-radius:var(--radius);
  text-align:center; text-decoration:none;
  font-family:var(--ff-display); font-weight:700; font-size:1.0625rem; letter-spacing:-.01em;
  transition:background .12s linear, color .12s linear;
  cursor:pointer;
}
.knopf--dunkel{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.knopf--dunkel:hover{ background:transparent; color:var(--ink); }
.knopf--hell{ background:var(--paper); color:var(--sys-blau); border-color:var(--paper); }
.knopf--hell:hover{ background:transparent; color:var(--paper); }

.zugang__fuss{ background:var(--ink); color:var(--paper); }
.zugang__fuss .raster{ padding-block:var(--s5); }
.zugang__fuss p{ color:rgba(255,255,255,.82); font-size:var(--fs-mini); margin-bottom:var(--s1); }
.zugang__fuss p:last-child{ margin-bottom:0; }

/* ------------------------------------------------------------- Lehrplan --- */

.stundenplan{ width:100%; border-collapse:collapse; margin-top:var(--s5); }
.stundenplan caption{ text-align:left; margin-bottom:var(--s3); font-size:var(--fs-mini); color:var(--ink-2); }
.stundenplan th,.stundenplan td{ text-align:left; vertical-align:top; padding:var(--s2) var(--s3) var(--s2) 0; }
.stundenplan thead th{
  font-family:var(--ff-text); font-weight:600; font-size:var(--fs-label);
  text-transform:uppercase; letter-spacing:.12em;
  border-bottom:var(--rule-2) solid var(--ink);
}
.stundenplan tbody th{ font-weight:600; }
.stundenplan tbody tr{ border-bottom:var(--rule-1) solid var(--sys-ocker); }
.stundenplan td:last-child,.stundenplan th:last-child{ padding-right:0; white-space:nowrap; }

@media (max-width:519px){
  .stundenplan thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .stundenplan tbody tr{ display:block; padding-block:var(--s3); }
  .stundenplan tbody th,
  .stundenplan tbody td,
  .stundenplan tbody td:last-child{ display:block; padding:0 0 var(--s0); white-space:normal; }
  .stundenplan tbody td::before{
    content:attr(data-feld) " · ";
    font-weight:600; font-size:var(--fs-label);
    text-transform:uppercase; letter-spacing:.12em; color:var(--ink-2);
  }
}

/* ------------------------------------------------------------- Leitung ---- */

.leitung__marke{ margin-bottom:var(--s5); }
.leitung .grenze{
  margin-top:var(--s4); padding-top:var(--s3);
  border-top:var(--rule-2) solid rgba(255,255,255,.35);
  font-weight:600;
}

/* ------------------------------------------------------------- Organisation */

.orga{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
@media (min-width:760px){ .orga{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--s7); } }
.orga li{
  max-width:none;
  display:grid; grid-template-columns:minmax(0,1fr);
  padding-block:var(--s3);
  border-top:var(--rule-1) solid var(--linie);
}
.orga b{ font-weight:600; font-size:var(--fs-mini); text-transform:uppercase; letter-spacing:.1em; }
.orga span{ font-size:var(--fs-mini); color:var(--ink-2); margin-top:var(--s0); }

.punkte{ height:var(--s5); margin-top:var(--s6); }
/* ohne die eigene Hoehenangabe wuerde .rasterpunkt (gleiche Spezifitaet,
   spaeter notiert) die Hoehe von .punkte ueberschreiben. */
.rasterpunkt{
  background-image:radial-gradient(var(--ink) 1.1px, transparent 1.2px);
  background-size:9px 9px;
  opacity:.14;
}

/* ------------------------------------------------------------- Fragen ----- */

.fragen__liste{ margin-top:var(--s5); }
.frage{ padding-block:var(--s4); border-top:var(--rule-1) solid var(--linie); }
.frage:first-child{ border-top:var(--rule-2) solid var(--ink); }
.frage h3{ margin-bottom:var(--s2); }
.frage p{ margin:0; color:var(--ink-2); }

/* ------------------------------------------------------------- Anbieter --- */

.anbieter{ background:var(--ink); color:var(--paper); padding-block:var(--s7); }
.anbieter p{ color:rgba(255,255,255,.82); font-size:var(--fs-mini); max-width:72ch; }
.anbieter a{ color:var(--paper); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:var(--rule-1); }
.anbieter nav{ display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); margin-bottom:var(--s4); }
.anbieter nav a{ min-height:44px; display:inline-flex; align-items:center; font-size:var(--fs-mini); }

/* ------------------------------------------------------------- Hinweis ---- */

.hinweis{
  position:fixed; inset-inline:0; inset-block-end:0; z-index:50;
  background:var(--ink); color:var(--paper);
  border-top:var(--rule-2) solid var(--sys-ocker);
  padding-block:var(--s3);
  padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom, 0px));
}
.hinweis[hidden]{ display:none; }
.hinweis__in{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s4);
}
.hinweis p{ flex:1 1 20rem; min-width:0; margin:0; font-size:var(--fs-mini); color:rgba(255,255,255,.86); }
.hinweis a{ color:var(--paper); text-decoration:underline; text-underline-offset:3px; }
.hinweis__wahl{ display:flex; gap:var(--s2); flex-wrap:wrap; }
.hinweis__wahl button{
  font-family:var(--ff-text); font-size:var(--fs-mini); font-weight:600;
  min-height:48px; padding:var(--s2) var(--s4);
  border:var(--rule-1) solid var(--paper); border-radius:var(--radius);
  background:transparent; color:var(--paper); cursor:pointer;
}
.hinweis__wahl button:hover{ background:var(--paper); color:var(--ink); }

/* ------------------------------------------------------------- Dokument --- */

.dok{ padding-block:var(--s7) var(--s9); }
.dok h1{ font-size:var(--fs-h2); margin-bottom:var(--s2); }
.dok h2{ font-size:var(--fs-h3); margin:var(--s6) 0 var(--s2); border-top:var(--rule-2) solid var(--ink); padding-top:var(--s3); }
.dok h3{ font-size:var(--fs-body); font-weight:600; margin:var(--s4) 0 var(--s1); }
.dok p,.dok li,.dok dd{ font-size:1rem; }
.dok ul,.dok ol{ padding-inline-start:var(--s4); }
.dok li{ margin-bottom:var(--s1); }
.dok dl{ margin:0 0 var(--s4); }
.dok dt{ font-size:var(--fs-label); text-transform:uppercase; letter-spacing:.1em; color:var(--ink-2); font-weight:600; }
.dok dd{ margin:0 0 var(--s2); overflow-wrap:anywhere; }
.dok a{ color:var(--sys-blau); text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
.dok .stand{ font-size:var(--fs-mini); color:var(--ink-2); margin-bottom:var(--s6); }
.dok .kasten{
  border-left:var(--rule-3) solid var(--sys-gruen);
  background:var(--paper);
  padding:var(--s4);
  margin:0 0 var(--s4);
}
.dok .kasten p{ max-width:none; }
.zurueck{
  display:inline-flex; align-items:center; gap:var(--s1);
  min-height:44px; font-size:var(--fs-mini); font-weight:600;
  text-decoration:underline; text-underline-offset:4px;
  margin-bottom:var(--s4);
}

/* Widerrufsformular (§ 356a BGB) */
.formular{ display:grid; gap:var(--s3); max-width:34rem; margin-top:var(--s4); }
.formular label{ font-size:var(--fs-mini); font-weight:600; display:block; margin-bottom:var(--s0); }
.formular input,.formular textarea{
  width:100%; font-family:var(--ff-text); font-size:1rem;
  padding:var(--s2); border:var(--rule-1) solid var(--ink); border-radius:var(--radius);
  background:var(--paper); color:var(--ink);
}
.formular textarea{ min-height:7rem; }
.formular .knopf{ background:var(--sys-gruen); color:var(--paper); border-color:var(--sys-gruen); }
.formular .knopf:hover{ background:transparent; color:var(--sys-gruen); }

/* ------------------------------------------------------------- Bewegung --- */

/* Der Anfangszustand versteckt Inhalt (clip-path, scaleY(0)). Er gilt deshalb
   NUR, wenn werk.js geladen ist und das Attribut html[data-bewegung] gesetzt
   hat. Faellt das Skript aus - 404, Netzwerkfehler, Ausnahme - bleibt alles
   sichtbar. Eine leere Seite ist teurer als eine Seite ohne Animation. */
@media (prefers-reduced-motion:no-preference){
  html[data-bewegung] [data-an]{ will-change:clip-path,transform; }
  html[data-bewegung] [data-an="wisch"]{
    clip-path:inset(0 100% 0 0);
    transition:clip-path .58s cubic-bezier(.16,.86,.22,1);
  }
  html[data-bewegung] [data-an="vorhang"]{
    transform:scaleY(0); transform-origin:top;
    transition:transform .46s cubic-bezier(.2,.8,.2,1);
  }
  html[data-bewegung] [data-an="strich"]{
    transform:scaleX(0); transform-origin:left;
    transition:transform .4s cubic-bezier(.2,.8,.2,1);
  }
  html[data-bewegung] .is-set[data-an="wisch"]{ clip-path:inset(0 0 0 0); }
  html[data-bewegung] .is-set[data-an="vorhang"]{ transform:scaleY(1); }
  html[data-bewegung] .is-set[data-an="strich"]{ transform:scaleX(1); }
}
@media (prefers-reduced-motion:reduce){
  [data-an]{ clip-path:none !important; transform:none !important; }
}