/* regiezettel.de — neue Website (Richtung „Faltblatt“, Stand 11.10.2026).
   Die ganze Seite ist ein Blatt Papier mit Knicken: Jeder Abschnitt ist eine
   Reihe von Feldern (.feld) in einem Bogen (.bogen). Pro Abschnitt höchstens
   ein Feld in vollem Gelb. Der gezeigte Regiezettel bleibt schwarz auf weiß.
   Schriften liegen in assets/fonts, nichts wird von fremden Servern geladen. */

@font-face { font-family: "Anybody"; font-style: normal; font-weight: 100 900; font-stretch: 50% 150%; font-display: swap; src: url("../fonts/anybody-latin.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../fonts/schibsted-grotesk-latin.woff2") format("woff2"); }

:root {
  --gelb: #ffd21f;
  --gelb-zart: #fff3b8;
  --tinte: #16150f;
  --grund: #fffbe6;
  --papier: #ffffff;
  --papier-ton: #fbf8e9;
  --leise: #4a4630;
  --knick: #c9c198;
  --linie: #e6dfb4;
  --rand: #8a8358;
  --stift: #23408f;
  --gruen: #1f7a4d;
  --gruen-zart: #e2f1e8;
  --rot: #b4271d;

  --titel: "Anybody", "Arial Black", Arial, sans-serif;
  --text: "Schibsted Grotesk", "Segoe UI", Arial, sans-serif;
  --breite-titel: 108%;

  /* Werte, die sich später mit dem Regler-Panel verschieben lassen */
  --seite-max: 1220px;
  --seite-rand: clamp(16px, 3vw, 32px);
  --feld-innen: clamp(22px, 3.2vw, 46px);
  --abschnitt-abstand: clamp(44px, 9vh, 110px);
  --kopf-hoehe: 68px;
  --h1-groesse: clamp(1.85rem, 3.9vw, 3.2rem);
  --h2-groesse: clamp(1.3rem, 2.2vw, 1.8rem);
  --raus: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-hoehe) + 14px); }
body { margin: 0; background: var(--grund); color: var(--tinte); font: 17px/1.55 var(--text); overflow-x: clip; }
img, svg { max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-thickness: 2.5px; }
::selection { background: var(--gelb); color: var(--tinte); }
:focus-visible { outline: 3px solid var(--stift); outline-offset: 3px; border-radius: 4px; }
.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung { position: absolute; left: 12px; top: -60px; background: var(--tinte); color: var(--grund); padding: 10px 16px; border-radius: 8px; z-index: 20; }
.sprung:focus { top: 12px; }

/* Überschriften stehen in Großbuchstaben: In der Schrift Anybody sind Großbuchstaben kaum höher als
   Kleinbuchstaben, gemischte Schreibweise liest sich deshalb wie ein Tippfehler (Nico, 11.10.2026). */
h1, h2, h3 { font-family: var(--titel); font-weight: 700; font-stretch: var(--breite-titel); letter-spacing: 0.005em; text-transform: uppercase; margin: 0; text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
h1 { font-size: var(--h1-groesse); line-height: 1.06; font-weight: 800; }
.satz { display: block; }
h2 { font-size: var(--h2-groesse); line-height: 1.14; }
h3 { font-size: 1rem; line-height: 1.25; }
p { margin: 0 0 1em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }
.lauf { font-size: 1.1rem; color: var(--leise); }
main.seite { padding-top: clamp(10px, 2.4vw, 30px); }
.klein { font-size: 0.9rem; color: var(--leise); }

.seite { max-width: var(--seite-max); margin: 0 auto; padding: 0 var(--seite-rand); }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 26px; border-radius: 999px; border: 1.5px solid var(--tinte); background: var(--gelb); color: var(--tinte); font: 600 1rem/1.2 var(--text); text-decoration: none; cursor: pointer; transition: transform 0.18s var(--raus), box-shadow 0.18s var(--raus), background-color 0.18s; }
.knopf:hover { transform: translateY(-2px); box-shadow: 0 10px 16px -10px rgba(22, 21, 15, 0.45); }
.knopf:active { transform: none; box-shadow: none; }
.knopf.hell { background: transparent; }
.knopf.hell:hover { background: var(--papier); }
.knopf.dunkel { background: var(--tinte); color: var(--grund); }
.knopf.dunkel:hover { box-shadow: 0 10px 16px -10px rgba(22, 21, 15, 0.55); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Kopfzeile ---------- */
.kopf { position: sticky; top: 0; z-index: 10; background: var(--grund); border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.kopf.gescrollt { border-color: var(--linie); }
.kopf .seite { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.marke { display: inline-flex; align-items: center; gap: 10px; font: 800 1.2rem/1 var(--titel); font-stretch: var(--breite-titel); text-decoration: none; }
.marke svg { width: 34px; height: 34px; flex: none; }
.menue { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); font-size: 0.98rem; }
.menue a { text-decoration: none; padding: 6px 0; }
.menue a:hover { text-decoration: underline; }
.menue .knopf { min-height: 42px; padding: 8px 18px; }
.menue .knopf:hover { text-decoration: none; }
.menue-knopf { display: none; }

/* ---------- Bogen und Felder ---------- */
.bogen { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0 0 var(--abschnitt-abstand); box-shadow: 0 24px 34px -18px rgba(22, 21, 15, 0.22); scroll-margin-top: 88px; perspective: 1800px; overflow: hidden; background: var(--papier); }
.feld { position: relative; grid-column: span 2; background: var(--papier); padding: var(--feld-innen); border-left: 1px dashed var(--knick); border-top: 1px dashed var(--knick); margin: -1px 0 0 -1px; min-width: 0; }
.feld.s3 { grid-column: span 3; }
.feld.s4 { grid-column: span 4; }
.feld.s6 { grid-column: span 6; }
.feld.ton { background: var(--papier-ton); }
.feld.gelb { background: var(--gelb); }
.feld.dunkel { background: var(--tinte); color: var(--grund); border-color: #3a382d; }
.feld.dunkel .lauf, .feld.dunkel .klein { color: #d8d2b2; }
.feld > h2 + p, .feld > h1 + p { margin-top: 0.9em; }
.feld > h3 + p { margin-top: 0.5em; }
.feld .knopfreihe { margin-top: 1.4em; }
.mitte { display: flex; flex-direction: column; justify-content: center; }

/* Aufklappen beim Scrollen. Ohne JavaScript und bei „weniger Bewegung“ liegt alles offen da. */
@media (prefers-reduced-motion: no-preference) {
  .js .bogen:not(.offen) .feld { opacity: 0; transform: rotateY(-38deg); }
  .js .bogen:not(.offen) .feld.von-oben { transform: rotateX(38deg); }
  .js .bogen .feld { transform-origin: left center; }
  .js .bogen .feld.von-oben { transform-origin: center top; }
  .js .bogen.offen .feld { opacity: 1; transform: none; transition: transform 0.55s var(--raus), opacity 0.3s ease-out; transition-delay: calc(var(--i, 0) * 70ms); }
  .js .bogen.offen h1 { animation: aufgehen 1.1s var(--raus) both; }
}
@keyframes aufgehen { from { font-stretch: 55%; } to { font-stretch: var(--breite-titel); } }

/* ---------- Einstieg mit Bild ---------- */
.held .feld:first-child { padding-block: clamp(28px, 4vw, 52px); }
.buehne { display: grid; place-items: center; position: relative; padding-block: clamp(28px, 4vw, 52px); min-height: 440px; }
.buehne .handy { width: min(270px, 78%); transform: rotate(-3deg); box-shadow: 0 26px 40px -22px rgba(22, 21, 15, 0.55); }
.karte { position: absolute; right: 5%; bottom: 7%; width: min(210px, 48%); background: #fff; border: 1px solid #cfcab0; padding: 14px 14px 12px; transform: rotate(4deg); box-shadow: 0 18px 28px -16px rgba(22, 21, 15, 0.5); font-size: 0.86rem; }
.karte .zettelkopf b { font-size: 0.9rem; }
.karte .reihe { font-size: 0.84rem; padding: 6px 0; }
.karte-fuss { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-weight: 600; line-height: 1.2; }
.karte-fuss .haken { width: 40px; }
.app-karte { display: block; padding: 10px 12px; }
.app-karte + .app-karte { margin-top: 8px; }
.app-karte > b { display: block; font-weight: 600; }
.app-karte > small { color: var(--leise); }
.app-liste.app-karte .app-tage { display: grid; margin: 10px 0 0; padding: 0; border-bottom: 0; }
.app-karte .app-knopf { margin-top: 8px; }
.app-tage span.voll { background: var(--gruen-zart); border-color: #b9dcc8; color: var(--gruen); }
.app-tage span.heute { border: 2px solid var(--tinte); color: var(--tinte); }
.app-knopf { display: grid; place-items: center; height: 36px; border-radius: 10px; border: 1.5px solid var(--tinte); background: var(--gelb); font-weight: 600; }
.js .bogen .karte .haken, .js .bogen.offen .karte .haken { opacity: 1; transform: none; transition: none; }

/* ---------- Fotos ----------
   Ein Feld mit .mit-bild wird ganz vom Foto gefüllt. Fehlt die Datei noch, zeigt der Platzhalter,
   welches Bild hierhin kommt (Liste: website-neubau/bilder/bildliste.md). */
.feld.mit-bild { padding: 0; position: relative; overflow: hidden; min-height: clamp(300px, 46vw, 520px); }
.bildfeld { position: absolute; inset: 0; margin: 0; }
.bildfeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bildplatz { display: none; }
.bildfeld.fehlt img { display: none; }
.bildfeld.fehlt { background: repeating-linear-gradient(135deg, #efe9c9 0 14px, #f7f2d8 14px 28px); }
.bildfeld.fehlt .bildplatz { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 6px; padding: 24px; font-weight: 700; color: var(--leise); }
.bildplatz small { display: block; font-weight: 400; font-size: 0.86rem; max-width: 30ch; }
.schild.auf-bild { position: absolute; left: 0; bottom: clamp(16px, 3vw, 30px); background: var(--papier); padding: 8px 14px 8px 0; z-index: 1; }
.buehne.mit-bild { min-height: clamp(300px, min(48vw, 40svh), 600px); }
.buehne.mit-bild .karte { z-index: 1; }
/* E-Mail und Schild stehen im normalen Fluss über dem Foto, damit das Feld mitwächst und sich nichts überdeckt. */
.feld.mail-feld { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(18px, 3vw, 30px); padding: clamp(14px, 3vw, 34px) clamp(14px, 3vw, 34px) clamp(16px, 3vw, 30px); }
.mail-feld .mail { position: relative; z-index: 1; }
.mail-feld .schild.auf-bild { position: relative; left: auto; bottom: auto; align-self: flex-start; margin-left: calc(-1 * clamp(14px, 3vw, 34px)); }
.dokfoto img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid #999; }
/* Wie im echten Regiebericht-PDF: Aufnahme-Datum und Uhrzeit als kleines weißes Schild unten links im Foto. */
.dokbild { position: relative; display: block; }
.fotozeit { position: absolute; left: 4px; bottom: 4px; background: rgba(255, 255, 255, 0.88); color: #111; font-size: 0.62rem; line-height: 1; padding: 3px 5px; white-space: nowrap; }
.dokfoto.fehlt .dokbild { display: none; }
.dokfoto svg { display: none !important; }
.dokfoto.fehlt img { display: none; }
.dokfoto.fehlt svg { display: block !important; }

/* ---------- Beschriftungslinie (aus dem Bauplan) ---------- */
.schild { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.95rem; line-height: 1.25; }
.schild::before { content: ""; flex: 0 0 clamp(28px, 5vw, 64px); height: 1.5px; background: currentColor; }
.schild.links { flex-direction: row-reverse; text-align: right; }

/* ---------- Der Regiezettel (immer schwarz auf weiß) ---------- */
.zettelkopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--tinte); margin-bottom: 4px; }
.zettelkopf b { font: 800 1.15rem/1.1 var(--titel); font-stretch: var(--breite-titel); }
.zettelkopf span { font-size: 0.85rem; color: var(--leise); text-align: right; white-space: nowrap; }
.zettelkopf b { white-space: nowrap; }
.reihe { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--linie); font-size: 0.98rem; }
.reihe b { font-weight: 600; white-space: nowrap; }
.unterschrift { width: min(190px, 60%); }
.unterschrift svg { display: block; width: 100%; height: 50px; }
.unterschrift path { fill: none; stroke: var(--stift); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.unterschrift small { display: block; border-top: 1px solid var(--tinte); padding-top: 3px; font-size: 0.82rem; color: var(--leise); }
.haken { width: clamp(62px, 8vw, 88px); height: auto; flex: none; }
.bestaetigt { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
@media (prefers-reduced-motion: no-preference) {
  .js .bogen .unterschrift path { stroke-dashoffset: 1; }
  .js .bogen.offen .unterschrift path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(0.6, 0, 0.3, 1) 1.1s; }
  .js .bogen .haken, .js .bogen .schild.spaet { opacity: 0; transform: scale(1.7) rotate(-16deg); }
  .js .bogen .schild.spaet { transform: translateX(-10px); }
  .js .bogen.offen .haken { opacity: 1; transform: none; transition: transform 0.5s var(--raus) 2.1s, opacity 0.2s 2.1s; }
  .js .bogen.offen .schild.spaet { opacity: 1; transform: none; transition: transform 0.5s var(--raus) 2.4s, opacity 0.3s 2.4s; }
}

/* ---------- Problem: der Zettel vom Block ---------- */
.block-zettel { background: var(--papier); border: 1px solid var(--knick); padding: 20px 20px 16px; transform: rotate(-2.5deg); max-width: 330px; box-shadow: 0 14px 22px -14px rgba(22, 21, 15, 0.4); }
.block-zettel svg { display: block; width: 100%; height: auto; }
.block-zettel path { fill: none; stroke: #6d6a5c; stroke-width: 2; stroke-linecap: round; }
.block-zettel .leer { border-top: 1px solid var(--tinte); margin-top: 22px; padding-top: 3px; font-size: 0.82rem; color: var(--leise); }
.wo-fehlt { margin: 16px 0 0 34%; color: var(--rot); }

/* ---------- Ablauf ---------- */
.schritt { display: flex; flex-direction: column; }
.schritt .zahl { font: 800 clamp(2.4rem, 4vw, 3.4rem)/0.85 var(--titel); font-stretch: 70%; margin-bottom: 14px; }
.schritt h3 { margin-bottom: 0.45em; }
.schritt p { font-size: 1rem; color: var(--leise); }
.feld.gelb .schritt p, .feld.gelb.schritt p { color: var(--tinte); }
.weg { grid-column: 1 / -1; height: 10px; background: var(--papier); position: relative; z-index: 1; }
.weg::before { content: ""; position: absolute; left: 0; top: 3px; height: 4px; width: 100%; background: var(--linie); }
.weg::after { content: ""; position: absolute; left: 0; top: 3px; height: 4px; width: calc(var(--fortschritt, 0) * 100%); background: var(--tinte); transition: width 0.2s linear; }

/* ---------- E-Mail an den Empfänger ---------- */
.mail { background: var(--papier); border: 1px solid var(--knick); border-radius: 12px; overflow: hidden; font-size: 0.95rem; box-shadow: 0 16px 26px -18px rgba(22, 21, 15, 0.45); }
.mail .kopfdaten { padding: 14px 18px; border-bottom: 1px solid var(--linie); color: var(--leise); }
.mail .kopfdaten b { color: var(--tinte); font-weight: 600; display: block; font-size: 1.02rem; }
.mail .inhalt { padding: 16px 18px 18px; }
.mail .anhang { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--linie); border-radius: 8px; padding: 6px 10px; margin: 6px 0 14px; font-size: 0.9rem; }
.mail .anhang svg { width: 16px; height: 16px; }
.mail .wahl { display: flex; gap: 10px; flex-wrap: wrap; }
.mail .wahl span { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 20px; border-radius: 10px; font-weight: 600; border: 1.5px solid var(--tinte); }
.mail .wahl .ja { background: var(--tinte); color: #fff; }

/* ---------- Dokument ---------- */
.dokument { background: #fff; border: 1px solid #cfcab0; padding: clamp(16px, 2.4vw, 28px); font-size: 0.9rem; color: #111; box-shadow: 0 18px 30px -22px rgba(22, 21, 15, 0.45); }
/* Aufbau wie das echte PDF der App (client/lib/pdfFormular.ts, Stand 13.10.2026): Seite 1 mit Kopf, Raster,
   Stunden, Material, Arbeitsleistung, zwei Unterschriftsfeldern und Fußzeile; Seite 2 mit Fotos und Verlauf. */
.dok-stapel { display: grid; gap: 14px; }
.dok-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 10px; }
.dok-kopf strong { display: block; font: 800 1.35rem/1.15 var(--text); letter-spacing: 0.01em; }
.dok-kopf small { color: #555; font-size: 0.76rem; }
.dok-firma { text-align: right; }
.dok-firma > div { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.dok-firma b { font-weight: 700; }
.dok-logo { width: 96px; height: 38px; border: 1px dashed #999; display: grid; place-items: center; font-size: 0.6rem; color: #666; flex: none; text-align: center; line-height: 1.1; }
.dokument.seite2 .dok-kopf { border-bottom: 2px solid #111; }
.dok-raster { border: 1px solid #111; }
.dok-zeile { display: grid; grid-template-columns: minmax(96px, 26%) 1fr; border-top: 1px solid #111; }
.dok-zeile:first-child { border-top: 0; }
.dok-zeile.drei { grid-template-columns: auto minmax(34px, 12%) auto 1fr 1fr; }
.dok-zeile > b { background: #f1f1f1; font-weight: 600; font-size: 0.8rem; padding: 5px 7px; border-right: 1px solid #111; }
.dok-zeile > span { padding: 5px 7px; font-size: 0.84rem; border-right: 1px solid #111; min-width: 0; }
.dok-zeile > span:last-child { border-right: 0; }
.dok-kasten { border: 1px solid #111; padding: 8px 9px; min-height: 3.4em; }
.dok-verweis { font-size: 0.72rem; color: #555; margin: 5px 0 12px; }
.dok-unterschriften { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dok-unterschriften > div { display: flex; flex-direction: column; }
.dok-uinhalt { flex: 1; min-height: 5.6em; font-size: 0.84rem; line-height: 1.35; padding: 0 2px 4px; }
.dok-uinhalt img { display: block; height: 34px; width: auto; margin: 2px 0 0 18%; }
.dok-uinhalt small { display: block; color: #555; font-size: 0.68rem; line-height: 1.3; }
.dok-unterschriften em { display: block; border-top: 1.5px solid #111; padding-top: 3px; font-style: normal; font-size: 0.68rem; color: #555; }
.dok-fuss { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; margin-top: 12px; padding-top: 6px; border-top: 1px solid #ccc; font-size: 0.62rem; color: #555; }
.dok-fuss b { display: inline-flex; align-items: center; gap: 4px; color: #111; font-size: 0.72rem; white-space: nowrap; }
.dok-fuss b svg { width: 13px; height: 13px; }
.dok-fuss i { grid-column: 1 / -1; text-align: center; font-style: normal; }
.stunden.material td:not(:first-child), .stunden.material th:not(:first-child) { width: 18%; }
.stunden.verlauf td, .stunden.verlauf th { text-align: left; }
.stunden .nr { width: 2.4em; }
.dok-stamm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; padding: 10px 0; border-bottom: 1px solid #bbb; }
.dok-stamm small, .dok-ab { color: #555; display: block; font-size: 0.78rem; }
.dok-ab { font-weight: 700; color: #111; margin: 12px 0 3px; font-size: 0.86rem; }
.tab-rahmen { overflow-x: auto; }
table.stunden { width: 100%; border-collapse: collapse; min-width: 420px; }
.stunden th, .stunden td { border: 1px solid #999; padding: 6px 7px; text-align: center; }
.stunden th { font-weight: 600; background: #f3f3f3; font-size: 0.82rem; }
.stunden td:first-child, .stunden th:first-child { text-align: left; }
.dok-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dok-fotos figure { margin: 0; }
.dok-fotos svg { display: block; width: 100%; height: auto; border: 1px solid #999; }
.dok-fotos figcaption { font-size: 0.72rem; color: #555; margin-top: 2px; }
.dok-verlauf { margin-top: 12px; padding-top: 8px; border-top: 1px solid #bbb; font-size: 0.8rem; color: #444; }
.punkte { list-style: none; padding: 0; margin: 1.2em 0 0; display: grid; gap: 10px; }
.punkte li { display: flex; gap: 10px; align-items: baseline; }
.punkte li::before { content: ""; flex: 0 0 22px; height: 1.5px; background: var(--tinte); transform: translateY(-5px); }

/* ---------- Sprachen ---------- */
.uebersetzung { display: grid; gap: 12px; }
.sprechfeld { border: 1px solid var(--rand); border-radius: 12px; padding: 12px 14px; background: var(--papier); font-size: 1rem; }
.sprechfeld small { display: block; font-size: 0.8rem; color: var(--leise); margin-bottom: 3px; }
.sprechfeld.de { border: 2px solid var(--tinte); }
.pfeil-runter { width: 26px; height: 26px; margin: -2px auto; display: block; }

/* ---------- App-Bilder ---------- */
.handy { width: min(300px, 100%); background: #23221c; border-radius: 34px; padding: 8px; margin: 0 auto; }
.schirm { background: var(--grund); border-radius: 27px; overflow: hidden; font-size: 0.82rem; line-height: 1.4; }
.app-leiste { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--linie); font-weight: 600; line-height: 1.2; }
.app-leiste small { display: block; font-weight: 400; color: var(--leise); }
.app-leiste svg { width: 18px; height: 18px; flex: none; }
.app-inhalt { padding: 14px; }
.app-schritt { font-weight: 600; color: var(--leise); font-size: 0.75rem; margin-bottom: 5px; }
.app-balken { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin-bottom: 12px; }
.app-balken i { height: 4px; border-radius: 2px; background: var(--linie); }
.app-balken i.an { background: var(--tinte); }
.app-frage { font: 800 1.15rem/1.15 var(--titel); font-stretch: var(--breite-titel); margin-bottom: 10px; }
.app-tage { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: 12px; }
.app-tage span { height: 34px; border-radius: 8px; border: 1px solid var(--linie); background: #fff; display: grid; place-items: center; font-weight: 600; color: var(--leise); }
.app-tage span.an { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.app-liste { background: #fff; border: 1px solid var(--linie); border-radius: 12px; }
.app-liste div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 8px 12px; border-bottom: 1px solid var(--linie); }
.app-liste div:last-child { border-bottom: 0; }
.app-liste b { font-weight: 600; display: block; }
.app-liste small { color: var(--leise); }
.zaehler { display: inline-flex; border: 1px solid var(--rand); border-radius: 8px; overflow: hidden; }
.zaehler span { width: 30px; height: 32px; display: grid; place-items: center; font-size: 1rem; }
.zaehler b { width: 44px; height: 32px; display: grid !important; place-items: center; border-left: 1px solid var(--linie); border-right: 1px solid var(--linie); }
.app-fuss { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; padding: 10px 14px 14px; background: #fff; border-top: 1px solid var(--linie); }
.app-fuss span { height: 38px; border-radius: 10px; border: 1.5px solid var(--tinte); display: grid; place-items: center; font-weight: 600; font-size: 0.9rem; }
.app-fuss .ja { background: var(--gelb); }
.fenster { background: var(--grund); border: 6px solid #23221c; border-radius: 12px; overflow: hidden; font-size: 0.84rem; }
.fenster-nav { display: flex; align-items: center; gap: 18px; padding: 0 14px; height: 42px; background: #fff; border-bottom: 1px solid var(--linie); }
.fenster-nav b { font: 800 0.95rem/1 var(--titel); font-stretch: var(--breite-titel); display: inline-flex; align-items: center; gap: 6px; }
.fenster-nav b svg { width: 20px; height: 20px; }
.fenster-nav span { color: var(--leise); height: 42px; display: inline-flex; align-items: center; border-bottom: 3px solid transparent; }
.fenster-nav span.an { color: var(--tinte); font-weight: 600; border-color: var(--gelb); }
.fenster-inhalt { padding: 14px; }
.fenster-titel { font: 800 1.2rem/1.1 var(--titel); font-stretch: var(--breite-titel); margin-bottom: 10px; }
.reiter { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.reiter span { padding: 5px 10px; border-radius: 8px; border: 1px solid var(--linie); background: #fff; font-weight: 600; color: var(--leise); }
.reiter span.an { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.liste-rahmen { background: #fff; border: 1px solid var(--linie); border-radius: 10px; overflow-x: auto; }
table.liste { width: 100%; border-collapse: collapse; min-width: 520px; }
.liste th { text-align: left; font-size: 0.78rem; font-weight: 600; color: var(--leise); padding: 8px 12px; border-bottom: 1px solid var(--linie); white-space: nowrap; }
.liste td { padding: 9px 12px; border-bottom: 1px solid var(--linie); }
.liste tr:last-child td { border-bottom: 0; }
.liste td b { font-weight: 600; }
.liste .r { text-align: right; }
.marke-s { display: inline-block; padding: 3px 9px; border-radius: 7px; font-size: 0.78rem; font-weight: 600; background: var(--gelb-zart); color: #5c4500; white-space: nowrap; }
.knopf-s { display: inline-block; padding: 5px 12px; border-radius: 8px; border: 1.5px solid var(--tinte); background: var(--gelb); font-weight: 600; }
.beispiel { font-size: 0.82rem; color: var(--leise); margin-top: 10px; }

/* ---------- Preise ---------- */
.stufe { display: flex; flex-direction: column; }
.stufe h3, .stufe .stufenname { font-size: 1rem; line-height: 1.25; }
.stufe .preis { font: 800 clamp(1.9rem, 3vw, 2.5rem)/1 var(--titel); font-stretch: 80%; margin: 14px 0 2px; white-space: nowrap; }
.stufe .preis small { font: 400 0.95rem/1 var(--text); font-stretch: 100%; }
.stufe .projekte { font-weight: 600; margin-bottom: 8px; }
.stufe p { font-size: 0.95rem; color: var(--leise); flex: 1; }
.feld.gelb.stufe p { color: var(--tinte); }
.stufe .knopf { margin-top: 18px; align-self: flex-start; }

/* ---------- Fragen ---------- */
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen details:first-of-type { border-top: 1px solid var(--linie); }
.fragen summary { list-style: none; cursor: pointer; padding: 16px 44px 16px 0; font-weight: 600; font-size: 1.08rem; position: relative; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; border-right: 2px solid var(--tinte); border-bottom: 2px solid var(--tinte); transform: translateY(-70%) rotate(45deg); transition: transform 0.25s var(--raus); }
.fragen details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.fragen summary:hover { background: var(--papier-ton); }
.fragen details p { padding: 0 0 18px; color: var(--leise); max-width: 70ch; }

/* ---------- Formular ---------- */
.formular { display: grid; gap: 16px; max-width: 620px; }
.formular label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 5px; }
.formular input, .formular select, .formular textarea { width: 100%; font: inherit; color: var(--tinte); background: var(--papier); border: 1px solid var(--rand); border-radius: 10px; padding: 11px 13px; min-height: 48px; }
.formular textarea { min-height: 150px; resize: vertical; }
.formular input::placeholder, .formular textarea::placeholder { color: #6b6750; }
.formular .tipp { font-size: 0.85rem; color: var(--leise); margin-top: 4px; }
.formular .fehler { font-size: 0.9rem; color: var(--rot); font-weight: 600; margin-top: 5px; display: none; }
.formular .falsch input, .formular .falsch textarea { border: 2px solid var(--rot); }
.formular .falsch .fehler { display: block; }
.formular .falle { position: absolute; left: -9999px; }
.meldung { padding: 16px 18px; border-radius: 12px; font-weight: 600; display: none; }
.meldung.ok { display: block; background: var(--gruen-zart); color: var(--gruen); }
.meldung.schlecht { display: block; background: #fbe9e7; color: var(--rot); }
.rechtstext { font-size: 0.86rem; color: var(--leise); max-width: 70ch; }
.rechtstext code { font: inherit; }

/* ---------- Fließtext-Seiten (Recht, Vorlage) ---------- */
.prosa h1 { font-size: var(--h2-groesse); margin-bottom: 0.4em; }
.prosa p, .prosa li { max-width: 74ch; }
.prosa h2 { font-size: 1.6rem; margin: 1.6em 0 0.5em; }
.prosa h3 { margin: 1.3em 0 0.4em; }
.prosa ul { padding-left: 1.2em; max-width: 62ch; }
/* Tabellen in den Rechtstexten: am Handy bricht der Text in den Zellen um, nichts wird abgeschnitten. */
.prosa table { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 1em 0; font-size: 0.92rem; }
.prosa th, .prosa td { border: 1px solid var(--knick); padding: 8px 10px; text-align: left; vertical-align: top; overflow-wrap: anywhere; hyphens: auto; }
.prosa th { background: var(--papier-ton); font-weight: 600; }
.prosa li { margin-bottom: 0.35em; }

/* ---------- Fußzeile ---------- */
.fuss { padding: 8px 0 44px; font-size: 0.95rem; }
.fuss .seite { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 22px 40px; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.fuss .hinweis { flex-basis: 100%; color: var(--leise); font-size: 0.86rem; max-width: 78ch; }

/* ---------- Ein Paket nach dem anderen (Nico, 11.10.2026: „sehr gequetscht“) ----------
   Am PC füllt jeder Bogen ungefähr einen Bildschirm. Kein Einrasten: Das hat beim Scrollen gehakt. */
@media (min-width: 761px) and (min-height: 620px) {
  main.start > .bogen { min-height: calc(100svh - var(--kopf-hoehe) - 2 * clamp(14px, 4vh, 44px)); align-content: stretch; }
  main.start > .bogen .feld:not(.mit-bild) { display: flex; flex-direction: column; justify-content: center; }
  main.start > .bogen .feld.schritt { justify-content: flex-start; }
  /* Der Einstieg zeigt zwei Reihen: die Zettel-Reihe mit Unterschrift und Haken muss im ersten Bildschirm liegen. */
  main.start > .bogen.held { align-content: start; }
}

/* ---------- Schmal ---------- */
@media (max-width: 1040px) {
  .feld.s4, .feld.breit-s { grid-column: span 6; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .bogen { grid-template-columns: 1fr; }
  .feld, .feld.s3, .feld.s4, .feld.s6, .feld.breit-s { grid-column: auto; }
  .js .bogen .feld { transform-origin: center top; }
  table.stunden { min-width: 0; font-size: 0.74rem; }
  .stunden th, .stunden td { padding: 5px 2px; }
  .stunden td:first-child, .stunden th:first-child { padding-left: 5px; }
  table.liste { min-width: 0; }
  .liste th, .liste td { padding: 8px 8px; }
  .liste th:nth-child(2), .liste td:nth-child(2) { display: none; }
  .weg { display: none; }
  .wo-fehlt { margin-left: 12%; }
  .menue-knopf { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--tinte); background: transparent; font: 600 0.95rem/1 var(--text); color: var(--tinte); cursor: pointer; }
  .menue { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--grund); border-bottom: 1px solid var(--linie); padding: 10px var(--seite-rand) 18px; flex-direction: column; align-items: stretch; gap: 2px; }
  .menue.auf { display: flex; }
  .menue a { padding: 12px 0; font-size: 1.05rem; }
  .menue .knopf { margin-top: 8px; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 760px) {
  .js .bogen:not(.offen) .feld, .js .bogen:not(.offen) .feld.von-oben { transform: rotateX(34deg); }
}
@media print {
  .kopf, .fuss, .knopf { display: none; }
  .bogen .feld, .bogen .haken, .bogen .schild.spaet { opacity: 1 !important; transform: none !important; }
  .bogen .unterschrift path { stroke-dashoffset: 0 !important; }
}

/* Bild 7 am Handy: Unter der E-Mail bleibt Platz, damit die Person auf dem Foto zu sehen ist. */
@media (max-width: 760px) {
  .feld.mail-feld { gap: 78vw; }
  .mail-feld .bildfeld img { object-position: 60% 100%; }
}

/* ---------- Abschluss: der Stempel kommt noch einmal ---------- */
.schluss .feld.stempel { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.schluss .bestaetigt { margin-top: 0; flex-direction: column; gap: 16px; }
.schluss .haken { width: clamp(88px, 10vw, 128px); }
.schluss .schild::before { display: none; }
.schluss .schild { font-size: 1.05rem; }
@media (prefers-reduced-motion: no-preference) {
  .js .bogen.schluss.offen .haken { transition-delay: 0.5s, 0.5s; }
  .js .bogen.schluss.offen .schild.spaet { transition-delay: 0.8s, 0.8s; }
}

/* ---------- Handy: nichts verdeckt, nichts abgeschnitten (Abnahme 13.10.2026) ---------- */
@media (max-width: 760px) {
  /* Bild 1: Das Handy auf dem Foto rückt nach links, der kleine Zettel wird schmaler. */
  .buehne.mit-bild { min-height: 92vw; }
  .buehne .bildfeld img { object-position: 22% 50%; }
  .karte { width: 44%; right: 3%; bottom: 4%; padding: 10px 10px 8px; font-size: 0.74rem; }
  .karte .zettelkopf b { font-size: 0.78rem; }
  .karte .reihe { font-size: 0.72rem; padding: 4px 0; }
  .karte-fuss .haken { width: 30px; }
  /* Bild 2: Das Schild steht oben, damit die leere Unterschriftszeile auf dem Zettel frei bleibt. */
  .feld.mit-bild > .schild.auf-bild { top: 14px; bottom: auto; }
  .mail-feld > .schild.auf-bild { top: auto; }
  /* Dashboard-Ausschnitt: nur was Platz hat. */
  .fenster-nav { gap: 12px; }
  .fenster-nav span:last-child { display: none; }
  .liste th:nth-child(4), .liste td:nth-child(4) { display: none; }
  /* Fotos im Regiebericht: nur die Uhrzeit. */
  .fotozeit .fz-tag { display: none; }
  /* Regiebericht am Handy: schmale Spalten weg, damit nichts abgeschnitten wird. */
  .stunden .nr, .stunden .bez { display: none; }
  .dok-zeile.drei { grid-template-columns: auto 1fr; }
  .dok-zeile.drei > :nth-child(3) { border-top: 1px solid #111; }
  .dok-zeile.drei > :nth-child(n+3) { border-top: 1px solid #111; }
  .dok-zeile.drei > :nth-child(3) { grid-column: 1; }
  .dok-zeile.drei > :nth-child(4) { grid-column: 2; border-right: 0; }
  .dok-zeile.drei > :nth-child(5) { display: none; }
  .dok-zeile.drei > :nth-child(4)::after { content: " bis 10.10.2026"; }
  .dok-zeile.drei > :nth-child(2) { border-right: 0; }
  .dok-unterschriften { gap: 10px; }
  .dok-logo { display: none; }
  .dok-fuss { grid-template-columns: 1fr; }
}