/* Kalibrat – der Auftritt seit 13.09.2026.

   Liegt ueber start.css und seite.css: dieselben Bausteine (Kopf, Knoepfe,
   Karten, Fuss), zeitgemaess gezeichnet, und die Abschnitte der Startseite
   und der Loesungsseiten (Klassen mit "l-"). Ohne Fremdschrift und ohne
   eingebettete Stile - die Inhaltssicherheitsrichtlinie erlaubt nur
   eigene Dateien. */

:root{
  --nacht:#061d25; --nacht-2:#0a2a35; --nacht-linie:#1c4250;
  --leuchte:#22b3c9; --leuchte-2:#5fd3e2;
  --verlauf:linear-gradient(135deg,#0e5a6e 0%,#138099 55%,#1ba3b8 100%);
  --schatten-1:0 1px 2px #0a1a2014, 0 4px 14px #0a1a2012;
  --schatten-2:0 12px 40px #06222b2e;
  --rund:16px;
}

body{font:16.5px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  text-rendering:optimizeLegibility}
h1,h2,h3{font-weight:800; letter-spacing:-.022em}
h2{font-size:clamp(1.7rem,3.4vw,2.45rem)}
.huelle{max-width:1160px}

/* --- Kopf ------------------------------------------------------------- */
.kopf{background:#ffffffe6; backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid #e3e9ee}
.kopf-inhalt{height:66px}
.kopf nav{align-items:center; gap:1.5rem}
.kopf nav a{font-weight:500; color:#33444f}
.kopf nav a.jetzt{color:#fff; background:var(--verlauf); padding:.5rem 1.05rem;
  border-radius:999px; font-weight:650; box-shadow:0 4px 14px #0e5a6e40}
.kopf nav a.jetzt:hover{color:#fff; filter:brightness(1.08)}

/* --- Knoepfe ---------------------------------------------------------- */
.knopf{border-radius:999px; padding:.85rem 1.6rem; font-weight:650;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease}
.knopf-haupt{background:var(--verlauf); box-shadow:0 8px 24px #0e5a6e45}
.knopf-haupt:hover{background:var(--verlauf); filter:brightness(1.08); transform:translateY(-1px)}
.knopf-neben:hover{transform:translateY(-1px)}
.knopf-gross{padding:1rem 1.9rem; font-size:1.06rem}
.knopf-hell{background:#ffffff14; color:#fff; border:1px solid #ffffff40}
.knopf-hell:hover{background:#ffffff24}

/* --- Karten und Abschnitte ------------------------------------------- */
.karte{border-radius:var(--rund); border-color:#e1e8ed; box-shadow:var(--schatten-1);
  transition:transform .2s ease, box-shadow .2s ease}
.karte:hover{transform:translateY(-2px); box-shadow:var(--schatten-2)}
.l-abschnitt{padding:5.5rem 0}
.l-abschnitt.l-grau{background:#f5f8fa}
.l-kopfzeile{max-width:760px; margin:0 auto 2.6rem; text-align:center}
.l-kopfzeile p{font-size:1.1rem; color:var(--tinte-2); margin:0}
.l-marke{display:inline-block; font-size:.78rem; font-weight:750; letter-spacing:.12em;
  text-transform:uppercase; color:var(--akzent-leuchte); margin-bottom:.8rem}

/* --- Held ------------------------------------------------------------- */
.l-held{position:relative; overflow:hidden; color:#e7f3f6; padding:5.5rem 0 5rem;
  background:
    radial-gradient(900px 480px at 85% 15%, #1ba3b833, transparent 60%),
    radial-gradient(700px 420px at 5% 95%, #0e5a6e66, transparent 60%),
    var(--nacht)}
.l-held-gitter{display:grid; grid-template-columns:1.02fr 1fr; gap:3.4rem; align-items:center}
.l-held h1{color:#fff; font-size:clamp(2.5rem,5.6vw,4.1rem); line-height:1.04;
  letter-spacing:-.035em; margin-bottom:1.2rem}
.l-held h1 .l-h1-schlagwort{display:block; font-size:clamp(.82rem,1.4vw,.95rem);
  letter-spacing:.14em; text-transform:uppercase; font-weight:750; color:var(--leuchte-2);
  margin-bottom:1rem}
.l-held h1 em{font-style:normal; background:linear-gradient(90deg,#5fd3e2,#9eeaf2);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.l-held .fuehrung{color:#b9d3db; font-size:1.16rem; max-width:34rem}
.l-held .fuehrung b{color:#fff}
.l-held .held-knoepfe{margin:2rem 0 1.4rem}
.l-haken{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.5rem 1.4rem;
  font-size:.93rem; color:#a9c5ce}
.l-haken li{display:flex; align-items:center; gap:.45rem}
.l-haken li::before{content:""; width:1.05rem; height:1.05rem; border-radius:50%; flex:none;
  background:#22b3c926 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.5 2.4L12 5.4' fill='none' stroke='%235fd3e2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}

.l-buehne{position:relative}
.l-buehne .schirm{border-radius:14px; box-shadow:0 30px 80px #0009, 0 0 0 1px #ffffff1a;
  transform:perspective(1600px) rotateY(-7deg) rotateX(2deg); transform-origin:left center}
.l-schwebe{position:absolute; background:#fff; color:var(--tinte); border-radius:14px;
  padding:.7rem .9rem; box-shadow:0 18px 40px #0007; font-size:.84rem; line-height:1.35;
  display:flex; gap:.65rem; align-items:center; max-width:17rem}
.l-schwebe b{display:block; font-size:.9rem}
.l-schwebe span{color:var(--tinte-3)}
.l-schwebe i{flex:none; width:2.1rem; height:2.1rem; border-radius:10px; display:grid;
  place-items:center; font-style:normal; font-weight:800; color:#fff}
.l-schwebe.l-s1{left:-1.6rem; bottom:2.2rem}
.l-schwebe.l-s1 i{background:#d9822b}
.l-schwebe.l-s2{right:-1rem; top:-1.2rem}
.l-schwebe.l-s2 i{background:#1a7f43}
@media (prefers-reduced-motion:no-preference){
  .l-schwebe{animation:l-schweben 6s ease-in-out infinite}
  .l-schwebe.l-s2{animation-delay:-3s}
}
@keyframes l-schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* --- Normleiste ------------------------------------------------------- */
.l-normen{background:var(--nacht-2); border-top:1px solid var(--nacht-linie);
  color:#8fb0ba; padding:1.3rem 0; font-size:.9rem}
.l-normen .huelle{display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.6rem 2.2rem}
.l-normen b{color:#d8eaef; font-weight:650; letter-spacing:.01em}

/* --- Vorher / nachher ------------------------------------------------- */
.l-vergleich{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem}
.l-vergleich > div{border-radius:var(--rund); padding:1.8rem 1.9rem}
.l-vorher{background:#fbf3ef; border:1px solid #f0dcd2}
.l-nachher{background:#ecf7f9; border:1px solid #c6e6ec}
.l-vergleich h3{font-size:1.15rem; margin-bottom:1rem}
.l-vergleich ul{list-style:none; padding:0; margin:0; display:grid; gap:.75rem}
.l-vergleich li{position:relative; padding-left:1.8rem; color:#3b4a55}
.l-vergleich li::before{position:absolute; left:0; top:.05rem; font-weight:800}
.l-vorher li::before{content:"✕"; color:#b3261e}
.l-nachher li::before{content:"✓"; color:#1a7f43}

/* --- Schritte --------------------------------------------------------- */
.l-schritte{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; counter-reset:s}
.l-schritt{background:#fff; border:1px solid #e1e8ed; border-radius:var(--rund);
  overflow:hidden; box-shadow:var(--schatten-1); display:flex; flex-direction:column}
.l-schritt-text{padding:1.5rem 1.6rem 1.2rem}
.l-schritt-text::before{counter-increment:s; content:counter(s); display:grid;
  place-items:center; width:2.2rem; height:2.2rem; border-radius:50%; background:var(--verlauf);
  color:#fff; font-weight:800; margin-bottom:.9rem}
.l-schritt p{color:var(--tinte-2); margin:0; font-size:.96rem}
/* Das Bildschirmfoto ist ein ganzer Schirm; in der Karte zaehlt die linke
   obere Ecke, vergroessert - sonst sieht man nur Striche. */
.l-schritt picture{display:block; overflow:hidden; aspect-ratio:4/3; margin-top:auto;
  border-top:1px solid #e1e8ed; background:#f5f8fa}
.l-schritt img{display:block; width:175%; max-width:none; height:auto}

/* --- Funktionen ------------------------------------------------------- */
.l-funktionen{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
.l-funktion{background:#fff; border:1px solid #e1e8ed; border-radius:var(--rund);
  padding:1.5rem 1.5rem 1.3rem; box-shadow:var(--schatten-1)}
.l-funktion svg{width:2.6rem; height:2.6rem; padding:.55rem; border-radius:12px;
  background:var(--akzent-hell); color:var(--akzent); margin-bottom:.9rem}
.l-funktion h3{font-size:1.08rem; margin-bottom:.4rem}
.l-funktion p{color:var(--tinte-2); margin:0; font-size:.95rem}
.l-funktion .modul-marke{margin:.6rem 0 0}

/* --- Geraetearten ------------------------------------------------------ */
.l-chips{display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center;
  max-width:960px; margin:0 auto}
.l-chips a,.l-chips span{display:inline-block; padding:.45rem .95rem; border-radius:999px;
  background:#fff; border:1px solid #d9e3e9; color:#33444f; font-size:.92rem;
  text-decoration:none}
.l-chips a:hover{border-color:var(--akzent); color:var(--akzent)}

/* --- Dunkler Streifen (Film, Abschluss) -------------------------------- */
.l-dunkel{background:var(--nacht); color:#cfe3e9}
.l-dunkel h2,.l-dunkel h3{color:#fff}
.l-dunkel .l-kopfzeile p{color:#9fbcc5}
.l-dunkel .film video{border-radius:14px; box-shadow:0 30px 80px #0008}
.l-dunkel .film-unter{color:#7fa0aa}

/* --- Fragen ------------------------------------------------------------ */
.l-fragen{max-width:820px; margin:0 auto; display:grid; gap:.7rem}
.l-fragen details{background:#fff; border:1px solid #e1e8ed; border-radius:14px;
  padding:0 1.3rem; box-shadow:var(--schatten-1)}
.l-fragen summary{cursor:pointer; list-style:none; padding:1.1rem 2rem 1.1rem 0;
  font-weight:650; position:relative}
.l-fragen summary::-webkit-details-marker{display:none}
.l-fragen summary::after{content:"+"; position:absolute; right:0; top:.85rem;
  font-size:1.4rem; color:var(--akzent-leuchte); transition:transform .2s}
.l-fragen details[open] summary::after{transform:rotate(45deg)}
.l-fragen details p{color:var(--tinte-2); margin:0 0 1.1rem}

/* --- Abschluss --------------------------------------------------------- */
.l-schluss{text-align:center; padding:5rem 0;
  background:radial-gradient(700px 360px at 50% 0%, #1ba3b840, transparent 70%), var(--nacht)}
.l-schluss h2{font-size:clamp(2rem,4.4vw,3rem); color:#fff}
.l-schluss p{color:#a9c5ce; max-width:40rem; margin:0 auto 1.8rem; font-size:1.1rem}

/* --- Brotkrumen und Loesungsseiten ------------------------------------ */
.l-krumen{font-size:.85rem; color:#8fb0ba; margin-bottom:1.4rem}
.l-krumen a{color:#b9d3db; text-decoration:none}
.l-krumen a:hover{text-decoration:underline}
.l-held-schmal{padding:4.5rem 0 4rem}
.l-held-schmal .l-held-gitter{grid-template-columns:1.15fr .85fr}
.l-inhalt{max-width:820px; margin:0 auto}
.l-inhalt h2{margin-top:2.6rem}
.l-inhalt p,.l-inhalt li{color:#34434e}
.l-inhalt ul{padding-left:1.2rem}
.l-inhalt li{margin:.35rem 0}
.l-tabelle{width:100%; border-collapse:separate; border-spacing:0; font-size:.94rem;
  background:#fff; border:1px solid #e1e8ed; border-radius:14px; overflow:hidden;
  box-shadow:var(--schatten-1)}
.l-tabelle th{background:#f2f6f8; text-align:left; font-weight:700; padding:.75rem .9rem;
  font-size:.86rem; color:#33444f; border-bottom:1px solid #e1e8ed}
.l-tabelle td{padding:.7rem .9rem; border-bottom:1px solid #eef2f5; vertical-align:top}
.l-tabelle tr:last-child td{border-bottom:0}
.l-tabelle td.l-frist{font-weight:700; color:var(--akzent); white-space:nowrap}
.l-tabelle td.l-norm{color:#56666f; font-size:.86rem}
.l-tabellenhuelle{overflow-x:auto; margin:1.2rem 0 2rem}
.l-hinweis{background:#fff8ec; border:1px solid #f1dfbd; border-radius:12px;
  padding:1rem 1.2rem; color:#6b4a12; font-size:.93rem}
.l-sprung{display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0 0}
.l-sprung a{font-size:.88rem; padding:.35rem .8rem; border-radius:999px;
  border:1px solid #d9e3e9; text-decoration:none; background:#fff}

/* Pruefpunkte als Haken-Liste (Loesungsseiten) */
.l-checkliste{list-style:none; padding:0; margin:.4rem 0 1.4rem; display:grid; gap:.45rem}
.l-checkliste li{position:relative; padding:.55rem .8rem .55rem 2.3rem; background:#fff;
  border:1px solid #e1e8ed; border-radius:10px}
.l-checkliste li::before{content:"✓"; position:absolute; left:.85rem; top:.5rem;
  color:var(--gruen); font-weight:800}

/* --- Fuss ------------------------------------------------------------- */
.fuss{background:#041419; color:#9fb4bc; padding:3.5rem 0 2.5rem}
.fuss-inhalt{grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:2rem}
.fuss b{color:#e8f2f5}
.fuss a{color:#bcd6de}

/* --- Schmale Schirme -------------------------------------------------- */
@media (max-width:960px){
  .l-held-gitter,.l-held-schmal .l-held-gitter{grid-template-columns:1fr; gap:2.6rem}
  .l-buehne .schirm{transform:none}
  .l-schritte,.l-funktionen{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  /* Die feste Hoehe oben gilt nur, solange der Kopf in eine Zeile passt -
     bricht er um, muss sein Hintergrund mitwachsen, sonst liegen die
     Verweise ueber dem Held. */
  .kopf-inhalt{height:auto; min-height:56px}
  .kopf nav{gap:.45rem .95rem}
  .kopf nav a.jetzt{padding:.35rem .8rem}
}
@media (max-width:640px){
  /* Die Prueffristen als Karten: vier Spalten passen auf kein Telefon. */
  .l-stapel thead{display:none}
  .l-stapel, .l-stapel tbody, .l-stapel tr, .l-stapel td{display:block; width:100%}
  .l-stapel tr{padding:.8rem .95rem; border-bottom:1px solid #eef2f5}
  .l-stapel td{border:0; padding:.12rem 0}
  .l-stapel td:first-child{font-weight:700}
  .l-stapel td[data-label]::before{content:attr(data-label) ": "; color:var(--tinte-3);
    font-weight:500; font-size:.82rem}
  .l-abschnitt{padding:3.8rem 0}
  .l-held{padding:3.4rem 0 3.6rem}
  .l-vergleich,.l-schritte,.l-funktionen{grid-template-columns:1fr}
  .l-schwebe{display:none}
  .l-normen .huelle{gap:.5rem 1.2rem; font-size:.84rem}
}