/* Hotel & Restaurant Hexenschopf — Löffingen, Hochschwarzwald
   ------------------------------------------------------------------
   Thema: 1470 UND 2013. Das Haus ist das zweitälteste Gebäude Löffingens
   und steht unter Denkmalschutz; das Hotel darin wurde 2013 auf den alten
   Grundmauern neu gebaut. Genau diese Spannung trägt die Seite: alte
   Mauern, moderner Komfort. Deshalb eine Serife (Fraunces) über einer
   technischen Grotesk (Space Grotesk), und deshalb steht die Historie
   nicht am Ende, sondern als eigenes Kapitel.

   Abgrenzung zu den anderen Gastro- und Beherbergungsseiten im Bestand:
     Hotel Pension Gerono   — nüchtern, blau, Stadt
     Taverne Stadtblick     — dunkel, Weimar
     Toni's Hähnchengrill   — hell, Imbiss
   Hier: warmes Creme aus dem Bestand der Altseite, dazu das Weinrot, das
   dort schon 17 % der Fläche einnahm.

   Farbe: aus der Flächenmessung der Altseite — #fff8ee (56 %) und
   #8b4b5b (17 %). Beide sind übernommen, das Weinrot für Kontrast leicht
   vertieft. Nachgerechnet:
     #7a3a4a auf #fdf8f1 = 7,9:1    Akzenttext auf Creme
     #ffffff auf #7a3a4a = 8,3:1    gefüllte Knöpfe
     #241820 auf #fdf8f1 = 16,2:1   Fließtext
     #f5ece8 auf #2b1620 = 14,6:1   Text auf dunklem Band
     #e39aab auf #2b1620 =  7,7:1   Akzent auf dunklem Band

   Mobile first (Hausregel 3): Grundregeln beschreiben die schmale Ansicht.
*/

@font-face{font-family:FrauncesLokal;src:url("schrift/fraunces-700.woff2?v=1785936095") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:FrauncesLokal;src:url("schrift/fraunces-500.woff2?v=1785936095") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:GroteskLokal;src:url("schrift/space-grotesk-500.woff2?v=1785936095") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:GroteskLokal;src:url("schrift/space-grotesk-700.woff2?v=1785936095") format("woff2");font-weight:700;font-display:swap}

:root{
  --creme:#fdf8f1;
  --creme-2:#f6ece0;
  --linie:rgba(36,24,32,.15);
  --tinte:#241820;
  --gedaempft:#5c4a52;
  --wein:#7a3a4a;
  --wein-tief:#6e3242;
  --wein-hell:#e39aab;
  --dunkel:#2b1620;
  --dunkel-2:#1f0f17;
  --auf-dunkel:#f5ece8;
  --auf-dunkel-2:#cdb8c0;
  --r:3px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--creme);color:var(--tinte);
  font-family:GroteskLokal,system-ui,Arial,sans-serif;line-height:1.62;font-size:16px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3{font-family:FrauncesLokal,Georgia,serif;font-weight:700;line-height:1.06;
  margin:0;letter-spacing:-.012em;overflow-wrap:break-word}
h1{font-size:clamp(2.3rem,9vw,3.3rem)}
h2{font-size:clamp(1.85rem,6.6vw,2.5rem)}
h3{font-size:1.16rem;line-height:1.22}
p{margin:0;color:var(--gedaempft)}
h1+p,h2+p,h3+p{margin-top:.95rem}
strong{color:var(--tinte);font-weight:700}
.dunkel strong{color:var(--auf-dunkel)}

/* Augenbraue: gesperrte Versalien mit einer feinen Linie darunter. */
.marke{display:inline-block;font-family:GroteskLokal;font-weight:500;
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--wein);margin-bottom:.95rem;padding-bottom:.35rem;
  border-bottom:1px solid currentColor}
.dunkel .marke{color:var(--wein-hell)}

.sprung{position:absolute;left:-9999px;top:.5rem;background:var(--wein);
  color:#fff;padding:.7rem 1rem;z-index:40;border-radius:var(--r);font-weight:700}
.sprung:focus{left:.75rem}

/* ── Kopf ─────────────────────────────────────────────────────────── */
.kopf{position:sticky;top:0;z-index:30;background:rgba(253,248,241,.96);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--linie)}
.kopf__innen{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;row-gap:.15rem;column-gap:.5rem;
  max-width:1180px;margin:auto;padding:.25rem .85rem .3rem}
.wortmarke{order:1;flex:0 1 auto;min-width:0;font-family:FrauncesLokal,Georgia,serif;
  font-weight:700;font-size:1.06rem;line-height:1.08;letter-spacing:-.01em;
  display:flex;flex-direction:column;justify-content:center;min-height:34px}
.wortmarke em{display:none;font-style:normal;font-family:GroteskLokal;font-weight:500;
  font-size:.66rem;color:var(--gedaempft);letter-spacing:.1em;text-transform:uppercase}
.wege{order:3;flex:1 0 100%;display:flex;gap:.1rem;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.wege::-webkit-scrollbar{display:none}
.wege a{flex:0 0 auto;font-size:.82rem;color:var(--gedaempft);
  padding:.3rem .5rem;border-radius:var(--r);white-space:nowrap}
.wege a:hover{color:#fff;background:var(--wein)}
.ruf{order:2;flex:0 0 auto}

.knopf{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:.6rem 1.2rem;border-radius:var(--r);
  border:1px solid var(--wein);background:var(--wein);color:#fff;
  font-family:GroteskLokal;font-weight:500;font-size:.92rem;cursor:pointer}
.knopf:hover{background:var(--wein-tief);border-color:var(--wein-tief)}
.kopf .knopf{min-height:36px;padding:.3rem .85rem;font-size:.85rem}
.knopf--leer{background:transparent;color:var(--tinte);border-color:var(--linie)}
.knopf--leer:hover{background:rgba(36,24,32,.06);border-color:var(--tinte)}
.dunkel .knopf--leer,.hero__knoepfe .knopf--leer{color:var(--auf-dunkel);
  border-color:rgba(245,236,232,.34)}
.dunkel .knopf--leer:hover,.hero__knoepfe .knopf--leer:hover{background:rgba(245,236,232,.1)}

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero{position:relative;display:grid;align-items:end;min-height:72vh;
  overflow:hidden;background:var(--dunkel)}
.hero__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 46%}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(43,22,32,.96) 8%,rgba(43,22,32,.5) 58%,rgba(43,22,32,.34)),
             linear-gradient(90deg,rgba(43,22,32,.88) 4%,rgba(43,22,32,.4) 52%,transparent 86%)}
.hero__innen{position:relative;z-index:1;width:100%;max-width:1180px;
  margin-inline:auto;padding:5rem 1rem 2.8rem;color:var(--auf-dunkel)}
.hero .marke{color:var(--wein-hell)}
.hero p{font-size:1.06rem;max-width:38rem;color:var(--auf-dunkel-2)}
.hero__knoepfe{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.8rem}
.hero__knoepfe .knopf{flex:1 1 14rem}

/* ── Bänder ───────────────────────────────────────────────────────── */
.band{padding:3.5rem 1rem}
.band.creme-2{background:var(--creme-2)}
.band.dunkel{background:var(--dunkel);color:var(--auf-dunkel)}
.band.dunkel p{color:var(--auf-dunkel-2)}
.innen{max-width:1180px;margin:auto}
.zwei{display:grid;gap:1.6rem}
.zwei p{font-size:1.04rem}

/* ── Preistafeln (Zimmer, Wellness) ───────────────────────────────── */
.tafel{display:grid;gap:0;margin-top:2.2rem;border-top:2px solid var(--linie)}
.dunkel .tafel{border-color:rgba(245,236,232,.25)}
.posten{display:grid;gap:.35rem;padding:1.15rem 0;border-bottom:1px solid var(--linie)}
.dunkel .posten{border-color:rgba(245,236,232,.2)}
.posten__kopf{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:.3rem 1rem}
.posten h3{font-size:1.1rem}
.posten__preis{font-family:FrauncesLokal,Georgia,serif;font-weight:700;
  font-size:1.35rem;color:var(--wein);white-space:nowrap}
.dunkel .posten__preis{color:var(--wein-hell)}
.posten p{font-size:.92rem}
.posten__fein{font-size:.83rem;color:var(--gedaempft)}
.dunkel .posten__fein{color:var(--auf-dunkel-2)}

/* ── Speisekarte ──────────────────────────────────────────────────── */
.karte{margin-top:2.2rem;border-top:2px solid var(--linie)}
.dunkel .karte{border-color:rgba(245,236,232,.25)}
.karte details{border-bottom:1px solid var(--linie)}
.dunkel .karte details{border-color:rgba(245,236,232,.2)}
.karte summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;min-height:56px;padding:.9rem 0;
  font-family:FrauncesLokal,Georgia,serif;font-weight:700;font-size:1.16rem}
.karte summary::-webkit-details-marker{display:none}
.karte summary::after{content:"+";font-family:GroteskLokal;font-weight:500;
  font-size:1.5rem;line-height:1;color:var(--wein);flex:0 0 auto}
.dunkel .karte summary::after{color:var(--wein-hell)}
.karte details[open] summary::after{content:"–"}
.karte summary em{font-style:normal;font-family:GroteskLokal;font-weight:500;
  font-size:.8rem;color:var(--gedaempft);margin-left:auto;margin-right:.6rem}
.dunkel .karte summary em{color:var(--auf-dunkel-2)}
.gericht{display:grid;gap:.15rem;padding:.75rem 0;border-top:1px solid var(--linie)}
.dunkel .gericht{border-color:rgba(245,236,232,.14)}
.gericht__kopf{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:.2rem .9rem}
.gericht b{font-family:GroteskLokal;font-weight:500;font-size:.98rem}
.gericht i{font-style:normal;font-family:FrauncesLokal,Georgia,serif;font-weight:700;
  font-size:1rem;color:var(--wein);white-space:nowrap}
.dunkel .gericht i{color:var(--wein-hell)}
.gericht span{font-size:.86rem;color:var(--gedaempft)}
.dunkel .gericht span{color:var(--auf-dunkel-2)}
.karte__fuss{padding:1.2rem 0 0;font-size:.85rem;color:var(--gedaempft)}
.dunkel .karte__fuss{color:var(--auf-dunkel-2)}

/* ── Kacheln ──────────────────────────────────────────────────────── */
.kacheln{display:grid;gap:1.2rem;margin-top:2.2rem}
.kachel{border:1px solid var(--linie);border-radius:var(--r);padding:1.5rem;
  background:#fff}
.creme-2 .kachel{background:var(--creme)}
.dunkel .kachel{background:rgba(245,236,232,.05);border-color:rgba(245,236,232,.2)}
.kachel h3{margin-bottom:.6rem}
.kachel p{font-size:.95rem}

/* ── Bilder ───────────────────────────────────────────────────────── */
.reihe{display:grid;gap:1rem;margin-top:2.2rem}
.reihe figure{margin:0}
.reihe img{width:100%;height:220px;object-fit:cover;border-radius:var(--r)}
.reihe figcaption{margin-top:.55rem;font-size:.85rem;color:var(--gedaempft)}
.dunkel .reihe figcaption{color:var(--auf-dunkel-2)}
.streifen{display:block;height:40vw;max-height:380px;min-height:180px;overflow:hidden}
.streifen img{width:100%;height:100%;object-fit:cover;object-position:center 50%}
.bildpaar{display:grid;gap:1.2rem;margin-top:2.2rem}
.bildpaar figure{margin:0}
.bildpaar img{width:100%;height:44vw;max-height:340px;min-height:200px;
  object-fit:cover;border-radius:var(--r)}
.bildpaar figcaption{margin-top:.55rem;font-size:.85rem;color:var(--gedaempft)}
.dunkel .bildpaar figcaption{color:var(--auf-dunkel-2)}

.siegel{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:2rem}
.siegel img{height:72px;width:auto;border-radius:var(--r)}

/* ── Mitmach-Stationen ────────────────────────────────────────────── */
.station{margin-top:2.2rem;border:1px solid var(--linie);border-radius:var(--r);
  padding:1.4rem;background:#fff}
.creme-2 .station{background:var(--creme)}
.dunkel .station{background:rgba(245,236,232,.05);border-color:rgba(245,236,232,.2)}
.wahl{display:grid;gap:.55rem}
.wahl button{display:block;width:100%;text-align:left;min-height:50px;
  padding:.8rem 1rem;border:1px solid var(--linie);border-radius:var(--r);
  background:transparent;color:var(--tinte);font-family:GroteskLokal;font-weight:500;
  font-size:.96rem;cursor:pointer;line-height:1.35}
.dunkel .wahl button{color:var(--auf-dunkel);border-color:rgba(245,236,232,.25)}
.wahl button[aria-pressed="true"]{background:var(--wein);color:#fff;
  border-color:var(--wein);font-weight:500}
.antwort{margin-top:1.3rem;padding-top:1.3rem;border-top:1px solid var(--linie)}
.dunkel .antwort{border-color:rgba(245,236,232,.2)}
.antwort h3{margin-bottom:.55rem}
.antwort .knopf{margin-top:1.2rem}
.rechner{display:grid;gap:.1rem}
.rechner label{display:flex;flex-direction:row;align-items:center;gap:.75rem;
  min-height:50px;padding:.5rem 0;border-bottom:1px solid var(--linie);cursor:pointer}
.rechner input{width:22px;height:22px;flex:0 0 auto;accent-color:var(--wein)}
.rechner span{font-size:.95rem}
.summe{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.4rem 1rem;margin-top:1.2rem;padding-top:1.2rem;border-top:2px solid var(--linie)}
.summe b{font-family:GroteskLokal;font-weight:500;font-size:.98rem}
.summe em{font-style:normal;font-family:FrauncesLokal,Georgia,serif;font-weight:700;
  font-size:2rem;color:var(--wein)}
.fein{font-size:.85rem;color:var(--gedaempft);margin-top:1.1rem}
.dunkel .fein{color:var(--auf-dunkel-2)}

/* ── Kontakt ──────────────────────────────────────────────────────── */
.daten{display:grid;gap:0;margin-top:1.5rem;border-top:1px solid var(--linie)}
.daten p{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:.2rem 1.2rem;padding:.15rem 0;border-bottom:1px solid var(--linie)}
.daten b{font-family:GroteskLokal;font-weight:700;font-size:.96rem;color:var(--tinte)}
.daten span{color:var(--gedaempft);font-size:.9rem}
.daten b,.daten span,.daten a{display:flex;align-items:center;min-height:44px;margin:0}
.daten a{color:var(--wein);text-decoration:underline;text-underline-offset:3px}
.zeiten{display:grid;gap:0;margin-top:1.6rem;border-top:1px solid var(--linie)}
.zeiten div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.2rem 1rem;
  padding:.75rem 0;border-bottom:1px solid var(--linie)}
.zeiten b{font-family:GroteskLokal;font-weight:700;font-size:.96rem}
.zeiten span{color:var(--gedaempft);font-size:.9rem;text-align:right}
/* Der Kontaktblock steht auf dem dunklen Band — ohne diese Umschaltung
   stuende dunkle Schrift auf dunklem Grund (30 Kontrastbefunde am 05.08.). */
.dunkel .daten,.dunkel .daten p,.dunkel .zeiten,.dunkel .zeiten div{
  border-color:rgba(245,236,232,.22)}
.dunkel .daten b,.dunkel .zeiten b{color:var(--auf-dunkel)}
.dunkel .daten span,.dunkel .zeiten span{color:var(--auf-dunkel-2)}
.dunkel .daten a{color:var(--wein-hell)}
.dunkel label.feld{color:var(--auf-dunkel)}
.dunkel input,.dunkel select,.dunkel textarea{background:rgba(245,236,232,.07);
  border-color:rgba(245,236,232,.28);color:var(--auf-dunkel)}
.dunkel input::placeholder,.dunkel textarea::placeholder{color:var(--auf-dunkel-2)}
.formular{display:grid;gap:.9rem}
label.feld{display:grid;gap:.35rem;font-size:.9rem;font-weight:500}
input,select,textarea{width:100%;min-height:48px;padding:.7rem .85rem;font:inherit;
  font-size:1rem;border-radius:var(--r);border:1px solid var(--linie);
  background:#fff;color:var(--tinte)}
textarea{min-height:7.5rem;resize:vertical}

/* Karte: erst nach Zustimmung, deshalb kein Einwilligungsbanner. */
.karte-block{position:relative;min-height:320px;display:grid;
  background:var(--dunkel-2);color:var(--auf-dunkel)}
.karte-block iframe{border:0;width:100%;height:100%;min-height:320px;display:block}
.karte__sperre{align-self:center;justify-self:center;max-width:34rem;
  padding:2.4rem 1.2rem;text-align:center}
.karte__sperre p{font-size:.95rem;color:var(--auf-dunkel-2)}
.karte__aktionen{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;
  margin-top:1.2rem}
.karte__aktionen .knopf--leer{color:var(--auf-dunkel);border-color:rgba(245,236,232,.34)}

/* ── Fuß ──────────────────────────────────────────────────────────── */
.fuss{background:var(--dunkel);color:var(--auf-dunkel);padding:2.8rem 1rem;font-size:.92rem}
.fuss__innen{max-width:1180px;margin:auto;display:grid;gap:1.5rem}
.fuss p{color:var(--auf-dunkel-2)}
.fuss b{font-family:FrauncesLokal,Georgia,serif;font-weight:700;font-size:1.06rem;
  color:var(--auf-dunkel)}
.fuss a{color:var(--auf-dunkel-2);text-decoration:underline;text-underline-offset:3px}
.fuss a:hover{color:var(--wein-hell)}

/* ── Rechtstexte ──────────────────────────────────────────────────── */
.rechtstext{max-width:44rem}
.rechtstext h1{font-size:clamp(2rem,7.5vw,2.7rem);margin-bottom:.5rem}
.rechtstext h2{font-size:1.2rem;margin:2.2rem 0 .5rem}
.rechtstext p{margin-bottom:.9rem}
.hinweis{margin-top:2.6rem;border:1px solid var(--wein);border-left-width:4px;
  background:rgba(122,58,74,.07);padding:1.2rem;border-radius:var(--r)}
.hinweis strong{display:block;font-family:FrauncesLokal,Georgia,serif;font-weight:700;
  font-size:1.15rem;color:var(--wein-tief);margin-bottom:.5rem}
.hinweis p:last-child{margin-bottom:0}

/* ══ ab 620 px ════════════════════════════════════════════════════ */
@media (min-width:620px){
  .kacheln{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .reihe{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .bildpaar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .formular{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .formular .weit{grid-column:1/-1}
  .fuss__innen{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hero__knoepfe .knopf{flex:0 0 auto}
}

/* ══ ab 760 px: Kopf einreihig ════════════════════════════════════ */
@media (min-width:760px){
  .kopf__innen{flex-wrap:nowrap;padding:.45rem 1.4rem;column-gap:1.2rem}
  .wortmarke{order:0;font-size:1.16rem}
  .wortmarke em{display:block}
  .wege{order:0;flex:1 1 auto;justify-content:center;overflow:visible}
  .wege a{font-size:.85rem;padding:.45rem .65rem}
  .ruf{order:0}
  .kopf .knopf{min-height:42px;padding:.5rem 1rem;font-size:.87rem}
  .band{padding:5rem 1.4rem}
  .hero__innen{padding:7rem 1.4rem 4rem}
  .fuss{padding:3.4rem 1.4rem}
  .kacheln{grid-template-columns:repeat(3,1fr)}
  .reihe{grid-template-columns:repeat(4,1fr)}
}

/* ══ ab 1000 px ═══════════════════════════════════════════════════ */
@media (min-width:1000px){
  h1{font-size:clamp(2.9rem,5vw,4.2rem)}
  h2{font-size:clamp(2.1rem,3.4vw,2.9rem)}
  .hero{min-height:80vh}
  /* Ueberschrift und Text stehen UNTEREINANDER (Hausregel 15). Nur echte
     Blockpaare — Kontaktdaten und Formular — stehen nebeneinander. */
  .zwei{grid-template-columns:minmax(0,1fr);gap:1.2rem}
  .zwei > div > p{max-width:70ch}
  .zwei.gespann{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.6rem;align-items:start}
  .band{padding:6rem 2rem}
  .hero__innen{padding:8rem 2rem 5rem}
  .posten{grid-template-columns:minmax(0,24rem) minmax(0,1fr);gap:.6rem 2.4rem;
    align-items:start}
  .posten__kopf{grid-column:1;flex-direction:column;align-items:flex-start}
  .posten p,.posten__fein{grid-column:2}
  .gericht{grid-template-columns:minmax(0,1fr)}
}

/* Hausregel 9: zwischen Kontakt, Karte und Fuss bleibt keine Flaeche stehen. */
.band--anschluss{padding-bottom:0}
.band--anschluss > .innen{padding-bottom:3.5rem}

/* Lange deutsche Woerter (Frühstücksbuffet, Fussreflexzonentherapie)
   liefen auf 320 px aus der Seite. */
@media (max-width:719.98px){
  h1,h2,h3,p,.gericht b,.wahl button{hyphens:auto}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}