/* ════════════════════════════════════════════════════════════ BASH ROOMS — Markenfarben #A83636 (Rot) · #3C3C3C (Dunkelgrau) Mobil zuerst. Systemschriften. Keine externen Ladevorgänge. ════════════════════════════════════════════════════════════ */ @font-face{font-family:Anton;src:url(/assets/fonts/anton.woff2) format('woff2'); font-weight:400;font-style:normal;font-display:swap} :root{ --rot:#a83636; --rot-dunkel:#8a2b2b; --rot-hell:#c85a5a; --dunkel:#3c3c3c; --dunkel2:#333333; --dunkel3:#4a4a4a; --bg:#ffffff; --bg2:#f5f3f2; --bg3:#eceae9; --txt:#3c3c3c; --dim:#6f6f6f; --line:#e2dfde; --wrap:1160px; --r:12px; --klein:.94rem; --mikro:.82rem; --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{background:var(--bg);color:var(--txt);font:400 17px/1.65 var(--sans);overflow-x:hidden} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px} a{color:inherit;text-decoration:none} img{max-width:100%;height:auto} h1,h2,h3,h4{font-weight:800;line-height:1.1;letter-spacing:-.022em} /* Untergrenze am längsten Wort GEMESSEN, nicht geschätzt (12.08.2026, 390 px): verfügbar 350 px · „Junggesellenabschied" bei 40 px = 413 px → Wortbruch „Geschäftsbedingungen" bei 34 px = 366 px → immer noch zu breit bei 32 px = 343 px → passt, mit 7 px Luft Deshalb 2rem statt 2.5rem als Untergrenze. `hyphens:auto` steht zusätzlich oben — es wirkt auf echten Geräten, nicht aber im Kopflos-Chrome (dort fehlen die deutschen Trennmuster). Die Schriftgröße ist die verlässliche Absicherung, die Silbentrennung die Kür. */ h1{font-size:clamp(2rem,7vw,4.6rem)} h2{font-size:clamp(1.9rem,4.6vw,3rem);margin:0 0 .45em} h3{font-size:1.35rem;margin:0 0 .35em} p{margin:0 0 1.05em} strong{font-weight:700} .klein{font-size:var(--klein);color:var(--dim)} .skip{position:absolute;left:-9999px} .skip:focus{left:12px;top:12px;background:var(--rot);color:#fff;padding:10px 16px;border-radius:8px;z-index:99} /* ── Info-Leiste ── */ .info-leiste{background:var(--dunkel);color:rgba(255,255,255,.85);font-size:var(--klein);padding:11px 0} .info-leiste .wrap{display:flex;gap:22px;flex-wrap:wrap;justify-content:center} .info-leiste b{color:#fff;font-weight:600} /* ── Kopfzeile ── */ .kopf{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97); /* KEIN backdrop-filter hier. Er erzeugt einen Bezugsrahmen fuer position:fixed — das Mobilmenue (.mobil-drop) wurde dadurch auf die Hoehe der Kopfzeile gequetscht (63 statt 772 px) und war unbrauchbar. Der Hintergrund ist ohnehin zu 97 % deckend, die Unschaerfe war praktisch unsichtbar. (05.08.2026) */ border-bottom:1px solid var(--line);box-shadow:0 1px 12px rgba(0,0,0,.05)} .kopf-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:80px} .logo{display:flex;align-items:center;gap:0;color:var(--dunkel);line-height:1} .logo img{width:56px;height:56px;display:block;flex:none} .logo b{font-family:Anton,"Arial Narrow",sans-serif;font-weight:400;font-size:3.4rem; letter-spacing:.015em;line-height:1;text-transform:uppercase;display:block} .logo b span{color:var(--rot)} .nav{display:flex;align-items:center;gap:6px;font-size:1.05rem;font-weight:600} .nav>a{padding:9px 13px;color:var(--dunkel)} .nav>a:hover{color:var(--rot)} .nav .cta{background:var(--rot);color:#fff;font-weight:700;padding:12px 22px;border-radius:8px} .nav .cta:hover{background:var(--rot-dunkel);color:#fff} .menu{position:relative} .menu summary{list-style:none;cursor:pointer;padding:9px 13px;color:var(--dunkel)} .menu summary::-webkit-details-marker{display:none} .menu summary::after{content:"▾";margin-left:5px;font-size:.75em;color:var(--dim)} .menu[open] summary{color:var(--rot)} .drop{position:absolute;top:100%;left:0;min-width:210px;background:#fff;border:1px solid var(--line); border-radius:var(--r);padding:7px;display:grid;box-shadow:0 16px 40px rgba(0,0,0,.13)} .drop a{padding:10px 12px;border-radius:7px;color:var(--dunkel)} .drop a:hover{background:var(--bg2);color:var(--rot)} /* ── Mobile Navigation ── */ .mobilnav{display:none} .mobilnav summary{list-style:none;cursor:pointer;width:46px;height:46px;display:flex; flex-direction:column;justify-content:center;gap:5px;padding:0 11px; border:2px solid var(--dunkel);border-radius:8px} .mobilnav summary::-webkit-details-marker{display:none} .mobilnav summary span{display:block;height:2.5px;background:var(--dunkel);border-radius:2px; transition:transform .18s,opacity .18s} .mobilnav[open] summary span:nth-child(1){transform:translateY(7.5px) rotate(45deg)} .mobilnav[open] summary span:nth-child(2){opacity:0} .mobilnav[open] summary span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)} .mobil-drop{position:fixed;left:0;right:0;top:80px;bottom:0;z-index:60;overflow-y:auto;background:#fff; border-top:1px solid var(--line);padding:22px 20px 40px} .mobil-drop h4{font-size:.8rem;letter-spacing:.09em;color:var(--dim);margin:22px 0 9px} .mobil-drop .cta{display:block;text-align:center;background:var(--rot);color:#fff; font-weight:700;padding:16px;border-radius:8px} .mobil-gitter{display:grid;grid-template-columns:1fr 1fr;gap:2px} .mobil-gitter a{padding:14px 12px;background:var(--bg2);border-radius:7px;color:var(--dunkel);font-size:1rem;font-weight:500} /* ── Held mit Foto ── */ .held{position:relative;background:var(--dunkel2);background-size:cover;background-position:center; color:#fff;display:flex;align-items:center;min-height:min(88vh,820px)} .held::before{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(28,28,28,.55) 0%,rgba(28,28,28,.45) 30%,rgba(28,28,28,.7) 70%,rgba(28,28,28,.9) 100%)} .held .wrap{position:relative;z-index:1;padding:96px 20px;text-align:center;width:100%} .held h1{color:#fff;max-width:18ch;margin:0 auto} .held .sub{font-size:clamp(1.05rem,2.2vw,1.28rem);color:rgba(255,255,255,.9);max-width:56ch;margin-top:14px;margin-left:auto;margin-right:auto} .marke{display:inline-block;font-size:var(--mikro);font-weight:700;letter-spacing:.1em; color:#fff;background:var(--rot);padding:7px 14px;border-radius:5px;margin-bottom:16px} .held .beweis{color:rgba(255,255,255,.85);margin-top:20px} .held .sterne{color:#ffc94d} .knopf{display:inline-block;background:var(--rot);color:#fff;font-weight:700;font-size:1.02rem; padding:16px 32px;border-radius:8px;margin-top:24px;box-shadow:0 6px 18px rgba(168,54,54,.3)} .knopf:hover{background:var(--rot-dunkel);color:#fff} .knopf.zweit{background:rgba(255,255,255,.13);border:2px solid rgba(255,255,255,.55); color:#fff;margin-left:10px;padding:14px 28px;box-shadow:none;backdrop-filter:blur(4px)} .knopf.zweit:hover{background:#fff;color:var(--dunkel);border-color:#fff} .abs .knopf.zweit{background:#fff;border-color:var(--dunkel);color:var(--dunkel)} .abs .knopf.zweit:hover{background:var(--dunkel);color:#fff} /* ── Kennzahlenband ── */ .band{background:var(--rot);color:#fff} .band-in{display:grid;grid-template-columns:repeat(2,1fr)} .band div{padding:11px 12px;text-align:center} .band b{display:block;font-size:2.1rem;font-weight:800;line-height:1.1} .band span{font-size:var(--klein);opacity:.9;letter-spacing:.02em;font-weight:500} /* ── Abschnitte ── */ .abs{padding:62px 0} .abs.grau{background:var(--bg2)} .abs.dunkel{background:var(--dunkel);color:rgba(255,255,255,.85)} .abs.dunkel h2,.abs.dunkel h3,.abs.dunkel strong{color:#fff} .abs.dunkel .karte{background:var(--dunkel3);border-color:#585858;color:rgba(255,255,255,.85)} .abs.dunkel .karte h3,.abs.dunkel .karte h2{color:#fff} .abs.dunkel .klein{color:rgba(255,255,255,.62)} .brauen{display:block;font-size:1.05rem;font-weight:800;letter-spacing:.03em;color:var(--rot);margin-bottom:8px} .abs.dunkel .brauen{color:var(--rot-hell)} .text{max-width:68ch} .text h3{margin-top:1.4em;color:var(--rot)} .abs.dunkel .text h3{color:var(--rot-hell)} .text ul{margin:0 0 1.1em 1.15em} .text li{margin-bottom:.42em} .text a{color:var(--rot);text-decoration:underline;text-underline-offset:3px} .gitter{display:grid;gap:18px;grid-template-columns:1fr} .karte{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px} .karte p:last-child{margin-bottom:0} a.karte{transition:border-color .15s,box-shadow .15s,transform .15s} a.karte:hover{border-color:var(--rot);box-shadow:0 12px 30px rgba(0,0,0,.1);transform:translateY(-3px)} .mehr{display:inline-block;margin-top:12px;color:var(--rot);font-weight:700;font-size:var(--klein)} .usp{display:grid;gap:12px;margin:24px 0 0;max-width:900px} .usp li{list-style:none;padding-left:30px;position:relative} .usp li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:14px; background:var(--rot);border-radius:3px} .held .usp li{color:rgba(255,255,255,.92)} .held .usp li::before{background:#fff} .preisbox{background:#fff;border:2px solid var(--rot);border-radius:var(--r);padding:30px;max-width:620px} .preisbox .gross{font-size:3.6rem;font-weight:800;color:var(--rot);line-height:1;letter-spacing:-.03em} .abs.dunkel .preisbox{background:var(--dunkel3);border-color:var(--rot-hell)} .abs.dunkel .preisbox .gross{color:#fff} .faq details{border-bottom:1px solid var(--line);padding:17px 0} .abs.dunkel .faq details{border-color:#565656} .faq summary{cursor:pointer;font-weight:700;font-size:1.07rem;list-style:none; display:flex;justify-content:space-between;gap:14px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--rot);font-weight:800;flex:none} .abs.dunkel .faq summary::after{color:var(--rot-hell)} .faq details[open] summary::after{content:"–"} .faq p{margin:11px 0 0;color:var(--dim)} .abs.dunkel .faq p{color:rgba(255,255,255,.7)} .beweis{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--dim);font-size:.95rem} .sterne{color:var(--rot);letter-spacing:2px} .siegel{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;text-align:center} .siegel div{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 10px} .siegel b{display:block;font-size:1.9rem;font-weight:800;color:var(--rot)} .siegel span{font-size:var(--klein);color:var(--dim)} /* Die Siegelkachel trägt ein Bild statt einer Zahl. Sie muss trotzdem dieselbe Höhe halten wie ihre drei Nachbarn, sonst steht sie schief in der Reihe — deshalb Flex mit zentrierter Ausrichtung statt der Zahl-über-Text-Anordnung. */ .siegel-bild{display:flex;align-items:center;justify-content:center;gap:12px} .siegel-bild img{width:64px;height:auto;flex:none} .siegel-bild span{text-align:left;line-height:1.35} .siegel-bild .klein-b{display:inline;font-size:var(--klein);color:var(--rot);font-weight:700} @media(max-width:520px){.siegel-bild{flex-direction:column;gap:8px}.siegel-bild span{text-align:center}} /* ── Bilder ── */ .bild{display:block;width:100%;height:auto;border-radius:var(--r);background:var(--bg3)} .bild-karte{padding:0;overflow:hidden;display:block} .bild-karte .bild{border-radius:0;aspect-ratio:4/3;object-fit:cover} .zwei{display:grid;gap:26px;grid-template-columns:1fr;align-items:center} .zwei .bild{aspect-ratio:4/3;object-fit:cover} /* ── Fußzeile ── */ .fuss{padding:52px 0 24px;background:var(--dunkel2);color:rgba(255,255,255,.78);font-size:.93rem} .fuss-in{display:grid;gap:28px;grid-template-columns:1fr} .fuss h3{font-size:.8rem;letter-spacing:.1em;color:rgba(255,255,255,.5);margin-bottom:11px} .fuss a{display:block;padding:4px 0;color:rgba(255,255,255,.78)} .fuss a:hover{color:#fff} /* Buchstabenabstand wie im Kopf (.015em). Hier standen .02em, was bei derselben Schrift eine sichtbar andere Anmutung ergibt — zusammen mit dem fehlenden Leerzeichen wirkte die Wortmarke im Fussbereich wie eine zweite Fassung. (Tristan, 10.09.2026) Der Rotton bleibt bewusst UNTERSCHIEDLICH: Im Kopf steht die Marke auf Weiss, dort traegt --rot (#a83636). Im Fussbereich steht sie auf #333333, und dort verschwindet dasselbe Rot fast (Kontrast 1,7:1). --rot-hell (#c85a5a) kommt auf 2,7:1. Fuer Wortmarken gilt die Kontrastvorgabe aus WCAG 1.4.3 ausdruecklich NICHT — Logos sind ausgenommen. Lesbar sein soll die Marke trotzdem. */ .fuss-logo{font-family:Anton,"Arial Narrow",sans-serif;font-weight:400;font-size:1.8rem;letter-spacing:.015em;text-transform:uppercase;color:#fff} .fuss-logo span{color:var(--rot-hell)} .fuss .klein{color:rgba(255,255,255,.5)} .copy{margin-top:30px;padding-top:19px;border-top:1px solid rgba(255,255,255,.12)} /* `anywhere` trennte mitten im Wort und ohne Trennstrich — aus "Gruppenaktivität" wurde "Gruppenaktivitä / t". Gemeint war Schutz vor überlaufenden Wörtern auf schmalen Bildschirmen; dafür genügt `break-word`, das nur eingreift, wenn ein Wort allein nicht in die Zeile passt. */ /* `overflow-wrap:break-word` allein bricht MITTEN IM WORT, ohne Trennstrich: Am Handy stand auf /jga „Junggesellenabsc / hied bei BASH ROOMS". Deutsche Komposita sind für schmale Spalten schlicht zu lang. `hyphens:auto` trennt stattdessen an Silbengrenzen mit Bindestrich (die Seite ist als lang="de" ausgezeichnet, sonst wirkt es nicht). Der harte Bruch bleibt als Notnagel für Fälle, in denen selbst die Trennung nicht reicht — etwa lange URLs. */ h1,h2,h3,p,li{overflow-wrap:break-word} h1,h2,h3{hyphens:auto} /* ── Breitere Bildschirme ── */ @media(min-width:700px){ .gitter{grid-template-columns:repeat(3,1fr)} .band-in{grid-template-columns:repeat(4,1fr)} .usp{grid-template-columns:repeat(3,1fr)} .siegel{grid-template-columns:repeat(4,1fr)} .zwei{grid-template-columns:1.05fr .95fr;gap:44px} .fuss-in{grid-template-columns:2fr 1fr 1fr 1fr} } /* 861–979 px: Seit „Gutscheine" im Kopf steht (Tristan, 11.09.2026), passen die sieben Punkte hier nicht mehr neben das Logo — der rote Knopf ragte über den Rand. Deshalb wechselt in diesem Bereich NUR das Menü auf die drei Striche; Kopfhöhe, Logo und Held bleiben wie am großen Bildschirm. Das Klappmenü hängt bei 80 px an, das ist genau die Kopfhöhe hier. */ @media(min-width:861px) and (max-width:979px){ .nav{display:none} .mobilnav{display:block} } @media(max-width:860px){ .nav{display:none} .mobilnav{display:block} .kopf-in{height:72px} .mobil-drop{top:72px} .logo img{width:44px;height:44px} .logo b{font-size:2.2rem} .held{min-height:auto} .held .wrap{padding-top:44px;padding-bottom:36px} /* Der Held ist eine Flex-ZEILE (Text links, Bild rechts) — am Bildschirm genau richtig, am Handy fatal: Beide Kinder blieben nebeneinander, das Bild wurde auf 40 px zusammengequetscht und ragte aus dem Bildschirm. Auf /jga und /kindergeburtstag scrollte die Seite dadurch waagerecht, auf allen übrigen Anlass-Hubs war der Heldenbereich schlicht eine graue Fläche ohne Bild. Gemessen am 12.08.2026 bei 390 px, gefunden von mobil-pruefen.js. Untereinander statt nebeneinander — dieselbe Reihenfolge wie im Quelltext. */ .held{flex-direction:column} .held > .wrap{width:100%} .held-bild{padding-top:0;padding-bottom:34px} .held-bild img{width:100%;height:auto;max-height:52vh;object-fit:cover} .abs{padding:46px 0} .info-leiste{display:none} } /* ── Heldenvideo ── */ .held-video{overflow:hidden} .held-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .held-video::before{z-index:1} .held-video .wrap{z-index:2} /* Heller Streifen zwischen Kopfzeile und Held vermeiden */ .held{background-color:var(--dunkel2)} .held-film{background:var(--dunkel2)} .zwei .text h2{margin-top:0} /* ── Kacheln: einheitliche Innenabstände ── */ .bild-karte .inhalt{padding:16px 20px 19px} .bild-karte .inhalt h3{margin:0 0 3px;font-size:1.3rem} .bild-karte .inhalt p{margin:0} .bild-karte .inhalt .mehr{margin-top:8px} /* ── Rückruf-Hinweis ── */ .rueckruf{margin:16px 0 0;font-size:var(--klein);color:var(--dim)} .rueckruf a{color:var(--rot);font-weight:700;text-decoration:underline;text-underline-offset:3px} /* ── Heldenbereich mittig ── */ .held .usp{justify-items:center;max-width:840px;margin-left:auto;margin-right:auto} .held .usp li{padding-left:26px;text-align:left} .held .beweis{justify-content:center} .held .knopf.zweit{margin-left:10px} @media(max-width:699px){ .held .usp{justify-items:start} .held .knopf.zweit{margin-left:0;margin-top:12px} } /* ── Inhaltsseiten ── */ .kopfseite{padding:56px 0 34px;border-bottom:1px solid var(--line)} /* H1 ohne Breitenbegrenzung (14.08.2026). `20ch` ergaben 882 px statt der verfügbaren 1120 — gemessen brach dadurch „Werde Event-Moderator (m/w/d) bei BASH ROOMS" auf /job in DREI Zeilen um, obwohl 238 px frei blieben, und die Absage auf /online in zwei. Überschriften werden überflogen, nicht Zeile für Zeile gelesen; eine Lesebreite hat hier keinen Zweck. Gehört zur selben Entscheidung wie der aufgehobene Satzspiegel weiter unten. */ /* Kein max-width. 62ch waren hier eine Lesebreite ohne Zweck: Neben dem Vorspann steht nichts, also blieb rechts die halbe Seite leer, und der Satz brach nach zwei Dritteln um. Bei /preise war das am 02.08.2026 schon als Sonderfall behoben (.preis-kopfseite .sub weiter unten) — als Regel erkannt wurde es erst, als Tristan es am 04.08. zum dritten Mal ansprach. Ein Sonderfall, der dreimal auftritt, ist keiner. */ .kopfseite .sub{font-size:clamp(1.05rem,2.2vw,1.25rem);color:var(--dim);margin-top:14px} /* Linie oben UND unten. Vorher gab es nur die untere: Der obere Rand war ein weicher Farbwechsel ohne Kante, der untere eine klare Linie. Dadurch wirkte das Band nicht wie ein abgesetzter Kasten, sondern wie ein Streifen, der verrutscht ist. Aufgefallen am 04.08.2026 auf /eventzeiten. */ .band-hinweis{background:#fdf3f2;border-top:1px solid #f0dcda;border-bottom:1px solid #f0dcda;padding:20px 0} .band-hinweis p{margin:0;color:#8a2b2b;font-weight:600} .band-hinweis p+p{margin-top:6px} .text.breit{max-width:none} .text table{width:100%;border-collapse:collapse;margin:18px 0;font-size:var(--klein)} .text th{background:var(--bg2);text-align:left;padding:10px 12px;border-bottom:2px solid var(--line);font-weight:700} .text td{padding:9px 12px;border-bottom:1px solid var(--line)} .text td:last-child,.text th:last-child{text-align:right} /* Hier standen sechs Zeilen für eine `.preistabelle` aus `div`-Kacheln — die Fassung, bevor daraus eine echte `` wurde. Seither wurde jede Regel davon von `.preisbox .preistabelle` (Zeile ~755) überschrieben, die höher gewichtet ist; `.preistabelle div` traf ohnehin nichts mehr, weil die Kinder jetzt `thead`/`tbody` heißen. Gemessen am 26.08.2026: 73 Vorkommen, alle innerhalb einer `.preisbox`, null außerhalb — die Regeln waren wirkungslos. Warum das trotzdem gefährlich war: Zwei widersprüchliche Blöcke zum selben Namen laden dazu ein, den falschen zu ändern. Genau diese Sorte Gewichtungs-Verwechslung hat in diesem Projekt schon mehrfach Zeit gekostet. */ /* Nur für Screenreader: sichtbar für die Vorlesehilfe, unsichtbar am Bildschirm. `display:none` und `visibility:hidden` scheiden aus — die nehmen den Text auch aus dem Vorlesebaum. Deshalb 1×1 px und weggeschnitten statt versteckt. */ .nur-vorlesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} /* ══════════════════════════════════════════════════════════════════════════ Anlass×Stadt-Seiten mit echtem Inhalt Vorbild ist die Altseite: Bilder in fast jedem Abschnitt, zweispaltig, dichter gesetzt. Die reine Textfassung davor war zu monoton. ══════════════════════════════════════════════════════════════════════════ */ /* Kompakter Heldenbereich für Unterseiten: Text links, Foto rechts. Der große, bildschirmfüllende Held bleibt der Startseite vorbehalten. */ .held.kompakt{min-height:0;background:var(--dunkel)} .held.kompakt::before{background:none} .held.kompakt .wrap{padding:44px 20px 48px;text-align:left} .held.kompakt h1{margin:0;max-width:none;font-size:clamp(1.9rem,4.4vw,3rem)} .held.kompakt .sub{margin-left:0;margin-right:0;max-width:52ch} .held.kompakt .usp{gap:8px;margin-top:18px} .held.kompakt .beweis{justify-content:flex-start} .held-zwei{display:grid;gap:28px;grid-template-columns:1fr;align-items:center} .held-zwei .bild{aspect-ratio:4/3;object-fit:cover} @media(min-width:860px){ .held-zwei{grid-template-columns:1.05fr .95fr;gap:40px} .held.kompakt .wrap{padding:56px 20px 60px} } /* Vertrauensleiste direkt unter dem Helden */ .vertrauen{display:grid;gap:14px;grid-template-columns:1fr;text-align:center} .vertrauen div{padding:4px} .vertrauen b{display:block;font-size:1.55rem;font-weight:800;color:var(--rot);line-height:1.15} .vertrauen span{font-size:var(--klein);color:var(--dim)} @media(min-width:700px){.vertrauen{grid-template-columns:repeat(3,1fr);gap:22px}} /* Ablauf: Foto, große Nummer, Text — statt schlichter Aufzählung */ .schritte{list-style:none;margin:0;padding:0;display:grid;gap:22px;grid-template-columns:1fr} .schritte li{position:relative} .schritte .bild{aspect-ratio:3/2;object-fit:cover;margin-bottom:14px} .schritte .nr{position:absolute;top:10px;left:10px;width:44px;height:44px;border-radius:50%; background:var(--rot);color:#fff;font-weight:800;font-size:1.35rem; display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.28)} /* Ohne Ablaufbild (Kindergeburtstag-Seiten seit 11.08.2026) sitzt die absolut positionierte Nummer sonst AUF der Ueberschrift - top/left waren fuer die Bildecke gedacht. Im Fluss steht sie stattdessen ueber der Ueberschrift. */ .schritte li.ohne-bild .nr{position:static;margin:0 0 12px;box-shadow:none} .schritte h3{margin:0 0 5px;font-size:1.24rem} .schritte p{margin:0;color:var(--dim);font-size:.97rem} @media(min-width:700px){.schritte{grid-template-columns:repeat(3,1fr);gap:26px}} /* Hakenliste */ .haken{list-style:none;margin:0;padding:0;display:grid;gap:15px} .haken li{position:relative;padding-left:34px} .haken li::before{content:"✓";position:absolute;left:0;top:-1px;width:23px;height:23px; border-radius:50%;background:var(--rot);color:#fff;font-size:.82rem;font-weight:700; display:flex;align-items:center;justify-content:center} .haken strong{display:block} /* Große Überschrift seitlich, Text daneben — wie auf der Altseite */ .seitlich{display:grid;gap:22px;grid-template-columns:1fr} .seitlich h2{margin:0;font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.1} /* Spaltenbreiten als Variablen, nicht als Zahlen im Regelwerk. Grund: Es gibt die gespiegelte Fassung `.seitlich.rechts`. Stünden die Werte zweimal ausgeschrieben, liefen sie beim nächsten Feinschliff auseinander — genau das war schon passiert: eine spätere Regel verbreiterte die Überschriftenspalte von .85fr auf 1fr, die Spiegelfassung wusste nichts davon. */ .seitlich{--sp-schmal:.85fr;--sp-breit:2fr} @media(min-width:860px){ .seitlich{grid-template-columns:var(--sp-schmal) var(--sp-breit);gap:46px} .seitlich h2{position:sticky;top:96px} /* Spiegelbild: Text links, Überschrift rechts. Nur ab 860 px — im einspaltigen Mobil-Layout muss die Überschrift ihrem Text vorangehen, sonst stünde sie darunter und die Zuordnung wäre dahin. Deshalb sitzt der order-Tausch hier drin und nicht bei der Grundregel. */ .seitlich.rechts{grid-template-columns:var(--sp-breit) var(--sp-schmal)} .seitlich.rechts h2{order:2} .seitlich.rechts .text{order:1} } /* Zitate */ blockquote.karte{margin:0} blockquote.karte cite{display:block;margin-top:10px;font-style:normal;font-weight:700; font-size:var(--klein);color:var(--dim)} blockquote.karte .sterne{margin:0 0 8px;font-size:1rem} /* Herkunftsangabe über jedem Zitat. Steht anstelle der früheren ★★★★★, die für jede genannte Person eine Bewertung behaupteten, die in keinem Export steht. Bewusst zurückhaltend: Es ist eine Quellenangabe, kein Gütesiegel. */ blockquote.karte .quelle-zitat{margin:0 0 8px;font-size:var(--klein); font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)} blockquote.karte .quelle-zitat::before{content:"";display:inline-block; width:7px;height:7px;margin-right:7px;border-radius:50%; background:var(--rot);vertical-align:middle} /* Vierergruppen sollen in einer Reihe stehen, nicht als 3+1 umbrechen */ @media(min-width:700px){.gitter.vier{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){.gitter.vier{grid-template-columns:repeat(4,1fr)}} .gitter.vier .karte{padding:20px} .gitter.vier h3{font-size:1.1rem} /* Video im kompakten Helden der Unterseiten — gleiche Stelle wie sonst das Foto */ .held-klein{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover; border-radius:var(--r);background:var(--dunkel2)} /* Kein `display:none` mehr bei reduzierter Bewegung — das riss hier ein 580 px breites Loch neben den Text. Den Tausch Video↔Standbild erledigen jetzt `.film-bewegt` / `.film-ruhig` weiter oben, für beide Heldenarten gemeinsam. (26.08.2026) */ /* Häkchen statt leerer Kästchen in der USP-Liste des kompakten Helden */ .held.kompakt .usp li::before{content:"✓";background:var(--rot);color:#fff; width:20px;height:20px;border-radius:50%;top:.15em; display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700} .held.kompakt .usp li{padding-left:29px} @media(min-width:700px){.held.kompakt .usp{grid-template-columns:repeat(3,1fr);gap:10px 16px}} /* ── Formulare (Buchung, Kontakt) ────────────────────────────────────────── */ .formular{margin-top:24px} .felder{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:700px){.felder{grid-template-columns:1fr 1fr}.feld.breit{grid-column:1/-1}} .feld{display:flex;flex-direction:column;gap:5px} .feld label{font-weight:600;font-size:.94rem} .feld input,.feld select,.feld textarea{ padding:11px 13px;border:1px solid var(--line);border-radius:var(--r); font:inherit;font-size:1rem;background:#fff;color:var(--txt);width:100%} .feld input:focus,.feld select:focus,.feld textarea:focus{ outline:2px solid var(--rot);outline-offset:1px;border-color:var(--rot)} .feld textarea{resize:vertical;min-height:110px} .feld .hinweis{font-size:var(--klein);color:var(--dim)} .pflicht{color:var(--rot)} .feld.kasten label{display:flex;gap:10px;align-items:flex-start;font-weight:400;cursor:pointer} .feld.kasten input{width:18px;height:18px;flex:0 0 auto;margin-top:2px;accent-color:var(--rot)} .feld.kasten a{color:var(--rot);text-decoration:underline;text-underline-offset:3px} .formular button{border:0;cursor:pointer;font:inherit} /* Blockzitat im Fließtext — für Tipps und Hervorhebungen */ .text blockquote.tipp{margin:22px 0;padding:16px 20px;background:var(--bg2); border-left:4px solid var(--rot);border-radius:0 var(--r) var(--r) 0} .text blockquote.tipp p{margin:0} /* ── Heldenbereich der Unterseiten: Größe des Videos ───────────────────────── Zwei Rückmeldungen am 26.07.2026, in dieser Reihenfolge: „das Video könnte etwas größer sein" → Spalte verbreitert, bis zum Rand gezogen „video ist zu groß jetzt, etwas dazwischen" → auf 1:1 eingependelt „mach es 10% nochmal größer" → 0,9 : 1,1 Das Verhältnis 0,9 : 1,1 gibt dem Video 55 % statt 50 % der Inhaltsbreite, also genau 10 % mehr als bei gleich breiten Spalten. Ausgangspunkt war 1,05 : 0,95 zugunsten des Textes. */ /* minmax(0,…) ist hier entscheidend, nicht Kosmetik: Ohne das dürfen fr-Spalten nicht unter ihre Inhaltsbreite fallen. Die große H1 erzwingt dann eine breite Textspalte und quetscht das Video zusammen — bei 1400 px unauffällig, bei 900 px schrumpft es auf ein Viertel. Am 26.07.2026 aufgefallen, als das Fenster schmaler war als mein Testfenster. */ /* Rechenweg, damit das nicht wieder erraten wird: Der Stand, den Tristan als Ausgangspunkt bezeichnet hat („1:1"), war in Wahrheit nicht 1:1 — durch den fehlenden minmax(0,…) war die Textspalte breiter als die Hälfte, gemessen rund 630 px Text zu 470 px Video bei 1180 px Inhaltsbreite. Gewünscht: Video 10 % größer, Text soll aber weiterhin die H1 auf zwei Zeilen und die Häkchen dreispaltig tragen. Video 470 × 1,10 = 517 px Text 1180 − 42 − 517 = 621 px Verhältnis 621 : 517 ≈ 1,2 : 1 */ @media(min-width:860px){ .held-zwei{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:42px} .held.kompakt .wrap{padding:50px 20px 54px} } /* Sobald das Fenster breiter ist als der Inhaltsrahmen (1180 px), liegt rechts ungenutzter Platz. Den bekommt das Video — bis 16 px an den Fensterrand. So wächst es spürbar, ohne der Textspalte Breite zu nehmen: Die H1 bleibt auf zwei Zeilen, die Häkchen bleiben nebeneinander. Gemessen bei 1370 px Fenster: Video 490 → 585 px, Text unverändert 588 px. */ /* max(-90px, …) ist die Obergrenze und der eigentliche Punkt: Ohne sie wächst das Video mit der Fensterbreite mit — bei 1370 px sah es gut aus, bei 1920 px war es 844 px breit und hat die halbe Seite gefüllt. Getestet wurde bei 1370, gearbeitet wird bei 1920. Deshalb die feste Grenze. */ @media(min-width:1212px){ .held-zwei>div:last-child{margin-right:max(-90px, calc((100vw - 1180px) / -2 + 16px))} } .held-klein{aspect-ratio:16/9} /* Häkchenliste im Helden: nur nebeneinander, wenn wirklich Platz ist. Sonst brechen Wörter mitten durch („wetterunabhä ngig"). */ @media(min-width:700px){ .held.kompakt .usp{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px 20px} } .held.kompakt .usp li{hyphens:none;overflow-wrap:normal;word-break:normal} /* ══════════════════════════════════════════════════════════════════════════ Zweispaltige Textabschnitte — Ausrichtung und Aufzählungen Rückmeldung 27.07.2026: „grafisch wie auch formatiert nicht schön." Drei Ursachen: Bild vertikal zentriert (Loch oben rechts), Aufzählungen als graue Punkte statt der roten Häkchen aus dem Heldenbereich, und eine schmale Spalte, in der sechs Listenpunkte untereinander stehen. ══════════════════════════════════════════════════════════════════════════ */ /* Bild oben ausrichten statt mittig — sonst hängt es neben langem Text im Nichts */ .abs .zwei{align-items:start} .abs .zwei .bild{aspect-ratio:4/3;position:sticky;top:96px} /* Aufzählungen im Fließtext bekommen die roten Häkchen der Marke. Gilt für alle Textabschnitte, damit die Bildsprache durchgängig ist. */ .text ul{list-style:none;margin:18px 0 22px;padding:0;display:grid;gap:12px} .text ul li{position:relative;padding-left:32px} .text ul li::before{content:"✓";position:absolute;left:0;top:1px; width:21px;height:21px;border-radius:50%;background:var(--rot);color:#fff; font-size:.76rem;font-weight:700;display:flex;align-items:center;justify-content:center} .abs.dunkel .text ul li::before{background:var(--rot-hell)} /* Lange Listen zweispaltig, sobald Platz da ist — sechs Zeilen untereinander in einer schmalen Spalte wirken wie eine Aufzählung ohne Ende. */ @media(min-width:1000px){ .wrap>.text ul{grid-template-columns:1fr 1fr;gap:12px 34px} } /* ── Rasterfassung für Textabschnitte ({raster:bild} an der Überschrift) ────── Überschrift und Einleitung über die volle Breite, Aufzählung als Karten, Schlussabsatz neben dem Bild. Ersetzt die lange schmale Textspalte. */ .text.vorspann{font-size:1.1rem} .punkteraster{list-style:none;margin:30px 0 34px;padding:0;display:grid;gap:16px; grid-template-columns:1fr} .punkteraster li{position:relative;padding:20px 22px 20px 56px;background:#fff; border:1px solid var(--line);border-radius:var(--r);line-height:1.5} .abs.grau .punkteraster li{background:var(--bg)} .punkteraster li::before{content:"✓";position:absolute;left:20px;top:20px; width:24px;height:24px;border-radius:50%;background:var(--rot);color:#fff; font-size:.82rem;font-weight:700;display:flex;align-items:center;justify-content:center} @media(min-width:760px){.punkteraster{grid-template-columns:1fr 1fr}} @media(min-width:1080px){.punkteraster{grid-template-columns:repeat(3,1fr)}} .zwei.abschluss{align-items:center;gap:40px} .zwei.abschluss .bild{aspect-ratio:16/10;position:static} @media(min-width:860px){.zwei.abschluss{grid-template-columns:1.15fr 1fr}} /* Punkte links, Bild rechts auf exakt gleicher Höhe. Rückmeldung 27.07.2026: „Das Bild auf die gleiche Höhe wie die 6 Punkte und die Punkte etwas kleiner, dass sie genau neben das Bild klappen." align-items:stretch sorgt dafür, dass das Bild die Höhe der Kartenspalte übernimmt; object-fit:cover verhindert Verzerren. */ .raster-zwei{display:grid;gap:26px;grid-template-columns:1fr;margin:28px 0 30px; align-items:stretch} .raster-zwei .punkteraster{margin:0;grid-template-columns:1fr;gap:12px} .raster-bild{min-height:220px} .raster-bild .bild{width:100%;height:100%;object-fit:cover;aspect-ratio:auto} @media(min-width:760px){ .raster-zwei .punkteraster{grid-template-columns:1fr 1fr} } @media(min-width:1020px){ .raster-zwei{grid-template-columns:1.35fr 1fr;gap:32px} } /* Karten etwas kompakter, damit sechs Punkte neben das Bild passen */ .raster-zwei .punkteraster li{padding:15px 17px 15px 48px;font-size:1rem;line-height:1.45} .raster-zwei .punkteraster li::before{left:16px;top:15px;width:21px;height:21px;font-size:.74rem} .text.nachsatz{max-width:76ch} /* Schlussabsatz über die volle Breite — er soll auch unter dem Bild weiterlaufen, statt bei 76 Zeichen zu enden (Rückmeldung 27.07.2026). Die Schriftgröße bleibt, nur das Maß wird aufgehoben. */ .text.vorspann, .text.nachsatz{max-width:none} /* ── Einordnungszeile über der Überschrift ─────────────────────────────────── Rückmeldung 27.07.2026: Bei „Das typische Problem von Firmenveranstaltungen" über „Die Gruppe ist am selben Ort, aber nicht gemeinsam aktiv" wird die kleine Zeile überlesen — dann liest sich die große Überschrift wie eine Aussage über BASH ROOMS statt über das Problem, das wir lösen. Deshalb wird sie zum sichtbaren Etikett statt zur dekorativen Vorzeile: eigener Hintergrund, Versalien, mehr Abstand zur Überschrift. */ .brauen{display:inline-block;font-size:.86rem;font-weight:800;letter-spacing:.085em; text-transform:uppercase;color:var(--rot);background:rgba(168,54,54,.09); padding:8px 14px;border-radius:6px;margin-bottom:16px;line-height:1.35} .abs.dunkel .brauen{color:#fff;background:rgba(255,255,255,.14)} .held .brauen{color:#fff;background:var(--rot)} /* Rote Unterzeile unter der Überschrift — die Zuspitzung, die vorher als kleine Vorzeile darüberstand (getauscht am 27.07.2026, siehe Vorlage). */ .unterzeile{font-size:clamp(1.15rem,2.1vw,1.42rem);font-weight:700;line-height:1.3; color:var(--rot);margin:-4px 0 24px} .abs.dunkel .unterzeile{color:var(--rot-hell)} /* Die Unterzeile bekommt denselben Kasten wie die Etiketten — hellroter Grund, rote Schrift, abgerundet. Rückmeldung 28.07.2026: Der Stil hat gefallen, also wird er für die Zuspitzung übernommen statt nur für die kleinen Etiketten. */ .unterzeile{display:inline-block;background:rgba(168,54,54,.09); padding:11px 17px;border-radius:7px;margin:0 0 26px} .abs.dunkel .unterzeile{background:rgba(255,255,255,.13)} /* ══════════════════════════════════════════════════════════════════════════ Infotafel — Adresse, Anfahrt, Parken, Umgebung als Daten statt als Fließtext ══════════════════════════════════════════════════════════════════════════ */ .infotafel{display:grid;gap:1px;grid-template-columns:1fr;background:var(--line); border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:26px 0 20px} .tafel-feld{background:#fff;padding:24px 22px 26px} .abs.grau .tafel-feld{background:var(--bg)} .tafel-icon{display:block;font-size:1.5rem;line-height:1;margin-bottom:10px} .tafel-feld h3{font-size:.82rem;letter-spacing:.09em;text-transform:uppercase; color:var(--rot);margin:0 0 10px} .tafel-feld span{display:block;line-height:1.5} .tafel-feld span+span{margin-top:3px} @media(min-width:640px){.infotafel{grid-template-columns:1fr 1fr}} @media(min-width:1000px){.infotafel{grid-template-columns:repeat(4,1fr)}} /* Entfernungen als Zahlenreihe — die Zahl ist das Argument, nicht der Nebensatz */ .entfernungen{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:10px 30px; grid-template-columns:1fr} .entfernungen li{display:flex;gap:12px;align-items:baseline;font-size:var(--klein);color:var(--dim)} .entfernungen b{font-size:1.32rem;font-weight:800;color:var(--rot); font-variant-numeric:tabular-nums;min-width:5.6em} @media(min-width:820px){.entfernungen{grid-template-columns:repeat(3,1fr)}} /* ══════════════════════════════════════════════════════════════════════════ Zeitleiste — vorher · bei uns · danach ══════════════════════════════════════════════════════════════════════════ */ .zeitleiste{list-style:none;margin:28px 0 24px;padding:0;display:grid;gap:16px; grid-template-columns:1fr;counter-reset:z} .zeitleiste li{position:relative;padding:24px 24px 26px;border-radius:var(--r); background:#fff;border:1px solid var(--line)} .abs.grau .zeitleiste li{background:var(--bg)} .zeitleiste .stufe{display:block;font-size:.8rem;font-weight:800;letter-spacing:.11em; text-transform:uppercase;color:var(--dim);margin-bottom:9px} .zeitleiste p{margin:0;line-height:1.55} /* Die mittlere Stufe ist unser Teil — sie trägt Farbe, die Nachbarn treten zurück */ .zeitleiste li.kern{background:var(--rot);border-color:var(--rot);color:#fff; box-shadow:0 10px 30px rgba(168,54,54,.22)} .zeitleiste li.kern .stufe{color:rgba(255,255,255,.8)} @media(min-width:900px){ .zeitleiste{grid-template-columns:1fr auto 1fr auto 1fr;gap:0;align-items:stretch} .zeitleiste li{margin:0} .zeitleiste li.kern{transform:scale(1.045);z-index:1} /* Pfeile zwischen den Stufen */ .zeitleiste li:not(:last-child)::after{content:"→";position:absolute;right:-26px;top:50%; transform:translateY(-50%);font-size:1.5rem;color:var(--rot);z-index:2} .zeitleiste li:nth-child(1){margin-right:26px} .zeitleiste li:nth-child(2){margin:0 26px} .zeitleiste li:nth-child(3){margin-left:26px} .zeitleiste{grid-template-columns:1fr 1fr 1fr} } /* Nachtrag: `.abs.grau .zeitleiste li` ist spezifischer als `.zeitleiste li.kern` und hat den roten Hintergrund überschrieben — die weiße Schrift stand dann auf weißem Grund und war unsichtbar. Deshalb hier mit gleicher Spezifität und später. */ .abs .zeitleiste li.kern{background:var(--rot);border-color:var(--rot);color:#fff} .abs .zeitleiste li.kern .stufe{color:rgba(255,255,255,.82)} .abs .zeitleiste li.kern p{color:#fff} /* ══════════════════════════════════════════════════════════════════════════ Infotafel, grafisch aufgewertet (28.07.2026) Vorher: Emoji-Symbole vom Betriebssystem, flache Kästen, Entfernungen lose darunter. Jetzt: eigene Strichsymbole in Markenrot, eine zusammenhängende Karte mit Schatten, Entfernungen als Fußleiste derselben Karte. ══════════════════════════════════════════════════════════════════════════ */ .tafel{margin:28px 0 24px;border:1px solid var(--line);border-radius:var(--r); background:#fff;overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.07)} .abs.grau .tafel{background:#fff} .infotafel{display:grid;gap:0;grid-template-columns:1fr;background:transparent; border:0;border-radius:0;margin:0;overflow:visible} .tafel-feld{background:transparent;padding:26px 24px 28px;position:relative} .abs.grau .tafel-feld{background:transparent} /* Trennlinien nur zwischen den Feldern, nicht außen */ @media(min-width:640px){ .infotafel{grid-template-columns:1fr 1fr} .tafel-feld:nth-child(odd)::after{content:"";position:absolute;top:22px;bottom:22px;right:0; width:1px;background:var(--line)} .tafel-feld:nth-child(-n+2)::before{content:"";position:absolute;left:24px;right:24px;bottom:0; height:1px;background:var(--line)} } @media(min-width:1000px){ .infotafel{grid-template-columns:repeat(4,1fr)} .tafel-feld::before{display:none} .tafel-feld::after{content:"";position:absolute;top:22px;bottom:22px;right:0;width:1px;background:var(--line)} .tafel-feld:last-child::after{display:none} .tafel-feld:nth-child(odd)::after{content:""} } /* Symbol im roten Kreis */ .tafel-icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px; border-radius:50%;background:rgba(168,54,54,.1);color:var(--rot);margin-bottom:14px} .tafel-icon svg{width:22px;height:22px;display:block} .tafel-feld h3{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase; color:var(--dim);margin:0 0 9px;font-weight:800} .tafel-feld span{display:block;line-height:1.5} .tafel-feld span+span{margin-top:4px} .tafel-feld span.stark{font-weight:700;color:var(--dunkel);font-size:1.06rem} /* Liniennummern als kleine Plaketten statt als Fließtext */ .tafel-feld .linien{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px} .tafel-feld .linien b{display:inline-block;background:var(--dunkel);color:#fff; font-size:.78rem;font-weight:700;letter-spacing:.02em;padding:3px 8px;border-radius:5px; font-variant-numeric:tabular-nums} /* Entfernungen als Fußleiste derselben Karte */ .entfernungen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr; background:var(--bg2);border-top:1px solid var(--line)} .entfernungen li{display:flex;align-items:baseline;gap:11px;padding:16px 24px} .entfernungen li+li{border-top:1px solid var(--line)} .entfernungen b{font-size:1.28rem;font-weight:800;color:var(--rot); font-variant-numeric:tabular-nums;line-height:1.2} .entfernungen span{font-size:var(--klein);color:var(--dim);line-height:1.4} @media(min-width:820px){ .entfernungen{grid-template-columns:repeat(3,1fr)} .entfernungen li+li{border-top:0;border-left:1px solid var(--line)} } /* Nachtrag 28.07.2026 — zwei Ausrichtungsfehler in der Infotafel: 1) Die Symbole saßen oben links im Kreis statt mittig. Ursache: `.tafel-feld span` (0,1,1) ist spezifischer als `.tafel-icon` (0,1,0) und hat das `display:flex` durch `display:block` ersetzt. Hier mit höherer Spezifität nachgezogen. 2) Die Entfernungen standen linksbündig; bei drei unterschiedlich langen Beschriftungen wirkte das schief. Jetzt sitzt jede Zahl mit ihrer Beschriftung mittig in ihrem Drittel — wie im roten Kennzahlenband weiter oben. */ .tafel-feld .tafel-icon{display:flex;align-items:center;justify-content:center; margin-top:0;margin-bottom:14px} .tafel-feld .tafel-icon svg{margin:0} .entfernungen li{flex-direction:column;align-items:center;justify-content:center; gap:4px;text-align:center;padding:18px 18px} .entfernungen span{max-width:22ch} /* Rückmeldung 28.07.2026: Kasten und rote Schrift der Unterzeile eine Spur kleiner. Vorher 1,15–1,42 rem mit 11/17 px Innenabstand — das nahm der Überschrift Gewicht. */ .unterzeile{font-size:clamp(1rem,1.6vw,1.16rem);padding:9px 15px;margin:0 0 22px} /* Vertrauensband am Seitenende — kein Inhaltsabschnitt, sondern eine Abschlussleiste. Vorher fest grau; traf es auf einen grauen Abschnitt, verschmolzen beide. Jetzt weiß mit Trennlinie oben, dadurch unabhängig vom Abschnitt davor. */ .abs.siegel-band{background:var(--bg);border-top:1px solid var(--line);padding:44px 0} /* ══════════════════════════════════════════════════════════════════════════ Preisbox — neu aufgebaut 28.07.2026 Vorher: große Zahl, viel Leerraum, Beispielrechnungen als grauer Fließtext. Jetzt: Kopf mit Fixpreis, Staffeltabelle mit Spalte „pro Person", Getränke abgesetzt, dann die Handlungsaufforderung. Die Spalte „pro Person" ist der eigentliche Zweck — sie zeigt, dass große Gruppen deutlich günstiger fahren. ══════════════════════════════════════════════════════════════════════════ */ .preisbox{max-width:560px;margin:26px 0 0;padding:0;overflow:hidden; border:1px solid var(--line);border-radius:var(--r);background:#fff; box-shadow:0 14px 40px rgba(0,0,0,.07)} .abs.grau .preisbox{background:#fff} /* Gilt für den Preiskasten UND für den Kopf des Rechners — der ist aus diesem Kasten hervorgegangen. Beim Nachbauen stand dort zunächst eine eigene Fassung mit `align-items:baseline` statt `center`. Folge: Die Grundlinie der großen Zahl richtete sich an der ERSTEN Zeile des zweizeiligen Textes aus und schob ihn nach unten — „da scheint was verrutscht zu sein" (02.08.2026). Zwei Fassungen desselben Bauteils laufen auseinander. Deshalb eine Regel. */ .preis-kopf,.rechner-kopf{display:flex;align-items:center;gap:20px;flex-wrap:wrap; padding:24px 26px;border-bottom:1px solid var(--line)} .preisbox .gross,.rechner-kopf .gross{font-size:3.1rem;font-weight:800;color:var(--rot); line-height:1;margin:0;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .preis-was{margin:0;font-weight:700;line-height:1.35;font-size:1.02rem} .preis-was span{display:block;font-weight:400;color:var(--dim);font-size:var(--klein);margin-top:3px} /* Staffeltabelle */ .preisbox .preistabelle{display:table;width:100%;border-collapse:collapse; margin:0;border:0;border-radius:0;background:transparent;grid-template-columns:none} .preistabelle th,.preistabelle td{padding:11px 26px;text-align:right; font-variant-numeric:tabular-nums;background:transparent} .preistabelle th:first-child,.preistabelle td:first-child{text-align:left} .preistabelle thead th{font-size:var(--mikro);letter-spacing:.07em;text-transform:uppercase; color:var(--dim);font-weight:800;padding-top:16px;padding-bottom:8px} .preistabelle tbody tr+tr{border-top:1px solid var(--line)} .preistabelle tbody td{font-size:1.02rem} .preistabelle tbody td:first-child{color:var(--dim)} .preistabelle b{color:var(--rot);font-weight:800;font-size:1.08rem} .preistabelle tbody tr:last-child td{padding-bottom:16px} .preis-zusatz{margin:0;padding:16px 26px;background:var(--bg2); border-top:1px solid var(--line);font-size:var(--klein);line-height:1.5;color:var(--dim)} .preis-zusatz b{color:var(--dunkel)} .preis-tat{margin:0;padding:22px 26px 4px} .preis-tat .knopf{margin-top:0;display:block;text-align:center} .preisbox .rueckruf{margin:0;padding:12px 26px 22px;font-size:var(--klein);color:var(--dim);text-align:center} /* Einleitungssatz über einem Kartenraster. Vorher stand hier ein Inline-Stil `max-width:66ch`. Der Satz brach dadurch bei etwa 60 % der Breite um, während die Karten darunter bis zum Rand liefen — der Abschnitt sah aus, als sei er falsch ausgerichtet. Beanstandet von Tristan („das könnte doch einheitlich enden oder?"). Inline-Stile schlagen jede Klasse, deshalb war das per Stylesheet vorher nicht zu beheben. Jetzt endet der Satz an derselben Kante wie die Karten; die Zeilenlänge bleibt durch die etwas größere Schrift und den Zeilenabstand lesbar. */ .einleiter{max-width:none;font-size:1.06rem;line-height:1.72;margin:0 0 4px} /* Genau eine Kundenstimme: mittig und breiter statt als schmale Karte links in einem Raster, dessen zweite Spalte leer bleibt. Betraf 17 Seiten — überall dort, wo aus dem Bestand nur ein wörtlich belegtes Zitat vorlag. */ /* grid-template-columns:1fr ist hier der eigentliche Fix, nicht Kosmetik: .gitter bekommt ab 700px pauschal DREI Spalten (Z.~200). Diese Fassung setzte nur die Containerbreite - die eine Karte erbte die drei Spalten und stand als 253px schmale Endlossaeule in Spalte 1. Strukturpruefungen sehen das nicht; die Klasse war gesetzt, nur ihr CSS unvollstaendig. */ .gitter.einzeln{max-width:760px;margin-inline:auto;grid-template-columns:1fr} .gitter.einzeln .karte{text-align:center;padding:30px 34px} .gitter.einzeln .karte p:not(.sterne){font-size:1.14rem;line-height:1.6} .gitter.einzeln cite{display:block;margin-top:14px} /* ── Umflossenes Bild ────────────────────────────────────────────────────── Für Abschnitte, deren Text deutlich länger ist als das Bild hoch. Statt zweier Spalten mit toter Fläche läuft der Text oben neben dem Bild vorbei und unterhalb über die volle Breite weiter — so, wie Tristan es am 28.07.2026 für den Rasterabschnitt verlangt hatte. Die dortige Lösung (sticky Bild) kaschierte die Lücke nur. Unter 860 px wird nicht umflossen: Auf dem Telefon ist kein Platz dafür, und 63,8 % der Klicks kommen von dort. */ .umfluss{margin-top:22px} .umfluss .text{max-width:none} .umfluss figure{margin:0 0 18px} .umfluss figure .bild{width:100%;aspect-ratio:4/3;object-fit:cover} @media(min-width:860px){ .umfluss figure{float:right;width:44%;margin:4px 0 22px 38px} .umfluss.links figure{float:left;margin:4px 38px 22px 0} .umfluss::after{content:"";display:block;clear:both} } /* Häkchen im Heldenbereich der Unterseiten linksbündig ausrichten. `.held .usp` zentriert jeden Eintrag in seiner Rasterzelle — das stammt vom mittig gesetzten Heldenbereich der Startseite. Auf den Unterseiten ist der Heldenbereich linksbündig (`.kompakt`), und weil die Zellen durch `auto-fit` unterschiedlich breit sind, begann dort jedes Häkchen an einer anderen Stelle. Beanstandet am 29.07.2026: „scheinen willkürlich angeordnet und nicht sauber untereinander." */ .held.kompakt .usp{justify-items:start;margin-left:0;margin-right:0} /* ── Infotafel: Spaltenzahl folgt der Anzahl der Angaben ─────────────────── Vorher fest vier Spalten bzw. drei Entfernungen. Nicht jede Stadt hat alle Angaben: Für Frankfurt ist kein Lokal belegt, also entfällt „Für danach"; Köln hat gar keine Entfernungen. Die leeren Spalten liessen die Tafel unausgewogen wirken und quetschten den Inhalt in zu schmale Zellen. Beanstandet: „links ist so viel Platz". */ @media(min-width:1000px){ .infotafel.felder-4{grid-template-columns:repeat(4,1fr)} .infotafel.felder-3{grid-template-columns:repeat(3,1fr)} .infotafel.felder-2{grid-template-columns:repeat(2,1fr)} .infotafel.felder-1{grid-template-columns:1fr} } @media(min-width:640px) and (max-width:999px){ .infotafel.felder-3 .tafel-feld:last-child{grid-column:1/-1} } @media(min-width:820px){ .entfernungen.anzahl-3{grid-template-columns:repeat(3,1fr)} .entfernungen.anzahl-2{grid-template-columns:repeat(2,1fr)} .entfernungen.anzahl-1{grid-template-columns:1fr} } /* Beschriftungen sind nicht immer kurze Entfernungen. Wo die Quelle keine Meter hergibt, steht dort ein ganzer Ausdruck („in unmittelbarer Nähe"). In der Zahlengrösse von 1,28 rem sprengt das die Zelle — deshalb umbruchfreundlich und etwas kleiner, sobald der Ausdruck lang ist. */ .entfernungen b{max-width:100%;overflow-wrap:break-word;hyphens:auto} .entfernungen span{max-width:28ch} /* ── Seitliche Überschrift mittig statt oben ─────────────────────────────── Rückmeldung 29.07.2026: Die Überschrift stand oben, darunter blieb die halbe Spalte leer. `position:sticky` half nur beim Scrollen; im Ruhezustand — und das ist der Zustand, in dem man eine Seite beurteilt — wirkte der Abschnitt kopflastig. Jetzt sitzt sie mittig auf Höhe des Textblocks und trägt einen roten Balken: dieselbe Akzentsprache wie Kennzahlenband und Häkchen, damit die Spalte ein Gewicht bekommt statt nur Leerraum. */ @media(min-width:860px){ .seitlich{align-items:center} .seitlich h2{position:static;top:auto} .seitlich h2::after{content:"";display:block;width:56px;height:5px; background:var(--rot);border-radius:3px;margin-top:20px} .abs.dunkel .seitlich h2::after{background:#fff} } /* Echte Silbentrennung, wo die Spalte schmal und das Wort deutsch-lang ist. Die Seite ist als lang=\"de\" ausgezeichnet, der Browser trennt also nach Wörterbuch und setzt einen Trennstrich — \"Gruppen-aktivität\" statt \"Gruppenaktivitä / t\". Beanstandet am 29.07.2026. Bewusst nur hier und nicht im Fließtext: Trennstriche in jedem Absatz wären eine Stiländerung, kein Fehlerausgleich. */ .seitlich h2,.punkteraster li,.tafel-feld span,.karte h3,.karte h2{hyphens:auto} @media(min-width:860px){ /* Etwas mehr Raum für die Überschrift, damit seltener getrennt werden muss. Über die Variablen, damit die gespiegelte Fassung (.seitlich.rechts) denselben Zuwachs bekommt — vorher hätte sie hier eine schmalere Überschriftenspalte behalten als die linke. */ .seitlich{--sp-schmal:1fr;--sp-breit:1.95fr} } /* ── Unterzeile: Feinschliff 29.07.2026 ─────────────────────────────────── Zwei Beanstandungen: „die Schrift noch zu groß" und „die Box Farbe zur Schrift Farbe nicht so ganz stimmig". Die zweite hatte eine klare Ursache: Auf dunklem Grund war der Kasten ein WEISSER Grauton (rgba(255,255,255,.13)), die Schrift dagegen rot. Kasten und Schrift teilten also gar keinen Farbton — der Kasten wirkte wie ein fremdes Element hinter der Zeile. Jetzt ist er in beiden Fällen aus derselben Farbe gemischt wie die Schrift, nur stark aufgehellt. Dazu eine Stufe kleiner und etwas leichter gesetzt: Die Zuspitzung soll die Überschrift stützen, nicht mit ihr konkurrieren. */ .unterzeile{font-size:clamp(.92rem,1.3vw,1.04rem);font-weight:600; padding:8px 14px;margin:0 0 22px; background:rgba(168,54,54,.08);color:var(--rot-dunkel)} .abs.dunkel .unterzeile{background:rgba(200,90,90,.20);color:#efb3b3} /* ── Unterzeile, endgültige Fassung 29.07.2026 ──────────────────────────── Zwischenschritt war falsch: Ich hatte den Kasten dem Farbton der Schrift ANGEGLICHEN — gemeint war das Gegenteil. „Was mich stört ist das die box rot ist und die schrift auch." Jetzt volle rote Fläche mit weißer Schrift. Das ist zugleich die vorhandene Formsprache: Das Stadt-Etikett im Heldenbereich und die Vorzeile über den Überschriften sind bereits solide rote Plaketten mit weißer Schrift. Die Unterzeile reiht sich damit ein, statt eine eigene Farbregel zu erfinden. Auf dunklem Grund dieselbe Fläche: Das Rot hat gegen #3c3c3c genug Eigenhelligkeit, ein Aufhellen wäre nur nötig, wenn die Schrift rot bliebe. */ .unterzeile{background:var(--rot);color:#fff} .abs.dunkel .unterzeile{background:var(--rot);color:#fff} /* ── Preisseite: Kasten oben neben der Einordnung ────────────────────────── Vorher stand der gesamte Inhalt von /preise in einer Spalte von rund 500 px Breite; die rechte Seitenhälfte blieb leer. Zwei Spalten füllen die Fläche und stellen zugleich die Antwort neben die Erklärung. Unter 900 px untereinander — der Kasten zuerst, weil er die Frage beantwortet. */ .preis-oben{display:grid;gap:30px;grid-template-columns:1fr} .preis-oben>div:last-child{order:-1} .preis-oben .text{max-width:none} .preis-oben .preisbox{margin:0;max-width:none} @media(min-width:900px){ .preis-oben{grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:48px;align-items:start} .preis-oben>div:last-child{order:0} } /* Tabellen im Fließtext — Zahlenspalten rechtsbündig, damit Beträge vergleichbar sind */ .text table{width:100%;max-width:640px} .text td+td,.text th+th{text-align:right} .text tbody tr:hover{background:var(--bg2)} /* Preisseite: Kopfbereich und Kasten sind ein Abschnitt. Vorher zwei getrennte Blöcke, deren Texte fast wörtlich dasselbe sagten („die Texte sagen ohnehin das gleiche aus", 01.08.2026). Zusammengelegt rückt der Kasten zugleich weiter nach oben. */ .preis-kopfseite{border-bottom:0;padding:52px 0 56px} .preis-kopfseite h1{margin-bottom:14px} .preis-kopfseite .sub{max-width:none;margin-bottom:18px} .preis-kopfseite p{max-width:62ch} .preis-kopfseite p+p{margin-top:14px} /* ══════════════════════════════════════════════════════════════════════════ Preisrechner — ersetzt die Tabelle „Die vollständige Staffel" Sie reichte bis 18 Personen, buchbar sind 75. Wer zu 23. kommt, fand seine Zeile nicht. Statt einer längeren Tabelle: eingeben statt suchen. ══════════════════════════════════════════════════════════════════════════ */ .rechner{display:grid;gap:0;grid-template-columns:1fr;border:1px solid var(--line); border-radius:var(--r);overflow:hidden;background:#fff;max-width:820px; box-shadow:0 14px 40px rgba(0,0,0,.07)} @media(min-width:760px){.rechner{grid-template-columns:1.15fr 1fr}} .rechner-eingabe{padding:26px 26px 24px} .rechner-eingabe>label{display:block;font-weight:700;margin-bottom:12px} .rechner-zahl{display:flex;align-items:stretch;gap:0;max-width:230px; border:2px solid var(--line);border-radius:9px;overflow:hidden} .rechner-zahl input{flex:1;min-width:0;border:0;text-align:center;font:800 1.5rem/1 var(--sans); color:var(--dunkel);padding:12px 4px;-moz-appearance:textfield} .rechner-zahl input::-webkit-outer-spin-button, .rechner-zahl input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .rechner-zahl input:focus{outline:2px solid var(--rot);outline-offset:-2px} .rechner-schritt{border:0;background:var(--bg2);color:var(--dunkel);font:700 1.4rem/1 var(--sans); width:52px;cursor:pointer} .rechner-schritt:hover{background:var(--rot);color:#fff} /* Der Regler ist eine Zugabe für die Maus, kein eigener Bedienweg — deshalb tabindex=-1 im HTML. Wer die Tastatur nutzt, bedient das Zahlenfeld. */ .rechner-regler{width:100%;margin:16px 0 4px;accent-color:var(--rot)} .rechner-grenze{font-size:var(--mikro);color:var(--dim);margin:0 0 18px} .rechner-schalter{display:flex;gap:11px;align-items:flex-start;cursor:pointer; padding:14px;border:1px solid var(--line);border-radius:9px;background:var(--bg2)} .rechner-schalter:hover{border-color:var(--rot)} .rechner-schalter input{margin-top:3px;width:19px;height:19px;accent-color:var(--rot);flex:none} .rechner-schalter span{font-size:var(--klein);line-height:1.45;color:var(--dim)} .rechner-schalter b{color:var(--dunkel)} .rechner-ergebnis{padding:26px;background:var(--dunkel);color:#fff; display:flex;flex-direction:column;justify-content:center} .rechner-gross{font:800 3rem/1 var(--sans);letter-spacing:-.03em;margin:0} .rechner-pro{font-size:1.05rem;color:rgba(255,255,255,.82);margin:6px 0 0} .rechner-pro span{font-weight:800;color:#fff} .rechner-rechnung{font-size:var(--mikro);color:rgba(255,255,255,.6);margin:14px 0 0;line-height:1.5} .rechner-tat{margin:20px 0 0} .rechner-tat .knopf{display:block;text-align:center} /* Ohne JavaScript bleibt alles benutzbar: Das Formular zeigt die Ausgangswerte, der Preiskasten weiter oben nennt vier Stufen. Nur die Bedienelemente, die ohne Skript nichts tun, verschwinden. */ .rechner:not(.rechner-aktiv) .rechner-schritt, .rechner:not(.rechner-aktiv) .rechner-regler{display:none} /* Nachtrag 01.08.2026 — zwei Spezifitätsfehler im Preisrechner. Der Rechner steht innerhalb von `.text`, und dort gelten Regeln, die für Fließtext gedacht sind: 1) `.text a` (0,1,1) setzt Links auf ROT und schlägt damit `.knopf` (0,1,0). Der Knopf war rote Schrift auf rotem Grund — die Beschriftung „Termin sichern" war vorhanden, aber unsichtbar. Genau derselbe Fehler wie am 28.07. bei der Zeitleiste (weiß auf weiß) und bei den Tafelsymbolen. 2) Die Beschriftung der Getränkepauschale erschien komplett fett, obwohl nur der Name fett sein sollte. Ursache ist die Vererbung aus dem umgebenden `