/* =============================================================================
   werken.fun · Landingpage · Seitenaufbau (landing/css/seite.css)
   =============================================================================
   Was nur diese Seite braucht: Start (Hero), die statischen App-Nachbauten in
   den Gerätrahmen und die Anordnung einzelner Abschnitte. Bausteine, die
   mehrfach vorkommen (Knopf, Karte, Chip, Gerätrahmen …), stehen in
   basis.css. Pro Abschnitt ein Block, in der Reihenfolge der Seite.
   ============================================================================= */

.titel-klein { font-size: var(--titel-xs); line-height: 1.2; letter-spacing: -0.015em; }
.abschnitt-kopf--ohne-abstand { margin-bottom: 0; }

/* ─── 01 Start ─────────────────────────────────────────────────────────── */
.start {
  padding-top: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
  padding-bottom: clamp(4rem, 2.5rem + 6vw, 8rem);
  overflow-x: clip;
}
.start::before {
  /* Punkteraster wie auf der Plattform, nach unten auslaufend (kein Farbverlauf) */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(26, 26, 26, 0.13) 1.3px, transparent 1.7px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(#000 40%, transparent 95%);
  mask-image: linear-gradient(#000 40%, transparent 95%);
}
.start { isolation: isolate; }
.start__raster {
  display: grid;
  gap: clamp(3rem, 2rem + 4vw, 5rem);
  align-items: center;
}
@media (min-width: 1024px) {
  .start__raster { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); }
}
.start__titel { max-width: 11ch; }
.start__lead { max-width: 46ch; }
.start__knoepfe { margin-top: var(--r-2); }
.start__fakten {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.6rem;
}
.start__fakten .chip { background: var(--papier); }

.start__bild {
  position: relative;
  width: 100%;
  max-width: 660px;
  margin-inline: auto;
  padding: 2.25rem 0.75rem 3.5rem 0;
}
@media (min-width: 1024px) { .start__bild { max-width: none; } }
.start__geraet { transform: rotate(1.6deg); }
.start__sticker-oben {
  position: absolute; top: 0.25rem; left: 0.5rem; z-index: 3;
  --dreh: -4deg;
}
.start__hilfe {
  position: absolute; right: 0.25rem; bottom: 0.4rem; z-index: 3;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.9rem 0.55rem 0.55rem;
  border: var(--kontur); border-radius: var(--radius-klein);
  background: var(--weiss); box-shadow: var(--schatten-mittel);
  font-size: 0.9375rem; line-height: 1.2;
  transform: rotate(-2deg);
}
.start__hilfe-avatar {
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem; flex: none;
  border: var(--kontur-mittel); border-radius: 50%;
  background: var(--pink);
  font-family: var(--mono); font-size: 0.75rem; font-weight: 700;
}
@media (max-width: 599px) {
  .start__bild { padding: 2.6rem 0.25rem 3.25rem 0; }
  .start__sticker-oben { top: 0; }
  .start__hilfe { font-size: 0.875rem; }
}

/* ─── App-Nachbauten (statisch, mit erfundenen Daten) ──────────────────── */
/* Alle Masse in cqi: der Nachbau skaliert mit der Breite des Bildschirms. */
.app {
  display: flex; flex-direction: column;
  height: 100%;
  background: var(--creme);
  font-size: 2.05cqi;
  line-height: 1.35;
}
.app__leiste {
  display: flex; align-items: center; gap: 1.6cqi;
  min-height: 9cqi; padding: 0 3cqi;
  border-bottom: max(2px, 0.35cqi) solid var(--tinte);
  background: var(--creme);
  font-weight: 700;
}
.app__logo { display: inline-flex; align-items: center; gap: 1cqi; margin-right: auto; font-size: 2.3cqi; letter-spacing: -0.03em; }
.app .logo__fun { color: var(--pink-tief); }  /* kleine Schrift: dunkleres Pink (AA) */
.app__kachel {
  display: inline-block; width: 3.6cqi; height: 3.6cqi;
  border: max(1.5px, 0.35cqi) solid var(--tinte); border-radius: 0.9cqi;
  background: var(--lila);
}
.app__klasse {
  padding: 0.35cqi 1.3cqi;
  border: max(1.5px, 0.3cqi) solid var(--tinte); border-radius: 99px;
  background: var(--gelb);
  font-family: var(--mono); font-size: 1.45cqi; letter-spacing: 0.08em; text-transform: uppercase;
}
.app__zeit { font-family: var(--mono); font-size: 1.45cqi; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gedaempft); }
.app__avatar {
  display: grid; place-items: center; width: 5cqi; height: 5cqi;
  border: max(1.5px, 0.35cqi) solid var(--tinte); border-radius: 50%;
  background: var(--blau); font-family: var(--mono); font-size: 1.5cqi;
}
.app__inhalt {
  flex: 1; display: grid; grid-template-columns: 1.25fr 1fr; gap: 3cqi; align-items: center;
  padding: 3.5cqi 4cqi 4cqi;
}
.app__text { display: flex; flex-direction: column; gap: 1.8cqi; min-width: 0; }
.app__etikett {
  font-family: var(--mono); font-size: 1.45cqi; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gedaempft);
}
.app__titel { font-size: 5.6cqi; font-weight: 700; line-height: 1; letter-spacing: -0.045em; }
.app__beschrieb { font-size: 2.1cqi; }
.app__fortschritt { display: flex; align-items: center; gap: 1.5cqi; }
.app__fortschritt .balken { flex: 1; height: 2.4cqi; border-width: max(1.5px, 0.35cqi); }
.app__fortschritt .balken__fuellung { border-right-width: max(1.5px, 0.35cqi); }
.app__zahl { font-family: var(--mono); font-size: 1.6cqi; font-weight: 700; }
.app__knoepfe { display: flex; gap: 1.5cqi; margin-top: 0.8cqi; }
.app__knopf {
  display: inline-flex; align-items: center; min-height: 6.2cqi; padding: 0 2.2cqi;
  border: max(1.5px, 0.4cqi) solid var(--tinte); border-radius: 1.4cqi;
  background: var(--weiss); box-shadow: 0.6cqi 0.6cqi 0 var(--tinte);
  font-size: 2cqi; font-weight: 700; white-space: nowrap;
}
.app__knopf--gelb { background: var(--gelb); }
.app__bild {
  display: grid; place-items: center; aspect-ratio: 1;
  border: max(2px, 0.45cqi) solid var(--tinte); border-radius: 2.4cqi;
  background: var(--weiss); box-shadow: 0.9cqi 0.9cqi 0 var(--tinte);
}
.app__illustration { width: 82%; height: auto; }

/* iPad hoch: Schrittliste */
.app--hoch { font-size: 3.1cqi; }
.app--hoch .app__leiste { min-height: 12cqi; padding: 0 4cqi; }
.app--hoch .app__logo { font-size: 3.6cqi; }
.app--hoch .app__kachel { width: 5.2cqi; height: 5.2cqi; }
.app--hoch .app__klasse { font-size: 2.2cqi; padding: 0.5cqi 2cqi; }
.app--hoch > .app__etikett { padding: 6cqi 5cqi 2cqi; font-size: 2.4cqi; }
.app__schritte { list-style: none; margin: 0; padding: 0 5cqi 5cqi; display: grid; gap: 2.2cqi; counter-reset: s; }
.app__schritt {
  counter-increment: s;
  display: flex; align-items: center; gap: 3cqi;
  min-height: 9.5cqi; padding: 0 3.5cqi;
  border: max(2px, 0.5cqi) solid var(--tinte); border-radius: 2.5cqi;
  background: var(--weiss);
  font-size: 3.6cqi; font-weight: 700; letter-spacing: -0.02em;
}
.app__schritt::before {
  content: counter(s); display: grid; place-items: center; flex: none;
  width: 6cqi; height: 6cqi; border: max(1.5px, 0.45cqi) solid var(--tinte); border-radius: 50%;
  font-family: var(--mono); font-size: 2.6cqi;
}
.app__schritt--fertig { background: var(--gruen-hell); color: #3b3a33; }
.app__schritt--fertig::before { content: '✓'; background: var(--gruen); }
.app__schritt--jetzt { background: var(--gelb); box-shadow: 0.9cqi 0.9cqi 0 var(--tinte); transform: translateX(-1cqi); }
.app__schritt--jetzt::before { background: var(--weiss); }

/* Laptop: Klassenübersicht */
.app--laptop { font-size: 1.5cqi; }
.app--laptop .app__leiste { min-height: 6.4cqi; padding: 0 2.4cqi; gap: 1.4cqi; }
.app--laptop .app__logo { font-size: 1.8cqi; }
.app--laptop .app__kachel { width: 2.6cqi; height: 2.6cqi; }
.app--laptop .app__klasse, .app--laptop .app__zeit { font-size: 1.1cqi; }
.app__klasse-raster {
  flex: 1; list-style: none; margin: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 1.5cqi;
  padding: 2.6cqi 2.8cqi 3cqi;
}
.app__klasse-raster > li {
  display: flex; flex-direction: column; justify-content: space-between; gap: 0.8cqi;
  padding: 1.3cqi 1.5cqi;
  border: max(1.5px, 0.3cqi) solid var(--tinte); border-radius: 1.3cqi;
  background: var(--weiss); box-shadow: 0.45cqi 0.45cqi 0 var(--tinte);
}
.app__kind { font-size: 1.8cqi; font-weight: 700; letter-spacing: -0.02em; }
.app__status {
  align-self: flex-start;
  padding: 0.2cqi 0.9cqi; border: max(1px, 0.22cqi) solid var(--tinte); border-radius: 99px;
  background: var(--creme);
  font-family: var(--mono); font-size: 1.05cqi; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.app__hilfe { background: var(--rosa) !important; }
.app__hilfe .app__status { background: var(--pink); }
.app__fertig .app__status { background: var(--gruen); }

/* ─── 02 Alltag: Zeitstrahl ────────────────────────────────────────────── */
.zeitstrahl {
  list-style: none; margin: 0; padding: 0;
  position: relative;
  display: grid; gap: clamp(1rem, 0.6rem + 1.6vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
@media (min-width: 1024px) {
  .zeitstrahl::before {
    content: ''; position: absolute; left: 2%; right: 2%; top: 2.1rem; height: 3px;
    background: repeating-linear-gradient(90deg, var(--tinte) 0 12px, transparent 12px 20px);
    z-index: 0;
  }
  .zeitstrahl__punkt:nth-child(even) { transform: translateY(1.5rem); }
  .zeitstrahl__punkt:nth-child(even).zeige--wartet { transform: translate3d(0, calc(1.5rem + 28px), 0); }
}
.zeitstrahl__punkt { z-index: 1; }
.zeitstrahl__zeit {
  align-self: flex-start;
  padding: 0.3rem 0.65rem; border: var(--kontur-mittel); border-radius: 8px;
  background: var(--tinte); color: var(--creme);
}

/* ─── 05 Erstellen: Ablauf ─────────────────────────────────────────────── */
.ablauf { list-style: none; margin: 0; padding: 0; }
.ablauf__nummer {
  display: grid; place-items: center; width: 3rem; height: 3rem;
  border: var(--kontur); border-radius: 50%;
  background: var(--weiss); box-shadow: var(--schatten-mini);
  font-family: var(--mono); font-size: 1.25rem; font-weight: 700;
}
.karte--gelb .ablauf__nummer { background: var(--pink); }

/* ─── 06 Bewerten: Kriterienkarte ──────────────────────────────────────── */
.bewertung { max-width: 460px; width: 100%; margin-inline: auto; gap: 1.1rem; }
.bewertung__kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.bewertung__note {
  display: grid; place-items: center; min-width: 3.6rem; height: 3.6rem; padding: 0 0.5rem;
  border: var(--kontur); border-radius: 50%;
  background: var(--gruen); box-shadow: var(--schatten-mini);
  font-size: 1.35rem; font-weight: 700; letter-spacing: -0.03em;
  transform: rotate(-6deg);
}
.bewertung__liste { list-style: none; margin: 0; padding: 0; display: grid; }
.bewertung__zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.8rem 0; border-top: var(--kontur-duenn);
  font-weight: 600; line-height: 1.3;
}
.bewertung__skala { display: inline-flex; gap: 0.35rem; flex: none; }
.bewertung__skala > i {
  display: block; width: 1.05rem; height: 1.05rem;
  border: var(--kontur-duenn); border-radius: 4px; background: var(--weiss);
}
.bewertung__skala--1 > i:nth-child(-n + 1),
.bewertung__skala--2 > i:nth-child(-n + 2),
.bewertung__skala--3 > i:nth-child(-n + 3),
.bewertung__skala--4 > i:nth-child(-n + 4) { background: var(--gelb); }

/* ─── 07 Werkzeuge: Lochwand ───────────────────────────────────────────── */
.werkzeugwand {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.25rem, 0.8rem + 1.8vw, 2.25rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.werkzeug {
  position: relative;
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 2.4rem 1.35rem 1.4rem;
  border: var(--kontur); border-radius: var(--radius);
  background: var(--weiss); box-shadow: var(--schatten);
  transform-origin: 50% 0.9rem;
  transition: transform var(--dauer-lang) var(--kurve);
}
.werkzeug::before {
  /* Aufhängeloch an der Lochwand */
  content: ''; position: absolute; top: 0.8rem; left: 50%;
  width: 0.9rem; height: 0.9rem; margin-left: -0.45rem;
  border: var(--kontur-mittel); border-radius: 50%; background: var(--creme);
}
.werkzeug:nth-child(3n + 1) { --neigung: -1.2deg; }
.werkzeug:nth-child(3n + 2) { --neigung: 0.8deg; }
.werkzeug:nth-child(3n) { --neigung: -0.4deg; }
.werkzeug { transform: rotate(var(--neigung, 0deg)); }
.werkzeug.zeige--wartet { transform: translate3d(0, 28px, 0) rotate(var(--neigung, 0deg)); }
.werkzeug:hover { transform: rotate(calc(var(--neigung, 0deg) * -2)); }
.werkzeug__name { font-size: var(--titel-s); }
@media (max-width: 599px) {
  /* Auf dem Handy zwei Spalten: die Wand bleibt eine Wand, keine lange Liste */
  .werkzeugwand { grid-template-columns: 1fr 1fr; gap: 1.1rem 0.8rem; }
  .werkzeug { padding: 2.1rem 0.9rem 1rem; gap: 0.35rem; }
  .werkzeug .etikett { font-size: 0.6875rem; letter-spacing: 0.1em; }
  .werkzeug__name { font-size: 1.125rem; }
  .werkzeug > p:last-child { font-size: var(--text-s); line-height: 1.4; }
}
.werkzeug--gelb { background: var(--gelb); }
.werkzeug--pink { background: var(--pink); }
.werkzeug--blau { background: var(--blau); }
.werkzeug--gruen { background: var(--gruen); }
.werkzeug--lila { background: var(--lila); }
.werkzeug--orange { background: var(--orange); }

/* ─── 08 Theorie: Themenwolke ──────────────────────────────────────────── */
.themen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.7rem 0.6rem; }
.themen .chip { min-height: 40px; padding: 0.3rem 1rem; font-size: 1rem; }
.themen .chip:nth-child(4n + 1) { transform: rotate(-1.5deg); }
.themen .chip:nth-child(4n + 3) { transform: rotate(1.2deg); }

/* ─── 09 Werkstatt-Pass: Materialleiter ────────────────────────────────── */
.materialleiter { gap: var(--r-4); }
.materialleiter__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 0.75rem;
}
@media (min-width: 560px) and (max-width: 959px), (min-width: 1180px) {
  .materialleiter__liste { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.materialleiter__stufe { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-align: center; }
.materialleiter__stufe .plakette { --plakette: clamp(48px, 40px + 2vw, 64px); margin-bottom: 0.3rem; }
.materialleiter__name { font-weight: 700; }
.materialleiter__ab { font-size: var(--text-xs); color: var(--gedaempft); }

/* ─── 11 Organisation ─────────────────────────────────────────────────── */
.organisation { list-style: none; margin: 0; padding: 0; }
.organisation > .karte { --streifen: var(--blau); padding-top: calc(clamp(1.25rem, 1rem + 1vw, 2rem) + 12px); box-shadow: inset 0 12px 0 var(--streifen), inset 0 15px 0 var(--tinte), var(--schatten); }
.organisation > .karte:nth-child(2) { --streifen: var(--orange); }
.organisation > .karte:nth-child(3) { --streifen: var(--pink); }

/* ─── 12 Einführung ───────────────────────────────────────────────────── */
.einstieg { list-style: none; margin: 0; padding: 0; }
.einstieg__schritt {
  font-family: var(--mono); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--sperrung-etikett); text-transform: uppercase; color: var(--gedaempft);
}
.karte--gelb .einstieg__schritt { color: var(--tinte); }

/* ─── 14 Kontakt ───────────────────────────────────────────────────────── */
.kontakt {
  display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: center;
  padding: clamp(1.75rem, 1rem + 3.5vw, 4rem);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten-gross);
}
@media (min-width: 900px) {
  .kontakt { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}
.kontakt__titel { font-size: var(--titel-m); max-width: 14ch; }
.kontakt .abschnitt-kopf__nummer { box-shadow: 2px 2px 0 var(--weiss); }
.kontakt__aktion { align-items: flex-start; }
.kontakt__adresse {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 1rem 1.25rem;
  border: var(--kontur); border-radius: var(--radius-klein);
  background: var(--weiss); box-shadow: var(--schatten-mittel);
}
.kontakt__mail {
  font-size: clamp(1.125rem, 1rem + 0.8vw, 1.5rem); font-weight: 700; letter-spacing: -0.02em;
  overflow-wrap: anywhere; user-select: all;
}

/* ─── Fuss ─────────────────────────────────────────────────────────────── */
.fuss__adresse { font-style: normal; display: grid; gap: 0.35rem; }

/* lp-werkbank ─────────────────────────────────────────────────────────── */
/* 07 Werkzeuge: Ersatz der Demo «werkbank» (ohne JS), Fussnote, Weg der
   Datei (iPad → Dateimanager → Maschine), weitere Werkzeuge. Die Demo selbst
   hat ihre Stile in landing/demos/werkbank/werkbank.css. */
.werkbank-ersatz { display: grid; gap: 1rem; }
.werkbank-ersatz__bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; max-width: 520px; }
.werkbank-ersatz__bilder > img {
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  border: var(--kontur); border-radius: var(--radius-klein);
}
.werkbank-ersatz__bilder > .werkbank-ersatz__linien { background: #ead3a8; }
.werkbank-ersatz figcaption { max-width: 60ch; font-size: var(--text-s); }
.werkbank__fussnote { margin-top: 1.25rem; max-width: 70ch; font-size: var(--text-s); color: var(--gedaempft); }
.werkbank__fussnote::before { content: 'ⓘ '; content: 'ⓘ ' / ''; }

/* Weg der Datei */
.weg { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.weg__titel { margin-bottom: 1.25rem; }
.weg__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.4rem; }
.weg__station {
  position: relative;
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 1.25rem 1.25rem 1.35rem;
  border: var(--kontur); border-radius: var(--radius);
  background: var(--weiss); box-shadow: var(--schatten-mittel);
}
.weg__station > * { margin: 0; }
.weg__station:not(:last-child)::after {
  /* Pfeil zur nächsten Station (Handy: nach unten) */
  content: '↓'; content: '↓' / '';
  position: absolute; z-index: 1; left: 50%; bottom: -2.05rem;
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem; margin-left: -1.1rem;
  border: var(--kontur-mittel); border-radius: 50%;
  background: var(--gelb); box-shadow: var(--schatten-mini);
  font-family: var(--mono); font-size: 1.1rem; font-weight: 700; line-height: 1;
}
@media (min-width: 900px) {
  .weg__liste { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.45fr); gap: 2.6rem; align-items: stretch; }
  .weg__station:not(:last-child)::after {
    content: '→'; content: '→' / '';
    left: auto; right: -2.05rem; bottom: auto; top: 50%; margin: -1.1rem 0 0;
  }
}
.weg__symbol {
  display: grid; place-items: center; width: 3rem; height: 3rem; flex: none;
  border: var(--kontur); border-radius: 12px;
  background: var(--lila); box-shadow: var(--schatten-mini);
}
.weg__symbol > svg { width: 1.6rem; height: 1.6rem; }
.weg__symbol--klein { width: 2.5rem; height: 2.5rem; border-radius: 10px; background: var(--gelb-hell); }
.weg__symbol--klein > svg { width: 1.35rem; height: 1.35rem; }
.weg__ziele { display: grid; gap: 0.75rem; }
@media (min-width: 480px) { .weg__ziele { grid-template-columns: 1fr 1fr; } }
.weg__ziel {
  display: flex; flex-direction: column; gap: 0.45rem;
  padding: 0.85rem;
  border: var(--kontur-duenn); border-radius: var(--radius-klein);
  background: var(--papier);
}
.weg__ziel > * { margin: 0; }
.weg__ziel-name { font-weight: 700; font-size: var(--text-l); line-height: 1.2; }
.weg__ziel-text { font-size: var(--text-s); line-height: 1.4; }
.weg__formate { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* Weitere Werkzeuge: kleine Lochwand mit Reifegrad */
.werkzeuge-weitere { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.werkzeuge-weitere__titel { margin-bottom: 1.25rem; }
.werkzeugwand--klein { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.werkzeugwand--klein .werkzeug { padding-top: 2.2rem; }
.werkzeugwand--klein .werkzeug__name { font-size: var(--titel-xs); }
.werkzeugwand--klein .werkzeug > p:last-child { font-size: var(--text-s); line-height: 1.45; }
.werkzeug > .reifegrad {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.1rem 0.55rem;
  border: var(--kontur-duenn); border-radius: var(--radius-pille);
  background: var(--weiss);
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.reifegrad::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--gruen); border: 1.5px solid var(--tinte); }
@media (max-width: 599px) {
  .werkzeugwand--klein { grid-template-columns: 1fr 1fr; }
}

/* lp-editor =========================================================

   Abschnitte 05 Erstellen, 11 Organisation, 12 Einführung, 13 Fragen,
   14 Kontakt (Agent lp-editor). Demos: landing/demos/editor/, aemtli/;
   Kopieren-Knopf: landing/demos/kontakt/kontakt.js. Mikro-Animationen laufen
   nur einmal, wenn eine Karte eingeblendet wird (.zeige--da, setzt start.js
   nie bei reduzierter Bewegung); der Ruhezustand ist immer der Endzustand.
   ========================================================================== */

/* ─── 05 Erstellen: Editor-Demo und vier Fakten ────────────────────────── */
.erstellen__demo .demo__ersatz img { display: block; width: 100%; height: auto; border-radius: var(--radius-klein); }
.erstellen__hinweis { margin-top: var(--r-5); max-width: 64ch; font-size: var(--text-s); color: var(--gedaempft); }
.erstellen__fakten {
  list-style: none; margin: clamp(2rem, 1.2rem + 2.5vw, 3.5rem) 0 0; padding: 0;
  display: grid; gap: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr));
}
.erstellen__fakt { display: flex; flex-direction: column; gap: var(--r-2); }
.erstellen__fakt::before {
  /* Massband als Trenner: Striche alle 10 px, jeder fünfte länger */
  content: ''; display: block; height: 12px; margin-bottom: var(--r-2);
  border-top: var(--kontur);
  background:
    repeating-linear-gradient(90deg, var(--tinte) 0 2px, transparent 2px 50px) 0 0 / 100% 11px no-repeat,
    repeating-linear-gradient(90deg, var(--tinte) 0 2px, transparent 2px 10px) 0 0 / 100% 6px no-repeat;
}
.erstellen__fakt p { color: #3b3a33; }

/* ─── 11 Organisation: Karten mit Mikro-Animation ─────────────────────── */
.org {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.1rem, 0.7rem + 1.6vw, 1.9rem);
  grid-template-columns: minmax(0, 1fr);
}
/* Zwei Spalten: Ämtli über die ganze Breite, darunter acht Karten.
   Drei Spalten: Ämtli zwei Spalten breit und zwei Reihen hoch (Text über der
   Demo), rechts daneben die zwei kürzesten Karten. */
@media (min-width: 700px) {
  .org { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .org__karte--aemtli { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .org { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .org__karte--aemtli { grid-column: span 2; grid-row: span 2; }
}
.org__karte {
  position: relative;
  display: flex; flex-direction: column; gap: var(--r-3);
  padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  border: var(--kontur); border-radius: var(--radius);
  background: var(--weiss); box-shadow: var(--schatten);
}
.org__karte > p:last-child { color: #3b3a33; }
.org__titel { font-size: var(--titel-s); }
.org__marken { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.org__marken .etikett { color: var(--gedaempft); }
.org__chip {
  padding: 1px 8px;
  border: var(--kontur-duenn); border-radius: var(--radius-pille);
  background: var(--lila-hell);
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 700; line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase;
}
.org__chip--ki { background: var(--blau-hell); }
.org__klein { font-size: var(--text-s); }

/* Ämtli: breite gelbe Karte, Text neben der Demo */
.org__karte--aemtli { display: grid; gap: var(--r-5); align-items: start; background: var(--gelb); }
.org__karte--aemtli .org__marken .etikett, .org__karte--aemtli p { color: var(--tinte); }
.org__aemtli-text { display: flex; flex-direction: column; gap: var(--r-3); }
@media (min-width: 700px) and (max-width: 1099px) {
  .org__karte--aemtli { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); }
}
@media (min-width: 1100px) {
  .org__karte--aemtli { grid-template-rows: auto 1fr; }
  .org__aemtli-text { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); column-gap: var(--r-6); }
  .org__aemtli-text > .org__marken, .org__aemtli-text > .org__titel { grid-column: 1 / -1; }
  .org__aemtli-text > .org__klein { align-self: end; }
  .org__demo { align-self: end; }
}
.org__demo { width: 100%; }
.org__ersatz-liste { list-style: none; margin: var(--r-3) 0 0; padding: 0; display: grid; gap: 0.4rem; }
.org__ersatz-liste li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.75rem; border: var(--kontur-duenn); border-radius: 10px; background: var(--weiss); }

/* Kleine Bilder oben in den Karten (aria-hidden) */
.org__bild {
  display: flex; align-items: center; justify-content: center;
  height: 96px; padding: 10px 14px; margin-bottom: var(--r-1);
  border: var(--kontur-duenn); border-radius: var(--radius-klein);
  background-color: var(--creme);
  background-image: radial-gradient(circle, rgba(26, 26, 26, 0.12) 1.2px, transparent 1.6px);
  background-size: 16px 16px;
}
.org__bild svg { height: 100%; width: auto; overflow: visible; }
.org__bild text { font-family: var(--mono); fill: var(--tinte); }
.org-foto__bild, .org-spesen__betrag, .org-finger__haken { transform-box: fill-box; transform-origin: center; }
.org-spesen__scan { opacity: 0; }
.org-finger__linien path { stroke-dasharray: 1; }

.org-glossar { align-items: flex-end; padding-bottom: 14px; }
.org-glossar__satz { font-size: 1.0625rem; font-weight: 600; white-space: nowrap; }
.org-glossar__wort {
  position: relative; font-weight: 700;
  text-decoration: underline dotted var(--pink); text-decoration-thickness: 3px; text-underline-offset: 5px;
}
.org-glossar__blase {
  position: absolute; left: -0.4rem; bottom: calc(100% + 10px);
  display: inline-flex; align-items: baseline; gap: 0.45rem;
  padding: 0.3rem 0.65rem;
  border: var(--kontur-duenn); border-radius: 10px;
  background: var(--gelb); box-shadow: var(--schatten-mini);
  font-weight: 700; white-space: nowrap;
  transform-origin: 20% 100%;
}
.org-glossar__blase::after {
  content: ''; position: absolute; left: 1rem; top: 100%;
  width: 10px; height: 10px; margin-top: -4px;
  border-right: var(--kontur-duenn); border-bottom: var(--kontur-duenn);
  background: var(--gelb); transform: rotate(45deg);
}
.org-glossar__sprache { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; }

.org-fokus { flex-direction: column; align-items: stretch; justify-content: center; gap: 5px; }
.org-fokus__zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: min(100%, 190px); margin-inline: auto;
  padding: 2px 3px 2px 3px;
  border: var(--kontur-duenn); border-radius: 8px; background: var(--creme);
}
.org-fokus__kind {
  display: grid; place-items: center; width: 18px; height: 18px;
  border: 1.5px solid var(--tinte); border-radius: 50%; background: var(--lila);
  font-family: var(--mono); font-size: 8px; font-weight: 700;
}
.org-fokus__status { display: grid; }
.org-fokus__status > * {
  grid-area: 1 / 1; padding: 0 7px;
  border: 1.5px solid var(--tinte); border-radius: var(--radius-pille);
  font-family: var(--mono); font-size: 9px; font-weight: 700; line-height: 1.6; letter-spacing: 0.06em; text-transform: uppercase; text-align: center;
}
.org-fokus__offen { background: var(--weiss); opacity: 0; }
.org-fokus__fertig { background: var(--gruen); }
.org-fokus__zeile--offen .org-fokus__offen { opacity: 1; }

.org-rechte { flex-direction: column; align-items: stretch; gap: 5px; }
.org-rechte__zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: min(100%, 190px); margin-inline: auto; padding: 1px 3px 1px 8px;
  border: var(--kontur-duenn); border-radius: 8px; background: var(--weiss);
  font-size: 11px; font-weight: 700; line-height: 1.5;
}
.org-rechte__schalter {
  position: relative; width: 30px; height: 17px; flex: none;
  border: 1.5px solid var(--tinte); border-radius: var(--radius-pille); background: #e9e4d0;
}
.org-rechte__schalter::after {
  content: ''; position: absolute; top: 1.5px; left: 1.5px; width: 11px; height: 11px;
  border: 1.5px solid var(--tinte); border-radius: 50%; background: var(--weiss);
}
.org-rechte__schalter--an { background: var(--gruen); }
.org-rechte__schalter--an::after { transform: translateX(13px); }

@keyframes org-rein { from { opacity: 0; transform: translateX(-46px) rotate(-10deg) scale(0.5); } }
@keyframes org-scan { from { opacity: 1; transform: translateY(0); } 85% { opacity: 1; } to { opacity: 0; transform: translateY(48px); } }
@keyframes org-plopp { from { opacity: 0; transform: scale(0.4); } }
@keyframes org-zeichnen { from { stroke-dashoffset: 1; } }
@keyframes org-an { from { opacity: 0; } }
@keyframes org-aus { from { opacity: 1; } }
@keyframes org-gleiten { from { opacity: 0; transform: translateX(-46px); } 30% { opacity: 1; } }
.zeige--da .org-foto__bild { animation: org-rein 820ms var(--kurve) 700ms backwards; }
.zeige--da .org-spesen__scan { animation: org-scan 1100ms ease-in-out 700ms backwards; }
.zeige--da .org-spesen__betrag { animation: org-plopp 420ms var(--kurve) 1750ms backwards; }
.zeige--da .org-glossar__blase { animation: org-plopp 420ms var(--kurve) 950ms backwards; }
.zeige--da .org-finger__linien path { animation: org-zeichnen 900ms ease-out 700ms backwards; }
.zeige--da .org-finger__linien path:nth-child(2) { animation-delay: 820ms; }
.zeige--da .org-finger__linien path:nth-child(3) { animation-delay: 940ms; }
.zeige--da .org-finger__linien path:nth-child(4) { animation-delay: 1060ms; }
.zeige--da .org-finger__linien path:nth-child(5) { animation-delay: 1180ms; }
.zeige--da .org-finger__haken { animation: org-plopp 420ms var(--kurve) 2000ms backwards; }
.zeige--da .org-uhr__ring { animation: org-zeichnen 1600ms ease-in-out 700ms backwards; }
.zeige--da .org-fokus__zeile:not(.org-fokus__zeile--offen) .org-fokus__fertig { animation: org-an 280ms ease 1000ms backwards; }
.zeige--da .org-fokus__zeile:not(.org-fokus__zeile--offen) .org-fokus__offen { animation: org-aus 280ms ease 1000ms backwards; }
.zeige--da .org-fokus__zeile:nth-child(2) .org-fokus__status > * { animation-delay: 1600ms; }
.zeige--da .org-datei__chip { animation: org-gleiten 900ms var(--kurve) 700ms backwards; }
@keyframes org-schalter { from { background-color: #e9e4d0; } }
@keyframes org-knopf { from { transform: translateX(0); } }
.zeige--da .org-rechte__schalter--spaet { animation: org-schalter 260ms ease 1100ms backwards; }
.zeige--da .org-rechte__schalter--spaet::after { animation: org-knopf 260ms var(--kurve) 1100ms backwards; }
html[data-bewegung='reduziert'] .org__bild *, html[data-bewegung='reduziert'] .org__bild *::after { animation: none !important; }

/* ─── 12 Einführung: vier Schritte und der Pilot ──────────────────────── */
.start-weg {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.1rem, 0.7rem + 1.6vw, 1.9rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) { .start-weg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .start-weg { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.start-weg__schritt {
  position: relative;
  display: flex; flex-direction: column; gap: var(--r-3);
  padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  border: var(--kontur); border-radius: var(--radius);
  background: var(--papier); box-shadow: var(--schatten);
}
.start-weg__schritt--ziel { background: var(--gelb); }
.start-weg__schritt p:last-child { color: #3b3a33; }
.start-weg__schritt--ziel p:last-child { color: var(--tinte); }
.start-weg__kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.start-weg__nummer {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none;
  border: var(--kontur); border-radius: 50%;
  background: var(--weiss); box-shadow: var(--schatten-mini);
  font-family: var(--mono); font-size: 1.125rem; font-weight: 700;
}
.start-weg__wer {
  font-family: var(--mono); font-size: var(--text-xs); font-weight: 700; line-height: 1.3;
  letter-spacing: 0.1em; text-transform: uppercase; text-align: right; color: var(--gedaempft);
}
.start-weg__schritt--ziel .start-weg__wer { color: var(--tinte); }
@media (min-width: 1100px) {
  /* Pfeil zum nächsten Schritt, im Abstand zwischen den Karten */
  .start-weg__schritt:not(:last-child)::after {
    content: '→'; content: '→' / '';
    position: absolute; z-index: 1; top: 1.6rem; right: calc(-0.5 * clamp(1.1rem, 0.7rem + 1.6vw, 1.9rem) - 0.55em);
    font-family: var(--mono); font-size: 1.25rem; font-weight: 700;
  }
}

.pilot {
  display: grid; gap: clamp(1.25rem, 1rem + 2vw, 3rem); align-items: center;
  margin-top: clamp(2.25rem, 1.4rem + 2.5vw, 3.75rem);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border: var(--kontur); border-radius: var(--radius-gross);
  background: var(--tinte); color: var(--creme);
  box-shadow: 8px 8px 0 0 var(--gelb), 8px 8px 0 3px var(--tinte);
}
@media (min-width: 900px) { .pilot { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.pilot__stand { color: var(--gelb); }
.pilot__liste { list-style: none; margin: var(--r-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem clamp(1.25rem, 0.8rem + 1.5vw, 2.25rem); }
.pilot__liste li { display: flex; flex-direction: column; gap: 0.2rem; font-size: var(--text-l); font-weight: 700; }
.pilot__zahl { font-size: clamp(2.25rem, 1.5rem + 3.5vw, 4.5rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.05em; color: var(--gelb); }
.pilot__rund { font-size: 0.42em; letter-spacing: -0.01em; }
.pilot__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--r-3); }
.pilot__titel { font-size: var(--titel-s); font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; }
.pilot__text > p:not(.pilot__titel) { color: #e9e4d0; }
.pilot .knopf { margin-top: var(--r-2); box-shadow: 4px 4px 0 var(--creme); }
.pilot .knopf:hover { box-shadow: 6px 6px 0 var(--creme); }
.pilot :focus-visible { outline-color: var(--gelb); }
.pilot ::selection { background: var(--pink); color: var(--tinte); }

/* ─── 14 Kontakt: Adresse als Text, Kopieren-Knopf ────────────────────── */
.kontakt__titel { max-width: 16ch; }
.kontakt__adresse { align-self: stretch; }
.kontakt__kopieren { align-self: flex-start; margin-top: var(--r-2); }
.kontakt__kopieren[data-zustand='kopiert'] { background: var(--gruen); color: var(--tinte); }
.kontakt__status { font-size: var(--text-s); font-weight: 600; }
.kontakt__klein { font-size: var(--text-s); font-weight: 600; }
/* /lp-editor */
/* lp-pass ──────────────────────────────────────────────────────────────
   08 Theorie, 09 Werkstatt-Pass, 10 Datenschutz. Die Demos dazu stehen in
   landing/demos/labor/, pass/ und sichtbarkeit/ (eigene Stilblätter).
   ───────────────────────────────────────────────────────────────────── */

/* 08 Theorie ---------------------------------------------------------- */
.theorie {
  display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .theorie { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); align-items: start; }
}
.theorie__demo { display: flex; flex-direction: column; gap: var(--r-4); min-width: 0; }
.theorie__unterschrift, .pass__unterschrift { font-size: var(--text-s); color: #3b3a33; max-width: 68ch; }
.theorie__ersatz { display: flex; flex-direction: column; gap: var(--r-3); }
.theorie__ersatz-titel { font-size: var(--titel-s); font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; }
.theorie__ersatz-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; font-size: var(--text-s); font-variant-numeric: tabular-nums; }
.theorie__bloecke { gap: var(--r-3); min-width: 0; }
.massband {
  height: 16px; margin-bottom: var(--r-2);
  border: var(--kontur-duenn); border-radius: 4px;
  background:
    linear-gradient(90deg, var(--tinte) 2px, transparent 2px) 0 100% / 50px 85% repeat-x,
    linear-gradient(90deg, var(--tinte) 1.5px, transparent 1.5px) 0 100% / 10px 40% repeat-x,
    var(--gelb);
}
.theorie__summe { color: var(--gedaempft); font-size: var(--text-s); }
.theorie__gruppen {
  display: grid; gap: var(--r-5) var(--r-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  margin-top: var(--r-2);
}
.theorie__gruppe { display: flex; flex-direction: column; gap: var(--r-2); min-width: 0; }
.theorie__gruppe > .etikett { color: var(--pink-tief); }
.theorie__liste { list-style: none; margin: 0; padding: 0; }
.theorie__liste > li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--r-3);
  padding: 0.4rem 0;
  border-bottom: 1.5px dashed var(--linie-hell);
  font-size: var(--text-s); font-weight: 600; line-height: 1.3;
}
.theorie__dauer { flex: none; font-family: var(--mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; }
.theorie__fakten { list-style: none; margin: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0 0; padding: 0; }
.theorie__fakten > .karte > .etikett { color: var(--gedaempft); }
.theorie__fakten > .karte--gelb > .etikett { color: var(--tinte); }

/* 09 Werkstatt-Pass --------------------------------------------------- */
.pass__neu { --dreh: 4deg; padding: 0.25rem 0.65rem; font-size: 0.6875rem; }
.pass__ersatz { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-5); }
.pass__ersatz-figur { width: clamp(120px, 30%, 200px); height: auto; }
.pass__ersatz > .stapel { flex: 1 1 18rem; }
.pass__unterschrift { margin-top: var(--r-5); color: var(--tinte); }
.pass__unten {
  display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
@media (min-width: 1024px) {
  .pass__unten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.pass__nie { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r-3); }
.pass__nie > li { position: relative; padding-left: 2.2rem; }
.pass__nie > li::before {
  content: '✕'; content: '✕' / '';
  position: absolute; left: 0; top: 0.05em;
  display: grid; place-items: center; width: 1.45rem; height: 1.45rem;
  border: var(--kontur-duenn); border-radius: 50%;
  background: var(--rosa); box-shadow: 2px 2px 0 var(--tinte);
  font-size: 0.75rem; font-weight: 700; line-height: 1;
}
.pass__nie > li:last-child::before { content: '↑'; content: '↑' / ''; background: var(--gruen); }
.materialleiter__text { font-size: var(--text-s); color: var(--gedaempft); }
.materialleiter__bild { width: clamp(48px, 40px + 2vw, 64px); height: auto; margin-bottom: 0.3rem; }
.pass__steuerung { list-style: none; margin: clamp(2rem, 1.2rem + 2vw, 3rem) 0 0; padding: 0; }

/* 10 Datenschutz ------------------------------------------------------ */
.datenschutz {
  display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .datenschutz { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); align-items: start; }
}
#datenschutz .demo[data-demo-geraet='frei'] { box-shadow: 6px 6px 0 var(--gelb); border-color: var(--tinte); color: var(--tinte); }
.datenschutz__ersatz { display: flex; flex-direction: column; gap: var(--r-3); }
.datenschutz__ersatz-liste { margin: 0; display: grid; gap: var(--r-3); }
.datenschutz__ersatz-liste dt { font-weight: 700; }
.datenschutz__ersatz-liste dd { margin: 0; }
.datenschutz__fakten { display: flex; flex-direction: column; gap: var(--r-4); min-width: 0; }
.datenschutz__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r-4); }
.datenschutz__liste > li { position: relative; padding-left: 2rem; color: #e9e4d0; line-height: 1.5; }
.datenschutz__liste > li > strong { color: var(--creme); }
.datenschutz__liste > li::before {
  content: ''; position: absolute; left: 0; top: 0.2em;
  width: 1.2rem; height: 1.2rem;
  border: 2px solid var(--creme); border-radius: 5px;
  background: var(--gelb) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%231a1a1a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.datenschutz__offen { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); max-width: 60rem; color: var(--tinte); display: grid; gap: var(--r-3); padding-top: 1.8rem; }
.datenschutz__offen-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r-3); }
.datenschutz__offen-liste > li { padding-left: 1.1rem; border-left: 3px solid var(--pink); }
/* =============================================================================
   lp-start · Start (Hero), 02 Alltag, 03 Anleitungen
   =============================================================================
   Ergänzungen für die drei Abschnitte mit den Demos «perspektive», «story»
   und «anleitung». Die Demos selbst stylen sich in landing/demos/<name>/.
   Auf dem Handy (unter 600 px) stehen die iPads hoch: mehr Platz für
   Tippziele von 44 px und für zwölf Zeilen Lernstand.
   ============================================================================= */

/* ─── 01 Start ─────────────────────────────────────────────────────────── */
.start__kernsatz {
  max-width: none;
  font-size: clamp(2.2rem, 1rem + 3.6vw, 4.25rem);
}
.start__zeile { display: block; }
.start__demo[data-demo-geraet] { max-width: 700px; }
@media (min-width: 1024px) {
  .start__raster { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .start__demo[data-demo-geraet] { max-width: none; }
}
@media (max-width: 599px) {
  .start__demo[data-demo-geraet] { --bildschirm-verhaeltnis: 820 / 1180; max-width: 360px; }
  /* Ersatz ohne JS: der Nachbau von oben nach unten statt nebeneinander */
  .start__demo .app { font-size: 4cqi; }
  .start__demo .app__leiste { min-height: 13cqi; gap: 2.4cqi; padding: 0 4cqi; }
  .start__demo .app__logo { font-size: 4.4cqi; }
  .start__demo .app__kachel { width: 5.4cqi; height: 5.4cqi; }
  .start__demo .app__klasse, .start__demo .app__zeit { display: none; }
  .start__demo .app__avatar { width: 8cqi; height: 8cqi; font-size: 2.8cqi; }
  .start__demo .app__inhalt { grid-template-columns: minmax(0, 1fr); gap: 4cqi; align-content: start; padding: 5cqi; }
  .start__demo .app__bild { order: -1; width: 60%; justify-self: center; }
  .start__demo .app__text { gap: 3cqi; }
  .start__demo .app__etikett { font-size: 2.8cqi; }
  .start__demo .app__titel { font-size: 8.4cqi; }
  .start__demo .app__beschrieb { font-size: 4cqi; }
  .start__demo .app__fortschritt .balken { height: 3.6cqi; }
  .start__demo .app__zahl { font-size: 3cqi; }
  .start__demo .app__knopf { min-height: 11cqi; padding: 0 4cqi; font-size: 3.8cqi; border-radius: 2.4cqi; }
}

/* ─── 02 Alltag: fünf Momente (Ersatz der Demo «story», ohne JS) ───────── */
.alltag__demo { max-width: 1120px; }
/* Die Geschichte steht frei im Abschnitt, ohne eigene Karte (die Takte sind Karten) */
.alltag__demo[data-demo-geraet='frei'] { border: 0; background: none; box-shadow: none; }
.alltag__demo[data-demo-geraet='frei'] > .demo__ersatz { padding: 0; }
.takte {
  position: relative;
  max-width: 820px;
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1rem, 0.7rem + 1.2vw, 1.5rem);
}
.takte::before {
  /* Massband-Linie zwischen den Momenten */
  content: ''; position: absolute; left: 1.35rem; top: 1rem; bottom: 1rem; width: 3px;
  background: repeating-linear-gradient(var(--tinte) 0 10px, transparent 10px 18px);
}
.takt {
  position: relative;
  display: flex; flex-direction: column; gap: 0.55rem;
  margin-left: 3.4rem;
  padding: 1.1rem 1.25rem 1.2rem;
  border: var(--kontur); border-radius: var(--radius);
  background: var(--weiss); box-shadow: var(--schatten-mittel);
}
.takt__zeit {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.takt__nummer {
  position: absolute; left: -3.4rem; top: 0.9rem;
  display: grid; place-items: center; width: 2.7rem; height: 2.7rem;
  border: var(--kontur); border-radius: 50%;
  background: var(--gelb); box-shadow: var(--schatten-mini);
  font-size: 1rem; letter-spacing: 0;
}
.takt__titel { font-size: var(--titel-s); }
.takt__text { max-width: 60ch; }
.takt__nutzen { max-width: 60ch; font-size: var(--text-s); color: #3b3a33; }

/* ─── 03 Anleitungen: Demo gross, daneben der Nutzen ───────────────────── */
.anleitungen__raster { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); align-items: start; }
@media (min-width: 1100px) {
  .anleitungen__raster { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
}
.anleitungen__buehne { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.anleitungen__demo[data-demo-geraet] { max-width: 820px; }
@media (max-width: 599px) {
  .anleitungen__demo[data-demo-geraet] { --bildschirm-verhaeltnis: 820 / 1180; max-width: 440px; }
}
.anleitungen__fussnote { max-width: 62ch; color: var(--gedaempft); text-align: center; margin-inline: auto; }
.anleitungen__nutzen { --stapel: var(--r-4); }
.anleitungen__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; counter-reset: nutzen; }
.anleitungen__punkt {
  position: relative;
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0.85rem 1rem 0.9rem 3.4rem;
  border: var(--kontur-mittel); border-radius: var(--radius-klein);
  background: var(--papier);
  counter-increment: nutzen;
}
.anleitungen__punkt::before {
  content: counter(nutzen);
  position: absolute; left: 0.8rem; top: 0.85rem;
  display: grid; place-items: center; width: 1.85rem; height: 1.85rem;
  border: var(--kontur-mittel); border-radius: 50%;
  background: var(--gelb);
  font-family: var(--mono); font-size: 0.8125rem; font-weight: 700;
}
.anleitungen__punkt--stopp::before { background: #fed7aa; }
.anleitungen__marke {
  font-family: var(--mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gedaempft);
}
@media (min-width: 600px) and (max-width: 1099px) {
  .anleitungen__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* lp-klasse ──────────────────────────────────────────────────────────────
   04 Überblick (Demo «klasse») und 06 Bewerten (Demo «bewerten»).
   Beide Demos bringen eigene Geräte und Fenster mit: Der Demo-Behälter
   (Gerät «frei») verzichtet hier auf seine Karte, die Demo steht frei im
   Abschnitt. --demo-innen: 0 nimmt den Innenabstand der Demo weg, den sie
   im Prüfstand auf der Karte braucht. */
.lk-demo.demo[data-demo-geraet='frei'] {
  --demo-innen: 0px;
  max-width: 1200px;
  margin-top: 2.25rem;
  border: 0; border-radius: 0;
  background: none; box-shadow: none;
}
.lk-demo.demo[data-demo-geraet='frei'] > .demo__ersatz { padding: 0; }
.lk-demo.demo::before { top: -2.1rem; right: 0; }
.lk-probieren {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 0.8rem;
  max-width: 44rem; margin: calc(-1 * var(--r-5)) auto 0;
  font-weight: 600; line-height: 1.4; text-align: center; text-wrap: balance;
}
.lk-probieren .sticker { flex: none; }
.lk-fakten { list-style: none; margin: clamp(3rem, 2rem + 3vw, 4.5rem) 0 0; padding: 0; }
.lk-fakten .karte { gap: var(--r-2); }
.lk-fakten .etikett { color: var(--gedaempft); }
/* Ersatz ohne JS: die stehenden Nachbauten */
.lk-ersatz.geraet--laptop { margin-block: 0 26px; }
.lk-ersatz .app__wartet { background: #ffe4bf; }
.lk-ersatz .app__wartet .app__status { background: var(--orange); }
.lk-ersatz.bewertung { margin-block: 0; }
/* Platz reservieren, damit nichts springt: Der Ersatz ist viel kleiner als
   die Demo. Ohne Reserve wüchse die Seite beim Laden der Demo (einen
   Bildschirm vorher) um bis zu 1700 px, und ein Sprung zu #bewerten landete
   daneben. Mit JS (html[data-bewegung], setzt start.js) sind Ersatz und Demo
   darum gleich hoch: je Breite W der Demo (Container «bildschirm») die
   gemessene grösste Höhe über alle Zustände plus 16 px, Chromium und WebKit
   gleich. Ohne JS bleibt der Ersatz kompakt. Nach Änderungen an einer Demo:
   test/e2e/landing-klasse.e2e.mjs prüft, dass die Demo in ihre Reserve passt. */
html[data-bewegung] .lk-demo[data-demo='klasse'] :is(.lk-platz, .kl) { min-height: 1700px; }
@container bildschirm (min-width: 360px) { html[data-bewegung] .lk-demo[data-demo='klasse'] :is(.lk-platz, .kl) { min-height: 1630px; } }
@container bildschirm (min-width: 400px) { html[data-bewegung] .lk-demo[data-demo='klasse'] :is(.lk-platz, .kl) { min-height: 1570px; } }
@container bildschirm (min-width: 480px) { html[data-bewegung] .lk-demo[data-demo='klasse'] :is(.lk-platz, .kl) { min-height: 1380px; } }
@container bildschirm (min-width: 600px) { html[data-bewegung] .lk-demo[data-demo='klasse'] :is(.lk-platz, .kl) { min-height: 1420px; } }
@container bildschirm (min-width: 760px) { html[data-bewegung] .lk-demo[data-demo='klasse'] :is(.lk-platz, .kl) { min-height: 1250px; } }
@container bildschirm (min-width: 900px) { html[data-bewegung] .lk-demo[data-demo='klasse'] :is(.lk-platz, .kl) { min-height: 855px; } }
html[data-bewegung] .lk-demo[data-demo='bewerten'] :is(.lk-platz, .bw) { min-height: 2180px; }
@container bildschirm (min-width: 360px) { html[data-bewegung] .lk-demo[data-demo='bewerten'] :is(.lk-platz, .bw) { min-height: 2060px; } }
@container bildschirm (min-width: 400px) { html[data-bewegung] .lk-demo[data-demo='bewerten'] :is(.lk-platz, .bw) { min-height: 1970px; } }
@container bildschirm (min-width: 430px) { html[data-bewegung] .lk-demo[data-demo='bewerten'] :is(.lk-platz, .bw) { min-height: 1830px; } }
@container bildschirm (min-width: 472px) { html[data-bewegung] .lk-demo[data-demo='bewerten'] :is(.lk-platz, .bw) { min-height: 1735px; } }
@container bildschirm (min-width: 640px) { html[data-bewegung] .lk-demo[data-demo='bewerten'] :is(.lk-platz, .bw) { min-height: 1515px; } }
@container bildschirm (min-width: 680px) { html[data-bewegung] .lk-demo[data-demo='bewerten'] :is(.lk-platz, .bw) { min-height: 1315px; } }
@container bildschirm (min-width: 1120px) { html[data-bewegung] .lk-demo[data-demo='bewerten'] :is(.lk-platz, .bw) { min-height: 922px; } }