/* Photoboother - oeffentliche Seiten. Aus mockups/entwurf-4-modelle.html abgeleitet (Entwurfs-Wrapper .g entfernt).
 *
 * DREI REGELN, DIE NICHT GEBROCHEN WERDEN DUERFEN:
 * 1. .in bestimmt die Seitenbreite. Nur dort steht max-width:var(--seitenbreite).
 *    Keine zweite Klasse setzt max-width auf einen Container.
 * 2. .prosa bestimmt das Lesemass. Es setzt NICHTS an sich selbst, sondern begrenzt
 *    seine direkten Kinder. Raster, Tabellen und Bausteine sind davon ausgenommen.
 * 3. Layout-Regeln haengen an einer Klasse, die den Baustein benennt (.detail),
 *    nie an einem geteilten Wrapper (.body .in).
 * app/tests/Kernel/StilTest.php prueft diese drei Regeln.
 *
 * Inhalt: 1 Marken  2 Grundlagen  3 Rahmen  4 Modelle  5 Buchungsstrecke
 *         6 Inhaltsseiten  7 Startseite  8 Breakpoints
 */

/* --- 1 Marken ----------------------------------------------------------- */
:root {
  /* Flaechen und Linien auf hellem Grund */
  --w:#FFFFFF; --grey:#F4F3F0; --grey2:#E9E7E2; --line:#DEDBD5;
  /* Schrift auf hellem Grund */
  --ink:#171512;    /* Ueberschriften, Marke, Schrift auf Orange */
  --ink2:#221F1A;   /* Fuellflaeche in dunklen Bloecken */
  --text:#3A342E;   /* Fliesstext */
  --mut:#6A645C;    /* gedaempfter Text */
  /* Schrift auf dunklem Grund */
  --hell:#F2EFEA; --hell-mut:#B8AFA4; --hell-leise:#8E867C;
  --nav-text:#EDE9E3; --fuss-text:#9E968C;
  --linie-dunkel:#3A342E;  /* gleicher Wert wie --text, andere Bedeutung: Linie auf Dunkel.
                              Beide zu benennen verhindert, dass eine Korrektur an der
                              Textfarbe die Linien im Dunkelbereich mitzieht. */
  /* Akzent */
  --org:#EF7D00; --orgd:#D97100; --org-ring:rgba(239,125,0,.18);
  /* Signale */
  --ja:#15803D; --nein:#B42318; --nein-flaeche:#FBEAE7; --nein-linie:#F1C4BE;
  /* Masse */
  --seitenbreite:1180px;
  /* Was eine Aenderung braechte (Stand 2026-09):
     ab 1162px  .vorteile bekommt eine vierte Spalte (deshalb 1180)
     ab 1336px  .mgrid bekommt eine fuenfte, aber die Textspalte in .detail wird dann
                breiter als das Lesemass - dafuer muessten die clamp()-Obergrenzen mit.
     Zweite Kopie dieses Werts: app/public/assets/admin.css */
  --seitenrand:clamp(18px,3.5vw,40px);
  --lesemass:80ch;      /* Fliesstext */
  --mass-weit:62ch;     /* Untertitel, Notizen */
  --mass-mittel:52ch;   /* Aussage im Band */
  --mass-eng:48ch;      /* Hero-Untertitel */
  /* Radien */
  --r-1:5px; --r-2:8px; --r:10px; --r-3:12px; --r-4:14px; --r-rund:999px;
  /* Verlauf hinter freigestellten Fotos */
  --verlauf-hell:linear-gradient(168deg,#EEEBE6,#CFC9C0);
}

/* --- 2 Grundlagen: Reset, Masse, Schrift, Tasten ------------------------ */
*, *::before, *::after { box-sizing: border-box }
img { max-width:100%;height:auto;display:block }
@media (prefers-reduced-motion:reduce) {
  * { animation:none!important;transition:none!important;scroll-behavior:auto!important }
}
body { margin:0; background:var(--w);color:var(--ink);font-family:"Archivo",system-ui,sans-serif;font-size:16px;line-height:1.55 }
.in { max-width:var(--seitenbreite);margin:0 auto;padding:0 var(--seitenrand) }
a { text-decoration:none }
/* Linkfarbe im redaktionellen Text. :where() traegt keine Spezifitaet bei, deshalb gewinnt
   jeder Baustein, der Links als Flaeche zeichnet (Taste, Karte, Pille, Staedteliste),
   automatisch mit seiner eigenen Regel - eine Ausnahmeliste wie frueher wird nicht mehr
   gebraucht und kann nicht veralten. In dieser Liste sass der Kontrastfehler: die Taste im
   dunklen Kasten bekam weisse Schrift auf Orange (2,9:1). Der Geltungsbereich schliesst
   .body, .ohead und .olist ein - dort waren die Links der Buchungsstrecke, der
   Fehlerseiten und die Modellnamen im Katalog bisher browser-blau. */
:where(.inhalt, .prosa, .body, .ohead, .olist) a { color:var(--orgd); text-decoration:underline; text-underline-offset:3px }
:where(.inhalt, .prosa, .body, .ohead, .olist) a:hover { color:var(--ink) }
h1, h2, h3, h4, p { margin:0 }
ul { list-style:none;margin:0;padding:0 }
.mn { font-family:"DM Mono",ui-monospace,monospace }
.hd { font-weight:900;letter-spacing:-.035em;text-transform:uppercase;line-height:.98 }
.btn { background:var(--org);color:var(--ink);border:none;border-radius:var(--r);padding:14px 28px; font:inherit;font-weight:800;font-size:15.5px;cursor:pointer;white-space:nowrap;display:inline-block }
.btn, .btn-o { text-decoration:none }
.btn:hover { background:var(--orgd) }
.btn-o { background:transparent;color:var(--ink);border:1.5px solid var(--ink);font-weight:700 }
.btn-o:hover { background:var(--grey) }
/* Von Modelldetailseite und Startseite gemeinsam benutzt. */
.kick { font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--org);margin-bottom:14px }
.cta { display:flex;gap:11px;flex-wrap:wrap;align-items:center }
.cta .lnk { color:var(--nav-text);font-weight:700;font-size:14.5px;text-decoration:underline;text-underline-offset:4px }
.cta .lnk:hover { color:var(--org) }
/* --- 3 Rahmen: Promo, Navigation, Brotkrume, Seitenkopf, Band, Fuss ----- */
.promo { background:var(--org);color:var(--ink);text-align:center;padding:9px 16px;font-size:13.5px;font-weight:700 }
.nav { background:var(--ink) }
.nav .in { display:flex;align-items:center;flex-wrap:wrap;gap:24px;padding-top:15px;padding-bottom:15px }
.nav img { height:24px;width:auto }
.burger { gap:4px;cursor:pointer }
.burger i { display:block;width:19px;height:2px;background:#fff }
.nav ul { display:flex;gap:24px;margin-left:auto;align-items:center;flex-wrap:wrap }
/* Bereichsfreie Seiten (Katalog, Modelle) tragen beide Menues im HTML, weil sie aus dem
   Seitencache ohne PHP ausgeliefert werden. Sichtbar ist das des Besuchers; ohne Skript
   und fuer Google bleibt es beim gewerblichen. */
.nav ul.nav-privat { display:none }
html[data-bereich="privat"] .nav ul.nav-privat { display:flex }
html[data-bereich="privat"] .nav ul.nav-gewerbe { display:none }
/* Dasselbe fuer Preise und Anfrage-Links auf diesen Seiten: Privatkunden sehen brutto,
   Gewerbe netto. Nur ausblenden, nie display setzen - sonst verloere .btn seine Form. */
html[data-bereich="privat"] .nur-gewerbe, html:not([data-bereich="privat"]) .nur-privat { display:none !important }
.nav a { color:var(--nav-text);font-size:14px;font-weight:600 }
.nav a:hover { color:var(--org) }
.nav .mnav-schalter { display:none }
.nav .burger { display:none; margin-left:auto }
.nav li.wechsel a { color:var(--org) }
.nav ul svg, .nav li.kontaktzeile { display:none }
.nav ul .btn { padding:9px 16px; font-size:14px; color:var(--ink) }
.crumb { background:var(--grey);border-bottom:1px solid var(--line);padding:11px 0; font-size:13px;color:var(--mut) }
.crumb a { color:var(--mut) }
.crumb a:hover { color:var(--org) }
.crumb b { color:var(--ink);font-weight:700 }
.ohead { padding:clamp(34px,4.6vw,58px) 0 clamp(20px,2.6vw,30px) }
.ohead h1 { font-size:clamp(28px,4.4vw,50px);margin-bottom:14px }
.ohead p { color:var(--mut);font-size:17px;max-width:var(--mass-weit) }
.ohead .kopfbild { border-radius:var(--r-4); max-height:380px; object-fit:cover; width:100% }
.ohead .in { display:block }
/* Erst ein Kopfbild macht daraus einen Zweispalter. Die Bedingung steht hier und nicht
   als Markup-Konvention in acht Vorlagen - sieben davon hatten sie schon vergessen. */
.ohead .in:has(.kopfbild) { display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center }
.ohead .kopfbild { max-width:360px }
/* --- 4 Modelle: Katalog, Detailseite, Pakete, Datenblatt ---------------- */
.olist { background:var(--grey);padding:clamp(24px,3.4vw,42px) 0 clamp(34px,5vw,64px) }
.card { background:var(--w);border:1px solid var(--line);border-radius:var(--r-3);overflow:hidden; display:grid;grid-template-columns:212px 1fr 250px;margin-bottom:14px;transition:box-shadow .18s }
.card:hover { box-shadow:0 10px 30px rgba(23,21,18,.10) }
.card .pic { background:var(--verlauf-hell);display:grid;place-items:center;padding:18px;position:relative }
.card .pic img { max-width:100%;max-height:186px;width:auto;filter:drop-shadow(0 12px 22px rgba(0,0,0,.28)) }
.card .bd { padding:20px 22px;display:flex;flex-direction:column;gap:9px;min-width:0 }
.card h2 { font-size:22px;font-weight:900;letter-spacing:-.04em;text-transform:uppercase }
.card h2 a { color:var(--ink);text-decoration:none }
.card h2 a:hover { color:var(--orgd) }
.card .lead { color:var(--mut);font-size:14.5px }
.card .for { font-size:13px;color:var(--mut);margin-top:auto }
.card .for b { color:var(--ink);font-weight:700 }
.card .buy { border-left:1px solid var(--line);background:#FCFBFA;padding:20px; display:flex;flex-direction:column;gap:8px;justify-content:center;min-width:0 }
.card .from { font-size:12px;color:var(--mut) }
.card .amt { font-weight:900;font-size:31px;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums }
.card .vat { font-size:11.5px;color:var(--mut) }
.card .buy .btn { text-align:center;padding:12px 16px;font-size:15px }
.card .dsheet { font-size:13px;color:var(--mut);text-decoration:underline;text-underline-offset:3px;text-align:center }
.dhero { background:var(--ink);color:var(--hell);padding:clamp(30px,4.4vw,56px) 0 }
.dhero .in { display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,54px);align-items:center }
/* Erst ein Foto macht daraus einen Zweispalter - sonst blieb die halbe Breite leer. */
.dhero .in:has(.shot) { grid-template-columns:.85fr 1.15fr }
.dhero .shot { background:linear-gradient(168deg,#3A342E,#7A7167);border-radius:var(--r-4); display:grid;place-items:center;padding:26px;min-height:300px }
.dhero .shot img { max-height:330px;width:auto;filter:drop-shadow(0 22px 36px rgba(0,0,0,.5)) }
.dhero h1 { font-size:clamp(30px,4.8vw,56px);margin-bottom:16px;color:#fff }
.dhero .sub { color:var(--hell-mut);font-size:17px;max-width:var(--mass-eng);margin-bottom:22px }
.dhero .quick { display:grid;grid-template-columns:repeat(2,1fr);gap:1px; background:var(--linie-dunkel);border:1px solid var(--linie-dunkel);border-radius:var(--r);overflow:hidden;margin-bottom:22px }
.dhero .quick div { background:var(--ink2);padding:12px 14px }
.dhero .quick dt { font-family:"DM Mono",monospace;font-size:9.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--hell-leise);margin-bottom:3px }
.dhero .quick dd { margin:0;font-weight:700;font-size:14.5px;color:#fff }
.prices { background:var(--grey);padding:clamp(30px,4.4vw,54px) 0;border-bottom:1px solid var(--line) }
.prices h2 { font-size:clamp(21px,2.8vw,31px);margin-bottom:8px }
.prices .note { color:var(--mut);font-size:14.5px;margin-bottom:22px;max-width:var(--mass-weit) }
.pgrid { display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:14px }
.p { background:var(--w);border:1.5px solid var(--line);border-radius:var(--r-3);padding:22px; display:flex;flex-direction:column;gap:11px }
.p.best { border-color:var(--ink);position:relative }
.p.best::before { content:"Meistgebucht";position:absolute;top:-10px;left:20px;background:var(--org); color:var(--ink);font-family:"DM Mono",monospace;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase; padding:4px 10px;border-radius:var(--r-1);font-weight:500 }
.p h3 { font-size:18px;font-weight:900;letter-spacing:-.03em;text-transform:uppercase }
.p .amt { font-weight:900;font-size:34px;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums }
.p .vat { font-size:12px;color:var(--mut);margin-top:-6px }
.p ul { display:grid;gap:7px;flex:1;margin-top:4px }
.p li { font-size:14px;color:var(--mut);display:grid;grid-template-columns:16px 1fr;gap:9px }
.p li b { color:var(--ink);font-weight:700 }
.p .ck { color:var(--ja);font-weight:900 }
.p .btn { text-align:center;padding:12px;font-size:15px }
.body { padding:clamp(32px,4.6vw,60px) 0 }
/* Zweispalter nur auf der Modelldetailseite. Bewusst NICHT an .body .in - dort haengen
   auch die vier Anfrageschritte, Status und die drei Fehlerseiten. */
.detail { display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(28px,4.5vw,60px);align-items:start }
.body h2 { font-size:clamp(21px,2.8vw,31px);margin-bottom:16px }
.body h3 { font-size:18px;font-weight:800;letter-spacing:-.025em;margin:26px 0 10px }
.body p { margin-bottom:14px;color:var(--text) }
.body p strong { color:var(--ink);font-weight:700 }
.tech { background:var(--grey);border:1px solid var(--line);border-radius:var(--r-3);padding:20px 22px;position:sticky;top:14px }
.tech h3 { font-size:15px;font-weight:900;letter-spacing:-.02em;text-transform:uppercase;margin:0 0 14px }
.tech dl { display:grid;gap:0;margin:0 }
.tech .rw { display:grid;grid-template-columns:1fr auto;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px }
.tech .rw:last-child { border-bottom:none }
.tech dt { color:var(--mut) }
.tech dd { margin:0;font-weight:700;text-align:right }
.tech .dl { text-decoration:none;margin-top:16px;display:block;text-align:center;border:1.5px solid var(--ink); border-radius:var(--r);padding:11px;font-weight:700;font-size:14px;color:var(--ink) }
.tech .dl:hover { background:var(--w) }
.band { background:var(--org);color:var(--ink);padding:clamp(30px,4.4vw,52px) 0 }
.band .in { display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center }
.band h2 { font-size:clamp(22px,3.2vw,38px);margin-bottom:8px }
.band p { font-weight:600;max-width:var(--mass-mittel) }
.band .btn { background:var(--ink);color:#fff }
.band .btn:hover { background:#000 }
.foot { background:var(--ink);color:var(--fuss-text);padding:30px 0 }
.foot .in { display:flex;gap:20px;flex-wrap:wrap;align-items:center;font-size:13.5px }
.foot img { height:21px;width:auto }
.foot ul { display:flex;gap:18px;margin-left:auto;flex-wrap:wrap }
.foot a { color:var(--fuss-text) }
.foot a:hover { color:var(--org) }

/* Rueckseite von The Beast (modell-rueckseite.php): drei Tafeln wechseln im 55-Zoll-
   Monitor. Das Foto ist in der Bildschirmflaeche durchsichtig; .rs-schirm liegt
   dahinter. Prozentwerte aus dem Originalfoto 1508 x 3151 px (Flaeche x 348-1188,
   y 392-1924), je 0,4 Prozentpunkte groesser, damit kein Spalt am Rahmen bleibt.
   Bei "weniger Bewegung" greift die Regel unter 2 - dann steht nur Tafel 1. */
.rueckseite { padding:clamp(32px,4.6vw,60px) 0; background:var(--grey) }
/* minmax statt auto: eine auto-Spalte bemisst sich an der Originalbreite des Fotos (766 px),
   nicht an der angezeigten Box - die Box stand verloren in einer viel zu breiten Spalte. */
.rueckseite .in { display:grid; grid-template-columns:minmax(0,400px) 1fr; gap:clamp(28px,5vw,72px); align-items:center }
.rs-geraet { margin:0; width:100% }
.rs-geraet figcaption { font-size:13px; color:var(--mut); text-align:center; margin-top:10px }
.rs-rahmen { position:relative; aspect-ratio:1508/3151 }
.rs-foto { position:relative; width:100%; filter:drop-shadow(0 18px 30px rgba(0,0,0,.28)) }
.rs-schirm { position:absolute; left:22.7%; top:12.2%; width:56.4%; height:49.1%; background:var(--ink); overflow:hidden; container-type:inline-size }
.rs-folie { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4cqw; padding:8cqw; text-align:center; color:var(--hell); opacity:0; animation:rs-wechsel 18s infinite }
.rs-folie:first-child { opacity:1 }
.rs-folie:nth-child(2) { animation-delay:6s }
.rs-folie:nth-child(3) { animation-delay:12s }
@keyframes rs-wechsel { 0% { opacity:0 } 3% { opacity:1 } 33% { opacity:1 } 36% { opacity:0 } 100% { opacity:0 } }
.rs-folie p { margin:0 }
.rs-klein { font-size:7cqw; text-transform:uppercase; letter-spacing:.12em; color:var(--hell-mut) }
.rs-werbung { background:linear-gradient(160deg,var(--ink2),var(--ink)) }
.rs-logo { width:78%; height:auto }
.rs-marke { margin-top:6cqw!important; padding:2cqw 6cqw; border-radius:var(--r-rund); background:var(--org); color:var(--ink); font-size:6.5cqw; font-weight:800 }
.rs-zeile { font-size:10cqw; font-weight:800; line-height:1.15 }
.rs-wand { justify-content:flex-start; padding:6cqw 5cqw 0 }
.rs-spur { display:grid; grid-template-columns:1fr 1fr; gap:3cqw; width:100%; animation:rs-laufen 18s linear infinite }
.rs-spur img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--r-1) }
@keyframes rs-laufen { from { transform:translateY(0) } to { transform:translateY(-50%) } }
.rs-anzeige { background:var(--org); color:var(--ink) }
.rs-anzeige .rs-klein { color:var(--ink) }
.rs-titel { font-size:11cqw; font-weight:900; line-height:1.05 }
.rs-anzeige ol { list-style:none; margin:4cqw 0 0; padding:0; display:grid; gap:4cqw; font-size:7.5cqw; font-weight:700; line-height:1.2; text-align:left }
.rs-anzeige li { display:flex; gap:3cqw; align-items:center }
.rs-anzeige ol b { flex:none; display:grid; place-items:center; width:11cqw; height:11cqw; border-radius:50%; background:var(--ink); color:var(--org) }
.rs-text h2 { font-size:clamp(28px,3.4vw,44px); margin:8px 0 18px }
.rs-text p { max-width:var(--mass-weit); font-size:clamp(17px,1.5vw,19px); line-height:1.6; margin:0 }
.rs-text p + p { margin-top:14px }

/* Cameraman (modell-cameraman-ablauf.php): Hallenskizze mit dem Weg des Gastes zum Stand.
   Der offset-path muss dem d="" von .ca-weg in der Vorlage entsprechen. Bei "weniger
   Bewegung" steht der Punkt am Start (Regel unter 2). */
.cameraman-ablauf { padding:clamp(32px,4.6vw,60px) 0; background:var(--grey) }
.cameraman-ablauf .hd { font-size:clamp(28px,3.4vw,44px); margin:8px 0 12px }
.ca-einleitung { font-size:clamp(17px,1.5vw,19px); max-width:var(--mass-weit); margin:0 0 22px }
.ca-skizze { margin:0 0 26px; background:var(--w); border:1px solid var(--line); border-radius:var(--r-4); padding:clamp(10px,2vw,22px) }
.ca-skizze svg { display:block; width:100%; height:auto }
.ca-halle { fill:var(--w); stroke:var(--line); stroke-width:2 }
.ca-fremd { fill:var(--grey2) }
.ca-fremdtext { fill:var(--hell-leise); font-size:13px; font-weight:600 }
.ca-stand { fill:var(--org) }
.ca-standtext { fill:var(--ink); font-size:17px; font-weight:800 }
.ca-drucker { fill:var(--ink) }
.ca-papier { fill:var(--w); stroke:var(--ink); stroke-width:2 }
.ca-klein { fill:var(--mut); font-size:13px; font-weight:600 }
.ca-stand ~ .ca-klein { fill:var(--ink) }
.ca-besucher { fill:var(--hell-mut) }
.ca-cameraman rect { fill:var(--ink) }
.ca-linse { fill:var(--mut); stroke:var(--w); stroke-width:3 }
.ca-kopf { fill:var(--hell-mut); stroke:var(--ink); stroke-width:2 }
.ca-bein { stroke:var(--ink); stroke-width:6; stroke-linecap:round }
.ca-name { fill:var(--ink) }
.ca-weg { fill:none; stroke:var(--ink); stroke-width:3; stroke-dasharray:2 9; stroke-linecap:round }
.ca-gast { fill:var(--org); stroke:var(--ink); stroke-width:3; offset-path:path('M 172 150 C 280 150, 320 190, 420 185 S 560 150, 640 150'); offset-rotate:0deg; animation:ca-laufen 7s ease-in-out infinite }
@keyframes ca-laufen { 0%, 10% { offset-distance:0% } 80%, 100% { offset-distance:100% } }
.ca-marke circle { fill:var(--ink) }
.ca-marke text { fill:var(--org); font-size:15px; font-weight:800 }
.ca-schritte { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
.ca-schritt { background:var(--w); border:1px solid var(--line); border-radius:var(--r-3); padding:18px 18px 20px }
.ca-nr { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--ink); color:var(--org); font-weight:800 }
.ca-schritt h3 { margin:12px 0 6px; font-size:17px }
.ca-schritt p { margin:0; font-size:15px; color:var(--text); line-height:1.5 }

/* --- 5 Buchungsstrecke: Fortschritt, Formulare, Suchmaske -------------- */
.buchungs-schritte { display:flex; gap:10px; flex-wrap:wrap; margin:0 0 22px; padding:0; list-style:none; font-size:13.5px; color:var(--mut) }
.buchungs-schritte li { display:flex; align-items:center; gap:7px }
.buchungs-schritte li span { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--grey2); font-weight:800; font-size:12px }
.buchungs-schritte li.aktiv { color:var(--ink); font-weight:700 } .buchungs-schritte li.aktiv span { background:var(--org); color:var(--ink) }
.buchungs-schritte li.erledigt span { background:var(--ink); color:#fff }
.anfrage .formular { display:grid; align-items:start; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); background:var(--w); border:1px solid var(--line); border-radius:var(--r-4); padding:26px 28px }
.anfrage .formular fieldset, .anfrage .formular .aktionen, .anfrage .formular label:has(textarea) { grid-column:1 / -1 }
/* Kontaktseiten: Formular (oder nach dem Absenden die Bestaetigung) links, Kontaktkasten
   rechts. Die Bestaetigung ersetzt das Formular - vorher stand sie als schmale Zeile
   ueber der Brotkrume, und das leere Formular blieb stehen. */
.kontakt-block { display:grid; grid-template-columns:1fr minmax(240px,300px); gap:24px; align-items:start; margin-bottom:28px }
.kontakt-danke { background:var(--ink); color:var(--hell); border-radius:var(--r-4); padding:clamp(28px,4vw,48px) }
.kontakt-danke h2 { color:var(--w); font-size:clamp(26px,3.4vw,40px); margin:6px 0 12px }
.kontakt-danke p { margin:0; font-size:17px }
/* Im Fliesstext erbte der Kasten die dunkle Textfarbe von .prosa p - auf Schwarz unlesbar (09.10.). */
.prosa .kontakt-danke p { color:var(--hell-mut) } .prosa .kontakt-danke .kick { color:var(--org); margin:0 0 4px }
.kontakt-danke .haken { display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--org); margin-bottom:18px }
.kontakt-danke .haken svg { width:24px; height:24px; fill:none; stroke:var(--ink); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round }
.prosa .kontakt-danke .danke-eilig { margin-top:14px; font-size:15px } .kontakt-danke .danke-eilig a { color:var(--org); font-weight:700 }
.kontakt-daten { background:var(--grey); border:1px solid var(--line); border-radius:var(--r-4); padding:22px 24px; display:grid; gap:12px }
.kontakt-daten h3 { margin:0 }
.kontakt-daten .btn { text-align:center; white-space:normal }
.kontakt-daten p { margin:6px 0 0; font-size:14.5px; color:var(--mut) }
.anfrage label { display:grid; align-content:start; gap:5px; font-size:13px; font-weight:700; color:var(--mut) }
.anfrage .formular label { min-width:0 }
/* Felder einer Reihe auf gleicher Hoehe, auch wenn eine Beschriftung zweizeilig ist
   ("Strasse und Hausnummer des Veranstaltungsorts"): die Beschriftung waechst nach oben. */
.anfrage .formular { align-items:stretch }
.anfrage .formular > label:not(:has(textarea)) { grid-template-rows:1fr auto; align-content:stretch }
.anfrage .formular > label:not(:has(textarea)) > input, .anfrage .formular > label:not(:has(textarea)) > select { align-self:end }
.anfrage .buy label.auswahl { display:flex; align-items:center; gap:8px; font-size:15px; color:var(--ink); cursor:pointer }
.anfrage .buy label.auswahl input { width:20px; height:20px; accent-color:var(--org) }
.fehler-uebersicht ul { margin:6px 0 0; padding-left:18px }
.fehler-uebersicht a { color:inherit; text-decoration:underline }
/* Safaris Eigenform der Datumsfelder aus: sonst eigene Breite und eine andere Hoehe als die
   uebrigen Felder. Der Wert bleibt links wie in den Textfeldern. */
.anfrage input[type=date], .suche input[type=date] { -webkit-appearance:none; appearance:none; display:block; min-height:45px }
.anfrage input[type=date]::-webkit-date-and-time-value, .suche input[type=date]::-webkit-date-and-time-value { text-align:left }
.anfrage input:not([type=radio]):not([type=checkbox]), .anfrage select, .anfrage textarea, .suche input { font:inherit; font-size:15px; color:var(--ink); background:var(--w); border:1.5px solid var(--line); border-radius:var(--r-2); padding:10px 12px; width:100%; max-width:100%; min-width:0 }
.anfrage input:focus, .anfrage select:focus, .anfrage textarea:focus, .suche input:focus { outline:none; border-color:var(--ink); box-shadow:0 0 0 3px var(--org-ring) }
/* min-width:0 gegen die Eigenart von fieldset: es schrumpft von sich aus nicht unter
   seine Inhaltsbreite und lief dadurch auf schmalen Schirmen aus dem Formular. */
.anfrage fieldset { min-width:0; border:1px solid var(--line); border-radius:var(--r); padding:12px 16px; display:flex; gap:18px; flex-wrap:wrap }
.anfrage fieldset legend { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--mut); padding:0 6px }
.anfrage fieldset label { display:flex; align-items:center; gap:8px; min-width:0; font-size:15px; color:var(--ink); font-weight:600 }
/* Die Einwilligungszeile ist laenger als eine Schirmbreite und muss umbrechen duerfen. */
.anfrage fieldset label span { min-width:0; flex:1 1 auto }
.anfrage fieldset label input { flex:none }
/* Zubehoer: jede Zeile ueber die volle Breite, Menge rechts. Das umgebende fieldset ist
   ein Flexraster fuer nebeneinanderliegende Wahlfelder - eine Zeile mit Beschreibung
   braucht dort ausdruecklich die ganze Zeile, sonst quetschen sich drei Angebote
   nebeneinander und der Text bricht in Streifen. */
/* Liefer- und Rechnungsadresse: Felder wie im uebrigen Formular, nicht wie Wahlfelder. */
.anfrage fieldset.adresse { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; padding:14px 18px 18px }
.anfrage fieldset.adresse > label:not(.haken), .anfrage .rechnung-felder > label { display:grid; gap:5px; font-size:13px; font-weight:700; color:var(--mut) }
.anfrage fieldset.adresse .ort-fest { display:grid; gap:5px; margin:0; font-size:13px; font-weight:700; color:var(--mut); align-content:start }
.anfrage fieldset.adresse .ort-fest strong { font-size:15px; color:var(--ink); padding:11px 0 0 }
.anfrage fieldset.adresse .ort-fest a { font-weight:600; justify-self:start }
.anfrage fieldset.rechnung { grid-template-columns:1fr }
.anfrage fieldset.rechnung .haken { cursor:pointer }
.anfrage fieldset.rechnung .haken input { width:20px; height:20px; accent-color:var(--org) }
.anfrage .rechnung-felder { display:grid; grid-template-columns:2fr minmax(90px,.6fr) 1.4fr; gap:14px }
.anfrage fieldset.rechnung:has(.haken input:checked) .rechnung-felder { display:none }
.anfrage fieldset.zubehoer { flex-direction:column; gap:10px }
.anfrage fieldset.zubehoer .hinweis-klein { margin:0 }
.anfrage fieldset.zubehoer .zubehoer-zeile { width:100%; align-items:flex-start; justify-content:space-between; gap:14px; font-weight:400 }
.anfrage fieldset.zubehoer .zubehoer-zeile strong { display:block; font-weight:700 }
.anfrage fieldset.zubehoer .zubehoer-zeile { cursor:pointer; flex-direction:row-reverse; justify-content:flex-end }
.anfrage fieldset.zubehoer .zubehoer-zeile input { width:22px; height:22px; flex:none; margin-top:2px; accent-color:var(--org) }
.anfrage .aktionen { display:flex; gap:12px; align-items:center; flex-wrap:wrap }
.anfrage .fehler { background:var(--nein-flaeche); color:var(--nein); border:1px solid var(--nein-linie); padding:12px 16px; border-radius:var(--r-2); font-weight:600; margin-bottom:18px }
.anfrage .feldfehler { color:var(--nein); font-size:13px; font-weight:600 }
.anfrage .hinweis-klein { color:var(--mut); font-size:13px }
.anfrage-modell .frei { font-weight:800 } .anfrage-modell .frei.ja { color:var(--ja) } .anfrage-modell .frei.nein { color:var(--nein) }
.anfrage-modell.ausgebucht { opacity:.75 }
.anfrage-modell .buy label { display:grid; gap:5px; font-size:12px; font-weight:700; color:var(--mut) }
.anfrage-modell .buy label.auswahl { font-size:13px; font-weight:600; color:var(--mut) }
.anfrage-modell .buy label.auswahl input { width:17px; height:17px }
/* Vormerken ist die Ausnahme: die Leiste bleibt unaufdringlich und klebt erst unten,
   wenn etwas vorgemerkt ist (anfrage.js setzt .aktiv). */
.merkleiste { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; border:1px dashed var(--line); border-radius:var(--r-3); padding:14px 18px; margin:6px 0 16px; background:var(--w) }
.merkleiste p { margin:0 }
.merkleiste .merk-knoepfe { display:flex; gap:10px; flex-wrap:wrap }
.merkleiste .btn { padding:10px 16px; font-size:14.5px }
.merkleiste.aktiv { position:sticky; bottom:12px; z-index:5; border:1px solid var(--org); box-shadow:0 10px 30px rgba(23,21,18,.16) }
.merkleiste.still .merk-knoepfe { display:none }
.anfrage .vergleich { background:var(--w); border:1px solid var(--org); border-radius:var(--r-3); padding:20px; margin-bottom:22px }
.anfrage .vergleich h2 { font-size:22px; margin:0 0 12px }
.anfrage .vergleich-rahmen { overflow-x:auto }
.anfrage .vergleich table { width:100%; border-collapse:collapse; font-size:14.5px; min-width:520px }
.anfrage .vergleich th, .anfrage .vergleich td { text-align:left; vertical-align:top; padding:9px 10px; border-bottom:1px solid var(--line) }
.anfrage .vergleich tbody th { color:var(--mut); font-weight:600; width:18% }
.anfrage .vergleich .btn { padding:9px 14px; font-size:14px }
.anfrage .vergleich > .btn { margin-top:12px }
.anfrage .zusammenfassung { background:var(--grey); border:1px solid var(--line); border-radius:var(--r-3); padding:18px 20px }
.anfrage .zusammenfassung table { width:100%; border-collapse:collapse; font-size:14.5px }
.anfrage .zusammenfassung td { padding:6px 0; border-bottom:1px solid var(--line) } .anfrage .zusammenfassung td:last-child { text-align:right; font-variant-numeric:tabular-nums }
.anfrage .zusammenfassung tr.summe td { font-weight:900; border-bottom:none; font-size:17px }
.anfrage .zusammenfassung tr.klein td { border-bottom:none; padding-top:0; font-size:13px; color:var(--mut) }
.anfrage .lieferart-wahl { display:grid; gap:8px }
.anfrage .lieferart-wahl label { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; border:1.5px solid var(--line); border-radius:var(--r); padding:10px 14px; font-size:14.5px; color:var(--ink); font-weight:600 }
.anfrage .lieferart-wahl label:has(input:checked) { border-color:var(--ink); background:var(--w) }
.anfrage .lieferart-wahl .preis { font-weight:900; font-variant-numeric:tabular-nums }
/* Druckformat unter der Lieferart derselben Box: dieselben Kacheln, damit es als Teil
   derselben Entscheidung gelesen wird. Das fieldset ist ein Flexraster - ohne die volle
   Breite stuende die Wahl neben den Lieferarten statt darunter. */
.anfrage .druckformat-wahl { width:100%; display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) }
.anfrage .druckformat-wahl .unterlegende { grid-column:1/-1; margin:6px 0 0; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--mut) }
.anfrage .druckformat-wahl .feldfehler { grid-column:1/-1 }
.anfrage .druckformat-wahl label { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; border:1.5px solid var(--line); border-radius:var(--r); padding:10px 14px; font-size:14.5px; color:var(--ink); font-weight:600 }
.anfrage .druckformat-wahl label:has(input:checked) { border-color:var(--ink); background:var(--w) }
.anfrage .zeitstrahl { display:grid; gap:14px; margin:20px 0 } .anfrage .zeitstrahl li { display:grid; grid-template-columns:28px 1fr; gap:12px } .anfrage .zeitstrahl li span { width:28px; height:28px; border-radius:50%; background:var(--org); color:var(--ink); display:grid; place-items:center; font-weight:900 }
/* Wird von anfrage.js erzeugt (className), taucht in keiner Vorlage auf - nicht entfernen. */
.live-vorschau { grid-column:1 / -1; background:var(--grey); border:1px solid var(--line); border-radius:var(--r); padding:14px 18px; font-size:14.5px }
.live-vorschau ul { display:grid; gap:4px; margin:6px 0 } .live-vorschau li.ja { color:var(--ja); font-weight:700 } .live-vorschau li.nein { color:var(--mut) }
.live-vorschau:empty { display:none }

/* --- 6 Inhaltsseiten: Prosa, Lesemass, Bausteine, Staedte --------------- */
.inhalt { padding:clamp(28px,4vw,56px) 0 }
/* Folgt der Inhalt direkt auf den Seitenkopf, liegen beide auf weissem Grund und
   ihre Innenabstaende wuerden sich addieren. */
.ohead + .inhalt { padding-top:clamp(6px,1vw,14px) }
/* Lesemass. Der Fliesstext bleibt lesbar schmal, Raster, Tabellen und Bausteine laufen
   ueber die volle Seitenbreite. .prosa setzt keine Breite an sich selbst - sonst hebt es
   den Container .in aus; genau so entstand der randlose Umbruch bis 2026-09-09.
   Die Liste zaehlt auf, was breit sein SOLL. Umgekehrt (aufzaehlen, was schmal sein darf)
   faellt jedes neue Element stillschweigend heraus. */
.prosa > * { max-width:var(--lesemass) }
.prosa > .voll, .prosa > .faq, .prosa > .bildreihe, .prosa > .vorteile, .prosa > .schritte-4, .prosa > .kasten, .prosa > .mgrid, .prosa > .staedte, .prosa > .chips, .prosa > .suchblock, .prosa > .anfrage, .prosa > table { max-width:none }
.prosa > p { font-size:17px }
.start-inhalt > p, .start-inhalt > h2 { max-width:var(--lesemass) }
.prosa h2 { font-size:clamp(22px,2.8vw,32px); font-weight:900; letter-spacing:-.03em; margin:34px 0 12px }
.prosa h3 { font-size:19px; font-weight:800; letter-spacing:-.02em; margin:24px 0 8px }
.prosa p { margin:0 0 14px; color:var(--text) }
.prosa ul, .prosa ol { margin:0 0 16px 22px; padding:0; color:var(--text) }
.prosa ul { list-style:disc } .prosa ol { list-style:decimal }
.prosa li { margin-bottom:6px }
.prosa img { border-radius:var(--r-3); margin:8px 0 18px }
/* Hochformat sprengte die Seite (Fanzone, 05.10.): kein Einzelbild hoeher als 560 px. */
.prosa > img, .prosa > p > img, .prosa > figure img { width:auto; height:auto; max-width:100%; max-height:560px }
.prosa figure { margin:0 0 20px } .prosa figcaption { font-size:13px; color:var(--mut); padding:8px 0 }
/* Bildreihe (Redaktionsklasse): Beispielbilder nebeneinander, auf dem Handy untereinander. */
.bildreihe { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin:8px 0 24px }
.bildreihe figure { margin:0 }
.bildreihe img { width:100%; height:auto; border-radius:var(--r) }
.bildreihe figcaption { font-size:13px; color:var(--mut); padding:6px 0 0 }
.prosa blockquote { border-left:4px solid var(--org); margin:0 0 16px; padding:6px 18px; color:var(--mut) }
.prosa table { border-collapse:collapse; width:100%; margin:0 0 18px; font-size:15px }
.prosa th, .prosa td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--line) }
.prosa th { background:var(--grey); font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--mut) }
.prosa ul.chips { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0 0 18px; padding:0 }
.prosa ul.chips li { margin:0 }
.faq details { border:1px solid var(--line); border-radius:var(--r); padding:0 18px; margin-bottom:8px; background:var(--w) }
.faq summary { cursor:pointer; padding:14px 0; font-weight:800; list-style:none }
.faq summary::-webkit-details-marker { display:none }
.faq summary::after { content:"+"; float:right; color:var(--org); font-weight:900 }
.faq details[open] summary::after { content:"\2212" }
.faq details p { color:var(--text); margin:0 0 14px }
/* Die Suchmaske ist ein eigener Baustein mit Ueberschrift. Auf Inhaltsseiten traegt
   .suchblock die Karte, auf der Startseite tut das .avail im Kopfbereich. */
.suchblock { background:var(--w); border:1px solid var(--line); border-radius:var(--r-4); padding:clamp(18px,2.4vw,24px); margin:30px 0 30px; color:var(--ink); max-width:none }
.suche { display:grid; grid-template-columns:1fr 1fr 1.2fr auto; gap:12px; align-items:end; color:var(--ink) }
/* min-width:0: ein Rasterelement schrumpft sonst nicht unter seinen Inhalt, und Safari gibt
   Datumsfeldern eine Eigenbreite - auf dem iPhone ragten Von/Bis aus der Karte (30.09.). */
.suche label { display:grid; gap:5px; font-size:12.5px; font-weight:700; color:var(--mut); min-width:0 }
.suche input { width:100% }
.suche .btn { padding:12px 18px; font-size:15px }
.suche .hinweis-klein { grid-column:1 / -1; color:var(--mut); font-size:13px }
/* Die Suchkarte steht im dunklen Kopf und wuerde dessen helle Textfarbe erben -
   auf weissem Kartengrund waere die Ueberschrift praktisch unsichtbar. */
.shero .avail { color:var(--ink) }
.mgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin:8px 0 26px }
.mk { background:var(--w); border:1px solid var(--line); border-radius:var(--r-3); padding:18px; display:flex; flex-direction:column; gap:8px }
.mk .pic { background:var(--verlauf-hell); border-radius:var(--r); position:relative; aspect-ratio:4/3; overflow:hidden }
/* Absolut und object-fit statt max-height:100%: die Hoehe der Kachel kommt aus
   aspect-ratio, und daran bemisst ein Rasterelement keine Prozenthoehe - die
   Hochformat-Fotos (seit 2026-09-28) liefen oben heraus und wurden angeschnitten. */
.mk .pic img { position:absolute; inset:14px; width:calc(100% - 28px); height:calc(100% - 28px); object-fit:contain; filter:drop-shadow(0 10px 18px rgba(0,0,0,.22)) }
.mk h3 { font-size:19px; font-weight:900; letter-spacing:-.03em; text-transform:uppercase; margin:6px 0 0 }
.mk a { color:var(--ink); text-decoration:none }
.mk h3 a:hover { color:var(--orgd) }
.mk p { font-size:14px; color:var(--mut); margin:0 }
.mk .ab { margin-top:auto; color:var(--ink); font-size:14.5px } .mk .ab b { font-size:20px; font-weight:900 } .mk .ab small { color:var(--mut) }
.mk .btn-o { text-align:center; padding:10px 14px; font-size:14px }
.staedte { columns:3; column-gap:28px; margin:0 0 24px; padding:0 } .staedte li { break-inside:avoid; padding:5px 0; border-bottom:1px solid var(--line); font-size:15px } .staedte a { color:var(--ink); text-decoration:none; font-weight:600 } .staedte a:hover { color:var(--orgd) }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.vorteile { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin:8px 0 26px }
.vorteile div { background:var(--grey); border:1px solid var(--line); border-radius:var(--r-3); padding:18px 20px } .vorteile b, .vorteile strong { display:block; font-size:12px; color:var(--org); font-family:"DM Mono",monospace; letter-spacing:.1em; margin-bottom:6px } .vorteile h3 { margin:0 0 6px } .vorteile p { margin:0; font-size:14.5px }
.schritte-4 { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin:8px 0 26px }
.schritte-4 div { border-top:3px solid var(--org); padding-top:12px } .schritte-4 b { font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut) } .schritte-4 h3 { margin:6px 0 6px }
.kasten { background:var(--ink); color:var(--hell); border-radius:var(--r-4); padding:26px 28px; margin:10px 0 28px; display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center }
.kasten h2 { color:#fff; margin:0 0 6px } .kasten p { color:var(--hell-mut); margin:0 } .kasten .btn { white-space:nowrap }
/* Staedteseiten: Luft zwischen den Abschnitten - die Ueberschriften klebten am Absatz
   davor, "Unsere Fotoboxen" direkt am Hinweis zum Lieferpreis (Joern, 05.10.). */
.stadt-seite > .in > h2.hd { margin:clamp(40px,5vw,64px) 0 16px }
.stadt-seite > .in > .stadt-lieferung + .hinweis-klein { margin:12px 0 0; color:var(--mut); font-size:14px }
.stadt-lieferung { background:var(--grey); border:1px solid var(--line); border-radius:var(--r-4); padding:22px 24px; margin:0 0 26px; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px }
.stadt-lieferung dt { font-family:"DM Mono",monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut) }
.stadt-lieferung dd { margin:2px 0 0; font-weight:900; font-size:22px; letter-spacing:-.03em } .stadt-lieferung dd small { display:block; margin-top:3px; font-weight:600; font-size:13px; line-height:1.35; color:var(--mut) }
.nachbarn { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; padding:0 }
/* Pille: runder Rahmen-Chip. Eine Grundform, Abweichungen darunter. text-decoration steht
   hier, weil diese Links Flaechen sind - die Linkfarbregel darf sie nicht unterstreichen. */
.nachbarn a, .start-inhalt > ul li a, .prosa ul.chips li a { display:inline-block; border:1px solid var(--line); border-radius:var(--r-rund); background:var(--w); color:var(--ink); text-decoration:none; font-weight:600; font-size:14.5px; padding:9px 17px }
.nachbarn a { background:none; font-weight:700; font-size:14px; padding:8px 14px }
.nachbarn a:hover { border-color:var(--ink) }
.start-inhalt > ul li a:hover, .prosa ul.chips li a:hover { border-color:var(--org); color:var(--orgd) }
.nachbarn a span { color:var(--mut); font-weight:500; margin-left:6px; font-size:12.5px }

/* --- 7 Startseite: Kopf, Kennzahlen, Suchkarte -------------------------- */
.shero { position:relative; overflow:hidden; background:var(--ink); color:var(--hell); padding:clamp(34px,5vw,70px) 0 }
/* Foto als eigenes <img> hinter dem Text, nicht als background-image: so bleiben
   Alternativtext und Ladeprioritaet steuerbar. Darueber eine Abdunkelung, links dicht
   (weisse Schrift auf dem hellsten Bildbereich ergibt so etwa 14:1), nach rechts
   durchscheinend, damit vom Foto noch etwas zu sehen ist. */
.shero-foto { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42% }
.shero::after { content:""; position:absolute; inset:0; background:linear-gradient(100deg,rgba(23,21,18,.95) 0%,rgba(23,21,18,.88) 46%,rgba(23,21,18,.62) 100%) }
.shero .in { position:relative; z-index:1 }
.shero-text { max-width:620px }  /* zwei Zeilen Ueberschrift, der Untertitel bleibt darunter */
/* Staedteseiten: gleiches Fotoband, flacher und mit kleinerer Ueberschrift. */
.stadt-kopf { padding:clamp(26px,3.6vw,48px) 0 }
.stadt-kopf h1 { font-size:clamp(28px,4.2vw,48px) }
.stadt-kopf .sub { font-size:17px }
.shero h1 { font-size:clamp(32px,5vw,60px); color:#fff; margin-bottom:14px }
.shero .sub { color:var(--hell-mut); font-size:18px; max-width:var(--mass-eng) }
.shero .avail { margin-top:clamp(22px,3vw,34px); max-width:900px }
.shero .cta { margin-top:18px }
.facts { background:var(--grey); border-bottom:1px solid var(--line) }
.facts ul { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin:0; padding:0; list-style:none }
.facts li { padding:18px 22px; border-right:1px solid var(--line) }
.facts li:first-child { padding-left:0 }
.facts li:last-child { padding-right:0; border-right:none }
.facts b { display:block; font-weight:900; font-size:26px; letter-spacing:-.03em; line-height:1.1 } .facts span { font-size:13.5px; color:var(--mut) }
.avail { background:var(--w); border:1px solid var(--line); border-radius:var(--r-4); padding:clamp(20px,3vw,30px); box-shadow:0 14px 40px rgba(23,21,18,.08) }
.suchkopf { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:14px } .suchkopf h2 { font-size:22px; margin:0 } .suchkopf span { font-family:"DM Mono",monospace; font-size:11px; color:var(--mut); letter-spacing:.08em }
.avail .suchblock { background:none; border:none; padding:0; margin:0 }
.start-inhalt > p { font-size:17px; color:var(--text); margin:0 0 16px }
.start-inhalt h2 { font-size:clamp(22px,2.8vw,32px); font-weight:900; letter-spacing:-.03em; margin:38px 0 14px }
.start-inhalt > ul { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0 0 10px; padding:0 }
.start-inhalt .vorteile h3 { font-size:17px } .start-inhalt .kasten { margin-top:34px }


/* --- 8 Breakpoints -------------------------------------------------------
 * Genau zwei, mehr gibt es nicht:
 *   940px  Zweispalter werden einspaltig, das Menue klappt ein
 *   600px  mehrspaltige Listen werden einspaltig
 * Custom Properties wirken in @media nicht ohne Build-Schritt, deshalb stehen die
 * Zahlen hier literal. Vorher lagen sie in vier bzw. zwei Bloecken ueber die Datei
 * verstreut - wer eine 940er-Regel suchte, musste vier Stellen pruefen. Wer einen
 * dritten Breakpoint braucht, hat ein Layout-Problem an anderer Stelle. */
@media (max-width:940px) {
  .card { grid-template-columns:1fr }
  .card .pic { min-height:200px }
  .card .buy { border-left:none;border-top:1px solid var(--line) }
  .dhero .in:has(.shot), .detail, .band .in, .rueckseite .in, .kontakt-block { grid-template-columns:1fr }
  .ca-schritte { grid-template-columns:1fr 1fr }
  .rs-geraet { margin:0 auto; width:min(300px,78%) }
  .tech { position:static }
  /* Handymenue, Variante B (Joern, 09.10.): Vollbild unter der Leiste, Kacheln mit Symbol,
     darunter Anrufen/WhatsApp/Instagram, Bereichswechsel und Verfuegbarkeit. Der Punkt
     "Kontakt" entfaellt hier - die Kontaktzeile ersetzt ihn. Der Burger wird zum X. */
  .nav { position:relative; z-index:40 }
  .nav .burger { display:grid; width:44px; height:44px; place-content:center; margin-right:-12px }
  .nav .burger i { transition:transform .2s, opacity .2s }
  .nav .mnav-schalter:checked + .burger i:nth-child(1) { transform:translateY(6px) rotate(45deg) }
  .nav .mnav-schalter:checked + .burger i:nth-child(2) { opacity:0 }
  .nav .mnav-schalter:checked + .burger i:nth-child(3) { transform:translateY(-6px) rotate(-45deg) }
  .nav ul { display:none; position:absolute; left:0; right:0; top:100%; min-height:100vh; grid-template-columns:1fr 1fr; align-content:start; gap:10px; margin:0; padding:14px var(--seitenrand) 40px; background:var(--ink); border-top:1px solid var(--linie-dunkel) }
  .nav .mnav-schalter:checked ~ ul:not(.nav-privat), html[data-bereich="privat"] .nav .mnav-schalter:checked ~ ul.nav-privat { display:grid }
  body:has(.nav .mnav-schalter:checked) { overflow:hidden }
  .nav ul li { min-width:0 }
  .nav ul li.kontakt-punkt { display:none }
  .nav ul li > a:not(.btn) { display:flex; flex-direction:column; justify-content:space-between; gap:14px; min-height:88px; padding:14px 13px 13px; border:1px solid var(--linie-dunkel); border-radius:var(--r-4); background:var(--ink2); color:#fff; font-size:16px; font-weight:800; letter-spacing:-.01em; line-height:1.15; overflow-wrap:anywhere }
  .nav ul li > a svg { display:block; width:24px; height:24px; fill:none; stroke:var(--org); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
  .nav ul li.kontaktzeile, .nav ul li.wechsel, .nav ul li:last-child { grid-column:1 / -1 }
  .nav ul li.kontaktzeile { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:2px }
  .nav ul li.kontaktzeile a { display:block; min-height:0; background:none; padding:11px 4px; border:1px solid var(--linie-dunkel); border-radius:var(--r); color:var(--hell); font-size:13.5px; font-weight:700; text-align:center }
  .nav ul li.wechsel a { min-height:0; padding:12px 0 4px; border:none; background:none; color:var(--org); font-size:15px; font-weight:700; text-align:center; align-items:center }
  .nav ul .btn { display:block; width:100%; padding:15px; font-size:17px; font-weight:800; text-align:center; color:var(--ink) }
  .ohead .in:has(.kopfbild), .kasten { grid-template-columns:1fr } .staedte { columns:2 } .ohead .kopfbild { max-width:none }
  .suche { grid-template-columns:1fr 1fr } .facts li { padding:12px 0; border-right:none; border-bottom:1px solid var(--line) } .facts li:last-child { border-bottom:none }
}
@media (max-width:600px) {
  .dhero .quick { grid-template-columns:1fr }
  .staedte { columns:1 }
  .ca-schritte { grid-template-columns:1fr }
  .anfrage .rechnung-felder { grid-template-columns:1fr }
  .prosa table { display:block; overflow-x:auto; white-space:nowrap }
  .merkleiste .merk-knoepfe, .merkleiste .btn { width:100% }
  /* Handy (Joern, 08.10.): Leiste einzeilig, Kopf kuerzer, Suche kompakt - vorher fuellte
     die Suchkarte allein den ganzen Bildschirm und der Knopf lag unter der Kante. */
  .promo { font-size:12.5px; padding:7px 12px } .promo-zusatz { display:none }
  .kick { font-size:10px; letter-spacing:.1em; margin-bottom:10px }
  /* Foto nur hinter der Ueberschrift, nach unten ins Dunkle auslaufend: hinter der
     Suchkarte blitzten sonst helle Stellen des Messestands durch (Joern, 09.10.). */
  .shero-foto { bottom:auto; height:360px; object-position:center top; -webkit-mask-image:linear-gradient(#000 45%, transparent); mask-image:linear-gradient(#000 45%, transparent) }
  .shero::after { background:linear-gradient(180deg,rgba(23,21,18,.82),rgba(23,21,18,.94) 360px) }
  .shero { padding:26px 0 30px } .shero h1 { margin-bottom:10px } .shero .sub { font-size:16px; line-height:1.5 }
  .shero .avail { margin-top:20px } .avail { padding:16px }
  .suchkopf { margin-bottom:10px } .suchkopf h2 { font-size:19px } .suchkopf span { display:none }
  .suche { grid-template-columns:1fr 1fr; gap:10px }
  .suche label { grid-template-rows:1fr auto; font-size:12px }
  .suche label small { display:none }
  .suche label:nth-of-type(3), .suche .btn { grid-column:1 / -1 }
  .suche .btn { padding:14px 18px; font-size:16px }
  .suche .hinweis-klein { font-size:12.5px }
  .suche input { font-size:16px; padding:10px }
}