/* ============================================================
   Brouni — Website-Portal · „Espresso Editorial"
   Creme, Espresso, Gold · Fraunces (Serifen) + Inter · 100 % lokal (keine externen Schriften).
   Dieselbe Formensprache wie Belegungs-Display und Kundendisplay im Laden.
   ============================================================ */
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-latin-wght-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --cream: #f6e4c6; --cream-2: #fbefdc; --cream-3: #fff8ec; --cream-soft: #d9c4a3;
  --esp: #2a1c10; --esp-2: #3d2414; --esp-soft: #5a3a22; --esp-deep: #19100a;
  --gold: #d9a441; --gold-2: #b8862b; --gold-soft: #f3c15a;
  --frei: #2fbf71; --belegt: #e5484d; --reinigung: #4aa9d9; --gleich: #e6a93c;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --maxw: 1200px; --gutter: clamp(16px, 4vw, 48px);
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 104px;
  --r: 6px; --line: rgba(61,36,20,.18);
  --shadow: 0 24px 60px -30px rgba(25,16,10,.45);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--esp); font-family: var(--sans); font-size: 17px; line-height: 1.6; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: 0.005em; line-height: 1.05; margin: 0; }
p { margin: 0; }
.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-2); }
.lede { font-size: clamp(17px, 1.3vw, 20px); color: var(--esp-soft); max-width: 60ch; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; border: 1.5px solid var(--esp); background: var(--esp); color: var(--cream); font-family: var(--sans); font-weight: 700; font-size: 15px; text-decoration: none; transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s, color .25s; }
.btn:hover { transform: translateY(-2px); background: var(--esp-2); }
.btn--ghost { background: transparent; color: var(--esp); }
.btn--ghost:hover { background: rgba(61,36,20,.06); }
.btn--gold { background: var(--gold); border-color: var(--gold); color: var(--esp-deep); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* Muster: Sonnen + Tortenstücke, leicht gekippt (Marke) */
.muster { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; opacity: .5; }
.muster svg { position: absolute; left: 50%; top: 50%; width: 180vmax; height: 180vmax; transform: translate(-50%, -50%) rotate(-14deg); color: var(--esp-soft); opacity: .09; }

/* ---- Kopf ---------------------------------------------------------------- */
.kopf { position: sticky; top: 0; z-index: 50; background: rgba(246,228,198,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.kopf .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }
.marke { display: inline-flex; align-items: center; text-decoration: none; }
.marke img { height: 34px; width: auto; }
.nav { display: flex; gap: 28px; align-items: center; }
.nav a { font-size: 14px; font-weight: 600; letter-spacing: .02em; text-decoration: none; color: var(--esp-soft); }
.nav a:hover { color: var(--esp); }
.nav .btn { padding: 10px 18px; font-size: 13px; }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--esp); margin: 5px 0; transition: transform .25s, opacity .25s; }
@media (max-width: 860px) {
  .nav { position: fixed; inset: 72px 0 auto 0; background: var(--cream-2); flex-direction: column; align-items: stretch; padding: 16px var(--gutter) 24px; border-bottom: 1px solid var(--line); transform: translateY(-120%); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
  .nav.open { transform: none; }
  .nav a { padding: 12px 0; font-size: 17px; }
  .nav-toggle { display: block; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---- Hero: Marke im Doppelrahmen auf Creme, dahinter Muster ------------------ */
.hero { position: relative; padding: clamp(48px, 9vh, 110px) 0 clamp(40px, 7vh, 80px); overflow: hidden; }
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.rahmen { position: relative; aspect-ratio: 1.9; display: grid; place-items: center; }
.rahmen::before, .rahmen::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--esp); pointer-events: none; }
.rahmen::after { inset: 10px; border-width: 1px; opacity: .55; }
.rahmen img { width: 68%; }
.rahmen-zeile { position: absolute; left: 0; right: 0; bottom: -2.4em; text-align: center; font-family: var(--serif); font-style: italic; font-size: 14px; letter-spacing: .22em; text-transform: uppercase; color: var(--esp-soft); }
.hero h1 { font-size: clamp(40px, 5.6vw, 76px); font-weight: 500; margin: 14px 0 20px; }
.hero h1 em { font-style: italic; color: var(--gold-2); }
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-fakten { display: flex; gap: clamp(20px, 4vw, 48px); margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.hero-fakten b { display: block; font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1; }
.hero-fakten span { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--esp-soft); }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } .hero .rahmen { order: -1; width: min(100%, 440px); margin: 0 auto 28px; } }

/* ---- Abschnitte ------------------------------------------------------------- */
.abschnitt { padding: clamp(56px, 9vh, 112px) 0; position: relative; }
.abschnitt--dunkel { background: radial-gradient(120% 90% at 50% 30%, var(--esp-2) 0%, var(--esp) 55%, var(--esp-deep) 100%); color: var(--cream); }
.abschnitt--dunkel .eyebrow { color: var(--gold); }
.abschnitt--dunkel .lede { color: var(--cream-soft); }
.abschnitt--dunkel .muster svg { color: var(--cream); opacity: .06; }
.kopfzeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vh, 48px); position: relative; z-index: 1; }
.kopfzeile h2 { font-size: clamp(30px, 4vw, 52px); margin-top: 10px; }
.live { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; color: var(--cream-soft); }
.live i { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(217,164,65,.18); animation: led 2.6s ease-in-out infinite; }
.live.off i { background: var(--belegt); animation: none; }

/* Live-Belegung: Postkarten mit Passepartout wie der Ladenschirm */
.kabinen { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
@media (max-width: 1000px) { .kabinen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kabine { position: relative; aspect-ratio: 1 / 1.08; border-radius: var(--r); overflow: hidden; background: var(--esp-deep); box-shadow: var(--shadow), 0 0 0 1px rgba(246,228,198,.1); color: var(--cream); }
.kabine::before, .kabine::after { content: ""; position: absolute; pointer-events: none; z-index: 3; }
.kabine::after { inset: 10px; border: 1px solid rgba(246,228,198,.55); }
.kabine::before { inset: 16px; border: 1px solid rgba(246,228,198,.22); }
.kabine-foto { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(1.25) contrast(1.06); transform: scale(1.03); transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.kabine:hover .kabine-foto { transform: scale(1.08); }
.kabine-schleier { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(25,16,10,.84) 0%, rgba(25,16,10,.6) 22%, rgba(25,16,10,.3) 40%, rgba(25,16,10,0) 54%, rgba(25,16,10,0) 68%, rgba(25,16,10,.55) 84%, rgba(25,16,10,.85) 100%); }
.kabine-kopf { position: absolute; z-index: 2; top: 22px; left: 24px; right: 24px; }
.kabine-nr { font-size: 11px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: var(--cream-soft); text-shadow: 0 1px 4px rgba(0,0,0,.9); }
.kabine-stadt { font-family: var(--serif); font-size: clamp(26px, 2.6vw, 40px); font-weight: 600; line-height: 1; text-shadow: 0 2px 6px rgba(0,0,0,.85); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.chip { display: inline-flex; align-items: center; padding: 3px 9px; border: 1px solid rgba(246,228,198,.6); border-radius: 999px; background: rgba(25,16,10,.62); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.chip--klasse { border-color: var(--gold); color: var(--gold); }
.kabine-fuss { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 20px; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.status { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; text-shadow: 0 1px 4px rgba(0,0,0,.9); }
.status i { width: 12px; height: 12px; border-radius: 50%; background: var(--st, var(--frei)); box-shadow: 0 0 0 3px rgba(25,16,10,.45), 0 0 10px 2px var(--st, var(--frei)), 0 0 24px 6px var(--st, var(--frei)); animation: glow 2.4s ease-in-out infinite; }
.status-sub { display: block; font-family: var(--serif); font-style: italic; font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--cream); margin-top: 3px; }
.kabine-geraet { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--cream); text-align: right; max-width: 16ch; text-shadow: 0 1px 4px rgba(0,0,0,.9); }
.kabine[data-status="running"] { --st: var(--belegt); } .kabine[data-status="running"] .status i { animation-duration: 1.4s; }
.kabine[data-status="cleaning"] { --st: var(--reinigung); } .kabine[data-status="ready"], .kabine[data-status="reserved"] { --st: var(--gleich); }
.kabine[data-status="disabled"], .kabine[data-status="fault"] { --st: var(--cream-soft); }
.kabine[data-status="disabled"] .kabine-foto, .kabine[data-status="fault"] .kabine-foto { filter: saturate(.2) brightness(.6); }
.kabine[data-status="disabled"] .status i, .kabine[data-status="fault"] .status i { box-shadow: 0 0 0 3px rgba(25,16,10,.45); animation: none; }

/* Preise: wie eine gedruckte Karte */
.preise { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
@media (max-width: 860px) { .preise { grid-template-columns: 1fr; } }
.preis { position: relative; padding: 28px 28px 24px; background: var(--cream-2); border: 1px solid var(--esp); }
.preis::after { content: ""; position: absolute; inset: 6px; border: 1px solid var(--line); pointer-events: none; }
.preis h3 { font-size: 30px; display: flex; align-items: baseline; gap: 12px; }
.preis h3 small { font-family: var(--sans); font-size: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2); }
.preis-kabinen { font-size: 13px; letter-spacing: .06em; color: var(--esp-soft); margin: 6px 0 18px; }
.preis ul { list-style: none; margin: 0; padding: 0; }
.preis li { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; font-family: var(--serif); font-size: 20px; border-top: 1px solid var(--line); }
.preis li:first-child { border-top: 0; }
.preis li .min { font-family: var(--sans); font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--esp-soft); }
.preis li .punkte { flex: 1; border-bottom: 2px dotted var(--esp); opacity: .45; transform: translateY(-.3em); }
.preis li b { font-weight: 600; font-variant-numeric: tabular-nums; }
.preis-fuss { position: relative; z-index: 1; margin-top: 20px; font-size: 13px; letter-spacing: .06em; color: var(--esp-soft); text-align: center; }

/* Café: Bildstapel + Karte */
.cafe { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .cafe { grid-template-columns: 1fr; } }
.stapel { position: relative; aspect-ratio: 4 / 5; }
.stapel img { position: absolute; object-fit: cover; border: 6px solid var(--cream-3); box-shadow: var(--shadow); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.stapel img:nth-child(1) { left: 0; top: 6%; width: 62%; height: 62%; transform: rotate(-3deg); }
.stapel img:nth-child(2) { right: 0; top: 0; width: 48%; height: 44%; transform: rotate(2.5deg); }
.stapel img:nth-child(3) { right: 6%; bottom: 0; width: 56%; height: 50%; transform: rotate(-1.5deg); }
.stapel:hover img { transform: rotate(0); }
.karte { background: var(--cream-2); border: 1px solid var(--esp); padding: 28px; position: relative; }
.karte::after { content: ""; position: absolute; inset: 6px; border: 1px solid var(--line); pointer-events: none; }
.karte h3 { font-size: 26px; text-align: center; margin-bottom: 4px; }
.karte h3::after { content: ""; display: block; width: 64px; height: 2px; background: var(--esp); margin: 10px auto 16px; opacity: .6; }
.karte h4 { margin: 14px 0 4px; font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--esp-soft); }
.karte ul { list-style: none; margin: 0; padding: 0; }
.karte li { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; font-family: var(--serif); font-size: 19px; }
.karte li .punkte { flex: 1; border-bottom: 2px dotted var(--esp); opacity: .45; transform: translateY(-.3em); }
.karte li b { font-weight: 600; font-variant-numeric: tabular-nums; }
.tag { display: inline-block; margin-left: 8px; padding: 1px 7px; border: 1px solid currentColor; border-radius: 999px; font-family: var(--sans); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; vertical-align: middle; opacity: .8; }

/* App */
.app { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .app { grid-template-columns: 1fr; } }
.phone { position: relative; width: min(100%, 360px); margin: 0 auto; aspect-ratio: 9 / 19; border-radius: 44px; border: 10px solid var(--esp-deep); background: var(--esp-deep); box-shadow: var(--shadow); overflow: hidden; }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.schritte { display: grid; gap: 18px; margin-top: 24px; }
.schritt { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.schritt b { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--gold); border-radius: 50%; color: var(--gold); font-family: var(--serif); font-size: 20px; }
.schritt h3 { font-size: 20px; margin-bottom: 4px; }
.schritt p { color: var(--cream-soft); font-size: 15px; }
.badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; align-items: center; }
.badges img { height: 44px; width: auto; }
.badges .bald { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-soft); border: 1px solid rgba(246,228,198,.35); border-radius: 999px; padding: 10px 14px; }

/* Besuch */
.besuch { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 64px); align-items: stretch; }
@media (max-width: 900px) { .besuch { grid-template-columns: 1fr; } }
.besuch-karte { background: var(--cream-2); border: 1px solid var(--esp); padding: 28px; position: relative; }
.besuch-karte::after { content: ""; position: absolute; inset: 6px; border: 1px solid var(--line); pointer-events: none; }
.besuch-karte dl { margin: 0; display: grid; gap: 14px; }
.besuch-karte dt { font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--esp-soft); }
.besuch-karte dd { margin: 2px 0 0; font-family: var(--serif); font-size: 20px; }
.besuch-karte dd small { display: block; font-family: var(--sans); font-size: 13px; color: var(--esp-soft); margin-top: 2px; }
.map { border: 6px solid var(--cream-3); box-shadow: var(--shadow); min-height: 320px; background: var(--cream-3) url("karte.jpg") center / cover; }

/* Fuß */
.fuss { padding: 40px 0 28px; border-top: 1px solid var(--line); font-size: 13px; color: var(--esp-soft); }
.fuss .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
.fuss a { text-decoration: none; margin-right: 18px; }
.fuss a:hover { color: var(--esp); }
.fuss .marke img { height: 26px; opacity: .85; }

/* Rechtsseiten */
.recht main { width: min(100% - 2 * var(--gutter), 760px); margin: 48px auto 96px; }
.recht h1 { font-size: clamp(34px, 4vw, 52px); margin: 16px 0 24px; }
.recht h2 { font-size: 24px; margin: 36px 0 10px; }
.recht p, .recht li { color: var(--esp-2); }
.recht a { color: var(--gold-2); }
.recht .todo { color: #b06000; font-weight: 650; }

/* Reveal: standardmäßig sichtbar — nur mit JS und ohne reduced-motion leicht einblenden */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.js .rv.in { opacity: 1; transform: none; }
@keyframes led { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes glow { 0%,100% { box-shadow: 0 0 0 3px rgba(25,16,10,.45), 0 0 10px 2px var(--st, var(--frei)), 0 0 24px 6px var(--st, var(--frei)); } 50% { box-shadow: 0 0 0 3px rgba(25,16,10,.45), 0 0 6px 1px var(--st, var(--frei)), 0 0 12px 3px var(--st, var(--frei)); } }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; transition: none; } .live i, .status i { animation: none; } html { scroll-behavior: auto; } .kabine-foto, .stapel img { transition: none; } }

/* Handy: Kabinen einspaltig und breiter, damit Chips und Status nicht kollidieren */
@media (max-width: 560px) {
  .kabinen { grid-template-columns: 1fr; }
  .kabine { aspect-ratio: 4 / 3.2; }
  .kabine-kopf { top: 18px; left: 18px; right: 18px; }
  .kabine-fuss { left: 18px; right: 18px; bottom: 16px; }
  .kabine-stadt { font-size: 32px; }
  .hero-fakten { gap: 18px; }
  .hero-fakten b { font-size: 24px; }
}