/* Landingpage: Aufbau und Abschnitte. Die bewegten Bildchen (Probe-Rad,
   Szenen in den Werkzeug-Karten, Deko) stehen in start-szenen.css. */

.landing {
  overflow-x: clip;
}

.knopf.gross { min-height: 56px; padding: .6em 1.5em; font-size: 1.12rem; }

/* ---------- Kopf ---------- */
.held {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px 18px 34px;
  align-items: center;
}
.held-text { text-align: center; }
.held-titel { margin: 0; display: grid; justify-items: center; gap: 12px; }
.held-logo {
  display: inline-block;
  font-size: clamp(5.5rem, 26vw, 10rem);
  line-height: .8;
}
/* Der Schriftzug als Pfade (A.15.1.0): genau „ZOK“ in Bricolage 800 bei Breite 80 % mit Verlauf — damit die Schrift
   selbst auf Breite 100 % festgelegt werden kann (132 → 78 KB). Erzeugt aus der Schrift, Maße im Browser gemessen. */
.zok-logo { display: block; width: 1.18961em; height: .8em; overflow: visible; }
.held-zeile {
  font-size: clamp(1.8rem, 6.4vw, 3rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.03em;
}
.held-unter {
  max-width: 34em;
  margin: 16px auto 0;
  font-size: 1.12rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--tusche-weich);
}
.held-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 24px; }
.vertrauen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font-weight: 550;
  font-size: .95rem;
  color: var(--tusche-weich);
}
.held-raum { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--tusche-weich); font-weight: 600; text-decoration: none; }
.held-raum strong { color: #6d28d9; /* Kontrast ≥ 4,5 auf dem hellen Grund */ text-decoration: underline; text-underline-offset: 3px; }
.held-raum svg { width: 20px; height: 20px; color: var(--akzent); }
.vertrauen li { display: inline-flex; align-items: center; gap: 6px; }
.vertrauen svg { width: 17px; height: 17px; color: var(--akzent); stroke-width: 3; }

/* ---------- Abschnitte ---------- */
.abschnitt { max-width: 1120px; margin: 0 auto; padding: 48px 18px; }
.abschnitt-schmal { max-width: 780px; }
.abschnitt-titel {
  margin: 0;
  text-align: center;
  font-size: clamp(1.9rem, 6vw, 2.8rem);
  line-height: 1.05;
}
.abschnitt-unter {
  max-width: 36em;
  margin: 12px auto 0;
  text-align: center;
  font-weight: 400;
  color: var(--tusche-weich);
}

/* ---------- Werkzeug-Karten ---------- */
.werkzeug-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 22px;
  margin-top: 32px;
}
.werkzeug-karte {
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  overflow: clip;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  box-shadow: var(--schatten);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.werkzeug-karte:hover { transform: translateY(-4px); box-shadow: var(--schatten-gross); }
.werkzeug-karte:active { transform: translateY(0); }
.werkzeug-karte:focus-visible { outline: 4px solid var(--himmel); outline-offset: 4px; }
.wk-text { display: grid; gap: 6px; padding: 18px 22px 22px; }
.wk-text strong { font-family: var(--schrift-titel); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.wk-text > span:not(.wk-los) { color: var(--tusche-weich); font-weight: 400; line-height: 1.5; }
.wk-los {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-weight: 600;
  color: var(--tusche);
}
.wk-los svg { width: 20px; height: 20px; transition: translate .15s ease; }
.werkzeug-karte:hover .wk-los svg { translate: 4px 0; }

/* ---------- Schritte (echte Reihenfolge, daher nummeriert) ---------- */
.schritte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 22px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
.schritt {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 34px 22px 22px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  box-shadow: var(--schatten-klein);
}
.schritt strong { font-family: var(--schrift-titel); font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
.schritt > span:last-child { font-weight: 400; line-height: 1.5; color: var(--tusche-weich); }
.schritt-nr {
  position: absolute;
  top: -20px;
  left: 20px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--verlauf);
  color: #fff;
  font-family: var(--schrift-titel);
  font-size: 1.25rem;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(139, 92, 246, .35);
}

/* ---------- Stärken ---------- */
.staerken {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 26px 28px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
.staerken li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 2px;
}
.staerken svg {
  grid-row: 1 / 3;
  width: 48px;
  height: 48px;
  padding: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .6);
  box-shadow: var(--schatten-klein);
  color: var(--akzent);
}
.staerken strong { font-family: var(--schrift-titel); font-size: 1.15rem; font-weight: 700; letter-spacing: -.015em; }
.staerken span { font-weight: 400; line-height: 1.5; color: var(--tusche-weich); }
.staerken a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ---------- Fragen ---------- */
.fragen { display: grid; gap: 12px; margin-top: 28px; }
.fragen details {
  border-radius: 20px;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  box-shadow: var(--schatten-klein);
}
/* Eigener Pfeil: der Standard-Marker verschwindet bei list-style:none. */
.fragen summary {
  position: relative;
  padding: 18px 56px 18px 20px;
  list-style: none;
  font-weight: 600;
  font-size: 1.08rem;
  cursor: pointer;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--papier-2);
  color: var(--tusche);
  font-weight: 550;
  line-height: 1;
  transition: rotate .2s ease;
}
.fragen details[open] summary::after { content: "−"; background: var(--verlauf); color: #fff; }
.fragen summary:focus-visible { outline: 3px solid var(--himmel); outline-offset: 2px; border-radius: 18px; }
.fragen p { margin: 0; padding: 0 20px 20px; line-height: 1.65; font-weight: 400; color: var(--tusche-weich); }

/* ---------- Schluss ---------- */
.schluss {
  max-width: 1120px;
  margin: 30px 16px 10px;
  padding: 52px 22px;
  border-radius: 36px;
  background:
    radial-gradient(30rem 20rem at 15% 0%, rgba(255, 255, 255, .28), transparent 70%),
    linear-gradient(135deg, #8b5cf6, #c04fd8 55%, #ec4899);
  box-shadow: var(--schatten-gross);
  color: #fff;
  text-align: center;
}
.schluss-titel {
  margin: 0;
  font-size: clamp(2.2rem, 8vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -.035em;
}
.schluss > p { margin: 10px 0 26px; font-size: 1.15rem; font-weight: 400; color: rgba(255, 255, 255, .85); }
.schluss-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.schluss .knopf { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.schluss .knopf:not(:disabled):hover { background: rgba(255, 255, 255, .26); }
.schluss .knopf.sonne { background: #fff; color: #7c3aed; /* 5,7:1 statt 4,2:1 (A.14.5.0) */ box-shadow: 0 8px 22px rgba(60, 20, 120, .25); }
.installieren { margin-top: 24px; display: grid; justify-items: center; gap: 8px; }
.install-hinweis { margin: 0; max-width: 32em; font-weight: 400; color: rgba(255, 255, 255, .8); }
.install-hinweis:empty { display: none; }

/* ---------- großer Bildschirm ---------- */
@media (min-width: 900px) {
  .held { grid-template-columns: 1.05fr 1fr; padding: 48px 28px 56px; gap: 40px; }
  .held-text { text-align: left; }
  .held-titel { justify-items: start; }
  .held-unter { margin-left: 0; }
  .held-knoepfe, .vertrauen { justify-content: flex-start; }
  /* Fünf Werkzeuge: drei oben, zwei breite unten */
  /* Drei je Reihe; eine angefangene letzte Reihe steht MITTIG (ab A.11.0.0, 10 Werkzeuge) —
     als Raster stünde sie links allein. */
  .werkzeug-raster { display: flex; flex-wrap: wrap; justify-content: center; }
  .werkzeug-raster > .werkzeug-karte { flex: 0 1 calc((100% - 44px) / 3); }
  .schluss { margin-inline: 28px; }
}
@media (min-width: 1180px) {
  .schluss { margin-inline: auto; }
}

/* Handy quer (A.14.4.0): sonst stand im ersten Bild nur das Logo. */
@media (orientation: landscape) and (max-height: 540px) and (min-width: 480px) and (max-width: 899px) {
  .held { grid-template-columns: 1.1fr 1fr; gap: 20px; padding: 14px 18px 20px; }
  .held-text { text-align: left; }
  .held-titel { justify-items: start; gap: 6px; }
  .held-logo { font-size: 4.2rem; }
  .held-zeile { font-size: 1.6rem; }
  .held-unter { margin: 8px 0 0; font-size: 1rem; line-height: 1.45; }
  .held-knoepfe, .vertrauen { justify-content: flex-start; }
  .held .probe-rad { width: min(40vw, 100dvh - 70px); } /* .held davor: start-szenen.css lädt später */
  .held-buehne { padding-top: 4px; }
}

/* ==================== Startseite „Schiefer“ (A.19.1.0) ====================
   SEIN Wunsch: „modern, nicht zu hell, nicht zu dunkel und keine Pastellfarben“ — aus drei Bildproben wählte er C
   (docs/bildproben/startseite-neu/). Graublauer Mittelton-Grund, feste kühlweiße Karten, Limette als Hauptknopf,
   Indigo als Akzent; am Handy die Werkzeuge kompakt in zwei Spalten. Gilt NUR hier (.landing), die Werkzeuge bleiben Glas. */
html:has(body.landing) { background: #556275; }
.landing {
  --s-grund-1: #556275;
  --s-grund-2: #657189;
  --s-auf: #fff;
  --s-auf-weich: #e8edf4;
  --s-karte: #f8fafc;
  --s-tinte: #0f172a;
  --s-tinte-weich: #475569;
  --s-limette: #c6f135;
  --s-limette-tief: #1a2400;
  --akzent: #4338ca;
  --verlauf: linear-gradient(135deg, #4338ca, #6366f1);
  --himmel: #c6f135;
  --tusche: var(--s-tinte);
  --tusche-weich: var(--s-tinte-weich);
  --schatten: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 12px 28px rgba(15, 23, 42, .22);
  --schatten-klein: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 6px 16px rgba(15, 23, 42, .18);
  --schatten-gross: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 24px 50px rgba(15, 23, 42, .3);
  --zeiger-1: #334155; --zeiger-2: #1e293b; --zeiger-3: #0f172a;
}
.landing::before {
  background:
    radial-gradient(60rem 40rem at 10% -10%, rgba(120, 180, 255, .3), transparent 60%),
    radial-gradient(50rem 36rem at 110% 60%, rgba(198, 241, 53, .1), transparent 60%),
    linear-gradient(160deg, var(--s-grund-1), var(--s-grund-2));
}
/* Auf dem Grund: weiß */
.landing .held-zeile, .landing .abschnitt-titel, .landing .staerken strong { color: var(--s-auf); }
.landing .held-unter, .landing .abschnitt-unter, .landing .vertrauen, .landing .held-raum, .landing .staerken span { color: var(--s-auf-weich); }
.landing .vertrauen svg, .landing .held-raum svg, .landing .held-raum strong { color: var(--s-auf); }
.landing .zok-logo path { fill: #fff; }
/* Knöpfe: Limette für das Wichtigste, sonst weiß umrandet */
.landing .knopf { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); -webkit-backdrop-filter: none; backdrop-filter: none; }
.landing .knopf:not(:disabled):hover { background: rgba(255, 255, 255, .22); }
.landing .knopf.haupt, .landing .schluss .knopf.sonne { background: var(--s-limette); color: var(--s-limette-tief); box-shadow: 0 10px 24px rgba(15, 23, 42, .25); }
.landing .knopf.haupt:not(:disabled):hover, .landing .schluss .knopf.sonne:not(:disabled):hover { background: #d4f75c; }
.landing .knopf:focus-visible { outline-color: var(--s-limette); }
/* Karten: fest, kühlweiß */
.landing .werkzeug-karte, .landing .schritt, .landing .fragen details, .landing .probe-blase, .landing .staerken svg {
  background: var(--s-karte);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.landing .probe-blase::before { background: var(--s-karte); }
.landing .staerken svg { color: var(--akzent); }
.landing .wk-los { color: var(--akzent); }
.landing .szene { background: linear-gradient(160deg, #e8edf5, #dbe3ee); }
.landing .probe-nabe { background: radial-gradient(circle at 35% 30%, #fff, #e2e8f0 75%); color: var(--akzent); box-shadow: 0 0 0 5px rgba(255, 255, 255, .75), 0 10px 26px rgba(15, 23, 42, .35); }
.landing .probe-scheibe { filter: drop-shadow(0 6px 8px rgba(15, 23, 42, .2)) drop-shadow(0 22px 40px rgba(15, 23, 42, .28)); }
.landing .fragen summary::after { background: #e2e8f0; }
.landing .schluss { background: var(--s-karte); color: var(--s-tinte); }
.landing .schluss > p, .landing .install-hinweis { color: var(--s-tinte-weich); }
.landing .schluss .knopf { color: var(--s-tinte); background: transparent; box-shadow: inset 0 0 0 1.5px #94a3b8; }
.landing .schluss .knopf:not(:disabled):hover { background: #eef2f7; }
.landing .fuss, .landing .fuss a { color: var(--s-auf-weich); }
/* Weitere Projekte (A.22.33.0): Banner-Raster über dem Fuß, 3 / 2 / 1 Spalten (Vorbild timeghost.de).
   A.22.37.2 (SEIN „Links und rechts ist reichlich Platz“): eigene Grenze 1900 px samt Rand statt der Seitenbreite —
   wie timeghost.de V.6.28.001 (bei 2000 px Fenster Banner ~590 px); Rand wächst mit (18 px am Handy, bis 48 px). */
.projekte { box-sizing: border-box; max-width: 1900px; margin: 40px auto 0; padding: 0 clamp(18px, 4vw, 48px) 8px; }
.projekte h2 { margin: 0 0 18px; font-size: .95rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-align: center; color: var(--s-auf-weich); }
.projekte ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .projekte ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .projekte ul { grid-template-columns: 1fr; } }
.projekte a { display: block; border-radius: 10px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--s-auf-weich) 35%, transparent); transition: transform .15s, border-color .15s; }
.projekte a:hover, .projekte a:focus-visible { transform: translateY(-2px); border-color: var(--s-auf-weich); }
.projekte a:focus-visible { outline: 2px solid var(--s-limette); outline-offset: 2px; }
.projekte img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 1; }
@media (prefers-reduced-motion: reduce) { .projekte a:hover, .projekte a:focus-visible { transform: none; } }
/* Dunkelmodus „Graphit“ (A.23.3.0, Grundlage in basis.css): derselbe Aufbau, Grund und Karten dunkelgrau, Limette bleibt */
html[data-thema="dunkel"]:has(body.landing) { background: #121212; }
[data-thema="dunkel"] .landing {
  --s-grund-1: #121212;
  --s-grund-2: #181818;
  --s-auf-weich: #c4c4c4;
  --s-karte: #1f1f1f;
  --s-tinte: #f3f3f3;
  --s-tinte-weich: #a3a3a3;
  --akzent: #a5b4fc;
  --schatten: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 12px 28px rgba(0, 0, 0, .45);
  --schatten-klein: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 6px 16px rgba(0, 0, 0, .4);
  --schatten-gross: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 24px 50px rgba(0, 0, 0, .55);
}
[data-thema="dunkel"] .landing::before { background: linear-gradient(160deg, var(--s-grund-1), var(--s-grund-2)); }
[data-thema="dunkel"] .landing .knopf { background: rgba(255, 255, 255, .06); }
[data-thema="dunkel"] .landing .knopf.haupt, [data-thema="dunkel"] .landing .schluss .knopf.sonne { background: var(--s-limette); color: var(--s-limette-tief); box-shadow: 0 10px 24px rgba(0, 0, 0, .4); }
[data-thema="dunkel"] .landing .szene { --tusche: #1e1b3a; --tusche-weich: #5f5a7e; --flaeche: rgba(255, 255, 255, .9); color: var(--tusche); background: linear-gradient(160deg, #262626, #1c1c1c); } /* die Bildchen darin bleiben hell, also auch ihre Tinte */
.landing .thema-wahl button { color: var(--s-auf-weich); }
.landing .thema-wahl button[aria-pressed="true"] { background: rgba(15, 23, 42, .4); color: #fff; box-shadow: none; } /* auf dem Schiefer dunkler: hell war Weiß nur 4,4 : 1 */
[data-thema="dunkel"] .landing .thema-wahl button[aria-pressed="true"] { background: rgba(255, 255, 255, .14); }
.landing .thema-wahl button:focus-visible { outline-color: var(--s-limette); }
[data-thema="dunkel"] .landing .probe-nabe { background: radial-gradient(circle at 35% 30%, #333, #1f1f1f 75%); box-shadow: 0 0 0 5px rgba(255, 255, 255, .12), 0 10px 26px rgba(0, 0, 0, .5); }
[data-thema="dunkel"] .landing .fragen summary::after { background: #2e2e2e; }
[data-thema="dunkel"] .landing .schluss .knopf { background: transparent; box-shadow: inset 0 0 0 1.5px #525252; }
[data-thema="dunkel"] .landing .schluss .knopf:not(:disabled):hover { background: #2a2a2a; }
/* Handy: kompakt — zwei Kacheln je Reihe, kleinere Szenen, kurze Beschreibung */
@media (max-width: 899px) {
  .landing .held { padding-top: 22px; gap: 6px; }
  .landing .held-logo { font-size: clamp(4.5rem, 20vw, 7rem); }
  .landing .probe-rad { width: min(68vw, 320px); }
  .landing .abschnitt { padding: 34px 14px; }
  .landing .werkzeug-raster { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
  .landing .werkzeug-karte { border-radius: 22px; }
  .landing .szene { zoom: .6; }
  .landing .wk-text { padding: 10px 14px 14px; gap: 2px; }
  .landing .wk-text strong { font-size: 1.08rem; }
  .landing .wk-text > span:not(.wk-los) { font-size: .84rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .landing .wk-los { display: none; }
}
@media (min-width: 900px) {
  .landing .werkzeug-raster > .werkzeug-karte { flex: 0 1 calc((100% - 66px) / 4); }
  .landing .szene { zoom: .8; }
}