/* =========================================================================
   Hotel Brauerei Keller · Startseite (Konzeptentwurf)
   Tokens 1:1 aus dem Figma-Layout „Brauerei Keller · Startseite“
   ========================================================================= */

@font-face{
  font-family:"Playfair Display";
  src:url("fonts/playfair-display.woff2") format("woff2");
  font-weight:400 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Work Sans";
  src:url("fonts/work-sans.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* Farben (Figma-Variablen bk/*) */
  --bordeaux:#723d47;
  --bordeaux-spur:#e6d6da;     /* Bordeaux-Tint: Spur des Fortschrittsbalkens */
  --bordeaux-inaktiv:#d8c6cb;  /* Bordeaux-Tint: deaktivierter Bedienknopf */
  --blush:#faedf1;
  --gold:#c68012;
  --ink:#2e2225;
  --ink-weich:#5c4c50;
  --grau:#6e6e6c;   /* auf Weiss 5,11:1 und auf Mist 4,69:1, erfuellt AA auch als Kleintext */
  --paper:#ffffff;
  --mist:#f5f5f5;
  --line:rgba(114,61,71,.18);
  --line-hell:rgba(114,61,71,.10);

  /* Schrift */
  --schrift-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --schrift-text:"Work Sans","Helvetica Neue",Arial,sans-serif;
  --schrift-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Type-Scale, Min/Max aus dem Figma-Layout */
  --t-hero:clamp(2rem,1.05rem + 4.6vw,3.875rem);      /* 32 → 62 */
  --t-xl:clamp(2.125rem,1.1rem + 4.4vw,3.75rem);      /* 34 → 60 */
  --t-l:clamp(1.875rem,1.2rem + 2.9vw,3rem);          /* 30 → 48 */
  --t-m:clamp(1.375rem,1.1rem + 1.1vw,1.625rem);      /* 22 → 26 */
  --t-s:clamp(1.25rem,1.05rem + .85vw,1.5rem);        /* 20 → 24 */
  --t-lead:clamp(1rem,.95rem + .3vw,1.125rem);        /* 16 → 18 */
  --t-body:.9375rem;                                   /* 15 */
  --t-mono:.75rem;                                     /* 12 */

  /* Raster und Abstände */
  --huelle:78.75rem;        /* 1260 px Inhaltsbreite wie im Layout */
  --rand:clamp(1.25rem,5vw,5.625rem);
  --sektion:clamp(4rem,8vw,7rem);
  --radius:12px;
  --kopf-hoehe:clamp(5.5rem,9vw,10.5rem);
}

*,*::before,*::after{box-sizing:border-box}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--schrift-text);
  font-size:1rem;
  line-height:1.625;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit}

:focus-visible{
  outline:2px solid var(--bordeaux);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--bordeaux);color:#fff;padding:.75rem 1.25rem;
  font-size:.875rem;text-decoration:none;
}
.skip:focus{left:.5rem;top:.5rem}

.huelle{
  width:100%;
  max-width:calc(var(--huelle) + 2 * var(--rand));
  margin-inline:auto;
  padding-inline:var(--rand);
}

/* ---------- Typo-Bausteine ---------- */
.titel-xl,.titel-l,.titel-m,.titel-s{
  font-family:var(--schrift-display);
  color:var(--bordeaux);
  font-weight:500;
  letter-spacing:-.01em;
  text-wrap:balance;
}
.titel-xl{font-size:var(--t-xl);line-height:1.14}
.titel-l{font-size:var(--t-l);line-height:1.2}
.titel-m{font-size:var(--t-m);line-height:1.3}
.titel-s{font-size:var(--t-s);line-height:1.33}

.lead{
  font-size:var(--t-lead);
  line-height:1.72;
  color:var(--ink);
  max-width:38ch;
}

.meta,.label{
  font-family:var(--schrift-mono);
  font-size:var(--t-mono);
  font-weight:500;
  line-height:1.5;
  color:var(--bordeaux);
}
/* Die Abschwächung steckt in der Farbe, nicht in der Deckkraft:
   sonst überschreibt sie jede Einblend-Animation auf opacity. */
.meta{letter-spacing:.02em;color:rgba(114,61,71,.85)}
.label{letter-spacing:.06em;text-transform:uppercase;color:rgba(114,61,71,.85)}

/* =========================================================================
   Kopf
   ========================================================================= */
.kopf{
  position:relative;z-index:30;
  background:var(--paper);
}
.kopf__leiste{
  min-height:var(--kopf-hoehe);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1rem;
  padding-inline:var(--rand);
  padding-block:1.25rem;
}

.sprache{display:flex;align-items:center;gap:.5rem;justify-self:start}
.sprache__link{
  font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;color:var(--grau);
}
.sprache__link.is-aktiv{color:var(--bordeaux)}
.sprache__link:hover{color:var(--bordeaux)}
.sprache__trenner{color:var(--grau);font-size:.8125rem}

.marke{
  justify-self:center;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  text-decoration:none;text-align:center;
}
.marke__wappen{width:clamp(2.25rem,4vw,3.625rem);height:auto}
.marke__wort{
  font-family:var(--schrift-display);font-weight:600;
  font-size:clamp(.9375rem,1.5vw,1.4375rem);
  letter-spacing:.06em;text-transform:uppercase;color:var(--bordeaux);
  line-height:1.25;
}
.marke__sterne{display:flex;gap:.3125rem}
.marke__sterne svg{fill:var(--gold);width:clamp(9px,1vw,13px);height:auto}
.marke__superior{
  font-family:var(--schrift-display);font-weight:600;
  font-size:clamp(.5625rem,.8vw,.75rem);
  letter-spacing:.16em;text-transform:uppercase;color:var(--bordeaux);
}

.menue{
  justify-self:end;
  display:flex;align-items:center;gap:.75rem;
  background:none;border:0;padding:.625rem .25rem;cursor:pointer;
  min-height:44px;
}
.menue__label{
  font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--bordeaux);
}
.menue__icon{display:flex;flex-direction:column;align-items:flex-end;gap:5px;width:26px}
.menue__icon i{display:block;height:1.5px;background:var(--bordeaux);border-radius:1px;width:100%;transition:width .25s ease,transform .25s ease,opacity .25s ease}
.menue__icon i:last-child{width:69%}
.menue[aria-expanded="true"] .menue__icon i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menue[aria-expanded="true"] .menue__icon i:nth-child(2){opacity:0}
.menue[aria-expanded="true"] .menue__icon i:nth-child(3){width:100%;transform:translateY(-6.5px) rotate(-45deg)}

/* Aussen nur Rahmen und Hoehe (animierbar), das Padding traegt der Innenrahmen. */
.hauptmenue{
  border-top:1px solid var(--line-hell);
  background:var(--paper);
}
.hauptmenue__innen{padding:1.5rem var(--rand) 2rem}
.hauptmenue__liste{
  display:flex;flex-wrap:wrap;gap:.5rem 2rem;
}
.hauptmenue__liste a{
  display:inline-block;padding:.5rem 0;
  font-size:1rem;font-weight:500;text-decoration:none;color:var(--ink);
}
.hauptmenue__liste a:hover{color:var(--bordeaux)}
.hauptmenue__hinweis{
  margin-top:1rem;font-size:.8125rem;color:var(--grau);
}

/* =========================================================================
   Hero
   ========================================================================= */
.hero{
  position:relative;
  background:var(--paper);
  padding:0 var(--rand) var(--rand);
}
/* Das Blush der folgenden Sektion beginnt schon hinter dem Hero-Bild */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:38%;background:var(--blush);z-index:0;
}
.hero__bild{
  position:relative;z-index:1;
  border-radius:var(--radius);
  overflow:hidden;
  height:clamp(30rem,calc(100vh - var(--kopf-hoehe) - var(--rand)),46rem);
}
.hero__bild>img{
  width:100%;height:100%;object-fit:cover;object-position:50% 45%;
}
.hero__veil{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,
    rgba(28,15,18,.04) 0%, rgba(28,15,18,.18) 34%,
    rgba(28,15,18,.46) 62%, rgba(28,15,18,.86) 100%);
}
.hero__text{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(1.5rem,4vw,4rem);
  display:flex;flex-direction:column;gap:1.5rem;
}
.hero__titel{
  font-family:var(--schrift-display);font-weight:500;
  font-size:var(--t-hero);line-height:1.16;letter-spacing:-.01em;
  color:#fff;max-width:20ch;
}
/* Der harte Umbruch der Headline gilt erst, wenn die Zeile ihn trägt. */
@media (max-width:47.99rem){ .hero__titel br{display:none} }
.hero__lead{
  font-size:var(--t-lead);line-height:1.63;
  color:rgba(255,255,255,.92);max-width:44ch;
}

/* =========================================================================
   Sektion: Haus und Umgebung
   ========================================================================= */
.haus{
  background:var(--blush);
  padding-block:0 var(--sektion);
}
.haus__kopf{
  display:grid;gap:clamp(2.5rem,5vw,4.5rem);
  padding-top:var(--sektion);
}
.haus__text{display:grid;gap:1.5rem}

.usp{display:grid}
.usp__zeile{
  display:grid;grid-template-columns:auto 1fr;gap:.875rem;
  align-items:start;
  padding-block:.8125rem;
  border-top:1px solid var(--line);
  font-size:var(--t-body);line-height:1.6;
}
.usp__zeile:last-child{border-bottom:1px solid var(--line)}
.usp__icon{width:20px;height:20px;fill:var(--bordeaux);margin-top:.125rem;flex:none}

/* Karten „Vor der Tür“ */
.tuer{margin-top:clamp(3rem,6vw,4.5rem);display:grid;gap:1.75rem}
.tuer__reihe{
  display:grid;gap:clamp(1.5rem,3vw,1.75rem);
  grid-template-columns:1fr;
}
.tuer__karte{display:grid;gap:.5rem}
.tuer__karte img{
  border-radius:var(--radius);
  aspect-ratio:4/3;object-fit:cover;width:100%;
  margin-bottom:.625rem;
}
.tuer__karte p:last-child{font-size:var(--t-body);line-height:1.6}

/* =========================================================================
   Sektion: Zimmer (Slider)
   ========================================================================= */
.zimmer{
  background:var(--paper);
  padding-block:var(--sektion);
  overflow:hidden;
}
.zimmer__kopf{
  display:grid;gap:clamp(1.5rem,4vw,4.5rem);
  margin-bottom:clamp(2.5rem,5vw,3.5rem);
}
.zimmer__kopf .lead{max-width:44ch}

/* Die Spur laeuft bis zur rechten Viewportkante, damit der Anschnitt der
   letzten Karte als Einladung zum Weiterziehen liest, nicht als Beschnitt.
   Links bleibt sie exakt an der Inhaltskante der Huelle. */
.slider{
  --spur-links:max(var(--rand), calc((100vw - var(--huelle)) / 2));
  padding-left:var(--spur-links);
  padding-right:0;
}
.slider__spur{
  display:flex;gap:1.5rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-left:0;
  padding-right:var(--rand);   /* die letzte Karte muss ganz erreichbar bleiben */
  padding-bottom:.5rem;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.slider__spur::-webkit-scrollbar{display:none}

.karte{
  flex:0 0 min(24rem,82vw);
  scroll-snap-align:start;
  display:grid;gap:.5rem;
  align-content:start;
}
.karte img{
  border-radius:var(--radius);
  aspect-ratio:4/3;object-fit:cover;width:100%;
  margin-bottom:.625rem;
}
.karte>p:nth-of-type(2){font-size:var(--t-body);line-height:1.6}
.preis{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:.625rem;
  margin-top:.25rem;
}
.preis__betrag{
  font-family:var(--schrift-display);font-weight:600;
  font-size:var(--t-s);color:var(--bordeaux);
}
.preis__zusatz{font-size:.8125rem;color:var(--grau)}

.karte__cta{
  margin-top:.75rem;
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.875rem;font-weight:600;letter-spacing:.01em;
  color:var(--bordeaux);text-decoration:none;
  min-height:44px;
}
.karte__cta svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
.karte__cta:hover{text-decoration:underline}
.karte__cta:hover svg{transform:translateX(3px)}

.slider__nav{
  display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;
  margin-top:clamp(1.75rem,4vw,2.75rem);
}
.slider__stand{
  font-family:var(--schrift-mono);font-size:.8125rem;font-weight:500;
  letter-spacing:.02em;color:var(--grau);
}
.slider__balken{
  flex:1 1 8rem;max-width:16.25rem;height:3px;border-radius:2px;
  background:var(--bordeaux-spur);overflow:hidden;
}
.slider__balken span{
  display:block;height:100%;width:25%;border-radius:2px;background:var(--bordeaux);
  transition:width .35s ease;
}
.slider__pfeile{display:flex;gap:.75rem;margin-left:auto}
.pfeil{
  width:44px;height:44px;border-radius:50%;
  border:1.5px solid var(--bordeaux);background:none;cursor:pointer;
  display:grid;place-items:center;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.pfeil svg{fill:none;stroke:var(--bordeaux);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.pfeil:hover:not(:disabled){background:var(--bordeaux)}
.pfeil:hover:not(:disabled) svg{stroke:#fff}
.pfeil:disabled{border-color:var(--bordeaux-inaktiv);cursor:default}
.pfeil:disabled svg{stroke:var(--bordeaux-inaktiv)}

/* =========================================================================
   Vorschau-Fade
   ========================================================================= */
.vorschau{
  position:relative;
  background:var(--mist);
  padding-block:var(--sektion) 0;
  max-height:34rem;
  overflow:hidden;
}
.vorschau__titel{opacity:.42;margin-bottom:2rem}
.vorschau__bild{border-radius:var(--radius);overflow:hidden}
.vorschau__bild img{width:100%;height:22rem;object-fit:cover;opacity:.5}
/* Ueberdimensioniert und nach unten verankert: der Scrub-Versatz darf
   am Sektionsende keinen unverblendeten Streifen freilegen. */
.vorschau__veil{
  position:absolute;left:0;right:0;bottom:-15%;height:100%;
  background:linear-gradient(to bottom,rgba(245,245,245,0) 0%,var(--mist) 52%,var(--paper) 82%,var(--paper) 100%);
}

/* =========================================================================
   Pflicht-Abschluss: Silberschmidt-CTA
   ========================================================================= */
.pitch{
  background:var(--paper);
  padding-block:clamp(3rem,6vw,5rem) clamp(3.5rem,7vw,6rem);
  border-top:1px solid var(--line-hell);
}
.pitch__inner{
  display:grid;gap:clamp(1.75rem,4vw,3rem);
  grid-template-columns:1fr;
  align-items:start;
}
.pitch__photo{margin:0;display:grid;gap:.875rem;justify-items:start}
.pitch__photo img{width:15rem;max-width:60vw;border-radius:var(--radius)}
.pitch__photo figcaption{font-size:.875rem;font-weight:600;color:var(--ink)}
.pitch__body{display:grid;gap:.875rem;justify-items:start}
.eyebrow{font-size:.8125rem;color:var(--grau)}
.pitch__eyebrow-link{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.pitch__title{
  font-family:var(--schrift-display);font-weight:500;
  font-size:clamp(1.375rem,1rem + 1.6vw,1.75rem);line-height:1.28;color:var(--ink);
}
.pitch__body .lead{color:var(--ink-weich);max-width:46ch}
.cta{
  margin-top:.5rem;
  display:inline-flex;align-items:center;gap:.75rem;
  padding:.8125rem 1.375rem;min-height:48px;
  border:1px solid var(--ink);border-radius:8px;
  font-size:.9375rem;font-weight:500;text-decoration:none;color:var(--ink);
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.cta__icon{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.cta:hover{background:var(--bordeaux);border-color:var(--bordeaux);color:#fff}
.pitch__fine{margin-top:.375rem;font-size:.75rem;line-height:1.55;color:var(--grau);max-width:60ch}

/* =========================================================================
   Floating Action: Zimmer buchen
   ========================================================================= */
.fab{
  position:fixed;right:0;top:50%;transform:translateY(-50%);
  z-index:40;
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  padding:1.375rem .875rem;
  background:var(--bordeaux);color:#fff;text-decoration:none;
  border-radius:14px 0 0 14px;
  box-shadow:-4px 6px 18px rgba(46,23,28,.22);
  transition:padding-right .25s ease,background-color .25s ease;
}
.fab__icon{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;flex:none}
.fab__label{
  writing-mode:vertical-rl;
  font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.fab:hover{padding-right:1.375rem}

/* =========================================================================
   Ab Tablet
   ========================================================================= */
@media (min-width:48rem){
  .haus__kopf{grid-template-columns:1fr 1fr;align-items:start}
  .tuer__reihe{grid-template-columns:repeat(2,1fr)}
  .tuer__reihe > :nth-child(2n){margin-top:4.5rem}
  .zimmer__kopf{grid-template-columns:1.1fr 1fr;align-items:start}
  .pitch__inner{grid-template-columns:auto 1fr;gap:3rem}
  .vorschau{max-height:38rem}
}

@media (min-width:64rem){
  .tuer__reihe{grid-template-columns:repeat(4,1fr)}
  .tuer__reihe > :nth-child(2n){margin-top:0}
  .tuer__reihe > :nth-child(2),
  .tuer__reihe > :nth-child(4){margin-top:4.5rem}
  .hero__text{max-width:60rem}
}

/* Sehr schmale Geräte: Aktionsknopf unten statt seitlich */
@media (max-width:29.99rem){
  .fab{
    top:auto;bottom:0;right:.75rem;transform:none;
    flex-direction:row;gap:.625rem;
    padding:.75rem 1.125rem;border-radius:12px 12px 0 0;
  }
  .fab__label{writing-mode:horizontal-tb}
  .fab:hover{padding-right:1.125rem}
}

/* =========================================================================
   Motion: Startzustände kommen aus JS, nicht von hier.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}