/* ===================================================================
   HOTEL ANKER — LINDAU (BODENSEE) · Fassung B
   Vanilla CSS, eine Datei, keine externen Quellen (Claude.md §5).
   Namensraum durchgaengig `.ak-`.

   Grundhaltung: Nacht am Bodensee. Dunkles Navy traegt die Seite, Kupfer
   setzt die Akzente, EINE warme Cremesektion bricht die Dunkelheit — nicht
   jede zweite (website_build_rules §2: Grundraster, kein Zwang).

   Aufbau
     01 Schriften            08 Zimmer (sticky Bildspalte)
     02 Tokens               09 Filmstreifen + Lightbox
     03 Reset & Basis        10 Kulinarik
     04 Bewegungs-Bausteine  11 Lindau (Karte + Distanzen)
     05 Preloader & Cursor   12 Gut zu wissen (Akkordeon)
     06 Header & Menue       13 Laufband
     07 Hero & Intro         14 Anfrage, Footer, Unterseiten
                             15 Responsive · 16 Reduced Motion
   =================================================================== */

/* 01 — Schriften ---------------------------------------------------
   Marcellus: roemische Kapitalis, ein Schnitt. Traegt Ueberschriften und
   Zahlen. Manrope: geometrische Grotesk, warm genug, dass sie neben der
   Kapitalis nicht technisch wirkt.
   -------------------------------------------------------------------- */
@font-face{font-family:'Marcellus';src:url('fonts/marcellus.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Manrope';src:url('fonts/manrope-v20-latin-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Manrope';src:url('fonts/manrope-v20-latin-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Manrope';src:url('fonts/manrope-v20-latin-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Manrope';src:url('fonts/manrope-v20-latin-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Manrope';src:url('fonts/manrope-v20-latin-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

/* 02 — Tokens ------------------------------------------------------- */
:root{
  /* Navy stammt aus der Wortmarke (#091a38), hier zwei Stufen tiefer
     gezogen, damit Fotos darauf leuchten statt zu ertrinken. */
  --color-primary:      #08131f;
  --color-primary-light:#122336;
  --color-primary-dark: #040a12;

  /* Kupfer statt Gold: die Tischleuchten im Restaurant und die Rahmen der
     Flurspiegel sind waermer/roter als klassisches Hotelgold. */
  --color-accent:       #b8834a;
  --color-accent-light: #d9a877;
  --color-accent-dark:  #8d5f30;

  /* Petrol als Zweitakzent — die Lichtstimmung des Restaurants. Sparsam. */
  --color-see:          #5c8c93;

  --color-cream:        #efe7db;
  --color-ink:          #131b26;
  --color-muted:        #8b96a5;
  --color-muted-warm:   #6d6459;

  --color-surface:      #08131f;
  --color-surface-alt:  #0d1b2b;
  --color-surface-warm: #efe7db;

  --font-display:'Marcellus', 'Times New Roman', serif;
  --font-main:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ── Schriftgroessen: neun Stufen, sonst nichts (16.08.2026) ──────────────
     Vorher standen auf der Startseite 21 verschiedene Groessen, davon
     FUENFZEHN zwischen 9,5 px und 17,3 px: 9,5 · 10 · 10,5 · 11 · 11,5 · 12 ·
     12,5 · 13 · 13,5 · 14 · 14,5 · 15 · 15,5 · 16 · 17. Dazu 15 verschiedene
     clamp()-Ausdruecke, darunter drei fast gleiche fuer dieselbe Rolle
     (`clamp(34px,5vw,64px)` neben `clamp(34px,4.2vw,58px)` neben
     `clamp(30px,4.4vw,58px)`) und zwei mit identischen Endwerten bei
     unterschiedlicher Steigung.

     Ein Unterschied von 0,5 px ist als Hierarchie unsichtbar und als
     Unsauberkeit sichtbar. Genau daran erkennt man eine gewachsene von einer
     gesetzten Seite — benennen kann es niemand, sehen tun es alle.

     Die Stufen sind nach ROLLE geschnitten, nicht nach Zahl. Wer eine neue
     Groesse braucht, nimmt die naechstliegende Stufe. Eine zehnte Stufe
     einzufuehren ist eine Entscheidung, kein Handgriff. */

  /* Text (Manrope) */
  --fs-label:  11px;                             /* versalgesperrte Labels: Augenbrauen, Knoepfe, Navigation, Pillen */
  --fs-mini:   13px;                             /* Metatexte: Bildunterschriften, Zaehler, Hinweise, Fusszeile */
  --fs-text-s: 15px;                             /* Sekundaertext: Karten, Listen, Formularfelder, Adressen */
  --fs-text:   clamp(15px,.55vw + 13px,17px);    /* Fliesstext */
  /* Steigung von 1.35vw auf 1.6vw, Untergrenze von 17 auf 18 px angehoben.
     Vorher erreichte der Vorspann seine 21 px erst bei 1556 px Fensterbreite —
     auf einem 1280er Laptop stand er bei 17,28 px neben 17 px Fliesstext. Die
     Stufe gab es also rechnerisch, aber nicht sichtbar, und genau das war der
     Fehler, den dieser Durchgang beseitigen soll. Jetzt: 20,5 px bei 1280 px. */
  --fs-lead:   clamp(18px,1.6vw,21px);           /* Vorspann */

  /* Display (Marcellus) */
  --fs-d1: clamp(40px,7.2vw,90px);               /* h1 */
  --fs-d2: clamp(30px,4.4vw,58px);               /* h2, Kennzahlen, Menue-Eintraege */
  --fs-d3: clamp(21px,1.9vw,29px);               /* h3, Laufband, Adress-Ueberschriften */
  --fs-d4: clamp(19px,1.7vw,26px);               /* Zwischenzeilen in Karten und Zeilen */

  --radius: 1px;
  --gutter: clamp(20px, 5vw, 76px);
  --maxw: 1360px;
  --maxw-text: 62ch;
  /* Kopfhoehe folgt der Wortmarke: sie ist dreizeilig (HOTEL/ANKER/LINDAU) und
     fast quadratisch, bei 168px Breite also 85px hoch. 112px Kopf lassen ihr
     oben und unten Luft; beim Scrollen faehrt der Kopf auf 88px zusammen. */
  --header-h: 112px;
  --header-h-solid: 88px;

  --hair:        rgba(239,231,219,.14);
  --hair-strong: rgba(239,231,219,.30);
  --hair-dark:   rgba(19,27,38,.14);

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-io:  cubic-bezier(.65,0,.35,1);
  --ease-soft:cubic-bezier(.33,1,.68,1);
}

/* 03 — Reset & Basis ------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
/* Fliesstext auf 400 statt 300 (16.08.2026).

   Helle Schrift auf dunklem Grund wirkt optisch DUENNER als dunkle auf hellem:
   das hellere Feld blutet in die Buchstabenform hinein und frisst Strichstaerke
   weg. Auf dunklem Grund geht man deshalb eine Stufe HOCH, nicht runter — 300
   bei 15 px auf #08131f verliert Substanz, und `.ak-body-muted` setzt mit
   62 % Deckkraft noch einen drauf.

   Manrope liegt als statischer Schnitt 400 bereits lokal (`regular.woff2`),
   es kommt also keine Datei dazu. `.ak-lead` bleibt bewusst bei 300: gross
   und leicht gegen klein und normal ist der Kontrast, den ein Vorspann
   braucht — vorher waren beide 300 und der Unterschied lag allein in der
   Groesse. */
body{
  background:var(--color-surface);
  color:var(--color-cream);
  font-family:var(--font-main);
  font-weight:400;
  font-size:var(--fs-text);
  line-height:1.72;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* ⚠️ Merke: die HTML-Attribute `width`/`height` wirken als Praesentations-
   Hinweise. Wer im CSS nur die Breite setzt, laesst die Hoehe aus dem Attribut
   stehen — und das Bild wird gestreckt. Genau so stand die Wortmarke im
   Fliesstext mit 118x186 statt 118x60 (gemessen 11.08.2026). Deshalb gehoert
   ueberall dort, wo unten eine feste Breite gesetzt wird, ein `height:auto`
   daneben. Eine globale Regel dafuer waere falsch: sie haette hoehere
   Spezifitaet als `.ak-fig img{height:100%}` und wuerde jedes Kachelbild
   flachlegen. */
img,svg,video{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul,ol{list-style:none; padding:0;}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer;}
input,select,textarea{font:inherit; color:inherit;}
address{font-style:normal;}
:focus-visible{outline:2px solid var(--color-accent); outline-offset:4px;}

/* Laufweite nimmt ab, je groesser die Schrift wird (16.08.2026).

   Vorher stand hier EIN Wert fuer alle Raenge: `letter-spacing:.005em`, also
   leicht auseinandergezogen — auch bei 90 px. Das ist der Fehler, den man an
   grossen Serifen-Ueberschriften sofort sieht, ohne ihn benennen zu koennen:
   Buchstabenabstaende, die bei 16 px stimmen, wirken bei 90 px lose, weil der
   Abstand mitwaechst, das Auge ihn aber absolut liest. Schriftschneider
   gleichen das im Bleisatz seit jeher aus (optische Groesse).

   Marcellus hat keine optischen Groessen, also machen wir es von Hand:
   negativ bei den grossen Raengen, neutral beim kleinsten. Zurueckhaltend
   dosiert — die Schrift hat feine Serifen, zu enge Zeilen lassen sie
   zusammenkleben. */
h1,h2,h3,h4{font-family:var(--font-display); font-weight:400; line-height:1.14;}
h1{font-size:var(--fs-d1); letter-spacing:-.018em;}
h2{font-size:var(--fs-d2); letter-spacing:-.012em;}
h3{font-size:var(--fs-d3); letter-spacing:-.004em;}
h4{letter-spacing:0;}
/* Auf schmalen Geraeten sind dieselben Ueberschriften nur 40 bzw. 30 px gross.
   Dort waere dieselbe negative Laufweite zu viel — die Endwerte der `clamp()`
   liegen um mehr als die Haelfte auseinander. */
@media (max-width:700px){
  h1{letter-spacing:-.008em;}
  h2{letter-spacing:-.005em;}
  h3{letter-spacing:0;}
}

.ak-wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter);}
/* Sprungziele duerfen nicht unter dem festen Header landen */
[id]{scroll-margin-top:calc(var(--header-h) + 24px);}
.ak-narrow{max-width:var(--maxw-text);}
.ak-hidden{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

.ak-skip{
  position:absolute; top:-120px; left:16px; z-index:2000;
  background:var(--color-cream); color:var(--color-ink);
  padding:14px 22px; font-weight:600; font-size:var(--fs-mini);
  transition:top .2s var(--ease-out);
}
.ak-skip:focus{top:14px;}

/* Auszeichner ueber Ueberschriften */
.ak-eyebrow{
  display:flex; align-items:center; gap:14px;
  font-size:var(--fs-label); font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  color:var(--color-accent);
  margin-bottom:22px;
}
.ak-eyebrow::before{
  content:''; width:34px; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform .9s var(--ease-out) .1s;
}
.is-in .ak-eyebrow::before, .ak-eyebrow.is-in::before{transform:scaleX(1);}
.ak-eyebrow-center{justify-content:center;}

.ak-lead{
  font-size:var(--fs-lead); font-weight:300; line-height:1.65;
  color:rgba(239,231,219,.82);
}

/* ── Ziffern fluchten (16.08.2026) ────────────────────────────────────────
   `tabular-nums` gibt jeder Ziffer dieselbe Breite. Ueberall dort, wo Zahlen
   UNTEREINANDER stehen, richten sie sich damit von selbst aus: die Preise der
   Speisekarte, die Entfernungen, die Zeiten, die Kennzahlen.

   Der Unterschied ist klein und genau deshalb wirksam — eine Preisspalte, in
   der die 1 schmaler ist als die 8, franst am Rand aus. Das liest niemand
   bewusst, aber es ist der Unterschied zwischen gesetzt und getippt.

   Bewusst NICHT global auf `body`: im Fliesstext sind Proportionalziffern
   richtig, dort stehen Zahlen im Wort und sollen keine Luecken reissen
   („400 m zum Bahnhof"). Deshalb gezielt an den Spalten. */
.ak-fact b,
.ak-dist span,
.ak-karte-gruppe li p span,
.ak-dine-hours li span,
.ak-roomcard-price,
.ak-roomcard-size,
.ak-room-specs li,
.ak-rv-count,
.ak-menu-link em{
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
}
.ak-body-muted{color:rgba(239,231,219,.62);}

/* Kupferner Textlink mit wachsender Unterlinie */
.ak-link{
  position:relative; display:inline-block;
  font-size:var(--fs-mini); font-weight:600; letter-spacing:.19em; text-transform:uppercase;
  padding-bottom:6px; color:var(--color-cream);
}
.ak-link::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--color-accent);
  transform:scaleX(1); transform-origin:right;
  transition:transform .45s var(--ease-io);
}
.ak-link:hover::after,.ak-link:focus-visible::after{transform:scaleX(0);}
.ak-link span{transition:color .35s var(--ease-out);}
.ak-link:hover span{color:var(--color-accent-light);}

/* Buttons */
.ak-btn{
  --btn-fg:var(--color-cream); --btn-bd:var(--color-cream);
  /* z-index:0 ist Absicht: erst damit oeffnet der Button einen eigenen
     Stapelkontext, und die Fuellung (::before, z-index:-1) landet HINTER der
     Schrift statt hinter dem Sektionshintergrund — dort waere sie unsichtbar. */
  position:relative; z-index:0; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center;
  gap:12px; overflow:hidden;
  padding:17px 38px;
  border:1px solid var(--btn-bd); color:var(--btn-fg);
  font-size:var(--fs-label); font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  transition:color .45s var(--ease-io), border-color .45s var(--ease-io);
}
/* Fuellung faehrt von unten hoch statt hart umzuschalten */
.ak-btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--color-cream);
  transform:translateY(101%);
  transition:transform .5s var(--ease-io);
}
.ak-btn>*{position:relative;}
.ak-btn:hover,.ak-btn:focus-visible{color:var(--color-primary); border-color:var(--color-cream);}
.ak-btn:hover::before,.ak-btn:focus-visible::before{transform:translateY(0);}
.ak-btn-accent{--btn-bd:var(--color-accent); --btn-fg:var(--color-accent-light);}
.ak-btn-accent::before{background:var(--color-accent);}
.ak-btn-accent:hover,.ak-btn-accent:focus-visible{color:var(--color-primary-dark); border-color:var(--color-accent);}
.ak-btn-sm{padding:13px 26px; font-size:var(--fs-label);}
.ak-btn-row{display:flex; flex-wrap:wrap; gap:16px;}

/* Filmkorn — eine Inline-SVG als data-URI, kein Fremdserver, keine Bilddatei */
.ak-grain{
  position:fixed; inset:0; z-index:400; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 04 — Bewegungs-Bausteine ------------------------------------------
   Alle Reveals haengen an `.is-in`, gesetzt von einem IntersectionObserver
   in main.js. Verzoegerung pro Element via --d, Reihenfolge via --i.
   -------------------------------------------------------------------- */

/* Zeilenmaske: jedes Wort sitzt in einem overflow-hidden-Span und faehrt
   von unten ein. Das ist die Kernbewegung der Seite — bewusst nur fuer
   Ueberschriften, sonst nutzt sie sich ab. */
/* Zeilenabstand hier eigenstaendig: die Masken bringen unten echte Luft mit
   (siehe naechste Regel), sonst stuende die Ueberschrift zu weit auseinander. */
.ak-mask{display:block; line-height:1.0;}
/* Die Maske ist `overflow:hidden` — die Zeilenbox ist niedriger als die
   Marcellus-Glyphen, Ober- und Unterlaengen wurden abgeschnitten (im Screenshot
   vom 11.08. war „mittendrin." halbiert). Also oben und unten Luft dazugeben.
   Nur die OBERE Luft wird per negativem Margin wieder herausgerechnet: wuerde
   man auch die untere herausrechnen, ragt die letzte Zeile aus dem Kasten der
   Ueberschrift heraus und der folgende Absatz laeuft hinein — genau so
   ueberlappte die Lindau-Ueberschrift ihren eigenen Fliesstext. Die untere Luft
   bleibt deshalb stehen und wird ueber `line-height:1.0` oben wieder
   eingespart. */
.ak-mask .w{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding:.16em 0 .2em; margin:-.16em 0 0;
}
/* Zwei Stufen statt einer — geaendert am 16.08.2026.

   Vorher bekam JEDE Ueberschrift dieselbe Inszenierung: 1,05 s Laufzeit,
   55 ms Versatz je Wort. Die Hero-Zeile und die Zwischenzeile ueber dem
   FAQ-Akkordeon waren damit gleich dramatisch. Wenn alles Hero ist, ist
   nichts Hero — die Hero-Zeile verliert ihre Wirkung an die neunte
   Wiederholung desselben Auftritts.

   Jetzt: die H2 laufen schneller und enger (Grundregel unten), die H1
   behaelt den vollen Auftritt (Regel darunter). H3 tragen die Maske
   nirgends im Projekt, es gibt also bewusst nur zwei Stufen und keine
   erfundene dritte. */
.ak-mask .w>i{
  display:inline-block; font-style:inherit;
  transform:translateY(105%);
  transition:transform .72s var(--ease-out);
  transition-delay:calc(var(--wi,0) * 32ms + var(--d,0ms));
}
h1.ak-mask .w>i{
  transition-duration:1.05s;
  transition-delay:calc(var(--wi,0) * 55ms + var(--d,0ms));
}
.ak-mask.is-in .w>i{transform:translateY(0);}

/* Kurzer Weg, kurze Zeit — geaendert am 16.08.2026 (vorher 28px / .9s / 90ms).
   Das war ein langer, weicher Schub, und er lief 32 Mal auf der Startseite.
   Bewegung wirkt teuer, wenn sie kurz und praezise ist, nicht wenn sie lange
   gleitet: 16px in .6s liest sich als „gesetzt", 28px in .9s als „animiert".
   Der Versatz von 70ms haelt die Staffel zusammen, statt sie auseinanderzuziehen. */
.ak-rise{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay:calc(var(--i,0) * 70ms + var(--d,0ms));
}
.ak-rise.is-in{opacity:1; transform:none;}

/* Bildaufdeckung: der Zuschnitt faehrt auf, das Bild darin faehrt vom Zoom
   zurueck.
   ⚠️ Der `clip-path` sitzt auf dem BILD, nicht auf dem Rahmen — und das ist
   kein Geschmack, sondern Notwendigkeit. Lag er auf dem Rahmen (also auf dem
   Element, das der IntersectionObserver beobachtet), meldete der Observer fuer
   genau dieses Element eine Schnittflaeche von 0: das Element versteckte sich
   selbst vor dem Beobachter, der es aufdecken sollte. Ergebnis war, dass
   `is-in` nie gesetzt wurde und auf der ganzen Seite kein einziges dieser
   Bilder je erschien — schwarze Spalten, wo Fotos stehen sollten. Am
   11.08.2026 im Browser nachgemessen: `clip-path` blieb dauerhaft auf
   `inset(0px 0px 100%)`, `.ak-clip.is-in` gab es null Mal im Dokument. */
.ak-clip{overflow:hidden;}
.ak-clip img{clip-path:inset(0 0 100% 0);}
.ak-clip:not(.is-in) img{transition-delay:var(--d,0ms);}
.ak-clip.is-in img{clip-path:inset(0 0 0 0);}
.ak-clip figcaption{opacity:0; transition:opacity .7s var(--ease-out);}
.ak-clip.is-in figcaption{opacity:1; transition-delay:calc(var(--d,0ms) + 480ms);}

/* `.ak-rule` (Linie zeichnet sich von links auf) stand hier bis zum
   16.08.2026 und war in KEINER der acht Seiten benutzt — definiert, gepflegt,
   nie eingebaut. Raus, statt sie weiter mitzuschleppen.
   Wer Trennlinien zwischen den Sektionen will: die Regel war
   `height:1px; background:var(--hair-strong); transform:scaleX(0);
   transform-origin:left; transition:transform 1.1s var(--ease-out);` plus
   `.ak-rule.is-in{transform:scaleX(1);}`. Das ist bewusst NICHT nebenbei
   wieder eingebaut worden — neue sichtbare Linien auf acht Seiten sind eine
   Gestaltungsentscheidung, keine Aufraeumarbeit. */

/* Ken Burns laeuft EINMAL und bleibt dann stehen — geaendert am 16.08.2026.
   Vorher: `26s ease-in-out infinite alternate`, also ewiges Hin und Her.
   Zusammen mit vier weiteren Dauerlaeufern kam die Seite nie zur Ruhe, und
   genau das liest sich als „hier laeuft ein Plugin". Teuer wirkende Seiten
   sind ueberwiegend still und bewegen sich punktuell.
   `--ease-soft` laeuft aus statt gleichmaessig durch: das Bild kommt zur
   Ruhe, statt abrupt zu stoppen. Spart nebenbei Akku — eine Dauerskalierung
   haelt den Compositor auf jedem Handy wach, das die Seite offen hat. */
@keyframes ak-kenburns{from{transform:scale(1) translate3d(0,0,0);} to{transform:scale(1.11) translate3d(0,-1.5%,0);}}
.ak-kenburns{animation:ak-kenburns 20s var(--ease-soft) forwards;}

/* Bildkachel mit Zoom auf Hover — ueberall gleich */
.ak-fig{position:relative; overflow:hidden; background:var(--color-primary-light);}
/* Die Zoomstufe laeuft ueber eine Variable, damit Aufdeck-Zoom und Hover-Zoom
   nicht dieselbe `transform`-Deklaration ueberschreiben. Reihenfolge zaehlt:
   die Hover-Regel steht bewusst als letzte, sonst gewinnt sie nach dem
   Aufdecken nicht mehr. */
.ak-fig img, .ak-clip img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(var(--imgz,1));
  transition:transform 1.2s var(--ease-out), clip-path 1.25s var(--ease-out);
}
.ak-clip img{--imgz:1.16;}
.ak-clip.is-in img{--imgz:1;}
.ak-fig:hover img{--imgz:1.045; transition-duration:.7s;}
.ak-fig figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:26px 24px 20px;
  background:linear-gradient(to top, rgba(4,10,18,.86), rgba(4,10,18,0));
  font-size:var(--fs-mini); letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:var(--color-cream);
}

/* 05 — Preloader & Cursor -------------------------------------------- */
.ak-loader{
  position:fixed; inset:0; z-index:1200;
  display:grid; place-items:center;
  background:var(--color-primary-dark);
  transition:transform 1s var(--ease-io) .15s, visibility 0s linear 1.15s;
}
.ak-loader.is-done{transform:translateY(-101%); visibility:hidden;}
.ak-loader-inner{display:flex; flex-direction:column; align-items:center; gap:22px;}
.ak-loader svg{width:52px; height:auto; color:var(--color-accent); overflow:visible;}
/* Anker wird gezeichnet statt eingeblendet */
.ak-loader svg path,.ak-loader svg line,.ak-loader svg circle{
  stroke-dasharray:var(--len,240); stroke-dashoffset:var(--len,240);
  animation:ak-draw 1.15s var(--ease-soft) forwards;
}
@keyframes ak-draw{to{stroke-dashoffset:0;}}
/* Wortmarke im Preloader. Quelle ist nur 366px breit (siehe README, Abschnitt
   Bilder) — bei 150px Darstellung bleibt genug Reserve, groesser wuerde man die
   Interpolation sehen. */
.ak-loader-mark{
  width:150px; height:auto;
  opacity:0; animation:ak-fade .7s ease .5s forwards;
}
@keyframes ak-fade{to{opacity:1;}}

/* Hier stand bis 16.08.2026 der eigene Cursor (`.ak-cursor`): ein Ring mit
   Nachzieheffekt, der ueber Bildern zu „Ansehen" wurde.

   Entfernt, und zwar bewusst. Drei Gruende:
   1. Er war das erkennbarste Bauteil aus dem Agentur-Baukasten — dieselbe
      Geste steht auf hunderten Portfolio-Seiten. Genau das Gegenteil von
      „individuell".
   2. Er ersetzte eine native Affordanz durch eine erlernte. Die Gaeste eines
      Bodensee-Hotels sind im Schnitt nicht 25.
   3. Er lief ueber `mix-blend-mode:difference` und einen eigenen
      rAF-Ticker auf JEDER Mausbewegung mit — Aufwand fuer Dekoration.

   Nachgesehen: Es gab nirgends `cursor:none`. Der Ring lief also ZUSAETZLICH
   zum echten Mauszeiger, war also nie ein Ersatz, sondern Zierrat.

   Wer ihn zurueckholen will: Commit vor dem 16.08.2026, dazu `main.js`
   Block 12 und das `<div class="ak-cursor" id="akCursor">` auf sieben Seiten. */

/* 06 — Header & Menue ------------------------------------------------
   Kopf nach Vorbild der Fassung A: Wortmarke links, offene Navigation,
   Buchungs-CTA rechts. Der Burger erscheint erst unter 1100px und oeffnet
   dann das Overlay-Menue der Fassung B (mit Bildvorschau).
   -------------------------------------------------------------------- */
.ak-header{
  position:fixed; inset:0 0 auto 0; z-index:500;
  height:var(--header-h);
  display:flex; align-items:center; gap:clamp(16px,2.4vw,40px);
  padding-inline:var(--gutter);
  transition:height .5s var(--ease-io), transform .5s var(--ease-io), background-color .5s var(--ease-out), border-color .5s;
  border-bottom:1px solid transparent;
}
.ak-header.is-solid{height:var(--header-h-solid); background:rgba(6,15,25,.82); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom-color:var(--hair);}
.ak-header.is-up{transform:translateY(-100%);}
/* Lesefortschritt als Haarlinie auf der Header-Unterkante */
.ak-header::after{
  content:''; position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  background:var(--color-accent);
  transform:scaleX(var(--progress,0)); transform-origin:left;
}

/* Ab 1100px steht die Navigation offen, darunter uebernimmt der Burger */
/* Sprachumschalter. Bewusst nur zwei Buchstaben und ohne Rahmen: er steht neben
   der Anfrage-Schaltflaeche und darf ihr nicht die Aufmerksamkeit nehmen. Die
   Beschriftung nennt IMMER die Sprache, in die man wechselt — „EN" auf der
   deutschen Seite, „DE" auf der englischen. Ein Flaggensymbol waere falsch:
   Englisch ist keine Flagge, und Schweizer Gaeste lesen es auch. */
/* Vier Sprachen statt zwei (17.08.2026). Aus dem einzelnen Umschalter ist eine
   Reihe geworden: DE · EN · FR · IT, die laufende Sprache ausgezeichnet.

   Warum eine offene Reihe und kein Aufklappmenue: Ein Menue braucht JavaScript
   oder ein `<details>`, kostet einen Klick mehr und verbirgt genau die
   Information, die der fremdsprachige Gast sucht — naemlich DASS es seine
   Sprache gibt. Vier Kuerzel sind 96 px breit, das ist billiger als jede
   Interaktion.

   Die laufende Sprache steht als `<span>`, nicht als Link. Ein Link auf die
   Seite, auf der man steht, ist eine Sackgasse; `aria-current` sagt es
   zusaetzlich an. */
.ak-langs{
  flex:0 0 auto; display:flex; align-items:center;
  margin-right:clamp(10px,1.4vw,18px);
}
/* 08.09.2026 — die Sprachwahl wandert auf dem Handy ins Menue.
   GEMESSEN bei 390px Kopfbreite: Umschalter 123px, Logo 57px, Knopf 89px, Burger 22px.
   Die Marke war also halb so breit wie die Sprachliste daneben. Im Menue steht sie
   unter der Navigation, wo Platz ist. */
.ak-menu-langs{display:none; margin:26px 0 0;}
/* Im Menue duerfen die Kuerzel groesser tippbar sein — anders als im Kopf ist hier Platz.
   Gemessen waren sie 27x32; mit dem Innenabstand kommen sie auf 44 Hoehe. */
.ak-menu-langs .ak-lang{padding:12px 0; min-width:34px; text-align:center;}
.ak-menu-langs > :not(:first-child){margin-left:12px; padding-left:12px;}
@media (max-width:700px){
  .ak-header > .ak-langs{display:none;}
  .ak-menu-langs{display:flex;}
}
/* Trennstrich zwischen den Kuerzeln, nicht daneben — `:not(:first-child)`
   statt eines Randes an jedem Element, sonst haengt links einer in der Luft. */
.ak-langs > :not(:first-child){
  border-left:1px solid var(--hair);
  margin-left:9px; padding-left:9px;
}
.ak-lang{
  flex:0 0 auto;
  font-size:var(--fs-label); font-weight:600; letter-spacing:.18em;
  color:var(--color-muted); padding:6px 0;
  border-bottom:1px solid transparent;
  transition:color .35s var(--ease-out), border-color .35s var(--ease-out);
}
a.ak-lang:hover,a.ak-lang:focus-visible{color:var(--color-accent-light); border-bottom-color:var(--color-accent);}
/* Laufende Sprache: heller als die anderen, aber ohne Linie — sie ist ein
   Zustand, kein Ziel. */
.ak-lang.is-on{color:var(--color-cream); cursor:default;}

/* 08.09.2026 — Tippflaechen. GEMESSEN bei 390px: Burger 22x33, Schliessen-Knopf 137x22,
   Sprachkuerzel 27x32. Apple nennt 44x44pt als Mindestmass, Google 48dp. Der Burger war
   also das kleinste Ziel der Seite und zugleich das wichtigste — ohne ihn kommt auf dem
   Handy niemand ins Menue.
   Vergroessert wird die FLAECHE, nicht das Aussehen: mehr Innenabstand, per negativem
   Aussenabstand wieder ausgeglichen, damit die Balken optisch dort bleiben, wo sie waren. */
.ak-burger{display:none; align-items:center; gap:13px; padding:10px 0; width:max-content;}
@media (max-width:1100px){
  .ak-burger{padding:16px 11px; margin:-6px -11px -6px 0;}
}
.ak-burger-bars{display:flex; flex-direction:column; gap:5px; width:22px;}
.ak-burger-bars span{display:block; height:1px; background:var(--color-cream); transition:transform .4s var(--ease-io), width .4s var(--ease-io);}
.ak-burger-bars span:nth-child(2){width:14px;}
.ak-burger:hover .ak-burger-bars span:nth-child(2){width:22px;}
.ak-burger-label{font-size:var(--fs-label); font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:rgba(239,231,219,.75);}

.ak-brand{margin-right:auto; display:block;}
/* Die Wortmarke ist dreizeilig (HOTEL / ANKER / LINDAU) und damit fast
   quadratisch: 168px Breite sind 85px Hoehe. Das passt jetzt, weil der Kopf
   112px hoch ist. Beim Scrollen faehrt sie mit dem Kopf zusammen.
   ⚠️ Die Quelldatei ist nur 406px breit — groesser als 176px darf sie nicht
   werden, sonst sieht man die Interpolation. */
.ak-brand img{width:clamp(122px,12vw,168px); height:auto; transition:width .5s var(--ease-io);}
.ak-header.is-solid .ak-brand img{width:clamp(108px,9.6vw,134px);}

.ak-nav{display:flex; align-items:center; gap:clamp(18px,2.3vw,38px);}
.ak-nav a{
  position:relative; padding:9px 0;
  font-size:var(--fs-label); font-weight:600; letter-spacing:.19em; text-transform:uppercase;
  color:rgba(239,231,219,.78);
  transition:color .35s var(--ease-out);
}
/* Unterlinie waechst von links, statt hart zu erscheinen */
.ak-nav a::after{
  content:''; position:absolute; left:0; bottom:2px; width:100%; height:1px;
  background:var(--color-accent);
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease-io);
}
.ak-nav a:hover,.ak-nav a:focus-visible,.ak-nav a[aria-current]{color:var(--color-cream);}
.ak-nav a:hover::after,.ak-nav a:focus-visible::after,.ak-nav a[aria-current]::after{transform:scaleX(1); transform-origin:left;}

.ak-menu{
  position:fixed; inset:0; z-index:700;
  background:var(--color-primary-dark);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--ease-io), visibility 0s linear .8s;
  visibility:hidden;
  display:grid; grid-template-columns:1.1fr .9fr;
}
.ak-menu.is-open{clip-path:inset(0 0 0 0); visibility:visible; transition:clip-path .8s var(--ease-io), visibility 0s;}
.ak-menu-left{display:flex; flex-direction:column; justify-content:center; padding:var(--gutter); padding-block:120px;}
.ak-menu-close{position:absolute; top:26px; right:var(--gutter); display:flex; align-items:center; gap:12px; z-index:3;
  padding:12px 0; margin:-12px 0;}   /* 08.09.2026: 22px hoch gemessen, jetzt 46 */
.ak-menu-close span{font-size:var(--fs-label); font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:rgba(239,231,219,.7);}
.ak-menu-close i{position:relative; width:20px; height:20px; display:block;}
.ak-menu-close i::before,.ak-menu-close i::after{content:''; position:absolute; top:9px; left:0; width:20px; height:1px; background:var(--color-cream); transition:transform .4s var(--ease-io);}
.ak-menu-close i::before{transform:rotate(45deg);}
.ak-menu-close i::after{transform:rotate(-45deg);}
.ak-menu-close:hover i::before{transform:rotate(135deg);}
.ak-menu-close:hover i::after{transform:rotate(45deg);}

.ak-menu-nav{display:flex; flex-direction:column; gap:2px;}
.ak-menu-link{
  position:relative; display:flex; align-items:baseline; gap:20px;
  font-family:var(--font-display); font-size:var(--fs-d2); line-height:1.24;
  color:rgba(239,231,219,.55);
  opacity:0; transform:translateY(26px);
  transition:color .4s var(--ease-out), opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.ak-menu.is-open .ak-menu-link{opacity:1; transform:none; transition-delay:calc(var(--i,0) * 65ms + 260ms);}
.ak-menu-link em{font-family:var(--font-main); font-style:normal; font-size:var(--fs-label); font-weight:600; letter-spacing:.22em; color:var(--color-accent); opacity:0; transition:opacity .35s;}
.ak-menu-link:hover,.ak-menu-link:focus-visible,.ak-menu-link.is-hot{color:var(--color-cream);}
.ak-menu-link:hover em,.ak-menu-link:focus-visible em{opacity:1;}

.ak-menu-foot{margin-top:auto; padding-top:56px; display:flex; flex-wrap:wrap; gap:34px; align-items:flex-end; justify-content:space-between;}
.ak-menu-foot address{font-size:var(--fs-text-s); line-height:1.9; color:rgba(239,231,219,.6);}
.ak-menu-foot address strong{display:block; font-family:var(--font-display); font-size:var(--fs-d4); font-weight:400; color:var(--color-cream); margin-bottom:6px;}

/* Bildvorschau rechts: alle Motive liegen gestapelt, das aktive blendet auf.
   Kein Nachladen beim Hovern, deshalb kein Flackern. */
.ak-menu-media{position:relative; overflow:hidden; background:var(--color-primary);}
.ak-menu-media figure{position:absolute; inset:0; opacity:0; transition:opacity .7s var(--ease-out), transform 1.4s var(--ease-out); transform:scale(1.07);}
.ak-menu-media figure.is-on{opacity:1; transform:scale(1);}
.ak-menu-media img{width:100%; height:100%; object-fit:cover;}
.ak-menu-media::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(4,10,18,.75), rgba(4,10,18,.15));}

/* 07 — Hero & Intro --------------------------------------------------- */
/* `padding-top` in Kopfhoehe ist kein Abstand, sondern eine Sperre (17.08.2026).

   Der Hero richtet seinen Inhalt am UNTEREN Rand aus. Wird der Inhalt hoeher
   als das Fenster — drei Zeilen h1 bei 90 px, Vorspann, Verfuegbarkeits-Leiste —
   waechst er nach OBEN und schiebt sich unter den festen Kopf. Genau das war
   der Fall: die Augenbraue „Herzlich willkommen · Lindau am Bodensee" sass auf
   Hoehe der Wortmarke, und ihre 34-px-Vorlauflinie verlaengerte optisch deren
   Unterstreichung. Bei 1280 px standen „LINDAU (BODENSEE)" und „LINDAU AM
   BODENSEE" fast uebereinander — die Abschnittsmarke las sich als Teil des
   Logos.

   Mit `box-sizing:border-box` reserviert `padding-top` die Kopfhoehe: reicht
   der Platz nicht, waechst der Hero, statt den Inhalt unter den Kopf zu
   schieben. Ein fester `margin` am Text haette dasselbe nur bei genau einer
   Fensterhoehe getan.

   Die 12 px obendrauf sind Luft, keine Willkuer — ohne sie beruehrt die
   Augenbraue die Unterkante des Kopfes bei genau der Hoehe, bei der es kippt. */
.ak-hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  overflow:clip; padding-top:calc(var(--header-h) + 12px);
}
/* Rahmung wie in Fassung A: das Haus soll ganz im Bild stehen.
   `cover` schneidet immer die Achse ab, in der Bild und Kasten am weitesten
   auseinanderliegen. Bei 1600x912 (1:1,75) und einem 16:9-Fenster fehlen
   seitlich rund 9 % — das Haus bleibt komplett. Jedes Prozent Ueberhoehe
   hier kostet dagegen doppelt: der Kasten wird flacher, der seitliche
   Beschnitt groesser. Deshalb nur 4 % statt der frueheren 18 %, und der
   Parallax-Versatz in main.js ist auf denselben Wert gedeckelt. */
.ak-hero-media{position:absolute; left:0; right:0; top:-4%; height:104%; z-index:0; will-change:transform;}
.ak-hero-media img{width:100%; height:100%; object-fit:cover; object-position:center 52%;}
/* Aus demselben Grund faehrt der Ken-Burns im Hero flacher als sonst auf der
   Seite — 11 % Zoom wuerden das Haus wieder anschneiden. */
@keyframes ak-kenburns-hero{from{transform:scale(1) translate3d(0,0,0);} to{transform:scale(1.045) translate3d(0,-.8%,0);}}
.ak-hero .ak-kenburns{animation-name:ak-kenburns-hero;}
/* Das Hausfoto ist hell (gelbe Fassade in der Mittagssonne). Ohne kraeftigen
   Schleier verschwindet die kupferne Zeile darueber komplett — deshalb drei
   Lagen: von unten dunkel hoch, von links ein Lesekeil hinter dem Text, dazu
   eine leichte Vignette. Gemessen am Screenshot, nicht geschaetzt. */
.ak-hero::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(4,10,18,.72) 0%, rgba(4,10,18,.30) 26%, rgba(4,10,18,.72) 66%, rgba(8,19,31,.98) 100%),
    linear-gradient(90deg, rgba(4,10,18,.86) 0%, rgba(4,10,18,.52) 38%, rgba(4,10,18,0) 72%),
    radial-gradient(130% 85% at 50% 40%, transparent 34%, rgba(4,10,18,.55) 100%);
}
/* Unterer Abstand von `clamp(96px,14vh,150px)` heruntergezogen (17.08.2026).

   Direkte Folge der Kopfsperre darueber: Die reservierten 124 px machen den
   Hero hoeher, und weil er den Inhalt am unteren Rand ausrichtet, fiel die
   letzte Zeile („Antwort in der Regel noch am selben Tag. Oder erst die Zimmer
   ansehen") bei 900 px Fensterhoehe unter die Kante. Das ist die Beruhigung
   zum Haupt-CTA — sie gehoert ins erste Bild.

   Der untere Abstand gibt genau das wieder her, was oben reserviert wurde.
   Nachgemessen bei 900 px: alles sichtbar, ohne dass der Hero enger wirkt. */
.ak-hero-inner{position:relative; z-index:2; width:100%; padding-bottom:clamp(64px,8vh,110px);}
.ak-hero h1{max-width:15ch; margin-bottom:26px; color:var(--color-cream);}
.ak-hero h1 .ak-accent{color:var(--color-accent-light);}
.ak-hero-sub{max-width:46ch;}
/* Hier standen bis 15.08.2026 zwei Schaltflaechen aus Fassung A
   (`.ak-hero-actions`). Ersetzt durch die Verfuegbarkeits-Leiste, Abschnitt
   14b — sie nimmt Anreise, Abreise und Personenzahl gleich mit, statt nur
   ans Seitenende zu springen. */

/* Rechts statt mittig: mittig kollidiert der Hinweis mit der Kennzahlen-Zeile
   und mit dem Vorschau-Banner. */
/* Rechts statt mittig: mittig kollidiert der Hinweis mit der Kennzahlen-Zeile
   und mit dem Vorschau-Banner. Text laeuft senkrecht mit. */
.ak-scrollcue{
  position:absolute; right:var(--gutter); bottom:clamp(104px,15vh,160px); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
/* Der Hinweis sagt „scrollen". Sobald gescrollt wurde, hat er seine Aufgabe
   erfuellt und ist nur noch ein Dauerlaeufer im Bild (main.js Block 12).
   `visibility` mit Verzoegerung, damit die Blende noch sichtbar ablaeuft und
   der Puls danach wirklich aufhoert statt unsichtbar weiterzulaufen. */
.ak-scrollcue.is-gone{
  opacity:0; transform:translateY(10px); pointer-events:none;
  visibility:hidden; transition-delay:0s, 0s, .5s;
  transition-property:opacity, transform, visibility;
}
.ak-scrollcue span{
  writing-mode:vertical-rl;
  /* Von .45 auf .60 (17.08.2026). Nachgemessen lag der Hinweis bei
     **3,88:1** gegen den Hintergrund und damit unter der WCAG-AA-Grenze von
     4,5:1 fuer kleinen Text. Er ist zwar Beiwerk und blendet sich nach dem
     ersten Scrollen aus — aber „dekorativ" ist keine Ausnahme in der Norm,
     solange es Text ist, den man lesen soll. .60 ergibt 5,4:1. */
  font-size:var(--fs-label); letter-spacing:.3em; text-transform:uppercase; color:rgba(239,231,219,.60);
}
.ak-scrollcue i{display:block; width:1px; height:54px; background:rgba(239,231,219,.2); overflow:hidden; position:relative;}
.ak-scrollcue i::after{content:''; position:absolute; inset:0; background:var(--color-accent); animation:ak-cue 2.4s var(--ease-io) infinite;}
@keyframes ak-cue{0%{transform:translateY(-100%);}60%,100%{transform:translateY(100%);}}

/* Intro — Text links haengt fest, zwei versetzte Bilder wandern rechts durch */
.ak-intro{padding-block:clamp(96px,13vh,180px); position:relative;}
.ak-intro-grid{display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(40px,7vw,110px); align-items:start;}
.ak-intro-text{position:sticky; top:calc(var(--header-h) + 60px);}
.ak-intro-text h2{margin-bottom:28px;}
.ak-intro-text p + p{margin-top:20px;}
.ak-intro-sign{margin-top:38px; display:flex; align-items:center; gap:18px;}
.ak-intro-sign img{width:118px; height:auto; opacity:.72;}
.ak-intro-sign span{font-size:var(--fs-label); letter-spacing:.2em; text-transform:uppercase; color:var(--color-muted);}
.ak-intro-media{display:grid; gap:clamp(24px,4vw,52px);}
.ak-intro-media .ak-clip:nth-child(2){margin-left:clamp(0px,14%,140px);}
.ak-intro-media img{width:100%; height:100%; object-fit:cover;}

/* Kennzahlen */
.ak-facts{border-block:1px solid var(--hair); background:var(--color-primary-dark);}
.ak-facts-row{display:grid; grid-template-columns:repeat(4,1fr);}
.ak-fact{padding:clamp(38px,5vw,62px) clamp(16px,2.4vw,34px); text-align:center; border-left:1px solid var(--hair);}
.ak-fact:first-child{border-left:0;}
.ak-fact b{
  display:block; font-family:var(--font-display); font-weight:400;
  font-size:var(--fs-d2); line-height:1; color:var(--color-accent-light);
  margin-bottom:12px; font-variant-numeric:tabular-nums;
}
.ak-fact span{display:block; font-size:var(--fs-label); font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--color-muted);}

/* 08 — Zimmer (drei Karten) -------------------------------------------
   Aufbau aus Fassung A: drei Karten nebeneinander, die mittlere angehoben,
   Bild oben mit Preisschild und Fahne, Text unten, Link am Fuss buendig.
   Farben, Schrift und Bewegungen bleiben die der Fassung B.
   Die frueher hier stehende klebende Bildspalte ist ersatzlos weg — mit ihr
   der zugehoerige Beobachter in main.js.
   -------------------------------------------------------------------- */
.ak-rooms{padding-block:clamp(90px,12vh,160px); position:relative; overflow:clip;}
.ak-rooms-head{max-width:56ch; margin-bottom:clamp(48px,7vh,90px);}
.ak-rooms-head-center{max-width:64ch; margin-inline:auto; text-align:center;}
.ak-rooms-head-center .ak-eyebrow{justify-content:center;}
.ak-rooms-head-center .ak-lead{margin:24px auto 0; max-width:54ch;}

/* Kein `align-items:start` — die Karten sollen gleich hoch stehen, sonst enden
   sie je nach Zahl der Merkmal-Pillen auf drei verschiedenen Hoehen. */
/* Seit dem 04.09.2026 stehen hier fuenf Karten statt sieben (die drei
   Doppelzimmer-Fassungen sind zu einer zusammengefasst). Fuenf gehen in drei
   Spalten nicht auf: die letzte Reihe traegt zwei Karten und liesse rechts ein
   Loch. Das Raster laeuft deshalb intern mit sechs Spalten, jede Karte belegt
   zwei — und eine angebrochene Zweierreihe wird um eine halbe Spalte
   eingerueckt, sitzt also mittig. Bei einer vollen Dreierreihe greift die Regel
   nicht, das Bild bleibt also richtig, falls wieder eine Karte dazukommt. */
.ak-rooms-cards{display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(20px,2.4vw,34px);}
.ak-rooms-cards > .ak-roomcard{grid-column:span 2;}
.ak-rooms-cards > .ak-roomcard:nth-last-child(2):nth-child(3n+1){grid-column:2 / span 2;}
.ak-roomcard{
  display:flex; flex-direction:column;
  background:var(--color-surface-alt); border:1px solid var(--hair);
  transition:border-color .55s var(--ease-out), box-shadow .55s var(--ease-out);
}
.ak-roomcard:hover{border-color:rgba(184,131,74,.55); box-shadow:0 40px 70px -42px rgba(4,10,18,.95);}
/* Die mittlere Karte steht hoeher (Fassung A). Bewusst ueber Aussenabstand
   statt `transform`: `.ak-rise.is-in` setzt beim Aufdecken `transform:none`
   und wuerde eine Verschiebung sofort wieder einkassieren. Oben minus, unten
   plus — dadurch bleibt die Karte genauso hoch wie ihre Nachbarn. */
.ak-roomcard-feature{margin-top:-18px; margin-bottom:18px;}
.ak-roomcard-media{aspect-ratio:4/3.2;}
.ak-roomcard-price,.ak-roomcard-flag{
  position:absolute; z-index:2;
  font-size:var(--fs-label); font-weight:600; letter-spacing:.16em; text-transform:uppercase;
}
/* Gestrichelt wie jeder andere Platzhalter auf der Seite: hier steht noch
   keine Zahl, und es soll auch nicht so aussehen. */
.ak-roomcard-price{
  left:14px; bottom:14px;
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 13px; color:var(--color-cream);
  background:rgba(6,15,25,.82); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  border:1px dashed rgba(184,131,74,.6);
}
/* Der Platzhalter im Schild bringt seinen eigenen Rahmen mit — hier stoert
   der Kasten im Kasten, also nur die Farbe behalten. */
.ak-roomcard-price .ak-todo{border:0; padding:0; margin:0; font-size:inherit; letter-spacing:inherit; color:var(--color-accent-light);}
.ak-roomcard-flag{right:14px; top:14px; background:rgba(6,15,25,.72); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);}
.ak-roomcard-body{padding:26px 26px 30px; display:flex; flex-direction:column; flex:1;}
.ak-roomcard-top{display:flex; align-items:baseline; justify-content:space-between; gap:14px;}
.ak-roomcard-top h3{font-size:var(--fs-d4);}
.ak-roomcard-size{font-size:var(--fs-label); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--color-accent); white-space:nowrap;}
.ak-roomcard-body > p{margin:14px 0 22px; font-size:var(--fs-text-s); color:rgba(239,231,219,.68);}
.ak-roomcard .ak-room-specs{margin-bottom:26px;}
.ak-roomcard .ak-link{margin-top:auto; align-self:flex-start;}
/* Knopf + Textlink am Kartenfuss (16.08.2026).

   Das `margin-top:auto` wandert von der Zeile darueber auf diesen Block —
   sonst schoebe der Link innerhalb der Reihe nach unten statt die Reihe an
   den Kartenfuss. So stehen die Fuesse aller drei Karten auf einer Linie,
   auch wenn die Beschreibungen unterschiedlich lang sind.

   UNTEREINANDER, NICHT NEBENEINANDER — und das ist nachgerechnet, nicht
   Geschmack: Knopf 182 px + Abstand 20 px + Link 135 px = 337 px. Die
   Karte im Dreierraster gibt aber nur 328 px Innenbreite her, und zwar bei
   JEDER Desktopbreite (1920 px: 328 · 1440 px: 331 · 1200 px: 289) — das
   Dreierraster wird nicht breiter, weil `--maxw` bei 1360 px deckelt.
   Nebeneinander gesetzt braeche die Zeile also ueberall um, neun Pixel zu
   knapp. Das sieht nach Versehen aus. Gestapelt sieht es nach Absicht aus
   und verhaelt sich auf jeder Breite gleich.
   Wer das aendern will: erst nachmessen, dann anfassen. */
.ak-roomcard-cta{
  margin-top:auto; display:flex; flex-direction:column;
  align-items:flex-start; gap:16px;
}
.ak-roomcard-cta .ak-link{margin-top:0; align-self:flex-start;}

.ak-room-specs{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px;}
.ak-room-specs li{
  padding:8px 15px; border:1px solid var(--hair);
  font-size:var(--fs-label); font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(239,231,219,.72);
  transition:border-color .4s var(--ease-out), color .4s var(--ease-out);
}
.ak-room-specs li:hover{border-color:var(--color-accent); color:var(--color-accent-light);}

/* Ausstattung, die fuer alle Kategorien gilt */
.ak-amenities{margin-top:clamp(56px,8vh,96px); padding-top:44px; border-top:1px solid var(--hair);}
.ak-amenities ul{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:2px 32px;}
.ak-amenities li{
  display:flex; align-items:baseline; gap:12px; padding-block:11px;
  font-size:var(--fs-text-s); color:rgba(239,231,219,.75); border-bottom:1px solid var(--hair);
}
.ak-amenities li::before{content:''; width:5px; height:5px; flex:0 0 5px; background:var(--color-accent); transform:rotate(45deg);}
.ak-note{
  margin-top:26px; padding:16px 20px; border-left:2px solid var(--color-see);
  font-size:var(--fs-mini); color:rgba(239,231,219,.62); background:rgba(92,140,147,.07);
}
/* Ausstattung als Pillenreihe (Fassung A) statt als zweispaltige Liste.
   Inhalt und der ehrliche Treppen-Hinweis bleiben unveraendert. */
.ak-amenities-pills{text-align:center;}
.ak-amenities-pills .ak-eyebrow{justify-content:center;}
.ak-amenities-pills ul{display:flex; flex-wrap:wrap; justify-content:center; gap:11px 12px;}
.ak-amenities-pills li{
  display:inline-flex; align-items:center; padding:10px 18px;
  border:1px solid var(--hair);
  font-size:var(--fs-label); font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(239,231,219,.72);
  transition:border-color .4s var(--ease-out), color .4s var(--ease-out);
}
.ak-amenities-pills li::before{display:none;}
.ak-amenities-pills li:hover{border-color:var(--color-accent); color:var(--color-accent-light);}

/* 04.09.2026 — aufklappbarer Hinweis in einer Pille ("Eigenes Bad im Zimmer").
   Bewusst `details/summary` statt Knopf plus JavaScript: funktioniert ohne
   Skript, ist mit der Tastatur bedienbar, und Vorleseprogramme kennen das
   Element samt Auf-/Zu-Zustand von Haus aus. Die Seite hat kein Inline-Script
   und soll keins bekommen (website_build_rules §8b). */
.ak-sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;}
.ak-hinweis{display:inline; position:relative; margin-left:9px;}
.ak-hinweis > summary{
  display:inline-flex; align-items:center; justify-content:center;
  width:17px; height:17px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(184,131,74,.7); color:var(--color-accent-light);
  font-size:11px; font-weight:700; line-height:1; letter-spacing:0; text-transform:none;
  list-style:none; transition:background .3s var(--ease-out), color .3s var(--ease-out);
}
.ak-hinweis > summary::-webkit-details-marker{display:none;}
.ak-hinweis > summary:hover,
.ak-hinweis[open] > summary{background:var(--color-accent); color:var(--color-bg);}
.ak-hinweis > summary:focus-visible{outline:2px solid var(--color-accent); outline-offset:3px;}
/* Die Pillen stehen in einer zentrierten Flexreihe; das Feld darf sie nicht
   auseinanderdruecken, deshalb liegt es absolut ueber der Reihe. */
.ak-hinweis > p{
  position:absolute; left:50%; top:calc(100% + 12px); transform:translateX(-50%);
  z-index:5; width:max-content; max-width:min(320px, 78vw);
  padding:14px 16px; text-align:left;
  background:var(--color-surface-alt); border:1px solid var(--hair-strong);
  box-shadow:0 26px 50px -30px rgba(4,10,18,.95);
  font-size:var(--fs-mini); font-weight:400; letter-spacing:0; text-transform:none;
  color:var(--color-muted); line-height:1.55;
}
@media (max-width:520px){
  .ak-hinweis > p{position:static; transform:none; width:auto; max-width:none; margin-top:10px;}
}
.ak-amenities-pills .ak-note{max-width:64ch; margin-inline:auto; text-align:left;}

/* 09 — Filmstreifen + Lightbox ----------------------------------------
   Die Sektion ist hoch, der Ausschnitt darin klebt. Aus der Scrollposition
   wird direkt der horizontale Versatz berechnet — keine eigene Animation,
   deshalb laeuft es auch bei ruckartigem Scrollen exakt mit und rueckwaerts
   von selbst richtig herum.
   -------------------------------------------------------------------- */
.ak-strip{position:relative; background:var(--color-primary-dark);}
.ak-strip-sticky{position:sticky; top:0; height:100svh; overflow:hidden; display:flex; flex-direction:column; justify-content:center; scrollbar-width:none;}
.ak-strip-sticky::-webkit-scrollbar{display:none;}
.ak-strip-head{padding:0 var(--gutter) clamp(24px,4vh,44px); display:flex; align-items:flex-end; justify-content:space-between; gap:30px;}
.ak-strip-head h2{max-width:14ch;}
.ak-strip-hint{font-size:var(--fs-label); font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--color-muted); display:flex; align-items:center; gap:12px;}
.ak-strip-hint i{display:block; width:44px; height:1px; background:var(--color-accent); position:relative; overflow:hidden;}
.ak-strip-hint i::after{content:''; position:absolute; inset:0; background:var(--color-cream); animation:ak-hint 2.6s var(--ease-io) infinite;}
@keyframes ak-hint{0%{transform:translateX(-100%);}60%,100%{transform:translateX(100%);}}
.ak-strip-track{display:flex; gap:clamp(16px,2vw,30px); padding-inline:var(--gutter); will-change:transform;}
.ak-strip-item{position:relative; flex:0 0 auto; width:clamp(230px,26vw,400px); height:min(58vh,560px); overflow:hidden; cursor:pointer; background:var(--color-primary-light);}
.ak-strip-item:nth-child(even){align-self:flex-end; height:min(48vh,460px);}
.ak-strip-item img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out), filter .6s var(--ease-out);}
.ak-strip-item:hover img{transform:scale(1.05); filter:brightness(1.08);}
.ak-strip-item figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:22px 20px 16px;
  background:linear-gradient(to top, rgba(4,10,18,.9), transparent);
  font-size:var(--fs-label); font-weight:600; letter-spacing:.16em; text-transform:uppercase;
}
.ak-strip-progress{margin:clamp(20px,3vh,34px) var(--gutter) 0; height:1px; background:var(--hair);}
.ak-strip-progress i{display:block; height:100%; width:100%; background:var(--color-accent); transform:scaleX(var(--p,0)); transform-origin:left;}

.ak-lightbox{
  position:fixed; inset:0; z-index:1100;
  background:rgba(4,10,18,.96); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:grid; place-items:center; padding:clamp(16px,5vw,72px);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease-out), visibility 0s linear .4s;
}
.ak-lightbox.is-open{opacity:1; visibility:visible; transition:opacity .4s var(--ease-out), visibility 0s;}
.ak-lightbox figure{max-width:min(1180px,100%); max-height:100%; display:flex; flex-direction:column; gap:16px;}
.ak-lightbox img{max-height:78vh; width:auto; height:auto; margin-inline:auto; object-fit:contain; opacity:0; transform:scale(.97); transition:opacity .5s var(--ease-out), transform .6s var(--ease-out);}
.ak-lightbox.is-open img{opacity:1; transform:none;}
.ak-lightbox figcaption{text-align:center; font-size:var(--fs-mini); letter-spacing:.18em; text-transform:uppercase; color:var(--color-muted);}
.ak-lb-btn{
  position:absolute; z-index:2; width:52px; height:52px; display:grid; place-items:center;
  border:1px solid var(--hair); color:var(--color-cream);
  transition:border-color .35s var(--ease-out), background-color .35s var(--ease-out);
}
.ak-lb-btn:hover{border-color:var(--color-accent); background:rgba(184,131,74,.12);}
.ak-lb-prev{left:clamp(10px,3vw,40px); top:50%; margin-top:-26px;}
.ak-lb-next{right:clamp(10px,3vw,40px); top:50%; margin-top:-26px;}
.ak-lb-close{right:clamp(10px,3vw,40px); top:clamp(14px,3vw,34px);}

/* 10 — Kulinarik ------------------------------------------------------ */
.ak-dine{position:relative; padding-block:clamp(96px,13vh,170px); background:var(--color-surface-alt); overflow:clip;}
.ak-dine-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,6vw,100px); align-items:center;}
.ak-dine-text h2{margin-bottom:26px;}
.ak-dine-text p + p{margin-top:18px;}
.ak-dine-hours{margin-top:34px; display:grid; gap:2px;}
.ak-dine-hours li{display:flex; justify-content:space-between; gap:24px; padding-block:13px; border-bottom:1px solid var(--hair); font-size:var(--fs-text-s);}
.ak-dine-hours li span{color:rgba(239,231,219,.68);}
.ak-dine-hours li em{font-style:normal; color:var(--color-cream);}
.ak-dine-media{position:relative;}
.ak-dine-media .ak-clip:first-child{width:82%;}
.ak-dine-media .ak-clip:last-child{
  position:absolute; right:0; bottom:-12%; width:52%;
  border:8px solid var(--color-surface-alt);
}
/* Cafe-Sektion (05.09.2026): gleiche Medienanordnung wie oben, aber die Sektion
   liegt auf dem Grundton, nicht auf surface-alt — sonst stuende ein hellerer
   Rahmen um das zweite Bild. */
.ak-cafe-media .ak-clip:last-child{border-color:var(--color-primary);}
/* Instagram-Verweis am Ende der Restaurantseite (07.09.2026). Bewusst klein und
   ruhig: Es ist ein Hinweis, kein Handlungsaufruf — der steht darueber im
   Reservierungs-Knopf. Zurueckhaltende Haarlinie, Kupfer erst beim Hover. */
.ak-social{margin-top:clamp(34px,5vh,58px);}
.ak-social-link{display:inline-flex; align-items:center; gap:11px; padding:12px 22px;
  border:1px solid var(--hair); font-size:var(--fs-label); letter-spacing:.09em;
  text-transform:uppercase; color:rgba(239,231,219,.72); transition:color .35s var(--ease-out), border-color .35s var(--ease-out);}
.ak-social-link svg{width:18px; height:18px; flex:0 0 auto;}
.ak-social-link:hover{color:var(--color-accent-light); border-color:var(--color-accent);}
.ak-social-link:focus-visible{outline:2px solid var(--color-accent-light); outline-offset:3px;}
/* Teller-Reihe */
.ak-plates{margin-top:clamp(70px,10vh,120px);}
.ak-plates-row{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,34px);}
.ak-plates-row .ak-fig{aspect-ratio:3/4;}
.ak-plates-row .ak-fig:nth-child(2){margin-top:clamp(24px,5vw,64px);}

/* 10b — Galerie (Mosaikraster) -----------------------------------------
   Zweite Bildstrecke, uebernommen aus Fassung A. Sie steht bewusst NEBEN
   dem Filmstreifen „Das Haus": beide Loesungen sollen dem Kunden zur Wahl
   gezeigt werden (Entscheidung Owner, 12.08.2026).
   Die Kacheln haengen an `data-lightbox` und werden dadurch von derselben
   Lightbox bedient wie Filmstreifen und Teller — kein zweiter Mechanismus.
   ---------------------------------------------------------------------- */
.ak-gallery{padding-block:clamp(90px,12vh,160px); background:var(--color-surface-alt);}
.ak-gallery-head{max-width:62ch; margin:0 auto clamp(40px,6vh,72px); text-align:center;}
.ak-gallery-head .ak-eyebrow{justify-content:center;}
.ak-gallery-head .ak-lead{margin:24px auto 0; max-width:52ch;}
/* Gleichmaessiges Raster (15.08.2026). Vorgeschichte in zwei Schritten:

   1. Urspruenglich ein 4-Spalten-Gitter mit fester Zeilenhoehe, in dem einzelne
      Kacheln zwei Spalten oder zwei Zeilen ueberspannten. Das geht nur auf, wenn
      die Kachelflaeche durch die Spaltenzahl teilbar ist — bei zwoelf Bildern mit
      einer 2x2-, einer 1x2- und einer 2x1-Kachel sind es 17 Zellen auf 4 Spalten.
      Die restlichen blieben als sichtbare Loecher mitten in der Galerie stehen.
   2. Dann als mehrspaltiges Mauerwerk. Keine Loecher mehr, aber nachgemessen
      1663 / 1648 / 1191 px Spaltenhoehe — die dritte Spalte endete 470 px zu
      frueh, der untere Rand franste aus. Spaltenausgleich kann das nicht besser,
      solange Kacheln nicht umbrechen duerfen.

   Jetzt: alle Kacheln 4:3, zwoelf Stueck. Zwoelf ist durch 4, 3, 2 und 1 teilbar,
   also geht das Raster auf JEDER Breite exakt auf — drei Reihen zu vier, vier zu
   drei, sechs zu zwei. Preis dafuer ist der Beschnitt bei Hochformaten; das
   vollstaendige Bild zeigt die Lightbox. */
.ak-gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1vw,16px);}
.ak-g{position:relative; aspect-ratio:4/3; overflow:hidden; cursor:pointer; background:var(--color-primary-light);}
.ak-g img{display:block; width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out);}
/* Plus-Zeichen beim Ueberfahren — das Erkennungszeichen der Fassung A */
.ak-g::after{
  content:'+'; position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-display); font-size:40px; line-height:1;
  color:var(--color-cream); background:rgba(4,10,18,.42);
  opacity:0; transition:opacity .45s var(--ease-out);
}
.ak-g:hover img{transform:scale(1.07);}
.ak-g:hover::after,.ak-g:focus-visible::after{opacity:1;}
/* `.ak-g-big/-tall/-wide` sind mit dem Mauerwerk gegenstandslos geworden und
   aus dem Markup entfernt. Die Klassen bleiben absichtlich undefiniert. */

/* 11 — Lindau ---------------------------------------------------------- */
.ak-place{padding-block:clamp(96px,13vh,170px);}
.ak-place-grid{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(40px,6vw,96px); align-items:center;}
.ak-map{position:relative; aspect-ratio:4/3; border:1px solid var(--hair); background:var(--color-primary-dark); overflow:hidden;}
.ak-map svg{width:100%; height:100%;}

/* ── Die Karte zeichnet sich (16.08.2026) ──────────────────────────────────
   Dieselbe Geste wie der Anker im Preloader: `stroke-dasharray` auf die per
   `getTotalLength()` GEMESSENE Pfadlaenge, `stroke-dashoffset` faehrt auf 0.
   Auch dieselbe Kurve — `--ease-soft` war bis heute genau einmal im ganzen
   Projekt benutzt, naemlich fuer den Anker.

   Das ist der Punkt: Der Preloader zeichnet den Anker eine Sekunde lang und
   danach kam die Geste nie wieder vor. Jetzt taucht sie an der Stelle wieder
   auf, an der die Seite den Ort selbst zeigt. Eine Handschrift, die aus dem
   Logo kommt — nicht aus dem Effektkasten.

   Reihenfolge ist inhaltlich, nicht technisch: erst der Inselumriss (der Ort),
   dann die Gassen (die Wege), dann die Wasserlinien (der See). Gesetzt wird
   sie ueber `--od` je Pfad in main.js Block 18.

   `--len` kommt aus dem JS. Der Rueckfall `0` ist Absicht: `stroke-dasharray:0`
   heisst „keine Strichelung", die Karte steht dann fertig da. Ohne JavaScript
   fehlt also die Animation, nie die Karte. */
.ak-map svg path[stroke]{
  stroke-dasharray:var(--len,0); stroke-dashoffset:var(--len,0);
}
.ak-map.is-in svg path[stroke]{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1.6s var(--ease-soft);
  transition-delay:var(--od,0ms);
}
/* Beschriftung und Marken kommen NACH den Linien — eine Karte, deren Namen vor
   ihren Wegen dastehen, liest sich verkehrt herum.

   Die Standortnadel ist ausgenommen: ihr `opacity=".55"` im Markup und die
   Blende in `ak-pin` steuern sie selbst — eine Deckkraft von aussen wuerde
   beides ueberschreiben und den Ring hart aufblitzen lassen. */
.ak-map svg text,.ak-map svg circle:not(.ak-map-pin),.ak-map svg rect{
  opacity:0; transition:opacity .7s var(--ease-out) 1.5s;
}
.ak-map.is-in svg text,.ak-map.is-in svg circle:not(.ak-map-pin),.ak-map.is-in svg rect{opacity:1;}
/* Die Standortnadel pulsiert erst, wenn gezeichnet ist — sonst pocht sie
   ueber einer leeren Flaeche. */
/* Fassung der Buchungsmaske (28.08.2026).

   Das Innere der Maske gehoert SoftTec und ist von hier nicht gestaltbar
   (fremdes iframe). Gestaltbar ist, wie sie in der Seite sitzt. Vorher war
   das ein weisser Kasten mit grauer Kante mitten in einer dunklen Seite --
   eine harte Naht. Jetzt liegt die weisse Maske in einer dunklen Fassung mit
   kupferner Haarlinie: derselbe Bruch, aber sichtbar gewollt.

   Die Hoehe ist nach unten offen gehalten. Die Maske waechst mit ihren
   Schritten, und ein zu knapper Rahmen erzeugt einen zweiten Scrollbalken
   im Scrollbalken. */
.ak-ibe{
  padding:clamp(10px,1.4vw,18px);
  background:linear-gradient(180deg, rgba(239,231,219,.07), rgba(239,231,219,.02));
  border:1px solid rgba(184,131,74,.30);
  border-radius:calc(var(--radius) + 10px);
  box-shadow:0 26px 64px rgba(0,0,0,.34);
}
.ak-ibe-innen{background:#fff; border-radius:var(--radius); overflow:hidden;}
.ak-ibe iframe{display:block; width:100%; border:0; min-height:720px;}
@media (min-width:900px){ .ak-ibe iframe{min-height:900px;} }
.ak-ibe noscript p{padding:24px; margin:0;}

/* Einwilligungsband fuer die Google-Karte (28.08.2026, Fassung B).
   Schmales Band unten statt Vollbild-Overlay: Der Besucher sieht die Seite
   sofort, und die Entscheidung ist trotzdem nicht zu uebersehen. Beide
   Knoepfe gleich gross -- eine schwerer zu treffende Ablehnung waere keine
   freiwillige Einwilligung. */
.ak-consent{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:14px 26px; padding:18px clamp(16px,4vw,40px);
  background:rgba(12,18,26,.96); border-top:1px solid var(--hair);
  box-shadow:0 -12px 34px rgba(0,0,0,.28);
}
.ak-consent p{margin:0; max-width:76ch; font-size:13.5px; line-height:1.6; color:#cfd6df;}
.ak-consent a{color:#d8a56a; text-decoration:underline; text-underline-offset:3px;}
.ak-consent-actions{display:flex; flex-wrap:wrap; gap:12px;}
.ak-consent-actions .ak-btn{min-width:158px; justify-content:center;}
/* 08.09.2026 — kompakter, weil das Band 32 % des Handybildschirms einnahm und die
   Hero-Schaltflaechen verdeckte. Weniger Innenabstand, kleinere Schrift, engere Zeilen
   und die beiden Knoepfe nebeneinander statt untereinander. */
@media (max-width:640px){
  .ak-consent{flex-direction:column; align-items:stretch; text-align:left;
    gap:10px; padding:13px clamp(14px,4vw,20px);}
  .ak-consent p{font-size:12.5px; line-height:1.45;}
  .ak-consent-actions{flex-wrap:nowrap; gap:9px;}
  .ak-consent-actions .ak-btn{min-width:0; padding:11px 10px; font-size:10.5px; letter-spacing:.06em;}
  .ak-consent-actions{justify-content:stretch;}
  .ak-consent-actions .ak-btn{flex:1 1 auto;}
}

/* Klick-Freigabe der Google-Karte (28.08.2026). Liegt ueber der eigenen SVG,
   damit die Vorschau sichtbar bleibt und nichts springt, wenn die Karte laedt. */
.ak-map-consent{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; padding:24px;
  text-align:center; background:rgba(12,18,26,.72); backdrop-filter:blur(2px);
}
.ak-map-consent p{max-width:42ch; margin:0; font-size:14px; line-height:1.55; color:#cfd6df;}
.ak-map-consent-actions{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 20px;}
.ak-map.is-geladen{aspect-ratio:auto;}
.ak-map iframe{display:block; width:100%; height:clamp(320px,46vh,460px); border:0;}
@media (prefers-reduced-motion:reduce){.ak-map-consent{backdrop-filter:none;}}

/* Platzhalter, wo ein Zimmerfoto noch fehlt (28.08.2026). Bewusst sichtbar
   und nicht kaschiert: Die Luecke soll im Kundengespraech auffallen, nicht
   still bleiben — dieselbe Regel wie beim Preisschild. */
.ak-media-todo{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:4/3; background:rgba(255,255,255,.03);
  border:1px dashed rgba(184,131,74,.45);
}
.ak-media-todo .ak-todo{font-size:13px; letter-spacing:.04em;}
.ak-media-todo figcaption{position:absolute; left:0; right:0; bottom:0;}

.ak-map-pin{transform-box:fill-box; transform-origin:center; animation:none;}
.ak-map.is-in .ak-map-pin{animation:ak-pin 2.8s var(--ease-out) 2.2s infinite;}
@keyframes ak-pin{0%{transform:scale(.5); opacity:.75;} 100%{transform:scale(3); opacity:0;}}
.ak-dist{display:grid; gap:0;}
.ak-dist li{
  display:grid; grid-template-columns:1fr auto; gap:20px; align-items:baseline;
  padding-block:15px; border-bottom:1px solid var(--hair);
  transition:padding-left .4s var(--ease-out), border-color .4s var(--ease-out);
}
.ak-dist li:first-child{border-top:1px solid var(--hair);}
.ak-dist li:hover{padding-left:10px; border-color:var(--color-accent);}
.ak-dist b{font-weight:500; font-size:var(--fs-text-s); color:var(--color-cream);}
.ak-dist span{font-size:var(--fs-mini); letter-spacing:.14em; color:var(--color-accent); font-variant-numeric:tabular-nums;}
.ak-dist-group{margin-top:38px;}
/* `.ak-dist-h` traegt dieselbe Optik als h2 — auf der Fehlerseite folgt die
   Liste direkt auf die h1, dort waere ein h3 ein uebersprungener Rang. */
.ak-dist-group > h3,.ak-dist-h{font-size:var(--fs-mini); font-family:var(--font-main); font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--color-muted); margin-bottom:14px;}

/* 12 — Gut zu wissen (Akkordeon) --------------------------------------- */
.ak-know{padding-block:clamp(90px,12vh,160px); background:var(--color-primary-dark);}
.ak-know-grid{display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:clamp(36px,6vw,90px); align-items:start;}
.ak-acc{border-top:1px solid var(--hair);}
.ak-acc-item{border-bottom:1px solid var(--hair);}
.ak-acc-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:26px;
  padding-block:24px; text-align:left;
  font-family:var(--font-display); font-size:var(--fs-d4); line-height:1.3;
  color:rgba(239,231,219,.85);
  transition:color .35s var(--ease-out);
}
.ak-acc-btn:hover{color:var(--color-accent-light);}
.ak-acc-sign{position:relative; flex:0 0 16px; width:16px; height:16px;}
.ak-acc-sign::before,.ak-acc-sign::after{content:''; position:absolute; background:var(--color-accent); transition:transform .45s var(--ease-io);}
.ak-acc-sign::before{top:7.5px; left:0; width:16px; height:1px;}
.ak-acc-sign::after{left:7.5px; top:0; width:1px; height:16px;}
.ak-acc-item.is-open .ak-acc-sign::after{transform:scaleY(0);}
/* `height:0` versteckt nur fuers Auge (17.08.2026).

   Der Text bleibt im Zugaenglichkeitsbaum: ein Screenreader liest alle sieben
   Antworten vor, ob das Akkordeon offen ist oder nicht. Aus „sieben Fragen" wird
   damit ein Block aus sieben Fragen UND sieben Antworten, in dem niemand mehr
   findet, was er gesucht hat.

   `visibility:hidden` nimmt den Inhalt heraus. Fokussierbare Elemente stehen
   keine drin (nachgezaehlt: null), es ging also nie um eine Tastaturfalle —
   nur ums Vorlesen.

   Die Verzoegerung ist der Kniff: `visibility` schaltet hart, nicht weich.
   Beim Oeffnen muss sie SOFORT auf `visible` (sonst faellt die
   Aufklapp-Animation ins Leere), beim Schliessen erst NACH den 0,5 s (sonst
   verschwindet der Text, bevor die Hoehe zusammengefahren ist). Deshalb steht
   die Verzoegerung in der Grundregel und wird in `.is-open` auf 0 gesetzt. */
.ak-acc-panel{
  overflow:hidden; height:0; visibility:hidden;
  transition:height .5s var(--ease-io), visibility 0s linear .5s;
}
.ak-acc-item.is-open > .ak-acc-panel{
  visibility:visible;
  transition:height .5s var(--ease-io), visibility 0s linear 0s;
}
.ak-acc-panel > div{padding-bottom:26px; max-width:60ch; color:rgba(239,231,219,.66); font-size:var(--fs-text-s);}

/* 13 — Laufband --------------------------------------------------------- */
.ak-marquee{border-block:1px solid var(--hair); padding-block:clamp(22px,3vh,34px); overflow:hidden; background:var(--color-surface);}
.ak-marquee-track{display:flex; align-items:center; gap:clamp(28px,4vw,60px); width:max-content; animation:ak-marquee 46s linear infinite;}
.ak-marquee:hover .ak-marquee-track{animation-play-state:paused;}
.ak-marquee-track span{
  font-family:var(--font-display); font-size:var(--fs-d3);
  letter-spacing:.1em; color:rgba(239,231,219,.42); white-space:nowrap;
}
.ak-marquee-track svg{width:16px; height:auto; color:var(--color-accent); flex:0 0 auto;}
@keyframes ak-marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* 14 — Anfrage, Footer, Unterseiten ------------------------------------- */
.ak-ask{position:relative; padding-block:clamp(96px,13vh,170px); overflow:clip;}
.ak-ask-bg{position:absolute; inset:0; z-index:0;}
.ak-ask-bg img{width:100%; height:100%; object-fit:cover; opacity:.20;}
.ak-ask-bg::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, var(--color-surface) 0%, rgba(8,19,31,.72) 45%, var(--color-surface) 100%);}
.ak-ask > .ak-wrap{position:relative; z-index:1;}
.ak-ask-grid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(40px,6vw,96px); align-items:start;}
.ak-ask-side address{font-size:var(--fs-text-s); line-height:2.05; color:rgba(239,231,219,.72);}
.ak-ask-side address strong{display:block; font-family:var(--font-display); font-size:var(--fs-d3); font-weight:400; color:var(--color-cream); margin-bottom:8px;}
.ak-ask-side a:hover{color:var(--color-accent-light);}
/* Noch nicht gelieferte Angaben sichtbar als Platzhalter, nicht erfunden */
.ak-todo{
  display:inline-block; padding:2px 10px; margin-left:2px;
  border:1px dashed rgba(184,131,74,.6); border-radius:2px;
  font-size:var(--fs-label); letter-spacing:.1em; text-transform:uppercase; color:var(--color-accent);
}

.ak-form{display:grid; grid-template-columns:1fr 1fr; gap:26px 24px;}
.ak-field{display:flex; flex-direction:column; gap:9px;}
.ak-field-wide{grid-column:1 / -1;}
.ak-field label{font-size:var(--fs-label); font-weight:600; letter-spacing:.19em; text-transform:uppercase; color:var(--color-muted);}
.ak-field input,.ak-field select,.ak-field textarea{
  background:transparent; border:0; border-bottom:1px solid var(--hair);
  padding:11px 0; font-size:var(--fs-text-s); font-weight:300; color:var(--color-cream);
  color-scheme:dark; resize:vertical;
  transition:border-color .4s var(--ease-out);
}
.ak-field select{cursor:pointer;}
.ak-field select option{background:var(--color-primary-dark); color:var(--color-cream);}
.ak-field input::placeholder,.ak-field textarea::placeholder{color:rgba(239,231,219,.35);}
.ak-field input:focus,.ak-field select:focus,.ak-field textarea:focus{outline:none; border-bottom-color:var(--color-accent);}
.ak-consent{grid-column:1 / -1; display:flex; gap:13px; align-items:flex-start; font-size:var(--fs-mini); color:rgba(239,231,219,.62);}
.ak-consent input{width:17px; height:17px; flex:0 0 17px; margin-top:3px; accent-color:var(--color-accent);}
.ak-consent a{border-bottom:1px solid var(--color-accent);}
.ak-form-submit{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:20px; align-items:center; margin-top:6px;}
.ak-form-note{font-size:var(--fs-mini); color:var(--color-muted);}
.ak-hp{position:absolute!important; left:-9999px; opacity:0;}

.ak-confirm{border:1px solid var(--color-accent); padding:clamp(28px,4vw,48px); text-align:center;}
.ak-confirm h3{margin-bottom:14px; color:var(--color-accent-light);}
.ak-confirm p{color:rgba(239,231,219,.72);}

.ak-footer{background:var(--color-primary-dark); border-top:1px solid var(--hair); padding-top:clamp(56px,8vh,88px);}
.ak-footer-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr 1.1fr; gap:44px; padding-bottom:clamp(40px,6vh,64px);}
.ak-footer-brand img{width:150px; height:auto; margin-bottom:20px; opacity:.9;}
.ak-footer-brand p{font-size:var(--fs-mini); color:var(--color-muted); max-width:32ch;}
.ak-footer .ak-foot-h{font-family:var(--font-main); font-size:var(--fs-label); font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--color-accent); margin-bottom:18px;}
.ak-footer nav{display:flex; flex-direction:column; gap:11px;}
.ak-footer nav a{font-size:var(--fs-text-s); color:rgba(239,231,219,.66); transition:color .3s var(--ease-out), padding-left .3s var(--ease-out);}
.ak-footer nav a:hover{color:var(--color-cream); padding-left:5px;}
.ak-footer address{font-size:var(--fs-text-s); line-height:1.95; color:rgba(239,231,219,.66);}
.ak-footer address a:hover{color:var(--color-accent-light);}
.ak-footer-legal{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px;
  padding:22px var(--gutter); border-top:1px solid var(--hair);
  font-size:var(--fs-mini); color:var(--color-muted); max-width:var(--maxw); margin:0 auto;
}
.ak-footer-legal nav{flex-direction:row; gap:22px;}

/* Kopf der Unterseiten */
.ak-page-hero{position:relative; min-height:clamp(380px,56svh,620px); display:flex; align-items:flex-end; overflow:clip;}
.ak-page-hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
/* Der Seiten-Hero ist sehr breit (bei 900 px Fensterhoehe rund 1440x504, also
   1:2,9). `cover` skaliert ein 1:1,68-Bild deshalb auf 860 px Hoehe und
   schneidet oben wie unten je ein gutes Fuenftel weg. Bei `amaris-saal-spiegel`
   liegt genau dort das Motiv: die vier beleuchteten Rundspiegel sitzen im
   oberen Drittel. `--hero-pos` verschiebt den sichtbaren Ausschnitt nach oben,
   ohne die anderen Seiten-Heros anzufassen (die bleiben bei 50 %). */
.ak-page-hero img{object-position:50% var(--hero-pos,50%);}
.ak-page-hero::before{content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(4,10,18,.7) 0%, rgba(4,10,18,.3) 45%, rgba(8,19,31,.96) 100%);}
.ak-page-hero .ak-wrap{position:relative; z-index:2; padding-bottom:clamp(44px,7vh,80px); width:100%;}
.ak-crumbs{display:flex; gap:10px; font-size:var(--fs-label); letter-spacing:.18em; text-transform:uppercase; color:var(--color-muted); margin-bottom:20px;}
.ak-crumbs a:hover{color:var(--color-accent-light);}
.ak-section{padding-block:clamp(80px,11vh,150px);}
.ak-section-alt{background:var(--color-surface-alt);}
/* Die eine helle Sektion — bewusst Einzelstueck, siehe Kopfkommentar */
.ak-section-warm{background:var(--color-surface-warm); color:var(--color-ink);}
.ak-section-warm h1,.ak-section-warm h2,.ak-section-warm h3{color:var(--color-ink);}
.ak-section-warm p{color:var(--color-muted-warm);}
.ak-section-warm .ak-eyebrow{color:var(--color-accent-dark);}
.ak-section-warm .ak-btn{--btn-fg:var(--color-ink); --btn-bd:var(--color-ink);}
.ak-section-warm .ak-btn::before{background:var(--color-ink);}
.ak-section-warm .ak-btn:hover{color:var(--color-surface-warm);}
.ak-section-warm .ak-link{color:var(--color-ink);}
.ak-section-warm .ak-dist li,.ak-section-warm .ak-amenities li{border-color:var(--hair-dark);}
.ak-section-warm .ak-dist b{color:var(--color-ink);}
.ak-section-warm .ak-dist span{color:var(--color-accent-dark);}

/* Preis-/Kategoriekarten auf zimmer.html */
.ak-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px);}
.ak-card{display:flex; flex-direction:column;}
.ak-card .ak-fig{aspect-ratio:4/3; margin-bottom:22px;}
.ak-card h3{margin-bottom:10px;}
.ak-card p{font-size:var(--fs-text-s); color:rgba(239,231,219,.68); margin-bottom:18px;}
.ak-card ul{margin-bottom:22px; display:grid; gap:7px;}
.ak-card ul li{font-size:var(--fs-mini); color:rgba(239,231,219,.72); display:flex; gap:10px;}
.ak-card ul li::before{content:'—'; color:var(--color-accent);}
.ak-card .ak-btn{margin-top:auto; align-self:flex-start;}

/* Fliesstext auf den Rechtsseiten */
.ak-prose{max-width:74ch;}
.ak-prose h2{font-size:var(--fs-d3); margin:46px 0 14px;}
.ak-prose h3{font-size:var(--fs-d4); margin:28px 0 8px;}
/* 07.09.2026 — h4 kam mit der eRecht24-Datenschutzfassung dazu (》Wer ist
   verantwortlich?《 und die drei folgenden Fragen). Ohne eigene Regel klebte die
   Frage am Absatz darueber und war als Ueberschrift nicht zu erkennen. */
.ak-prose h4{font-size:var(--fs-text); font-family:var(--font-main); font-weight:600;
  color:var(--color-cream); margin:22px 0 6px;}
/* Lange Rechtstext-Links (Datenschutzerklaerungen der Anbieter, Standardvertrags-
   klauseln) sind bis zu 70 Zeichen lang und stehen als sichtbarer Text da. Ohne
   Umbruchregel schieben sie die Textspalte auf und erzeugen waagerechtes Scrollen. */
.ak-prose a{overflow-wrap:anywhere;}
.ak-prose p,.ak-prose li{color:rgba(239,231,219,.7); font-size:var(--fs-text-s);}
.ak-prose p + p{margin-top:14px;}
.ak-prose ul{margin-top:12px; display:grid; gap:8px;}
.ak-prose ul li{position:relative; padding-left:20px;}
.ak-prose ul li::before{content:'—'; position:absolute; left:0; color:var(--color-accent);}
.ak-prose a{border-bottom:1px solid var(--color-accent);}
.ak-prose address{margin-top:10px; line-height:1.9; color:rgba(239,231,219,.78);}

.ak-toast{
  position:fixed; left:50%; bottom:30px; z-index:1000; transform:translate(-50%,18px);
  background:var(--color-cream); color:var(--color-ink);
  padding:15px 26px; font-size:var(--fs-text-s); font-weight:500;
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility 0s linear .35s;
}
.ak-toast.is-on{opacity:1; visibility:visible; transform:translate(-50%,0); transition:opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility 0s;}


/* 14b — Handlungsaufforderung im Hero ------------------------------------
   Hier stand bis zum 02.09.2026 eine Verfuegbarkeits-Leiste mit drei
   Eingabefeldern. Sie ist samt ihrer Regeln entfallen, weil die Eingaben
   nirgendwo ankamen — Begruendung im Markup von `index.html`.

   Die Haarlinie darueber bleibt: sie trennt die Handlungsaufforderung vom
   Fliesstext, ohne einen gefuellten Kasten in den Bildaufbau zu setzen. Ein
   Knopfpaar im Portal-Look wuerde den Hero zerschneiden.
   -------------------------------------------------------------------------- */
.ak-hero-cta{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  margin-top:40px; padding-top:30px; border-top:1px solid var(--hair);
}
.ak-hero-alt{margin-top:18px; font-size:var(--fs-mini); color:var(--color-muted);}

/* Wortmarke des Amaris auf der Restaurantseite. 160px bei 254px Quelle laesst
   Reserve fuer scharfe Bildschirme. */
.ak-amaris-mark{display:block; width:160px; height:auto; margin:18px 0 22px;}

/* 14e — Speisekarte -------------------------------------------------------
   Gerichtname links, Preis rechts, Zutatenzeile darunter — der Aufbau, den
   jeder von einer gedruckten Karte kennt. Die Fuehrungslinie zwischen Name
   und Preis macht `p` als Flex mit einer Trennlinie dazwischen; ein
   gepunkteter Fuehrungspunkt-Effekt waere Spielerei und liest sich schlechter.

   Zwei Spalten ab 900px, sonst eine. Die Gruppen brechen NICHT ueber
   Spalten um (`break-inside`), sonst steht „Dessert" oben und seine drei
   Gerichte in der anderen Spalte.
   -------------------------------------------------------------------------- */
.ak-karte{margin-top:clamp(40px,6vh,68px); columns:2; column-gap:clamp(38px,5vw,84px);}
.ak-karte-gruppe{break-inside:avoid; -webkit-column-break-inside:avoid; margin-bottom:clamp(34px,4.5vh,54px);}
.ak-karte-gruppe h3{
  font-size:var(--fs-d4); margin-bottom:18px; padding-bottom:10px;
  border-bottom:1px solid var(--color-accent); color:var(--color-accent-light);
}
.ak-karte-gruppe ul{display:grid; gap:20px;}
.ak-karte-gruppe li{display:block;}
.ak-karte-gruppe li p{
  display:flex; align-items:baseline; gap:12px;
  font-family:var(--font-display); font-size:var(--fs-lead); line-height:1.3;
}
.ak-karte-gruppe li b{font-weight:400; color:var(--color-cream);}
/* Die Linie fuellt den Rest der Zeile und schiebt den Preis nach rechts */
.ak-karte-gruppe li p::after{content:''; flex:1 1 auto; height:1px; background:var(--hair); transform:translateY(-3px);}
.ak-karte-gruppe li p span{order:3; flex:0 0 auto; color:var(--color-accent-light); font-variant-numeric:tabular-nums; white-space:nowrap;}
.ak-karte-gruppe li em{display:block; margin-top:7px; font-style:normal; font-size:var(--fs-mini); line-height:1.55; color:rgba(239,231,219,.55);}

/* 14d — Gästestimmen (Google) --------------------------------------------
   Vorbild ist der helle Karten-Look der SHK-Vorlage, uebersetzt in die
   Farbwelt B: Karten auf `surface-alt` statt Weiss, Haarlinien statt
   Schlagschatten, Sterne in Kupfer statt Gelb. Nur das Google-G behaelt
   seine Originalfarben — ein umgefaerbtes Logo waere kein Herkunftsnachweis
   mehr, und genau darum geht es an dieser Stelle.
   -------------------------------------------------------------------------- */
.ak-reviews{padding-block:clamp(80px,11vh,140px); background:var(--color-surface-alt); overflow:hidden;}
/* Kopf ohne Breitenbegrenzung — die Begrenzung sitzt an den Textelementen
   selbst. Lag sie am Kopf, quetschte sie das Abzeichen auf drei Zeilen:
   „Schnitt folgt"/„Anzahl folgt" sind als Platzhalter deutlich breiter als
   die echten Werte („5,0", „312 Bewertungen") es spaeter sein werden. */
.ak-rv-head{text-align:center;}
.ak-rv-head h2{max-width:22ch; margin-inline:auto;}

/* Herkunftszeile — seit 16.08.2026 anstelle des Abzeichens (Variante 1).
   Sie nennt die Quelle, ohne eine Bewertungszahl zu behaupten. */
.ak-rv-quelle{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:clamp(22px,3.2vh,32px);
  font-size:var(--fs-mini); letter-spacing:.02em; color:rgba(239,231,219,.66);
}

/* `.ak-rv-paar` (zentriertes Kartenpaar) stand hier vom 16. bis 17.08.2026 und
   ist raus — das Laufband ist zurueck, weil es jetzt zehn Zitate traegt.

   Warum es ueberhaupt weg war: Der Track laeuft `0 → -50 %`, die Karten stehen
   zweimal drin, und die HALBE Trackbreite muss mindestens Fensterbreite haben.
   Bei zwei Zitaten waren das 730 px gegen 1920 px Bildschirm — ab der Haelfte
   lief eine Luecke mit. Bei zehn Zitaten sind es 20 Karten, Track rund 7300 px,
   Haelfte ~3660 px. Nachgerechnet bei 1280 / 1440 / 1920 / 2560 px: traegt
   ueberall.

   Merksatz fuer den naechsten Fall: Die Grenze ist nicht die Zahl der Zitate,
   sondern das Verhaeltnis von halber Trackbreite zu Fensterbreite. Mit vier
   Zitaten haette es auch gegangen — dreimal statt zweimal setzen und die Kehre
   auf -33,333 % statt -50 %. Das war der Denkfehler vom 16.08.

   Wer das Paar zurueckholen will: Commit vor dem 17.08.2026, abends. */
.ak-rv-quelle-mini{
  display:block; margin-top:2px; font-size:var(--fs-mini); color:var(--color-muted);
}

/* Abzeichen: eine Zeile, faellt auf schmalen Geraeten in mehrere um.
   ⚠️ Seit 16.08.2026 NICHT mehr im Markup — bleibt hier stehen, weil das
   Abzeichen zurueckkommt, sobald das Haus einen Schnitt zeigen will. */
.ak-rv-badge{
  display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:12px 16px; margin-top:clamp(26px,4vh,38px);
  padding:14px clamp(18px,2.6vw,30px);
  border:1px solid var(--hair); background:rgba(4,10,18,.5);
}
.ak-rv-g{display:inline-flex; flex:0 0 auto;}
.ak-rv-badge-src{font-size:var(--fs-label); font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:rgba(239,231,219,.72);}
.ak-rv-sep{width:1px; height:22px; background:var(--hair-strong); flex:0 0 auto;}
.ak-rv-score{font-family:var(--font-display); font-size:var(--fs-d3); line-height:1; color:var(--color-accent-light);}
/* Teilweise gefuellte Sternleiste: graue Sterne als Grund, darueber dieselben
   Sterne in Kupfer, auf `--anteil` beschnitten. Rein visuell — die Zahl steht
   daneben, und `aria-label` sagt sie noch einmal. */
.ak-rv-stars{
  position:relative; display:inline-block; white-space:nowrap;
  color:rgba(239,231,219,.20); letter-spacing:.12em; font-size:var(--fs-text-s); line-height:1;
}
.ak-rv-stars::before{content:'★★★★★';}
.ak-rv-stars i{
  position:absolute; left:0; top:0; overflow:hidden;
  width:var(--anteil,100%); color:var(--color-accent); font-style:normal;
}
.ak-rv-count{font-size:var(--fs-mini); color:var(--color-muted);}

/* Hinweisstreifen. Faellt bewusst auf — er verschwindet erst, wenn echte
   Bewertungen drinstehen (siehe Kommentar im Markup). */

/* Laufband — gleiche Technik wie `.ak-marquee`: Inhalt steht zweimal im
   Track, die Kehre laeuft von 0 auf -50 % und ist dadurch nahtlos. */
.ak-rv-lane{margin-top:clamp(36px,5vh,58px); position:relative;}
/* Weiche Kanten links und rechts, damit die Karten nicht abgeschnitten
   wirken, sondern aus dem Rand heraus- und wieder hineinlaufen. */
.ak-rv-lane::before,.ak-rv-lane::after{
  content:''; position:absolute; top:0; bottom:0; width:clamp(40px,8vw,140px); z-index:2; pointer-events:none;
}
.ak-rv-lane::before{left:0;  background:linear-gradient(90deg, var(--color-surface-alt), transparent);}
.ak-rv-lane::after{right:0; background:linear-gradient(270deg, var(--color-surface-alt), transparent);}
/* Abstand als `margin-right` an der Karte, NICHT als `gap` am Track — und
   kein `padding` am Track. Sonst geht die Kehre nicht auf: bei acht Karten
   liegen sieben Luecken, die Wiederholeinheit braucht aber vier. Die
   -50-%-Kehre landet dann um eine halbe Luecke daneben und das Band
   springt bei jedem Durchlauf sichtbar. Mit margin ist die Einheit
   4 × (Karte + Abstand) und die Haelfte exakt. */
.ak-rv-track{display:flex; width:max-content; animation:ak-rv-run 64s linear infinite;}
.ak-rv-lane:hover .ak-rv-track,.ak-rv-lane:focus-within .ak-rv-track{animation-play-state:paused;}
@keyframes ak-rv-run{from{transform:translateX(0);} to{transform:translateX(-50%);}}

.ak-rv-card{
  flex:0 0 auto; width:clamp(268px,25vw,340px);
  margin-right:clamp(16px,2vw,26px);
  padding:clamp(20px,2.2vw,28px);
  border:1px solid var(--hair); background:var(--color-surface);
  transition:border-color .5s var(--ease-out);
}
.ak-rv-lane:hover .ak-rv-card{border-color:var(--hair-strong);}
.ak-rv-top{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.ak-rv-top > div{flex:1 1 auto; min-width:0;}
.ak-rv-top b{display:block; font-size:var(--fs-text-s); font-weight:600; color:var(--color-cream); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ak-rv-top time{display:block; margin-top:2px; font-size:var(--fs-mini); color:var(--color-muted);}
.ak-rv-ava{
  flex:0 0 auto; width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--hair-strong); border-radius:50%;
  font-family:var(--font-display); font-size:16px; color:var(--color-accent-light);
}
.ak-rv-mark{flex:0 0 auto; display:inline-flex; opacity:.85;}
/* Gleiche Teilfuellung wie im Abzeichen, damit vier und fuenf Sterne auf den
   Karten unterscheidbar sind statt alle gleich auszusehen. */
.ak-rv-rating{
  position:relative; display:inline-block; white-space:nowrap; margin-bottom:12px;
  color:rgba(239,231,219,.20); letter-spacing:.14em; font-size:var(--fs-mini); line-height:1;
}
.ak-rv-rating::before{content:'★★★★★';}
.ak-rv-rating i{
  position:absolute; left:0; top:0; overflow:hidden;
  width:var(--anteil,100%); color:var(--color-accent); font-style:normal;
}
.ak-rv-card blockquote{font-size:var(--fs-text-s); line-height:1.65; color:rgba(239,231,219,.68);}

/* 14c — Direkt buchen ----------------------------------------------------
   Zwei Spalten im Vergleich. Der Unterschied muss ohne Lesen erkennbar sein:
   die eigene Spalte traegt den Kupferrand, den helleren Text und Haken statt
   Gedankenstrichen. Die Portalspalte bleibt sachlich — kein Name, keine Zahl.
   -------------------------------------------------------------------------- */
.ak-direct{padding-block:clamp(80px,11vh,142px); background:var(--color-primary-dark); border-block:1px solid var(--hair);}
.ak-direct-head{max-width:60ch; margin:0 auto clamp(38px,6vh,68px); text-align:center;}
.ak-direct-head .ak-lead{margin:22px auto 0; max-width:52ch;}
.ak-direct-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(20px,3vw,38px); align-items:start;}
.ak-direct-card{padding:clamp(28px,3.4vw,46px); border:1px solid var(--hair);}
.ak-direct-card h3{margin-bottom:22px;}
.ak-direct-card ul{display:grid; gap:13px;}
.ak-direct-card li{display:flex; gap:12px; font-size:var(--fs-text-s); line-height:1.55; color:rgba(239,231,219,.62);}
.ak-direct-card li::before{content:'—'; color:var(--color-muted); flex:0 0 auto;}
.ak-direct-card.is-direct{border-color:var(--color-accent); background:rgba(184,131,74,.06);}
.ak-direct-card.is-direct li{color:rgba(239,231,219,.86);}
.ak-direct-card.is-direct li::before{content:'✓'; color:var(--color-accent-light); font-size:var(--fs-mini);}
.ak-direct-card .ak-btn{margin-top:30px;}

/* 14b — Ankommen rund um die Uhr (05.09.2026) ---------------------------------
   Vier Schritte des Self-Check-ins als Reihe. Gleiche Kartensprache wie die
   „Direkt buchen"-Karten darueber (Haarlinie, gleiche Innenabstaende), damit
   die beiden Abschnitte als ein Block gelesen werden: erst warum direkt, dann
   wie es weitergeht. Die Ziffer steht in Marcellus auf Kupfer — dieselbe Rolle
   wie die Kennzahlen unter dem Hero. */
.ak-arrive{padding-block:clamp(80px,11vh,142px); background:var(--color-primary);}
.ak-arrive-head{max-width:60ch; margin:0 auto clamp(38px,6vh,68px); text-align:center;}
.ak-arrive-head .ak-lead{margin:22px auto 0; max-width:52ch;}
.ak-arrive-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.6vw,34px); margin:0;}
.ak-arrive-steps li{position:relative; padding:clamp(26px,3vw,40px) clamp(22px,2.6vw,34px); border:1px solid var(--hair);}
.ak-arrive-n{display:block; font-family:var(--font-display); font-size:var(--fs-d2); line-height:1; color:var(--color-accent-light); margin-bottom:18px;}
.ak-arrive-steps h3{font-size:var(--fs-d4); margin-bottom:12px;}
.ak-arrive-steps p{font-size:var(--fs-text-s); line-height:1.55; color:rgba(239,231,219,.62);}

/* 15 — Responsive -------------------------------------------------------- */
@media (max-width:1180px){
  .ak-footer-grid{grid-template-columns:1fr 1fr;}
  .ak-menu{grid-template-columns:1.2fr .8fr;}
}
/* Ab hier wird die offene Navigation zu eng — Burger und Overlay uebernehmen */
@media (max-width:1100px){
  .ak-nav{display:none;}
  .ak-burger{display:flex;}
  .ak-brand{margin-right:0;}
  .ak-header{justify-content:space-between;}
}
@media (max-width:1024px){
  :root{--header-h:84px; --header-h-solid:72px;}
  .ak-brand img{width:clamp(112px,13vw,138px);}
  .ak-header.is-solid .ak-brand img{width:clamp(104px,11vw,122px);}
  .ak-intro-grid,.ak-dine-grid,.ak-place-grid,.ak-know-grid,.ak-ask-grid{grid-template-columns:1fr; gap:clamp(34px,6vw,56px);}
  .ak-intro-text{position:static;}
  .ak-intro-media{grid-template-columns:1fr 1fr;}
  .ak-intro-media .ak-clip:nth-child(2){margin-left:0; margin-top:36px;}
  .ak-gallery-grid{grid-template-columns:repeat(3,1fr);}
  .ak-dine-media .ak-clip:first-child{width:100%;}
  .ak-dine-media .ak-clip:last-child{position:static; width:60%; margin:-14% 0 0 auto; border-width:6px;}
  .ak-cards{grid-template-columns:1fr 1fr;}
  .ak-facts-row{grid-template-columns:1fr 1fr;}
  .ak-arrive-steps{grid-template-columns:1fr 1fr;}
  .ak-fact:nth-child(3){border-left:0;}
  .ak-fact:nth-child(n+3){border-top:1px solid var(--hair);}
}
/* Drei Karten nebeneinander werden hier zu drei Briefmarken — untereinander */
@media (max-width:900px){
  /* Einspaltig: Spannweiten und die Zentrierregel wieder aufheben. */
  .ak-rooms-cards{grid-template-columns:1fr; max-width:470px; margin-inline:auto;}
  .ak-rooms-cards > .ak-roomcard,
  .ak-rooms-cards > .ak-roomcard:nth-last-child(2):nth-child(3n+1){grid-column:auto;}
  .ak-roomcard-feature{margin-top:0;}
  /* Nebeneinander waeren die zwei Spalten hier schmaler als ihre Zeilen lang
     sind — untereinander bleibt der Vergleich lesbar, die eigene zuerst. */
  .ak-direct-grid{grid-template-columns:1fr; max-width:560px; margin-inline:auto;}
  .ak-arrive-steps{grid-template-columns:1fr; max-width:560px; margin-inline:auto;}
}
@media (max-width:760px){
  .ak-burger-label{display:none;}
  .ak-brand img{width:112px;}
  .ak-header.is-solid .ak-brand img{width:100px;}
  .ak-header-cta{padding:11px 18px; font-size:var(--fs-label); letter-spacing:.14em;}
  .ak-menu{grid-template-columns:1fr;}
  .ak-menu-media{display:none;}
  .ak-menu-left{padding-block:100px 40px;}
  .ak-menu-foot{flex-direction:column; align-items:flex-start; gap:22px; padding-top:40px;}
  .ak-hero-cta{margin-top:32px; padding-top:26px; gap:14px;}
  .ak-rv-card{width:clamp(236px,74vw,300px);}
  .ak-rv-badge{gap:10px 12px; padding:12px 16px;}
  .ak-rv-sep{display:none;}
  /* Zwei Spalten Speisekarte werden hier zu zwei schmalen Streifen — eine. */
  .ak-karte{columns:1;}
  .ak-gallery-grid{grid-template-columns:repeat(2,1fr);}
  .ak-scrollcue{display:none;}
  .ak-intro-media{grid-template-columns:1fr;}
  .ak-intro-media .ak-clip:nth-child(2){margin-top:0;}
  .ak-plates-row{grid-template-columns:1fr; gap:18px;}
  .ak-plates-row .ak-fig:nth-child(2){margin-top:0;}
  .ak-cards{grid-template-columns:1fr;}
  .ak-form{grid-template-columns:1fr;}
  .ak-footer-grid{grid-template-columns:1fr; gap:34px;}
  .ak-footer-legal{flex-direction:column;}
  .ak-strip-head{flex-direction:column; align-items:flex-start; gap:14px;}
  .ak-strip-hint{display:none;}
  .ak-strip-item{width:74vw; height:52vh;}
  .ak-strip-item:nth-child(even){height:46vh;}
  .ak-lb-prev,.ak-lb-next{top:auto; bottom:16px; margin-top:0;}
  .ak-lb-prev{left:calc(50% - 62px);}
  .ak-lb-next{right:calc(50% - 62px);}
  /* Auf dem Handy wuerde die Langfassung fuenf Zeilen hoch werden und den
     halben Hero zudecken — dort bleibt nur der Kurztext stehen. */
}
@media (max-width:480px){
  :root{--header-h:72px; --header-h-solid:64px;}
  /* Drei Felder nebeneinander werden hier zu Streifen — untereinander, und
     die Schaltflaeche ueber die volle Breite. */
  /* Auf dem Handy stehen die zwei Knoepfe untereinander und ueber die volle Breite. */
  .ak-hero-cta{flex-direction:column; align-items:stretch; gap:14px;}
  .ak-hero-cta .ak-btn{width:100%; text-align:center;}
  .ak-facts-row{grid-template-columns:1fr;}
  .ak-fact{border-left:0; border-top:1px solid var(--hair);}
  .ak-fact:first-child{border-top:0;}
  .ak-btn{padding:15px 26px; font-size:var(--fs-label);}
  /* Zwei Spalten bleiben auch hier — bei 4:3 sind das keine Briefmarken,
     und zwoelf Kacheln ergeben sechs saubere Reihen. */
}

/* 16 — Reduced Motion ----------------------------------------------------
   Alles, was von selbst laeuft, steht still. Die Inhalte bleiben sichtbar —
   ein abgeschaltetes Reveal darf keinen leeren Bildschirm hinterlassen.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important;}
  .ak-mask .w>i{transform:none!important;}
  .ak-rise{opacity:1!important; transform:none!important;}
  .ak-clip img{clip-path:none!important; transform:none!important;}
  .ak-clip figcaption{opacity:1!important;}
  .ak-eyebrow::before{transform:scaleX(1)!important;}
  /* Die Karte steht fertig gezeichnet da, statt sich zu zeichnen — Linien,
     Beschriftung und Marken alle sichtbar. Ein abgeschaltetes Reveal darf
     keine leere Flaeche hinterlassen, hier waere es eine leere Karte. */
  .ak-map svg path[stroke]{stroke-dasharray:none!important; stroke-dashoffset:0!important;}
  .ak-map svg text,.ak-map svg circle,.ak-map svg rect{opacity:1!important;}
  .ak-map-pin{animation:none!important; opacity:.55!important;}
  .ak-scrollcue.is-gone{visibility:hidden!important;}
  .ak-kenburns{animation:none!important;}
  .ak-loader{display:none!important;}
  /* Steht das Bewertungs-Laufband still, waeren die hinteren Karten
     unerreichbar — hier wird es deshalb ein von Hand schiebbarer Bereich.
     Die verdoppelten Karten (nur fuer die nahtlose Kehre da) fliegen raus,
     sonst steht jede Bewertung zweimal da. */
  .ak-rv-track{animation:none!important; width:auto!important;}
  .ak-rv-lane{overflow-x:auto;}
  .ak-rv-lane::before,.ak-rv-lane::after{display:none;}
  .ak-rv-card[aria-hidden="true"]{display:none;}
}