/* =========================================================
   CosmosHotelTheme – main.css
   Struktur/Layout. Die Werte hier im :root sind bewusst nur ein
   STATISCHES SICHERHEITSNETZ (Startwerte / Vorschau ohne WordPress) -
   maßgeblich sind IMMER die Werte aus dem Customizer
   (inc/customizer-output.php), die als eigenes <style>-Element NACH
   dieser Datei geladen werden und diese Variablen daher im Cascade
   überschreiben (siehe cm_output_customizer_css()-Hook-Priorität).
   ========================================================= */

:root {
	--cm-c-moos-gruen:#004538; --cm-c-koenigs-gold:#8f7b45; --cm-c-elfenbein:#fff5d7;
	--cm-body-bg:#fff; --cm-text:#513f0e; --cm-heading:#001a12; --cm-surface:#fffbee;
	--cm-surface-dark:#001a12; --cm-border:#8a8b8d; --cm-eyebrow:#79652f; --cm-focus:#004538; --cm-focus-dark:#f5e0a8;
	--cm-highlight:#f5e0a8; --cm-warning:#da6100; --cm-error:#950000; --cm-success:#007350;
	--cm-font-1:'Domine',Georgia,serif; --cm-font-2:'Lato',Arial,sans-serif; --cm-font-3:'Lato',Arial,sans-serif;
	--cm-line-height:1.625;
	--cm-size-primary:1rem; --cm-size-title:2.625rem; --cm-size-headline:2.125rem; --cm-size-subheadline:1.375rem;
	--cm-size-nav:.9375rem; --cm-size-subnav:.875rem; --cm-size-footer:.875rem; --cm-size-button:.9375rem;
	--cm-size-teaser-head:1.375rem; --cm-size-teaser-desc:.9375rem; --cm-size-secondary:.8125rem; --cm-size-small:.6875rem;
	--cm-size-form-label:.8125rem; --cm-size-form-input:1rem; --cm-size-head-big:4rem;
	--cm-size-h4:1.1875rem; --cm-size-h5:1.0625rem; --cm-size-h6:.9375rem; --cm-font-h4:var(--cm-font-1); --cm-font-h5:var(--cm-font-2); --cm-font-h6:var(--cm-font-2);
	--cm-h4:#001a12; --cm-h5:#001a12; --cm-h6:#001a12; --cm-secondary-text:#513f0e; --cm-small-text:#513f0e; --cm-head-big:#fff;
	--cm-size-eyebrow:.8125rem; --cm-font-eyebrow:var(--cm-font-2);
	--cm-font-primary:var(--cm-font-2); --cm-font-title:var(--cm-font-1); --cm-font-headline:var(--cm-font-1);
	--cm-font-subheadline:var(--cm-font-2); --cm-font-nav:var(--cm-font-2); --cm-font-subnav:var(--cm-font-2);
	--cm-font-footer:var(--cm-font-2); --cm-font-button:var(--cm-font-2);
	--cm-font-teaser-head:var(--cm-font-1); --cm-font-teaser-desc:var(--cm-font-2);
	--cm-font-secondary:var(--cm-font-2); --cm-font-small:var(--cm-font-2);
	--cm-font-form-label:var(--cm-font-2); --cm-font-form-input:var(--cm-font-2); --cm-font-head-big:var(--cm-font-1);
	--cm-title:#001a12; --cm-subheadline:#001a12;
	--cm-container-width:77.5rem; --cm-container-gutter:1.5rem; --cm-radius:.25rem; --cm-border-width:.0625rem;
	--cm-padding-h:1.5rem; --cm-padding-v:1.25rem; --cm-section-spacing:7.5rem; --cm-grid-gap:1.75rem;
	/* Gedeckelte Variante des horizontalen Paddings fuer ENGE Bauteile
	   (Buchungsleiste, Bildunterschriften, Teaser-Cards, Kacheln). --cm-padding-h ist ein
	   globaler Wert, der im Customizer bewusst sehr gross gestellt werden
	   darf (z. B. 120px fuer grosszuegige Abschnitte). In schmalen,
	   mehrspaltigen Bauteilen zerstoert so ein Wert jedoch das Layout:
	   bei 120px blieben in einem 375px breiten Feld nur 135px Inhalt, und
	   die Spalten der Buchungsleiste sprengten den Bildschirm. */
	--cm-padding-h-compact:clamp(.75rem,var(--cm-padding-h),2rem);
	/* Übergangsdauer für BEDIENELEMENTE (Menü-Panels, Dropdowns, Icons).
	   Bis 6.0.39 war sie auf 120-400ms gedeckelt; seit 6.0.40 gilt auf Wunsch
	   der eingestellte Wert ungefiltert. ACHTUNG beim Einstellen: eine sehr
	   lange Ausblendzeit verlangsamt auch das Menü - bei 2000ms brauchte ein
	   Panel zwei Sekunden zum Auf- und Zuklappen (die visibility-Umschaltung
	   ist um dieselbe Dauer verzögert) und wirkte wie "reagiert nicht". */
	--cm-ease-out-ui:var(--cm-ease-out);
	/* Card-Zoom: ebenfalls ungedeckelt seit 6.0.40 (vorher 200-2500ms). Sehr
	   lange Werte machen den Zoom praktisch unsichtbar - live stand der Wert
	   einmal auf 10000ms und galt als "funktioniert nicht".
	   Eigene Kurve: ease-in-out (weich hinein UND heraus), statt der
	   globalen Ease-out-Kurve. */
	--cm-card-zoom-duration:var(--cm-card-zoom-speed);
	--cm-card-zoom-easing:cubic-bezier(.45,0,.55,1);
	/* Ueberblendzeit aller Slideshows (Customizer: Modul Slideshow), gedeckelt
	   auf einen wahrnehmbaren Bereich; weiche Ease-in-out-Kurve. */
	--cm-slideshow-fade:1500ms;
	--cm-slideshow-fade-duration:clamp(200ms,var(--cm-slideshow-fade),4000ms);
	/* Hero-Modul: Hoehe und Abdunkelung (Customizer: Modul Slideshow Hero) */
	--cm-hero-height:72vh;--cm-hero-overlay:rgba(0,0,0,.62);--cm-hero-overlay-height:55%;--cm-hero-blur-img-height:181.82%;
	--cm-hero-feather:15rem;--cm-hero-image-blur-on:1;
	/* Reserve fuer Ticker + Info-Zeile + Menueleiste + Abschnittsabstand +
	   Ueberschrift des naechsten Abschnitts (gemessen ~28rem, plus Luft); siehe .cm-hero */
	--cm-hero-reserve:30rem; /* Fallback; Customizer setzt sie je Breakpoint auf .cm-hero */
	--cm-ss-ratio:16/9;--cm-ss-ratio-mini:4/3;--cm-ss-mini-width:50%;
	--cm-logo-height:var(--cm-header-min-height);--cm-logo-height-mobile:var(--cm-header-min-height);
	--cm-slideshow-fade-easing:cubic-bezier(.45,0,.55,1);
	--cm-btn-padding-v:.875rem; --cm-btn-padding-h:1.75rem; --cm-btn-radius:4px; --cm-btn-border-width:2px;
	--cm-btn-transform:none;
	--cm-btn-bg-normal:#004538; --cm-btn-bg-hover:#005c40; --cm-btn-bg-active:#00261b; --cm-btn-bg-highlight:#f5e0a8;
	--cm-btn-border-normal:#004538; --cm-btn-border-hover:#005c40; --cm-btn-border-active:#00261b; --cm-btn-border-highlight:#f5e0a8;
	--cm-btn-text-normal:#fff5d7; --cm-btn-text-hover:#fffbee; --cm-btn-text-active:#fffbee; --cm-btn-text-highlight:#001a12;
	--cm-link-normal:#005c40; --cm-link-highlight:#00a674; --cm-link-hover:#007350; --cm-link-active:#003827;
	/* Interaktions-Sets (Customizer: "Farben - Interaktionselemente") */
	--cm-link-menu-normal:#fff5d7; --cm-link-menu-highlight:#f5e0a8; --cm-link-menu-hover:#fffbee; --cm-link-menu-active:#fffbee;
	--cm-link-footer-normal:#bda973; --cm-link-footer-highlight:#f5e0a8; --cm-link-footer-hover:#fffbee; --cm-link-footer-active:#aa9660;
	--cm-form-bg-normal:#fff; --cm-form-bg-hover:#fff; --cm-form-bg-active:#fff; --cm-form-border-normal:#aeafb1;
	--cm-form-border-hover:#aeafb1; --cm-form-border-active:#aeafb1; --cm-form-text-normal:#513f0e; --cm-form-text-active:#513f0e;
	--cm-form-label:#513f0e; --cm-form-placeholder:#79652f;
	/* Booking-Bar (Modul: Booking-Bar) - Fallbacks, der Customizer setzt alle Werte */
	--cm-bk-bg-rgba:rgba(255,255,255,.9); --cm-bk-bg-rgba-hover:rgba(255,255,255,1); --cm-bk-border:#8a8b8d; --cm-bk-icon:#79652f; --cm-bk-label:#79652f;
	--cm-bk-value-normal:#004538; --cm-bk-value-highlight:#79652f; --cm-bk-value-hover:#2f6b58; --cm-bk-value-active:#1a4f40;
	--cm-bk-panel-bg:#fffdf6; --cm-bk-panel-border:#8a8b8d; --cm-bk-select-bg:#004538; --cm-bk-select-text:#fff; --cm-bk-range-bg:#fffbee;
	--cm-bk-option-normal:#513f0e; --cm-bk-option-highlight:#79652f; --cm-bk-option-hover:#2f6b58; --cm-bk-option-active:#1a4f40;
	--cm-bk-title:#513f0e; --cm-bk-day-normal:#513f0e; --cm-bk-day-highlight:#79652f; --cm-bk-day-hover:#2f6b58; --cm-bk-day-active:#1a4f40; --cm-bk-small:#79652f;
	--cm-size-bk-label:var(--cm-size-small); --cm-size-bk-value:var(--cm-size-primary); --cm-size-bk-option:var(--cm-size-primary);
	--cm-size-bk-title:var(--cm-size-subheadline); --cm-size-bk-day:var(--cm-size-secondary); --cm-size-bk-small:var(--cm-size-small);
	--cm-font-bk-label:var(--cm-font-2); --cm-font-bk-value:var(--cm-font-2); --cm-font-bk-option:var(--cm-font-2);
	--cm-font-bk-title:var(--cm-font-1); --cm-font-bk-day:var(--cm-font-2); --cm-font-bk-small:var(--cm-font-2);
	--cm-menu-bg:#004538; --cm-menu-mega-bg:#00261b;
	--cm-menu-link-normal:#fff5d7; --cm-menu-link-highlight:#8f7b45; --cm-menu-link-hover:#fffbee; --cm-menu-link-active:#fffbee; --cm-menu-link:#fff5d7;
	--cm-menu-group-title:#aa9660; --cm-menu-desc:#bda973; --cm-menu-border:#003827; --cm-menu-icon:#fffbee;
	--cm-subbar-bg:#001a12; --cm-subbar-text:#fff5d7;
	--cm-subbar-link-normal:#fff5d7; --cm-subbar-link-highlight:#8f7b45; --cm-subbar-link-hover:#fffbee; --cm-subbar-link-active:#fffbee;
	--cm-footer-bg:#001a12; --cm-footer-text:#bda973; --cm-footer-headline:#aa9660;
	--cm-footer-link-normal:#bda973; --cm-footer-link-highlight:#fff; --cm-footer-link-hover:#fffbee; --cm-footer-link-active:#aa9660;
	--cm-ticker-bg:#79652f; --cm-ticker-text:#fff; --cm-ticker-speed:30s;
	--cm-ticker-link-normal:#fff; --cm-ticker-link-highlight:#8f7b45; --cm-ticker-link-hover:#fff; --cm-ticker-link-active:#fff;
	--cm-card-text:#fff; --cm-card-sub:#fff; --cm-card-overlay:rgba(0,26,18,.45);
	--cm-card3-text:#fff; --cm-card3-sub:#fff; --cm-card3-overlay:rgba(0,26,18,.45); --cm-card3-feather:7.5rem;
	--cm-card3-image-blur-on:1; --cm-card3-text-opacity:.92; --cm-card3-text-opacity-hover:1; --cm-card3-zoom-scale:1.04;
	--cm-card-text-opacity:.92; --cm-card-text-opacity-hover:1; --cm-card-feather:7.5rem; --cm-card-image-blur:.375rem; --cm-card-image-blur-on:1;
	--cm-card2-text-opacity:1; --cm-card2-text-opacity-hover:1;
	--cm-card-zoom-speed:1100ms; --cm-card-zoom-scale:1.04;
	--cm-card-ribbon-bg:#79652f; --cm-card-ribbon-text:#fff;
	--cm-ovicon-bg:#fff; --cm-ovicon-color:#001a12; --cm-ovicon-opacity:.65; --cm-ovicon-opacity-hover:1;
	--cm-ease-in:200ms; --cm-ease-out:420ms; --cm-easing:cubic-bezier(.22,.61,.36,1);
	/* Mikrointeraktion (Customizer: Farben - Interaktion): Dauer und die je
	   Anwendungsbereich gesetzten Animationsnamen ("none" = kein Aufblitzen,
	   dann gilt die normale Hover-Deklaration mit Transition). */
	--cm-mi-duration:420ms;
	--cm-mi-anim-color:cm-mi-color; --cm-mi-anim-color-active:cm-mi-color-active;
	--cm-mi-anim-bg:cm-mi-bg; --cm-mi-anim-bg-active:cm-mi-bg-active;
	--cm-mi-anim-border:cm-mi-border; --cm-mi-anim-border-active:cm-mi-border-active;
	--cm-mi-anim-surface:cm-mi-surface; --cm-mi-anim-surface-active:cm-mi-surface-active;
	--cm-header-height:4.5rem;
	/* Gestaltete Mindesthoehe der Kopfzeile (Customizer: Layout). Bewusst
	   getrennt von --cm-header-height: DIE wird per JavaScript aus der
	   tatsaechlichen Hoehe gemessen und darf niemals in die Kopfzeile selbst
	   zurueckfliessen - siehe BUGFIX bei .cm-header__inner. */
	--cm-header-min-height:4.5rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
	/* Barrierefreiheit (WCAG 2.2.2 / 2.3.3, EN 301 549): Bei "reduzierte
	   Bewegung" wechseln Slideshows nicht mehr automatisch (main.js), bleiben
	   aber ueber Punkte/Pfeile bedienbar und blenden weich ueber. Der
	   News-Ticker laeuft auf Wunsch des Betreibers auch hier (Vorgabe:
	   "laeuft immer"); er haelt bei Mauskontakt und Tastaturfokus an - das
	   ist der von WCAG 2.2.2 geforderte Mechanismus zum Anhalten. Die
	   Laufdauer wird unten wiederhergestellt (.cm-ticker__track). */
	.cm-slideshow__slide,.cm-hero__slide,.cm-gallery-slideshow__slide{transition-duration:var(--cm-slideshow-fade-duration)!important}
	/* Card-Zoom: vom Nutzer selbst ausgeloest (Hover/Fokus), kleiner
	   Ausschlag, keine Eigenbewegung der Seite - laeuft auf Wunsch des
	   Betreibers auch hier. Ohne diese Ausnahme sprang der Zoom auf
	   Systemen mit reduzierter Bewegung hart um, statt weich zu laufen. */
	.cm-pcard__link img,.cm-tile img{transition-duration:var(--cm-card-zoom-duration)!important}
	/* Mikrointeraktion (Aufblitzen): ein einzelner, vom Nutzer ausgeloester
	   Farbwechsel ohne Bewegung - keine "Motion Animation" im Sinne von
	   WCAG 2.3.3 und weit unter der Blitz-Schwelle von 2.3.1 (ein Blitz je
	   Hover). Sie laeuft deshalb auch bei "reduzierte Bewegung" (unter
	   Windows: Erleichterte Bedienung -> "Animationseffekte anzeigen" = aus)
	   mit ihrer eingestellten Dauer; ebenso das weiche Zurueckblenden. */
	*,*::before,*::after{animation-duration:var(--cm-mi-duration)!important}
	/* 6.0.51: Ohne die Wiederholungszahl lief das Laufband bei "reduzierte
	   Bewegung" genau EINMAL und blieb dann stehen (animation-iteration-count
	   :1 aus der Regel oben). Es soll aber durchlaufen - Anhalten geht ueber
	   Mauskontakt, Tastaturfokus und Klick (WCAG 2.2.2). */
	.cm-ticker__track{animation-duration:var(--cm-ticker-speed)!important;animation-iteration-count:infinite!important}
	a,button,input,select,textarea,.cm-pcard__text,.cm-pcard__subheadline,.cm-pcard__arrow,.cm-tile__title,.cm-tile__text,.cm-logo__text,.cm-slideshow__dot::before{transition-duration:var(--cm-ease-out)!important}
}
body{
	margin:0;background:var(--cm-body-bg);color:var(--cm-text);
	font-family:var(--cm-font-primary);font-size:var(--cm-size-primary);line-height:var(--cm-line-height);
	font-weight:var(--cm-weight-primary,400);
	overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit}
p{margin:0 0 1em}

/* Standard-Schriftschnitt ist überall 400 (Normal); je Typografie-
   Element im Customizer bei Bedarf gezielt auf 700 (Fett) stellbar
   (siehe "Typografie: Größen je Element" -> Schriftschnitt). */
h1,h2,h3,h4,h5,h6{color:var(--cm-heading);line-height:1.15;margin:0 0 .6em;font-weight:400}
h1{font-family:var(--cm-font-title);font-size:var(--cm-size-title);font-weight:var(--cm-weight-title,400);color:var(--cm-title)}
h2{font-family:var(--cm-font-headline);font-size:var(--cm-size-headline);font-weight:var(--cm-weight-headline,400)}
h3{font-family:var(--cm-font-subheadline);font-size:var(--cm-size-subheadline);font-weight:var(--cm-weight-subheadline,400);color:var(--cm-subheadline)}
h4{font-family:var(--cm-font-h4);font-size:var(--cm-size-h4);font-weight:var(--cm-weight-h4,400);color:var(--cm-h4)}
h5{font-family:var(--cm-font-h5);font-size:var(--cm-size-h5);font-weight:var(--cm-weight-h5,700);color:var(--cm-h5);line-height:1.3}
h6{font-family:var(--cm-font-h6);font-size:var(--cm-size-h6);font-weight:var(--cm-weight-h6,700);color:var(--cm-h6);line-height:1.3}
/* Eyebrow: eigene Rolle unter Typografie - Text (Schriftart/-schnitt/-groesse/Farbe) */
.cm-eyebrow{font-family:var(--cm-font-eyebrow);font-size:var(--cm-size-eyebrow);color:var(--cm-eyebrow);
	text-transform:uppercase;letter-spacing:.08em;font-weight:var(--cm-weight-eyebrow,400)}
.cm-text-secondary{font-family:var(--cm-font-secondary);font-size:var(--cm-size-secondary);font-weight:var(--cm-weight-secondary,400);color:var(--cm-secondary-text)}
.cm-text-small{font-family:var(--cm-font-small);font-size:var(--cm-size-small);font-weight:var(--cm-weight-small,400);color:var(--cm-small-text)}

a{
	--cm-mi-from:var(--cm-link-normal);--cm-mi-flash:var(--cm-link-highlight);--cm-mi-to:var(--cm-link-hover);--cm-mi-active:var(--cm-link-active);
	color:var(--cm-link-normal);text-decoration:none;transition:color var(--cm-ease-out) var(--cm-easing)
}
a:hover,a:focus-visible{color:var(--cm-mi-to);animation:var(--cm-mi-anim-color) var(--cm-mi-duration) var(--cm-easing) both}
a:active{color:var(--cm-link-active);animation:var(--cm-mi-anim-color-active) var(--cm-mi-duration) var(--cm-easing) both}
/* Keine Unterstreichungen auf der gesamten Website (Vorgabe) - in keinem
   Zustand. Ausgenommen bleibt, was im Editor bewusst unterstrichen wurde:
   <u>, <ins> und der Inline-Stil des Block-Editors werden hier nicht
   angefasst. Links in Fliesstexten unterscheiden sich vom Text ueber die
   Linkfarbe und das Aufblitzen bei Hover/Fokus. */
a,a:hover,a:focus,a:focus-visible,a:active,a:visited,button{text-decoration:none}

/* ---------- Barrierefreiheit ---------- */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px}
.skip-link{position:fixed;top:-6.25rem;left:1rem;z-index:10001;background:var(--cm-c-moos-gruen);color:#fff;
	padding:.8em 1.2em;border-radius:var(--cm-radius);transition:top .2s ease}
.skip-link:focus{top:1rem;width:auto;height:auto;clip:auto}
/* WCAG 2.4.7: Fokus auf Bildflaechen (Cards, Kacheln, Slideshow-Punkte) als
   doppelter Ring - innen weiss, aussen Fokusfarbe -, damit er auf jedem Foto
   sichtbar bleibt. */
.cm-pcard__link:focus-visible,.cm-tile:focus-visible,.cm-slideshow__dot:focus-visible,.cm-hero__slides .cm-slideshow__dot:focus-visible{
	outline:none;box-shadow:0 0 0 .125rem #fff,0 0 0 .3125rem var(--cm-focus)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
	outline:3px solid var(--cm-focus);outline-offset:2px;border-radius:2px}
/**
 * BUGFIX (Barrierefreiheit, WCAG 2.4.7 Fokus sichtbar): Eine einzelne
 * globale Fokusfarbe kann nicht gleichzeitig auf hellen UND dunklen
 * Flächen ausreichend Kontrast (>= 3:1) haben. Auf den dunklen
 * Flächen (Hauptmenü, Mega-Menü, Info-Zeile, Footer) wird die
 * Fokusfarbe hier lokal auf die für Dunkel vorgesehene zweite
 * Customizer-Farbe umgeschaltet.
 */
.cm-header,.cm-mega,.cm-subbar,.cm-footer{--cm-focus:var(--cm-focus-dark)}
[aria-current="page"]{font-weight:400}

/* ---------- Layout-Grundraster (nutzt die Customizer-Werte) ---------- */
.cm-container{width:100%;max-width:var(--cm-container-width);margin:0 auto;padding-left:var(--cm-container-gutter);padding-right:var(--cm-container-gutter)}
.cm-section{padding-top:var(--cm-section-spacing);padding-bottom:var(--cm-section-spacing)}
.cm-section--tight{padding-top:calc(var(--cm-section-spacing) / 3);padding-bottom:calc(var(--cm-section-spacing) / 3)}
.cm-section__cta{text-align:center;margin-top:calc(var(--cm-grid-gap) * 1.5)}
.cm-section__head{margin-bottom:calc(var(--cm-grid-gap) * 1.2)}
.cm-section__head .cm-eyebrow{margin:0 0 .45rem}
.cm-section__head h2,.cm-section__head h3{margin:0}
.cm-section__head--center{text-align:center}
@media (max-width:1000px){
	.cm-section{padding-top:calc(var(--cm-section-spacing) * .6);padding-bottom:calc(var(--cm-section-spacing) * .6)}
}

/* =========================================================
   EINHEITLICHE MIKROINTERAKTION (alle Interaktionselemente)
   Customizer: Farben - Interaktion -> Mikrointeraktion.
   Ablauf bei Hover/Fokus/Klick:
     0 %    Ausgangsfarbe des Elements (--cm-mi-*-from)
     30 %   Aufblitzen: zentrale Aufblitz-Farbe (Standard Weiss) mit
            Leuchten (innen Aufblitz-Farbe, aussen Ausgangsfarbe)
     100 %  Hover- bzw. Aktiv-Farbe (--cm-mi-*-to / -active); bleibt
            dank fill-mode "both", solange die Maus verweilt.
   Beim Verlassen uebernimmt die normale Transition das weiche
   Zurueckblenden. Jedes Element definiert nur seine --cm-mi-*-
   Farbvariablen; die Keyframes sind fuer alle identisch.

   Die Keyframes hier sind das Sicherheitsnetz mit den Standardwerten -
   die massgeblichen erzeugt customizer-output.php NACH dieser Datei
   (Aufblitz-Farbe, Leuchten, Zeitpunkt sind dort einstellbar).

   Anwendungsbereiche: Jede Regel animiert mit dem Namen aus
   --cm-mi-anim-<art>. customizer-output.php setzt diese Variablen je
   Gruppe (Hyperlinks = :root, Menue = Kopfzeile, Menue-Footer = Fusszeile,
   Buttons, Formularfelder) auf die Keyframe-Namen oder auf "none". Bei
   "none" gilt die normale Hover-Deklaration (Hover-Farbe mit Transition).
   ========================================================= */
@keyframes cm-mi-color{
	0%{color:var(--cm-mi-from);text-shadow:0 0 0 transparent,0 0 0 transparent}
	30%{color:#fff;text-shadow:0 0 .625rem #fff,0 0 1.25rem var(--cm-mi-from)}
	100%{color:var(--cm-mi-to);text-shadow:0 0 0 transparent,0 0 0 transparent}
}
@keyframes cm-mi-bg{
	0%{background-color:var(--cm-mi-from);box-shadow:0 0 0 transparent,0 0 0 transparent}
	30%{background-color:#fff;box-shadow:0 0 .625rem #fff,0 0 1.25rem var(--cm-mi-from)}
	100%{background-color:var(--cm-mi-to);box-shadow:0 0 0 transparent,0 0 0 transparent}
}
@keyframes cm-mi-border{
	0%{border-color:var(--cm-mi-border-from);box-shadow:0 0 0 transparent,0 0 0 transparent}
	30%{border-color:#fff;box-shadow:0 0 .625rem #fff,0 0 1.25rem var(--cm-mi-border-from)}
	100%{border-color:var(--cm-mi-border-to);box-shadow:0 0 0 transparent,0 0 0 transparent}
}
@keyframes cm-mi-surface{
	0%{background-color:var(--cm-mi-bg-from);border-color:var(--cm-mi-border-from);color:var(--cm-mi-text-from);box-shadow:0 0 0 transparent,0 0 0 transparent}
	30%{background-color:#fff;border-color:#fff;color:var(--cm-mi-text-flash);box-shadow:0 0 .625rem #fff,0 0 1.25rem var(--cm-mi-bg-from)}
	100%{background-color:var(--cm-mi-bg-to);border-color:var(--cm-mi-border-to);color:var(--cm-mi-text-to);box-shadow:0 0 0 transparent,0 0 0 transparent}
}
/* Klick (:active): Aufblitzen, dann Aktiv-Farbe (--cm-mi-*-active, sonst Hover-Farbe). */
@keyframes cm-mi-color-active{
	0%{color:var(--cm-mi-from);text-shadow:0 0 0 transparent,0 0 0 transparent}
	30%{color:#fff;text-shadow:0 0 .625rem #fff,0 0 1.25rem var(--cm-mi-from)}
	100%{color:var(--cm-mi-active,var(--cm-mi-to));text-shadow:0 0 0 transparent,0 0 0 transparent}
}
@keyframes cm-mi-bg-active{
	0%{background-color:var(--cm-mi-from);box-shadow:0 0 0 transparent,0 0 0 transparent}
	30%{background-color:#fff;box-shadow:0 0 .625rem #fff,0 0 1.25rem var(--cm-mi-from)}
	100%{background-color:var(--cm-mi-active,var(--cm-mi-to));box-shadow:0 0 0 transparent,0 0 0 transparent}
}
@keyframes cm-mi-border-active{
	0%{border-color:var(--cm-mi-border-from);box-shadow:0 0 0 transparent,0 0 0 transparent}
	30%{border-color:#fff;box-shadow:0 0 .625rem #fff,0 0 1.25rem var(--cm-mi-border-from)}
	100%{border-color:var(--cm-mi-border-active,var(--cm-mi-border-to));box-shadow:0 0 0 transparent,0 0 0 transparent}
}
@keyframes cm-mi-surface-active{
	0%{background-color:var(--cm-mi-bg-from);border-color:var(--cm-mi-border-from);color:var(--cm-mi-text-from);box-shadow:0 0 0 transparent,0 0 0 transparent}
	30%{background-color:#fff;border-color:#fff;color:var(--cm-mi-text-flash);box-shadow:0 0 .625rem #fff,0 0 1.25rem var(--cm-mi-bg-from)}
	100%{background-color:var(--cm-mi-bg-active,var(--cm-mi-bg-to));border-color:var(--cm-mi-border-active,var(--cm-mi-border-to));color:var(--cm-mi-text-active,var(--cm-mi-text-to));box-shadow:0 0 0 transparent,0 0 0 transparent}
}

/* ---------- Buttons: EIN einheitliches System ---------- */
.cm-btn,
button.cm-btn,
a.cm-btn,
input[type="submit"],
button[type="submit"]:not(.cm-ticker__close):not(.cm-burger):not(.cm-nav__toggle){
	--cm-mi-bg-from:var(--cm-btn-bg-normal);--cm-mi-bg-flash:var(--cm-btn-bg-highlight);--cm-mi-bg-to:var(--cm-btn-bg-hover);--cm-mi-bg-active:var(--cm-btn-bg-active);
	--cm-mi-border-from:var(--cm-btn-border-normal);--cm-mi-border-flash:var(--cm-btn-border-highlight);--cm-mi-border-to:var(--cm-btn-border-hover);--cm-mi-border-active:var(--cm-btn-border-active);
	--cm-mi-text-from:var(--cm-btn-text-normal);--cm-mi-text-flash:var(--cm-btn-text-highlight);--cm-mi-text-to:var(--cm-btn-text-hover);--cm-mi-text-active:var(--cm-btn-text-active);
	display:inline-flex;align-items:center;justify-content:center;gap:.5em;
	font-family:var(--cm-font-button);font-size:var(--cm-size-button);font-weight:var(--cm-weight-button,400);line-height:1.2;
	text-transform:var(--cm-btn-transform);text-decoration:none;cursor:pointer;
	padding:var(--cm-btn-padding-v) var(--cm-btn-padding-h);
	border-radius:var(--cm-btn-radius);
	border:var(--cm-btn-border-width) solid var(--cm-btn-border-normal);
	background:var(--cm-btn-bg-normal);color:var(--cm-btn-text-normal);
	min-height:2.75rem;
	transition:background-color var(--cm-ease-out) var(--cm-easing),
	           border-color var(--cm-ease-out) var(--cm-easing),
	           color var(--cm-ease-out) var(--cm-easing);
}
.cm-btn:hover,input[type="submit"]:hover,.cm-btn:focus-visible{background:var(--cm-mi-bg-to);border-color:var(--cm-mi-border-to);color:var(--cm-mi-text-to);animation:var(--cm-mi-anim-surface) var(--cm-mi-duration) var(--cm-easing) both}
.cm-btn:active,input[type="submit"]:active{background:var(--cm-btn-bg-active);border-color:var(--cm-btn-border-active);color:var(--cm-btn-text-active);animation:var(--cm-mi-anim-surface-active) var(--cm-mi-duration) var(--cm-easing) both}
.cm-btn--outline{
	--cm-mi-bg-from:transparent;--cm-mi-bg-flash:var(--cm-btn-bg-highlight);--cm-mi-bg-to:var(--cm-btn-bg-hover);--cm-mi-bg-active:var(--cm-btn-bg-active);
	--cm-mi-border-from:var(--cm-btn-bg-normal);--cm-mi-border-flash:var(--cm-btn-border-highlight);--cm-mi-border-to:var(--cm-btn-border-hover);--cm-mi-border-active:var(--cm-btn-border-active);
	--cm-mi-text-from:var(--cm-btn-bg-normal);--cm-mi-text-flash:var(--cm-btn-text-highlight);--cm-mi-text-to:var(--cm-btn-text-hover);--cm-mi-text-active:var(--cm-btn-text-active);
	background:transparent;color:var(--cm-btn-bg-normal);border-color:var(--cm-btn-bg-normal)
}
.cm-btn--full{display:flex;width:100%}
.cm-btn:disabled{opacity:.55;cursor:not-allowed}

/* ---------- Icons ---------- */
.cm-svg-icon{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;flex:0 0 auto}
.cm-svg-icon svg{width:100%;height:100%;display:block}

/* ---------- Formularelemente ---------- */
input[type="text"],input[type="email"],input[type="date"],input[type="number"],input[type="search"],input[type="tel"],select,textarea{
	width:100%;font-family:var(--cm-font-form-input);font-size:var(--cm-size-form-input);font-weight:var(--cm-weight-form-input,400);
	padding:calc(var(--cm-padding-v) * .5) calc(var(--cm-padding-h) * .5);
	background:var(--cm-form-bg-normal);color:var(--cm-form-text-normal);
	border:var(--cm-border-width) solid var(--cm-form-border-normal);border-radius:var(--cm-radius);
	min-height:2.75rem;
	transition:border-color var(--cm-ease-out) var(--cm-easing),background-color var(--cm-ease-out) var(--cm-easing);
}
/* Mikrointeraktion (Customizer: Formularfelder): Rahmen blitzt auf, Hintergrund
   und Text wechseln weich in die Hover-/Aktiv-Farben. */
input[type="text"],input[type="email"],input[type="date"],input[type="number"],input[type="search"],input[type="tel"],select,textarea{
	--cm-mi-border-from:var(--cm-form-border-normal);--cm-mi-border-flash:var(--cm-link-highlight);--cm-mi-border-to:var(--cm-form-border-hover);--cm-mi-border-active:var(--cm-form-border-active)}
input:hover,select:hover,textarea:hover{border-color:var(--cm-form-border-hover);background:var(--cm-form-bg-hover);color:var(--cm-form-text-hover);animation:var(--cm-mi-anim-border) var(--cm-mi-duration) var(--cm-easing) both}
input:focus,select:focus,textarea:focus{border-color:var(--cm-form-border-active);background:var(--cm-form-bg-active);color:var(--cm-form-text-active);animation:var(--cm-mi-anim-border-active) var(--cm-mi-duration) var(--cm-easing) both}
input[type="submit"]:focus,input[type="checkbox"],input[type="radio"],input[type="file"],input[type="range"]{animation:none}
label{font-family:var(--cm-font-form-label);font-size:var(--cm-size-form-label);font-weight:var(--cm-weight-form-label,400);color:var(--cm-form-label-normal);
	--cm-mi-from:var(--cm-form-label-normal);--cm-mi-flash:var(--cm-form-label-highlight);--cm-mi-to:var(--cm-form-label-hover);--cm-mi-active:var(--cm-form-label-active);
	transition:color var(--cm-ease-out) var(--cm-easing)}
label:hover,label:focus-within{color:var(--cm-mi-to)}
input::placeholder,textarea::placeholder{color:var(--cm-form-placeholder);opacity:1}
input[type="checkbox"],input[type="radio"]{width:1.25rem;height:1.25rem;min-height:0;accent-color:var(--cm-c-moos-gruen)}

/* =========================================================
   NEWS-TICKER  (Duplikat-Marquee, ohne JavaScript sichtbar)
   ========================================================= */
.cm-ticker{position:relative;background:var(--cm-ticker-bg);color:var(--cm-ticker-text);
	font-family:var(--cm-font-ticker,var(--cm-font-secondary));font-size:var(--cm-size-ticker,var(--cm-size-secondary));font-weight:var(--cm-weight-ticker,400)}
/* Rechts Platz fuer den Schliessen-Schalter, der 20px vom Browserrand steht
   (ausserhalb der Inhaltsbreite). Auf breiten Bildschirmen liegt er im
   freien Rand neben dem Container (Innenabstand = normaler Seitenrand);
   wird der Bildschirm schmaler als Container + Schalter, waechst der
   Innenabstand genau um den fehlenden Platz, damit der laufende Text nie
   unter dem Schalter hindurchlaeuft. 12px Reserve fuer die Scrollleiste,
   die in 100vw mitgezaehlt wird. */
.cm-ticker__inner{display:flex;align-items:center;gap:.5rem;min-height:2.375rem;
	padding-right:clamp(var(--cm-container-gutter),
		calc(var(--cm-container-gutter) + 4.375rem - (100vw - var(--cm-container-width)) / 2),
		calc(var(--cm-container-gutter) + 4.375rem))}
.cm-ticker__viewport{flex:1 1 auto;overflow:hidden;min-width:0}
.cm-ticker__track{display:inline-flex;white-space:nowrap;will-change:transform;
	animation:cm-ticker-run var(--cm-ticker-speed) linear infinite}
/* min-height: WCAG 2.5.8 - die Ticker-Meldungen waren nur 21px hoch. */
/* Ticker-Link: dieselbe Mikrointeraktion wie alle Links - Aufblitzen zur
   Highlight-Farbe des Sets "Links Text"; Grundfarbe bleibt die Tickerfarbe,
   weil der Ticker seine eigene Flaeche hat. */
.cm-ticker__item{color:inherit;padding-right:8rem;flex:0 0 auto;
	display:inline-flex;align-items:center;min-height:1.5rem}
/* Ticker-Link: Customizer "Interaktion" des Moduls (Standard: Tickertext) */
a.cm-ticker__item{color:var(--cm-ticker-link-normal);transition:color var(--cm-ease-out) var(--cm-easing);
	--cm-mi-from:var(--cm-ticker-link-normal);--cm-mi-flash:var(--cm-ticker-link-highlight);--cm-mi-to:var(--cm-ticker-link-hover);--cm-mi-active:var(--cm-ticker-link-active)}
a.cm-ticker__item:active{color:var(--cm-ticker-link-active);animation:var(--cm-mi-anim-color-active) var(--cm-mi-duration) var(--cm-easing) both}
@keyframes cm-ticker-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cm-ticker:hover .cm-ticker__track,
.cm-ticker:focus-within .cm-ticker__track{animation-play-state:paused}
/* WCAG 2.2.2: angehalten per Klick/Tipp bzw. nach der eingestellten Zahl von
   Durchlaeufen; die Meldung bleibt dann vollstaendig lesbar stehen. */
.cm-ticker.is-paused .cm-ticker__track{animation-play-state:paused}
/* Ganz rechts, 20px vom Browserrand (Vorgabe) - ausserhalb des Containers */
/* 6.0.53: Das "X" ist ein Bedienelement und nimmt deshalb das Farb-Set
   "Interaktion" des Moduls (genau wie der Ticker-Link) - nicht mehr die
   Textfarbe. Auch das fruehere Abdunkeln auf 75 % ist entfallen: sonst
   zeigte der Schalter nie genau den eingestellten Farbwert. */
.cm-ticker__close{position:absolute;right:1.25rem;top:50%;transform:translateY(-50%);
	background:none;border:0;cursor:pointer;font-size:1rem;color:var(--cm-ticker-link-normal);
	width:2.375rem;height:2.375rem;display:inline-flex;align-items:center;justify-content:center;
	--cm-mi-from:var(--cm-ticker-link-normal);--cm-mi-flash:var(--cm-ticker-link-highlight);--cm-mi-to:var(--cm-ticker-link-hover);--cm-mi-active:var(--cm-ticker-link-active);
	transition:color var(--cm-ease-out) var(--cm-easing)}
.cm-ticker__close:hover,.cm-ticker__close:focus-visible{color:var(--cm-mi-to);animation:var(--cm-mi-anim-color) var(--cm-mi-duration) var(--cm-easing) both}
.cm-ticker__close:active{color:var(--cm-ticker-link-active);animation:var(--cm-mi-anim-color-active) var(--cm-mi-duration) var(--cm-easing) both}
/* Der Ticker laeuft immer (auch bei "reduzierte Bewegung", siehe oben) und
   haelt bei Mauskontakt/Tastaturfokus an. Kein Pause-Schalter (Vorgabe). */

/* =========================================================
   INFO-ZEILE
   ========================================================= */
/* 6.0.53: eigene Schrift (Modul: Kopfzeile -> Schrift). Ohne Einstellung
   gilt wie bisher die Rolle "Text Sekundaer". */
.cm-subbar{background:var(--cm-subbar-bg);color:var(--cm-subbar-text);
	font-family:var(--cm-font-subbar,var(--cm-font-secondary));
	font-size:var(--cm-size-subbar,var(--cm-size-secondary));
	font-weight:var(--cm-weight-subbar,400);
	transition:transform var(--cm-ease-out) var(--cm-easing)}
.cm-subbar.is-hidden{transform:translateY(-100%)}
/* 6.0.46: Oben etwas weniger Luft als unten - die 32px-Kreise der
   Social-Icons machen die Zeile hoeher als den Text daneben und liessen
   Sprachwahl und Icons dadurch tief sitzen. */
.cm-subbar__inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;padding-top:.25rem;padding-bottom:.45rem}
.cm-subbar__group{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
/* 6.0.44: Huelle um die Sprachwahl, damit sie einzeln ein-/ausgeblendet
   werden kann (Modul: Kopfzeile -> Anzeige). display:contents laesst die
   Sprachwahl im Flex-Fluss der Gruppe wie bisher; ein spaeteres
   display:none der Media Query blendet sie trotzdem aus. */
.cm-subbar__item--lang{display:contents}
/* min-height: WCAG 2.5.8 - die Links der Info-Zeile und die Sprachwahl
   waren nur 21px hoch. */
/* Links der Info-Zeile: Customizer "Interaktion" der Kopfzeile (Standard: Link Heller) */
.cm-subbar__link{display:inline-flex;align-items:center;gap:.4em;min-height:1.5rem;color:var(--cm-subbar-link-normal);
	--cm-mi-from:var(--cm-subbar-link-normal);--cm-mi-flash:var(--cm-subbar-link-highlight);--cm-mi-to:var(--cm-subbar-link-hover);--cm-mi-active:var(--cm-subbar-link-active);
	transition:color var(--cm-ease-out) var(--cm-easing)}
.cm-subbar__link:hover,.cm-subbar__link:focus-visible{color:var(--cm-mi-to);animation:var(--cm-mi-anim-color) var(--cm-mi-duration) var(--cm-easing) both}
.cm-subbar__link:active{color:var(--cm-subbar-link-active);animation:var(--cm-mi-anim-color-active) var(--cm-mi-duration) var(--cm-easing) both}
.cm-lang{display:inline-flex;align-items:center;gap:.4em;font-weight:400}
/* 6.0.53: In der Kopfzeile folgt die Sprachwahl dem dort eingestellten
   Schriftschnitt; die aktive Sprache bleibt fett (Regel unten). */
.cm-subbar .cm-lang{font-weight:inherit}
/* min-width zusaetzlich: "DE"/"EN" sind so kurz, dass die Trefferflaeche
   sonst nur ~22px breit bliebe - die Zielgroesse gilt in BEIDEN Richtungen. */
.cm-lang a{display:inline-flex;align-items:center;justify-content:center;
	min-height:1.5rem;min-width:1.5rem;padding-inline:.15rem;color:var(--cm-subbar-link-normal);
	--cm-mi-from:var(--cm-subbar-link-normal);--cm-mi-flash:var(--cm-subbar-link-highlight);--cm-mi-to:var(--cm-subbar-link-hover);--cm-mi-active:var(--cm-subbar-link-active)}
.cm-lang a:active{color:var(--cm-subbar-link-active);animation:var(--cm-mi-anim-color-active) var(--cm-mi-duration) var(--cm-easing) both}
.cm-lang a[aria-current]{font-weight:700}
/* 6.0.47: Der Schraegstrich ist kein Link - er nimmt deshalb die Farbe
   "Text" aus "Modul: Kopfzeile" (wie jedes andere Nicht-Link-Element der
   Zeile), nicht die Linkfarbe des Farb-Sets. */
.cm-subbar .cm-lang__sep{color:var(--cm-subbar-text)}
/* Im Fussbereich gilt entsprechend dessen Textfarbe (sie wird vererbt). */
.cm-lang__sep{opacity:1}
.cm-social{display:inline-flex;gap:.5rem;align-items:center}
/* 6.0.46: Symbol UND Kreisrand nehmen dieselbe Farbe - die Interaktions-
   farbe der Kopfzeile (Customizer: Modul: Kopfzeile -> Interaktion). Der
   Rand folgt ueber currentColor automatisch jedem Zustand (Normal, Hover,
   Aktiv, Aufblitzen); vorher kam er aus "Mega-Menue -> Rahmen" und passte
   damit nicht zum Symbol. Aus demselben Grund fuellt der Kreis sich beim
   Hover nicht mehr, sondern wechselt nur die Farbe - wie jeder andere
   Link der Zeile. */
/* 6.0.47: Kreis 2 px kleiner (1,875rem = 30 px statt 32 px), Rahmen 1 px staerker. */
.cm-social__link{width:1.875rem;height:1.875rem;display:inline-flex;align-items:center;justify-content:center;line-height:0;
	border:2px solid currentColor;border-radius:50%;color:var(--cm-subbar-link-normal);background:none;
	--cm-mi-from:var(--cm-subbar-link-normal);--cm-mi-flash:var(--cm-subbar-link-highlight);--cm-mi-to:var(--cm-subbar-link-hover);--cm-mi-active:var(--cm-subbar-link-active);
	transition:color var(--cm-ease-out) var(--cm-easing)}
.cm-social__link:active{color:var(--cm-mi-active);animation:var(--cm-mi-anim-color-active) var(--cm-mi-duration) var(--cm-easing) both}
.cm-social__link .cm-svg-icon{width:1rem;height:1rem;pointer-events:none;display:block}
/* Klicks landen immer auf dem Link selbst (nicht auf dem SVG), und der Link
   liegt sicher ueber benachbarten Flaechen. */
.cm-social__link{position:relative;z-index:2;pointer-events:auto}
.cm-social__link:hover,.cm-social__link:focus-visible{color:var(--cm-mi-to);animation:var(--cm-mi-anim-color) var(--cm-mi-duration) var(--cm-easing) both}
@media (max-width:1000px){
	/* Mobil steht jede Gruppe in einer eigenen Zeile, mittig - auch die
	   Sprachwahl samt Social-Icons (6.0.46: die Zeile darf nicht mehr
	   ueber die volle Breite auseinandergezogen werden). */
	.cm-subbar__inner{justify-content:center;flex-direction:column;align-items:center}
	.cm-subbar__group{justify-content:center;width:auto;max-width:100%}
}

/* =========================================================
   HAUPTNAVIGATION + MEGA-MENÜ
   ========================================================= */
.cm-header{position:sticky;top:0;z-index:1000;background:var(--cm-menu-bg);box-shadow:0 1px .625rem rgba(0,0,0,.18)}
/**
 * BUGFIX ("Hauptmenue-Zeile wird beim Vergroessern des Fensters uebermaessig
 * hoch, teils ueber die ganze Fensterhoehe"): Hier stand
 * min-height:var(--cm-header-height) - und diese Variable wird per
 * JavaScript aus der GEMESSENEN Hoehe der Kopfzeile gesetzt. Eine
 * Rueckkopplung: wurde die Kopfzeile beim Umbruch von Off-Canvas- auf
 * Desktop-Menue auch nur einen Moment hoeher (z. B. weil das Menue kurz
 * mit seinem mobilen Innenabstand in der Kopfzeile lag), rastete diese
 * Hoehe als Mindesthoehe ein; jede Menuezeile wurde so hoch wie die ganze
 * Kopfzeile, die Messung stieg weiter - bis das Fenster sie begrenzte.
 * Die Kopfzeile bekommt jetzt eine feste, gestaltete Mindesthoehe.
 */
.cm-header__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--cm-header-min-height)}
/* Das Logo nutzt die Hoehe der Menueleiste (Customizer: Modul Menues ->
   Logo Desktop/Smartphone - Hoehe in %). Breite folgt dem Seitenverhaeltnis. */
.cm-logo{flex:0 0 auto;display:inline-flex;align-items:center;height:var(--cm-logo-height)}
.cm-logo__text{font-family:var(--cm-font-title);font-size:1.6rem;font-weight:400;color:var(--cm-menu-link-normal);letter-spacing:.04em;
	--cm-mi-from:var(--cm-menu-link-normal);--cm-mi-flash:var(--cm-menu-link-highlight);--cm-mi-to:var(--cm-menu-link-hover);--cm-mi-active:var(--cm-menu-link-active);
	transition:color var(--cm-ease-out) var(--cm-easing)}
.cm-logo:hover .cm-logo__text,.cm-logo:focus-visible .cm-logo__text{color:var(--cm-mi-to);animation:var(--cm-mi-anim-color) var(--cm-mi-duration) var(--cm-easing) both}
.cm-logo__picture{display:inline-flex;align-items:center;height:100%}
.cm-logo img{height:100%;max-height:none;width:auto;max-width:none}
/* SVG-Code als Logo (Customizer: Titel/Logo/Favicon): Hoehe = Logo-Hoehe, Breite nach viewBox */
.cm-logo__svg{display:inline-flex;align-items:center;height:100%}
.cm-logo__svg svg{height:100%;width:auto;max-width:none;display:block}
/* 6.0.47: "SVG Color Hover". Die Farbangaben im SVG lauten dann
   var(--cm-svgc, <Normalfarbe>); die Variable ist nur beim Ueberfahren
   gesetzt, sonst greift der Rueckfallwert. Den Hover-Wert traegt das
   Element selbst als --cm-svgc-hover (siehe cm_svg_hover_style()). */
.cm-logo__svg svg *,.cm-logo__svg svg{transition:fill var(--cm-ease-out) var(--cm-easing),stroke var(--cm-ease-out) var(--cm-easing)}
.cm-logo:hover .cm-logo__svg,.cm-logo:focus-visible .cm-logo__svg{--cm-svgc:var(--cm-svgc-hover)}
/* Zwei Varianten im Markup (mind. eine als SVG-Code): bis Smartphone-Breakpoint die Smartphone-Variante */
.cm-logo__picture--dual .cm-logo__svg--mobile,.cm-logo__picture--dual .cm-logo__img--mobile{display:none}
@media (max-width:1000px){
	.cm-logo{height:var(--cm-logo-height-mobile)}
	.cm-logo__picture--dual .cm-logo__svg--desktop,.cm-logo__picture--dual .cm-logo__img--desktop{display:none}
	.cm-logo__picture--dual .cm-logo__svg--mobile{display:inline-flex}
	.cm-logo__picture--dual .cm-logo__img--mobile{display:block}
}
.cm-footer__brand .cm-logo__picture,.cm-footer__brand .cm-logo__picture img{height:auto;max-height:3.25rem}
.cm-header__actions{display:flex;align-items:center;gap:.75rem;flex:0 0 auto}
/* 6.0.49: Sprachauswahl in der Menüleiste - nur im mobilen Menü, also dort,
   wo auch Burger und Buchungs-Icon stehen. Die Links folgen dem Farb-Set
   "Interaktion" der Menüleiste, der Schrägstrich als Nicht-Link der Farbe
   "Icons" (dieselbe Regel wie in der Kopfzeile). */
.cm-header__lang{display:none}
@media (max-width:1199px){
	.cm-header__lang{display:inline-flex;align-items:center}
	.cm-header__lang .cm-lang{font-size:var(--cm-size-secondary)}
	.cm-header__lang .cm-lang a{color:var(--cm-menu-link-normal);
		--cm-mi-from:var(--cm-menu-link-normal);--cm-mi-flash:var(--cm-menu-link-highlight);--cm-mi-to:var(--cm-menu-link-hover);--cm-mi-active:var(--cm-menu-link-active)}
	.cm-header__lang .cm-lang a:hover,.cm-header__lang .cm-lang a:focus-visible{color:var(--cm-mi-to);animation:var(--cm-mi-anim-color) var(--cm-mi-duration) var(--cm-easing) both}
	.cm-header__lang .cm-lang a:active{color:var(--cm-menu-link-active);animation:var(--cm-mi-anim-color-active) var(--cm-mi-duration) var(--cm-easing) both}
	.cm-header__lang .cm-lang__sep{color:var(--cm-menu-icon)}
}
.cm-header__book-icon{display:none}

.cm-burger{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;
	background:none;border:0;color:var(--cm-menu-icon);cursor:pointer;font-size:1.5rem;
	--cm-mi-from:var(--cm-menu-icon-normal);--cm-mi-flash:var(--cm-menu-icon-highlight);--cm-mi-to:var(--cm-menu-icon-hover);--cm-mi-active:var(--cm-menu-icon-active);
	opacity:.85;transition:opacity var(--cm-ease-out-ui) var(--cm-easing),color var(--cm-ease-out) var(--cm-easing)}
.cm-burger:hover,.cm-burger:focus-visible{opacity:1;color:var(--cm-mi-to);animation:var(--cm-mi-anim-color) var(--cm-mi-duration) var(--cm-easing) both}
.cm-burger:active{color:var(--cm-mi-active);animation:var(--cm-mi-anim-color-active) var(--cm-mi-duration) var(--cm-easing) both}
.cm-burger:active{opacity:.7}
/* 6.0.45: Die Huelle um das Burger-Icon war eine Zeilenbox - deren
   Unterlaenge machte sie hoeher als das Icon (36,4 statt 30 px) und schob
   es um 3,2 px nach oben, gegenueber dem Kalender-Icon sichtbar versetzt.
   Mit einer zentrierenden Flex-Box sitzen beide Icons auf derselben Hoehe. */
.cm-burger{line-height:0}
.cm-burger__open{display:inline-flex}
.cm-burger__open,.cm-burger__close{align-items:center;justify-content:center}
.cm-burger__close{display:none}
.cm-burger[aria-expanded="true"] .cm-burger__open{display:none}
.cm-burger[aria-expanded="true"] .cm-burger__close{display:inline-flex}

.cm-nav__list{list-style:none;margin:0;padding:0}
.cm-nav__item{position:relative}
/* Hauptpunkt mit Untermenue: Link + Aufklapp-Schalter in einer Zeile */
.cm-nav__row{display:flex;align-items:center;width:100%;gap:.15rem}
.cm-nav__toggle--icon{display:inline-flex;align-items:center;justify-content:center;
	background:none;border:0;padding:0 .35rem;min-width:2.75rem;min-height:2.75rem;cursor:pointer;
	color:var(--cm-menu-link-normal);
	--cm-mi-from:var(--cm-menu-link-normal);--cm-mi-flash:var(--cm-menu-link-highlight);--cm-mi-to:var(--cm-menu-link-hover);--cm-mi-active:var(--cm-menu-link-active);
	transition:color var(--cm-ease-out) var(--cm-easing)}
.cm-nav__toggle--icon:hover,.cm-nav__toggle--icon:focus-visible{color:var(--cm-mi-to);animation:var(--cm-mi-anim-color) var(--cm-mi-duration) var(--cm-easing) both}
.cm-nav__row .cm-nav__link{width:auto;flex:1 1 auto}
.cm-nav__link{display:flex;align-items:center;gap:.4em;width:100%;
	font-family:var(--cm-font-nav);font-size:var(--cm-size-nav);font-weight:var(--cm-weight-nav,400);
	color:var(--cm-menu-link-normal);background:none;border:0;cursor:pointer;text-align:left;
	--cm-mi-from:var(--cm-menu-link-normal);--cm-mi-flash:var(--cm-menu-link-highlight);--cm-mi-to:var(--cm-menu-link-hover);--cm-mi-active:var(--cm-menu-link-active);
	padding:.85rem 0;min-height:2.75rem;
	transition:color var(--cm-ease-out) var(--cm-easing)}
.cm-nav__link:hover,.cm-nav__link:focus-visible{color:var(--cm-mi-to);animation:var(--cm-mi-anim-color) var(--cm-mi-duration) var(--cm-easing) both}
.cm-nav__link:active{color:var(--cm-menu-link-active);animation:var(--cm-mi-anim-color-active) var(--cm-mi-duration) var(--cm-easing) both}
/* 6.0.44: Pfeil-Icons der Menuepunkte doppelt so gross (vorher .8em) -
   auf allen Bildschirmgroessen, da die Groesse an der Schrift haengt. */
.cm-nav__chevron{width:1.6em;height:1.6em;transition:transform var(--cm-ease-out-ui) var(--cm-easing)}

/* 6.0.51: eigene Schrifteinstellung (Menü-Design → Spaltenüberschrift – Schrift);
   vorher hing die Größe fest an der Rolle "Text Kleiner". */
.cm-mega__group-title{display:block;font-family:var(--cm-font-mega-title,var(--cm-font-secondary));
	font-size:var(--cm-size-mega-title,var(--cm-size-small));font-weight:var(--cm-weight-mega-title,400);
	text-transform:uppercase;letter-spacing:.1em;color:var(--cm-menu-group-title);margin-bottom:.75rem}
.cm-mega__links{list-style:none;margin:0;padding:0}
.cm-mega__links a{display:block;padding:.55rem 0;color:var(--cm-menu-link-normal);
	--cm-mi-from:var(--cm-menu-link-normal);--cm-mi-flash:var(--cm-menu-link-highlight);--cm-mi-to:var(--cm-menu-link-hover);--cm-mi-active:var(--cm-menu-link-active);
	transition:color var(--cm-ease-out) var(--cm-easing)}
.cm-mega__links a:hover,.cm-mega__links a:focus-visible{color:var(--cm-mi-to);animation:var(--cm-mi-anim-color) var(--cm-mi-duration) var(--cm-easing) both}
.cm-mega__links a:active{color:var(--cm-menu-link-active);animation:var(--cm-mi-anim-color-active) var(--cm-mi-duration) var(--cm-easing) both}
.cm-mega__link-title{display:block;font-family:var(--cm-font-subnav);font-size:var(--cm-size-subnav);font-weight:var(--cm-weight-subnav,400)}
.cm-mega__link-desc{display:block;font-size:var(--cm-size-small);color:var(--cm-menu-desc);margin-top:.15rem;line-height:1.4}
.cm-mega__overview{display:inline-flex;align-items:center;gap:.5em;font-weight:400;color:var(--cm-menu-group-title);
	--cm-mi-from:var(--cm-menu-group-title);--cm-mi-flash:var(--cm-menu-group-title-highlight);--cm-mi-to:var(--cm-menu-group-title-hover);--cm-mi-active:var(--cm-menu-group-title-active)}
.cm-mega__overview:hover,.cm-mega__overview:focus-visible{color:var(--cm-mi-to);animation:var(--cm-mi-anim-color) var(--cm-mi-duration) var(--cm-easing) both}
.cm-mega__overview:active{color:var(--cm-menu-group-title-active);animation:var(--cm-mi-anim-color-active) var(--cm-mi-duration) var(--cm-easing) both}
.cm-mega__overview-icon{width:1em;height:1em;transition:transform var(--cm-ease-out) var(--cm-easing)}
.cm-mega__overview:hover .cm-mega__overview-icon{transform:translateX(4px)}

/* ---- MOBIL: Off-Canvas mit Akkordeon ---- */
@media (max-width:1199px){
	/* Scroll-Sperre bei offenem Off-Canvas-Menue - nur in diesem Breakpoint,
	   damit sie auf dem Desktop unter keinen Umstaenden haengen bleibt. */
	html.cm-nav-open{overflow:hidden}
	/* Das Panel beginnt an der Unterkante der Kopfzeile (--cm-nav-top setzt
	   main.js beim Oeffnen aus der gemessenen Position - die Kopfzeile ist
	   sticky und steht ungescrollt unter Ticker/Info-Zeile, gescrollt oben).
	   Logo, Buchen-Button und Schliessen-Schalter bleiben so an Ort und Stelle
	   sichtbar, statt vom Panel verdeckt zu werden. */
	.cm-nav{
		position:fixed;top:var(--cm-nav-top,0px);right:0;bottom:0;width:min(90vw,23.75rem);z-index:1002;
		background:var(--cm-menu-bg);overflow-y:auto;padding:1rem 1.5rem 2rem;
		transform:translateX(100%);visibility:hidden;
		transition:transform var(--cm-ease-out-ui) var(--cm-easing),visibility 0s linear var(--cm-ease-out-ui);
	}
	.cm-nav.is-open{transform:translateX(0);visibility:visible;transition:transform var(--cm-ease-out-ui) var(--cm-easing)}
	.cm-nav__item{border-bottom:1px solid var(--cm-menu-border)}
	.cm-nav__link{justify-content:space-between}
	.cm-nav__row{justify-content:space-between}
	.cm-nav__row .cm-nav__link{flex:1 1 auto}
	.cm-mega{max-height:0;overflow:hidden;transition:max-height var(--cm-ease-out-ui) var(--cm-easing)}
	.cm-nav__item.is-open .cm-mega{max-height:125rem}
	.cm-nav__item.is-open .cm-nav__chevron{transform:rotate(180deg)}
	.cm-mega__inner{padding:0 0 1rem;max-width:none}
	.cm-mega__group{padding:.5rem 0 .75rem}
	/* Buchen-Schalter bleibt als Icon sichtbar. 6.0.44: nur noch das Icon -
	   ohne Flaeche und Rahmen, in derselben Groesse wie das Burger-Icon.
	   Der Schalter verhaelt sich damit wie der Burger (Farbwechsel und
	   Aufblitzen ueber die Menue-Icon-Farben statt ueber die Button-Farben). */
	.cm-header .cm-header__book{width:2.75rem;min-height:2.75rem;padding:0;justify-content:center;
		background:none;border:0;box-shadow:none;border-radius:0;color:var(--cm-menu-icon);opacity:.85;
		--cm-mi-from:var(--cm-menu-icon-normal);--cm-mi-flash:var(--cm-menu-icon-highlight);--cm-mi-to:var(--cm-menu-icon-hover);--cm-mi-active:var(--cm-menu-icon-active)}
	.cm-header .cm-header__book:hover,.cm-header .cm-header__book:focus-visible{
		background:none;border-color:transparent;opacity:1;color:var(--cm-mi-to);
		animation:var(--cm-mi-anim-color) var(--cm-mi-duration) var(--cm-easing) both}
	.cm-header .cm-header__book:active{background:none;border-color:transparent;color:var(--cm-mi-active);
		animation:var(--cm-mi-anim-color-active) var(--cm-mi-duration) var(--cm-easing) both}
	.cm-header__book-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
	/* 1,875rem = 1,5rem + 25 % (Burger-Icon), Kalender genauso gross */
	.cm-header__book-icon{display:inline-flex;width:1.875rem;height:1.875rem}
	/* 6.0.48: "Buchungs-Icon Menü" abgeschaltet (Menü-Design) - gilt nur
	   dort, wo der Buchen-Schalter ein reines Icon ist, also im mobilen
	   Menü; auf dem Desktop bleibt der Buchen-Button erhalten. */
	body.cm-no-book-icon-mobile .cm-header .cm-header__book{display:none}
	.cm-burger{font-size:1.875rem}
	.cm-nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1001;border:0}
	/* BUGFIX 6.0.28 ("Overlay/Dim liegt ueber dem Menue"): .cm-nav steht IM
	   Header, und der Header (position:sticky; z-index:1000) bildet einen
	   eigenen Stapelkontext. Das z-index:1002 des Menues gilt nur innerhalb
	   dieses Kontexts - nach aussen zaehlt der Header mit 1000. Das Overlay
	   (1001, ausserhalb des Headers) lag deshalb UEBER Menue, Logo und
	   Burger: Menue abgedunkelt, kein Klick kam durch, der Schliessen-
	   Schalter war verdeckt, und die Buchungsleiste (1140) ragte ins Menue.
	   Bei offenem Menue wird der Header ueber Overlay und Buchungsleiste
	   gehoben; das Panel haengt unter der Kopfzeile (siehe .cm-nav), damit
	   Logo und Schliessen-Schalter sichtbar und bedienbar bleiben. */
	html.cm-nav-open .cm-header{z-index:1190}
}

/* ---- DESKTOP: Leiste + Panel über volle Breite ---- */
@media (min-width:1200px){
	.cm-burger{display:none}
	.cm-nav-overlay{display:none}
	/* Harte Zuruecksetzung ALLER Off-Canvas-Eigenschaften. Der mobile Block
	   endet zwar bei 1023px, aber beim Ueberschreiten der Grenze koennen
	   laufende Uebergaenge (transform, visibility) und der Zustand .is-open
	   noch nachwirken - das Menue lag dann mit 88px Innenabstand und 611px
	   Verschiebung in der Kopfzeile (gemessen). Hier gilt deshalb jeder
	   Wert explizit, unabhaengig davon, was vorher war. */
	.cm-nav,.cm-nav.is-open{
		flex:1 1 auto;display:flex;justify-content:center;
		position:static;transform:none;visibility:visible;
		padding:0;width:auto;height:auto;min-height:0;
		background:transparent;overflow:visible;z-index:auto;transition:none;
	}
	.cm-nav__list{display:flex;align-items:center;flex-wrap:nowrap;gap:clamp(.9rem,2vw,2rem)}
	.cm-nav__item{position:static;min-width:0;border-bottom:0}
	.cm-nav__link{padding:0;min-height:var(--cm-header-min-height);white-space:nowrap}
	.cm-nav__toggle--icon{min-height:var(--cm-header-min-height);min-width:1.75rem;padding:0}

	.cm-mega{
		position:absolute;left:0;right:0;top:100%;
		max-height:none;overflow:visible; /* Akkordeon-Werte des mobilen Blocks explizit aufheben */
		background:var(--cm-menu-mega-bg);
		box-shadow:0 1.125rem 2.5rem rgba(0,0,0,.28);
		border-top:1px solid var(--cm-menu-border);
		opacity:0;visibility:hidden;transform:translateY(-.5rem);
		transition:opacity var(--cm-ease-out-ui) var(--cm-easing),
		           transform var(--cm-ease-out-ui) var(--cm-easing),
		           visibility 0s linear var(--cm-ease-out-ui);
	}
	/* Öffnet per Hover, per Tastaturfokus (ohne JS) und per Klick (mit JS) */
	.cm-nav__item:hover > .cm-mega,
	.cm-nav__item:focus-within > .cm-mega,
	.cm-nav__item.is-open > .cm-mega{
		opacity:1;visibility:visible;transform:translateY(0);
		transition:opacity var(--cm-ease-out-ui) var(--cm-easing),transform var(--cm-ease-out-ui) var(--cm-easing);
	}
	/* BUGFIX ("Dropdown-Funktion fehlerhaft"): Das Panel oeffnete per
	   :hover UND :focus-within. Nach einem Klick auf den Hauptpunkt behielt
	   der Button den Fokus - :focus-within hielt das Panel also offen,
	   waehrend der Klick gleichzeitig .is-open entfernte. Ergebnis: der
	   Menuepunkt liess sich per Klick NIE wieder schliessen, der Schalter
	   wirkte kaputt. .is-closed steht bewusst NACH den Oeffnen-Regeln und
	   gewinnt daher bei gleicher Spezifitaet - JavaScript setzt die Klasse
	   beim bewussten Schliessen und nimmt sie zurueck, sobald die Maus den
	   Menuepunkt verlaesst. Ohne JavaScript bleibt reines Hover/Fokus. */
	.cm-nav__item.is-closed > .cm-mega{
		opacity:0;visibility:hidden;transform:translateY(-.5rem);
	}
	.cm-nav__item:hover .cm-nav__chevron,
	.cm-nav__item.is-open .cm-nav__chevron{transform:rotate(180deg)}
	.cm-nav__item.is-closed .cm-nav__chevron{transform:none}

	.cm-mega__inner{
		display:grid;grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr));
		gap:calc(var(--cm-grid-gap) * 1.5);
		padding-top:calc(var(--cm-padding-v) * 1.8);padding-bottom:calc(var(--cm-padding-v) * 1.8);
		/* Sehr lange Menues sollen das Panel nicht ueber den ganzen
		   Bildschirm wachsen lassen (gemessen: 718px hoch). */
		max-height:calc(100vh - var(--cm-header-height) - 1.5rem);overflow-y:auto;
	}
	.cm-mega__group--cta{display:flex;align-items:flex-end}

	/* BUGFIX (Menue-Design): Ist im WordPress-Menue nur EINE Zwischenebene
	   gepflegt, landeten alle Unterpunkte in einer einzigen Spalte - das
	   Panel war dann ueber die volle Breite leer und gleichzeitig 718px
	   hoch (gemessen: grid-template-columns "1376px 0px 0px 0px 0px 0px").
	   Die Linkliste bricht jetzt selbst in Spalten um; die Spaltenzahl
	   liefert menu-render.php als data-cols passend zur Linkanzahl. */
	.cm-mega__links[data-cols="2"]{columns:2}
	.cm-mega__links[data-cols="3"]{columns:3}
	.cm-mega__links[data-cols="4"]{columns:4}
	.cm-mega__links[data-cols]{column-gap:calc(var(--cm-grid-gap) * 1.5)}
	.cm-mega__links[data-cols] li{break-inside:avoid;-webkit-column-break-inside:avoid}
}

/* =========================================================
   HERO + BUCHUNGSMASKE
   ========================================================= */
/* Wirksame Hero-Hoehe: auf Desktop/Tablet zusaetzlich so begrenzt, dass die
   Ueberschrift des naechsten Abschnitts ohne Scrollen sichtbar bleibt
   (Bildschirmhoehe minus --cm-hero-reserve). Die Variablen stehen bewusst
   HIER und nicht in :root: eine in :root berechnete min() saehe nur den
   :root-Wert von --cm-hero-max, nicht den der Media Query. */
.cm-hero{position:relative;overflow:hidden;color:#fff;
	--cm-hero-max:100vh;--cm-hero-height-eff:min(var(--cm-hero-height),var(--cm-hero-max));min-height:var(--cm-hero-height-eff)}
/* --cm-hero-reserve kommt je Breakpoint aus dem Customizer (Modul: Slideshow
   Hero -> Darstellung); 0 = keine Begrenzung. */
.cm-hero{--cm-hero-max:calc(100vh - var(--cm-hero-reserve))}
/* isolation: die z-index-Schichtung der Slides (aktiv = oben) bleibt im
   Container - sonst laege das aktive Bild ueber der Verlaufsschicht ::after. */
.cm-hero__slides{position:absolute;inset:0;isolation:isolate}
/**
 * BUGFIX ("grauer Streifen am unteren Rand der Startseiten-Slideshow"):
 * Ein <figure> bringt aus dem Standard-Stylesheet einen Aussenabstand nach
 * unten mit (gemessen 10,4px). Bei position:absolute + inset:0 verkuerzt
 * der den Slide um genau diese Hoehe - unter dem Bild schien der
 * Seitenhintergrund durch die dunkle Verlaufsschicht: der graue Streifen.
 * margin:0 gilt deshalb fuer ALLE Slide-Figures.
 *
 * Ueberblenden: Das aktive Bild liegt per z-index immer OBEN und blendet
 * ein, waehrend das vorige darunter ausblendet - ein echter Crossfade,
 * unabhaengig von der Reihenfolge im Markup (vorher wirkte der Wechsel
 * vom letzten zum ersten Bild anders als die uebrigen).
 */
.cm-hero__slide{position:absolute;inset:0;margin:0;opacity:0;z-index:0;
	transition:opacity var(--cm-slideshow-fade-duration) var(--cm-slideshow-fade-easing)}
.cm-hero__slide.is-active{opacity:1;z-index:1}
.cm-hero__slide picture{display:block;width:100%;height:100%}
.cm-hero__slide img{width:100%;height:100%;object-fit:cover;display:block}
/* Seiten-Hero (Slideshow-Modul im Hero-Modus): gleiche Struktur wie die
   Startseite, nur ohne Buchungsleiste - der Inhalt sitzt am unteren Rand
   mit etwas Luft. */
.cm-hero--page .cm-hero__content{padding-bottom:calc(var(--cm-section-spacing) * .5)}
.cm-hero__lead{color:#fff;font-size:var(--cm-size-subheadline);max-width:60ch;margin:.5rem 0 0;opacity:.92}
.cm-hero .cm-eyebrow{color:var(--cm-c-beige-3)}
.cm-hero__eyebrow{margin:0 0 .6rem}
/* Overlay des Heros (6.0.30, wie Teaser-Cards 1): Farbverlauf ueber dem
   unteren Bildbereich (::after auf dem Slide-Container, ueber allen Slides)
   plus weichgezeichnete Bildkopie JE SLIDE (.cm-hero__backdrop, blendet mit
   dem Slide ueber). Customizer: Modul: Slideshow Hero -> Overlay. Die
   Maske der Kopie ist dieselbe wie bei den Cards (.cm-card-blur), nur mit
   den Hero-Werten fuer Kante und Ein/Aus. */
.cm-hero{--cm-card-feather:var(--cm-hero-feather);--cm-card-image-blur-on:var(--cm-hero-image-blur-on)}
.cm-hero__slides::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--cm-hero-overlay-height);z-index:2;pointer-events:none;
	background:linear-gradient(to top,var(--cm-hero-overlay) 0,var(--cm-hero-overlay) max(0px,calc(100% - var(--cm-hero-feather))),transparent 100%)}
.cm-hero__backdrop{position:absolute;left:0;right:0;bottom:0;height:var(--cm-hero-overlay-height);overflow:hidden;pointer-events:none}
.cm-hero__slide .cm-card-blur picture{display:block;width:100%;height:100%}
.cm-hero .cm-card-blur img{position:absolute;left:0;bottom:0;width:100%;height:var(--cm-hero-blur-img-height);object-fit:cover;max-width:none;display:block;
	filter:blur(6px);filter:url(#cm-hero-blur)}
/* Die Ueberblendzeit wird je Slideshow-Modul auf dessen Wurzelelement gesetzt
   (customizer-output.php); die Deckelung muss deshalb DORT neu berechnet
   werden - eine in :root berechnete Variable saehe nur den :root-Wert. */
.cm-hero,.cm-gallery-slideshow,.cm-slideshow{--cm-slideshow-fade-duration:clamp(200ms,var(--cm-slideshow-fade),4000ms)}
.cm-hero__content{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
	min-height:var(--cm-hero-height-eff);gap:2rem}
.cm-hero__headline-wrap{padding-bottom:1rem}
/* Bedienleiste der Hero-Slideshow: sitzt zwischen Schlagzeile und
   Buchungsleiste, damit Punkte/Info/Pause ueber dem Bild sichtbar und
   bedienbar sind (der Bild-Container selbst liegt dahinter). */
.cm-hero__controls{position:relative;height:2.75rem;width:100%;
	max-width:var(--cm-container-width);margin:0 auto;
	padding:0 var(--cm-container-gutter)}
/* Info-Leiste des Heros: oben rechts ueber dem Bild, buendig mit der
   Inhaltsbreite. Ein absolut gesetztes Band ueber die volle Hero-Breite,
   das die Leiste an seinem rechten Inhaltsrand traegt. */
.cm-hero__topbar{position:absolute;top:1.25rem;left:0;right:0;z-index:3;
	max-width:var(--cm-container-width);margin:0 auto;
	padding:0 var(--cm-container-gutter);height:2.75rem;pointer-events:none}
.cm-hero__topbar .cm-slideshow__topbar{top:0;right:var(--cm-container-gutter);pointer-events:auto}
.cm-hero__topbar .cm-slideshow__caption{pointer-events:none}
/* Schlagzeile, Subline und Eyebrow auf dem Hero-Bild: dezenter Schatten fuer
   Lesbarkeit auf hellen Motiven (WCAG 1.4.3, siehe WCAG-PLAN.md M5). */
.cm-hero__headline,.cm-hero__lead,.cm-hero__eyebrow{text-shadow:0 1px .125rem rgba(0,0,0,.45)}
.cm-hero__headline{color:var(--cm-head-big,#fff);font-family:var(--cm-font-head-big);font-weight:var(--cm-weight-head-big,400);
	font-size:clamp(2rem,5vw,var(--cm-size-head-big));max-width:22ch}

/* =========================================================
   BUCHUNGSLEISTE - eine durchgehende, randlose Leiste über die
   volle Breite (bewusst außerhalb von .cm-container), durch dünne
   Trennlinien in Segmente geteilt. Jedes Feld hat ein natives
   input/select als Fallback (siehe booking-bar.php); main.js
   ersetzt die Optik sobald JS verfügbar ist (.is-enhanced).
   ========================================================= */
/* BUGFIX ("Booking-Bar funktioniert nicht, Auswahllisten gehen nicht auf"):
   Die Spalten waren als "1fr" definiert. 1fr bedeutet minmax(AUTO,1fr) -
   eine Spalte kann damit NIE schmaler werden als ihr Mindestinhalt. Zusammen
   mit dem globalen --cm-padding-h (im Customizer auf 120px gestellt, also
   240px Innenabstand je Feld) wuchsen die sechs Spalten auf ~1885px in einem
   1425px breiten Container. Die Leiste ragte links bei x=-173 heraus und
   wurde vom overflow:hidden des Heros abgeschnitten: die rechten Felder und
   der Absenden-Button lagen komplett ausserhalb des Bildschirms und waren
   damit gar nicht anklickbar - genau das Bild "Popup geht nicht auf".
   minmax(0,1fr) erlaubt das Schrumpfen, --cm-padding-h-compact deckelt den
   Innenabstand. */
/* Deckkraft des Leisten-Hintergrunds: Normal und Hover (Modul: Booking-Bar) */
.cm-booking:hover,.cm-booking:focus-within{background:var(--cm-bk-bg-rgba-hover)}
.cm-booking{
	position:relative;background:var(--cm-bk-bg-rgba);color:var(--cm-text);
	transition:background-color var(--cm-ease-out) var(--cm-easing);
	display:grid;grid-template-columns:minmax(0,1fr);
	box-shadow:0 -4px 0 rgba(0,0,0,0),0 1.25rem 3.125rem rgba(0,0,0,.2);
	max-width:100%;
}
@media (min-width:1023px){
	.cm-booking{grid-template-columns:minmax(0,1.05fr) minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto}
}
/* Desktop: nicht mehr randlos ueber die volle Breite, sondern auf die
   Inhaltsbreite begrenzt, mittig, mit Rundung - und mit Abstand nach
   unten, sodass die Leiste ueber dem Hero-Bild schwebt statt an dessen
   Unterkante zu kleben (Vorgabe: "leicht nach oben ueber die Slideshow").
   Die Buchungsleiste ist ein Formular, deshalb keine Abhaengigkeit von
   .cm-container: Breite und Rand kommen direkt aus den Layout-Tokens. */
@media (min-width:1200px){
	.cm-booking{
		width:calc(100% - 2 * var(--cm-container-gutter));
		max-width:var(--cm-container-width);
		margin:0 auto calc(var(--cm-section-spacing) * .5);
		border-radius:var(--cm-radius);overflow:hidden;
	}
	.cm-booking__field:first-child{border-top-left-radius:var(--cm-radius);border-bottom-left-radius:var(--cm-radius)}
}
/* cursor:pointer auf dem GANZEN Feld: main.js leitet jeden Klick im Feld
   (Beschriftung, Innenabstand, Icon) an den Ausloeser bzw. das Textfeld
   weiter - die gesamte Flaeche ist bedienbar, nicht nur der Text. */
/* Hoehe = Beschriftung + Bedienelement + knapper Innenabstand (~66px).
   Vorher war die Leiste 98px hoch: das Code-Eingabefeld erbte vom
   globalen input[type=text] eine Mindesthoehe von 44px plus Innenabstand
   (hoehere Spezifitaet als die Klasse) und zog die ganze Rasterzeile mit. */
/* Schliessen-Schalter des Sheets und Oeffnen-Leiste: nur mobil mit JS */
.cm-booking__close,.cm-booking__close[hidden]{display:none}
.cm-booking-sticky{display:none}
/* 6.0.48: "Buchungszeile Footer" abgeschaltet (Menü-Design) - in der
   Mobil-Ansicht entfallen Bottom-Sheet UND Öffnen-Leiste; ohne JavaScript
   bliebe sonst die Leiste im Hero stehen. Auf dem Desktop bleibt alles. */
@media (max-width:1022px){
	body.cm-no-booking-mobile .cm-booking,
	body.cm-no-booking-mobile .cm-booking-sticky{display:none}
}
@media (max-width:1022px){
	.cm-booking.is-enhanced.cm-booking--sheet{
		position:fixed;left:0;right:0;bottom:0;z-index:1150;
		max-height:85vh;overflow-y:auto;overscroll-behavior:contain;
		border-radius:1rem 1rem 0 0;box-shadow:0 -.75rem 2.5rem rgba(0,0,0,.28);
		padding-top:3.25rem;
		transform:translateY(105%);visibility:hidden;
		transition:transform var(--cm-ease-out-ui) var(--cm-easing),visibility 0s linear var(--cm-ease-out-ui);
	}
	.cm-booking.is-enhanced.cm-booking--sheet.is-open{transform:none;visibility:visible;transition:transform var(--cm-ease-out-ui) var(--cm-easing)}
	.cm-booking--sheet .cm-booking__close:not([hidden]){display:inline-flex;position:absolute;top:.375rem;right:.5rem;width:2.5rem;height:2.5rem;
		align-items:center;justify-content:center;background:none;border:0;color:var(--cm-text);cursor:pointer;opacity:.8;
		--cm-mi-from:var(--cm-text);--cm-mi-flash:var(--cm-link-highlight);--cm-mi-to:var(--cm-link-hover)}
	.cm-booking--sheet .cm-booking__close:hover,.cm-booking--sheet .cm-booking__close:focus-visible{opacity:1;color:var(--cm-mi-to);animation:var(--cm-mi-anim-color) var(--cm-mi-duration) var(--cm-easing) both}
	.cm-booking-sticky.is-active{display:block;position:fixed;left:0;right:0;bottom:0;z-index:1140;
		padding:.6rem var(--cm-container-gutter);background:var(--cm-menu-bg);box-shadow:0 -.375rem 1.5rem rgba(0,0,0,.25)}
	.cm-booking-sticky__btn{width:100%}
	.cm-booking-sticky__icon{width:1.25rem;height:1.25rem}
	/* Platz fuer die Leiste am Seitenende */
	html.cm-booking-sticky-active body{padding-bottom:4.5rem}
	html.cm-booking-open{overflow:hidden}
}
.cm-booking__field{
	position:relative;display:flex;flex-direction:column;justify-content:center;gap:.15rem;
	padding:.6rem var(--cm-padding-h-compact);
	border-bottom:1px solid var(--cm-bk-border);
	min-width:0;cursor:pointer;
}
@media (min-width:1023px){
	.cm-booking__field{border-bottom:0;border-right:1px solid var(--cm-bk-border)}
}
/* Zweizeilige Tabs: [Icon] + Beschriftung (oben, klein) / Wert (unten).
   Beschriftung und Wert liegen IM Ausloeser, damit der ganze Tab ein
   Bedienelement ist. Ohne JavaScript zeigt .cm-booking__native-label
   die Beschriftung des nativen Feldes. */
.cm-booking__lines{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1 1 auto;line-height:1.2;text-align:left}
/* Schrift und Farben der Buchungsleiste: Customizer -> Modul: Booking-Bar */
/* Beschriftung: Schreibweise wie eingegeben (keine Grossschreibung), Farbe
   und - bei einem Link-Set - Hover/Aktiv samt Aufblitzen aus dem Set. */
.cm-booking__label{display:block;font-family:var(--cm-font-bk-label);font-size:var(--cm-size-bk-label);font-weight:var(--cm-weight-bk-label,400);
	color:var(--cm-bk-label-normal);margin:0;cursor:pointer;
	--cm-mi-from:var(--cm-bk-label-normal);--cm-mi-flash:var(--cm-bk-label-highlight);--cm-mi-to:var(--cm-bk-label-hover);--cm-mi-active:var(--cm-bk-label-active);
	transition:color var(--cm-ease-out) var(--cm-easing)}
.cm-booking__field:hover .cm-booking__label,.cm-booking__field:focus-within .cm-booking__label{color:var(--cm-mi-to);animation:var(--cm-mi-anim-color) var(--cm-mi-duration) var(--cm-easing) both}
.cm-booking__native-label{display:block;font-family:var(--cm-font-bk-label);font-size:var(--cm-size-bk-label);font-weight:var(--cm-weight-bk-label,400);
	color:var(--cm-bk-label-normal);margin:0}
.cm-booking.is-enhanced .cm-booking__native-label{
	position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;padding:0;margin:-1px}
/* Linktext der Felder: Farbe und Aufblitzen aus dem Set "Links Text",
   Schriftgroesse = Standard-Fliesstext (Customizer: Primaer Text). Das
   Aufblitzen laeuft schon beim Ueberfahren des ganzen Feldes. */
.cm-booking__trigger{
	display:none;align-items:center;gap:.65rem;background:none;border:0;padding:0;
	font:inherit;font-family:var(--cm-font-bk-value);font-size:var(--cm-size-bk-value);font-weight:var(--cm-weight-bk-value,400);color:var(--cm-bk-value-normal);cursor:pointer;text-align:left;width:100%;
	min-height:1.625rem;
	--cm-mi-from:var(--cm-bk-value-normal);--cm-mi-flash:var(--cm-bk-value-highlight);--cm-mi-to:var(--cm-bk-value-hover);--cm-mi-active:var(--cm-bk-value-active);
	transition:color var(--cm-ease-out) var(--cm-easing)}
.cm-booking__field:hover .cm-booking__trigger,.cm-booking__trigger:focus-visible{color:var(--cm-mi-to);animation:var(--cm-mi-anim-color) var(--cm-mi-duration) var(--cm-easing) both}
.cm-booking__field:active .cm-booking__trigger,.cm-booking__trigger[aria-expanded="true"]{color:var(--cm-bk-value-active);animation:var(--cm-mi-anim-color-active) var(--cm-mi-duration) var(--cm-easing) both}
.cm-booking.is-enhanced .cm-booking__trigger{display:flex}
.cm-booking.is-enhanced .cm-booking__native{
	position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;padding:0;margin:-1px}
.cm-booking__native{width:100%;border:0;padding:0;background:none;font:inherit;font-family:var(--cm-font-bk-value);font-size:var(--cm-size-bk-value);font-weight:var(--cm-weight-bk-value,400);color:var(--cm-bk-value-normal);min-height:1.625rem}
.cm-booking__icon{width:1.375rem;height:1.375rem;color:var(--cm-bk-icon-normal);flex:0 0 auto;
	--cm-mi-from:var(--cm-bk-icon-normal);--cm-mi-flash:var(--cm-bk-icon-highlight);--cm-mi-to:var(--cm-bk-icon-hover);--cm-mi-active:var(--cm-bk-icon-active);
	transition:color var(--cm-ease-out) var(--cm-easing)}
.cm-booking__field:hover .cm-booking__icon,.cm-booking__field:focus-within .cm-booking__icon{color:var(--cm-mi-to);animation:var(--cm-mi-anim-color) var(--cm-mi-duration) var(--cm-easing) both}
.cm-booking__field:active .cm-booking__icon{color:var(--cm-bk-icon-active);animation:var(--cm-mi-anim-color-active) var(--cm-mi-duration) var(--cm-easing) both}
.cm-booking__chevron{width:.8125rem;height:.8125rem;margin-left:auto;flex:0 0 auto;transition:transform var(--cm-ease-out) var(--cm-easing)}
.cm-booking__trigger[aria-expanded="true"] .cm-booking__chevron{transform:rotate(180deg)}
/* BUGFIX 6.0.34: opacity:.6 mischte die gewaehlte Wert-Farbe mit dem
   Leisten-Hintergrund - im Frontend erschien nie die eingestellte Farbe.
   Der Platzhalter unterscheidet sich jetzt nur noch dadurch, dass er der
   Normal-Farbe folgt, der gefuellte Wert bekommt die Hover-/Aktiv-Zustaende. */
.cm-booking__value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit}
.cm-booking__field--text .cm-booking__lines{width:100%}
input.cm-booking__text-input[type="text"]::placeholder{color:var(--cm-bk-value-normal);opacity:.6}
input.cm-booking__text-input[type="text"]{border:0;border-radius:0;background:none;padding:0;font:inherit;font-family:var(--cm-font-bk-value);font-size:var(--cm-size-bk-value);font-weight:var(--cm-weight-bk-value,400);color:var(--cm-bk-value-normal);width:100%;min-height:1.625rem;line-height:1.625rem}
.cm-booking__text-input:focus{outline:none}
/* Fokus sichtbar (WCAG 2.4.7): das Feld selbst traegt den Fokusrahmen, weil
   das Textfeld seinen eigenen Rahmen bewusst nicht zeigt. */
.cm-booking__field:focus-within{box-shadow:inset 0 0 0 .1875rem var(--cm-focus)}
/* Statuszeile und Fehlermarkierung der Buchungsleiste (WCAG 3.3.1/4.1.3).
   Die Bestaetigung der Auswahl ("Abreise: 12.10.2026") gehoert der
   Sprachausgabe - sichtbar stand sie doppelt unter dem Feld und hat
   gestoert (6.0.39). Sie bleibt deshalb nur fuer Screenreader lesbar;
   FEHLER werden weiterhin sichtbar angezeigt. */
.cm-booking__status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
	clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;border:0}
.cm-booking__status.is-error{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;
	white-space:normal;grid-column:1/-1;margin:0;padding:.35rem var(--cm-padding-h-compact);
	font-family:var(--cm-font-bk-label);font-size:var(--cm-size-bk-label);color:var(--cm-error)}
.cm-booking__status:empty{display:none}
.cm-booking__field.has-error{box-shadow:inset 0 0 0 .125rem var(--cm-error)}
.cm-booking .cm-booking__submit{border-radius:0;padding-top:.6rem;padding-bottom:.6rem;
	padding-left:calc(var(--cm-padding-h-compact) * 1.3);padding-right:calc(var(--cm-padding-h-compact) * 1.3)}

/* ---- Aufklapp-Panels (Auswahllisten & Kalender): öffnen nach unten,
   klappen per JS automatisch nach OBEN, wenn unten nicht genug Platz
   im Sichtbereich ist (Klasse .is-flipped, siehe initBookingBar()) ---- */
/* Position (top/bottom/left) wird von initBookingBar() in main.js
   exakt berechnet und als Inline-Style gesetzt (siehe BUGFIX-Hinweis
   dort) - hier nur noch die reine Optik plus ein Not-Fallback, falls
   JS aus irgendeinem Grund vor der ersten Positionierung greifen sollte. */
/**
 * BUGFIX ("Elemente werden nicht angezeigt" / Panel im hochgeklappten
 * Zustand quasi unsichtbar): .cm-booking__field ist ein Flex- und
 * .cm-booking ein Grid-Container - beide haben ohne explizite Angabe
 * align-items:stretch. Das streckt/staucht ein absolut positioniertes
 * Kind, das nur "bottom" (kein "top") gesetzt bekommt, in manchen
 * Browsern auf eine fast unsichtbare Höhe (~2px statt der tatsächlichen
 * Inhaltshöhe), weil die Stretch-Ausrichtung mit der eigentlich
 * content-basierten Höhenberechnung kollidiert. align-self:start nimmt
 * das Panel gezielt davon aus - seine Höhe richtet sich dann immer nach
 * dem tatsächlichen Inhalt, unabhängig davon, ob es nach oben oder
 * unten aufklappt.
 */
/* position:fixed statt absolute: die Panels haengen zur Laufzeit an <body>
   (siehe positionPopover in main.js), damit sie nicht vom overflow:hidden
   des Heros beschnitten werden. Position und Breite setzt JavaScript. */
/* z-index 1300 (6.0.44): ueber ALLEM, was die Seite sonst aufbaut -
   Kopfzeile (1000, bei offenem Menue 1190), Menue-Overlay (1001),
   Buchungsleiste als Bottom-Sheet (1150) und jede Slideshow samt Overlay.
   Die Panels haengen ausserdem direkt an <body> (siehe main.js), damit
   kein overflow:hidden und kein Stapelkontext sie beschneiden kann. */
.cm-select-panel,.cm-daterange-panel{
	position:fixed;top:auto;bottom:auto;left:0;z-index:1300;
	background:var(--cm-bk-panel-bg);color:var(--cm-bk-option-normal);
	border:var(--cm-border-width) solid var(--cm-bk-panel-border);border-radius:var(--cm-radius);
	box-shadow:0 1.25rem 3.125rem rgba(0,0,0,.22);
	max-width:calc(100vw - 2rem);
	/* Hoehe deckelt positionPopover() auf den tatsaechlich verfuegbaren
	   Platz; hier nur der Fallback und das Scrollen bei Ueberlaenge. */
	max-height:min(22.5rem,calc(100vh - 2rem));overflow-y:auto;overscroll-behavior:contain;
}
.cm-daterange-panel{max-width:min(20rem,calc(100vw - 2rem))}

/* Die Breite der Auswahlliste setzt positionPopover() auf die Feldbreite
   (frueher war sie nur so breit wie ihr laengster Eintrag - gemessen 117px
   an einem 302px breiten Feld - und wirkte wie ein abgerissenes Fragment). */
/* Bewusst KEIN eigenes max-height/overflow mehr: das Scrollen uebernimmt
   das Panel selbst. Sonst gaebe es zwei ineinander liegende Scrollbereiche,
   sobald der Platz enger ist als die feste Listenhoehe. */
.cm-select-panel__list{list-style:none;margin:0;padding:.4rem 0}
.cm-select-panel__option{
	display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
	padding:.6rem 1.1rem;font:inherit;font-family:var(--cm-font-bk-option);font-size:var(--cm-size-bk-option);font-weight:var(--cm-weight-bk-option,400);color:var(--cm-bk-option-normal);
	--cm-mi-from:var(--cm-bk-option-normal);--cm-mi-flash:var(--cm-bk-option-highlight);--cm-mi-to:var(--cm-bk-option-hover);--cm-mi-active:var(--cm-bk-option-active);
	transition:color var(--cm-ease-out) var(--cm-easing),background-color var(--cm-ease-out) var(--cm-easing)}
.cm-select-panel__option:hover,.cm-select-panel__option:focus-visible{color:var(--cm-mi-to);animation:var(--cm-mi-anim-color) var(--cm-mi-duration) var(--cm-easing) both;background:var(--cm-bk-range-bg)}
.cm-select-panel__option[aria-selected="true"]{background:var(--cm-bk-select-bg);color:var(--cm-bk-select-text)}

/* BUGFIX (Responsive): min-width:300px kollidierte mit dem gemeinsamen
   max-width:calc(100vw - 2rem) der Panels auf sehr schmalen Bildschirmen
   (<= 336px, z. B. iPhone SE 1. Generation) und liess den Kalender über
   den Bildschirmrand hinausragen. width:min(...) kann nie breiter als
   der verfügbare Platz werden. */
.cm-daterange-panel{padding:1.1rem;width:min(18.75rem, calc(100vw - 2rem))}
.cm-daterange-panel__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.85rem;gap:.5rem}
.cm-daterange-panel__title{font-family:var(--cm-font-bk-title);font-size:var(--cm-size-bk-title);font-weight:var(--cm-weight-bk-title,400);color:var(--cm-bk-title);text-align:center;flex:1 1 auto}
.cm-daterange-panel__nav{background:none;border:0;cursor:pointer;color:var(--cm-bk-day-normal);width:2rem;height:2rem;
	display:inline-flex;align-items:center;justify-content:center;border-radius:50%;flex:0 0 auto;
	--cm-mi-from:var(--cm-bk-day-normal);--cm-mi-flash:var(--cm-bk-day-highlight);--cm-mi-to:var(--cm-bk-day-hover);--cm-mi-active:var(--cm-bk-day-active);
	transition:color var(--cm-ease-out) var(--cm-easing)}
.cm-daterange-panel__nav:hover,.cm-daterange-panel__nav:focus-visible{color:var(--cm-mi-to);animation:var(--cm-mi-anim-color) var(--cm-mi-duration) var(--cm-easing) both}
.cm-daterange-panel__nav:disabled{opacity:.3;cursor:not-allowed;animation:none}
.cm-daterange-panel__nav .cm-svg-icon{width:1rem;height:1rem}
.cm-daterange-panel__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:.35rem}
.cm-daterange-panel__weekdays span{font-family:var(--cm-font-bk-small);font-size:var(--cm-size-bk-small);font-weight:var(--cm-weight-bk-small,400);text-align:center;color:var(--cm-bk-small)}
.cm-daterange-panel__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cm-daterange-panel__day{
	background:none;border:0;cursor:pointer;font:inherit;font-family:var(--cm-font-bk-day);font-size:var(--cm-size-bk-day);font-weight:var(--cm-weight-bk-day,400);
	aspect-ratio:1/1;color:var(--cm-bk-day-normal);
	--cm-mi-from:var(--cm-bk-day-normal);--cm-mi-flash:var(--cm-bk-day-highlight);--cm-mi-to:var(--cm-bk-day-hover);--cm-mi-active:var(--cm-bk-day-active);
	transition:color var(--cm-ease-out) var(--cm-easing),background-color var(--cm-ease-out) var(--cm-easing)}
.cm-daterange-panel__day:hover,.cm-daterange-panel__day:focus-visible{color:var(--cm-mi-to);animation:var(--cm-mi-anim-color) var(--cm-mi-duration) var(--cm-easing) both}
.cm-daterange-panel__day:disabled{opacity:.3;cursor:not-allowed;animation:none}
.cm-daterange-panel__day.is-empty{visibility:hidden;cursor:default}
.cm-daterange-panel__day.is-in-range{background:var(--cm-bk-range-bg)}
.cm-daterange-panel__day.is-start,.cm-daterange-panel__day.is-end{background:var(--cm-bk-select-bg);color:var(--cm-bk-select-text);border-radius:50%;animation:none}
.cm-daterange-panel__hint{margin-top:.85rem;font-family:var(--cm-font-bk-small);font-size:var(--cm-size-bk-small);font-weight:var(--cm-weight-bk-small,400);color:var(--cm-bk-small);text-align:center}

[data-cm-parallax]{background-attachment:fixed;background-position:center;background-size:cover}
@media (max-width:1199px),(prefers-reduced-motion:reduce){[data-cm-parallax]{background-attachment:scroll}}

/* =========================================================
   TEASER / CARDS – einheitlich für ALLE Module
   ========================================================= */
.cm-module-grid{display:grid;gap:var(--cm-grid-gap);grid-template-columns:1fr}
@media (min-width:767px){.cm-module-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1023px){.cm-module-grid{grid-template-columns:repeat(3,1fr)}}

/**
 * Ruhiger Zoom ("Ruckeln/Zittern"): drei Ursachen beseitigt.
 * 1. Die Overlay-Hoehe wurde bei Hover von 45% auf 50% animiert - eine
 *    Layout-Animation, die in jedem Frame Overlay UND Weichzeichner neu
 *    berechnete, parallel zum Zoom. Das Overlay hat jetzt eine feste Hoehe.
 * 2. Karte und Bild liegen auf eigenen Kompositions-Ebenen (translateZ,
 *    isolation, backface-visibility): der Browser skaliert die einmal
 *    gerasterte Bildebene auf der GPU, statt das Bild in jedem Zwischen-
 *    schritt neu zu rastern - das war das Zittern der Kanten.
 * 3. Der abgerundete Beschnitt (overflow + border-radius) flackerte in
 *    Chrome waehrend des Zooms; translateZ auf der Karte stabilisiert ihn.
 */
.cm-pcard{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:var(--cm-radius);
	border:var(--cm-border-width) solid var(--cm-border);
	isolation:isolate;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.cm-pcard__link{display:block;height:100%;position:relative}
.cm-pcard__link img{width:100%;height:100%;object-fit:cover;
	transform:translateZ(0) scale(1);will-change:transform;
	-webkit-backface-visibility:hidden;backface-visibility:hidden;
	transition:transform var(--cm-card-zoom-duration) var(--cm-card-zoom-easing)}
.cm-pcard:hover .cm-pcard__link img,
.cm-pcard__link:focus-visible img{transform:translateZ(0) scale(var(--cm-card-zoom-scale))}
/**
 * BUGFIX (Overlay verschwand komplett): mask-image zusammen mit
 * backdrop-filter auf demselben Element ist in mehreren Browsern
 * unzuverlässig - dort wird dann oft weder Verlauf noch Weichzeichner
 * noch die Abdunkelung dargestellt, das Overlay ist unsichtbar. Der
 * weiche Verlauf entsteht jetzt stattdessen direkt über einen
 * linear-gradient als Hintergrund (Volltonfarbe unten, transparent
 * oben) - deutlich robuster und in jedem Browser sichtbar, der
 * überhaupt Overlays/Gradients darstellt. Die Weichzeichner-Stärke
 * ist über den Customizer einstellbar (--cm-card-image-blur).
 */
/**
 * Overlay: Farbe + Weichzeichner nehmen HOECHSTENS 50% der Bildhoehe ein
 * (Vorgabe) und laufen oben weich aus. Zwei Schichten, bewusst getrennt:
 * - Das Element selbst traegt nur den Farbverlauf (Volltonfarbe unten,
 *   transparent oben) - der ist in jedem Browser sicher.
 * - ::before traegt den Weichzeichner und wird per Maske oben ausgeblendet.
 *   Weichzeichner + Maske auf EINEM Element war frueher der Grund fuer ein
 *   komplett verschwundenes Overlay (siehe Versionshistorie); durch die
 *   Trennung kann im schlechtesten Fall nur der Weichzeichner ausfallen,
 *   Farbe und Text bleiben immer sichtbar.
 * Beim Hover waechst das Overlay leicht, bleibt aber unter der 50%-Grenze.
 */
/* Overlay (untere Bildhaelfte), zwei Schichten:
   1. .cm-card-blur: eine Kopie des Bildes (gleiche URL, gleicher Bildausschnitt:
      Hoehe 200% des Overlays = Cardhoehe, unten verankert), per filter:blur
      weichgezeichnet und ueber eine Maske an der Oberkante ueber
      --cm-card-feather ausgeblendet. Bewusst KEIN backdrop-filter: der
      zeichnet in Chrome nichts weich, sobald dasselbe Element eine Maske traegt.
      Bei "Weichzeichner 0" wird sie ausgeblendet (--cm-card-image-blur-on).
      6.0.29: Der Weichzeichner ist ein SVG-Filter (#cm-card-blur, wp_footer in
      customizer-output.php), der den Alphakanal nach dem Weichzeichnen auf 1
      setzt - CSS filter:blur() liess die Kopie an allen Raendern ueber ~3x
      Radius halbtransparent werden (das scharfe Bild schien als Saum durch).
      Die Kopie ist dadurch nicht mehr vergroessert (scale 1) und liegt
      deckungsgleich auf dem Bild; weich ist nur noch die Oberkante (Maske).
      BUGFIX 6.0.27 ("Weichzeichner funktioniert nicht"): Die Maske der Kopie
      lief bisher LINEAR ueber dieselbe Strecke aus wie die Farbe. Bei ueblichen
      Cardbreiten (260-420 px -> Overlay 130-210 px hoch) frisst eine weiche
      Kante von 120 px fast das ganze Overlay: nur die untersten 10-90 px waren
      voll weichgezeichnet, darueber war die Kopie halbtransparent - und eine
      50/50-Mischung aus scharfem und weichem Bild sieht scharf aus (Kanten
      bleiben stehen). Die Maske der Kopie bleibt jetzt bis zur halben Kante bei
      90 % und laeuft erst im obersten Fuenftel der Kante aus; Position der
      Oberkante und die Farbmaske (::after) sind unveraendert.
   2. ::after: der Farbverlauf - Volltonfarbe unten, ueber dieselbe Strecke
      nach oben transparent. Weiche Kante 0 = scharfe Kante. */
.cm-pcard__backdrop{position:absolute;left:0;right:0;bottom:0;height:50%;overflow:hidden;pointer-events:none;
	isolation:isolate;transform:translateZ(0)}
.cm-pcard__backdrop::after{content:"";position:absolute;inset:0;z-index:1;
	background:linear-gradient(to top,var(--cm-card-overlay) 0,var(--cm-card-overlay) max(0px,calc(100% - var(--cm-card-feather))),transparent 100%)}
.cm-card-blur{position:absolute;inset:0;overflow:hidden;opacity:var(--cm-card-image-blur-on);
	--cm-card-blur-mask:linear-gradient(to top,
		#000 max(0px,calc(100% - var(--cm-card-feather))),
		rgba(0,0,0,.9) max(0px,calc(100% - var(--cm-card-feather) * .5)),
		rgba(0,0,0,.5) max(0px,calc(100% - var(--cm-card-feather) * .2)),
		transparent 100%);
	-webkit-mask-image:var(--cm-card-blur-mask);mask-image:var(--cm-card-blur-mask)}
.cm-pcard .cm-card-blur img,.cm-tile .cm-card-blur img{position:absolute;left:0;bottom:0;width:100%;height:200%;object-fit:cover;max-width:none;
	filter:blur(var(--cm-card-image-blur)); /* Fallback, falls url()-Filter nicht unterstuetzt */
	filter:url(#cm-card-blur);
	transform:translateZ(0) scale(1);will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden;
	transition:transform var(--cm-card-zoom-duration) var(--cm-card-zoom-easing)}
.cm-pcard:hover .cm-card-blur img,
.cm-pcard__link:focus-visible .cm-card-blur img{transform:translateZ(0) scale(var(--cm-card-zoom-scale))}
/* Card-Text: dieselbe Mikrointeraktion wie alle Links - kurzes Aufblitzen
   zur Highlight-Farbe des Sets "Links Text". Grundfarbe bleibt die
   Card-Textfarbe (die Card hat ihr eigenes Overlay als Flaeche). */
/* WCAG 1.4.3 (6.0.35): Text auf Fotos. Das Overlay allein garantiert bei
   hellen Motiven keine 4,5:1. Unter dem Textblock liegt deshalb ein
   zusaetzlicher, nach oben auslaufender Verlauf (--cm-card-scrim; 0 = aus,
   per CSS Overwrite aenderbar). */
.cm-pcard__text::before,.cm-tile__text::before{content:"";position:absolute;inset:-0.75rem 0 0;z-index:-1;pointer-events:none;
	background:linear-gradient(to top,rgba(0,0,0,var(--cm-card-scrim,.45)),rgba(0,0,0,0))}
/* Der Textblock endet vor dem Pfeil (right:3.5rem) - der Verlauf darunter
   muss aber ueber die GANZE Cardbreite laufen, sonst bricht er sichtbar
   am Pfeil ab (6.0.39). */
.cm-pcard__text::before{right:-3.5rem}
/* Teaser-Cards 2 tragen ihren Text auf einer eigenen Flaeche UNTER dem Bild -
   dort gehoert kein Verlauf hin (6.0.39). */
.cm-pcard--2 .cm-pcard__text::before{content:none}
.cm-pcard__text{position:absolute;left:0;right:3.5rem;bottom:0;isolation:isolate;
	padding:calc(var(--cm-padding-v) * .75) var(--cm-padding-h-compact);
	color:var(--cm-card-text);opacity:var(--cm-card-text-opacity);
	--cm-mi-from:var(--cm-card-text);--cm-mi-flash:var(--cm-card-text-highlight);--cm-mi-to:var(--cm-card-text-hover);--cm-mi-active:var(--cm-card-text-active);
	transition:color var(--cm-ease-out) var(--cm-easing),opacity var(--cm-ease-out) var(--cm-easing)}
.cm-pcard:hover .cm-pcard__text,
.cm-pcard__link:focus-visible .cm-pcard__text{opacity:var(--cm-card-text-opacity-hover);color:var(--cm-mi-to);animation:var(--cm-mi-anim-color) var(--cm-mi-duration) var(--cm-easing) both}
.cm-pcard__headline{display:block;font-family:var(--cm-font-teaser-head);font-size:var(--cm-size-teaser-head);font-weight:var(--cm-weight-teaser-head,400);line-height:1.2}
/* Eyebrow der Card: Farbzustaende des Eyebrow-Farbfelds (Link-Set moeglich) */
.cm-pcard__eyebrow{display:block;font-family:var(--cm-font-eyebrow);font-size:var(--cm-size-eyebrow);font-weight:var(--cm-weight-eyebrow,400);text-transform:uppercase;letter-spacing:.08em;opacity:.85;margin-bottom:.35rem;
	--cm-mi-from:var(--cm-eyebrow-normal);--cm-mi-flash:var(--cm-eyebrow-highlight);--cm-mi-to:var(--cm-eyebrow-hover);--cm-mi-active:var(--cm-eyebrow-active);
	transition:color var(--cm-ease-out) var(--cm-easing)}
.cm-pcard:hover .cm-pcard__eyebrow,.cm-pcard__link:focus-visible .cm-pcard__eyebrow{color:var(--cm-mi-to);animation:var(--cm-mi-anim-color) var(--cm-mi-duration) var(--cm-easing) both}
.cm-pcard:hover .cm-pcard__ribbon,.cm-pcard__link:focus-visible .cm-pcard__ribbon{background:var(--cm-card-ribbon-bg-hover);color:var(--cm-mi-to);animation:var(--cm-mi-anim-color) var(--cm-mi-duration) var(--cm-easing) both}
.cm-pcard__badge{position:absolute;left:calc(var(--cm-padding-h-compact) * .6);top:calc(var(--cm-padding-v) * .6);z-index:2;
	/* WCAG 1.4.3: kleine Schrift darf nicht die Ueberschriftfarbe erben - die
	   kann als helle Markenfarbe gewaehlt sein (z. B. Koenigs Gold, 4,1:1).
	   Kleine Texte nutzen deshalb die Textfarbe (8,6:1 auf Weiss). */
	padding:.35em .75em;border-radius:62.4375rem;background:var(--cm-body-bg);color:var(--cm-text);
	font-family:var(--cm-font-secondary);font-size:var(--cm-size-secondary);font-weight:400;line-height:1.2;box-shadow:0 2px .5rem rgba(0,0,0,.18);pointer-events:none}
.cm-pcard--2 .cm-pcard__eyebrow{color:var(--cm-eyebrow-normal);opacity:1}
/* Subline: eigene Farbe (Customizer: Teaser-Cards 1 -> Subline); die Deckkraft
   Normal/Hover liegt auf dem Textblock (.cm-pcard__text) und gilt damit fuer
   Headline und Subline gemeinsam. */
.cm-pcard__subheadline{display:block;font-family:var(--cm-font-teaser-desc);font-size:var(--cm-size-teaser-desc);
	font-weight:var(--cm-weight-teaser-desc,400);margin-top:.3rem;line-height:1.35;
	color:var(--cm-card-sub);
	--cm-mi-from:var(--cm-card-sub);--cm-mi-flash:var(--cm-card-sub-highlight);--cm-mi-to:var(--cm-card-sub-hover);--cm-mi-active:var(--cm-card-sub-active);
	transition:color var(--cm-ease-out) var(--cm-easing)}
.cm-pcard:hover .cm-pcard__subheadline,
.cm-pcard__link:focus-visible .cm-pcard__subheadline{color:var(--cm-mi-to);animation:var(--cm-mi-anim-color) var(--cm-mi-duration) var(--cm-easing) both}
/* Pfeil der Teaser-Cards 1: eigene Farbe (Customizer: Modul: Teaser-Cards 1 ->
   Pfeil). Er liegt auf dem Bild/Overlay, deshalb ist Weiss die Vorgabe - die
   Link-Farbe war dort je nach Motiv kaum zu sehen (6.0.39). Teaser-Cards 2
   behalten ihren Pfeil in der Link-Farbe, weil er dort auf heller Flaeche
   sitzt (siehe unten). */
.cm-pcard__arrow{position:absolute;right:calc(var(--cm-padding-h-compact) * .6);bottom:calc(var(--cm-padding-v) * .75);
	width:2.5rem;height:2.5rem;display:inline-flex;align-items:center;justify-content:center;
	color:var(--cm-card-arrow-normal);
	--cm-mi-from:var(--cm-card-arrow-normal);--cm-mi-flash:var(--cm-card-arrow-highlight);--cm-mi-to:var(--cm-card-arrow-hover);--cm-mi-active:var(--cm-card-arrow-active);
	transition:color var(--cm-ease-out) var(--cm-easing)}
.cm-pcard:hover .cm-pcard__arrow,
.cm-pcard__link:focus-visible .cm-pcard__arrow{color:var(--cm-mi-to);animation:var(--cm-mi-anim-color) var(--cm-mi-duration) var(--cm-easing) both}
.cm-pcard__arrow .cm-svg-icon{width:1.375rem;height:1.375rem;transition:transform var(--cm-ease-out) var(--cm-easing)}
.cm-pcard:hover .cm-pcard__arrow .cm-svg-icon,
.cm-pcard__link:focus-visible .cm-pcard__arrow .cm-svg-icon{transform:translateX(4px)}
/**
 * Eck-Ribbon. Vorher war das Band nur so lang wie sein Text plus
 * Innenabstand - bei kurzen Texten ("Neu") endete es INNERHALB der Card,
 * die abgeschnittenen Ecken des Hintergrunds waren sichtbar, und der Text
 * sass je nach Laenge schief. Jetzt: ein festes, 280px langes Band, dessen
 * Mitte exakt auf der Diagonale 45px von der Ecke liegt. Die Enden reichen
 * beidseitig weit ueber Card-Rand hinaus und werden vom overflow:hidden
 * der Card sauber abgeschnitten; der Text ist im Band zentriert und damit
 * immer mittig auf dem sichtbaren Streifen - unabhaengig von seiner Laenge.
 * Geometrie: Bandmitte bei (32px von rechts, 32px von oben) = 45px auf der
 * Diagonale; das Band schneidet Ober- und Rechtskante je 64px von der Ecke.
 */
.cm-pcard__ribbon{position:absolute;top:0;right:0;z-index:2;
	width:16.25rem;box-sizing:border-box;text-align:center;
	/* Position ueber die BANDMITTE: erst die eigene Ecke auf die Card-Ecke,
	   dann die Mitte 32px nach innen/unten (= 45px auf der Diagonale), dann
	   drehen. Dadurch unabhaengig von Schriftgroesse und Bandhoehe. */
	transform:translate(50%,-50%) translate(-2rem,2rem) rotate(45deg);transform-origin:center;
	background:var(--cm-card-ribbon-bg-normal);color:var(--cm-card-ribbon-text-normal);
	--cm-mi-from:var(--cm-card-ribbon-text-normal);--cm-mi-flash:var(--cm-card-ribbon-text-highlight);--cm-mi-to:var(--cm-card-ribbon-text-hover);--cm-mi-active:var(--cm-card-ribbon-text-active);
	transition:color var(--cm-ease-out) var(--cm-easing),background-color var(--cm-ease-out) var(--cm-easing);
	font-family:var(--cm-font-secondary);font-size:var(--cm-size-small);font-weight:400;line-height:1.2;
	text-transform:uppercase;letter-spacing:.06em;padding:.5em 0;white-space:nowrap;
	box-shadow:0 2px .375rem rgba(0,0,0,.3);pointer-events:none}
/* ---- Teaser-Cards 2: Bild oben, Headline/Subline/Pfeil auf einer Flaeche darunter
   (Customizer: Modul Teaser-Cards 2). Nutzt eigene Farb-, Schrift- und
   Zoom-Werte; Ribbon und Pfeil-Icon sind mit Layout 1 geteilt. ---- */
.cm-pcard--2{aspect-ratio:auto;display:flex;flex-direction:column;background:var(--cm-card2-bg);
	border-color:var(--cm-card2-border);
	--cm-card-zoom-duration:var(--cm-card2-zoom-speed)}
.cm-pcard--2 .cm-pcard__link{display:flex;flex-direction:column;height:auto;flex:1 1 auto}
.cm-pcard--2 .cm-pcard__media{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
	isolation:isolate;transform:translateZ(0)}
.cm-pcard--2 .cm-pcard__media img{width:100%;height:100%;object-fit:cover}
.cm-pcard--2:hover .cm-pcard__link img,
.cm-pcard--2 .cm-pcard__link:focus-visible img{transform:translateZ(0) scale(var(--cm-card2-zoom-scale))}
.cm-pcard--2 .cm-pcard__body{position:relative;display:flex;align-items:flex-end;gap:.75rem;flex:1 1 auto;
	padding:var(--cm-card2-padding)}
.cm-pcard--2 .cm-pcard__text{position:static;flex:1 1 auto;min-width:0;padding:0;opacity:var(--cm-card2-text-opacity);
	color:var(--cm-card2-text);
	--cm-mi-from:var(--cm-card2-text);--cm-mi-flash:var(--cm-card2-text-highlight);--cm-mi-to:var(--cm-card2-text-hover);--cm-mi-active:var(--cm-card2-text-active)}
.cm-pcard--2 .cm-pcard__headline{font-family:var(--cm-font-teaser2-head,var(--cm-font-teaser-head));
	font-size:var(--cm-size-teaser2-head,var(--cm-size-teaser-head));font-weight:var(--cm-weight-teaser2-head,400)}
.cm-pcard--2:hover .cm-pcard__text,
.cm-pcard--2 .cm-pcard__link:focus-visible .cm-pcard__text{opacity:var(--cm-card2-text-opacity-hover)}
.cm-pcard--2 .cm-pcard__subheadline{color:var(--cm-card2-sub);
	font-family:var(--cm-font-teaser2-desc,var(--cm-font-teaser-desc));
	font-size:var(--cm-size-teaser2-desc,var(--cm-size-teaser-desc));font-weight:var(--cm-weight-teaser2-desc,400);
	--cm-mi-from:var(--cm-card2-sub);--cm-mi-flash:var(--cm-card2-sub-highlight);--cm-mi-to:var(--cm-card2-sub-hover);--cm-mi-active:var(--cm-card2-sub-active)}
.cm-pcard--2 .cm-pcard__arrow{position:static;flex:0 0 auto;margin-left:auto;
	color:var(--cm-link-normal);
	--cm-mi-from:var(--cm-link-normal);--cm-mi-flash:var(--cm-link-highlight);--cm-mi-to:var(--cm-link-hover);--cm-mi-active:var(--cm-link-active)}

/* Navigations-Kacheln (Übersichtsseiten) */
.cm-tiles{display:grid;gap:var(--cm-grid-gap);grid-template-columns:repeat(2,1fr)}
@media (min-width:767px){.cm-tiles{grid-template-columns:repeat(3,1fr)}}
/* Bento: Kachel 1 belegt 2x2 Felder; auf schmalen Schirmen 2x1 (querformatig) */
.cm-tiles--bento .cm-tile--large{grid-column:span 2;aspect-ratio:2/1}
@media (min-width:767px){
	.cm-tiles--bento{grid-auto-flow:dense}
	.cm-tiles--bento .cm-tile--large{grid-row:span 2;aspect-ratio:auto}
	.cm-tiles--bento .cm-tile--large .cm-tile__title{font-size:calc(var(--cm-size-teaser3-head) * 1.3)}
}
/* Kacheln = Modul "Teaser-Cards 3": eigene Schrift-, Farb- und Overlay-Werte
   (bis 6.0.33 teilten sie sich die Werte mit Teaser-Cards 1). */
.cm-tile{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:var(--cm-radius);
	--cm-card-feather:var(--cm-card3-feather);--cm-card-image-blur-on:var(--cm-card3-image-blur-on);
	isolation:isolate;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.cm-tile .cm-card-blur img{filter:blur(6px);filter:url(#cm-card3-blur)}
.cm-tile img{width:100%;height:100%;object-fit:cover;will-change:transform;
	transform:translateZ(0) scale(1);-webkit-backface-visibility:hidden;backface-visibility:hidden;
	transition:transform var(--cm-card-zoom-duration) var(--cm-card-zoom-easing)}
.cm-tile:hover img{transform:translateZ(0) scale(var(--cm-card3-zoom-scale))}
/* Gleiche Zweischicht-Technik wie .cm-pcard__backdrop, max. 50% Hoehe */
.cm-tile__backdrop{position:absolute;left:0;right:0;bottom:0;height:50%;overflow:hidden;pointer-events:none;
	isolation:isolate;transform:translateZ(0)}
.cm-tile__backdrop::after{content:"";position:absolute;inset:0;z-index:1;
	background:linear-gradient(to top,var(--cm-card3-overlay) 0,var(--cm-card3-overlay) max(0px,calc(100% - var(--cm-card3-feather))),transparent 100%)}
.cm-tile:hover .cm-card-blur img,.cm-tile:focus-visible .cm-card-blur img{transform:translateZ(0) scale(var(--cm-card3-zoom-scale))}
.cm-tile__title{position:absolute;left:0;right:0;bottom:0;padding:var(--cm-padding-v) var(--cm-padding-h-compact);
	color:var(--cm-card3-text-normal);font-family:var(--cm-font-teaser3-head);font-size:var(--cm-size-teaser3-head);font-weight:var(--cm-weight-teaser3-head,400);
	opacity:var(--cm-card3-text-opacity);
	--cm-mi-from:var(--cm-card3-text-normal);--cm-mi-flash:var(--cm-card3-text-highlight);--cm-mi-to:var(--cm-card3-text-hover);--cm-mi-active:var(--cm-card3-text-active);
	transition:color var(--cm-ease-out) var(--cm-easing)}
.cm-tile:hover .cm-tile__title,.cm-tile:focus-visible .cm-tile__title{opacity:var(--cm-card3-text-opacity-hover);color:var(--cm-mi-to);animation:var(--cm-mi-anim-color) var(--cm-mi-duration) var(--cm-easing) both}
/* Kachel-Text: Titel + Subline uebereinander */
.cm-tile__text{position:absolute;left:0;right:0;bottom:0;padding:var(--cm-padding-v) var(--cm-padding-h-compact);display:flex;flex-direction:column;gap:.2rem;isolation:isolate;
	opacity:var(--cm-card3-text-opacity);transition:opacity var(--cm-ease-out) var(--cm-easing)}
.cm-tile:hover .cm-tile__text,.cm-tile:focus-visible .cm-tile__text{opacity:var(--cm-card3-text-opacity-hover)}
.cm-tile__text .cm-tile__title{position:static;padding:0;opacity:1}
/* WCAG 1.4.12: bei groesserem Zeilenabstand darf der Text nicht aus der
   Kachel laufen - Subline auf zwei Zeilen begrenzt. */
.cm-tile__sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
	color:var(--cm-card3-sub-normal);font-family:var(--cm-font-teaser3-desc);font-size:var(--cm-size-teaser3-desc);font-weight:var(--cm-weight-teaser3-desc,400);line-height:1.35;
	--cm-mi-from:var(--cm-card3-sub-normal);--cm-mi-flash:var(--cm-card3-sub-highlight);--cm-mi-to:var(--cm-card3-sub-hover);--cm-mi-active:var(--cm-card3-sub-active);
	transition:color var(--cm-ease-out) var(--cm-easing)}
.cm-tile:hover .cm-tile__sub,.cm-tile:focus-visible .cm-tile__sub{color:var(--cm-mi-to);animation:var(--cm-mi-anim-color) var(--cm-mi-duration) var(--cm-easing) both}
.cm-tile:focus-visible img{transform:translateZ(0) scale(var(--cm-card3-zoom-scale))}

/* =========================================================
   SLIDESHOW-MODUL
   ========================================================= */
.cm-slideshow{position:relative;overflow:hidden;border-radius:var(--cm-radius);isolation:isolate}
.cm-slideshow--hero{aspect-ratio:16/7}
.cm-slideshow--standard{aspect-ratio:var(--cm-ss-ratio)}
.cm-slideshow--mini{aspect-ratio:var(--cm-ss-ratio-mini);max-width:var(--cm-ss-mini-width)}
@media (max-width:1000px){.cm-slideshow--mini{max-width:100%}}
.cm-slideshow__slide{position:absolute;inset:0;margin:0;opacity:0;z-index:0;
	transition:opacity var(--cm-slideshow-fade-duration) var(--cm-slideshow-fade-easing)}
.cm-slideshow__slide.is-active{opacity:1;z-index:1}
.cm-slideshow__slide img{width:100%;height:100%;object-fit:cover}
.cm-ovicon{width:2.75rem;height:2.75rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
	background:var(--cm-ovicon-bg);color:var(--cm-ovicon-color);border:0;cursor:pointer;
	--cm-mi-from:var(--cm-ovicon-bg);--cm-mi-flash:var(--cm-link-highlight);--cm-mi-to:var(--cm-ovicon-bg);
	opacity:var(--cm-ovicon-opacity);transition:opacity var(--cm-ease-out-ui) var(--cm-easing),background-color var(--cm-ease-out) var(--cm-easing)}
/* Bedien-Icons: Deckkraft steigt, die Flaeche blitzt auf (Mikrointeraktion) */
.cm-ovicon:hover,.cm-ovicon:focus-visible{opacity:var(--cm-ovicon-opacity-hover);animation:var(--cm-mi-anim-bg) var(--cm-mi-duration) var(--cm-easing) both}
.cm-ovicon .cm-svg-icon{width:1.25rem;height:1.25rem}
.cm-slideshow__nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;
	padding:0 .75rem;pointer-events:none}
.cm-slideshow__nav .cm-ovicon{pointer-events:auto}
/**
 * BUGFIX (Barrierefreiheit/Touch, WCAG 2.5.8 Zielgröße): Die Punkte
 * waren nur 10x10px klickbar/tippbar - deutlich unter der geforderten
 * Mindestgröße von 24x24px. Der sichtbare Punkt bleibt klein (::before),
 * die tatsächliche Klick-/Tippfläche des <button> ist jetzt 24x24px.
 */
.cm-slideshow__dots{position:absolute;bottom:.5rem;left:50%;transform:translateX(-50%);display:flex}
/* WCAG 2.2.2: Pause/Wiedergabe-Schalter neben den Statuspunkten (auch fuer
   Touch, wo Hover den Bildwechsel nicht anhaelt). */
/* Seit 6.0.39 sitzt der Schalter klein oben rechts in der Info-Leiste,
   direkt links neben dem Info-Icon. Der Ring um das Symbol laeuft in der
   eingestellten Anzeigedauer einmal herum und zeigt so, wann das naechste
   Bild kommt; beim Anhalten friert er ein. */
/* 6.0.41: Symbol UND Ring liegen absolut ueber der ganzen Knopfflaeche und
   sind darin zentriert - damit sitzen die beiden Pause-Striche und der Ring
   exakt auf demselben Mittelpunkt wie der Kreis. Vorher war das Symbol ein
   Flex-Kind in einer Zeilenbox: deren Unterlaenge (3 px) machte die Box
   hoeher als das Icon und schob es 1,5 px nach oben. Die Standard-Innen-
   abstaende des <button> (1px 6px) fallen weg, sie verschoben den
   Inhaltsbereich zusaetzlich. */
.cm-slideshow__play{position:relative;flex:0 0 auto;width:1.625rem;height:1.625rem;padding:0;line-height:0}
.cm-slideshow__play .cm-svg-icon{display:block;width:.875rem;height:.875rem}
.cm-slideshow__play-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.cm-slideshow__ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transform:rotate(-90deg)}
.cm-slideshow__ring circle{fill:none;stroke:currentColor;stroke-width:2.5;opacity:.6;
	stroke-dasharray:100;stroke-dashoffset:100}
.cm-slideshow__play.is-running .cm-slideshow__ring circle{
	animation:cm-slide-ring var(--cm-slide-duration,6000ms) linear infinite}
.cm-slideshow__play.is-paused .cm-slideshow__ring circle{animation-play-state:paused}
@keyframes cm-slide-ring{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
/* 28px statt exakt 24px: WCAG 2.5.8 fordert mindestens 24x24 - genau auf
   der Grenze zu liegen ist unnoetig knapp, sobald Skalierung oder
   Zoomstufen Bruchteile ergeben. Der sichtbare Punkt bleibt klein. */
.cm-slideshow__dot{width:1.75rem;height:1.75rem;padding:0;border:0;background:none;cursor:pointer;
	display:inline-flex;align-items:center;justify-content:center}
.cm-slideshow__dot::before{content:"";display:block;width:.625rem;height:.625rem;border-radius:50%;
	background:var(--cm-ovicon-bg);opacity:var(--cm-ovicon-opacity);transition:opacity var(--cm-ease-out-ui) var(--cm-easing)}
.cm-slideshow__dot.is-active::before{opacity:var(--cm-ovicon-opacity-hover)}
.cm-slideshow__dot::before{--cm-mi-from:var(--cm-ovicon-bg);--cm-mi-flash:var(--cm-link-highlight);--cm-mi-to:var(--cm-ovicon-bg)}
.cm-slideshow__dot:hover::before,.cm-slideshow__dot:focus-visible::before{opacity:var(--cm-ovicon-opacity-hover);animation:var(--cm-mi-anim-bg) var(--cm-mi-duration) var(--cm-easing) both}
/* Info-Leiste oben rechts ueber dem Bild: 20px von oben, 20px vom rechten
   Rand der Slideshow. Das Info-Icon ist ihr einziges Element und steht damit
   immer ganz aussen; die Info-Box klappt links daneben auf. Bei Fullwidth-
   Slideshows (Hero, Slideshow Start) sitzt das Icon stattdessen am rechten
   Rand der definierten Inhaltsbreite (Hero: .cm-hero__topbar-Band; Start:
   Formel unten). */
.cm-slideshow__topbar{position:absolute;top:1.25rem;right:1.25rem;z-index:3;
	display:flex;align-items:center;gap:.5rem}
.cm-gallery-slideshow .cm-slideshow__topbar{right:max(var(--cm-container-gutter),calc((100% - var(--cm-container-width)) / 2 + var(--cm-container-gutter)))}
/* Info-Icon: Kreis genau 3px groesser als das Icon (20px Icon -> 26px Kreis) */
.cm-slideshow__info{position:static;flex:0 0 auto;width:1.625rem;height:1.625rem}
.cm-slideshow__info .cm-svg-icon{width:1.25rem;height:1.25rem}
/* Die Info-Box erscheint bei Mouse-Over ODER Klick auf das Info-Icon.
   Sie liegt ueber den Statuspunkten, damit beide bedienbar bleiben. */
/* Info-Box: haengt links am Info-Icon, vertikal auf dessen Hoehe zentriert.
   Bewusst absolut innerhalb der Leiste positioniert (statt als Flex-Kind),
   damit ihre wechselnde Textbreite die Icons nicht verschiebt. */
.cm-slideshow__caption{position:absolute;right:100%;top:50%;margin-right:.5rem;
	width:max-content;max-width:min(52ch,46vw);
	padding:.55rem .85rem;border-radius:var(--cm-radius);
	color:#fff;background:rgba(0,0,0,.72);
	font-size:var(--cm-size-secondary);line-height:1.4;text-align:right;
	opacity:0;transform:translateY(-50%) translateX(.5rem);pointer-events:none;
	transition:opacity var(--cm-ease-out-ui) var(--cm-easing),transform var(--cm-ease-out-ui) var(--cm-easing)}
.cm-slideshow__caption[hidden]{display:none}
/* main.js schaltet .is-visible bei Mouse-Over, Tastaturfokus und Klick auf
   das Info-Icon. Bewusst per Klasse statt per :hover-Selektor, weil die Box
   im Hero ausserhalb des Bild-Containers sitzt (ueber der Buchungsleiste)
   und ein CSS-:hover sie dort nicht erreichen wuerde. */
.cm-slideshow__caption.is-visible{opacity:1;transform:translateY(-50%) translateX(0)}
/* Auf schmalen Schirmen wuerde eine Box neben dem Icon zu einem
   1-Wort-pro-Zeile-Streifen zusammenschrumpfen. Dort klappt sie deshalb
   unter die Leiste und nutzt die volle Breite. */
@media (max-width:1000px){
	.cm-slideshow__caption{position:absolute;right:0;top:calc(100% + .5rem);
		margin-right:0;width:max-content;max-width:min(80vw,42ch);
		transform:translateY(-.5rem) translateX(0)}
	.cm-slideshow__caption.is-visible{transform:translateY(0) translateX(0)}
}
/* Statuspunkte und Pfeile ueber dem Bild */
.cm-slideshow__dots{z-index:3}
.cm-slideshow__nav{z-index:3}

/* =========================================================
   FILTER / NEWSLETTER / FOOTER
   ========================================================= */
.cm-filter-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--cm-grid-gap)}
.cm-filter-bar label{display:flex;flex-direction:column;gap:.35rem;min-width:11.25rem}
.cm-filter-bar.is-enhanced .cm-filter-bar__submit{display:none}

.cm-newsletter{position:relative;background:var(--cm-c-moos-gruen);color:#fff}
.cm-newsletter__inner{display:grid;gap:var(--cm-grid-gap);grid-template-columns:1fr;
	padding-top:var(--cm-section-spacing);padding-bottom:var(--cm-section-spacing);align-items:center;position:relative}
@media (min-width:1023px){.cm-newsletter__inner{grid-template-columns:1fr 1fr}}
.cm-newsletter h2,.cm-newsletter p{color:#fff}
.cm-newsletter__form{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.cm-newsletter__form input[type="email"]{flex:1 1 13.75rem;width:auto}
.cm-newsletter__hint{flex-basis:100%;font-size:var(--cm-size-small);opacity:.85;margin:0}
.cm-newsletter__status{flex-basis:100%;margin:0;font-weight:400}
/* Ganz rechts, 20px vom Browserrand (Vorgabe) - ausserhalb des Containers */
.cm-newsletter__close{position:absolute;top:1.25rem;right:1.25rem;background:none;border:0;color:#fff;cursor:pointer;
	width:2.75rem;height:2.75rem;display:inline-flex;align-items:center;justify-content:center;
	--cm-mi-from:#fff;--cm-mi-flash:var(--cm-link-highlight);--cm-mi-to:#fff;
	opacity:.8;transition:opacity var(--cm-ease-out-ui) var(--cm-easing)}
.cm-newsletter__close:hover,.cm-newsletter__close:focus-visible{opacity:1;animation:var(--cm-mi-anim-color) var(--cm-mi-duration) var(--cm-easing) both}

.cm-footer{background:var(--cm-footer-bg);color:var(--cm-footer-text);font-size:var(--cm-size-footer);
	font-family:var(--cm-font-footer);font-weight:var(--cm-weight-footer,400);padding-top:var(--cm-section-spacing)}
.cm-footer__inner{display:grid;gap:calc(var(--cm-grid-gap) * 1.5);grid-template-columns:1fr;padding-bottom:var(--cm-section-spacing)}
@media (min-width:1023px){.cm-footer__inner{grid-template-columns:1.1fr 2fr}}
@media (min-width:1200px){.cm-footer__inner{grid-template-columns:1.2fr 2.2fr 1.3fr}}
.cm-footer__columns{display:grid;gap:calc(var(--cm-grid-gap) * 1.2);grid-template-columns:1fr}
@media (min-width:767px){.cm-footer__columns{grid-template-columns:repeat(3,1fr)}}
.cm-footer__map{display:inline-flex;align-items:center;gap:.4em;margin-top:.35rem}
.cm-footer__map .cm-svg-icon{width:1em;height:1em}
.cm-footer__hours{margin-top:1.25rem}
.cm-footer__hours h3{font-size:var(--cm-size-footer);margin-bottom:.5rem;color:var(--cm-footer-headline)}
.cm-footer__hours p{margin:0;line-height:1.7}
.cm-footer__extras{display:flex;flex-direction:column;gap:calc(var(--cm-grid-gap) * 1.2)}
.cm-footer__newsletter h3{font-size:var(--cm-size-footer);margin-bottom:.6rem;color:var(--cm-footer-headline)}
/* WCAG 1.4.3 (6.0.31): die globale label-Farbe (Formulare -> Beschriftung, braun)
   machte die Newsletter-Ueberschrift im dunklen Footer unlesbar (1,8:1). */
.cm-footer__newsletter h3 label{color:inherit;font:inherit}
.cm-footer__newsletter-row{display:flex;flex-wrap:wrap;gap:.5rem}
.cm-footer__newsletter-row input[type="email"]{flex:1 1 10rem;width:auto;min-height:2.75rem}
.cm-footer__newsletter-hint{margin:.5rem 0 0;font-size:var(--cm-size-small);opacity:.8}
.cm-footer__awards{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.cm-footer__awards img{height:3rem;width:auto;display:block;opacity:.9}
.cm-footer__column h3{font-size:var(--cm-size-footer);margin-bottom:.75rem;color:var(--cm-footer-headline)}
/* Alle Footer-Links: Customizer "Interaktion" der Fusszeile (Standard: Link Dunkler) */
.cm-footer a{color:var(--cm-footer-link-normal);
	--cm-mi-from:var(--cm-footer-link-normal);--cm-mi-flash:var(--cm-footer-link-highlight);--cm-mi-to:var(--cm-footer-link-hover);--cm-mi-active:var(--cm-footer-link-active)}
.cm-footer a:active{color:var(--cm-footer-link-active);animation:var(--cm-mi-anim-color-active) var(--cm-mi-duration) var(--cm-easing) both}
.cm-footer__column h3 a{color:var(--cm-footer-headline);--cm-mi-from:var(--cm-footer-headline);--cm-mi-flash:var(--cm-footer-headline-highlight);--cm-mi-to:var(--cm-footer-headline-hover);--cm-mi-active:var(--cm-footer-headline-active)}
.cm-footer__column ul{list-style:none;margin:0;padding:0}
.cm-footer__column li{margin-bottom:.45rem}
/* BUGFIX (Barrierefreiheit, WCAG 2.5.8 Zielgroesse): Die Footer-Links waren
   nur 16px hoch - deutlich unter den geforderten 24px und auf dem
   Smartphone kaum sicher zu treffen (gemessen: 40 Links). Die vertikale
   Polsterung vergroessert die Trefferflaeche, ohne das Schriftbild oder
   den Zeilenabstand sichtbar zu veraendern. */
.cm-footer__column a{display:inline-flex;align-items:center;min-height:1.5rem;padding-block:.15rem}
.cm-footer__column a:hover,.cm-footer__column a:focus-visible{color:var(--cm-mi-to);animation:var(--cm-mi-anim-color) var(--cm-mi-duration) var(--cm-easing) both}
.cm-footer address{font-style:normal;margin-top:1rem}
/* WCAG 2.5.8 Zielgroesse: Telefon-/E-Mail-/Kartenlink der Adresse mind. 24px hoch */
.cm-footer address a{display:inline-flex;align-items:center;min-height:1.5rem}
.cm-subfooter{border-top:1px solid var(--cm-menu-border)}
.cm-subfooter__inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
	padding-top:1.1rem;padding-bottom:1.1rem;font-size:var(--cm-size-small)}
.cm-subfooter__group{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem}
.cm-subfooter__legal{list-style:none;display:flex;flex-wrap:wrap;gap:1.1rem;margin:0;padding:0}
/* Ebenfalls WCAG 2.5.8: Impressum/Datenschutz & Co. waren nur 14px hoch. */
.cm-subfooter a,.cm-subfooter button{color:var(--cm-footer-link-normal);
	display:inline-flex;align-items:center;min-height:1.5rem;
	--cm-mi-from:var(--cm-footer-link-normal);--cm-mi-flash:var(--cm-footer-link-highlight);--cm-mi-to:var(--cm-footer-link-hover);--cm-mi-active:var(--cm-footer-link-active)}
.cm-subfooter button{background:none;border:0;padding:0;font:inherit;cursor:pointer;transition:color var(--cm-ease-out) var(--cm-easing)}
.cm-subfooter button:hover,.cm-subfooter button:focus-visible{color:var(--cm-mi-to);animation:var(--cm-mi-anim-color) var(--cm-mi-duration) var(--cm-easing) both}
.cm-subfooter button:active{color:var(--cm-footer-link-active);animation:var(--cm-mi-anim-color-active) var(--cm-mi-duration) var(--cm-easing) both}
/* Sprachwahl und Social-Icons im Footer folgen dem Footer-Set statt dem Menue-Set */
.cm-subfooter .cm-lang a{color:var(--cm-footer-link-normal);
	--cm-mi-from:var(--cm-footer-link-normal);--cm-mi-flash:var(--cm-footer-link-highlight);--cm-mi-to:var(--cm-footer-link-hover);--cm-mi-active:var(--cm-footer-link-active)}
.cm-subfooter .cm-lang a:active{color:var(--cm-footer-link-active);animation:var(--cm-mi-anim-color-active) var(--cm-mi-duration) var(--cm-easing) both}
.cm-subfooter .cm-social__link{color:var(--cm-footer-link-normal);
	--cm-mi-bg-flash:var(--cm-footer-link-highlight);--cm-mi-border-flash:var(--cm-footer-link-highlight);
	--cm-mi-text-from:var(--cm-footer-link-normal);--cm-mi-text-flash:var(--cm-footer-bg);--cm-mi-text-to:var(--cm-footer-link-hover);--cm-mi-text-active:var(--cm-footer-link-active)}
.cm-subfooter .cm-social__link:active{color:var(--cm-footer-link-active);animation:var(--cm-mi-anim-surface-active) var(--cm-mi-duration) var(--cm-easing) both}

/* =========================================================
   INHALTSSEITEN
   ========================================================= */
.cm-content-page__header{padding-top:var(--cm-section-spacing)}
.cm-content-page__lead{font-size:var(--cm-size-subheadline);opacity:.85}
/* WCAG 1.4.1 (Benutzung von Farbe): Links im Fliesstext unterscheiden sich
   vom Text nicht nur durch die Farbe (Kontrast Link/Text < 3:1), sondern
   zusaetzlich durch den fetten Schnitt - Unterstreichungen sind nicht
   gewuenscht (Vorgabe). Buttons und gestaltete Links sind ausgenommen. */
.cm-content-page__body p a:not([class]),.cm-content-page__body li a:not([class]),
.cm-legal-page p a:not([class]),.cm-legal-page li a:not([class]),
.cm-zimmer-detail__content p a:not([class]),.cm-testimonial__source a{font-weight:700}
.cm-content-page__body{max-width:51.25rem;margin:0 auto;
	padding-top:calc(var(--cm-section-spacing) * .5);padding-bottom:var(--cm-section-spacing)}
.cm-content-page__hero-image img{width:100%;max-height:55vh;object-fit:cover;border-radius:var(--cm-radius)}
.cm-legal-notice{background:var(--cm-surface);border:var(--cm-border-width) solid var(--cm-border);
	border-radius:var(--cm-radius);padding:var(--cm-padding-v) var(--cm-padding-h);margin-bottom:2rem}
.cm-feature-list{list-style:none;padding:0;display:grid;gap:.5rem;grid-template-columns:1fr}
@media (min-width:767px){.cm-feature-list{grid-template-columns:repeat(2,1fr)}}
.cm-feature-list li::before{content:"✓ ";color:var(--cm-c-moos-gruen);font-weight:400}
.cm-detail__sidebar{background:var(--cm-surface);border-radius:var(--cm-radius);
	padding:var(--cm-padding-v) var(--cm-padding-h);align-self:start}
.cm-badge{display:inline-block;padding:.3em .8em;border-radius:62.4375rem;font-size:var(--cm-size-small);font-weight:400}
.cm-badge--warning{background:var(--cm-warning);color:#fff}
.cm-badge--accent{background:var(--cm-c-koenigs-gold);color:#fff}

/* =========================================================
   ERGÄNZENDE KLASSEN (restliche Templates)
   ========================================================= */

/* Kundenstimmen: drei nebeneinander, mit Sternen, Name, Herkunft, Aufenthalt, Quelle */
.cm-testimonials{padding:var(--cm-section-spacing) 0;background:var(--cm-surface)}
.cm-testimonials__grid{display:grid;gap:var(--cm-grid-gap);grid-template-columns:1fr}
@media (min-width:1023px){.cm-testimonials__grid{grid-template-columns:repeat(auto-fit,minmax(16.25rem,1fr))}}
.cm-testimonial{margin:0;display:flex;flex-direction:column;gap:.75rem;background:var(--cm-body-bg);
	border:var(--cm-border-width) solid var(--cm-border);border-radius:var(--cm-radius);
	padding:var(--cm-padding-v) var(--cm-padding-h)}
.cm-testimonial__quote{margin:0;font-style:italic;font-size:var(--cm-size-subheadline);line-height:1.45;flex:1 1 auto}
.cm-testimonial__quote p{margin:0}
.cm-testimonial__caption{display:flex;flex-direction:column;gap:.15rem;font-size:var(--cm-size-secondary)}
.cm-testimonial__name{font-weight:700;color:var(--cm-text)}
.cm-testimonial__meta,.cm-testimonial__source{opacity:.8}
.cm-stars{display:inline-flex;gap:.1em;font-size:1rem;line-height:1}
.cm-stars__star{color:var(--cm-border)}
.cm-stars__star.is-on{color:var(--cm-c-koenigs-gold)}

/* Gallery-Slideshow */
.cm-gallery-slideshow{position:relative;overflow:hidden;border-radius:var(--cm-radius);aspect-ratio:var(--cm-ss-ratio)}
.cm-gallery-slideshow__slides{position:absolute;inset:0;isolation:isolate}
.cm-gallery-slideshow__slide{position:absolute;inset:0;margin:0;opacity:0;z-index:0;
	transition:opacity var(--cm-slideshow-fade-duration) var(--cm-slideshow-fade-easing)}
.cm-gallery-slideshow__slide.is-active{opacity:1;z-index:1}
.cm-gallery-slideshow__slide img{width:100%;height:100%;object-fit:cover}

/* Bild-Text-Modul */
.cm-image-text{padding:var(--cm-section-spacing) 0}
.cm-image-text__grid{display:grid;gap:calc(var(--cm-grid-gap) * 2);align-items:center;grid-template-columns:1fr}
@media (min-width:1023px){.cm-image-text__grid{grid-template-columns:1fr 1fr}}
.cm-image-text__image img{width:100%;border-radius:var(--cm-radius);object-fit:cover}
.cm-image-text__content{display:flex;flex-direction:column;gap:1.25rem}

/* Footer-Brand */
.cm-footer__brand{display:flex;flex-direction:column;gap:1rem}
.cm-footer__brand img{max-height:3.25rem;width:auto}
.cm-footer__brand address{font-size:var(--cm-size-footer);color:var(--cm-footer-text);font-style:normal;line-height:1.7}
.cm-footer__brand .cm-logo__text{color:var(--cm-footer-link-normal)}

/* Main Content */
.cm-main-content{flex:1 1 auto;min-width:0}

/* Zimmer-Detail */
.cm-zimmer-detail__hero{position:relative;aspect-ratio:16/7;overflow:hidden;border-radius:var(--cm-radius)}
.cm-zimmer-detail__hero img{width:100%;height:100%;object-fit:cover}
.cm-zimmer-detail__hero-text{position:absolute;left:0;right:0;bottom:0;padding:var(--cm-padding-v) var(--cm-padding-h);
  background:linear-gradient(0deg,rgba(0,0,0,.65),transparent);color:#fff}
.cm-zimmer-detail__headline{font-family:var(--cm-font-title);font-size:var(--cm-size-title);margin:0;color:#fff}
.cm-zimmer-detail__body{display:grid;gap:calc(var(--cm-grid-gap) * 2);grid-template-columns:1fr;padding:var(--cm-section-spacing) 0}
@media (min-width:1023px){.cm-zimmer-detail__body{grid-template-columns:1fr 21.25rem}}
.cm-zimmer-detail__content{min-width:0}
.cm-zimmer-detail__facts{list-style:none;padding:0;margin:1rem 0;display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.cm-zimmer-detail__facts li{font-size:var(--cm-size-secondary)}
.cm-zimmer-detail__facts li::before{content:"✓ ";color:var(--cm-c-moos-gruen);font-weight:400}
.cm-zimmer-detail__prices{display:grid;gap:.75rem;margin:1.5rem 0}
.cm-zimmer-detail__sidebar{background:var(--cm-surface);border-radius:var(--cm-radius);
  padding:var(--cm-padding-v) var(--cm-padding-h);display:flex;flex-direction:column;gap:1rem;
  align-self:start;position:sticky;top:calc(var(--cm-header-height) + 1.5rem)}

/* Room-Preview Sektion */
.cm-room-preview{background:var(--cm-surface)}

/* Seitenabschluss ("Weiter"-Block) */
.cm-page-end{background:var(--cm-surface)}
.cm-page-end__sub{margin:.5rem auto 0;max-width:60ch;opacity:.85}
.cm-page-end__teaser{margin-top:calc(var(--cm-grid-gap) * 1.5)}
.cm-page-end__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:calc(var(--cm-grid-gap) * 1.5)}

/* Legal-Pages */
.cm-legal-page{max-width:51.25rem;margin:0 auto;padding:var(--cm-section-spacing) var(--cm-container-gutter)}
.cm-legal-page h1{margin-bottom:1.5rem}
.cm-legal-page h2{margin-top:2rem}

/* Dropdown-Toggle (mobil, wird von JS gesetzt) */
.cm-dropdown-toggle{display:none}
@media (max-width:1199px){.cm-nav__item .cm-dropdown-toggle{display:inline-flex}}

/* Feature-List-Highlight */
.cm-feature-list--highlight li::before{color:var(--cm-c-koenigs-gold)}

/* Content-Page Intro-Abschnitt */
.cm-content-page__body--intro{font-size:var(--cm-size-subheadline);max-width:51.25rem;margin:0 auto 2rem;line-height:1.5}