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

   GESTALTUNGSKONZEPT: „GRUNDRISS"
   Die Seite verhält sich wie ein Planblatt aus dem Architekturbüro.
   Haarlinien statt fetter Rahmen, Bemassungen statt Aufkleber, ein
   Schriftfeld statt schwebender Karten. Das passt zum Produkt: Zimmer
   haben Quadratmeter, Stockwerke und Grundrisse.

   Bausteine, die das Konzept tragen:
     · Millimeterraster als Grundfläche (sehr zurückhaltend)
     · Bemassungsklammer vor jedem Abschnittslabel
     · Registermarken an den Ecken des Bildrahmens
     · Schraffur für den laufenden Schritt in der Kette
     · Planstempel unten rechts im Hero

   GESTALTUNGSREGEL (beim Weiterbauen einhalten):
     Klickbar    = Rechteck, Tinte gefüllt oder Haarlinie, mit Pfeil
     Information = nur Text und Haarlinie, nie gefüllt
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ──────────────────────────────────────────────────── */
:root{
  --paper:     #FAF8F4;   /* Zeichenpapier                        */
  --paper-2:   #F0ECE3;   /* zweite Fläche                        */
  --ink:       #14161A;   /* Linien und Text                      */
  --ink-70:    #4A4E54;   /* Nebentext                            */
  --ink-45:    #65686E;   /* Bemassungstext, AA-fest auf beiden Flächen */
  --rule:      #CFCABE;   /* Haarlinie                            */
  --grid:      rgba(20,22,26,.055);  /* Raster                    */
  --yellow:    #F2C21B;   /* Logo, Signal                         */
  --yellow-dk: #A87F00;   /* Gelb, wenn es Text tragen muss       */
  --green:     #14722F;   /* ausschliesslich Status „frei"        */
  --red:       #A6291B;   /* ausschliesslich Fehlermeldungen      */
  --dark:      #16181C;   /* Blaupausen-Abschnitt                 */

  --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:1px solid var(--rule);
  --hair-ink:1px solid var(--ink);

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

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;color:var(--ink);
  background-color:var(--paper);
  /* Millimeterraster: gibt der Fläche Textur, ohne sich vorzudrängen */
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
  linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:34px 34px;
  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(--yellow-dk);
  text-decoration-thickness:2px;text-underline-offset:3px;}
a:hover{text-decoration-color:var(--ink);}
:focus-visible{outline:2px solid var(--ink);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-family:var(--font-mono);font-size:.78rem;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.04;letter-spacing:-.025em;}

/* Abschnittslabel mit Bemassungsklammer davor — das Leitmotiv der Seite */
.eyebrow{display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--font-mono);font-size:.7rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-45);
  margin:0 0 1.4rem;}
.eyebrow::before{content:"";width:38px;height:7px;flex:none;
  border:1px solid currentColor;border-top:0;}

.section-title{font-family:var(--font-display);font-weight:700;
  font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.02;
  letter-spacing:-.032em;margin:0 0 1.6rem;max-width:22ch;}
/* Kein Textmarker mehr: eine gelbe Linie unter dem Wort */
.section-title mark{background:none;color:var(--ink);
  box-shadow:inset 0 -.14em 0 var(--yellow);}
.section-lead{font-size:clamp(1.02rem,1.5vw,1.16rem);max-width:56ch;
  margin:0 0 2.4rem;color:var(--ink-70);}

/* ── 3. BUTTONS (klickbar) ──────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--font-mono);font-size:.75rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  border-radius:0;padding:.85rem 1.5rem;cursor:pointer;
  transition:background .18s ease,color .18s ease;}
.btn::after{content:"\2192";}
.btn:hover,.btn:focus-visible{background:var(--yellow);color:var(--ink);
  border-color:var(--ink);}
.btn--ghost{background:transparent;color:var(--ink);}
.btn--ghost:hover{background:var(--ink);color:var(--paper);}
.btn--dark{background:var(--ink);color:var(--paper);}
.btn--block{display:flex;width:100%;justify-content:space-between;}

/* ── 4. KOPFLEISTE UND NAVIGATION ───────────────────────────────── */
.utility{background:var(--ink);color:var(--paper);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;}
.utility__row{display:flex;flex-wrap:wrap;gap:.3rem 2rem;
  justify-content:space-between;padding-block:.55rem;}
.utility a{color:var(--yellow);text-decoration:none;}
.utility a:hover{text-decoration:underline;}

.site-header{position:sticky;top:0;z-index:50;background:var(--paper);
  border-bottom:var(--hair-ink);}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.2rem;
  padding-block:.9rem;}
.brand{font-family:var(--font-display);font-weight:700;font-size:1rem;
  letter-spacing:-.02em;text-decoration:none;color:var(--ink);
  margin-right:auto;display:inline-flex;align-items:center;gap:.6rem;}
.brand__mark{display:grid;place-items:center;width:30px;height:30px;flex:none;}
.brand__mark img{width:30px;height:30px;object-fit:contain;}
.brand span{color:var(--ink-45);font-weight:400;}

.nav__links{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem 1.4rem;
  list-style:none;margin:0;padding:0;}
.nav__links a{font-family:var(--font-mono);font-size:.73rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-70);
  text-decoration:none;padding:.35rem 0;display:block;
  border-bottom:2px solid transparent;}
.nav__links a:hover,.nav__links a:focus-visible{color:var(--ink);
  border-bottom-color:var(--yellow);}
.nav__links a.is-active{color:var(--ink);border-bottom-color:var(--ink);}
.nav__links a.nav__cta{color:var(--paper);background:var(--ink);
  border:1px solid var(--ink);padding:.55rem 1.1rem;letter-spacing:.12em;}
.nav__links a.nav__cta::after{content:" \2192";}
.nav__links a.nav__cta:hover{background:var(--yellow);color:var(--ink);}

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

.lang-switch{display:inline-flex;gap:.55rem;align-items:center;}
.lang-switch a{font-family:var(--font-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.1em;text-decoration:none;color:var(--ink-45);text-transform:uppercase;}
.lang-switch a:hover{color:var(--ink);}
.lang-switch a.is-active{color:var(--ink);box-shadow:inset 0 -2px 0 var(--yellow);}

/* ── 5. HERO ALS PLANBLATT ──────────────────────────────────────── */
.hero{padding-block:clamp(2rem,5vw,4.5rem) 0;}
.hero__frame{position:relative;display:grid;
  grid-template-columns:minmax(300px,40%) 1fr;
  border:var(--hair-ink);background:var(--paper);}

/* Registermarken an zwei Ecken, wie auf einem Druckbogen */
.hero__frame::before,.hero__frame::after{content:"";position:absolute;
  width:14px;height:14px;pointer-events:none;}
.hero__frame::before{top:-7px;left:-7px;
  border-top:1px solid var(--ink);border-left:1px solid var(--ink);}
.hero__frame::after{bottom:-7px;right:-7px;
  border-bottom:1px solid var(--ink);border-right:1px solid var(--ink);}

.hero__block{order:1;padding:clamp(1.6rem,3vw,2.8rem);
  border-right:var(--hair-ink);display:flex;flex-direction:column;
  justify-content:center;}
.hero__title{font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1;
  letter-spacing:-.04em;margin:0 0 1.3rem;}
.hero__title em{font-style:normal;color:var(--ink);
  box-shadow:inset 0 -.14em 0 var(--yellow);}
.hero__lead{margin:0;font-size:1.02rem;color:var(--ink-70);max-width:46ch;}
.hero__lead b{color:var(--ink);font-weight:700;}

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

/* Schriftfeld: Kenndaten als Plantabelle unter dem Titel */
.chips{list-style:none;margin:1.8rem 0 0;padding:0;border-top:var(--hair);}
.chips li{display:flex;align-items:baseline;gap:.8rem;
  padding:.55rem 0;border-bottom:var(--hair);
  font-family:var(--font-mono);font-size:.76rem;letter-spacing:.02em;color:var(--ink);}
.chips li::before{content:"";width:22px;height:1px;flex:none;
  background:var(--ink-45);transform:translateY(-4px);}
.chips li:nth-child(1)::before{background:var(--green);height:3px;}
.chips li:nth-child(3)::before{background:var(--yellow);height:3px;}

/* Planstempel im Bild */
.hero__badge{position:absolute;right:0;bottom:0;z-index:3;
  background:var(--paper);color:var(--ink);
  border-left:var(--hair-ink);border-top:var(--hair-ink);
  padding:.7rem 1.1rem;display:flex;align-items:center;gap:.75rem;}
.hero__badge b{font-family:var(--font-display);font-weight:700;
  font-size:1.9rem;line-height:.9;letter-spacing:-.04em;}
.hero__badge span{font-family:var(--font-mono);font-size:.68rem;
  line-height:1.25;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-70);}

/* ── 6. SCHRITTKETTE ALS BEMASSUNG ──────────────────────────────── */
.progress{border-block:var(--hair-ink);margin-top:clamp(2.5rem,6vw,4.5rem);
  padding-block:clamp(1.8rem,3.5vw,2.6rem);background:var(--paper);}
.progress__head{font-family:var(--font-mono);font-size:.7rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-45);margin:0 0 2rem;}
.track{display:flex;list-style:none;margin:0;padding:0;}
.pstep{flex:1;position:relative;padding:0 1.5rem 0 0;}
.pstep::before{content:"";position:absolute;left:0;right:0;top:19px;height:1px;
  background:var(--rule);}
.pstep--done::before{background:var(--ink);}
.pstep:last-child::before{right:1.5rem;}
.pstep__dot{position:relative;z-index:2;width:38px;height:38px;
  margin:0 0 1.1rem;border:1px solid var(--ink);background:var(--paper);
  border-radius:0;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:.85rem;font-weight:600;}
.pstep--done .pstep__dot{background:var(--ink);color:var(--paper);}
/* Der laufende Schritt sieht aus wie die uebrigen offenen Schritte -
   keine gelbe Schraffur mehr. */
.pstep__check{width:18px;height:18px;display:block;}
.pstep__label{font-family:var(--font-display);font-weight:700;
  font-size:1.02rem;letter-spacing:-.025em;line-height:1.15;display:inline-block;}
.pstep__state{display:inline-block;margin-top:.45rem;font-family:var(--font-mono);
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45);}
.pstep--done .pstep__state{color:var(--ink);}

/* ── 7. KENNZAHLEN ALS PLANTABELLE ──────────────────────────────── */
/* Steht jetzt zwischen Zimmerliste und Leistungen. Beide Nachbarn koennen
   dieselbe Flaeche haben, deshalb Linien auf BEIDEN Seiten. */
.trust{border-block:var(--hair-ink);background:var(--paper-2);}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);
  list-style:none;margin:0;padding:0;}
.trust__item{display:block;padding:clamp(1.4rem,2.5vw,2rem) clamp(1rem,2vw,1.6rem);
  border-left:var(--hair);}
.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(2rem,3.6vw,2.7rem);line-height:1;letter-spacing:-.05em;
  margin-bottom:.7rem;white-space:nowrap;}
.trust__txt b{display:block;font-family:var(--font-mono);font-size:.72rem;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.45rem;}
.trust__txt span{display:block;font-size:.9rem;color:var(--ink-70);line-height:1.5;}

/* ── 8. ABSCHNITTE ──────────────────────────────────────────────── */
.section{padding-block:clamp(3.5rem,7vw,6rem);}
.section--tint{background:var(--paper-2);border-block:var(--hair-ink);}
/* Der ehemals grüne Abschnitt wird zur Blaupause: Raster auf Tiefdunkel */
.section--green{background-color:var(--dark);color:var(--paper);
  border-block:var(--hair-ink);
  background-image:linear-gradient(rgba(250,248,244,.055) 1px,transparent 1px),
  linear-gradient(90deg,rgba(250,248,244,.055) 1px,transparent 1px);
  background-size:34px 34px;}
.section--green .eyebrow{color:var(--yellow);}
.section--green .section-title{color:var(--paper);}
.section--green .section-title mark{color:var(--paper);}
.section--green .section-lead{color:rgba(250,248,244,.72);}
.section--green a{color:var(--paper);text-decoration-color:var(--yellow);}

/* ── 9. ZIMMER ──────────────────────────────────────────────────── */
.filters{display:flex;flex-wrap:wrap;gap:0;margin:0 0 2.5rem;padding:0;
  list-style:none;border-bottom:var(--hair-ink);}
.filter{font-family:var(--font-mono);font-size:.73rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  background:none;color:var(--ink-45);border:0;border-bottom:2px solid transparent;
  padding:.6rem 0;margin-right:1.8rem;transition:color .15s ease;}
.filter:hover{color:var(--ink);}
.filter.is-active{color:var(--ink);border-bottom-color:var(--ink);}

.rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:0;border-top:var(--hair);border-left:var(--hair);}
.rooms__empty{grid-column:1/-1;padding:2rem;max-width:60ch;color:var(--ink-70);
  border-right:var(--hair);border-bottom:var(--hair);}

.room-card{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  border-right:var(--hair);border-bottom:var(--hair);background:var(--paper);
  transition:background .2s ease;}
.room-card:hover{background:var(--paper-2);}
.room-card.is-reserved{opacity:.55;}
.room-card__bar{display:flex;justify-content:space-between;gap:.75rem;
  padding:.7rem 1.2rem;border-bottom:var(--hair);
  font-family:var(--font-mono);font-size:.68rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45);}
/* Status als kleines Quadrat statt farbiger Leiste */
.room-card__bar span:last-child{display:inline-flex;align-items:center;
  gap:.45rem;color:var(--ink);}
.room-card__bar span:last-child::before{content:"";width:7px;height:7px;
  background:var(--ink-45);flex:none;}
.room-card__bar.is-free span:last-child{color:var(--green);}
.room-card__bar.is-free span:last-child::before{background:var(--green);}
.room-card__bar.is-reserved span:last-child{color:var(--ink-45);}

.room-card__media{aspect-ratio:4/3;overflow:hidden;background:var(--paper-2);
  margin:1.1rem 1.1rem 0;border:var(--hair-ink);}
.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:1.1rem 1.1rem 1.3rem;flex:1;display:flex;flex-direction:column;}
.room-card__title{font-family:var(--font-display);font-weight:700;font-size:1.3rem;
  letter-spacing:-.03em;line-height:1.05;margin:0 0 .25rem;}
.room-card__where{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;
  color:var(--ink-45);margin:0 0 1rem;}
.room-card__desc{font-size:.94rem;color:var(--ink-70);margin:0 0 1.2rem;}
.room-card__features{list-style:none;margin:0 0 1.4rem;padding:.8rem 0 0;
  border-top:var(--hair);display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;color:var(--ink-70);}
.room-card__features li{display:flex;align-items:center;gap:.4rem;}
.room-card__features li::before{content:"";width:9px;height:1px;
  background:var(--ink-45);flex:none;}
.room-card__foot{margin-top:auto;display:flex;align-items:flex-end;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.room-card__price{font-family:var(--font-display);font-weight:700;font-size:1.55rem;
  letter-spacing:-.04em;line-height:1;}
.room-card__price small{display:block;font-family:var(--font-mono);font-size:.66rem;
  font-weight:400;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-45);margin-top:.45rem;}
.room-card .btn{padding:.6rem 1rem;font-size:.68rem;}

/* ── 10. LEISTUNGEN ─────────────────────────────────────────────── */
.incl{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:0;list-style:none;padding:0;margin:0;border-top:var(--hair);}
.incl li{padding:.85rem 1.2rem .85rem 2.2rem;border-bottom:var(--hair);
  position:relative;font-size:.96rem;}
/* Alle Punkte sind aktiv -> jedes Kaestchen gelb gefuellt. */
.incl li::before{content:"";position:absolute;left:.6rem;top:1.5rem;
  width:9px;height:9px;border:1px solid var(--yellow);background:var(--yellow);}

/* ── 10a. QUARTIERUEBERSICHT ────────────────────────────────────── */
/* Steht oberhalb der Zimmerliste: erst Gegend waehlen, dann Zimmer. */
.quarters-block{margin:2.2rem 0 2.8rem;padding-bottom:2.4rem;
  border-bottom:var(--hair-ink);}
.quarters-block__head{font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.25rem,2.2vw,1.6rem);letter-spacing:-.03em;line-height:1.1;
  margin:0 0 .5rem;}
.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:1px;background:var(--rule);border:1px solid var(--rule);
  list-style:none;padding:0;margin:1.4rem 0 0;}
.quarters li{background:var(--paper);}
.quarters a{display:flex;flex-direction:column;gap:.45rem;
  padding:1.25rem 1.2rem;text-decoration:none;color:inherit;height:100%;
  transition:background .18s ease;}
.quarters a:hover,.quarters a:focus-visible{background:var(--paper-2);}
.quarters__name{font-family:var(--font-display);font-weight:700;font-size:1.12rem;
  letter-spacing:-.03em;line-height:1.1;}
.quarters__meta{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-45);}
.quarters__price{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;
  color:var(--ink-70);margin-top:auto;padding-top:.5rem;}

/* ── 11. LAGE ───────────────────────────────────────────────────── */
.areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;
  border-top:1px solid rgba(250,248,244,.25);}
.areas__card{padding:1.6rem clamp(1rem,2vw,1.8rem);
  border-left:1px solid rgba(250,248,244,.18);}
.areas__card:first-child{border-left:0;padding-left:0;}
.areas__card h3{font-family:var(--font-mono);font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);margin:0 0 1.1rem;}
.areas__list{list-style:none;margin:0;padding:0;font-family:var(--font-mono);
  font-size:.82rem;letter-spacing:.02em;}
.areas__list li{display:flex;justify-content:space-between;gap:1rem;
  padding:.45rem 0;border-bottom:1px solid rgba(250,248,244,.14);}
.areas__list li b{font-weight:500;color:rgba(250,248,244,.7);}
.areas__card p{margin:0 0 1rem;font-size:.94rem;color:rgba(250,248,244,.75);}

/* ── 12. ABLAUF ─────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:0;border-top:var(--hair-ink);}
.step{padding:clamp(1.5rem,2.5vw,2.2rem) clamp(1.2rem,2vw,1.8rem);
  border-left:var(--hair);}
.step:first-child{border-left:0;padding-left:0;}
.step__no{width:34px;height:34px;border:1px solid var(--ink);display:grid;
  place-items:center;font-family:var(--font-mono);font-size:.8rem;font-weight:600;
  margin-bottom:1.1rem;border-radius:0;background:none;}
.step:nth-child(1) .step__no{background:var(--ink);color:var(--paper);}
.step h2,.step h3{font-size:1.2rem;margin:0 0 .7rem;letter-spacing:-.028em;}
.step p{margin:0;color:var(--ink-70);font-size:.96rem;}

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

/* ── 14. FORMULAR ───────────────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:minmax(280px,1.2fr) minmax(260px,.8fr);
  gap:0;border-top:var(--hair-ink);}
.contact-grid > div{padding:clamp(1.6rem,3vw,2.4rem) clamp(1.2rem,3vw,2.4rem) 2rem 0;}
.contact-grid > .card{border-left:var(--hair);}
.form-card{display:grid;gap:1.5rem;}
.field label,.field .field__label{display:block;font-family:var(--font-mono);
  font-size:.67rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:.35rem;padding-left:.75rem;color:var(--ink-45);}

/* Eingabefelder: gefüllte Fläche = „hier wird eingetragen".
   Das Raster hört im Feld auf, dadurch liest sich das Feld auch leer
   als Fläche und nicht als blosse Linie. */
.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea{
  width:100%;font-family:var(--font-body);font-size:1rem;padding:.62rem .75rem;
  border:var(--hair);border-bottom:var(--hair-ink);border-radius:0;
  background-color:var(--paper-2);color:var(--ink);
  box-shadow:inset 0 -2px 0 transparent;
  transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease;}
.field input:not([type=checkbox]):not([type=radio]):hover,
.field select:hover,.field textarea:hover{background-color:#EAE5DA;}
.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:var(--paper);border-color:var(--ink);
  box-shadow:inset 0 -2px 0 var(--yellow-dk);}
.field textarea{min-height:110px;resize:vertical;}
.field input.is-invalid,.field select.is-invalid,.field textarea.is-invalid{
  border-color:var(--red);background-color:rgba(166,41,27,.055);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;}
.form-row--three{grid-template-columns:1fr 1fr 1fr;}
.radio-group,.checkbox-group{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;
  padding-left:.75rem;}
.checkbox,.radio{display:inline-flex;align-items:center;gap:.5rem;
  padding-left:0;font-size:.94rem;cursor:pointer;color:var(--ink-70);}
.checkbox input,.radio input{width:16px;height:16px;flex:0 0 16px;margin:0;
  accent-color:var(--ink);cursor:pointer;}
#datenschutz-label{display:grid;grid-template-columns:16px 1fr;align-items:start;gap:.6rem;}
#datenschutz-label.is-invalid{color:var(--red);}
.form-note{font-family:var(--font-mono);font-size:.7rem;line-height:1.6;
  color:var(--ink-45);letter-spacing:.02em;}
.form-success{display:none;border:var(--hair-ink);padding:1.6rem;background:var(--paper-2);}
.form-success strong{display:block;font-family:var(--font-display);font-weight:700;
  font-size:1.3rem;letter-spacing:-.03em;margin-bottom:.5rem;}

.card{padding:clamp(1.6rem,3vw,2.4rem);}
.card h3{font-family:var(--font-mono);font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;margin:0 0 1.4rem;color:var(--ink-45);}
.card dl{margin:0;}
.card dt{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-45);margin-top:1.3rem;}
.card dd{margin:.3rem 0 0;font-size:1rem;}

/* ── 15. DETAILSEITE ────────────────────────────────────────────── */
.breadcrumb{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-45);padding-block:1.4rem;
  border-bottom:var(--hair);}
.breadcrumb a{color:var(--ink-45);text-decoration:none;}
.breadcrumb a:hover{color:var(--ink);}

.detail-hero{display:grid;grid-template-columns:1.55fr 1fr;gap:0;
  border-bottom:var(--hair-ink);}
.detail-hero > div:first-child{border-right:var(--hair);padding:2rem 2rem 2rem 0;}
.gallery__main{overflow:hidden;background:var(--paper-2);aspect-ratio:3/2;
  border:var(--hair-ink);}
.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:var(--hair);opacity:.6;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(--ink);}

.detail-summary{position:sticky;top:92px;padding:2rem 0 2rem 2rem;}
.detail-summary h1{font-size:clamp(1.7rem,2.8vw,2.3rem);margin:.6rem 0 .3rem;}
.detail-price{font-family:var(--font-display);font-weight:700;font-size:2.4rem;
  letter-spacing:-.05em;line-height:1;margin:1.4rem 0;}
.detail-price small{display:block;font-family:var(--font-mono);font-size:.68rem;
  font-weight:400;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-45);margin-top:.5rem;}
.detail-specs{list-style:none;padding:0;margin:0 0 1.8rem;border-top:var(--hair);
  font-family:var(--font-mono);font-size:.8rem;}
.detail-specs li{display:flex;justify-content:space-between;gap:.8rem;
  padding:.6rem 0;border-bottom:var(--hair);}
.detail-specs .k{color:var(--ink-45);letter-spacing:.06em;}
.detail-specs .v{font-weight:600;}

.detail-body{display:grid;grid-template-columns:1.55fr 1fr;gap:0;
  border-bottom:var(--hair-ink);}
.detail-body > div:first-child{border-right:var(--hair);padding:2.5rem 2rem 2.5rem 0;}
.amenity-list{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:1fr 1fr;gap:0;border-top:var(--hair);}
.amenity-list li{display:flex;gap:.6rem;align-items:center;font-size:.94rem;
  padding:.6rem .8rem .6rem 0;border-bottom:var(--hair);color:var(--ink-70);}
.amenity-list li::before{content:"";width:9px;height:1px;background:var(--ink-45);flex:none;}
.aside-card{background:var(--dark);color:var(--paper);padding:2rem;margin:2.5rem 0 2.5rem 2rem;}
.aside-card h3{color:var(--paper);margin:0 0 .7rem;font-size:1.2rem;}
.aside-card p{margin:0 0 1.4rem;color:rgba(250,248,244,.75);font-size:.95rem;}
.aside-card .btn{background:var(--yellow);border-color:var(--yellow);color:var(--ink);}
.aside-card .btn:hover{background:var(--paper);border-color:var(--paper);}

/* ── 16. FUSSZEILE ──────────────────────────────────────────────── */
.wave,.footrule{display:none;}   /* Reste der alten Gestaltung */
.site-footer{background:var(--dark);color:var(--paper);
  padding-block:3.2rem 1.6rem;border-top:var(--hair-ink);}
.site-footer a{color:var(--paper);text-decoration-color:var(--yellow);}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:0;
  border-top:1px solid rgba(250,248,244,.22);}
.footer-grid > div{padding:1.8rem clamp(1rem,2vw,2rem) 1.8rem 0;
  border-left:1px solid rgba(250,248,244,.14);}
.footer-grid > div:first-child{border-left:0;}
.footer-grid > div:not(:first-child){padding-left:clamp(1rem,2vw,2rem);}
.site-footer .brand{color:var(--paper);margin-bottom:1rem;}
.site-footer .brand span{color:rgba(250,248,244,.55);}
.site-footer p{font-size:.9rem;max-width:34ch;color:rgba(250,248,244,.72);}
.footer-col h4{font-family:var(--font-mono);font-size:.68rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);margin:0 0 1rem;}
.footer-col ul{list-style:none;margin:0;padding:0;}
.footer-col li{margin-bottom:.45rem;font-size:.9rem;}
.footer-contact div{margin-bottom:.45rem;font-size:.9rem;}
.footer-claim{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(250,248,244,.75);padding-top:1.6rem;
  border-top:1px solid rgba(250,248,244,.22);}
.footer-bottom{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;
  color:rgba(250,248,244,.45);padding-top:.6rem;}
.footer-share{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem;}
.footer-share__btn{display:inline-grid;place-items:center;width:34px;height:34px;
  border:1px solid rgba(250,248,244,.28);color:var(--paper);text-decoration:none;
  transition:background .2s ease,border-color .2s ease;}
.footer-share__btn:hover{background:var(--yellow);border-color:var(--yellow);color:var(--ink);}

/* ── 17. COOKIE-BANNER ──────────────────────────────────────────── */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:9999;
  background:var(--paper);color:var(--ink);border-top:var(--hair-ink);padding:1.1rem 0;
  box-shadow:0 -14px 40px -22px rgba(20,22,26,.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.8rem;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.35rem;margin:2.4rem 0 .7rem;letter-spacing:-.028em;}
.legal h3{font-size:1.05rem;margin:1.7rem 0 .5rem;}
.legal p,.legal li{font-size:1rem;color:var(--ink-70);}
.legal ul{padding-left:1.1rem;}
.legal .updated{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-45);border-top:var(--hair);
  padding-top:1rem;margin-top:2.5rem;}

/* ── 19. RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width:1040px){
  .hero__frame{grid-template-columns:1fr;}
  .hero__block{order:2;border-right:0;border-top:var(--hair-ink);}
  .hero__img{order:1;min-height:clamp(240px,44vw,380px);}
  .trust__grid{grid-template-columns:repeat(2,1fr);}
  /* Linke Spalte buendig zum Container, sonst wirkt der Block eingerueckt. */
  .trust__item:nth-child(odd){border-left:0;padding-left:0;}
  .trust__item:nth-child(n+3){border-top:var(--hair);}
  .detail-hero,.detail-body{grid-template-columns:1fr;}
  .detail-hero > div:first-child,.detail-body > div:first-child{
    border-right:0;border-bottom:var(--hair);padding-right:0;}
  .detail-summary{position:static;padding-left:0;}
  .aside-card{margin-left:0;}
  .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:.8rem;}
  .nav__links li{width:100%;border-top:var(--hair);}
  .nav__links a{padding:.75rem 0;}
  .nav__links a.nav__cta{margin:.6rem 0;justify-content:center;}
  .brand{margin-right:0;}
  .contact-grid{grid-template-columns:1fr;}
  .contact-grid > .card{border-left:0;border-top:var(--hair-ink);padding-left:0;}
  .contact-grid > div{padding-right:0;}
}
@media (max-width:720px){
  /* Kennzahlen einspaltig und exakt am linken Containerrand. */
  .trust__grid{grid-template-columns:1fr;}
  .trust__item{border-left:0;border-top:var(--hair);
    padding-left:0;padding-right:0;}
  .trust__item:first-child{border-top:0;}
  .track{flex-direction:column;gap:1.6rem;}
  .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;}
  .step{border-left:0;border-bottom:var(--hair);padding-left:0;}
  .amenity-list{grid-template-columns:1fr;}
  .gallery__thumbs{grid-template-columns:repeat(4,1fr);}
  .footer-grid{grid-template-columns:1fr;}
  .footer-grid > div{border-left:0;border-top:1px solid rgba(250,248,244,.14);
    padding-left:0;}
  .footer-grid > div:first-child{border-top:0;}
}
@media (max-width:520px){
  body{font-size:16px;}
  .form-row,.form-row--three{grid-template-columns:1fr;}
  .hero__badge{padding:.55rem .8rem;}
  .hero__badge b{font-size:1.5rem;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none!important;}
  .room-card:hover .room-card__media img{transform:none;}
}