*,*::before,*::after{box-sizing:border-box}
body{
  --_bg:var(--color-background,#ffffff);
  --_fg:var(--color-ink,var(--color-foreground,#1c1917));
  --_primary:var(--color-primary,#b45309);
  --_on-primary:var(--color-primary-contrast,#ffffff);
  --_surface:var(--color-surface,#f6f2ec);
  --_surface-alt:var(--color-bg-2,var(--color-surface-alt,color-mix(in srgb,var(--_surface) 55%,var(--_bg))));
  --_accent:var(--color-accent,var(--_primary));
  --_on-accent:var(--color-accent-contrast,var(--_on-primary));
  --_card:var(--color-surface-2,var(--color-card,var(--_bg)));
  --_muted:var(--color-ink-2,var(--color-muted-foreground,var(--color-text-light,var(--color-ink,#78716c))));
  --_border:var(--color-border,#e7ddd0);
  --_radius:var(--radius,.75rem);
  --_radius-btn:var(--radius-btn,var(--_radius));
  --_radius-lg:var(--radius-lg,calc(var(--_radius) + .375rem));
  --_radius-xl:calc(var(--_radius) + .75rem);
  --_container:var(--container,1200px);
  --_measure:var(--measure,720px);
  --_shadow-tint:var(--shadow-color,color-mix(in srgb,var(--_fg) 62%,var(--_primary) 38%));
  --_shadow-sm:var(--shadow,0 1px 2px color-mix(in srgb,var(--_shadow-tint) 5%,transparent),0 10px 28px -14px color-mix(in srgb,var(--_shadow-tint) 14%,transparent));
  --_shadow-md:0 2px 8px -2px color-mix(in srgb,var(--_shadow-tint) 9%,transparent),0 22px 60px -32px color-mix(in srgb,var(--_shadow-tint) 30%,transparent);
  --_shadow-lg:0 2px 10px -2px color-mix(in srgb,var(--_shadow-tint) 12%,transparent),0 28px 80px -36px color-mix(in srgb,var(--_shadow-tint) 40%,transparent);
  --_shadow:var(--shadow,var(--_shadow-sm));
  /* Spacing system (5-reference consensus): descending hierarchy —
     section air > heading→content > content→CTA > paragraphs >
     lockup gaps > card internals. */
  --space-section:var(--section-y,clamp(4rem,5vw + 2.5rem,6rem));
  --space-section-sm:clamp(2.5rem,3vw + 1.5rem,3.5rem);
  --space-section-md:clamp(3rem,4vw + 2rem,4.5rem);
  --space-section-xl:clamp(5rem,7vw + 3rem,8rem);
  --space-card:1.5rem;
  --space-grid:1.5rem;
  margin:0;font-family:var(--font-sans,ui-sans-serif,system-ui,sans-serif);
  color:var(--_fg);background:var(--_bg);line-height:1.65;font-size:17px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:color-mix(in srgb,var(--_primary) 28%,transparent)}
h1,h2,h3,h4{font-family:var(--font-heading,inherit);line-height:1.12;margin:0 0 .5em;font-weight:var(--display-weight,700);letter-spacing:var(--display-tracking,-.022em);text-transform:var(--display-case,none);text-wrap:balance}
/* Die Gestaltungsebene eines Blocks setzt Groesse und Gewicht an der
   HUELLE; eine Ueberschrift erbt sie nicht, weil sie beides selbst
   setzt. Diese beiden Marken (style-resolver.ts) geben ihr den Wert
   der Huelle zurueck — getrennt, damit ein gesetztes Gewicht nicht
   die Groesse mitreisst. */
.cms-style-fs>:is(h1,h2,h3,h4){font-size:inherit}
.cms-style-fw>:is(h1,h2,h3,h4){font-weight:inherit}
h1,h2{font-weight:var(--display-weight,800)}
h1{font-size:calc(clamp(2.5rem,5.5vw,4rem) * var(--display-scale,1));line-height:1.05;letter-spacing:var(--display-tracking,-.026em)}
h2{font-size:calc(clamp(1.85rem,3.7vw,2.75rem) * var(--display-scale,1));letter-spacing:var(--display-tracking,-.024em)}
h3{font-size:clamp(1.25rem,2vw,1.6rem)}
h4{font-size:1.1rem}
p{margin:0 0 1em;text-wrap:pretty}
a{color:var(--_primary);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
hr{border:0;border-top:1px solid var(--color-line-strong,var(--_border));margin:2.5rem 0}
ul,ol{margin:0 0 1em;padding-left:1.4em}
li{margin:.25em 0}
blockquote{margin:1.5em 0;padding:.5em 1.2em;border-left:3px solid var(--_primary);color:var(--_muted);font-style:italic}

/* ── Width model — full-width sections, readable flow, wide grids ── */
/* Die Buchungsflaechen stehen seit Phase 8 auch als OBERSTE Bloecke
   auf einer Seite (die Agentur-Vorlage setzt die Terminarten ohne
   Abschnitt drumherum, damit ohne gebuchtes Modul kein leerer Rahmen
   stehenbleibt). Ohne Eintrag in dieser Liste liefen sie ueber die
   volle Fensterbreite und hatten am Telefon KEINEN Seiteneinzug —
   Tims P2, 2026-09-17. Sie gehoeren zu den breiten Rastern: eigener
   Behaelter, eigener Einzug. Ihr eigenes Stylesheet (css/buchung.ts)
   setzt bewusst KEIN padding-inline, sonst verdoppelte es sich hier. */
.cms-main{width:100%}
/* Pages with a floating CTA reserve bottom space so the pill never
   covers the last section's buttons at full scroll. */
.cms-main--fab{padding-bottom:5.5rem}
.cms-main>*{margin-block:clamp(2.25rem,5.5vw,4.5rem)}
.cms-main>:is(h1,h2,h3,h4,p,ul,ol,blockquote,figure,.cms-heading,.cms-eyebrow-wrap,.cms-collection-list,.cms-collection-back,.cms-breadcrumb){max-width:var(--_measure);margin-inline:auto;padding-inline:1.25rem}
.cms-main>:is(.cms-feature-grid,.cms-gallery,.cms-stats,.cms-menu,.cms-hours,.cms-accordion,.cms-map,.cms-columns,.cms-testimonials,.cms-pricing,.cms-team,.cms-logo-wall,.cms-timeline,.cms-tabs,.cms-slider,.cms-carousel,.event-card,.cms-event-grid-section,.cms-news,.cms-jobs,.cms-contact-card,.cms-docbanner,.cms-newsletter-cta,.cms-bento,.cms-beforeafter,.cms-trustbar,.cms-reviews,.cms-compare,.cms-mosaic,.cms-framed,.cms-mock,.cms-embed-consent,.cms-cookie-decl,.cms-appointment-types,.cms-appointments,.cms-reservation-widget,.cms-tageskarte,.cms-restaurant-info,.cms-voucher-shop){max-width:var(--_container);margin-inline:auto;padding-inline:1.25rem}
.cms-main>:is(.cms-hero,.cms-section,.cms-cta,.cms-navbar,.cms-footer,.alt-image-text,.cms-heroslider,.cms-statement,.cms-hero-split,.cms-floating-cta,.cms-promo){margin-block:0;max-width:none;padding-inline:0}
/* Abschnitt und Fusszeile tragen ihren Einzug an der HUELLE (anders als
   Hero, CTA und Hero-Split, die dafuer einen Innenbehaelter haben) — die
   Zeile darueber nimmt ihn allen, also holen wir ihn diesen beiden
   zurueck. Gleiche Spezifitaet, spaeter notiert: sie gewinnt. Bloecke mit
   eigenem `padding` im style-Attribut bleiben unberuehrt (inline sticht
   jede Regel), es verdoppelt sich also nichts. */
.cms-main>.cms-section,.cms-main>.cms-footer{padding-inline:1.25rem}
/* Die Karte des `overlap`-Heros ragt ueber die Bildkante hinaus (negativer
   Aussenabstand). Ohne Ausgleich beginnt der naechste Abschnitt genau an
   ihrer Unterkante und sein erster Text klebt an der Karte — Tims Befund
   2026-09-13. Der Ausgleich MUSS ein Aussenabstand am Hero sein: der
   Abschnitt darunter traegt sein `padding` als style-Attribut, und inline
   sticht jede Regel — eine Regel auf sein `padding-top` haette nie
   gewirkt. Der sichtbare Spalt entspricht genau diesem Wert (der
   Ueberstand hebt sich gegen das eigene `padding-top` des Abschnitts auf).
   `.cms-main>` steht hier, weil das Breitenmodell darueber `margin-block:0`
   setzt. */
.cms-main>.cms-hero--overlap{margin-bottom:clamp(2.5rem,5vw,4rem)}
/* Eine Spaltengruppe mit EINER Spalte ist kein Raster: die Spalte zieht
   sich sonst ueber die volle Breite, und eine zentrierte Karte darin
   sieht aus wie ein Fehler (Tims Befund 2026-09-13 am Standort-Schalter:
   aus zwei Hauskarten wurde EINE, 1140px breit). `:first-child:last-child`
   trifft genau den Fall, in dem es nichts zu setzen gibt.
   Der Deckel galt bis 2026-09-14 nur fuer eine Spalte, die selbst eine
   Flaeche traegt (`:has(>.cms-section)`) — die Annahme, eine blosse
   Textspalte habe ihre Lesebreite schon, stimmt nicht: die Hauskarte im
   Einzelbetrieb stand 1200px breit da, mit einem 1200x900-Foto darin
   (Tims Befund). Einzelne Spalten gibt es ueberhaupt NUR im
   Einzelbetrieb, und dort ist jede eine Karte. */
.cms-columns>.cms-column:first-child:last-child{max-width:38rem;margin-inline:auto;width:100%}
.cms-main>.cms-navbar+*{margin-top:0}
.cms-main>.cms-eyebrow-wrap+*{margin-block-start:1rem}
.cms-main>.cms-eyebrow-wrap{margin-block-end:0}


.cms-main>.acourse-booking-booking-flow{max-width:var(--_container);margin-inline:auto;padding-inline:1.25rem}
/* ── Eyebrow (section kicker chip) ── */
/* bottom-only: setting margin-top here would override the .cms-main>*
   width-model top margin (later rule, equal specificity). */
.cms-eyebrow-wrap{margin-bottom:.75rem}
.cms-eyebrow{display:inline-flex;align-items:center;gap:.45rem;padding:.38rem .9rem;border-radius:999px;font-size:.76rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;line-height:1;color:var(--color-kicker,var(--_primary));background:color-mix(in srgb,var(--color-kicker,var(--_primary)) 9%,transparent);border:1px solid color-mix(in srgb,var(--color-kicker,var(--_primary)) 22%,transparent)}

/* ── Heading composite (eyebrow + Hn + accent divider + subtitle) ── */
.cms-heading>:is(h1,h2,h3){margin-bottom:.4em}
.cms-heading__divider{width:4rem;height:2px;border-radius:2px;background:var(--_primary);margin:0 0 1.1rem}
.cms-heading__subtitle{color:var(--_muted);max-width:44rem;font-size:1.08rem;line-height:1.6;margin:0}
.cms-heading--center{text-align:center}
.cms-heading--center .cms-heading__divider,.cms-heading--center .cms-heading__subtitle{margin-inline:auto}
.cms-section--on-dark .cms-heading__subtitle{color:inherit;opacity:.8}


/* K4 — accent divider bar: primary on a primary-dark band is invisible. */
.cms-section--on-dark .cms-heading__divider{background:var(--_accent)}
/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.7rem;border-radius:var(--_radius-btn);font-weight:600;font-size:.98rem;line-height:1;text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:transform .15s ease,box-shadow .25s ease,background .15s,color .15s;white-space:nowrap}
.btn-lg{padding:1rem 2.2rem;font-size:1.05rem}
.btn--arrow::after{content:"→";display:inline-block;transition:transform .2s ease}
.btn--arrow:hover::after{transform:translateX(3px)}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid color-mix(in srgb,var(--_primary) 60%,transparent);outline-offset:2px}
.btn-primary{background:var(--_primary);color:var(--_on-primary);box-shadow:0 1px 2px color-mix(in srgb,var(--_shadow-tint) 10%,transparent),0 8px 20px -12px color-mix(in srgb,var(--_primary) 45%,transparent)}
/* Derselbe Grund wie beim Handlungsaufruf der Navigation: ein
   gemischtschreibender Knopf neben Versalien-Chips und einer
   Versalien-Navigation liest sich wie ein Fremdkoerper (Tims Befund
   2026-09-14 an der Veranstaltungsseite). Die SCHREIBUNG kommt vom
   Theme — ein Theme ohne `--nav-case` bekommt hier nichts, und keine
   Vorlage muss ihre Beschriftungen in Versalien tippen. */
.btn{text-transform:var(--nav-case,none);letter-spacing:var(--nav-tracking,0)}
.btn-primary:hover{box-shadow:0 2px 4px color-mix(in srgb,var(--_shadow-tint) 12%,transparent),0 12px 26px -12px color-mix(in srgb,var(--_primary) 60%,transparent)}
.btn-secondary{background:color-mix(in srgb,currentColor 10%,transparent);color:inherit;border-color:color-mix(in srgb,currentColor 28%,transparent);backdrop-filter:blur(10px) saturate(1.15);-webkit-backdrop-filter:blur(10px) saturate(1.15)}
.btn-secondary:hover{background:color-mix(in srgb,currentColor 16%,transparent)}
/* ghost — quiet action next to an emphasised one (nav "Login",
   toolbar rows). Ink only until hover, like the shadcn variant. */
.btn-ghost{background:transparent;color:inherit;border-color:transparent;box-shadow:none}
.btn-ghost:hover{background:color-mix(in srgb,currentColor 8%,transparent);box-shadow:none;transform:none}
/* Der umrandete Knopf ist der ZWEITE — er darf dem ersten nicht die
   Farbe streitig machen. Rot auf Rot daneben liest sich wie zwei
   gleich wichtige Aufrufe (Tims Befund 2026-09-14). Die Referenz
   nimmt dafuer die kraeftige Haarlinie und die Textfarbe; die
   Leitfarbe kommt erst beim Ueberfahren. */
.btn-outline{background:transparent;color:inherit;border-color:var(--color-line-strong,color-mix(in srgb,var(--_border) 90%,transparent))}
.btn-outline:hover{background:var(--_primary);color:var(--_on-primary);border-color:var(--_primary)}
/* Kontur in der MARKENFARBE: auf dunklem Grund setzt die Referenz
   ihren Knopf so - gefuellt waere er das lauteste Element der
   Leiste. Beim Zeigen kehrt er sich um. */
.btn-kontur{background:none;border-color:var(--_primary);color:var(--_primary);box-shadow:none}
.btn-kontur:hover{background:var(--_primary);color:var(--_on-primary);border-color:var(--_primary);box-shadow:none}
.btn-accent{background:var(--_accent);color:var(--_on-accent);box-shadow:0 1px 2px color-mix(in srgb,var(--_shadow-tint) 10%,transparent),0 8px 20px -12px color-mix(in srgb,var(--_accent) 45%,transparent)}
.btn-accent:hover{box-shadow:0 2px 4px color-mix(in srgb,var(--_shadow-tint) 12%,transparent),0 12px 26px -12px color-mix(in srgb,var(--_accent) 60%,transparent)}

/* ── Hero ── */
.cms-hero{position:relative;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(4.5rem,10vw,8.5rem);overflow:hidden}
.cms-hero--bare{background:radial-gradient(58rem 38rem at 10% -12%,color-mix(in srgb,var(--_primary) 15%,transparent),transparent 62%),radial-gradient(48rem 34rem at 102% 4%,color-mix(in srgb,var(--_primary) 9%,transparent),transparent 58%),var(--_surface)}
.cms-hero__overlay{position:absolute;inset:0;pointer-events:none}
.cms-hero__overlay--dark{background:linear-gradient(180deg,rgba(6,6,8,.62) 0%,rgba(6,6,8,.42) 46%,rgba(6,6,8,.56) 100%)}
.cms-hero__overlay--light{background:linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.42) 48%,rgba(255,255,255,.66) 100%)}
/* The full-bleed width tier strips padding-inline from the OUTER hero/cta/
   hero-split elements — their inner must carry the gutter or text touches
   the viewport edge on mobile. */
.cms-hero__inner{position:relative;width:100%;max-width:var(--_container);margin:0 auto;padding-inline:1.25rem}
.cms-hero__title{font-family:var(--font-heading,inherit);font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.04;letter-spacing:-.028em;margin:0 0 1.1rem;text-shadow:0 2px 28px rgba(0,0,0,.22)}
.cms-hero--bare .cms-hero__title{text-shadow:none}
.cms-hero__sub{font-size:clamp(1.08rem,2vw,1.35rem);line-height:1.55;max-width:42rem;margin:0 0 2rem;opacity:.95}
.cms-hero__cta{display:flex;gap:.9rem;flex-wrap:wrap}
/* 'brand' style — compact page-header on a darkened primary field; an
   optional photo sits behind at 25% opacity (kardiologie interior look). */
.cms-hero--brand{background:color-mix(in srgb,var(--_primary) 80%,#10100c);color:var(--_on-primary)}
.cms-hero__bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.25;pointer-events:none}
/* Compact heights (sm/banner) — smaller title + tighter padding. */
.cms-hero--compact{padding:clamp(2.5rem,6vw,4rem) 1.5rem}
.cms-hero--compact .cms-hero__title{font-size:clamp(2rem,4vw,3rem)}
/* Die Schlagzeile als Flaeche: der dunkel-kupferne Entwurf der
   Referenz setzt sie ueber die halbe Bildhoehe, eng gesetzt und
   dicht am Zeilenfall. */
.cms-hero--titel-xl .cms-hero__title{font-size:clamp(2.8rem,10vw,8rem);line-height:var(--display-leading,.92);letter-spacing:-.01em}
/* Der Seitenkopf ueber dem Foto (dkn „Abendlicht“, 2026-09-15): 83px. */
.cms-hero--titel-lg .cms-hero__title{font-size:clamp(2.8rem,5.2vw,5.2rem);line-height:var(--display-leading,1);letter-spacing:-.02em}
/* …mit Augenbraue 14px und Einleitung 17,6px (dkn „Abendlicht“: 14,08 / 17,6). */
.cms-hero--titel-lg .cms-hero__eyebrow{font-size:.88rem}
.cms-hero--titel-lg .cms-hero__sub{font-size:1.1rem;line-height:1.6}
/* Eine 128px-Zeile auf line-height .92 laesst ihre Oberlaengen aus
   dem Kasten ragen — die Augenbraue darueber stand dann IM Titel
   (gemessen an kupfer-nacht/speisekarte: Kaesten 14px auseinander,
   Glyphen uebereinander). Die Luft gehoert unter die Augenbraue, nicht
   ueber den Titel: so bleibt der Titel unten am Bildrand stehen. */
.cms-hero--titel-xl .cms-hero__eyebrow{margin-bottom:clamp(1.25rem,3.5vw,3rem)}
/* Die Knoepfe unter einer XXL-Schlagzeile sind KLEINE Versalien mit
   grossem Polster - die Referenz setzt 0,72rem auf 32/16px. Unsere
   Standardgroesse (15,7px) stand neben 144px Schlagzeile wie ein
   zweiter Titel (Tims Runde 2026-09-15, Kupfer & Nacht). */
.cms-hero--titel-xl .cms-hero__cta .btn{font-size:.72rem;padding:1rem 2rem}
/* Die Schlagzeile als Flaeche macht alles andere im Kopf ruhig: der
   Text darunter steht eine Stufe kleiner und zurueckgenommen
   (gemessen 21,6px in voller Tinte gegen 16,8px in ink-2), und der
   zweite Knopf ist eine blosse Kontur statt einer Milchglasflaeche
   (Tims Befund 2026-09-15). */
.cms-hero--titel-xl .cms-hero__sub{font-size:1.05rem;line-height:1.7;color:var(--color-ink-2,var(--_muted));opacity:1}
.cms-hero--titel-xl .cms-hero__cta .btn-secondary{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:var(--color-line-strong,color-mix(in srgb,currentColor 30%,transparent))}
/* Die auslaufende Linie zwischen Schlagzeile und Text. */
.cms-hero__rule{margin:2rem 0 0;max-width:56rem}
.cms-hero--caption{padding:0;justify-content:flex-start}
.cms-hero__caption{position:absolute;z-index:2;background:var(--_primary);color:var(--_on-primary);padding:1.1rem clamp(1.25rem,3vw,2.25rem);max-width:min(90%,34rem)}
.cms-hero__caption .cms-hero__title{font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.15;letter-spacing:-.01em;margin:0;text-shadow:none}
.cms-hero--titel-lg .cms-hero__caption .cms-hero__title{font-size:clamp(1.9rem,4.6vw,3.6rem);line-height:1.05}
.cms-hero__caption .cms-hero__sub{font-size:clamp(.95rem,1.4vw,1.08rem);margin:.5rem 0 0;max-width:none}
.cms-hero__caption .cms-hero__cta{margin-top:1rem}
.cms-hero__caption--top-left{top:clamp(2rem,6vw,4.5rem);left:0}
.cms-hero__caption--top-right{top:clamp(2rem,6vw,4.5rem);right:0}
.cms-hero__caption--bottom-left{bottom:clamp(2rem,6vw,4.5rem);left:0}
.cms-hero__caption--bottom-right{bottom:clamp(2rem,6vw,4.5rem);right:0}
@media(max-width:640px){.cms-hero__caption{position:static;max-width:none;margin:0}
.cms-hero--caption{justify-content:flex-end}}
/* ── Stil „overlap“ — Karte ueber der Bildkante ──
   Die zweite Haelfte der Referenz: das Foto traegt oben, die Karte mit
   Augenbraue, Titel, Text und Buttons sitzt unten und ragt in den
   Abschnitt darunter. `overflow:visible` ist Pflicht — `.cms-hero`
   schneidet sonst genau den ueberstehenden Teil ab. */
/* Das BILDBAND braucht eine eigene Hoehe. Vorher zaehlte die Karte in
   die Hoehe des Heros hinein: bei `minHeight: md` (55vh) und einer
   349px hohen Karte blieben vom Foto 47 SICHTBARE PIXEL uebrig — ein
   Streifen, in den der Eck-Kasten dann hineinragte (Tims Befund
   2026-09-13, gemessen in der Vorschau). Die Referenz trennt beides:
   das Bild ist `62vh` hoch mit Boden `440px`, die Karte haengt nur
   80-96px darueber.
   Der leere Platzhalter ist genau dieses Band. Er steht VOR der
   Karte, traegt die Hoehe allein und laesst sich nicht stauchen;
   was der Block als `minHeight` mitbringt, bleibt die Untergrenze
   des GANZEN Heros und tritt hier nicht mehr in Konkurrenz. */
.cms-hero--overlap{justify-content:flex-start;padding-block:0;overflow:visible}
.cms-hero--overlap::before{content:"";display:block;flex:none;min-height:max(440px,62vh)}
.cms-hero--overlap .cms-hero__inner{display:flex;justify-content:center}
.cms-hero__card{position:relative;z-index:2;background:var(--_card,var(--_bg));color:var(--_fg);text-align:center;width:100%;max-width:46rem;padding:clamp(1.75rem,3.5vw,3rem) clamp(1.25rem,3vw,2.75rem);box-shadow:var(--_shadow-lg);margin-bottom:clamp(-5rem,-7vw,-2.5rem)}
.cms-hero__card .cms-hero__title{font-size:clamp(2rem,4.4vw,3.4rem);margin:0;text-shadow:none}
.cms-hero__card .cms-hero__sub{font-size:clamp(1rem,1.5vw,1.15rem);max-width:42rem;margin:1.1rem auto 0;opacity:1;color:var(--_muted)}
.cms-hero__card .cms-hero__cta{justify-content:center;margin-top:1.6rem}
.cms-hero__card-ornament{margin:1rem 0 .25rem}
/* Der Text der Karte bleibt schmal — er lief vorher ueber die ganze
   Kartenbreite, waehrend die Referenz ihn in einer Spalte haelt. */
.cms-hero__card .cms-hero__sub{max-width:34rem}
.cms-hero__eyebrow{display:block;font-family:var(--font-heading,inherit);font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--color-kicker,var(--_accent,var(--_primary)));margin:0 0 .9rem}
/* Der Kasten an der Ecke bleibt im Karten-Stil verfuegbar — das
   Original zeigt beides zugleich. */
.cms-hero--overlap .cms-hero__caption{z-index:3}
@media(max-width:640px){.cms-hero__card{margin-bottom:-1.5rem}}
/* Die ruhige Zeile unter Text und Buttons: Termin, Preis, Zeit. Im
   Fliesstext stuende dieselbe Angabe wie ein Nachsatz. */
.cms-hero__meta{margin:1rem 0 0;font-size:.9rem;color:var(--color-ink-3,var(--_muted))}
.cms-hero__card .cms-hero__meta{margin-top:1.25rem}
/* Karte am linken Rand statt mittig. Die Referenz setzt die Karte
   ihres Termin-Bandes an die linke Kante und schmaler als die
   zentrierte Fassung des Seitenkopfs — zentriert saehe der Abschnitt
   aus wie ein zweiter Seitenkopf. */
.cms-hero--overlap-left .cms-hero__inner{justify-content:flex-start}
.cms-hero--overlap-left .cms-hero__card{text-align:left;max-width:38rem}
.cms-hero--overlap-left .cms-hero__card .cms-hero__sub{margin-inline:0}
.cms-hero--overlap-left .cms-hero__card .cms-hero__cta{justify-content:flex-start}

/* ── Sections / CTA ── */
.cms-section{padding:clamp(3.5rem,7.5vw,6.5rem) 1.25rem}
.cms-section__inner{width:100%;max-width:var(--_container);margin:0 auto}

/* ── Intra-section rhythm ladder (the "symbiosis" core) ──────────────
   Section children previously stacked on element-default margins:
   heading→grid and grid→button rendered at 0px — the single biggest
   amateur signal. Zero out, then set per-adjacency gaps mirroring the
   reference consensus: heading lockup tight (8–16px), heading→content
   40–48px, content→CTA 40px, paragraph flow 20–24px. */
.cms-section__inner>*{margin-block:0}
/* Flex-column children shrink to fit-content — stats/accordions/tabs
   rendered half-width and scroll containers (slider/logo-wall) overflowed
   the viewport on mobile. Stretch every block child except buttons;
   width-capped elements still position via the section's align-items. */
.cms-section__inner>:not(.btn){width:100%;min-width:0}
.cms-section__inner>*+*{margin-block-start:1.5rem}
.cms-section__inner>.cms-eyebrow-wrap+:is(h1,h2,h3,.cms-heading){margin-block-start:.75rem}
.cms-section__inner>:is(h1,h2,h3)+p{margin-block-start:1rem}
.cms-section__inner>p+p{margin-block-start:1.25rem}
.cms-section__inner>:is(.cms-heading,h1,h2,h3)+:is(.cms-feature-grid,.cms-gallery,.cms-columns,.cms-stats,.cms-pricing,.cms-team,.cms-testimonials,.cms-news,.cms-timeline,.cms-accordion,.cms-tabs,.cms-slider,.cms-carousel,.cms-event-grid,.cms-event-strip,.cms-logo-wall,.cms-menu,.cms-hours,.cms-compare,.cms-reviews,.cms-bento,.cms-jobs,.cms-contact-card,.cms-map,.cms-mosaic,.cms-framed,.cms-mock,.cms-embed-consent,figure,ul,ol),
.cms-section__inner>p+:is(.cms-feature-grid,.cms-gallery,.cms-columns,.cms-stats,.cms-pricing,.cms-team,.cms-testimonials,.cms-news,.cms-timeline,.cms-accordion,.cms-tabs,.cms-slider,.cms-carousel,.cms-event-grid,.cms-event-strip,.cms-logo-wall,.cms-menu,.cms-hours,.cms-compare,.cms-reviews,.cms-bento,.cms-jobs,.cms-contact-card,.cms-map,.cms-mosaic,.cms-framed,.cms-mock,.cms-embed-consent,figure){margin-block-start:clamp(2.5rem,4vw,3rem)}
/* Ein Abschnitt IN einer Spalte ist eine KARTE, kein Seitenband.
   Die Rhythmusleiter darueber ist fuer Baender gemacht und setzt bis
   zu 3rem zwischen Text und Datenblock — in einer Karte von rund
   34rem Breite reisst das den Inhalt auseinander (gemessen 48px
   zwischen Anschrift und Anfahrtszeilen, die Referenz setzt 24px).
   Die Karte faellt damit auf den Grundabstand der Leiter zurueck;
   Ueberschrift→Text bleibt unberuehrt. */
.cms-column>.cms-section .cms-section__inner>:is(.cms-heading,h1,h2,h3,p)+:is(.cms-feature-grid,.cms-gallery,.cms-columns,.cms-stats,.cms-pricing,.cms-team,.cms-testimonials,.cms-news,.cms-timeline,.cms-accordion,.cms-tabs,.cms-slider,.cms-carousel,.cms-event-grid,.cms-event-strip,.cms-logo-wall,.cms-menu,.cms-hours,.cms-compare,.cms-reviews,.cms-bento,.cms-jobs,.cms-contact-card,.cms-map,.cms-mosaic,.cms-framed,.cms-mock,.cms-embed-consent,figure,ul,ol){margin-block-start:1.5rem}
/* Die 26rem-Deckelung der Zeitentabelle ist fuer den freien Fluss
   gedacht; in einer Karte laesst sie die Uhrzeiten mitten im Nichts
   enden statt an der Kante. */
.cms-column>.cms-section .cms-hours table{max-width:none}
.cms-section__inner>*+:is(.btn,p:has(>.btn:only-child)){margin-block-start:2.5rem}
.cms-section__inner>:is(.btn,p:has(>.btn:only-child))+:is(.btn,p:has(>.btn:only-child)){margin-block-start:.75rem}
/* Zwei Knoepfe nebeneinander: die Kinder eines Abschnitts sind
   Flex-Elemente einer SPALTE, jeder Knopf bekam also seine eigene
   Zeile. Der Publisher fasst einen Lauf aufeinanderfolgender Knoepfe
   jetzt in `.cms-section__actions` — die Reihe selbst steht hier.
   `width:auto` muss sein: die Zeile darueber streckt JEDES Kind
   ausser `.btn` auf volle Breite, und eine 100% breite Reihe stuende
   in einem zentrierten Abschnitt trotzdem links. Gleiche
   Gewichtsklasse, spaeter notiert — sie gewinnt. */
.cms-section__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
/* Der Publisher packt jeden Knopf in ein `<p>` — das ist das
   Flex-Element, nicht der Knopf. Ohne die Nullung traegt jede
   Zeile der Reihe noch den Absatz-Abstand von 1em unter sich. */
.cms-section__actions>p{margin:0}
/* In einer SPALTE bekommt jeder Knopf eine Mindestbreite von 12rem und
   die Reihe darf umbrechen. Damit entscheidet die BREITE, nicht eine
   Regel: in der Drittel-Spalte (368px) passen zwei nicht nebeneinander,
   sie brechen um und nehmen je die volle Zeile — in der halben Spalte
   des Jobs-Abschnitts (570px) passen sie und bleiben eine Reihe. Genau
   so macht es die Referenz an beiden Stellen. */
.cms-column .cms-section__actions>p{display:flex;flex:1 1 12rem}
.cms-column .cms-section__actions>p>.btn{flex:1 1 auto;justify-content:center}
/* Ein Knopf, der wie ein LINK aussieht — der stille Abschluss einer
   Knopfgruppe. Keine Flaeche, kein Rahmen, kleine Versalien. */
.btn-quiet{background:none;border-color:transparent;padding:.35rem .25rem;color:var(--color-ink-3,var(--_muted));font-size:.72rem;font-weight:600;letter-spacing:var(--nav-tracking,.1em);text-transform:uppercase;box-shadow:none}
.btn-quiet:hover{background:none;box-shadow:none;transform:none;color:var(--_primary)}
/* Ein LINK, kein Knopf: Text mit Unterstrich in der Tinte. Die
   Referenz beendet ihre Abschnitte so - ein Rahmen-Knopf wirkt dort
   wie ein zweiter Handlungsaufruf neben dem eigentlichen. */
.btn-text{background:none;border:0;border-bottom:1px solid var(--_fg);border-radius:0;padding:0 0 .3rem;font-size:.88rem;font-weight:400;box-shadow:none;color:inherit}
.btn-text:hover{background:none;box-shadow:none;transform:none;border-bottom-color:var(--_primary);color:var(--_primary)}
/* Eine Label-Wert-Liste in einer Spalte ist eine Beistellung, kein
   Seitenband: die Referenz setzt sie dort eine Stufe kleiner und
   enger (Tims Befund 2026-09-14: kompakter, sauberer, besser
   gegliedert). */
.cms-column .cms-hours{font-size:.92rem}
.cms-column .cms-hours__day,.cms-column .cms-hours__time{padding-block:.42rem}
.cms-column .cms-hours__note{font-size:.82rem}
/* Die Referenz trennt die Zeiten auf der Startseite gepunktet — das
   ist dort die ganze Gliederung. NUR als direktes Kind der Spalte:
   in einer Karte (Anfahrt) zieht sie eine durchgezogene Linie, und
   beides zugleich saehe nach zwei Systemen aus. */
.cms-column>.cms-hours:not(.cms-hours--top) tr{border-bottom-style:dotted;border-bottom-color:var(--color-line-strong,var(--_border))}
/* Nur EINE Haarlinie ueber der ganzen Liste: die Eckdaten einer
   Karte (Adresse, Plaetze, Eroeffnet) sind drei Angaben, keine
   Tabelle. Und in einer Spalte nimmt die Liste die volle Breite —
   die 26rem-Deckelung ist fuer den freien Fluss gedacht und liess
   die Werte mitten im Nichts enden (Tims Befund 2026-09-14). */
.cms-column .cms-hours table{max-width:none}
.cms-hours--top table{border-top:1px solid color-mix(in srgb,var(--_border) 90%,transparent)}
.cms-hours.cms-hours--top tr{border-bottom:0}
.cms-hours--top .cms-hours__day,.cms-hours--top .cms-hours__time{padding-block:.35rem}
/* Drei Eckdaten sind keine Tabelle: das Label still, der Wert in
   NORMALER Staerke. Halbfett gesetzt lasen sich Adresse, Plaetze
   und Telefon wie drei Schlagzeilen (Referenz: dt in ink-3, dd
   normal). */
.cms-hours--top .cms-hours__day{font-weight:400;color:var(--color-ink-3,var(--_muted))}
.cms-hours--top .cms-hours__time{font-weight:400}
.cms-hours--top tr:first-child .cms-hours__day,.cms-hours--top tr:first-child .cms-hours__time{padding-top:1rem}
.cms-section__inner>.cms-section__actions{width:auto;max-width:100%}
.cms-section__inner>*+.cms-section__actions{margin-block-start:2.5rem}
.cms-column>.cms-section__actions{margin-top:1.75rem}
/* Eine SPALTE ist ein Stapel wie der Innenbehaelter eines
   Abschnitts — sie hatte aber keine Rhythmusleiter: jedes Kind stand
   auf 0px Abstand, und die Ueberschrift klebte an der Unterkante ihres
   Fotos (Tims Befund 2026-09-14). Dieselben Adjazenzen wie im
   Abschnitt, eine Stufe enger: eine Spalte ist schmaler als ein
   Seitenband. Die Aktionsreihe darueber traegt zwei Klassen und
   bleibt deshalb bei ihrem eigenen Wert. */
.cms-column>*{margin-block:0}
.cms-column>*+*{margin-block-start:1.25rem}
.cms-column>:is(h1,h2,h3,h4,.cms-heading)+p{margin-block-start:.75rem}
.cms-column>p+p{margin-block-start:1rem}
.cms-column>.cms-image+*{margin-block-start:1.5rem}
.cms-column>p+:is(.cms-hours,.cms-map,.cms-feature-grid,.cms-stats,.cms-menu,.cms-accordion,.cms-timeline,.cms-gallery,figure){margin-block-start:1.5rem}
/* Und eine Stufe kleiner als im freien Fluss. Die Referenz setzt in
   ihren Karten 0.98rem Fliesstext und 0.82rem kursiv fuer die
   Beizeile unter dem Namen; bei uns stand beides auf 17px und die
   Karte wirkte dadurch grob (Tims Befund 2026-09-14: kleinere
   Schrift, sauberer). Getroffen wird der ABSATZ der Spalte und der
   eines Abschnitts DARIN — Ueberschriften, Listen und Chips haben
   ihre eigenen Groessen. */
.cms-column>p,.cms-column>.cms-section .cms-section__inner>p{font-size:.95rem;line-height:1.7}
/* …und eine Stufe ZURUECK: die Referenz setzt ihren Fliesstext in
   ink-2, nicht in der vollen Tinte - sonst steht er gleichberechtigt
   neben der Schlagzeile (Tims Befund 2026-09-15). Ueberschriften,
   Listen und Datenbloecke behalten ihre eigene Farbe. */
.cms-column>p,.cms-section__inner>p{color:var(--color-ink-2,var(--_muted))}
.cms-column .cms-heading__subtitle{font-size:.82rem;font-style:italic;line-height:1.6;color:var(--color-ink-3,var(--_muted))}

/* Data blocks never inherit a centered section's text-align: menu
   descriptions, event rows, contact/hours cards and timeline steps read
   as accidental when centered next to their left-anchored icons/rails. */
.cms-menu,.cms-event-strip,.cms-contact-card,.cms-hours,.cms-timeline,.cms-feature-grid--ruled{text-align:left}

/* Width discipline inside sections: cap line lengths regardless of the
   wide container (centered sections stay readable). */
.cms-section__inner>:is(h1,h2,h3),.cms-heading{max-width:48rem}
/* Kopf mit stillem Link daneben: Titelblock links, Link rechts auf der
   Hoehe des Titels. Die Referenz setzt den Link so — ein Knopf
   unter dem Raster liest sich wie ein Abschluss statt wie ein
   Weiterweg (Tims Befund 2026-09-13). Der Kopf darf dafuer ueber die
   Lesebreite hinaus, sonst klebte der Link am Titel. */
.cms-heading--action{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;max-width:none;flex-wrap:wrap}
.cms-heading--action .cms-heading__lead{max-width:48rem;min-width:0}
/* Der Link in der Markenfarbe, unten buendig mit dem Titel, und die
   Liste 2,5rem darunter: der Kartenkopf der dunkel-kupfernen
   Startseite (gemessen 2026-09-15: 11,2px Kupfer mit Kupferlinie,
   Unterkante auf der Unterkante des Titels). */
.cms-heading--action-marke{align-items:flex-end}
/* Unten buendig heisst: auf der Unterkante des TITELS, nicht unter
   seinem Abstand — gemessen 36px zu tief, bis der Titel im Verbund
   seinen unteren Rand abgab. */
.cms-heading--action-marke .cms-heading__lead>:is(h1,h2,h3){margin-bottom:0}
.cms-heading--action-marke .cms-heading__action{color:var(--_primary);border-bottom-color:var(--_primary);padding-bottom:.25rem}
.cms-section__inner>.cms-heading--action-marke+.cms-menu{margin-block-start:2.5rem}
.cms-heading__action{flex:none;font-size:.72rem;font-weight:600;letter-spacing:var(--nav-tracking,.1em);text-transform:uppercase;color:var(--_muted);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--_border) 90%,transparent);padding-bottom:.2rem}
.cms-heading__action:hover{color:var(--_primary);border-bottom-color:var(--_primary);text-decoration:none}
/* Kopf mit Signet: Zeichen links, Titel und Beizeile rechts — die
   Anatomie der Hauskarte in der Referenz. Ohne Mandanten-Logo gibt
   es die Huelle gar nicht, der Kopf bleibt wie zuvor. */
/* Die Klasse allein tut NICHTS: der React-Spiegel entscheidet sie,
   bevor er die Adresse des Logos kennt (der Hook steckt im Kind).
   Ohne `:has` waere der Kopf dann eine Flex-Reihe mit Luecke und
   ohne Lesebreite — fuer ein Signet, das gar nicht kommt. */
.cms-heading--signet:has(>.cms-heading__signet){display:flex;align-items:flex-start;gap:1rem;max-width:none}
.cms-heading--signet .cms-heading__lead{min-width:0}
/* Das Signet ist ein ZEICHEN neben dem Namen, kein Banner: das Logo
   eines Mandanten ist oft ein Schriftzug, und der nahm bei freier
   Breite die halbe Karte ein. Hoehe und Deckel begrenzen beides. */
.cms-heading__signet{flex:none;height:3.5rem;width:auto;max-width:9rem;object-fit:contain;display:block}
.cms-heading--signet .cms-heading__subtitle{margin-top:.25rem}
/* …oder DARUEBER: gross ueber dem Namen statt klein daneben. Die
   Referenz stellt ihre Hauskarte so (96px hoch, 28px Abstand). */
.cms-heading--signet-oben:has(>.cms-heading__signet){display:block}
.cms-heading--signet-oben>.cms-heading__signet{height:6rem;max-width:none;margin-bottom:1.75rem}
/* Die Terminkarte der Referenz zeigt mehr Bild: 16/10 statt 16/9. */
.cms-card--calendar .cms-card__cover{aspect-ratio:16/10}
/* Die Terminkarte der Referenz: Kopfzeile aus Kategorie und Schild,
   Titel, Text — und ganz unten, hinter einer Haarlinie, die Angaben
   Wann/Wo/Karten. `margin-top:auto` schiebt sie an den Fuss, damit
   drei Karten nebeneinander auf derselben Linie enden. Dafuer muss die
   Karte eine Spalte sein — und genau das nimmt ihr die UA-Regel fuer
   [hidden] (jede Autoren-Regel fuer `display` schlaegt sie), also
   steht die Regel hier ausgeschrieben: die Filterleiste versteckt
   Karten ueber genau dieses Attribut. */
.cms-card--calendar{display:flex;flex-direction:column}
.cms-card--calendar[hidden]{display:none}
.cms-card--calendar>.cms-card__link{display:flex;flex-direction:column;flex:1 1 auto}
.cms-card--calendar .cms-card__body{display:flex;flex-direction:column;flex:1 1 auto;padding:1.6rem 1.75rem}
.cms-card__kickerrow{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:.45rem}
.cms-card__kickerrow .cms-card__kicker{margin:0}
.cms-card__status{border:1px solid currentColor;color:var(--color-kicker,var(--_accent));font-size:.58rem;font-weight:600;letter-spacing:var(--nav-tracking,.1em);text-transform:uppercase;padding:.18rem .45rem;line-height:1.4}
.cms-card__facts{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1rem;margin:auto 0 0;padding-top:1.15rem;border-top:1px solid color-mix(in srgb,var(--_border) 85%,transparent)}
.cms-card__fact--wide{grid-column:1/-1}
.cms-card__facts dt{font-size:.58rem;font-weight:600;letter-spacing:var(--nav-tracking,.1em);text-transform:uppercase;color:var(--color-ink-3,var(--_muted))}
.cms-card__facts dd{margin:.3rem 0 0;font-size:.88rem}
.cms-section__inner>p{max-width:var(--_measure)}

/* Naked flow (.cms-main level) mirrors of the key adjacencies.
   The width model gives EVERY top-level block a section-sized
   margin-block (up to 4.5rem top AND bottom). Setting only
   margin-block-start on the follower does nothing: adjacent margins
   COLLAPSE to the larger one, so the leader's 4.5rem won and a
   heading sat ~72px from its own paragraph. Each pair therefore
   trims the LEADER's bottom margin as well — same adjacency table as
   the section ladder above, which can only skip this because it
   zeroes margin-block on all its children first. */
.cms-main>:is(h1,h2,h3,h4):has(+p){margin-block-end:0}
.cms-main>:is(h1,h2,h3,h4)+p{margin-block-start:1rem}
.cms-main>:is(h1,h2,h3,h4):has(+:is(ul,ol,blockquote)){margin-block-end:0}
.cms-main>:is(h1,h2,h3,h4)+:is(ul,ol,blockquote){margin-block-start:1rem}
.cms-main>p:has(+p){margin-block-end:0}
.cms-main>p+p{margin-block-start:1.25rem}
.cms-main>p:has(+:is(ul,ol,blockquote)){margin-block-end:0}
.cms-main>p+:is(ul,ol,blockquote){margin-block-start:1.25rem}
.cms-main>:is(ul,ol):has(+p){margin-block-end:0}
.cms-main>:is(ul,ol)+p{margin-block-start:1.25rem}
.cms-main>.cms-eyebrow-wrap:has(+:is(h1,h2,h3,.cms-heading)){margin-block-end:0}
.cms-main>.cms-eyebrow-wrap+:is(h1,h2,h3,.cms-heading){margin-block-start:.75rem}
.cms-main>.cms-heading+*{margin-block-start:clamp(2.5rem,4vw,3rem)}
.cms-cta{position:relative;overflow:hidden;padding-block:clamp(3.75rem,8vw,6.25rem);background:var(--_primary);background:linear-gradient(135deg,var(--_primary),color-mix(in srgb,var(--_primary) 72%,#100c08 28%));color:var(--_on-primary);text-align:center}
.cms-cta::before{content:"";position:absolute;width:26rem;height:26rem;border-radius:999px;top:-12rem;left:-8rem;background:color-mix(in srgb,var(--_on-primary) 10%,transparent);filter:blur(56px);pointer-events:none}
.cms-cta::after{content:"";position:absolute;width:22rem;height:22rem;border-radius:999px;bottom:-11rem;right:-7rem;background:color-mix(in srgb,var(--_on-primary) 7%,transparent);filter:blur(56px);pointer-events:none}
.cms-cta__inner{position:relative;max-width:44rem;margin:0 auto;padding-inline:1.25rem}
.cms-cta h2{margin-bottom:.5rem}
.cms-cta p{opacity:.92}
.cms-cta .btn-primary{background:var(--_on-primary);color:var(--_primary);box-shadow:0 8px 22px -10px rgba(0,0,0,.38)}
/* 'card' variant — link-banner: surface card, text left / button right. */
.cms-cta--card{background:none;padding:0 1.5rem;color:inherit;text-align:left}
.cms-cta--card::before,.cms-cta--card::after{content:none}
.cms-cta--card .cms-cta__inner{max-width:var(--_container);display:grid;grid-template-columns:1fr auto;align-items:center;gap:1.25rem 2rem;padding:1.9rem 2.25rem;background:var(--_card);border:1px solid color-mix(in srgb,var(--_border) 80%,transparent);border-radius:var(--_radius-xl);box-shadow:var(--_shadow-sm)}
.cms-cta--card h2{margin:0 0 .25rem;font-size:clamp(1.35rem,2.4vw,1.8rem)}
.cms-cta--card p{margin:0;color:var(--_muted);opacity:1}
.cms-cta--card .btn-primary{background:var(--_primary);color:var(--_on-primary);box-shadow:var(--_shadow-sm)}

/* ── Feature grid ── */
.cms-feature-grid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:var(--space-grid,1.5rem)}
.cms-feature{display:flex;flex-direction:column;padding:var(--space-card,1.5rem);border-radius:var(--_radius-lg);background:var(--_card);border:1px solid color-mix(in srgb,var(--_border) 80%,transparent);box-shadow:var(--_shadow-sm);transition:transform .2s ease,box-shadow .25s ease}
.cms-feature:hover{transform:translateY(-4px);box-shadow:var(--_shadow-md)}
/* „plain“ — die Referenz stellt ihre Werte als blosse Spalten hin:
   farbige Ueberschrift, schmaler Text, kein Kasten. */
.cms-feature-grid--plain{gap:clamp(1.5rem,3vw,2.5rem)}
.cms-feature-grid--plain .cms-feature{padding:0;background:none;border:0;box-shadow:none;border-radius:0}
.cms-feature-grid--plain .cms-feature:hover{transform:none;box-shadow:none}
.cms-feature-grid--plain .cms-feature__title{color:var(--_primary);font-size:1.05rem;margin:0 0 .5rem}
.cms-feature-grid--plain .cms-feature__text{font-size:.92rem;line-height:1.7;color:var(--_muted);max-width:26ch}
/* Woerterbuch-Form: schlicht, aber jeder Eintrag beginnt mit einer
   Haarlinie — daran haengt die Referenz ihre Begriffe auf. */
.cms-feature-grid--ruled{gap:1.75rem 3.5rem}
.cms-feature-grid--ruled .cms-feature{border-top:1px solid color-mix(in srgb,var(--_border) 90%,transparent);padding-top:1.25rem}
.cms-feature-grid--ruled .cms-feature__title{font-family:var(--font-heading,inherit);font-size:1.25rem}
.cms-feature-grid--ruled .cms-feature__text{max-width:44ch}
/* `liste` ist `ruled` mit dem Titel in der GRUNDSCHRIFT: die
   Referenz stellt drei Hervorhebungen neben ihren Einstiegstext —
   je eine Haarlinie darueber, Titel 1rem halbfett, Text still
   darunter. In der Anzeigeschrift lasen sich dieselben drei
   Eintraege wie drei weitere Ueberschriften. */
.cms-feature-grid--liste{gap:2rem 3.5rem}
.cms-feature-grid--liste .cms-feature__title{font-family:var(--font-sans,ui-sans-serif,system-ui,sans-serif);font-size:1rem;font-weight:500;line-height:1.5;color:var(--_fg)}
.cms-feature-grid--liste .cms-feature__text{font-size:.92rem;line-height:1.625;color:var(--color-ink-2,var(--_muted))}
.cms-feature-grid--plain .cms-feature__icon{width:auto;height:auto;background:none;margin-bottom:.5rem;color:var(--_primary)}
.cms-feature__icon{display:inline-flex;align-items:center;justify-content:center;width:2.9rem;height:2.9rem;border-radius:calc(var(--_radius) - .1rem);background:color-mix(in srgb,var(--_primary) 12%,transparent);color:var(--_primary);font-size:1.35rem;line-height:1;margin-bottom:1rem}
.cms-feature__icon svg{width:1.5rem;height:1.5rem;display:block}
.cms-feature__icon-img{width:1.6rem;height:1.6rem;display:block;object-fit:contain}
.cms-feature__title{margin:0 0 .4rem;font-size:1.12rem}
.cms-feature__text{margin:0;color:var(--_muted);font-size:.95rem;line-height:1.6}
/* Linked feature card — whole card is an <a>, "Mehr →" line in accent. */
.cms-feature--link{display:flex;flex-direction:column;color:inherit;text-decoration:none}
.cms-feature--link:hover{text-decoration:none}
.cms-feature__more{display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:1rem;color:var(--_accent);font-weight:600;font-size:.92rem}
.cms-feature__more::after{content:"→";transition:transform .2s ease}
.cms-feature--link:hover .cms-feature__more::after{transform:translateX(3px)}

/* ── Stats — contained surface-alt band with vertical dividers ── */
.cms-stats{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:0;text-align:center;background:var(--_surface-alt);border-radius:var(--_radius-xl);padding:2.5rem 1.5rem}
.cms-stat{padding:1.5rem 1rem}
.cms-stat+.cms-stat{border-left:1px solid color-mix(in srgb,var(--_border) 50%,transparent)}
.cms-stat__value{font-family:var(--font-heading,inherit);font-size:clamp(2.3rem,4.2vw,3.2rem);font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--_primary);font-variant-numeric:tabular-nums}
@supports(background-clip:text){.cms-stat__value{background:linear-gradient(120deg,var(--_primary),color-mix(in srgb,var(--_primary) 55%,var(--_fg)));-webkit-background-clip:text;background-clip:text;color:transparent}}
.cms-stat__label{margin-top:.55rem;color:var(--color-ink-3,var(--_muted));font-size:.92rem;font-weight:500;letter-spacing:.03em}
/* „plain“ — auf einer Farbflaeche ist die Kachel falsch: die
   Referenz setzt die Zahlen direkt auf das Band, getrennt von Haarlinien,
   und laesst sie die Schriftfarbe des Bandes erben. */
.cms-stats--plain{background:none;border-radius:0;padding:0}
.cms-stats--plain .cms-stat{padding:1.1rem 1.5rem;border-left:1px solid color-mix(in srgb,currentColor 22%,transparent)}
/* Die senkrechte Linie gehoert zwischen die Spalten, also faellt sie am
   Anfang JEDER Reihe weg — nicht nur beim allerersten Feld. `nth-child`
   kann keine Variable lesen, deshalb steht die Spaltenzahl als Attribut
   am Raster (Tims Befund 2026-09-13: eine Linie stand links neben der
   zweiten Reihe im Nichts). */
.cms-stats--plain[data-cols="2"] .cms-stat:nth-child(2n+1),
.cms-stats--plain[data-cols="3"] .cms-stat:nth-child(3n+1),
.cms-stats--plain[data-cols="4"] .cms-stat:nth-child(4n+1),
.cms-stats--plain[data-cols="5"] .cms-stat:nth-child(5n+1){border-left:0}
.cms-stats--plain .cms-stat__value{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:currentColor;font-size:calc(clamp(1.15rem,1.8vw,1.5rem) * var(--display-scale,1));font-weight:var(--display-weight,600)}
.cms-stats--plain .cms-stat__label{color:inherit;opacity:.72;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;margin-top:.35rem;order:-1}
.cms-stats--plain .cms-stat{display:flex;flex-direction:column}
/* Die Angaben unter einem Seitenkopf: EINE Haarlinie darueber und die
   Paare zusammengerueckt, statt ueber die ganze Breite verteilt. Das
   Raster streckt drei Paare sonst auf 1200px und laesst sie wie drei
   Spalten aussehen; die Referenz stellt sie als 672px breite Reihe
   unter eine Linie (gemessen 2026-09-14: gap 48px, pt 32px). */
.cms-stats--reihe{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 3rem;padding-top:2rem;margin-top:2rem;border-top:1px solid var(--_border);max-width:var(--_measure);margin-inline:auto}
.cms-stats--reihe .cms-stat{padding:0;border-left:0;text-align:center}
/* Eine Angabe ist hier eine ZEILE, keine Schlagzeile: die Theme-Skala
   der Ueberschriften bliebe hier als 33px stehen, die Referenz setzt
   1,35rem. */
.cms-stats--reihe .cms-stat__value{font-size:clamp(1.15rem,1.6vw,1.35rem)}
/* Vier Werte in einem RASTER, jede Zelle unter einer Linie - die
   Anatomie der Bier-Fakten in der Referenz (Abschnitt 04). Die
   senkrechten Striche der schlichten Fassung passen dort nicht: die
   Zellen stehen nebeneinander UND untereinander. */
.cms-stats--raster{border-top:1px solid var(--_border);gap:0}
.cms-stats--raster .cms-stat{border-left:0;border-bottom:1px solid var(--_border);padding:1.25rem 1rem 1.25rem 0;text-align:left}
.cms-stats--raster .cms-stat__value{font-size:1.6rem;line-height:1.1}
.cms-stats--raster .cms-stat__label{font-size:.72rem;letter-spacing:.14em}
/* Die Fakten der Referenz im dunklen Entwurf: Zellen auf dem
   Seitengrund, dazwischen 1px Fuge auf der Linienfarbe, der Wert in
   der Markenfarbe. Die Luecke selbst ist wieder die Linie - derselbe
   Griff wie bei den Spalten (kupfer-nacht/Home.tsx). */
.cms-stats--fuge{background:var(--_border);gap:1px;border:0;padding:0}
.cms-stats--fuge .cms-stat{background:var(--_bg);border-left:0;padding:1.5rem 1.25rem;text-align:left}
.cms-stats--fuge .cms-stat__value{font-size:1.8rem;line-height:1.1;color:var(--_primary)}
.cms-stats--fuge .cms-stat__label{font-size:.6rem;letter-spacing:.14em}
/* Die Groesse der Werte als eigener Hebel: `kompakt` ist der Seitenkopf
   der dunkel-kupfernen Referenz (Zelle 20px Luft, Label 0,58rem, Wert
   1,2rem in der Schreibweise der Anzeigeschrift), `mittel` die
   Bierfakten (1,5rem). Gemessen 2026-09-15. */
.cms-stats--kompakt .cms-stat{padding:1.25rem}
.cms-stats--kompakt .cms-stat__label{font-size:.58rem;color:var(--color-ink-3,var(--_muted));opacity:1}
.cms-stats--kompakt .cms-stat__value{font-size:1.2rem;line-height:1.2;text-transform:var(--display-case,none)}
.cms-stats--mittel .cms-stat__value{font-size:1.5rem;line-height:1.1}
/* Das Anfrageformular auf einer eigenen Flaeche: die Referenz stellt
   es auf die erste Flaeche des Themes mit 48px Polster, damit es sich
   als Karte liest und nicht als Loch im Seitengrund (Tims Befund
   2026-09-14, Reservierungsseite). */
.cms-form--card{background:var(--_surface);padding:clamp(1.5rem,3vw,3rem);border:1px solid color-mix(in srgb,var(--_border) 70%,transparent)}
.cms-form--card>h2{margin-top:0}
/* Ab der zweiten Reihe trennt auch eine Linie nach oben — wieder je
   Spaltenzahl, sonst traefe sie die falschen Felder. */
.cms-stats--plain[data-cols="2"] .cms-stat:nth-child(n+3),
.cms-stats--plain[data-cols="3"] .cms-stat:nth-child(n+4),
.cms-stats--plain[data-cols="4"] .cms-stat:nth-child(n+5),
.cms-stats--plain[data-cols="5"] .cms-stat:nth-child(n+6){border-top:1px solid color-mix(in srgb,currentColor 22%,transparent)}
/* Auf dem Telefon steht alles untereinander — dann gibt es keine
   Spalten mehr, die eine senkrechte Linie trennen koennte. */
@media(max-width:768px){.cms-stats--plain .cms-stat{border-left:0}
.cms-stats--plain .cms-stat+.cms-stat{border-top:1px solid color-mix(in srgb,currentColor 22%,transparent)}}
/* Stats carry their own surface-alt band, so their colors stay correct
   even on dark sections (no on-dark override needed anymore). */
.cms-section--on-dark .cms-feature__text,.cms-section--on-dark .cms-timeline__text{color:inherit;opacity:.8}
.cms-section--on-dark .cms-eyebrow{color:inherit;background:color-mix(in srgb,currentColor 12%,transparent);border-color:color-mix(in srgb,currentColor 30%,transparent)}
/* Auf der MARKENFLAECHE gilt dasselbe wie auf einem dunklen Band: eine
   Dachzeile in Akzentgold neben salbeifarbenem Grund ist ein
   Fremdkoerper (Tims Befund 2026-09-14). Sie erbt die Tinte der
   Flaeche und bleibt durch die Deckkraft zurueckgenommen. */
.cms-section--on-brand .cms-kicker,.cms-section--on-brand .cms-eyebrow{color:inherit;opacity:.72}
.cms-section--on-brand .cms-stat__label{color:inherit;opacity:.7}

/* ── Gallery ── */
/* Column steps live ONCE, in CSS_RESPONSIVE (the !important tier that
   all grids share); they clamp against --cols instead of overriding
   it, so a 1-column gallery stays 1 column at every width. */
.cms-gallery{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:var(--space-grid,1.1rem)}
.cms-gallery__item{margin:0;overflow:hidden;border-radius:var(--_radius-lg);box-shadow:var(--_shadow-sm)}
.cms-gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.cms-gallery__item:hover img{transform:scale(1.045)}
.cms-gallery__cap{font-size:.85rem;color:var(--color-ink-3,var(--_muted));padding:.45rem .3rem}

/* ── Menu (gastro signature: narrow column + dotted price leaders) ── */
.cms-menu{max-width:48rem;margin-inline:auto}
.cms-main>.cms-menu{max-width:48rem}
.cms-menu__pdf{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.1rem 1.4rem;margin-bottom:2.5rem;background:var(--_surface-alt);border:1px solid color-mix(in srgb,var(--_border) 70%,transparent);border-radius:var(--_radius-lg)}
.cms-menu__pdf-text{font-weight:600}
.cms-menu__section{margin-bottom:2.75rem}
/* Rubrik als Flaeche: die Referenz gliedert ihre Karte in ruhige
   Kaesten statt in eine durchlaufende Liste — der Anfang einer Rubrik
   ist damit zu sehen, bevor man die Ueberschrift liest. */
.cms-menu__section--card{background:var(--color-surface-2,var(--_surface));padding:clamp(2rem,4vw,3.5rem) clamp(1.25rem,3vw,3rem);margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.cms-menu__section--card:last-child{margin-bottom:0}
.cms-menu__title{font-family:var(--font-heading,inherit);font-size:1.45rem;margin:0 0 1.15rem}
.cms-menu__title::after{content:"";display:block;width:3rem;height:2px;background:var(--_primary);margin-top:.5rem}
.cms-menu__note{color:var(--_muted);font-size:.88em;margin:-.6rem 0 1rem}
.cms-menu__list{list-style:none;margin:0;padding:0}
.cms-menu__item{padding:.55rem 0;margin:0;list-style:none}
/* Durchnummeriert: die Ziffer steht als eigene Spalte links neben
   Name und Preis, in der Schrift der Ueberschriften und gedaempft —
   ein Register statt einer Liste. Das Gericht bleibt ein Raster aus
   Ziffer und Zeile, damit Beschreibung und Chips unter dem NAMEN
   beginnen und nicht unter der Ziffer. */
/* Feste Ziffernspalte: jedes Gericht ist ein EIGENES Raster, ein
   auto-Wert richtet sich also je Zeile neu aus — die Namen standen
   dadurch um wenige Pixel versetzt. */
.cms-menu__item--nr{display:grid;grid-template-columns:clamp(2rem,4vw,3rem) 1fr;column-gap:clamp(1rem,2.5vw,2rem);align-items:baseline;padding-block:.9rem;border-top:1px solid color-mix(in srgb,var(--_border) 80%,transparent)}
.cms-menu__item--nr>:not(.cms-menu__nr){grid-column:2}
/* Die Referenz stellt Name und Preis eine Stufe groesser und den
   Preis in eine EIGENE Spalte rechts; bei uns lief er im Fliesstext
   mit (Tims Runde 2026-09-15). Die Zeile hebt sich beim Ueberfahren. */
.cms-menu--nummern .cms-menu__row{justify-content:space-between;gap:1.5rem}
.cms-menu--nummern .cms-menu__leader{display:none}
.cms-menu--nummern .cms-menu__name{font-family:var(--font-heading,inherit);font-size:clamp(1.15rem,2vw,1.5rem);font-weight:var(--display-weight,400);text-transform:var(--display-case,none);line-height:1.15}
.cms-menu--nummern .cms-menu__price{font-family:var(--font-heading,inherit);font-size:clamp(1.15rem,2vw,1.5rem);font-weight:var(--display-weight,400);text-transform:var(--display-case,none)}
.cms-menu--nummern .cms-menu__item--nr{padding-block:1.5rem}
.cms-menu--nummern .cms-menu__item--nr:hover{background:var(--color-surface-2,var(--_surface))}
/* Beim Zeigen wird auch der NAME zur Markenfarbe — die Referenz faerbt
   Flaeche UND Titel (Tims Befund 2026-09-15: „HERE WE HAVE DIFFERENT
   HOVER“). */
.cms-menu--nummern .cms-menu__name{transition:color .15s}
.cms-menu--nummern .cms-menu__item--nr:hover .cms-menu__name{color:var(--_primary)}
.cms-menu__nr{font-family:var(--font-heading,inherit);font-size:clamp(1.5rem,3vw,2.2rem);font-weight:var(--display-weight,400);line-height:1;font-variant-numeric:tabular-nums;color:var(--color-ink-3,var(--_muted));grid-row:span 3}
.cms-menu__row{display:flex;align-items:baseline;gap:.5rem}
.cms-menu__name{font-weight:600}
.cms-menu__leader{flex:1;min-width:1.25rem;border-bottom:2px dotted color-mix(in srgb,var(--_border) 80%,transparent);margin:0 .35rem .3rem}
.cms-menu__desc{color:var(--_muted);font-size:.9em;margin-top:.15rem;max-width:36rem}
.cms-menu__price{white-space:nowrap;font-weight:700;color:var(--_primary);font-variant-numeric:tabular-nums}
/* Die Karte als ZEILENLISTE: eine Linie ueber jeder Zeile, Name und
   Preis in der Tinte, Beschreibung darunter. Die Referenz stellt ihre
   Gerichte so (Abschnitt 03) - ohne Punktfuehrung, ohne roten Preis. */
.cms-menu--zeilen .cms-menu__item{border-top:1px solid var(--_border);padding:1.25rem 0;margin:0}
.cms-menu--zeilen .cms-menu__leader{display:none}
/* Ohne Punktfuehrung braucht die Zeile ihren eigenen Schub: die
   Fuehrung WAR der Platzhalter zwischen Name und Preis. */
.cms-menu--zeilen .cms-menu__row{justify-content:space-between;gap:1.5rem}
.cms-menu--zeilen .cms-menu__name{font-size:1.05rem;font-weight:500}
.cms-menu--zeilen .cms-menu__price{color:inherit;font-weight:400;font-size:1.05rem;font-variant-numeric:tabular-nums}
.cms-menu--zeilen .cms-menu__desc{margin-top:.25rem;font-size:.9rem;line-height:1.45;color:var(--color-ink-2,var(--_muted))}
/* Der Kopf der Referenz auf ihrer Speisekarte: eine Abschnittsmarke
   (Linie, laufende Nummer, Augenbraue) ueber der Rubrik, darunter
   Titel und Hinweis NEBEN der Liste statt darueber. */
.cms-menu--kopf-marke{max-width:none}
/* Die Nummernliste ebenso: Nummer, Name und Preis stehen
   nebeneinander und brauchen die ganze Breite - auf 48rem
   gedeckelt stand sie mittig unter einer linksbuendigen
   Schlagzeile (Tims Befund 2026-09-15). */
.cms-menu--nummern{max-width:none}
/* Aufzaehlung mit Akzent-Punkt: kleiner Kreis in der Markenfarbe statt
   des Browser-Punktes — so setzt die dunkel-kupferne Referenz ihre
   Hinweise (Gut zu wissen, 2026-09-16). */
.cms-image__cap{margin-top:.75rem;font-size:.82rem;line-height:1.5;color:var(--color-ink-3,var(--_muted))}
.cms-list--akzent{list-style:none;padding-left:0;margin:0}
.cms-list--akzent li{position:relative;padding-left:1rem}
.cms-list--akzent li+li{margin-top:.75rem}
.cms-list--akzent li::before{content:"";position:absolute;left:0;top:.62em;width:.28rem;height:.28rem;border-radius:50%;background:var(--_primary)}
/* Die Nummernliste ebenso: Nummer, Name und Preis stehen
   nebeneinander und brauchen die ganze Breite - auf 48rem
   gedeckelt stand sie mittig unter einer linksbuendigen
   Schlagzeile (Tims Befund 2026-09-15). */
.cms-menu--kopf-marke .cms-menu__note{text-align:left}
/* Der Rubrikenkopf der dunkel-kupfernen Referenz: Kicker und grosser
   Titel (bis 3,6rem, Zeilenhoehe 0,98) links, der Hinweis rechts unten
   auf derselben Zeile; die Liste 2,5rem darunter, die Rubriken 6rem
   auseinander (space-y-24). Gemessen 2026-09-15. */
.cms-menu--kopf-zeile{max-width:none}
.cms-menu--kopf-zeile .cms-menu__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2rem;text-align:left;margin:0 0 2.5rem}
.cms-menu--kopf-zeile .cms-menu__kicker{margin:0 0 .75rem;font-size:.7rem;font-weight:600;letter-spacing:var(--nav-tracking,.18em);color:var(--_primary)}
.cms-menu--kopf-zeile .cms-menu__title{font-size:clamp(2rem,5vw,3.6rem);line-height:.98;margin:0;text-align:left}
.cms-menu--kopf-zeile .cms-menu__title::after{content:none}
.cms-menu--kopf-zeile .cms-menu__note{margin:0;max-width:24rem;font-size:.92rem;line-height:1.6;color:var(--color-ink-2,var(--_muted))}
.cms-menu--kopf-zeile .cms-menu__section+.cms-menu__section{margin-top:6rem}
.cms-menu__section--marke{display:grid;grid-template-columns:1fr;gap:1.5rem}
.cms-menu__section--marke .cms-menu__mark{border-top:1px solid var(--_fg);padding-top:1rem;display:flex;align-items:baseline;gap:1rem;font-size:.78rem}
.cms-menu__section--marke .cms-menu__mark-nr{color:var(--color-ink-3,var(--_muted));font-variant-numeric:tabular-nums}
.cms-menu__section--marke .cms-menu__mark-label{color:var(--color-ink-2,var(--_muted));letter-spacing:.2em;text-transform:uppercase}
.cms-menu__section--marke .cms-menu__title{font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.05;margin:0;text-align:left}
/* Kein Akzentstrich: der gehoert zum kleinen Kopf. Hier traegt die
   Marke darueber die Gliederung. */
.cms-menu__section--marke .cms-menu__title::after{content:none}
.cms-menu__section--marke .cms-menu__note{margin-top:1rem;font-size:.95rem;line-height:1.6;max-width:24rem}
.cms-menu__section--marke .cms-menu__list{margin:0}
/* Das Foto zur Rubrik: unter Titel und Hinweis in der Kopfspalte.
   Die Referenz stellt es dort im Format 4/3 (brauhaus-neu/
   Speisekarte.tsx) - bei uns fehlte es ganz (Tims Befund
   2026-09-15). */
.cms-menu__section--marke .cms-menu__photo{display:block;width:100%;margin-top:1.75rem;aspect-ratio:4/3;object-fit:cover}
@media(min-width:1024px){
.cms-menu__section--marke{grid-template-columns:4fr 7fr;column-gap:4rem;align-items:start}
.cms-menu__section--marke .cms-menu__mark{grid-column:1/-1;margin-bottom:.5rem}
}
.cms-menu__tags{color:var(--_muted);font-size:.8em;font-weight:400}
.cms-menu__footnote{text-align:center;color:var(--_muted);font-size:.85em;margin:1.75rem 0 0}

/* ── Dish list (Tims Review 2026-09-07: aufklappbare Speisen) ── */
.cms-dishes{max-width:48rem;margin-inline:auto}
.cms-main>.cms-dishes{max-width:48rem}
.cms-dishes__item{border:1px solid color-mix(in srgb,var(--_border) 70%,transparent);border-radius:var(--_radius-lg);background:var(--_card);margin-bottom:.75rem;overflow:hidden}
.cms-dishes__summary{list-style:none;cursor:pointer;padding:1rem 1.25rem;display:block}
.cms-dishes__summary::-webkit-details-marker{display:none}
.cms-dishes__row{display:flex;align-items:baseline;gap:.5rem}
.cms-dishes__short{display:block;color:var(--_muted);font-size:.9em;margin-top:.2rem;max-width:36rem}
.cms-dishes__chev{flex:none;width:.65rem;height:.65rem;border-right:2px solid var(--_muted);border-bottom:2px solid var(--_muted);transform:rotate(45deg);margin-left:.5rem;transition:transform .18s ease;align-self:center}
.cms-dishes__item[open] .cms-dishes__chev{transform:rotate(-135deg)}
.cms-dishes__item[open] .cms-dishes__summary{border-bottom:1px solid color-mix(in srgb,var(--_border) 55%,transparent)}
.cms-dishes__body{display:flex;gap:1.25rem;padding:1.1rem 1.25rem;align-items:flex-start}
.cms-dishes__media{flex:none;width:11rem;max-width:38%}
.cms-dishes__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--_radius);display:block}
.cms-dishes__text{min-width:0}
.cms-dishes__details{margin:0;color:inherit}
.cms-dishes__allergens{margin:.6rem 0 0;color:var(--_muted);font-size:.85em}
@media(max-width:640px){.cms-dishes__body{flex-direction:column}.cms-dishes__media{width:100%;max-width:none}}

/* ── Menu showcase (Tims Review 2026-09-07: Bild-Spur + synchrone Gericht-Liste) ── */
.cms-menu-showcase{max-width:var(--_container);margin-inline:auto;padding-inline:1.25rem;display:grid;gap:2rem;align-items:start}
.cms-main>.cms-menu-showcase{max-width:var(--_container)}
@media(min-width:900px){.cms-menu-showcase{grid-template-columns:1.15fr 1fr}.cms-menu-showcase--left .cms-menu-showcase__media{order:0}.cms-menu-showcase--left .cms-menu-showcase__list{order:1}.cms-menu-showcase--right .cms-menu-showcase__media{order:1}.cms-menu-showcase--right .cms-menu-showcase__list{order:0}}
.cms-menu-showcase__media{position:relative;min-width:0}
.cms-menu-showcase__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.75rem;border-radius:var(--_radius-xl);scrollbar-width:none}
.cms-menu-showcase__track::-webkit-scrollbar{display:none}
.cms-menu-showcase__slide{flex:0 0 100%;margin:0;scroll-snap-align:start}
.cms-menu-showcase__slide img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--_radius-xl);display:block}
.cms-menu-showcase__ph{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;border-radius:var(--_radius-xl);background:linear-gradient(135deg,color-mix(in srgb,var(--_primary) 18%,var(--_surface-alt)),var(--_surface-alt));color:var(--_muted);font-weight:600}
.cms-menu-showcase__nav{position:absolute;inset-inline:0;top:50%;transform:translateY(-50%);display:flex;justify-content:space-between;padding:0 .6rem;pointer-events:none}
.cms-menu-showcase__arrow{pointer-events:auto;width:2.4rem;height:2.4rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--_border) 70%,transparent);background:color-mix(in srgb,var(--_card) 88%,transparent);font-size:1.2rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--_shadow-sm)}
.cms-menu-showcase__list{list-style:none;margin:0;padding:0;min-width:0}
.cms-menu-showcase__entry{display:block;width:100%;text-align:left;background:none;border:0;border-left:3px solid transparent;padding:.85rem 1rem;cursor:pointer;border-radius:0 var(--_radius) var(--_radius) 0;color:inherit;font:inherit}
.cms-menu-showcase__entry:hover{background:color-mix(in srgb,var(--_primary) 6%,transparent)}
.cms-menu-showcase__entry.is-active{border-left-color:var(--_primary);background:color-mix(in srgb,var(--_primary) 9%,transparent)}
.cms-menu-showcase__entry.is-active .cms-menu__name{color:var(--_primary)}
.cms-menu-showcase__desc{display:block;color:var(--_muted);font-size:.9em;margin-top:.2rem}

/* ── Opening hours / accordion ── */
.cms-hours table{border-collapse:collapse;width:100%;max-width:26rem}
.cms-hours__title{font-family:var(--font-heading,inherit);font-size:1.35rem;margin:0 0 1rem}
.cms-hours__title::after{content:"";display:block;width:3rem;height:2px;background:var(--_primary);margin-top:.5rem}
.cms-hours tr{border-bottom:1px solid color-mix(in srgb,var(--_border) 50%,transparent)}
.cms-hours tr:last-child{border-bottom:0}
.cms-hours__day{padding:.55rem 1.5rem .55rem 0;color:var(--_muted);font-weight:500}
.cms-hours__time{padding:.55rem 0;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.cms-hours__note{color:var(--_muted);font-size:.85em;margin:.75rem 0 0}
.cms-hours--card{padding:1.75rem 1.9rem;background:var(--_card);border:1px solid color-mix(in srgb,var(--_border) 80%,transparent);border-radius:var(--_radius-lg);box-shadow:var(--_shadow-sm);max-width:30rem}
/* Label-Form 'Schild' — dieselbe Label-Wert-Liste, aber fuer eine
   ANFAHRT statt fuer Oeffnungszeiten: links ein kleines Schild mit
   der Linie, rechts der Haltepunkt im Fliesstext. Die Tabelle wird
   dafuer zu Zeilen aufgeloest (ein `td` kann kein Schild sein, es
   zieht sich auf die Zeilenhoehe). `tbody` steht mit in der ersten
   Zeile, weil der Browser eines einfuegt, wo der Publisher keines
   schreibt. */
.cms-hours--chips table,.cms-hours--chips tbody{display:block;max-width:none}
.cms-hours--chips tr{display:flex;align-items:flex-start;gap:.75rem;border-bottom:0}
.cms-hours--chips tr+tr{margin-top:.7rem}
.cms-hours--chips .cms-hours__day{flex:none;padding:.05rem .45rem;border:1px solid color-mix(in srgb,var(--_border) 90%,transparent);font-size:.6rem;font-weight:600;letter-spacing:var(--nav-tracking,.1em);text-transform:uppercase;color:var(--color-ink-3,var(--_muted));line-height:1.85}
.cms-hours--chips .cms-hours__time{padding:0;text-align:left;font-weight:400;font-variant-numeric:normal;font-size:.88rem;color:var(--_muted)}
/* Cap accordion line length — a 1200px-wide FAQ reads as a wall of
   text. Die BOX richtet sich nach dem align-items des Abschnitts; die
   ANTWORT nicht: sie erbte in einem zentrierten Abschnitt dessen
   text-align und stand als zweizeiliger Block mittig unter ihrer links
   stehenden Frage (Tims Befund 2026-09-14). Fliesstext liest sich
   linksbuendig, wie die Datenbloecke in foundation.ts. */
.cms-accordion{max-width:52rem}
.cms-accordion__item{border:1px solid color-mix(in srgb,var(--_border) 80%,transparent);border-radius:var(--_radius-lg);background:var(--_card);box-shadow:var(--_shadow-sm);padding:0;margin-bottom:.8rem;overflow:hidden}
.cms-accordion__item summary{cursor:pointer;font-weight:600;font-size:1.02rem;padding:1.05rem 1.25rem;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.cms-accordion__item summary::-webkit-details-marker{display:none}
.cms-accordion__item summary:hover{color:var(--_primary)}
.cms-accordion__item summary{transition:color .15s ease}
.cms-accordion__item summary::after{content:"";width:.55rem;height:.55rem;flex:none;border-right:2px solid var(--_muted);border-bottom:2px solid var(--_muted);transform:rotate(45deg);transition:transform .25s ease;margin-top:-.2rem}
.cms-accordion__item[open] summary::after{transform:rotate(225deg);margin-top:.2rem}
.cms-accordion__body{padding:0 1.25rem 1.15rem;margin:0;color:var(--_muted);line-height:1.65;text-align:left}

/* ── Image (single) ── */
.cms-image{margin:0}
/* Ein Bild mit Logo-Auftrag ist eine MARKE, kein Motiv. Es folgt der
   Ausrichtung seines Abschnitts — ein Block-Bild ignoriert
   `text-align`, also braucht es `margin-inline:auto` — und es bleibt
   klein, damit ein grosses Mandanten-Logo die Karte nicht erschlaegt
   (Tims Wunsch 2026-09-13, Logo auf der Hauskarte). */
.cms-image--brand img{width:auto;max-width:100%;max-height:4.5rem;margin-inline:auto;object-fit:contain}
.cms-image img{border-radius:var(--_radius-lg);box-shadow:var(--_shadow-sm)}
.cms-image--zoom{overflow:hidden;border-radius:var(--_radius-lg);box-shadow:var(--_shadow-sm);line-height:0}
.cms-image--zoom img{width:100%;border-radius:0;box-shadow:none;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.cms-image--zoom:hover img{transform:scale(1.045)}
/* Ein Bild in einer SPALTE ist Teil einer Karte, kein schwebendes
   Objekt: Schatten und Rundung liessen es ueber dem Text kleben
   statt in der Karte zu sitzen. Die Referenz rahmt es mit einer
   Haarlinie. */
.cms-column>.cms-image img{border-radius:0;box-shadow:none;border:1px solid color-mix(in srgb,var(--_border) 80%,transparent)}

/* ── Map ── */
.cms-map iframe{width:100%;border:0;border-radius:var(--_radius-lg);box-shadow:var(--_shadow-md)}
.cms-map__address{margin-top:.6rem;color:var(--_muted)}

/* ── Navbar ── */
/* Einzug 1.25rem wie Abschnitte, Fusszeile und Rasterbloecke: mit
   1.5rem stand die Navigation 4px neben dem Seiteninhalt. */
.cms-navbar{width:100%;z-index:50;border-bottom:1px solid transparent}
.cms-navbar__topbar{background:var(--_primary);color:var(--_on-primary);font-size:.82rem;padding:.35rem 1.25rem}
.cms-navbar__topbar-inner{max-width:var(--_container);margin:0 auto;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.cms-navbar__topbar a{color:inherit;text-decoration:none}
.cms-navbar__topbar a:hover{text-decoration:underline}
.cms-navbar__topbar-note{margin-left:auto;opacity:.9}
.cms-navbar__topbar--quiet{background:transparent;color:var(--_muted);font-size:.72rem;padding:.5rem 1.25rem;border-bottom:1px solid color-mix(in srgb,var(--_border) 60%,transparent)}
.cms-navbar__topbar--quiet .cms-navbar__topbar-inner{gap:.75rem}
.cms-navbar__topbar--quiet a{color:inherit}
.cms-navbar__topbar--quiet a:hover{color:var(--_primary);text-decoration:none}
.cms-navbar__topbar--quiet .cms-navbar__topbar-note{font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;opacity:1}
/* Die Referenz reiht Anschrift und Nummer mit einem Mittelpunkt
   aneinander statt mit einer Luecke — nur im stillen Streifen. */
.cms-navbar__topbar--quiet .cms-navbar__topbar-inner>*+*:not(.cms-navbar__topbar-note)::before{content:"\00b7";margin-right:.75rem;opacity:.55}
.cms-navbar--sticky{position:sticky;top:0}
.cms-navbar--light{background:var(--_bg);background:color-mix(in srgb,var(--_bg) 84%,transparent);backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);color:var(--_fg);border-bottom-color:var(--_border);border-bottom-color:color-mix(in srgb,var(--_border) 70%,transparent)}
/* Dunkles Chrome ist eine RICHTUNG, keine feste Farbe: in einem hellen
   Theme ist die dunkle Flaeche die Tinte, in einem dunklen der Grund
   selbst. `--chrome-deep` faellt das Urteil im Theme (theme-css.ts,
   Luminanz des Grundes); ohne Theme bleibt es beim bisherigen Wert. */
.cms-navbar--dark{background:var(--chrome-deep,var(--_fg));background:color-mix(in srgb,var(--chrome-deep,var(--_fg)) 94%,transparent);backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);color:var(--chrome-deep-ink,#fff)}
.cms-navbar--transparent{background:transparent;color:#fff;position:absolute;top:0;left:0;right:0}
.cms-navbar__inner{max-width:var(--_container);margin:0 auto;padding:.85rem 1.25rem;display:flex;align-items:center;gap:1.5rem}
.cms-navbar__brand{font-family:var(--font-heading,inherit);font-size:1.28rem;font-weight:800;color:inherit;text-decoration:none;letter-spacing:-.015em;display:inline-flex;align-items:center;gap:.6rem}
.cms-navbar__logo{height:40px;width:auto}
.cms-navbar__nav{margin-left:auto;display:flex;align-items:center;gap:1.5rem}
.cms-navbar__item{color:inherit;text-decoration:none;font-weight:600;font-size:.95rem;position:relative;padding:.3rem 0;letter-spacing:var(--nav-tracking,0);text-transform:var(--nav-case,none)}
/* Der aktuelle Menuepunkt: Leitfarbe und ein Strich darunter — wie in
   der Referenz. Statisch, nicht per Laufzeit: der Zustand steht beim
   Veroeffentlichen im Block (nav-active.ts). */
.cms-navbar__item--active{color:var(--_primary)}
.cms-navbar__item.cms-navbar__item--active::after{right:0}
/* Eine Stufe kleiner und leichter - der Schriftgrad der Referenz
   (0,9rem regulaer gegen unsere 15,2px/600). Der klare Entwurf
   traegt seine Navigation wie Fliesstext, nicht wie Auszeichnung. */
.cms-navbar--klein .cms-navbar__item{font-size:.9rem;font-weight:400}
.cms-navbar--klein .cms-navbar__cta{font-size:.82rem;font-weight:500}
/* Noch eine Stufe kleiner: der dunkle Entwurf setzt seine
   Navigation als winzige Versalzeile (gemessen 0.72rem halbfett
   gegen 15,2px bei uns) und seinen Knopf als 0.68rem-Kontur. */
.cms-navbar--mini .cms-navbar__item{font-size:.72rem;font-weight:600}
.cms-navbar--mini .cms-navbar__cta{font-size:.68rem;font-weight:600;padding:.75rem 1.25rem}
/* Die Leiste der Referenz, gemessen 2026-09-15 bei 1660px: 85px hoch
   (20px Luft, Signet 44px), die Navigation RUHIG in ink-2 und nur der
   aktive Eintrag in der Markenfarbe, 32px Abstand; der Hauswechsel eine
   stille 9,9px-Zeile in ink-3 ohne Rahmen; die Kontur 1px und 42px
   hoch. Bei uns stand die Navigation in voller Tinte (Tims Befund: „the
   font differs“) und die Leiste 68px hoch. */
.cms-navbar--mini .cms-navbar__inner{padding-block:1.25rem}
.cms-navbar--mini .cms-navbar__logo{height:2.75rem}
@media(min-width:1024px){.cms-navbar--mini.cms-navbar--bp-lg .cms-navbar__nav{gap:2rem}}
.cms-navbar--mini .cms-navbar__item:not(.cms-navbar__item--active){color:var(--color-ink-2,var(--_muted))}
.cms-navbar--mini .cms-navbar__item:not(.cms-navbar__item--active):hover{color:inherit}
.cms-navbar--mini .cms-navbar__actions{gap:.75rem}
.cms-navbar--mini .cms-navbar__cta.btn-ghost{font-size:.62rem;padding:0;border:0;color:var(--color-ink-3,var(--_muted))}
.cms-navbar--mini .cms-navbar__cta.btn-ghost:hover{color:var(--_primary);background:transparent}
.cms-navbar--mini .cms-navbar__cta.btn-kontur{border-width:1px;line-height:1.5}
/* Die schwebende Kapsel: die Leiste selbst bleibt durchsichtig, ihr
   Inneres wird zur runden Flaeche mit Rahmen, Weichzeichner und
   Schatten, mit Abstand zum Rand (dkn „Tutti“, gemessen 2026-09-15:
   Radius 999px, 1px Rahmen, Flaeche 92 %, 10px/28px Luft, 63px hoch). */
.cms-navbar--schwebend{background:transparent;border-bottom:0;box-shadow:none;padding:.75rem 1.25rem 0}
.cms-navbar--schwebend .cms-navbar__inner{border-radius:999px;border:1px solid var(--_border);background:color-mix(in srgb,var(--_surface) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--_shadow-md);padding:.625rem .625rem .625rem 1.75rem}
.cms-navbar--schwebend.is-scrolled{background:transparent;border-bottom:0;box-shadow:none}
/* Haarlinien ueber und unter der Navigationszeile des Lockups — der
   Kopf eines Programmhefts (dkn „Klassisch“: border-y line-strong,
   Eintraege 14px/24px Luft). */
/* Drei Klassen, damit die Linien die aeltere Lockup-Regel (drei Klassen,
   55 % Rahmen) schlagen — gemessen 2026-09-15: die blasse Linie blieb. */
.cms-navbar--lockup.cms-navbar--nav-linien.cms-navbar--bp-lg .cms-navbar__nav{border-top:1px solid var(--color-line-strong,var(--_border));border-bottom:1px solid var(--color-line-strong,var(--_border));padding-block:0;gap:0;margin-top:1rem}
.cms-navbar--lockup.cms-navbar--nav-linien.cms-navbar--bp-lg .cms-navbar__item{padding:.875rem 1.5rem}
/* …und im Lockup gilt die winzige Versalzeile auch: 11,5px wie dkn. */
.cms-navbar--lockup.cms-navbar--mini .cms-navbar__item{font-size:.72rem}
/* Auf dunklem Grund traegt die Leitfarbe oft nicht — dort markiert die
   Schrift selbst, der Strich nimmt die Akzentfarbe. */
/* Die aktive Seite traegt die MARKENFARBE, auch auf dunklem Grund: die
   Referenz hebt sie in ihrem Salbei hervor, nicht im Bernstein des
   Kickers (Tims Befund 2026-09-14 — gemessen #93a8ad, also `primary`).
   Der Akzent bleibt der Dachzeile und den Zierlinien. */
.cms-navbar--dark .cms-navbar__item--active{color:var(--_primary)}
.cms-navbar--dark .cms-navbar__item--active::after{background:var(--_primary)}
.cms-navbar__item::after{content:"";position:absolute;left:0;right:100%;bottom:-.1rem;height:2px;border-radius:2px;background:var(--_primary);transition:right .22s cubic-bezier(.22,1,.36,1)}
.cms-navbar__item:hover{color:var(--_primary);text-decoration:none}
/* Der Balken gehoert dem AKTUELLEN Punkt. Beim Ueberfahren wechselt nur
   die Schriftfarbe — sonst sieht jeder ueberfahrene Punkt aus wie der
   aktuelle und die Auszeichnung sagt nichts mehr. */
.cms-navbar__item:hover{color:var(--_primary)}
.cms-navbar__item--has-children{position:relative}
/* color:inherit is load-bearing: this anchor carries no __item class, so
   it fell through to the global a{color:primary} — every dropdown parent
   rendered accent-colored, reading as a stuck "active" nav state. */
.cms-navbar__item--has-children>a{display:inline-flex;align-items:center;gap:.25rem;cursor:pointer;color:inherit;text-decoration:none}
.cms-navbar__caret{font-size:.7em;opacity:.7}
.cms-navbar__dropdown{position:absolute;top:100%;left:0;min-width:13rem;background:var(--_bg);color:var(--_fg);border:1px solid color-mix(in srgb,var(--_border) 80%,transparent);border-radius:var(--_radius-lg);box-shadow:var(--_shadow-md);padding:.45rem;display:none;flex-direction:column;z-index:60}
.cms-navbar__dropdown a{padding:.55rem .8rem;border-radius:calc(var(--_radius) - .25rem);color:inherit;text-decoration:none;font-weight:500;font-size:.93rem}
.cms-navbar__dropdown a:hover{background:var(--_surface);text-decoration:none}
.cms-navbar__item--has-children:hover .cms-navbar__dropdown,.cms-navbar__item--has-children:focus-within .cms-navbar__dropdown{display:flex}
.cms-navbar__toggle,.cms-navbar__burger{display:none}

/* ── Mega panel (multi-column dropdown) ──────────────────────────────
   CSS-only like the simple dropdown: hover + :focus-within, so the
   published page, the preview iframe and the editor canvas behave the
   same without a runtime. The panel spans the bar's full width and is
   anchored to the header, not the item. */
.cms-navbar__inner{position:relative}
/* The trigger must reach DOWN to where the panel starts, otherwise
   the bar's own .85rem padding is dead space: the pointer leaves
   the item there, :hover drops and the panel closes before it can
   be entered. Padding extends the hit box to the bar edges; the
   negative margin keeps the layout identical. */
.cms-navbar__nav{align-self:stretch}
.cms-navbar__item--has-panel{position:static;align-self:stretch;display:flex;align-items:center;padding-block:.85rem;margin-block:-.85rem}
.cms-navbar__item--has-panel>a{display:inline-flex;align-items:center;gap:.25rem;cursor:pointer;color:inherit;text-decoration:none}
/* NO gap between bar and panel: the panel opens purely on :hover /
   :focus-within, so any dead space below the trigger drops the
   hover chain before the pointer reaches the panel — and a bridge
   pseudo-element on the panel cannot help, because a display:none
   element is not hit-testable. Flush at top:100%; the border,
   radius and shadow carry the separation visually. */
.cms-navbar__panel{position:absolute;left:0;right:0;top:100%;background:var(--_bg);color:var(--_fg);border:1px solid color-mix(in srgb,var(--_border) 80%,transparent);border-radius:var(--_radius-xl);box-shadow:var(--_shadow-md);padding:1.25rem;display:none;z-index:60}
.cms-navbar__item--has-panel:hover .cms-navbar__panel,.cms-navbar__item--has-panel:focus-within .cms-navbar__panel{display:block}
/* The hover underline is an absolutely positioned ::after. On a
   position:static wrapper it resolves against .cms-navbar__inner
   instead of the trigger and painted a 1248px bar across the whole
   navbar. Move it onto the anchor, which is the visual target
   anyway; the wrapper keeps only the hover corridor. */
.cms-navbar__item--has-panel::after{content:none}
.cms-navbar__item--has-panel>a{position:relative}
.cms-navbar__item--has-panel>a::after{content:"";position:absolute;left:0;right:100%;bottom:-.1rem;height:2px;border-radius:2px;background:var(--_primary);transition:right .22s cubic-bezier(.22,1,.36,1)}
.cms-navbar__item--has-panel:hover>a::after{right:0}
/* Flex, not auto-fit grid: with three groups an auto-fit grid spread
   them across five tracks and left two dead columns. Columns pack
   from the left, share width evenly and cap so a long list stays
   readable. */
.cms-navbar__panel-inner{display:flex;flex-wrap:wrap;gap:.35rem 2rem;align-items:flex-start}
.cms-navbar__panel-col{flex:1 1 12rem;max-width:20rem}
.cms-navbar__panel-col{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.cms-navbar__panel-head{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-ink-3,var(--_muted));padding:.35rem .6rem;text-decoration:none}
a.cms-navbar__panel-head:hover{color:var(--_fg)}
.cms-navbar__panel-col>a,.cms-navbar__dropdown a{display:block;padding:.45rem .6rem;border-radius:var(--_radius);color:inherit;text-decoration:none}
.cms-navbar__panel-col>a:hover,.cms-navbar__dropdown a:hover{background:var(--_surface);text-decoration:none}
.cms-navbar__panel-label{display:block;font-size:.92rem;font-weight:600;line-height:1.3}
.cms-navbar__panel-desc{display:block;font-size:.78rem;line-height:1.35;color:var(--_muted);margin-top:.05rem}
.cms-navbar__panel-footer{margin-top:.85rem;padding-top:.7rem;border-top:1px solid color-mix(in srgb,var(--_border) 70%,transparent)}
.cms-navbar__panel-footer a{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .6rem;border-radius:var(--_radius);color:var(--_primary);font-weight:600;font-size:.9rem;text-decoration:none}
.cms-navbar__panel-footer a:hover{background:var(--_surface)}
/* Right-hand actions */
.cms-navbar__actions{display:flex;align-items:center;gap:.5rem;margin-left:.75rem}
/* Die Navigation steht in der MITTE der Seite, die Aktionen rechts -
   so baut die Referenz ihre Leiste. Bei uns schob `margin-left:auto`
   die ganze Navigation samt Knopf an den rechten Rand (Tims Befund
   2026-09-15). Das Raster legt die Marke in die erste, die Navigation
   in die mittlere Spur; die Aktionen liegen darueber am rechten Rand,
   damit die dritte Spur die Mitte nicht verschiebt. */
@media(min-width:768px){
.cms-navbar--mitte .cms-navbar__inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.cms-navbar--mitte .cms-navbar__nav{margin-left:0;grid-column:2}
.cms-navbar--mitte .cms-navbar__actions{position:absolute;right:1.25rem;top:50%;transform:translateY(-50%);margin-left:0}
}
.cms-navbar__cta{font-size:.9rem;padding:.5rem .95rem}

@media(max-width:768px){
  /* Mobile drawer: panels flatten into grouped sections, the sheet
     scrolls, and the actions sit at the bottom as full-width buttons. */
  .cms-navbar__nav{max-height:calc(100dvh - 4.5rem);overflow-y:auto;padding-bottom:.9rem}
  .cms-navbar__nav{align-self:auto}
  .cms-navbar__item--has-panel{position:relative;display:block;padding-block:0;margin-block:0}
  .cms-navbar__panel{position:static;display:block;box-shadow:none;border:0;border-radius:0;padding:.15rem 0 .35rem 1rem;background:none}
  .cms-navbar__panel-inner{flex-direction:column;gap:.15rem}
  .cms-navbar__panel-col{flex:1 1 auto;max-width:none}
  .cms-navbar__panel-head{padding-left:0}
  .cms-navbar__panel-desc{display:none}
  .cms-navbar__caret{display:none}
  .cms-navbar__panel-footer{margin-top:.35rem;padding-top:.35rem}
  .cms-navbar__actions{margin:.8rem 0 0;flex-direction:column;align-items:stretch;gap:.5rem}
  .cms-navbar__cta{display:flex;width:100%;justify-content:center;text-align:center;padding:.7rem 1rem}

  .cms-navbar__topbar{display:none}
  .cms-navbar__burger{display:block;margin-left:auto;font-size:1.5rem;cursor:pointer;line-height:1}
  /* flex-wrap is load-bearing: without it the width:100%/order:3 nav
     cannot wrap below the brand row — the open menu rendered as a
     squeezed right-hand column beside a stretched logo. */
  .cms-navbar__inner{flex-wrap:wrap}
  .cms-navbar__nav{display:none;flex-direction:column;align-items:stretch;gap:.1rem;width:100%;order:3;margin:.65rem 0 0;padding-top:.65rem;border-top:1px solid color-mix(in srgb,var(--_border) 70%,transparent)}
  .cms-navbar__nav .cms-navbar__item{width:100%}
  .cms-navbar__nav a{display:block;padding:.45rem 0}
  .cms-navbar__toggle:checked~.cms-navbar__nav{display:flex}
  .cms-navbar__dropdown{position:static;display:flex;box-shadow:none;border:0;padding-left:1rem}
  /* Long German compounds ("Universalschlichtungsstelle") overflowed the
     viewport in headings on narrow screens. */
  h1,h2,h3,h4{overflow-wrap:break-word;hyphens:auto}
  /* Tab labels wrapped into ragged multi-line rows on phones — swipeable
     single-line strip instead. */
  .cms-tabs__nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .cms-tabs__nav::-webkit-scrollbar{display:none}
  .cms-tabs__label{white-space:nowrap}
  /* Carousels: one slide per view, swipe-first (arrows hidden). */
  .cms-carousel{--pv:1!important}
  .cms-carousel__arrow{display:none}
}


/* K4 — keyboard: visible focus on nav targets (mirrors .btn:focus-visible). */
.cms-navbar__item:focus-visible,.cms-navbar__brand:focus-visible,.cms-navbar__dropdown a:focus-visible{outline:3px solid color-mix(in srgb,var(--_primary) 35%,transparent);outline-offset:2px;border-radius:.25rem}

/* K4 — keyboard a11y: the burger's checkbox was display:none, so the
   mobile menu had NO tab stop at all. Mobile-only: make the input an
   invisible focusable control and ring its label. */
@media(max-width:768px){.cms-navbar__toggle{display:block;position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}.cms-navbar__toggle:focus-visible+.cms-navbar__burger{outline:3px solid color-mix(in srgb,var(--_primary) 35%,transparent);outline-offset:2px;border-radius:.25rem}}
/* ── Footer ── */
/* 3.5rem bottom: keeps the fixed "Cookie-Einstellungen" chip clear of
   the last footer line on short pages. */
.cms-footer{width:100%;padding:clamp(3rem,6vw,4.5rem) 1.25rem 3.5rem}
/* Der seitliche Einzug gehoert in die Innenbehaelter, NICHT an die
   vollflaechige Huelle: das Breitenmodell setzt `padding-inline:0` auf
   `.cms-main>:is(...,.cms-footer,...)` (Spezifitaet 0,2,0) und schlug damit
   jeden Einzug an `.cms-footer` (0,1,0). Auf der veroeffentlichten Seite
   steht die Fusszeile AUSSERHALB von `.cms-main` und behielt ihn — in der
   Vorschau (body IST `.cms-main`) klebte sie am Rand. 1.25rem ist der
   Einzug der eigenstaendigen Rasterbloecke, die Fusszeile flieht damit
   mit den Abschnitten darueber. */
.cms-footer--dark{background:var(--color-footer-bg,#1c1917);color:var(--color-footer-fg,#d6d3d1)}
.cms-footer--light{background:var(--_surface);color:var(--_fg);border-top:1px solid var(--_border)}
/* Brand column sits INSIDE the grid and is wider than the link
   columns (the reference anatomy: identity left, links right). */
.cms-footer__inner{max-width:var(--_container);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2.25rem;align-items:start}
.cms-footer__brand{grid-column:span 1;display:flex;flex-direction:column;gap:.85rem;min-width:0}
/* Oberhalb von 900px folgen die Spuren dem INHALT: der Renderer zaehlt
   Marken- und Inhaltsspalten und gibt beides mit. `auto-fit` legte
   vorher so viele 180px-Spuren an, wie in die Breite passen — bei zwei
   Inhaltsspalten nahm die Marke zwei davon und die uebrigen quetschten
   sich (Tims Befund 2026-09-13 im Einzelbetrieb). */
@media(min-width:900px){.cms-footer__inner[style*="--cols"]{grid-template-columns:repeat(var(--cols),minmax(0,1fr))}
.cms-footer__brand{grid-column:span var(--brand-span,2);max-width:26rem}}
.cms-footer__blurb{margin:0;font-size:.92rem;line-height:1.65;opacity:.78;max-width:34ch}
/* Der CLAIM der Markenspalte: gross in der Anzeigeschrift, eng
   gesetzt, Zeilenumbrueche bleiben Zeilen (Referenz: 2.4rem auf
   Zeilenhoehe 1.05, dreizeilig). */
.cms-footer__claim{margin:0;font-family:var(--font-heading,inherit);font-size:2.4rem;line-height:1.05;font-weight:var(--display-weight,400);letter-spacing:var(--display-tracking,-.01em)}
.cms-footer__claim+.cms-footer__blurb{margin-top:.75rem}
/* Die STILLE Fassung der Spalten: der Titel ist keine Ueberschrift
   mehr, sondern eine kleine Versalzeile in der Grundschrift — und
   die Zeiten stehen untereinander statt Tag links / Uhrzeit rechts.
   Drei der vier Referenz-Entwuerfe setzen ihre Fusszeile so. */
.cms-footer--spalten-still .cms-footer__title{font-family:var(--font-sans,ui-sans-serif,system-ui,sans-serif);font-size:.7rem;font-weight:400;letter-spacing:.18em;opacity:1;color:var(--color-ink-3,var(--_muted));margin-bottom:1rem}
.cms-footer--spalten-still .cms-footer__hours-row{display:block;padding:0;border-bottom:0}
.cms-footer--spalten-still .cms-footer__hours-row+.cms-footer__hours-row{margin-top:.5rem}
.cms-footer--spalten-still .cms-footer__hours-row dt{opacity:1}
.cms-footer--spalten-still .cms-footer__hours-row dd{font-weight:400;opacity:.78}
/* Der dunkle Entwurf setzt Claim und Spaltentitel in die
   MARKENFARBE und stapelt die Zeiten — und legt eine auslaufende
   Linie ueber die ganze Fusszeile. */
.cms-footer__claim--marke{color:var(--_primary);font-size:2rem}
.cms-footer--spalten-marke .cms-footer__title{font-family:var(--font-heading,inherit);font-size:1rem;font-weight:400;letter-spacing:.14em;text-transform:none;opacity:1;color:var(--_primary);margin-bottom:1rem}
.cms-footer--spalten-marke .cms-footer__hours-row{display:block;padding:0;border-bottom:0}
.cms-footer--spalten-marke .cms-footer__hours-row+.cms-footer__hours-row{margin-top:.5rem}
.cms-footer--spalten-marke .cms-footer__hours-row dt{opacity:1}
.cms-footer--spalten-marke .cms-footer__hours-row dd{font-weight:400;opacity:.78}
.cms-footer{position:relative}
.cms-footer__toprule{position:absolute;inset-inline:0;top:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--_primary),transparent)}
/* …und unter dem Glanz eine feste Linie in der starken Rahmenfarbe:
   so schliesst die Referenz ihren dunklen Entwurf ab (border-t
   line-strong PLUS der Verlauf). `topRule: linie`. */
.cms-footer--linie{border-top:1px solid var(--color-line-strong,var(--_primary))}
/* Nur die feste Kante, ohne Glanz — die helle Orchester-Referenz. */
.cms-footer--kante{border-top:1px solid var(--color-line-strong,var(--_border))}
/* Die Fusszeile als Karte: gerundete Flaeche mit Abstand zum Seitenrand
   (dkn „Tutti“, 2026-09-15: Radius 28px, 56px/48px Luft, 20px Rand). */
.cms-footer--karte{width:auto;margin:0 1.25rem 1.25rem;border-radius:var(--_radius-xl,1.75rem);padding:3.5rem 3rem}
.cms-footer__claim--kursiv{font-style:italic}
/* Der Claim in der AKZENTfarbe: auf der dunklen Karte der Tutti-Referenz
   steht er in Gold, waehrend die Markenfarbe dort die Kartenflaeche IST
   (gemessen 2026-09-15: Claim rgb(43,42,38) auf rgb(43,42,38) — unsichtbar). */
.cms-footer__claim--akzent{color:var(--_accent)}
/* Der Claim folgt der Schreibweise der Anzeigeschrift des Themes:
   Versalien in „Kupfer & Nacht“, unveraendert, wo das Theme keine
   setzt. */
.cms-footer__claim--marke{text-transform:var(--display-case,none)}
/* Die Kupfer-Fusszeile, gemessen 2026-09-15 (Tims Befund „footer misses
   logo“): Signet 92px ueber dem Claim, Raster 1.3fr + 1fr je Spalte mit
   48px Fuge und 80px Luft, Spaltentitel in Gewicht, Laufweite und
   Schreibweise der Anzeigeschrift, Text 14,4px, und die Schlusszeile
   als 12px-Zeile in ink-3 mit 9,9px-Versallinks. */
.cms-footer--spalten-marke{padding-top:5rem;padding-bottom:0}
.cms-footer--spalten-marke .cms-footer__inner{grid-template-columns:1.3fr repeat(calc(var(--cols) - 1),1fr);gap:3rem}
.cms-footer--spalten-marke .cms-footer__logo{height:5.75rem;margin-bottom:.65rem}
.cms-footer--spalten-marke .cms-footer__title{font-weight:var(--display-weight,400);letter-spacing:var(--display-tracking,.14em);text-transform:var(--display-case,none)}
.cms-footer--spalten-marke .cms-footer__blurb{font-size:.9rem;margin-top:1rem;max-width:20rem}
.cms-footer--spalten-marke :is(.cms-footer__text,.cms-footer__link,.cms-footer__hours){font-size:.9rem;line-height:1.625}
.cms-footer--spalten-marke .cms-footer__note{margin-top:5rem;padding-block:1.75rem;border-top-color:var(--_border);font-size:.75rem;opacity:1;color:var(--color-ink-3,var(--_muted))}
.cms-footer--spalten-marke .cms-footer__note-links{gap:.4rem 1.5rem}
.cms-footer--spalten-marke .cms-footer__note-link{font-size:.62rem;letter-spacing:var(--nav-tracking,.18em);text-transform:uppercase;opacity:1}
.cms-footer__title{margin:0 0 .85rem;font-family:var(--font-heading,inherit);font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
/* Zwei Reihen: die Referenz setzt die Spaltentitel dort als NAMEN —
   gross, in der Ueberschriftenschrift, ohne Versalien. Als 13-Pixel-
   Versalzeile lasen sie sich wie Formularbeschriftungen (Tims Befund
   2026-09-14 am Fuss der dunklen Richtung). */
.cms-footer--two-row .cms-footer__title{font-size:clamp(1.2rem,2.2vw,1.55rem);font-weight:500;letter-spacing:0;text-transform:none;opacity:1;margin-bottom:1.15rem}
.cms-footer__text{margin:0 0 .5rem;line-height:1.75;opacity:.85;font-size:.95rem}
.cms-footer__hours{margin:0 0 .5rem;font-size:.95rem}
/* Die Zeile bricht, statt sich zu quetschen: Wochentag und Uhrzeit
   passen in einer schmalen Spalte nicht nebeneinander, und ein
   Umbruch MITTEN im Wochentag ist schlimmer als zwei Zeilen (Tims
   Befund 2026-09-13). */
.cms-footer__hours-row{display:flex;justify-content:space-between;gap:.35rem 1rem;padding:.18rem 0;flex-wrap:wrap}
/* In der zweireihigen Fusszeile ist die Zeitentabelle eine TABELLE:
   die Referenz zieht unter jede Zeile eine Haarlinie, damit Tag und
   Uhrzeit ueber die Spaltenbreite zusammenfinden. */
.cms-footer--two-row .cms-footer__hours-row{padding:.5rem 0;border-bottom:1px solid color-mix(in srgb,currentColor 14%,transparent)}
.cms-footer--two-row .cms-footer__hours-row:last-child{border-bottom:0}
.cms-footer__hours-row dt,.cms-footer__hours-row dd{white-space:nowrap}
.cms-footer__hours-row dt{margin:0;font-weight:400;opacity:.75}
.cms-footer__hours-row dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.cms-footer__link{display:block;color:inherit;text-decoration:none;opacity:.82;padding:.22rem 0;font-size:.95rem;transition:opacity .15s,color .15s}
.cms-footer__link:hover{opacity:1;color:var(--_primary);text-decoration:none}
.cms-footer__note{max-width:var(--_container);margin:2.75rem auto 0;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12);font-size:.84rem;opacity:.55;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;align-items:center}
.cms-footer__note-right{opacity:.85}
/* Die Link-Reihe der Schlusszeile sitzt rechts und bricht bei Bedarf um.
   `margin-left:auto` nur beim ERSTEN Kind — sonst schoebe jeder Link
   den naechsten ans Ende. */
.cms-footer__note-links{margin-left:auto;display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;justify-content:flex-end}
.cms-footer__note-link{color:inherit;text-decoration:none;opacity:.85;font-size:.84rem;transition:opacity .15s,color .15s}
.cms-footer__note-link:hover{opacity:1;color:var(--_primary);text-decoration:none}
.cms-footer__note-link:focus-visible{outline:3px solid color-mix(in srgb,var(--_primary) 35%,transparent);outline-offset:2px;border-radius:.25rem}
.cms-footer--light .cms-footer__note{border-top-color:var(--_border)}
.cms-footer__logo{height:44px;width:auto;align-self:flex-start;object-fit:contain}


/* K4 — keyboard: footer links get the same focus language. */
.cms-footer__link:focus-visible{outline:3px solid color-mix(in srgb,var(--_primary) 35%,transparent);outline-offset:2px;border-radius:.25rem}
/* ── Testimonials ── */
/* .acourse-testimonial* stay as alias classes: the old renderer
   documented them as the tenant-customCss override hook. */
.cms-testimonials--single{max-width:46rem;margin-inline:auto}
.cms-testimonials--list{display:flex;flex-direction:column;gap:1.1rem}
.cms-testimonials--grid{display:grid;gap:1.25rem;grid-template-columns:1fr}
.cms-testimonials--carousel{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem}
.cms-testimonials__slide{width:min(100%,420px);flex-shrink:0;scroll-snap-align:start}
.cms-testimonial{height:100%;display:flex;flex-direction:column;gap:.8rem;padding:var(--space-card,1.5rem);background:var(--_card);border:1px solid color-mix(in srgb,var(--_border) 80%,transparent);border-radius:var(--_radius-lg);box-shadow:var(--_shadow-sm)}
.cms-testimonial__stars{color:#f59e0b;font-size:.9rem;margin:0;letter-spacing:.1em}
.cms-testimonial__stars .is-empty{color:color-mix(in srgb,var(--_fg) 18%,transparent)}
.cms-testimonial__mark{width:1.5rem;height:1.5rem;color:color-mix(in srgb,var(--_primary) 35%,transparent);flex-shrink:0}
.cms-testimonial__quote{flex:1;margin:0;font-size:.95rem;line-height:1.65;color:color-mix(in srgb,var(--_fg) 88%,transparent)}
.cms-testimonial__author{display:flex;align-items:center;gap:.75rem;margin-top:.4rem}
.cms-testimonial__avatar{width:2.4rem;height:2.4rem;border-radius:999px;object-fit:cover}
.cms-testimonial__initials{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border-radius:999px;background:color-mix(in srgb,var(--_primary) 14%,transparent);color:var(--_primary);font-size:.78rem;font-weight:600}
.cms-testimonial__name{font-size:.9rem;font-weight:600;line-height:1.25;margin:0}
.cms-testimonial__role{font-size:.78rem;line-height:1.25;color:var(--color-ink-3,var(--_muted));margin:0}
@media(min-width:640px){.cms-testimonials--grid{grid-template-columns:repeat(2,1fr)}.cms-testimonials__slide{width:45%}}
@media(min-width:1024px){.cms-testimonials--grid{grid-template-columns:repeat(3,1fr)}.cms-testimonials__slide{width:33%}}

/* ── Columns ── */
.cms-columns{display:flex;flex-wrap:wrap;gap:var(--col-gap,1.5rem);align-items:var(--col-valign,flex-start)}
/* Eine Haarlinie ZWISCHEN den Spalten: sie haengt an jeder Spalte
   ausser der ersten und bekommt denselben Abstand wie die Luecke,
   damit der Text nicht an ihr klebt. Auf dem Telefon stapeln die
   Spalten — dann trennt die Linie nach OBEN statt zur Seite. */
.cms-columns--divided>.cms-column+.cms-column{border-left:1px solid color-mix(in srgb,var(--_border) 85%,transparent);padding-left:var(--col-gap,1.5rem)}
/* Die Luecke SELBST ist die Linie: die Reihe traegt die Rahmenfarbe,
   die Kacheln stehen auf dem Seitengrund, dazwischen bleibt 1px
   stehen. Die Referenz baut ihre zwei Haeuser so (Abschnitt 06) -
   ein Rahmen um jede Kachel waere eine doppelte Linie. */
.cms-columns--fuge{background:var(--_border)}
.cms-columns--fuge>.cms-column{background:var(--_bg);padding:clamp(1.5rem,3vw,3rem)}
/* EINE Kachel ist keine Fuge: steht nur eine Spalte da
   (Einzelbetrieb), traegt die Reihe ihre Rahmenfarbe links und
   rechts NEBEN der gedeckelten Kachel — zwei graue Kaesten um ein
   Haus (Tims Befund 2026-09-15). Ohne zweite Kachel gibt es nichts
   zu trennen: kein Grund und kein Einzug. Sie steht MITTIG wie
   jede einzelne Spalte (Tims Ansage 2026-09-15). */
.cms-columns--fuge:has(>.cms-column:first-child:last-child){background:none}
.cms-columns--fuge>.cms-column:first-child:last-child{padding:0}
@media(max-width:768px){.cms-columns--divided>.cms-column+.cms-column{border-left:0;padding-left:0;border-top:1px solid color-mix(in srgb,var(--_border) 85%,transparent);padding-top:var(--col-gap,1.5rem)}}
.cms-column{flex:1 1 0;min-width:220px}
/* Ungleiche Spalten: die Referenz teilt ihre Abschnitte 7:4 (Text
   links, Hervorhebungen rechts) oder 5:7 (Titel links, Liste
   rechts). Halb und halb gab der schmalen Spalte zu viel Platz —
   ihre Haarlinien liefen weit ueber den eigenen Text hinaus (Tims
   Befund 2026-09-15). Die Anteile gelten den ERSTEN ZWEI Spalten;
   weitere bleiben gleich breit, und auf dem Telefon stapelt die
   Reihe ohnehin (min-width an der Spalte). */
.cms-columns--weit-schmal>.cms-column:first-child{flex-grow:7}
.cms-columns--weit-schmal>.cms-column:nth-child(2){flex-grow:4}
.cms-columns--schmal-weit>.cms-column:first-child{flex-grow:5}
.cms-columns--schmal-weit>.cms-column:nth-child(2){flex-grow:7}
/* 7 : 5 — der Seitenkopf der dunkel-kupfernen Referenz (1.4fr 1fr). */
.cms-columns--sieben-fuenf>.cms-column:first-child{flex-grow:7}
.cms-columns--sieben-fuenf>.cms-column:nth-child(2){flex-grow:5}
/* Eine Kachel fuellt ihre Spalte. Steht in einer Spalte NUR ein
   Abschnitt, ist er die Kachel — ohne diese Zeile endete seine
   Flaeche dort, wo sein Text endet, und zwei Kacheln nebeneinander
   hoerten auf verschiedenen Hoehen auf (Tims Befund 2026-09-14 an
   den Karten-Kacheln). `stretch` an der Spaltengruppe macht die
   SPALTEN gleich hoch, nicht ihren Inhalt. */
.cms-column>.cms-section:only-child{height:100%}
/* Ein SIEGEL ist keine halbe Seite: steht es allein in einer Spalte,
   nimmt die Spalte nur seine Breite. Sonst teilt sich der Stoerer die
   Reihe mit dem Text, und die Ueberschrift daneben bricht um (Tims
   Befund 2026-09-14 am Abschnitt der zwei Haeuser). */
.cms-columns>.cms-column:has(>.cms-seal:only-child){flex:0 0 auto}

/* ── Alternating image/text ── */
.alt-image-text{padding:clamp(2rem,5vw,4rem) 0}

/* ── Pricing table ── */
.cms-pricing{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:var(--space-grid,1.5rem);align-items:stretch}
.cms-pricing__plan{position:relative;display:flex;flex-direction:column;padding:1.9rem;border-radius:var(--_radius-xl);background:var(--_card);border:1px solid color-mix(in srgb,var(--_border) 80%,transparent);box-shadow:var(--_shadow-sm)}
/* Wie die Kontaktkarte: in einem dunklen Abschnitt behaelt die Plan-Karte ihre eigene Tinte (Vorlagen-Audit 2026-09-30, Buchhaltung Pricing auf Slate). */
.cms-section--on-dark .cms-pricing__plan{color:var(--_fg)}
.cms-pricing__plan--highlighted{border-color:color-mix(in srgb,var(--_primary) 45%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--_primary) 35%,transparent),var(--_shadow-md)}
.cms-pricing__badge{position:absolute;top:-.8rem;left:50%;transform:translateX(-50%);background:var(--_primary);color:var(--_on-primary);font-size:.72rem;font-weight:700;letter-spacing:.04em;padding:.3rem .8rem;border-radius:999px;white-space:nowrap}
.cms-pricing__name{margin:0 0 .2rem;font-size:1.05rem;color:var(--_primary)}
.cms-pricing__desc{margin:0 0 .6rem;font-size:.88rem;color:var(--_muted)}
.cms-pricing__price{font-family:var(--font-heading,inherit);font-size:2.3rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:.4rem 0 .9rem}
.cms-pricing__period{font-size:.85rem;font-weight:500;color:var(--color-ink-3,var(--_muted));letter-spacing:0}
.cms-pricing__features{list-style:none;margin:0 0 1.4rem;padding:0;flex:1}
.cms-pricing__features li{padding:.34rem 0 .34rem 1.5rem;position:relative;font-size:.92rem;margin:0}
.cms-pricing__features li::before{content:"";position:absolute;left:0;top:.72rem;width:.6rem;height:.32rem;border-left:2px solid var(--_primary);border-bottom:2px solid var(--_primary);transform:rotate(-45deg)}
.cms-pricing__cta{width:100%}
@media(min-width:1024px){.cms-pricing__plan--highlighted{transform:translateY(-6px)}}

/* ── Team ── */
.cms-team{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:var(--space-grid,1.5rem);text-align:center}
/* object-position biases toward the top of the photo — center-cropping
   portrait stock regularly decapitates subjects on card aspect ratios. */
.cms-team__photo{width:7rem;height:7rem;border-radius:999px;object-fit:cover;object-position:50% 30%;margin:0 auto 1rem;box-shadow:var(--_shadow-sm)}
.cms-team__photo--empty{display:flex;align-items:center;justify-content:center;background:linear-gradient(165deg,color-mix(in srgb,var(--_primary) 16%,var(--_surface-alt)),color-mix(in srgb,var(--_primary) 6%,var(--_surface-alt)));color:var(--_primary);font-size:1.6rem;font-weight:700}
.cms-team__name{margin:0;font-weight:700}
.cms-team__role{margin:.15rem 0 0;font-size:.88rem;color:var(--_primary)}
.cms-team__bio{margin:.5rem 0 0;font-size:.88rem;color:var(--_muted);line-height:1.55}
/* 'portrait' variant — 3/4 photo-card look (doctor-card style). */
.cms-team--portrait{text-align:left}
.cms-team--portrait .cms-team__member{background:var(--_card);border:1px solid color-mix(in srgb,var(--_border) 80%,transparent);border-radius:var(--_radius-lg);overflow:hidden;box-shadow:var(--_shadow-sm);padding-bottom:1.25rem}
.cms-team--portrait .cms-team__photo{width:100%;height:auto;aspect-ratio:3/4;border-radius:0;margin:0;object-fit:cover;object-position:50% 25%;box-shadow:none}
.cms-team--portrait .cms-team__photo--empty{aspect-ratio:3/4;font-size:1.5rem;letter-spacing:.02em;background:radial-gradient(circle 2.75rem at 50% 50%,color-mix(in srgb,var(--_primary) 15%,transparent) 0 99%,transparent 100%),linear-gradient(165deg,color-mix(in srgb,var(--_primary) 13%,var(--_surface-alt)),color-mix(in srgb,var(--_primary) 4%,var(--_surface-alt)))}
.cms-team--portrait .cms-team__name{margin:1rem 1.25rem 0;font-size:1.05rem}
.cms-team--portrait .cms-team__role{margin:.15rem 1.25rem 0;color:var(--_muted)}
.cms-team--portrait .cms-team__bio{margin:.55rem 1.25rem 0}
/* Fotos OHNE Karte — die Fassung der Referenz. Die Karte legt um
   jedes Portraet einen zweiten Rahmen, den das Foto schon hat, und
   schiebt Name und Text hinter eine Flaeche (Tims Befund
   2026-09-14: die Karten sind voellig andere). Erbt alles
   von `--portrait` und nimmt nur die Karte weg. */
.cms-team--plain .cms-team__member{background:none;border:0;border-radius:0;box-shadow:none;padding-bottom:0;overflow:visible}
.cms-team--plain .cms-team__photo{aspect-ratio:4/5;border:1px solid color-mix(in srgb,var(--_border) 80%,transparent)}
.cms-team--plain .cms-team__name{margin:1rem 0 0;font-family:var(--font-heading,inherit);font-size:1.2rem;font-weight:var(--display-weight,700)}
.cms-team--plain .cms-team__role{margin:.3rem 0 0;font-size:.6rem;font-weight:600;letter-spacing:var(--nav-tracking,.1em);text-transform:uppercase;color:var(--color-kicker,var(--_accent))}
.cms-team--plain .cms-team__bio{margin:.7rem 0 0;font-size:.9rem;line-height:1.7}
/* 'slider' variant (Referenz guestvision) — Snap-Slider aus grossen
   3/4-Foto-Karten: Foto fuellt die Karte, unten dunkler Verlauf mit
   Name (hell) und Rolle (Akzent). Shell/Pfeile kommen vom Karussell. */
.cms-team--slider{display:block}
.cms-team__slide{position:relative;aspect-ratio:3/4;border-radius:var(--_radius-xl);overflow:hidden;background:var(--_surface-alt)}
.cms-team__slide-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.cms-team__slide-img--empty{display:flex;align-items:center;justify-content:center;background:linear-gradient(165deg,color-mix(in srgb,var(--_primary) 20%,var(--_surface-alt)),color-mix(in srgb,var(--_primary) 6%,var(--_surface-alt)));color:var(--_primary);font-size:2.4rem;font-weight:700}
.cms-team__slide-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,14,.82) 0%,rgba(10,10,14,.35) 34%,transparent 60%);pointer-events:none}
.cms-team__slide-body{position:absolute;inset-inline:0;bottom:0;padding:1.2rem 1.3rem;color:#fff}
.cms-team__slide-name{margin:0;font-weight:700;font-size:1.05rem;border-top:1px solid rgba(255,255,255,.25);padding-top:.85rem}
.cms-team__slide-role{margin:.15rem 0 0;font-size:.88rem;color:color-mix(in srgb,var(--_accent) 85%,#fff)}

/* ── Logo wall ── */
.cms-logo-wall__title{text-align:center;font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-ink-3,var(--_muted));margin:0 0 1.4rem}
.cms-logo-wall__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2.5rem 3rem}
.cms-logo-wall__item img{height:2.4rem;width:auto;max-width:9rem;object-fit:contain;display:block}
.cms-logo-wall__wortmarke{display:block;font-family:var(--font-heading,inherit);font-size:1.05rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:2.4rem;white-space:nowrap;color:var(--color-ink-3,var(--_muted));transition:color .25s ease}
.cms-logo-wall__item:hover .cms-logo-wall__wortmarke{color:var(--_fg)}
.cms-logo-wall--gray .cms-logo-wall__item img{filter:grayscale(1);opacity:.6;transition:filter .2s,opacity .2s}
.cms-logo-wall--gray .cms-logo-wall__item:hover img{filter:none;opacity:1}

/* ── Timeline ── */
.cms-timeline{list-style:none;margin:0;padding:0;max-width:44rem;margin-inline:auto}
.cms-timeline__step{display:flex;gap:1.25rem;position:relative;padding-bottom:2rem;margin:0}
.cms-timeline__step:not(:last-child)::before{content:"";position:absolute;left:1.24rem;top:2.7rem;bottom:.3rem;width:2px;background:color-mix(in srgb,var(--_primary) 25%,transparent)}
.cms-timeline__dot{flex:none;width:2.5rem;height:2.5rem;border-radius:999px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--_primary) 12%,transparent);color:var(--_primary);font-weight:700;font-size:.95rem;border:1px solid color-mix(in srgb,var(--_primary) 28%,transparent)}
.cms-timeline__title{margin:.35rem 0 .3rem;font-size:1.1rem}
.cms-timeline__text{margin:0;color:var(--_muted);line-height:1.6}
/* Desktop: process steps flow as a filled row of numbered columns
   instead of a narrow left/centered vertical list that left the
   section looking half-empty. Reverts to the vertical rail on mobile. */
@media(min-width:768px){
  .cms-timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:2.25rem 1.75rem;max-width:none}
/* Chronik-Karten: dieselben Schritte, aber als Raster mit grosser
   Jahreszahl in einer Karte mit Haarlinie. Die Schiene draengt jedes
   Label in einen Kreis von 2.5rem — ein Wort wie 'Heute' passt dort
   nicht hinein (Tims Befund 2026-09-14). Der Punkt wird hier wieder
   zur ZAHL: kein Kreis, keine Flaeche, Ueberschriftenschrift in der
   Akzentfarbe. */
.cms-timeline--cards{grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:2rem}
/* Die Chronik als RASTER: drei Spalten, die Jahreszahl gross in der
   Akzentfarbe, darunter Titel und Text. Die Referenz setzt sie so
   (Abschnitt 07) - die Punkt-Schiene draengt jede Jahreszahl in
   einen Kreis, in dem `Heute` nicht mehr Platz hat. */
.cms-timeline--raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:2.5rem;padding:0;margin:0;list-style:none}
.cms-timeline--raster::before{content:none}
.cms-timeline--raster .cms-timeline__step{display:block;padding:0;margin:0}
.cms-timeline--raster .cms-timeline__step::before{content:none}
.cms-timeline--raster .cms-timeline__dot{position:static;display:block;width:auto;height:auto;border:0;border-radius:0;background:none;padding:0;font-family:var(--font-heading,inherit);font-size:2.6rem;line-height:1;color:var(--_primary)}
.cms-timeline--raster .cms-timeline__body{padding:0;margin-top:.75rem}
.cms-timeline--raster .cms-timeline__title{font-family:var(--font-sans,ui-sans-serif,system-ui,sans-serif);font-size:1rem;font-weight:500}
.cms-timeline--raster .cms-timeline__text{margin-top:.5rem;font-size:.92rem;line-height:1.6}
/* Die Chronik als ZEILEN: Jahr, Titel und Text nebeneinander unter
   einer Haarlinie. So stellt die Referenz sie auf der Seite `Ueber
   uns` (im Gegensatz zum Raster der Startseite). */
.cms-timeline--zeilen{display:block;padding:0;margin:0;list-style:none;border-top:1px solid var(--color-line-strong,var(--_border))}
.cms-timeline--zeilen::before{content:none}
.cms-timeline--zeilen .cms-timeline__step{display:grid;grid-template-columns:1fr;gap:.5rem 2.5rem;align-items:baseline;border-bottom:1px solid var(--_border);padding:2rem 0;margin:0}
.cms-timeline--zeilen .cms-timeline__step::before{content:none}
.cms-timeline--zeilen .cms-timeline__dot{position:static;display:block;width:auto;height:auto;border:0;border-radius:0;background:none;padding:0;font-family:var(--font-heading,inherit);font-size:2rem;line-height:1;color:var(--_primary)}
.cms-timeline--zeilen .cms-timeline__body{display:contents}
.cms-timeline--zeilen .cms-timeline__title{font-family:var(--font-heading,inherit);font-size:1.2rem;font-weight:400;margin:0}
.cms-timeline--zeilen .cms-timeline__text{margin:0;font-size:.95rem;line-height:1.6}
@media(min-width:768px){.cms-timeline--zeilen .cms-timeline__step{grid-template-columns:9rem 1fr 2fr}}
.cms-timeline--cards .cms-timeline__step{display:block;padding:1.9rem 2rem;border:1px solid color-mix(in srgb,var(--_border) 85%,transparent);background:var(--_surface)}
.cms-timeline--cards .cms-timeline__dot{width:auto;height:auto;border:0;border-radius:0;background:none;display:block;font-family:var(--font-heading,inherit);font-size:clamp(1.9rem,3vw,2.4rem);font-weight:var(--display-weight,700);line-height:1;color:var(--_primary)}
.cms-timeline--cards .cms-timeline__title{margin:1rem 0 .45rem;font-size:1.15rem}
.cms-timeline--cards .cms-timeline__text{font-size:.92rem}
  .cms-timeline__step{flex-direction:column;gap:.9rem;padding-bottom:0}
  .cms-timeline__step:not(:last-child)::before{content:none}
  /* Balanced rows: auto-fit orphans 4 items as 3+1 and 6 as 5+1 — pin counts */
  .cms-timeline:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}
  .cms-timeline:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,1fr)}
  .cms-timeline__title{margin:.15rem 0 .35rem}
}


/* On dark sections the dot/line assume a light ground — flip them to
   the house on-dark idiom (currentColor, so any band colour works). */
.cms-section--on-dark .cms-timeline__dot{background:color-mix(in srgb,currentColor 13%,transparent);color:inherit;border-color:color-mix(in srgb,currentColor 30%,transparent)}
.cms-section--on-dark .cms-timeline__step:not(:last-child)::before{background:color-mix(in srgb,currentColor 24%,transparent)}
/* ── Tabs (radio hack, up to 6 tabs) ── */
.cms-tabs__radio{position:absolute;opacity:0;pointer-events:none}
.cms-tabs__nav{display:flex;gap:.4rem;flex-wrap:wrap;border-bottom:1px solid var(--_border);margin-bottom:1.1rem}
.cms-tabs__label{padding:.6rem 1.1rem;font-weight:600;font-size:.94rem;color:var(--_muted);cursor:pointer;border-radius:var(--_radius) var(--_radius) 0 0;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s,background .15s}
.cms-tabs__label:hover{color:var(--_fg);background:color-mix(in srgb,var(--_fg) 4%,transparent)}
.cms-tabs__panel{display:none;line-height:1.65}
.cms-tabs__radio:nth-of-type(1):checked~.cms-tabs__nav .cms-tabs__label:nth-of-type(1),.cms-tabs__radio:nth-of-type(2):checked~.cms-tabs__nav .cms-tabs__label:nth-of-type(2),.cms-tabs__radio:nth-of-type(3):checked~.cms-tabs__nav .cms-tabs__label:nth-of-type(3),.cms-tabs__radio:nth-of-type(4):checked~.cms-tabs__nav .cms-tabs__label:nth-of-type(4),.cms-tabs__radio:nth-of-type(5):checked~.cms-tabs__nav .cms-tabs__label:nth-of-type(5),.cms-tabs__radio:nth-of-type(6):checked~.cms-tabs__nav .cms-tabs__label:nth-of-type(6){color:var(--_primary);border-bottom-color:var(--_primary)}
.cms-tabs__radio:nth-of-type(1):checked~.cms-tabs__panel:nth-of-type(1),.cms-tabs__radio:nth-of-type(2):checked~.cms-tabs__panel:nth-of-type(2),.cms-tabs__radio:nth-of-type(3):checked~.cms-tabs__panel:nth-of-type(3),.cms-tabs__radio:nth-of-type(4):checked~.cms-tabs__panel:nth-of-type(4),.cms-tabs__radio:nth-of-type(5):checked~.cms-tabs__panel:nth-of-type(5),.cms-tabs__radio:nth-of-type(6):checked~.cms-tabs__panel:nth-of-type(6){display:block}


/* K4 — keyboard a11y: the hidden radios ARE the tab stops; surface the
   focus on the matching label (same nth-of-type enumeration as :checked). */
.cms-tabs__radio:nth-of-type(1):focus-visible~.cms-tabs__nav .cms-tabs__label:nth-of-type(1),.cms-tabs__radio:nth-of-type(2):focus-visible~.cms-tabs__nav .cms-tabs__label:nth-of-type(2),.cms-tabs__radio:nth-of-type(3):focus-visible~.cms-tabs__nav .cms-tabs__label:nth-of-type(3),.cms-tabs__radio:nth-of-type(4):focus-visible~.cms-tabs__nav .cms-tabs__label:nth-of-type(4),.cms-tabs__radio:nth-of-type(5):focus-visible~.cms-tabs__nav .cms-tabs__label:nth-of-type(5),.cms-tabs__radio:nth-of-type(6):focus-visible~.cms-tabs__nav .cms-tabs__label:nth-of-type(6){outline:3px solid color-mix(in srgb,var(--_primary) 35%,transparent);outline-offset:2px}
/* ── Image slider (scroll-snap) ── */

/* Video (asset/YouTube/Vimeo) — 16:9 frame on the token system;
   published pages previously shipped the browser default 300x150. */
.cms-video{margin:0}
.cms-video video,.cms-video iframe{width:100%;aspect-ratio:16/9;border:0;display:block;border-radius:var(--_radius-lg);box-shadow:var(--_shadow-sm);background:#000}
.cms-video figcaption{font-size:.85rem;color:var(--color-ink-3,var(--_muted));padding:.55rem .3rem}
/* ── Carousel (arrows + dots + snap-swipe; CAROUSEL_JS runtime) ── */
.cms-carousel{position:relative}
.cms-carousel__viewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cms-carousel__viewport::-webkit-scrollbar{display:none}
.cms-carousel__track{display:flex;gap:1rem}
.cms-carousel__slide{flex:0 0 calc((100% - (var(--pv,1) - 1)*1rem)/var(--pv,1));scroll-snap-align:start;margin:0;min-width:0}
.cms-carousel__slide>img{width:100%;display:block;object-fit:cover;border-radius:var(--_radius-lg)}
.cms-carousel__cap{font-size:.85rem;color:var(--color-ink-3,var(--_muted));padding:.5rem .2rem 0}
/* Die SCHIENE: eine Bilderreihe, die randlos ueber den Bildschirm
   laeuft und mit dem Finger geschoben wird. Die Referenz stellt ihre
   Einblicke so - kein Behaelter, keine Pfeile, keine Punkte, und die
   Bildunterschrift still darunter (Abschnitt 02). */
.cms-section__inner>.cms-carousel--schiene{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}
.cms-carousel--schiene .cms-carousel__viewport{padding-inline:clamp(1.25rem,4vw,2rem)}
.cms-carousel--schiene .cms-carousel__track{gap:1rem}
.cms-carousel--schiene .cms-carousel__slide{flex:0 0 clamp(16rem,30vw,28rem)}
.cms-carousel--schiene .cms-carousel__cap{margin-top:.625rem;font-size:.78rem;line-height:1.35;color:var(--color-ink-3,var(--_muted))}
.cms-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);width:2.75rem;height:2.75rem;display:flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid color-mix(in srgb,var(--_border) 80%,transparent);background:color-mix(in srgb,var(--_bg) 88%,transparent);backdrop-filter:blur(6px);color:var(--_fg);cursor:pointer;box-shadow:var(--_shadow-md);transition:background .15s ease,transform .15s ease,opacity .2s ease;z-index:2}
.cms-carousel__arrow:hover{background:var(--_bg);transform:translateY(-50%) scale(1.06)}
.cms-carousel__arrow--prev{left:.9rem}
.cms-carousel__arrow--next{right:.9rem}
.cms-carousel__arrow.is-disabled{opacity:.35;pointer-events:none}
.cms-carousel__dots{display:flex;gap:.45rem;justify-content:center;margin-top:1rem}
.cms-carousel__dot{width:1.05rem;height:1.05rem;border-radius:999px;border:0;padding:.25rem;background:color-mix(in srgb,var(--_fg) 22%,transparent);background-clip:content-box;cursor:pointer;transition:width .2s ease,background .2s ease}.cms-carousel__dot:focus-visible,.cms-carousel__arrow:focus-visible{outline:2px solid var(--_primary);outline-offset:2px}
.cms-carousel__dot.is-active{width:1.9rem;background:var(--_primary);background-clip:content-box}
.cms-testimonials--carousel .cms-carousel__slide{display:flex}
.cms-testimonials--carousel .cms-carousel__slide>*{width:100%}

/* Legacy scroll-strip (pre-carousel published pages) */
.cms-slider{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--_fg) 30%,transparent) color-mix(in srgb,var(--_border) 40%,transparent)}
.cms-slider::-webkit-scrollbar{height:8px}
.cms-slider::-webkit-scrollbar-track{background:color-mix(in srgb,var(--_border) 40%,transparent);border-radius:999px}
.cms-slider::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--_fg) 30%,transparent);border-radius:999px}
.cms-slider__slide{flex:0 0 min(100%,640px);scroll-snap-align:center;margin:0}
.cms-slider__slide img{width:100%;object-fit:cover;border-radius:var(--_radius-lg);box-shadow:var(--_shadow-sm)}
.cms-slider__cap{font-size:.85rem;color:var(--color-ink-3,var(--_muted));padding:.45rem .3rem}

@media(prefers-reduced-motion:reduce){.cms-gallery__item img,.cms-image--zoom img,.cms-carousel__arrow,.cms-carousel__dot{transition:none}.cms-gallery__item:hover img,.cms-image--zoom:hover img{transform:none}}
/* ── Alert box (legal-page hints, normalizeLegalBlocks) ── */
.cms-alert{margin:1.25rem 0;padding:1rem 1.25rem;border-radius:var(--_radius-lg);border:1px solid color-mix(in srgb,var(--_border) 80%,transparent);background:var(--_surface);border-inline-start:4px solid var(--_primary)}
.cms-alert--warning{border-inline-start-color:#d97706;background:color-mix(in srgb,#d97706 7%,var(--_surface))}
.cms-alert__title{display:block;margin-bottom:.35rem;font-size:.95rem}
.cms-alert__body{margin:0;font-size:.92rem;color:var(--_muted)}

/* ── Hero slider (crossfade, Wave 2 B) ── */
.cms-heroslider{position:relative;min-height:70vh;overflow:hidden;color:#fff}
.cms-heroslider--screen{min-height:100vh}
.cms-heroslider__slide{position:absolute;inset:0;background-size:cover;background-position:center;background-color:color-mix(in srgb,var(--_primary) 30%,var(--_fg));opacity:0;transition:opacity 1s ease;display:flex;align-items:center;justify-content:center;pointer-events:none}
.cms-heroslider__slide.is-active{opacity:1;pointer-events:auto}
.cms-heroslider__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,6,8,.55) 0%,rgba(6,6,8,.35) 46%,rgba(6,6,8,.5) 100%)}
.cms-heroslider__inner{position:relative;max-width:var(--_container);padding:0 1.5rem;text-align:center}
.cms-heroslider__title{font-family:var(--font-heading,inherit);font-size:clamp(2.4rem,5.5vw,4.2rem);line-height:1.05;letter-spacing:-.026em;margin:0 0 1rem;text-shadow:0 2px 28px rgba(0,0,0,.25)}
.cms-heroslider__sub{font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.55;max-width:40rem;margin:0 auto 1.8rem;opacity:.95}
.cms-heroslider__dots{position:absolute;bottom:1.4rem;left:0;right:0;display:flex;justify-content:center;gap:.5rem;z-index:2}
.cms-heroslider__dot{width:1.3rem;height:1.3rem;border-radius:999px;border:0;padding:.35rem;background:rgba(255,255,255,.45);background-clip:content-box;cursor:pointer;transition:background .2s,transform .2s}
.cms-heroslider__dot:focus-visible{outline:2px solid rgba(255,255,255,.85);outline-offset:2px}
.cms-heroslider__dot.is-active{background:#fff;transform:scale(1.2)}

/* ── News cards / Aktuelles (Wave 2 C) ── */
.cms-news{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:var(--space-grid,1.5rem)}
.cms-news__card{display:flex;flex-direction:column;border-radius:var(--_radius-lg);overflow:hidden;background:var(--_card);border:1px solid color-mix(in srgb,var(--_border) 80%,transparent);box-shadow:var(--_shadow-sm);text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .25s ease}
.cms-news__card--link:hover{transform:translateY(-4px);box-shadow:var(--_shadow-md);text-decoration:none}
.cms-news__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--_surface-alt)}
.cms-news__media img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.cms-news__card--link:hover .cms-news__media img{transform:scale(1.045)}
.cms-news__badge{position:absolute;top:.8rem;left:.8rem;background:var(--_accent);color:var(--_on-accent);font-size:.72rem;font-weight:700;letter-spacing:.04em;padding:.32rem .75rem;border-radius:999px}
.cms-news__body{display:flex;flex-direction:column;gap:.35rem;padding:1.15rem 1.3rem 1.3rem;flex:1}
.cms-news__date{font-size:.76rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--_accent)}
.cms-news__title{margin:0;font-size:1.12rem;font-weight:600}
.cms-news__teaser{margin:0;color:var(--_muted);font-size:.93rem;line-height:1.6}
.cms-news__more{display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:.6rem;color:var(--_accent);font-weight:600;font-size:.92rem}
.cms-news__more::after{content:"→";transition:transform .2s ease}
.cms-news__card--link:hover .cms-news__more::after{transform:translateX(3px)}

/* ── Contact info card (Wave 2 D) ── */
.cms-contact-card{max-width:46rem;margin-inline:auto;background:var(--_card);border:1px solid color-mix(in srgb,var(--_border) 80%,transparent);border-radius:var(--_radius-xl);box-shadow:var(--_shadow-md);padding:2rem}
/* Die Karte behaelt ihre eigene Tinte - in einem dunklen Abschnitt (`--on-dark`, color:#fff) stand sonst weisser Text auf weisser Karte, nur die Icons blieben sichtbar (Vorlagen-Audit 2026-09-30, Kanzlei-Richtung Digitale Kanzlei). */
.cms-contact-card:not(.cms-contact-card--plain){color:var(--_fg)}
.cms-main>.cms-contact-card{max-width:46rem}
.cms-contact-card__title{margin:0 0 1.4rem;font-size:1.3rem}
.cms-contact-card__rows{display:flex;flex-direction:column;gap:1.1rem}
.cms-contact-card__row{display:flex;align-items:center;gap:1rem}
.cms-contact-card__icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:var(--_radius-lg);background:color-mix(in srgb,var(--_primary) 12%,transparent);color:var(--_primary)}
.cms-contact-card__icon svg{width:1.3rem;height:1.3rem}
.cms-contact-card__rowtext{min-width:0}
.cms-contact-card__label{font-size:.82rem;color:var(--color-ink-3,var(--_muted))}
/* Die stille Fassung: Haarlinien statt Karte, kleine Versalien-Labels,
   Werte in der Ueberschriftenschrift. Die Referenz stellt die Nummern
   so hin; unsere Karte mit getoenten Symbolkacheln war daneben laut
   (Tims Befund 2026-09-13). Die Zeilen bekommen je einen eigenen
   Rahmen — das ist es, was sie in der Referenz zusammenhaelt. */
.cms-contact-card--plain{max-width:none;background:none;border:0;border-radius:0;box-shadow:none;padding:0}
.cms-main>.cms-contact-card--plain{max-width:var(--_container)}
.cms-contact-card--plain .cms-contact-card__rows{gap:.75rem}
.cms-contact-card--plain .cms-contact-card__row{display:block;border:1px solid color-mix(in srgb,var(--_border) 90%,transparent);padding:.7rem .95rem}
.cms-contact-card--plain .cms-contact-card__label{font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-ink-3,var(--_muted))}
/* Rufnummer, E-Mail und Anschrift stehen in der GRUNDSCHRIFT: die
   Anzeigeschrift ist eine Titelschrift, in der Ziffern, das @ und
   der Bindestrich schlecht lesen — und genau das steht hier
   (Tims Befund 2026-09-15). */
.cms-contact-card--plain .cms-contact-card__value{font-size:1.02rem;margin-top:.15rem;display:block}
.cms-contact-card--plain .cms-contact-card__title{font-size:1.15rem;margin-bottom:.9rem}
/* Eine Zeile mit Adresse ist anklickbar (tel:/mailto:). Die Referenz
   faerbt dafuer den Rahmen statt den Text zu unterstreichen. */
.cms-contact-card--plain .cms-contact-card__row:has(.cms-contact-card__value[href]):hover{border-color:color-mix(in srgb,var(--_primary) 55%,var(--_border))}
.cms-contact-card--plain .cms-contact-card__value[href]:hover{text-decoration:none}
.cms-contact-card__value{font-weight:600;color:inherit}
a.cms-contact-card__value:hover{color:var(--_primary);text-decoration:none}
.cms-contact-card__actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid color-mix(in srgb,var(--_border) 70%,transparent)}

/* ── Statement band (Wave 2 E) ── */
.cms-statement{position:relative;min-height:24rem;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center;background-color:color-mix(in srgb,var(--_primary) 30%,var(--_fg));color:#fff;overflow:hidden;text-align:center}
.cms-statement--lg{min-height:32rem}
.cms-statement__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,6,8,.48),rgba(6,6,8,.58))}
.cms-statement__inner{position:relative;max-width:52rem;padding:3rem 1.5rem}
.cms-statement__title{font-family:var(--font-heading,inherit);font-size:clamp(1.9rem,4vw,3rem);margin:0 0 .6rem;text-shadow:0 2px 24px rgba(0,0,0,.3)}
.cms-statement__text{margin:0;font-size:clamp(1rem,1.8vw,1.2rem);line-height:1.6;opacity:.94}
.cms-statement--corner{align-items:flex-end;justify-content:flex-end;text-align:right}
.cms-statement--corner .cms-statement__inner{padding:0 clamp(1.5rem,5vw,4rem) clamp(1.5rem,4vw,2.75rem);max-width:none}
.cms-statement--corner .cms-statement__title{font-size:clamp(1.2rem,2.4vw,1.8rem);letter-spacing:.14em;text-transform:uppercase;margin:0}
@media(min-width:1025px) and (hover:hover) and (pointer:fine){.cms-statement--fixed{background-attachment:fixed}}

/* ── Document banner (Wave 2 F) ── */
.cms-docbanner{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1.25rem 2rem;padding:1.6rem 1.9rem;background:var(--_surface-alt);border:1px solid color-mix(in srgb,var(--_border) 70%,transparent);border-radius:var(--_radius-lg)}
.cms-docbanner__title{font-weight:600;font-size:1.08rem}
.cms-docbanner__text{margin:.25rem 0 0;color:var(--_muted);font-size:.93rem}
.cms-docbanner .btn svg{width:1.1rem;height:1.1rem}

/* ── Job list (Wave 2 G) ── */
.cms-jobs{background:var(--_card);border:1px solid color-mix(in srgb,var(--_border) 80%,transparent);border-radius:var(--_radius-lg);box-shadow:var(--_shadow-sm);overflow:hidden}
.cms-jobs__row{display:flex;align-items:center;gap:1.5rem;padding:1.35rem 1.6rem}
.cms-jobs__row+.cms-jobs__row{border-top:1px solid color-mix(in srgb,var(--_border) 60%,transparent)}
.cms-jobs__main{flex:1;min-width:0}
.cms-jobs__head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.cms-jobs__title{font-weight:600;font-size:1.05rem}
.cms-jobs__tag{background:color-mix(in srgb,var(--_primary) 10%,transparent);color:var(--_primary);font-size:.74rem;font-weight:600;padding:.22rem .6rem;border-radius:999px}
.cms-jobs__text{margin:.35rem 0 0;color:var(--_muted);font-size:.92rem;line-height:1.55}
.cms-jobs__apply{flex:none}

/* ── Newsletter CTA (Wave 2 H) ── */
.cms-newsletter-cta{background:var(--_surface-alt);border-radius:var(--_radius-xl);padding:clamp(2.25rem,5vw,3.5rem) 1.5rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.4rem}
.cms-newsletter-cta--compact{padding:1.75rem 1.5rem}
.cms-newsletter-cta__heading{margin:0;font-size:clamp(1.5rem,3vw,2.1rem)}
.cms-newsletter-cta__text{margin:0 0 1rem;color:var(--_muted);max-width:36rem}

/* ── Map consent gate (Wave 2 I) ── */
.cms-map__gate{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;padding:2rem 1.5rem;background:var(--_surface);border:1px solid color-mix(in srgb,var(--_border) 80%,transparent);border-radius:var(--_radius-lg);text-align:center}
.cms-map__gate-text{margin:0;color:var(--_muted);font-size:.92rem;max-width:26rem}

/* ── Gallery lightbox (Wave 2 J) ── */
.cms-gallery--lightbox .cms-gallery__item{cursor:zoom-in}
.cms-lightbox{position:fixed;inset:0;margin:0;z-index:2147483640;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;padding:2.5rem}
.cms-lightbox[hidden]{display:none}
.cms-lightbox__img{max-width:min(92vw,1200px);max-height:85vh;width:auto;height:auto;object-fit:contain;border-radius:.35rem}
.cms-lightbox__cap{position:absolute;left:0;right:0;bottom:1rem;text-align:center;color:rgba(255,255,255,.85);font-size:.9rem;pointer-events:none}
.cms-lightbox__close,.cms-lightbox__prev,.cms-lightbox__next{position:absolute;background:none;border:0;color:#fff;cursor:pointer;font-size:2rem;line-height:1;padding:.5rem;opacity:.8}
.cms-lightbox__close:hover,.cms-lightbox__prev:hover,.cms-lightbox__next:hover{opacity:1}.cms-lightbox__close:focus-visible,.cms-lightbox__prev:focus-visible,.cms-lightbox__next:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:.35rem;opacity:1}
.cms-lightbox__close{top:1rem;right:1.25rem}
.cms-lightbox__prev{left:.75rem;top:50%;transform:translateY(-50%);font-size:2.6rem}
.cms-lightbox__next{right:.75rem;top:50%;transform:translateY(-50%);font-size:2.6rem}

/* ── Testimonial portrait carousel (Wave 2 K) ── */
.cms-testimonials--portraits{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem;-webkit-overflow-scrolling:touch}
/* flex-grow with a max: 3 portraits fill the container instead of
   left-packing with a dead right column; larger sets shrink to the
   min and become the intended snap-scroll strip. */
.cms-testimonials__portrait{position:relative;flex:1 1 17rem;min-width:16rem;max-width:23rem;aspect-ratio:3/4;border-radius:var(--_radius-xl);overflow:hidden;scroll-snap-align:start;margin:0}
.cms-testimonials__portrait-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cms-testimonials__portrait-img--empty{background:linear-gradient(160deg,color-mix(in srgb,var(--_primary) 65%,var(--_fg)),var(--_fg))}
.cms-testimonials__portrait-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,6,8,.82),transparent 60%)}
.cms-testimonials__portrait-body{position:absolute;left:0;right:0;bottom:0;padding:1.1rem;color:#fff}
.cms-testimonials__portrait-quote{margin:0 0 .5rem;padding:0;border:0;font-style:normal;font-size:.92rem;line-height:1.5;color:#fff}
.cms-testimonials__portrait-name{margin:0;font-size:.8rem;font-weight:600;opacity:.85}

/* ── Bento grid (Wave 4) — 6-col canvas, cards span 2/4/6 cols ── */
.cms-bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:auto;gap:1.1rem}
.cms-bento__card{grid-column:span 2;display:flex;flex-direction:column;background:var(--_card);border:1px solid color-mix(in srgb,var(--_border) 80%,transparent);border-radius:var(--_radius-xl);box-shadow:var(--_shadow-sm);overflow:hidden}
.cms-bento__card--2{grid-column:span 4}
.cms-bento__card--wide{grid-column:span 6}
.cms-bento__card--tall{grid-row:span 2}
.cms-bento__media{flex:none;height:10rem;overflow:hidden}
.cms-bento__card--tall .cms-bento__media{flex:1;min-height:10rem}
.cms-bento__media img{width:100%;height:100%;object-fit:cover;mask-image:linear-gradient(to bottom,#000 62%,transparent);-webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent)}
.cms-bento__body{display:flex;flex-direction:column;gap:.45rem;padding:1.75rem}
.cms-bento__eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-ink-3,var(--_muted))}
.cms-bento__title{margin:0;font-size:1.15rem;font-weight:600}
.cms-bento__text{margin:0;color:var(--_muted);font-size:.95rem;line-height:1.6}
/* dark band: rounded dark panel, light text, darker inner cards */
.cms-bento--dark{background:color-mix(in srgb,var(--_fg) 94%,var(--_bg));border-radius:var(--_radius-xl);padding:1.5rem;color:#fff}
.cms-bento--dark .cms-bento__card{background:color-mix(in srgb,var(--_fg) 88%,var(--_bg));border-color:color-mix(in srgb,#fff 10%,transparent)}
.cms-bento--dark .cms-bento__eyebrow,.cms-bento--dark .cms-bento__text{color:color-mix(in srgb,#fff 72%,transparent)}

/* ── Hero split (Wave 4) — padding-driven content hero, framed image ── */
.cms-hero-split{padding-block:clamp(3.5rem,8vw,6.5rem);background:radial-gradient(48rem 32rem at 8% -14%,color-mix(in srgb,var(--_primary) 14%,transparent),transparent 60%)}
.cms-hero-split__inner{max-width:var(--_container);margin:0 auto;display:grid;gap:2.5rem;align-items:center;padding-inline:1.25rem}
.cms-hero-split__badge-wrap{margin-bottom:1.1rem}
.cms-hero-split__title{font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.06;letter-spacing:-.026em;margin:0 0 1rem}
.cms-hero-split__sub{font-size:clamp(1.05rem,1.8vw,1.25rem);line-height:1.6;color:var(--_muted);max-width:36rem;margin:0 0 1.8rem}
.cms-hero-split__cta{display:flex;gap:.9rem;flex-wrap:wrap}
.cms-hero-split__trust{margin:1.1rem 0 0;font-size:.88rem;color:var(--_muted)}
.cms-hero-split__frame{border-radius:var(--_radius-xl);border:1px solid color-mix(in srgb,var(--_border) 85%,transparent);box-shadow:var(--_shadow-lg);overflow:hidden;background:var(--_card)}
.cms-hero-split__frame img{width:100%;height:auto;display:block}
/* Ein FOTO ist keine Produktkachel: ohne Rahmen steht es wie in der
   Referenz als Flaeche neben dem Text. */
.cms-hero-split__frame--offen{border:0;border-radius:0;box-shadow:none;background:none}
/* Die drei Angaben unter den Buttons: Bezeichnung klein und still,
   Wert darunter, das Ganze unter einer Haarlinie. Die Referenz setzt
   sie so IN die Textspalte (mt-14, pt-8, 0.88rem) — nicht als eigenes
   Band unter dem Hero. */
.cms-hero-split__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 2rem;margin:3.5rem 0 0;padding-top:2rem;border-top:1px solid var(--_border);font-size:.88rem}
.cms-hero-split__facts dt{color:var(--color-ink-3,var(--_muted))}
.cms-hero-split__facts dd{margin:.25rem 0 0}
@media(min-width:640px){.cms-hero-split__facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Der randlose Bau: kein Behaelter, keine Luecke — das Foto fuellt
   seine Haelfte bis an den Bildschirmrand und ueber die volle Hoehe
   der Zeile, der Text steht mittig in der anderen. So baut die
   Referenz ihren hellen Entwurf (Tims Befund 2026-09-14: „not same
   split with full height and half width“). */
.cms-hero-split--randlos{padding-block:0;background:none;border-bottom:1px solid var(--_border)}
.cms-hero-split--randlos .cms-hero-split__inner{max-width:none;padding-inline:0;gap:0;align-items:stretch}
.cms-hero-split--randlos .cms-hero-split__copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(3rem,7vw,6rem) clamp(1.25rem,5vw,5rem)}
/* Jedes Kind auf Lesebreite: die Referenz kappt ihre Textspalte bei
   36rem, sonst laeuft die Schlagzeile ueber die halbe Seite. */
.cms-hero-split--randlos .cms-hero-split__copy>*{max-width:36rem}
/* Die Dachzeile ist hier eine ZEILE, kein Chip. */
.cms-hero-split--randlos .cms-eyebrow{background:none;border:0;border-radius:0;padding:0;color:var(--color-ink-3,var(--_muted));letter-spacing:.2em;font-size:.78rem}
.cms-hero-split--randlos .cms-hero-split__title{font-size:calc(clamp(2.6rem,5vw,4.5rem) * var(--display-scale,1));line-height:var(--display-leading,.95);letter-spacing:-.03em}
.cms-hero-split--randlos .cms-hero-split__frame{min-height:52vh}
.cms-hero-split--randlos .cms-hero-split__frame img{width:100%;height:100%;object-fit:cover}
/* Im randlosen Bau folgen Beitext und Knoepfe der Referenz: 1,05rem
   Text und 0,85rem/500 auf den Knoepfen. Unsere Standardwerte (20px
   und 15,7px/600) machten beide eine Stufe lauter, als die
   Schlagzeile vertraegt (Tims Befund 2026-09-14 zum Verhaeltnis von
   Schrift und Knopf). */
.cms-hero-split--randlos .cms-hero-split__badge-wrap{margin-bottom:1.75rem}
.cms-hero-split--randlos .cms-hero-split__title{margin-bottom:2rem}
.cms-hero-split--titel-lg .cms-hero-split__title{font-size:clamp(2.6rem,6.2vw,5.2rem);line-height:var(--display-leading,.98);letter-spacing:-.03em}
.cms-hero-split--randlos .cms-hero-split__sub{font-size:1.05rem;line-height:1.7;margin-bottom:2.5rem}
.cms-hero-split--randlos .cms-hero-split__cta .btn{font-size:.85rem;font-weight:500}
@media(min-width:1024px){.cms-hero-split__inner{grid-template-columns:1.05fr 1fr;gap:3.5rem}.cms-hero-split__inner--noimg{grid-template-columns:1fr;max-width:52rem}.cms-hero-split--randlos .cms-hero-split__inner{grid-template-columns:1fr 1.05fr;gap:0}.cms-hero-split--randlos .cms-hero-split__frame{min-height:86vh}}

/* ── Hero video background (Wave 4) ── */
.cms-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}

/* ── Before/after comparison slider (Wave 4) ── */
.cms-beforeafter{position:relative;overflow:hidden;border-radius:var(--_radius-lg);box-shadow:var(--_shadow-sm);touch-action:pan-y;cursor:col-resize;user-select:none;-webkit-user-select:none}.cms-beforeafter:focus-visible{outline:2px solid var(--_primary);outline-offset:3px}
.cms-beforeafter__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0}
.cms-beforeafter__after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--split,50%))}
.cms-beforeafter__label{position:absolute;top:.8rem;background:rgba(6,6,8,.55);color:#fff;font-size:.76rem;font-weight:600;letter-spacing:.04em;padding:.32rem .75rem;border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none}
.cms-beforeafter__label--before{left:.8rem}
.cms-beforeafter__label--after{right:.8rem}
.cms-beforeafter__handle{position:absolute;top:0;bottom:0;left:var(--split,50%);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,.35);pointer-events:none}
.cms-beforeafter__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2.5rem;height:2.5rem;border-radius:999px;background:#fff;color:#1c1917;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;box-shadow:var(--_shadow-md)}

/* ── Trust bar (Wave 4) — checkmark USP strip under the hero ── */
.cms-trustbar{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem 2rem;padding-block:.95rem;border-block:1px solid color-mix(in srgb,var(--_border) 60%,transparent)}
.cms-trustbar--left{justify-content:flex-start}
.cms-trustbar__item{position:relative;padding-left:1.5rem;font-weight:600;font-size:.94rem;color:var(--_muted)}
.cms-trustbar__item::before{content:"";position:absolute;left:0;top:.5em;width:.6rem;height:.32rem;border-left:2px solid var(--_primary);border-bottom:2px solid var(--_primary);transform:rotate(-45deg)}

/* ── Floating CTA (Wave 4) — fixed conversion pill, max one per page ── */
/* bottom offset clears the fixed "Cookie-Einstellungen" re-consent chip
   (bottom-right, ~2.5rem tall) which has a near-max z-index and would
   otherwise paint over the CTA in the same corner. */
.cms-floating-cta{position:fixed;right:max(1.1rem,env(safe-area-inset-right));bottom:max(4.25rem,calc(env(safe-area-inset-bottom) + 3.75rem));z-index:60}
.cms-floating-cta .btn{border-radius:999px;box-shadow:var(--_shadow-lg);padding:.95rem 1.6rem}
.cms-floating-cta .btn svg{width:1.15rem;height:1.15rem}
@media(min-width:1024px){.cms-floating-cta--mobile{display:none}}

/* ── Review strip (Wave 4) — Google-style review cards ── */
.cms-reviews__header{margin-bottom:1.4rem}
.cms-reviews__title{margin:0 0 .2rem}
.cms-reviews__source{margin:0;font-size:.85rem;color:var(--color-ink-3,var(--_muted))}
.cms-reviews__row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.cms-reviews__card{display:flex;flex-direction:column;gap:.55rem;padding:var(--space-card,1.5rem);background:var(--_card);border:1px solid color-mix(in srgb,var(--_border) 80%,transparent);border-radius:var(--_radius-lg);box-shadow:var(--_shadow-sm)}
.cms-reviews__head{display:flex;align-items:center;gap:.75rem}
.cms-reviews__avatar{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:999px;background:color-mix(in srgb,var(--_primary) 14%,transparent);color:var(--_primary);font-size:.82rem;font-weight:700}
.cms-reviews__who{min-width:0}
.cms-reviews__author{font-weight:600;font-size:.95rem;line-height:1.25}
.cms-reviews__date{font-size:.78rem;color:var(--color-ink-3,var(--_muted))}
.cms-reviews__stars{color:#f59e0b;font-size:.92rem;margin:0;letter-spacing:.1em}
.cms-reviews__stars .is-empty{color:color-mix(in srgb,var(--_fg) 18%,transparent)}
.cms-reviews__text{margin:0;font-size:.93rem;line-height:1.6;color:color-mix(in srgb,var(--_fg) 88%,transparent);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

/* ── Comparison table (Wave 4) — wir vs. andere / plan compare ── */
.cms-compare{background:var(--_card);border:1px solid color-mix(in srgb,var(--_border) 80%,transparent);border-radius:var(--_radius-xl);box-shadow:var(--_shadow-sm);overflow:hidden}
.cms-compare__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cms-compare table{width:100%;min-width:34rem;border-collapse:collapse;font-size:.95rem}
.cms-compare thead td,.cms-compare thead th{background:var(--_surface-alt);padding:.9rem 1.25rem;text-align:left}
.cms-compare__col{font-weight:600;white-space:nowrap}
.cms-compare tbody th,.cms-compare tbody td{padding:.8rem 1.25rem;text-align:left;border-top:1px solid color-mix(in srgb,var(--_border) 55%,transparent)}
.cms-compare__row{font-weight:500}
.cms-compare tbody tr:nth-child(even) :is(th,td){background:color-mix(in srgb,var(--_fg) 3%,transparent)}
.cms-compare .is-hl{background:color-mix(in srgb,var(--_primary) 6%,transparent)!important}
.cms-compare__yes{width:1.2rem;height:1.2rem;color:var(--_primary);display:inline-block;vertical-align:middle}
.cms-compare__no{width:1.1rem;height:1.1rem;color:color-mix(in srgb,var(--_fg) 40%,transparent);display:inline-block;vertical-align:middle}
.cms-compare__partial{color:#f59e0b;font-weight:700;font-size:1.05rem}
.cms-compare tbody td{font-variant-numeric:tabular-nums}

/* ── Heading highlight (Wave 5 N6) — marker swoosh / gradient / accent ── */
.cms-hl{position:relative}
.cms-hl--marker{display:inline-block;isolation:isolate}
.cms-hl__text{position:relative;z-index:1}
.cms-hl__swoosh{position:absolute;left:-.08em;right:-.08em;bottom:.04em;width:calc(100% + .16em);height:.58em;z-index:0;color:color-mix(in srgb,var(--_accent) 70%,transparent)}
.cms-hl--gradient{background:linear-gradient(120deg,var(--_primary),color-mix(in srgb,var(--_primary) 55%,var(--_accent)));-webkit-background-clip:text;background-clip:text;color:transparent}
.cms-hl--accent{color:var(--_primary)}


/* K4 — gradient/accent highlight readable on dark bands (a primary-based
   gradient disappears into a primary-dark background). */
.cms-section--on-dark .cms-hl--gradient{background:linear-gradient(120deg,var(--_accent),color-mix(in srgb,var(--_accent) 55%,#fff));-webkit-background-clip:text;background-clip:text}
.cms-section--on-dark .cms-hl--accent{color:var(--_accent)}
/* ── Embed consent gate (Wave 5 N1) — DSGVO two-click for embeds ── */
.cms-embed-consent__gate{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;padding:2.25rem 1.5rem;background:var(--_surface);border:1px solid color-mix(in srgb,var(--_border) 80%,transparent);border-radius:var(--_radius-lg);text-align:center}
.cms-embed-consent__icon{width:2.4rem;height:2.4rem;color:var(--_muted)}
.cms-embed-consent__title{margin:0;font-weight:600}
.cms-embed-consent__text{margin:0;color:var(--_muted);font-size:.92rem;max-width:30rem}
.cms-embed-consent__text p{margin:0}
.cms-embed-consent__actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}

/* ── Cookie-Erklaerung (Phase 9) ────────────────────────────── */
.cms-cookie-decl__title{margin:0 0 .75rem}
.cms-cookie-decl__intro{color:var(--_muted);margin-bottom:2rem}
.cms-cookie-decl__intro p{margin:0}
.cms-cookie-decl__group+.cms-cookie-decl__group{margin-top:2.5rem}
.cms-cookie-decl__cat{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin:0 0 .35rem;font-size:1.15rem}
.cms-cookie-decl__always{font-size:.7rem;font-weight:600;letter-spacing:var(--nav-tracking,.1em);text-transform:uppercase;color:var(--_muted);border:1px solid color-mix(in srgb,var(--_border) 85%,transparent);border-radius:999px;padding:.12rem .5rem}
.cms-cookie-decl__desc{margin:0 0 1.25rem;color:var(--_muted);font-size:.95rem}
.cms-cookie-decl__svc{padding:1rem 0;border-top:1px solid color-mix(in srgb,var(--_border) 85%,transparent)}
.cms-cookie-decl__svc-name{margin:0;font-weight:600}
.cms-cookie-decl__svc-key{font-weight:400;color:var(--_muted);font-size:.85rem}
.cms-cookie-decl__svc-purpose{margin:.35rem 0 0;color:var(--_muted);font-size:.92rem}
/* Die Tabelle scrollt FUER SICH — sonst schoebe sie am Telefon die
   ganze Seite seitwaerts. */
.cms-cookie-decl__table{display:block;overflow-x:auto;width:100%;margin-top:.75rem;border-collapse:collapse;font-size:.88rem}
.cms-cookie-decl__table th,.cms-cookie-decl__table td{text-align:left;padding:.4rem .75rem .4rem 0;vertical-align:top;white-space:nowrap}
.cms-cookie-decl__table td:nth-child(2){white-space:normal;min-width:16rem}
.cms-cookie-decl__table th{font-size:.7rem;font-weight:600;letter-spacing:var(--nav-tracking,.1em);text-transform:uppercase;color:var(--_muted)}
.cms-cookie-decl__empty{color:var(--_muted)}
.cms-cookie-decl__change{margin-top:2rem}

/* ── Image mosaic (Wave 5 N2) — staggered collage + stats row ── */
.cms-mosaic__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.cms-mosaic--row3 .cms-mosaic__grid{grid-template-columns:repeat(3,1fr)}
.cms-mosaic__item{margin:0;overflow:hidden;border-radius:var(--_radius-lg);box-shadow:var(--_shadow-lg);outline:1px solid color-mix(in srgb,var(--_fg) 10%,transparent);outline-offset:-1px}
.cms-mosaic__item img{width:100%;height:100%;object-fit:cover;display:block}
@media(min-width:768px){
  .cms-mosaic--staggered .cms-mosaic__item:nth-child(even),.cms-mosaic--offset .cms-mosaic__item:nth-child(2){transform:translateY(2rem)}
  .cms-mosaic--staggered .cms-mosaic__grid,.cms-mosaic--offset .cms-mosaic__grid{padding-bottom:2rem}
/* „Eins gross, zwei klein“ — die Anordnung der Referenz: das erste
   Bild nimmt beide Reihen, die uebrigen stapeln sich daneben. Das grosse
   Bild gibt die Hoehe vor, die kleinen teilen sie sich; ohne
   `aspect-ratio:auto` wuerden sie ihr Format erzwingen und die Reihe
   sprengen. */
.cms-mosaic--lead-left .cms-mosaic__grid,.cms-mosaic--lead-right .cms-mosaic__grid{grid-template-columns:1.35fr 1fr;grid-auto-rows:1fr;align-items:stretch}
.cms-mosaic--lead-left .cms-mosaic__item:first-child,.cms-mosaic--lead-right .cms-mosaic__item:first-child{grid-row:span 2}
.cms-mosaic--lead-right .cms-mosaic__grid{grid-template-columns:1fr 1.35fr}
.cms-mosaic--lead-right .cms-mosaic__item:first-child{grid-column:2}

/* ── Termin-Karte mit Datums-Kachel ──
   Die Fassung der Referenz: Bild oben, heller Koerper darunter, und die
   Kachel ragt ueber die Bildecke. Sie braucht `position:relative` am
   Bildbehaelter — der Koerper darf sie nicht abschneiden. */
.cms-card--calendar .cms-card__cover{position:relative;overflow:visible}
.cms-card__datetile{position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:3.25rem;padding:.45rem .55rem;background:var(--_card,var(--_bg));color:var(--_fg);box-shadow:var(--_shadow-sm);line-height:1}
.cms-card__datetile-day{font-family:var(--font-heading,inherit);font-size:1.35rem;font-weight:700;font-variant-numeric:tabular-nums}
.cms-card__datetile-month{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--_muted);margin-top:.15rem}
.cms-card--calendar .cms-card__kicker{margin:0 0 .35rem;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-kicker,var(--_primary))}
.cms-card--calendar .cms-card__meta{color:var(--_muted);font-size:.9rem}
.cms-mosaic--lead-left .cms-mosaic__item:nth-child(n+2),.cms-mosaic--lead-right .cms-mosaic__item:nth-child(n+2){aspect-ratio:auto}
/* Auf dem Telefon steht alles untereinander — dann gibt es kein
   „daneben“ mehr, und das grosse Bild behaelt sein Format. */
@media(max-width:768px){.cms-mosaic--lead-left .cms-mosaic__grid,.cms-mosaic--lead-right .cms-mosaic__grid{grid-template-columns:1fr}
.cms-mosaic--lead-left .cms-mosaic__item,.cms-mosaic--lead-right .cms-mosaic__item{grid-row:auto;grid-column:auto;aspect-ratio:3/4}}
}
.cms-mosaic__stats{display:flex;flex-wrap:wrap;gap:1.25rem 2.5rem;margin:2rem 0 0;padding-top:1.5rem;border-top:2px dotted color-mix(in srgb,var(--_border) 80%,transparent)}
.cms-mosaic__stat{display:flex;flex-direction:column;gap:.15rem}
.cms-mosaic__stat-value{font-family:var(--font-heading,inherit);font-size:1.6rem;font-weight:800;letter-spacing:-.02em;color:var(--_primary);margin:0;font-variant-numeric:tabular-nums}
.cms-mosaic__stat-label{margin:0;color:var(--_muted);font-size:.88rem}

/* ── Promo popup + toast (Wave 5 N3) ── */
.cms-promo__backdrop{display:none;position:fixed;inset:0;z-index:70;background:rgba(6,6,8,.7)}
.cms-promo.is-open .cms-promo__backdrop{display:block}
.cms-promo__card{display:none;position:fixed;z-index:71;top:50%;left:50%;transform:translate(-50%,-50%);width:min(26rem,calc(100vw - 2rem));max-height:calc(100vh - 2rem);overflow:auto;flex-direction:column;background:var(--_card);color:var(--_fg);border-radius:var(--_radius-xl);box-shadow:var(--_shadow-lg)}
.cms-promo.is-open .cms-promo__card{display:flex}
.cms-promo__close{position:absolute;top:.55rem;right:.6rem;z-index:1;background:rgba(6,6,8,.45);color:#fff;border:0;border-radius:999px;width:2rem;height:2rem;font-size:1.15rem;line-height:1;cursor:pointer}
.cms-promo__media{flex:none;aspect-ratio:3/4;max-height:22rem;overflow:hidden}
.cms-promo__media img{width:100%;height:100%;object-fit:cover;display:block}
.cms-promo__body{display:flex;flex-direction:column;gap:.6rem;padding:1.5rem}
.cms-promo__badge{align-self:flex-start;background:var(--_accent);color:var(--_on-accent);font-size:.72rem;font-weight:700;letter-spacing:.04em;padding:.32rem .75rem;border-radius:999px}
.cms-promo__title{margin:0;font-size:1.35rem}
.cms-promo__text{color:var(--_muted);font-size:.95rem;line-height:1.6}
.cms-promo__text p{margin:0}
.cms-promo__actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.4rem}
.cms-promo__toast{position:fixed;right:max(1.1rem,env(safe-area-inset-right));bottom:max(1.1rem,env(safe-area-inset-bottom));z-index:69;display:flex;align-items:center;gap:.75rem;max-width:min(22rem,calc(100vw - 2rem));padding:.6rem .9rem .6rem .6rem;background:var(--_card);border:1px solid color-mix(in srgb,var(--_border) 80%,transparent);border-radius:var(--_radius-lg);box-shadow:var(--_shadow-lg)}
.cms-promo__toast[hidden]{display:none}
.cms-promo__toast-img{width:3rem;height:3rem;border-radius:var(--_radius);object-fit:cover;flex:none}
.cms-promo__toast-link{font-weight:600;font-size:.92rem;color:var(--_primary);text-decoration:none}
.cms-promo__toast-link:hover{text-decoration:none;color:var(--_primary)}
.cms-promo__toast-close{background:none;border:0;color:var(--_muted);font-size:1.1rem;line-height:1;cursor:pointer;padding:.2rem;flex:none}

/* ── Breadcrumb (Wave 5 N4) ── */
.cms-breadcrumb__list{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0;padding:0;font-size:.85rem;color:var(--color-ink-3,var(--_muted))}
.cms-breadcrumb__item{display:inline-flex;align-items:center;gap:.4rem;margin:0}
.cms-breadcrumb a{color:inherit;text-decoration:none}
.cms-breadcrumb a:hover{color:var(--_primary);text-decoration:none}
.cms-breadcrumb__item [aria-current="page"]{font-weight:600;color:var(--_fg)}
.cms-breadcrumb__sep{opacity:.55}
.cms-breadcrumb--light .cms-breadcrumb__list{color:rgba(255,255,255,.7)}
.cms-breadcrumb--light .cms-breadcrumb__item [aria-current="page"]{color:#fff}
.cms-breadcrumb--light a:hover{color:#fff}


/* K4 — long German compounds must never push the trail off-canvas. */
.cms-breadcrumb__item>a,.cms-breadcrumb__item>span{overflow-wrap:anywhere}
.cms-breadcrumb a:focus-visible{outline:3px solid color-mix(in srgb,var(--_primary) 35%,transparent);outline-offset:2px;border-radius:.25rem}
/* ── Framed image (Wave 5 N5) — matte / browser frame ── */
.cms-framed{margin:0}
.cms-framed__img{width:100%;display:block}
.cms-framed--plain .cms-framed__img{border-radius:var(--_radius-lg);box-shadow:var(--_shadow-lg)}
.cms-framed__matte{border-radius:var(--_radius-lg);background:color-mix(in srgb,var(--_fg) 5%,transparent);padding:.5rem;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--_fg) 10%,transparent)}
.cms-framed--matte .cms-framed__img{border-radius:calc(var(--_radius-lg) - .25rem);box-shadow:var(--_shadow-lg)}
@media(min-width:1024px){.cms-framed__matte{padding:1rem}}
.cms-framed__browser{border-radius:var(--_radius-lg);overflow:hidden;background:var(--_card);border:1px solid color-mix(in srgb,var(--_fg) 10%,transparent);box-shadow:var(--_shadow-lg)}
.cms-framed--noshadow .cms-framed__img,.cms-framed--noshadow .cms-framed__browser,.cms-framed--noshadow.cms-framed--matte .cms-framed__img{box-shadow:none}
.cms-framed__bar{display:flex;align-items:center;gap:.4rem;padding:.55rem .8rem;background:var(--_surface-alt);border-bottom:1px solid color-mix(in srgb,var(--_border) 70%,transparent)}
.cms-framed__dot{width:10px;height:10px;border-radius:999px;flex:none;opacity:.75}
.cms-framed__dot--r{background:#ef4444}
.cms-framed__dot--a{background:#f59e0b}
.cms-framed__dot--g{background:#22c55e}
.cms-framed__url{flex:1;max-width:16rem;height:1.1rem;margin-inline:auto;border-radius:999px;background:color-mix(in srgb,var(--_fg) 6%,transparent)}
.cms-framed__cap{font-size:.85rem;color:var(--color-ink-3,var(--_muted));padding:.55rem .3rem;text-align:center}
.cms-framed--fade{position:relative;margin-bottom:-12%}
.cms-framed--fade::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(to bottom,transparent,var(--_bg));pointer-events:none}

/* ── Logo-wall marquee (Wave 4) — seamless loop, pause on hover ── */
@keyframes cms-marquee{from{transform:translateX(0)}to{transform:translateX(calc(-100% - 3rem))}}
.cms-logo-wall--marquee .cms-logo-wall__track{display:flex;gap:3rem;overflow:hidden}
.cms-logo-wall--marquee .cms-logo-wall__row{flex:none;flex-wrap:nowrap;justify-content:flex-start;min-width:max-content;animation:cms-marquee 30s linear infinite}
.cms-logo-wall--marquee:hover .cms-logo-wall__row{animation-play-state:paused}

/* ── Responsive ── */
@media(max-width:1024px){
  .cms-event-grid,.cms-pricing,.cms-team,.cms-news{grid-template-columns:repeat(2,1fr)!important}
  /* Die feste Spaltenzahl des Sammlungs-Rasters bricht wie die uebrigen
     Raster — sonst stuenden drei Karten auf dem Tablet nebeneinander. */
  .cms-collection-list--grid[style*="--cols"] .cms-collection-list__cards{grid-template-columns:repeat(2,1fr)}
  /* Phase 3.3: das Merkmal-Raster klemmt gegen --cols wie die Galerie — ein einspaltiges bleibt einspaltig */
  .cms-feature-grid{grid-template-columns:repeat(min(var(--cols,3),2),1fr)!important}
  /* 4-col stats/gallery get a 2-col tablet step instead of jumping
     straight from 4 to 1 at 768px */
  .cms-stats[style*="--cols:4"],.cms-stats[style*="--cols:5"]{grid-template-columns:repeat(2,1fr)!important}
  .cms-gallery{grid-template-columns:repeat(min(var(--cols,3),2),1fr)!important}
  .cms-reviews__row{grid-template-columns:repeat(2,1fr)}
  /* bento collapses to a 2-col grid; span modifiers flatten */
  .cms-bento{grid-template-columns:repeat(2,1fr)}
  .cms-bento__card,.cms-bento__card--tall{grid-column:span 1;grid-row:auto}
  .cms-bento__card--2,.cms-bento__card--wide{grid-column:span 2}
}
@media(max-width:768px){
  .cms-feature-grid,.cms-stats,.cms-gallery,.cms-event-grid,.cms-pricing,.cms-team,.cms-news{grid-template-columns:1fr!important}
  .cms-collection-list--grid[style*="--cols"] .cms-collection-list__cards{grid-template-columns:1fr}
  /* mosaic stays a 2-up collage on phones; only the 3er-Reihe wraps */
  .cms-mosaic--row3 .cms-mosaic__grid{grid-template-columns:repeat(2,1fr)}
  .cms-stat+.cms-stat{border-left:0}
  .cms-cta--card .cms-cta__inner{grid-template-columns:1fr;justify-items:start}
  .cms-docbanner{grid-template-columns:1fr}
  .cms-jobs__row{flex-direction:column;align-items:flex-start;gap:.8rem}
  .cms-bento{grid-template-columns:1fr}
  .cms-bento__card,.cms-bento__card--2,.cms-bento__card--wide,.cms-bento__card--tall{grid-column:span 1;grid-row:auto}
  /* reviews become a snap-scroll strip on phones */
  .cms-reviews__row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem;-webkit-overflow-scrolling:touch}
  .cms-reviews__card{flex:0 0 85%;scroll-snap-align:start}
  body{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  /* marquee falls back to the static wrapped logo row */
  .cms-logo-wall--marquee .cms-logo-wall__track{overflow:visible;flex-wrap:wrap;justify-content:center}
  .cms-logo-wall--marquee .cms-logo-wall__row{animation:none!important;flex-wrap:wrap;justify-content:center;min-width:0}
  .cms-logo-wall--marquee .cms-logo-wall__row[aria-hidden]{display:none}
}

/* ── Legacy blocks (kept) ── */
.hero{margin:0;width:100%;max-height:480px;overflow:hidden}.hero img{width:100%;height:100%;object-fit:cover;display:block}
.cms-collection-list{margin:2rem auto}.cms-collection-list__cards{display:grid;gap:1.5rem}.cms-collection-list--grid .cms-collection-list__cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
/* Nennt der Block eine Spaltenzahl, gilt SIE. `auto-fill` fuellt sonst
   so viele 260px-Spalten wie hineinpassen, und drei Termine stehen in
   einer siebenspaltigen Reihe links gedraengt statt die Breite zu
   teilen (Tims Befund 2026-09-13). Sammlungen ohne Angabe bleiben bei
   `auto-fill`. */
.cms-collection-list--grid[style*="--cols"] .cms-collection-list__cards{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
/* Der Karten-Link hebt den Unterstrich auf. `a:hover` ist (0,1,1) und
   schlaegt die blosse Klasse (0,1,0) — beim Ueberfahren wurde die
   GANZE Karte unterstrichen, Titel, Text und Fusszeile (Tims Befund
   2026-09-13). Zwei Klassen genuegen als Gegengewicht. */
.cms-card .cms-card__link:hover{text-decoration:none}.cms-collection-list--list .cms-collection-list__cards{grid-template-columns:1fr}
/* Magazine: ein redaktioneller Aufmacher ueber zwei Folgekarten. Zuvor
   setzte nur die erste Karte `grid-column:1/-1`, aber das Raster hatte
   ueberhaupt keine Spalten — die angebliche Magazinansicht war damit
   eine gewoehnliche einspaltige Liste. */
.cms-collection-list--magazine .cms-collection-list__cards{grid-template-columns:repeat(2,minmax(0,1fr))}.cms-collection-list--magazine .cms-collection-list__cards>:first-child{grid-column:1/-1}.cms-collection-list--magazine .cms-collection-list__cards>:first-child .cms-card__link{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(18rem,.85fr);min-height:22rem}.cms-collection-list--magazine .cms-collection-list__cards>:first-child .cms-card__cover{height:100%;aspect-ratio:auto}.cms-collection-list--magazine .cms-collection-list__cards>:first-child .cms-card__body{align-self:center;padding:clamp(1.5rem,4vw,3rem)}.cms-collection-list--magazine .cms-collection-list__cards>:first-child .cms-card__title{font-size:clamp(1.45rem,3vw,2.25rem);line-height:1.1}
.cms-card{border:1px solid color-mix(in srgb,var(--_border) 80%,transparent);border-radius:var(--_radius-lg);overflow:hidden;background:var(--_card);box-shadow:var(--_shadow-sm);transition:transform .2s ease,box-shadow .25s ease}.cms-card:hover{transform:translateY(-4px);box-shadow:var(--_shadow-md)}.cms-card__link{display:block;color:inherit;text-decoration:none}.cms-card__cover{aspect-ratio:16/9;overflow:hidden;background:var(--_border)}.cms-card__cover img{width:100%;height:100%;object-fit:cover}.cms-card__body{padding:1.1rem 1.35rem}.cms-card__title{font-size:1.15rem;margin:0 0 .5rem}.cms-card__excerpt{font-size:.9rem;color:var(--_muted);margin:0 0 .5rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.cms-card__meta{display:flex;gap:.75rem;font-size:.75rem;color:var(--_muted);align-items:center;flex-wrap:wrap}.cms-card__price{font-weight:700;color:var(--_primary);font-size:.95rem}
.cms-card__badge{display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--_primary);background:color-mix(in srgb,var(--_primary) 12%,transparent);border-radius:999px;padding:.15rem .6rem;margin-bottom:.4rem}.cms-card__tags{display:flex;gap:.35rem;flex-wrap:wrap;margin:0 0 .5rem}.cms-card__tag{font-size:.7rem;color:var(--_muted);border:1px solid var(--_border);border-radius:999px;padding:.1rem .5rem}
.cms-tag-filter{display:flex;gap:.4rem;flex-wrap:wrap;margin:0 0 1.25rem}.cms-tag-chip{font:inherit;font-size:.8rem;color:inherit;background:transparent;border:1px solid var(--_border);border-radius:999px;padding:.3rem .8rem;cursor:pointer;transition:background .15s ease,color .15s ease}.cms-tag-chip:hover{border-color:var(--_primary)}.cms-tag-chip.is-active{background:var(--_primary);color:var(--_on-primary);border-color:var(--_primary)}
.cms-pagination{display:flex;gap:.25rem;justify-content:center;margin-top:2rem;flex-wrap:wrap}.cms-pagination__page{padding:.4rem .75rem;border:1px solid var(--_border);border-radius:.5rem;text-decoration:none;font-size:.875rem;color:inherit}.cms-pagination__page.is-current{background:var(--_primary);color:var(--_on-primary);border-color:var(--_primary)}.cms-pagination__page.is-disabled{opacity:.4}
.cms-collection-back a{color:var(--_primary)}
.cms-lang-switcher{display:flex;gap:.35rem;align-items:center}.cms-lang-switcher__item{font-size:.8rem;padding:.25rem .6rem;border-radius:999px;border:1px solid var(--_border);text-decoration:none;color:inherit}.cms-lang-switcher__item.is-active{background:var(--_primary);color:var(--_on-primary);border-color:var(--_primary)}a.cms-lang-switcher__item:hover{border-color:var(--_primary)}

@media(max-width:768px){
  .cms-collection-list--magazine .cms-collection-list__cards{grid-template-columns:1fr}
  .cms-collection-list--magazine .cms-collection-list__cards>:first-child .cms-card__link{display:block;min-height:0}
  .cms-collection-list--magazine .cms-collection-list__cards>:first-child .cms-card__cover{height:auto;aspect-ratio:16/9}
}
/* ── Event card (Wave 2 A — fettehenne anatomy: image-filled card,
     bottom scrim, bottom-anchored content, frosted CTA pill) ── */
.event-card{position:relative;display:block;min-height:20rem;max-width:380px;margin:1.5rem auto;border-radius:var(--_radius-lg);overflow:hidden;background:var(--_card);box-shadow:var(--_shadow-sm);text-decoration:none;color:#fff;transition:transform .25s ease,box-shadow .25s ease}
.cms-event-grid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);grid-auto-rows:1fr;gap:2rem}
.cms-event-grid .event-card{margin:0;max-width:none}
/* Phase-08 (8.3) — same hover lift as .cms-card so event + collection cards rhyme. */
.event-card:hover{transform:translateY(-4px);box-shadow:var(--_shadow-md);text-decoration:none}
.event-card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);pointer-events:none}
.event-card__cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.event-card__cover--empty{background:linear-gradient(135deg,color-mix(in srgb,var(--_primary) 45%,var(--_fg)),var(--_fg))}
.event-card__scrim{position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb,var(--_fg) 88%,transparent),transparent 55%)}
.event-card__pill{position:absolute;top:.9rem;right:.9rem;background:rgba(255,255,255,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#1c1917;padding:.4rem .85rem;border-radius:999px;font-size:.8rem;font-weight:600}
.event-card__body{position:absolute;left:0;right:0;bottom:0;padding:1.25rem;display:flex;flex-direction:column;gap:.25rem}
.event-card__meta{font-size:.8rem;opacity:.85}
.event-card__date{font-size:.85rem;font-weight:600;opacity:.92}
.event-card__name{font-family:var(--font-heading,serif);font-size:1.25rem;font-weight:700;line-height:1.2;color:#fff}
/* Strip variant — compact horizontal teaser rows (homepage). */
.cms-event-strip{display:flex;flex-direction:column;border:1px solid color-mix(in srgb,var(--_border) 80%,transparent);border-radius:var(--_radius-xl);background:var(--_card);box-shadow:var(--_shadow-sm);overflow:hidden}
.cms-event-strip__item{display:flex;align-items:center;gap:1.25rem;text-decoration:none;color:inherit;padding:1.1rem 1.4rem;transition:background .15s ease}
.cms-event-strip__item+.cms-event-strip__item{border-top:1px solid color-mix(in srgb,var(--_border) 60%,transparent)}
.cms-event-strip__item:hover{background:color-mix(in srgb,var(--_primary) 5%,transparent);text-decoration:none}
/* Die Terminliste als ZEILEN: keine Karte, keine Pille, kein Pfeil -
   eine Linie in der Tinte oben, je Zeile eine Haarlinie, Datum links
   still, Titel gross, Preis rechts (Referenz, Abschnitt 05). */
.cms-event-strip--zeilen{border:0;border-top:1px solid var(--_fg);border-radius:0;background:none;box-shadow:none;overflow:visible}
.cms-event-strip--zeilen .cms-event-strip__item{border-top:0;border-bottom:1px solid var(--_border);padding:1.75rem 0;gap:1.5rem}
.cms-event-strip--zeilen .cms-event-strip__item:hover{background:var(--color-surface-2,var(--_surface))}
.cms-event-strip--zeilen .cms-event-strip__when,.cms-event-strip--zeilen .cms-event-strip__img,.cms-event-strip--zeilen .cms-event-strip__chevron{display:none}
.cms-event-strip--zeilen .cms-event-strip__title{font-family:var(--font-heading,inherit);font-size:clamp(1.3rem,2.4vw,2rem);font-weight:var(--display-weight,400);line-height:1.15;letter-spacing:var(--display-tracking,-.02em)}
.cms-event-strip--zeilen .cms-event-strip__date{order:-1;margin:0 0 .35rem;font-size:.88rem;font-variant-numeric:tabular-nums}
.cms-event-strip--zeilen .cms-event-strip__text{display:flex;flex-direction:column}
.cms-event-strip--zeilen .cms-event-strip__price{background:none;padding:0;color:var(--color-ink-2,var(--_muted));font-weight:400;font-size:.85rem}
/* Die KATEGORIE ist die dritte Spalte der Zeile (Referenz,
   Abschnitt 05): Datum, Titel, Kategorie, Preis auf EINER
   Grundlinie. Bei uns stand das Datum ueber dem Titel und die
   Kategorie fehlte ganz (Tims Befund 2026-09-15). Unter 768px
   bleibt der Stapel: vier Spalten passen dort nicht. */
.cms-event-strip--zeilen .cms-event-strip__cat{font-size:.85rem;color:var(--color-ink-3,var(--_muted))}
@media(min-width:768px){
.cms-event-strip--zeilen .cms-event-strip__item{display:grid;grid-template-columns:7rem 1fr auto 10rem;align-items:baseline;column-gap:1.5rem;row-gap:.5rem}
.cms-event-strip--zeilen .cms-event-strip__text,.cms-event-strip--zeilen .cms-event-strip__right{display:contents}
/* Die ZEILE ist eine Zeile: das Datum steht im Quelltext hinter
   dem Titel, und ohne feste Reihe schiebt die Selbstverteilung es
   in eine zweite (gemessen: zwei Reihen, 36.8px und 23.4px). Erst
   mit `grid-row:1` liegen alle vier auf EINER Grundlinie. */
.cms-event-strip--zeilen .cms-event-strip__date{order:0;margin:0;grid-row:1;grid-column:1}
.cms-event-strip--zeilen .cms-event-strip__title{grid-row:1;grid-column:2}
.cms-event-strip--zeilen .cms-event-strip__cat{grid-row:1;grid-column:3}
.cms-event-strip--zeilen .cms-event-strip__price{grid-row:1;grid-column:4;text-align:right;white-space:normal}
}
.cms-event-strip__when{flex:none;width:3.6rem;height:3.6rem;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--_radius);background:color-mix(in srgb,var(--_primary) 10%,transparent);color:var(--_primary);line-height:1}
.cms-event-strip__day{font-size:1.35rem;font-weight:800;letter-spacing:-.02em}
.cms-event-strip__month{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-top:.2rem}
.cms-event-strip__img{width:5.5rem;height:4rem;flex:none;border-radius:var(--_radius);object-fit:cover;display:block}
.cms-event-strip__text{min-width:0;flex:1 1 auto}
.cms-event-strip__date{font-size:.85rem;color:var(--color-ink-3,var(--_muted));margin-top:.2rem}
.cms-event-strip__title{font-weight:700;font-size:1.08rem;letter-spacing:-.01em}
.cms-event-strip__right{flex:none;display:flex;align-items:center;gap:.9rem;margin-left:auto}
.cms-event-strip__price{font-size:.82rem;font-weight:600;color:var(--_primary);background:color-mix(in srgb,var(--_primary) 9%,transparent);padding:.35rem .7rem;border-radius:999px;white-space:nowrap}
.cms-event-strip__chevron{color:var(--_muted);font-size:1.1rem;transition:transform .15s ease,color .15s ease}
.cms-event-strip__item:hover .cms-event-strip__chevron{transform:translateX(4px);color:var(--_primary)}
@media(max-width:640px){.cms-event-strip__img{display:none}.cms-event-strip__item{padding:.9rem 1rem;gap:.9rem}.cms-event-strip__price{display:none}}
/* „Mehr laden“ — die verborgenen Karten stehen bereits im
   Dokument; das Runtime nimmt ihnen nur das hidden-Attribut. */
.cms-event-more{display:flex;justify-content:center;margin-top:2rem}
.cms-event-more__item{display:contents}
/* Autoren-Regeln schlagen die UA-Regel fuer [hidden] — ohne diese
   beiden Zeilen waere weder eine verborgene Karte noch der erst vom
   Runtime enthuellte Button wirklich versteckt. */
.cms-event-more__item[hidden]{display:none}
.cms-event-more[hidden]{display:none}
@media(max-width:1023px){.cms-navbar--bp-lg .cms-navbar__nav{max-height:calc(100dvh - 4.5rem);overflow-y:auto;padding-bottom:.9rem}.cms-navbar--bp-lg .cms-navbar__nav{align-self:auto}.cms-navbar--bp-lg .cms-navbar__item--has-panel{position:relative;display:block;padding-block:0;margin-block:0}.cms-navbar--bp-lg .cms-navbar__panel{position:static;display:block;box-shadow:none;border:0;border-radius:0;padding:.15rem 0 .35rem 1rem;background:none}.cms-navbar--bp-lg .cms-navbar__panel-inner{flex-direction:column;gap:.15rem}.cms-navbar--bp-lg .cms-navbar__panel-col{flex:1 1 auto;max-width:none}.cms-navbar--bp-lg .cms-navbar__panel-head{padding-left:0}.cms-navbar--bp-lg .cms-navbar__panel-desc{display:none}.cms-navbar--bp-lg .cms-navbar__caret{display:none}.cms-navbar--bp-lg .cms-navbar__panel-footer{margin-top:.35rem;padding-top:.35rem}.cms-navbar--bp-lg .cms-navbar__actions{margin:.8rem 0 0;flex-direction:column;align-items:stretch;gap:.5rem}.cms-navbar--bp-lg .cms-navbar__cta{display:flex;width:100%;justify-content:center;text-align:center;padding:.7rem 1rem}.cms-navbar--bp-lg .cms-navbar__topbar{display:none}.cms-navbar--bp-lg .cms-navbar__burger{display:block;margin-left:auto;font-size:1.5rem;cursor:pointer;line-height:1}.cms-navbar--bp-lg .cms-navbar__inner{flex-wrap:wrap}.cms-navbar--bp-lg .cms-navbar__nav{display:none;flex-direction:column;align-items:stretch;gap:.1rem;width:100%;order:3;margin:.65rem 0 0;padding-top:.65rem;border-top:1px solid color-mix(in srgb,var(--_border) 70%,transparent)}.cms-navbar--bp-lg .cms-navbar__nav .cms-navbar__item{width:100%}.cms-navbar--bp-lg .cms-navbar__nav a{display:block;padding:.45rem 0}.cms-navbar--bp-lg .cms-navbar__toggle:checked~.cms-navbar__nav{display:flex}.cms-navbar--bp-lg .cms-navbar__dropdown{position:static;display:flex;box-shadow:none;border:0;padding-left:1rem}.cms-navbar--bp-lg .cms-navbar__toggle{display:block;position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}.cms-navbar--bp-lg .cms-navbar__toggle:focus-visible+.cms-navbar__burger{outline:3px solid color-mix(in srgb,var(--_primary) 35%,transparent);outline-offset:2px;border-radius:.25rem}}.cms-navbar--shrink{transition:box-shadow .3s ease,background-color .3s ease,border-color .3s ease}.cms-navbar--shrink .cms-navbar__inner{transition:padding-block .3s ease}.cms-navbar--light.cms-navbar--shrink.is-scrolled{background:var(--_bg);border-bottom:1px solid color-mix(in srgb,var(--_border) 70%,transparent);box-shadow:var(--_shadow-sm)}.cms-navbar--dark.cms-navbar--shrink.is-scrolled{background:var(--chrome-deep,var(--_fg));color:var(--chrome-deep-ink,#fff);border-bottom:1px solid color-mix(in srgb,var(--_bg) 18%,transparent);box-shadow:var(--_shadow-md)}.cms-navbar--transparent.cms-navbar--shrink.is-scrolled{background:var(--chrome-deep,var(--_fg));color:var(--chrome-deep-ink,#fff);border-bottom:1px solid color-mix(in srgb,var(--_bg) 18%,transparent);box-shadow:var(--_shadow-md)}.cms-navbar--transparent.cms-navbar--shrink.cms-navbar--sticky{position:sticky;top:0}.cms-navbar--shrink.is-scrolled .cms-navbar__inner{padding-block:.45rem}.cms-navbar--shrink.is-scrolled .cms-navbar__topbar{display:none}@media(prefers-reduced-motion:reduce){.cms-navbar--shrink,.cms-navbar--shrink .cms-navbar__inner{transition:none}}.cms-navbar__cta.btn-primary::after{content:"\2192";display:inline-block;margin-left:.45rem;transition:transform .2s ease}.cms-navbar__cta.btn-primary:hover::after{transform:translateX(3px)}@media(prefers-reduced-motion:reduce){.cms-navbar__cta.btn-primary::after{transition:none}}.cms-navbar__panel-icon{margin-right:.4rem;font-size:.95em;opacity:.85}.cms-consent-settings:not(.cms-consent-settings--button){background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;text-decoration:underline;text-underline-offset:2px}.cms-consent-settings{cursor:pointer}.cms-consent-settings:not(.cms-consent-settings--button):hover{color:var(--_primary)}.cms-consent-settings:focus-visible{outline:2px solid var(--_primary);outline-offset:2px}/* ── Ornament (Phase 3.2) — Linie ❦ Linie ── */
.cms-ornament{display:flex;align-items:center;justify-content:center;gap:1rem;line-height:1}
.cms-ornament--left{justify-content:flex-start}
.cms-ornament__line{display:block;height:1px;width:5rem;background:currentColor;opacity:.45}
.cms-ornament--sm .cms-ornament__line{width:2.5rem}
.cms-ornament--lg .cms-ornament__line{width:8rem}
.cms-ornament__glyph{font-size:1.1rem;line-height:1}
.cms-ornament--accent{color:var(--_accent)}
.cms-ornament--ink{color:var(--_fg)}
.cms-ornament--muted{color:var(--_muted)}
.cms-section--on-dark .cms-ornament--ink{color:inherit}
/* Zwischen Kopf und Inhalt ist das Ornament ein kurzer Atem, kein
   Sektionsabstand: die Breitenregel gaebe ihm oben+unten bis 4.5rem. */
.cms-main>.cms-ornament{margin-block:1.75rem;max-width:var(--_measure);margin-inline:auto;padding-inline:1.25rem}
.cms-main>:is(h1,h2,h3,.cms-heading):has(+.cms-ornament){margin-block-end:0}
.cms-section__inner>*+.cms-ornament,.cms-section__inner>.cms-ornament+*{margin-block-start:1.25rem}

/* ── Tag list (Phase 3.2) — Rahmen-Chips in Versalien ── */
.cms-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.cms-tags--center{justify-content:center}
.cms-tag{display:inline-block;margin:0;border:1px solid var(--_border);padding:.22rem .6rem;font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.3;color:var(--_muted);border-radius:max(0px,calc(var(--_radius) - .5rem))}
.cms-tags--filled .cms-tag{background:var(--_surface-alt);border-color:transparent;color:var(--_fg)}
.cms-section--on-dark .cms-tag{border-color:color-mix(in srgb,currentColor 35%,transparent);color:inherit;opacity:.85}
.cms-section--on-dark .cms-tags--filled .cms-tag{background:color-mix(in srgb,currentColor 12%,transparent);opacity:1}
/* Die Pille in der Akzentfarbe (dkn „Tutti“, 2026-09-15: 12,5px, 6/16px, keine Versalien).
   Der zweite Selektor schlaegt die on-dark-Regel fuer Chips. */
.cms-tags--akzent .cms-tag,.cms-section--on-dark .cms-tags--akzent .cms-tag{background:var(--_accent);border-color:transparent;color:var(--color-accent-contrast,#fff);text-transform:none;letter-spacing:-.01em;font-size:.78rem;font-weight:600;padding:.375rem 1rem;border-radius:999px;opacity:1}
.cms-main>.cms-tags{max-width:var(--_measure);margin-inline:auto;padding-inline:1.25rem}
.cms-main>:is(h1,h2,h3,p):has(+.cms-tags){margin-block-end:0}
.cms-main>:is(h1,h2,h3,p)+.cms-tags{margin-block-start:1rem}
.cms-section__inner>*+.cms-tags{margin-block-start:1rem}

/* ── Seal / Störer (Phase 3.2) — runde Plakette, gedreht, richtet sich beim Hover auf ── */
.cms-seal-wrap{display:flex;justify-content:center}
.cms-seal-wrap--left{justify-content:flex-start}
.cms-seal-wrap--right{justify-content:flex-end}
.cms-seal{--seal-size:13rem;display:flex;align-items:center;justify-content:center;width:var(--seal-size);height:var(--seal-size);flex:none;border-radius:999px;border:3px solid currentColor;text-align:center;text-decoration:none;padding:1rem;transform:rotate(var(--seal-rot,0deg));transition:transform .5s cubic-bezier(.22,1,.36,1);box-shadow:var(--_shadow-sm)}
.cms-seal--sm{--seal-size:9rem}
.cms-seal--lg{--seal-size:16rem}
.cms-seal--rot-left{--seal-rot:-8deg}
.cms-seal--rot-right{--seal-rot:12deg}
a.cms-seal:hover,a.cms-seal:focus-visible{transform:rotate(0);text-decoration:none}
.cms-seal--accent{background:var(--_accent);color:var(--_on-accent);border-color:color-mix(in srgb,var(--_on-accent) 55%,transparent)}
.cms-seal--primary{background:var(--_primary);color:var(--_on-primary);border-color:color-mix(in srgb,var(--_on-primary) 55%,transparent)}
.cms-seal--ink{background:var(--_fg);color:var(--_bg);border-color:color-mix(in srgb,var(--_bg) 45%,transparent)}
.cms-seal__text{font-family:var(--font-heading,inherit);font-size:1.25rem;line-height:1.15;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
.cms-seal--sm .cms-seal__text{font-size:.95rem}
.cms-seal--lg .cms-seal__text{font-size:1.5rem}
.cms-main>.cms-seal-wrap{max-width:var(--_container);margin-inline:auto;padding-inline:1.25rem}
@media(prefers-reduced-motion:reduce){.cms-seal{transition:none}}

/* ── Marquee band (Phase 3.2) — zwei Listen, Spur wandert −50 %; MARQUEE_JS macht die Dauer laengenunabhaengig ── */
@keyframes cms-marquee-band{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cms-marquee{overflow:hidden;padding:.9rem 0;border-top:1px solid var(--_border);border-bottom:1px solid var(--_border);background:var(--_surface);color:var(--_muted)}
.cms-marquee--accent{background:var(--_accent);color:var(--_on-accent);border-color:transparent}
.cms-marquee--ink{background:var(--_fg);color:var(--_bg);border-color:transparent}
.cms-marquee__track{display:flex;width:max-content;animation:cms-marquee-band var(--marquee-duration,38s) linear infinite}
.cms-marquee:hover .cms-marquee__track,.cms-marquee:focus-within .cms-marquee__track{animation-play-state:paused}
/* P2-c: Tastatur-Pausenweg — die Wurzel ist fokussierbar (tabindex=0),
   der Fokus haelt die Spur an wie der Mauszeiger; sichtbarer Ring. */
.cms-marquee:focus-visible{outline:2px solid currentColor;outline-offset:-3px}
.cms-marquee__list{display:flex;flex:none;align-items:center;list-style:none;margin:0;padding:0}
.cms-marquee__item{display:flex;align-items:center;gap:2rem;margin:0;padding:0 1rem;font-size:.74rem;font-weight:600;letter-spacing:.14em;white-space:nowrap}
.cms-marquee--upper .cms-marquee__item{text-transform:uppercase}
.cms-marquee__sep{color:var(--_accent)}
.cms-marquee--accent .cms-marquee__sep,.cms-marquee--ink .cms-marquee__sep{color:inherit;opacity:.7}
.cms-main>.cms-marquee{margin-block:0;max-width:none;padding-inline:0}
/* Reduced motion: das Band steht, die Kopie verschwindet, die Zeile
   bricht als ruhige Liste um. */
@media(prefers-reduced-motion:reduce){.cms-marquee__track{animation:none!important;width:auto}.cms-marquee__list[aria-hidden]{display:none}.cms-marquee__list{flex-wrap:wrap;justify-content:center;row-gap:.4rem}.cms-marquee__item{white-space:normal}}

/* ── Heading kicker + ornament (Phase 3.2) — Redesign Kicker/SectionTitle/Ornament ── */
.cms-kicker{margin:0 0 .65rem;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.3;color:var(--color-kicker,var(--_accent))}
/* Abschnittsmarke: eine Linie ueber die ganze Breite, darunter
   Nummer und Bezeichnung, still statt farbig. So beginnt in der
   Referenz JEDER Abschnitt des klaren Entwurfs; bei uns stand dort
   ein roter Kicker ohne Linie (Tims Befund 2026-09-14). Die Linie
   nimmt die Tinte, nicht die Rahmenfarbe - sie gliedert die Seite,
   sie trennt nicht nur. */
.cms-heading--marke{border-top:1px solid var(--_fg);padding-top:1rem;margin-bottom:2.5rem;max-width:none}
.cms-heading--marke .cms-kicker{color:var(--color-ink-3,var(--_muted));letter-spacing:.2em;margin:0}
.cms-heading--marke>:is(h1,h2,h3,h4){margin-top:.75rem}
/* Eine grosse, aber RUHIGE Textzeile: die Referenz stellt den
   Einstieg eines Abschnitts als Satz in der Anzeigeschrift hin —
   kleiner als eine H2 und mit Zeilenabstand zum Lesen. Die
   Lesebreite gilt hier nicht: der Satz IST der Abschnitt. */
.cms-heading--lead{font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.3;letter-spacing:var(--display-tracking,-.02em);max-width:none;text-wrap:balance}
/* Der Name auf einer Karte. Die Referenz setzt ihn in derselben
   Anzeigeschrift, aber deutlich groesser als unser h3 und eng
   gesetzt (leading-tight): gemessen 38,4px gegen 25,6px bei
   1660px Fensterbreite, Hauskarte von „Kupfer & Nacht“,
   2026-09-15. Die Ebene bleibt h3 - das hier ist eine GROESSE. */
.cms-heading--karte{font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.25;letter-spacing:var(--display-tracking,-.02em);max-width:none;text-wrap:balance}
/* Der Abschnittstitel der Unterseiten: die Referenz setzt ihn ueberall
   als SectionTitle, clamp(1.9rem,3.6vw,3.4rem), OHNE die Skalierung,
   die der Startseite ihre Wucht gibt. Gemessen 2026-09-15: 54,4px in
   der Referenz gegen 72px bei uns (Kupfer & Nacht, 1660px). */
.cms-heading--abschnitt{font-size:clamp(1.9rem,3.6vw,3.4rem);line-height:1.1;letter-spacing:var(--display-tracking,-.024em)}
/* Der Seitentitel im Kopf der Unterseiten (dkn, 2026-09-15): 70-74px, eng, ohne
   die 48rem-Grenze der Ueberschrift. */
.cms-heading--seite{font-size:clamp(2.6rem,4.5vw,4.5rem);line-height:1;letter-spacing:var(--display-tracking,-.03em);max-width:none;text-wrap:balance}
/* Die Haarlinie trennt INHALT: helle Rahmenfarbe statt der starken
   Linie, die in den klaren Themes die Tinte ist - drei davon
   untereinander sahen aus wie ein Raster. */
.cms-divider--haar{border-top-color:var(--_border);margin:2rem 0 1.25rem}
.cms-section--on-dark .cms-kicker{color:inherit;opacity:.8}
.cms-heading__ornament{margin:.35rem 0 1.15rem;line-height:0}
/* inline-flex: das Ornament folgt der Textausrichtung des Kopfes. */
.cms-heading__ornament .cms-ornament{display:inline-flex}

/* ── Menu leader „dotted“ (Phase 3.2) — Redesign .dotted-leader ── */
.cms-menu--leader-dotted .cms-menu__leader{border-bottom:0;align-self:stretch;margin:0 .35rem;min-width:1.5rem;background-image:radial-gradient(currentColor 1px,transparent 1px);background-size:5px 5px;background-position:bottom 5px left 0;background-repeat:repeat-x;color:var(--_muted);opacity:.7}

/* ── Section texture „paper“ (Phase 3.2) — Redesign .paper; als ::before, damit die background-Kurzform sie nicht loescht ── */
.cms-section--paper,.cms-paper{position:relative}
/* Eine Haarlinie als ABSCHLUSS des Abschnitts: die Referenz trennt
   ihren Seitenkopf so vom Rumpf — ohne Flaeche, ohne Farbe
   (brauhaus-neu/PageHeader: header border-b). */
.cms-section--linie-unten{border-bottom:1px solid var(--_border)}
.cms-section--linie-beide{border-top:1px solid var(--_border);border-bottom:1px solid var(--_border)}
/* Der Abschnitt als Karte: gerundet, mit Abstand zum Seitenrand (dkn
   „Tutti“, 2026-09-15: Radius 28px, 20px Rand). */
.cms-section--karte{margin-inline:1.25rem;border-radius:var(--_radius,1.75rem);overflow:hidden}
.cms-section--linie-oben{border-top:1px solid var(--_border)}
/* Eine Linie, die AUSLAEUFT: von der Markenfarbe links nach
   durchsichtig rechts. Der dunkle Entwurf trennt damit Schlagzeile
   und Text und schliesst jede Hauskarte damit ab (`CopperRule`). */
.cms-divider--fade{border:0;height:1px;margin:1.75rem 0;background:linear-gradient(90deg,var(--_primary),color-mix(in srgb,var(--_primary) 15%,transparent) 60%,transparent)}
.cms-section--paper::before,.cms-paper::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px),radial-gradient(rgba(0,0,0,.025) 1px,transparent 1px);background-size:7px 7px,11px 11px;background-position:0 0,3px 4px}
.cms-section--on-dark.cms-section--paper::before,.cms-navbar--dark.cms-paper::before,.cms-footer--dark.cms-paper::before{background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px),radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px)}
/* Der Inhalt gehoert UEBER die Textur: das Punktraster liegt absolut,
   nicht positionierte Kinder lägen sonst darunter. */
.cms-paper>*{position:relative;z-index:1}

/* ── Navbar lockup + pill buttons (Phase 3.2) — Redesign-Chrome ── */
/* Lockup erst ab dem Desktop-Umbruch: darunter gilt die Zeile mit Burger. */
@media(min-width:769px){.cms-navbar--lockup:not(.cms-navbar--bp-lg) .cms-navbar__inner{flex-direction:column;align-items:center;gap:.7rem;padding-block:1.6rem 0}.cms-navbar--lockup:not(.cms-navbar--bp-lg) .cms-navbar__nav{margin-left:0;justify-content:center;flex-wrap:wrap;gap:1.6rem;align-self:auto;width:100%;margin-top:.6rem;padding-block:.95rem;border-top:1px solid color-mix(in srgb,var(--_border) 55%,transparent)}.cms-navbar--lockup:not(.cms-navbar--bp-lg) .cms-navbar__actions{margin-left:.75rem}}
@media(min-width:1024px){.cms-navbar--lockup.cms-navbar--bp-lg .cms-navbar__inner{flex-direction:column;align-items:center;gap:.7rem;padding-block:1.6rem 0}.cms-navbar--lockup.cms-navbar--bp-lg .cms-navbar__nav{margin-left:0;justify-content:center;flex-wrap:wrap;gap:1.6rem;align-self:auto;width:100%;margin-top:.6rem;padding-block:.95rem;border-top:1px solid color-mix(in srgb,var(--_border) 55%,transparent)}.cms-navbar--lockup.cms-navbar--bp-lg .cms-navbar__actions{margin-left:.75rem}}
/* Gemessen an der Referenz: Marke und Logo stehen dort deutlich kleiner,
   die Navigation eine Stufe unter dem Fliesstext. Vorher las sich der
   Kopf wie ein Plakat und alles klebte aneinander. */
.cms-navbar--lockup .cms-navbar__brand{font-size:1.35rem}
.cms-navbar--lockup .cms-navbar__logo{height:56px}
.cms-navbar--lockup .cms-navbar__item{font-size:.8rem}
/* Der Handlungsaufruf folgt der Navigation: dieselbe Laufweite, dieselbe
   Schreibung. Ohne das steht ein gemischtschreibender Knopf neben
   Versalien. */
.cms-navbar--lockup .cms-navbar__cta{font-size:.78rem;padding:.7rem 1.25rem;letter-spacing:var(--nav-tracking,.06em);text-transform:var(--nav-case,none)}
.cms-navbar__tagline{margin:0;font-family:var(--font-heading,inherit);font-style:italic;font-size:.88rem;opacity:.8;text-align:center}
@media(max-width:768px){.cms-navbar__tagline{display:none}}
@media(max-width:1023px){.cms-navbar--bp-lg .cms-navbar__tagline{display:none}}
.cms-navbar--pill .cms-navbar__cta{border-radius:999px;padding:.55rem 1.3rem}
.cms-navbar--pill .cms-navbar__cta.btn-ghost{border-color:color-mix(in srgb,currentColor 35%,transparent)}
.cms-navbar--pill .cms-navbar__cta.btn-ghost:hover{border-color:currentColor;background:transparent}


@media(min-width:769px){
  .cms-navbar--logo-mitte:not(.cms-navbar--bp-lg) .cms-navbar__inner{position:relative;display:flex;align-items:center}
  .cms-navbar--logo-mitte:not(.cms-navbar--bp-lg) .cms-navbar__brand{position:absolute;left:50%;transform:translateX(-50%);z-index:1}
  .cms-navbar--logo-mitte:not(.cms-navbar--bp-lg) .cms-navbar__nav{width:100%;margin-left:0}
  .cms-navbar--logo-mitte:not(.cms-navbar--bp-lg) .cms-navbar__actions{margin-left:auto}
  .cms-navbar--event:not(.cms-navbar--bp-lg){position:relative;padding-top:0}
  .cms-navbar--event:not(.cms-navbar--bp-lg) .cms-navbar__topbar{position:absolute;inset:0;pointer-events:none;background:transparent;border:0}
  .cms-navbar--event:not(.cms-navbar--bp-lg) .cms-navbar__topbar-inner{height:100%;justify-content:center;gap:1rem;padding-inline:14rem}
  .cms-navbar--event:not(.cms-navbar--bp-lg) .cms-navbar__topbar-inner>*{pointer-events:auto}
  .cms-navbar--event:not(.cms-navbar--bp-lg) .cms-navbar__inner{min-height:5.5rem}
  .cms-navbar--event:not(.cms-navbar--bp-lg) .cms-navbar__nav{margin-left:auto}
  .cms-navbar--event:not(.cms-navbar--bp-lg) .cms-navbar__nav>.cms-navbar__item{display:none}
}
@media(min-width:1024px){
  .cms-navbar--logo-mitte.cms-navbar--bp-lg .cms-navbar__inner{position:relative;display:flex;align-items:center}
  .cms-navbar--logo-mitte.cms-navbar--bp-lg .cms-navbar__brand{position:absolute;left:50%;transform:translateX(-50%);z-index:1}
  .cms-navbar--logo-mitte.cms-navbar--bp-lg .cms-navbar__nav{width:100%;margin-left:0}
  .cms-navbar--logo-mitte.cms-navbar--bp-lg .cms-navbar__actions{margin-left:auto}
  .cms-navbar--event.cms-navbar--bp-lg{position:relative;padding-top:0}
  .cms-navbar--event.cms-navbar--bp-lg .cms-navbar__topbar{position:absolute;inset:0;pointer-events:none;background:transparent;border:0}
  .cms-navbar--event.cms-navbar--bp-lg .cms-navbar__topbar-inner{height:100%;justify-content:center;gap:1rem;padding-inline:14rem}
  .cms-navbar--event.cms-navbar--bp-lg .cms-navbar__topbar-inner>*{pointer-events:auto}
  .cms-navbar--event.cms-navbar--bp-lg .cms-navbar__inner{min-height:5.5rem}
  .cms-navbar--event.cms-navbar--bp-lg .cms-navbar__nav{margin-left:auto}
  .cms-navbar--event.cms-navbar--bp-lg .cms-navbar__nav>.cms-navbar__item{display:none}
}
@media(max-width:768px){.cms-navbar--event .cms-navbar__topbar-inner{justify-content:center;text-align:center}.cms-navbar--event .cms-navbar__topbar-note{margin-left:0}}
@media(max-width:1023px){.cms-navbar--event.cms-navbar--bp-lg .cms-navbar__topbar-inner{justify-content:center;text-align:center}.cms-navbar--event.cms-navbar--bp-lg .cms-navbar__topbar-note{margin-left:0}}
/* ── Footer „two rows“ (Phase 3.2) — Marke zentriert, Spalten darunter, optional Ornament ── */
.cms-footer__ornament{max-width:var(--_container);margin:0 auto 2.25rem}
.cms-footer__brand-row{max-width:var(--_container);margin:0 auto 2.75rem;display:flex;flex-direction:column;align-items:center;text-align:center}
.cms-footer__brand-row .cms-footer__brand{align-items:center;max-width:34rem}
/* Das Logo traegt `align-self:flex-start` — im Raster-Fuss steht die
   Marke in der ersten Spalte und gehoert nach links. In der ZWEI-
   REIHIGEN Form ist die Marke die Mitte, und `align-self` am Kind
   sticht das `align-items:center` der Huelle: das Logo stand links
   neben einem zentrierten Ornament und einem zentrierten Claim
   (Tims Befund 2026-09-14). */
.cms-footer__brand-row .cms-footer__logo{align-self:center}
.cms-footer__brand-row .cms-footer__blurb{max-width:48ch}
.cms-footer--two-row .cms-footer__inner{padding-top:2.75rem;border-top:1px solid rgba(255,255,255,.12)}
.cms-footer--light.cms-footer--two-row .cms-footer__inner{border-top-color:var(--_border)}

/* ── Hero band (Phase 3.2) — Inhalt unten, Verlauf in den Seitenhintergrund ── */
.cms-hero--bottom{justify-content:flex-end;padding-bottom:clamp(2.5rem,5vw,4rem)}
.cms-hero__overlay--fade{background:linear-gradient(180deg,color-mix(in srgb,var(--_bg) 55%,transparent) 0%,color-mix(in srgb,var(--_bg) 45%,transparent) 45%,color-mix(in srgb,var(--_bg) 72%,transparent) 72%,var(--_bg) 100%)}
/* Phase 3.3: der Schleier ist der Seitengrund des Themes, nicht hart schwarz — auf hellen Themes ein heller Nebel. Die Schrift folgt deshalb der Tinte des Themes statt dem harten Weiss des Blocks (renderHero laesst textColor bei fade weg). */
.cms-hero:has(>.cms-hero__overlay--fade){color:var(--_fg)}
.cms-hero:has(>.cms-hero__overlay--fade) .cms-hero__title{text-shadow:none}

/* ── Section reveal (Phase 3.2) — Redesign .reveal; versteckt wird NUR unter html.cms-reveal-js, das REVEAL_JS setzt (ohne JS bleibt alles sichtbar) ── */
.cms-reveal-js .cms-reveal{transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.cms-reveal-js .cms-reveal:not(.is-in){opacity:0;transform:translateY(22px)}
@media(prefers-reduced-motion:reduce){.cms-reveal-js .cms-reveal{transition:none}.cms-reveal-js .cms-reveal:not(.is-in){opacity:1;transform:none}}

/* ── Abschnitts-Leiste (section-nav) — klebende Sprungleiste ── */
.cms-section-nav{background:var(--_bg);border-bottom:1px solid color-mix(in srgb,var(--_border) 70%,transparent);z-index:30}
/* Standard ist OBEN BUENDIG. Der alte Standard 4.25rem war die Hoehe einer
   KLEBENDEN Kopfzeile; bei einer nicht klebenden (Lockup) schwebte die
   Leiste dadurch mitten im Inhalt — Tims Befund 2026-09-13. Wer eine
   klebende Kopfzeile hat, setzt --cms-section-nav-top auf deren Hoehe. */
.cms-section-nav--sticky{position:sticky;top:var(--cms-section-nav-top,0)}
/* Hinter dem letzten Sprungziel hoert das Kleben auf — die Laufzeit
   setzt die Klasse. Die Leiste verschwindet nicht, sie steht nur
   wieder an ihrem Platz im Fluss; darum ruckt nichts. */
.cms-section-nav--sticky.cms-section-nav--vorbei{position:static}
.cms-section-nav__inner{max-width:var(--_container);margin:0 auto;display:flex;align-items:center;gap:.25rem;padding-inline:1.25rem}
/* Die Pfeile erscheinen NUR bei Ueberlauf — die Laufzeit nimmt ihnen
   das hidden-Attribut. Ohne JS bleibt die Zeile waagerecht scrollbar, also
   erreichbar; die Pfeile sind Bequemlichkeit, keine Bedingung. */
.cms-section-nav__chevron{flex:none;width:1.9rem;height:1.9rem;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;background:transparent;color:var(--_muted);font-size:1.15rem;line-height:1;cursor:pointer;transition:color .15s,background .15s}
.cms-section-nav__chevron:hover:not(:disabled){color:var(--_primary);background:color-mix(in srgb,var(--_primary) 10%,transparent)}
/* Ohne diese Zeile ist das hidden-Merkmal der Laufzeit WIRKUNGSLOS: der
   Standard des Browsers (hidden blendet aus) steht im
   Benutzeragenten-Stil und verliert gegen jede eigene
   display-Angabe — die Pfeile standen also immer da, auch wenn die
   Zeile bequem passte. Gemessen: prev.hidden === true bei
   display:flex und einer Box von 30,4x30,4. Tims Befund 2026-09-13. */
.cms-section-nav__chevron[hidden]{display:none}
.cms-section-nav__chevron--prev{order:0}
.cms-section-nav__chevron--next{order:2}
.cms-section-nav__chevron:disabled{opacity:.3;cursor:default}
.cms-section-nav__chevron:focus-visible{outline:3px solid color-mix(in srgb,var(--_primary) 35%,transparent);outline-offset:2px}
/* Der Nullwert oben ist hier keine Kosmetik: die Schiene ist eine LISTE, und
   der Listen-Aussenabstand des Grundstils (gemessen 17px unten) machte
   die Zeile 64px hoch, waehrend die Schiene selbst 47px hoch ist. Die
   Pfeile richteten sich an den 64px aus, die Beschriftungen an den 47 —
   sie standen 8,5px tiefer als die Schrift. Tims Befund 2026-09-13. */
.cms-section-nav__rail{order:1;flex:1 1 auto;min-width:0;margin:0;scroll-behavior:smooth;padding:.55rem 0;list-style:none;display:flex;gap:.25rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cms-section-nav__rail::-webkit-scrollbar{display:none}
.cms-section-nav__rail>li{flex:none;margin:0;list-style:none}
.cms-section-nav--center .cms-section-nav__rail{justify-content:center}
.cms-section-nav__item{display:block;white-space:nowrap;padding:.5rem .9rem;border-radius:var(--_radius-btn,var(--_radius));font-size:.7rem;font-weight:600;line-height:1.2;letter-spacing:var(--nav-tracking,.1em);text-transform:uppercase;color:var(--_muted);text-decoration:none;transition:color .15s,background .15s}
.cms-section-nav__item:hover{color:var(--_primary);background:color-mix(in srgb,var(--_primary) 8%,transparent);text-decoration:none}
.cms-section-nav__item--active,.cms-section-nav__item--active:hover{background:var(--_primary);color:var(--_on-primary)}
.cms-section-nav__item:focus-visible{outline:3px solid color-mix(in srgb,var(--_primary) 35%,transparent);outline-offset:2px}
/* Die Leiste spannt ueber die ganze Breite. Das Breitenmodell gibt jedem
   Block auf oberster Ebene Lesebreite und einen Aussenabstand — fuer eine
   Leiste, die oben kleben soll, ist beides falsch. Gleiche Spezifitaet
   wie dort, aber spaeter notiert: sie gewinnt. */
.cms-main>.cms-section-nav{margin-block:0;max-width:none;padding-inline:0}
/* Gesprungen wird UNTER die klebende Leiste, nicht dahinter: die Hoehe der
   Kopfzeile plus die der Leiste selbst. */
:target{scroll-margin-top:calc(var(--cms-section-nav-top,0px) + 3.5rem)}
/* ── Speisekarte: zwei Spalten, Merkmals-Chips, editorialer Rubrik-Kopf ── */
/* Zweispaltig braucht mehr Platz als die schmale Signatur-Spalte (48rem);
   beide Zeilen ueberstimmen genau die zwei Stellen, die sie deckeln. */
.cms-menu--cols-2{max-width:64rem}
.cms-main>.cms-menu--cols-2{max-width:64rem}
.cms-menu--cols-2 .cms-menu__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:3.5rem;align-items:start}
@media(max-width:720px){.cms-menu--cols-2 .cms-menu__list{grid-template-columns:1fr;column-gap:0}}
/* Merkmale als Chips UNTER dem Gericht. Eine leere Chip-Zeile gibt es
   nicht: ohne Merkmale gibt der Renderer die Liste gar nicht erst aus. */
.cms-menu__chips{margin-top:.5rem;gap:.35rem}
.cms-menu__chips .cms-tag{font-size:.6rem;padding:.16rem .5rem}
/* Rubrik-Kopf „editorial“: Augenbraue, grosse Ueberschrift, Ornament,
   Beschreibung — zentriert, waehrend die Gerichte linksbuendig bleiben. */
.cms-menu__head{margin:0 0 1.9rem;text-align:center}
.cms-menu__kicker{margin:0 0 .55rem}
.cms-menu__ornament{margin:.9rem 0 0;line-height:0}
.cms-menu__ornament .cms-ornament{display:inline-flex}
.cms-menu--head-editorial .cms-menu__section{margin-bottom:4rem}
.cms-menu--head-editorial .cms-menu__head .cms-menu__title{font-family:var(--font-heading,inherit);font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.1;margin:0}
.cms-menu--head-editorial .cms-menu__head .cms-menu__title::after{content:none}
.cms-menu--head-editorial .cms-menu__head .cms-menu__note{margin:.9rem auto 0;max-width:34rem;font-size:.95rem}
/* ── Preistabelle als Menuekarte ── */
/* Die Referenz stellt eine RUHIGE Karte hin: rechteckig, eine feine
   Linie, kein Schatten, und vor allem LINKSBUENDIG. Der Abschnitt
   darueber ist zentriert und setzt text-align INLINE auf seinen
   Innenbehaelter — die Karte erbt das. Gemessen am 2026-09-13:
   text-align war 'center', die Gaenge standen mittig neben ihren
   Ziffern. Eine Angabe AM Element schlaegt jeden geerbten Wert,
   deshalb reicht die eine Zeile. Dieselbe Lehre wie bei
   Zeile .cms-menu,.cms-hours,... im Grundstil, die links ausrichtet. */
.cms-pricing--menu{gap:clamp(1.5rem,3vw,2rem)}
.cms-pricing--menu .cms-pricing__plan{padding:clamp(1.75rem,3vw,2.5rem);border-radius:0;border-color:var(--_border);box-shadow:none;text-align:left;background:var(--_surface)}
.cms-pricing--menu .cms-pricing__plan--highlighted{box-shadow:none}
@media(min-width:1024px){.cms-pricing--menu .cms-pricing__plan--highlighted{transform:none}}
.cms-pricing--menu .cms-pricing__badge{position:static;transform:none;display:inline-block;align-self:flex-start;margin:0 0 .9rem;background:transparent;color:var(--_muted);border:1px solid color-mix(in srgb,var(--_border) 80%,transparent);font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.18rem .55rem;border-radius:max(0px,calc(var(--_radius) - .5rem))}
.cms-pricing__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.cms-pricing--menu .cms-pricing__name{margin:0;font-family:var(--font-heading,inherit);font-size:clamp(1.35rem,2.4vw,1.7rem);line-height:1.15;color:inherit}
.cms-pricing--menu .cms-pricing__price{margin:0;font-size:clamp(1.15rem,2vw,1.4rem);font-weight:700;letter-spacing:0;color:var(--_primary)}
.cms-pricing--menu .cms-pricing__desc{margin:.5rem 0 0;font-size:.9rem}
/* Die Gaenge: nummeriert ueber einen Zaehler, damit die Ziffer nicht im
   Text steht und beim Umsortieren richtig bleibt. */
/* Der Gang ist eine ZEILE aus Ziffer und Text, kein zweispaltiges
   Raster: die Ziffer nimmt ihre natuerliche Breite und der Text
   beginnt direkt dahinter. Die feste Spalte von 1.75rem trieb die
   Ziffer vom Text weg — zusammen mit der geerbten Zentrierung war
   das der Eindruck loser Zahlen. Die Ziffer sitzt am OBEREN Rand
   der ersten Zeile (kleines Polster statt Grundlinie), sonst haengt
   sie bei mehrzeiligen Gaengen zu tief. */
.cms-pricing__courses{list-style:none;margin:1.5rem 0 0;padding:0;flex:1;counter-reset:cms-course}
.cms-pricing__courses>li{display:flex;align-items:flex-start;gap:1rem;margin:0;padding:0;font-size:.95rem;line-height:1.65;color:var(--_muted)}
.cms-pricing__courses>li+li{margin-top:1rem}
.cms-pricing__courses>li::before{counter-increment:cms-course;content:counter(cms-course);flex:none;padding-top:.3rem;font-size:.6rem;font-weight:600;letter-spacing:.08em;color:var(--color-ink-3,var(--_muted));font-variant-numeric:tabular-nums}
.cms-pricing__note{margin:1.75rem 0 0;font-size:.82rem;color:var(--color-ink-3,var(--_muted))}
/* Die Gaenge duerfen die Fussnote NICHT nach unten druecken: im
   Tarifvergleich schiebt flex:1 die Schaltflaechen aller Karten auf
   eine Linie, hier entstuende bloss ein Loch zwischen letztem Gang
   und Fussnote (gemessen an der kuerzeren der beiden Karten). Die
   Karte bleibt trotzdem so hoch wie ihre Nachbarin — dafuer sorgt
   align-items:stretch am Raster. */
.cms-pricing--menu .cms-pricing__courses{flex:0 1 auto}
.cms-pricing--menu .cms-pricing__cta{margin-top:1.5rem}
/* ── Knopf in Versalien ── */
.btn--caps{text-transform:uppercase;letter-spacing:var(--nav-tracking,.1em);font-size:.78rem;font-weight:600}
.btn-lg.btn--caps{font-size:.84rem}
/* ── Gebundene Speisekarte: Ladezustand, Leerzustand, Stoerung ── */
.cms-menu-live__kandidaten{display:none}
.cms-menu-live[data-live-stand="bereit"] .cms-menu-live__kandidaten{display:block}
.cms-menu-live__laedt,.cms-menu-live__fehler,.cms-menu-live__leer{display:none;margin:0;padding:2rem 0;text-align:center;color:var(--color-ink-3,var(--_muted))}
.cms-menu-live[data-live-skript][data-live-stand="laedt"] .cms-menu-live__laedt{display:block}
.cms-menu-live[data-live-stand="fehler"] .cms-menu-live__fehler{display:block}
.cms-menu-live[data-live-stand="leer"] .cms-menu-live__leer{display:block}
.cms-menu-live__hinweis{margin:0;padding:2rem 0;text-align:center;color:var(--color-ink-3,var(--_muted))}
.cms-menu-live__link{text-decoration:underline}
.cms-menu-live [data-karte][hidden],.cms-menu-live [data-gericht][hidden]{display:none!important}
/* ── Spielplan (event-grid: leporello / band / register / kacheln) ── */
/* Lesebreite und seitlicher Einzug wie bei den uebrigen Rasterbloecken.
   Das Breitenmodell kennt diese Klasse nicht (sie steht nicht in seiner
   :is()-Liste), also gaebe ihr nur .cms-main>* einen Aussenabstand und
   sonst nichts — der Spielplan liefe bis an den Fensterrand. */
.cms-main>.cms-spielplan{max-width:var(--_container);margin-inline:auto;padding-inline:1.25rem}
.cms-spielplan>h2{margin:0 0 1.5rem;max-width:48rem}
/* Ein ausgeblendeter Termin verschwindet WIRKLICH: die Zeilen tragen
   display:grid bzw. display:flex, und eine blosse Klassenregel (0,1,0)
   schlaegt das UA-Standardverhalten von [hidden]. Diese Regel hat (0,2,0)
   und gewinnt gegen die Anordnungsregeln weiter unten. */
.cms-spielplan [hidden]{display:none}
.cms-spielplan__empty{margin:2.5rem 0 0;text-align:center;color:var(--_muted);font-size:.95rem}

/* Filterleiste — Monate und Kategorien, aus den Terminen abgeleitet. */
.cms-spielplan__filters{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;margin:0 0 1.75rem;padding-bottom:1rem;border-bottom:1px solid var(--_border)}
.cms-spielplan__group{display:flex;flex-wrap:wrap;gap:.5rem}
.cms-spielplan__chip{appearance:none;border:1px solid var(--_border);background:transparent;color:var(--_muted);border-radius:var(--_radius-btn);padding:.625rem 1rem;font:inherit;font-size:.66rem;font-weight:600;line-height:1.2;letter-spacing:var(--nav-tracking,.08em);text-transform:uppercase;cursor:pointer;transition:color .15s,background .15s,border-color .15s}
.cms-spielplan__chip:hover{color:var(--_primary);border-color:color-mix(in srgb,var(--_primary) 45%,var(--_border))}
.cms-spielplan__chip--active,.cms-spielplan__chip--active:hover{background:var(--_primary);border-color:var(--_primary);color:var(--_on-primary)}
.cms-spielplan__chip:focus-visible{outline:3px solid color-mix(in srgb,var(--_primary) 35%,transparent);outline-offset:2px}

/* ── Leporello — Datum links gross, Programm rechts, Trennlinien ── */
.cms-spielplan__rows{display:block;border-top:1px solid var(--_border)}
.cms-spielplan-row{display:flex;align-items:center;gap:1.5rem;padding:1.6rem 0;border-bottom:1px solid var(--_border);color:inherit;text-decoration:none;transition:background .18s}
.cms-spielplan-row:hover{background:color-mix(in srgb,var(--_primary) 4%,transparent);text-decoration:none}
/* Feste Breite, nicht bloss Inhaltsbreite: sonst haette „3" eine andere
   Spalte als „30" und die Titel staenden nicht mehr untereinander. */
.cms-spielplan-row__date{flex:none;width:5.5rem;display:flex;flex-direction:column;align-items:flex-start;line-height:1;font-variant-numeric:tabular-nums}
.cms-spielplan-row__date-day{font-family:var(--font-heading,inherit);font-size:clamp(2.2rem,4.5vw,3.1rem);font-weight:var(--display-weight,500);letter-spacing:var(--display-tracking,-.01em);color:var(--_fg)}
.cms-spielplan-row__date-month{margin-top:.3rem;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--_muted)}
/* Das Bild bleibt klein: in dieser Anordnung fuehrt die Typografie, das
   Foto ist Beiwerk. Wer grosse Bilder will, nimmt die Baender. */
.cms-spielplan-row__img{flex:none;width:5.5rem;height:5.5rem;object-fit:cover;border-radius:var(--_radius)}
.cms-spielplan-row__body{flex:1 1 auto;min-width:0}
.cms-spielplan-row__kicker{margin:0 0 .3rem;font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-kicker,var(--_primary))}
.cms-spielplan-row__title{margin:0;font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.25}
/* Die Zeile der Referenz auf ihrer Veranstaltungsseite: Datum und
   Uhrzeit still links, Kategorie, Titel und Beschreibung in der Mitte,
   Preis und Karten rechts - drei Spalten unter einer Haarlinie, ohne
   Kachel und ohne Bild (brauhaus-neu/Events.tsx). */
.cms-spielplan--still .cms-spielplan__rows{border-top:1px solid var(--_fg);gap:0}
/* In der stillen Fassung traegt die LISTE die Linie - die
   Filterleiste darueber braucht dann keine eigene, sonst stehen
   zwei Striche kurz untereinander (Tims Befund 2026-09-15). Die
   Referenz laesst 48px Luft zwischen Knoepfen und Liste. */
.cms-spielplan--still .cms-spielplan__filters{border-bottom:0;padding-bottom:0;margin-bottom:3rem}
/* Die Kategorie ueber dem Titel steht still, nicht halbfett. */
.cms-spielplan-row--still .cms-spielplan-row__kicker{font-weight:400}
/* Das Schild neben der Kategorie: Rahmen in der eigenen Farbe,
   Versalien, winzig — die Form der Referenz. */
.cms-spielplan-row--still .cms-spielplan-row__kicker{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.cms-spielplan-row__status{border:1px solid currentColor;color:var(--color-kicker,var(--_accent));font-size:.58rem;font-weight:600;letter-spacing:var(--nav-tracking,.1em);text-transform:uppercase;padding:.18rem .45rem;line-height:1.4}
/* WECHSEL: eine Reihe je Termin, halb Foto, halb Text, ohne Fuge
   und ohne Rundung - und die Seiten tauschen von Zeile zu Zeile.
   So baut der dunkle Entwurf sein Programm; bei uns standen dort
   gerundete Karten mit Luecke (Tims Befund 2026-09-15). */
.cms-spielplan__wechsel{display:flex;flex-direction:column;gap:1px}
.cms-spielplan-wechsel{display:grid;background:var(--_surface);color:inherit;text-decoration:none}
.cms-spielplan-wechsel:hover{text-decoration:none}
.cms-spielplan-wechsel__img{width:100%;height:100%;min-height:240px;object-fit:cover;display:block;filter:grayscale(30%);transition:filter .6s ease}
.cms-spielplan-wechsel:hover .cms-spielplan-wechsel__img{filter:grayscale(0)}
.cms-spielplan-wechsel__img--empty{background:color-mix(in srgb,var(--_fg) 12%,transparent);filter:none}
.cms-spielplan-wechsel__body{display:flex;flex-direction:column;justify-content:center;padding:clamp(2rem,4vw,3.5rem)}
.cms-spielplan-wechsel__kickerrow{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.cms-spielplan-wechsel__kicker{background:var(--_primary);color:var(--_on-primary);font-size:.62rem;font-weight:600;letter-spacing:var(--nav-tracking,.1em);text-transform:uppercase;padding:.375rem .75rem}
.cms-spielplan-wechsel__status{font-size:.62rem;font-weight:600;letter-spacing:var(--nav-tracking,.1em);text-transform:uppercase;color:var(--_accent)}
.cms-spielplan-wechsel__title{font-family:var(--font-heading,inherit);font-size:clamp(1.6rem,3.2vw,2.6rem);font-weight:var(--display-weight,700);line-height:1.02;letter-spacing:var(--display-tracking,-.01em);margin:1.25rem 0 0}
.cms-spielplan-wechsel__text{margin:1rem 0 0;max-width:28rem;font-size:.98rem;line-height:1.7;color:var(--color-ink-2,var(--_muted))}
.cms-spielplan-wechsel__facts{display:flex;flex-wrap:wrap;gap:.75rem 2.5rem;margin:1.75rem 0 0;font-size:.85rem}
.cms-spielplan-wechsel__facts dt{font-size:.58rem;font-weight:600;letter-spacing:var(--nav-tracking,.1em);text-transform:uppercase;color:var(--color-ink-3,var(--_muted))}
.cms-spielplan-wechsel__facts dd{margin:.25rem 0 0;font-variant-numeric:tabular-nums}
@media(min-width:768px){
.cms-spielplan-wechsel{grid-template-columns:1fr 1fr;align-items:stretch}
.cms-spielplan-wechsel__img{min-height:380px}
.cms-spielplan-wechsel:nth-child(even)>.cms-spielplan-wechsel__img{order:2}
}
.cms-spielplan-row--still{display:grid;grid-template-columns:1fr;gap:1rem 2rem;align-items:start;border:0;border-bottom:1px solid var(--_border);border-radius:0;background:none;box-shadow:none;padding:2rem 0}
.cms-spielplan-row--still:hover{background:none;transform:none;box-shadow:none}
.cms-spielplan-row--still .cms-spielplan-row__when{display:flex;flex-direction:column;gap:.25rem;font-size:.88rem;font-variant-numeric:tabular-nums;color:var(--color-ink-3,var(--_muted))}
.cms-spielplan-row--still .cms-spielplan-row__kicker{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--color-ink-3,var(--_muted));margin:0}
.cms-spielplan-row--still .cms-spielplan-row__title{font-family:var(--font-heading,inherit);font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.15;margin:.5rem 0 0}
.cms-spielplan-row--still .cms-spielplan-row__text{margin:.75rem 0 0;max-width:42rem;font-size:.95rem;line-height:1.6;color:var(--color-ink-2,var(--_muted))}
.cms-spielplan-row--still .cms-spielplan-row__right{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem}
.cms-spielplan-row--still .cms-spielplan-row__price{background:none;padding:0;font-size:.95rem;font-weight:400;color:inherit}
.cms-spielplan-row--still .cms-spielplan-row__venue{font-size:.85rem;color:var(--color-ink-3,var(--_muted))}
.cms-spielplan-row--still .cms-spielplan-row__cta{border:0;border-bottom:1px solid var(--_fg);border-radius:0;background:none;letter-spacing:0;text-transform:none;padding:0 0 .25rem;margin-top:.75rem;font-size:.85rem}
@media(min-width:768px){
.cms-spielplan-row--still{grid-template-columns:8rem 1fr 14rem}
.cms-spielplan-row--still .cms-spielplan-row__right{align-items:flex-end;text-align:right}
}
.cms-spielplan-row__meta{margin:.4rem 0 0;font-size:.9rem;color:var(--_muted)}
.cms-spielplan-row__right{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;text-align:right}
.cms-spielplan-row__price{font-size:.8rem;color:var(--_muted);font-variant-numeric:tabular-nums}
.cms-spielplan-row__cta{display:inline-block;border:1px solid var(--_border);border-radius:var(--_radius-btn);padding:.45rem 1rem;font-size:.72rem;font-weight:600;letter-spacing:var(--nav-tracking,.08em);text-transform:uppercase;white-space:nowrap;transition:background .18s,color .18s,border-color .18s}
.cms-spielplan-row:hover .cms-spielplan-row__cta{background:var(--_primary);border-color:var(--_primary);color:var(--_on-primary)}

/* ── Band — ein vollflaechiges Bild je Termin ── */
/* Volle Breite: das Band ist der Gegenentwurf zur Lesespalte. Gleiche
   Spezifitaet wie die Zeile ganz oben, aber spaeter notiert — sie
   gewinnt. Der Einzug wandert in die Innenbehaelter (Weg A des
   Breitenmodells, siehe css/full-bleed-inset.spec.ts): die Huelle traegt
   KEINEN, sonst zaehlt er doppelt. */
.cms-main>.cms-spielplan--band{max-width:none;padding-inline:0}
.cms-spielplan__head{max-width:var(--_container);margin-inline:auto;padding-inline:1.25rem}
.cms-spielplan__bands{display:flex;flex-direction:column}
.cms-spielplan-band{position:relative;display:block;min-height:clamp(16rem,32vw,24rem);overflow:hidden;color:#fff;text-decoration:none}
.cms-spielplan-band__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 2.2s cubic-bezier(.16,1,.3,1)}
.cms-spielplan-band__img--empty{background:var(--_surface-alt)}
.cms-spielplan-band:hover .cms-spielplan-band__img{transform:scale(1.05)}
.cms-spielplan-band__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.18) 100%)}
.cms-spielplan-band__inner{position:relative;display:flex;align-items:center;gap:clamp(1.25rem,3vw,2.5rem);max-width:var(--_container);margin-inline:auto;padding:clamp(2.25rem,5vw,3.5rem) 1.25rem}
.cms-spielplan-band__date{display:flex;flex-direction:column;align-items:center;flex:none;line-height:1;font-variant-numeric:tabular-nums}
.cms-spielplan-band__date-day{font-family:var(--font-heading,inherit);font-size:clamp(2.8rem,7vw,4.5rem);font-weight:var(--display-weight,500);letter-spacing:var(--display-tracking,-.01em)}
.cms-spielplan-band__date-month{margin-top:.35rem;font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.cms-spielplan-band__text{min-width:0;flex:1 1 auto}
.cms-spielplan-band__kicker{margin:0 0 .45rem;font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.cms-spielplan-band__title{margin:0;color:#fff;font-size:clamp(1.4rem,3.2vw,2.4rem);line-height:1.15;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.cms-spielplan-band__meta{margin:.55rem 0 0;font-size:.95rem;opacity:.88}
.cms-spielplan-band__cta{flex:none;align-self:center;border:1px solid rgba(255,255,255,.65);border-radius:var(--_radius-btn);padding:.55rem 1.15rem;font-size:.72rem;font-weight:600;letter-spacing:var(--nav-tracking,.08em);text-transform:uppercase;white-space:nowrap;transition:background .18s,color .18s}
.cms-spielplan-band:hover .cms-spielplan-band__cta{background:#fff;color:#111}

/* ── Register — Tabelle, Schweizer Schnitt ── */
/* Die Tabelle ist der EINZIGE Block hier, der breiter werden darf als das
   Fenster; sie bekommt deshalb ihren eigenen waagerechten Rollbereich,
   damit die Seite selbst nie seitlich rollt. */
.cms-spielplan__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cms-spielplan-table{width:100%;min-width:44rem;border-collapse:collapse;font-variant-numeric:tabular-nums;text-align:left}
.cms-spielplan-table thead th{padding:0 1rem .7rem 0;border-bottom:1px solid var(--_border);font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--_muted)}
.cms-spielplan-table__row{border-bottom:1px solid var(--_border);transition:background .18s}
.cms-spielplan-table__row:hover{background:color-mix(in srgb,var(--_primary) 4%,transparent)}
.cms-spielplan-table th,.cms-spielplan-table td{padding:1.05rem 1rem 1.05rem 0;vertical-align:baseline}
.cms-spielplan-table__date{white-space:nowrap;font-weight:600}
.cms-spielplan-table__day{font-size:1.15rem}
.cms-spielplan-table__month{margin-left:.35rem;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--_muted)}
.cms-spielplan-table__time{white-space:nowrap;color:var(--_muted);font-size:.92rem}
.cms-spielplan-table__kicker{display:block;margin-bottom:.2rem;font-size:.64rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-kicker,var(--_primary))}
.cms-spielplan-table__title{display:block;font-family:var(--font-heading,inherit);font-size:1.05rem;line-height:1.3}
.cms-spielplan-table__venue{color:var(--_muted);font-size:.92rem}
.cms-spielplan-table__tickets{white-space:nowrap;text-align:right;padding-right:0}
.cms-spielplan-table__link{display:inline-block;border-bottom:1px solid currentColor;font-size:.78rem;font-weight:600;letter-spacing:var(--nav-tracking,.06em);text-transform:uppercase;text-decoration:none;color:var(--_primary)}
.cms-spielplan-table__link:hover{text-decoration:none;opacity:.7}
.cms-spielplan-table__price{display:block;margin-top:.25rem;font-size:.76rem;color:var(--_muted)}

/* ── Kacheln — Raster mit Datums-Kachel im Bild ── */
.cms-spielplan__tiles{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:var(--space-grid,1.5rem)}
.cms-spielplan-tile{margin:0}
.cms-spielplan-tile__link{display:flex;flex-direction:column;height:100%;overflow:hidden;border:1px solid var(--_border);border-radius:var(--_radius-lg);background:var(--_card);color:inherit;text-decoration:none;transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s}
.cms-spielplan-tile__link:hover{transform:translateY(-3px);box-shadow:var(--_shadow-md);text-decoration:none}
.cms-spielplan-tile__cover{position:relative;aspect-ratio:4/3;overflow:hidden}
.cms-spielplan-tile__cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.cms-spielplan-tile__link:hover .cms-spielplan-tile__cover img{transform:scale(1.04)}
.cms-spielplan-tile__date{position:absolute;top:.85rem;left:.85rem;display:flex;flex-direction:column;align-items:center;min-width:3.1rem;padding:.45rem .5rem;border-radius:var(--_radius);background:var(--_bg);color:var(--_fg);line-height:1;font-variant-numeric:tabular-nums;box-shadow:var(--_shadow-sm)}
.cms-spielplan-tile__date-day{font-family:var(--font-heading,inherit);font-size:1.4rem;font-weight:var(--display-weight,600)}
.cms-spielplan-tile__date-month{margin-top:.18rem;font-size:.6rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--_muted)}
.cms-spielplan-tile__body{display:flex;flex-direction:column;gap:.3rem;padding:1.15rem 1.25rem 1.35rem}
.cms-spielplan-tile__kicker{margin:0;font-size:.64rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-kicker,var(--_primary))}
.cms-spielplan-tile__title{margin:0;font-size:1.1rem;line-height:1.3}
.cms-spielplan-tile__meta{margin:.15rem 0 0;font-size:.85rem;color:var(--_muted)}

/* ── Schmale Fenster ── */
@media(max-width:720px){
.cms-spielplan-row{flex-wrap:wrap;gap:.9rem;padding:1.15rem 0}
.cms-spielplan-row__date{width:3.6rem}
.cms-spielplan-row__img{display:none}
.cms-spielplan-row__body{flex:1 1 60%}
.cms-spielplan-row__right{flex:1 1 100%;flex-direction:row;align-items:center;justify-content:flex-start;gap:.85rem;text-align:left}
.cms-spielplan-band__inner{flex-direction:column;align-items:flex-start;gap:.9rem}
.cms-spielplan-band__date{flex-direction:row;align-items:baseline;gap:.5rem}
.cms-spielplan-band__date-month{margin-top:0}
.cms-spielplan__tiles{grid-template-columns:1fr}
}
/* ── App-Mockup (Telefon / Browser, gezeichnet) ── */
.cms-mock{position:relative;display:flex;justify-content:center;isolation:isolate}
.cms-mock--left{justify-content:flex-start}
.cms-mock--right{justify-content:flex-end}
.cms-mock__device{position:relative;z-index:1;width:min(22rem,100%);border-radius:2.75rem;background:#171717;padding:.6rem;box-shadow:0 30px 70px -30px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.15)}
.cms-mock--browser .cms-mock__device{width:100%;border-radius:var(--_radius-lg);padding:0;background:var(--_card);box-shadow:0 24px 60px -30px rgba(0,0,0,.45),0 0 0 1px color-mix(in srgb,var(--_fg) 10%,transparent);overflow:hidden}
.cms-mock--phone .cms-mock__bar{display:flex;justify-content:center;height:1.4rem}
.cms-mock__notch{width:38%;height:1rem;border-radius:0 0 1rem 1rem;background:#0a0a0a}
.cms-mock--browser .cms-mock__bar{display:flex;align-items:center;gap:.4rem;height:2.25rem;padding:0 .9rem;background:var(--_surface-alt);border-bottom:1px solid color-mix(in srgb,var(--_border) 80%,transparent)}
.cms-mock--browser .cms-mock__bar>span{width:.6rem;height:.6rem;border-radius:999px;background:color-mix(in srgb,var(--_fg) 18%,transparent)}
.cms-mock__url{flex:1;margin-left:.6rem;padding:.25rem .7rem;border-radius:999px;background:var(--_card);font-style:normal;font-size:.7rem;color:var(--_muted);text-align:center}
.cms-mock__screen{display:flex;flex-direction:column;gap:.9rem;padding:1.1rem 1.1rem 1.25rem;border-radius:2.15rem;background:var(--_bg);color:var(--_fg);font-family:var(--font-sans,inherit)}
.cms-mock--phone .cms-mock__screen{min-height:28rem}
.cms-mock--browser .cms-mock__screen{border-radius:0;padding:1.5rem clamp(1.25rem,3vw,2.25rem) 1.75rem;min-height:18rem}
.cms-mock--dark .cms-mock__screen{background:#171717;color:#fff}
.cms-mock--dark.cms-mock--browser .cms-mock__device{background:#171717}
.cms-mock--dark.cms-mock--browser .cms-mock__bar{background:#222;border-color:rgba(255,255,255,.08)}
.cms-mock--dark.cms-mock--browser .cms-mock__bar>span{background:rgba(255,255,255,.18)}
.cms-mock--dark .cms-mock__url{background:#171717;color:rgba(255,255,255,.55)}
.cms-mock__head{display:flex;align-items:center;justify-content:space-between;font-size:.8rem;font-weight:600;letter-spacing:.02em}
.cms-mock__menu,.cms-mock__user{width:1.1rem;height:1.1rem;border-radius:999px;background:color-mix(in srgb,currentColor 18%,transparent)}
.cms-mock__menu{border-radius:.2rem;background:repeating-linear-gradient(to bottom,currentColor 0 2px,transparent 2px 5px);opacity:.55;height:.85rem}
.cms-mock__hero{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .6rem}
.cms-mock__value{font-family:var(--font-heading,inherit);font-size:1.9rem;font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.cms-mock--browser .cms-mock__value{font-size:2.4rem}
.cms-mock__delta{font-size:.8rem;font-weight:600;color:var(--_accent,var(--_primary))}
.cms-mock__delta--down{color:#ef4444}
.cms-mock__value-label{flex-basis:100%;font-size:.7rem;color:var(--_muted);opacity:.85}
.cms-mock--dark .cms-mock__value-label,.cms-mock--dark .cms-mock__row-label{color:rgba(255,255,255,.6)}
.cms-mock__chart{display:block;width:100%;height:6.5rem;color:var(--_accent,var(--_primary));overflow:visible}
.cms-mock--browser .cms-mock__chart{height:11rem}
.cms-mock__line{stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:400;stroke-dashoffset:400;animation:cms-mock-draw 1.6s cubic-bezier(.22,1,.36,1) .2s forwards}
.cms-mock__area{opacity:0;-webkit-mask-image:linear-gradient(to bottom,#000 10%,transparent 95%);mask-image:linear-gradient(to bottom,#000 10%,transparent 95%);animation:cms-mock-fade .8s ease 1.2s forwards}
@keyframes cms-mock-draw{to{stroke-dashoffset:0}}
@keyframes cms-mock-fade{to{opacity:1}}
.cms-mock__ranges{display:flex;gap:.3rem;flex-wrap:wrap}
.cms-mock__range{padding:.25rem .55rem;border-radius:999px;font-size:.66rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--_muted)}
.cms-mock__range--on{background:var(--_accent,var(--_primary));color:var(--_on-accent,var(--_on-primary,#fff))}
.cms-mock__rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cms-mock__rows li{display:flex;align-items:center;gap:.6rem;padding:.55rem 0;border-top:1px solid color-mix(in srgb,currentColor 12%,transparent);font-size:.82rem}
.cms-mock__row-label{flex:1;color:var(--_muted)}
.cms-mock__row-value{font-variant-numeric:tabular-nums;font-weight:600}
.cms-mock__row-delta{font-style:normal;font-size:.72rem;font-weight:600;color:var(--_accent,var(--_primary))}
.cms-mock__row-delta--down{color:#ef4444}
.cms-mock--browser .cms-mock__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:0 2rem}
.cms-mock__cta{margin-top:auto;padding:.7rem 1rem;border-radius:var(--_radius-btn,var(--_radius));background:var(--_accent,var(--_primary));color:var(--_on-accent,var(--_on-primary,#fff));text-align:center;font-size:.78rem;font-weight:700;letter-spacing:.06em}
.cms-mock--browser .cms-mock__cta{align-self:flex-start;margin-top:.5rem;padding:.65rem 1.25rem}
/* Die Ringe: zwei duenne Kreise mit laufendem Akzentbogen (Pocket) */
/* Der Ringkasten ist GROESSER als das Geraet (die Referenz legt einen
   64rem-Kreis um ein 22rem-Telefon). Eine Maske am Kasten selbst haette
   alles ausserhalb des Geraets verschluckt; also bekommt er eigene Masse
   und der Abschnitt darum schneidet den Ueberstand ab (kein Seitenscroll). */
.cms-mock__rings{position:absolute;left:50%;top:50%;z-index:0;width:min(64rem,240%);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent 4%,#000 32%,#000 62%,transparent 92%);mask-image:linear-gradient(to bottom,transparent 4%,#000 32%,#000 62%,transparent 92%)}
.cms-mock__rings>span{position:absolute;inset:0;border-radius:999px;border:1px solid color-mix(in srgb,var(--_fg) 16%,transparent)}
.cms-mock__rings>span::after{content:"";position:absolute;inset:-1px;border-radius:999px;background:conic-gradient(from 0deg,transparent 0 78%,var(--_accent,var(--_primary)) 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));animation:cms-spin 14s linear infinite}
.cms-mock__rings>span:nth-child(2){inset:13%}
.cms-mock__rings>span:nth-child(2)::after{animation-direction:reverse;animation-duration:20s}
@keyframes cms-spin{to{transform:rotate(360deg)}}
.cms-mock--rings{padding-block:2rem}
.cms-section:has(.cms-mock--rings),.cms-main>.cms-mock--rings,.cms-main>.cms-columns:has(.cms-mock--rings){overflow:clip}
/* ── Bento-Grafiken ── */
.cms-bento__visual{position:relative;flex:none;height:11rem;overflow:hidden;background:var(--_surface-alt);--_vis-ink:var(--_fg)}
.cms-bento--dark .cms-bento__visual{background:color-mix(in srgb,#fff 6%,transparent);--_vis-ink:#fff}
.cms-bento__card--tall .cms-bento__visual{flex:1;min-height:11rem}
/* Tastatur */
.cms-keys{position:absolute;left:50%;top:1.1rem;transform:translateX(-50%) scale(.92);display:flex;flex-direction:column;gap:.28rem;width:max-content}
.cms-keys__row{display:flex;gap:.28rem;justify-content:center}
.cms-key{display:inline-flex;align-items:center;justify-content:center;min-width:1.55rem;height:1.55rem;padding:0 .35rem;border-radius:.3rem;background:var(--_card);color:var(--_muted);font-size:.5rem;font-weight:600;box-shadow:0 1px 0 color-mix(in srgb,var(--_fg) 12%,transparent),inset 0 -1px 0 color-mix(in srgb,var(--_fg) 6%,transparent)}
.cms-bento--dark .cms-key{background:#2a2a2a;color:rgba(255,255,255,.6);box-shadow:0 1px 0 rgba(0,0,0,.6)}
.cms-key--space{min-width:7rem}
.cms-key--on{color:var(--_on-primary,#fff);background:var(--_primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--_primary) 45%,transparent),0 0 14px color-mix(in srgb,var(--_primary) 55%,transparent);animation:cms-key-pulse 2.4s ease-in-out infinite}
@keyframes cms-key-pulse{0%,100%{box-shadow:0 0 0 2px color-mix(in srgb,var(--_primary) 45%,transparent),0 0 14px color-mix(in srgb,var(--_primary) 55%,transparent)}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--_primary) 25%,transparent),0 0 22px color-mix(in srgb,var(--_primary) 35%,transparent)}}
/* Logo-Wolke */
.cms-cluster{position:absolute;inset:0}
.cms-cluster__ring{display:block;position:absolute;left:50%;top:50%;width:6rem;aspect-ratio:1;border-radius:999px;transform:translate(-50%,-50%);border:1px solid color-mix(in srgb,var(--_primary) 25%,transparent)}
.cms-cluster__ring:nth-child(2){width:11rem;opacity:.7}
.cms-cluster__ring:nth-child(3){width:16rem;opacity:.4}
.cms-cluster__core{display:block;position:absolute;left:50%;top:50%;width:2.6rem;height:2.6rem;transform:translate(-50%,-50%);border-radius:.8rem;background:var(--_primary);box-shadow:0 10px 24px -10px color-mix(in srgb,var(--_primary) 70%,transparent)}
.cms-cluster__core::after{content:"";position:absolute;inset:.75rem;border-radius:999px;background:var(--_on-primary,#fff);opacity:.9}
.cms-cluster__pill{position:absolute;padding:.3rem .6rem;border-radius:999px;background:var(--_card);color:var(--_vis-ink);font-size:.62rem;font-weight:600;box-shadow:0 6px 18px -8px rgba(0,0,0,.35),0 0 0 1px color-mix(in srgb,var(--_fg) 8%,transparent);animation:cms-float 6s ease-in-out infinite;white-space:nowrap}
.cms-bento--dark .cms-cluster__pill{background:#2a2a2a}
.cms-cluster__pill:nth-of-type(1){left:14%;top:22%}
.cms-cluster__pill:nth-of-type(2){left:66%;top:16%;animation-delay:-1s}
.cms-cluster__pill:nth-of-type(3){left:8%;top:60%;animation-delay:-2s}
.cms-cluster__pill:nth-of-type(4){left:70%;top:62%;animation-delay:-3s}
.cms-cluster__pill:nth-of-type(5){left:36%;top:8%;animation-delay:-4s}
.cms-cluster__pill:nth-of-type(6){left:40%;top:76%;animation-delay:-5s}
@keyframes cms-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-.35rem)}}
/* Karte */
.cms-dotmap{position:absolute;inset:0;background-image:radial-gradient(color-mix(in srgb,var(--_vis-ink) 22%,transparent) 1px,transparent 1.3px);background-size:9px 9px;-webkit-mask-image:radial-gradient(ellipse at center,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse at center,#000 55%,transparent 100%)}
.cms-dotmap__pin{position:absolute;display:inline-flex;align-items:center;gap:.35rem;padding:.22rem .5rem .22rem .28rem;border-radius:999px;background:var(--_card);color:var(--_vis-ink);font-size:.6rem;font-weight:600;box-shadow:0 6px 16px -8px rgba(0,0,0,.4),0 0 0 1px color-mix(in srgb,var(--_fg) 8%,transparent);white-space:nowrap;animation:cms-drop .6s cubic-bezier(.22,1,.36,1) both}
.cms-bento--dark .cms-dotmap__pin{background:#2a2a2a}
.cms-dotmap__pin i{width:.75rem;height:.75rem;border-radius:999px;background:var(--_primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--_primary) 25%,transparent)}
.cms-dotmap__pin:nth-child(1){left:18%;top:26%}
.cms-dotmap__pin:nth-child(2){left:44%;top:14%;animation-delay:.15s}
.cms-dotmap__pin:nth-child(3){left:64%;top:42%;animation-delay:.3s}
.cms-dotmap__pin:nth-child(4){left:26%;top:62%;animation-delay:.45s}
.cms-dotmap__pin:nth-child(5){left:56%;top:70%;animation-delay:.6s}
@keyframes cms-drop{from{opacity:0;transform:translateY(-.8rem)}to{opacity:1;transform:none}}
/* Integrationen */
.cms-integrations{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:.6rem;padding:.5rem 0}
.cms-integrations__core{position:absolute;left:50%;top:50%;z-index:2;width:3rem;height:3rem;transform:translate(-50%,-50%);border-radius:.9rem;background:color-mix(in srgb,var(--_card) 70%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 0 0 1px color-mix(in srgb,var(--_fg) 10%,transparent),0 12px 30px -12px rgba(0,0,0,.4)}
.cms-integrations__core::after{content:"";position:absolute;inset:.8rem;border-radius:.4rem;background:var(--_primary)}
.cms-integrations__row{position:relative;height:1.7rem;border-top:1px dashed color-mix(in srgb,var(--_vis-ink) 22%,transparent);border-bottom:1px dashed color-mix(in srgb,var(--_vis-ink) 22%,transparent);overflow:hidden}
.cms-integrations__track{display:flex;gap:1.25rem;width:max-content;height:100%;align-items:center;padding-inline:.6rem;animation:cms-slide 22s linear infinite}
.cms-integrations__row:nth-child(odd) .cms-integrations__track{animation-direction:reverse}
.cms-integrations__pill{padding:.22rem .55rem;border-radius:999px;background:var(--_card);color:var(--_vis-ink);font-size:.6rem;font-weight:600;white-space:nowrap;box-shadow:0 0 0 1px color-mix(in srgb,var(--_fg) 8%,transparent)}
.cms-bento--dark .cms-integrations__pill{background:#2a2a2a}
@keyframes cms-slide{to{transform:translateX(-50%)}}
/* Avatare */
.cms-avatars{position:absolute;inset:0}
.cms-avatars__ring{position:absolute;left:50%;top:50%;width:7rem;aspect-ratio:1;border-radius:999px;transform:translate(-50%,-50%);border:1px solid color-mix(in srgb,var(--_vis-ink) 14%,transparent);animation:cms-ring 4s ease-out infinite}
.cms-avatars__ring:nth-child(2){animation-delay:1.3s}
.cms-avatars__ring:nth-child(3){animation-delay:2.6s}
@keyframes cms-ring{from{width:5rem;opacity:.9}to{width:20rem;opacity:0}}
.cms-avatars__face{position:absolute;top:50%;width:3.4rem;height:3.4rem;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:700;color:var(--_on-primary,#fff);background:var(--_primary);box-shadow:0 0 0 4px var(--_card),0 12px 24px -10px rgba(0,0,0,.4)}
.cms-bento--dark .cms-avatars__face{box-shadow:0 0 0 4px #2a2a2a,0 12px 24px -10px rgba(0,0,0,.6)}
.cms-avatars__face--a{left:32%;transform:translate(-50%,-50%)}
.cms-avatars__face--b{left:68%;transform:translate(-50%,-50%);background:var(--_accent,var(--_primary));color:var(--_on-accent,var(--_on-primary,#fff))}
.cms-avatars__check{position:absolute;left:50%;top:50%;width:1.6rem;height:1.6rem;transform:translate(-50%,-50%);border-radius:999px;background:#16a34a;color:#fff;font-size:.8rem;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px var(--_card)}
/* ── Team: Notch-Karten (Keynote) ── */
.cms-team--notch{text-align:left}
/* Referenz: der Farbrahmen liegt UNTER dem Foto, um 1rem/1.5rem nach
   innen versetzt — sichtbar nur durch die ausgeschnittene Ecke, und beim
   Ueberfahren zieht er sich zusammen. Er umrahmt das FOTO, nicht die Karte. */
.cms-team--notch .cms-team__member{position:relative;padding:0}
.cms-team--notch .cms-team__member::before{content:"";position:absolute;left:0;top:0;right:1rem;height:16rem;border-radius:2rem;border:1px solid color-mix(in srgb,var(--_primary) 55%,transparent);transition:transform .3s ease;pointer-events:none}
.cms-team--notch .cms-team__member:nth-child(3n+2)::before{border-color:color-mix(in srgb,var(--_accent,var(--_primary)) 45%,transparent)}
.cms-team--notch .cms-team__member:nth-child(3n)::before{border-color:color-mix(in srgb,var(--_primary) 25%,var(--_accent,var(--_primary)))}
.cms-team--notch .cms-team__member:hover::before{transform:scale(.95)}
.cms-team--notch .cms-team__photo{position:relative;z-index:1;width:100%;height:17.5rem;aspect-ratio:auto;margin:0;border-radius:2rem;object-fit:cover;object-position:50% 20%;box-shadow:none;clip-path:polygon(0 0,72% 0,78% 6%,100% 6%,100% 100%,0 100%);transition:filter .3s ease}
.cms-team--notch .cms-team__member:nth-child(3n+2) .cms-team__photo{clip-path:polygon(0 6%,22% 6%,28% 0,100% 0,100% 100%,0 100%)}
.cms-team--notch .cms-team__member:nth-child(3n) .cms-team__photo{clip-path:polygon(0 0,100% 0,100% 94%,78% 94%,72% 100%,0 100%)}
.cms-team--notch .cms-team__member:hover .cms-team__photo{filter:brightness(1.06) saturate(1.08)}
.cms-team--notch .cms-team__photo--empty{display:flex}
.cms-team--notch .cms-team__name{margin-top:1.4rem;font-family:var(--font-heading,inherit);font-size:1.15rem;font-weight:700;letter-spacing:-.02em}
.cms-team--notch .cms-team__role{color:var(--_muted)}
/* ── Texturen: Aurora und Ringe ── */
.cms-hero--aurora,.cms-section--aurora,.cms-cta--aurora,.cms-section--rings,.cms-cta--rings{position:relative;isolation:isolate}
.cms-hero--aurora::before,.cms-section--aurora::before,.cms-cta--aurora::before{content:"";position:absolute;inset:-20% -10%;z-index:-1;pointer-events:none;background:radial-gradient(38rem 24rem at 18% 30%,color-mix(in srgb,#7c3aed 32%,transparent),transparent 60%),radial-gradient(34rem 22rem at 78% 20%,color-mix(in srgb,#2563eb 28%,transparent),transparent 62%),radial-gradient(30rem 20rem at 62% 78%,color-mix(in srgb,#06b6d4 26%,transparent),transparent 60%),radial-gradient(26rem 18rem at 24% 84%,color-mix(in srgb,#14b8a6 20%,transparent),transparent 60%);filter:blur(42px);opacity:.75}
.cms-hero--aurora::after,.cms-section--aurora::after{content:"";position:absolute;inset:auto 0 0 0;height:8rem;z-index:-1;pointer-events:none;background:linear-gradient(to top,var(--_bg),transparent)}
.cms-cta--aurora::before{opacity:.5}
/* Referenz Pocket: EIN 35rem-Kreis mitten im Band — Haarlinie plus ein
   laufender Bogen; oben und unten schneidet das Band ihn ab. */
/* .cms-cta::before/::after sind in der Grundschicht die Farbwolken
   (26rem hoch, blur 56px, Ecke oben links) — alles, was hier nicht
   ausdruecklich zurueckgesetzt wird, bliebe davon stehen. */
.cms-section--rings::before,.cms-cta--rings::before{content:"";position:absolute;left:50%;top:50%;right:auto;bottom:auto;z-index:0;width:min(35rem,92vw);height:auto;aspect-ratio:1;background:none;filter:none;border-radius:999px;transform:translate(-50%,-50%);border:1px solid color-mix(in srgb,currentColor 22%,transparent);pointer-events:none}
.cms-section--rings::after,.cms-cta--rings::after{content:"";position:absolute;left:50%;top:50%;right:auto;bottom:auto;z-index:0;width:min(35rem,92vw);height:auto;aspect-ratio:1;border-radius:999px;transform:translate(-50%,-50%);pointer-events:none;filter:none;background:conic-gradient(from 0deg,transparent 0 76%,color-mix(in srgb,currentColor 70%,transparent) 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));animation:cms-spin-center 18s linear infinite}
@keyframes cms-spin-center{to{transform:translate(-50%,-50%) rotate(360deg)}}
.cms-section--rings,.cms-cta--rings{overflow:hidden}
.cms-section--rings>*,.cms-cta--rings .cms-cta__inner{position:relative;z-index:1}
@media(max-width:768px){.cms-keys{transform:translateX(-50%) scale(.72);top:.6rem}.cms-team--notch .cms-team__photo{height:14rem}.cms-team--notch .cms-team__member::before{height:12.5rem}.cms-mock--rings{padding-block:1rem}}
@media(prefers-reduced-motion:reduce){.cms-mock__line{animation:none;stroke-dashoffset:0}.cms-mock__area{animation:none;opacity:1}.cms-mock__rings>span::after,.cms-key--on,.cms-cluster__pill,.cms-dotmap__pin,.cms-integrations__track,.cms-avatars__ring,.cms-section--rings::before,.cms-section--rings::after,.cms-cta--rings::before,.cms-cta--rings::after{animation:none}}
/* ── Vorlagen-Durchgang 2026-09-30 ── */
/* Markenflaeche: der Fliesstext eines Abschnitts steht in ink-2 — auf
   der LEITFARBE war das Mittelblau auf Blau (Buchhaltung, „Na ja – fast
   alles"). Auf der Marke erbt der Absatz die Tinte des Bandes. */
.cms-section--on-brand .cms-section__inner>p,.cms-section--on-brand .cms-column>p,.cms-section--on-brand .cms-heading__subtitle{color:inherit;opacity:.88}
/* Mosaik mit Leitbild: die Zeilen sind 1fr, das Leitbild bestimmte mit
   seiner ROHEN Hoehe die ganze Kachel (1924 px hoch, halbleer, Arztpraxis
   Leinen-Licht). Das RASTER bekommt das Format (7:5), die Zeilen teilen
   es, jedes Bild fuellt seine Zelle — nichts haengt mehr an Bildmassen. */
.cms-mosaic--lead-left .cms-mosaic__grid,.cms-mosaic--lead-right .cms-mosaic__grid{aspect-ratio:7/5;grid-template-rows:repeat(2,minmax(0,1fr));grid-auto-flow:dense}
/* Das Leitbild hatte eine feste SPALTE, aber keine feste Zeile: der
   Platzierungslaeufer stand danach hinter ihm, die Nebenbilder rutschten
   in Zeile 2 und 3 — eine dritte, implizite Zeile, Zeile 1 links leer. */
.cms-mosaic--lead-left .cms-mosaic__item:first-child{grid-column:1;grid-row:1/3}
.cms-mosaic--lead-right .cms-mosaic__item:first-child{grid-column:2;grid-row:1/3}
.cms-mosaic--lead-left .cms-mosaic__item,.cms-mosaic--lead-right .cms-mosaic__item{min-height:0;height:100%}
@media(max-width:768px){.cms-mosaic--lead-left .cms-mosaic__grid,.cms-mosaic--lead-right .cms-mosaic__grid{aspect-ratio:auto;grid-template-rows:none}.cms-mosaic--lead-left .cms-mosaic__item,.cms-mosaic--lead-right .cms-mosaic__item,.cms-mosaic--lead-left .cms-mosaic__item:first-child,.cms-mosaic--lead-right .cms-mosaic__item:first-child{height:auto;grid-row:auto;grid-column:auto}}
/* Spielplan-Register: die 44rem-Tabelle rollte am Telefon seitlich, der
   Programmtitel war abgeschnitten („Kammermusik am Abe"). Unter 640 px
   wird jede Zeile ein Raster: Datum | Programm, Uhrzeit, Ort | Karten. */
@media(max-width:640px){
.cms-spielplan__scroll{overflow:visible}
.cms-spielplan-table{min-width:0}
.cms-spielplan-table thead{display:none}
.cms-spielplan-table__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"date prog tickets" "date time tickets" "date venue tickets";column-gap:.9rem;row-gap:.15rem;padding:.9rem 0;align-items:start}
.cms-spielplan-table__row>th,.cms-spielplan-table__row>td{display:block;padding:0;vertical-align:top}
.cms-spielplan-table__date{grid-area:date;display:flex;flex-direction:column;line-height:1.1}
.cms-spielplan-table__day{font-size:1.45rem}
.cms-spielplan-table__month{margin:0}
.cms-spielplan-table__programme{grid-area:prog}
.cms-spielplan-table__time{grid-area:time;margin-top:.2rem}
.cms-spielplan-table__venue{grid-area:venue;font-size:.85rem}
.cms-spielplan-table__tickets{grid-area:tickets;text-align:right;padding-top:.15rem}
}
/* Kopfzeile am Telefon: die Marke durfte nur „100 % minus Burger" breit
   werden und BRACH in zwei Zeilen, der Burger rutschte in die dritte —
   die Pillen-Leiste des Orchesters war 158 px hoch. Die Marke darf
   schrumpfen, der Burger bleibt rechts in der ersten Zeile; die
   Navigation wickelt weiterhin als eigene Zeile darunter (order:3). */
@media(max-width:768px){
.cms-navbar__inner>.cms-navbar__brand{flex:1 1 0;min-width:0;max-width:none}
.cms-navbar__inner>.cms-navbar__burger{flex:none}
.cms-navbar--schwebend .cms-navbar__brand{font-size:1.05rem}
/* Seitentitel: „Herz-lich. Lecker." (8 Buchstaben getrennt) liest sich
   wie ein Fehler — „Zusammenar|beit" OHNE Strich (hyphens:none am
   Hero-Titel, Oatmeal) aber auch. Trennen darf nur, was lang ist:
   ab 12 Buchstaben, mindestens 5 auf jeder Seite. */
h1,h2,.cms-hero__title{hyphens:auto;hyphenate-limit-chars:12 5 5;-webkit-hyphenate-limit-before:5;-webkit-hyphenate-limit-after:5}
/* Logo-Zeile mit Wortmarken: mit 3rem Luecke passte am Telefon nur EINE
   Marke je Zeile (Finanz-App: sechs Zeilen). */
.cms-logo-wall__row{gap:1.25rem 1.75rem}
.cms-logo-wall__wortmarke{font-size:.8rem;letter-spacing:.14em}
}
/* Sammlungs-Raster mit fester Spaltenzahl (style="--cols:3"): die
   Grundregel steht in foundation.ts HINTER ihren Telefon-Regeln und
   gewann — drei Terminkarten zu je 100 px auf dem Telefon, der Auszug
   abgeschnitten (Gastronomie Koelsch-Hell, „Termine im Haus"). */
@media(max-width:1024px){.cms-collection-list--grid[style*="--cols"] .cms-collection-list__cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.cms-collection-list--grid[style*="--cols"] .cms-collection-list__cards{grid-template-columns:minmax(0,1fr)}}
@media(max-width:768px){
/* Sprungleiste: 29 px hohe Ziele am Telefon — Daumenmass sind 40. */
.cms-section-nav__item{padding:.7rem .9rem}
/* Marke in der Kopfzeile: Lockup und Pille setzen 1.35rem, „Philharmonie
   am Lindenwall" brach zweizeilig (Kopf 112 px). Am Telefon eine Stufe
   kleiner, die Variante darf nicht darueber. */
.cms-navbar .cms-navbar__brand{font-size:1.1rem}
/* Tages-Chips der Oeffnungszeiten und Schlagwort-Chips (Kursplan,
   Speisekarte) standen auf .6rem = 9,6 px. */
.cms-hours--chips .cms-hours__day,.cms-tag{font-size:.68rem}
}
/* ── Durchgang 2026-10-01 (Tims Befunde an der Vorschau) ── */
/* Symbole in schlichten Rastern: die Huelle streckte sich auf die volle
   Kartenbreite (Flex-Spalte), das Symbol stand mittig darin — bei einer
   Spalte 600 px neben seinem Text, klein und verloren. Jetzt ein Chip am
   Textanfang. */
.cms-feature-grid--plain .cms-feature__icon,.cms-feature-grid--ruled .cms-feature__icon,.cms-feature-grid--liste .cms-feature__icon{align-self:flex-start;width:2.75rem;height:2.75rem;margin:0 0 1rem;border-radius:calc(var(--_radius) - .1rem);background:color-mix(in srgb,var(--_primary) 10%,transparent);color:var(--_primary)}
.cms-feature-grid--plain .cms-feature__icon svg,.cms-feature-grid--ruled .cms-feature__icon svg,.cms-feature-grid--liste .cms-feature__icon svg{width:1.35rem;height:1.35rem}
/* Eine Spalte ist ein REGISTER: Haarlinie, Symbol links, Titel und Text
   rechts in voller Lesebreite statt 26 Zeichen. */
.cms-feature-grid[style*="--cols:1"]{gap:0}
.cms-feature-grid[style*="--cols:1"]>.cms-feature{display:grid;grid-template-columns:2.75rem minmax(0,1fr) auto;column-gap:1.75rem;align-items:start;padding:1.75rem 0;border-top:1px solid color-mix(in srgb,var(--_border) 90%,transparent);border-radius:0;background:none;box-shadow:none}
.cms-feature-grid[style*="--cols:1"]>.cms-feature:last-child{border-bottom:1px solid color-mix(in srgb,var(--_border) 90%,transparent)}
.cms-feature-grid[style*="--cols:1"]>.cms-feature>.cms-feature__icon{grid-row:1/span 3;margin:0}
.cms-feature-grid[style*="--cols:1"]>.cms-feature>:not(.cms-feature__icon):not(.cms-feature__more){grid-column:2;max-width:62ch}
.cms-feature-grid[style*="--cols:1"]>.cms-feature>.cms-feature__more{grid-column:3;grid-row:1;align-self:center;margin:0;padding:0}
.cms-feature-grid[style*="--cols:1"] .cms-feature__title{font-size:1.25rem}
@media(max-width:640px){.cms-feature-grid[style*="--cols:1"]>.cms-feature{grid-template-columns:2.5rem minmax(0,1fr);column-gap:1rem}.cms-feature-grid[style*="--cols:1"]>.cms-feature>.cms-feature__more{grid-column:2;grid-row:auto;padding-top:.75rem}}
/* Karten-Handlungsaufruf und Unterlagen-Banner OHNE Abschnitt: der CTA
   hatte weder Aussen- noch Innenabstand und klebte am Band darueber; das
   Banner lag in der Flaechenfarbe auf derselben Flaeche — beides „verloren".
   Jetzt Luft wie ein Abschnitt, Karte in Kartenfarbe mit Schatten. */
.cms-main>.cms-cta--card{padding:clamp(2.5rem,5vw,4.5rem) 1.25rem}
.cms-cta--card .cms-cta__inner{padding:clamp(1.75rem,3vw,2.5rem) clamp(1.5rem,3.5vw,3rem)}
.cms-docbanner{padding:clamp(1.5rem,3vw,2.25rem) clamp(1.5rem,3.5vw,2.75rem);border-radius:var(--_radius-lg);background:var(--_card);box-shadow:var(--_shadow-sm)}
.cms-docbanner__title{font-family:var(--font-heading,inherit);font-size:clamp(1.15rem,1.6vw,1.35rem);letter-spacing:-.01em}
.cms-main>.cms-docbanner{margin-block:clamp(2.5rem,5vw,4.5rem)}
/* Hauswahl-Platzhalter: der Knopf erbt den Pillen-Radius und streckte sich
   auf die Zeilenhoehe — ein Oval neben drei Kacheln. */
.acourse-booking-skeleton--picker>.acourse-booking-skeleton__cta{align-self:center;min-height:0;padding:.85rem 1.4rem}
/* Karte vor der Einwilligung: der Rahmen ist bis zur Zustimmung gesperrt
   (kein eigener Lade-Knopf, Entscheidung B 2026-09-19) — er stand als leere
   weisse Kachel da. Jetzt eine ruhige Punktflaeche mit Hinweis. */
.cms-map{position:relative}
.cms-map>iframe[data-ac-held]{background:var(--_surface-alt) radial-gradient(color-mix(in srgb,var(--_fg) 16%,transparent) 1px,transparent 1.5px) 0 0/16px 16px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--_border) 80%,transparent)}
.cms-map:has(>iframe[data-ac-held])::before{content:"Karte · wird nach Ihrer Zustimmung zu externen Inhalten geladen";position:absolute;z-index:1;left:50%;top:calc(50% - 1.25rem);transform:translate(-50%,-50%);max-width:min(80%,26rem);padding:.6rem 1.1rem;border-radius:999px;background:var(--_card);box-shadow:var(--_shadow-sm);color:var(--_muted);font-size:.82rem;line-height:1.4;text-align:center;pointer-events:none}
/* EINE Stimme ist ein Zitat, keine Karte: 46rem-Karte mit 15-px-Text
   allein in einem breiten Band las sich wie vergessen. Jetzt ein grosses
   Zitat in der Titelschrift, mittig, ohne Kasten. */
.cms-testimonials--single{max-width:52rem}
.cms-testimonials--single .cms-testimonial{align-items:center;gap:1.25rem;padding:0;background:none;border:0;box-shadow:none;text-align:center}
.cms-testimonials--single .cms-testimonial__quote{font-family:var(--font-heading,inherit);font-size:clamp(1.35rem,2.3vw,1.85rem);line-height:1.4;letter-spacing:-.01em;color:inherit}
.cms-testimonials--single .cms-testimonial__mark{width:2.25rem;height:2.25rem;opacity:.35}
.cms-testimonials--single .cms-testimonial__author{justify-content:center;text-align:left}
/* Zweispaltiges Mosaik mit ungerader Bildzahl: das letzte Bild stand
   allein neben einer leeren Zelle. Es nimmt die volle Zeile, im Querformat. */
.cms-mosaic:not(.cms-mosaic--lead-left):not(.cms-mosaic--lead-right):not(.cms-mosaic--row3) .cms-mosaic__item:last-child:nth-child(odd):not(:first-child){grid-column:1/-1;aspect-ratio:21/9}
/* Vertrauensleiste im KOPF (ausserhalb von .cms-main): ohne das Breiten-
   modell stand sie ohne Seiteneinzug am Fensterrand. Jetzt auf der Flucht
   des Inhalts. */
body>.cms-trustbar{padding-inline:max(1.25rem,calc((100% - var(--_container))/2 + 1.25rem))}
/* Abschnitt in VOLLER Breite: der Innenbehaelter stand auf 100 %, Text
   und Knoepfe lagen 20 px vom Fensterrand (Praxis „Salbei", 1440 px).
   Volle Breite heisst Flaeche bis zum Rand, nicht Text bis zum Rand. */
.cms-section__inner[style*="max-width:100%"]{padding-inline:max(0rem,calc((100% - var(--_container))/2))}
/* Bild-Hero mit Textblock an der Ecke: der Block klebte am Fensterrand
   (left:0) — auf breiten Schirmen 120 px links vom Seiteninhalt. Er steht
   jetzt auf der Flucht des Inhalts und ist gerundet wie Karten. */
@media(min-width:641px){
.cms-hero__caption--top-left,.cms-hero__caption--bottom-left{left:max(1.25rem,calc((100% - var(--_container))/2 + 1.25rem))}
.cms-hero__caption--top-right,.cms-hero__caption--bottom-right{right:max(1.25rem,calc((100% - var(--_container))/2 + 1.25rem))}
.cms-hero__caption{border-radius:var(--_radius-lg);padding:clamp(1.5rem,2.6vw,2.25rem) clamp(1.5rem,3vw,2.5rem)}
}
@media(max-width:1023px){
.cms-navbar--bp-lg .cms-navbar__inner>.cms-navbar__brand{flex:1 1 0;min-width:0;max-width:none}
}
/* ── Buchungsflaechen (Termine, Hotel, Reservierung) ── */
/* Seit Phase 8 sind alle Hotel-Funktionsbloecke frei platzierbar. Als
   oberste Seitenbloecke brauchen sie denselben breiten Behaeltervertrag
   wie die komplette Strecke; innerhalb eines Abschnitts greift die Regel
   wegen des direkten-Kind-Kombinators nicht und verdoppelt keinen Einzug. */
.cms-main>:is(.acourse-booking-add-ons-grid,.acourse-booking-availability-matrix,.acourse-booking-booking-bar,.acourse-booking-booking-confirmation,.acourse-booking-booking-flow,.acourse-booking-booking-flow-embed,.acourse-booking-booking-review,.acourse-booking-booking-summary,.acourse-booking-extras-picker,.acourse-booking-guest-form,.acourse-booking-hotel-picker,.acourse-booking-media-gallery,.acourse-booking-package-carousel,.acourse-booking-payment-options,.acourse-booking-price-calendar,.acourse-booking-promo-field,.acourse-booking-rate-details,.acourse-booking-room-grid,.acourse-booking-room-list){max-width:var(--_container);margin-inline:auto;padding-inline:1.25rem}
/* In einer globalen HEADER-Komponente steht die Leiste als Geschwister von
   .cms-main, nicht darin. Sie braucht trotzdem denselben Einzug; ein nacktes
   body-weites Formular waere gerade auf grossen Hotel-Seiten unbenutzbar. */
body>.acourse-booking-block.acourse-booking-booking-bar{max-width:var(--_container);margin:1rem auto;padding-inline:1.25rem}
/* Der Ladehinweis der Hotel-Widgets — bis Phase 8 fest in Slate-500. */
.acourse-booking-skeleton{border:1px dashed color-mix(in srgb,var(--_border,#e2e8f0) 80%,transparent);border-radius:var(--_radius,8px)}
.acourse-booking-skeleton--bar{display:grid;grid-template-columns:minmax(10rem,1.25fr) repeat(3,minmax(8.5rem,1fr)) auto;align-items:stretch;overflow:hidden;padding:.4rem;border-style:solid;background:var(--_card,var(--_bg));box-shadow:var(--_shadow-md)}
.acourse-booking-skeleton__field{display:flex;min-width:0;flex-direction:column;justify-content:center;gap:.08rem;padding:.55rem .9rem;border-right:1px solid color-mix(in srgb,var(--_border) 75%,transparent)}
.acourse-booking-skeleton__field>span{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-ink-3,var(--_muted))}
.acourse-booking-skeleton__field>strong{overflow:hidden;font-size:.86rem;font-weight:600;line-height:1.35;color:var(--_fg);text-overflow:ellipsis;white-space:nowrap}
.acourse-booking-skeleton__cta{display:flex;align-items:center;justify-content:center;min-width:11.5rem;margin-left:.4rem;padding:.65rem 1rem;border-radius:var(--_radius-btn,var(--_radius));background:var(--_primary);color:var(--_on-primary);font-size:.72rem;font-weight:700;letter-spacing:.09em;text-align:center;text-transform:uppercase}
.acourse-booking-skeleton--picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:.55rem;padding:.55rem;border-style:solid;background:var(--_card,var(--_bg));box-shadow:var(--_shadow-sm)}
.acourse-booking-skeleton__choice{display:flex;min-width:0;flex-direction:column;gap:.12rem;padding:.75rem .9rem;border:1px solid color-mix(in srgb,var(--_border) 75%,transparent);border-radius:calc(var(--_radius,8px)*.72);background:var(--_surface-alt,transparent)}
.acourse-booking-skeleton__choice>span{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-ink-3,var(--_muted))}
.acourse-booking-skeleton__choice>strong{font-family:var(--_font-display,var(--_font-body));font-size:1.05rem;color:var(--_fg)}
.acourse-booking-skeleton__choice>small{color:var(--_muted);font-size:.72rem}
.acourse-booking-skeleton--picker>.acourse-booking-skeleton__cta{margin:0}
@media(max-width:900px){.acourse-booking-skeleton--bar{grid-template-columns:repeat(2,minmax(0,1fr))}.acourse-booking-skeleton__field:nth-child(even){border-right:0}.acourse-booking-skeleton__field:nth-child(-n+2){border-bottom:1px solid color-mix(in srgb,var(--_border) 75%,transparent)}.acourse-booking-skeleton__cta{grid-column:1/-1;min-height:2.75rem;margin:.4rem 0 0}}
@media(max-width:700px){.acourse-booking-skeleton--picker{grid-template-columns:1fr}.acourse-booking-skeleton--picker>.acourse-booking-skeleton__cta{grid-column:auto}}
.cms-appointments,.cms-reservation-widget{margin-block:1.25rem}
/* Terminarten: eine Liste ohne Aufzaehlungspunkte, als Karten im Raster.
   auto-fit statt fester Spalten — bei zwei Terminarten sollen keine
   drei leeren Spuren danebenstehen, und am Telefon bricht es von selbst. */
.cms-appointment-types__intro{margin:0 0 1.25rem;color:var(--_muted,#64748b);max-width:60ch}
.cms-appointment-types__list{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.cms-appointment-types--cols-2 .cms-appointment-types__list{grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}
.cms-appointment-types--cols-3 .cms-appointment-types__list{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.cms-appointment-type{display:flex;flex-direction:column;gap:.35rem;padding:1.25rem;border:1px solid color-mix(in srgb,var(--_border,#e2e8f0) 80%,transparent);border-radius:var(--_radius,8px);background:var(--_surface-alt,transparent)}
.cms-appointment-type__name{margin:0;font-size:1.0625rem;line-height:1.3;color:var(--_fg,inherit)}
.cms-appointment-type__text{margin:0;color:var(--_muted,#64748b)}
/* Dauer und Preis stehen als stille Versalien nebeneinander — sie sind
   Fakten, keine Ueberschrift, und sollen den Namen nicht ueberstimmen. */
.cms-appointment-type__meta{display:flex;flex-wrap:wrap;gap:.25rem .9rem;margin:.15rem 0 0;font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase;color:var(--_muted,#64748b)}
/* Der Knopf haengt UNTEN, auch wenn die Nachbarkarte mehr Text hat:
   margin-top:auto in der Spalte gibt allen Karten dieselbe Fusslinie. */
.cms-appointment-type__cta{margin-top:auto;padding-top:.9rem;align-self:flex-start;font-weight:600;color:var(--_primary,inherit);text-decoration:underline;text-underline-offset:.2em}
/* ── Lebende Oeffnungszeiten: Badge, Kueche, Sondertage ── */
.cms-hours__badge{display:inline-block;margin:0 0 .9rem;padding:.22rem .6rem;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:var(--nav-tracking,.06em);text-transform:uppercase;border:1px solid color-mix(in srgb,var(--_border) 90%,transparent);color:var(--_muted);background:var(--_card)}
.cms-hours__badge[hidden]{display:none}
.cms-hours__badge[data-hours-offen="1"]{color:var(--_primary);border-color:color-mix(in srgb,var(--_primary) 45%,transparent);background:color-mix(in srgb,var(--_primary) 10%,var(--_card))}
.cms-hours__badge::before{content:"";display:inline-block;width:.5rem;height:.5rem;border-radius:999px;margin-right:.4rem;background:currentColor;vertical-align:.05em}
.cms-hours__sub{font-size:.72rem;font-weight:600;letter-spacing:var(--nav-tracking,.1em);text-transform:uppercase;color:var(--_muted);margin:1.25rem 0 .35rem}
.cms-hours__sondertage .cms-hours__day{color:var(--_fg)}
/* ── Tageskarte: Kartenname als Kopf, Rubriken darunter ── */
.cms-tageskarte{max-width:var(--_measure)}
.cms-tageskarte__title{font-family:var(--font-heading,inherit);font-size:1.6rem;margin:0 0 1rem}
.cms-tageskarte__karte+.cms-tageskarte__karte{margin-top:2rem;padding-top:1.5rem;border-top:1px solid color-mix(in srgb,var(--_border) 80%,transparent)}
.cms-tageskarte__name{font-size:.72rem;font-weight:600;letter-spacing:var(--nav-tracking,.1em);text-transform:uppercase;color:var(--_primary);margin:0 0 .75rem}
.cms-tageskarte .cms-menu__title{font-size:1.1rem;margin:1rem 0 .5rem}
.cms-tageskarte .cms-menu__list{list-style:none;margin:0;padding:0}
.cms-tageskarte .cms-menu__item{padding:.55rem 0;border-bottom:1px solid color-mix(in srgb,var(--_border) 50%,transparent)}
.cms-tageskarte .cms-menu__row{display:flex;align-items:baseline;gap:.5rem}
.cms-tageskarte .cms-menu__leader{flex:1 1 auto;border-bottom:1px dotted color-mix(in srgb,var(--_border) 90%,transparent);min-width:1rem}
.cms-tageskarte .cms-menu__price{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.cms-tageskarte .cms-menu__desc{color:var(--_muted);font-size:.9em;margin-top:.15rem}
.cms-menu-live__noscript{padding:0}
.cms-menu-live__leer-text{margin:0;padding:2rem 0;text-align:center;color:var(--color-ink-3,var(--_muted))}
/* ── Betriebskarte: Adresse, Kontakt, Kurz-Zeiten ── */
.cms-restaurant-info{text-align:left}
.cms-restaurant-info--card{padding:1.75rem 1.9rem;background:var(--_card);border:1px solid color-mix(in srgb,var(--_border) 80%,transparent);border-radius:var(--_radius-lg);box-shadow:var(--_shadow-sm)}
.cms-restaurant-info__title{font-family:var(--font-heading,inherit);font-size:1.35rem;margin:0 0 1.25rem}
.cms-restaurant-info__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1.5rem 2rem}
.cms-restaurant-info__label{font-size:.72rem;font-weight:600;letter-spacing:var(--nav-tracking,.1em);text-transform:uppercase;color:var(--_muted);margin:0 0 .5rem}
.cms-restaurant-info__address{font-style:normal;line-height:1.6}
.cms-restaurant-info__contact{margin:0;line-height:1.7}
.cms-restaurant-info__contact a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--_primary) 45%,transparent)}
.cms-restaurant-info__contact a:hover{color:var(--_primary)}
.cms-restaurant-info .cms-hours table{max-width:none}
.cms-restaurant-info .cms-hours--top table{border-top:0}
.cms-restaurant-info .cms-hours--top tr:first-child .cms-hours__day,.cms-restaurant-info .cms-hours--top tr:first-child .cms-hours__time{padding-top:.35rem}
/* ── Natives Reservierungs-Widget: das Skelett vor dem Bundle ── */
.cms-reservation-widget--inline .acourse-reservation-skeleton,.cms-reservation-widget--quick .acourse-reservation-skeleton{border:1px dashed color-mix(in srgb,var(--_border) 90%,transparent);border-radius:var(--_radius-lg);padding:2rem 1rem;text-align:center}
.cms-reservation-widget--quick .acourse-reservation-skeleton{padding:1rem}
.acourse-reservation-skeleton__text{margin:0;color:var(--_muted);font-size:.875rem}
.acourse-reservation-skeleton__btn{pointer-events:none;opacity:.7}
/* ── Gutschein-Verkauf (VOUCHERS, Phase 12) ──
   Die Kacheln sind LINKS, keine Knoepfe: jede fuehrt mit ihrem Betrag
   auf die gehostete Kaufstrecke. Der Einzug kommt vom Breitenmodell
   (.cms-voucher-shop steht dort bei den breiten Rastern) - hier
   KEIN padding-inline, sonst verdoppelt es sich. */
.cms-voucher-shop__headline{margin:0 0 .35rem;font-family:var(--font-heading,inherit);font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.15}
.cms-voucher-shop__text{margin:0 0 1.5rem;color:var(--_muted);line-height:1.7}
.cms-voucher-shop__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1rem;margin-bottom:1.5rem}
.cms-voucher-shop__card{display:flex;flex-direction:column;gap:.25rem;align-items:center;justify-content:center;padding:1.75rem 1rem;border:1px solid var(--_border);border-radius:var(--_radius-lg);background:var(--_surface);color:inherit;text-decoration:none;transition:border-color .15s,transform .15s}
.cms-voucher-shop__card:hover{border-color:var(--_primary);text-decoration:none;transform:translateY(-2px)}
.cms-voucher-shop__card:focus-visible{outline:3px solid color-mix(in srgb,var(--_primary) 35%,transparent);outline-offset:2px}
.cms-voucher-shop__amount{font-family:var(--font-heading,inherit);font-size:1.75rem;line-height:1.1;font-weight:600}
.cms-voucher-shop__label{font-size:.82rem;color:var(--_muted);text-align:center}
.cms-voucher-shop__terms{margin:1rem 0 0;font-size:.82rem;color:var(--_muted);line-height:1.6}
/* ── Mobile layout safety ── */
.cms-navbar__brand{min-width:0;max-width:100%}
.cms-navbar__logo{max-width:100%;object-fit:contain}
.cms-stat{min-width:0}
.cms-stat__value{overflow-wrap:anywhere}
.cms-spielplan-wechsel{min-width:0}
.cms-spielplan-wechsel>*{min-width:0}
.cms-spielplan-wechsel__title{hyphens:auto;overflow-wrap:break-word}

/* The Kupfer footer's measured desktop tracks used to override the
   generic auto-fit grid at every width. Between phone and desktop it may
   wrap naturally; on a phone it is an intentional one-column stack. */
@media(max-width:899px){
  .cms-footer--spalten-marke .cms-footer__inner{grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:2.25rem}
}
@media(max-width:768px){
  .cms-navbar__brand{max-width:calc(100% - 3rem)}

  .cms-footer{padding:3rem 1.25rem 3.5rem}
  .cms-footer__inner,.cms-footer__inner[style*="--cols"],.cms-footer--spalten-marke .cms-footer__inner{grid-template-columns:minmax(0,1fr);gap:2.25rem}
  .cms-footer__brand{grid-column:auto;max-width:none}
  .cms-footer__col{min-width:0}
  .cms-footer__claim{font-size:clamp(1.85rem,9vw,2.4rem);overflow-wrap:break-word}
  .cms-footer__link{overflow-wrap:anywhere}
  .cms-footer__hours-row dt{white-space:normal;overflow-wrap:anywhere}
  .cms-footer--spalten-marke{padding-top:3rem;padding-bottom:0}
  .cms-footer--spalten-marke .cms-footer__logo{height:4.5rem}
  .cms-footer--spalten-marke .cms-footer__note{margin-top:3rem}
  .cms-footer__note{align-items:flex-start}
  .cms-footer__note-links{width:100%;margin-left:0;justify-content:flex-start}
  .cms-footer--karte{margin:0 .75rem .75rem;padding:2.5rem 1.25rem}

  /* The editor simulates mobile width inside a narrow canvas. Viewport units still
     refer to the large browser window there, so large hero titles need
     a mobile cap. Short display words stay intact; only genuinely long
     words may break, without automatic hyphen glyphs. */
  .cms-hero__title{font-size:clamp(2.4rem,11vw,3.5rem);hyphens:none;overflow-wrap:break-word;word-break:normal}
  .cms-hero--titel-xl .cms-hero__title{font-size:clamp(2.8rem,12vw,3.5rem)}
  .cms-hero--titel-lg .cms-hero__title{font-size:clamp(2.5rem,10vw,3.5rem)}
}

/* Intrinsic image dimensions must never widen mosaic tracks beyond the page. */
.cms-mosaic__grid{min-width:0;grid-template-columns:repeat(2,minmax(0,1fr))}
.cms-mosaic__item{min-width:0;width:100%;max-width:100%}
.cms-mosaic--row3 .cms-mosaic__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.cms-mosaic--lead-left .cms-mosaic__grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.cms-mosaic--lead-right .cms-mosaic__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}

/* Timeline cards and document banners may contain long authored labels. */
.cms-timeline__step{min-width:0}
.cms-docbanner{min-width:0;grid-template-columns:minmax(0,1fr) auto}
.cms-docbanner>*{min-width:0}

/* A centred jump navigation remains centred while it fits and becomes a
   natural, keyboard-scrollable rail when it does not. */
.cms-section-nav--center .cms-section-nav__rail{justify-content:safe center}

/* Authored button labels wrap inside their container instead of defining its
   width. The visual treatment, padding and hierarchy remain unchanged. */
.btn{max-width:100%;white-space:normal;text-align:center}
.cms-section__actions,.cms-section__actions>p{max-width:100%;min-width:0}

/* The legacy testimonial wrapper is also the outer shell of the newer
   carousel. Its child must shrink to that shell instead of using the track's
   full intrinsic width. */
.cms-testimonials--carousel>.cms-carousel{width:100%;min-width:0;flex:1 1 100%}

/* Collection layouts use the same responsive contract regardless of their
   visual card variant. Calendar collections previously missed the grid-only
   breakpoint and squeezed three cards into ~40px text columns on phones. */
.cms-collection-list--calendar .cms-collection-list__cards{grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr))}

/* Horizontal regions are real keyboard destinations, not touch-only rails.
   The matching renderers provide tabindex + an accessible name. */
:is(.cms-tabs__nav,.cms-compare__scroll,.cms-reviews__row,.cms-carousel__viewport):focus-visible{
  outline:3px solid var(--_primary);outline-offset:3px
}

/* Readability guardrail. The hierarchy of these secondary labels is carried
   by size, weight and spacing; opacity and faint theme tokens made otherwise
   polished templates fail contrast, especially in local dark sections. */
:is(
  .cms-footer__blurb,.cms-footer__title,.cms-footer__text,.cms-footer__link,
  .cms-footer__hours-row dt,.cms-footer__hours-row dd,.cms-footer__note,
  .cms-footer__note-right,.cms-footer__note-link,.cms-contact-card__label,
  .cms-stat__label,.cms-eyebrow,.cms-kicker,.cms-feature__text,
  .cms-timeline__text,.cms-team__role,.cms-team__bio,.cms-accordion__body,
  .cms-pricing__period,.cms-pricing__features,.cms-bento__eyebrow,
  .cms-bento__text,.cms-card__badge,.cms-card__excerpt,.cms-card__meta,
  .cms-card__tag,.cms-hours__day,.cms-logo-wall__title,
  .cms-testimonial__role,.cms-reviews__source,.cms-reviews__date,
  .cms-carousel__cap,.cms-slider__cap,.cms-video figcaption,
  .cms-hero__eyebrow,.cms-hero__sub,.cms-hero__meta,
  .cms-tabs__label,.cms-card__kicker,.cms-card__facts dt,.cms-card__status,
  .cms-spielplan-row__when,.cms-spielplan-row__kicker,.cms-spielplan-row__venue,
  .cms-spielplan-wechsel__status,.cms-spielplan-wechsel__facts dt,
  .cms-hero-split__facts dt,.cms-menu__mark-nr,.cms-news__date,
  .cms-news__more,.cms-testimonial__initials,.cms-cookie-decl__intro,
  .cms-cookie-decl__desc,.cms-cookie-decl__svc-key,.cms-cookie-decl__svc-purpose,
  .cms-cookie-decl__empty
){color:inherit!important;opacity:1!important}

/* Surface components establish a local ink context. This matters in both
   directions: a light card can sit in a dark band, and a dark-theme card can
   sit in an intentionally light editorial section. */
:is(.cms-bento__card,.cms-feature,.cms-accordion__item,.cms-stat,
  .cms-testimonial,.cms-news__card,.cms-card,.cms-spielplan-wechsel){color:var(--_fg)}
.cms-feature__title,.cms-feature__more{
  color:color-mix(in srgb,var(--_primary) 82%,var(--_fg))!important
}

/* The explicit dark bento variant must stay dark in dark themes too.
   Mixing from --_fg inverted it to a pale panel whenever the theme ink was
   light, producing light-on-light cards. */
.cms-bento--dark{background:color-mix(in srgb,#111827 94%,var(--_primary));color:#fff}
.cms-bento--dark .cms-bento__card{background:color-mix(in srgb,#1f2937 94%,var(--_primary));color:#fff}
.cms-timeline__dot{color:var(--_fg)!important}

/* Authored dark bands take precedence over global muted tokens. Text-only
   children and transparent variants follow the band's chosen light ink;
   components with an opaque surface retain the local contexts above. */
.cms-section--on-dark :is(
  .cms-column>p,.cms-section__inner>p,.cms-feature-grid--plain .cms-feature,
  .cms-feature-grid--ruled .cms-feature,.cms-stats--plain,.cms-stats--plain .cms-stat
){color:inherit!important;opacity:1!important}

/* Captions are secondary through size and placement, not insufficient ink. */
figcaption{color:inherit!important;opacity:1!important}

/* Quiet actions remain visually subordinate through their compact type and
   borderless treatment while inheriting a surface-safe ink colour. */
.btn-quiet{color:inherit!important;opacity:1!important}

/* Quiet outline links remain visibly branded, but pull enough ink from the
   page foreground to meet AA in palettes whose primary sits on the threshold. */
.btn-outline{color:color-mix(in srgb,var(--_primary) 88%,var(--_fg))!important}
.cms-collection-back a,
.cms-section:not(.cms-section--on-dark) p a:not(.btn){
  color:color-mix(in srgb,var(--_primary) 78%,var(--_fg))!important
}
.cms-section--on-dark p a:not(.btn){color:inherit!important}

/* Brand heroes retain their palette but need a deep enough field for the
   configured on-primary ink and translucent secondary action. */
.cms-hero--brand{background:color-mix(in srgb,var(--_primary) 70%,#10100c)}
.cms-hero__caption .btn-secondary{
  background:#1f2937;color:#fff;border-color:#1f2937
}

/* Active navigation keeps its brand cue while avoiding borderline primaries
   on translucent light chrome. The underline/pill still carries the state. */
.cms-navbar--light .cms-navbar__item--active{
  color:color-mix(in srgb,var(--_primary) 78%,var(--_fg))!important
}
.cms-navbar--dark .cms-navbar__item--active{
  color:color-mix(in srgb,var(--_primary) 45%,#fff)!important
}

/* Footer headings keep a restrained brand tint while remaining anchored to
   the foreground colour that was chosen for the footer surface. */
.cms-footer--light .cms-footer__title{color:color-mix(in srgb,var(--_fg) 90%,var(--_primary))!important}
.cms-footer--dark .cms-footer__title{color:color-mix(in srgb,var(--color-footer-fg,#d6d3d1) 90%,var(--_primary))!important}
.cms-footer--light .cms-footer__claim{color:color-mix(in srgb,var(--_fg) 90%,var(--_primary))!important}
.cms-footer--dark .cms-footer__claim{color:color-mix(in srgb,var(--color-footer-fg,#d6d3d1) 90%,var(--_primary))!important}

/* Brand palettes can legitimately use pale accent colours; cookie consent is
   a legal control and therefore keeps a theme-independent AA pair. */
.ac-btn--accept{background:#1f2937!important;color:#fff!important;border-color:#1f2937!important}

/* Interactive targets remain comfortably operable without visually turning
   quiet links and dots into large controls. */
:is(.cms-navbar__burger,.cms-footer__link,.cms-footer__note-link,.cms-consent-settings,
  .cms-carousel__dot,.cms-heroslider__dot,.cms-pagination__page,.cms-tag-chip){
  min-inline-size:24px;min-block-size:24px
}

@media(prefers-reduced-motion:reduce){
  /* The static fallback wraps in place; it must retain the animated track's
     clipping contract and relinquish its max-content flex basis. */
  .cms-logo-wall--marquee .cms-logo-wall__track{overflow:hidden}
  .cms-logo-wall--marquee .cms-logo-wall__row{flex:1 1 100%;width:100%;min-width:0}
}

@media(max-width:1024px){
  .cms-timeline{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .cms-footer__hours-row dd{white-space:normal;overflow-wrap:anywhere}
}

@media(max-width:768px){
  .cms-navbar__burger{display:flex;align-items:center;justify-content:center;padding:.25rem}
  .cms-collection-list--calendar .cms-collection-list__cards{grid-template-columns:minmax(0,1fr)}
  .cms-mosaic--lead-left .cms-mosaic__grid,.cms-mosaic--lead-right .cms-mosaic__grid{grid-template-columns:minmax(0,1fr)}
  .cms-mosaic--lead-left .cms-mosaic__grid,.cms-mosaic--lead-right .cms-mosaic__grid{grid-auto-rows:auto}
  .cms-mosaic--lead-left .cms-mosaic__item,.cms-mosaic--lead-right .cms-mosaic__item{grid-row:auto!important;grid-column:auto!important}
  .cms-timeline{grid-template-columns:minmax(0,1fr)!important}
  .cms-docbanner{grid-template-columns:minmax(0,1fr)}
  .cms-section-nav--center .cms-section-nav__rail{justify-content:flex-start}
}.ac-cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:2147483646;background:var(--color-background,#fff);border-top:1px solid var(--color-border,#e2e8f0);box-shadow:0 -8px 24px rgba(0,0,0,.08);padding:1rem;font-size:.95rem}.ac-cookie-banner__inner{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:.75rem}.ac-cookie-banner__copy h2{font-size:1.125rem;margin:0 0 .25rem;line-height:1.3}.ac-cookie-banner__copy p{margin:0;color:var(--color-muted-foreground,#475569);line-height:1.5}.ac-cookie-banner__choices{display:flex;flex-direction:column;gap:.5rem;padding:.5rem 0;border-top:1px solid var(--color-border,#e2e8f0);border-bottom:1px solid var(--color-border,#e2e8f0)}.ac-cookie-banner__choices label{display:flex;align-items:center;gap:.5rem;cursor:pointer}.ac-cookie-banner__choices label span{color:var(--color-muted-foreground,#64748b);font-size:.85rem}.ac-cookie-banner__actions{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}.ac-btn{border:1px solid var(--color-border,#e2e8f0);background:#fff;padding:.6rem 1.1rem;border-radius:.5rem;cursor:pointer;font:inherit;font-weight:500;line-height:1.2;min-width:7.5rem;color:var(--color-foreground,#0f172a)}.ac-btn--equal{font-weight:600}.ac-btn--accept{background:var(--color-primary,#2563eb);color:#fff;border-color:var(--color-primary,#2563eb)}.ac-btn--accept:hover{filter:brightness(.95)}.ac-btn--reject{background:#475569;color:#fff;border-color:#475569}.ac-btn--reject:hover{filter:brightness(.95)}.ac-btn--ghost{background:transparent;border-color:transparent;text-decoration:underline;min-width:0;font-weight:400}.ac-btn:focus-visible{outline:2px solid var(--color-primary,#2563eb);outline-offset:2px}.ac-cookie-trigger{position:fixed;right:.75rem;bottom:.75rem;z-index:2147483645;background:rgba(255,255,255,.92);border:1px solid var(--color-border,#e2e8f0);border-radius:.5rem;padding:.4rem .75rem;font-size:.75rem;cursor:pointer;color:var(--color-muted-foreground,#475569)}.ac-cookie-trigger:hover{color:var(--color-foreground,#0f172a)}@media (min-width:760px){.ac-cookie-banner__inner{flex-direction:row;align-items:flex-start;flex-wrap:wrap}.ac-cookie-banner__copy{flex:1 1 320px;min-width:280px}.ac-cookie-banner__choices{flex:1 1 100%;flex-direction:row;flex-wrap:wrap;gap:1rem}.ac-cookie-banner__actions{flex:1 1 100%;justify-content:flex-end}}
.cms-cart-toggle{position:fixed;top:1rem;right:1rem;background:var(--color-primary,#2563eb);color:#fff;border:0;border-radius:9999px;width:48px;height:48px;cursor:pointer;font-size:1.25rem;z-index:100;box-shadow:0 4px 12px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center}
.cms-cart-toggle__count{position:absolute;top:-4px;right:-4px;background:#dc2626;color:#fff;border-radius:9999px;font-size:.75rem;min-width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center;padding:0 .25rem}
.cms-cart{position:fixed;top:0;right:0;height:100vh;width:380px;max-width:100vw;background:var(--color-background,#fff);box-shadow:-4px 0 24px rgba(0,0,0,.15);transform:translateX(100%);transition:transform .25s;z-index:101;display:flex;flex-direction:column}
.cms-cart__overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .25s;z-index:100}
.cms-cart-open .cms-cart{transform:translateX(0)}
.cms-cart-open .cms-cart__overlay{opacity:1;pointer-events:auto}
.cms-cart__header{padding:1rem;border-bottom:1px solid var(--color-border,#e2e8f0);display:flex;align-items:center;justify-content:space-between}
.cms-cart__header h3{margin:0;font-size:1.125rem}
.cms-cart__close{background:none;border:0;cursor:pointer;font-size:1.5rem;line-height:1;padding:0;color:var(--color-muted-foreground,#64748b)}
.cms-cart__items{flex:1;overflow-y:auto;padding:1rem}
.cms-cart__item{display:flex;align-items:center;gap:.5rem;padding:.5rem 0;border-bottom:1px solid var(--color-border,#e2e8f0)}
.cms-cart__item-name{flex:1;font-size:.875rem}
.cms-cart__item-qty{display:flex;align-items:center;gap:.25rem;font-size:.875rem}
.cms-cart__item-qty button{width:24px;height:24px;border:1px solid var(--color-border,#e2e8f0);background:var(--color-background,#fff);border-radius:.25rem;cursor:pointer}
.cms-cart__item-rm{background:none;border:0;cursor:pointer;color:#dc2626;font-size:1.25rem;line-height:1}
.cms-cart__empty{color:var(--color-muted-foreground,#64748b);font-size:.875rem;text-align:center;padding:2rem 0}
.cms-cart__footer{padding:1rem;border-top:1px solid var(--color-border,#e2e8f0)}
.cms-cart__checkout{width:100%;padding:.75rem;background:var(--color-primary,#2563eb);color:#fff;border:0;border-radius:.5rem;cursor:pointer;font-weight:600;font-size:1rem}