/* ============================================================
   Hollinder Digital — Gestaltung
   ------------------------------------------------------------
   Alles hier kommt aus dem vorhandenen Logo:
   · Tiefschwarz #121212 und das Blau #0D63F3 sind daraus gemessen.
   · Das Logo hat harte Kanten - deshalb gibt es auf dieser Seite
     keine abgerundeten Ecken. Kein Radius, nirgends.
   · Die blaue Schraege im Zeichen ist das einzige wiederkehrende
     Gestaltungselement (.schraeg). Sie wird sparsam eingesetzt.
   · Archivo ist die Schrift des Wortzeichens, Source Sans 3 die
     Lesefschrift. Beide liegen lokal, es wird nichts nachgeladen.
   ============================================================ */

:root{
  --tinte:#121212;
  --tinte-2:#38383B;
  --grau:#6E6E73;
  --grau-hell:#9A9AA0;
  --linie:#E3E3E6;
  --linie-fein:#F0F0F2;
  --papier:#FFFFFF;
  --papier-2:#F7F7F8;
  --nacht:#0E0E10;
  --nacht-2:#1A1A1D;
  --blau:#0D63F3;
  --blau-tief:#0A4CC0;
  --blau-hell:#2E98FF;

  --f-titel:'Archivo',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --f-text:'Source Sans 3',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;

  --breite:1240px;
  --rand:clamp(1.25rem,5vw,3.5rem);
  --luft:clamp(4.5rem,9vw,8rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papier); color:var(--tinte);
  font-family:var(--f-text); font-size:clamp(1rem,.35vw + .95rem,1.075rem);
  line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--blau); outline-offset:3px}

h1,h2,h3{font-family:var(--f-titel); font-weight:700; letter-spacing:-.02em; margin:0; text-wrap:balance}
h1{font-size:clamp(2.45rem,6.4vw,4.6rem); line-height:1.02; font-stretch:105%}
h2{font-size:clamp(1.65rem,3.2vw,2.35rem); line-height:1.12}
h3{font-size:1.1rem; line-height:1.35; letter-spacing:-.01em}
p{margin:0}

/* Die wiederkehrende Schraege aus dem Zeichen. Nur als Markierung,
   nie als Schmuck: aktiver Menuepunkt, Marke, Abschnittsnummer. */
.schraeg{display:inline-block;width:.5rem;height:1rem;background:var(--blau);
  transform:skewX(-18deg);flex:none}

.mitte{max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand)}
.strich{border:0;border-top:1px solid var(--linie);margin:0}

.marke{font-family:var(--f-titel);font-size:.75rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--grau);display:flex;align-items:center;gap:.7rem}
.marke .schraeg{width:.42rem;height:.78rem}

.lauf{font-size:clamp(1.05rem,.5vw + .95rem,1.22rem);line-height:1.62;color:var(--tinte-2);max-width:34em}

/* ---------- Schaltflaechen ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--f-titel);font-weight:600;font-size:.95rem;letter-spacing:.01em;
  padding:.92rem 1.6rem;border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.knopf-voll{background:var(--blau);color:#fff}
.knopf-voll:hover{background:var(--blau-tief)}
.knopf-leer{background:none;color:var(--tinte);border-color:var(--linie)}
.knopf-leer:hover{border-color:var(--tinte)}
.textlink{color:var(--blau);text-decoration:none;font-weight:600;
  border-bottom:1px solid rgba(13,99,243,.35);padding-bottom:1px;
  transition:border-color .18s ease}
.textlink:hover{border-bottom-color:var(--blau)}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--linie)}
.kopf-inhalt{display:flex;align-items:center;justify-content:space-between;gap:2rem;
  min-height:76px;max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand)}
.kopf-logo{display:block;flex:none}
.kopf-logo img{height:29px;width:auto}
.menue{display:flex;align-items:center;gap:clamp(1.1rem,2.2vw,2.1rem)}
.menue a{font-family:var(--f-titel);font-size:.93rem;font-weight:500;color:var(--tinte-2);
  text-decoration:none;padding:.35rem 0;position:relative;transition:color .18s ease}
.menue a:hover{color:var(--tinte)}
.menue a[aria-current="page"]{color:var(--tinte);font-weight:600}
.menue a[aria-current="page"]::after{content:"";position:absolute;left:0;bottom:-2px;
  width:.55rem;height:2px;background:var(--blau);transform:skewX(-18deg)}
.menue a.knopf-voll{color:#fff}
.menue .knopf{padding:.62rem 1.15rem;font-size:.9rem}
.menueknopf{display:none;background:none;border:0;padding:.55rem;margin-right:-.55rem;cursor:pointer}
.menueknopf span{display:block;width:22px;height:2px;background:var(--tinte);margin:4px 0;
  transition:transform .2s ease,opacity .2s ease}
.menueknopf[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menueknopf[aria-expanded="true"] span:nth-child(2){opacity:0}
.menueknopf[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- Einstieg ---------- */
.einstieg{padding-block:clamp(4rem,10vw,8.5rem) 0}
.einstieg-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,19rem);
  gap:clamp(2.5rem,6vw,5rem);align-items:end}
.einstieg h1{margin:1.6rem 0 0;max-width:15ch}
.einstieg h1 em{font-style:normal;color:var(--blau)}
.einstieg .lauf{margin-top:1.9rem}
.einstieg .tun{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;margin-top:2.4rem}
.felder{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.felder li{display:grid;grid-template-columns:2.2rem 1fr;gap:1rem;align-items:baseline;
  padding:1rem 0;border-bottom:1px solid var(--linie-fein)}
.felder li:last-child{border-bottom:0}
.felder .nr{font-family:var(--f-titel);font-size:.78rem;font-weight:600;color:var(--grau);
  letter-spacing:.06em}
.felder .was{font-family:var(--f-titel);font-weight:600;font-size:1.02rem}
.felder .was span{display:block;font-family:var(--f-text);font-weight:400;font-size:.92rem;
  color:var(--grau);letter-spacing:0;margin-top:.1rem}
.einstieg-fuss{margin-top:clamp(3.5rem,7vw,6rem);padding-bottom:.9rem}

/* ---------- Abschnitte ---------- */
.abschnitt{padding-block:var(--luft)}
.abschnitt-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,32rem);
  gap:clamp(1.5rem,5vw,4rem);align-items:end;margin-bottom:clamp(2.5rem,5vw,3.8rem)}
.abschnitt-kopf h2{margin-top:1rem}

/* Leistungen: grosse nummerierte Bloecke, keine Kaesten */
.leistung{display:grid;grid-template-columns:5.5rem minmax(0,20rem) minmax(0,1fr);
  gap:clamp(1.2rem,3vw,3rem);align-items:start;padding-block:clamp(2.2rem,4.5vw,3.4rem);
  border-top:1px solid var(--linie)}
.leistung:last-of-type{border-bottom:1px solid var(--linie)}
.leistung .zahl{font-family:var(--f-titel);font-size:clamp(2.2rem,4vw,3.1rem);font-weight:700;
  line-height:1;color:#CFCFD4;font-stretch:110%;letter-spacing:-.03em}
.leistung h3{font-size:clamp(1.25rem,2.2vw,1.6rem);font-weight:700;letter-spacing:-.02em}
.leistung .dazu{margin-top:.55rem;font-size:.92rem;color:var(--grau)}
.leistung .text{color:var(--tinte-2)}
.leistung .text p + p{margin-top:.9rem}
.leistung .weiter{margin-top:1.2rem;display:inline-block}

/* ---------- Dunkler Abschnitt: Betreuung ---------- */
.dunkel{background:var(--nacht);color:#fff}
.dunkel h2{color:#fff}
.dunkel .marke{color:var(--grau-hell)}
.dunkel .marke .schraeg{background:var(--blau-hell)}
.dunkel .lauf{color:#C6C6CC}
.betreuung{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2.5rem,6vw,5rem);align-items:start}
.ablauf{list-style:none;margin:0;padding:0;counter-reset:schritt}
.ablauf li{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;padding-bottom:1.9rem;position:relative}
.ablauf li::before{counter-increment:schritt;content:counter(schritt,decimal-leading-zero);
  font-family:var(--f-titel);font-size:.76rem;font-weight:600;letter-spacing:.1em;
  color:var(--blau-hell);padding-top:.35rem}
.ablauf li::after{content:"";position:absolute;left:1.1rem;top:1.9rem;bottom:.3rem;
  width:1px;background:rgba(255,255,255,.16)}
.ablauf li:last-child{padding-bottom:0}
.ablauf li:last-child::after{display:none}
.ablauf b{font-family:var(--f-titel);font-weight:600;font-size:1.04rem;display:block}
.ablauf span{color:#A9A9B2;font-size:.97rem;display:block;margin-top:.15rem}

/* ---------- Produkt ---------- */
.produkt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.produkt-zeichen{display:flex;align-items:center;gap:1rem}
.produkt-zeichen img{height:60px;width:auto}
.produkt-zeichen .wort{font-family:var(--f-titel);font-weight:700;font-size:1.55rem;letter-spacing:-.02em}
.produkt .herkunft{font-family:var(--f-titel);font-size:.74rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grau);margin-top:1.4rem}
.produkt-daten{list-style:none;margin:1.8rem 0 0;padding:0;border-top:1px solid var(--linie)}
.produkt-daten li{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:1.5rem;
  padding:.85rem 0;border-bottom:1px solid var(--linie-fein);font-size:.97rem}
.produkt-daten li b{font-family:var(--f-titel);font-weight:600}
.produkt-daten li span{color:var(--tinte-2)}

/* ---------- Apps & Games ---------- */
.werk{background:var(--papier-2);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.werk-raster{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.werk h2{max-width:14ch}
.stand{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--f-titel);
  font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blau)}
.stand::before{content:"";width:.42rem;height:.78rem;background:var(--blau);
  transform:skewX(-18deg);flex:none}
.vorhaben{list-style:none;margin:0;padding:0;display:grid;gap:0}
.vorhaben li{display:flex;align-items:baseline;gap:1rem;padding:1rem 0;
  border-bottom:1px solid var(--linie);font-family:var(--f-titel);font-weight:500;font-size:1.05rem}
.vorhaben li:first-child{border-top:1px solid var(--linie)}
.vorhaben li span{margin-left:auto;font-family:var(--f-text);font-size:.88rem;color:var(--grau);font-weight:400}

/* ---------- Über ---------- */
.ueber{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);align-items:start}
.ueber .bild{background:var(--papier-2);border-top:2px solid var(--tinte)}
.ueber img{width:100%;filter:grayscale(1) contrast(1.04)}
.ueber .name{font-family:var(--f-titel);font-weight:600;margin-top:.9rem}
.ueber .name span{display:block;font-family:var(--f-text);font-weight:400;color:var(--grau);font-size:.93rem}
.ueber .text p + p{margin-top:1rem;color:var(--tinte-2)}

/* ---------- Kontakt ---------- */
.kontakt-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(2.5rem,6vw,5rem);align-items:start}
.erreichbar{list-style:none;margin:2rem 0 0;padding:0}
.erreichbar li{padding:1.1rem 0;border-top:1px solid var(--linie)}
.erreichbar .lb{font-family:var(--f-titel);font-size:.74rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grau)}
.erreichbar a{display:block;font-family:var(--f-titel);font-size:1.2rem;font-weight:600;
  color:var(--tinte);text-decoration:none;margin-top:.25rem}
.erreichbar a:hover{color:var(--blau)}
.erreichbar .dazu{font-size:.92rem;color:var(--grau);margin-top:.15rem}

/* Felder ohne Kaesten: eine Linie genuegt. */
.feld{display:block;margin-bottom:1.6rem}
.feld > span{display:block;font-family:var(--f-titel);font-size:.74rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grau);margin-bottom:.45rem}
.feld input,.feld select,.feld textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--tinte);background:none;
  border:0;border-bottom:1px solid var(--linie);padding:.55rem 0;border-radius:0;
  transition:border-color .18s ease}
.feld textarea{resize:vertical;min-height:6.5rem;line-height:1.6}
.feld select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--tinte) 50%),
  linear-gradient(135deg,var(--tinte) 50%,transparent 50%);
  background-position:calc(100% - 9px) 1.25rem,calc(100% - 4px) 1.25rem;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:1.8rem;cursor:pointer}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:0;border-bottom-color:var(--blau);border-bottom-width:2px}
.feld input.fehlt,.feld select.fehlt,.feld textarea.fehlt{border-bottom-color:#C0392B}
.zweispalt{display:grid;grid-template-columns:1fr 1fr;gap:0 1.6rem}
.pflichthinweis{font-size:.86rem;color:var(--grau);margin-top:-.4rem}
.sendezeile{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-top:1.8rem;
  padding-top:1.6rem;border-top:1px solid var(--linie)}
.rueckmeldung{margin-top:1.2rem;padding:.9rem 0 .9rem 1.1rem;border-left:2px solid var(--blau);
  font-size:.96rem;line-height:1.6}
.rueckmeldung.schlecht{border-left-color:#C0392B}
.rueckmeldung[hidden]{display:none}

/* ---------- Fuss ---------- */
.fuss{background:var(--nacht);color:#9A9AA0;padding-block:clamp(3rem,6vw,4.5rem) 2rem;
  font-size:.93rem}
.fuss-raster{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));
  gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.1)}
.fuss img{height:22px;width:auto}
.fuss p{margin-top:1rem;max-width:26em;color:#8A8A92;font-size:.92rem}
.fuss h3{font-family:var(--f-titel);font-size:.74rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:#8A8A92;margin-bottom:.9rem}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin-bottom:.55rem}
.fuss a{color:#C6C6CC;text-decoration:none}
.fuss a:hover{color:#fff}
.fuss-unten{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  padding-top:1.6rem;color:#8A8A92;font-size:.86rem}

/* ---------- Navigation auf schmaleren Schirmen ----------
   Sieben Punkte samt Schaltflaeche passen bis etwa 900px in eine
   Zeile. Darunter brach "Apps & Games" um - deshalb greift das
   Menue frueher als das uebrige Telefon-Layout. */
@media (max-width:900px){
  .menue{position:fixed;inset:76px 0 0 0;background:var(--papier);flex-direction:column;
    align-items:stretch;gap:0;padding:.5rem var(--rand) 2.5rem;
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;
    overflow-y:auto;overscroll-behavior:contain}
  .menue.offen{transform:none;opacity:1;pointer-events:auto}
  .menue a{padding:.95rem 0;font-size:1.05rem;border-bottom:1px solid var(--linie-fein)}
  .menue a[aria-current="page"]::after{display:none}
  .menue .knopf{margin-top:1.1rem;width:100%;padding:.95rem 1.2rem}
  .menueknopf{display:block}
  body.menue-offen{overflow:hidden}
  body.menue-offen .kopf{background:var(--papier);backdrop-filter:none}
}

/* ---------- Schmale Schirme ---------- */
@media (max-width:980px){
  .einstieg-raster,.betreuung,.produkt,.werk-raster,.kontakt-raster{grid-template-columns:1fr}
  /* Der Abschnittskopf war zweispaltig gesetzt. Auf schmalen Schirmen
     wurden beide Spalten so eng, dass die Zeilen ineinanderliefen. */
  .abschnitt-kopf{grid-template-columns:1fr;align-items:start;gap:1.4rem}
  .einstieg-raster{gap:2.8rem}
  .leistung{grid-template-columns:3.2rem 1fr;gap:1.2rem 1.4rem}
  .leistung .text{grid-column:2}
  .ueber{grid-template-columns:11rem 1fr}
  .fuss-raster{grid-template-columns:1fr 1fr}
  .fuss-raster > :first-child{grid-column:1 / -1}
}
@media (max-width:760px){
  /* Fusszeilen-Links waren mit 21px zu klein zum Antippen. */
  .fuss li{margin-bottom:0}
  .fuss a{display:inline-block;padding:.5rem 0}
  .einstieg{padding-top:3.2rem}
  .zweispalt{grid-template-columns:1fr;gap:0}
  .ueber{grid-template-columns:1fr;gap:1.6rem}
  .ueber img{max-width:13rem}
  /* Auf dem Telefon bekommt die Haupthandlung die volle Breite.
     Die zweite bleibt bewusst schmaler - sonst stehen zwei
     gleich laute Schaltflaechen untereinander. */
  .einstieg .tun{flex-direction:column;align-items:stretch;gap:.7rem}
  .einstieg .tun .knopf-voll{width:100%}
  .einstieg .tun .knopf-leer{align-self:flex-start;width:auto}
  .sendezeile .knopf{width:100%}
}
@media (max-width:420px){
  .leistung{grid-template-columns:1fr}
  .leistung .zahl{font-size:1.6rem}
  .leistung .text{grid-column:1}
  .produkt-daten li{grid-template-columns:1fr;gap:.1rem}
  .fuss-raster{grid-template-columns:1fr}
}

/* ---------- Bewegung sparsam ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ---------- Druck ---------- */
@media print{
  .kopf,.menueknopf,.sendezeile{display:none}
  body{color:#000}
}

/* ---------- Nachtraege ---------- */

/* Sprunglink: nur fuer Tastatur und Vorlesesoftware sichtbar. */
.nurwert{position:absolute;left:var(--rand);top:.6rem;z-index:60;
  transform:translateY(-200%);background:var(--blau);color:#fff;
  font-family:var(--f-titel);font-weight:600;font-size:.9rem;
  padding:.7rem 1.2rem;text-decoration:none;transition:transform .18s ease}
.nurwert:focus{transform:none}

/* Der Kopf steht fest - Sprungziele duerfen nicht darunter liegen. */
:target,section[id],article[id]{scroll-margin-top:96px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Logo im Kopf: das Wortzeichen bleibt lesbar, auf sehr schmalen
   Schirmen weicht es dem Menueknopf. */
@media (max-width:360px){
  .kopf-logo img{height:22px}
}

/* ============================================================
   Unterseiten
   ------------------------------------------------------------
   Die Startseite verteilt, die Unterseiten tragen den Inhalt.
   Gleiche Mittel wie vorn: Haarlinien statt Kaesten, viel Luft,
   eine Schraege als Marke. Nichts Neues, nur mehr Raum.
   ============================================================ */

/* ---------- Seitenkopf einer Unterseite ---------- */
.kopfbereich{padding-block:clamp(3.2rem,7vw,6rem) 0;border-bottom:1px solid var(--linie)}
.kopfbereich .pfad{font-family:var(--f-titel);font-size:.78rem;font-weight:500;
  letter-spacing:.04em;color:var(--grau);margin-bottom:1.8rem}
.kopfbereich .pfad a{color:var(--grau);text-decoration:none}
.kopfbereich .pfad a:hover{color:var(--tinte)}
.kopfbereich .pfad span{margin-inline:.5rem;color:var(--grau-hell)}
.kopfraster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);
  gap:clamp(1.8rem,5vw,4.5rem);align-items:end;padding-bottom:clamp(2.8rem,6vw,4.5rem)}
.kopfbereich h1{font-size:clamp(2.1rem,5vw,3.7rem);max-width:17ch;margin-top:1.3rem}
.kopfbereich .lauf{margin-bottom:.4rem}

/* ---------- Fliesstext mit Zwischenueberschriften ---------- */
.text-raster{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);
  gap:clamp(1.2rem,4vw,4rem);align-items:start;padding-block:clamp(2.4rem,5vw,3.6rem);
  border-top:1px solid var(--linie)}
.text-raster:last-of-type{border-bottom:1px solid var(--linie)}
.text-raster > h2{font-size:clamp(1.3rem,2.2vw,1.72rem);position:sticky;top:6.5rem}
.text-raster .satz{max-width:40em;color:var(--tinte-2)}
.text-raster .satz > * + *{margin-top:1.05rem}
.text-raster .satz strong{font-family:var(--f-titel);font-weight:600;color:var(--tinte)}

/* ---------- Aufzaehlung mit Haarlinien ---------- */
.punkte{list-style:none;margin:0;padding:0}
.punkte li{padding:1.05rem 0;border-top:1px solid var(--linie-fein);color:var(--tinte-2)}
.punkte li:first-child{border-top:0;padding-top:.2rem}
.punkte b{font-family:var(--f-titel);font-weight:600;color:var(--tinte);display:block}
.punkte span{display:block;font-size:.97rem;color:var(--grau);margin-top:.1rem}

/* Zweispaltige Aufzaehlung fuer kurze Eintraege */
.punkte-zwei{columns:2;column-gap:3rem}
.punkte-zwei li{break-inside:avoid}

/* ---------- Was wir nicht versprechen ---------- */
.klarstellung{border-left:2px solid var(--tinte);padding:.2rem 0 .2rem 1.6rem;max-width:40em}
.klarstellung p + p{margin-top:.9rem}
.dunkel .klarstellung{border-left-color:var(--blau-hell)}

/* ---------- Arbeitsproben ---------- */
.probe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.8rem,4vw,3.5rem);align-items:center;padding-block:clamp(2.4rem,5vw,3.8rem);
  border-top:1px solid var(--linie)}
.probe:last-of-type{border-bottom:1px solid var(--linie)}
.probe .schirm{background:var(--papier-2);border:1px solid var(--linie);overflow:hidden}
.probe .schirm img{width:100%;display:block}
/* Geschlossene Portale zeigen wir nicht als Bild - stattdessen
   eine ruhige Flaeche mit dem Grund dafuer. */
.probe .verschlossen{background:var(--nacht);color:#C6C6CC;display:grid;align-content:center;
  aspect-ratio:16/10;padding:clamp(1.8rem,4vw,3rem);font-size:1.02rem;line-height:1.62}
.probe .verschlossen b{display:block;font-family:var(--f-titel);font-weight:700;
  font-size:clamp(1.15rem,1.8vw,1.42rem);letter-spacing:-.02em;text-transform:none;
  color:#fff;margin-bottom:1rem;max-width:16ch}
.probe h3{font-size:clamp(1.3rem,2.4vw,1.75rem);font-weight:700;letter-spacing:-.02em;margin-top:.9rem}
.probe .rolle{font-family:var(--f-titel);font-size:.74rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grau)}
.probe .satz{margin-top:1.1rem;color:var(--tinte-2);max-width:36em}
.probe .daten{list-style:none;margin:1.5rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2.4rem}
.probe .daten li{font-size:.92rem;color:var(--grau);padding:.55rem 0;
  border-top:1px solid var(--linie-fein)}
.probe .daten b{display:block;font-family:var(--f-titel);font-weight:600;color:var(--tinte);font-size:.97rem}

/* ---------- Schrittfolge hell ---------- */
.schritte{list-style:none;margin:0;padding:0;counter-reset:s}
/* Die Ziffer steht absolut, nicht als Rasterspalte: so koennen
   Titel und Erklaerung beliebig viele Absaetze sein, ohne dass
   das Raster durcheinandergeraet. */
.schritte li{position:relative;padding:1.5rem 0 1.5rem 3.4rem;
  border-top:1px solid var(--linie)}
.schritte li::before{counter-increment:s;content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:1.82rem;
  font-family:var(--f-titel);font-size:.76rem;font-weight:600;letter-spacing:.1em;
  color:var(--blau)}
.schritte li:last-child{border-bottom:1px solid var(--linie)}
.schritte b{font-family:var(--f-titel);font-weight:600;font-size:1.06rem;display:block}
.schritte span{display:block;color:var(--tinte-2);margin-top:.25rem;max-width:44em}

/* ---------- Abschlusszeile einer Seite ---------- */
.anstoss{border-top:2px solid var(--tinte);padding-top:clamp(2.2rem,4vw,3rem);
  padding-bottom:clamp(3rem,6vw,5rem);display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end}
.anstoss h2{max-width:18ch}
.anstoss .lauf{margin-top:.9rem}

/* ---------- Weiter zu ---------- */
.weiterzu{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--linie)}
.weiterzu a{display:block;padding:1.9rem 0;text-decoration:none;color:inherit}
.weiterzu a + a{border-left:1px solid var(--linie);padding-left:2.5rem}
.weiterzu .lb{font-family:var(--f-titel);font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grau)}
.weiterzu .zu{font-family:var(--f-titel);font-weight:600;font-size:1.22rem;margin-top:.4rem;
  display:flex;align-items:center;gap:.7rem;transition:color .18s ease}
.weiterzu a:hover .zu{color:var(--blau)}
.weiterzu .rechts{text-align:right}
.weiterzu .rechts .zu{justify-content:flex-end}

/* ---------- Rechtstexte ---------- */
.recht{max-width:44rem}
.recht h2{font-size:clamp(1.2rem,2vw,1.45rem);margin:2.6rem 0 .9rem}
.recht h2:first-child{margin-top:0}
.recht h3{font-size:1.02rem;margin:1.6rem 0 .5rem}
.recht p,.recht li{color:var(--tinte-2)}
.recht p + p{margin-top:.85rem}
.recht ul{margin:.6rem 0 0;padding-left:1.15rem}
.recht li{margin-bottom:.4rem}
.recht dl{margin:0}
.recht dt{font-family:var(--f-titel);font-weight:600;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grau);margin-top:1.6rem}
.recht dd{margin:.35rem 0 0;color:var(--tinte-2)}
.recht .fein{display:block;font-size:.9rem;color:var(--grau);margin-top:.35rem}
/* Stellen, die vor der Veroeffentlichung geprueft werden muessen. */
.offen{border-left:2px solid #C0392B;padding:.15rem 0 .15rem 1.2rem;margin:1.1rem 0;
  font-size:.95rem;color:var(--tinte-2)}
.offen b{font-family:var(--f-titel);font-weight:600;color:#A5321F;display:block;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:.3rem}

/* ---------- Schmale Schirme: Unterseiten ---------- */
@media (max-width:980px){
  .kopfraster,.probe,.anstoss{grid-template-columns:1fr}
  .kopfraster{align-items:start;gap:1.6rem}
  .anstoss{align-items:start}
  .text-raster{grid-template-columns:1fr;gap:1rem}
  .text-raster > h2{position:static}
  .probe .schirm{order:-1}
}
@media (max-width:620px){
  .punkte-zwei{columns:1}
  .weiterzu{grid-template-columns:1fr}
  .weiterzu a + a{border-left:0;border-top:1px solid var(--linie);padding-left:0}
  .weiterzu .rechts{text-align:left}
  .weiterzu .rechts .zu{justify-content:flex-start}
  .probe .daten{gap:0}
  .probe .daten li{flex:1 1 100%}
}

/* ============================================================
   Startseite: die drei Wege
   ------------------------------------------------------------
   Jeder Block ist als Ganzes anklickbar - eine grosse Flaeche
   statt eines kleinen Textlinks. Das ist auf dem Telefon der
   Unterschied zwischen "trifft man" und "trifft man nicht".
   ============================================================ */
.wege{padding-block:clamp(1rem,3vw,2rem) clamp(3rem,6vw,5rem)}
.weg{display:grid;grid-template-columns:5.5rem minmax(0,1fr) 3rem;
  gap:clamp(1.2rem,3vw,3rem);align-items:center;
  padding:clamp(2rem,4vw,3.1rem) 0;border-top:1px solid var(--linie);
  text-decoration:none;color:inherit;position:relative;
  transition:background .18s ease}
.weg:last-of-type{border-bottom:1px solid var(--linie)}
/* Die Flaeche faerbt sich ueber den Seitenrand hinaus, damit der
   Klickbereich sichtbar die ganze Zeile ist. */
.weg::before{content:"";position:absolute;inset:0 calc(var(--rand) * -1);
  background:var(--papier-2);opacity:0;transition:opacity .18s ease;z-index:-1}
.weg:hover::before,.weg:focus-visible::before{opacity:1}
.weg .zahl{font-family:var(--f-titel);font-size:clamp(2.2rem,4vw,3.1rem);font-weight:700;
  line-height:1;color:#CFCFD4;font-stretch:110%;letter-spacing:-.03em;
  transition:color .18s ease}
.weg:hover .zahl{color:var(--blau)}
.weg .titel{display:block;font-family:var(--f-titel);font-weight:700;
  font-size:clamp(1.45rem,2.8vw,2.1rem);letter-spacing:-.02em;line-height:1.1}
.weg .titel em{font-style:normal;font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blau);vertical-align:middle;margin-left:.9rem;
  white-space:nowrap}
.weg .dazu{display:block;margin-top:.55rem;color:var(--tinte-2);max-width:44em}
.weg .pfeil{font-size:1.5rem;color:var(--grau-hell);justify-self:end;
  transition:transform .18s ease,color .18s ease}
.weg:hover .pfeil{color:var(--blau);transform:translateX(5px)}

/* ---------- Schmales Band mit einer Handlung ---------- */
.band{padding-block:clamp(3rem,6vw,4.6rem);border-top:1px solid var(--linie)}
.band.dunkel{border-top:0}
.band-raster{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem 3rem;align-items:center}
.band-raster h2{margin:.9rem 0 .8rem}
.band-raster .lauf{max-width:46em}

@media (max-width:760px){
  .weg{grid-template-columns:3rem minmax(0,1fr);gap:1rem 1.2rem}
  .weg .zahl{font-size:1.7rem}
  .weg .pfeil{display:none}
  .weg .titel em{display:block;margin:.5rem 0 0}
  .band-raster{grid-template-columns:1fr;align-items:start}
  .band-raster .knopf{width:100%}
}

/* Einstieg der Startseite: einspaltig, weil die Bereichsliste
   jetzt als eigene Flaechen darunter steht. */
.einstieg-breit{padding-bottom:clamp(2.5rem,5vw,4rem)}
.einstieg-breit h1{margin:1.6rem 0 0;max-width:16ch}
.einstieg-breit h1 em{font-style:normal;color:var(--blau)}
.einstieg-breit .lauf{margin-top:1.9rem}
.einstieg-breit .tun{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;margin-top:2.4rem}
@media (max-width:760px){
  .einstieg-breit .tun{flex-direction:column;align-items:stretch;gap:.7rem}
  .einstieg-breit .tun .knopf-voll{width:100%}
  .einstieg-breit .tun .knopf-leer{align-self:flex-start;width:auto}
}
/* Das letzte Band stiess direkt an den Abschlussblock - zu viel Luft
   dazwischen, weil beide ihren eigenen Abstand mitbrachten. */
.band + .abschnitt{padding-top:clamp(1.5rem,3vw,2.2rem)}


/* ============================================================
   TIEFE, SCHATTEN, BEWEGUNG
   ------------------------------------------------------------
   Die harte Kante bleibt - sie kommt aus dem Logo und ist das
   Erkennungsmerkmal. Tiefe entsteht hier nicht durch runde Ecken,
   sondern durch Ebenen: Schatten, Verlaeufe, ein feines Korn und
   Bewegung, die erst beim Scrollen einsetzt.
   ============================================================ */

:root{
  --s1:0 1px 2px rgba(18,18,18,.05), 0 2px 8px rgba(18,18,18,.05);
  --s2:0 2px 4px rgba(18,18,18,.05), 0 8px 24px rgba(18,18,18,.08);
  --s3:0 4px 8px rgba(18,18,18,.06), 0 18px 44px rgba(18,18,18,.12);
  --s4:0 8px 16px rgba(18,18,18,.08), 0 34px 80px rgba(18,18,18,.18);
  --glanz:0 6px 20px rgba(13,99,243,.28);
  --glanz-stark:0 10px 34px rgba(13,99,243,.38);
  --korn:url("data:image/png;base64,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");
  --schnell:.2s cubic-bezier(.22,.61,.36,1);
  --sanft:.45s cubic-bezier(.22,.61,.36,1);
}

/* ---------- Korn: liegt ueber dunklen Flaechen, nie ueber Text ---------- */
.korn{position:relative;isolation:isolate}
.korn::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--korn);background-size:140px 140px;opacity:.5;mix-blend-mode:overlay}
.korn > *{position:relative;z-index:1}

/* ---------- Bewegung beim Scrollen ---------- */
/* Verborgen wird nur, wenn JavaScript laeuft und das Einblenden auch
   wirklich ausloesen kann. Ohne Skript steht alles sofort da - eine
   unsichtbare Seite waere schlimmer als eine ohne Bewegung. */
.js .auf{opacity:0;transform:translateY(22px);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1), transform .62s cubic-bezier(.22,.61,.36,1)}
.js .auf.da{opacity:1;transform:none}
.auf-1{transition-delay:.06s} .auf-2{transition-delay:.13s} .auf-3{transition-delay:.2s}
.auf-4{transition-delay:.27s} .auf-5{transition-delay:.34s}

@media (prefers-reduced-motion:reduce){
  .js .auf{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ---------- Kopf: bekommt beim Scrollen Gewicht ---------- */
.kopf{transition:box-shadow var(--schnell), background var(--schnell)}
.kopf.gescrollt{box-shadow:0 1px 0 rgba(18,18,18,.06), 0 6px 22px rgba(18,18,18,.07);
  background:rgba(255,255,255,.88)}
.menue a:not(.knopf)::before{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--blau);transform:scaleX(0);transform-origin:left;transition:transform var(--schnell)}
.menue a:not(.knopf):hover::before{transform:scaleX(1)}


/* ---------- Seitenkopf der Unterseiten ----------
   Jede Unterseite begann bisher mit weisser Flaeche. Jetzt liegt dort
   ein weiches Licht und ein feines Raster - genug, damit der Anfang
   wie gemacht aussieht, wenig genug, dass die Ueberschrift fuehrt. */
.kopfbereich{position:relative;overflow:hidden;isolation:isolate;
  padding-block:clamp(2.6rem,6vw,4.4rem) clamp(2.6rem,6vw,4.2rem);
  border-bottom:1px solid var(--linie);
  background:linear-gradient(180deg,var(--papier-2),var(--papier))}
.kopfbereich::before{content:"";position:absolute;inset:-40% -5% auto -5%;height:180%;z-index:-2;
  pointer-events:none;
  background:radial-gradient(44rem 26rem at 86% 6%, rgba(13,99,243,.13), transparent 66%),
             radial-gradient(30rem 18rem at 2% 96%, rgba(46,152,255,.10), transparent 68%)}
.kopfbereich::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(18,18,18,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(18,18,18,.035) 1px,transparent 1px);
  background-size:68px 68px,68px 68px;
  -webkit-mask-image:radial-gradient(74% 74% at 62% 10%,#000,transparent 80%);
          mask-image:radial-gradient(74% 74% at 62% 10%,#000,transparent 80%)}
.kopfbereich h1{position:relative}
/* Ein schmaler blauer Balken markiert den Anfang der Ueberschrift. */
.kopfbereich h1::before{content:"";position:absolute;left:-1.15rem;top:.22em;bottom:.22em;width:3px;
  background:linear-gradient(180deg,var(--blau-hell),var(--blau));
  box-shadow:0 0 18px rgba(13,99,243,.5)}
@media (max-width:760px){ .kopfbereich h1::before{display:none} }
.pfad{position:relative}

/* ---------- Schaltflaechen: Auftrieb statt Farbwechsel ---------- */
.knopf{position:relative;overflow:hidden;
  transition:background var(--schnell),color var(--schnell),border-color var(--schnell),
             transform var(--schnell),box-shadow var(--schnell)}
.knopf-voll{background:linear-gradient(180deg,#1A6EF5,var(--blau));box-shadow:var(--glanz)}
.knopf-voll:hover{background:linear-gradient(180deg,#0D63F3,var(--blau-tief));
  transform:translateY(-2px);box-shadow:var(--glanz-stark)}
.knopf-voll:active{transform:translateY(0)}
/* Ein Lichtstreifen wandert beim Ueberfahren durch die blaue Flaeche. */
.knopf-voll::after{content:"";position:absolute;top:0;bottom:0;width:45%;left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);transition:left .55s cubic-bezier(.22,.61,.36,1)}
.knopf-voll:hover::after{left:130%}
.knopf-leer{background:var(--papier);box-shadow:var(--s1)}
.knopf-leer:hover{border-color:var(--tinte);transform:translateY(-2px);box-shadow:var(--s2)}

/* ============================================================
   EINSTIEG - der erste Eindruck
   ============================================================ */
.einstieg{background:var(--nacht);color:#fff;padding-block:clamp(3.5rem,8vw,6.5rem) clamp(3.5rem,8vw,6rem);
  position:relative;overflow:hidden;isolation:isolate}
/* Der Hintergrund: ein unscharfer Arbeitsplatz bei Nacht. Er liegt
   ganz hinten und ist bewusst zurueckgenommen - er soll Stimmung
   machen, nicht mit der Ueberschrift um Aufmerksamkeit ringen.
   Darueber liegen zwei weiche Lichtquellen aus Farbverlaeufen. */
.einstieg{background-color:var(--nacht);
  /* Der Pfad gilt ab dieser Datei, nicht ab der Seite - stil.css liegt
     selbst schon in mittel/. */
  background-image:url("einstieg-hintergrund.webp");
  background-size:cover;background-position:58% 42%;background-repeat:no-repeat}
/* Legt sich als dunkler Schleier ueber das Bild, damit jeder Text
   darauf sicher lesbar bleibt - auch auf schmalen Schirmen, wo der
   Ausschnitt anders faellt. */
.einstieg::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(14,14,16,.95) 0%, rgba(14,14,16,.90) 30%, rgba(14,14,16,.62) 62%, rgba(14,14,16,.34) 100%),
    radial-gradient(52rem 34rem at 78% 12%, rgba(13,99,243,.30), transparent 64%),
    radial-gradient(40rem 28rem at 6% 88%, rgba(46,152,255,.16), transparent 66%)}
.einstieg::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:var(--korn),
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:140px 140px,68px 68px,68px 68px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 82%);
          mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 82%)}

.einstieg .marke{color:#8E8E99}
.einstieg .marke .schraeg{background:var(--blau-hell);box-shadow:0 0 14px rgba(46,152,255,.7)}
.einstieg h1{color:#fff}
.einstieg h1 em{font-style:normal;
  background:linear-gradient(96deg,#4BA3FF,#0D63F3 55%,#2E98FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 22px rgba(13,99,243,.45))}
.einstieg .lauf{color:#B9B9C2}

/* Zweispaltig: links das Wort, rechts der Beweis. */
.einstieg-bau{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
.einstieg-bau > div:first-child{max-width:34rem}

/* Kleine Belegzeile unter den Schaltflaechen */
.belege{display:flex;flex-wrap:wrap;gap:.5rem .55rem;margin-top:2.3rem;padding-top:1.7rem;
  border-top:1px solid rgba(255,255,255,.1)}
.beleg{display:inline-flex;align-items:center;gap:.5rem;padding:.42rem .8rem;
  font-family:var(--f-titel);font-size:.78rem;font-weight:500;letter-spacing:.01em;color:#C9C9D2;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  transition:border-color var(--schnell),background var(--schnell),color var(--schnell)}
.beleg::before{content:"";width:.34rem;height:.62rem;background:var(--blau-hell);
  transform:skewX(-18deg);flex:none;box-shadow:0 0 10px rgba(46,152,255,.8)}
.beleg:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22);color:#fff}

/* ============================================================
   GERAETRAHMEN - echte Bildschirmfotos statt Symbolbilder
   ============================================================ */
.rahmen{position:relative;background:#16161A;border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--s4), 0 0 0 1px rgba(0,0,0,.4);overflow:hidden}
.rahmen .leiste{display:flex;align-items:center;gap:.5rem;padding:.6rem .8rem;
  background:linear-gradient(180deg,#23232A,#1B1B21);border-bottom:1px solid rgba(255,255,255,.09)}
.rahmen .punkt{width:.55rem;height:.55rem;background:#3A3A44;flex:none;transform:skewX(-18deg)}
.rahmen .netz{margin-left:.5rem;flex:1;min-width:0;padding:.24rem .7rem;
  font-family:var(--f-text);font-size:.72rem;color:#8A8A96;background:#121216;
  border:1px solid rgba(255,255,255,.07);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rahmen img{display:block;width:100%}
/* Auf hellem Grund braucht der Rahmen einen anderen Schatten. */
.hell-grund .rahmen{border-color:rgba(18,18,18,.1)}

/* Der schwebende Hinweis am Rahmen */
.notiz{position:absolute;z-index:3;max-width:17rem;padding:.85rem 1rem;
  background:rgba(255,255,255,.97);color:var(--tinte);box-shadow:var(--s3);
  border-left:2px solid var(--blau);backdrop-filter:blur(6px)}
.notiz b{display:block;font-family:var(--f-titel);font-size:.9rem;font-weight:600}
.notiz span{display:block;font-size:.83rem;color:var(--grau);line-height:1.5;margin-top:.15rem}
.notiz-ru{right:-1.1rem;bottom:-1.3rem}
.notiz-lo{left:-1.4rem;top:-1.2rem}

/* Sanftes Schweben - nur auf grossen Schirmen, nie bei Bewegungsverzicht */
@media (min-width:981px) and (prefers-reduced-motion:no-preference){
  .schwebt{animation:schweben 7s ease-in-out infinite}
  @keyframes schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
}

/* Telefonrahmen */
.handy{position:relative;width:14rem;background:#16161A;padding:.5rem;
  border:1px solid rgba(255,255,255,.16);box-shadow:var(--s4)}
.handy::before{content:"";position:absolute;top:.95rem;left:50%;transform:translateX(-50%);
  width:3.2rem;height:.28rem;background:rgba(255,255,255,.22);z-index:2}
.handy img{display:block;width:100%}


/* ============================================================
   GERAETE - Monitor und Telefon
   ------------------------------------------------------------
   Hier gibt es als einzige Stelle im ganzen Entwurf runde Ecken.
   Das ist kein Bruch mit der harten Kante: die Kante ist die Form
   der Marke, ein Monitor und ein Telefon sind abgebildete
   Gegenstaende. Ein Telefon mit rechtwinkligen Ecken sieht nicht
   nach Telefon aus, sondern nach Fehler.
   ============================================================ */

/* ---------- Monitor ---------- */
.monitor{display:block;width:100%}
.monitor .geh{position:relative;background:#101014;padding:.85rem .85rem 0;
  border:1px solid rgba(255,255,255,.13);border-bottom:0;border-radius:10px 10px 0 0;
  box-shadow:var(--s4), inset 0 1px 0 rgba(255,255,255,.07)}
/* Jeder Monitor hat dasselbe Format - 16:9, wie ein echter Bildschirm.
   Die Bildschirmfotos haben verschiedene Seitenverhaeltnisse; sie werden
   deshalb im Rahmen beschnitten, nicht verzerrt. Angesetzt wird oben:
   der Kopf einer Seite ist das, was man erkennen soll. */
.monitor .glas{position:relative;overflow:hidden;background:#000;
  aspect-ratio:16/9;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
.monitor .glas img{display:block;width:100%;height:100%;
  object-fit:cover;object-position:top center}
/* Ein schraeger Lichtschein ueber dem Bild - das macht aus einer
   Bilddatei einen Bildschirm. */
.monitor .glas::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.04) 22%,
             transparent 46%);mix-blend-mode:screen}
/* Kinnleiste mit Marke */
.monitor .kinn{background:linear-gradient(180deg,#17171C,#101014);
  border:1px solid rgba(255,255,255,.13);border-top:0;border-radius:0 0 10px 10px;
  height:2.1rem;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--s3)}
.monitor .kinn::before{content:"";width:.5rem;height:.5rem;background:#2E2E36;
  transform:skewX(-18deg)}
/* Fuss: Hals und Platte, beide hart - das ist wieder Marke. */
.monitor .fussteil{display:flex;flex-direction:column;align-items:center}
.monitor .hals{width:5.2rem;height:1.5rem;
  background:linear-gradient(180deg,#1C1C22,#131318);
  border:1px solid rgba(255,255,255,.1);border-top:0}
.monitor .platte{width:12rem;height:.5rem;
  background:linear-gradient(180deg,#22222A,#141419);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 12px 26px rgba(18,18,18,.22)}

/* ---------- Telefon ---------- */
.telefon{position:relative;width:13.5rem;flex:none}
.telefon .geh{position:relative;background:#101014;padding:.45rem;border-radius:1.5rem;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:var(--s4), inset 0 1px 0 rgba(255,255,255,.08)}
.telefon .glas{position:relative;overflow:hidden;border-radius:1.15rem;background:#000;
  aspect-ratio:430/931}
.telefon .glas img{display:block;width:100%;height:100%;
  object-fit:cover;object-position:top center}
.telefon .glas::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.03) 26%,
             transparent 50%);mix-blend-mode:screen}
/* Die Insel oben */
.telefon .insel{position:absolute;top:.95rem;left:50%;transform:translateX(-50%);
  width:3.1rem;height:.62rem;background:#08080A;border-radius:.4rem;z-index:2}
/* Tasten an der Seite */
.telefon .geh::before,.telefon .geh::after{content:"";position:absolute;
  width:2px;background:#2A2A32;border-radius:2px}
.telefon .geh::before{right:-3px;top:5.2rem;height:3.1rem}
.telefon .geh::after{left:-3px;top:4.4rem;height:1.7rem}

/* ---------- Monitor und Telefon zusammen ----------
   Der Monitor fuehrt, das Telefon steht davor in der Ecke. Nicht
   nebeneinander: nebeneinander wird das Telefon zwangslaeufig hoeher
   als der Bildschirm, und dann stimmt das Groessenverhaeltnis nicht. */
.geraete{position:relative;padding-right:clamp(1.5rem,4vw,3rem)}
.geraete .monitor{width:100%}
.geraete .telefon{position:absolute;right:0;bottom:-.6rem;z-index:3;
  width:clamp(6.5rem,26%,9.5rem)}
.geraete .telefon .geh{box-shadow:var(--s4), 0 0 0 1px rgba(0,0,0,.35),
  inset 0 1px 0 rgba(255,255,255,.08)}
.geraete .telefon .insel{width:2.2rem;height:.45rem;top:.7rem}

@media (max-width:980px){
  .geraete{padding-right:clamp(2rem,9vw,4.5rem)}
  .geraete .telefon{width:clamp(6rem,24%,8.5rem);bottom:-.4rem}
  .monitor .platte{width:10rem}
}
@media (max-width:520px){
  .monitor .geh{padding:.5rem .5rem 0;border-radius:7px 7px 0 0}
  .monitor .kinn{height:1.4rem;border-radius:0 0 7px 7px}
  .monitor .hals{width:3.6rem;height:1rem}
  .monitor .platte{width:7.5rem}
  .geraete .telefon .geh{padding:.28rem;border-radius:1rem}
  .geraete .telefon .glas{border-radius:.78rem}
  .geraete .telefon .insel{width:1.5rem;height:.3rem;top:.5rem}
}

/* ============================================================
   WEGE auf der Startseite - jetzt Karten mit Auftrieb
   ============================================================ */
.wege{padding-block:clamp(3.2rem,6vw,5rem)}
.wege .mitte{display:grid;gap:clamp(.8rem,1.6vw,1.1rem)}
.weg{background:var(--papier);border:1px solid var(--linie);box-shadow:var(--s1);
  padding:clamp(1.5rem,3vw,2.1rem) clamp(1.3rem,2.6vw,2rem);align-items:center;
  transition:transform var(--schnell),box-shadow var(--schnell),border-color var(--schnell)}
.weg:last-of-type{border-bottom:1px solid var(--linie)}
.weg::before{display:none}
.weg:hover,.weg:focus-visible{transform:translateY(-3px);box-shadow:var(--s3);
  border-color:rgba(13,99,243,.35);z-index:2}
.weg .zahl{transition:color var(--schnell),text-shadow var(--schnell)}
.weg:hover .zahl{color:var(--blau);text-shadow:0 4px 18px rgba(13,99,243,.35)}
.weg .pfeil{transition:transform var(--sanft),color var(--schnell)}
.weg:hover .pfeil{transform:translateX(7px);color:var(--blau)}
/* Eine blaue Kante faehrt beim Ueberfahren von links ein. */
.weg{position:relative}
.weg::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--blau);
  transform:scaleY(0);transform-origin:top;transition:transform var(--sanft)}
.weg:hover::after{transform:scaleY(1)}

/* ============================================================
   BAENDER und Abschnitte
   ============================================================ */
.band.dunkel{position:relative;overflow:hidden;isolation:isolate}
.band.dunkel::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(44rem 22rem at 88% 0%, rgba(13,99,243,.30), transparent 68%),
             var(--korn);
  background-size:auto,140px 140px}
.dunkel .knopf-leer{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#fff;
  box-shadow:none}
.dunkel .knopf-leer:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.11)}

/* Arbeitsproben-Abschnitt auf hellem Grund */
.hell-grund{background:
    linear-gradient(180deg,var(--papier),var(--papier-2) 45%,var(--papier));
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.proben{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.2rem);align-items:start;margin-top:clamp(2.2rem,4vw,3.2rem)}
.schau .untertitel{margin-top:1.1rem;font-family:var(--f-titel);font-weight:600;font-size:1.02rem}
.schau .untertitel span{display:block;font-family:var(--f-text);font-weight:400;font-size:.9rem;
  color:var(--grau);margin-top:.15rem}


/* Arbeitsprobe: Browserfenster mit eingeschobenem Telefon */
.schirm-halter{position:relative}
.schirm-halter .rahmen{box-shadow:var(--s3)}
.handy-ecke{position:absolute;right:-1.2rem;bottom:-1.6rem;width:7.6rem;z-index:2;
  border-color:rgba(18,18,18,.18)}
.handy-ecke::before{width:1.9rem;height:.2rem;top:.72rem;background:rgba(255,255,255,.3)}
.probe .verschlossen{box-shadow:var(--s3)}
@media (max-width:980px){
  .handy-ecke{right:-.4rem;bottom:-1rem;width:6rem}
}

/* ---------- Leistungsbloecke bekommen Tiefe beim Ueberfahren ---------- */
.leistung{transition:background var(--schnell)}
.leistung:hover{background:linear-gradient(90deg,rgba(13,99,243,.035),transparent 60%)}
.leistung:hover .zahl{color:var(--blau)}
.leistung .zahl{transition:color var(--schnell)}

/* ---------- Anstoss: aus der Flaeche wird eine Karte ---------- */
.anstoss{position:relative;background:var(--nacht);color:#fff;isolation:isolate;overflow:hidden;
  padding:clamp(2rem,4.5vw,3.2rem);box-shadow:var(--s4)}
.anstoss::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(38rem 20rem at 92% 110%, rgba(13,99,243,.42), transparent 66%),
             var(--korn);
  background-size:auto,140px 140px}
.anstoss h2,.anstoss .marke{color:#fff}
.anstoss .marke{color:#8E8E99}
.anstoss .marke .schraeg{background:var(--blau-hell)}
.anstoss .lauf{color:#B9B9C2}


/* Der Anstoss ist eine dunkle Karte - sie darf nicht buendig an den
   ebenfalls dunklen Fuss stossen. Sonst sieht man zwei schwarze
   Bloecke uebereinander statt einer Karte auf hellem Grund. */
.anstoss-raum{padding-bottom:clamp(3.5rem,7vw,6rem)}

/* ---------- Formular: die Felder bekommen einen Grund ---------- */
.feld input,.feld select,.feld textarea{background:var(--papier-2);
  border:1px solid var(--linie);border-bottom-width:1px;padding:.7rem .85rem;
  transition:border-color var(--schnell),box-shadow var(--schnell),background var(--schnell)}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  border-color:var(--blau);border-bottom-width:1px;background:var(--papier);
  box-shadow:0 0 0 3px rgba(13,99,243,.14)}
.feld input.fehlt,.feld select.fehlt,.feld textarea.fehlt{border-color:#C0392B;
  box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.feld select{background-position:calc(100% - 14px) 1.4rem,calc(100% - 9px) 1.4rem}



/* ---------- Bestaetigungskaestchen ---------- */
.haken{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;
  margin:1.6rem 0 1.2rem;cursor:pointer;font-size:.93rem;line-height:1.55;color:var(--tinte-2)}
.haken input{appearance:none;-webkit-appearance:none;margin:0;flex:none;
  width:1.2rem;height:1.2rem;background:var(--papier-2);border:1px solid var(--linie);
  cursor:pointer;position:relative;top:.15rem;
  transition:background var(--schnell),border-color var(--schnell),box-shadow var(--schnell)}
.haken input:hover{border-color:var(--tinte)}
.haken input:checked{background:var(--blau);border-color:var(--blau);box-shadow:var(--glanz)}
/* Der Haken selbst: zwei Striche, passend zur harten Kante. */
.haken input:checked::after{content:"";position:absolute;left:.36rem;top:.13rem;
  width:.3rem;height:.6rem;border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(42deg)}
.haken input:focus-visible{outline:2px solid var(--blau);outline-offset:2px}
.haken input.fehlt{border-color:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,.12)}

/* ---------- Honigtopf ----------
   Nicht display:none - das erkennen bessere Roboter. Es steht ausserhalb
   des Bildes und ist nicht anspringbar; ein Mensch begegnet ihm nie. */
.honig{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.klein-hinweis{font-size:.86rem;color:var(--grau);margin-top:.7rem;line-height:1.55}
.sachform{position:relative}

/* ---------- Ueber uns: das Bild bekommt Halt ---------- */
.ueber .bild{box-shadow:var(--s3);position:relative;overflow:hidden}
.ueber .bild::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(13,99,243,.16))}
.ueber img{transition:filter var(--sanft),transform var(--sanft)}
.ueber .bild:hover img{filter:grayscale(0) contrast(1.02);transform:scale(1.03)}


/* Stand-Datum am Fuss der Rechtstexte */
.stand{margin-top:2.2rem;padding-top:1.1rem;border-top:1px solid var(--linie);
  font-size:.88rem;color:var(--grau)}

/* ---------- Fuss ---------- */
.fuss{position:relative;isolation:isolate;overflow:hidden}
.fuss::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(42rem 18rem at 12% 0%, rgba(13,99,243,.22), transparent 70%),
             var(--korn);
  background-size:auto,140px 140px}
.fuss a{transition:color var(--schnell)}
.fuss a:hover{color:#fff}

/* ============================================================
   Schmale Schirme
   ============================================================ */
@media (max-width:980px){
  .einstieg{background-position:62% 30%}
  .einstieg::before{background:
    linear-gradient(180deg, rgba(14,14,16,.90) 0%, rgba(14,14,16,.84) 55%, rgba(14,14,16,.92) 100%),
    radial-gradient(34rem 22rem at 80% 8%, rgba(13,99,243,.26), transparent 66%)}
  .einstieg-bau{grid-template-columns:1fr;gap:2.8rem}
  .einstieg-bau > div:first-child{max-width:none}
  .proben{grid-template-columns:1fr}
  .notiz{position:static;max-width:none;margin-top:1rem;box-shadow:var(--s2)}
  .schwebt{animation:none}
}
@media (max-width:760px){
  /* Auf dem Telefon sind beide Schaltflaechen gleich breit. Eine halbe
     und eine ganze nebeneinander sieht nach Versehen aus. */
  .einstieg .tun{flex-direction:column;align-items:stretch}
  .einstieg .tun .knopf{width:100%}
  .rahmen .netz{font-size:.66rem}
  .handy{width:11rem;margin-inline:auto}
  .belege{gap:.45rem}
  .beleg{font-size:.73rem;padding:.36rem .66rem}
}


/* ============================================================
   === UNTERSEITEN === Struktur, Rhythmus, Zoom
   ============================================================ */

/* ---------- Abschnittsnummern ---------- */
main{counter-reset:blk}
.text-raster{position:relative;border-top:1px solid var(--linie);
  transition:background var(--sanft)}
.text-raster > h2{position:sticky;top:6.5rem}
/* Die Nummer steht ueber der Ueberschrift, klein und ruhig. */
.text-raster > h2::before{counter-increment:blk;
  content:counter(blk,decimal-leading-zero);
  display:block;font-family:var(--f-titel);font-size:.74rem;font-weight:600;
  letter-spacing:.18em;color:var(--blau);margin-bottom:.7rem}
/* Ein feiner blauer Anstrich, solange der Zeiger im Block ist. */
.text-raster::after{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;
  background:linear-gradient(90deg,var(--blau),transparent);
  transition:width .5s cubic-bezier(.22,.61,.36,1)}
.text-raster:hover::after{width:min(18rem,40%)}

/* Der erste Satz fuehrt ein und steht deshalb groesser. */
.text-raster .satz > p:first-child{font-size:1.07em;color:var(--tinte);line-height:1.6}

/* ---------- Aufzaehlungen werden Karten ---------- */
.punkte{display:grid;gap:clamp(.7rem,1.4vw,.95rem);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.punkte li{padding:clamp(1rem,2vw,1.3rem);border:1px solid var(--linie);border-top:1px solid var(--linie);
  background:var(--papier);box-shadow:var(--s1);color:var(--tinte-2);
  transition:transform var(--schnell),box-shadow var(--schnell),border-color var(--schnell)}
.punkte li:first-child{padding-top:clamp(1rem,2vw,1.3rem)}
.punkte li:hover{transform:translateY(-2px);box-shadow:var(--s2);
  border-color:rgba(13,99,243,.3)}
.punkte b{font-size:1.02rem}
.punkte span{margin-top:.35rem}
/* Die zweispaltige Sonderform wird nicht mehr gebraucht - das Raster
   verteilt von selbst. */
.punkte-zwei{columns:auto}

/* ---------- Schritte: Nummer als Kreisflaeche ---------- */
.schritte li{transition:background var(--schnell)}
.schritte li:hover{background:linear-gradient(90deg,rgba(13,99,243,.04),transparent 55%)}
.schritte li::before{color:var(--blau)}

/* ---------- Zoom auf Geraeten ----------
   Wenn der Zeiger auf dem Bildschirm liegt, faehrt das Bild ein Stueck
   heran und der Rahmen bekommt Licht. Wenig genug, dass es nicht
   zappelt - genug, dass man merkt: da ist etwas. */
.monitor,.telefon{transition:transform var(--sanft)}
.monitor .glas img,.telefon .glas img{
  transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.monitor .geh,.telefon .geh{transition:box-shadow var(--sanft),border-color var(--sanft)}

.monitor:hover .glas img{transform:scale(1.055)}
.monitor:hover .geh{box-shadow:var(--s4), 0 0 44px rgba(13,99,243,.30),
  0 0 0 1px rgba(46,152,255,.28);border-color:rgba(46,152,255,.35)}
.telefon:hover .glas img{transform:scale(1.06)}
.telefon:hover .geh{box-shadow:var(--s4), 0 0 32px rgba(13,99,243,.30);
  border-color:rgba(46,152,255,.35)}

/* Der Lichtschein wandert beim Ueberfahren ueber das Glas. */
.monitor .glas::after,.telefon .glas::after{
  transition:transform .8s cubic-bezier(.22,.61,.36,1),opacity var(--sanft)}
.monitor:hover .glas::after,.telefon:hover .glas::after{
  transform:translateX(18%);opacity:.75}

@media (prefers-reduced-motion:reduce){
  .monitor:hover .glas img,.telefon:hover .glas img{transform:none}
  .monitor:hover .glas::after,.telefon:hover .glas::after{transform:none}
}

/* ---------- Ueber uns: mehr Halt ---------- */
.ueber{align-items:center}
.ueber .name{font-size:1.06rem}

/* ---------- Schmale Schirme ---------- */
@media (max-width:760px){
  .text-raster > h2{position:static}
  .text-raster > h2::before{margin-bottom:.45rem}
  .punkte{grid-template-columns:1fr}
}

/* --- Wechselnder Grund: jeder zweite Block steht auf einer Flaeche ---
   Eine Unterseite war bisher eine lange weisse Bahn. Mit einem leicht
   getoenten Feld unter jedem zweiten Block bekommt sie Takt, ohne dass
   Farbe ins Spiel kommt. */
.text-raster{padding-inline:clamp(1rem,2.4vw,2rem);
  margin-inline:calc(clamp(1rem,2.4vw,2rem) * -1)}
.text-raster:nth-of-type(even){
  background:linear-gradient(180deg,var(--papier-2),rgba(247,247,248,0));
  border-top-color:var(--linie)}
.text-raster:hover{background:linear-gradient(180deg,rgba(13,99,243,.035),transparent 70%)}
.text-raster:nth-of-type(even):hover{
  background:linear-gradient(180deg,rgba(13,99,243,.05),rgba(247,247,248,.25) 70%)}

/* --- Klarstellung: aus dem Absatz wird eine dunkle Karte ---
   Der Text sagt, was wir NICHT versprechen. Das ist der ehrlichste
   Abschnitt der Seite und darf auch so aussehen. */
.klarstellung{position:relative;isolation:isolate;overflow:hidden;
  background:var(--nacht);color:#C6C6CC;padding:clamp(1.4rem,3vw,2.1rem);
  box-shadow:var(--s3);margin-top:.4rem}
.klarstellung::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(28rem 14rem at 96% 0%, rgba(13,99,243,.30), transparent 68%),
             var(--korn);background-size:auto,140px 140px}
.klarstellung p + p{margin-top:.9rem}
.klarstellung strong{color:#fff}

/* --- Ueber uns: Bild groesser und mit Rahmen --- */
.ueber{grid-template-columns:minmax(0,19rem) minmax(0,1fr)}
.ueber .bild{border-top:2px solid var(--blau)}
@media (max-width:760px){
  .ueber{grid-template-columns:1fr}
  .text-raster{padding-inline:0;margin-inline:0}
  .text-raster:nth-of-type(even){padding-inline:1rem;margin-inline:-1rem}
}

/* --- Lesbarkeit nachgezogen ---
   Gemessen, nicht geschaetzt: drei Stellen lagen unter dem Wert, ab
   dem Text zuverlaessig lesbar ist (4,5:1 fuer normalen Text, 3:1 fuer
   grosse Schrift und bedeutungstragende Zeichen).
     · der Schraegstrich in der Pfadangabe  2,8 -> 5,3
     · der Pfeil auf den Startseitenkacheln 2,8 -> 5,3
     · die grossen Ziffern 01/02/03         1,6 -> 3,4
   Sie bleiben zurueckhaltend, sind aber jetzt sichtbar. */
.kopfbereich .pfad span{color:var(--grau)}
.weg .pfeil{color:var(--grau)}
.weg .zahl,.leistung .zahl{color:#88888F}