/* ══════════════════════════════════════════════════════════════════════════
FIFTY SEVEN – Hochzeiten am Karlsfelder See
Gestaltung der gesamten Seite. Farben und Maße stehen ganz oben unter
:root – dort lässt sich das Aussehen an einer Stelle ändern.
══════════════════════════════════════════════════════════════════════════ */
/*
Selbst gehostete Schriften – nach dem Download aktivieren und den
Google-Fonts- im löschen:
@font-face{font-family:'Cormorant Garamond';src:url('/fonts/cormorant-garamond-300.woff2') format('woff2');
font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Cormorant Garamond';src:url('/fonts/cormorant-garamond-400.woff2') format('woff2');
font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('/fonts/inter-300.woff2') format('woff2');
font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('/fonts/inter-400.woff2') format('woff2');
font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('/fonts/inter-500.woff2') format('woff2');
font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Bebas Neue';src:url('/fonts/bebas-neue-400.woff2') format('woff2');
font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Great Vibes';src:url('/fonts/great-vibes-400.woff2') format('woff2');
font-weight:400;font-style:normal;font-display:swap;}
*/
:root{
--papier:#F8F2E7; --creme:#F1E8D9; --sand:#E8DBC5; --tiefcreme:#DFCFB4;
--tinte:#241F17; --tinte-weich:#524A3D;
--matt:#675F50; /* WCAG AA: 5,66 / 5,19 / 4,62 auf Papier/Creme/Sand */
--linie:#DDD0B8;
--gold:#745C32; /* WCAG AA: 5,68 / 5,21 / 4,63 auf Papier/Creme/Sand */
--gold-hell:#D9BE86;
--breit:1240px; --schmal:720px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth;}}
body{background:var(--papier);color:var(--tinte);
font-family:'Inter',system-ui,sans-serif;font-weight:300;font-size:16px;line-height:1.75;
-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{display:block;max-width:100%;height:auto;}
picture{display:contents;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
/* ---------- Typografie ---------- */
.display{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;line-height:1.1;letter-spacing:.005em;}
.d1{font-size:clamp(40px,7.6vw,94px);}
.d2{font-size:clamp(32px,5vw,58px);}
.d3{font-size:clamp(25px,3.2vw,36px);}
.schrift{font-family:'Great Vibes','Snell Roundhand','Apple Chancery','Segoe Script',cursive;
font-weight:400;display:inline-block;font-size:1.34em;line-height:1.05;
letter-spacing:.01em;color:var(--gold);padding-bottom:.08em;}
.hero .schrift,.zitat .schrift{color:var(--gold-hell);
text-shadow:0 2px 26px rgba(24,18,10,.75),0 1px 3px rgba(24,18,10,.45);}
.label{font-family:'Bebas Neue',sans-serif;font-size:11.5px;letter-spacing:.32em;
text-transform:uppercase;color:var(--gold);}
@media(min-width:900px){.label{font-size:12.5px;letter-spacing:.42em;}}
.hero-sub{font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:.28em;
text-transform:uppercase;color:rgba(248,242,231,.9);margin-top:18px;}
@media(min-width:900px){.hero-sub{font-size:15px;letter-spacing:.34em;}}
.lead{font-size:clamp(17px,1.6vw,20px);line-height:1.78;color:var(--tinte-weich);font-weight:300;}
.text{font-size:16px;line-height:1.85;color:var(--tinte-weich);font-weight:300;}
.text strong{font-weight:500;color:var(--tinte);}
.mitte{text-align:center;}
/* Auf schmalen Bildschirmen werden mittig gesetzte Absätze über viele Zeilen
mühsam zu lesen – das Auge muss jeden Zeilenanfang neu suchen. Der erste
Vorspann bleibt deshalb zentriert, jeder weitere Absatz rückt nach links.
Überschriften und Labels bleiben immer mittig. */
@media(max-width:899px){
.mitte .text{text-align:left;}
.mitte .lead + .lead,.mitte .lead + .lead ~ .lead{text-align:left;}
.mitte .liste{text-align:left;}
}
.schmal{max-width:var(--schmal);}
.mitte.schmal,.schmal.mitte{margin-left:auto;margin-right:auto;}
.zier{display:flex;align-items:center;justify-content:center;gap:14px;margin:24px 0;}
.zier::before,.zier::after{content:"";height:1px;width:58px;background:var(--linie);}
.zier span{width:5px;height:5px;transform:rotate(45deg);background:var(--gold);opacity:.75;}
.zier.hell::before,.zier.hell::after{background:rgba(248,242,231,.35);}
/* ---------- Layout ---------- */
.rand{width:100%;max-width:var(--breit);margin:0 auto;padding:0 22px;}
.abschnitt{padding:82px 0;}
@media(min-width:900px){.abschnitt{padding:130px 0;}.rand{padding:0 40px;}}
/* ---------- Buttons ---------- */
.knopf{display:inline-block;font-family:'Bebas Neue',sans-serif;font-size:14px;
letter-spacing:.26em;text-transform:uppercase;text-decoration:none;padding:16px 32px;
border:1px solid var(--tinte);background:var(--tinte);color:var(--papier);
transition:background .35s ease,color .35s ease,border-color .35s ease;cursor:pointer;}
.knopf:hover{background:transparent;color:var(--tinte);}
.knopf.linie{background:transparent;color:var(--tinte);border-color:rgba(36,31,23,.35);}
.knopf.linie:hover{background:var(--tinte);color:var(--papier);border-color:var(--tinte);}
.knopf.hell{background:transparent;color:#F8F2E7;border-color:rgba(248,242,231,.6);}
.knopf.hell:hover{background:#F8F2E7;color:var(--tinte);border-color:#F8F2E7;}
/* Knöpfe stehen überall mittig. Einzige Ausnahme ist das Titelbild – dort
sind Logo, Überschrift und Knöpfe gemeinsam linksbündig gesetzt. */
.knopfreihe{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.hero .knopfreihe{justify-content:flex-start;}
/* ---------- Kopf ---------- */
.kopf{position:fixed;top:0;left:0;right:0;z-index:60;padding:12px 0;
border-bottom:1px solid transparent;transition:background .4s ease,border-color .4s ease;}
.kopf.fest{background:rgba(248,242,231,.95);backdrop-filter:blur(14px);border-bottom-color:var(--linie);}
.kopf-in{max-width:var(--breit);margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:26px;}
.marke{display:block;line-height:0;opacity:0;pointer-events:none;transition:opacity .45s ease;}
.kopf.fest .marke{opacity:1;pointer-events:auto;}
.marke img{height:26px;width:auto;}
.marke .dunkel{display:none;}
.kopf.fest .marke .hell{display:none;}
.kopf.fest .marke .dunkel{display:block;}
.markenzusatz{display:none;font-family:'Great Vibes','Snell Roundhand','Segoe Script',cursive;
font-size:20px;color:var(--gold);line-height:1;margin-left:-2px;padding-top:6px;white-space:nowrap;
opacity:0;transition:opacity .45s ease;}
.kopf.fest .markenzusatz{opacity:1;}
.nav{display:none;}
.nav a{font-family:'Bebas Neue',sans-serif;font-size:13.5px;letter-spacing:.2em;text-transform:uppercase;
text-decoration:none;color:rgba(248,242,231,.92);padding-bottom:4px;border-bottom:1px solid transparent;
transition:color .3s ease,border-color .3s ease;text-shadow:0 1px 12px rgba(24,18,10,.6);
white-space:nowrap;}
.kopf.fest .nav a{color:var(--tinte-weich);text-shadow:none;}
.nav a:hover{border-bottom-color:var(--gold);}
.kopf .knopf{padding:11px 16px;font-size:12px;letter-spacing:.16em;white-space:nowrap;
background:transparent;color:#F8F2E7;border-color:rgba(248,242,231,.6);}
.kopf .knopf:hover{background:#F8F2E7;color:var(--tinte);border-color:#F8F2E7;}
.kopf.fest .knopf{background:var(--tinte);color:var(--papier);border-color:var(--tinte);}
.kopf.fest .knopf:hover{background:transparent;color:var(--tinte);}
.kopfcta{display:none;}
.burger{margin-left:auto;background:none;border:0;padding:8px;cursor:pointer;
display:flex;flex-direction:column;gap:5px;width:34px;}
.burger span{height:1px;background:#F8F2E7;transition:background .4s ease,transform .3s ease,opacity .3s ease;}
.kopf.fest .burger span{background:var(--tinte);}
.burger[aria-expanded="true"] span{background:var(--tinte);}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.menue{position:fixed;inset:0;background:var(--papier);z-index:55;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:4px;opacity:0;pointer-events:none;visibility:hidden;
transition:opacity .4s ease,visibility 0s linear .4s;}
.menue.offen{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .4s ease;}
.menue a{font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:300;text-decoration:none;
padding:11px 0;color:var(--tinte);}
.menue a.knopf{margin-top:22px;font-size:13px;color:var(--papier);}
.menue a.knopf:hover{color:var(--tinte);}
@media(min-width:960px){
.kopf-in{padding:0 40px;}
.marke img{height:30px;}
.markenzusatz{display:block;}
.nav{display:flex;gap:18px;margin-left:auto;}
.kopfcta{display:inline-block;}
.burger{display:none;}
}
@media(min-width:1200px){
.nav{gap:26px;}
.kopf .knopf{padding:11px 20px;font-size:12.5px;letter-spacing:.2em;}
}
/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:#2A2419;}
.hero-medium{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% 52%;}
/* Auf dem Handy ist das Titelbild sonst ein schmaler senkrechter Streifen:
Das Foto ist 3:2 breit, der Bildschirm hochkant. Bei voller Höhe bleiben
nur rund 30 Prozent der Bildbreite übrig – man sieht dann nur die Braut.
Ein etwas niedrigeres Titelbild zeigt beide und das Wasser dahinter. */
@media(max-width:899px){
.hero{min-height:76svh;}
.hero-medium{object-position:48% 50%;}
}
video.hero-medium{transform:scale(1.02);}
.hero-schleier{position:absolute;inset:0;background:
linear-gradient(180deg,rgba(28,23,15,.5) 0%,rgba(28,23,15,.12) 22%,rgba(28,23,15,.4) 48%,rgba(28,23,15,.82) 76%,rgba(28,23,15,.92) 100%);}
@media(min-width:900px){
.hero-schleier{background:
linear-gradient(180deg,rgba(28,23,15,.34) 0%,rgba(28,23,15,.02) 30%,rgba(28,23,15,.08) 52%,rgba(28,23,15,.62) 82%,rgba(28,23,15,.88) 100%);}
}
.hero-in{position:relative;width:100%;max-width:var(--breit);margin:0 auto;padding:0 22px 56px;color:#F8F2E7;}
.hero-logo{width:min(70vw,280px);margin-bottom:18px;}
.hero .d1{color:#F8F2E7;margin:0 0 26px;text-shadow:0 2px 44px rgba(20,16,10,.4);}
.tonknopf{position:absolute;right:22px;bottom:24px;z-index:3;width:46px;height:46px;
border:1px solid rgba(248,242,231,.45);background:rgba(28,23,15,.35);color:#F8F2E7;
border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;
backdrop-filter:blur(4px);transition:border-color .3s ease,background .3s ease;}
.tonknopf:hover{border-color:#F8F2E7;background:rgba(28,23,15,.6);}
.tonknopf svg{width:17px;height:17px;}
@media(min-width:900px){
.hero-in{padding:0 40px 72px;}
.hero-logo{width:380px;margin-bottom:22px;}
.tonknopf{right:40px;bottom:36px;}
}
.signatur{font-family:'Great Vibes','Snell Roundhand','Segoe Script',cursive;
font-size:30px;color:var(--gold);margin-top:30px;line-height:1.3;}
/* ---------- LILA Platzhalter: hier fehlt noch ein Foto ---------- */
.platzhalter{position:relative;width:100%;height:100%;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;
background:repeating-linear-gradient(135deg,#6D28D9 0 14px,#7C3AED 14px 28px);
color:#F5F0FF;border:2px dashed rgba(245,240,255,.55);}
.platzhalter svg{width:34px;height:34px;opacity:.9;}
.platzhalter b{font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:.2em;
text-transform:uppercase;font-weight:400;line-height:1.2;}
.platzhalter span{font-size:12.5px;letter-spacing:.06em;color:rgba(245,240,255,.85);line-height:1.4;}
/* ---------- Themenblock unter dem Titelbild ---------- */
.themen{display:grid;gap:14px;margin-top:48px;}
/* Die Kacheln stehen im Raster nebeneinander und werden auf gleiche Höhe
gezogen. Ohne das Folgende blieb bei kurzen Texten unten ein Streifen der
sandfarbenen Kachelfläche stehen – am deutlichsten bei "Bar & Lounge".
Als Spalte gesetzt füllt der Textkasten den Rest der Höhe. */
.thema{position:relative;overflow:hidden;background:var(--sand);
display:flex;flex-direction:column;}
.thema > figure,.thema > .platzhalter-rahmen{margin:0;overflow:hidden;
aspect-ratio:16/10;flex:none;}
.thema img{width:100%;height:100%;object-fit:cover;
transition:transform 1.2s cubic-bezier(.2,.7,.3,1);}
.thema:hover img{transform:scale(1.05);}
.thema-text{padding:24px 24px 28px;background:var(--papier);border:1px solid var(--linie);
border-top:0;flex:1;}
.thema-text .nr{font-family:'Bebas Neue',sans-serif;font-size:11px;letter-spacing:.3em;
color:var(--gold);}
.thema-text h3{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:24px;
margin:10px 0 8px;line-height:1.2;}
@media(min-width:760px){.themen{grid-template-columns:1fr 1fr;gap:18px;}}
@media(min-width:1100px){.themen{grid-template-columns:repeat(3,1fr);}
.thema-text{padding:26px 22px 30px;}}
/* ---------- Split ---------- */
.split{display:grid;gap:34px;align-items:center;}
.split figure{position:relative;overflow:hidden;aspect-ratio:4/5;margin:0;}
.split figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.3,1);}
.split figure:hover img{transform:scale(1.045);}
.split-text .label{display:block;margin-bottom:16px;}
@media(min-width:900px){
.split{grid-template-columns:1.05fr .95fr;gap:76px;}
.split.gedreht .split-bild{order:2;}
}
.bildnotiz{margin-top:14px;font-family:'Cormorant Garamond',serif;font-style:italic;
font-size:15px;color:var(--matt);}
/* Doppelbild im Split */
.doppel{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.doppel figure{aspect-ratio:3/4;}
@media(min-width:900px){.doppel{gap:14px;}}
/* ---------- Zitat ---------- */
.zitat{position:relative;min-height:76svh;display:flex;align-items:center;justify-content:center;
overflow:hidden;background:#2A2419;text-align:center;}
.zitat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 24%;}
.zitat .schleier{position:absolute;inset:0;
background:radial-gradient(ellipse 78% 62% at 50% 50%,rgba(20,16,10,.78),rgba(20,16,10,.5) 70%),
linear-gradient(180deg,rgba(20,16,10,.55),rgba(20,16,10,.42) 50%,rgba(20,16,10,.6));}
.zitat-in{position:relative;max-width:840px;padding:70px 24px;color:#F8F2E7;}
.zitat blockquote{font-family:'Cormorant Garamond',serif;font-weight:300;font-style:italic;
font-size:clamp(24px,3.4vw,42px);line-height:1.36;
text-shadow:0 2px 30px rgba(16,12,7,.85),0 1px 4px rgba(16,12,7,.6);}
.zitat cite{display:block;font-style:normal;font-family:'Bebas Neue',sans-serif;
font-size:12px;letter-spacing:.34em;margin-top:26px;color:#F0E9DA;
text-shadow:0 2px 20px rgba(16,12,7,.9),0 1px 3px rgba(16,12,7,.7);}
/* ---------- Ablauf mit Bildern ---------- */
.ablauf{background:var(--creme);}
.zeitstrahl{margin:48px auto 0;max-width:960px;}
.zeitpunkt{display:grid;gap:20px;padding:30px 0;border-top:1px solid var(--linie);
grid-template-columns:70px 1fr;align-items:start;}
.zeitpunkt:last-child{border-bottom:1px solid var(--linie);}
.zeitpunkt .uhr{font-family:'Bebas Neue',sans-serif;font-size:19px;letter-spacing:.12em;
color:var(--gold);padding-top:4px;}
.zeitpunkt h3{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:25px;
line-height:1.25;margin-bottom:7px;}
.zeitpunkt figure{margin:16px 0 0;overflow:hidden;aspect-ratio:16/10;grid-column:1 / -1;}
.zeitpunkt figure img{width:100%;height:100%;object-fit:cover;
transition:transform 1.2s cubic-bezier(.2,.7,.3,1);}
.zeitpunkt .platzhalter-rahmen{margin:16px 0 0;overflow:hidden;aspect-ratio:16/10;grid-column:1 / -1;}
@media(min-width:900px){.zeitpunkt .platzhalter-rahmen{margin:0;aspect-ratio:4/3;grid-column:auto;}}
.zeitpunkt figure:hover img{transform:scale(1.05);}
@media(min-width:900px){
.zeitpunkt{grid-template-columns:110px 1fr 300px;gap:34px;padding:38px 0;align-items:center;}
.zeitpunkt .uhr{font-size:22px;}
.zeitpunkt h3{font-size:29px;}
.zeitpunkt figure{margin:0;aspect-ratio:4/3;grid-column:auto;}
}
/* ---------- Zahlen ---------- */
.zahlen{background:var(--sand);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);}
.zahlen-in{max-width:var(--breit);margin:0 auto;padding:0 22px;display:grid;grid-template-columns:1fr 1fr;}
.zahl{padding:34px 12px;text-align:center;border-bottom:1px solid rgba(116,92,50,.22);}
.zahl:nth-child(odd){border-right:1px solid rgba(116,92,50,.22);}
.zahl:nth-last-child(-n+2){border-bottom:0;}
.zahl b{display:block;font-family:'Cormorant Garamond',serif;font-weight:300;
font-size:clamp(38px,5vw,58px);line-height:1;color:var(--tinte);}
.zahl span{display:block;font-family:'Bebas Neue',sans-serif;font-size:11.5px;letter-spacing:.26em;
text-transform:uppercase;color:var(--matt);margin-top:11px;}
@media(min-width:900px){
.zahlen-in{grid-template-columns:repeat(4,1fr);padding:0 40px;}
.zahl{padding:56px 16px;border-bottom:0;}
.zahl:nth-child(odd){border-right:0;}
.zahl+.zahl{border-left:1px solid rgba(116,92,50,.22);}
}
/* ---------- Galerie ---------- */
.galerie{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:44px;}
.galerie figure{position:relative;overflow:hidden;aspect-ratio:3/4;margin:0;}
.galerie img{width:100%;height:100%;object-fit:cover;
transition:transform 1.1s cubic-bezier(.2,.7,.3,1),filter .8s ease;}
.galerie figure:hover img{transform:scale(1.06);}
@media(min-width:900px){
.galerie{grid-template-columns:repeat(6,1fr);gap:16px;}
.galerie figure{grid-column:span 2;aspect-ratio:3/4;}
}
/* ---------- Impressionen-Streifen ---------- */
.streifen-block{padding:0 0 82px;}
@media(min-width:900px){.streifen-block{padding:0 0 130px;}}
.streifen{display:flex;gap:10px;overflow-x:auto;padding:0 22px 8px;
scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.streifen::-webkit-scrollbar{display:none;}
.streifen figure{flex:none;width:230px;scroll-snap-align:start;margin:0;}
.streifen figure > picture > img,.streifen figure img{width:100%;height:306px;object-fit:cover;}
.streifen figcaption{padding-top:12px;font-family:'Bebas Neue',sans-serif;font-size:11.5px;
letter-spacing:.24em;text-transform:uppercase;color:var(--matt);}
@media(min-width:900px){
.streifen{gap:16px;padding:0 40px 8px;max-width:calc(var(--breit) + 0px);margin:0 auto;}
.streifen figure{width:300px;}
.streifen figure img{height:400px;}
}
/* ---------- Videoblock ---------- */
.filmrahmen{position:relative;margin-top:44px;overflow:hidden;background:#2A2419;border:1px solid var(--linie);}
.filmrahmen video{width:100%;height:auto;aspect-ratio:16/9;display:block;object-fit:cover;}
/* ---------- Gründe ---------- */
.gruende{display:grid;gap:1px;margin-top:44px;background:var(--linie);border:1px solid var(--linie);}
.grund{background:var(--papier);padding:32px 26px;}
.grund .nr{font-family:'Bebas Neue',sans-serif;font-size:11.5px;letter-spacing:.3em;color:var(--gold);}
.grund h3{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:24px;margin:12px 0 9px;}
@media(min-width:760px){.gruende{grid-template-columns:1fr 1fr;}}
@media(min-width:1060px){.gruende{grid-template-columns:repeat(3,1fr);}.grund{padding:42px 34px;}}
/* ---------- Menügänge ---------- */
.gaenge{display:grid;gap:1px;margin-top:44px;background:var(--linie);border:1px solid var(--linie);}
.gang{background:var(--papier);padding:30px 26px;}
.gang .nr{font-family:'Bebas Neue',sans-serif;font-size:11.5px;letter-spacing:.3em;color:var(--gold);
text-transform:uppercase;}
.gang h3{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:24px;margin:12px 0 9px;}
@media(min-width:900px){.gaenge{grid-template-columns:repeat(3,1fr);}.gang{padding:40px 32px;}}
/* ---------- Preise ---------- */
.preise{background:var(--creme);}
.preis-basis{display:grid;gap:1px;margin-top:44px;background:var(--linie);border:1px solid var(--linie);}
.preiskarte{background:var(--papier);padding:32px 26px;}
.preiskarte .nr{font-family:'Bebas Neue',sans-serif;font-size:11.5px;letter-spacing:.3em;
color:var(--gold);text-transform:uppercase;}
.preiskarte h3{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:26px;margin:10px 0 2px;}
.betrag{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:44px;line-height:1.1;
color:var(--tinte);margin-bottom:12px;}
@media(min-width:760px){.preis-basis{grid-template-columns:1fr 1fr;}.preiskarte{padding:40px 34px;}}
.preis-titel{font-family:'Bebas Neue',sans-serif;font-size:12.5px;letter-spacing:.34em;
text-transform:uppercase;color:var(--gold);font-weight:400;margin:44px 0 4px;}
.preisliste{border-top:1px solid var(--linie);}
.preiszeile{display:grid;grid-template-columns:1fr auto;gap:6px 20px;padding:18px 0;
border-bottom:1px solid var(--linie);align-items:baseline;}
.preiszeile b{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:20px;}
.preiszeile i{font-style:normal;font-family:'Bebas Neue',sans-serif;font-size:17px;
letter-spacing:.08em;color:var(--gold);white-space:nowrap;}
.preiszeile span{grid-column:1/-1;font-size:14.5px;line-height:1.65;color:var(--tinte-weich);}
@media(min-width:760px){
.preiszeile{grid-template-columns:minmax(0,1fr) auto;}
.preiszeile b{grid-column:1;grid-row:1;}
.preiszeile span{grid-column:1;grid-row:2;max-width:64ch;}
.preiszeile i{grid-column:2;grid-row:1/3;align-self:center;font-size:19px;}
}
.beispiel{margin-top:44px;border:1px solid var(--gold);background:var(--papier);padding:28px 26px;}
.beispiel h3{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:24px;margin-bottom:14px;}
.beispiel .zeile{display:flex;justify-content:space-between;gap:16px;padding:9px 0;
border-bottom:1px solid var(--linie);font-size:15px;color:var(--tinte-weich);}
.beispiel .summe{display:flex;justify-content:space-between;gap:16px;padding:16px 0 0;
font-family:'Bebas Neue',sans-serif;font-size:19px;letter-spacing:.12em;color:var(--tinte);}
.beispiel .summe span:last-child{color:var(--gold);}
@media(min-width:760px){.beispiel{padding:38px 36px;}}
.preis-fussnote{margin-top:22px;font-size:13.5px;line-height:1.7;color:var(--matt);max-width:78ch;}
/* ---------- Band ---------- */
.band{background:var(--tiefcreme);}
.band-in{max-width:var(--schmal);margin:0 auto;text-align:center;padding:0 22px;}
/* ---------- Anfahrt ---------- */
.anfahrt{display:grid;gap:26px;margin-top:38px;}
.anfahrt div{border-left:2px solid var(--gold);padding-left:20px;}
.anfahrt h3{font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:.28em;
text-transform:uppercase;color:var(--tinte);margin-bottom:8px;font-weight:400;}
@media(min-width:760px){.anfahrt{grid-template-columns:repeat(3,1fr);gap:34px;}}
/* ---------- FAQ ---------- */
.faq{max-width:var(--schmal);margin:40px auto 0;}
.frage{border-bottom:1px solid var(--linie);}
.frage:first-child{border-top:1px solid var(--linie);}
.frage summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;gap:20px;
align-items:baseline;justify-content:space-between;
font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:400;color:var(--tinte);}
.frage summary::-webkit-details-marker{display:none;}
.frage summary::after{content:"";flex:none;width:11px;height:11px;position:relative;top:-1px;
background:linear-gradient(var(--gold),var(--gold)) center/100% 1px no-repeat,
linear-gradient(var(--gold),var(--gold)) center/1px 100% no-repeat;
transition:transform .3s ease;}
.frage[open] summary::after{transform:rotate(135deg);}
.frage .antwort{padding:0 0 26px;max-width:62ch;}
/* ---------- Kontakt ---------- */
.kontakt{background:var(--creme);}
.kontakt-gitter{display:grid;gap:40px;margin-top:44px;}
.formular{display:grid;gap:16px;}
.feld label{display:block;font-family:'Bebas Neue',sans-serif;font-size:11px;letter-spacing:.26em;
text-transform:uppercase;color:var(--matt);margin-bottom:8px;}
.feld input,.feld textarea{width:100%;padding:14px 0;border:0;border-bottom:1px solid var(--linie);
background:transparent;color:var(--tinte);font-family:'Inter',sans-serif;font-size:16px;
font-weight:300;border-radius:0;transition:border-color .3s ease;}
.feld input:focus,.feld textarea:focus{outline:0;border-bottom-color:var(--gold);}
.feld textarea{resize:vertical;min-height:96px;}
.paar{display:grid;gap:16px;}
@media(min-width:560px){.paar{grid-template-columns:1fr 1fr;}}
.einwilligung{display:flex;gap:12px;align-items:flex-start;font-size:14px;
line-height:1.6;color:var(--tinte-weich);cursor:pointer;}
.einwilligung input{width:18px;height:18px;flex:none;margin-top:3px;accent-color:var(--gold);
border-bottom:0;padding:0;}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.kontaktdaten a{display:flex;gap:14px;align-items:center;text-decoration:none;
padding:16px 0;border-bottom:1px solid var(--linie);font-size:16px;transition:color .3s ease;}
.kontaktdaten a:hover{color:var(--gold);}
.kontaktdaten svg{width:19px;height:19px;flex:none;color:var(--gold);}
.karte{margin-top:26px;min-height:270px;overflow:hidden;border:1px solid var(--linie);
display:flex;align-items:center;justify-content:center;background:var(--sand);padding:22px;}
.karte iframe{width:100%;height:270px;border:0;}
.karte-hinweis{max-width:44ch;text-align:center;}
@media(min-width:960px){.kontakt-gitter{grid-template-columns:1.1fr .9fr;gap:80px;}}
.seo .text{max-width:78ch;}
.seo .text + .text{margin-top:18px;}
/* ---------- Rechtstexte (Datenschutz) ----------
Langer Fließtext: schmale Spalte, klare Nummerierung, ruhige Abstände.
overflow-wrap, damit lange Adressen auf dem Handy nicht überstehen. */
.recht{max-width:70ch;margin:0 auto;overflow-wrap:break-word;}
.recht h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
font-size:clamp(21px,2.6vw,27px);line-height:1.25;
margin:38px 0 12px;padding-top:22px;border-top:1px solid var(--linie);}
.recht h2:first-child{margin-top:0;padding-top:0;border-top:0;}
.recht p{font-size:15px;line-height:1.8;font-weight:300;color:var(--tinte-weich);
margin-bottom:14px;}
.recht ul{margin:0 0 16px;padding-left:20px;}
.recht li{font-size:15px;line-height:1.8;font-weight:300;color:var(--tinte-weich);
margin-bottom:6px;}
.recht strong{font-weight:500;color:var(--tinte);}
.recht a{color:var(--tinte);text-decoration:underline;text-underline-offset:3px;}
.recht a:hover{color:var(--matt);}
.recht .stand{margin-top:26px;font-size:13px;color:var(--matt);}
/* ---------- Cookie-Banner und Einstellungen ----------
Der Banner sitzt unten und verdeckt nichts dauerhaft. Ablehnen sieht
genauso aus wie Zustimmen – das ist rechtlich gefordert und auch fair. */
/* Versteckt heißt versteckt: display-Angaben weiter unten würden das
hidden-Attribut sonst überstimmen und der Dialog läge unsichtbar über
der Seite. */
.zustimmung[hidden],.zust-banner[hidden],.zust-dialog[hidden],
.zust-schleier[hidden]{display:none !important;}
.zust-banner{position:fixed;left:0;right:0;bottom:0;z-index:120;
background:var(--papier);border-top:1px solid var(--linie);
box-shadow:0 -12px 40px rgba(24,18,10,.14);}
.zust-in{max-width:var(--breit);margin:0 auto;padding:22px;
display:grid;gap:16px;}
@media(min-width:900px){
.zust-in{grid-template-columns:1fr auto;align-items:center;gap:26px;padding:24px 40px;}
.zust-fuss{grid-column:1/-1;}
}
.zust-text h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
font-size:clamp(19px,2.2vw,23px);line-height:1.2;margin-bottom:6px;}
.zust-text p{font-size:14.5px;line-height:1.7;color:var(--tinte-weich);font-weight:300;
max-width:64ch;}
.zust-knoepfe{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.zust-knoepfe .knopf{padding:13px 22px;font-size:12.5px;letter-spacing:.18em;}
.zust-mehr{background:none;border:0;padding:6px 2px;cursor:pointer;
font-family:'Inter',system-ui,sans-serif;font-size:13.5px;font-weight:300;
color:var(--matt);text-decoration:underline;text-underline-offset:3px;}
.zust-mehr:hover{color:var(--tinte);}
.zust-fuss{font-size:12.5px;color:var(--matt);display:flex;gap:8px;flex-wrap:wrap;}
.zust-fuss a{color:var(--matt);text-decoration:underline;text-underline-offset:2px;}
.zust-fuss a:hover{color:var(--tinte);}
.zust-schleier{position:fixed;inset:0;z-index:130;background:rgba(24,18,10,.55);
backdrop-filter:blur(2px);}
.zust-dialog{position:fixed;inset:0;z-index:140;display:flex;align-items:flex-end;
justify-content:center;padding:0;pointer-events:none;}
@media(min-width:700px){.zust-dialog{align-items:center;padding:24px;}}
.zust-dialog-in{pointer-events:auto;background:var(--papier);width:100%;
max-width:620px;max-height:92vh;overflow-y:auto;border:1px solid var(--linie);
padding:26px 22px 22px;}
@media(min-width:700px){.zust-dialog-in{padding:32px 34px 28px;}}
.zust-dialog-kopf{position:relative;padding-right:40px;margin-bottom:20px;}
.zust-dialog-kopf h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
font-size:clamp(24px,3vw,31px);line-height:1.15;margin-top:8px;}
.zust-zu{position:absolute;top:-4px;right:-4px;width:38px;height:38px;padding:0;
background:none;border:1px solid var(--linie);cursor:pointer;color:var(--tinte-weich);
display:flex;align-items:center;justify-content:center;}
.zust-zu:hover{background:var(--creme);color:var(--tinte);}
.zust-zu svg{width:17px;height:17px;}
.zust-gruppen{display:grid;gap:2px;}
.zust-gruppe{background:var(--creme);border:1px solid var(--linie);padding:16px 18px;}
.zust-zeile{display:flex;align-items:center;justify-content:space-between;gap:16px;
margin-bottom:8px;cursor:pointer;}
.zust-gruppe:first-child .zust-zeile{cursor:default;}
.zust-name{font-family:'Bebas Neue',sans-serif;font-size:14px;letter-spacing:.2em;
text-transform:uppercase;color:var(--tinte);}
.zust-immer{font-size:12.5px;color:var(--matt);white-space:nowrap;}
.zust-gruppe p{font-size:14px;line-height:1.65;color:var(--tinte-weich);font-weight:300;}
.zust-detail{font-size:12.5px;color:var(--matt);margin-top:6px;}
/* Schalter – bewusst schlicht, keine Voreinstellung. */
.zust-schalter{position:relative;flex:none;width:46px;height:26px;}
.zust-schalter input{position:absolute;inset:0;width:100%;height:100%;margin:0;
opacity:0;cursor:pointer;z-index:2;}
.zust-knubbel{position:absolute;inset:0;background:var(--tiefcreme);
border:1px solid var(--linie);transition:background .25s ease,border-color .25s ease;}
.zust-knubbel::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;
background:var(--papier);transition:transform .25s ease;}
.zust-schalter input:checked + .zust-knubbel{background:var(--gold);border-color:var(--gold);}
.zust-schalter input:checked + .zust-knubbel::after{transform:translateX(20px);}
.zust-schalter input:focus-visible + .zust-knubbel{outline:2px solid var(--gold);outline-offset:3px;}
.zust-dialog-fuss{margin-top:20px;padding-top:18px;border-top:1px solid var(--linie);}
.zust-dialog-fuss .knopfreihe{justify-content:flex-start;}
.zust-dialog-fuss .knopf{padding:13px 22px;font-size:12.5px;letter-spacing:.18em;}
.zust-dialog-fuss .zust-fuss{margin-top:14px;display:block;line-height:1.6;}
@media(prefers-reduced-motion:reduce){
.zust-knubbel,.zust-knubbel::after{transition:none;}
}
/* ---------- Fuß ---------- */
.fuss{background:var(--tinte);color:rgba(248,242,231,.72);padding:44px 0 20px;}
.fuss-in{max-width:var(--breit);margin:0 auto;padding:0 22px;display:grid;gap:26px;}
.fuss .marke{opacity:1;pointer-events:auto;}
.fuss .marke img{height:22px;}
.fuss .schriftzeile{font-family:'Great Vibes','Snell Roundhand','Segoe Script',cursive;
font-size:17px;color:var(--gold-hell);margin-top:7px;line-height:1.1;}
.fuss p{font-size:13px;line-height:1.6;margin-top:9px;max-width:320px;}
.fuss h4{font-family:'Bebas Neue',sans-serif;font-size:10.5px;letter-spacing:.26em;
text-transform:uppercase;color:rgba(248,242,231,.62);font-weight:400;margin-bottom:7px;}
.fuss a{display:block;text-decoration:none;font-size:13px;padding:4px 0;line-height:1.45;
transition:color .3s ease;}
.fuss a:hover{color:#F8F2E7;}
.fuss-unten{border-top:1px solid rgba(248,242,231,.13);padding-top:14px;margin-top:2px;
display:flex;flex-wrap:wrap;gap:4px 18px;font-size:11.5px;color:rgba(248,242,231,.62);
align-items:center;line-height:1.5;}
.fuss-unten a{display:inline;padding:0;font-size:11.5px;}
@media(min-width:700px){.fuss-in{grid-template-columns:1fr 1fr;}}
@media(min-width:900px){.fuss-in{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;padding:0 40px;gap:20px 28px;}}
@media(min-width:700px){.fuss-unten{grid-column:1/-1;}}
/* ---------- Reveal ---------- */
@media(prefers-reduced-motion:no-preference){
.auf{opacity:0;transform:translateY(26px);
transition:opacity 1s cubic-bezier(.2,.7,.3,1),transform 1s cubic-bezier(.2,.7,.3,1);}
.auf.da{opacity:1;transform:none;}
.auf.v2{transition-delay:.12s;} .auf.v3{transition-delay:.24s;}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
a.sr:focus{position:fixed;top:10px;left:10px;width:auto;height:auto;clip:auto;
padding:12px 20px;background:var(--tinte);color:var(--papier);z-index:100;
font-family:'Bebas Neue',sans-serif;letter-spacing:.2em;text-decoration:none;}
/* ══════════════════════════════════════════════════════════════════════════
ERGÄNZUNGEN FÜR DIE UNTERSEITEN
══════════════════════════════════════════════════════════════════════════ */
/* Kleineres Titelbild auf Unterseiten */
.hero.hero-klein{min-height:62svh;}
@media(min-width:900px){.hero.hero-klein{min-height:68svh;}}
/* Brotkrume */
.krume{font-family:'Bebas Neue',sans-serif;font-size:11.5px;letter-spacing:.26em;
text-transform:uppercase;color:rgba(248,242,231,.8);margin-bottom:18px;}
.krume a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(248,242,231,.35);}
.krume a:hover{border-bottom-color:rgba(248,242,231,.9);}
.krume span{margin:0 8px;opacity:.6;}
.krume.dunkel{color:var(--matt);margin-bottom:26px;}
.krume.dunkel a{color:var(--gold);border-bottom-color:rgba(116,92,50,.4);}
/* Kopfblock für Seiten ohne großes Titelbild */
.kopfblock{background:var(--creme);border-bottom:1px solid var(--linie);padding-top:118px;}
@media(min-width:900px){.kopfblock{padding-top:150px;}}
/* Aufzählung im Fließtext */
.liste{list-style:none;padding:0;margin:0;}
.liste li{position:relative;padding-left:26px;margin-bottom:11px;font-size:16px;
line-height:1.75;color:var(--tinte-weich);font-weight:300;}
.liste li::before{content:"";position:absolute;left:2px;top:11px;width:6px;height:6px;
transform:rotate(45deg);background:var(--gold);}
/* Impressum und Datenschutz */
.rechtstext h2{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:24px;
margin:34px 0 10px;line-height:1.25;}
.rechtstext h2:first-child{margin-top:0;}
.rechtstext p{font-size:16px;line-height:1.8;color:var(--tinte-weich);font-weight:300;margin-bottom:12px;}
.rechtstext a{color:var(--gold);}
/* Hinweis über dem Formular */
.formularhinweis{max-width:var(--schmal);margin:26px auto 0;padding:16px 20px;
border-left:3px solid var(--gold);background:var(--papier);font-size:15px;
line-height:1.7;color:var(--tinte-weich);}
.formularhinweis.fehler{border-left-color:#9B2C2C;}
/* Textlinks im Fließtext sichtbar machen */
.text a,.lead a,.antwort a,.preis-fussnote a,.bildnotiz a{color:var(--gold);
text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.text a:hover,.lead a:hover{color:var(--tinte);}
/* Überschrift in Preiskarten auch als h2 */
.preiskarte h2{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:26px;margin:10px 0 2px;}
.grund h2{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:24px;margin:12px 0 9px;}
/* Sanftes Scrollen nur, wenn gewünscht */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
/* ---------- Geschützte Kontaktangaben ----------
Die Spans werden per JavaScript durch echte Links ersetzt. Bis dahin – und
ohne JavaScript – sollen sie genauso aussehen wie die Links daneben, damit
das Layout nicht springt. */
.schutz{display:inline;}
.fuss .schutz,.fuss .schutz noscript{display:block;}
.kontaktdaten .schutz{display:flex;align-items:center;gap:12px;}
/* ---------- Videoseite ---------- */
.videoliste{display:block;}
.videoblock{max-width:900px;margin:0 auto 54px;}
.videoblock:last-of-type{margin-bottom:0;}
.videokopf{display:grid;grid-template-columns:auto 1fr;gap:0 18px;align-items:start;
margin-bottom:18px;}
.videokopf .nr{font-family:'Bebas Neue',sans-serif;font-size:30px;line-height:1;
color:var(--gold);letter-spacing:.04em;padding-top:4px;}
.videokopf h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
font-size:clamp(23px,3vw,30px);line-height:1.2;margin:0 0 6px;}
.videokopf .text{margin:0;font-size:15.5px;}
.videoblock .filmrahmen{margin:0;}
/* Feste Bildproportion, damit die Seite beim Laden nicht springt. */
.videoblock video{display:block;width:100%;height:auto;aspect-ratio:16/9;
background:#1C1710;border-radius:2px;object-fit:cover;}
@media(max-width:640px){
.videokopf{grid-template-columns:1fr;gap:4px;}
.videokopf .nr{font-size:24px;padding-top:0;}
}
/* ---------- Preisrechner ----------
Liegt auf der Preisseite anstelle der früheren festen Beispielrechnung.
Ohne JavaScript wird stattdessen der