/*
 * reisetoni - Foundation-Tokens und vier Varianten, Handover Stufe 7
 *
 * Dieses Stylesheet vor dem seiten- oder komponentenspezifischen CSS laden.
 * Werte ueber var(--token-name) verwenden. Die Datei definiert ausschliesslich
 * Tokens und wendet noch keine Komponenten- oder Seitenstile an.
 *
 * Diese Datei enthaelt nach der Foundation die vier Token-Overlays
 * [data-variant="spa"], [data-variant="alpin"], [data-variant="modern"] und
 * [data-variant="familie"]. Das Attribut gehoert auf das html-Element oder
 * einen gemeinsamen Wurzel-Container. Die Overlays ersetzen nur Farb- und
 * Typografie-Tokens; Layout, Abstaende, Radien und Verhalten bleiben gleich.
 * Semantische Farbrollen erlauben spaeter auch ein data-theme="dark"-Overlay.
 * Nutzungsvertrag: ../docs/design-system.md; Implementierung: ../docs/umsetzung.md.
 *
 * Die Mockups laden die Familien lokal ueber fonts.css; OFL-Dateien und
 * Quellen stehen unter ../fonts/. Die produktive Ladetechnik bleibt offen.
 * Keine Font-Imports oder externen CDN-Aufrufe.
 * rem-Werte beziehen sich auf die Standardbasis 16 px. Die Schriftgroesse
 * des Wurzelelements nicht festsetzen, damit Nutzereinstellungen greifen.
 *
 * Kontrastvertrag fuer diese Foundation nach WCAG 2.1:
 * Textrollen nur auf bg, surface oder surface-2 verwenden; brand-fg auf
 * brand oder brand-hover. Zusaetzliche Kombinationen separat nachmessen.
 * Statusfarben sind Vordergrundfarben und benoetigen zusaetzlich Text oder
 * Symbole. warning ist Bernstein; danger bleibt Fehlern und Storno vorbehalten.
 * border ist rein dekorativ. Fuer notwendige UI-Grenzen border-strong nutzen.
 * Fokusfarbe auf hellen Flaechen einsetzen; bei gefuellten Bedienelementen
 * durch den Fokusabstand eine helle Flaeche zwischen Fuellung und Ring lassen.
 *
 * Relative sRGB-Luminanz, Verhaeltnisse konservativ auf 2 Stellen gekuerzt:
 * Vordergrund       bg       surface  surface-2
 * text              14.39:1  15.42:1  13.07:1
 * text-muted         5.99:1   6.42:1   5.44:1
 * brand              7.76:1   8.32:1   7.05:1
 * brand-hover       10.31:1  11.05:1   9.36:1
 * accent             5.75:1   6.16:1   5.22:1
 * success            5.95:1   6.38:1   5.40:1
 * warning            5.67:1   6.08:1   5.15:1
 * danger             5.50:1   5.90:1   5.00:1
 * price              6.85:1   7.34:1   6.22:1
 * border-strong      3.94:1   4.22:1   3.57:1
 * focus              7.76:1   8.32:1   7.05:1
 * brand-fg auf brand: 8.32:1; auf brand-hover: 11.05:1.
 * Text erreicht mindestens 4.5:1, notwendige UI-Grenzen mindestens 3:1.
 */

:root {
  /* Semantische Farbrollen - warmer, zurueckhaltender Foundation-Standard. */
  --color-bg: #f7f5f0;
  --color-surface: #fffdf8;
  --color-surface-2: #eeeae2;
  --color-border: #d7d1c7;
  --color-text: #25231f;
  --color-text-muted: #625d54;
  --color-brand: #484f46;
  --color-brand-hover: #353d34;
  --color-brand-fg: #fffdf8;
  --color-accent: #785b36;
  --color-success: #3d674a;
  --color-warning: #805a19;
  --color-danger: #945048;
  --color-price: #69503b;

  /* Zusaetzliche Farbrollen fuer erkennbare Konturen und Tastaturfokus. */
  --color-border-strong: #81796d;
  --color-focus: var(--color-brand);

  /* Typografie - Familien austauschbar, Groessenskala gemeinsam. */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --text-xs: 0.75rem;    /* 12 px - kurze Metadaten, kein laengerer Fliesstext. */
  --text-sm: 0.875rem;   /* 14 px */
  --text-base: 1rem;     /* 16 px */
  --text-lg: 1.25rem;    /* 20 px */
  --text-xl: 1.5625rem;  /* 25 px */
  --text-2xl: 1.9375rem; /* 31 px */
  --text-3xl: 2.4375rem; /* 39 px */
  --text-4xl: 3.0625rem; /* 49 px */

  --line-height-body: 1.6;
  --line-height-heading: 1.15;
  --text-measure: 68ch;
  /* Mit font-variant-numeric auf Preise, Kalender und Tabellen anwenden. */
  --font-numeric: tabular-nums;

  /* Spacing - 4-px-Basis mit einem 2-px-Zwischenschritt. */
  --space-0: 0;
  --space-0-5: 0.125rem; /*  2 px */
  --space-1: 0.25rem;    /*  4 px */
  --space-2: 0.5rem;     /*  8 px */
  --space-3: 0.75rem;    /* 12 px */
  --space-4: 1rem;       /* 16 px */
  --space-6: 1.5rem;     /* 24 px */
  --space-8: 2rem;       /* 32 px */
  --space-12: 3rem;      /* 48 px */
  --space-16: 4rem;      /* 64 px */
  --space-24: 6rem;      /* 96 px */

  /* Radien - in allen Varianten identisch. */
  --radius-sm: 0.375rem; /*  6 px */
  --radius-md: 0.75rem;  /* 12 px */
  --radius-lg: 1.25rem;  /* 20 px */
  --radius-full: 9999px;

  /* Schatten - weich und diffus, kein Ersatz fuer notwendige UI-Konturen. */
  --shadow-card: 0 4px 24px rgb(38 34 29 / 0.06);
  --shadow-pop: 0 12px 32px rgb(38 34 29 / 0.1);

  /* Konturen und Touch-Ziele - Mindestgroesse gilt fuer beide Achsen. */
  --border-width: 1px;
  --focus-ring-width: 3px;
  --focus-ring-offset: 3px;
  --touch-target-min: 44px;

  /* Motion - nur konkrete Eigenschaften animieren, kein transition: all. */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 250ms;
  --hover-lift: -2px;

  /* Elevation - innerhalb eines gemeinsamen Stacking-Kontexts verwenden. */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-popover: 300;
  --z-drawer-backdrop: 400;
  --z-drawer: 410;
  --z-modal-backdrop: 500;
  --z-modal: 510;
  --z-toast: 600;
  --z-skip-link: 700;
  /* Native Dialoge im Top Layer folgen dessen Regeln statt dieser Skala. */

  /* Layout - Mobile-first, 12 Content-Spalten, maximal 1200 px bei 16 px Basis. */
  --content-max-width: 75rem;
  --grid-columns: 12;
  --grid-gutter: clamp(1rem, 3vw, 2rem);
  --page-gutter: clamp(1rem, 4vw, 3rem);

  /*
   * Breakpoints als Referenzwerte. var() funktioniert nicht in Media Queries.
   * Dort die zugehoerigen px-Werte woertlich einsetzen, ohne Build-Abhaengigkeit.
   */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/*
 * Reduzierte Bewegung: Alle spaeteren Verbraucher nutzen diese Motion-Tokens.
 * Zustandswechsel duerfen nicht vom Ende einer Animation abhaengen.
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --hover-lift: 0px;
  }
}

/*
 * spa - Salbei, warmer Stein und Sand lassen Raum zum Ankommen.
 * Alegreya setzt ruhige, menschliche Headlines; Source Sans 3 traegt die UI.
 * Beide Familien werden in den Mockups lokal ueber fonts.css geladen.
 * Alle uebrigen Foundation-Tokens bleiben unveraendert.
 * Kontrastnachweis und erlaubte Kombinationen: ../docs/kontrast.md, Abschnitt spa.
 */
[data-variant="spa"] {
  --color-bg: #f6f5ef;
  --color-surface: #fdfcf8;
  --color-surface-2: #e9eee7;
  --color-border: #ccd4c9;
  --color-text: #26342c;
  --color-text-muted: #566458;
  --color-brand: #3f5e4d;
  --color-brand-hover: #2e493a;
  --color-brand-fg: #fdfcf8;
  --color-accent: #786244;
  --color-success: #3f664e;
  --color-warning: #805c24;
  --color-danger: #945650;
  --color-price: #445847;
  --color-border-strong: #798878;
  --color-focus: #3f5e4d;

  --font-display: "Alegreya", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/*
 * Varianten-Diffs der Stufe 3: Jede Variante ergaenzt direkt die Foundation.
 * Nicht gesetzte Rollen bleiben aus :root erhalten; spa ist kein Vorfahr.
 * Pro Wurzel-Container genau eine Variante verwenden, Varianten nicht schachteln.
 * Alle Abweichungen betreffen nur Farben und Schriftfamilien.
 * Fokusfarben sind explizit, damit auch ein Untercontainer die richtige Farbe
 * erhaelt, ohne einen bereits auf :root aufgeloesten Farb-Alias zu erben.
 * Kontrastnachweise einschliesslich geerbter Rollen: ../docs/kontrast.md.
 */

/*
 * alpin - Creme, Tanne und Terracotta wirken warm, erdig und handwerklich.
 * Bitter fuer charaktervolle Headlines, IBM Plex Sans fuer eine robuste UI.
 * Oberflaeche, Text auf Brand und Statusfarben bleiben aus der Foundation.
 */
[data-variant="alpin"] {
  --color-bg: #f7f2e8;
  --color-surface-2: #eee5d5;
  --color-border: #d8c9b6;
  --color-text: #322a22;
  --color-text-muted: #695b4d;
  --color-brand: #3f5140;
  --color-brand-hover: #2d3d2e;
  --color-accent: #9a4d32;
  --color-price: #77452e;
  --color-border-strong: #897661;
  --color-focus: #3f5140;

  --font-display: "Bitter", Rockwell, "Iowan Old Style", Georgia, serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
}

/*
 * modern - Grau-Beige und ein konzentrierter Petrolakzent wirken klar und urban.
 * Manrope traegt Headlines und UI aus einer Familie, mit lokalen Sans-Fallbacks.
 * Akzent und Preis nutzen denselben Petrolton. Statusfarben sind funktional.
 */
[data-variant="modern"] {
  --color-bg: #f4f3ef;
  --color-surface: #faf9f6;
  --color-surface-2: #e8e9e7;
  --color-border: #cfd1ce;
  --color-text: #222e33;
  --color-text-muted: #536168;
  --color-brand: #1d5665;
  --color-brand-hover: #123e4a;
  --color-accent: #1d5665;
  --color-price: #1d5665;
  --color-border-strong: #768185;
  --color-focus: #1d5665;

  --font-display: var(--font-body);
  --font-body: "Manrope", "Avenir Next", Avenir, system-ui, sans-serif;
}

/*
 * familie - Wasserblau, sanftes Sonnengelb und Wiesengruen wirken offen und aktiv.
 * Bree Serif setzt freundliche Headlines, Nunito Sans eine runde, ruhige UI.
 * Gelb bleibt eine helle Flaeche; sein Textakzent ist kontraststarkes Ocker.
 */
[data-variant="familie"] {
  --color-bg: #fbf6e9;
  --color-surface-2: #f2e6b8;
  --color-border: #dcd2b1;
  --color-text: #2d362b;
  --color-text-muted: #635f48;
  --color-brand: #2d6476;
  --color-brand-hover: #204e5c;
  --color-accent: #785916;
  --color-success: #45633f;
  --color-price: #2d6476;
  --color-border-strong: #847954;
  --color-focus: #2d6476;

  --font-display: "Bree Serif", Georgia, serif;
  --font-body: "Nunito Sans", "Trebuchet MS", system-ui, sans-serif;
}


/* reisetoni – lokale Schriften. Lizenztexte: ../fonts/alegreya-OFL.txt und ../fonts/sourcesans3-OFL.txt. */

@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/alegreya-400.woff2) format('woff2');
}

@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/alegreya-500.woff2) format('woff2');
}

@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/alegreya-600.woff2) format('woff2');
}

@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/alegreya-700.woff2) format('woff2');
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/source-sans-3-400.woff2) format('woff2');
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/source-sans-3-500.woff2) format('woff2');
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/source-sans-3-600.woff2) format('woff2');
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/source-sans-3-700.woff2) format('woff2');
}


gmp-place-details,gmp-place-details-compact{display:block;width:100%;min-height:inherit}.google-gallery-host{overflow:hidden;border-radius:var(--radius-md)}.card-media .google-gallery-host{border-radius:0}.google-place[data-state=loading] .google-gallery-host{background:linear-gradient(90deg,var(--color-surface-2),var(--color-bg),var(--color-surface-2));background-size:200% 100%;animation:gallery-loading 1.4s linear infinite}@keyframes gallery-loading{to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.google-place[data-state=loading] .google-gallery-host{animation:none}}
gmp-place-details,gmp-place-details-compact{color-scheme:light;--gmp-mat-font-family:var(--font-body);--gmp-mat-color-surface:var(--color-surface);--gmp-mat-color-on-surface:var(--color-text);--gmp-mat-color-on-surface-variant:var(--color-text-muted);--gmp-mat-color-primary:var(--color-brand);--gmp-mat-color-secondary-container:var(--color-surface-2);--gmp-mat-color-on-secondary-container:var(--color-brand);--gmp-thumbnail-border-radius:var(--radius-md);--gmp-mat-spacing-large:16px;--gmp-mat-spacing-medium:12px}


.hotel-rating{display:flex;align-items:center;gap:.45rem;min-height:44px;padding:.55rem .75rem;background:var(--color-surface);border-top:1px solid var(--color-border);font-family:var(--font-body)}.rating-stars{display:flex;gap:.1rem}.rating-star{position:relative;display:inline-block;width:1.15rem;height:1.15rem}.rating-star svg{position:absolute;inset:0;fill:none;stroke:#8a6b2d;stroke-width:1.4}.rating-star .rating-star-fill{clip-path:inset(0 calc(100% - var(--star-fill)) 0 0);fill:#b3852e;stroke:#b3852e}.hotel-rating a{font-size:.9rem}.google-attribution{margin-left:auto;color:#5e5e5e;font:400 clamp(12px,1.2vw,14px)/1 var(--font-body);white-space:nowrap}


*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--color-bg);color:var(--color-text);font:400 1rem/1.6 var(--font-body)}a{color:var(--color-brand);text-underline-offset:.18em}a:hover{color:var(--color-brand-hover)}[hidden]{display:none!important}.wrap{width:min(calc(100% - 2rem),75rem);margin-inline:auto}.skip{position:fixed;z-index:999;top:.5rem;left:.5rem;padding:.75rem 1rem;background:#fff;transform:translateY(-150%)}.skip:focus{transform:none}.environment{padding:.35rem 1rem;text-align:center;background:var(--color-surface-2);font-size:.8rem}.site-header{position:sticky;top:0;z-index:20;background:rgb(253 252 248/.96);border-bottom:1px solid var(--color-border);backdrop-filter:blur(10px)}.header-row{min-height:4.75rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}.wordmark{color:var(--color-text);font:600 1.8rem/1 var(--font-display);text-decoration:none}.site-header nav{display:flex;gap:1.5rem}.site-header nav a{text-decoration:none;font-weight:600}.nav-toggle{display:none;min-height:44px;padding:.5rem 1rem;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);background:transparent;font:inherit}h1,h2,h3{font-family:var(--font-display);line-height:1.12;margin:0 0 .75rem}h1{font-size:clamp(2.5rem,7vw,4.6rem);max-width:15ch}h2{font-size:clamp(1.8rem,4vw,2.8rem)}h3{font-size:1.3rem}p{max-width:68ch}.lead{font-size:clamp(1.1rem,2vw,1.35rem);color:var(--color-text-muted)}.eyebrow,.section-kicker{margin:0 0 .6rem;color:var(--color-accent);font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.breadcrumb{padding-block:1.1rem}.breadcrumb ol{display:flex;gap:.5rem;flex-wrap:wrap;list-style:none;padding:0;margin:0;font-size:.9rem}.breadcrumb li+li:before{content:'›';margin-right:.5rem;color:var(--color-text-muted)}.page-hero{padding-block:clamp(3rem,8vw,7rem)}.region-hero{padding-block:clamp(3rem,7vw,6rem);background:linear-gradient(120deg,var(--color-surface-2),var(--color-bg))}.hotel-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(20rem,.9fr);gap:clamp(2rem,6vw,5rem);align-items:center;padding-block:clamp(2rem,7vw,6rem)}.tags,.actions{display:flex;gap:.6rem;flex-wrap:wrap}.tags span{padding:.25rem .65rem;border:1px solid var(--color-border);border-radius:99px;font-size:.85rem}.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.7rem 1rem;border:1px solid var(--color-brand);border-radius:var(--radius-sm);background:var(--color-brand);color:var(--color-brand-fg);font:700 1rem var(--font-body);text-decoration:none;cursor:pointer}.button:hover{background:var(--color-brand-hover);color:var(--color-brand-fg)}.button.secondary{background:transparent;color:var(--color-brand)}.section{padding-block:clamp(3rem,7vw,6rem)}.band{background:var(--color-surface-2)}.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,7vw,6rem)}.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--color-border);border:1px solid var(--color-border)}.facts div{padding:1rem;background:var(--color-surface)}dt{font-weight:700}dd{margin:.25rem 0 0;color:var(--color-text-muted)}.feature-list,.columns{columns:2;column-gap:3rem}.feature-list li,.columns li{break-inside:avoid;margin-bottom:.5rem}.room-grid,.hotel-grid,.featured-grid,.method-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}.room-card,.hotel-card,.method-grid article{overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-card)}.room-card{padding:1.25rem}.room-card ul{padding-left:1.2rem}.room-meta{color:var(--color-text-muted);font-weight:600}.hotel-card{display:flex;flex-direction:column}.card-body{padding:1.25rem;display:flex;flex:1;flex-direction:column}.card-body h2{font-size:1.5rem}.card-body .text-link{margin-top:auto}.card-media{min-height:10.5rem;background:var(--color-surface-2)}.google-place{min-height:100%;position:relative}.google-consent,.media-fallback{min-height:10.5rem;padding:1.25rem;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.6rem;background:linear-gradient(135deg,var(--color-surface-2),var(--color-bg))}.hero-gallery .google-consent,.hero-gallery .media-fallback{min-height:24rem}.google-gallery-host{min-height:10.5rem}.hero-gallery .google-gallery-host{min-height:24rem}.google-status{padding:1rem;margin:0}.filters{padding:1.5rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}.filters h2{font-size:1.35rem}.filter-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1rem}.filter-grid label{display:grid;gap:.35rem;font-weight:700}.filter-grid input,.filter-grid select{width:100%;min-height:44px;padding:.6rem;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);background:#fff;font:inherit}.region-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.region-card{display:flex;flex-direction:column;padding:1.5rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);text-decoration:none}.region-card span{font-size:.8rem;text-transform:uppercase}.region-card strong{font:600 1.7rem var(--font-display)}.source-list{padding-left:1.5rem}.source-list li{margin-bottom:.75rem}.source-list span{display:block;color:var(--color-text-muted);font-size:.9rem}.region-links{padding:0;list-style:none}.region-links li{margin-bottom:.75rem}address{font-style:normal}.site-footer{padding-block:3rem 1.5rem;background:var(--color-text);color:var(--color-bg)}.site-footer a{color:var(--color-bg)}.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.footer-grid nav{display:grid;gap:.5rem;justify-items:start}.footer-note{padding-top:2rem;color:#d8ded9;font-size:.9rem}.text-link{font-weight:700}.method-grid article{padding:1.5rem}:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
@media(max-width:800px){.hotel-hero,.split{grid-template-columns:1fr}.room-grid,.hotel-grid,.featured-grid,.method-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.filter-grid{grid-template-columns:1fr 1fr}.filter-grid label:first-child{grid-column:1/-1}}
@media(max-width:560px){.wrap{width:min(calc(100% - 1.5rem),75rem)}.nav-toggle{display:block}.site-header nav{display:none;position:absolute;inset:100% 0 auto;padding:1rem;background:var(--color-surface);border-bottom:1px solid var(--color-border);flex-direction:column}.site-header nav.open{display:flex}.hotel-hero{grid-template-columns:minmax(0,1fr)}.room-grid,.hotel-grid,.featured-grid,.method-grid,.filter-grid,.facts,.region-grid,.footer-grid{grid-template-columns:1fr}.feature-list,.columns{columns:1}.hero-gallery .google-consent,.hero-gallery .media-fallback{min-height:17rem}h1{overflow-wrap:anywhere}}
.hotel-page .hotel-hero{display:block;padding-block:clamp(2rem,6vw,5rem)}.hotel-page .hotel-heading{max-width:55rem;margin-bottom:2rem}.hotel-page .hotel-heading h1{font-size:clamp(2.25rem,4.2vw,3.25rem);max-width:22ch}.hotel-page .hero-gallery{width:100%}.source-list li{margin-bottom:.55rem;color:var(--color-text-muted)}.source-list a{color:var(--color-text-muted);font-size:.95rem}.source-list span{display:inline;margin-left:.5rem;font-size:.85rem}
.region-poellauer-tal .region-hero{position:relative;isolation:isolate;background:url('/assets/poellauer-tal-von-poellauberg-960.jpg') center/cover no-repeat;color:#fff}.region-poellauer-tal .region-hero:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(24 42 31/.86),rgb(24 42 31/.42))}.region-poellauer-tal .region-hero .lead{color:#f4f2ea}
html:not(.js) .filters{display:none}@media(max-width:560px){html:not(.js) .nav-toggle{display:none}html:not(.js) .site-header nav{display:flex;position:static;padding:0;border:0;background:transparent;flex-direction:row;flex-wrap:wrap;gap:.75rem}}
.detail-head{padding-block:2rem 3rem}.title-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(10rem,20rem);gap:2rem;align-items:center}.title-row h1{font-size:clamp(2.25rem,4.2vw,3.25rem)}.hotel-brand{display:flex;min-height:7rem;align-items:center;justify-content:flex-end;padding:1rem}.hotel-brand-logo{display:block;max-width:100%;max-height:8rem;object-fit:contain}.hotel-brand-text{font:600 1.5rem/1.15 var(--font-display);text-align:right}.detail-head .hero-gallery{margin-top:2rem}.editorial-intro{margin-top:2rem}.jump-nav{position:sticky;top:4.75rem;z-index:10;display:flex;gap:.5rem;overflow-x:auto;padding-block:.75rem;background:var(--color-bg);border-block:1px solid var(--color-border);scrollbar-width:thin}.jump-nav a{flex:0 0 auto;padding:.45rem .8rem;border:1px solid var(--color-border);border-radius:var(--radius-full);background:var(--color-surface);font-weight:600;text-decoration:none}.hotel-detail section{scroll-margin-top:9rem}.unknown{padding:1rem;border-left:3px solid var(--color-border-strong);background:var(--color-surface)}.faq-list{display:grid;gap:.75rem}.faq-list details{padding:1rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}.faq-list summary{cursor:pointer;font-weight:700}.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.related-grid a{display:flex;flex-direction:column;padding:1.25rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);font:600 1.2rem var(--font-display);text-decoration:none}.related-grid span{margin-top:.35rem;font:400 .9rem var(--font-body);color:var(--color-text-muted)}.google-reviews [data-google-host]{min-height:16rem}.google-retry{margin-top:1rem}
@media(max-width:640px){.title-row{grid-template-columns:1fr}.hotel-brand{justify-content:flex-start;min-height:4rem;padding-inline:0}.hotel-brand-logo{max-height:6rem}.hotel-brand-text{text-align:left}.jump-nav{top:4.75rem}.related-grid{grid-template-columns:1fr}}

.hotel-brand-font{display:inline-block;font-size:80px;line-height:1;color:var(--color-brand);font-weight:400;font-style:normal}.hotel-rating{flex-wrap:wrap}.hotel-detail .button{border-radius:var(--radius-full)}@media(max-width:400px){.google-attribution{margin-left:0}.hotel-brand-font{font-size:64px}}
.review-panel{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);overflow:hidden}.review-panel-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding:1.25rem;border-bottom:1px solid var(--color-border)}.review-panel-heading .google-attribution{margin:0;font-family:Arial,sans-serif;font-size:14px}.review-selection,.review-empty{padding:0 1.25rem;color:var(--color-text-muted);font-size:.9rem}.review-card{padding:1.5rem;border-top:1px solid var(--color-border)}.review-author{display:flex;align-items:center;gap:.75rem}.review-avatar{display:inline-flex;flex:0 0 44px;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--color-surface-2);color:var(--color-brand);font-weight:700}.review-avatar-image{width:44px;height:44px;object-fit:cover}.review-byline{display:grid;gap:.15rem;min-width:0}.review-byline a{font-weight:700}.review-date{font-size:.85rem;color:var(--color-text-muted)}.review-stars{margin-top:1rem}.review-text{white-space:pre-line;overflow-wrap:anywhere;max-width:80ch}.review-actions{display:flex;gap:1rem;flex-wrap:wrap;font-size:.85rem}.review-link{overflow-wrap:anywhere}.review-actions a:last-child:not(:first-child){margin-left:auto}@media(max-width:400px){.review-card{padding:1rem}.review-panel-heading{padding:1rem}}

/* Editorial hotel profiles and regional guides */
.about-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(15rem,1fr);gap:clamp(2rem,5vw,5rem);margin-top:2rem}.about-copy{max-width:48rem}.editorial-paragraph{margin-bottom:1.8rem}.editorial-paragraph h3{font-size:1.45rem}.editorial-paragraph p{margin:.6rem 0 0}.decision-notes{align-self:start;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1.5rem;background:var(--color-surface-2)}.decision-notes article+article{border-top:1px solid var(--color-border);padding-top:1.2rem;margin-top:1.2rem}.decision-notes h3{font-family:var(--font-body);font-size:1rem;line-height:1.4}.decision-notes p{font-size:.95rem;color:var(--color-text-muted)}.location-map{height:430px;position:relative;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;margin-top:1.75rem}.location-map>p{position:absolute;inset:1rem;pointer-events:none}.location-map iframe{width:100%;height:100%;border:0;position:relative;display:block}.map-caption{display:flex;max-width:none;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:.8rem 0 2.5rem;font-size:.95rem}.nearby-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;margin-top:2rem}.nearby-group h3{font-family:var(--font-body);font-size:1.1rem;border-bottom:2px solid var(--color-brand);padding-bottom:.8rem}.nearby-group ul{list-style:none;margin:0;padding:0}.nearby-group li{padding:.85rem 0;border-bottom:1px solid var(--color-border)}.nearby-title{display:flex;align-items:baseline;gap:.6rem;justify-content:space-between}.nearby-title a{font-weight:600;text-decoration:none;line-height:1.35}.distance-chip{flex:none;background:var(--color-brand);color:var(--color-brand-fg);padding:.12rem .5rem;border-radius:99px;font-size:.8rem;font-weight:700;white-space:nowrap}.nearby-group p{font-size:.9rem;color:var(--color-text-muted);margin:.4rem 0 0}.distance-method{margin-top:2rem;font-size:.9rem}.distance-method summary,#quellen summary{cursor:pointer;font-weight:600;padding:.8rem 0}.distance-method ul{columns:2;padding-left:1.2rem}.distance-method li{break-inside:avoid;margin-bottom:.5rem}.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}.guide-card{padding:1.5rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}.guide-card p{color:var(--color-text-muted)}.guide-card h3{font-size:1.45rem}.comparison-wrap{overflow-x:auto}.hotel-comparison{width:100%;border-collapse:collapse;text-align:left;font-size:.95rem}.hotel-comparison th,.hotel-comparison td{vertical-align:top;border-bottom:1px solid var(--color-border);padding:1rem;min-width:11rem}.hotel-comparison th{background:var(--color-surface-2)}.hotel-comparison td:first-child{font-weight:600}.region-context{max-width:52rem}.region-context h2{margin-top:1.6rem}.region-hero h1{max-width:22ch}.section-intro{color:var(--color-text-muted);max-width:75ch}
@media(max-width:900px){.about-layout{grid-template-columns:1fr}.decision-notes{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.decision-notes>.section-kicker,.decision-notes>.text-link{grid-column:1/-1}.decision-notes article+article{border:0;padding:0;margin:0}.nearby-grid,.guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.nearby-grid,.guide-grid,.decision-notes{grid-template-columns:1fr}.location-map{height:330px}.map-caption{font-size:.85rem}.distance-method ul{columns:1}.nearby-title{align-items:flex-start}.hotel-comparison th,.hotel-comparison td{padding:.8rem;min-width:10rem}.about-layout{gap:1rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.split .facts{grid-template-columns:1fr}.hotel-comparison caption{text-align:left;padding:0 0 1rem;font-weight:600}.editorial-paragraph h3{max-width:34ch}
.map-canvas{height:100%;width:100%}
.region-hero .eyebrow{color:inherit}

/* Shared region and attraction media */
.region-hero-grid,.experience-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(18rem,.95fr);gap:clamp(1.5rem,5vw,4rem);align-items:center;max-width:75rem;margin-inline:auto}.region-hero-grid>.media-figure,.experience-hero-grid>.media-figure{margin:0}.region-hero-grid>.media-figure img,.experience-hero-grid>.media-figure img{width:100%;height:clamp(16rem,34vw,30rem);object-fit:cover;object-position:center}.experience-hero{padding-block:clamp(2rem,7vw,5rem);background:linear-gradient(120deg,var(--color-surface-2),var(--color-bg))}.experience-hero-grid h1{max-width:18ch}.experience-region{font-weight:700;color:var(--color-text-muted)}.media-figure{margin:0;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}.media-figure img{display:block;width:100%;height:auto;object-fit:cover}.media-figure figcaption{padding:.45rem .7rem;font-size:.72rem;line-height:1.35;color:var(--color-text-muted)}.media-figure figcaption a{white-space:nowrap}.media-card{height:100%;border:0;border-radius:0}.media-card img{height:11rem}.media-hero{box-shadow:var(--shadow-card)}.media-asset-commons-file-tierpark-herbstein-haupteingang img{object-position:50% 50%}.media-asset-commons-file-poellauer-tal-pollauberg img,.media-asset-commons-file-steiermark-poellauer-tal-3 img{object-position:center 45%}.region-media-cards,.experience-media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin-top:1.5rem}.region-media-cards .media-figure,.experience-media-grid .media-figure{height:100%}.region-media-cards .media-card img,.experience-media-grid .media-card img{height:12rem}.experience-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}.experience-card{overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-card)}.experience-card-body{display:flex;flex:1;flex-direction:column;padding:1.25rem}.experience-card-body .text-link{margin-top:auto}.experience-card-body h3{font-size:1.5rem}.practical-grid,.editorial-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:2rem}.practical-card,.editorial-grid article{padding:1.25rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}.practical-card h3,.editorial-grid h3{font-family:var(--font-body);font-size:1.05rem}.attraction-map iframe{width:100%;height:100%;border:0}.media-missing{min-height:16rem;display:grid;place-items:center;padding:1.5rem;border:1px dashed var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface-2);color:var(--color-text-muted);text-align:center}.nearby-hotel-card{min-height:100%}
@media(max-width:800px){.region-hero-grid,.experience-hero-grid{grid-template-columns:1fr}.region-media-cards,.experience-media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.experience-grid,.practical-grid,.editorial-grid,.region-media-cards,.experience-media-grid{grid-template-columns:1fr}.region-hero-grid>.media-figure img,.experience-hero-grid>.media-figure img{height:17rem}.media-card img{height:13rem}.media-figure figcaption{font-size:.68rem}}

/* Decision-focused room and alternative comparisons. */
.room-comparison{width:100%;border-collapse:collapse;text-align:left;font-size:1rem;background:var(--color-surface)}.room-comparison caption{text-align:left;font-weight:600;padding:0 0 1rem}.room-comparison th,.room-comparison td{vertical-align:top;padding:1.1rem;border-bottom:1px solid var(--color-border)}.room-comparison thead{background:var(--color-surface-2)}.room-comparison th:first-child{width:25%}.room-comparison td:nth-child(2){width:23%}.room-comparison ul{margin:0;padding-left:1.15rem}.room-equipment{margin-top:1rem;font-size:.9rem}.room-equipment summary{cursor:pointer;color:var(--color-brand);padding:.3rem 0}.room-choice-notes{padding:1rem 1.4rem;border-left:3px solid var(--color-brand);background:var(--color-surface-2);margin-top:1.5rem}.room-choice-notes p{max-width:80ch}.related-comparisons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}.related-hotel{padding:1.5rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}.related-hotel .eyebrow{letter-spacing:.02em;text-transform:none}.related-hotel h3 a{text-decoration:none}.hotel-context-images{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin-block:2rem}.hotel-context-images>div>p{font-weight:600}.hotel-context-images .media-figure img{height:240px;object-fit:cover}.hotel-owned-photo{margin-top:1.5rem}.hotel-owned-photo .media-figure img{width:100%;height:auto;object-fit:contain}
@media(max-width:700px){.room-comparison caption{display:block;width:100%;padding-bottom:1rem}.related-comparisons,.hotel-context-images{grid-template-columns:1fr}.room-comparison thead{position:absolute;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;overflow:hidden}.room-comparison,.room-comparison tbody,.room-comparison tr,.room-comparison th,.room-comparison td{display:block;width:100%!important}.room-comparison tr{border:1px solid var(--color-border);border-radius:var(--radius-md);margin-bottom:1rem;padding:.5rem}.room-comparison th{font-size:1.25rem}.room-comparison td{border:0;padding-top:.3rem}.room-comparison td:before{content:attr(data-label);display:block;font-weight:600;font-size:.9rem;margin-bottom:.35rem}.hotel-owned-photo .media-figure img{height:auto}}