/* bKarlsruhe – site styles
   Palette: Variante B (eure Farben) + eine Neon-Akzentfarbe.
   Akzent umschalten: <html data-accent="orange"> (Standard) oder data-accent="blue". */

@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/fraunces-latin-full-normal.woff2) format("woff2-variations"),url(../fonts/fraunces-latin-full-normal.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;
  src:url(../fonts/fraunces-latin-full-italic.woff2) format("woff2-variations"),url(../fonts/fraunces-latin-full-italic.woff2) format("woff2")}
@font-face{font-family:"Karla";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/karla-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Karla";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/karla-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Karla";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/karla-latin-600-normal.woff2) format("woff2")}

:root{
  --ink:#16406F;
  --paper:#FFFFFF;
  --stone:#EEF3F8;
  --wall:#EA5B1C;        /* Orange der Wortmarke */
  --leaf:#3C86C6;        /* Blau der bisherigen Seite */
  --muted:#4F6378;
  --line:#D9D8D1;
  /* Neon-Akzent (Standard: Orange) */
  --neon:#FF5A1F;
  --neon-ink:#FFFFFF;
  --neon-glow:rgba(255,90,31,.45);
  --max:1180px;
}
html[data-accent="blue"]{
  --neon:#19C3FF;
  --neon-ink:#0B2A4A;
  --neon-glow:rgba(25,195,255,.5);
}

*{box-sizing:border-box}
/* Sprung zu einem Abschnitt (Menue, Footer): Platz fuer die mitlaufende Kopfzeile lassen, sonst liegt die Ueberschrift darunter
   (08.10.2026: Kopfzeile 65 px, bis 560 px Breite 94 px, unter ~345 px dreizeilig 139 px). Waechter: pruefe-handy.py Punkt 5 */
html{scroll-behavior:smooth;scroll-padding-top:66px}
@media (max-width:560px){html{scroll-padding-top:96px}}
@media (max-width:345px){html{scroll-padding-top:141px}}
body{margin:0;font-family:Karla,system-ui,sans-serif;color:var(--ink);background:var(--paper);font-size:17px;line-height:1.55}
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:400;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(2.4rem,5.4vw,4.4rem);line-height:1.02;font-variation-settings:"opsz" 144,"SOFT" 40}
h2{font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.1;font-variation-settings:"opsz" 96,"SOFT" 30}
h3{font-size:1.45rem;line-height:1.2}
a{color:inherit}
p{margin:0 0 1em}
img{max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid var(--neon);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;z-index:99}
.skip:focus{left:8px}

/* header */
header{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--stone)}
.nav{display:flex;align-items:center;gap:28px;height:64px}
.brand-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1;width:max-content}
.brand{font-family:Fraunces,serif;font-size:1.5rem;text-decoration:none;font-variation-settings:"SOFT" 60;color:var(--wall);font-weight:600;display:block;line-height:1}
.brand b{font-weight:600}
.brand-tag{display:block;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap;line-height:1.2;text-align:left}
.nav ul{display:flex;gap:22px;list-style:none;margin:0 0 0 auto;padding:0}
.nav ul a{text-decoration:none;font-weight:500}
.lang{display:flex;gap:6px;font-size:.92rem;margin-left:auto}
.nav ul + .lang{margin-left:0}
.lang a,.lang span{padding:4px 7px;border-radius:6px;text-decoration:none}
.lang .on{background:var(--ink);color:#fff}
.btn{display:inline-block;padding:12px 20px;border-radius:999px;background:var(--wall);color:#fff;text-decoration:none;font-weight:600;border:0;cursor:pointer;font:inherit;font-weight:600}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn.dark{background:var(--ink)}
.btn.neon{background:var(--neon);color:var(--neon-ink);box-shadow:0 0 0 0 var(--neon-glow);transition:box-shadow .25s,transform .15s}
.btn.neon:hover{box-shadow:0 0 22px 2px var(--neon-glow);transform:translateY(-1px)}
.menu-btn{display:none;margin-left:auto;background:none;border:1.5px solid var(--ink);border-radius:8px;padding:6px 10px;font:inherit;cursor:pointer}
/* Menue-Knopf bis 1110 px (bis 08.10.2026: 860): zwischen 861 und 985 (de) / 947 (en) / 1105 (es) / 1064 (fr) / 1085 (ru) px passte
   die volle Kopfzeile nicht in eine Zeile, die Seite war breiter als das Fenster, der Buchungsknopf lag teils ausserhalb
   (Besucher-Meldung zu-breit 985 bei 958 px; Tablets quer). Dorian 08.10.2026: „Entscheide selbst". Waechter: pruefe-handy.py Punkt 6 */
@media (max-width:1110px){
  .nav ul{display:none}
  .nav.open ul{display:flex;position:absolute;left:0;right:0;top:64px;background:var(--paper);flex-direction:column;gap:0;padding:8px 24px 16px;border-bottom:1px solid var(--stone)}
  .nav.open ul li{padding:10px 0;border-top:1px solid var(--stone)}
  .menu-btn{display:block}
  .lang{margin-left:0}
  .nav > .btn{display:none}
}
/* Handy: Logo + Menue-Knopf + fuenf Sprachen passen nicht in eine Zeile (Seite war 527 statt 390 px breit, 25.09.2026)
   -> Sprachen in eine eigene Zeile darunter, alle bleiben sichtbar. Waechter: pruefe-handy.py */
@media (max-width:560px){
  .nav{flex-wrap:wrap;height:auto;padding-top:8px;padding-bottom:8px;gap:6px 16px}
  .lang{order:3;width:100%;justify-content:flex-end}
  .nav.open ul{top:100%}
}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;padding:56px 0 40px}
.hero .claim{font-family:Fraunces,serif;font-style:italic;color:var(--neon);font-size:1.3rem;margin:0 0 10px;text-shadow:0 0 14px var(--neon-glow)}
html[data-accent="blue"] .hero .claim{color:#0FA4DA}
.hero p.lead{font-size:1.2rem;max-width:34ch;color:var(--muted);margin:22px 0 0}
@media (max-width:860px){.hero{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:32px}}

/* house cross-section */
.house{position:relative;margin:0}
.house svg{width:100%;height:auto;display:block}
.house .cap{font-size:.9rem;color:var(--muted);margin-top:10px}
@media (prefers-reduced-motion:no-preference){
  .house .room-pill{transition:fill .2s}
  .house .room-pill:hover{fill:var(--neon)}
}

/* booking bar */
.book{background:var(--ink);color:#fff;border-radius:18px;padding:18px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.6fr);gap:12px;align-items:end;margin:34px 0 0;min-width:0}
.book>div{min-width:0}
.book input{min-width:0}
.book label{display:block;font-size:.8rem;color:#B7C3C7;margin-bottom:6px}
.book input,.book select{width:100%;padding:12px 12px;border-radius:10px;border:0;font:inherit;background:#fff;color:var(--ink)}
.book .btn{grid-column:1/-1;width:100%;padding:14px 18px}
.book small{grid-column:1/-1;color:#B7C3C7;font-size:.82rem}
@media (max-width:860px){.book{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.book .btn{grid-column:1/-1}}

/* sections */
section{padding:72px 0}
section.alt{background:var(--stone)}
.intro{max-width:56ch;color:var(--muted);margin-top:14px}

/* rooms */
/* minmax(0,1fr): die Textspalte darf schmaler werden als ihr laengstes Wort, sonst war die Seite bei 861-910 px breiter als das Fenster (08.10.2026) */
.room{display:grid;grid-template-columns:400px minmax(0,1fr) auto;gap:32px;align-items:center;padding:28px 0;border-top:1px solid var(--line)}
.room:last-child{border-bottom:1px solid var(--line)}
.room img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:14px;background:var(--stone)}
.room .facts{display:flex;flex-wrap:wrap;gap:8px 18px;margin:12px 0 10px;font-size:.95rem}
.room .facts span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--leaf);margin-right:7px;vertical-align:1px}
.room .facts span.no::before{background:#C9C7BE}
.room .facts span.no{color:var(--muted)}
.room .price{font-family:Fraunces,serif;font-size:1.25rem;white-space:nowrap;text-align:right}
.room .price em{display:block;font-family:Karla;font-style:normal;font-size:.85rem;color:var(--muted);margin-bottom:10px}
@media (max-width:860px){.room{grid-template-columns:1fr}.room .price{text-align:left}}
/* Karussell je Zimmerart (25.09.2026, Dorian: „durch die Bilder durchblättern für jede kategorie") */
.karussell{position:relative;min-width:0}
.fotos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:14px;background:var(--stone);scrollbar-width:none;-webkit-tap-highlight-color:transparent}
.fotos::-webkit-scrollbar{display:none}
.room .fotos img{flex:0 0 100%;scroll-snap-align:start;border-radius:0;cursor:zoom-in}
.room .fotos img.hoch{object-fit:contain}
.karussell button{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:999px;background:rgba(255,255,255,.88);color:var(--ink,#1d2b44);font-size:24px;line-height:1;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.25);-webkit-tap-highlight-color:transparent}
.karussell button,#lb button{touch-action:manipulation}
.karussell .zur{left:10px}.karussell .vor{right:10px}
.karussell .zahl{position:absolute;right:10px;bottom:10px;background:rgba(10,20,35,.7);color:#fff;border-radius:999px;padding:2px 10px;font-size:.85rem}
/* dvh = die wirklich sichtbare Hoehe: am Handy ist 100vh hoeher als das Fenster, solange die Adressleiste da ist — der
   Schliessen-Knopf ragte oben 14 px hinaus, der Zaehler lag unten ausserhalb (08.10.2026, Pixel 8a und virtuelles Pixel) */
#lb{border:0;padding:0;background:rgba(10,20,35,.94);max-width:100vw;max-height:100vh;width:100vw;height:100vh;max-height:100dvh;height:100dvh}
#lb::backdrop{background:rgba(10,20,35,.94)}
#lb img{position:absolute;inset:0;margin:auto;width:94vw;height:86vh;object-fit:contain}
#lb button{position:absolute;-webkit-tap-highlight-color:transparent;background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:999px;width:48px;height:48px;font-size:26px;cursor:pointer}
#lb .zu{top:14px;right:14px}#lb .vor{right:14px;top:50%}#lb .zur{left:14px;top:50%}
#lb .zahl{position:absolute;bottom:12px;left:0;right:0;text-align:center;color:#fff;font-size:.95rem}

/* long stay */
.long{background:var(--wall);color:#fff;border-radius:24px;padding:48px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.long h2{color:#fff}
.long ul{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
.long li::before{content:"–";margin-right:8px}
.long .card{background:#fff;color:var(--ink);border-radius:16px;padding:26px}
.long .card strong{display:block;font-family:Fraunces,serif;font-size:1.5rem;font-weight:400;margin-bottom:6px}
.long .card p{color:var(--muted);font-size:.95rem}
@media (max-width:860px){.long{grid-template-columns:1fr;padding:30px}.long ul{grid-template-columns:1fr}}

/* honest list */
.honest{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:30px}
.honest ul{list-style:none;padding:0;margin:14px 0 0}
.honest li{padding:10px 0;border-top:1px solid var(--line)}
.honest .yes li::before{content:"✓";color:var(--leaf);font-weight:700;margin-right:12px}
.honest .no li::before{content:"–";color:var(--wall);font-weight:700;margin-right:12px}
@media (max-width:860px){.honest{grid-template-columns:1fr}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:30px;counter-reset:s}
.steps div{background:var(--paper);border-radius:16px;padding:22px;counter-increment:s}
.steps div::before{content:counter(s);font-family:Fraunces,serif;font-size:2.2rem;color:var(--neon);display:block;line-height:1;margin-bottom:10px}
.steps h3{font-size:1.15rem;margin-bottom:6px}
.steps p{font-size:.95rem;color:var(--muted);margin:0}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* gallery */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:30px}
.strip img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;background:var(--stone)}
.strip img:first-child{grid-column:span 2;grid-row:span 2}
@media (max-width:860px){.strip{grid-template-columns:1fr 1fr}.strip img:first-child{grid-column:1/-1;grid-row:auto;aspect-ratio:4/3}}

/* FAQ */
.faq details{border-top:1px solid var(--line);padding:14px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--neon);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);margin:10px 0 0;max-width:70ch}

/* getting here + footer */
.here{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:30px}
.here dl{margin:0}
.here dt{font-weight:600;margin-top:14px}
.here dd{margin:2px 0 0;color:var(--muted)}
/* Kartenbild vom eigenen Server (baue-karte.py), ganzes Feld = Link zu Google Maps – nur CSS, Waechter pruefe-karte.py */
.map{background:var(--line) url(../img/karte.webp) center/cover no-repeat;border-radius:16px;min-height:300px;display:grid;place-items:end center;color:var(--ink);text-align:center;padding:14px;position:relative;overflow:hidden}
.map p{margin:0;background:rgba(255,255,255,.93);padding:8px 16px;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.map a{font-weight:600}
.map a:first-of-type::after{content:"";position:absolute;inset:0}
.map a:last-of-type{position:relative;z-index:1}
.map::before{content:"© OpenStreetMap";position:absolute;top:8px;right:8px;font-size:.7rem;line-height:1;background:rgba(255,255,255,.85);color:#333;padding:4px 7px;border-radius:6px}
@media (max-width:860px){.here{grid-template-columns:1fr}}
footer{background:var(--ink);color:#C8D2D5;padding:48px 0;font-size:.95rem}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
footer a{color:#fff;text-decoration:none}
footer ul{list-style:none;padding:0;margin:8px 0 0}
footer li{margin:4px 0}
footer .brand{color:#fff}
footer .brand b{color:var(--neon)}
@media (max-width:860px){footer .cols{grid-template-columns:1fr}}

/* legal pages */
.legal{max-width:76ch;padding:48px 24px 80px;margin:0 auto}
.legal h1{font-size:clamp(2rem,4vw,3rem)}
.legal h2{font-size:1.5rem;margin:36px 0 10px}
.legal p,.legal li{color:var(--muted)}
.legal address{font-style:normal;color:var(--ink)}

/* Cookie-Hinweis (28.09.2026) — beide Knöpfe gleich gestaltet (Ablehnen so leicht wie Zustimmen) */
#bk-cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:50;max-width:520px;margin:0 auto;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 6px 24px rgba(0,0,0,.18);padding:16px 18px;font-size:15px;line-height:1.45}
#bk-cookie[hidden]{display:none}
#bk-cookie p{margin:0 0 12px}
#bk-cookie .wahl{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
#bk-cookie .wahl .btn{flex:1 1 140px;padding:10px 16px}
#bk-cookie a{color:var(--muted);font-size:14px}