/* =========================================================================
Wiener Caféhaus Lübeck — Redesign auf Markenbasis — Weboro Media
Kein Framework, keine externen Requests.
Marke (von wienercafe-luebeck.de gezogen, 12.08.2026):
Schrift Questrial · Markenblau #002A58 · Markengold #B39859 · Grau #868786
Bordeaux #720A24 als seltener Akzent · Signatur: Versalzeilen mit weitem
Buchstabenabstand. Bewegung: Einflüge von links/rechts, sanfte Parallaxe.
========================================================================= */
@font-face {
font-family: 'Questrial';
src: url('../fonts/questrial-latin.woff2') format('woff2');
font-weight: 400; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122;
}
@font-face {
font-family: 'Questrial';
src: url('../fonts/questrial-latin-ext.woff2') format('woff2');
font-weight: 400; font-style: normal; font-display: swap;
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF;
}
/* ---------- Marken-Werte -------------------------------------------------- */
:root {
--nacht: #002A58; /* ein Markenblau, identisch mit --marine */
--marine: #002A58;
--marine-2: #002A58;
--weiss: #FFFFFF;
--hell: #F5F6F8;
--hell-2: #EDEFF2;
--tinte: #24272B;
--tinte-2: #4A4F56;
--tinte-3: #6B7178; /* 4,6:1 auf Weiss, 4,5:1 auf --hell (WCAG AA) */
--gold: #B39859; /* Markenfarbe laut Styleguide der Agentur */
--gold-tief: #856E3C; /* 4,9:1 auf Weiss und unter weisser Schrift (WCAG AA) */
--grau: #868786; /* Markengrau laut Styleguide */
--bordeaux: #720A24;
--nebel: #C7D0DC;
--linie: rgba(36, 39, 43, .16);
--linie-fein: rgba(36, 39, 43, .09);
--linie-d: rgba(255, 255, 255, .22);
--linie-d-fein: rgba(255, 255, 255, .10);
--sans: 'Questrial', 'Avenir Next', 'Century Gothic', system-ui, sans-serif;
--stern: url('data:image/svg+xml;utf8,');
--rahmen: 76rem;
/* Luft und Logobreite im Kopf. Der Hero-Text richtet sich an der Mitte des
Logos aus, deshalb stehen beide Masse hier und werden unten wiederverwendet. */
--kopf-luft: clamp(.2rem, 1vw, 1.2rem);
--logo-breite: clamp(96px, 9vw, 122px);
--held-achse: calc(var(--kopf-luft) + var(--logo-breite) / 2);
--luft-s: clamp(2.75rem, 2rem + 3vw, 4.5rem);
--luft: clamp(4rem, 3rem + 5vw, 7.5rem);
--ease: cubic-bezier(.25, .6, .35, 1);
--ease-weich: cubic-bezier(.16, 1, .3, 1);
--ease-pop: cubic-bezier(.32, 1.4, .5, 1);
}
/* ---------- Grundlagen ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0;
background: var(--weiss);
color: var(--tinte);
font-family: var(--sans);
font-size: clamp(1rem, .97rem + .14vw, 1.08rem);
line-height: 1.75;
letter-spacing: .012em;
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
body.nav-offen { overflow: hidden; }
body.nav-offen .kopf {
position: fixed; top: 0; left: 0; right: 0;
background: var(--nacht); /* voll deckend, solange das Menü offen ist */
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 {
font-weight: 400;
line-height: 1.14;
letter-spacing: .005em;
margin: 0;
text-wrap: balance;
}
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
.rahmen { width: min(100% - 2.5rem, var(--rahmen)); margin-inline: auto; }
/* Kopfzeile: mehr Luft links vom Logo (Feedback Index S1) */
.kopf-innen { padding-inline: var(--kopf-luft); }
.rahmen-eng { width: min(100% - 2.5rem, 44rem); margin-inline: auto; }
/* Nur fuer Screenreader: steht in der Ueberschriften-Gliederung, ist aber
nicht zu sehen. Fuer Zwischenebenen, die optisch keine braucht. */
.nur-vorlesen {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
.skip {
position: absolute; left: -9999px; top: 0; z-index: 200;
background: var(--marine); color: #fff; padding: .8rem 1.2rem; font-size: .95rem;
}
.skip:focus { left: 1rem; top: 1rem; }
:focus-visible { outline: 2px solid var(--gold-tief); outline-offset: 3px; }
/* ---------- Typografische Bausteine --------------------------------------- */
.gross { font-size: clamp(2.3rem, 1.3rem + 4vw, 4.4rem); }
.mittel { font-size: clamp(1.85rem, 1.25rem + 2.4vw, 3.1rem); }
.klein { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); line-height: 1.25; }
/* Die Marken-Signatur: Versalien mit weitem Abstand */
.lauf {
font-size: .72rem;
letter-spacing: .5em; text-transform: uppercase;
color: var(--gold-tief);
/* Kein text-indent. Es war als Ausgleich fuer den Buchstabenabstand hinter
dem LETZTEN Zeichen gedacht, schob aber den ERSTEN Buchstaben ein halbes
Geviert nach rechts. Constanze hat das zweimal als „unsichtbares Zeichen"
gemeldet (Feedback 2, 11.10.2026), es betraf jeden Kicker der Seite.
Die Luft hinten nimmt jetzt ein negativer Rand weg, ohne vorn etwas zu
verschieben. */
margin-right: -.5em;
}
/* Zentrierte Kicker brauchen den Ausgleich anders: dort stehen sie in einem
Block, der mittig ausgerichtet wird, ein negativer Rand wuerde ihn
verbreitern. Deshalb dort nur die haelfte als Versatz. */
.band .lauf, .titel-block.mittig .lauf, [style*="text-align:center"] > .lauf {
margin-right: 0; margin-left: .5em;
}
.dunkel .lauf, .marine .lauf { color: var(--gold); }
/* text-transform:uppercase macht aus „ß" laut Unicode immer „SS". Wo „Straße"
in Versalien steht, schalten wir die Umwandlung ab und setzen die Versalien
selbst, damit das ß stehen bleibt. */
.versal-roh { text-transform: none; }
.dezent { color: var(--tinte-3); }
.vorlauf {
font-size: clamp(1.02rem, .98rem + .35vw, 1.22rem);
line-height: 1.75; color: var(--tinte-2);
}
.kursiv { color: var(--gold-tief); }
/* ---------- Knöpfe --------------------------------------------------------- */
.knopf {
display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
padding: .95rem 1.8rem;
background: var(--marine); color: #fff;
font-family: var(--sans); font-size: .82rem;
letter-spacing: .22em; text-transform: uppercase; text-indent: .22em;
text-decoration: none;
border: 1px solid var(--marine);
position: relative; overflow: hidden;
transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .25s var(--ease);
}
.knopf:hover { background: var(--nacht); border-color: var(--nacht); transform: translateY(-2px); }
/* Goldene Knoepfe tragen weisse, fette Schrift. Damit das lesbar bleibt, sitzt
darunter das tiefere Gold: Weiss auf --gold waere nur 2,8:1, auf --gold-tief
sind es 4,5:1 und damit der Wert, den die WCAG fuer Fliesstext verlangt. */
.knopf-gold { background: var(--gold-tief); border-color: var(--gold-tief); color: #fff; font-weight: 700; }
.knopf-gold:hover { background: var(--nacht); border-color: var(--nacht); color: #fff; }
.knopf-klein { padding: .55rem 1rem; font-size: .72rem; }
.knopf-linie { background: transparent; color: var(--tinte); border-color: var(--linie); }
.knopf-linie:hover { background: var(--marine); border-color: var(--marine); color: #fff; }
.dunkel .knopf-linie, .marine .knopf-linie { color: #fff; border-color: var(--linie-d); background: transparent; }
.dunkel .knopf-linie:hover, .marine .knopf-linie:hover { background: #fff; border-color: #fff; color: var(--marine); }
.dunkel .knopf, .marine .knopf { background: var(--gold-tief); border-color: var(--gold-tief); color: #fff; font-weight: 700; }
.dunkel .knopf:hover, .marine .knopf:hover { background: #fff; border-color: #fff; color: var(--marine); }
.pfeil {
display: inline-flex; align-items: baseline; gap: .55rem;
font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
text-decoration: none; padding-bottom: .32rem;
background-image: linear-gradient(var(--gold-tief), var(--gold-tief));
background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1px;
transition: background-size .5s var(--ease), color .3s var(--ease);
}
.pfeil::after { content: '→'; transition: transform .35s var(--ease); }
.pfeil:hover { color: var(--marine); }
.pfeil:hover::after { transform: translateX(.35rem); }
@media (hover: hover) {
.pfeil { background-size: 0% 1px; }
.pfeil:hover { background-size: 100% 1px; }
}
.dunkel .pfeil, .marine .pfeil { background-image: linear-gradient(var(--gold), var(--gold)); }
.dunkel .pfeil:hover, .marine .pfeil:hover { color: var(--gold); }
/* Dropdowns in der Hauptnavigation */
.nav-gruppe { position: relative; }
.nav-gruppe > button {
appearance: none; background: none; border: 0; cursor: pointer;
font-family: var(--sans); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
color: var(--nebel); padding: .45rem 0;
display: inline-flex; align-items: center; gap: .4rem;
transition: color .3s var(--ease);
white-space: nowrap;
}
.nav-gruppe > button::after {
content: ''; width: .45rem; height: .45rem;
border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
transform: rotate(45deg) translateY(-2px);
transition: transform .3s var(--ease);
}
.nav-gruppe:hover > button, .nav-gruppe:focus-within > button,
.nav-gruppe > button[aria-expanded="true"] { color: #fff; }
.nav-gruppe:hover > button::after, .nav-gruppe > button[aria-expanded="true"]::after { transform: rotate(225deg) translateY(-2px); }
.nav-menue {
position: absolute; left: 50%; top: calc(100% + 1.1rem);
transform: translateX(-50%) translateY(12px) scale(.97);
transform-origin: top center;
min-width: 17rem;
background: linear-gradient(180deg, #063363 0%, var(--marine) 28%);
border: 1px solid rgba(179,152,89,.32);
border-top: 2px solid var(--gold);
box-shadow: 0 30px 70px -22px rgba(0,16,36,.75), 0 8px 24px -12px rgba(0,16,36,.5);
padding: .8rem 0 .95rem;
display: grid;
opacity: 0; visibility: hidden; pointer-events: none;
/* Beim Schliessen erst nach einer Gnadenfrist ausblenden, damit die Maus
die Luecke zum Panel ueberbruecken kann, ohne dass es zuschnappt. */
transition: opacity .25s var(--ease) .32s, transform .3s var(--ease-weich) .32s, visibility 0s .6s;
z-index: 95;
}
/* Unsichtbare Brücke: die Lücke zwischen Knopf und Panel bleibt hover-aktiv */
.nav-menue::before {
content: ''; position: absolute;
left: -1.5rem; right: -1.5rem; top: -1.4rem; height: 1.4rem;
}
/* kleiner Diamant als Zeiger zum Knopf */
.nav-menue::after {
content: ''; position: absolute; top: -6px; left: 50%;
width: 10px; height: 10px;
background: var(--gold);
transform: translateX(-50%) rotate(45deg);
}
.nav-gruppe:hover .nav-menue, .nav-gruppe:focus-within .nav-menue,
.nav-gruppe.ist-offen .nav-menue {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translateX(-50%) translateY(0) scale(1);
transition: opacity .28s var(--ease) .05s, transform .4s var(--ease-pop) .05s, visibility 0s;
}
/* Punkte kaskadieren beim Öffnen herein */
.nav-menue a, .nav-menue .trenner { opacity: 0; transform: translateY(7px); transition: opacity .2s var(--ease) .32s, transform .25s var(--ease) .32s; }
.nav-gruppe:hover .nav-menue a, .nav-gruppe:focus-within .nav-menue a, .nav-gruppe.ist-offen .nav-menue a,
.nav-gruppe:hover .nav-menue .trenner, .nav-gruppe:focus-within .nav-menue .trenner, .nav-gruppe.ist-offen .nav-menue .trenner {
opacity: 1; transform: none;
}
.nav-gruppe:hover .nav-menue > :nth-child(2), .nav-gruppe.ist-offen .nav-menue > :nth-child(2) { transition-delay: .05s; }
.nav-gruppe:hover .nav-menue > :nth-child(3), .nav-gruppe.ist-offen .nav-menue > :nth-child(3) { transition-delay: .09s; }
.nav-gruppe:hover .nav-menue > :nth-child(4), .nav-gruppe.ist-offen .nav-menue > :nth-child(4) { transition-delay: .13s; }
.nav-gruppe:hover .nav-menue > :nth-child(5), .nav-gruppe.ist-offen .nav-menue > :nth-child(5) { transition-delay: .17s; }
.nav-gruppe:hover .nav-menue > :nth-child(6), .nav-gruppe.ist-offen .nav-menue > :nth-child(6) { transition-delay: .21s; }
.nav-gruppe:hover .nav-menue > :nth-child(7), .nav-gruppe.ist-offen .nav-menue > :nth-child(7) { transition-delay: .25s; }
.nav-gruppe:hover .nav-menue > :nth-child(8), .nav-gruppe.ist-offen .nav-menue > :nth-child(8) { transition-delay: .29s; }
.nav-gruppe:hover .nav-menue > :nth-child(9), .nav-gruppe.ist-offen .nav-menue > :nth-child(9) { transition-delay: .33s; }
.nav-menue a {
position: relative;
text-decoration: none;
font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--nebel);
padding: .62rem 2.4rem .62rem 1.35rem;
background-image: none;
}
.nav-menue a::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
background: var(--gold);
transform: scaleY(0);
transition: transform .25s var(--ease);
}
.nav-menue a::after {
content: '→'; position: absolute; right: 1.1rem; top: 50%;
transform: translateY(-50%) translateX(-6px);
opacity: 0; color: var(--gold);
transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.nav-menue a:hover, .nav-menue a:focus-visible {
color: #fff; background: rgba(179,152,89,.08);
transition: color .2s, background .2s;
}
.nav-menue a:hover::before { transform: scaleY(1); }
.nav-menue a:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
.nav-menue a.is-current { color: var(--gold); }
.nav-menue a.is-current::before { transform: scaleY(1); }
/* Gruppenknopf markieren, wenn eine Unterseite aktiv ist */
.nav-gruppe:has(a.is-current) > button { color: #fff; box-shadow: inset 0 -1px 0 var(--gold); }
.nav-menue .trenner { height: 1px; background: var(--linie-d-fein); margin: .5rem 1.2rem; }
/* Mobile: Gruppentitel */
.mobil-auf {
appearance: none; background: none; border: 0; cursor: pointer;
font-family: var(--sans); text-align: left; width: 100%;
padding: .62rem 0;
border-bottom: 1px solid var(--linie-d-fein);
font-size: clamp(1.3rem, 5.4vw, 1.7rem); letter-spacing: .04em; color: #fff;
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.mobil-auf::after {
content: ''; width: .55rem; height: .55rem; flex: none;
border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
transform: rotate(45deg); margin-right: .35rem;
transition: transform .3s var(--ease);
}
.mobil-auf[aria-expanded="true"] { color: var(--gold); }
.mobil-auf[aria-expanded="true"]::after { transform: rotate(225deg); }
.mobil-panel {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows .6s var(--ease-weich);
border-bottom: 1px solid var(--linie-d-fein);
}
.mobil-panel > div { overflow: hidden; display: grid; min-height: 0; }
.mobil-panel.ist-offen { grid-template-rows: 1fr; }
.mobil-panel a { border-bottom: 0 !important; }
.mobil-nav nav a.klein-punkt { font-size: 1.08rem; letter-spacing: .05em; padding: .62rem 0 .62rem .95rem; border-bottom: 0; color: var(--nebel); min-height: 44px; display: flex; align-items: center; }
.mobil-nav nav a.klein-punkt:hover span { color: var(--gold); }
/* ---------- Kopf (dunkel wie die Marke) ------------------------------------ */
.kopf {
position: sticky; top: 0; z-index: 90;
background: var(--nacht);
border-bottom: 1px solid transparent;
transition: border-color .35s var(--ease);
}
.kopf.ist-fest { border-bottom-color: rgba(179,152,89,.25); }
.kopf-innen {
display: flex; align-items: center; gap: 1.4rem;
min-height: 4.6rem;
transition: min-height .35s var(--ease);
}
.kopf.ist-fest .kopf-innen { min-height: 3.9rem; }
.marke { display: inline-flex; align-items: center; margin-right: auto; }
.marke-bild {
width: var(--logo-breite); height: auto;
transition: width .35s var(--ease);
}
.kopf.ist-fest .marke-bild { width: 88px; }
.haupt-nav { display: none; gap: clamp(1.6rem, 3.4vw, 3.4rem); }
.haupt-nav a {
text-decoration: none;
font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
color: var(--nebel);
padding-block: .35rem;
background-image: linear-gradient(var(--gold), var(--gold));
background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px;
transition: color .3s var(--ease), background-size .45s var(--ease);
white-space: nowrap;
}
.haupt-nav a:hover, .haupt-nav a.is-current { color: #fff; background-size: 100% 1px; }
.kopf-rechts { display: flex; align-items: center; gap: .8rem; }
.sprache {
font-size: .72rem; letter-spacing: .14em;
color: var(--nebel); text-decoration: none;
border: 1px solid var(--linie-d); padding: .34rem .55rem;
transition: color .3s, border-color .3s;
}
.sprache:hover { color: var(--gold); border-color: var(--gold); }
.kopf .knopf-klein { background: transparent; border-color: var(--linie-d); color: #fff; white-space: nowrap; }
.kopf .knopf-klein:hover { background: var(--gold); border-color: var(--gold); color: var(--nacht); transform: none; }
.burger { width: 2.6rem; height: 2.6rem; display: grid; place-content: center; gap: .3rem; background: none; border: 1px solid var(--linie-d); cursor: pointer; padding: 0; }
.burger span { display: block; width: 1.1rem; height: 1px; background: #fff; transition: transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(.3rem) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-.3rem) rotate(-45deg); }
@media (min-width: 1180px) {
/* Die Navigation stand bisher ganz rechts: 228 px Loch zum Logo, nur 22 px
zu den Knoepfen daneben. Mit auto-Raendern links und rechts teilt sich der
freie Platz gleichmaessig, die Zeile wird ruhiger. Das margin-right:auto
an .marke muss dafuer hier weg, auf dem Handy braucht es das aber noch. */
.haupt-nav { display: flex; margin-inline: auto; }
.marke { margin-right: 0; }
.burger { display: none; }
}
.tel-icon { display: none; }
@media (max-width: 560px) {
.kopf-rechts .knopf-klein { display: none; }
.tel-icon {
display: grid; place-content: center;
width: 2.6rem; height: 2.6rem;
border: 1px solid var(--linie-d); color: var(--gold);
}
.tel-icon svg { width: 1.05rem; height: 1.05rem; }
}
/* ---------- Mobiles Menü ---------------------------------------------------- */
.mobil-nav[hidden] { display: none; }
.mobil-nav {
position: fixed; inset: 0; z-index: 88;
padding-top: 5.2rem;
background: var(--nacht); color: #fff;
padding: clamp(1.25rem, 4vw, 2.5rem) 0;
display: flex; flex-direction: column; justify-content: space-between;
opacity: 0; transform: translateY(-.75rem);
transition: opacity .28s var(--ease), transform .35s var(--ease);
overflow-y: auto;
}
.mobil-nav.ist-offen { opacity: 1; transform: none; }
.mobil-nav nav { display: grid; padding-inline: clamp(1.25rem, 6vw, 3rem); }
.mobil-nav nav a {
text-decoration: none; padding: .62rem 0;
border-bottom: 1px solid var(--linie-d-fein);
font-size: clamp(1.3rem, 5.4vw, 1.7rem); letter-spacing: .04em;
overflow: hidden;
}
.mobil-nav nav a span { display: block; transition: transform .4s var(--ease), color .3s; }
.mobil-nav nav a:hover span { transform: translateX(.45rem); color: var(--gold); }
.mobil-fuss { padding: 1.6rem clamp(1.25rem, 6vw, 3rem) 0; display: grid; gap: 1rem; justify-items: start; }
.mobil-fuss .knopf { background: var(--gold-tief); border-color: var(--gold-tief); color: #fff; font-weight: 700; }
.mobil-fuss p { font-size: .87rem; color: var(--nebel); line-height: 1.7; }
@media (min-width: 1180px) { .mobil-nav { display: none; } }
/* ---------- Abschnitte ------------------------------------------------------ */
.abschnitt { padding-block: var(--luft); }
.abschnitt-s { padding-block: var(--luft-s); }
.dunkel { background: var(--nacht); color: #fff; }
.marine { background: var(--marine); color: #fff; }
.dunkel h1, .dunkel h2, .dunkel h3, .marine h1, .marine h2, .marine h3 { color: #fff; }
.dunkel .dezent, .dunkel .vorlauf, .marine .dezent, .marine .vorlauf { color: var(--nebel); }
.papier-2, .hellgrau { background: var(--hell); }
.titel-block { max-width: 44rem; }
.titel-block .lauf { display: block; margin-bottom: 1.15rem; }
.titel-block p { margin-top: 1.3rem; }
.zwei-spalten { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: end; }
@media (min-width: 900px) {
.zwei-spalten { grid-template-columns: 1fr auto; }
.zwei-spalten > :last-child { padding-bottom: .4rem; }
}
/* ---------- Bilder ----------------------------------------------------------- */
.bogen { overflow: hidden; background: var(--hell-2); }
.bogen picture { display: block; height: 100%; }
.bogen img { width: 100%; height: 100%; object-fit: cover; }
.bogen-hoch { aspect-ratio: 4 / 5; }
.bild-zoom { overflow: hidden; }
.bild-zoom img { transition: transform 1.6s var(--ease-weich); }
@media (hover: hover) {
.bild-zoom:hover img, a:hover .bild-zoom img { transform: scale(1.04); }
}
/* Goldene Eckwinkel als Markenzeichen auf Bildern */
.ecken { position: relative; }
.ecken::before, .ecken::after {
content: ''; position: absolute; width: 2.2rem; height: 2.2rem; z-index: 2;
border: 1px solid var(--gold); pointer-events: none;
transition: width .4s var(--ease), height .4s var(--ease);
}
.ecken::before { top: .65rem; left: .65rem; border-right: 0; border-bottom: 0; }
.ecken::after { bottom: .65rem; right: .65rem; border-left: 0; border-top: 0; }
.ecken:hover::before, .ecken:hover::after { width: 3rem; height: 3rem; }
figure { margin: 0; }
figcaption { margin-top: .8rem; font-size: .82rem; line-height: 1.6; color: var(--tinte-3); letter-spacing: .04em; }
.dunkel figcaption, .marine figcaption { color: var(--nebel); }
/* ---------- Reveal-System ----------------------------------------------------
.zeig (unten) · .zeig-l (von links) · .zeig-r (von rechts) — JS setzt ist-da.
Ohne JS immer sichtbar, Notbremse nach 4 s. */
.js .zeig, .js .zeig-l, .js .zeig-r {
opacity: 0;
transition: opacity 1.15s var(--ease-weich), transform 1.25s var(--ease-weich);
}
.js .zeig { transform: translateY(26px); }
.js .zeig-l { transform: translateX(-36px); }
.js .zeig-r { transform: translateX(36px); }
.js .zeig.ist-da, .js .zeig-l.ist-da, .js .zeig-r.ist-da { opacity: 1; transform: none; }
.js .zeig-1 { transition-delay: .12s; }
/* Gruppen: jedes Kind erscheint einzeln beim eigenen Ankommen;
den Stapel-Versatz fuer gleichzeitig eintreffende setzt das JS. */
.js .zeig-gruppe > * {
opacity: 0; transform: translateY(24px);
transition: opacity 1.05s var(--ease-weich), transform 1.15s var(--ease-weich);
}
.js .zeig-gruppe > *.ist-da { opacity: 1; transform: none; }
/* Bild-Vorhang: Blau zieht sich nach oben weg, wenn das Bild ankommt */
.vorhang { position: relative; }
.js .vorhang::after {
content: ''; position: absolute; inset: 0; z-index: 3;
background: var(--marine);
transform-origin: top;
transition: transform 1.5s var(--ease-weich) .15s;
}
.js .vorhang.ist-da::after { transform: scaleY(0); }
/* Chronik: Goldlinie unterm Jahr zeichnet sich */
.eintrag-jahr { position: relative; padding-bottom: .35rem; }
.eintrag-jahr::after {
content: ''; position: absolute; left: 0; bottom: 0; width: 3rem; height: 2px;
background: var(--gold);
transform: scaleX(0); transform-origin: left;
transition: transform 1.2s var(--ease-weich) .45s;
}
.js .ist-da .eintrag-jahr::after, .no-js .eintrag-jahr::after { transform: scaleX(1); }
.js .zeig-2 { transition-delay: .24s; }
.js .zeig-3 { transition-delay: .36s; }
.js .zeig-4 { transition-delay: .48s; }
/* Parallaxe: JS schiebt data-para-Bilder minimal gegen die Scrollrichtung */
[data-para] { will-change: transform; }
/* ---------- Held: das Foto ist der Auftakt --------------------------------- */
.held {
position: relative;
min-height: clamp(500px, 82vh, 840px);
min-height: clamp(460px, 86svh, 840px);
display: flex; align-items: flex-end;
background: var(--marine); color: #fff;
overflow: hidden;
}
.held-bild { position: absolute; inset: 0; }
.held-bild picture { display: block; height: 112%; }
.held-bild img { width: 100%; height: 100%; object-fit: cover; }
.held::before {
content: ''; position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(90deg, rgba(0,26,54,.72) 0%, rgba(0,26,54,.42) 46%, rgba(0,26,54,0) 76%),
linear-gradient(180deg, rgba(0,42,88,.5) 0%, rgba(0,42,88,.04) 30%, rgba(0,42,88,.38) 62%, rgba(0,42,88,.9) 100%);
pointer-events: none;
}
.held-inhalt {
position: relative; z-index: 2;
padding-block: clamp(2.75rem, 5vw, 5rem);
}
.held-inhalt > * { max-width: 46rem; }
/* Ab Tablet steht die linke Textkante auf der Mitte des Logos im Kopf.
Darunter waere der Versatz auf dem schmalen Schirm zu viel. */
@media (min-width: 900px) {
.held-inhalt { padding-left: var(--held-achse); }
}
.held-inhalt .lauf { display: block; color: rgba(255,255,255,.95); margin-bottom: 1.1rem; text-shadow: 0 1px 12px rgba(0,20,44,.5); }
.held-inhalt h1 {
font-size: clamp(2.5rem, 1.4rem + 4.6vw, 4.9rem);
line-height: 1.05; color: #fff;
text-shadow: 0 2px 24px rgba(0,20,44,.35);
}
.held-inhalt p { margin: 1.2rem 0 0; max-width: 34rem; color: #E8EDF4; font-size: clamp(1rem, .95rem + .4vw, 1.2rem); }
.held-tat { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: .8rem; }
/* Im Hero bewusst KEIN Gold: auf dem Foto wirkt die gedeckte Markenfarbe
stumpf. Weiss gefuellt traegt auf jedem Bildausschnitt. */
.held .knopf { background: #fff; border-color: #fff; color: var(--marine); }
.held .knopf:hover { background: rgba(255,255,255,.86); border-color: rgba(255,255,255,.86); }
.held .knopf-linie { background: rgba(0,42,88,.25); color: #fff; border-color: rgba(255,255,255,.5); backdrop-filter: blur(4px); }
.held .knopf-linie:hover { background: #fff; border-color: #fff; color: var(--marine); }
/* ── Aufbau-Choreografie: das Haus setzt sich Stück für Stück zusammen ──
Alles nur transform (hintergrund-tab-sicher), Notbremse via spawn-fertig. */
/* Einfluege starten unsichtbar (opacity 0) und erscheinen im Flow.
Das ist sicher, weil die spawn-fertig-Notbremse nach 4 s jede dieser
Animationen beendet und damit den Endzustand erzwingt. */
@keyframes sanft-hoch { from { transform: translateY(26px); opacity: 0; } to { opacity: 1; } }
@keyframes held-setzen { from { transform: scale(1.07); } }
@keyframes wort-hoch { from { transform: translateY(115%); } }
@keyframes von-links { from { transform: translateX(-46px); opacity: 0; } to { opacity: 1; } }
@keyframes von-rechts { from { transform: translateX(46px); opacity: 0; } to { opacity: 1; } }
@keyframes linie-wachsen{ from { transform: scaleX(0); } }
@keyframes pop-auf { 0% { transform: translateY(22px) scale(.94); opacity: 0; } 45% { opacity: 1; } 70% { transform: translateY(-3px) scale(1.015); } 100% { transform: none; opacity: 1; } }
@keyframes cue-pendel { 0%, 100% { transform: translateY(-1px) rotate(45deg); } 50% { transform: translateY(7px) rotate(45deg); } }
.js .held-bild img { animation: held-setzen 3.4s var(--ease-weich) both; }
/* Zeile 1: Goldlinie waechst, dann schiebt der Lauf von links */
.held-lauf { display: block; }
.js .held-lauf { animation: von-links 1.2s var(--ease-weich) .4s backwards; }
/* Headline: Woerter steigen einzeln aus der Zeile */
.held-titel .wort { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.held-titel .wort > span { display: inline-block; }
.js .held-titel .wort:nth-child(1) > span { animation: wort-hoch 1.15s var(--ease-weich) .7s backwards; }
.js .held-titel .wort:nth-child(2) > span { animation: wort-hoch 1.15s var(--ease-weich) .9s backwards; }
.js .held-titel .wort:nth-child(3) > span { animation: wort-hoch 1.15s var(--ease-weich) 1.1s backwards; }
/* Text von rechts, Knoepfe poppen nacheinander */
.js .held-text { animation: von-rechts 1.2s var(--ease-weich) 1.35s backwards; }
.js .held-tat .knopf:nth-child(1) { animation: pop-auf 1s var(--ease-pop) 1.6s backwards; }
.js .held-tat .knopf:nth-child(2) { animation: pop-auf 1s var(--ease-pop) 1.78s backwards; }
/* Seitenzeile links (nur breit) */
.held-seite {
position: absolute; left: clamp(.6rem, 1.6vw, 1.8rem); bottom: clamp(6rem, 14vh, 10rem);
z-index: 2;
writing-mode: vertical-rl; transform: rotate(180deg);
font-size: .66rem; letter-spacing: .5em; text-transform: uppercase;
color: rgba(255,255,255,.65);
display: none;
}
@media (min-width: 1240px) { .held-seite { display: block; } }
.js .held-seite { animation: von-links 1.3s var(--ease-weich) 2s backwards; }
/* Scroll-Hinweis: faehrt ein und pendelt danach sanft */
.held-cue {
position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
z-index: 2; width: 2.6rem; height: 2.6rem;
display: grid; place-content: center;
border: 1px solid rgba(255,255,255,.4); border-radius: 50%;
}
.held-cue span {
width: .55rem; height: .55rem;
border-right: 1px solid #fff; border-bottom: 1px solid #fff;
transform: translateY(-1px) rotate(45deg);
}
.js .held-cue { animation: sanft-hoch 1.1s var(--ease-weich) 2.4s backwards; }
.js .held-cue span { animation: cue-pendel 3.2s ease-in-out 3.6s infinite; }
.held-cue:hover { border-color: var(--gold); }
.held-cue:hover span { border-color: var(--gold); }
@media (max-height: 620px), (max-width: 700px) { .held-cue { display: none; } }
body.spawn-fertig .held-bild img, body.spawn-fertig .held-lauf,
body.spawn-fertig .held-titel .wort > span,
body.spawn-fertig .held-text, body.spawn-fertig .held-tat .knopf,
body.spawn-fertig .held-seite,
body.spawn-fertig .held-cue { animation: none !important; }
/* Das Pendeln des Cue-Pfeils darf weiterlaufen — es startet nicht unsichtbar */
body.spawn-fertig .held-cue span { animation: cue-pendel 3.2s ease-in-out infinite !important; }
/* Logo im Kopf schreibt sich bei jedem Seitenaufruf ein */
@keyframes logo-schreiben {
from { -webkit-mask-position: 130% 0; mask-position: 130% 0; }
to { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}
.js .marke-bild {
-webkit-mask-image: linear-gradient(105deg, #000 42%, transparent 58%);
mask-image: linear-gradient(105deg, #000 42%, transparent 58%);
-webkit-mask-size: 300% 100%; mask-size: 300% 100%;
-webkit-mask-position: 0% 0; mask-position: 0% 0;
animation: logo-schreiben 2s var(--ease) .1s backwards;
}
body.spawn-fertig .marke-bild { animation: none !important; }
.aktuell-band { background: var(--marine); color: #fff; }
.aktuell-innen { display: grid; gap: .8rem; padding-block: 1rem 1.15rem; }
/* Der Hero-Text sitzt auf der Logo-Achse. Das Band begann daneben an der
normalen Rahmenkante, was wie ein Versehen aussah. Jetzt dieselbe Kante. */
@media (min-width: 1040px) {
.aktuell-innen { padding-left: var(--held-achse); }
}
.aktuell-label {
justify-self: start;
color: rgba(255,255,255,.62);
font-size: .64rem; letter-spacing: .34em; text-transform: uppercase;
margin-right: -.34em; /* gleicher Ausgleich wie bei .lauf, siehe dort */
padding: 0 0 .25rem;
border-bottom: 1px solid rgba(255,255,255,.22);
}
.aktuell-liste { display: grid; gap: 0; }
.aktuell-punkt {
display: flex; align-items: baseline; gap: .6rem;
text-decoration: none; color: #fff;
font-size: .95rem; letter-spacing: .015em;
padding: .55rem 0;
}
.aktuell-punkt + .aktuell-punkt { border-top: 1px solid rgba(255,255,255,.16); }
.aktuell-punkt strong { font-weight: 400; }
.aktuell-punkt span {
color: rgba(255,255,255,.78); font-size: .86rem;
border-bottom: 1px solid rgba(255,255,255,.35);
transition: border-color .3s var(--ease), color .3s var(--ease);
}
.aktuell-punkt:hover span { color: #fff; border-color: #fff; }
@media (min-width: 900px) {
/* Doppelpunkt plus Abstand. Beim Umbau fuer das Handy ist das Leerzeichen
zwischen Name und Termin verlorengegangen, einzeilig klebte beides
aneinander. */
.aktuell-punkt strong::after { content: ':'; margin-right: .4em; }
.aktuell-innen { grid-template-columns: auto 1fr; align-items: center; gap: 2rem; padding-block: .85rem; }
/* Umbrechen statt quetschen: bei zwei langen Terminen stand der Text sonst
bis an die Kante. Gemeldet im Feedback 2 („ein bisschen eng"). */
.aktuell-liste { display: flex; flex-wrap: wrap; gap: .5rem 3rem; }
.aktuell-punkt { padding: .3rem 0; }
.aktuell-punkt + .aktuell-punkt { border-top: 0; position: relative; }
.aktuell-punkt + .aktuell-punkt::before {
content: ''; position: absolute; left: -1.5rem; top: 15%; bottom: 15%;
width: 1px; background: rgba(255,255,255,.28);
}
}
/* ---------- Der Tag ------------------------------------------------------------ */
.tag-kopf { display: grid; gap: .9rem; margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.tag-jetzt { font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem); color: var(--marine); min-height: 1.2em; }
.schiene { position: relative; }
.schiene-linie { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--linie); }
@media (max-width: 859px) {
.schiene-linie { display: none; }
.schiene-marke { display: none !important; }
}
.schiene-marke {
position: absolute; top: -4px; width: 9px; height: 9px;
background: var(--gold-tief); border-radius: 50%;
transform: translateX(-50%); transition: left 1.2s var(--ease-weich); display: none;
}
.schiene-marke.ist-da { display: block; }
.schiene-marke::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--gold-tief); opacity: .5; }
.stunden { display: grid; gap: 0; }
.stunde { padding: 1.8rem 0 1.5rem; border-bottom: 1px solid var(--linie-fein); display: grid; gap: .5rem; position: relative; }
.marine .stunde, .dunkel .stunde { border-color: var(--linie-d-fein); }
.marine .stunde::after, .dunkel .stunde::after { background: var(--linie-d); }
.stunde:last-child { border-bottom: 0; }
.stunde-zeit { font-size: .72rem; letter-spacing: .32em; text-transform: uppercase; color: var(--gold-tief); }
.stunde h3 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); }
.stunde p { font-size: .95rem; color: var(--tinte-2); max-width: 30rem; }
.stunde.ist-jetzt .stunde-zeit { color: var(--bordeaux); }
.stunde.ist-jetzt::before { content: ''; position: absolute; left: -1.1rem; top: 2rem; bottom: 1.6rem; width: 2px; background: var(--bordeaux); }
@media (min-width: 860px) {
.stunden { grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 2.5vw, 2.75rem); border-top: 1px solid var(--linie); }
.stunden-3 { grid-template-columns: repeat(3, 1fr); }
.stunde { border-bottom: 0; padding: 2rem 0 0; align-content: start; }
.stunde::after { content: ''; position: absolute; left: 0; top: -1px; width: 1px; height: 1.3rem; background: var(--linie); }
.stunde.ist-jetzt::before { left: 0; top: -1px; bottom: auto; height: 1.3rem; width: 2px; }
.stunde.ist-jetzt::after { display: none; }
}
/* ---------- Karten-System (Speisekarte aktiv auf der Seite) -------------------- */
.karten-reiter {
display: flex; flex-wrap: wrap; gap: .5rem;
}
@media (max-width: 720px) {
.karten-reiter {
flex-wrap: nowrap; overflow-x: auto;
scrollbar-width: none;
margin-inline: calc(50% - 50vw); padding-inline: 1.25rem;
scroll-snap-type: x proximity;
}
.karten-reiter::-webkit-scrollbar { display: none; }
.karten-reiter button { white-space: nowrap; scroll-snap-align: start; }
}
.karten-reiter button {
appearance: none; background: none; border: 0; cursor: pointer;
font-family: var(--sans); font-size: .78rem;
letter-spacing: .18em; text-transform: uppercase;
color: var(--tinte-3);
padding: .7rem .9rem;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color .3s var(--ease), border-color .3s var(--ease);
}
.karten-reiter button:hover { color: var(--marine); }
.karten-reiter button[aria-selected="true"] { color: var(--marine); border-bottom-color: var(--gold-tief); }
.karten-panel[hidden] { display: none; }
/* Blende statt Schub. Ein transform auf dem Panel macht es zum
Bezugsrahmen fuer position:sticky, und die Filterleiste darin klebte
dadurch 10 px zu tief, mit einem Spalt unter der Kopfzeile. Gefunden
11.10.2026 beim Umbau der Leisten-Unterkante. */
.karten-panel { animation: panel-auf .8s var(--ease-weich); }
@keyframes panel-auf { from { opacity: 0; } }
.posten { display: grid; gap: 0; }
@media (min-width: 820px) { .posten { grid-template-columns: 1fr 1fr; column-gap: clamp(2.5rem, 5vw, 4.5rem); } }
.posten > div { padding: .95rem 0; border-bottom: 1px solid var(--linie-fein); }
.gericht { display: flex; align-items: baseline; gap: .7rem; }
.gericht h3, .gericht h4 { font-size: 1.06rem; letter-spacing: .02em; }
.gericht .punkte { flex: 1; border-bottom: 1px dotted var(--linie); transform: translateY(-.25em); min-width: 1.5rem; }
.gericht .preis { font-size: 1rem; color: var(--marine); white-space: nowrap; }
.posten .beschreibung { margin: .3rem 0 0; font-size: .9rem; color: var(--tinte-3); line-height: 1.6; }
.posten .beschreibung em { font-style: normal; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-tief); }
/* Zwischenüberschriften in der Karte, wie die Gruppen im Druck
(Kleines Frühstück, Korn-an-Korn Brote, Unser Tipp). */
.karten-gruppe {
margin: clamp(2.25rem, 4vw, 3.25rem) 0 .3rem;
padding-top: 1.4rem; border-top: 2px solid var(--marine);
font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem); letter-spacing: .01em;
}
.karten-gruppe-text { margin: 0 0 .9rem; font-size: .9rem; color: var(--tinte-3); }
.karten-gruppe + .posten { margin-top: .6rem; }
.karte-hinweis {
margin-top: clamp(2rem, 3.5vw, 3rem);
padding: 1.3rem 1.5rem;
border: 1px solid var(--linie);
background: var(--hell);
font-size: .9rem; color: var(--tinte-2);
display: flex; gap: 1rem; align-items: flex-start;
}
.karte-hinweis svg { flex: none; width: 1.25rem; color: var(--marine); margin-top: .15rem; }
/* ---------- Leistungs-/Anlass-Karten ------------------------------------------- */
.anlaesse { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }
@media (min-width: 700px) { .anlaesse { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .anlaesse { grid-template-columns: repeat(3, 1fr); } }
.anlass {
display: grid; grid-template-rows: auto 1fr;
background: var(--weiss); border: 1px solid var(--linie-fein);
text-decoration: none;
transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.anlass:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(0,42,88,.35); border-color: rgba(0,42,88,.25); }
.anlass .bogen { aspect-ratio: 3 / 2; }
.anlass-text { padding: 1.3rem 1.4rem 1.5rem; }
.anlass-text h3 { font-size: 1.28rem; }
.anlass-text p { margin: .5rem 0 0; font-size: .92rem; color: var(--tinte-2); line-height: 1.65; }
.anlass-text .pfeil { margin-top: .9rem; font-size: .72rem; }
.dunkel .anlass, .marine .anlass { background: #fff; border-color: transparent; }
.dunkel .anlass h3, .marine .anlass h3 { color: var(--tinte); }
.dunkel .anlass p, .marine .anlass p { color: var(--tinte-2); }
.dunkel .anlass .pfeil, .marine .anlass .pfeil { color: var(--marine); background-image: linear-gradient(var(--gold-tief), var(--gold-tief)); }
/* ---------- Vitrine-Schiene ------------------------------------------------ */
.vitrine { overflow: hidden; }
.vitrine-kopf { margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.rail-halter { position: relative; }
.rail {
display: flex; gap: clamp(1rem, 1.6vw, 1.5rem);
overflow-x: auto;
touch-action: pan-x pan-y;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
padding: 0 max(1.25rem, calc((100vw - var(--rahmen)) / 2)) 1.25rem;
/* Die Bahn laeuft ueber die ganze Fensterbreite, das Polster schiebt die
erste Karte auf den Textrand. Ohne scroll-padding rastet scroll-snap-align
aber am Rand des Scrollbereichs ein, also am Fensterrand, und ab dem
ersten Wischen stehen die Karten weiter links als jede Ueberschrift
(Pin 28.10.2026: „startet viel zu weit links"). Das scroll-padding muss
deshalb denselben Wert haben wie das Polster. */
scroll-padding-inline: max(1.25rem, calc((100vw - var(--rahmen)) / 2));
margin-inline: calc(50% - 50vw);
scrollbar-width: none;
scroll-behavior: smooth;
}
.rail::-webkit-scrollbar { display: none; }
/* start statt center: die Pfeile springen auf Kachelkanten, bei mittigem
Einrasten zog der Browser jeden Sprung auf eine andere Position zurueck
und es sah aus, als passiere nichts. */
.stueck { flex: 0 0 auto; width: clamp(13rem, 23vw, 18rem); scroll-snap-align: start; }
.stueck .bogen { aspect-ratio: 4 / 5; border: 1px solid var(--linie-d-fein); }
.stueck h3 { margin-top: 1rem; font-size: 1.15rem; letter-spacing: .03em; }
.stueck p { margin-top: .25rem; font-size: .86rem; color: var(--nebel); line-height: 1.6; }
.rail-hinweis {
color: var(--nebel) !important;
font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
margin-top: .5rem;
}
/* Kontakt-Seite: Oeffnungszeiten. Stand vorher als Inline-Stil in der Seite. */
.zeiten-gross { font-size: 1.02rem; }
.zeiten-fussnote { margin-top: 1rem; font-size: .9rem; }
.zeiten-zeile { font-size: .98rem; }
/* ---------- Bild-Text-Paare ------------------------------------------------------ */
.paar { display: grid; gap: clamp(1.75rem, 4vw, 4rem); align-items: center; }
@media (min-width: 900px) {
.paar { grid-template-columns: 1fr 1fr; }
.paar-links > figure { order: -1; }
.paar-schmal { grid-template-columns: .85fr 1.15fr; }
.paar-weit { grid-template-columns: 1.2fr .8fr; }
}
.paar-text > * + * { margin-top: 1.25rem; }
.paar-text h2 + p { margin-top: 1.4rem; }
/* ---------- Chronik ---------------------------------------------------------------- */
.chronik { border-top: 1px solid var(--linie); }
.eintrag { display: grid; gap: .3rem 2.5rem; padding: clamp(1.5rem, 2.5vw, 2.2rem) 0; border-bottom: 1px solid var(--linie-fein); }
.eintrag-jahr { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.7rem); line-height: 1.05; color: var(--marine); }
.eintrag h3 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.6rem); margin-bottom: .4rem; }
.eintrag p { font-size: .97rem; color: var(--tinte-2); max-width: 42rem; }
@media (min-width: 780px) { .eintrag { grid-template-columns: 11rem 1fr; align-items: start; } }
.eintrag-heute .eintrag-jahr { color: var(--gold-tief); }
/* ---------- 3D-Funde --------------------------------------------------------------- */
.funde { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 780px) { .funde { grid-template-columns: repeat(2, 1fr); } }
.fund { display: block; text-decoration: none; color: inherit; }
.fund .bogen { aspect-ratio: 3 / 2; }
.fund h3 { margin-top: 1rem; font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); }
.fund p { margin: .5rem 0 0; font-size: .94rem; color: var(--tinte-2); max-width: 32rem; }
.fund .pfeil { display: inline-flex; margin-top: .9rem; }
/* Der Pfeil ist hier nur Deko im Link, die Linie zeichnet sich beim Hovern. */
.fund .pfeil::after { content: " \2192"; }
.fund:hover h3 { color: var(--gold-tief); }
.fund:hover .pfeil { background-size: 100% 1px; }
/* Bild in einem Chronik-Eintrag. Schmal gestapelt, ab 980px steht es als
eigene Spalte rechts neben dem Text und nutzt den bisher leeren Rand. */
.eintrag-bild { margin-top: 1.2rem; max-width: 24rem; }
.eintrag-bild .bogen { aspect-ratio: 3 / 2; }
.eintrag-bild figcaption { margin-top: .6rem; font-size: .78rem; }
@media (min-width: 780px) {
/* Schmaler Bereich: Bild unter dem Text, aber in dessen Spalte. */
.eintrag-mit-bild .eintrag-bild { grid-column: 2; }
}
@media (min-width: 980px) {
/* Die Jahreszahl bleibt immer links, Bild und Text tauschen von Eintrag zu
Eintrag die Seite. Das gibt der Chronik einen Wechsel statt einer Kante. */
.eintrag-mit-bild { grid-template-columns: 11rem 1fr 17rem; }
.eintrag-mit-bild .eintrag-bild { grid-column: 3; grid-row: 1; margin-top: .35rem; max-width: none; }
.eintrag-mit-bild p { max-width: 34rem; }
.eintrag-mit-bild.bild-links { grid-template-columns: 11rem 17rem 1fr; }
.eintrag-mit-bild.bild-links .eintrag-bild { grid-column: 2; }
.eintrag-mit-bild.bild-links > div { grid-column: 3; }
}
/* ---------- Räume ------------------------------------------------------------------- */
.raeume { display: grid; gap: clamp(2.75rem, 5vw, 5rem); }
.raum { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
@media (min-width: 880px) {
.raum { grid-template-columns: 1.12fr .88fr; }
.raum:nth-child(even) > figure { order: 2; }
.raum:nth-child(even) { grid-template-columns: .88fr 1.12fr; }
}
.raum-kopf { display: grid; justify-items: start; gap: .7rem; margin-bottom: 1rem; }
.raum-kopf h3 { font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.3rem); }
.raum-groesse { font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--marine); border: 1px solid var(--linie); padding: .3rem .7rem; }
.dunkel .raum-groesse, .marine .raum-groesse { border-color: var(--linie-d); color: var(--gold); }
.raum-liste { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .45rem; }
.raum-liste li { padding-left: 1.3rem; position: relative; font-size: .95rem; color: var(--tinte-2); }
.raum-liste li::before { content: ''; position: absolute; left: 0; top: .66em; width: .55rem; height: 1px; background: var(--gold-tief); }
.dunkel .raum-liste li, .marine .raum-liste li { color: var(--nebel); }
/* ---------- Termin-Liste (Aktuelles / Lesungen) -------------------------------------- */
.termine { display: grid; gap: 0; border-top: 1px solid var(--linie); }
.termin { display: grid; gap: .4rem 2rem; padding: clamp(1.4rem, 2.5vw, 2rem) 0; border-bottom: 1px solid var(--linie-fein); }
@media (min-width: 780px) { .termin { grid-template-columns: 11rem 1fr auto; align-items: baseline; } }
.termin-datum { font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-tief); }
.termin h3 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.55rem); }
.termin p { margin: .35rem 0 0; font-size: .94rem; color: var(--tinte-2); max-width: 38rem; }
.termin .preis-chip { font-size: .95rem; color: var(--marine); white-space: nowrap; }
.termin.ist-vorbei { opacity: .45; }
/* Termin-Karten: ein Bild pro Termin, darunter Gaenge und Preis. */
.termin-karten { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 820px) { .termin-karten { grid-template-columns: repeat(2, 1fr); } }
.termin-karte {
display: flex; flex-direction: column;
background: var(--weiss); border: 1px solid var(--linie-fein);
}
.termin-karte > .bogen { aspect-ratio: 3 / 2; }
.termin-koerper {
display: flex; flex-direction: column; gap: .8rem;
padding: clamp(1.25rem, 2.4vw, 1.9rem);
flex: 1 1 auto;
}
.termin-wann { display: flex; flex-wrap: wrap; gap: .4rem; }
.termin-tag {
font-size: .71rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--marine); border: 1px solid var(--linie); padding: .3rem .6rem;
}
.termin-karte h3 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); }
.termin-karte p { margin: 0; font-size: .94rem; color: var(--tinte-2); }
.termin-gaenge { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.termin-gaenge li { position: relative; padding-left: 1.3rem; font-size: .92rem; color: var(--tinte-2); }
.termin-gaenge li::before {
content: ''; position: absolute; left: 0; top: .66em;
width: .55rem; height: 1px; background: var(--gold-tief);
}
.termin-gaenge em { font-style: normal; color: var(--tinte-3); }
.termin-fuss {
margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--linie-fein);
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: .8rem;
}
.termin-preis { font-size: 1.05rem; color: var(--marine); white-space: nowrap; }
/* ---------- Terminliste nach dem Entwurf -------------------------------------------
Drei Spalten: links die Tage, in der Mitte der Text, rechts ein Symbolbild.
Unter 980px stapelt alles, das Bild wandert dabei ganz nach unten. */
.termin-liste { border-top: 1px solid var(--linie); }
.termin-zeile {
display: grid; gap: 1.1rem 2.5rem;
padding: clamp(1.75rem, 3vw, 2.75rem) 0;
border-bottom: 1px solid var(--linie-fein);
align-items: start;
}
@media (min-width: 980px) {
.termin-zeile { grid-template-columns: 11rem 1fr 15rem; }
}
.termin-zeile[hidden] { display: none; }
.termin-tage { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.termin-tage li { display: grid; gap: .1rem; }
.termin-tage strong { font-weight: 600; color: var(--marine); font-size: .97rem; }
.termin-tage span { font-size: .9rem; color: var(--tinte-2); }
.termin-offen { margin: 0; font-size: .92rem; color: var(--tinte-3); }
.termin-inhalt > * + * { margin-top: .85rem; }
.termin-inhalt h3 { font-size: clamp(1.35rem, 1.15rem + .9vw, 1.8rem); margin-top: .35rem; }
.termin-inhalt > p { margin: 0; font-size: .95rem; color: var(--tinte-2); max-width: 44rem; }
.termin-fett { color: var(--marine) !important; font-weight: 600; }
.termin-inhalt .termin-preis { display: block; font-size: 1.05rem; font-weight: 600; }
.termin-reservieren { font-size: .84rem; color: var(--tinte-3); }
.termin-reservieren a { color: inherit; }
.termin-bild { margin: 0; }
.termin-bild .bogen { aspect-ratio: 3 / 2; position: relative; }
@media (max-width: 979px) { .termin-bild { max-width: 22rem; } }
/* Aufklappbare Menueoptionen, ein Gang je Klappe.
Vorher lag das ganze Menue hinter einem Schalter, man sah nicht einmal,
dass es Vorspeise, Hauptgang und Dessert gibt. Jetzt stehen die Gaenge da
und man oeffnet den, der einen interessiert. */
.menue-gaenge { border-bottom: 1px solid var(--linie-fein); }
.menue-klapp { border-top: 1px solid var(--linie-fein); }
.menue-klapp summary {
list-style: none; cursor: pointer;
display: flex; align-items: center; gap: .8rem;
padding: .8rem 0;
font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
color: var(--marine); font-weight: 600;
transition: color .3s var(--ease);
}
.menue-klapp summary em {
font-style: normal; font-weight: 400; letter-spacing: .04em;
text-transform: none; font-size: .82rem; color: var(--tinte-3);
}
.menue-klapp summary i { margin-left: auto; }
.menue-klapp summary::-webkit-details-marker { display: none; }
.menue-klapp summary:hover { color: var(--gold-tief); }
.menue-klapp summary:hover em { color: var(--gold-tief); }
.menue-klapp summary i {
flex: none; position: relative; width: 1.2rem; height: 1.2rem;
border: 1px solid var(--gold-tief); border-radius: 50%;
}
.menue-klapp summary i::before, .menue-klapp summary i::after {
content: ''; position: absolute; left: 50%; top: 50%;
width: .52rem; height: 1px; background: var(--gold-tief);
transform: translate(-50%, -50%);
transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
}
.menue-klapp summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.menue-klapp[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
.menue-klapp[open] summary i::before { transform: translate(-50%, -50%) rotate(180deg); }
.menue-inhalt { padding-bottom: .6rem; }
.menue-inhalt h4 {
font-size: .76rem; letter-spacing: .2em; text-transform: uppercase;
color: var(--marine); margin: 1.1rem 0 .2rem;
padding-bottom: .5rem; border-bottom: 1px solid var(--marine);
}
.menue-inhalt h4:first-child { margin-top: 0; }
.menue-liste { list-style: none; margin: 0; padding: 0; }
.menue-liste { padding-bottom: .5rem; }
.menue-liste li {
padding: .6rem 0; border-top: 1px solid var(--linie-fein);
display: grid; gap: .12rem;
}
.menue-liste .gericht { font-size: .95rem; color: var(--tinte); }
.menue-liste .dazu { font-size: .9rem; color: var(--tinte-2); }
/* ---------- Anfrage-Band (Lesungen & Events) ---------------------------------------- */
.anfrage-band {
position: relative;
display: grid; gap: 0;
background: var(--marine); color: #fff;
}
/* Auf Marine braucht der Kicker das hellere Gold: --gold-tief kaeme nur auf
3,2:1, --gold auf 5,1:1. */
.anfrage-band .lauf { color: var(--gold); }
@media (min-width: 900px) { .anfrage-band { grid-template-columns: 1fr 1.15fr; } }
.anfrage-text { padding: clamp(1.75rem, 4vw, 3.25rem); }
.anfrage-text > * + * { margin-top: 1rem; }
.anfrage-text h2 { margin-top: .4rem; }
.anfrage-text .termin-fett { color: #fff !important; }
.anfrage-wege { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.anfrage-wege li { display: flex; align-items: center; gap: .7rem; }
.anfrage-wege svg { flex: none; width: 1.15rem; height: 1.15rem; color: var(--gold); }
.anfrage-wege a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); }
.anfrage-wege a:hover { border-color: var(--gold); color: var(--gold); }
.anfrage-mehr { margin-top: 1.4rem; }
.anfrage-mehr .pfeil { color: #fff; }
/* Das Bild sass bisher nur 235 px hoch in einer 420 px hohen Spalte, darunter
klaffte Marineblau. Das ist inline und erbt die Hoehe nicht von
allein, deshalb muss die Kette ausdruecklich durchgereicht werden. */
.anfrage-bild { overflow: hidden; display: block; min-height: 13rem; }
.anfrage-bild picture { display: block; height: 100%; }
.anfrage-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Der goldene Knopf sitzt im Entwurf halb ueber der Bildkante. */
.anfrage-knopf {
display: grid; gap: .15rem; text-decoration: none;
background: var(--gold-tief); color: #fff;
padding: .9rem 1.6rem; text-align: center;
transition: background .35s var(--ease);
}
.anfrage-knopf span { font-size: .8rem; }
.anfrage-knopf strong {
font-weight: 700; font-size: .82rem;
letter-spacing: .18em; text-transform: uppercase;
}
.anfrage-knopf:hover { background: #fff; color: var(--marine); }
@media (min-width: 900px) {
.anfrage-knopf {
position: absolute; right: clamp(1rem, 3vw, 2.5rem); bottom: 0;
transform: translateY(50%);
box-shadow: 0 10px 30px rgba(0,42,88,.25);
}
.anfrage-band { margin-bottom: 2.5rem; }
}
/* ---------- Gästestimmen -------------------------------------------------------
Eigenes Band mit Bild und dunklem Schleier, damit der Abschnitt nicht in der
Seite untergeht. Die Zahl ist das Schaustueck, die Zitate stehen darunter in
halbdurchsichtigen Karten. Alle drei haben wirklich fuenf Sterne. */
.stimmen-band { padding-block: clamp(3.25rem, 6vw, 5.5rem); }
.stimmen-band .band-bild img { opacity: .2; }
.stimmen-kopf { text-align: center; } /* zentriert: Absicht, das Band ist mittig aufgebaut */
.stimmen-sterne { display: inline-flex; gap: .3rem; justify-content: center; }
.stimmen-sterne i {
width: clamp(1.1rem, .8rem + .9vw, 1.7rem); aspect-ratio: 1; display: block;
background: var(--gold);
-webkit-mask: var(--stern) center / contain no-repeat;
mask: var(--stern) center / contain no-repeat;
}
.stimmen-zahl {
margin: .5rem 0 0 !important; max-width: none !important;
font-size: clamp(3.4rem, 1.5rem + 9vw, 7.5rem); line-height: .95;
color: var(--gold) !important;
font-variant-numeric: tabular-nums;
letter-spacing: -.02em;
}
.stimmen-band h2 { margin-top: .3rem; font-size: clamp(1.4rem, 1.05rem + 1.5vw, 2.1rem); }
.stimmen-vor { margin-top: .9rem !important; font-size: .95rem; }
/* Karussell: ein Fenster, dahinter eine Spur, die per transform wandert.
JS haengt einen Klon aller Karten an, deshalb laeuft der Umlauf nahtlos
weiter und springt am Ende lautlos zurueck. Ohne JS bleibt es ein ganz
normaler, mit dem Finger schiebbarer Streifen. */
.stimmen-lauf { margin-top: clamp(2.25rem, 4vw, 3.25rem); }
.stimmen-fenster {
/* Polsterung, damit der Anheb-Effekt beim Hover nicht abgeschnitten wird. */
padding-block: 6px; margin-block: -6px;
overflow-x: auto; overflow-y: hidden;
scrollbar-width: none; -ms-overflow-style: none;
scroll-snap-type: x mandatory;
}
.stimmen-fenster::-webkit-scrollbar { display: none; }
.js .stimmen-fenster { overflow: hidden; scroll-snap-type: none; }
.stimmen-spur {
--pro-sicht: 1.12;
--luecke: clamp(.9rem, 2vw, 1.5rem);
display: flex; align-items: stretch; gap: var(--luecke);
text-align: left;
will-change: transform;
}
.js .stimmen-spur { transition: transform .75s var(--ease); }
@media (min-width: 620px) { .stimmen-spur { --pro-sicht: 2.15; } }
@media (min-width: 1040px) { .stimmen-spur { --pro-sicht: 3.2; } }
.stimme {
margin: 0; display: grid; gap: .85rem; align-content: start;
flex: 0 0 calc((100% - (var(--pro-sicht) - 1) * var(--luecke)) / var(--pro-sicht));
scroll-snap-align: start;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.16);
border-top: 2px solid var(--gold);
padding: clamp(1.15rem, 2.4vw, 1.7rem);
transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.stimme:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); transform: translateY(-3px); }
.stimme-sterne { display: inline-flex; gap: .16rem; }
.stimme-sterne i {
width: .88rem; height: .88rem; display: block; background: var(--gold);
-webkit-mask: var(--stern) center / contain no-repeat;
mask: var(--stern) center / contain no-repeat;
}
.stimme blockquote {
margin: 0; font-size: .97rem; line-height: 1.65; color: #fff;
quotes: "\201E" "\201C";
}
.stimme blockquote::before { content: open-quote; }
.stimme blockquote::after { content: close-quote; }
/* Der Name steht weiss, nicht golden: auf der aufgehellten Kartenflaeche
kommt --gold nur auf 4,22:1, noetig sind 4,5:1. Gold bleibt den Sternen
und der Oberkante vorbehalten. */
.stimme figcaption { margin: 0; font-size: .85rem; color: #fff; font-weight: 600; }
.stimme figcaption span { font-weight: 400; color: var(--nebel); }
/* Pfeile: erst sichtbar, wenn JS die Spur uebernommen hat. */
.stimmen-steuer { display: none; justify-content: center; gap: .75rem; margin-top: clamp(1.4rem, 2.5vw, 2rem); }
.js .stimmen-steuer { display: flex; }
.stimmen-pfeil {
width: 2.9rem; height: 2.9rem; padding: 0; border-radius: 50%; cursor: pointer;
display: grid; place-items: center;
/* .3 Weiss ergaebe nur 2,54:1, Bedienelemente brauchen 3:1. */
background: transparent; border: 1px solid rgba(255,255,255,.45); color: var(--gold);
transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.stimmen-pfeil svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stimmen-pfeil:hover { background: var(--gold); border-color: var(--gold); color: var(--nacht); }
.stimmen-pfeil:active { transform: scale(.94); }
@media (prefers-reduced-motion: reduce) {
.stimme:hover { transform: none; }
.js .stimmen-spur { transition: none; }
.stimmen-pfeil:active { transform: none; }
}
/* Reservierungsknopf im Mobilmenue: „Reservierung · 0451 296 98 95" passte
auf schmalen Geraeten (360 px und darunter) nicht in eine Zeile und brach
mitten in der Rufnummer um. Jetzt bewusst zwei Zeilen, die Nummer bleibt
zusammen. */
.knopf-ruf {
display: grid; justify-items: center; gap: .3rem;
line-height: 1.15; padding-block: .85rem;
}
.knopf-ruf span { font-size: .67rem; letter-spacing: .24em; opacity: .85; }
.knopf-ruf strong {
font-weight: 600; font-size: .98rem; letter-spacing: .07em;
white-space: nowrap;
}
/* ---------- Nachbesserungen Mobil (07.10.2026) -------------------------------- */
/* 1 · „Zur Fruehstueckskarte" brauchte 218 px, die Kachel ist 208 px breit,
also brach der Link in zwei Zeilen. Etwas weniger Sperrung reicht, damit
er hineinpasst, und nowrap verhindert den Umbruch endgueltig. */
@media (max-width: 859px) {
.stueck .pfeil { letter-spacing: .12em; white-space: nowrap; }
}
/* 2 · Galerie: im zweispaltigen Raster standen Hoch- und Querformate
nebeneinander, dadurch blieb unter dem flacheren Bild ein Loch. Auf dem
Handy bekommen alle halbbreiten Kacheln dasselbe Mass, die ganzbreiten
behalten ihr Querformat. */
@media (max-width: 779px) {
.mosaik-gleich .kachel.k-hoch, .mosaik-gleich .kachel.k-quer { aspect-ratio: 4 / 5; }
.mosaik-gleich .kachel.k-voll { aspect-ratio: 3 / 2; }
.mosaik-gleich .kachel.k-fuellt { height: auto; min-height: 0; }
}
/* 3 · Termine: erst das Bild, dann der Text, dann die Daten. Vorher stand
die Datumsliste ganz oben und das Bild ganz unten. */
@media (max-width: 979px) {
.termin-zeile .termin-bild { order: 1; }
.termin-zeile .termin-inhalt { order: 2; }
.termin-zeile .termin-wann { order: 3; }
}
/* 4 · Die Seite, auf der man steht, im Mobilmenue golden, und ihr
Aufklapper steht offen. Die Kopfzeile kann das laengst ueber is-current,
im Mobilmenue fehlte jede Markierung. */
.mobil-nav nav a.ist-hier,
.mobil-nav nav a.ist-hier span { color: var(--gold); }
.mobil-nav nav a.klein-punkt.ist-hier { position: relative; }
.mobil-nav nav a.klein-punkt.ist-hier::before {
content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 2px; height: 1.1em; background: var(--gold);
}
.mobil-auf.ist-hier-gruppe { color: var(--gold); }
/* 5 · Ueber uns: auf dem Handy soll das Bild der Gastgeberin ueber ihrem
Text stehen, nicht darunter. */
@media (max-width: 899px) {
.paar-bild-zuerst > figure { order: -1; }
}
/* ---------- Instagram ----------------------------------------------------------
Die Beitraege sehen aus wie bei Instagram: Profilbild, Kontoname, Bild,
Zeichenreihe, Bildunterschrift, Datum. Alles liegt auf unserem eigenen
Server, es wird nichts von Meta nachgeladen: keine Drittanbieter-Skripte,
kein Cookie, kein Einwilligungsbanner. Die Zeichenreihe ist Zierde und
liegt deshalb hinter aria-hidden, geklickt wird das Bild. */
.insta-kopf {
display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
gap: 1.25rem; margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.insta-kopf .titel-block { margin: 0; }
.insta-kopf .knopf { flex: none; }
/* Spezifischer als .titel-block .lauf, sonst gewinnt dort display:block
und das Zeichen rutscht in eine eigene Zeile. */
.insta-kopf .titel-block .insta-lauf {
display: inline-flex; align-items: center; gap: .55rem;
padding-left: 0; margin-bottom: .85rem;
}
.insta-lauf::before { display: none; } /* die Goldlinie stoert neben dem Zeichen */
.insta-lauf i { display: block; width: 1.05rem; height: 1.05rem; }
.insta-lauf svg { width: 100%; height: 100%; fill: none; stroke: var(--gold-tief); stroke-width: 1.7; }
.insta-lauf svg .voll { fill: var(--gold-tief); stroke: none; }
.insta-vor { margin-top: .7rem !important; color: var(--tinte-2); font-size: .97rem; }
.insta-fenster {
padding-block: 4px; margin-block: -4px;
overflow-x: auto; overflow-y: hidden;
scrollbar-width: none; -ms-overflow-style: none;
scroll-snap-type: x mandatory;
}
.insta-fenster::-webkit-scrollbar { display: none; }
.js .insta-fenster { overflow: hidden; scroll-snap-type: none; }
.insta-spur {
--pro-sicht: 1.1;
--luecke: clamp(.75rem, 1.6vw, 1.15rem);
list-style: none; margin: 0; padding: 0;
display: flex; align-items: stretch; gap: var(--luecke);
will-change: transform;
}
.js .insta-spur { transition: transform .7s var(--ease); }
@media (min-width: 640px) { .insta-spur { --pro-sicht: 2.15; } }
@media (min-width: 1000px) { .insta-spur { --pro-sicht: 3.15; } }
.ig-beitrag {
flex: 0 0 calc((100% - (var(--pro-sicht) - 1) * var(--luecke)) / var(--pro-sicht));
scroll-snap-align: start;
display: flex; flex-direction: column;
background: #fff; border: 1px solid var(--linie);
transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
@media (hover: hover) {
.ig-beitrag:hover { transform: translateY(-3px); box-shadow: 0 .9rem 2.2rem rgba(0,20,42,.1); }
}
.ig-kopf { display: flex; align-items: center; gap: .6rem; padding: .7rem .85rem; }
.ig-avatar { flex: none; display: block; width: 2rem; height: 2rem; }
.ig-avatar img {
width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
border: 1px solid var(--linie);
}
.ig-wer { display: grid; line-height: 1.25; min-width: 0; }
.ig-konto { font-weight: 600; font-size: .82rem; color: var(--tinte); }
.ig-ort { font-size: .72rem; color: var(--tinte-3); }
.ig-marke { flex: none; margin-left: auto; width: 1.1rem; height: 1.1rem; }
.ig-marke svg { width: 100%; height: 100%; fill: none; stroke: var(--tinte-3); stroke-width: 1.7; }
.ig-marke svg .voll { fill: var(--tinte-3); stroke: none; }
.ig-bild { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--hell-2); }
.ig-bild img { width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 1.1s var(--ease-weich); }
@media (hover: hover) { .ig-beitrag:hover .ig-bild img { transform: scale(1.05); } }
.ig-clip {
position: absolute; top: .55rem; right: .55rem;
width: 1.5rem; height: 1.5rem; border-radius: 50%;
display: grid; place-items: center; background: rgba(0,20,42,.72);
}
.ig-clip svg { width: .95rem; height: .95rem; fill: #fff; }
.ig-fuss { padding: .75rem .85rem 1rem; display: grid; gap: .5rem; }
.ig-zeichen { display: flex; gap: .7rem; }
.ig-zeichen svg {
width: 1.15rem; height: 1.15rem; fill: none;
stroke: var(--tinte-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.ig-text {
margin: 0 !important; font-size: .87rem; line-height: 1.55; color: var(--tinte-2);
/* Drei Zeilen, der Rest steht einen Klick entfernt im Beitrag selbst.
Der volle Text bleibt im Quelltext, Screenreader lesen ihn ganz. */
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
}
.ig-text .ig-konto { margin-right: .3em; }
.ig-tag { color: var(--gold-tief); }
.ig-datum {
margin: 0 !important; font-size: .7rem; letter-spacing: .06em;
text-transform: uppercase; color: var(--tinte-3);
}
.insta-steuer { display: none; justify-content: center; gap: .75rem; margin-top: clamp(1.3rem, 2.4vw, 1.9rem); }
.js .insta-steuer { display: flex; }
/* Auf Weiss braucht der Pfeil eine dunkle Linie, nicht die helle vom
Marine-Band: --linie kaeme nur auf 1,4:1, Bedienelemente brauchen 3:1. */
.insta-pfeil { border-color: var(--tinte-3); color: var(--gold-tief); }
.insta-pfeil:hover { background: var(--nacht); border-color: var(--nacht); color: #fff; }
@media (prefers-reduced-motion: reduce) {
.ig-beitrag:hover { transform: none; }
.ig-beitrag:hover .ig-bild img { transform: none; }
.js .insta-spur { transition: none; }
}
/* Instagram in der Fusszeile, auf jeder Seite. 2,75 rem hoch, damit die
Klickflaeche ueber den geforderten 24 px liegt. */
.fuss-insta {
display: inline-flex; align-items: center; gap: .55rem;
margin-top: 1.1rem; min-height: 2.75rem;
font-size: .9rem; color: var(--nebel);
text-decoration: none;
transition: color .3s var(--ease);
}
.fuss-insta-zeichen { display: block; width: 1.4rem; height: 1.4rem; }
.fuss-insta svg { width: 100%; height: 100%; fill: none; stroke: var(--gold); stroke-width: 1.7; transition: stroke .3s var(--ease); }
.fuss-insta svg .voll { fill: var(--gold); stroke: none; transition: fill .3s var(--ease); }
.fuss-insta:hover { color: #fff; }
.fuss-insta:hover svg { stroke: #fff; }
.fuss-insta:hover svg .voll { fill: #fff; }
/* ---------- Galerie-Mosaik ------------------------------------------------------------ */
.mosaik { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.6rem, 1.4vw, 1.15rem); }
@media (min-width: 780px) { .mosaik { grid-template-columns: repeat(6, 1fr); } }
.kachel { position: relative; overflow: hidden; background: var(--hell-2); margin: 0; }
.kachel picture { display: block; height: 100%; }
.kachel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s var(--ease-weich); }
@media (hover: hover) { .kachel:hover img { transform: scale(1.045); } }
.kachel button { position: absolute; inset: 0; border: 0; padding: 0; background: none; cursor: zoom-in; }
@media (min-width: 780px) {
.k-w2 { grid-column: span 2; } .k-w3 { grid-column: span 3; } .k-w4 { grid-column: span 4; }
}
@media (max-width: 779px) { .k-voll { grid-column: span 2; } }
.k-hoch { aspect-ratio: 4 / 5; } .k-quer { aspect-ratio: 3 / 2; } .k-breit { aspect-ratio: 16 / 9; }
.k-fuellt { height: 100%; min-height: 12rem; }
.lupe {
position: fixed; inset: 0; z-index: 120;
background: rgba(6, 13, 24, .95);
display: grid; place-items: center;
padding: clamp(1rem, 4vw, 3rem);
opacity: 0; pointer-events: none;
transition: opacity .3s var(--ease);
}
.lupe.ist-offen { opacity: 1; pointer-events: auto; }
.lupe img { max-width: 100%; max-height: 82vh; object-fit: contain; }
.lupe-text { margin-top: 1rem; text-align: center; color: var(--nebel); font-size: .88rem; }
.lupe-zu, .lupe-blaettern { position: absolute; background: none; border: 1px solid var(--linie-d); color: #fff; cursor: pointer; }
.lupe-zu { top: 1.2rem; right: 1.2rem; width: 2.9rem; height: 2.9rem; font-size: 1.1rem; }
.lupe-blaettern { top: 50%; transform: translateY(-50%); width: 3.2rem; height: 3.2rem; font-size: 1.2rem; }
.lupe-zu:hover, .lupe-blaettern:hover { background: var(--gold); border-color: var(--gold); color: var(--nacht); }
.lupe-vor { right: 1.2rem; } .lupe-zurueck { left: 1.2rem; }
/* ---------- Kontakt / Praktisches ------------------------------------------------------- */
.info-gitter { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 880px) { .info-gitter { grid-template-columns: 1fr 1fr; } }
.zeiten { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.5rem; margin: 0; }
.zeiten dt { color: var(--tinte-2); font-size: .93rem; }
.zeiten dd { margin: 0; font-size: .93rem; text-align: right; font-variant-numeric: tabular-nums; }
.fuss .zeiten dt { color: var(--nebel); } .fuss .zeiten dd { color: #fff; }
/* Im Fuss ist die Spalte nur rund 270px breit. Zweispaltig gesetzt bleiben fuer
die Uhrzeit keine 40px uebrig und "09:00 bis 19:00 Uhr" bricht auf vier
Zeilen um. Deshalb hier gestapelt: Tag oben, Zeit darunter. */
.zeiten-fuss { grid-template-columns: 1fr; gap: 0; }
.zeiten-fuss dt { font-size: .82rem; letter-spacing: .03em; margin-top: .85rem; }
.zeiten-fuss dt:first-of-type { margin-top: 0; }
.zeiten-fuss dd { text-align: left; white-space: nowrap; margin-top: .1rem; }
.zeiten-fuss + .dezent { margin-top: 1.2rem; }
.kontakt-liste { display: grid; gap: 1.5rem; margin-top: 1.8rem; }
.kontakt-zeile { display: grid; gap: .25rem; padding-bottom: 1.3rem; border-bottom: 1px solid var(--linie-fein); }
.kontakt-zeile:last-child { border-bottom: 0; }
.kontakt-zeile dt { font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-tief); }
.kontakt-zeile dd { margin: 0; font-size: clamp(1.2rem, 1.05rem + .7vw, 1.6rem); }
.kontakt-zeile dd a { text-decoration: none; }
.kontakt-zeile dd a:hover { color: var(--marine); }
.kontakt-zeile small { display: block; font-size: .88rem; color: var(--tinte-3); margin-top: .3rem; }
.anfahrt-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.anfahrt-liste li { display: grid; gap: .2rem; }
.anfahrt-liste strong { font-weight: 400; font-size: 1.12rem; color: var(--marine); }
.anfahrt-liste span { font-size: .93rem; color: var(--tinte-2); }
/* ---------- Zitat ------------------------------------------------------------------------ */
.zitat { text-align: center; max-width: 42rem; margin-inline: auto; }
.zitat blockquote { margin: 0; font-size: clamp(1.4rem, 1.05rem + 1.6vw, 2.3rem); line-height: 1.35; }
.zitat blockquote::before { content: '„'; color: var(--gold-tief); }
.zitat blockquote::after { content: '“'; color: var(--gold-tief); }
.zitat cite { display: block; margin-top: 1.4rem; font-style: normal; font-size: .72rem; letter-spacing: .4em; text-transform: uppercase; color: var(--gold-tief); }
/* Zitat mit Portraet daneben */
.zitat-person {
display: grid; gap: clamp(1.75rem, 4vw, 3.5rem);
align-items: center;
max-width: 56rem; margin-inline: auto;
}
@media (min-width: 760px) { .zitat-person { grid-template-columns: minmax(13rem, 17rem) 1fr; } }
.zitat-person .portraet { width: min(17rem, 70vw); margin-inline: auto; }
.zitat-person .portraet .bogen { aspect-ratio: 4 / 5; }
.zitat-person .zitat { text-align: left; margin: 0; max-width: none; }
.zitat-person .zitat blockquote { font-size: clamp(1.35rem, 1rem + 1.6vw, 2.15rem); }
@media (max-width: 759px) { .zitat-person .zitat { text-align: center; } }
/* ---------- Abschlussband ------------------------------------------------------------------ */
.band { position: relative; overflow: hidden; background: var(--marine); color: #fff; }
.band-bild { position: absolute; inset: 0; }
.band-bild img { width: 100%; height: 100%; object-fit: cover; opacity: .25; }
.band-bild::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,42,88,.6), rgba(0,42,88,.85)); }
.band .rahmen { position: relative; z-index: 2; text-align: center; }
.band h2 { font-size: clamp(1.9rem, 1.3rem + 2.8vw, 3.4rem); }
.band p { margin: 1.4rem auto 0; max-width: 34rem; color: var(--nebel); }
.band .knopf { margin-top: 2rem; }
.band-tat { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.band-tat .knopf { margin-top: 2rem; }
/* ---------- Fuß ------------------------------------------------------------------------------ */
.fuss { background: var(--nacht); color: #fff; padding-block: clamp(3rem, 5vw, 5rem) 2rem; }
.fuss-kopf { display: grid; gap: 1.5rem; padding-bottom: clamp(2.25rem, 3.5vw, 3rem); border-bottom: 1px solid var(--linie-d-fein); }
@media (min-width: 780px) { .fuss-kopf { grid-template-columns: auto 1fr; align-items: center; gap: 3rem; } }
.fuss-logo { width: clamp(170px, 18vw, 220px); height: auto; }
.fuss-claim { font-size: clamp(1.02rem, .95rem + .5vw, 1.3rem); line-height: 1.6; color: var(--nebel); }
@media (min-width: 780px) { .fuss-claim { text-align: right; } }
.fuss-spalten { display: grid; gap: 2.25rem; padding-block: clamp(2.25rem, 3.5vw, 3rem); }
@media (min-width: 640px) { .fuss-spalten { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .fuss-spalten { grid-template-columns: repeat(4, 1fr); gap: 2.5rem; } }
.fuss-spalten h2 { font-size: .7rem; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.fuss-spalten p, .fuss-spalten li { font-size: .92rem; line-height: 1.8; color: var(--nebel); }
.fuss-spalten .dezent { color: rgba(199,208,220,.65); font-size: .85rem; }
/* Links in der Fusszeile sollen 24 px hoch antippbar sein (WCAG 2.5.8).
inline-block plus Innenabstand reicht, die Liste wird dadurch nicht laenger. */
.fuss-spalten a { text-decoration: none; display: inline-block; padding-block: .22rem; }
.fuss-spalten a:hover { color: var(--gold); }
.fuss-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
/* Telefon und E-Mail in der Kontaktliste sind eigenstaendige Ziele,
keine Links im Fliesstext: 24 px Trefferhoehe (WCAG 2.5.8). */
.kontakt-liste dd a { display: inline-block; padding-block: .2rem; }
.fuss-unten { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; padding-top: 1.7rem; border-top: 1px solid var(--linie-d-fein); font-size: .82rem; color: var(--nebel); }
.fuss-unten nav { display: flex; gap: 1.6rem; }
.fuss-unten a { text-decoration: none; display: inline-block; padding-block: .25rem; }
.fuss-unten a:hover { color: var(--gold); }
.fuss-unten p { margin: 0; }
/* Credit ganz unten, mittig unter der Rechtliches-Zeile. */
.fuss-credit {
margin: 1.1rem 0 0 !important; text-align: center;
font-size: .78rem; color: var(--nebel);
}
.fuss-credit a {
color: var(--nebel); text-decoration: none;
display: inline-block; padding-block: .3rem;
border-bottom: 1px solid var(--gold-tief);
transition: color .3s var(--ease), border-color .3s var(--ease);
}
.fuss-credit a:hover { color: var(--gold); border-color: var(--gold); }
/* ---------- Fließtext- und Unterseiten -------------------------------------------------------- */
.text-seite { padding-block: var(--luft-s) var(--luft); }
.text-seite h1 { margin-bottom: 2.25rem; }
.text-seite h2 { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.65rem); margin: 2.4rem 0 .85rem; }
.text-seite h3 { font-size: 1.15rem; margin: 1.7rem 0 .6rem; }
.text-seite p, .text-seite li { color: var(--tinte-2); font-size: .97rem; }
.text-seite ul { padding-left: 1.2rem; }
.text-seite li { margin-bottom: .4rem; }
.text-seite a { color: var(--tinte); text-decoration-color: var(--gold-tief); text-underline-offset: .2em; }
/* Muster-Widerrufsformular: das gesetzliche Muster soll als abgesetzter
Block lesbar sein und nicht mit der Belehrung verschwimmen. Bewusst
schlicht, es ist ein Formular zum Abschreiben, kein Schmuckzitat. */
.text-seite .muster {
margin: 1.4rem 0 2rem;
padding: 1.4rem 1.5rem .6rem;
border: 1px solid var(--linie);
border-left: 3px solid var(--gold-tief);
background: rgba(36, 39, 43, .025);
}
.text-seite .muster p { margin: 0 0 1.15rem; }
.text-seite .muster p:first-child { font-weight: 500; }
.seitenkopf { background: var(--nacht); color: #fff; padding-block: clamp(2.5rem, 4vw, 4rem); }
.seitenkopf .lauf { display: block; margin-bottom: 1.2rem; color: var(--gold); }
.seitenkopf h1 { font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4rem); line-height: 1.08; color: #fff; }
.seitenkopf .vorlauf { margin-top: 1.4rem; max-width: 42rem; color: var(--nebel); }
/* Der Seitenkopf steht auf Marine, dort gelten die hellen Werte:
--gold-tief kaeme nur auf 2,9:1, --tinte-3 ebenfalls. */
.seitenkopf .kursiv { color: var(--gold); }
.seitenkopf figcaption { color: var(--nebel); }
.seitenkopf-bild { margin-top: clamp(2rem, 3.5vw, 3.5rem); }
.js .seitenkopf .lauf { animation: von-links 1.15s var(--ease-weich) .15s backwards; }
.js .seitenkopf h1 { animation: sanft-hoch 1.2s var(--ease-weich) .4s backwards; }
.js .seitenkopf .vorlauf { animation: sanft-hoch 1.2s var(--ease-weich) .65s backwards; }
.js .seitenkopf .titel-block { animation: none; }
body.spawn-fertig .seitenkopf .lauf, body.spawn-fertig .seitenkopf h1,
body.spawn-fertig .seitenkopf .vorlauf { animation: none !important; }
/* Sektionstitel: Goldlinie zeichnet sich vor der Versalzeile, wenn sie ankommt */
.titel-block .lauf { position: relative; padding-left: 3.7rem; }
.titel-block .lauf::before {
content: ''; position: absolute; left: 0; top: 50%;
width: 3rem; height: 1px; background: var(--gold-tief);
transform: scaleX(0); transform-origin: left;
transition: transform 1.1s var(--ease) .25s;
}
.js .ist-da .titel-block .lauf::before, .titel-block.ist-da .lauf::before,
.zeig-l.ist-da .lauf::before, .zeig-r.ist-da .lauf::before, .zeig.ist-da .lauf::before,
.no-js .titel-block .lauf::before { transform: scaleX(1); }
.dunkel .titel-block .lauf::before, .marine .titel-block .lauf::before { background: var(--gold); }
/* Knöpfe: Goldschimmer läuft beim Hover durch */
.knopf::after {
content: ''; position: absolute; top: 0; bottom: 0; left: -80%;
width: 55%; transform: skewX(-20deg);
background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
transition: left .6s var(--ease);
pointer-events: none;
}
.knopf:hover::after { left: 125%; }
/* Lightbox: Bild federt beim Öffnen auf */
.lupe > div { transform: scale(.94); transition: transform .35s var(--ease-pop); }
.lupe.ist-offen > div { transform: none; }
/* Anlass-Karten: Bild bekommt beim Hover einen Goldsaum */
.anlass .bogen { position: relative; }
.anlass .bogen::after {
content: ''; position: absolute; inset: 0;
border: 0 solid var(--gold);
transition: border-width .3s var(--ease);
pointer-events: none;
}
.anlass:hover .bogen::after { border-width: 3px 0 0 0; }
/* ---------- Kontaktformular -------------------------------------------------- */
/* Formular ohne Bild daneben: in Lesebreite halten, nicht über die ganze
Seite ziehen. Kommt das Gutschein-Foto, wird daraus wieder ein info-gitter. */
.formular-spalte { max-width: 38rem; }
.formular { display: grid; gap: 1rem; }
.formular label { display: grid; gap: .35rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-3); }
.formular input, .formular textarea, .formular select {
font-family: var(--sans); font-size: 1rem; color: var(--tinte);
background: #fff; border: 1px solid var(--linie);
padding: .8rem .95rem;
transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.formular input:focus, .formular textarea:focus, .formular select:focus {
outline: none; border-color: var(--marine); box-shadow: 0 0 0 3px rgba(0,42,88,.12);
}
.formular textarea { min-height: 8.5rem; resize: vertical; }
.formular .zwei { display: grid; gap: 1rem; }
@media (min-width: 640px) { .formular .zwei { grid-template-columns: 1fr 1fr; } }
.formular .hinweis { font-size: .82rem; color: var(--tinte-3); letter-spacing: .02em; }
.formular button { justify-self: start; cursor: pointer; }
/* ---------- Bewegung aus ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
.js .zeig, .js .zeig-l, .js .zeig-r,
.js .zeig-gruppe > * { opacity: 1 !important; transform: none !important; }
.js .vorhang::after { display: none !important; }
.pfeil { background-size: 100% 1px !important; }
[data-para] { transform: none !important; }
}
/* ---------- Druck -------------------------------------------------------------------------------- */
@media print {
.kopf, .mobil-nav, .knopf, .lupe, .band, .aktuell-band { display: none !important; }
body { background: #fff; color: #000; }
.dunkel, .marine, .auftakt, .seitenkopf { background: #fff !important; color: #000 !important; }
}
/* ================================================== Häufige Fragen (FAQ) */
.fragen .titel-block { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.fragen-liste { border-top: 1px solid var(--linie); }
.frage {
border-bottom: 1px solid var(--linie);
}
.frage summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: 1.15rem 0;
font-size: 1.06rem;
line-height: 1.4;
color: var(--nacht);
transition: color .35s ease;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary:hover { color: var(--gold-tief); }
.frage summary i {
flex: none;
position: relative;
width: 1.4rem;
height: 1.4rem;
border: 1px solid var(--gold-tief);
border-radius: 50%;
}
.frage summary i::before,
.frage summary i::after {
content: "";
position: absolute;
left: 50%; top: 50%;
width: .6rem; height: 1px;
background: var(--gold-tief);
transform: translate(-50%, -50%);
transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .3s ease;
}
.frage summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.frage[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
.frage[open] summary i::before { transform: translate(-50%, -50%) rotate(180deg); }
.frage .antwort { padding: 0 3rem 1.3rem 0; max-width: 40rem; }
.frage .antwort p { margin: 0; color: var(--text-2, inherit); line-height: 1.65; }
@media (max-width: 600px) {
.frage summary { font-size: 1rem; padding: 1rem 0; }
.frage .antwort { padding-right: 0; }
}
/* Gastgeberin-Block: Text links, Bild rechts (Wunsch Feedback Index S7) */
@media (min-width: 760px) {
.zitat-person.zitat-gedreht { grid-template-columns: 1fr minmax(13rem, 17rem); }
.zitat-person.zitat-gedreht .portraet { order: 2; }
.zitat-person.zitat-gedreht .zitat { order: 1; }
}
.zitat-person.zitat-gedreht { max-width: 62rem; }
.zitat-person.zitat-gedreht .zitat .lauf { display: block; margin-bottom: .9rem; }
.zitat-person.zitat-gedreht .zitat h2 { margin-bottom: 1.2rem; }
/* Aktuell-Band: kein Button-Look, lesbarer Fließtext (Feedback Index S1) */
.aktuell-punkt { display: block; }
.aktuell-punkt strong { font-weight: 600; }
.aktuell-punkt span { border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 1px; }
.aktuell-punkt:hover span { border-bottom-color: #fff; }
/* Unter 900 px steht Name ueber Termin. Einzeilig gelesen wuerde der Satz
zweimal umbrechen und die Unterstreichung liefe mitten durch, das sah aus
wie ein kaputter Link. Der Doppelpunkt kommt deshalb erst in der
einzeiligen Fassung dazu. */
@media (max-width: 899px) {
.aktuell-band { border-top: 1px solid rgba(179,152,89,.5); }
.aktuell-innen { gap: .5rem; padding-block: 1rem 1.2rem; }
.aktuell-punkt {
display: grid; grid-template-columns: 1fr auto;
align-items: center; column-gap: .9rem; row-gap: .15rem;
padding: .72rem 0;
}
.aktuell-punkt strong { grid-column: 1; font-weight: 600; font-size: .97rem; line-height: 1.3; }
.aktuell-punkt span {
grid-column: 1; border-bottom: 0; padding-bottom: 0;
color: var(--gold); font-size: .83rem; letter-spacing: .02em;
}
.aktuell-punkt::after {
content: '\2192'; grid-column: 2; grid-row: 1 / span 2;
color: var(--gold); font-size: 1.05rem; line-height: 1;
}
.aktuell-punkt:hover span { color: #fff; }
}
/* Anfrage-Kachel zwischen den Anlässen (Feedback Index S4).
Bleibt weiss wie die Nachbarn, hebt sich über die Goldkante ab.
Pin 5: kein Bild, also darf der Text die ganze Kachel fuellen. */
.anlass-cta { display: flex; }
.anlass-cta .anlass-text {
display: flex; flex-direction: column; align-items: flex-start;
justify-content: center; flex: 1; padding: clamp(1.6rem, 2.6vw, 2.4rem);
}
.anlass-cta h3 { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.9rem); margin-bottom: .6rem; }
.anlass-cta p { font-size: clamp(.98rem, .94rem + .2vw, 1.08rem); line-height: 1.65; }
.anlass-cta .knopf-voll {
margin-top: 2.8rem; /* doppelt, Feedback 2 */
background: var(--marine); border-color: var(--marine); color: #fff;
}
.anlass-cta .knopf-voll:hover { background: var(--nacht); border-color: var(--nacht); color: #fff; }
.anlass-cta {
display: flex; align-items: center;
border-top: 3px solid var(--gold) !important;
}
.anlass-cta .anlass-text { padding: clamp(1.6rem, 3vw, 2.4rem) 1.4rem; }
.anlass-cta .lauf { display: block; color: var(--gold-tief); margin-bottom: .75rem; }
.anlass-cta .pfeil { color: var(--nacht); }
/* Pfeilknoepfe der Vitrine-Schiene (Feedback Index S6) */
.rail-knopf {
position: absolute; top: calc(50% - 3rem); transform: translateY(-50%);
z-index: 3;
width: 2.9rem; height: 2.9rem; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 1.05rem; line-height: 1;
color: var(--nacht); background: rgba(255,255,255,.92);
border: 1px solid rgba(255,255,255,.6);
cursor: pointer;
transition: background .35s var(--ease), transform .35s var(--ease);
}
.rail-knopf:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.rail-links { left: clamp(.4rem, 2vw, 1.4rem); }
.rail-rechts { right: clamp(.4rem, 2vw, 1.4rem); }
.rail-knopf[hidden] { display: none; }
/* An den Enden stumpf statt weg: so sieht man, dass die Reihe zu Ende ist,
statt sich zu fragen, wo der Pfeil hin ist. */
.rail-knopf[disabled] { opacity: .35; cursor: default; }
.rail-knopf[disabled]:hover { background: rgba(255,255,255,.92); transform: translateY(-50%); }
/* Frueher auf Touch ausgeblendet. Ohne Hover kuendigt aber nichts an, dass
die Schiene weitergeht, deshalb bleiben die Pfeile stehen und wandern
unter die Kacheln, wo sie nichts verdecken. */
@media (max-width: 859px) {
/* Flex statt Raster, sonst spannt die Schiene die Spalten auf und die
beiden Pfeile stehen weit auseinander statt mittig beieinander. */
.rail-halter {
display: flex; flex-wrap: wrap; justify-content: center;
align-items: center; gap: 1.1rem .9rem;
}
.rail-halter > .rail { flex: 0 0 100%; order: -1; }
.rail-knopf { position: static; transform: none; }
.rail-knopf:hover { transform: none; }
.rail-knopf[disabled]:hover { transform: none; }
}
/* Galerie-Kachel statt Textlink (Feedback Index S8) */
/* Pin 12: die Kachel sitzt jetzt anstelle des sechsten Bildes im Raster,
nimmt also dessen Zuschnitt an (k-w2 k-quer) statt volle Breite. */
.kachel-cta {
display: flex; align-items: center; justify-content: center;
background: var(--nacht); color: #fff; text-decoration: none;
min-height: 0;
transition: background .4s var(--ease);
}
.kachel-cta span {
font-size: .82rem; letter-spacing: .2em; text-transform: uppercase;
display: inline-flex; align-items: center; gap: .7rem;
}
.kachel-cta i { transition: transform .4s var(--ease); }
.kachel-cta:hover { background: #00203f; }
.kachel-cta:hover i { transform: translateX(.35rem); }
/* Bild rechts, Text links (Feedback Frühstück/Mittagstisch S1) */
@media (min-width: 900px) {
.paar .bild-rechts { order: 2; }
.paar .text-links { order: 1; }
}
/* Reiter als Kasten, aktiver Reiter blau (Feedback Speisekarte S2) */
.karten-reiter-kasten {
background: var(--hell);
border: 1px solid var(--linie);
padding: .5rem;
gap: .3rem;
border-radius: 2px;
}
.karten-reiter-kasten button {
border: 0; padding: .75rem 1.15rem; border-radius: 2px;
background: transparent;
transition: background .3s var(--ease), color .3s var(--ease);
}
.karten-reiter-kasten button[aria-selected="true"] {
background: var(--nacht); color: #fff;
}
.karten-reiter-kasten button:hover[aria-selected="false"] { background: rgba(0,42,88,.07); }
/* Anker-Versatz, damit die Überschrift unter dem Kopf sichtbar bleibt */
.karten-panel, [id^="karte-"] { scroll-margin-top: 6.5rem; }
/* Sprungziele aus Querverweisen: nicht unter der Kopfzeile landen. */
#raeume, #bestellen { scroll-margin-top: 5.5rem; }
/* ---------- Sanfte Überblendung im Anfahrt-Block (Pin 01.10.) ---------------
Hochformat, weil die Textspalte daneben hoch ist. Ohne JavaScript bleibt
einfach das erste Bild stehen, nichts startet unsichtbar. */
.blende-rahmen { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
/* Querformat-Variante, wenn das Bild neben einem kurzen Textblock steht. */
.blende-quer { aspect-ratio: 4 / 3; }
/* Text und Bild auf gleicher Höhe ausrichten statt oben bündig. */
@media (min-width: 880px) { .info-gitter-mitte { align-items: center; } }
.blende-bild {
position: absolute; inset: 0; display: block;
opacity: 0; transition: opacity 1.4s var(--ease-weich);
}
.blende-bild.ist-da { opacity: 1; }
.blende-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blende-text { position: relative; margin-top: .85rem; min-height: 3.2em; }
.blende-text span {
position: absolute; inset: 0;
opacity: 0; transition: opacity .7s var(--ease);
}
.blende-text span.ist-da { opacity: 1; }
/* Punkte zeigen, wie viele Bilder es gibt, und erlauben das Anspringen. */
.blende-punkte { display: flex; gap: 0; margin-top: .3rem; margin-left: -.5rem; }
/* Der Punkt bleibt optisch klein, die Trefferflaeche misst 24x24 px.
background-clip haelt die Farbe im Inhaltsbereich, die Polsterung ist
unsichtbar und trotzdem antippbar. */
.blende-punkt {
width: .5rem; height: .5rem; box-sizing: content-box;
padding: calc((24px - .5rem) / 2); border: 0; border-radius: 50%;
background: var(--linie); background-clip: content-box;
cursor: pointer;
transition: background .3s var(--ease), transform .3s var(--ease);
}
.blende-punkt:hover { background: var(--tinte-3); background-clip: content-box; }
.blende-punkt.ist-da { background: var(--gold); background-clip: content-box; transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) {
.blende-bild, .blende-text span { transition: none; }
}
/* ---------- Die gedruckte Karte zum Blättern -------------------------------
Sitzt im Seitenfluss unter der Karte, kein Overlay. Vollbild übernimmt der
Browser selbst, deshalb braucht es hier keinen fixierten Kasten, der im
geschlossenen Zustand Klicks abfangen könnte. */
.katalog-block { background: var(--hell); }
.katalog { display: grid; gap: 1rem; }
.katalog-buehne {
position: relative; display: flex; align-items: center; justify-content: center;
gap: clamp(.5rem, 2vw, 1.5rem); min-height: 14rem;
}
.katalog-buch { touch-action: pan-y; }
/* Weisse Seiten auf hellem Grund brauchen eine Kante, sonst schwebt der
Text ohne erkennbares Blatt. Schatten am Blatt statt am Behaelter, damit
er der Seite beim Umblaettern folgt. */
.katalog-buch .blatt {
background: #fff;
box-shadow: 0 10px 30px rgba(0,42,88,.16), 0 0 0 1px rgba(0,42,88,.07);
}
.katalog-buch .blatt img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
/* Solange nichts geladen ist, steht hier ein ruhiger Platzhalter statt eines
Sprungs im Layout. */
.katalog-buehne::before {
content: ''; position: absolute; inset: 0; margin: auto;
width: min(100%, 34rem); aspect-ratio: 1 / .96;
background: #fff; border: 1px solid var(--linie-fein);
opacity: 1; transition: opacity .4s var(--ease);
}
.ist-bereit .katalog-buehne::before { opacity: 0; }
/* Wenn die Blaetter-Bibliothek nicht kommt, bleibt nur die Meldung und der
PDF-Knopf. Buehne, Pfeile und Vollbild waeren dann ohne Funktion. */
.katalog.ist-gescheitert .katalog-buehne,
.katalog.ist-gescheitert .katalog-voll,
.katalog.ist-gescheitert .katalog-hinweis { display: none; }
.katalog-pfeil {
flex: 0 0 auto; width: 2.9rem; height: 2.9rem; border-radius: 50%;
border: 1px solid var(--linie); background: #fff; color: var(--marine);
font-size: 1.1rem; cursor: pointer; display: grid; place-content: center;
transition: background .3s var(--ease), opacity .3s var(--ease);
z-index: 1;
}
.katalog-pfeil:hover { background: var(--marine); border-color: var(--marine); color: #fff; }
.katalog-pfeil[disabled] { opacity: .3; cursor: default; }
.katalog-pfeil[disabled]:hover { background: #fff; border-color: var(--linie); color: var(--marine); }
.katalog-fuss { display: grid; gap: .7rem; justify-items: center; text-align: center; }
.katalog-zaehler { margin: 0; font-size: .88rem; font-variant-numeric: tabular-nums; color: var(--tinte-2); }
.katalog-tasten { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.katalog-knopf {
font-family: var(--sans); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
padding: .6rem 1.1rem; border: 1px solid var(--linie);
background: #fff; color: var(--tinte); text-decoration: none; cursor: pointer;
transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.katalog-knopf:hover { background: var(--marine); border-color: var(--marine); color: #fff; }
.katalog-hinweis { margin: 0; font-size: .76rem; color: var(--tinte-3); }
/* Dass man blaettern kann, war nicht zu erkennen. Darum eine Anleitung ueber
dem Buch und ein Wink an der rechten Kante, der nach der ersten Geste
verschwindet. Die Pfeile bekommen bis dahin einen goldenen Rand. */
.katalog-anleitung {
display: flex; align-items: flex-start; gap: .6rem;
margin-top: 1.1rem; padding: .7rem .9rem;
border-left: 2px solid var(--gold);
background: var(--hell);
font-size: .9rem; color: var(--tinte-2); max-width: 36rem;
}
.katalog-anleitung span { color: var(--gold-tief); font-size: 1.1rem; line-height: 1; }
.katalog-wink {
position: absolute; right: 0; bottom: 1.2rem; z-index: 3;
pointer-events: none;
background: var(--marine); color: #fff;
font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
padding: .4rem .7rem;
box-shadow: 0 6px 20px rgba(0,42,88,.3);
opacity: 0;
transition: opacity .5s var(--ease);
}
.katalog-wink::after {
content: '\2192'; margin-left: .45rem; display: inline-block;
animation: wink-tippen 1.5s ease-in-out infinite;
}
@keyframes wink-tippen {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(.3rem); }
}
.katalog.ist-bereit .katalog-wink { opacity: 1; }
.katalog.hat-geblaettert .katalog-wink { opacity: 0; }
.katalog.ist-bereit:not(.hat-geblaettert) .katalog-pfeil-rechts {
border-color: var(--gold); color: var(--gold-tief);
}
@media (prefers-reduced-motion: reduce) {
.katalog-wink::after { animation: none; }
}
/* Im Vollbild liegt der Abschnitt auf Marine, damit die weissen Seiten stehen. */
.katalog.ist-voll {
background: var(--nacht); padding: 1.25rem;
align-content: center; height: 100%;
}
.katalog.ist-voll .katalog-buehne::before { display: none; }
.katalog.ist-voll .katalog-zaehler { color: #fff; }
.katalog.ist-voll .katalog-hinweis { color: rgba(255,255,255,.55); }
.katalog.ist-voll .katalog-knopf { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
.katalog.ist-voll .katalog-knopf:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.katalog.ist-voll .katalog-pfeil { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); color: #fff; }
.katalog-starter { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin-top: 1.6rem; }
.katalog-starter-hinweis { font-size: .85rem; }
/* Der Seitenkopf ist dunkelblau. knopf-linie waere dort dunkle Schrift auf
dunklem Grund und damit unsichtbar. */
.seitenkopf .katalog-starter .knopf { background: #fff; border-color: #fff; color: var(--marine); }
.seitenkopf .katalog-starter .knopf:hover {
background: rgba(255,255,255,.86); border-color: rgba(255,255,255,.86); color: var(--marine);
}
.seitenkopf .katalog-starter-hinweis { color: var(--nebel); }
/* Auf schmalen Schirmen wird nicht geblaettert, sondern gewischt: ein
Streifen mit Einrastpunkten, eine Seite pro Bild. Das Umblaettern per Ecke
ist auf dem Telefon fummelig, und die Doppelseite passt dort nicht
nebeneinander, man sah immer nur eine Haelfte. Die Pfeile bleiben, sie
stehen jetzt unter dem Streifen. */
.katalog-streifen {
display: flex; gap: .625rem; width: 100%;
overflow-x: auto; scroll-snap-type: x mandatory;
scrollbar-width: none; -ms-overflow-style: none;
overscroll-behavior-x: contain;
}
.katalog-streifen::-webkit-scrollbar { display: none; }
.katalog-streifen > figure {
margin: 0; flex: 0 0 100%; scroll-snap-align: start;
}
.katalog-streifen img {
width: 100%; height: auto; display: block; background: #fff;
box-shadow: 0 10px 30px rgba(0,42,88,.16), 0 0 0 1px rgba(0,42,88,.07);
}
@media (max-width: 859px) {
/* Flex statt Raster: der Streifen nimmt die ganze erste Zeile, die beiden
Pfeile rutschen in die zweite und stehen dort mittig beieinander. Im
Raster spannten sie ueber zwei breite Spalten und standen weit
auseinander, order sorgt dafuer, dass der Streifen zuerst kommt. */
.katalog-buehne {
display: flex; flex-wrap: wrap; justify-content: center;
align-items: center; gap: 1.1rem .9rem;
min-height: 0;
}
.katalog-buehne .katalog-streifen,
.katalog-buehne .katalog-buch { flex: 0 0 100%; order: -1; }
.katalog-pfeil { position: static; display: flex; }
.katalog-pfeil[disabled] { visibility: hidden; }
.katalog-buehne::before { display: none; } /* kein Platzhalter noetig, die Bilder stehen sofort */
/* Seitenhoehe begrenzen, sonst steht eine Seite fast bildschirmhoch da
und die Pfeile darunter liegen ausserhalb des Sichtfelds. */
.katalog-streifen > figure { display: flex; justify-content: center; }
.katalog-streifen img { max-height: 68vh; width: auto; max-width: 100%; }
.katalog-wink { display: none; }
.katalog-voll { display: none; } /* Vollbild ist auf dem Telefon kein Gewinn */
.katalog-hinweis { display: none; } /* steht schon im Kasten darueber */
.katalog-anleitung .nur-breit { display: none; }
}
@media (min-width: 860px) {
.katalog-anleitung .nur-schmal { display: none; }
}
/* ---------- Allergene und Kennzeichen --------------------------------------
Nummern wie im Druck hochgestellt hinter dem Namen, Blattsymbol davor. */
.gericht .allergen {
font-size: .62em; font-weight: 400; letter-spacing: .04em;
color: var(--tinte-3); margin-left: .35em; top: -.5em;
}
/* Veggy- und Vegan-Zeichen der Agentur, als Originaldatei eingebunden.
Kreis, Farbe und Schrift stecken im SVG, deshalb kein eigener Rahmen mehr.
Etwas groesser als ein Buchstabe, sonst zerfaellt das Wort im Zeichen. */
.kz {
width: 1.35em; height: 1.35em; margin-right: .35em;
vertical-align: -.33em; flex: 0 0 auto;
}
.allergen-zeichen .kz { width: 1.7em; height: 1.7em; vertical-align: -.5em; }
.allergen-legende {
margin-top: clamp(2.5rem, 4vw, 3.5rem);
padding-top: 1.6rem; border-top: 1px solid var(--linie);
}
.allergen-legende h3 {
font-size: .72rem; letter-spacing: .28em; text-transform: uppercase;
color: var(--tinte-2); margin-bottom: .8rem;
}
.allergen-liste { display: flex; flex-wrap: wrap; gap: .25rem 0; margin: 0; }
.allergen-liste span { font-size: .85rem; color: var(--tinte-3); }
.allergen-liste span:not(:last-child)::after {
content: '|'; color: var(--linie); margin: 0 .6rem;
}
.allergen-zeichen {
display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.4rem;
margin: .7rem 0 0; font-size: .85rem; color: var(--tinte-3);
}
.allergen-hinweis { margin: .9rem 0 0; font-size: .82rem; color: var(--tinte-3); max-width: 46rem; }
/* ---------- Sprungleiste über langen Karten -------------------------------
Erscheint nur, wo es wirklich viele Gruppen gibt (Getränke: vierzehn).
Klebt unter dem Kopf, damit man beim Scrollen die Abschnitte behält. */
.gruppen-sprung {
/* Die Hoehe des Kopfes misst main.js und legt sie in --kopf-h ab. Feste
rem-Werte lagen daneben: auf dem Handy ist der Kopf 75 px hoch, die
Leiste klebte bei 54 px und verschwand zu einem Drittel darunter. */
position: sticky; top: var(--kopf-h, 3.9rem); z-index: 20;
margin: 0 0 1.75rem;
background: var(--weiss);
border-bottom: 1px solid var(--linie-fein);
}
.gruppen-sprung-bahn {
display: flex; gap: .4rem; overflow-x: auto; scroll-behavior: smooth;
padding: .7rem 0;
scrollbar-width: none;
}
.gruppen-sprung-bahn::-webkit-scrollbar { display: none; }
.gruppen-marke {
flex: 0 0 auto; white-space: nowrap; text-decoration: none;
font-size: .76rem; letter-spacing: .06em;
padding: .45rem .85rem;
color: var(--tinte-2); background: var(--hell);
border: 1px solid transparent; border-radius: 999px;
transition: background .25s var(--ease), color .25s var(--ease);
}
.gruppen-marke:hover { background: var(--hell-2); color: var(--tinte); }
.gruppen-marke.ist-da { background: var(--marine); color: #fff; }
/* Die Gruppen müssen unter Kopf und Sprungleiste landen, nicht darunter.
Beide Hoehen kommen gemessen aus main.js, die Werte dahinter greifen nur,
solange kein JavaScript laeuft. */
.karten-gruppe {
scroll-margin-top: calc(var(--kopf-h, 3.9rem) + var(--sprung-h, 4.6rem) + .8rem);
}
/* ---------- Filter über der Galerie ---------------------------------------
Gleiche Bauart wie die Sprungleiste der Speisekarte, damit die Seite nicht
zwei verschiedene Zwischenmenüs hat. */
.galerie-filter { margin: 0 0 1.6rem; }
.galerie-filter .gruppen-sprung-bahn { padding-top: 0; }
.galerie-filter .gruppen-marke { cursor: pointer; font-family: var(--sans); }
.galerie-leer {
margin: 2rem 0 0; text-align: center; color: var(--tinte-3); font-size: .92rem;
}
/* ===========================================================================
Feedback 2 · Events & Räume (Constanze Schnee, 11.10.2026)
Die Vorgaben stehen teils als Notiz, teils als Entwurf mit Bezugslinien
im PDF. Alles, was hier steht, hat dort eine Entsprechung.
=========================================================================== */
/* ---- Drei Schriftgrößen statt sieben --------------------------------------
„Max. 3 Schriftgrößen pro Projekt" (S. 3). Die Pfeile im Entwurf fassen
zusammen: Kicker, Datum, Fett-Lead, Fließtext, Preis und Filterknöpfe sind
EINE Größe, die Überschrift die zweite, Reservierungszeile und
Bildunterschrift die dritte.
t1 Fließtext, Fett-Lead, Datum, Preis, Filterknöpfe
t2 Überschrift (eigene clamp-Kurve, s. unten)
t3 Versalien-Kicker, Reservierungszeile, Bildunterschrift */
.termin-liste, .raeume, .plan-band { --t1: .95rem; --t3: .78rem; }
.termin-liste .lauf,
.raeume .lauf,
.plan-band .lauf { font-size: var(--t3); }
.termin-inhalt > p,
.termin-tage strong, .termin-tage span,
.termin-inhalt .termin-preis,
.plan-band .paar-text > p { font-size: var(--t1); }
/* Höhere Spezifität als .termin-inhalt > p, sonst gewinnt die Fließtextgröße. */
.termin-inhalt > .termin-reservieren,
.bild-unter { font-size: var(--t3); }
/* Preiszeile: Versalien, bold, blau wie im Entwurf („PREIS PRO PERSON: 29,00 €"). */
.termin-inhalt > .termin-preis {
color: var(--marine); text-transform: uppercase;
letter-spacing: .06em; font-weight: 600;
}
/* Filterknöpfe lagen bei .76rem und damit eine Stufe unter dem Fließtext.
Gilt für Termine, Speisekarte und Galerie, sonst hätte die Seite wieder
zwei verschiedene Leisten. */
.gruppen-marke { font-size: .86rem; }
/* ---- Register aus dem Entwurf (S. 3, linke Spalte) ------------------------
„Hervorhebungen in bold, blau, Laufweite +10 bis +20" — InDesign zählt in
1/1000 em, also .01em bis .02em.
Zum Gold: der Entwurf nennt #B39859. Das ist unser --gold und steht so auf
allen Marine-Flächen. Auf Weiß kommt es nur auf 2,8:1, nötig sind 4,5:1.
Deshalb bleibt auf hellem Grund --gold-tief (#856E3C, 4,9:1), derselbe Ton
eine Stufe dunkler.
Zum Grau: der Entwurf nennt #868786, das sind 3,6:1 und damit zu wenig für
Fließtext. --tinte-3 (#6B7178, 4,6:1) ist der hellste Grauton, der die
Grenze noch hält, und kommt dem Entwurf am nächsten. */
.termin-tage strong,
.termin-fett,
.termin-inhalt .termin-preis { letter-spacing: .015em; }
.termin-inhalt > p { color: var(--tinte-3); }
/* ---- Überschriften: Versalien, bold, blau (S. 8) -------------------------- */
.termin-inhalt h3,
.raum-kopf h3 {
text-transform: uppercase;
font-weight: 600;
letter-spacing: .012em;
font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2rem);
color: var(--marine);
}
.marine .raum-kopf h3, .dunkel .raum-kopf h3 { color: #fff; }
/* ---- Die Linie unter der Filterleiste --------------------------------------
„Die Linien gehören wozu? Falls die keine Bedeutung haben, entfernen."
Gemeint ist der Strich direkt unter den Filterknöpfen: er trennte nichts,
auf dem Handy standen dadurch zwei Linien mit einem leeren Band dazwischen.
Die Trenner ZWISCHEN den Terminen bleiben, die stehen auch im Entwurf. */
.termin-liste { border-top: 0; }
/* ---- „Termine" über der Datumsspalte (Entwurf S. 2/3) --------------------- */
/* .termin-wann ist anderswo eine Flex-Zeile mit Datums-Chips. In der
Terminliste steht der Kicker über der Datumsliste, nicht daneben. */
.termin-zeile .termin-wann { display: block; }
.termin-wann .lauf { display: block; margin-bottom: 1.1rem; }
/* ---- Bildunterschrift statt Marke im Bild ---------------------------------
„‚Symbolbild' muss nicht so sehr hervorgehoben sein. Vllt lösen wir das
auch mit einer Bildunterschrift?" Im Entwurf sitzt sie als marineblaue
Leiste direkt unter dem Bild. */
.bild-unter {
/* Seitenpolster knapp, damit die Zeile in die Bildbreite passt und nicht
umbricht (Pin 11.10.). */
margin: 0; padding: .55rem .6rem;
background: var(--marine); color: #fff;
line-height: 1.45;
}
.bild-unter .symbol { opacity: .75; }
/* ---- Termin-Bilder größer (S. 1) ------------------------------------------
„Meinst du, wir bekommen die Bilder alle noch etwas größer?"
Die rechte Spalte stand auf 15rem. */
@media (min-width: 980px) {
.termin-zeile { grid-template-columns: 10rem 1fr 20rem; }
}
/* Auf dem Handy war das Bild auf 22rem gedeckelt und stand damit links im
breiteren Raster: links 20 px Rand, rechts 46 px. „Bild über ganze Breite,
rechts/links gleiche Randabstände" (S. 4). */
@media (max-width: 979px) {
.termin-bild { max-width: none; }
}
/* ---- Rufnummern nie trennen (S. 4) ---------------------------------------- */
a[href^="tel:"] { white-space: nowrap; }
/* ---- Klappen im Weihnachtsmenü: Winkel statt Plus (Entwurf S. 2/3) -------- */
.menue-klapp summary i { border: 0; border-radius: 0; width: .9rem; height: .9rem; }
.menue-klapp summary i::before, .menue-klapp summary i::after {
width: .62rem; height: 1px; background: var(--gold-tief);
top: 50%; left: 50%;
}
.menue-klapp summary i::before { transform: translate(-72%, -50%) rotate(45deg); }
.menue-klapp summary i::after { transform: translate(-28%, -50%) rotate(-45deg); opacity: 1; }
.menue-klapp[open] summary i::before { transform: translate(-72%, -50%) rotate(-45deg); }
.menue-klapp[open] summary i::after { transform: translate(-28%, -50%) rotate(45deg); opacity: 1; }
/* Der Trennstrich zwischen Gang und Anzahl steht im Entwurf als Pipe. */
.menue-klapp summary em::before { content: '| '; color: var(--linie); }
/* ---- „Gut zu wissen" dreizeilig (S. 6) ------------------------------------ */
.gut-zu-wissen {
max-width: 50rem; margin: 2.5rem auto 0; text-align: center;
color: var(--tinte-3); line-height: 1.8;
}
.gut-zu-wissen strong {
display: block; margin-bottom: .35rem;
text-transform: uppercase; letter-spacing: .18em;
font-weight: 600; color: var(--marine); font-size: .82rem;
}
.gut-zu-wissen span { display: block; }
/* ---- Räume (S. 8) ---------------------------------------------------------
„Bilder gleiche größe (b x h)": die vier Räume hatten 16/9 und 3/2 gemischt.
„Aufzählungen, regular, blau" und ein zurückhaltender Textlink als CtA,
„weil wir oben schon einen Kasten haben (Personenanzahl)". */
.raeume .bogen { aspect-ratio: 3 / 2 !important; }
.raum-liste li { color: var(--marine); }
.marine .raum-liste li, .dunkel .raum-liste li { color: #fff; }
.raum p { color: var(--tinte-3); }
.marine .raum p, .dunkel .raum p { color: #fff; }
.ruf-link {
display: inline-block; margin-top: 1.4rem;
font-weight: 600; color: var(--marine); letter-spacing: .015em;
font-size: var(--t1); text-decoration: none;
border-bottom: 1px solid var(--linie);
transition: color .3s var(--ease), border-color .3s var(--ease);
}
.ruf-link:hover { color: var(--gold-tief); border-color: var(--gold-tief); }
.ruf-link::after { content: ' \00BB'; }
/* ---- Planungsband (S. 10) -------------------------------------------------
Text links, Bilder rechts, und statt des einen Fotos eine Folge aus vier.
Die Punkte brauchen auf Marine die helle Linienfarbe. */
.plan-band .paar-text > p { color: #fff; }
/* .22 Weiss waeren nur 1,6:1, Bedienelemente brauchen 3:1. */
.marine .blende-punkt { background: rgba(255,255,255,.45); background-clip: content-box; }
.marine .blende-punkt:hover { background: #fff; background-clip: content-box; }
.marine .blende-text span { color: var(--nebel); font-size: var(--t3); }
/* ---- Goldener Knopf im Lesungs-Band größer (S. 11) ------------------------
Auf dem Handy liegt er über die ganze Breite und passt („check"), auf dem
Desktop war er zu klein. */
@media (min-width: 900px) {
.anfrage-knopf { padding: 1.25rem 2.4rem; }
.anfrage-knopf span { font-size: .9rem; }
.anfrage-knopf strong { font-size: .95rem; }
}
/* Planungsband: Text links, Bildfolge rechts (Entwurf S. 10).
Die DOM-Reihenfolge bleibt Bild zuerst, damit auf dem Handy wie überall
sonst erst das Bild und dann der Text steht. */
@media (min-width: 900px) {
.plan-band > figure { order: 2; }
}
/* ---- Ein Abstandsmaß statt sechs (S. 2) -----------------------------------
„Je weniger verschiedene Abstände und Grundlinien du hast, umso
aufgeräumter wirkt die Gestaltung." Innerhalb eines Termins gibt es jetzt
genau einen Zeilenabstand zwischen den Blöcken, und die drei Spalten
starten auf derselben Linie. */
/* .termin-inhalt > p setzt margin:0 und gewinnt gegen `> * + *`, deshalb hier
eine Klasse mehr im Selektor. */
.termin-liste .termin-inhalt > * + * { margin-top: 1.2rem; }
.termin-liste .termin-inhalt > h3 { margin-top: .4rem; }
.termin-tage { gap: 1.2rem; }
.termin-inhalt .menue-gaenge { margin-top: 1.2rem; }
/* ---- Räume: Text an der Bildkante ausrichten (Pin 11.10.) ----------------
Der goldene Kicker startet auf der Oberkante des Bildes, der Anfrage-Link
endet auf dessen Unterkante. Den Platz dazwischen verteilt space-between
gleichmäßig auf die Blöcke, dadurch werden die Abstände etwas größer. */
@media (min-width: 880px) {
.raeume .raum { align-items: stretch; }
.raeume .raum > div {
display: flex; flex-direction: column; justify-content: space-between;
}
.raeume .raum > div > * { margin-block: 0; }
.raeume .raum .raum-liste { margin-top: 0; }
.raeume .raum .ruf-link { margin-top: 0; align-self: start; }
}
/* ---- ß in Versalien (gefunden 11.10.2026) ---------------------------------
.versal-roh steht weiter oben im Blatt als .raum-groesse. Bei gleicher
Spezifität gewinnt die spätere Regel, also uppercase, und aus „Straße"
wurde laut Unicode „STRASSE". Der Schutz muss am Ende stehen. */
.versal-roh { text-transform: none; }
/* ===========================================================================
Feedback 2 · Jobs (Constanze Schnee, 11.10.2026)
=========================================================================== */
/* „doppelter abstand": der rechte Block stand gedrängt neben einem Bild, das
doppelt so hoch war. Kicker, Überschrift, Aufzählung und der neue
Bewerbungs-Knopf bekommen die doppelte Luft, und die Spalte beginnt oben an
der Bildkante und endet unten an ihr („Bildanpassung"). */
.jobs-warum .lauf { display: block; }
.jobs-warum .raum-liste { gap: .9rem; }
/* Nur die Unterkante auf null. Oben braucht der Knopf im gestapelten
Mobil-Fluss seinen Abstand, den nimmt ihm die Flex-Spalte unten ab. */
.jobs-warum .jobs-tat { margin-bottom: 0; }
@media (min-width: 900px) {
.paar-weit:has(.jobs-warum) { align-items: stretch; }
.jobs-warum {
display: flex; flex-direction: column; justify-content: space-between;
}
.jobs-warum > * + * { margin-top: 0; }
.jobs-warum .jobs-tat, .jobs-warum .raum-liste { margin-top: 0; }
}
/* ---- Parallaxe braucht Spielraum im Rahmen (gefunden 11.10.2026) ----------
„Bildanpassung" in Constanzes Feedback zeigte auf einen hellen Streifen
unter dem Barista-Bild. Ursache: main.js schiebt [data-para] um bis zu
48 px gegen die Scrollrichtung, das Bild war aber exakt so hoch wie sein
Rahmen. Beim Verschieben blitzte oben oder unten der Rahmenhintergrund
durch. Betraf alle sieben Parallaxe-Bilder der Seite, nicht nur Jobs.
Das Bild ist jetzt 96 px höher als der Rahmen und hängt 48 px über, der
Weg ist damit gedeckt. Ohne Bewegung (prefers-reduced-motion) sitzt es
mittig und der Rahmen bleibt genauso voll. */
.bogen picture[data-para] {
/* main.js deckelt den Weg bei 48 px, 60 px Überstand je Seite lassen
Luft für Rundungen. */
height: calc(100% + 120px);
margin-top: -60px;
}
/* Kicker innerhalb der Seitenüberschrift: er soll aussehen wie sonst auch,
darf aber die Zeilenhöhe der Überschrift (1,14) nicht erben, sonst klebt
die gesperrte Versalzeile an der großen Zeile. */
.seitenkopf h1 > .lauf { line-height: 1.5; }
/* ===========================================================================
Feedback 2 · Speisekarten (Constanze Schnee, 11.10.2026)
=========================================================================== */
/* ---- Hinweis unter den Knopf, wie auf schmalen Geräten (S. 1) ------------- */
.katalog-starter { display: block; }
.katalog-starter-hinweis { display: block; margin-top: .9rem; }
/* ---- Obere Reiterleiste wie die Pillen darunter (S. 2) --------------------
„ich finde die 2te Buttonreihe schöner als die obere. Liegt auch n bisschen
daran, dass die zu eng aneinanderkleben." Gleiche Form, aber eine Stufe
größer, damit die Rangfolge der beiden Leisten erhalten bleibt. */
.karten-reiter-kasten {
background: transparent; border: 0; padding: 0;
gap: .6rem; margin-bottom: 1.4rem;
}
.karten-reiter-kasten button {
border-radius: 999px; background: var(--hell);
padding: .65rem 1.3rem;
font-size: .94rem; letter-spacing: .04em; text-transform: none;
color: var(--tinte-2);
}
.karten-reiter-kasten button[aria-selected="true"] { background: var(--marine); color: #fff; }
.karten-reiter-kasten button:hover[aria-selected="false"] { background: var(--hell-2); color: var(--tinte); }
/* ---- Karte: Register wie bei den Events (S. 2) ---------------------------
Hauptkategorien in Versalien und Blau, Gericht und Preis bold und blau. */
.karten-gruppe {
text-transform: uppercase; color: var(--marine); font-weight: 600;
letter-spacing: .04em;
}
.gericht h3, .gericht h4 { color: var(--marine); font-weight: 600; }
.gericht .preis { color: var(--marine); font-weight: 600; }
/* ---- Die Punktlinie zwischen Name und Preis fällt weg (S. 2) -------------
Der leere Platzhalter bleibt als Dehnfuge im Flex-Fluss, nur ohne Linie. */
.gericht .punkte { border-bottom: 0; }
/* ---- Trennlinie: sie gehört zum Gericht darüber (S. 2) -------------------
Wie im Druck: wenig Luft über der Linie, doppelt so viel darunter. */
.posten > div {
padding: 1.9rem 0 .95rem;
/* „deutlicher (mehr px)": 2 px statt 1, in der feinen Tonlage. Die
Gruppenlinie darüber ist 2 px Marine und bleibt damit die stärkere. */
border-bottom: 2px solid var(--linie);
}
.posten > div:first-child { padding-top: 0; }
@media (min-width: 820px) { .posten > div:nth-child(2) { padding-top: 0; } }
/* ---- Legende: Zeichen und Wort gehören zusammen (S. 4) -------------------
Vorher lag zwischen Symbol und Wort derselbe Abstand wie zum nächsten
Paar, dadurch war nicht eindeutig, welches Zeichen wozu gehört. */
.allergen-zeichen { gap: .3rem 2.2rem; }
.allergen-zeichen > span { display: inline-flex; align-items: center; }
.allergen-zeichen .kz { margin-right: .3em; }
/* ===========================================================================
Feedback 2 · Familienfeiern und die anderen Einzelevents
(Constanze Schnee, 11.10.2026) — „Das was ich hier anmerke, betrifft auch
die anderen Einzelevents."
=========================================================================== */
/* ---- Zitat: goldene Zeile davor statt dahinter (S. 1) --------------------
„Goldener Text über dem Zitat, weil das die etablierte Reihenfolge ist." */
.zitat .lauf { display: block; margin-bottom: 1.1rem; }
.zitat-nach { margin: 1.1rem 0 0; font-size: .92rem; color: var(--tinte-3); }
/* ---- Goldener Knopf im Bildband (S. 2) -----------------------------------
.marine und .dunkel haben den goldenen Knopf längst, das Band mit
Hintergrundbild war die Lücke. */
.abschnitt.band .knopf {
background: var(--gold-tief); border-color: var(--gold-tief);
color: #fff; font-weight: 700;
}
.abschnitt.band .knopf:hover { background: #fff; border-color: #fff; color: var(--marine); }
/* ---- Textspalte an die Bildkanten (S. 3) --------------------------------
„Mehr Abstand, s. Feedback EVENTS/RÄUME". Anders als bei den Räumen
bleiben hier die Abstände der Blöcke stehen: diese Textspalten sind
teilweise höher als das Bild, dann gäbe space-between nichts zu verteilen
und die Blöcke klebten ohne Rand aneinander. */
@media (min-width: 900px) {
.paar-dehnen { align-items: stretch; }
.paar-dehnen > .paar-text {
display: flex; flex-direction: column; justify-content: space-between;
}
.paar-dehnen > figure { display: flex; flex-direction: column; }
.paar-dehnen > figure > .bogen { flex: 1 1 auto; }
}
/* ---- Anfrage-Link in den Vertiefungen (S. 3) ---------------------------- */
.ruf-link { margin-top: 1.6rem; }
/* ---- Dreischritt-Überschrift einzeilig (S. 4) ---------------------------
„1 Zeile und mit punkt ." Der Punkt steht im Text, die Zeile hält nur,
solange sie auch hineinpasst: darunter darf sie weiter umbrechen. */
@media (min-width: 1180px) {
.einzeilig { max-width: none; white-space: nowrap; }
}
/* Kicker und Überschrift sind ein Block. Ohne diese Klammer verteilt
space-between auch zwischen beiden Luft, dann steht der goldene Kicker
einsam über der Überschrift statt an ihr. */
.titel-paar .lauf { display: block; margin-bottom: 1.1rem; }
/* ===========================================================================
Feedback 2 · Galerie (Constanze Schnee, 11.10.2026)
=========================================================================== */
/* ---- „Linie weg" ---------------------------------------------------------
Die Unterkante der Filterleiste stand immer da und trennte nichts. Jetzt
erscheint sie nur, solange die Leiste unter dem Kopf mitläuft; dort
braucht sie die Kante, sonst scrollt der Inhalt unsichtbar darunter weg.
Die Klasse setzt main.js. Gilt für Galerie, Speisekarte und Termine. */
.gruppen-sprung { border-bottom: 0; }
.gruppen-sprung.klebt { border-bottom: 1px solid var(--linie-fein); }
/* ---- Radierung neben dem Haustext (S. 3) --------------------------------
Kein Zuschnitt-Rahmen: ein gerahmtes Blatt mit eigener Bildunterschrift
im Papier verträgt kein object-fit: cover. */
.radierung-bild { margin: 0; }
.radierung-bild img { width: 100%; height: auto; }
.radierung-bild figcaption {
margin-top: .7rem; font-size: .8rem; color: var(--tinte-3);
}
/* ===========================================================================
Feedback 2 · Historie (Constanze Schnee, 11.10.2026)
=========================================================================== */
/* ---- Seitenkopf: Text links, Haus rechts, mit Überstand (S. 2 und 3) ----
Ihr Entwurf setzt das Bild neben die Überschrift und lässt es unten über
die Marine-Kante ins Helle laufen („Bisschen Dynamik"). Der Überstand ist
bewusst klein: die Chronik darunter beginnt links, das Bild steht rechts,
sie kommen sich nicht ins Gehege. */
.kopf-paar { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.kopf-tat { margin-top: 2rem; }
.kopf-bild { margin: 0; }
.kopf-bild figcaption { margin-top: .7rem; font-size: .8rem; color: var(--nebel); }
/* Der goldene Knopf aus ihrem Entwurf. Marine-Flaechen haben ihn ueber
.marine, der Seitenkopf traegt die Klasse nicht. */
.seitenkopf .kopf-tat .knopf {
background: var(--gold-tief); border-color: var(--gold-tief);
color: #fff; font-weight: 700;
}
.seitenkopf .kopf-tat .knopf:hover { background: #fff; border-color: #fff; color: var(--marine); }
@media (min-width: 900px) {
.kopf-paar { grid-template-columns: 1fr .78fr; align-items: center; }
/* Der Ueberstand muss groesser sein als die Bildunterschrift, sonst steht
sie halb auf Marine und halb auf Weiss und ist in keiner Farbe lesbar. */
.kopf-bild { position: relative; z-index: 2; margin-bottom: -10rem; }
.kopf-bild figcaption { color: var(--tinte-3); }
/* Platz für den Überstand, damit er nicht auf der Chronik liegt. */
.seitenkopf:has(.kopf-bild) + .abschnitt { padding-top: clamp(8rem, 10vw, 10rem); }
}
/* ---- Chronik: Jahreszahlen in zwei Zeilen (S. 4) -------------------------
„1588 und 1614" brach in drei Zeilen, weil „und 1614" nicht in 11 rem
passte. Der Umbruch steht im Markup, die Spalte muss ihn nur zulassen. */
@media (min-width: 780px) { .eintrag { grid-template-columns: 14rem 1fr; } }
@media (min-width: 980px) {
.eintrag-mit-bild { grid-template-columns: 14rem 1fr 17rem; }
}
/* ---- Chronik: Bilder bleiben in einer Spalte (S. 4) ---------------------
Das Hin und Her von Eintrag zu Eintrag las sich nicht als Rhythmus,
sondern als Versehen. Die Regeln für die gespiegelte Variante sind damit
gegenstandslos; sie stehen weiter oben im Blatt und greifen ohne die
Klasse bild-links nicht mehr. */
/* ---- Ein Bild, das nicht mitwachsen darf -------------------------------
Die Radierung ist ein gerahmtes Blatt mit Signatur. In paar-dehnen würde
der Rahmen auf die Texthöhe gezogen und das Blatt beschnitten. */
.paar-dehnen > figure.bild-frei { display: block; }
.paar-dehnen > figure.bild-frei > .bogen { flex: 0 0 auto; aspect-ratio: auto; }
.paar-dehnen > figure.bild-frei img { height: auto; }
/* Zusammenhängender Fließtext bleibt ein Block, damit space-between nicht
auch zwischen die Absätze Luft schiebt. Die zusätzliche Luft gehört an
die Überschrift und vor den Anfrage-Link (Pin 12.10.2026). */
.paar-dehnen .dehn-block > p { margin-bottom: 1.15em; }
.paar-dehnen .dehn-block > p:last-child { margin-bottom: 0; }
/* ===========================================================================
Feedback 2 · Kontakt (Constanze Schnee, 11.10.2026)
=========================================================================== */
/* ---- Routenplaner unter der Adresse (S. 1) ----------------------------- */
.kontakt-route { display: inline-flex; margin-top: .7rem; font-size: .72rem; }
/* ---- Bild schließt mit dem Knopf ab (S. 2) -----------------------------
Links Text und Foto, rechts das Formular. Das Foto wächst jetzt bis auf
die Unterkante des Anfrage-Knopfes, statt auf halber Höhe aufzuhören. */
.formular-bild { margin: 2rem 0 0; }
@media (min-width: 880px) {
.formular-gitter { align-items: stretch; }
.formular-gitter > div:first-child { display: flex; flex-direction: column; }
.formular-bild { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 16rem; }
.formular-bild > .bogen { flex: 1 1 auto; }
}
/* Symbole vor den Anfahrtswegen: von Constanze gefragt, von Mo verworfen
(Pin 12.10.2026). Die Liste bleibt rein typografisch. */
/* Die Radierung hat einen hellen Papierrand, das gedruckte Bild beginnt erst
3,7 % weiter unten. Die Textspalte richtet sich an der dunklen Kante aus,
nicht am Blattrand (Pin 12.10.2026). 1,9 vw entspricht diesen 3,7 % über
den ganzen Bereich, in dem die beiden Spalten nebeneinander stehen. */
@media (min-width: 900px) {
.paar-dehnen:has(> figure.bild-frei) > .paar-text {
padding-top: clamp(1rem, 1.9vw, 2.2rem);
}
}
/* ---------- Honigtopf ----------------------------------------------------------
Das Feld muss im Quelltext stehen und fuer Menschen unerreichbar sein.
Nicht display:none: manche Bots pruefen genau darauf und lassen es dann leer. */
.honigtopf {
position: absolute; left: -9999px; top: auto;
width: 1px; height: 1px; overflow: hidden;
}
/* ===========================================================================
Pins 28.10.2026 · Bilder neben langen Textspalten
=========================================================================== */
/* Die Anfahrtsliste ist höher als das Eingangsfoto daneben, das Foto hörte auf
halber Höhe auf: „es ist null symetrisch weil der text daneben ja viel länger
nach unten geht". Dieselbe Mechanik wie beim Formular-Foto weiter oben.
flex-basis: 0 statt auto (Pin 29.10.2026 „jetzt ist das bild zu lang und
schließt unter dem text ab"): mit auto zählt das Seitenverhältnis des
Rahmens als Ausgangsgröße, 4:5 sind in dieser Spalte 725 px und damit mehr
als der Text braucht — dann bestimmt das Bild die Zeilenhöhe und hängt unten
über. Mit 0 gibt der Text die Höhe vor und das Bild füllt den Rest auf.
min-height: 0 nimmt dem Rahmen die automatische Mindesthöhe, die das
Seitenverhältnis sonst durch die Hintertür wieder setzt. */
@media (min-width: 880px) {
.info-gitter { align-items: stretch; }
.bild-dehnen { display: flex; flex-direction: column; }
.bild-dehnen > .bogen { flex: 1 1 0; min-height: 0; }
}
/* Mosaik auf dem Handy: zwei Spalten, dazwischen vollbreite Kacheln. Steht
vor einer vollbreiten eine ungerade Zahl schmaler Kacheln, bleibt die
letzte allein in ihrer Reihe und rechts daneben ein weißes Loch (gefunden
29.10.2026, dreimal). grid-auto-flow: dense hilft nicht, die Reihenhöhen
unterscheiden sich. Die drei betroffenen Kacheln laufen deshalb auf dem
Handy über beide Spalten. Reihenfolgeabhängig: wird die Galerie umsortiert
oder eine Kachel ergänzt, bei 375 px nachsehen, welche jetzt allein steht. */
@media (max-width: 779px) {
.k-handy-voll { grid-column: span 2; }
}
/* Bandzeile, die auf 34rem um drei Pixel umbricht und die Hausnummer allein
in die zweite Zeile schickt (Pin 29.10.2026: „die 62 muss auf jeden fall in
die zeile drücken"). Der Satz braucht 547 px, das Maß gibt 544 her. 36rem
für diese eine Zeile, der Rest der Bänder bleibt bei 34rem. Dazu steht im
Text ein geschütztes Leerzeichen vor der 62: wird das Fenster schmaler,
wandert „Breite Straße 62." als Ganzes in die nächste Zeile. */
.band p.band-breit { max-width: 36rem; }