/* Hotel Navigare Buxtehude — Website
   Design-Tokens laut Übergabe (README Abschnitt 4). Blau rahmt, alles dazwischen ist hell.
   Ecken max. 4 px · kein Schatten · kein Verlauf · kein Blocksatz. */

@font-face{font-family:'Source Sans 3';src:url(/fonts/source-sans-3-latin-300-normal.woff2) format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url(/fonts/source-sans-3-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url(/fonts/source-sans-3-latin-600-normal.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --blau:#001871;
  --blau-75:#40528F;
  --warmweiss:#F6F4F0;
  --sand:#D9D2C5;
  --messing:#B08D57;
  --messing-hell:#D9C29A;
  --anthrazit:#22262B;
  --grau:#8A8F98;
  --platzhalter:#5A5F68;
  --schrift:'Source Sans 3','Source Sans Pro',Calibri,'Segoe UI',system-ui,sans-serif;
  --radius:4px;
  --breite:1280px;
  --rand:20px;
  --abstand:64px;
}
@media (min-width:768px){:root{--rand:32px;--abstand:96px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
body{margin:0;font-family:var(--schrift);font-size:17px;line-height:1.5;color:var(--anthrazit);background:var(--warmweiss);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img,video{max-width:100%;display:block}
a{color:var(--blau);text-underline-offset:.15em}
a:hover{color:var(--blau-75)}
h1,h2,h3{color:var(--blau);margin:0;line-height:1.1}
h1{font-weight:300;font-size:40px;line-height:1.05;letter-spacing:-.01em}
h2{font-weight:300;font-size:32px}
h3{font-weight:600;font-size:22px;line-height:1.2}
@media (min-width:768px){h1{font-size:64px}h2{font-size:40px}}
p{margin:0}
ul,ol{margin:0}
main{display:block}
main:focus{outline:none}
:focus-visible{outline:2px solid var(--messing);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprunglink{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--blau);color:var(--warmweiss);padding:12px 18px;border-radius:var(--radius);font-weight:600}
.sprunglink:focus{left:8px;color:var(--warmweiss)}

.breite{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blau);margin:0}
.kopf-block{display:flex;flex-direction:column;gap:12px;max-width:46em}
.trenner{width:88px;height:2px;background:var(--blau)}
.trenner-messing{background:var(--messing)}
.h2-klein{font-size:32px}
@media (min-width:768px){.h2-klein{font-size:36px}}
.klein{font-size:15px}

/* Knöpfe und Links */
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 22px;font:inherit;font-size:17px;font-weight:600;line-height:1.2;text-decoration:none;text-align:center;background:var(--blau);color:var(--warmweiss);border:1px solid var(--blau);border-radius:var(--radius);cursor:pointer}
.knopf:hover{background:var(--blau-75);border-color:var(--blau-75);color:var(--warmweiss)}
.knopf-zweit{background:transparent;color:var(--blau)}
.knopf-zweit:hover{background:var(--blau);color:var(--warmweiss)}
.knopf-reihe{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding-top:8px}
.link-stark{font-weight:600}
.link-knopf{font:inherit;color:inherit;background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}

/* Hinweis-Leiste */
.hinweis-leiste{background:var(--sand);padding:10px var(--rand);display:flex;justify-content:center;flex-wrap:wrap;gap:6px 16px;font-size:15px;text-align:center}
.hinweis-leiste a{font-weight:600}

/* Kopfzeile */
.kopfzeile{background:var(--warmweiss);border-bottom:1px solid var(--sand);position:relative;z-index:20}
.kopf-innen{max-width:var(--breite);margin:0 auto;padding:14px var(--rand);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 32px}
.logo{display:block;line-height:0}
.logo img{width:150px;height:auto}
@media (min-width:768px){.logo img{width:184px}}
.burger{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;font:inherit;font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--blau);background:transparent;border:1px solid var(--sand);border-radius:var(--radius);cursor:pointer}
.burger-linien,.burger-linien::before,.burger-linien::after{display:block;width:18px;height:2px;background:var(--blau);position:relative}
.burger-linien::before,.burger-linien::after{content:'';position:absolute;left:0}
.burger-linien::before{top:-6px}.burger-linien::after{top:6px}
.burger[aria-expanded="true"] .burger-linien{background:transparent}
.burger[aria-expanded="true"] .burger-linien::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] .burger-linien::after{top:0;transform:rotate(-45deg)}
.menue{display:none;width:100%;flex-direction:column;gap:16px;padding:8px 0 12px}
.menue.offen{display:flex}
.hauptnav ul{list-style:none;padding:0;display:flex;flex-direction:column}
.hauptnav a{display:block;padding:12px 0;font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--blau);border-bottom:1px solid var(--sand)}
.hauptnav a:hover,.hauptnav a:focus-visible,.hauptnav a[aria-current="page"]{border-bottom-color:var(--messing)}
.kopf-aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;font-size:15px}
.telefon{display:inline-flex;align-items:center;gap:8px;padding:10px 0;font-weight:600;text-decoration:none;color:var(--blau)}
/* Ohne JavaScript: Menü immer sichtbar */
.ohne-js .menue{display:flex}.ohne-js .burger{display:none}

@media (min-width:1180px){
  .burger{display:none}
  .menue,.menue.offen{display:flex;width:auto;flex-direction:row;align-items:center;gap:12px 28px;padding:0;flex:1;justify-content:flex-end;flex-wrap:wrap}
  .hauptnav ul{flex-direction:row;flex-wrap:wrap;gap:4px 26px}
  .hauptnav a{padding:12px 0 6px;border-bottom:2px solid var(--sand)}
}

/* Sprachauswahl */
.sprache{position:relative}
.sprache-knopf{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 10px;font:inherit;font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--blau);background:transparent;border:1px solid var(--sand);border-radius:var(--radius);cursor:pointer}
.sprache-knopf:hover{border-color:var(--messing)}
.sprache-knopf .pfeil{transition:transform .15s}
.sprache-knopf[aria-expanded="true"] .pfeil{transform:rotate(180deg)}
.flagge{display:block;outline:1px solid var(--sand);flex:none}
.sprache ul{position:absolute;left:0;top:calc(100% + 6px);z-index:30;list-style:none;margin:0;padding:6px;min-width:180px;background:var(--warmweiss);border:1px solid var(--sand);border-radius:var(--radius)}
@media (min-width:1180px){.sprache ul{left:auto;right:0}}
.sprache li a{display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 12px;border-radius:var(--radius);text-decoration:none;color:var(--anthrazit)}
.sprache li a[aria-current]{background:var(--sand);color:var(--blau);font-weight:600}
.sprache li a:hover{background:var(--sand)}

/* Bühne */
.buehne{background:var(--warmweiss)}
.buehne-bild{position:relative;height:340px;overflow:hidden;background:var(--sand)}
@media (min-width:768px){.buehne-bild{height:620px}}
.buehne-foto,.buehne-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.buehne-film{display:none}
.buehne-film.laeuft{display:block}
.film-knopf{position:absolute;right:var(--rand);top:24px;display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 16px;font:inherit;font-size:15px;font-weight:600;color:var(--blau);background:var(--warmweiss);border:0;border-radius:var(--radius);cursor:pointer}
.buehne-box-rahmen{position:relative;max-width:var(--breite);margin:-64px auto 0;padding:0 var(--rand) var(--abstand)}
@media (min-width:768px){.buehne-box-rahmen{margin-top:-180px;padding-bottom:72px}}
.buehne-box{background:var(--warmweiss);border-radius:var(--radius);padding:28px 16px 0;max-width:1000px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
@media (min-width:768px){.buehne-box{padding:48px 48px 0;gap:24px}}
.buehne-box h1{max-width:15em}
.buehne-box .lead{font-size:18px;max-width:36em}
@media (min-width:768px){.buehne-box .lead{font-size:20px}}
.vorteile{font-size:15px}

/* Buchungsfeld */
.buchungsfeld{width:100%;max-width:820px;background:var(--sand);border-radius:var(--radius);padding:16px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;text-align:left;margin-top:8px}
.feld{flex:1 1 140px;display:flex;flex-direction:column;gap:4px;min-width:0}
.feld-schmal{flex:0 1 96px}
.feld label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blau)}
.feld input,.feld select{font:inherit;font-size:17px;width:100%;min-height:46px;padding:10px 12px;color:var(--anthrazit);background:var(--warmweiss);border:1px solid var(--grau);border-radius:var(--radius)}
.feld input::placeholder{color:var(--platzhalter)}
.buchungsfeld .knopf{flex:1 1 200px}

/* Faktenleiste */
.faktenleiste{background:var(--sand)}
.faktenleiste ul{list-style:none;padding:28px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px 32px}
.faktenleiste li{display:flex;flex-direction:column;font-size:15px}
.faktenleiste .zahl{font-size:32px;font-weight:300;color:var(--blau);line-height:1.1}

/* Abschnitte */
.abschnitt{padding:var(--abstand) 0}
.abschnitt>.breite{display:flex;flex-direction:column;gap:40px}
.abschnitt>.breite.zwei-spalten{flex-direction:row;gap:48px}
.abschnitt.mit-linie{padding-top:0}
.abschnitt.mit-linie>.breite{border-top:1px solid var(--sand);padding-top:72px}
.abschnitt.mit-linie>.breite.zwei-spalten{padding-top:72px}
.kopf-zeile{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 32px}
.raster-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:32px}
.raster-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:32px}
.zwei-spalten{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.zwei-spalten.oben{align-items:flex-start}
.zwei-spalten>*{flex:1 1 420px;min-width:0}
.spalte-text{display:flex;flex-direction:column;gap:16px}
.spalte-text p{max-width:34em}
.bild-hoch{width:100%;height:460px;object-fit:cover;border-radius:var(--radius)}
.mehr{margin-top:-8px}

/* Karten */
.karte-sand{background:var(--sand);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.karte-bild-rahmen{line-height:0}
.karte-bild{width:100%;height:240px;object-fit:cover}
@media (min-width:768px){.karte-sand .karte-bild{height:320px}}
.karte-text{padding:28px 24px;display:flex;flex-direction:column;gap:14px;flex-grow:1}
@media (min-width:768px){.karte-text{padding:32px}.karte-text h3{font-size:28px}}
.karte-text .knopf-reihe{margin-top:auto}
.liste{padding-left:20px;display:flex;flex-direction:column;gap:4px}
.foto-folgt{display:flex;align-items:center;justify-content:center;width:100%;height:240px;background:var(--sand);border-radius:var(--radius);color:var(--blau);font-size:15px;letter-spacing:.08em;text-transform:uppercase}

.zimmer-karte{display:flex;flex-direction:column;gap:14px}
.zimmer-karte .karte-bild{border-radius:var(--radius)}
.zimmer-karte .bild-link{display:block}
.zimmer-titel{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.zimmer-titel h3 a{text-decoration:none}
.zimmer-titel h3 a:hover{text-decoration:underline}
.groesse{font-size:15px;white-space:nowrap}
.zimmer-karte p{font-size:16px}
.zimmer-fuss{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--sand);padding-top:14px;margin-top:auto;font-size:16px}
.preis{font-weight:600;color:var(--blau)}
.preis-offen{font-size:15px}

.angebot-karte{background:var(--sand);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:12px}
.angebot-karte h3{font-size:24px}
.angebot-karte p{font-size:16px}
.angebot-fuss{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between;align-items:center;gap:12px}

/* Zur Lotsin */
.lotsin-kasten{background:var(--sand)}
.lotsin-innen{max-width:var(--breite);margin:0 auto;display:flex;flex-wrap:wrap;align-items:stretch}
.lotsin-bild{flex:1 1 480px;min-height:280px;position:relative;min-width:0}
@media (min-width:768px){.lotsin-bild{min-height:420px}}
.lotsin-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lotsin-text{flex:1 1 480px;padding:48px var(--rand);display:flex;flex-direction:column;justify-content:center;gap:20px;min-width:0}
@media (min-width:768px){.lotsin-text{padding:80px 32px 80px 56px}.lotsin-text h2{font-size:44px}}
.lotsin-text .gross{font-size:19px;max-width:32em}
.zeiten{font-weight:600}
.termine{list-style:none;padding:0;display:flex;flex-direction:column;gap:4px}
.termine time{font-weight:600;color:var(--blau);margin-right:8px}

/* Geschichte */
.collage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.collage img,.collage .foto-folgt{width:100%;height:220px;object-fit:cover;border-radius:var(--radius)}
.collage .collage-gross{grid-column:1/3;height:300px}
@media (min-width:768px){.collage img{height:280px}}
.zeitleiste{list-style:none;padding:0;margin-top:8px}
.zeitleiste li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:14px 0;border-top:1px solid var(--sand)}
.zeitleiste li:last-child{border-bottom:1px solid var(--sand)}
.zeitleiste .jahr{font-weight:600;color:var(--blau)}

/* Gästestimmen */
.stimme{margin:0;background:var(--sand);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:16px}
.stimme blockquote{margin:0;font-size:19px;line-height:1.45}
.stimme figcaption{font-size:15px;color:var(--blau)}

/* Newsletter */
.newsletter-innen{flex-direction:row !important;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px 48px !important}
.newsletter-innen>*{flex:1 1 380px}
.newsletter-innen>div{display:flex;flex-direction:column;gap:8px}
.newsletter-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.newsletter-form .feld{flex:1 1 240px}
.newsletter-form .klein{flex-basis:100%}

/* Unterseiten */
.seite-kopf{padding:56px 0 8px}
@media (min-width:768px){.seite-kopf{padding:80px 0 16px}}
.seite-kopf h1{font-size:40px;font-weight:300}
@media (min-width:768px){.seite-kopf h1{font-size:52px}}
.seite-inhalt{padding-top:32px;padding-bottom:var(--abstand);display:flex;flex-direction:column;gap:40px}
.lauftext{max-width:44em;display:flex;flex-direction:column;gap:16px}
.lauftext h2{font-size:28px;margin-top:16px}
.lauftext h3{margin-top:8px}
.lauftext ul,.lauftext ol{padding-left:22px;display:flex;flex-direction:column;gap:4px}
.lead-text{font-size:20px;max-width:36em}
.kasten{background:var(--sand);border-radius:var(--radius);padding:24px 28px;display:flex;flex-direction:column;gap:12px}
.kasten-hinweis{border-left:4px solid var(--messing);background:var(--sand);padding:16px 20px;border-radius:var(--radius)}
.faktenblock{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:0 32px}
.faktenblock li{padding:12px 0;border-top:1px solid var(--sand)}
.faktenblock strong{display:block;color:var(--blau)}
.tabelle{width:100%;border-collapse:collapse;font-size:16px}
.tabelle th,.tabelle td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--sand);vertical-align:top}
.tabelle th{color:var(--blau);font-weight:600}
.tabelle td.rechts,.tabelle th.rechts{text-align:right;white-space:nowrap}
.tabelle-rahmen{overflow-x:auto}
.brotkrumen ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:15px}
.brotkrumen li+li::before{content:'›';margin-right:6px;color:var(--grau)}
.galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}
.galerie img,.galerie .foto-folgt{width:100%;height:320px;object-fit:cover;border-radius:var(--radius)}
.galerie img:first-child{grid-column:1/-1;height:min(60vw,520px)}
.zimmer-detail{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
@media (min-width:1000px){.zimmer-detail{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}}
.buchen-seite{position:sticky;top:16px;background:var(--sand);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:16px;align-self:start}
.buchen-seite .buchungsfeld{padding:0;margin:0}
.faq-liste{display:flex;flex-direction:column;max-width:52em}
.faq-liste details{border-top:1px solid var(--sand)}
.faq-liste details:last-child{border-bottom:1px solid var(--sand)}
.faq-liste summary{cursor:pointer;padding:18px 32px 18px 0;font-weight:600;color:var(--blau);font-size:19px;list-style:none;position:relative}
.faq-liste summary::-webkit-details-marker{display:none}
.faq-liste summary::after{content:'+';position:absolute;right:4px;top:14px;font-size:26px;font-weight:300}
.faq-liste details[open] summary::after{content:'–'}
.faq-liste details p{padding:0 0 20px;max-width:44em}

/* Fußzeile */
.fusszeile{background:var(--blau);color:var(--sand);padding:64px 0 40px}
.fusszeile a{color:var(--sand)}
.fusszeile a:hover{color:var(--warmweiss)}
.fuss-innen{max-width:var(--breite);margin:0 auto;padding:0 var(--rand);display:flex;flex-direction:column;gap:40px}
.fuss-spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;font-size:16px}
.fuss-marke{display:flex;flex-direction:column;gap:16px}
.fuss-marke img{width:168px;height:auto}
.koordinaten{font-size:14px;letter-spacing:.06em;color:var(--messing-hell)}
.fuss-titel{font-size:16px;font-weight:600;color:var(--messing-hell);margin-bottom:6px;line-height:1.5}
.fuss-links{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}
.fuss-links.quer{flex-direction:row;flex-wrap:wrap;gap:8px 20px}
.fuss-unten{border-top:1px solid var(--blau-75);padding-top:20px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:14px}
.fusszeile :focus-visible{outline-color:var(--messing-hell)}

/* Einwilligung */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--warmweiss);border-top:2px solid var(--blau);padding:20px var(--rand)}
.consent-innen{max-width:var(--breite);margin:0 auto;display:flex;flex-direction:column;gap:12px}
.consent h2{font-size:22px;font-weight:600}
.consent p{font-size:15px;max-width:60em}
.consent-knoepfe{display:flex;flex-wrap:wrap;gap:12px}

@media (prefers-reduced-motion:reduce){*{transition:none !important;scroll-behavior:auto !important}}
@media print{.kopfzeile .menue,.burger,.hinweis-leiste,.consent,.film-knopf{display:none !important}}
.abstand-oben{margin-top:20px}
.lauftext-breit{max-width:none}
.kasten-titel{font-size:24px;font-weight:600}

/* Anfrageformular (Für Firmen) */
.anfrage{max-width:820px;margin:48px 0;scroll-margin-top:96px}
.anfrage-form{background:var(--sand);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:16px;margin-top:16px}
.feld-reihe{display:flex;flex-wrap:wrap;gap:12px}
.feld-reihe .feld{flex:1 1 220px}
.feld textarea{font:inherit;font-size:17px;width:100%;padding:10px 12px;color:var(--anthrazit);background:var(--warmweiss);border:1px solid var(--grau);border-radius:var(--radius);resize:vertical}
.feld-hilfe{font-size:14px;color:var(--anthrazit)}
.feld-gruppe{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.feld-gruppe legend{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blau);margin-bottom:8px}
.auswahl{display:flex;align-items:center;gap:10px;min-height:44px;font-size:17px;cursor:pointer}
.auswahl input{width:20px;height:20px;accent-color:var(--blau);flex:none}
.lockfeld{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.meldung-ok,.meldung-fehler{background:var(--sand);border-left:4px solid var(--blau);padding:16px 20px;border-radius:var(--radius);margin:16px 0;font-weight:600}
.meldung-fehler{border-left-color:var(--anthrazit)}
.anfrage > .klein{margin-top:12px}