/* ═══════════════════════════════════════════════════════════════════
   zimmer-in-biel.ch — Stylesheet

   GESTALTUNGSKONZEPT
   Warmes Papierbeige, tiefe Tinte, ein Terrakotta aus dem Logo. Harte
   schwarze Linien gliedern die Seite in Baender von Rand zu Rand; darin
   liegen weisse Karten mit weichen Ecken. Der Preis ist ueberall das
   groesste Element — wer wenig Geld hat, sucht zuerst die Zahl.

   REGELN BEIM WEITERBAUEN
     · Zielgruppe sind Menschen mit knappem Budget. Keine Gestaltung,
       die Wohlstand suggeriert; keine Gestaltung, die herablassend wirkt.
     · Preise: Terrakotta, fett, gross. Nie kleiner als die Ueberschrift
       daneben.
     · Harte Kante (1.5px Tinte) = Abschnittsgrenze.
       Haarlinie (0.5px)          = Trennung innerhalb eines Abschnitts.
     · Terrakotta ist Signalfarbe: Preis, Handlung, Vorteil. Sonst nichts.
     · Kein Fachjargon in Labels. Kurze Saetze, grosse Schrift.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ──────────────────────────────────────────────────── */
:root{
  --paper:     #F7F1EA;   /* Seitenflaeche, Ton aus dem Logo        */
  --paper-2:   #EFE6D9;   /* zweite Flaeche                        */
  --card:      #FFFFFF;   /* Karten                                */
  --ink:       #2C2C2A;   /* Text und harte Linien                 */
  --ink-70:    #55534E;   /* Nebentext                             */
  --ink-45:    #6B685F;   /* Metatext, AA-fest auf beiden Flaechen */
  --rule:      #CFC5B4;   /* Haarlinie                             */
  --signal:    #D85A30;   /* Terrakotta: Preis, Handlung, Vorteil  */
  --signal-dk: #993C1D;   /* Terrakotta, wenn es Text tragen muss  */
  --signal-50: #FAECE7;   /* Terrakotta als Flaeche                */
  --signal-20: #F0997B;   /* Trennlinie auf Terrakotta-Flaeche     */
  --signal-90: #4A1B0C;   /* Text auf --signal-50                  */
  --green:     #3B6D11;   /* nur Status „frei"                     */
  --green-50:  #EAF3DE;
  --green-90:  #173404;
  --amber-50:  #FAEEDA;   /* nur Status „bald frei"                */
  --amber-90:  #412402;
  --red:       #A6291B;   /* nur Fehlermeldungen                   */
  --dark:      #2C2C2A;   /* dunkle Baender und Fusszeile          */

  --font-display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-body:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"JetBrains Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;

  --hair:.5px solid var(--rule);
  --edge:1.5px solid var(--ink);

  --r-card:12px;
  --r-ctrl:8px;
  --r-pill:20px;

  --gutter:clamp(1.25rem,4vw,4rem);
  --maxw:1240px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;color:var(--ink);background:var(--paper);
  font-family:var(--font-body);font-size:17px;line-height:1.62;
  font-weight:400;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--ink);text-decoration-color:var(--signal);
  text-decoration-thickness:2px;text-underline-offset:3px;}
a:hover{text-decoration-color:var(--ink);}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;}
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}

.skip{position:absolute;left:-9999px;background:var(--ink);color:var(--paper);
  padding:.6rem 1rem;font-size:.85rem;border-radius:var(--r-ctrl);z-index:99;}
.skip:focus{left:.5rem;top:.5rem;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;}

/* ── 2. TYPOGRAFIE ──────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;margin:0;
  line-height:1.08;letter-spacing:-.03em;}

/* Kleines Label ueber einer Ueberschrift. Satzschreibung, nicht schreiend. */
.eyebrow{display:block;font-size:.78rem;font-weight:500;letter-spacing:.09em;
  color:var(--signal-dk);margin:0 0 .9rem;}

.section-title{font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.06;
  letter-spacing:-.035em;margin:0 0 1.2rem;max-width:20ch;}
/* Hervorhebung: Wort in Terrakotta, kein Textmarker */
.section-title mark{background:none;color:var(--signal);}
.section-lead{font-size:clamp(1rem,1.4vw,1.12rem);max-width:58ch;
  margin:0 0 2.2rem;color:var(--ink-70);}

/* ── 3. SCHALTFLAECHEN ──────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--font-body);font-size:.95rem;font-weight:700;
  letter-spacing:-.01em;text-decoration:none;
  background:var(--signal);color:#FFF6F2;border:1.5px solid var(--signal);
  border-radius:var(--r-ctrl);padding:.75rem 1.35rem;cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease;}
.btn:hover,.btn:focus-visible{background:var(--signal-dk);border-color:var(--signal-dk);}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.btn--dark{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.btn--dark:hover{background:var(--signal);border-color:var(--signal);color:#FFF6F2;}
.btn--block{display:flex;width:100%;}

/* ── 4. KOPFLEISTE UND NAVIGATION ───────────────────────────────── */
.utility{background:var(--ink);color:var(--paper);font-size:.8rem;}
.utility__row{display:flex;flex-wrap:wrap;gap:.25rem 2rem;
  justify-content:space-between;padding-block:.5rem;}
.utility a{color:var(--signal-20);text-decoration:none;font-weight:500;}
.utility a:hover{text-decoration:underline;}

.site-header{position:sticky;top:0;z-index:50;background:var(--paper);
  border-bottom:var(--edge);}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.4rem;
  padding-block:.8rem;}
.brand{font-family:var(--font-display);font-weight:700;font-size:1.12rem;
  letter-spacing:-.035em;text-decoration:none;color:var(--ink);
  margin-right:auto;display:inline-flex;align-items:center;gap:.55rem;}
.brand__mark{display:grid;place-items:center;width:30px;height:30px;flex:none;}
.brand__mark img{width:30px;height:30px;object-fit:contain;}
/* Zweiter Teil der Wortmarke in Terrakotta, wie im Logo */
.brand span{color:var(--signal);font-weight:700;}

.nav__links{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem 1.3rem;
  list-style:none;margin:0;padding:0;}
.nav__links a{font-size:.92rem;font-weight:500;color:var(--ink-70);
  text-decoration:none;padding:.3rem 0;display:block;
  border-bottom:2px solid transparent;}
.nav__links a:hover,.nav__links a:focus-visible{color:var(--ink);
  border-bottom-color:var(--signal);}
.nav__links a.is-active{color:var(--ink);border-bottom-color:var(--signal);}
.nav__links a.nav__cta{color:var(--paper);background:var(--ink);
  border:1.5px solid var(--ink);border-radius:var(--r-ctrl);
  padding:.5rem 1rem;font-weight:700;}
.nav__links a.nav__cta:hover{background:var(--signal);border-color:var(--signal);
  color:#FFF6F2;}

.nav__toggle{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;border:1.5px solid var(--ink);background:transparent;
  border-radius:var(--r-ctrl);cursor:pointer;padding:0;}
.nav__toggle span{display:block;width:18px;height:2px;background:var(--ink);
  margin:0 auto;transition:.25s;}
.nav.is-open .nav__toggle span:first-child{transform:translateY(7px) rotate(45deg);}
.nav.is-open .nav__toggle span:nth-child(2){opacity:0;}
.nav.is-open .nav__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Sprachumschalter als Pillen — in Biel ein Hauptbedienelement, kein Detail */
.lang-switch{display:inline-flex;gap:.3rem;align-items:center;}
.lang-switch a{font-size:.78rem;font-weight:500;text-decoration:none;
  color:var(--ink-45);text-transform:uppercase;letter-spacing:.04em;
  padding:.25rem .55rem;border-radius:var(--r-pill);}
.lang-switch a:hover{color:var(--ink);background:var(--paper-2);}
.lang-switch a.is-active{color:var(--paper);background:var(--ink);}

/* ── 5. HERO ────────────────────────────────────────────────────── */
.hero{padding-block:clamp(1.4rem,3vw,2.4rem) 0;}
.hero__frame{position:relative;display:grid;
  grid-template-columns:minmax(320px,1.15fr) 1fr;
  border:var(--edge);border-radius:var(--r-card);overflow:hidden;
  background:var(--paper);}

.hero__block{order:1;padding:clamp(1.6rem,3vw,2.8rem);
  border-right:var(--edge);display:flex;flex-direction:column;
  justify-content:center;}
.hero__title{font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.02;
  letter-spacing:-.045em;margin:0 0 1.1rem;}
.hero__title em{font-style:normal;color:var(--signal);}
.hero__lead{margin:0;font-size:1.05rem;color:var(--ink-70);max-width:44ch;}
.hero__lead b{color:var(--ink);font-weight:700;}

.hero__img{order:2;min-height:clamp(280px,34vw,470px);
  background-color:var(--paper-2);
  background-image:var(--header-image,url("/images/hero-biel.webp"));
  background-size:cover;background-position:center;}

/* Kenndaten als Merkmalspillen unter dem Titel */
.chips{list-style:none;margin:1.6rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.5rem;}
.chips li{display:inline-flex;align-items:center;gap:.45rem;
  background:var(--card);border:.5px solid var(--rule);
  border-radius:var(--r-pill);padding:.35rem .85rem;
  font-size:.85rem;color:var(--ink);}
.chips li::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--signal);flex:none;}
.chips li:nth-child(1)::before{background:var(--green);}

/* Preisstempel unten rechts im Bild */
.hero__badge{position:absolute;right:0;bottom:0;z-index:3;
  background:var(--card);color:var(--ink);
  border-left:var(--edge);border-top:var(--edge);
  border-top-left-radius:var(--r-card);
  padding:.8rem 1.2rem;display:flex;align-items:center;gap:.8rem;}
.hero__badge b{font-family:var(--font-display);font-weight:700;
  font-size:1.9rem;line-height:.9;letter-spacing:-.045em;color:var(--signal);}
.hero__badge span{font-size:.78rem;line-height:1.3;color:var(--ink-70);}

/* ── 6. DREI SCHRITTE ───────────────────────────────────────────── */
.progress{border-bottom:var(--edge);padding-block:clamp(1.6rem,3.5vw,2.4rem);
  background:var(--paper);}
.progress__head{font-size:.88rem;font-weight:500;color:var(--ink-45);
  margin:0 0 1.6rem;}
.track{display:flex;list-style:none;margin:0;padding:0;gap:0;}
.pstep{flex:1;position:relative;padding:0 1.5rem 0 0;}
.pstep::before{content:"";position:absolute;left:0;right:0;top:19px;height:2px;
  background:var(--rule);}
.pstep--done::before{background:var(--signal);}
.pstep:last-child::before{right:1.5rem;}
.pstep__dot{position:relative;z-index:2;width:38px;height:38px;
  margin:0 0 1rem;border:1.5px solid var(--ink);background:var(--paper);
  border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-size:.95rem;font-weight:700;}
.pstep--done .pstep__dot{background:var(--signal);border-color:var(--signal);
  color:#FFF6F2;}
.pstep__check{width:18px;height:18px;display:block;}
.pstep__label{font-family:var(--font-display);font-weight:700;
  font-size:1.05rem;letter-spacing:-.03em;line-height:1.15;display:inline-block;}
.pstep__state{display:inline-block;margin-top:.3rem;font-size:.8rem;
  color:var(--ink-45);}
.pstep--done .pstep__state{color:var(--signal-dk);font-weight:500;}

/* ── 7. VORTEILSBAND ────────────────────────────────────────────── */
/* Steht direkt unter den drei Schritten und damit VOR der Zimmerliste.
   Einziges eingefaerbtes Band der Seite — die Aussagen, wegen denen
   jemand ueberhaupt anruft. */
.trust{border-bottom:var(--edge);background:var(--signal-50);}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);
  list-style:none;margin:0;padding:0;}
.trust__item{display:block;padding:clamp(1.3rem,2.4vw,1.9rem) clamp(1rem,2vw,1.6rem);
  border-left:.5px solid var(--signal-20);}
.trust__item:first-child{border-left:0;padding-left:0;}
.trust__big{display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1;letter-spacing:-.05em;
  margin-bottom:.6rem;white-space:nowrap;color:var(--signal);}
/* Gesicht statt Zahl: gleiche optische Hoehe, gleiche Farbe */
.trust__face{display:block;width:clamp(32px,3.4vw,42px);height:auto;
  margin-bottom:.6rem;color:var(--signal);}
.trust__txt b{display:block;font-family:var(--font-display);font-size:1.02rem;
  font-weight:700;letter-spacing:-.025em;line-height:1.2;
  margin-bottom:.4rem;color:var(--signal-90);}
.trust__txt span{display:block;font-size:.92rem;color:var(--signal-dk);line-height:1.5;}

/* ── 8. ABSCHNITTE ──────────────────────────────────────────────── */
.section{padding-block:clamp(3rem,6vw,5rem);}
.section--tint{background:var(--paper-2);border-block:var(--edge);}
.section--green{background:var(--dark);color:var(--paper);border-block:var(--edge);}
.section--green .eyebrow{color:var(--signal-20);}
.section--green .section-title{color:var(--paper);}
.section--green .section-title mark{color:var(--signal-20);}
.section--green .section-lead{color:rgba(247,241,234,.72);}
.section--green a{color:var(--paper);text-decoration-color:var(--signal);}

/* ── 9. ZIMMER ──────────────────────────────────────────────────── */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.8rem;padding:0;
  list-style:none;}
.filter{font-family:var(--font-body);font-size:.88rem;font-weight:500;
  cursor:pointer;background:var(--card);color:var(--ink-70);
  border:.5px solid var(--rule);border-radius:var(--r-pill);
  padding:.4rem 1rem;transition:background .15s ease,color .15s ease;}
.filter:hover{color:var(--ink);border-color:var(--ink);}
.filter.is-active{background:var(--ink);border-color:var(--ink);color:var(--paper);}

.rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:1rem;}
.rooms__empty{grid-column:1/-1;padding:1.6rem;max-width:60ch;color:var(--ink-70);
  background:var(--card);border:.5px solid var(--rule);border-radius:var(--r-card);}

.room-card{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  background:var(--card);border:.5px solid var(--rule);border-radius:var(--r-card);
  overflow:hidden;transition:border-color .18s ease,transform .18s ease;}
.room-card:hover{border-color:var(--ink);transform:translateY(-2px);}
.room-card.is-reserved{opacity:.55;}
.room-card__bar{display:flex;justify-content:space-between;gap:.75rem;
  align-items:center;padding:.6rem 1rem;
  font-size:.78rem;font-weight:500;color:var(--ink-45);}
/* Status als Pille, nicht als farbige Leiste */
.room-card__bar span:last-child{display:inline-flex;align-items:center;
  background:var(--paper-2);color:var(--ink-70);
  border-radius:var(--r-pill);padding:.2rem .7rem;}
.room-card__bar.is-free span:last-child{background:var(--green-50);color:var(--green-90);}
.room-card__bar.is-reserved span:last-child{background:var(--amber-50);color:var(--amber-90);}

.room-card__media{aspect-ratio:4/3;overflow:hidden;background:var(--paper-2);}
.room-card__media img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);}
.room-card:hover .room-card__media img{transform:scale(1.04);}
.room-card__body{padding:1rem 1.1rem 1.2rem;flex:1;display:flex;flex-direction:column;}
.room-card__title{font-family:var(--font-display);font-weight:700;font-size:1.25rem;
  letter-spacing:-.035em;line-height:1.08;margin:0 0 .15rem;}
.room-card__where{font-size:.85rem;color:var(--ink-45);margin:0 0 .8rem;}
.room-card__desc{font-size:.92rem;color:var(--ink-70);margin:0 0 1rem;}
.room-card__features{list-style:none;margin:0 0 1.2rem;padding:0;
  display:flex;flex-wrap:wrap;gap:.4rem;
  font-size:.78rem;color:var(--ink-70);}
.room-card__features li{background:var(--paper);border-radius:var(--r-pill);
  padding:.2rem .65rem;}
.room-card__foot{margin-top:auto;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:.5px solid var(--rule);padding-top:.9rem;}
.room-card__price{font-family:var(--font-display);font-weight:700;font-size:1.6rem;
  letter-spacing:-.045em;line-height:1;color:var(--signal);}
.room-card__price small{display:block;font-family:var(--font-body);font-size:.72rem;
  font-weight:400;letter-spacing:0;color:var(--ink-45);margin-top:.35rem;}
.room-card .btn{padding:.5rem .95rem;font-size:.85rem;}

/* ── 10. LEISTUNGEN ─────────────────────────────────────────────── */
.incl{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:.6rem;list-style:none;padding:0;margin:0;}
.incl li{padding:.7rem 1rem .7rem 2.5rem;position:relative;font-size:.96rem;
  background:var(--card);border-radius:var(--r-ctrl);}
/* Haken statt Kaestchen */
.incl li::before{content:"";position:absolute;left:1rem;top:1.25rem;
  width:9px;height:5px;border-left:2px solid var(--signal);
  border-bottom:2px solid var(--signal);transform:rotate(-45deg);}

/* ── 10a. QUARTIERUEBERSICHT ────────────────────────────────────── */
.quarters-block{margin:1.8rem 0 2.4rem;padding-bottom:2.2rem;
  border-bottom:.5px solid var(--rule);}
.quarters-block__head{font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.2rem,2.2vw,1.55rem);letter-spacing:-.035em;line-height:1.1;
  margin:0 0 .4rem;}
.quarters-block__lead{font-size:.96rem;color:var(--ink-70);margin:0;max-width:62ch;}
.quarters{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:.7rem;list-style:none;padding:0;margin:1.3rem 0 0;}
.quarters li{display:flex;}
.quarters a{display:flex;flex-direction:column;gap:.35rem;width:100%;
  padding:1rem 1.1rem;text-decoration:none;color:inherit;
  background:var(--card);border:.5px solid var(--rule);border-radius:var(--r-card);
  transition:border-color .18s ease;}
.quarters a:hover,.quarters a:focus-visible{border-color:var(--ink);}
.quarters__name{font-family:var(--font-display);font-weight:700;font-size:1.05rem;
  letter-spacing:-.03em;line-height:1.15;}
.quarters__meta{font-size:.8rem;color:var(--ink-45);}
.quarters__price{font-size:.85rem;font-weight:500;color:var(--signal);
  margin-top:auto;padding-top:.4rem;}

/* ── 11. LAGE (dunkles Band) ────────────────────────────────────── */
.areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1rem;}
.areas__card{padding:1.3rem 1.4rem;background:rgba(247,241,234,.06);
  border-radius:var(--r-card);}
.areas__card h3{font-size:.95rem;font-weight:700;letter-spacing:-.02em;
  color:var(--signal-20);margin:0 0 .9rem;}
.areas__list{list-style:none;margin:0;padding:0;font-size:.9rem;}
.areas__list li{display:flex;justify-content:space-between;gap:1rem;
  padding:.4rem 0;border-bottom:.5px solid rgba(247,241,234,.14);}
.areas__list li b{font-weight:700;color:rgba(247,241,234,.72);}
.areas__card p{margin:0 0 .9rem;font-size:.93rem;color:rgba(247,241,234,.75);}

/* ── 12. ABLAUF ─────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1rem;}
.step{padding:1.4rem 1.5rem;background:var(--card);border-radius:var(--r-card);
  border:.5px solid var(--rule);}
.step__no{width:34px;height:34px;border:1.5px solid var(--signal);
  color:var(--signal);display:grid;place-items:center;
  font-family:var(--font-display);font-size:.95rem;font-weight:700;
  margin-bottom:1rem;border-radius:50%;background:none;}
.step:nth-child(1) .step__no{background:var(--signal);color:#FFF6F2;}
.step h2,.step h3{font-size:1.15rem;margin:0 0 .6rem;letter-spacing:-.03em;}
.step p{margin:0;color:var(--ink-70);font-size:.95rem;}

/* ── 13. FAQ ────────────────────────────────────────────────────── */
.faq{max-width:80ch;}
.faq details{background:var(--card);border:.5px solid var(--rule);
  border-radius:var(--r-card);margin-bottom:.6rem;}
.faq details[open]{border-color:var(--ink);}
.faq summary{cursor:pointer;list-style:none;padding:1rem 3rem 1rem 1.2rem;
  position:relative;font-family:var(--font-display);font-weight:700;
  font-size:1.05rem;letter-spacing:-.03em;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"";position:absolute;right:1.2rem;top:1.4rem;
  width:13px;height:13px;
  background:linear-gradient(var(--signal),var(--signal)) center/13px 2px no-repeat,
  linear-gradient(var(--signal),var(--signal)) center/2px 13px no-repeat;
  transition:transform .2s ease;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq p{margin:0 1.2rem 1.2rem;max-width:66ch;color:var(--ink-70);}

/* ── 14. FORMULAR ───────────────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:minmax(280px,1.25fr) minmax(260px,.75fr);
  gap:1.2rem;align-items:start;}
.contact-grid > *{background:var(--card);border:.5px solid var(--rule);
  border-radius:var(--r-card);padding:clamp(1.3rem,2.5vw,2rem);}
.form-card{display:grid;gap:1.3rem;}
.field label,.field .field__label{display:block;font-size:.82rem;font-weight:500;
  margin-bottom:.35rem;color:var(--ink-70);}

.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea{
  width:100%;font-family:var(--font-body);font-size:1rem;padding:.65rem .8rem;
  border:1px solid var(--rule);border-radius:var(--r-ctrl);
  background-color:var(--paper);color:var(--ink);
  transition:background-color .15s ease,border-color .15s ease;}
.field input:not([type=checkbox]):not([type=radio]):hover,
.field select:hover,.field textarea:hover{border-color:var(--ink-45);}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-45);opacity:1;}
.field select{appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
  linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 16px) calc(50% - 2px),calc(100% - 11px) calc(50% - 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:2.2rem;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;background-color:#FFF;border-color:var(--signal);
  box-shadow:0 0 0 3px var(--signal-50);}
.field textarea{min-height:110px;resize:vertical;}
/* Fehlende Felder: roter Rahmen, roter Grund, rotes Label und ein Satz
   darunter. Farbe allein reicht nicht — der Text sagt, was zu tun ist. */
.field input.is-invalid,.field select.is-invalid,.field textarea.is-invalid{
  border-color:var(--red);border-width:1.5px;background-color:rgba(166,41,27,.05);}
.field.is-invalid > label,.field.is-invalid > .field__label{color:var(--red);font-weight:700;}
.field.is-invalid .radio-group{border-left:3px solid var(--red);
  padding-left:.7rem;margin-left:-.1rem;}
.field__error{margin:.4rem 0 0;font-size:.85rem;font-weight:500;color:var(--red);}
/* Kleiner roter Punkt als Marke vor der Meldung — keine Ikonografie,
   die auf Schriftgroesse oder Icon-Font angewiesen waere. */
.field__error::before{content:"";display:inline-block;width:8px;height:8px;
  margin-right:.45rem;vertical-align:1px;border-radius:50%;background:var(--red);}
.form-error-summary{margin:0;padding:.8rem 1rem;border-radius:var(--r-ctrl);
  background:rgba(166,41,27,.08);border:1.5px solid var(--red);
  color:var(--red);font-size:.92rem;font-weight:500;}
.form-error-summary[hidden]{display:none;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.form-row--three{grid-template-columns:1fr 1fr 1fr;}
.radio-group,.checkbox-group{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;}
.checkbox,.radio{display:inline-flex;align-items:center;gap:.5rem;
  font-size:.94rem;cursor:pointer;color:var(--ink-70);}
.checkbox input,.radio input{width:17px;height:17px;flex:0 0 17px;margin:0;
  accent-color:var(--signal);cursor:pointer;}
#datenschutz-label{display:grid;grid-template-columns:17px 1fr;align-items:start;gap:.6rem;}
#datenschutz-label.is-invalid{color:var(--red);}
.form-note{font-size:.85rem;line-height:1.6;color:var(--ink-45);}
.form-success{display:none;border:1.5px solid var(--signal);background:var(--signal-50);
  border-radius:var(--r-card);padding:1.4rem;}
.form-success strong{display:block;font-family:var(--font-display);font-weight:700;
  font-size:1.25rem;letter-spacing:-.03em;margin-bottom:.4rem;color:var(--signal-90);}
.form-success p{margin:0;color:var(--signal-dk);}

.card h3{font-family:var(--font-display);font-size:1.05rem;font-weight:700;
  letter-spacing:-.03em;margin:0 0 1.1rem;color:var(--ink);}
.card dl{margin:0;}
.card dt{font-size:.8rem;color:var(--ink-45);margin-top:1.1rem;}
.card dd{margin:.2rem 0 0;font-size:1.05rem;font-weight:500;}

/* ── 15. DETAILSEITE ────────────────────────────────────────────── */
.breadcrumb{font-size:.82rem;color:var(--ink-45);padding-block:1.1rem;
  border-bottom:.5px solid var(--rule);}
.breadcrumb a{color:var(--ink-45);text-decoration:none;}
.breadcrumb a:hover{color:var(--ink);}

.detail-hero{display:grid;grid-template-columns:1.5fr 1fr;gap:1.5rem;
  padding-block:1.8rem;}
.gallery__main{overflow:hidden;background:var(--paper-2);aspect-ratio:3/2;
  border-radius:var(--r-card);}
.gallery__main img{width:100%;height:100%;object-fit:cover;}
.gallery__thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;margin-top:.5rem;}
.gallery__thumb{aspect-ratio:4/3;overflow:hidden;cursor:pointer;
  background:var(--paper-2);border-radius:var(--r-ctrl);
  border:1.5px solid transparent;opacity:.65;transition:opacity .2s;}
.gallery__thumb:hover{opacity:1;}
.gallery__thumb img{width:100%;height:100%;object-fit:cover;}
.gallery__thumb.is-active{opacity:1;border-color:var(--signal);}

.detail-summary{position:sticky;top:96px;}
.detail-summary h1{font-size:clamp(1.6rem,2.6vw,2.1rem);margin:.5rem 0 .2rem;}
.detail-price{font-family:var(--font-display);font-weight:700;font-size:2.5rem;
  letter-spacing:-.05em;line-height:1;margin:1.2rem 0;color:var(--signal);}
.detail-price small{display:block;font-family:var(--font-body);font-size:.8rem;
  font-weight:400;letter-spacing:0;color:var(--ink-45);margin-top:.45rem;}

/* Kostenaufstellung: macht „ein Preis" nachpruefbar */
.costs{background:var(--card);border:1.5px solid var(--ink);
  border-radius:var(--r-card);padding:1.1rem 1.2rem;margin:0 0 1.6rem;}
.costs__head{font-size:.8rem;font-weight:500;letter-spacing:.07em;
  color:var(--signal-dk);margin:0 0 .8rem;}
.costs dl{margin:0;display:grid;grid-template-columns:1fr auto;font-size:.92rem;}
.costs dt{padding:.42rem 0;border-top:.5px solid var(--rule);color:var(--ink-70);}
.costs dd{padding:.42rem 0;border-top:.5px solid var(--rule);margin:0;text-align:right;}
.costs dt:first-of-type,.costs dd:first-of-type{border-top:0;}
.costs .is-zero{color:var(--green);font-weight:500;}
.costs__total{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;border-top:1.5px solid var(--ink);margin-top:.6rem;padding-top:.7rem;}
.costs__total span{font-size:.9rem;font-weight:700;}
.costs__total b{font-family:var(--font-display);font-weight:700;font-size:1.9rem;
  letter-spacing:-.05em;line-height:1;color:var(--signal);}

.detail-specs{list-style:none;padding:0;margin:0 0 1.6rem;font-size:.92rem;}
.detail-specs li{display:flex;justify-content:space-between;gap:.8rem;
  padding:.5rem 0;border-bottom:.5px solid var(--rule);}
.detail-specs .k{color:var(--ink-45);}
.detail-specs .v{font-weight:500;}

.detail-body{display:grid;grid-template-columns:1.5fr 1fr;gap:1.5rem;
  padding-bottom:2.5rem;}
.amenity-list{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:1fr 1fr;gap:.4rem;}
.amenity-list li{display:flex;gap:.6rem;align-items:center;font-size:.94rem;
  padding:.5rem .8rem;background:var(--card);border-radius:var(--r-ctrl);
  color:var(--ink-70);}
.amenity-list li::before{content:"";width:8px;height:5px;flex:none;
  border-left:2px solid var(--signal);border-bottom:2px solid var(--signal);
  transform:rotate(-45deg);}
.aside-card{background:var(--dark);color:var(--paper);padding:1.6rem;
  border-radius:var(--r-card);margin:0;}
.aside-card h3{color:var(--paper);margin:0 0 .6rem;font-size:1.15rem;}
.aside-card p{margin:0 0 1.2rem;color:rgba(247,241,234,.75);font-size:.94rem;}
.aside-card .btn{background:var(--signal);border-color:var(--signal);color:#FFF6F2;}
.aside-card .btn:hover{background:var(--paper);border-color:var(--paper);color:var(--ink);}

/* ── 16. FUSSZEILE ──────────────────────────────────────────────── */
.wave,.footrule{display:none;}
.site-footer{background:var(--dark);color:var(--paper);
  padding-block:2.6rem 1.4rem;border-top:var(--edge);}
.site-footer a{color:var(--paper);text-decoration-color:var(--signal);}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:2rem;}
.site-footer .brand{color:var(--paper);margin-bottom:.9rem;}
.site-footer .brand span{color:var(--signal-20);}
.site-footer p{font-size:.9rem;max-width:34ch;color:rgba(247,241,234,.72);}
.footer-col h4{font-family:var(--font-display);font-size:.95rem;font-weight:700;
  letter-spacing:-.02em;color:var(--signal-20);margin:0 0 .9rem;}
.footer-col ul{list-style:none;margin:0;padding:0;}
.footer-col li{margin-bottom:.4rem;font-size:.9rem;}
.footer-contact div{margin-bottom:.4rem;font-size:.95rem;}
.footer-claim{font-size:.85rem;color:rgba(247,241,234,.75);padding-top:1.4rem;
  margin-top:1.8rem;border-top:.5px solid rgba(247,241,234,.22);}
.footer-bottom{font-size:.8rem;color:rgba(247,241,234,.45);padding-top:.5rem;}
.footer-share{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem;}
.footer-share__btn{display:inline-grid;place-items:center;width:36px;height:36px;
  border:.5px solid rgba(247,241,234,.28);border-radius:50%;
  color:var(--paper);text-decoration:none;
  transition:background .2s ease,border-color .2s ease,color .2s ease;}
.footer-share__btn:hover{background:var(--signal);border-color:var(--signal);color:#FFF6F2;}

/* ── 17. COOKIE-BANNER ──────────────────────────────────────────── */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:9999;
  background:var(--card);color:var(--ink);border-top:var(--edge);padding:1rem 0;
  box-shadow:0 -14px 40px -22px rgba(44,44,42,.5);}
.cookie-banner[hidden]{display:none;}
.cookie-banner__inner{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);
  display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;}
.cookie-banner__text{margin:0;flex:1 1 320px;font-size:.9rem;color:var(--ink-70);}
.cookie-banner__actions{display:flex;gap:.6rem;flex:0 0 auto;}

/* ── 18. RECHTSTEXTE ────────────────────────────────────────────── */
.legal{max-width:72ch;}
.legal h2{font-size:1.3rem;margin:2.2rem 0 .6rem;letter-spacing:-.03em;}
.legal h3{font-size:1.05rem;margin:1.6rem 0 .4rem;}
.legal p,.legal li{font-size:1rem;color:var(--ink-70);}
.legal ul{padding-left:1.1rem;}
.legal .updated{font-size:.85rem;color:var(--ink-45);
  border-top:.5px solid var(--rule);padding-top:1rem;margin-top:2.4rem;}
/* Hervorgehobener Kasten in Rechtstexten: Hinweis auf die massgebende
   Erklaerung, Verweis aufs Netzwerk. Terrakotta-Flaeche wie das
   Vorteilsband, damit klar ist: hier steht etwas Wichtiges. */
.legal-box{background:var(--signal-50);border-left:3px solid var(--signal);
  border-radius:0 var(--r-ctrl) var(--r-ctrl) 0;
  padding:1rem 1.2rem;margin:1.8rem 0;color:var(--signal-90);font-size:.95rem;}
.legal-box strong{color:var(--signal-90);}
.legal-box a{color:var(--signal-90);}

/* ── 19. RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width:1040px){
  .hero__frame{grid-template-columns:1fr;}
  .hero__block{order:2;border-right:0;border-top:var(--edge);
    padding-inline:var(--gutter);}
  .hero__img{order:1;min-height:clamp(240px,44vw,380px);}
  .trust__grid{grid-template-columns:repeat(2,1fr);}
  .trust__item:nth-child(odd){border-left:0;padding-left:0;}
  .trust__item:nth-child(n+3){border-top:.5px solid var(--signal-20);}
  .detail-hero,.detail-body{grid-template-columns:1fr;}
  .detail-summary{position:static;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:880px){
  .nav__toggle{display:flex;order:2;margin-left:auto;}
  .nav__links{order:3;width:100%;flex-direction:column;align-items:stretch;
    gap:0;max-height:0;overflow:hidden;transition:max-height .3s ease;}
  .nav.is-open .nav__links{max-height:640px;padding-top:.7rem;}
  .nav__links li{width:100%;border-top:.5px solid var(--rule);}
  .nav__links a{padding:.75rem 0;}
  .nav__links a.nav__cta{margin:.6rem 0;justify-content:center;text-align:center;}
  .brand{margin-right:0;}
  .contact-grid{grid-template-columns:1fr;}
}
@media (max-width:720px){
  .trust__grid{grid-template-columns:1fr;}
  .trust__item{border-left:0;border-top:.5px solid var(--signal-20);
    padding-left:0;padding-right:0;}
  .trust__item:first-child{border-top:0;}
  .track{flex-direction:column;gap:1.4rem;}
  .pstep{display:grid;grid-template-columns:38px 1fr;gap:1rem;align-items:start;padding:0;}
  .pstep::before{display:none;}
  .pstep__dot{margin:0;}
  .steps{grid-template-columns:1fr;}
  .amenity-list{grid-template-columns:1fr;}
  .gallery__thumbs{grid-template-columns:repeat(4,1fr);}
  .footer-grid{grid-template-columns:1fr;gap:1.6rem;}
}
@media (max-width:520px){
  body{font-size:16px;}
  .form-row,.form-row--three{grid-template-columns:1fr;}
  .hero__badge{padding:.55rem .85rem;}
  .hero__badge b{font-size:1.5rem;}
  .rooms{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none!important;}
  .room-card:hover{transform:none;}
  .room-card:hover .room-card__media img{transform:none;}
}