/* =====================================================================
   App4Pros — Website im Apple-Stil

   Die Merkmale, an denen dieser Stil hängt — und warum:

   1. **Mittig.** Augenbraue, Überschrift, ein Satz, zwei Verweise —
      alles auf einer Achse. Linksbündig wirkt wie ein Dokument, mittig
      wie eine Produktseite.
   2. **Sehr grosse, eng laufende Schrift.** Auf Apple-Geräten ist es
      die echte SF Pro (über `-apple-system`), sonst „Inter Tight“ als
      nächste Verwandte. Keine Zierschrift, keine zweite Familie.
   3. **Ganzflächiger Wechsel** zwischen Schwarz und Fast-Weiss. Das ist
      der Rhythmus der Seite; Kästen und Linien treten dafür zurück.
   4. **Wenig Text.** Ein Gedanke je Abschnitt, das Übrige im Bild.
   5. **Verweise mit Winkel** („Mehr erfahren ›“) statt zweitem Knopf.
   6. **Fussnoten** am Seitenende für alles, was eine Einschränkung
      braucht — statt Kleingedrucktem mitten im Fliesstext.
   ===================================================================== */

:root{
  /* dunkel — die Vorgabe */
  --schwarz:#000000;
  --grund:#000000;
  --flaeche:#151517;         /* Karte auf Schwarz */
  --flaeche-2:#1D1D1F;
  --hell-grund:#FBFBFD;      /* die hellen Ganzflächen */
  --hell-flaeche:#FFFFFF;
  --linie:rgba(255,255,255,.14);
  --linie-zart:rgba(255,255,255,.08);
  --text:#F5F5F7;
  --text-2:#A1A1A6;
  --text-3:#6E6E73;
  --akzent:#FF9F2E;
  --akzent-zart:rgba(255,159,46,.14);
  --gut:#32D74B;
  --offen:#FFD426;
  --mangel:#FF6961;
  --auf-akzent:#1D1200;
  --rahmen:#1D1D1F;
  --kopf:rgba(0,0,0,.72);
  /* Der Hell-Dunkel-Schalter trägt seine eigene Farbe: Gelb steht für die
     dunkle Fassung, Türkis für die helle. Sie gehört bewusst **nicht** zum
     Akzent — Orange heisst in der Leiste „hier sind Sie“, und der Schalter
     ist keine Seite. */
  --schalter:#FFD426;
  --schalter-zart:rgba(255,212,38,.16);

  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter Tight","Helvetica Neue",Arial,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter Tight","Helvetica Neue",Arial,sans-serif;

  --bahn:1000px;
  --bahn-breit:1240px;
  --luft:120px;
}
:root[data-thema="hell"]{
  --grund:#FBFBFD;
  --flaeche:#FFFFFF;
  --flaeche-2:#F5F5F7;
  --hell-grund:#F5F5F7;
  --hell-flaeche:#FFFFFF;
  --linie:rgba(0,0,0,.13);
  --linie-zart:rgba(0,0,0,.07);
  --text:#1D1D1F;
  --text-2:#6E6E73;
  --text-3:#86868B;
  --akzent:#C25F0C;
  --akzent-zart:rgba(194,95,12,.10);
  --gut:#1E8A52;
  --offen:#A76A05;
  --mangel:#C4362E;
  --auf-akzent:#FFFFFF;
  --rahmen:#D2D2D7;
  --kopf:rgba(251,251,253,.78);
  --schalter:#0E9C97;
  --schalter-zart:rgba(14,156,151,.14);
}
@media (max-width:760px){ :root{ --luft:80px } }

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; color-scheme:dark; background:var(--grund)}
:root[data-thema="hell"]{color-scheme:light}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} }

body{
  margin:0; background:var(--grund); color:var(--text);
  font-family:var(--sans); font-size:17px; line-height:1.5;
  letter-spacing:-.01em; -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%; height:auto}
a{color:var(--akzent); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}

/* ---------------------------------------------------- Typografie
   Eine Familie, vier Grade. Die Grade sind weit auseinander — das
   macht den Unterschied zwischen „gross“ und „gross gemeint“. */
h1,h2,h3,h4{font-family:var(--display); margin:0; color:var(--text); text-wrap:balance}
h1{font-size:clamp(44px,6.6vw,88px); font-weight:700; line-height:1.04; letter-spacing:-.028em}
h2{font-size:clamp(34px,5vw,60px); font-weight:700; line-height:1.07; letter-spacing:-.024em}
h3{font-size:clamp(22px,2.4vw,30px); font-weight:600; line-height:1.15; letter-spacing:-.018em}
h4{font-size:19px; font-weight:600; letter-spacing:-.012em; line-height:1.25}
p{margin:0 0 1em; color:var(--text-2)}
p:last-child{margin-bottom:0}
strong{color:var(--text); font-weight:600}

.augenbraue{
  display:block; font-size:19px; font-weight:600; letter-spacing:-.01em;
  color:var(--akzent); margin:0 0 14px;
}
.gross{font-size:clamp(19px,2.2vw,26px); line-height:1.4; color:var(--text-2);
  letter-spacing:-.015em; margin-inline:auto}

/* --------------------------------------------------------- Bahn */
.bahn{max-width:var(--bahn); margin-inline:auto; padding-inline:24px}
.bahn.breit{max-width:var(--bahn-breit)}
section{padding-block:var(--luft)}

/* **Ganzflächiger Wechsel.** Der Rhythmus der Seite steckt hier, nicht
   in Rahmen. `.hell` kehrt die Rollen um — auch im hellen Thema, damit
   der Wechsel in beiden Fassungen bleibt. */
.hell{background:var(--hell-grund); --text:#1D1D1F; --text-2:#6E6E73; --text-3:#86868B;
  --flaeche:#FFFFFF; --linie:rgba(0,0,0,.12); --linie-zart:rgba(0,0,0,.06);
  --akzent:#C25F0C; --akzent-zart:rgba(194,95,12,.10); --auf-akzent:#FFFFFF;
  --rahmen:#D2D2D7; --gut:#1E8A52; --offen:#A76A05; --mangel:#C4362E;
  color:var(--text);
}
:root[data-thema="hell"] .hell{background:#FFFFFF}

/* Mittige Sektionsköpfe — der Grundtakt dieser Seite */
.mitte{text-align:center}
.mitte p{margin-inline:auto}
.kopfblock{max-width:760px; margin-inline:auto; text-align:center}
.kopfblock .gross{margin-top:20px; max-width:640px}

/* --------------------------------------------------- Kopfleiste */
.kopf{
  position:sticky; top:0; z-index:60; height:124px;
  background:var(--kopf); backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--linie-zart);
}
.kopf .bahn{max-width:1240px; height:124px; display:flex; align-items:center;
  justify-content:space-between; gap:20px}
.logo{display:flex; align-items:center; gap:16px; color:var(--text); flex:none}
.logo:hover{text-decoration:none}
/* **Gross.** Das App-Icon ist das Zeichen der Seite; es steht nur noch
   hier und trägt sie allein. */
.logo img{width:96px; height:96px; border-radius:22px}
.logo span{font-family:var(--display); font-weight:600; font-size:30px; letter-spacing:-.02em}
.hauptnav{display:flex; align-items:center; gap:4px}
.hauptnav a{color:var(--text-2); font-size:19px; padding:9px 17px; border-radius:10px; white-space:nowrap}
.hauptnav a:hover{color:var(--text); text-decoration:none}
/* **Die aktive Seite trägt dieselbe orange Pille wie „Testen“.** Ein nur
   fetter Text war auf dunklem Grund kaum vom Rest zu unterscheiden. */
.hauptnav a[aria-current="page"]{
  background:var(--akzent); color:var(--auf-akzent); font-weight:500;
  padding:8px 20px; border-radius:980px;
}
.hauptnav a[aria-current="page"]:hover{filter:brightness(1.08); color:var(--auf-akzent)}
/* **Kein dauerhaft oranger Knopf mehr.** Orange heisst in dieser Leiste
   „hier sind Sie" — ein Verweis, der immer orange ist, behauptet also
   ständig etwas Falsches. „Testen" ist jetzt ein Verweis wie die anderen
   und färbt sich nur auf seiner eigenen Seite. Der Ruf zum Handeln steht
   dafür auf jeder Seite gross im Inhalt. */
.themaschalter{
  display:grid; place-items:center; width:42px; height:42px; margin-left:8px;
  border:1px solid var(--schalter-zart); border-radius:11px;
  background:var(--schalter-zart); color:var(--schalter); cursor:pointer; flex:none;
}
.themaschalter:hover{filter:brightness(1.12)}
.themaschalter svg{width:22px; height:22px; fill:currentColor}
.themaschalter .sonne{display:none}
:root[data-thema="hell"] .themaschalter .sonne{display:block}
:root[data-thema="hell"] .themaschalter .mond{display:none}
@media (max-width:940px){
  .kopf{height:auto} .kopf .bahn{height:auto; padding-block:10px; flex-wrap:wrap}
  .logo img{width:64px; height:64px; border-radius:15px}
  .logo span{font-size:24px}
  .hauptnav a{font-size:16px; padding:8px 13px}
  .hauptnav{width:100%; overflow-x:auto; padding-bottom:2px}
}

/* ------------------------------------------------------- Knöpfe
   Pillen, wie im App Store. Der zweite Weg ist kein zweiter Knopf,
   sondern ein Verweis mit Winkel — das hält die Achse ruhig. */
.knopf{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:500; letter-spacing:-.01em;
  padding:12px 28px; border-radius:980px; border:1px solid transparent;
  background:var(--akzent); color:var(--auf-akzent); transition:filter .15s ease;
}
.knopf:hover{filter:brightness(1.08); text-decoration:none; color:var(--auf-akzent)}
.knopf.leise{background:transparent; color:var(--akzent); border-color:var(--akzent)}
.knopf.leise:hover{background:var(--akzent-zart); filter:none}
.winkel{font-size:17px; font-weight:400; letter-spacing:-.01em; color:var(--akzent)}
.winkel::after{content:" \203A"; font-weight:400}
.winkel:hover{text-decoration:underline}
.knopfreihe{display:flex; flex-wrap:wrap; gap:14px 30px; align-items:center; margin-top:30px}
.mitte .knopfreihe{justify-content:center}

/* ------------------------------------------------- Geräterahmen
   **Der Rahmen ist das Gefäss der ganzen Seite** — um Bildschirmfotos,
   um Grafiken und auch um Text. Zwei Bauarten, sonst nichts:

   `.ipad`    4:3, Radius 26, schmaler Rand ringsum.
   `.iphone`  hochkant, Radius 44, Insel oben — schmaler und höher.

   Beide teilen Rand, Schatten und Lichtsaum, damit sie erkennbar
   dieselbe Familie sind. */
.geraet{
  position:relative; background:var(--rahmen); padding:10px; border-radius:26px;
  border:1px solid var(--linie-zart);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
:root[data-thema="hell"] .geraet, .hell .geraet{box-shadow:0 24px 60px rgba(0,0,0,.14)}
.geraet > img{border-radius:17px; aspect-ratio:4/3; object-fit:cover; object-position:top}

/* iPhone: schmaler, runder, mit Insel. Die Insel sitzt **im** Rahmen,
   nicht im Bild — sonst müsste jedes Bildschirmfoto sie mitbringen. */
.geraet.iphone{
  padding:9px; border-radius:46px; max-width:330px; margin-inline:auto;
  border-width:2px; border-color:rgba(255,255,255,.10);
}
.geraet.iphone > img{border-radius:38px; aspect-ratio:auto; object-fit:contain}
.geraet.iphone::before{
  content:""; position:absolute; top:20px; left:50%; transform:translateX(-50%);
  width:88px; height:24px; border-radius:999px; background:#000; z-index:2;
}
.geraet::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}

/* **Rahmen um Text und Grafik.** Dieselbe Bauart, nur ohne Bild darin:
   Der Inhalt sitzt auf der Gerätefläche statt auf dem Seitengrund. */
.geraet.tafel{padding:0; overflow:hidden}
.geraet.tafel .schirm{
  background:var(--flaeche); border-radius:17px; padding:clamp(38px,6vw,80px) clamp(26px,5vw,64px);
}
.hell .geraet.tafel .schirm{background:#fff}

/* Der Geräteschalter — iPad oder iPhone, wie im App Store */
.geraetewahl{
  display:inline-flex; padding:3px; border-radius:980px; gap:2px;
  border:1px solid var(--linie); background:var(--flaeche);
}
.geraetewahl button{
  appearance:none; border:0; cursor:pointer; border-radius:980px;
  font-family:var(--sans); font-size:14.5px; font-weight:500; letter-spacing:-.01em;
  padding:8px 20px; background:transparent; color:var(--text-2);
}
.geraetewahl button:hover{color:var(--text)}
.geraetewahl button[aria-selected="true"]{background:var(--akzent); color:var(--auf-akzent)}
/* **Die Wahl gilt für die ganze Seite, nicht für einen Abschnitt.**
   Sie steht als `data-geraet` an der Wurzel; jeder Block mit `data-schau`
   richtet sich danach. Ohne Skript bleibt das iPad sichtbar — die
   iPhone-Blöcke sind von sich aus verborgen. */
/* **Nur verstecken, nie eine Anzeigeart setzen.** Ein `display:block` zum
   Einblenden schaltet auf einem Rasterbehälter das Raster ab — dann stand
   ein einzelnes iPhone in Übergrösse da. Verborgen wird, was nicht dran
   ist; alles andere behält seine eigene Anzeigeart. */
:root:not([data-geraet="iphone"]) [data-schau="iphone"]{display:none}
:root[data-geraet="iphone"] [data-schau="ipad"]{display:none}

/* Vier iPhones nebeneinander — sonst würde die Reihe endlos hoch */
.gitter.vier{grid-template-columns:repeat(4,1fr); gap:26px}
@media (max-width:900px){ .gitter.vier{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .gitter.vier{grid-template-columns:1fr} }
.gitter.vier .geraet.iphone{max-width:100%}
figure{margin:0}
figcaption{margin-top:16px; font-size:15px; line-height:1.5; color:var(--text-2)}
figcaption b{color:var(--text); font-weight:600}
.mitte figcaption{margin-inline:auto; max-width:52ch}

/* Papierblatt für die Protokollseiten */
.blatt{background:#F5F2EC; border-radius:10px; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.45)}
:root[data-thema="hell"] .blatt, .hell .blatt{box-shadow:0 24px 60px rgba(0,0,0,.16)}
.blatt img{aspect-ratio:1.414/1; object-fit:cover; object-position:top}

/* --------------------------------------------------- Anordnungen */
.gitter{display:grid; gap:22px}
.gitter.zwei{grid-template-columns:repeat(2,1fr)}
.gitter.drei{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){ .gitter.drei{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .gitter.zwei,.gitter.drei{grid-template-columns:1fr} }

.paar{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
@media (max-width:900px){ .paar{grid-template-columns:1fr; gap:36px} }

/* Karte im App-Store-Zuschnitt: grosser Radius, viel Luft, kurzer Text */
.karte{
  background:var(--flaeche); border-radius:22px; padding:38px 34px;
  border:1px solid var(--linie-zart);
}
.karte h3{margin-bottom:12px}
.karte p{font-size:16px; line-height:1.5}
.karte.mit-bild{padding:0; overflow:hidden; background:transparent; border:0}
.karte.mit-bild .inhalt{padding:24px 6px 0}

/* Schritte — grosse Zahl, kurzer Satz */
.schritt{display:grid; grid-template-columns:110px 1fr; gap:36px; align-items:start;
  padding-block:44px; border-top:1px solid var(--linie-zart)}
.schritt:first-child{border-top:0}
.schritt .nr{font-family:var(--display); font-size:clamp(40px,5vw,64px); font-weight:700;
  letter-spacing:-.03em; line-height:.9; color:var(--akzent); opacity:.9}
.schritt h3{margin-bottom:10px}
.schritt p{font-size:17px; max-width:60ch}
@media (max-width:700px){ .schritt{grid-template-columns:1fr; gap:14px} }

/* Zahlen */
.zahlen{display:grid; grid-template-columns:repeat(4,1fr); gap:40px 20px; text-align:center}
.zahl b{display:block; font-family:var(--display); font-size:clamp(40px,5.4vw,66px);
  font-weight:700; letter-spacing:-.035em; line-height:1; color:var(--text)}
.zahl span{display:block; margin-top:12px; font-size:15px; color:var(--text-2); line-height:1.4}
@media (max-width:760px){ .zahlen{grid-template-columns:1fr 1fr} }

/* Tabelle der acht Zellen */
.zellen{width:100%; border-collapse:collapse; font-size:17px; text-align:left}
.zellen th,.zellen td{padding:20px 16px 20px 0; border-bottom:1px solid var(--linie-zart); vertical-align:top}
.zellen th{font-size:13px; letter-spacing:0; color:var(--text-3); font-weight:600; padding-top:0}
.zellen td:first-child{color:var(--text-3); width:78px; white-space:nowrap; font-variant-numeric:tabular-nums}
.zellen b{display:block; margin-bottom:4px; color:var(--text)}
.zellen span{color:var(--text-2); font-size:16px}
.ampel{display:inline-flex; gap:5px; margin-right:9px; transform:translateY(3px)}
.ampel i{width:22px; height:22px; border-radius:6px; display:grid; place-items:center;
  font-style:normal; font-size:11px; font-weight:700; color:#000}
.ampel .io{background:var(--gut)} .ampel .re{background:var(--offen)} .ampel .ma{background:var(--mangel)}

/* Pillenreihe (Gewerke, Sprachen) */
.pillen{display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:0; list-style:none; justify-content:center}
.pillen li{font-size:15px; padding:9px 20px; border-radius:980px;
  border:1px solid var(--linie); color:var(--text-2)}
.pillen li:first-child{border-color:var(--akzent); color:var(--akzent); background:var(--akzent-zart)}

/* Grosse Aussage, mittig — Apples „statement“-Abschnitt */
.aussage{font-family:var(--display); font-size:clamp(30px,4.4vw,54px); font-weight:600;
  line-height:1.12; letter-spacing:-.024em; max-width:16ch; margin-inline:auto; color:var(--text)}
.aussage .leise{color:var(--text-3)}

/* --------------------------------------------------------- Fuss */
.fuss{background:var(--flaeche-2); padding-block:44px 34px; font-size:12px; line-height:1.5}
:root[data-thema="hell"] .fuss{background:#F5F5F7}
.fussnoten{max-width:1240px; margin:0 auto 30px; padding-inline:24px; color:var(--text-3)}
.fussnoten p{font-size:12px; color:var(--text-3); margin-bottom:.6em}
.fuss-gitter{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;
  max-width:1240px; margin-inline:auto; padding-inline:24px;
  border-top:1px solid var(--linie-zart); padding-top:26px}
@media (max-width:760px){ .fuss-gitter{grid-template-columns:1fr 1fr} }
.fuss h4{font-size:12px; font-weight:600; color:var(--text); margin-bottom:12px}
.fuss ul{list-style:none; margin:0; padding:0}
.fuss li{margin-bottom:8px}
.fuss a{color:var(--text-2)}
.fuss a:hover{color:var(--text)}
.fuss-schluss{display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:space-between;
  max-width:1240px; margin:26px auto 0; padding:16px 24px 0;
  border-top:1px solid var(--linie-zart); color:var(--text-3)}

/* Rechtstexte */
.rechtstext{max-width:720px; margin-inline:auto}
.rechtstext h1{font-size:clamp(34px,4.4vw,54px); margin-bottom:40px}
.rechtstext h2{margin-top:48px; font-size:clamp(22px,2.6vw,30px)}
.rechtstext h2:first-of-type{margin-top:0}
.rechtstext h3{margin-top:30px; font-size:20px}
.rechtstext p,.rechtstext li{font-size:16.5px; line-height:1.6; color:var(--text-2)}
.rechtstext ul{padding-left:20px}
.anschriftblock{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:26px; margin-bottom:8px}
.anschriftblock b{display:block; font-size:13px; color:var(--text); font-weight:600; margin-bottom:7px}
.anschriftblock div{font-size:16.5px; line-height:1.65; color:var(--text-2)}
sup{font-size:.62em; vertical-align:super; line-height:0}