/* Anpacker · Seite
   Handfest-hanseatisch: Kalk, Teer, Backstein, Kupfergrün, Signalgelb.
   Farbe trägt Bedeutung: Signalgelb = Handlung, Kupfergrün = erledigt/Entwarnung,
   Backstein = die Last (Peak). Harte Kanten (Radius 0, 21st.dev „Industrial
   Field Manual"), Linien in Tinte statt Schatten. */

:root {
  --kalk: #eeede9;
  --kalk-tief: #e6e4de;
  --teer: #1b1a19;
  --teer-weich: #4a4643;
  --backstein: #9a3b22;
  --backstein-tief: #6f2a17;
  --kupfer: #2d6a58;
  --kupfer-tief: #1f4d40;
  --signal: #f2b31b;

  --sc-canvas: var(--kalk);
  --sc-surface: #f7f6f3;
  --sc-ink: var(--teer);
  --sc-ink-soft: #57524e;
  --sc-accent: var(--signal);
  --sc-accent-ink: var(--teer);
  --sc-font-display: "Geologica", system-ui, sans-serif;
  --sc-font-text: "Geologica", system-ui, sans-serif;
  --sc-font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --sc-r-sm: 0; --sc-r-md: 0; --sc-r-lg: 0;
  --kopf-h: 3.5rem;
  --linie: 2px solid var(--teer);
}

body { font-weight: 350; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; box-shadow: 0 0 0 6px var(--teer); }

.sprung {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--signal); color: var(--teer); padding: 0.7rem 1rem;
  font-weight: 600; text-decoration: none;
}
.sprung:focus { top: 1rem; }

/* ---------------------------------------------------------------- Kopf -- */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  height: var(--kopf-h);
  display: flex; align-items: center; gap: 1.25rem;
  padding-inline: var(--sc-gutter);
  background: var(--kalk);
  border-bottom: var(--linie);
}
.kopf__marke {
  display: flex; align-items: center; gap: 0.55rem;
  font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em;
  text-decoration: none; color: var(--teer); min-height: 44px;
}
/* Das Bildzeichen der Anpacker (LKW mit Haus, aus ihrem Logo freigestellt,
   scripts/bestand-bilder.mjs) als Maske: dieselbe Datei in jeder Farbe. */
.zeichen {
  display: inline-block; flex: none; aspect-ratio: 456 / 290; /* Maße von marke.png, scripts/bestand-bilder.mjs */
  background: currentColor;
  -webkit-mask: url("img/marke.png") center / contain no-repeat;
  mask: url("img/marke.png") center / contain no-repeat;
}
.kopf__zeichen { height: 1.45rem; color: var(--backstein); }
.kopf__status {
  margin: 0 0 0 auto;
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  color: var(--sc-ink-soft);
  display: flex; align-items: center; gap: 0.5rem;
}
.kopf__status::before {
  content: ""; width: 0.6rem; height: 0.6rem; background: var(--teer-weich);
}
.kopf__status[data-offen="true"]::before { background: var(--kupfer); }
.kopf__tel {
  font-family: var(--sc-font-mono); font-weight: 600; font-size: var(--sc-t-sm);
  text-decoration: none; color: var(--teer);
  padding: 0.5rem 0.8rem; min-height: 44px; display: inline-flex; align-items: center; border: var(--linie); background: var(--signal);
  white-space: nowrap;
}
.kopf__tel:hover { background: var(--teer); color: var(--signal); }

/* --------------------------------------------------------------- Knöpfe -- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0.75rem 1.25rem;
  font-family: var(--sc-font-mono); font-weight: 600; font-size: var(--sc-t-sm);
  text-decoration: none; cursor: pointer;
  border: 2px solid currentColor; background: transparent;
  transition: background-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out);
}
.knopf:active { transform: translateY(1px); }
.knopf--signal { background: var(--signal); color: var(--teer); border-color: var(--teer); box-shadow: 4px 4px 0 var(--teer); }
.knopf--signal:hover { background: var(--teer); color: var(--signal); }
.knopf--linie { color: var(--teer); }
.knopf--linie:hover { background: var(--teer); color: var(--kalk); }
.knopf--hell { background: var(--kalk); color: var(--teer); border-color: var(--kalk); }
.knopf--hell:hover { background: var(--signal); border-color: var(--signal); }

.ki-hinweis, .foto-hinweis {
  position: absolute; right: 0.6rem; bottom: 0.6rem; z-index: 3;
  font-family: var(--sc-font-mono); font-size: 0.72rem; line-height: 1.2;
  background: var(--teer); color: var(--kalk); padding: 0.3rem 0.5rem;
}
/* Echte Fotos der Anpacker tragen die Quelle hell, damit sie sich auf einen
   Blick von den KI-Bildern unterscheiden. */
.foto-hinweis { background: var(--kalk); color: var(--teer); border: 1px solid var(--teer); }

/* ------------------------------------------------------------- 1 · Tor -- */
.tor {
  background: var(--kalk);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: minmax(0, 1fr);
  padding-top: var(--kopf-h);
}
.tor__text {
  align-self: center;
  padding: var(--sc-6) var(--sc-gutter);
  max-width: 40rem;
}
.tor__titel {
  font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5.6rem);
  font-weight: 800; letter-spacing: -0.045em; line-height: 0.92;
}
.tor__titel span { display: block; color: var(--backstein); }
.tor__lede { font-size: var(--sc-t-lg); line-height: 1.42; margin: var(--sc-5) 0 0; max-width: 34ch; text-wrap: pretty; }
.tor__handlung { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--sc-6); }
.tor__beleg {
  margin: var(--sc-6) 0 0; padding-top: var(--sc-4); border-top: var(--linie);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-sm);
}
.tor__beleg strong { font-size: 1.35em; }
.tor__beleg span { display: block; color: var(--sc-ink-soft); font-size: var(--sc-t-xs); margin-top: 0.2rem; }
.tor__bild { position: relative; margin: 0; overflow: hidden; min-height: 0; border-left: var(--linie); }
.tor__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
/* Das Rolltor: gezeichnete Lamellen, die am Scrollrad hochfahren (seite.js
   setzt --tor 0..1 aus --sc-p des Akts). */
.tor__rolltor {
  position: absolute; inset: 0; z-index: 2;
  background:
    repeating-linear-gradient(180deg,
      #d9dad7 0 34px, #b9bbb8 34px 36px, #eceeeb 36px 38px, #cfd1ce 38px 40px);
  transform: translateY(calc(var(--tor, 0) * -101%));
  box-shadow: inset 0 -10px 0 #8d8f8c;
}
.tor__griff {
  position: absolute; left: 50%; bottom: 22px; width: 90px; height: 12px;
  translate: -50% 0; background: var(--teer);
}

/* ---------------------------------------------------- 2 · Was steht an? -- */
.fracht { background: var(--kalk-tief); display: flex; align-items: center; padding-top: var(--kopf-h); }
.fracht__schiene { gap: clamp(1rem, 2vw, 2rem); padding-inline: var(--sc-gutter); align-items: stretch; }
.fracht__kopf { flex: 0 0 min(26rem, 80vw); align-self: center; }
.fracht__titel { font-size: var(--sc-t-3xl); font-weight: 800; letter-spacing: -0.04em; }
.fracht__kopf p { font-size: var(--sc-t-lg); line-height: 1.42; margin: var(--sc-4) 0 0; max-width: 28ch; }
.fracht__foto { position: relative; margin: var(--sc-5) 0 0; border: var(--linie); box-shadow: 6px 6px 0 var(--teer); background: var(--teer); }
.fracht__foto img { display: block; width: 100%; height: auto; }
.kiste {
  flex: 0 0 clamp(17rem, 28vw, 24rem);
  display: flex; flex-direction: column;
  background: #c79a64;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.035) 0 2px, transparent 2px 7px);
  border: var(--linie);
  padding: 1.25rem;
  color: var(--teer);
}
.kiste__marke {
  margin: 0; padding-bottom: 0.6rem; border-bottom: 1px dashed var(--teer);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.04em; text-transform: uppercase;
}
.kiste__name {
  margin: 1rem 0 0.9rem; font-size: var(--sc-t-2xl); font-weight: 900;
  letter-spacing: -0.03em; line-height: 0.95; text-transform: uppercase;
  hyphens: manual;
}
.kiste__inhalt {
  list-style: none; margin: 0; padding: 0.9rem; flex: 1;
  background: #f7f6f3; border: 1px solid var(--teer);
  font-size: var(--sc-t-sm); line-height: 1.45;
}
.kiste__inhalt li + li { margin-top: 0.45rem; padding-top: 0.45rem; border-top: 1px solid #d8d5cf; }
/* Der Rest der Leistungsliste von anpacker-hl.de, klein wie ein Beipackzettel. */
.kiste__mehr {
  margin: 0.7rem 0 0; font-size: var(--sc-t-xs); line-height: 1.45;
}
.kiste__mehr span {
  font-family: var(--sc-font-mono); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  margin-right: 0.3rem;
}
.kiste__knopf {
  margin-top: 1rem; min-height: 3rem; cursor: pointer;
  font-family: var(--sc-font-mono); font-weight: 600;
  background: var(--teer); color: var(--kalk); border: 0;
}
.kiste__knopf:hover { background: var(--signal); color: var(--teer); }
.kiste__knopf[aria-pressed="true"] { background: var(--kupfer); color: #fff; }
.kiste__knopf[aria-pressed="true"]::before { content: "✓ "; }

/* -------------------------------------------------------- 3 · Wie eng? -- */
.eng { background: var(--teer); color: var(--kalk); }
.eng__raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sc-8); align-items: center; }
.eng__bild { position: relative; margin: 0; overflow: hidden; aspect-ratio: 16 / 10; border: 2px solid var(--kalk); }
.eng__bild img { width: 100%; height: 112%; object-fit: cover; margin-top: -6%; }
.eng__titel, .weg__titel, .mit__titel { font-size: var(--sc-t-3xl); font-weight: 800; letter-spacing: -0.04em; }
.eng__text p { font-size: var(--sc-t-lg); line-height: 1.5; max-width: 36ch; color: #dcd9d3; }
.haken { list-style: none; margin: 0; padding: 0; font-size: var(--sc-t-base); }
.haken li { padding: 0.55rem 0 0.55rem 1.8rem; border-top: 1px solid #4a4643; position: relative; }
.haken li::before { content: ""; position: absolute; left: 0; top: 0.95rem; width: 0.9rem; height: 0.5rem; border-left: 3px solid var(--signal); border-bottom: 3px solid var(--signal); rotate: -45deg; }

/* -------------------------------------------------------- 4 · Wie weit? -- */
.weg { background: var(--kalk); }
.weg__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sc-8); align-items: center; }
.weg__text p { font-size: var(--sc-t-lg); line-height: 1.5; max-width: 36ch; }
.weg__merk { font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); padding-left: 0.9rem; border-left: 4px solid var(--signal); max-width: 36ch; }
.weg__bilder { position: relative; padding-bottom: var(--sc-8); }
.weg__bild { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border: var(--linie); }
.weg__bild img { width: 100%; height: 100%; object-fit: cover; }
/* Der aufgelegte Abzug: weißer Rand, Quelle im Rand statt auf dem Bild. */
.weg__lkw {
  position: absolute; z-index: 4; left: -7%; bottom: 0; width: 46%; margin: 0;
  background: #fbfaf7; padding: 0.5rem 0.5rem 0; border: var(--linie);
  box-shadow: 6px 6px 0 var(--teer); rotate: -2deg;
}
.weg__lkw img { display: block; width: 100%; height: auto; }
.weg__lkw figcaption { font-family: var(--sc-font-mono); font-size: 0.72rem; padding: 0.35rem 0 0.45rem; }

/* ------------------------------------------------- 5 · Treppengiebel -- */
.giebel {
  background: var(--backstein); color: #fbf3ee;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center; gap: var(--sc-6);
  padding: calc(var(--kopf-h) + var(--sc-5)) var(--sc-gutter) var(--sc-5);
}
.giebel__titel { font-size: var(--sc-t-3xl); font-weight: 800; letter-spacing: -0.04em; max-width: 12ch; }
.giebel__satz { font-size: var(--sc-t-lg); margin: var(--sc-4) 0 0; max-width: 28ch; }
.giebel__zaehler {
  margin: var(--sc-6) 0 0; font-family: var(--sc-font-mono); font-size: var(--sc-t-lg);
  display: inline-block; padding: 0.5rem 0.8rem; background: var(--teer); color: var(--kalk);
}
.giebel__zaehler [data-giebel-rest] { font-weight: 600; color: var(--signal); font-size: 1.4em; }
.giebel__zaehler.is-unten { background: var(--kupfer); }
.giebel__zaehler.is-unten [data-giebel-rest] { color: #fff; }
.giebel__wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: var(--sc-5); }
.giebel__wahl-titel { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); text-transform: uppercase; letter-spacing: 0.06em; margin-right: 0.4rem; }
.giebel__wahl button {
  min-width: 2.9rem; min-height: 2.9rem; padding: 0 0.6rem; cursor: pointer;
  font-family: var(--sc-font-mono); font-weight: 600; font-size: var(--sc-t-sm);
  background: transparent; color: #fbf3ee; border: 2px solid #fbf3ee;
}
.giebel__wahl button:hover { background: #fbf3ee; color: var(--backstein-tief); }
.giebel__wahl button[aria-pressed="true"] { background: var(--signal); color: var(--teer); border-color: var(--teer); }
.giebel__zitat {
  margin: var(--sc-6) 0 0; padding: 1.1rem 1.25rem; max-width: 34rem;
  background: var(--kalk); color: var(--teer); border: var(--linie);
  box-shadow: 6px 6px 0 var(--teer);
}
.giebel__zitat p { margin: 0; font-size: var(--sc-t-lg); line-height: 1.4; font-weight: 450; }
.giebel__zitat footer { margin-top: 0.6rem; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); }
.giebel__bild { margin: 0; position: relative; height: min(78svh, 44rem, calc(100svh - var(--kopf-h) - 2rem)); }
.giebel__svg { width: 100%; height: 100%; overflow: visible; }
.giebel__schild {
  position: absolute; left: 4%; top: 6%; margin: 0;
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); font-weight: 600;
  background: var(--signal); color: var(--teer); padding: 0.35rem 0.6rem; border: 2px solid var(--teer);
  rotate: -3deg;
}
/* SVG-Teile, gezeichnet von giebel.js */
.g-wand { fill: #7c2f1b; stroke: var(--teer); stroke-width: 3; stroke-linejoin: miter; }
.g-fuge { stroke: #642511; stroke-width: 1; }
.g-fenster { fill: #2b2624; stroke: #e9ddd3; stroke-width: 3; }
.g-blende { fill: #5a2111; }
.g-stufe { fill: none; stroke: #fbf3ee; stroke-width: 4; stroke-linecap: square; }
.g-stufe.is-aus { stroke: #b76a53; stroke-dasharray: 3 6; }
.g-etikett { font-family: "IBM Plex Mono", monospace; font-size: 15px; font-weight: 600; fill: #fbf3ee; }
.g-etikett.is-aus { fill: #c98a74; }
.g-boden { stroke: var(--teer); stroke-width: 4; }
.g-lkw { fill: #eceeeb; stroke: var(--teer); stroke-width: 3; }
.g-rad { fill: var(--teer); }
.g-kiste { fill: #c79a64; stroke: var(--teer); stroke-width: 2.5; }
.g-klebe { stroke: #8c6a3f; stroke-width: 3; }

/* ------------------------------------------------------ 6 · Was mit? -- */
.mit { background: var(--kalk); }
.mit__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sc-7) var(--sc-8); align-items: start; }
.mit__kopf p { font-size: var(--sc-t-lg); line-height: 1.5; max-width: 36ch; }
.mit__wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; grid-row: span 2; }
.wahl {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem;
  text-align: left; cursor: pointer; min-height: 5rem;
  padding: 0.9rem 1rem 0.9rem 3rem; position: relative;
  background: #f7f6f3; border: var(--linie); color: var(--teer);
}
.wahl strong { font-weight: 700; font-size: var(--sc-t-base); line-height: 1.2; }
.wahl span { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.35; }
.wahl::before {
  content: ""; position: absolute; left: 1rem; top: 1.05rem; width: 1.15rem; height: 1.15rem;
  border: 2px solid var(--teer); background: #fff;
}
.wahl:hover { background: #fff; }
.wahl[aria-pressed="true"] { background: #dfece7; border-color: var(--kupfer-tief); }
.wahl[aria-pressed="true"]::before { background: var(--kupfer); border-color: var(--kupfer-tief); box-shadow: inset 0 0 0 3px #dfece7; }
.mit__bild { position: relative; margin: 0; border: var(--linie); aspect-ratio: 16 / 10; overflow: hidden; }
.mit__bild img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------- 7 · Stimmen -- */
.stimmen { background: var(--teer); color: var(--kalk); }
.stimmen__zahl { margin: 0; font-size: var(--sc-t-2xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; max-width: 22ch; }
.stimmen__zahl .sc-nums { font-size: 1.9em; color: var(--signal); font-weight: 900; }
.stimmen__stand { margin: var(--sc-3) 0 0; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); color: #b9b4ad; }
.stimmen__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-5); margin-top: var(--sc-8); }
.stimme { margin: 0; padding-top: var(--sc-4); border-top: 3px solid var(--signal); }
.stimme p { margin: 0; font-size: var(--sc-t-lg); line-height: 1.42; }
.stimme footer { margin-top: var(--sc-3); font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); color: #b9b4ad; }

/* ------------------------------------------------------- 8 · Schluss -- */
.schluss {
  background: var(--kupfer); color: #fff;
  display: flex; flex-direction: column;
  padding: calc(var(--kopf-h) + var(--sc-4)) var(--sc-gutter) 0;
}
.schluss__inhalt {
  flex: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--sc-7); align-items: center; min-height: 0;
}
.schluss__titel { font-size: var(--sc-t-3xl); font-weight: 800; letter-spacing: -0.04em; }
.zettel {
  background: #f7f6f3; color: var(--teer); border: var(--linie);
  box-shadow: 8px 8px 0 var(--teer);
  padding: 1.25rem 1.4rem; max-height: calc(100svh - var(--kopf-h) - 10rem); overflow: auto;
}
.zettel__kopf { margin: 0 0 0.8rem; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); text-transform: uppercase; letter-spacing: 0.05em; padding-bottom: 0.6rem; border-bottom: 1px dashed var(--teer); }
.zettel__zeilen { font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); }
.zettel__zeilen dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; }
.zettel__zeilen dt { padding: 0.45rem 1rem 0.45rem 0; color: var(--sc-ink-soft); border-bottom: 1px solid #dedad3; }
.zettel__zeilen dd { margin: 0; padding: 0.45rem 0; border-bottom: 1px solid #dedad3; font-weight: 600; overflow-wrap: anywhere; }
.zettel__leer { margin: 0; padding: 0.6rem 0; font-family: var(--sc-font-text); border-bottom: 1px solid #dedad3; }
.zettel__stand { margin: 0.9rem 0 0; font-size: var(--sc-t-sm); line-height: 1.45; color: var(--sc-ink-soft); max-width: 46ch; }
.zettel__handlung { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.1rem; }
.knopf--linie-dunkel { color: var(--teer); }
.knopf--linie-dunkel:hover { background: var(--teer); color: var(--kalk); }

/* Ablauf neben dem Laufzettel: drei belegte Schritte, nummeriert, weil es eine
   Reihenfolge ist. */
.ablauf { list-style: none; counter-reset: schritt; margin: var(--sc-6) 0 0; padding: 0; display: grid; gap: 0.9rem; max-width: 28rem; }
.ablauf li { counter-increment: schritt; display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.8rem; align-items: baseline; font-size: var(--sc-t-base); line-height: 1.45; }
.ablauf li::before { content: counter(schritt); font-family: var(--sc-font-mono); font-weight: 600; text-align: center; padding: 0.15rem 0; border: 2px solid #fff; }
.ablauf strong { font-weight: 700; }
/* Abgesang mit dem Spruch von ihren Wagen. */
.schluss__gruss {
  display: flex; align-items: center; gap: 0.9rem; max-width: 28rem;
  margin: var(--sc-7) 0 0; padding-top: var(--sc-5); border-top: 2px solid rgba(255, 255, 255, 0.55);
  font-size: var(--sc-t-base); font-weight: 600; line-height: 1.35;
}
.schluss__zeichen { height: 2.4rem; color: #fff; }

.fuss {
  border-top: 2px solid #fff; margin-top: var(--sc-5);
  padding: var(--sc-4) 0 max(var(--sc-4), env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; align-items: baseline;
  font-size: var(--sc-t-sm);
}
.fuss p { margin: 0; }
.fuss a { color: #fff; }
.fuss__recht { display: flex; gap: 1.1rem; margin-left: auto; }
.fuss__recht { flex-wrap: wrap; align-items: center; }
.fuss__recht a { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); min-height: 40px; display: inline-flex; align-items: center; }

/* ------------------------------------------------ niedrige Laptops -- */
@media (min-width: 761px) and (max-height: 800px) {
  .tor__text { padding-block: var(--sc-4); }
  .tor__titel { font-size: clamp(2.4rem, 1.2rem + 3.2vw, 4rem); }
  .tor__lede { font-size: var(--sc-t-base); margin-top: var(--sc-3); }
  .tor__handlung { margin-top: var(--sc-4); }
  .tor__beleg { margin-top: var(--sc-4); padding-top: var(--sc-3); }
  .giebel { gap: var(--sc-5); padding-block: calc(var(--kopf-h) + var(--sc-3)) var(--sc-3); }
  .giebel__titel { font-size: clamp(2.2rem, 1.2rem + 2.6vw, 3.4rem); }
  .giebel__satz { font-size: var(--sc-t-base); margin-top: var(--sc-2); }
  .giebel__zaehler { margin-top: var(--sc-4); font-size: var(--sc-t-base); }
  .giebel__wahl { margin-top: var(--sc-3); }
  .giebel__wahl button { min-width: 2.6rem; min-height: 2.6rem; }
  .giebel__zitat { margin-top: var(--sc-4); padding: 0.8rem 1rem; }
  .giebel__zitat p { font-size: var(--sc-t-base); }
  .schluss__titel { font-size: clamp(2.2rem, 1.2rem + 2.6vw, 3.4rem); }
  .ablauf { margin-top: var(--sc-4); gap: 0.6rem; }
  .zettel { padding: 1rem 1.2rem; }
  .schluss__gruss { margin-top: var(--sc-4); padding-top: var(--sc-3); }
  .fracht__foto { margin-top: var(--sc-4); }
}
/* Frachtstücke bis 760 px Höhe: die höchste Karte (Haushaltsauflösung) setzt
   die Höhe aller, und die gepinnte Bühne schneidet ab, was darüber hinausgeht.
   Gemessen 28.09.: 573 px Karte in 544 px Bühne bei 1280x600, 696 in 634 bei
   1024x690. Verdichten statt kürzen; nur schmale Laptops verlieren die
   Außerdem-Zeile (pruefung/lagen.mjs). */
@media (min-width: 761px) and (max-height: 760px) {
  .kiste__marke { display: none; }
  .kiste { padding: 1rem; }
  .kiste__name { margin: 0 0 0.6rem; }
  .kiste__inhalt { padding: 0.7rem 0.8rem; line-height: 1.38; }
  .kiste__inhalt li + li { margin-top: 0.3rem; padding-top: 0.3rem; }
  .kiste__mehr { margin-top: 0.5rem; }
  .kiste__knopf { margin-top: 0.7rem; min-height: 2.75rem; }
  .fracht__foto { max-width: 20rem; }
}
@media (min-width: 761px) and (max-width: 1200px) and (max-height: 760px) {
  .kiste__mehr { display: none; }
}
@media (min-width: 761px) and (max-height: 620px) {
  .tor__titel { font-size: clamp(2.2rem, 1rem + 2.6vw, 3.2rem); }
  .tor__lede { font-size: 0.95rem; }
}

/* Tablet hochkant (768x1024): zwei Spalten ließen dem Aufmacher-Text 320 px,
   die Überschrift rutschte unter den Kopf. Wie am Telefon: Bild oben, Text
   darunter. */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  .tor { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .tor__bild { grid-row: 1; border-left: 0; border-bottom: var(--linie); min-height: 30svh; }
  .tor__text { grid-row: 2; max-width: none; padding: var(--sc-5) var(--sc-gutter) var(--sc-6); }
  .tor__lede { max-width: 52ch; }
}

@media (min-width: 761px) and (max-height: 700px) {
  .tor__beleg { display: none; }
  .giebel__satz { display: none; }
  .schluss__gruss { display: none; }
}

/* ------------------------------------------------ Telefon quer -- */
/* 844×390 bekommt das Zweispalten-Layout, aber nur ~340 px Bühne. Bis
   Fassung 2 ragten Aufmacher, Frachtstücke und Giebel über den Rand, und im
   Schluss lag der Fuß über dem Ablauf. Hier wird verdichtet. Ausgeblendet
   werden der Öffnungsstatus im Kopf (die Zeiten stehen im Fuß), der zweite
   Telefon-Knopf (die Nummer steht im Kopf), das Transporter-Foto, die
   Frachtstück-Etiketten und die Außerdem-Zeilen. */
@media (min-width: 761px) and (max-height: 500px) {
  :root { --kopf-h: 3rem; }
  .kopf__status { display: none; }
  .kopf__tel { margin-left: auto; }
  .knopf { min-height: 2.5rem; padding: 0.5rem 0.9rem; font-size: 0.8rem; }
  /* Die Nummer steht im Kopf; im Aufmacher bleibt der eine Knopf. */
  .tor__handlung .knopf--linie { display: none; }

  .tor__text { padding-block: 0.75rem; }
  .tor__titel { font-size: 2rem; }
  .tor__lede { font-size: 0.85rem; line-height: 1.35; margin-top: 0.6rem; max-width: none; }
  .tor__handlung { margin-top: 0.75rem; gap: 0.5rem; }

  .fracht__kopf p { font-size: 0.9rem; margin-top: 0.5rem; }
  .fracht__titel { font-size: 2rem; }
  .fracht__foto, .kiste__marke, .kiste__mehr { display: none; }
  .kiste { flex-basis: 20rem; padding: 0.7rem 0.8rem; }
  .kiste__name { font-size: 1.3rem; margin: 0 0 0.5rem; }
  .kiste__inhalt { padding: 0.5rem 0.7rem; font-size: 0.8rem; line-height: 1.35; }
  .kiste__inhalt li + li { margin-top: 0.25rem; padding-top: 0.25rem; }
  .kiste__knopf { margin-top: 0.5rem; min-height: 2.75rem; }

  .giebel { gap: var(--sc-4); padding-block: calc(var(--kopf-h) + 0.5rem) 0.5rem; }
  .giebel__titel { font-size: 1.6rem; max-width: 16ch; }
  .giebel__zaehler { margin-top: 0.5rem; font-size: 0.85rem; padding: 0.3rem 0.6rem; }
  .giebel__wahl { margin-top: 0.5rem; }
  .giebel__wahl-titel { display: none; }
  .giebel__wahl button { min-width: 2.75rem; min-height: 2.75rem; }
  .giebel__zitat { margin-top: 0.6rem; padding: 0.5rem 0.7rem; box-shadow: 4px 4px 0 var(--teer); }
  .giebel__zitat p { font-size: 0.78rem; line-height: 1.35; }
  .giebel__zitat footer { margin-top: 0.25rem; }

  .schluss { padding-top: calc(var(--kopf-h) + 0.5rem); }
  .schluss__inhalt { gap: var(--sc-5); }
  .schluss__titel { font-size: 1.8rem; }
  .ablauf { margin-top: 0.6rem; gap: 0.35rem; }
  .ablauf li { font-size: 0.85rem; line-height: 1.35; grid-template-columns: 1.9rem 1fr; gap: 0.6rem; }
  .zettel { padding: 0.7rem 0.9rem; box-shadow: 5px 5px 0 var(--teer); max-height: none; }
  .zettel__kopf { display: none; }
  .zettel__leer { padding: 0.3rem 0; font-size: 0.85rem; }
  .zettel__stand { font-size: 0.78rem; margin-top: 0.4rem; }
  .zettel__handlung { margin-top: 0.6rem; gap: 0.5rem; }
  .fuss { margin-top: 0.6rem; padding-block: 0.4rem; font-size: 0.72rem; gap: 0.1rem 1rem; }
  .fuss__recht a { min-height: 32px; }
}

/* ---------------------------------------------------------- Telefon -- */
@media (max-width: 760px) {
  :root { --kopf-h: 3.25rem; }
  .kopf { gap: 0.6rem; }
  .kopf__status { display: none; }
  .kopf__tel { margin-left: auto; font-size: 0.8rem; padding: 0.45rem 0.6rem; }

  .tor { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .tor__bild { grid-row: 1; border-left: 0; border-bottom: var(--linie); }
  .tor__text { grid-row: 2; padding: var(--sc-4) var(--sc-gutter) var(--sc-5); }
  .tor__titel { font-size: clamp(2.3rem, 10.5vw, 3.2rem); }
  .tor__lede { font-size: 0.95rem; line-height: 1.4; margin-top: var(--sc-3); }
  .tor { grid-template-rows: minmax(0, 1fr) auto; }
  .tor__bild { min-height: 30svh; }
  .tor__handlung { margin-top: var(--sc-4); }
  .tor__beleg { display: none; }
  .tor__handlung .knopf--linie { display: none; }

  .eng__raster, .weg__raster, .mit__raster { grid-template-columns: 1fr; gap: var(--sc-6); }
  .eng__bild, .weg__bild { aspect-ratio: 4 / 5; }
  .weg__bilder { order: -1; padding-bottom: 0; }
  .weg__lkw { position: relative; left: auto; bottom: auto; width: 72%; margin: -3.5rem 0 0 auto; rotate: 2deg; }
  /* Der Abzug deckt unten rechts ab, dort säße sonst der KI-Hinweis
     (HOCH im Review 28.09.: das KI-Bild stand ohne Kennzeichnung da). Oben
     LINKS, weil die Blende von links aufzieht: rechts oben erschien der
     Hinweis erst, wenn das Bild schon fast aus dem Schirm war. */
  .weg__bild .ki-hinweis { top: 0.6rem; bottom: auto; left: 0.6rem; right: auto; }
  .fracht__foto { margin-top: var(--sc-4); box-shadow: 4px 4px 0 var(--teer); }
  .kopf__zeichen { height: 1.3rem; }
  .mit__wahl { grid-template-columns: 1fr; grid-row: auto; }
  .stimmen__raster { grid-template-columns: 1fr; }

  .giebel { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-items: stretch; gap: var(--sc-3); padding-top: calc(var(--kopf-h) + var(--sc-3)); }
  .giebel__titel { font-size: clamp(2rem, 9vw, 2.6rem); }
  .giebel__satz { font-size: 1rem; margin-top: var(--sc-2); }
  .giebel__zaehler { margin-top: var(--sc-3); font-size: 1rem; }
  .giebel__text { align-self: start; }
  .giebel__bild { height: 100%; min-height: 0; }
  .giebel__zitat { margin-top: var(--sc-3); padding: 0.7rem 0.9rem; box-shadow: 4px 4px 0 var(--teer); }
  .giebel__zitat p { font-size: 0.9rem; line-height: 1.35; }
  .giebel__zitat footer { margin-top: 0.3rem; }
  .giebel__satz { display: none; }
  .giebel__wahl-titel { flex: 1 0 100%; }

  .schluss__inhalt { grid-template-columns: 1fr; gap: var(--sc-4); align-content: start; padding-top: var(--sc-3); }
  .schluss__titel { font-size: clamp(2rem, 9vw, 2.6rem); }
  .zettel { max-height: none; }
  .fuss { font-size: 0.8rem; }
  /* Am Telefon trägt die Bühne Titel, Laufzettel und Fuß; der Ablauf steht
     dort als eine Zeile im Laufzettel-Hinweis, nicht als Liste. */
  .ablauf, .schluss__gruss { display: none; }
  .zettel__kopf { display: none; }
  .zettel { padding: 1rem; }
  .zettel__stand { font-size: 0.85rem; margin-top: 0.6rem; }
  .zettel__handlung { margin-top: 0.8rem; gap: 0.5rem; }
  .zettel__handlung .knopf { flex: 1 1 100%; min-height: 2.9rem; }
  .fuss { gap: 0.2rem 1rem; padding-top: var(--sc-3); }
  .fuss__zeiten { display: none; }
  .giebel__schild { left: auto; right: 2%; top: 2%; }
  .giebel__wahl { margin-top: var(--sc-3); }
  .giebel__wahl button { min-width: 2.75rem; min-height: 2.75rem; }
  .fuss__recht { margin-left: 0; }
}