/* 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);
}
.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); }

/* ---------- 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; }
}