:root { --primary:#2563eb; --secondary:#eef4ff; --accent:#0f172a; --button-radius:14px; --card-radius:16px; --card-shadow:0 18px 45px rgba(15,23,42,.12); --card-pad:30px; --grid-gap:24px; --section-bg:transparent; --section-border:none; --section-shadow:none; --container-width:1160px; --container-padding:36px; --widget-gap-horizontal:24px; --widget-gap-vertical:24px; --widget-gap:24px; --logo-height:60px; --logo-max-width:220px; --bg:#f3f6fb; --body-background:#f3f6fb; --hero-background:#eef4ff; --footer-background:#0f172a; --header-background:rgba(255,255,255,0.92);--header-background-solid:#ffffff; --header-text:#0f172a; --header-border:rgba(219,227,239,.85); --header-shadow:0 8px 28px rgba(15,23,42,.045); --transition:none; --button-hover-transform:translateY(-2px); --button-hover-filter:none; --card-border-width:1px; --card-border-color:#dbe3ef; --active-menu-color:#2563eb; --active-menu-text:#ffffff; --active-menu-line-width:3px; --active-menu-radius:10px; --nav-hover-color:#eef4ff; --nav-hover-text:#0f172a; --nav-hover-radius:10px; --submenu-radius:16px; --text:#0f172a; --hero-text:#0f172a; --hero-badge-bg:rgba(255,255,255,.16); --footer-auto-text:#ffffff; --heading-h1-size:32px; --heading-h2-size:24px; --heading-h3-size:20px; --muted:#64748b; --card:#ffffff; --line:#dbe3ef; --soft:#eef4ff; --shadow:0 18px 45px rgba(15,23,42,.10); }
:root { --button-color:#2563eb; --button-text:#ffffff; --back-to-top-color:#2563eb; --back-to-top-text:#ffffff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
html, body { overflow-x:hidden; }
html { scrollbar-gutter: stable; }
:root { --cms-text-line-height:1.65; }
body { margin:0; font-family:"Segoe UI", "Segoe UI", Arial, Helvetica, sans-serif; color:var(--text); background:var(--body-background); line-height:var(--cms-text-line-height); }
a { color:inherit; }
.container { width:min(var(--container-width), calc(100% - var(--container-padding))); margin:0 auto; }
.cms-breadcrumbs { padding-top:12px; padding-bottom:14px; font-size:.9rem; color:var(--muted); }
.cms-breadcrumbs ol { display:flex; align-items:center; flex-wrap:wrap; gap:11px; list-style:none; margin:0; padding:0; }
.cms-breadcrumbs li { margin:0; padding:0; }
.cms-breadcrumbs a { display:inline-flex; align-items:center; gap:11px; color:var(--primary); text-decoration:none; }
.cms-breadcrumbs a:hover, .cms-breadcrumbs a:focus-visible { text-decoration:underline; }
.cms-breadcrumb-home-icon { display:inline-flex; justify-content:center; align-items:center; width:40px; height:40px; flex:none; border-radius:50%; background:#fff; color:var(--primary); box-shadow:0 3px 12px rgba(15,23,42,.09); }
.cms-breadcrumb-separator { color:#94a3b8; font-size:1.15rem; line-height:1; }
.cms-breadcrumb-current { border-radius:999px; padding:7px 15px !important; background:#e8f7ed; background:color-mix(in srgb, var(--primary) 11%, white); color:var(--primary); font-weight:650; }
@media(max-width:600px) { .cms-breadcrumbs { padding-top:12px; padding-bottom:12px; font-size:.82rem; } .cms-breadcrumbs ol { gap:7px; } .cms-breadcrumb-home-icon { width:34px; height:34px; } .cms-breadcrumb-current { padding:5px 10px !important; } }
.section-fullwidth { width:100vw !important; max-width:none !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; border-left:0 !important; border-right:0 !important; border-radius:0 !important; }
.section-fullwidth > .container { width:min(var(--container-width), calc(100% - var(--container-padding))); margin-left:auto; margin-right:auto; }
/* Step 877: Die widgetbezogene Auswahl „Volle Browserbreite“ betrifft nicht
nur die äußere Section-Fläche, sondern auch den eigentlichen Widget-Inhalt.
Der globale responsive Seitenabstand bleibt erhalten; die feste zentrale
Websitebreite wird für diesen Widget-Abschnitt jedoch aufgehoben. */
.section-fullwidth.cms-widget-browser-fullwidth > .container {
width:calc(100% - var(--container-padding)) !important;
max-width:none !important;
margin-left:auto !important;
margin-right:auto !important;
}
.hero.section-fullwidth, .section-fullwidth.hero { padding-left:0 !important; padding-right:0 !important; }
.hero.section-fullwidth .hero-grid, .section-fullwidth.hero .hero-grid { width:min(var(--container-width), calc(100% - var(--container-padding))); max-width:none; margin-left:auto; margin-right:auto; padding-left:0; padding-right:0; }
.hero.hero-fullwidth.section-fullwidth .hero-grid, .section-fullwidth.hero.hero-fullwidth .hero-grid { width:min(1480px, calc(100% - var(--container-padding))); }
.header { position:relative; top:auto; z-index:20; background:var(--header-background); backdrop-filter:blur(16px); border-bottom:1px solid var(--header-border); box-shadow:var(--header-shadow); }
body.nav-layout-vertikal-links { --side-nav-width:260px; --vertical-content-offset:clamp(24px, 3vw, 48px); }
body.nav-layout-vertikal-links .header,
body.nav-layout-vertikal-links .header.sticky { position:fixed; top:0; left:0; bottom:0; right:auto; width:var(--side-nav-width); height:100vh; z-index:1000; border-bottom:0; border-right:1px solid var(--header-border); overflow-y:auto; }
body.nav-layout-vertikal-links .header + main { padding-top:0 !important; }
body.nav-layout-vertikal-links .nav { width:100%; min-height:100%; flex-direction:column !important; align-items:stretch; justify-content:flex-start; padding:24px 18px; gap:22px; }
body.nav-layout-vertikal-links .nav .logo { width:100%; justify-content:flex-start; }
body.nav-layout-vertikal-links .nav .menu { width:100%; display:flex; justify-content:flex-start; margin:0; }
body.nav-layout-vertikal-links .menu-list { width:100%; flex-direction:column; align-items:stretch; gap:8px; }
body.nav-layout-vertikal-links .menu-list a { display:block; width:100%; padding:10px 12px; border-radius:12px; }
body.nav-layout-vertikal-links main,
body.nav-layout-vertikal-links .hero,
body.nav-layout-vertikal-links .hero-banner,
body.nav-layout-vertikal-links .site-footer { margin-left:var(--side-nav-width); width:calc(100% - var(--side-nav-width)); }
body.nav-layout-vertikal-links .hero > .container,
body.nav-layout-vertikal-links .hero .hero-grid,
body.nav-layout-vertikal-links .widget-section > .container,
body.nav-layout-vertikal-links main > .container,
body.nav-layout-vertikal-links .site-footer > .container { margin-left:var(--vertical-content-offset); margin-right:auto; width:min(var(--container-width), calc(100% - var(--container-padding) - var(--vertical-content-offset))); }
body.nav-layout-vertikal-links .section-fullwidth { width:calc(100vw - var(--side-nav-width)) !important; margin-left:0 !important; margin-right:0 !important; }
body.nav-layout-vertikal-links .section-fullwidth > .container { margin-left:var(--vertical-content-offset); margin-right:auto; }
/* Step 329/330: optional einklappbare vertikale Navigation auf Desktop, weich animiert. */
@media (min-width:821px) {
body.nav-layout-vertikal-links.vertical-menu-collapsible { transition: none; }
body.nav-layout-vertikal-links.vertical-menu-collapsible .menu-toggle { display:inline-flex; flex:0 0 auto; margin:0; color:var(--header-text); }
body.nav-layout-vertikal-links.vertical-menu-collapsible .nav { position:relative; flex-direction:row !important; flex-wrap:wrap; align-content:flex-start; align-items:center; column-gap:10px; row-gap:22px; transition:padding 280ms ease, gap 280ms ease; }
body.nav-layout-vertikal-links.vertical-menu-collapsible .nav .logo { width:auto; min-width:0; flex:1 1 0; }
body.nav-layout-vertikal-links.vertical-menu-collapsible .nav .menu { flex:0 0 100%; }
body.nav-layout-vertikal-links.vertical-menu-collapsible .header,
body.nav-layout-vertikal-links.vertical-menu-collapsible .header.sticky { transition:width 280ms ease; will-change:width; }
body.nav-layout-vertikal-links.vertical-menu-collapsible main,
body.nav-layout-vertikal-links.vertical-menu-collapsible .hero,
body.nav-layout-vertikal-links.vertical-menu-collapsible .hero-banner,
body.nav-layout-vertikal-links.vertical-menu-collapsible .site-footer { transition:margin-left 280ms ease, width 280ms ease; will-change:margin-left,width; }
body.nav-layout-vertikal-links.vertical-menu-collapsible .nav .logo,
body.nav-layout-vertikal-links.vertical-menu-collapsible .nav .menu { transition:opacity 180ms ease, transform 220ms ease, visibility 0s linear 0s; }
body.nav-layout-vertikal-links.vertical-menu-collapsible.vertical-nav-collapsed { --side-nav-width:76px; }
body.nav-layout-vertikal-links.vertical-menu-collapsible.vertical-nav-collapsed .header,
body.nav-layout-vertikal-links.vertical-menu-collapsible.vertical-nav-collapsed .header.sticky { width:var(--side-nav-width); overflow:hidden; }
body.nav-layout-vertikal-links.vertical-menu-collapsible.vertical-nav-collapsed .nav { padding:18px 12px; align-items:center; gap:10px; }
body.nav-layout-vertikal-links.vertical-menu-collapsible.vertical-nav-collapsed .menu-toggle { margin:0 auto; }
body.nav-layout-vertikal-links.vertical-menu-collapsible.vertical-nav-collapsed .nav .logo,
body.nav-layout-vertikal-links.vertical-menu-collapsible.vertical-nav-collapsed .nav .menu { opacity:0; transform:translateX(-10px); visibility:hidden; pointer-events:none; height:0; overflow:hidden; flex:0 0 0; width:0; }
body.nav-layout-vertikal-links.vertical-menu-collapsible.vertical-nav-collapsed main,
body.nav-layout-vertikal-links.vertical-menu-collapsible.vertical-nav-collapsed .hero,
body.nav-layout-vertikal-links.vertical-menu-collapsible.vertical-nav-collapsed .hero-banner,
body.nav-layout-vertikal-links.vertical-menu-collapsible.vertical-nav-collapsed .site-footer { margin-left:var(--side-nav-width) !important; width:calc(100% - var(--side-nav-width)) !important; }
@media (prefers-reduced-motion: reduce) {
body.nav-layout-vertikal-links.vertical-menu-collapsible .header,
body.nav-layout-vertikal-links.vertical-menu-collapsible .header.sticky,
body.nav-layout-vertikal-links.vertical-menu-collapsible main,
body.nav-layout-vertikal-links.vertical-menu-collapsible .hero,
body.nav-layout-vertikal-links.vertical-menu-collapsible .hero-banner,
body.nav-layout-vertikal-links.vertical-menu-collapsible .site-footer,
body.nav-layout-vertikal-links.vertical-menu-collapsible .nav,
body.nav-layout-vertikal-links.vertical-menu-collapsible .nav .logo,
body.nav-layout-vertikal-links.vertical-menu-collapsible .nav .menu { transition:none !important; }
}
}
/* Layoutsystem 2.0 Phase 4: Sidebar-Layout gezielt vom normalen vertikalen Menü trennen. */
body.website-layout-sidebar-left { --side-nav-width:290px; --vertical-content-offset:clamp(28px, 3.4vw, 58px); }
body.website-layout-sidebar-left .header,
body.website-layout-sidebar-left .header.sticky { background:var(--header-background); box-shadow:var(--header-shadow); }
body.website-layout-sidebar-left .nav { padding:30px 22px; gap:24px; }
body.website-layout-sidebar-left .nav .logo { font-size:1.28rem; line-height:1.25; }
body.website-layout-sidebar-left .nav .site-logo { max-width:100%; object-fit:contain; }
body.website-layout-sidebar-left .menu-list { gap:10px; }
body.website-layout-sidebar-left .menu-list a { padding:11px 13px; font-weight:750; }
/* Layoutsystem 2.0 Phase 6: Inhaltslayout nur im Sidebar-Modus aufwerten.
Standard/Klassisch bleibt unberuehrt. */
body.website-layout-sidebar-left main { padding:0; }
body.website-layout-sidebar-left main > .widget-section:first-child { margin-top:0; }
body.website-layout-sidebar-left .widget-section { margin-block:0; }
body.website-layout-sidebar-left .widget-section > .container,
body.website-layout-sidebar-left main > .container { max-width:1120px; }
body.website-layout-sidebar-left .hero .hero-grid { align-items:center; gap:clamp(28px, 4vw, 64px); }
body.website-layout-sidebar-left .hero img,
body.website-layout-sidebar-left .hero-banner img,
body.website-layout-sidebar-left .image-text img,
body.website-layout-sidebar-left .card img { border-radius:calc(var(--card-radius) + 6px); }
body.website-layout-sidebar-left .section-fullwidth > .container { max-width:1180px; }
/* Layoutsystem 2.0 Phase 7: Responsive-Verhalten nur fuer Sidebar-Layout.
Standard/Klassisch und das normale vertikale Menue bleiben unveraendert. */
@media (max-width:1180px) and (min-width:821px) {
body.website-layout-sidebar-left { --side-nav-width:250px; --vertical-content-offset:clamp(22px, 3vw, 42px); }
body.website-layout-sidebar-left .nav { padding:24px 18px; }
body.website-layout-sidebar-left .menu-list a { padding:10px 11px; font-size:.96rem; }
}
@media (max-width:980px) and (min-width:821px) {
body.website-layout-sidebar-left { --side-nav-width:225px; --vertical-content-offset:24px; }
body.website-layout-sidebar-left .nav { padding:22px 16px; gap:18px; }
body.website-layout-sidebar-left .nav .logo { font-size:1.08rem; }
body.website-layout-sidebar-left .menu-list { gap:7px; }
body.website-layout-sidebar-left .menu-list a { padding:9px 10px; font-size:.92rem; }
body.website-layout-sidebar-left .widget-section > .container,
body.website-layout-sidebar-left main > .container { max-width:960px; }
}
@media (max-width:820px) {
body.website-layout-sidebar-left { --side-nav-width:0px; --vertical-content-offset:0px; }
body.website-layout-sidebar-left .header,
body.website-layout-sidebar-left .header.sticky { position:relative !important; left:auto; right:auto; top:auto; bottom:auto; width:100%; height:auto; border-right:0; border-bottom:1px solid var(--header-border); overflow:visible; }
body.website-layout-sidebar-left .header + main { padding-top:0 !important; }
body.website-layout-sidebar-left main,
body.website-layout-sidebar-left .hero,
body.website-layout-sidebar-left .hero-banner,
body.website-layout-sidebar-left .site-footer { margin-left:0 !important; width:auto !important; }
body.website-layout-sidebar-left .nav { min-height:auto; padding:14px 0; flex-direction:row !important; align-items:center; flex-wrap:wrap; gap:10px; }
body.website-layout-sidebar-left .nav .logo { width:auto; flex:1 1 auto; justify-content:flex-start; }
body.website-layout-sidebar-left .nav .menu { display:none; flex:0 0 100%; width:100%; margin:8px 0 0 0; }
body.website-layout-sidebar-left .nav.is-open .menu { display:flex; }
body.website-layout-sidebar-left .menu-list { width:100%; flex-direction:column; align-items:stretch; gap:6px; }
body.website-layout-sidebar-left .menu-list a { width:100%; padding:10px 12px; }
body.website-layout-sidebar-left .hero > .container,
body.website-layout-sidebar-left .hero .hero-grid,
body.website-layout-sidebar-left .widget-section > .container,
body.website-layout-sidebar-left main > .container,
body.website-layout-sidebar-left .site-footer > .container { margin-left:auto !important; margin-right:auto !important; width:min(var(--container-width), calc(100% - var(--container-padding))) !important; max-width:none; }
body.website-layout-sidebar-left .section-fullwidth { width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; }
body.website-layout-sidebar-left .section-fullwidth > .container { margin-left:auto !important; margin-right:auto !important; }
body.website-layout-sidebar-left main { padding:24px 0 44px; }
}
.nav { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:var(--grid-gap); }
.menu-toggle { display:none; border:1px solid var(--header-border); background:rgba(127,127,127,.12); color:var(--header-text); border-radius:12px; width:44px; height:40px; align-items:center; justify-content:center; font-size:1.45rem; font-weight:850; line-height:1; cursor:pointer; }
.menu-toggle-icon { position:relative; width:20px; height:16px; display:inline-block; pointer-events:none; }
.menu-toggle-icon span { position:absolute; left:0; width:20px; height:2px; border-radius:999px; background:currentColor; transform-origin:center; transition:top .22s ease, transform .22s ease, opacity .16s ease; }
.menu-toggle-icon span:nth-child(1) { top:0; }
.menu-toggle-icon span:nth-child(2) { top:7px; }
.menu-toggle-icon span:nth-child(3) { top:14px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:nth-child(1) { top:7px; transform:rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:nth-child(2) { opacity:0; transform:scaleX(.25); }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:nth-child(3) { top:7px; transform:rotate(-45deg); }
@media (prefers-reduced-motion:reduce) {
.menu-toggle-icon span { transition:none; }
}
.nav-logo-links { flex-direction:row; }
.nav-logo-rechts { flex-direction:row-reverse; }
.nav-logo-zentriert { flex-direction:column; justify-content:center; gap:14px; }
.nav-menu-links .menu { justify-content:flex-start; margin-right:auto; }
.nav-menu-zentriert .menu { justify-content:center; margin-left:auto; margin-right:auto; }
.nav-menu-rechts .menu { justify-content:flex-end; margin-left:auto; }
.header.sticky { position:fixed; top:0; left:0; right:0; width:100%; z-index:1000; }
.header.below-hero-header { position:relative; z-index:999; }
.header.below-hero-header.sticky { position:relative; top:auto; left:auto; right:auto; width:100%; }
.header.below-hero-header.is-stuck { position:fixed; top:0; left:0; right:0; width:100%; z-index:1000; }
.below-hero-header-spacer { display:none; height:0; }
.below-hero-header-spacer.is-active { display:block; }
.header:not(.sticky) { position:relative; top:auto; }
.header.sticky + main { padding-top:78px; }
.header.below-hero-header.sticky + main { padding-top:0; }
.header-kompakt.sticky + main { padding-top:56px; }
.header-klassisch.sticky + main { padding-top:78px; }
.header-breit.sticky + main { padding-top:104px; }
.header-kompakt.sticky + .hero, .header-kompakt.sticky + .hero-banner { margin-top:56px; }
.header-klassisch.sticky + .hero, .header-klassisch.sticky + .hero-banner { margin-top:78px; }
.header-breit.sticky + .hero, .header-breit.sticky + .hero-banner { margin-top:104px; }
.header-kompakt.sticky + main [id] { scroll-margin-top:72px; }
.header-klassisch.sticky + main [id] { scroll-margin-top:94px; }
.header-breit.sticky + main [id] { scroll-margin-top:120px; }
body.nav-layout-vertikal-links main [id] { scroll-margin-top:16px; }
.header-kompakt .nav { min-height:56px; }
.header-klassisch .nav { min-height:78px; }
.header-breit .nav { min-height:104px; }
/* Abschnittsstile wurden entfernt. Inhaltsbereiche verwenden dauerhaft
das bisherige klassische Layout ohne zusätzliche Hauptkarte oder Außenabstände. */
/* Klassischer Hero: automatische Textfarbe aus dem Designsystem. */
.hero:not(.hero-overlay-fullwidth) :where(h1,h2,h3,h4,p,span,small,strong,a,div) {
color:var(--hero-text) !important;
}
/* Step 1605: Eine am Titel gesetzte Sonderfarbe hat gezielt Vorrang vor der
automatischen Hero-Textfarbe. Fliesstext und sonstige Inhalte bleiben davon
unberuehrt. */
.hero:not(.hero-overlay-fullwidth) :where(h1,h2,h3) {
color:var(--hero-heading-color,var(--hero-text)) !important;
}
.hero:not(.hero-overlay-fullwidth) .eyebrow,
.hero:not(.hero-overlay-fullwidth) .badge,
.hero:not(.hero-overlay-fullwidth) .pill {
color:var(--hero-text) !important;
border-color:color-mix(in srgb, var(--hero-text) 28%, transparent);
}
/* Layout & Abstände / Design-System: Widget-Karten nutzen --card-radius, --card-pad und --card-shadow */
.section { padding:calc(var(--widget-gap-vertical) / 2) 0; }
.widget-section { padding:calc(var(--widget-gap-vertical) / 2) 0 !important; }
.widget-row { column-gap:var(--widget-gap-horizontal) !important; row-gap:var(--widget-gap-vertical) !important; margin-bottom:0 !important; }
.widget-row:last-child { margin-bottom:0 !important; }
.card, .widget-plain { padding:var(--card-pad); }
@media (max-width:760px) {
.widget-row { grid-template-columns:1fr !important; }
.widget-row.has-horizontal-spacing { display:flex !important; flex-wrap:wrap; }
.widget-row.has-horizontal-spacing > .spacing-horizontal-slot { max-width:100%; }
.widget-slot { grid-column:1 / -1 !important; }
}
/* Step 990: Smartphone-Textbreite tatsächlich freigeben.
Die spätere <=820px-Regel setzt .container fest auf 100%-28px und hatte die
Step-989-Variable deshalb wirkungslos gemacht. Auf echten Smartphones wird
die tatsächlich wirksame Containerbreite nun auf 100%-20px gesetzt
(= ca. 10px Außenrand je Seite). Zusätzlich erhalten textlastige
Abschnittsüberschriften mit eigener Oberfläche statt 34px nur 18px
horizontalen Innenabstand. Desktop und Tablet bleiben unverändert. */
@media (max-width:820px) {
/* Step 992: Auf Tablet und Smartphone ist die Kopfzeile ein eigener,
stabiler Bereich über der Headergrafik. Sticky bleibt möglich, liegt aber
im normalen Seitenfluss. Dadurch verschiebt oder überlagert die Navigation
die Headergrafik nicht mehr. */
.header,
.header.sticky,
.header.header-kompakt.sticky,
.header.header-klassisch.sticky,
.header.header-breit.sticky {
position:sticky !important;
top:0 !important;
left:auto !important;
right:auto !important;
width:100% !important;
height:auto !important;
z-index:1000;
overflow:visible !important;
}
.header .nav {
position:relative;
min-height:72px !important;
padding-top:10px !important;
padding-bottom:10px !important;
}
.header.sticky + main,
.header.header-kompakt.sticky + main,
.header.header-klassisch.sticky + main,
.header.header-breit.sticky + main {
padding-top:0 !important;
}
.header.sticky + .hero,
.header.sticky + .hero-banner,
.header.header-kompakt.sticky + .hero,
.header.header-kompakt.sticky + .hero-banner,
.header.header-klassisch.sticky + .hero,
.header.header-klassisch.sticky + .hero-banner,
.header.header-breit.sticky + .hero,
.header.header-breit.sticky + .hero-banner {
margin-top:0 !important;
}
.header.below-hero-header,
.header.below-hero-header.sticky,
.header.below-hero-header.is-stuck {
position:sticky !important;
top:0 !important;
left:auto !important;
right:auto !important;
width:100% !important;
/* Step 999: backdrop-filter erzeugt für position:fixed-Nachfahren
einen eigenen Bezugskontext. Beim Header UNTERHALB der Hero-Grafik
wurde die viewportbezogene top-Position des Menüs deshalb nochmals
ab Headerposition gerechnet. Das Menü landete deutlich zu tief.
Mobil muss dieser Header deshalb für das Overlay neutral bleiben. */
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
filter:none !important;
transform:none !important;
perspective:none !important;
contain:none !important;
will-change:auto !important;
}
.below-hero-header-spacer,
.below-hero-header-spacer.is-active {
display:none !important;
height:0 !important;
}
/* Step 994: Burger-Menü als echtes viewport-breites Overlay.
Die Menüfläche ist nicht mehr an den schmaleren .container gebunden,
sondern füllt die komplette verfügbare Browserbreite. Die obere Position
wird beim Öffnen per JS an die reale Unterkante der Kopfzeile gekoppelt. */
.header .nav .menu,
body.nav-layout-vertikal-links .header .nav .menu {
position:fixed !important;
top:var(--cms-mobile-menu-top,72px) !important;
left:0 !important;
right:0 !important;
width:100% !important;
max-width:none !important;
margin:0 !important;
padding:10px 14px 14px !important;
background:var(--header-background) !important;
border-top:1px solid var(--header-border);
border-bottom:1px solid var(--header-border);
box-shadow:0 18px 34px rgba(15,23,42,.18);
z-index:1001;
max-height:calc(100vh - var(--cms-mobile-menu-top,72px)) !important;
max-height:calc(100dvh - var(--cms-mobile-menu-top,72px)) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
}
.header .nav:not(.is-open) .menu,
body.nav-layout-vertikal-links .header .nav:not(.is-open) .menu {
display:none !important;
}
.header .nav.is-open .menu,
body.nav-layout-vertikal-links .header .nav.is-open .menu {
display:flex !important;
}
/* Step 998: Bei "Navigation unterhalb des Headers" ist das geöffnete Menü
ein echtes, halbtransparentes Overlay. Es füllt die komplette
Resthöhe unterhalb der mobilen Navigationsleiste bis zum Viewport-Ende.
Der Inhalt darunter bleibt sichtbar, wird aber nicht verschoben; gescrollt wird nur im Menü. */
.header.below-hero-header .nav.is-open .menu {
/* Step 999: echtes Viewport-Overlay.
top wird aus der realen Unterkante der mobilen Navigationsleiste
berechnet, bottom:0 bindet das Menü direkt an den unteren Viewport.
Keine abgeleiteten vh-Höhen mehr. */
position:fixed !important;
top:var(--cms-mobile-menu-top,72px) !important;
bottom:0 !important;
left:0 !important;
right:0 !important;
width:100vw !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
margin:0 !important;
background:var(--header-background) !important;
align-items:flex-start !important;
align-content:flex-start !important;
box-sizing:border-box !important;
opacity:1 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
z-index:2147483000 !important;
}
.header.below-hero-header .nav.is-open .menu-list {
flex:0 0 auto;
align-self:flex-start;
}
body.mobile-nav-open {
overflow:hidden !important;
}
.header .menu-list {
width:100%;
max-height:none !important;
overflow:visible !important;
overscroll-behavior:contain;
}
/* Step 994: Untermenüs auf Smartphone/Tablet als Accordion.
Sie sind standardmäßig geschlossen und öffnen sich nur beim Antippen
des Pfeils. Dadurch bleibt auch eine umfangreiche Navigation übersichtlich. */
.header .has-submenu > a {
display:flex !important;
align-items:center !important;
gap:8px !important;
}
.header .submenu-marker {
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
flex:0 0 36px !important;
width:36px !important;
height:36px !important;
margin-left:auto !important;
border-radius:9px;
cursor:pointer;
user-select:none;
color:inherit !important;
background:rgba(127,127,127,.08);
transition:background-color .18s ease, color .18s ease;
}
.header .submenu-marker .submenu-chevron {
display:inline-block !important;
font-size:1rem !important;
line-height:1 !important;
color:currentColor !important;
transition:transform .18s ease, color .18s ease;
}
.header .menu-list a:hover .submenu-marker,
.header .menu-list a:focus .submenu-marker,
.header .submenu-marker:hover,
.header .submenu-marker:focus {
color:var(--nav-hover-text) !important;
background:color-mix(in srgb,var(--nav-hover-text) 12%,transparent);
outline:none;
}
.header .has-submenu > .submenu,
body.nav-layout-vertikal-links .header .has-submenu > .submenu {
display:none !important;
position:static !important;
opacity:1 !important;
visibility:visible !important;
transform:none !important;
width:calc(100% - 12px) !important;
min-width:0 !important;
margin:3px 0 7px 12px !important;
padding:4px 0 4px 12px !important;
border:0 !important;
border-left:3px solid var(--line) !important;
border-radius:0 !important;
box-shadow:none !important;
background:transparent !important;
}
.header .has-submenu.is-submenu-open > .submenu,
body.nav-layout-vertikal-links .header .has-submenu.is-submenu-open > .submenu {
display:block !important;
}
.header .has-submenu.is-submenu-open > a .submenu-marker .submenu-chevron {
transform:rotate(180deg);
}
.header .submenu a {
width:100% !important;
padding:7px 10px !important;
white-space:normal !important;
justify-content:flex-start !important;
}
}
@media (max-width:520px) {
.container {
width:min(100% - 20px, 1160px) !important;
}
.section-fullwidth > .container,
body.nav-layout-vertikal-links .hero > .container,
body.nav-layout-vertikal-links .widget-section > .container,
body.nav-layout-vertikal-links main > .container,
body.nav-layout-vertikal-links .site-footer > .container {
width:min(100% - 20px, 1160px) !important;
}
.section-heading-content.cms-widget-surface {
padding-left:18px !important;
padding-right:18px !important;
}
}
@media (max-width:820px) {
body.nav-layout-vertikal-links { --side-nav-width:0px; --vertical-content-offset:0px; }
body.nav-layout-vertikal-links .header,
body.nav-layout-vertikal-links .header.sticky { position:relative; width:100%; height:auto; border-right:0; border-bottom:1px solid var(--header-border); overflow:visible; }
body.nav-layout-vertikal-links main,
body.nav-layout-vertikal-links .hero,
body.nav-layout-vertikal-links .hero-banner,
body.nav-layout-vertikal-links .site-footer { margin-left:0; width:auto; }
body.nav-layout-vertikal-links .hero > .container,
body.nav-layout-vertikal-links .hero .hero-grid,
body.nav-layout-vertikal-links .widget-section > .container,
body.nav-layout-vertikal-links main > .container,
body.nav-layout-vertikal-links .site-footer > .container { margin-left:auto; margin-right:auto; width:min(var(--container-width), calc(100% - var(--container-padding))); }
body.nav-layout-vertikal-links .section-fullwidth { width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; }
body.nav-layout-vertikal-links .section-fullwidth > .container { margin-left:auto; margin-right:auto; }
body.nav-layout-vertikal-links .nav { min-height:auto; padding:14px 0; flex-direction:row !important; align-items:center; flex-wrap:wrap; }
body.nav-layout-vertikal-links .nav .logo { width:auto; flex:1 1 auto; justify-content:flex-start; }
body.nav-layout-vertikal-links .nav .menu { display:none; flex:0 0 100%; width:100%; margin:8px 0 0 0; }
body.nav-layout-vertikal-links .nav.is-open .menu { display:flex; }
body.nav-layout-vertikal-links .menu-list { flex-direction:column; align-items:stretch; width:100%; gap:6px; }
body.website-layout-sidebar-left main { padding:24px 0 44px; }
.nav, .nav-logo-links, .nav-logo-rechts, .nav-logo-zentriert { flex-direction:column; align-items:flex-start; gap:12px; padding:14px 0; }
.nav-menu-links .menu, .nav-menu-zentriert .menu, .nav-menu-rechts .menu { justify-content:flex-start; margin-left:0; margin-right:0; width:100%; }
.menu-list { flex-direction:column; align-items:stretch; width:100%; }
.menu-list > li { width:100%; }
.menu-list a { width:100%; justify-content:space-between; }
.submenu { position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; border-left:3px solid var(--line); border-radius:0; padding:4px 0 4px 14px; margin:2px 0 8px 10px; min-width:0; background:transparent; }
.submenu a { padding:7px 10px; }
}
.logo { display:inline-flex; align-items:center; gap:10px; font-weight:850; color:var(--header-text); text-decoration:none; font-size:1.15rem; letter-spacing:-.02em; }
.logo-icon::before { content:""; width:34px; height:34px; border-radius:12px; background:var(--primary); box-shadow:0 10px 24px rgba(37,99,235,.28); flex:0 0 auto; }
.logo.has-image { gap:0; }
.logo.has-image .site-logo { display:block; height:var(--logo-height); max-width:var(--logo-max-width); width:auto; object-fit:contain; }
.logo-text-stack { display:inline-flex; flex-direction:column; justify-content:center; align-items:flex-start; min-width:0; line-height:1; }
.logo-adjacent-text { display:block; white-space:nowrap; line-height:1.05; letter-spacing:-.02em; }
.logo-subtitle-text { display:block; white-space:nowrap; line-height:1.15; margin-top:3px; letter-spacing:0; }
.logo.has-image.logo-with-icon { gap:10px; }
.logo.has-image.logo-with-icon::before { content:""; width:34px; height:34px; border-radius:12px; background:var(--primary); box-shadow:0 10px 24px rgba(37,99,235,.28); flex:0 0 auto; }
.menu { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; align-items:center; }
@font-face { font-family:'FontAwesome'; src:url('assets/fontawesome/fonts/fontawesome-webfont.ttf?v=74cc1724d6') format('truetype'); font-weight:normal; font-style:normal; font-display:block; }
.fa { display:inline-block; font:normal normal normal 14px/1 FontAwesome; font-size:inherit; text-rendering:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.cms-editor-fa-icon { display:inline-block; width:auto; margin:0 .14em; vertical-align:-.08em; line-height:1; font-family:FontAwesome; font-style:normal; font-weight:normal; }
.contact-field-heading { display:inline-flex; align-items:center; gap:7px; }
.contact-field-icon { flex:0 0 auto; width:1.15em; text-align:center; }
.contact-field-value { min-width:0; }
.cms-button-content { display:inline-flex; align-items:center; justify-content:center; }
.cms-button-content .fa { flex:0 0 auto; }
.page-navigation-icon { flex:0 0 auto; width:1.1em; text-align:center; }
.page-navigation-title { min-width:0; }
.menu-list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:inherit; }
.menu-list li { position:relative; margin:0; padding:0; }
.menu-list a { display:flex; align-items:center; gap:6px; color:var(--header-text); text-decoration:none; font-weight:700; padding:9px 13px; border-radius:var(--nav-hover-radius); transition:background .2s ease, color .2s ease; white-space:nowrap; }
/* Step 652: Mehrzeilige horizontale Navigation automatisch luftig darstellen. */
@media (min-width:821px) {
body:not(.nav-layout-vertikal-links):not(.website-layout-sidebar-left) .nav.nav-menu-wrapped {
min-height:0;
padding-top:16px;
padding-bottom:16px;
}
body:not(.nav-layout-vertikal-links):not(.website-layout-sidebar-left) .nav.nav-menu-wrapped .menu-list {
row-gap:12px;
}
}
.menu-list a:hover { color:var(--nav-hover-text); background:var(--nav-hover-color); }
.menu-list a.is-active { background:var(--active-menu-color);color:var(--active-menu-text)!important;border-radius:var(--active-menu-radius); }
.menu-list a.is-active:hover { background:var(--active-menu-color);color:var(--active-menu-text)!important;border-radius:var(--active-menu-radius); }
.submenu-marker { font-size:.8em; opacity:.75; }
.submenu { list-style:none; margin:0; padding:8px; position:absolute; top:calc(100% + 6px); left:0; min-width:220px; background:var(--header-background); border:1px solid var(--header-border); border-radius:var(--submenu-radius); box-shadow:0 18px 45px rgba(15,23,42,.16); opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease, visibility .18s ease; z-index:80; }
.has-submenu:hover > .submenu, .has-submenu:focus-within > .submenu { opacity:1; visibility:visible; transform:translateY(0); }
.submenu li { width:100%; }
.submenu a { border-radius:var(--nav-hover-radius); width:100%; justify-content:flex-start; }
.submenu .submenu { top:0; left:calc(100% + 8px); }
/* Mega-Menü nur für die horizontale Desktop-Navigation. Das vorhandene
mobile, vertikale und Overlay-Menü behält seine bisherige Darstellung. */
@media (min-width:821px) {
body.cms-mega-nav .header .nav { position:relative; }
body.cms-mega-nav .header .menu-list > li.has-submenu { position:static; }
body.cms-mega-nav .header .menu-list > li.has-submenu > .submenu {
top:100%; left:0; width:100%; min-width:0; max-height:min(70vh,620px);
overflow-y:auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px 18px; padding:54px 24px 24px; margin:0;
background:var(--body-background); border:1px solid var(--header-border);
border-radius:0 0 var(--submenu-radius) var(--submenu-radius);
box-shadow:0 18px 42px rgba(15,23,42,.16);
color:var(--text); transform:translateY(8px);
}
body.cms-mega-nav .header .menu-list > li.has-submenu > .submenu::before {
content:attr(data-mega-title); position:absolute; top:17px; left:24px;
font-size:.88rem; font-weight:650; opacity:.72;
}
body.cms-mega-nav .header .menu-list > li.has-submenu.is-submenu-open > .submenu {
opacity:1; visibility:visible; transform:translateY(0);
}
body.cms-mega-nav .header .menu-list > li.has-submenu:not(.is-submenu-open):hover > .submenu,
body.cms-mega-nav .header .menu-list > li.has-submenu:not(.is-submenu-open):focus-within > .submenu {
opacity:0; visibility:hidden; transform:translateY(8px);
}
body.cms-mega-nav .header .menu-list > li.has-submenu > a .submenu-chevron {
display:inline-block; transition:transform .22s ease;
}
body.cms-mega-nav .header .menu-list > li.has-submenu > a .submenu-marker {
display:inline-flex; align-items:center; justify-content:center;
min-width:30px; min-height:30px; margin:-5px -5px -5px 0;
border-radius:var(--nav-hover-radius); cursor:pointer;
}
body.cms-mega-nav .header .menu-list > li.has-submenu > a .submenu-marker:hover,
body.cms-mega-nav .header .menu-list > li.has-submenu > a .submenu-marker:focus-visible {
background:color-mix(in srgb,var(--primary) 10%,transparent);
}
body.cms-mega-nav .header .menu-list > li.has-submenu.is-submenu-open > a .submenu-chevron {
transform:rotate(180deg);
}
body.cms-mega-nav .header .menu-list > li.has-submenu > a { cursor:pointer; }
body.cms-mega-nav .header .menu-list > li.has-submenu > .submenu > li {
min-width:0; width:auto; border-right:1px solid var(--header-border);
padding-right:12px;
}
body.cms-mega-nav .header .menu-list > li.has-submenu > .submenu > li:nth-child(3n) { border-right:0; }
body.cms-mega-nav .header .menu-list > li.has-submenu > .submenu > li.mega-parent-link {
grid-column:1 / -1; border-right:0; border-bottom:1px solid var(--header-border);
padding:0 0 10px; margin-bottom:2px;
}
body.cms-mega-nav .header .menu-list > li.has-submenu > .submenu > li > a {
white-space:normal; min-height:42px; padding:9px 12px;
font-weight:700; color:var(--text);
}
body.cms-mega-nav .header .menu-list > li.has-submenu > .submenu > li > a:hover,
body.cms-mega-nav .header .menu-list > li.has-submenu > .submenu > li > a:focus-visible {
color:var(--text); background:color-mix(in srgb,var(--primary) 10%,var(--body-background));
}
/* Der globale Stil für aktive Menüpunkte setzt seine Schriftfarbe mit
!important. Innerhalb des Mega-Menüs muss die Schrift zum hellen Akzent
passen, auch wenn der gerade geöffnete Unterpunkt aktiv ist. */
body.cms-mega-nav .header .menu-list > li.has-submenu > .submenu a.is-active,
body.cms-mega-nav .header .menu-list > li.has-submenu > .submenu a.is-active:hover,
body.cms-mega-nav .header .menu-list > li.has-submenu > .submenu a.is-active:focus-visible {
color:var(--text) !important;
background:color-mix(in srgb,var(--primary) 10%,var(--body-background));
}
body.cms-mega-nav .header .menu-list > li.has-submenu > .submenu .submenu {
position:static; display:block; opacity:1; visibility:visible; transform:none;
min-width:0; margin:0; padding:0 0 0 12px; border:0; box-shadow:none;
background:transparent;
}
body.cms-mega-nav .header .menu-list > li.has-submenu > .submenu .submenu a {
white-space:normal; font-weight:500; padding:7px 12px; color:var(--text);
}
body.cms-mega-nav .header .menu-list > li.has-submenu > .submenu .submenu a:hover,
body.cms-mega-nav .header .menu-list > li.has-submenu > .submenu .submenu a:focus-visible {
color:var(--text); background:color-mix(in srgb,var(--primary) 10%,var(--body-background));
}
body.cms-mega-nav .header .menu-list > li.has-submenu > .submenu > li > a .submenu-marker { display:none; }
body.cms-mega-grouped .header .menu-list > li.has-submenu > .submenu {
grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px 24px;
}
body.cms-mega-grouped .header .menu-list > li.has-submenu > .submenu > li.mega-flat-item { display:none; }
body.cms-mega-grouped .header .menu-list > li.has-submenu > .submenu > li.mega-group {
width:auto; min-width:0; border:0; padding:0 0 0 12px;
}
body.cms-mega-grouped .header .mega-group-title {
display:block; margin:0 0 12px; color:var(--text); font-size:1.08rem; font-weight:700;
}
body.cms-mega-grouped .header .mega-group-links {
display:block; list-style:none; margin:0; padding:0;
}
body.cms-mega-grouped .header .mega-group-links > li { margin:0 0 4px; padding:0; border:0; }
body.cms-mega-grouped .header .mega-group-links a {
display:block; white-space:normal; color:var(--text); padding:7px 12px; font-weight:500;
}
body.cms-mega-grouped .header .mega-group-links a:hover,
body.cms-mega-grouped .header .mega-group-links a:focus-visible {
color:var(--text); background:color-mix(in srgb,var(--primary) 10%,var(--body-background));
}
}
@media (min-width:821px) and (max-width:1100px) {
body.cms-mega-grouped .header .menu-list > li.has-submenu > .submenu { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:820px) { .mega-parent-link { display:none !important; } }
@media (max-width:820px) { .mega-group { display:none !important; } }
body:not(.cms-mega-nav) .mega-parent-link { display:none !important; }
body:not(.cms-mega-grouped) .mega-group { display:none !important; }
.hero-banner { position:relative; min-height:420px; background-size:cover; background-position:center center; display:flex; align-items:center; overflow:hidden; border-bottom:none; }
.hero-banner::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(15,23,42,.56),rgba(15,23,42,.20),rgba(15,23,42,.08)); }
.hero-banner-content { position:relative; z-index:1; max-width:760px; color:#ffffff; padding:76px 0; }
.hero-banner-content .eyebrow { color:#ffffff !important; background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.28); }
.hero-banner-content h1 { color:#ffffff; text-shadow:0 8px 26px rgba(0,0,0,.28); }
.hero-banner-content p { color:rgba(255,255,255,.92); font-size:1.22rem; max-width:720px; text-shadow:0 6px 20px rgba(0,0,0,.22); }
.hero-banner.no-overlay::before { display:none; }
.hero-banner.no-overlay .hero-banner-content { display:none; }
.hero-banner.height-klein { min-height:260px; }
.hero-banner.height-mittel { min-height:420px; }
.hero-banner.height-gross { min-height:620px; }
.hero-banner.height-vollbild { min-height:90vh; }
.hero { position:relative; overflow:hidden; padding:88px 0 72px; background:var(--hero-background); border-bottom:none; }
.hero-overlay-fullwidth { position:relative; isolation:isolate; width:100%; min-height:0; height:680px; padding:0; display:flex; align-items:center; overflow:hidden; box-sizing:border-box; background-size:cover; background-repeat:no-repeat; background-position:center; border-bottom:none; }
.hero-image-fixed .hero-overlay-fullwidth:not(.hero-overlay-no-image),
.hero-image-fixed .hero-banner:not(.no-overlay) {
background-attachment:fixed;
}
/* Step 1789: Echter Header-Parallax ohne Zoom. Das originale Headerbild
behaelt seine normale Cover-Geometrie. Fuer den Effekt wird auf Desktop
eine eigene, gleich grosse Hintergrundebene verwendet, die langsamer als
der Hero scrollt. Dadurch laeuft der folgende Seiteninhalt ueber den Hero,
ohne dass background-size oder die Headerhoehe waehrend des Scrollens
veraendert werden. */
@media (min-width:901px) {
body.hero-image-parallax .cms-hero-parallax-layer {
position:absolute;
inset:0;
z-index:-2;
pointer-events:none;
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
will-change:transform;
}
body.hero-image-parallax .hero-overlay-fullwidth.cms-hero-parallax-ready,
body.hero-image-parallax .hero-banner.cms-hero-parallax-ready {
background-image:none !important;
}
}
/* Step 1700: Ein per background-attachment fixiertes Bild wird vom Browser
sonst relativ zum gesamten Viewport skaliert und zentriert. Dadurch stimmt
sein Ausschnitt nicht mehr mit dem mitscrollenden Hero ueberein und bei
einer Navigation oberhalb des Heros verschwindet der obere Bildteil unter
der Kopfzeile. Die von der Seitenausgabe berechneten Werte bilden exakt die
Cover-Geometrie des Hero-Rahmens nach und verankern sie an dessen Oberkante. */
@media (min-width:821px) {
body.hero-image-fixed .hero-overlay-fullwidth[data-cms-hero-has-image="1"]:not(.hero-overlay-no-image) {
background-size:var(--cms-fixed-hero-background-width,cover) auto;
background-position:center var(--cms-fixed-hero-background-top,center);
}
}
/* Step 1696: Auf Wunsch bleibt der bestehende Text-/Buttonbereich eines
fixierten Full-Width-Headers auf Desktop zusammen mit dem Bild stehen.
Der Hero selbst behaelt seinen normalen Platz im Dokument und beschneidet
die verschobene Ebene; dadurch kann der folgende Inhalt sauber darueberlaufen. */
@media (min-width:901px) {
body.hero-image-fixed .hero-overlay-fullwidth.hero-text-fixed-with-image[data-cms-hero-has-image="1"] [data-cms-hero-group="text"]:not(.cms-header-position-editing) {
transform:translate3d(0,var(--cms-hero-fixed-copy-offset,0px),0);
will-change:transform;
}
}
@media (max-width:820px) {
.hero-image-fixed:not(.hero-image-fixed-mobile) .hero-overlay-fullwidth,
.hero-image-fixed:not(.hero-image-fixed-mobile) .hero-banner { background-attachment:scroll; }
}
@media (prefers-reduced-motion:reduce) {
.hero-image-fixed .hero-overlay-fullwidth,
.hero-image-fixed .hero-banner { background-attachment:scroll; }
body.hero-image-parallax .hero-overlay-fullwidth,
body.hero-image-parallax .hero-banner {
background-size:cover;
background-position:center;
will-change:auto;
}
}
.hero-overlay-fullwidth.hero-overlay-image-only { background-size:cover; background-color:var(--hero-overlay-color); }
/* Step 844: Ein bildreiner Vollbild-Header folgt auf allen Geraetebreiten
dem verbindlichen Headerformat 1920 x 850. Dadurch bleibt die komplette
Grafik ohne schwarze Letterbox-Flaechen und ohne starken responsiven
Beschnitt sichtbar. Die Regel gilt nur, wenn keine Overlay-Inhalte aktiv
sind; Header mit Text, Buttons oder Listen behalten die gewaehlte
Vollbildhoehe. */
.hero-overlay-fullwidth.hero-overlay-image-only.hero-overlay-height-vollbild {
height:auto !important;
min-height:0 !important;
aspect-ratio:1920 / 850;
background-size:cover;
background-position:center center;
}
.hero-overlay-fullwidth::before { content:""; position:absolute; inset:0; z-index:-1; background:color-mix(in srgb, var(--hero-overlay-color) calc(var(--hero-overlay-opacity) * 100%), transparent); }
.hero-overlay-fullwidth::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(0,0,0,.34),rgba(0,0,0,.08) 62%,rgba(0,0,0,.04)); }
.hero-overlay-content { width:min(var(--container-width), calc(100% - var(--container-padding))); height:100%; min-height:0; box-sizing:border-box; margin:0 auto; padding:clamp(44px,7vw,96px) 0 clamp(38px,6vw,80px); display:flex; flex-direction:column; justify-content:center; gap:clamp(24px,4vw,52px); }
.hero-overlay-copy { max-width:min(760px,72vw); }
.hero-text-surface {
box-sizing:border-box; width:fit-content; max-width:100%;
padding:var(--hero-text-surface-padding,28px);
border-radius:var(--hero-text-surface-radius,18px);
background:color-mix(in srgb,var(--hero-text-surface-color,#fff) calc(var(--hero-text-surface-opacity,.82) * 100%),transparent);
box-shadow:var(--hero-text-surface-shadow,none);
backdrop-filter:blur(var(--hero-text-surface-blur,8px));
-webkit-backdrop-filter:blur(var(--hero-text-surface-blur,8px));
}
.hero-text-surface :where(h1,h2,h3) { color:var(--hero-heading-color,var(--hero-text-surface-text,#111827)) !important; text-shadow:none !important; }
.hero-text-surface :where(p,.eyebrow) { color:var(--hero-text-surface-text,#111827) !important; text-shadow:none !important; }
.hero-overlay-copy .hero-text-surface { display:flex; flex-direction:column; align-items:flex-start; }
.hero-overlay-align-center .hero-text-surface { align-items:center; }
.hero-overlay-align-right .hero-text-surface { align-items:flex-end; }
.hero-overlay-copy :where(h1,h2,h3) { color:var(--hero-heading-color,var(--hero-overlay-text,#fff)) !important; text-shadow:0 8px 30px rgba(0,0,0,.36); text-wrap:balance; }
.hero-overlay-copy .cms-hero-display-title { color:var(--hero-heading-color,var(--hero-overlay-text,#fff)) !important; text-shadow:0 8px 30px rgba(0,0,0,.36); text-wrap:balance; }
.hero-overlay-copy .hero-text-surface .cms-hero-display-title { color:var(--hero-heading-color,var(--hero-text-surface-text,#111827)) !important; text-shadow:none !important; }
.hero-overlay-copy p { color:var(--hero-overlay-text,#fff) !important; opacity:.94; text-shadow:0 5px 20px rgba(0,0,0,.28); text-wrap:pretty; }
/* Links- und rechtsbündige Hero-Texte nutzen bewusst mehr Breite als die zentrierte Variante. */
.hero-overlay-align-left .hero-overlay-copy,
.hero-overlay-align-right .hero-overlay-copy { width:100%; max-width:min(1080px,88vw); }
.hero-overlay-align-left .hero-overlay-copy p,
.hero-overlay-align-right .hero-overlay-copy p { max-width:min(980px,100%); }
.hero-overlay-copy .eyebrow { display:inline-flex; width:auto; color:var(--hero-overlay-text,#fff) !important; background:color-mix(in srgb,var(--hero-overlay-text,#fff) 14%,transparent); border:1px solid color-mix(in srgb,var(--hero-overlay-text,#fff) 36%,transparent); }
.hero-overlay-copy .hero-text-surface :where(h1,h2,h3) { color:var(--hero-heading-color,var(--hero-text-surface-text,#111827)) !important; text-shadow:none !important; }
.hero-overlay-copy .hero-text-surface :where(p,.eyebrow) { color:var(--hero-text-surface-text,#111827) !important; text-shadow:none !important; }
.hero-overlay-copy .hero-text-surface .eyebrow { background:color-mix(in srgb,var(--hero-text-surface-text,#111827) 9%,transparent); border-color:color-mix(in srgb,var(--hero-text-surface-text,#111827) 24%,transparent); }
/* Ausgeblendete Hero-Elemente behalten ihren Layoutplatz, damit die Listenfelder
unabhängig von Badge, Text und Buttons an derselben vertikalen Position bleiben. */
.hero-overlay-slot-hidden { visibility:hidden !important; pointer-events:none !important; user-select:none !important; }
.hero-overlay-align-left { align-items:flex-start; text-align:left; }
.hero-overlay-align-left .hero-overlay-copy { align-self:flex-start; text-align:left; }
.hero-overlay-align-left .hero-overlay-copy :where(p,div,ul,ol,li) { text-align:left !important; }
.hero-overlay-align-left .hero-overlay-copy p { margin-left:0; margin-right:auto; }
.hero-overlay-align-left .hero-actions { justify-content:flex-start; }
.hero-overlay-align-left .hero-overlay-features,
.hero-overlay-align-left .hero-overlay-features .hero-feature { text-align:left; }
.hero-overlay-align-center { align-items:center; text-align:center; }
.hero-overlay-align-center .hero-overlay-copy { width:100%; max-width:880px; align-self:center; text-align:center; }
.hero-overlay-align-center .hero-overlay-copy :where(p,div,ul,ol,li) { text-align:center !important; }
.hero-overlay-align-center .hero-overlay-copy p { margin-left:auto; margin-right:auto; }
.hero-overlay-align-center .hero-actions { justify-content:center; }
.hero-overlay-align-center .hero-overlay-features,
.hero-overlay-align-center .hero-overlay-features .hero-feature { text-align:center; }
.hero-overlay-align-right { align-items:flex-end; text-align:right; }
.hero-overlay-align-right .hero-overlay-copy { align-self:flex-end; text-align:right; }
.hero-overlay-align-right .hero-overlay-copy :where(p,div,ul,ol,li) { text-align:right !important; }
.hero-overlay-align-right .hero-overlay-copy p { margin-left:auto; margin-right:0; }
.hero-overlay-align-right .hero-actions { justify-content:flex-end; }
.hero-overlay-align-right .hero-overlay-features,
.hero-overlay-align-right .hero-overlay-features .hero-feature { text-align:right; }
.hero-overlay-features {
position:absolute;
z-index:1;
right:100px;
bottom:100px;
width:min(var(--container-width),calc(100% - 100px - var(--container-padding)));
}
.hero-overlay-features .hero-feature-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
.hero-overlay-features .hero-feature-list.hero-feature-count-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.hero-overlay-features-vertical { width:min(420px,calc(100% - var(--container-padding))); }
.hero-overlay-features-vertical .hero-feature-list,
.hero-overlay-features-vertical .hero-feature-list.hero-feature-count-4 { grid-template-columns:1fr; }
.hero-overlay-features .hero-feature { background:var(--hero-feature-background,rgba(8,20,38,.70)); border-color:var(--hero-feature-border,rgba(255,255,255,.18)); backdrop-filter:blur(10px); }
.hero-overlay-features .hero-feature strong, .hero-overlay-features .hero-feature span { color:var(--hero-feature-text,#fff) !important; }
/* Step 1488: Frei gesetzte Gruppenpositionen gelten ausschließlich für den
Full-Width-Overlay-Header auf Desktop und Tablet. Ohne gespeicherten Wert
bleibt das bisherige Layout vollständig unverändert; Smartphones verwenden
weiterhin bewusst die sichere automatische Anordnung. */
@media (min-width:901px) {
.hero-overlay-fullwidth .cms-hero-position-custom-desktop {
position:absolute !important; left:var(--cms-hero-desktop-x) !important;
top:var(--cms-hero-desktop-y) !important; right:auto !important;
bottom:auto !important; margin:0 !important; align-self:auto !important;
width:var(--cms-hero-desktop-width) !important; max-width:none !important;
min-height:var(--cms-hero-desktop-min-height,0px) !important;
box-sizing:border-box;
}
}
@media (min-width:701px) and (max-width:900px) {
.hero-overlay-fullwidth .cms-hero-position-custom-tablet {
position:absolute !important; left:var(--cms-hero-tablet-x) !important;
top:var(--cms-hero-tablet-y) !important; right:auto !important;
bottom:auto !important; margin:0 !important; align-self:auto !important;
width:var(--cms-hero-tablet-width) !important; max-width:none !important;
min-height:var(--cms-hero-tablet-min-height,0px) !important;
box-sizing:border-box;
}
}
.hero-overlay-height-klein { height:420px; min-height:0; }
.hero-overlay-height-mittel { height:540px; min-height:0; }
.hero-overlay-height-gross { height:680px; min-height:0; }
.hero-overlay-height-vollbild { height:calc(100vh - 78px); height:calc(100svh - 78px); min-height:0; }
/* Die gewählte Höhe bleibt auch bei vier Karten verbindlich. */
.hero-overlay-fullwidth.hero-overlay-feature-count-4.hero-overlay-height-klein { height:420px; min-height:0; }
.hero-overlay-fullwidth.hero-overlay-feature-count-4.hero-overlay-height-mittel { height:540px; min-height:0; }
.hero-overlay-fullwidth.hero-overlay-feature-count-4.hero-overlay-height-gross { height:680px; min-height:0; }
.hero-overlay-fullwidth.hero-overlay-feature-count-4.hero-overlay-height-vollbild { height:calc(100vh - 78px); height:calc(100svh - 78px); min-height:0; }
@media (max-width:900px) { .hero-overlay-content { padding:48px 0 40px; } .hero-overlay-features { right:16px; width:min(100% - 32px,var(--container-width)); } .hero-overlay-features-vertical { display:none !important; } .hero-overlay-copy { max-width:100%; } .hero-overlay-features-horizontal .hero-feature-list { grid-template-columns:repeat(3,minmax(0,1fr)); } .hero-overlay-features-horizontal .hero-feature-list.hero-feature-count-4 { grid-template-columns:repeat(4,minmax(0,1fr)); } .hero-overlay-features-vertical .hero-feature-list, .hero-overlay-features-vertical .hero-feature-list.hero-feature-count-4 { grid-template-columns:1fr; } }
@media (max-width:760px) { .hero-overlay-features-horizontal { width:calc(100% - 16px); } .hero-overlay-features-horizontal .hero-feature-list { gap:5px; } .hero-overlay-features-horizontal .hero-feature { min-height:0; padding:7px 5px 6px; border-radius:12px; } .hero-overlay-features-horizontal .hero-feature strong { margin-bottom:3px; font-size:clamp(.58rem,2.6vw,.76rem); line-height:1.15; } .hero-overlay-features-horizontal .hero-feature span { font-size:clamp(.52rem,2.25vw,.68rem); line-height:1.25; } .hero-overlay-features-vertical { --hero-feature-responsive-scale:.42; width:calc((100% - 16px) / var(--hero-feature-responsive-scale)); } .hero-overlay-features-vertical .hero-feature-list { gap:7px; } }
@media (max-width:760px) { .hero-overlay-fullwidth { background-position:center; } .hero-overlay-height-klein { height:420px; min-height:0; } .hero-overlay-height-mittel { height:540px; min-height:0; } .hero-overlay-height-gross { height:680px; min-height:0; } .hero-overlay-height-vollbild { height:calc(100vh - 64px); height:calc(100svh - 64px); min-height:0; } .hero-overlay-content { width:min(100% - 32px, var(--container-width)); } .hero-overlay-align-right { align-items:flex-start; text-align:left; } .hero-overlay-align-right .hero-overlay-copy { align-self:flex-start; text-align:left; } .hero-overlay-align-right .hero-overlay-copy :where(p,div,ul,ol,li) { text-align:left !important; } .hero-overlay-align-right .hero-overlay-copy p { margin-left:0; margin-right:auto; } .hero-overlay-align-right .hero-actions { justify-content:flex-start; } .hero-overlay-align-right .hero-overlay-features, .hero-overlay-align-right .hero-overlay-features .hero-feature { text-align:left; } }
.hero:not(.hero-overlay-fullwidth),
.hero:not(.hero-overlay-fullwidth) h4,
.hero:not(.hero-overlay-fullwidth) p,
.hero:not(.hero-overlay-fullwidth) span,
.hero:not(.hero-overlay-fullwidth) small,
.hero:not(.hero-overlay-fullwidth) strong,
.hero:not(.hero-overlay-fullwidth) .eyebrow,
.hero:not(.hero-overlay-fullwidth) .subtitle,
.hero:not(.hero-overlay-fullwidth) .hero-text,
.hero:not(.hero-overlay-fullwidth) .hero-content,
.hero:not(.hero-overlay-fullwidth) .hero-content *,
.hero:not(.hero-overlay-fullwidth) .container > * {
color:var(--hero-text) !important;
}
.hero:not(.hero-overlay-fullwidth) h1,
.hero:not(.hero-overlay-fullwidth) h2,
.hero:not(.hero-overlay-fullwidth) h3 {
color:var(--hero-heading-color,var(--hero-text)) !important;
}
.hero:not(.hero-overlay-fullwidth) .cms-hero-display-title { color:var(--hero-heading-color,var(--hero-text)) !important; }
.hero:not(.hero-overlay-fullwidth)::after { content:""; position:absolute; right:-120px; top:-160px; width:420px; height:420px; border-radius:50%; background:rgba(37,99,235,.12); filter:blur(2px); }
.hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:1.08fr .92fr; gap:48px; align-items:center; }
.hero.hero-fullwidth .hero-grid { max-width:none; width:100%; padding-left:clamp(24px,5vw,96px); padding-right:clamp(24px,5vw,96px); }
.cms-animate { opacity:1; --cms-slide-distance:160px; --cms-slide-y-distance:54px; transform:none; transition-property:opacity, transform; transition-timing-function:cubic-bezier(.16,1,.3,1); will-change:opacity, transform; }
html.cms-js .cms-animate { opacity:0; transform:translate3d(0,0,0); }
.cms-animate.cms-anim-fast { transition-duration:.5s; --cms-slide-distance:90px; --cms-slide-y-distance:34px; }
.cms-animate.cms-anim-normal { transition-duration:1s; --cms-slide-distance:160px; --cms-slide-y-distance:54px; }
.cms-animate.cms-anim-slow { transition-duration:1.8s; --cms-slide-distance:260px; --cms-slide-y-distance:74px; }
.cms-animate.cms-anim-very-slow { transition-duration:2.5s; --cms-slide-distance:360px; --cms-slide-y-distance:92px; }
html.cms-js .cms-animate.cms-anim-fade { transform:none; }
html.cms-js .cms-animate.cms-anim-from-left { transform:translate3d(calc(var(--cms-slide-distance) * -1),0,0); }
html.cms-js .cms-animate.cms-anim-from-right { transform:translate3d(var(--cms-slide-distance),0,0); }
html.cms-js .cms-animate.cms-anim-from-top { transform:translate3d(0,calc(var(--cms-slide-y-distance) * -1),0); }
html.cms-js .cms-animate.cms-anim-from-bottom { transform:translate3d(0,var(--cms-slide-y-distance),0); }
html.cms-js .cms-animate.cms-anim-zoom { transform:scale(.92); }
html.cms-js .cms-animate.is-visible { opacity:1; transform:none; }
html.cms-js .hero-widget .cms-hero-title-word { display:inline-block; opacity:0; }
html.cms-js .hero-widget.cms-hero-title-ready .cms-hero-title-word { animation:cms-hero-word-in .65s ease-out both; animation-delay:calc(var(--cms-word-index) * 360ms); }
@keyframes cms-hero-word-in { from { opacity:0; transform:translateY(.35em); } to { opacity:1; transform:none; } }
html.cms-js .hero-widget .cms-hero-typed-text { visibility:hidden; }
html.cms-js .hero-widget.cms-hero-title-ready .cms-hero-typed-text { visibility:visible; opacity:1; transition:opacity .55s ease; }
html.cms-js .hero-widget.cms-hero-title-ready .cms-hero-typed-text.cms-typing-fade { opacity:0; }
html.cms-js .hero-widget.cms-hero-title-ready .cms-hero-typed-text::after { content:""; display:inline-block; height:.92em; margin-left:.08em; border-right:2px solid currentColor; vertical-align:-.12em; animation:cms-hero-caret .7s step-end infinite; }
@keyframes cms-hero-caret { 50% { border-color:transparent; } }
html.cms-hero-animation-suppressed .hero-widget .cms-hero-title-word { animation:none !important; opacity:1 !important; transform:none !important; }
html.cms-hero-animation-suppressed .hero-widget .cms-hero-typed-text { visibility:visible !important; opacity:1 !important; transition:none !important; }
@media(prefers-reduced-motion:reduce) { html.cms-js .hero-widget .cms-hero-title-word { animation:none !important; opacity:1 !important; transform:none !important; } html.cms-js .hero-widget .cms-hero-typed-text { visibility:visible !important; opacity:1 !important; transition:none !important; } html.cms-js .hero-widget .cms-hero-typed-text::after { display:none !important; } }
html.cms-hero-animation-suppressed .hero-widget.cms-animate,
html.cms-hero-animation-suppressed .hero-widget .cms-animate { opacity:1 !important; transform:none !important; transition:none !important; transition-delay:0s !important; will-change:auto !important; }
@media (prefers-reduced-motion: reduce) { .cms-animate { opacity:1 !important; transform:none !important; transition:none !important; } }
@media (max-width: 768px) { .cms-animate { opacity:1 !important; transform:none !important; transition:none !important; will-change:auto !important; } }
.eyebrow { display:inline-flex; align-items:center; gap:8px; color:var(--primary); background:rgba(37,99,235,.09); border:1px solid rgba(37,99,235,.16); border-radius:999px; padding:7px 12px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; font-size:.78rem; margin-bottom:18px; }
h1 { font-size:clamp(2rem,3.4vw,3.5rem); line-height:1.08; margin:0 0 20px; letter-spacing:-.045em; color:#0b1220; overflow-wrap:anywhere; }
.hero p { font-size:1.2rem; color:#475569; margin:0 0 30px; max-width:720px; }
.hero-img { width:100%; border-radius:var(--card-radius); box-shadow:var(--card-shadow); border:1px solid rgba(255,255,255,.75); }
.hero-card { min-height:330px; border-radius:var(--card-radius); padding:var(--card-pad); background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,255,255,.58)); border:1px solid rgba(255,255,255,.9); box-shadow:var(--card-shadow); display:grid; align-content:end; position:relative; overflow:hidden; }
.hero-card::before { content:""; position:absolute; inset:26px 26px auto auto; width:110px; height:110px; border-radius:28px; background:var(--primary); opacity:.9; }
.hero-card-content { position:relative; z-index:2; display:flex; flex-direction:column; gap:8px; font-weight:850; font-size:1.65rem; line-height:1.18; letter-spacing:-.03em; color:#0f172a; }
.hero-card-line { display:block; }
/* v4.7.5 – Startseiten-Header: sekundärer Button sichtbar */
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero-responsive-actions { display:none; }
.hero-responsive-heading { display:none; }
.cms-hero-display-title { font-size:var(--hero-display-title-size,3rem); line-height:1.08; margin:0 0 20px; letter-spacing:-.045em; font-weight:800; overflow-wrap:anywhere; }
.hero-widget .widget-subtitle { font-size:var(--hero-display-subtitle-size,1.25rem) !important; }
.hero-widget .widget-subtitle { color:var(--hero-subtitle-color,var(--hero-text)) !important; }
.hero-overlay-copy .widget-subtitle { color:var(--hero-subtitle-color,var(--hero-overlay-text,#fff)) !important; }
.hero-overlay-copy .hero-text-surface .widget-subtitle { color:var(--hero-subtitle-color,var(--hero-text-surface-text,#111827)) !important; }
.hero-actions .btn.btn-secondary { background:#ffffff !important; color:var(--primary) !important; border:1px solid rgba(37,99,235,.24); box-shadow:0 12px 24px rgba(15,23,42,.08); }
.hero-actions .btn.btn-secondary:empty::before { content:"Screenshots ansehen"; color:var(--primary) !important; }
.hero-visual { display:flex; flex-direction:column; gap:28px; }
.hero-screenshot-wrap { width:100%; }
.hero-features-wrap { width:100%; }
.cms-screenshot-card { background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(255,255,255,.72)); border:1px solid rgba(255,255,255,.92); border-radius:28px; padding:16px; box-shadow:0 28px 80px rgba(15,23,42,.16); }
.cms-screenshot-card.hero-image-background-custom { background:var(--hero-image-background); }
.cms-screenshot-card.hero-image-background-transparent { background:transparent !important; border-color:transparent !important; border-width:0 !important; box-shadow:none !important; padding:0 !important; }
.cms-screenshot-card img { display:block; width:100%; height:auto; border-radius:18px; border:1px solid rgba(15,23,42,.10); box-shadow:0 18px 45px rgba(15,23,42,.10); }
.cms-screenshot-card.hero-image-background-transparent img { border-color:transparent !important; border-width:0 !important; box-shadow:none !important; }
.cms-screenshot-caption { margin-top:10px; font-size:.88rem; font-weight:750; color:#64748b !important; text-align:center; }
.hero-feature-list { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.hero-feature { background:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.9); box-shadow:0 14px 32px rgba(15,23,42,.08); border-radius:20px; padding:15px 15px 14px; min-height:96px; display:flex; flex-direction:column; justify-content:flex-start; }
.hero-feature strong { display:block; margin-bottom:6px; font-size:.98rem; color:#0f172a !important; }
.hero-feature span { display:block; font-size:.9rem; line-height:1.45; color:#475569 !important; }
@media (max-width:900px) { .hero-feature-list { grid-template-columns:1fr; } }
@media (max-width:760px) { .hero-actions { align-items:stretch; } .hero-actions .btn { width:100%; } .cms-screenshot-card { padding:10px; border-radius:22px; } .cms-screenshot-card img { border-radius:14px; } }
/* Step 1503: Frei positionierte Overlay-Gruppen eines bildbasierten
Full-Width-Headers bleiben auf Desktop unverändert. Auf Tablet und
Smartphone werden sie ausgeblendet; aktivierte Header-Buttons erscheinen
stattdessen in einer stabilen, automatischen Zeile direkt unter dem Header. */
@media (max-width:900px) {
.hero-overlay-fullwidth[data-cms-hero-has-image="1"] [data-cms-hero-group] {
display:none !important;
}
.hero-responsive-heading {
display:block;
box-sizing:border-box;
padding:24px max(16px,calc(var(--container-padding) / 2)) 8px;
background:var(--body-background);
}
.hero-responsive-heading .container { max-width:var(--container-width); margin:0 auto; }
.hero-responsive-heading .cms-hero-display-title {
font-size:clamp(1.65rem, calc(var(--hero-display-title-size,3rem) * .72), 2.6rem);
line-height:1.16;
margin:0 0 10px;
color:var(--hero-heading-color,var(--text,#0f172a)) !important;
text-shadow:none !important;
}
.hero-responsive-heading .widget-subtitle {
font-size:clamp(1rem, calc(var(--hero-display-subtitle-size,1.25rem) * .85), 1.25rem) !important;
line-height:1.45;
margin:0 0 12px;
color:var(--hero-subtitle-color,var(--text,#475569)) !important;
opacity:1;
text-shadow:none !important;
}
.hero-responsive-heading .cms-hero-title-word { opacity:1 !important; animation:none !important; transform:none !important; }
.hero-responsive-actions {
display:block;
box-sizing:border-box;
padding:14px max(16px,calc(var(--container-padding) / 2));
background:var(--body-background);
}
.hero-responsive-actions > .container {
display:flex;
justify-content:center;
}
.hero-responsive-actions .hero-actions {
width:100%;
margin:0;
justify-content:center;
}
}
@media (max-width:600px) {
.hero-responsive-heading { padding:18px 16px 4px; }
.hero-responsive-heading .cms-hero-display-title { font-size:clamp(1.4rem, calc(var(--hero-display-title-size,3rem) * .55), 2rem); }
.hero-responsive-heading .widget-subtitle { font-size:clamp(.95rem, calc(var(--hero-display-subtitle-size,1.25rem) * .78), 1.1rem) !important; }
}
/* Step 1501: Ein Full-Width-Header ohne eigenes Bild behält die vollständige
Optik des bisherigen Standard-Headers. Nur Aufbau und Datenattribute des
Overlay-Headers werden für die freie Positionierung verwendet. */
.hero-overlay-fullwidth.hero-overlay-no-image { background:var(--hero-background); }
.hero-overlay-fullwidth.hero-overlay-no-image .hero-overlay-copy :where(h1,h2,h3,.cms-hero-display-title) {
color:var(--hero-heading-color,var(--hero-text)) !important; text-shadow:none !important;
}
.hero-overlay-fullwidth.hero-overlay-no-image .hero-overlay-copy p {
color:var(--hero-text) !important; text-shadow:none !important;
}
.hero-overlay-fullwidth.hero-overlay-no-image .hero-overlay-copy .eyebrow {
color:var(--primary) !important; background:rgba(37,99,235,.09);
border-color:rgba(37,99,235,.16);
}
.hero-overlay-fullwidth.hero-overlay-no-image .hero-overlay-features .hero-feature {
background:rgba(255,255,255,.78); border-color:rgba(255,255,255,.9);
box-shadow:0 14px 32px rgba(15,23,42,.08); backdrop-filter:none;
}
.hero-overlay-fullwidth.hero-overlay-no-image .hero-overlay-features .hero-feature strong { color:#0f172a !important; }
.hero-overlay-fullwidth.hero-overlay-no-image .hero-overlay-features .hero-feature span { color:#475569 !important; }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:13px 21px; background:var(--button-color); color:var(--button-text) !important; border:1px solid var(--button-color); border-radius:var(--button-radius); text-decoration:none; font-weight:850; box-shadow:0 14px 26px color-mix(in srgb,var(--button-color) 22%,transparent); transition:transform var(--transition), box-shadow var(--transition), background-color var(--transition), color var(--transition), border-color var(--transition), filter var(--transition); cursor:pointer; }
.btn:hover { transform:var(--button-hover-transform); filter:var(--button-hover-filter); background:color-mix(in srgb,var(--button-color) 86%,#000000); border-color:color-mix(in srgb,var(--button-color) 86%,#000000); color:var(--button-text) !important; box-shadow:0 20px 36px color-mix(in srgb,var(--button-color) 34%,transparent); }
.hero .hero-actions .btn { color:var(--button-text) !important; }
.hero .hero-actions .btn.btn-secondary { background:#ffffff !important; color:var(--button-color) !important; border:1px solid color-mix(in srgb,var(--button-color) 32%,transparent); box-shadow:0 12px 24px rgba(15,23,42,.08); }
.hero .hero-actions .btn.btn-secondary:hover { background:var(--button-color) !important; border-color:var(--button-color); color:var(--button-text) !important; box-shadow:0 20px 36px color-mix(in srgb,var(--button-color) 28%,transparent); }
.hero .hero-actions .btn.btn-secondary:empty::before { content:"Screenshots ansehen"; color:inherit !important; }
.section { padding:42px 0; }
.editor-paragraph-space {
display:block;
height:.9em;
}
/* Kompaktere Textausgabe aus dem Editor */
.card p,
.widget-plain p,
.image-text p {
margin-top:0;
margin-bottom:.75em;
}
.card p:last-child,
.widget-plain p:last-child,
.image-text p:last-child {
margin-bottom:0;
}
.card p + p,
.widget-plain p + p,
.image-text p + p {
margin-top:0;
}
.card br + br,
.widget-plain br + br,
.image-text br + br {
display:block;
content:"";
margin-top:.15em;
}
.card { background:rgba(255,255,255,.96); border:1px solid var(--line); border-radius:var(--card-radius); padding:var(--card-pad); box-shadow:var(--card-shadow); }
/* Sichtbare Design-System-Overrides */
.card-style-flach .card,
.card-style-flach .mini-card,
.card-style-flach .single-image-widget img,
.card-style-flach .image-text img,
.card-style-flach .gallery img,
.card-style-flach .slider {
box-shadow:none !important;
}
.card-style-leichter-schatten .card,
.card-style-leichter-schatten .mini-card,
.card-style-leichter-schatten .single-image-widget img,
.card-style-leichter-schatten .image-text img,
.card-style-leichter-schatten .gallery img,
.card-style-leichter-schatten .slider {
box-shadow:0 10px 25px rgba(15,23,42,.08) !important;
}
.card-style-moderner-schatten .card,
.card-style-moderner-schatten .mini-card,
.card-style-moderner-schatten .single-image-widget img,
.card-style-moderner-schatten .image-text img,
.card-style-moderner-schatten .gallery img,
.card-style-moderner-schatten .slider {
box-shadow:0 18px 45px rgba(15,23,42,.12) !important;
}
.card-style-hervorgehoben .card,
.card-style-hervorgehoben .mini-card,
.card-style-hervorgehoben .single-image-widget img,
.card-style-hervorgehoben .image-text img,
.card-style-hervorgehoben .gallery img,
.card-style-hervorgehoben .slider {
box-shadow:0 34px 90px rgba(15,23,42,.24) !important;
border-color:rgba(15,23,42,.16) !important;
}
.corner-style-eckig .card,
.corner-style-eckig .mini-card,
.corner-style-eckig .single-image-widget img,
.corner-style-eckig .image-text img,
.corner-style-eckig .gallery img,
.corner-style-eckig .slider { border-radius:4px !important; }
.corner-style-leicht-gerundet .card,
.corner-style-leicht-gerundet .mini-card,
.corner-style-leicht-gerundet .single-image-widget img,
.corner-style-leicht-gerundet .image-text img,
.corner-style-leicht-gerundet .gallery img,
.corner-style-leicht-gerundet .slider { border-radius:16px !important; }
.corner-style-rund .card,
.corner-style-rund .mini-card,
.corner-style-rund .single-image-widget img,
.corner-style-rund .image-text img,
.corner-style-rund .gallery img,
.corner-style-rund .slider { border-radius:28px !important; }
/* Abschnittsüberschriften stehen im Inhaltsfluss zwischen normalen Widgets.
Deshalb bilden ihre beiden halben vertikalen Widgetabstände zusammen mit
dem benachbarten Widgetbereich exakt den global eingestellten Widgetabstand. */
.section-heading-widget {
text-align:center;
padding:calc(var(--widget-gap-vertical) / 2) 0;
}
.section-heading-content { max-width:860px; margin:0 auto; text-align:center; }
/* Step 924: Die normale Widget-/Vorlagenbreite „Volle Breite“ muss bei der
Abschnittsüberschrift auch den sichtbaren Inneninhalt freigeben. Die globale
Breitenlogik bleibt unverändert; nur diese Vorlage hebt bei width-full ihre
historische 860/760-px-Begrenzung auf. */
.section-heading-content.section-heading-content-width-full {
width:100%;
max-width:none;
}
.section-heading-content.section-heading-content-width-full p {
width:100%;
max-width:none;
}
/* Step 816: Sobald die Abschnittsüberschrift einen eigenen Widget-Hintergrund
verwendet, ist sie wie die Vorlage „Einleitung“ eine vollständige Kartenfläche.
Breite und Innenabstand werden deshalb nur für die aktivierte Oberfläche an
die Einleitung angeglichen. Die bisherige schmale, transparente Standard-
Abschnittsüberschrift bleibt unverändert. */
.section-heading-content.cms-widget-surface {
width:100%;
max-width:none;
padding:34px;
}
/* Eine Abschnittsüberschrift mit eigener Widget-Oberfläche bleibt ebenfalls im
einheitlichen vertikalen Widgetraster. */
.section-heading-widget:has(.section-heading-content.cms-widget-surface) {
padding-bottom:calc(var(--widget-gap-vertical) / 2) !important;
}
.section-heading-content h2 { margin-bottom:12px; }
.section-heading-content p { margin:0 auto; max-width:760px; font-size:1.05rem; line-height:var(--cms-text-line-height); }
/* Listen ohne eigene Ausrichtung entsprechen der linksbündigen Editoranzeige.
Explizite text-align-Formatierungen aus dem Editor haben weiterhin Vorrang. */
.section-heading-content ul,.section-heading-content ol { text-align:left; }
.intro-widget-section { padding:15px 0 !important; }
.intro-card{width:100%;box-sizing:border-box;background:linear-gradient(135deg,#ffffff 0%,#eef4ff 100%);border:1px solid #dbeafe;border-radius:24px;padding:34px;box-shadow:0 18px 50px rgba(15,23,42,.08)}
.intro-card .eyebrow{font-size:.86rem;font-weight:800;color:#2563eb;text-transform:uppercase;letter-spacing:.08em;margin:0 0 10px}
.intro-card h2{margin:.1rem 0 .7rem;font-size:clamp(2rem,4vw,3rem);letter-spacing:-.045em;color:#0f172a;line-height:1.08}
.intro-card p{max-width:none;color:#475569;font-size:1.08rem;line-height:var(--cms-text-line-height);margin:0}
.section h2 { font-size:clamp(1.65rem,3vw,2.45rem); line-height:1.15; margin:0 0 16px; letter-spacing:-.035em; color:#0b1220; }
.section p { color:#334155; }
.widget-subtitle {
margin:-6px 0 22px !important;
color:var(--muted) !important;
font-size:1.06rem !important;
line-height:1.55 !important;
font-weight:400 !important;
letter-spacing:0 !important;
}
.widget-row { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); column-gap:var(--widget-gap-horizontal); row-gap:var(--widget-gap-vertical); align-items:start; margin-bottom:0; }
.cms-spacing { display:block; padding:0; margin:0; border:0; background:transparent; pointer-events:none; }
.cms-spacing-vertical { width:100%; }
.cms-spacing-horizontal { height:1px; max-width:100%; }
.cms-divider-line { display:block; width:100%; height:2px; margin:0; padding:0; border:0; background:var(--cms-divider-color,var(--primary)); }
.widget-row.has-horizontal-spacing { display:flex; flex-wrap:nowrap; align-items:flex-start; }
.widget-row.has-horizontal-spacing > .widget-slot.width-full { flex:1 1 100%; }
.widget-row.has-horizontal-spacing > .widget-slot.width-half { flex:1 1 50%; }
.widget-row.has-horizontal-spacing > .widget-slot.width-third { flex:1 1 33.333%; }
.widget-row.has-horizontal-spacing > .widget-slot.width-two-third { flex:1 1 66.667%; }
.widget-row.has-horizontal-spacing > .spacing-horizontal-slot { flex-grow:0; flex-shrink:0; }
.spacing-vertical-slot { grid-column:1 / -1 !important; }
/* Step 637: Ein vertikales Abstand-Widget darf keine globalen Section- oder
Widget-Abstände zusätzlich erhalten. Der eingegebene Pixelwert ist damit
exakt der tatsächlich erzeugte Leerraum. */
.widget-section.spacing-vertical-section {
padding:0 !important;
margin:0 !important;
}
.widget-section.spacing-vertical-section:first-of-type,
.widget-section.spacing-vertical-section:last-of-type {
padding-top:0 !important;
padding-bottom:0 !important;
}
.widget-section.spacing-vertical-section > .container,
.widget-section.spacing-vertical-section .widget-row,
.widget-section.spacing-vertical-section .widget-slot {
margin-top:0 !important;
margin-bottom:0 !important;
padding-top:0 !important;
padding-bottom:0 !important;
}
.widget-slot { min-width:0; align-self:start; grid-column:span 6; }
.widget-slot.width-full { grid-column:span 6; }
.widget-slot.width-half { grid-column:span 3; }
.widget-slot.width-third { grid-column:span 2; }
.widget-slot.width-two-third { grid-column:span 4; }
.widget-slot > .card, .widget-slot > .widget-plain { height:auto; align-self:start; }
.widget-plain { min-width:0; }
/* Step 487: Einheitlicher optionaler Widget-Hintergrund ohne zusätzliche Layout-Hülle.
Die Klasse wird direkt auf die bereits vorhandene äußerste Widgetfläche gesetzt.
Dadurch bleiben widgeteigene Breiten, Höhen, Grid-/Flex-Regeln und iframe-Maße erhalten. */
.cms-widget-surface {
background:var(--cms-widget-bg, #ffffff) !important;
border:1px solid var(--card-border, #dbe3ef);
border-radius:var(--radius, 16px);
box-shadow:var(--shadow, 0 12px 30px rgba(15,23,42,.10));
box-sizing:border-box;
min-width:0;
}
.cms-widget-surface.is-transparent {
background:transparent !important;
border-color:transparent !important;
box-shadow:none !important;
}
/* Step 488: Automatische Kontrastfarbe für Widgets mit bewusst gesetztem
Widget-Hintergrund. Bei transparenten Widgets wird die Farbe des umgebenden
Containers bzw. des Seitenhintergrunds ausgewertet. Funktionsflächen wie
Buttons, Eingabefelder, Karten, iframes und Mediencontainer bleiben unberührt. */
.cms-widget-surface.cms-widget-auto-contrast {
color:var(--cms-widget-text, #0f172a) !important;
}
.cms-widget-surface.cms-widget-auto-contrast h1,
.cms-widget-surface.cms-widget-auto-contrast h2,
.cms-widget-surface.cms-widget-auto-contrast h3,
.cms-widget-surface.cms-widget-auto-contrast h4,
.cms-widget-surface.cms-widget-auto-contrast h5,
.cms-widget-surface.cms-widget-auto-contrast h6,
.cms-widget-surface.cms-widget-auto-contrast p,
.cms-widget-surface.cms-widget-auto-contrast li,
.cms-widget-surface.cms-widget-auto-contrast label,
.cms-widget-surface.cms-widget-auto-contrast legend,
.cms-widget-surface.cms-widget-auto-contrast summary,
.cms-widget-surface.cms-widget-auto-contrast strong,
.cms-widget-surface.cms-widget-auto-contrast small,
.cms-widget-surface.cms-widget-auto-contrast .widget-title,
.cms-widget-surface.cms-widget-auto-contrast .widget-subtitle,
.cms-widget-surface.cms-widget-auto-contrast .muted {
color:var(--cms-widget-text, #0f172a) !important;
}
/* Explicit inline text formatting keeps its inherited color inside bold/small
text. Unformatted text still inherits the automatic background contrast. */
.cms-widget-surface.cms-widget-auto-contrast span[style] strong:not([style]),
.cms-widget-surface.cms-widget-auto-contrast span[style] small:not([style]) {
color:inherit !important;
}
.cms-widget-surface.cms-widget-auto-contrast a:not(.btn):not(.button):not([class*="button"]),
.cms-widget-surface.cms-widget-auto-contrast a:not(.btn):not(.button):not([class*="button"]):visited {
color:var(--cms-widget-text, #0f172a) !important;
text-decoration-color:color-mix(in srgb, var(--cms-widget-text, #0f172a) 55%, transparent);
}
/* Lokale Website-Suche: Navigationsfeld und Ergebnisseite. */
.cms-nav-search-item { position:relative; list-style:none; }
.cms-nav-search-toggle { display:inline-flex; gap:5px; align-items:center; justify-content:center; padding:9px 13px; border:0; border-radius:var(--nav-hover-radius); background:transparent; color:var(--header-text); font:inherit; font-weight:700; cursor:pointer; transition:background .2s ease,color .2s ease; }
body.nav-layout-overlay-menue-rechts .overlay-menu-panel .cms-nav-search-toggle { color:#fff; width:100%; min-height:50px; justify-content:flex-start; padding:12px 14px; border-radius:10px; }
.cms-nav-search-toggle:hover,.cms-nav-search-toggle:focus-visible { background:var(--nav-hover-color); color:var(--nav-hover-text); outline:2px solid transparent; }
body.nav-layout-overlay-menue-rechts .overlay-menu-panel .cms-nav-search-toggle:hover,
body.nav-layout-overlay-menue-rechts .overlay-menu-panel .cms-nav-search-toggle:focus-visible { background:rgba(255,255,255,.16); color:#fff; }
.cms-nav-search-panel { position:absolute; top:calc(100% + 12px); right:0; z-index:1100; width:min(500px,calc(100vw - 32px)); padding:22px; background:#fff; color:#142039; border:1px solid #dbe3ef; border-radius:16px; box-shadow:0 18px 45px rgba(15,23,42,.2); }
body.nav-layout-vertikal-links .cms-nav-search-panel,
body.nav-layout-overlay-menue-rechts .cms-nav-search-panel { position:static; inset:auto; width:100%; max-width:100%; box-sizing:border-box; margin:8px 0 0; padding:14px; box-shadow:none; }
body.nav-layout-vertikal-links .cms-nav-search-panel form,
body.nav-layout-overlay-menue-rechts .cms-nav-search-panel form { flex-direction:column; }
body.nav-layout-vertikal-links .cms-nav-search-panel button[type=submit],
body.nav-layout-overlay-menue-rechts .cms-nav-search-panel button[type=submit] { width:100%; }
.cms-nav-search-panel[hidden] { display:none !important; }
.cms-nav-search-panel strong { display:block; margin-bottom:16px; font-size:1.08rem; }
.cms-nav-search-panel form,.cms-site-search-form { display:flex; gap:10px; }
.cms-nav-search-panel input,.cms-site-search-form input { flex:1 1 auto; min-width:0; padding:13px 15px; border:1px solid #adc3e5; border-radius:9px; background:#fff; color:#142039; font:inherit; }
.cms-nav-search-panel input:focus,.cms-site-search-form input:focus { outline:2px solid var(--primary,#2563eb); outline-offset:2px; }
.cms-nav-search-panel button[type=submit],.cms-site-search-form button { padding:12px 20px; border:0; border-radius:9px; background:var(--primary,#2563eb); color:#fff; font:inherit; font-weight:700; cursor:pointer; }
.cms-search-sr { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.cms-site-search-section,.cms-site-search-section > .container,.cms-site-search { width:100%; min-width:0; box-sizing:border-box; }
.cms-site-search-section > .container { max-width:none; margin:0; padding:0; }
.cms-site-search { max-width:1100px; margin:0; }
.cms-site-search-form { width:min(100%,900px); box-sizing:border-box; margin:20px 0 28px; padding:18px; border:1px solid #dbe3ef; border-radius:14px; background:#fff; }
.cms-site-search-status { margin:0 0 18px; font-weight:700; }
.cms-site-search-results { display:grid; gap:14px; }
.cms-site-search-result { padding:20px 23px; border:1px solid #dbe3ef; border-left:5px solid var(--primary,#2563eb); border-radius:12px; background:#fff; }
.cms-site-search-result a { font-size:1.2rem; font-weight:750; color:var(--primary,#2563eb); }
.cms-site-search-result p { margin:8px 0 0; line-height:1.55; color:#334155; }
.cms-site-search-result mark { padding:0 2px; border-radius:3px; background:#ffe596; color:#142039 !important; font-weight:700; }
.cms-search-target-mark { padding:2px 3px; border-radius:3px; background:#ffe596 !important; color:#142039 !important; box-shadow:0 0 0 3px rgba(255,190,40,.28); }
@media(max-width:900px) { .cms-nav-search-item,.cms-nav-search-toggle { width:100%; } .cms-nav-search-toggle { justify-content:flex-start; } .cms-nav-search-panel { position:static; width:100%; max-width:100%; box-sizing:border-box; box-shadow:none; margin-top:8px; } }
@media(max-width:550px) { .cms-nav-search-panel form,.cms-site-search-form { flex-direction:column; } .cms-nav-search-panel button[type=submit],.cms-site-search-form button { width:100%; } }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:0; }
.cards-widget { width:100%; }
/* Step 831/832: Datenschutzfreundliches Social-Sharing-Widget. */
.social-sharing-widget { width:100%; box-sizing:border-box; }
.social-sharing-widget.cms-widget-surface { padding:var(--widget-pad,26px); }
.social-sharing-widget.cms-widget-surface > h2 { margin-top:0; margin-bottom:16px; }
.social-sharing-widget.cms-widget-surface > p { margin-top:0; margin-bottom:16px; }
.social-sharing-widget.social-floating.cms-widget-surface { width:auto; padding:10px; }
.social-sharing-widget.social-align-left { text-align:left; }
.social-sharing-widget.social-align-center { text-align:center; }
.social-sharing-widget.social-align-right { text-align:right; }
.social-share-buttons { display:flex; flex-wrap:wrap; gap:var(--share-gap,10px); align-items:center; }
.social-align-left .social-share-buttons { justify-content:flex-start; }
.social-align-center .social-share-buttons { justify-content:center; }
.social-align-right .social-share-buttons { justify-content:flex-end; }
.social-sharing-widget .social-share-btn { min-height:var(--share-size,42px); min-width:var(--share-size,42px); padding:0 16px; display:inline-flex; align-items:center; justify-content:center; gap:9px; overflow:hidden; border:0; border-radius:var(--share-radius,8px) !important; background:var(--share-bg,#2563eb); color:var(--share-fg,#fff); font:inherit; font-weight:700; cursor:pointer; transition:transform .18s ease,filter .18s ease,box-shadow .18s ease; }
/* Step 873: Bei Icon + Text wird der Icon-Bereich dezent von der Buttonfläche abgesetzt. */
.social-sharing-widget.social-icon-text:not(.social-shape-circle) .social-share-btn { padding:0; gap:0; }
.social-sharing-widget.social-icon-text:not(.social-shape-circle) .social-share-icon { align-self:stretch; display:inline-flex; align-items:center; justify-content:center; min-width:var(--share-size,42px); padding:0 10px; box-sizing:border-box; background:rgba(0,0,0,.10); }
.social-sharing-widget.social-icon-text:not(.social-shape-circle) .social-share-label { padding:0 16px 0 12px; }
.social-sharing-widget.social-icons-only .social-share-btn { width:var(--share-size,42px); max-width:var(--share-size,42px); padding:0; }
.social-sharing-widget.social-shape-square .social-share-btn { border-radius:0 !important; }
.social-sharing-widget .social-share-btn:hover { transform:translateY(-2px); filter:brightness(.94); box-shadow:0 8px 18px rgba(15,23,42,.16); }
.social-sharing-widget .social-share-btn:focus-visible { outline:3px solid color-mix(in srgb,var(--share-bg) 35%,#fff); outline-offset:2px; }
.social-sharing-widget .social-share-icon { display:inline-block; font-family:'FontAwesome'; font-style:normal; font-weight:normal; line-height:1; font-size:calc(var(--share-size,42px) * .43); text-rendering:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.social-copy-note { min-height:1.5em; margin-top:8px; color:var(--muted); font-size:.92rem; }
/* Step 960: Lokaler Bestätigungsdialog für die optionale 2-Klick-Lösung.
Bis zur Bestätigung wird keinerlei externer Sharing-Dienst aufgerufen. */
.social-share-confirm-backdrop { position:fixed; inset:0; z-index:10050; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(15,23,42,.48); }
.social-share-confirm-backdrop.is-open { display:flex; }
.social-share-confirm-dialog { width:min(520px,100%); box-sizing:border-box; padding:22px; border-radius:14px; background:#fff; color:#0f172a; text-align:left; box-shadow:0 24px 60px rgba(15,23,42,.28); }
.social-share-confirm-dialog h3 { margin:0 0 10px; font-size:1.15rem; color:#0f172a; }
.social-share-confirm-dialog p { margin:0; line-height:1.55; color:#334155; }
.social-share-confirm-privacy { margin-top:10px !important; font-size:.94rem; }
.social-share-confirm-privacy a { color:#1d4ed8; font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.social-share-confirm-privacy a:focus-visible { outline:3px solid rgba(37,99,235,.35); outline-offset:2px; border-radius:3px; }
.social-share-confirm-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; margin-top:18px; }
.social-share-confirm-actions button { min-height:40px; padding:8px 14px; border-radius:8px; border:1px solid #cbd5e1; background:#fff; color:#0f172a; font:inherit; font-weight:700; cursor:pointer; }
.social-share-confirm-actions .social-share-confirm-go { border-color:#2563eb; background:#2563eb; color:#fff; }
.social-share-confirm-actions button:focus-visible { outline:3px solid rgba(37,99,235,.35); outline-offset:2px; }
.social-sharing-widget.social-floating { position:fixed; z-index:900; width:auto; max-width:min(92vw,360px); margin:0; }
.social-sharing-widget.social-floating-left { left:var(--share-edge,12px); }
.social-sharing-widget.social-floating-right { right:var(--share-edge,12px); }
.social-sharing-widget.social-float-top { top:var(--share-edge,12px); }
.social-sharing-widget.social-float-center { top:50%; transform:translateY(-50%); }
.social-sharing-widget.social-float-bottom { bottom:var(--share-edge,12px); }
.social-sharing-widget.social-floating .social-share-buttons { display:inline-grid; grid-auto-flow:row; grid-template-columns:max-content; align-items:stretch; justify-items:stretch; }
.social-sharing-widget.social-floating.social-align-left .social-share-buttons { justify-self:start; }
.social-sharing-widget.social-floating.social-align-center .social-share-buttons { justify-self:center; }
.social-sharing-widget.social-floating.social-align-right .social-share-buttons { justify-self:end; }
.social-sharing-widget.social-floating .social-share-btn { width:100%; max-width:100%; justify-content:flex-start; }
.social-sharing-widget.social-floating.social-icons-only .social-share-buttons { align-items:center; }
.social-sharing-widget.social-floating > h2,.social-sharing-widget.social-floating > p { display:none; }
@keyframes cmsShareBounce{0%,100%{transform:translateY(0)}35%{transform:translateY(-7px)}65%{transform:translateY(-3px)}}
@keyframes cmsShareSlide{0%{transform:translateX(-8px);opacity:.25}100%{transform:translateX(0);opacity:1}}
.social-animation-bounce.social-anim-load .social-share-btn { animation:cmsShareBounce .65s ease both; }
.social-animation-slide.social-anim-load .social-share-btn { animation:cmsShareSlide .45s ease both; }
.social-animation-bounce.social-anim-hover .social-share-btn:hover { animation:cmsShareBounce .65s ease; }
.social-animation-slide.social-anim-hover .social-share-btn:hover { animation:cmsShareSlide .45s ease; }
@media (prefers-reduced-motion:reduce){.social-sharing-widget .social-share-btn{animation:none !important;transition:none !important}}
@media (max-width:900px){
.social-sharing-widget .social-share-btn{padding:0 12px}
.social-sharing-widget.social-icons-only .social-share-btn{padding:0}
.social-share-buttons{gap:8px}
.social-sharing-widget.social-floating:not(.social-floating-mobile-enabled){position:static;left:auto;right:auto;top:auto;bottom:auto;transform:none;max-width:none;width:100%;}
.social-sharing-widget.social-floating:not(.social-floating-mobile-enabled) .social-share-buttons{flex-direction:row;flex-wrap:wrap;align-items:center;}
.social-sharing-widget.social-floating:not(.social-floating-mobile-enabled).social-align-left .social-share-buttons{justify-content:flex-start;}
.social-sharing-widget.social-floating:not(.social-floating-mobile-enabled).social-align-center .social-share-buttons{justify-content:center;}
.social-sharing-widget.social-floating:not(.social-floating-mobile-enabled).social-align-right .social-share-buttons{justify-content:flex-end;}
.social-sharing-widget.social-floating:not(.social-floating-mobile-enabled) > h2,.social-sharing-widget.social-floating:not(.social-floating-mobile-enabled) > p{display:block;}
}
/* Step 802: Wird für das Infokarten-Widget ein eigener Widget-Hintergrund
gesetzt, benötigen Überschrift und Kartenraster denselben inneren Abstand.
Die Oberfläche liegt direkt auf .cards-widget; deshalb wird der Abstand hier
ohne zusätzliche Wrapper-Ebene ergänzt. Transparente und farbige Flächen
behalten damit exakt dieselbe Geometrie. */
.cards-widget.cms-widget-surface { padding:var(--card-pad); }
.cards-widget.has-widget-heading .grid3 { margin-top:24px; }
/* Das Kartenraster erzeugt keinen eigenen Außenabstand. Der Abstand zu
benachbarten Widgets und Vorlagen kommt ausschließlich aus dem globalen
vertikalen Widgetabstand. */
.cards-widget .grid3 { width:100%; box-sizing:border-box; margin-bottom:0; }
.cards-widget.cards-cols-1 .grid3 { grid-template-columns:1fr; }
.cards-widget.cards-cols-1 .mini-card { width:100%; box-sizing:border-box; }
.cards-widget.cards-cols-2 .grid3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.cards-widget.cards-cols-3 .grid3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.cards-widget.cards-cols-4 .grid3 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.cards-widget.cards-cols-5 .grid3 { grid-template-columns:repeat(5,minmax(0,1fr)); }
.cards-widget.cards-cols-6 .grid3 { grid-template-columns:repeat(6,minmax(0,1fr)); }
.mini-card { background:#fff; border:1px solid var(--line); border-radius:var(--card-radius); padding:var(--card-pad); display:flex; flex-direction:column; gap:11px; box-shadow:var(--card-shadow); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.mini-card:hover { transform:translateY(-3px); box-shadow:0 20px 42px rgba(15,23,42,.11); border-color:rgba(37,99,235,.28); }
/* Step 1713: Die automatische Kontrastfarbe gehört zur äußeren Widgetfläche.
Infokarten besitzen jedoch eine eigene weiße Funktionsfläche und benötigen
deshalb wieder ihren dunklen Kartentext. Ohne diese Abgrenzung wurde die für
einen dunklen Widget-Hintergrund korrekt ermittelte weiße Textfarbe bis in
die weißen Karten vererbt und machte Titel und Beschreibungen unsichtbar. */
.cms-widget-auto-contrast .cards-widget .mini-card,
.cards-widget.cms-widget-auto-contrast .mini-card { color:#0f172a !important; }
.cms-widget-auto-contrast .cards-widget .mini-card h3,
.cms-widget-auto-contrast .cards-widget .mini-card .mini-card-title,
.cards-widget.cms-widget-auto-contrast .mini-card h3,
.cards-widget.cms-widget-auto-contrast .mini-card .mini-card-title { color:#0f172a !important; }
.cms-widget-auto-contrast .cards-widget .mini-card p,
.cms-widget-auto-contrast .cards-widget .mini-card li,
.cms-widget-auto-contrast .cards-widget .mini-card small,
.cms-widget-auto-contrast .cards-widget .mini-card .muted,
.cards-widget.cms-widget-auto-contrast .mini-card p,
.cards-widget.cms-widget-auto-contrast .mini-card li,
.cards-widget.cms-widget-auto-contrast .mini-card small,
.cards-widget.cms-widget-auto-contrast .mini-card .muted { color:#475569 !important; }
.cms-widget-auto-contrast .cards-widget .mini-card a:not(.btn):not(.button):not([class*="button"]),
.cms-widget-auto-contrast .cards-widget .mini-card a:not(.btn):not(.button):not([class*="button"]):visited,
.cards-widget.cms-widget-auto-contrast .mini-card a:not(.btn):not(.button):not([class*="button"]),
.cards-widget.cms-widget-auto-contrast .mini-card a:not(.btn):not(.button):not([class*="button"]):visited { color:var(--primary) !important; }
/* Step 942: Optionales Hover-Overlay für Infokarten. Das Overlay liegt nur
visuell über der Karte und blockiert weder Buttons noch Links. */
.mini-card.has-hover-overlay { position:relative; overflow:hidden; }
.mini-card-hover-overlay { position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; padding:22px; box-sizing:border-box; border-radius:inherit; background:var(--card-hover-bg,rgba(15,23,42,.72)); color:var(--card-hover-text,#fff); opacity:0; pointer-events:none; transition:opacity .28s ease; text-align:center; }
.mini-card-button-wrap { position:relative; z-index:6; display:flex; width:100%; }
.mini-card-button-wrap.mini-card-button-left { justify-content:flex-start; }
.mini-card-button-wrap.mini-card-button-center { justify-content:center; }
.mini-card-button-wrap.mini-card-button-right { justify-content:flex-end; }
.mini-card-button-wrap .btn { align-self:auto; margin-top:auto; }
.mini-card-hover-text { max-width:90%; font-weight:700; line-height:1.45; }
@media (hover:hover) and (pointer:fine) {
.mini-card.has-hover-overlay:hover .mini-card-hover-overlay,
.mini-card.has-hover-overlay:focus-within .mini-card-hover-overlay { opacity:1; }
}
@media (hover:none), (pointer:coarse) { .mini-card-hover-overlay { display:none; } }
@media (prefers-reduced-motion:reduce) { .mini-card-hover-overlay { transition:none; } }
/* Step 943: Trifft eine Akzentkante auf das Hover-Overlay, darf dessen
Rundung an genau dieser Seite keine hellen Kartenecken freilegen. Die
äußere Kartenrundung und die sichtbare Akzentkante bleiben unverändert. */
.cards-widget.cards-accent-top .mini-card-hover-overlay { border-radius:0 0 var(--card-radius) var(--card-radius); }
.cards-widget.cards-accent-bottom .mini-card-hover-overlay { border-radius:var(--card-radius) var(--card-radius) 0 0; }
.cards-widget.cards-accent-left .mini-card-hover-overlay { border-radius:0 var(--card-radius) var(--card-radius) 0; }
.cards-widget.cards-accent-right .mini-card-hover-overlay { border-radius:var(--card-radius) 0 0 var(--card-radius); }
/* Step 930: Die Akzentkante muss nach der allgemeinen Karten-Border stehen.
Zuvor wurden border-top/-bottom/-left/-right direkt danach durch
.mini-card { border:1px solid ... } wieder überschrieben. */
.cards-widget.cards-accent-top .mini-card { border-top:var(--cards-accent-width,3px) solid var(--cards-accent-color,#f5b400); }
.cards-widget.cards-accent-bottom .mini-card { border-bottom:var(--cards-accent-width,3px) solid var(--cards-accent-color,#f5b400); }
.cards-widget.cards-accent-left .mini-card { border-left:var(--cards-accent-width,3px) solid var(--cards-accent-color,#f5b400); }
.cards-widget.cards-accent-right .mini-card { border-right:var(--cards-accent-width,3px) solid var(--cards-accent-color,#f5b400); }
/* Gestaffelte Infokarten-Animation: Der Animations-Wrapper trennt die
Scroll-Transition von der eigenen Hover-Transition der Karte. */
.cms-card-reveal { min-width:0; display:flex; }
.cms-card-reveal > .mini-card,
.cms-card-reveal > .hero-feature { width:100%; box-sizing:border-box; }
.mini-card h3, .mini-card .mini-card-title { margin:0 0 6px; font-size:1.2rem; letter-spacing:-.02em; }
.mini-card p { margin:0; color:#475569; }
.mini-card img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--card-radius); border:1px solid var(--line); margin-bottom:6px; }
.mini-card .btn { align-self:flex-start; margin-top:auto; padding:11px 16px; font-size:.94rem; }
.cards-widget.cards-compact .grid3 { gap:14px; }
.cards-widget.cards-compact .mini-card { padding:calc(var(--card-pad) * .78); gap:8px; }
.cards-widget.cards-compact .mini-card h3, .cards-widget.cards-compact .mini-card .mini-card-title { font-size:1.08rem; }
.cards-widget.cards-image .grid3 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:stretch; }
.cards-widget.cards-image .mini-card { padding:0; overflow:hidden; gap:0; display:flex; flex-direction:column; }
.cards-widget.cards-image .mini-card img { width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; display:block; border:0; border-radius:0; margin:0; background:#eef2ff; }
.cards-widget.cards-image .mini-card h3, .cards-widget.cards-image .mini-card .mini-card-title, .cards-widget.cards-image .mini-card p, .cards-widget.cards-image .mini-card .btn { margin-left:var(--card-pad); margin-right:var(--card-pad); }
.cards-widget.cards-image .mini-card h3, .cards-widget.cards-image .mini-card .mini-card-title { margin-top:var(--card-pad); }
.cards-widget.cards-image .mini-card p { flex:1; }
.cards-widget.cards-image .mini-card .btn { margin-bottom:var(--card-pad); align-self:flex-start; }
.cards-widget.cards-screenshots .grid3 { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:stretch; }
.cards-widget.cards-screenshots .mini-card { padding:22px; overflow:hidden; gap:0; display:flex; flex-direction:column; border-radius:20px; border:1px solid #dbe3ef; box-shadow:0 16px 42px rgba(15,23,42,.08); background:#fff; }
.cards-widget.cards-screenshots .mini-card:hover { transform:translateY(-3px); box-shadow:0 20px 52px rgba(15,23,42,.12); }
.cards-widget.cards-screenshots .mini-card img { width:100%; height:180px; aspect-ratio:auto; object-fit:contain; object-position:center center; display:block; border:1px solid #dbe3ef; border-radius:16px; margin:0 0 18px; background:#fff; }
.cards-widget.cards-screenshots .mini-card h3, .cards-widget.cards-screenshots .mini-card .mini-card-title { margin:0 0 10px; font-size:1.18rem; color:#0f172a; }
.cards-widget.cards-screenshots .mini-card p { margin:0; color:#64748b; line-height:var(--cms-text-line-height); flex:1; }
.cards-widget.cards-screenshots .mini-card .btn { margin:16px 0 0; align-self:flex-start; }
.mini-card.screenshot-lightbox { cursor:pointer; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.mini-card.screenshot-lightbox:hover { transform:translateY(-4px); box-shadow:0 26px 70px rgba(15,23,42,.18); border-color:rgba(37,99,235,.28); }
.mini-card.screenshot-lightbox:focus-visible { outline:3px solid rgba(37,99,235,.45); outline-offset:4px; }
.cards-image-lightbox { cursor:pointer; }
.cards-image-lightbox:focus-visible { outline:3px solid rgba(37,99,235,.45); outline-offset:4px; border-radius:inherit; }
@media(max-width:1280px) { .cards-widget.cards-cols-5 .grid3, .cards-widget.cards-cols-6 .grid3 { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:1050px) { .cards-widget.cards-cols-4 .grid3, .cards-widget.cards-cols-5 .grid3, .cards-widget.cards-cols-6 .grid3 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:1050px) { .cards-widget.cards-screenshots .grid3 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:720px) { .cards-widget.cards-screenshots .grid3 { grid-template-columns:1fr; } .cards-widget.cards-screenshots .mini-card img { height:auto; } }
.text-widget table, .cms-text-table { width:100%; border-collapse:collapse; margin:18px 0; overflow:hidden; border-radius:14px; }
.text-widget th, .text-widget td, .cms-text-table th, .cms-text-table td { border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top; }
.text-widget th, .cms-text-table th { background:#f8fafc; color:#0f172a; font-weight:700; }
@media(max-width:720px) { .text-widget table, .cms-text-table { display:block; overflow-x:auto; white-space:nowrap; } }
/* Gemeinsame Zeilenhöhe für normale Editorinhalte: Absätze, Listen und
verschachtelte Inhalte folgen demselben Grundwert. Schriftgrößen, Abstände,
Überschriften und eigenständige Daten-/Bedienelemente bleiben separat. */
:where(.text-widget,.text-column,.section-heading-content,.intro-card,.about-panel,.parallax-content,.parallax-column-richtext,.closing-cta,.faq-intro,.download-intro,.download-main-card,.image-text-content,.image-text-flow-content,.notice,.contact-intro,.contact-panel-intro,.contact-intro-card) { line-height:var(--cms-text-line-height); }
:where(.text-widget,.text-column,.section-heading-content,.intro-card,.about-panel,.parallax-content,.parallax-column-richtext,.closing-cta,.faq-intro,.download-intro,.download-main-card,.image-text-content,.image-text-flow-content,.notice,.contact-intro,.contact-panel-intro,.contact-intro-card) p,
:where(.text-widget,.text-column,.section-heading-content,.intro-card,.about-panel,.parallax-content,.parallax-column-richtext,.closing-cta,.faq-intro,.download-intro,.download-main-card,.image-text-content,.image-text-flow-content,.notice,.contact-intro,.contact-panel-intro,.contact-intro-card) li { line-height:var(--cms-text-line-height); }
/* Trennlinien aus dem visuellen Texteditor erhalten eine eigene, in allen
Browsern und Standarddesigns sichtbare Darstellung. Ohne diese Regel hing
die Ausgabe vom kaum sichtbaren Browser-Standard fuer
ab. */
.text-widget hr {
display:block;
width:100%;
height:2px;
margin:8px 0 12px;
padding:0;
border:0;
border-radius:999px;
background:var(--primary);
opacity:1;
}
.cms-list { list-style:none; padding-left:1.55em; }
.cms-list > li { position:relative; }
.cms-list > li::before { position:absolute; left:-1.35em; font-weight:700; }
.cms-list-arrow > li::before { content:'→'; }
.cms-list-check > li::before { content:'✓'; }
.cms-list-dash > li::before { content:'–'; }
.cms-code-block { margin:18px 0; padding:12px 14px 12px 48px; border:1px solid #d7dee8; border-radius:4px; background:#f8fafc; color:#0f172a; font-family:"Courier New",Consolas,monospace; font-size:.92rem; line-height:1.55; overflow-x:auto; }
.cms-code-block > li { padding-left:10px; white-space:nowrap; }
.cms-code-block > li::marker { color:#64748b; font-variant-numeric:tabular-nums; }
.cms-code-block code { font:inherit; color:inherit; background:transparent; white-space:pre; }
@media(max-width:720px) { .cms-code-block { padding-left:40px; font-size:.86rem; } }
.text-widget-actions { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:22px; }
.text-widget-actions .btn { margin:0; }
.text-widget-actions .btn.btn-secondary { background:#ffffff !important; color:var(--button-color) !important; border:1px solid color-mix(in srgb,var(--button-color) 24%,transparent); box-shadow:0 12px 24px rgba(15,23,42,.08); }
.text-widget-actions .btn.btn-secondary:hover { background:var(--button-color) !important; border-color:var(--button-color); color:var(--button-text) !important; box-shadow:0 20px 36px color-mix(in srgb,var(--button-color) 28%,transparent); }
.cards-widget.cards-pricing .grid3 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.cards-widget.cards-pricing .mini-card { text-align:center; align-items:center; }
.cards-widget.cards-pricing .mini-card .btn { align-self:center; }
/* Step 759: Die äußere Widget-Breite und die interne Tarifanzahl sind
unabhängig. Eine Preistabelle mit „Volle Breite“ nutzt deshalb den gesamten
zugewiesenen Widget-Slot; die Karten teilen diesen Platz gleichmäßig auf. */
/* Step 762: Die Preistabelle verwendet dieselbe äußere widget-plain-Hülle wie
die Vergleichstabelle. Dadurch liegen Überschrift und Inhalt bei gesetztem
Widget-Hintergrund im einheitlichen Karten-Innenabstand. */
.pricing-widget { width:100%; min-width:0; box-sizing:border-box; }
.pricing-widget .pricing-grid { display:grid; width:100%; min-width:0; box-sizing:border-box; gap:22px; margin-top:24px; justify-items:stretch; }
.pricing-widget.pricing-cols-1 .pricing-grid { grid-template-columns:1fr; }
.pricing-widget.pricing-cols-2 .pricing-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.pricing-widget.pricing-cols-3 .pricing-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.pricing-widget.pricing-cols-4 .pricing-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.pricing-card { width:100%; min-width:0; box-sizing:border-box; position:relative; overflow:hidden; background:var(--card); border:1px solid var(--line); border-radius:var(--card-radius); padding:34px 30px; box-shadow:var(--card-shadow); display:flex; flex-direction:column; gap:18px; min-height:100%; }
.pricing-card.is-highlight { border-color:var(--primary); transform:translateY(-4px); }
.pricing-card h3 { margin:0; text-align:center; font-size:1.35rem; }
.pricing-subtitle { margin:-12px 0 8px; text-align:center; color:var(--muted); }
.pricing-offer { display:flex; flex-direction:column; align-items:center; gap:5px; margin:2px 0 -2px; text-align:center; }
.pricing-offer-label { display:inline-flex; align-items:center; justify-content:center; min-height:26px; padding:4px 12px; border-radius:999px; background:color-mix(in srgb, var(--primary) 12%, white); color:var(--primary); font-size:.78rem; font-weight:800; letter-spacing:.02em; }
.pricing-old-price { color:var(--muted); font-size:1.15rem; font-weight:700; line-height:1.2; text-decoration:line-through; text-decoration-thickness:2px; }
.pricing-price { display:flex; align-items:flex-start; justify-content:center; gap:6px; margin:4px 0 10px; color:#1f2937; }
.pricing-price strong { font-size:clamp(2.4rem,5vw,4rem); line-height:.95; letter-spacing:-.06em; }
.pricing-price span { color:var(--muted); align-self:flex-end; padding-bottom:8px; }
.pricing-features { display:grid; gap:13px; padding:20px 0 4px; border-top:1px solid var(--line); margin:0; list-style:none; }
.pricing-features li { position:relative; padding-left:26px; color:#334155; }
.pricing-features li::before { content:'✓'; position:absolute; left:0; color:var(--primary); font-weight:800; }
.pricing-card .btn { align-self:center; min-width:180px; text-align:center; margin-top:auto; }
.pricing-badge { position:absolute; top:18px; right:-42px; transform:rotate(45deg); background:var(--primary); color:#fff; font-weight:800; font-size:.78rem; padding:8px 44px; box-shadow:0 12px 28px rgba(15,23,42,.16); }
@media(max-width:1050px){ .pricing-widget.pricing-cols-4 .pricing-grid, .pricing-widget.pricing-cols-3 .pricing-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:720px){ .pricing-widget .pricing-grid { grid-template-columns:1fr !important; } .pricing-card { padding:28px 24px; } }
.comparison-table { width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:18px; border:1px solid var(--line); background:#fff; }
.comparison-table th, .comparison-table td { padding:15px 18px; text-align:left; border-bottom:none; }
.comparison-table th { background:#f8fafc; color:#0f172a; }
.comparison-table tr:last-child td { border-bottom:0; }
.comparison-table td:nth-child(2), .comparison-table td:nth-child(3) { font-weight:700; }
/* Download-Seite: Widget-Ausgabe optisch identisch zur MASTER-Version */
.download-widget-section { padding:15px 0 !important; }
.download-widget-section:first-child { padding-top:42px !important; }
.download-widget-section:last-child { padding-bottom:42px !important; }
.download-widget-section .widget-row { display:block !important; }
.download-widget-section .widget-slot { display:block !important; }
/* Step 766: Der Download-Hauptbereich unterstützt die allgemeine Widget-Breite.
Die bisherigen Download-Seiten-Regeln schalteten jede Download-Reihe pauschal
auf display:block und hoben damit 1/3, 1/2 und 2/3 vollständig auf. Nur für
diese Vorlage wird deshalb das normale 6-Spalten-Raster wieder aktiviert. */
.download-widget-section.download-main-widget-section .widget-row {
display:grid !important;
grid-template-columns:repeat(6,minmax(0,1fr)) !important;
}
.download-widget-section.download-main-widget-section .widget-slot.width-full { grid-column:span 6 !important; }
.download-widget-section.download-main-widget-section .widget-slot.width-half { grid-column:span 3 !important; }
.download-widget-section.download-main-widget-section .widget-slot.width-third { grid-column:span 2 !important; }
.download-widget-section.download-main-widget-section .widget-slot.width-two-third { grid-column:span 4 !important; }
.download-intro{background:linear-gradient(135deg,#ffffff 0%,#eef4ff 100%);border:1px solid #dbeafe;border-radius:24px;padding:34px;box-shadow:0 18px 50px rgba(15,23,42,.08)}
.download-intro .eyebrow{font-size:.86rem;font-weight:800;color:#2563eb;text-transform:uppercase;letter-spacing:.08em;margin:0 0 10px}
.download-intro h2{margin:.1rem 0 .7rem;font-size:clamp(2rem,4vw,3rem);letter-spacing:-.045em}
.download-intro p{max-width:820px;color:#475569;font-size:1.08rem;line-height:var(--cms-text-line-height)}
.download-main-card{background:#fff;border:1px solid #dbe3ef;border-radius:26px;padding:34px;box-shadow:0 20px 55px rgba(15,23,42,.10);display:block}
.download-main-card h1,.download-main-card h2,.download-main-card h3,.download-main-card h4,.download-main-card h5,.download-main-card h6{margin:.2rem 0 .7rem}
.download-main-card p{color:#475569;line-height:var(--cms-text-line-height)}
.download-badge{display:inline-flex;align-items:center;gap:8px;background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe;border-radius:999px;padding:8px 12px;font-weight:800;font-size:.86rem}
.download-version-sticker{position:relative;width:184px;height:184px;margin:-12px auto -2px;filter:drop-shadow(0 12px 16px rgba(15,23,42,.22));transform:rotate(7deg);flex:0 0 auto}
.download-version-sticker::before{content:"";position:absolute;inset:0;background:#fff;clip-path:polygon(29% 2%,72% 2%,98% 29%,98% 71%,71% 98%,29% 98%,2% 71%,2% 29%)}
.download-version-sticker-inner{position:absolute;inset:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;padding:20px 18px 15px;background:var(--download-sticker-bg,linear-gradient(145deg,#ef2348 0%,#df1236 55%,#c8082d 100%));color:var(--download-sticker-color,#fff);clip-path:polygon(29% 2%,72% 2%,98% 29%,98% 71%,71% 98%,29% 98%,2% 71%,2% 29%);text-align:center}
.download-version-sticker-icon{font-family:"FontAwesome";font-size:38px;line-height:1;margin:0 0 6px}
.download-version-sticker-icon::before{content:"\f0a1"}
.download-version-sticker-text{display:block;max-width:138px;font-size:1.34rem;line-height:1.16;font-weight:900;letter-spacing:-.02em;overflow:visible;overflow-wrap:break-word}
.download-version-sticker-swoosh{width:74px;height:8px;margin-top:7px;border-top:6px solid currentColor;border-radius:50%;transform:rotate(4deg);opacity:.94}
.requirement-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.requirement-card{background:#fff;border:1px solid #dbe3ef;border-radius:22px;padding:22px;box-shadow:0 14px 40px rgba(15,23,42,.07)}
.requirement-card strong{display:block;font-size:1.05rem;margin-bottom:8px}
.requirement-card p{margin:0;color:#475569;line-height:var(--cms-text-line-height)}
.install-steps{background:#fff;border:1px solid #dbe3ef;border-radius:24px;padding:30px;box-shadow:0 18px 45px rgba(15,23,42,.08)}
.install-steps h3{margin-top:0;font-size:1.7rem}
.step-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:20px}
.step{background:#f8fafc;border:1px solid #e2e8f0;border-radius:20px;padding:20px}
.step span{display:inline-flex;width:34px;height:34px;border-radius:999px;background:#2563eb;color:#fff;align-items:center;justify-content:center;font-weight:900;margin-bottom:12px}
.install-steps .step .step-number{display:inline-flex !important;width:34px !important;height:34px !important;min-width:34px !important;min-height:34px !important;border-radius:999px !important;background:#2563eb !important;color:#ffffff !important;align-items:center !important;justify-content:center !important;font-weight:900 !important;margin:0 0 12px 0 !important;line-height:1 !important;text-decoration:none !important}
.step strong{display:block;margin-bottom:8px}
.step p{margin:0;color:#475569;line-height:var(--cms-text-line-height)}
.download-note{background:#f8fafc;border:1px solid #dbe3ef;border-radius:20px;padding:22px;color:#475569;line-height:var(--cms-text-line-height)}
.closing-cta{background:var(--cms-widget-bg,var(--primary)) !important;color:#fff !important;border-radius:26px !important;padding:34px !important;display:flex !important;align-items:center !important;justify-content:space-between !important;gap:24px !important;box-shadow:0 24px 70px rgba(15,23,42,.20) !important}
.closing-cta h2,.closing-cta h3{color:#ffffff !important;margin:.1rem 0 .6rem !important;font-size:clamp(1.8rem,3vw,2.6rem)}
.closing-cta p{color:rgba(255,255,255,.86) !important;line-height:var(--cms-text-line-height) !important;margin:0 !important}
.closing-cta .eyebrow{display:inline-flex !important;width:max-content !important;background:rgba(255,255,255,.12) !important;color:#ffffff !important;border:1px solid rgba(255,255,255,.30) !important;border-radius:999px !important;padding:7px 12px !important;font-size:.78rem !important;font-weight:800 !important;text-transform:uppercase !important;letter-spacing:.08em !important;margin:0 0 12px !important}
.closing-cta-actions{display:grid !important;gap:12px !important;min-width:260px !important}
.closing-cta .btn,.closing-cta .btn-secondary{min-height:52px !important;height:auto !important;padding:14px 22px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;background:#ffffff !important;color:var(--primary) !important;border:2px solid #ffffff !important;border-radius:var(--button-radius) !important;font-weight:800 !important;text-decoration:none !important;box-shadow:0 14px 28px rgba(15,23,42,.12) !important}
.closing-cta .btn:hover,.closing-cta .btn-secondary:hover{background:rgba(255,255,255,.92) !important;color:var(--primary) !important;transform:translateY(-2px) !important;box-shadow:0 18px 34px rgba(15,23,42,.18) !important}
@media(max-width:900px){.requirement-grid,.step-list{grid-template-columns:repeat(2,minmax(0,1fr))}.closing-cta-actions{min-width:0}}
@media(max-width:820px){.closing-cta{display:block !important;padding:26px !important}.closing-cta-actions{min-width:0 !important;margin-top:20px !important;width:100% !important}.closing-cta .btn,.closing-cta .btn-secondary{width:100% !important;text-align:center !important}}
@media(max-width:700px){.download-main-card{grid-template-columns:1fr}.download-version-sticker{display:none !important}}
@media(max-width:620px){
/* Step 1063: Download-Hauptbereich auf Smartphones immer auf die
tatsächlich verfügbare Breite setzen. Eine gespeicherte 1/3-, 1/2-
oder 2/3-Desktopbreite darf den Inhalt mobil nicht verengen. */
.download-widget-section.download-main-widget-section .widget-row{
display:block !important;
width:100% !important;
min-width:0 !important;
}
.download-widget-section.download-main-widget-section .widget-slot.width-full,
.download-widget-section.download-main-widget-section .widget-slot.width-half,
.download-widget-section.download-main-widget-section .widget-slot.width-third,
.download-widget-section.download-main-widget-section .widget-slot.width-two-third{
display:block !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
grid-column:auto !important;
box-sizing:border-box !important;
}
.requirement-grid,.step-list{grid-template-columns:1fr}
.intro-card,.download-intro,.install-steps,.closing-cta{padding:24px}
.download-main-card{
grid-template-columns:minmax(0,1fr) !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
gap:20px !important;
padding:18px !important;
overflow:hidden;
}
.download-main-card > *{
min-width:0 !important;
max-width:100% !important;
}
.download-badge{
max-width:100%;
box-sizing:border-box;
white-space:normal;
overflow-wrap:anywhere;
}
.download-version-sticker{width:156px;height:156px;margin:0 auto -2px}
.download-version-sticker-inner{padding:19px 16px 15px}
.download-version-sticker-icon{font-size:31px;margin-bottom:5px}
.download-version-sticker-text{max-width:116px;font-size:1.16rem}
.download-version-sticker-swoosh{width:62px;height:7px;margin-top:8px;border-top-width:5px}
}
.parallax-widget-section{padding-top:0 !important;padding-bottom:0 !important}
.parallax-container{position:relative;min-height:var(--parallax-min-height,430px);display:flex;align-items:center;justify-content:center;overflow:hidden;background-image:var(--parallax-image);background-size:cover;background-position:center center;background-repeat:no-repeat;background-attachment:fixed}
.parallax-overlay{position:absolute;inset:0;background:rgba(15,23,42,.58)}
.parallax-content{position:relative;z-index:1;width:min(900px,calc(100% - 48px));margin:0 auto;padding:72px 24px;text-align:center;color:#fff}
.parallax-content.parallax-content-with-columns{width:calc(100% - 48px);max-width:none}
.parallax-content h1,.parallax-content h2,.parallax-content h3{color:#fff !important;margin:0 0 16px}
.parallax-content p{color:rgba(255,255,255,.92) !important;font-size:clamp(1rem,1.5vw,1.2rem);line-height:var(--cms-text-line-height);margin:0 auto;max-width:760px}
.parallax-actions{margin-top:26px}
.parallax-actions .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border-radius:var(--button-radius);text-decoration:none;font-weight:800}
.parallax-columns{display:grid;gap:22px;margin-top:30px;text-align:left}
.parallax-columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.parallax-columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.parallax-columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.parallax-column{padding:18px 20px;border:1px solid rgba(255,255,255,.28);border-radius:14px;background:rgba(15,23,42,.34)}
.parallax-container.parallax-column-borders-off .parallax-column{border-color:transparent}
.parallax-container.parallax-column-backgrounds-off .parallax-column{background:transparent}
.parallax-column,.parallax-column h1,.parallax-column h2,.parallax-column h3{color:#fff !important}
.parallax-column p,.parallax-column li,.parallax-column strong{color:rgba(255,255,255,.92) !important}
/* Step 1131: Bei Bild/Text-Blöcken füllt das Bild seine komplette Hälfte aus.
Nur reine Textblöcke behalten den bisherigen Innenabstand. */
.parallax-column.parallax-column-has-media{padding:0;overflow:hidden}
.parallax-column.parallax-column-media-only{padding:0;overflow:hidden;min-height:240px}
.parallax-column-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;align-items:stretch;min-height:100%}
.parallax-column-media{min-width:0;min-height:100%;overflow:hidden}
.parallax-column-media img{display:block;width:100%;height:100%;min-height:100%;object-fit:cover;border-radius:0}
.parallax-column-copy{min-width:0;padding:20px 22px;display:flex;flex-direction:column;justify-content:center}
.parallax-column-media-only .parallax-column-inner{display:block;height:100%;min-height:240px}
.parallax-column-media-only .parallax-column-media{width:100%;height:100%;min-height:240px}
.parallax-column-media-only .parallax-column-media img{width:100%;height:100%;min-height:240px;object-fit:cover}
.parallax-column-media .gallery-open{display:block;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:zoom-in}
.parallax-column-media .gallery-open img{display:block;width:100%;height:100%;object-fit:cover}
/* Step 1719: In der normalen Bereichsbreite werden integrierte Bilder schmaler,
waehrend die Spaltenhoehe vom benachbarten Inhalt bestimmt werden kann.
cover schnitt sie deshalb seitlich ab. Nur in dieser Breitenvariante wird das
komplette Bild proportional eingepasst; volle Browserbreite bleibt unveraendert. */
.parallax-container.parallax-area-normal .parallax-column-media-only .parallax-column-media img,
.parallax-container.parallax-area-normal .parallax-column-media .gallery-open img{object-fit:contain}
.parallax-column h3{margin:0 0 8px;color:#fff !important;font-size:clamp(1rem,1.35vw,1.2rem)}
.parallax-column p{margin:0 !important;max-width:none !important;font-size:.96rem !important;line-height:var(--cms-text-line-height) !important}
.parallax-column-richtext h1,.parallax-column-richtext h2,.parallax-column-richtext h3{margin:0 0 10px;color:inherit !important}
.parallax-column-richtext p{margin:0 0 8px !important}
.parallax-column-richtext ul,.parallax-column-richtext ol{margin:8px 0;padding-left:24px;color:inherit}
.parallax-column-richtext li{margin:4px 0;line-height:var(--cms-text-line-height)}
.parallax-column-richtext a{color:inherit;text-decoration:underline}
.parallax-column-richtext blockquote{margin:10px 0;padding:10px 14px;border-left:4px solid rgba(255,255,255,.65);background:rgba(255,255,255,.1);border-radius:6px}
.parallax-column-richtext table{width:100%;margin:10px 0;border-collapse:collapse;color:inherit}
.parallax-column-richtext th,.parallax-column-richtext td{padding:8px;border:1px solid rgba(255,255,255,.35);text-align:left}
@keyframes parallaxColumnFromLeft{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:translateX(0)}}
@keyframes parallaxColumnFromRight{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
@keyframes parallaxColumnFromBottom{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.parallax-column-from-left{animation:parallaxColumnFromLeft .65s ease-out both}
.parallax-column-from-right{animation:parallaxColumnFromRight .65s ease-out both}
.parallax-column-from-bottom{animation:parallaxColumnFromBottom .65s ease-out both}
/* Step 904: Die Breitenwahl der Parallax-Vorlage wird ausschließlich für diese
Vorlage explizit an das 6-Spalten-Widgetraster gebunden. Damit entsprechen
Volle Breite, 2/3, 1/2 und 1/3 exakt den übrigen Widgetbreiten, ohne die
globale Layout-Engine oder andere Widgets zu verändern. */
.parallax-template-section .widget-row{display:grid !important;grid-template-columns:repeat(6,minmax(0,1fr)) !important}
.parallax-template-section .widget-slot.width-full{grid-column:span 6 !important}
.parallax-template-section .widget-slot.width-two-third{grid-column:span 4 !important}
.parallax-template-section .widget-slot.width-half{grid-column:span 3 !important}
.parallax-template-section .widget-slot.width-third{grid-column:span 2 !important}
.parallax-template-section .parallax-container{width:100% !important;max-width:none !important;box-sizing:border-box}
.text-columns-section .text-column{min-width:0}
.text-columns-section .text-column > :first-child{margin-top:0}
.text-columns-section .text-column > :last-child{margin-bottom:0}
/* Step 1613: Bei aktivierter Widget-Hintergrundeinstellung erhalten die neuen
Textspalten-Vorlagen denselben zentralen Karten-Innenabstand wie die übrigen
Widgets. Ohne diese Einstellung bleibt die Standardausgabe unverändert. */
.text-columns-content.cms-widget-surface{
width:100%;
min-width:0;
padding:var(--card-pad);
}
/* Step 1618: Eine im WYSIWYG-Editor bewusst gesetzte Textfarbe muss auch bei
verschachtelten Formatierungen erhalten bleiben. Der Editor erzeugt etwa
bei farbigem Fettdruck ....
Die allgemeine Widget-Kontrastregel färbt das innere strong sonst erneut in
die automatische Standardfarbe. Nur Nachfahren eines ausdrücklich farbigen
Elements übernehmen deshalb hier dessen Farbe; ungefärbter Text bleibt
weiterhin vollständig in der automatischen Kontrastlogik. */
/* Step 1619: Die vollständige Widget-Kennung ist hier erforderlich. Die
allgemeine Autokontrast-Regel für strong/h1-h6 besitzt eine höhere
Spezifität als die frühere Step-1618-Regel und färbte deshalb insbesondere
farbige, fett formatierte Spaltenüberschriften weiterhin schwarz. */
.text-columns-content.cms-widget-surface.cms-widget-auto-contrast
[style*="--cms-editor-color:"] *,
.text-columns-content.cms-widget-surface.cms-widget-auto-contrast
[style*="--cms-editor-color:"] > *{
color:var(--cms-editor-color) !important;
}
/* Step 1612: Links aus den Texteditor-Inhalten werden in allen Textvorlagen
einheitlich und klar erkennbar dargestellt. Aktionsbuttons bleiben davon
unberührt. Das Font-Awesome-Symbol erscheint ausschließlich bei externen
HTTP(S)-Zielen; interne Anker, E-Mail, Telefon und Downloads bleiben ohne
Zusatzsymbol. */
:where(.text-widget,.text-columns-content,.intro-card,.section-heading-content,.about-panel,.parallax-content,.closing-cta,.faq-intro,.download-main-card)
a:not(.btn):not(.button):not([class*="button"]){
color:var(--primary) !important;
font-weight:700;
text-decoration:underline;
text-decoration-thickness:1.5px;
text-underline-offset:3px;
transition:color var(--transition),text-decoration-color var(--transition);
}
:where(.text-widget,.text-columns-content,.intro-card,.section-heading-content,.about-panel,.parallax-content,.closing-cta,.faq-intro,.download-main-card)
a:not(.btn):not(.button):not([class*="button"]):hover{
color:color-mix(in srgb,var(--primary) 78%,#000000) !important;
text-decoration-color:currentColor;
}
/* Step 1614: Die automatische Widget-Kontrastregel besitzt absichtlich eine
hohe Priorität. Auf Texteditor-Flächen darf sie jedoch die eigens definierte
Linkfarbe nicht wieder durch die normale Fließtextfarbe ersetzen. */
:where(.text-widget,.text-columns-content,.intro-card,.section-heading-content,.about-panel,.parallax-content,.closing-cta,.faq-intro,.download-main-card).cms-widget-surface.cms-widget-auto-contrast
a:not(.btn):not(.button):not([class*="button"]),
:where(.text-widget,.text-columns-content,.intro-card,.section-heading-content,.about-panel,.parallax-content,.closing-cta,.faq-intro,.download-main-card).cms-widget-surface.cms-widget-auto-contrast
a:not(.btn):not(.button):not([class*="button"]):visited{
color:var(--primary) !important;
}
:where(.text-widget,.text-columns-content,.intro-card,.section-heading-content,.about-panel,.parallax-content,.closing-cta,.faq-intro,.download-main-card).cms-widget-surface.cms-widget-auto-contrast
a:not(.btn):not(.button):not([class*="button"]):hover{
color:color-mix(in srgb,var(--primary) 78%,#000000) !important;
}
:where(.text-widget,.text-columns-content,.intro-card,.section-heading-content,.about-panel,.parallax-content,.closing-cta,.faq-intro,.download-main-card)
a[href^="http://"]:not(.btn):not(.button):not([class*="button"]):not([download])::after,
:where(.text-widget,.text-columns-content,.intro-card,.section-heading-content,.about-panel,.parallax-content,.closing-cta,.faq-intro,.download-main-card)
a[href^="https://"]:not(.btn):not(.button):not([class*="button"]):not([download])::after{
content:"\f08e";
display:inline-block;
margin-left:.34em;
font-family:FontAwesome;
font-size:.76em;
font-style:normal;
font-weight:normal;
line-height:1;
text-decoration:none;
vertical-align:.08em;
}
/* Step 905: Nur die Parallax-Vorlage kann den globalen Seitenrand bewusst
ignorieren. Bei normaler Bereichsbreite bleibt die zentrale Maximalbreite
erhalten; bei voller Browserbreite reicht der Inhalt exakt bis an den
verfügbaren Rand. */
.parallax-template-section.parallax-ignore-page-margin > .container{width:min(var(--container-width),100%) !important;max-width:none;margin-left:auto !important;margin-right:auto !important}
.section-fullwidth.cms-widget-browser-fullwidth.parallax-template-section.parallax-ignore-page-margin > .container{width:100% !important;max-width:none !important;margin-left:0 !important;margin-right:0 !important}
@media(max-width:900px){.parallax-container{min-height:var(--parallax-min-height-tablet,360px);background-attachment:scroll}.parallax-content{padding:58px 20px;width:min(820px,calc(100% - 32px))}.parallax-columns-3,.parallax-columns-4{grid-template-columns:repeat(2,minmax(0,1fr))}.parallax-column-media-only{align-self:start;min-height:0}.parallax-column-media-only .parallax-column-inner,.parallax-column-media-only .parallax-column-media{height:auto;min-height:0}.parallax-column-media-only .parallax-column-media img{width:100%;height:auto;min-height:0;object-fit:contain}.parallax-column-media-only .gallery-open{height:auto}}
/* Step 1139: Unterhalb Desktop werden Parallax-Inhaltsblöcke konsequent
einspaltig dargestellt. Bildblöcke bleiben proportional und vollständig. */
@media(max-width:1024px){
.parallax-columns{
grid-template-columns:1fr !important;
}
.parallax-column{
width:100% !important;
min-width:0 !important;
}
.parallax-column.parallax-column-media-only{
min-height:0 !important;
height:auto !important;
}
.parallax-column-media-only .parallax-column-inner,
.parallax-column-media-only .parallax-column-media{
min-height:0 !important;
height:auto !important;
}
.parallax-column-media-only .parallax-column-media img,
.parallax-column-media .gallery-open,
.parallax-column-media .gallery-open img{
width:100% !important;
height:auto !important;
min-height:0 !important;
object-fit:contain !important;
}
.parallax-column-media .gallery-open{
display:block !important;
}
}
@media(max-width:1024px) and (orientation:landscape){
.parallax-columns{
grid-template-columns:1fr !important;
}
.parallax-column-media-only,
.parallax-column-media-only .parallax-column-inner,
.parallax-column-media-only .parallax-column-media,
.parallax-column-media-only .parallax-column-media img{
height:auto !important;
min-height:0 !important;
}
}
@media(max-width:620px){.parallax-container{min-height:var(--parallax-min-height-mobile,320px)}.parallax-content{padding:48px 16px;width:calc(100% - 24px)}.parallax-columns{grid-template-columns:1fr}}
/* Step 2154: Mobile Parallax-Texte erhalten genau einen seitlichen
Karten-Innenabstand. Die Desktop-Spaltenregel darf die mobile Breite
nicht erneut verengen; Textkarten behalten ihren Abstand zum Rahmen.
Reine Bildspalten behalten ihre bestehende abstandsfreie Darstellung. */
@media(max-width:620px), (max-width:1024px) and (max-height:500px) and (orientation:landscape){
.parallax-container > .parallax-content,
.parallax-container > .parallax-content.parallax-content-with-columns{
width:100%;
max-width:none;
padding-left:0;
padding-right:0;
}
.parallax-container > .parallax-content > :not(.parallax-columns){
margin-left:var(--card-pad,26px);
margin-right:var(--card-pad,26px);
max-width:none;
}
.parallax-container .parallax-column:not(.parallax-column-has-media){
padding-left:var(--card-pad,26px);
padding-right:var(--card-pad,26px);
}
}
/* Öffnungszeiten-Widget */
.opening-hours-widget{background:#fff;border:1px solid #dbe3ef;border-radius:24px;padding:var(--card-pad);box-shadow:var(--card-shadow);width:100%;max-width:none;box-sizing:border-box;container-type:inline-size}
.opening-hours-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:start;margin-bottom:22px}
.opening-hours-head h2{margin:0 0 8px;color:#0f172a;line-height:1.1;overflow-wrap:anywhere}
.opening-hours-head p{margin:0;color:#475569;line-height:1.65;overflow-wrap:anywhere}
.opening-hours-status{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 16px;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-weight:850;border:1px solid #bfdbfe;white-space:nowrap;max-width:100%;box-sizing:border-box}
.opening-hours-status.is-open{background:#dcfce7;color:#166534;border-color:#bbf7d0}
.opening-hours-status.is-closed{background:#fef2f2;color:#991b1b;border-color:#fecaca}
.opening-hours-list{display:grid;gap:10px;width:100%}
.opening-hours-row{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,auto) minmax(0,1.2fr);gap:14px;align-items:center;border:1px solid #e2e8f0;background:#f8fafc;border-radius:16px;padding:14px 16px;color:#334155;min-width:0;box-sizing:border-box}
.opening-hours-row strong{color:#0f172a;min-width:0}
.opening-hours-row.is-today{border-color:#bfdbfe;background:#eff6ff;box-shadow:0 10px 28px rgba(37,99,235,.08)}
.opening-hours-times{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
.opening-hours-time{display:inline-flex;align-items:center;border-radius:999px;padding:5px 10px;background:#ffffff;border:1px solid #dbeafe;color:#1e293b;font-weight:750;white-space:nowrap;max-width:100%;box-sizing:border-box}
.opening-hours-time.is-closed{background:#f1f5f9;border-color:#e2e8f0;color:#64748b}
.opening-hours-note{color:#64748b;font-size:.95rem;min-width:0;overflow-wrap:anywhere}
/* Step 1627: Optionale kompakte Darstellung mit flachen Zeilen. Die bisherige
Kartenansicht bleibt unverändert der Standard für bestehende Projekte. */
.opening-hours-widget.is-compact .opening-hours-head{margin-bottom:18px}
.opening-hours-widget.is-compact .opening-hours-list{display:block;border-top:1px solid #e2e8f0}
.opening-hours-widget.is-compact .opening-hours-row{grid-template-columns:minmax(105px,.75fr) minmax(0,1.7fr) minmax(0,1fr);gap:12px;border:0;border-bottom:1px solid #e2e8f0;border-radius:0;background:transparent;padding:10px 2px;box-shadow:none}
.opening-hours-widget.is-compact .opening-hours-row.is-today{margin:0 -10px;padding-left:12px;padding-right:12px;border-radius:10px;background:#eff6ff;border-bottom-color:transparent}
.opening-hours-widget.is-compact .opening-hours-time{border:0;background:transparent;padding:0;border-radius:0}
.opening-hours-widget.is-compact .opening-hours-time + .opening-hours-time::before{content:" · ";white-space:pre;color:#64748b}
.opening-hours-widget.is-compact .opening-hours-time.is-closed{color:#64748b}
@container (max-width:720px){.opening-hours-head{grid-template-columns:1fr;gap:12px;margin-bottom:18px}.opening-hours-status{justify-self:start;white-space:normal;text-align:center;min-height:38px;padding:8px 14px}.opening-hours-row{grid-template-columns:minmax(0,1fr);gap:8px;padding:12px 14px}.opening-hours-times{gap:6px}}
@container (max-width:420px){.opening-hours-widget{border-radius:18px}.opening-hours-head h2{font-size:clamp(1.45rem, 8cqw, 2rem)}.opening-hours-row{padding:11px 12px}.opening-hours-time{padding:4px 8px;font-size:.94rem}}
@media(max-width:760px){.opening-hours-head{grid-template-columns:1fr}.opening-hours-status{justify-self:start;white-space:normal}.opening-hours-row{grid-template-columns:1fr;gap:8px}.opening-hours-times{gap:5px}}
@container (max-width:520px){.opening-hours-widget.is-compact .opening-hours-row{grid-template-columns:minmax(88px,.8fr) minmax(0,1.5fr);gap:10px}.opening-hours-widget.is-compact .opening-hours-note{grid-column:2}}
@media(max-width:760px){.opening-hours-widget.is-compact .opening-hours-row{grid-template-columns:minmax(88px,.8fr) minmax(0,1.5fr);gap:10px}.opening-hours-widget.is-compact .opening-hours-note{grid-column:2}}
/* FAQ-Seite: Widget-Ausgabe optisch identisch zur MASTER-Version */
.faq-widget-section { padding:15px 0 !important; }
.faq-widget-section:first-child { padding-top:42px !important; }
.faq-widget-section:last-child { padding-bottom:42px !important; }
.faq-widget-section .widget-row { display:block !important; }
.faq-widget-section .widget-slot { display:block !important; }
.faq-intro{background:linear-gradient(135deg,#ffffff 0%,#eef4ff 100%);border:1px solid #dbeafe;border-radius:24px;padding:34px;box-shadow:0 18px 50px rgba(15,23,42,.08)}
.faq-intro .eyebrow{font-size:.86rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin:0 0 10px;color:#2563eb}
.faq-intro h2{margin:0 0 10px;font-size:clamp(28px,4vw,42px);line-height:1.08;color:#0f172a}
.faq-intro p{max-width:760px;color:#475569;font-size:18px;line-height:var(--cms-text-line-height);margin:0}
.faq-group{background:#ffffff;border:1px solid #e2e8f0;border-radius:24px;padding:26px;box-shadow:0 14px 40px rgba(15,23,42,.06)}
.faq-group h2{margin:0 0 24px;color:#0f172a;font-size:24px}
.faq-list{display:grid;gap:12px}
.faq-item{border:1px solid #dbeafe;border-radius:16px;background:#f8fafc;overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;padding:18px 20px;font-weight:700;color:#0f172a;display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq-widget-root.has-question-active-color .faq-item summary{transition:background-color .18s ease,color .18s ease}
.faq-widget-root.has-question-active-color .faq-item summary:hover,
.faq-widget-root.has-question-active-color .faq-item[open] summary{background-color:var(--faq-question-active-color);color:var(--faq-question-active-text)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:22px;color:var(--primary);line-height:1;font-weight:700}
.faq-widget-root.has-question-active-color .faq-item summary:hover::after,
.faq-widget-root.has-question-active-color .faq-item[open] summary::after{color:var(--faq-question-active-text)}
.faq-item[open] summary::after{content:'–'}
/* Step 1474: Geöffnete FAQ-Antworten erhalten oben denselben kleinen
Innenabstand wie unten. */
.faq-item p{margin:0;padding:18px 20px;color:#475569;line-height:var(--cms-text-line-height)}
.faq-item .faq-answer-paragraph{display:block}
.faq-item .faq-answer-paragraph + .faq-answer-paragraph{margin-top:10px}
/* Step 509: FAQ-Hintergrund einheitlich in Website- und Widget-Vorschau.
Bei bewusst gesetztem Widget-Hintergrund bildet die FAQ-Wurzel die äußere
Fläche. Intro, Gruppen und Fragekarten übernehmen diese Fläche, statt eigene
feste Weiß-/Grauwerte darüberzulegen. */
.cms-widget-surface .faq-widget-root{
background:transparent !important;
}
.cms-widget-surface .faq-intro,
.cms-widget-surface .faq-group{
background:transparent !important;
border-color:transparent !important;
box-shadow:none !important;
}
.cms-widget-surface .faq-item{
background:transparent !important;
border-color:color-mix(in srgb, var(--cms-widget-text, #0f172a) 22%, transparent) !important;
box-shadow:none !important;
}
.cms-widget-surface .faq-item summary,
.cms-widget-surface .faq-item p,
.cms-widget-surface .faq-item summary::after{
color:var(--cms-widget-text, #0f172a) !important;
}
/* Step 957/958: Die allgemeine FAQ-Textfarbe aus Step 509 darf den expliziten
Hover-/Aktiv-Kontrast nicht uebersteuern. In der Website liegt
.cms-widget-surface als aeussere Flaeche vor der FAQ-Wurzel. In der separaten
Widget-Vorschau wird dieselbe Klasse direkt auf .faq-widget-root gesetzt.
Deshalb werden bewusst beide bestehenden Strukturvarianten abgedeckt. */
.cms-widget-surface .faq-widget-root.has-question-active-color .faq-item summary:hover,
.cms-widget-surface .faq-widget-root.has-question-active-color .faq-item[open] summary,
.cms-widget-surface.faq-widget-root.has-question-active-color .faq-item summary:hover,
.cms-widget-surface.faq-widget-root.has-question-active-color .faq-item[open] summary{
color:var(--faq-question-active-text) !important;
}
.cms-widget-surface .faq-widget-root.has-question-active-color .faq-item summary:hover::after,
.cms-widget-surface .faq-widget-root.has-question-active-color .faq-item[open] summary::after,
.cms-widget-surface.faq-widget-root.has-question-active-color .faq-item summary:hover::after,
.cms-widget-surface.faq-widget-root.has-question-active-color .faq-item[open] summary::after{
color:var(--faq-question-active-text) !important;
}
@media(max-width:760px){.faq-intro,.faq-group{padding:24px}.faq-item summary{align-items:flex-start}}
/* Über-uns-Seite: echte Widget-Ausgabe im MASTER-Layout */
.about-widget-section { padding:15px 0 !important; }
.about-widget-section:first-child { padding-top:42px !important; }
.about-widget-section:last-child { padding-bottom:42px !important; }
.about-widget-section .widget-row { gap:24px !important; align-items:stretch !important; }
.about-widget-section .widget-slot { display:flex !important; align-items:stretch !important; align-self:stretch !important; height:auto !important; }
.about-widget-section .widget-slot > * { flex:1 1 auto !important; }
.about-widget-section .widget-slot > .about-panel { height:100% !important; min-height:100% !important; }
.about-intro{background:linear-gradient(135deg,#ffffff 0%,#eef4ff 100%);border:1px solid #dbeafe;border-radius:24px;padding:34px;box-shadow:0 18px 50px rgba(15,23,42,.08)}
.about-intro .eyebrow,.about-cta .eyebrow{font-size:.86rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin:0 0 10px;color:#2563eb}
.about-intro h2{margin:.1rem 0 .7rem;font-size:clamp(2rem,4vw,3rem);letter-spacing:-.045em;color:#0f172a;line-height:1.08}
.about-intro p{max-width:850px;color:#475569;font-size:1.08rem;line-height:var(--cms-text-line-height);margin:0}
.about-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;width:100%}
.about-card{background:#fff;border:1px solid #dbe3ef;border-radius:22px;padding:24px;box-shadow:0 14px 40px rgba(15,23,42,.07)}
.about-card .icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#dbeafe;color:#1d4ed8;font-size:24px;margin-bottom:14px}
.about-card h3{margin:0 0 8px;color:#0f172a;font-size:1.15rem}
.about-card p{margin:0;color:#475569;line-height:var(--cms-text-line-height)}
.about-panel{background:#fff;border:1px solid #dbe3ef;border-radius:24px;padding:30px;box-shadow:0 18px 45px rgba(15,23,42,.08);width:100%;height:100%;box-sizing:border-box}
.about-panel h2{margin:0 0 12px;color:#0f172a;font-size:clamp(1.6rem,3vw,2.2rem)}
.about-panel p{color:#475569;line-height:var(--cms-text-line-height);margin:0 0 14px}
.about-panel p:last-child{margin-bottom:0}
.about-list{display:grid;gap:12px;margin:18px 0 0;padding:0;list-style:none}
.about-list li{display:flex;gap:10px;align-items:flex-start;color:#334155;line-height:var(--cms-text-line-height)}
.about-list li::before{content:'✓';color:#2563eb;font-weight:900}
.about-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
.about-compare-box{background:#ffffff;border:1px solid #dbe3ef;border-radius:18px;padding:20px;box-shadow:0 10px 28px rgba(15,23,42,.05)}
.about-compare-box strong{display:block;margin-bottom:10px;color:#0f172a}
.about-compare-box p{font-size:.98rem;margin:0;color:#475569;line-height:var(--cms-text-line-height)}
.about-cta{background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%) !important;color:#ffffff !important;border-radius:26px !important;padding:34px !important;display:flex !important;gap:24px !important;align-items:center !important;justify-content:space-between !important;box-shadow:0 24px 70px rgba(37,99,235,.24) !important;width:100%}
.about-cta h2{color:#fff !important;margin:.1rem 0 .6rem !important;font-size:clamp(1.6rem,3vw,2.4rem)}
.about-cta p{color:#dbeafe !important;margin:0 !important;line-height:var(--cms-text-line-height) !important}
.about-cta .eyebrow{display:inline-flex !important;width:max-content !important;background:rgba(255,255,255,.12) !important;color:#bfdbfe !important;border:1px solid rgba(255,255,255,.30) !important;border-radius:999px !important;padding:7px 12px !important;font-size:.78rem !important}
.about-cta .hero-actions{display:grid !important;gap:12px !important;min-width:260px !important}
.about-cta .btn,.about-cta .btn-secondary{min-height:52px !important;height:auto !important;padding:14px 22px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;background:#ffffff !important;color:#1d4ed8 !important;border:2px solid #ffffff !important;border-radius:var(--button-radius) !important;font-weight:800 !important;text-decoration:none !important;box-shadow:0 14px 28px rgba(15,23,42,.12) !important}
.about-cta .btn:hover,.about-cta .btn-secondary:hover{background:#eff6ff !important;color:#1d4ed8 !important;transform:translateY(-2px) !important;box-shadow:0 18px 34px rgba(15,23,42,.18) !important}
@media(max-width:900px){.about-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.about-compare{grid-template-columns:1fr}.about-cta{display:block !important}.about-cta .hero-actions{margin-top:20px;min-width:0 !important}}
@media(max-width:620px){.about-intro,.about-panel,.about-card,.about-cta{padding:24px}.about-grid{grid-template-columns:1fr}.about-cta .hero-actions{display:grid;gap:10px}.about-cta .btn{width:100%;text-align:center}}
.contact-box { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-top:20px; align-items:start; }
.contact-line { border:1px solid var(--line); border-radius:16px; padding:16px; background:#f8fafc; min-height:0; }
.contact-line:empty { display:none; }
.single-image-widget { margin:0; }
.single-image-widget img { width:100%; display:block; border-radius:var(--card-radius); border:1px solid var(--line); box-shadow:var(--card-shadow); object-fit:cover; }
.single-image-widget figcaption { margin-top:10px; color:#64748b; font-size:.96rem; line-height:1.45; }
.single-image-widget a { display:block; text-decoration:none; }
/* Bild + Text: Website-Ausgabe identisch zur Widget-Vorschau.
Wichtig: Button bleibt im Textbereich unter dem Text; Bildposition steuert nur Bild/Text-Spalten. */
.image-text {
gap:28px !important;
align-items:start !important;
}
.image-text > h2 {
margin:0 0 6px 0 !important;
}
.image-text .image-text-media img,
.gallery img {
width:100%;
max-width:100%;
display:block;
border-radius:var(--card-radius);
border:1px solid var(--line);
box-shadow:var(--card-shadow);
object-fit:cover;
}
.image-text .image-text-content {
min-width:0;
}
.image-text .image-text-content > .image-text-btn {
width:100% !important;
max-width:none !important;
display:flex !important;
justify-content:center !important;
align-self:stretch !important;
margin-top:30px !important;
box-sizing:border-box !important;
}
.image-text-pos-right,
.image-text-pos-left,
.widget-row.equal-height .widget-slot > .card.image-text-pos-right,
.widget-row.equal-height .widget-slot > .card.image-text-pos-left {
display:grid !important;
grid-template-columns:minmax(0,1fr) minmax(220px,44%) !important;
gap:28px !important;
}
/* Bild + Text: nebenstehende Varianten übernehmen das Raster des Parallax-Containers. */
@media(min-width:1025px) {
.image-text.image-text-pos-right,
.image-text.image-text-pos-left,
.widget-row.equal-height .widget-slot > .card.image-text-pos-right,
.widget-row.equal-height .widget-slot > .card.image-text-pos-left {
padding:47px !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:22px !important;
}
}
.image-text-pos-right-wrap,
.image-text-pos-left-wrap,
.widget-row.equal-height .widget-slot > .card.image-text-pos-right-wrap,
.widget-row.equal-height .widget-slot > .card.image-text-pos-left-wrap {
display:block !important;
}
.image-text-pos-right-wrap > h2,
.image-text-pos-left-wrap > h2 {
margin:0 0 16px 0 !important;
}
.image-text-pos-right-wrap .image-text-content,
.image-text-pos-left-wrap .image-text-content {
display:block !important;
line-height:var(--cms-text-line-height);
}
.image-text-pos-right-wrap .image-text-media,
.image-text-pos-left-wrap .image-text-media {
width:min(44%, 360px) !important;
max-width:100% !important;
margin-bottom:18px !important;
}
.image-text-pos-right-wrap .image-text-media {
float:right !important;
margin-left:28px !important;
}
.image-text-pos-left-wrap .image-text-media {
float:left !important;
margin-right:28px !important;
}
.image-text-pos-right-wrap::after,
.image-text-pos-left-wrap::after,
.image-text-pos-right-wrap .image-text-content::after,
.image-text-pos-left-wrap .image-text-content::after {
content:"";
display:block;
clear:both;
}
.image-text-pos-right-wrap .image-text-btn,
.image-text-pos-left-wrap .image-text-btn {
clear:both !important;
}
.image-text-pos-right > h2,
.image-text-pos-left > h2 {
grid-column:1 / -1 !important;
grid-row:1 !important;
}
.image-text-pos-right > .image-text-content { grid-column:1 !important; grid-row:2 !important; }
.image-text-pos-right > .image-text-media { grid-column:2 !important; grid-row:2 !important; }
.image-text-pos-left > .image-text-media { grid-column:1 !important; grid-row:2 !important; }
.image-text-pos-left > .image-text-content { grid-column:2 !important; grid-row:2 !important; }
.image-text-pos-top,
.image-text-pos-bottom,
.widget-row.equal-height .widget-slot > .card.image-text-pos-top,
.widget-row.equal-height .widget-slot > .card.image-text-pos-bottom {
display:flex !important;
flex-direction:column !important;
gap:18px !important;
}
.image-text-pos-top > h2 { order:1 !important; }
.image-text-pos-top > .image-text-media { order:2 !important; }
.image-text-pos-top > .image-text-content { order:3 !important; }
.image-text-pos-bottom > h2 { order:1 !important; }
.image-text-pos-bottom > .image-text-content { order:2 !important; }
.image-text-pos-bottom > .image-text-media { order:3 !important; }
@media (max-width:640px) {
.image-text-pos-right,
.image-text-pos-left,
.widget-row.equal-height .widget-slot > .card.image-text-pos-right,
.widget-row.equal-height .widget-slot > .card.image-text-pos-left {
display:flex !important;
flex-direction:column !important;
}
.image-text-pos-right-wrap .image-text-media,
.image-text-pos-left-wrap .image-text-media {
float:none !important;
width:100% !important;
margin:0 0 18px 0 !important;
}
.image-text-pos-right > h2,
.image-text-pos-left > h2 { order:1 !important; }
.image-text-pos-right > .image-text-content { order:2 !important; }
.image-text-pos-right > .image-text-media { order:3 !important; }
.image-text-pos-left > .image-text-media { order:2 !important; }
.image-text-pos-left > .image-text-content { order:3 !important; }
}
/* Bild + Text: echte Umlauf-Varianten, getrennt vom Zwei-Spalten-Layout. */
.image-text-flow,
.widget-row.equal-height .widget-slot > .card.image-text-flow {
display:block !important;
}
.image-text-flow > h2 {
margin:0 0 16px 0 !important;
}
.image-text-flow-content {
display:block !important;
line-height:var(--cms-text-line-height) !important;
}
.image-text-flow-media {
display:block !important;
width:min(44%, 360px) !important;
max-width:100% !important;
margin-top:0 !important;
margin-bottom:18px !important;
}
.image-text-flow-media img {
width:100% !important;
max-width:100% !important;
display:block !important;
border-radius:var(--card-radius) !important;
border:1px solid var(--line) !important;
box-shadow:var(--card-shadow) !important;
object-fit:cover !important;
}
.image-text-flow-right .image-text-flow-media {
float:right !important;
margin-left:28px !important;
}
.image-text-flow-left .image-text-flow-media {
float:left !important;
margin-right:28px !important;
}
.image-text-flow-content::after,
.image-text-flow::after {
content:"";
display:block;
clear:both;
}
.image-text-flow-actions {
clear:both !important;
margin-top:22px !important;
}
.image-text-flow-actions .image-text-btn {
width:100% !important;
max-width:none !important;
display:flex !important;
justify-content:center !important;
box-sizing:border-box !important;
}
@media (max-width:640px) {
.image-text-flow-media,
.image-text-flow-right .image-text-flow-media,
.image-text-flow-left .image-text-flow-media {
float:none !important;
width:100% !important;
margin:0 0 18px 0 !important;
}
}
.notice { border-left:6px solid var(--primary); background:linear-gradient(135deg,#ffffff,#f8fbff); }
.notice .eyebrow { display:inline-flex; width:max-content; margin:0 0 10px; padding:6px 10px; border-radius:999px; background:#eff6ff; color:var(--primary); font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.notice-actions { display:flex; flex-wrap:wrap; gap:12px; margin:18px 0 0; }
.notice-cta{background:var(--cms-widget-bg,var(--primary)) !important;color:#ffffff !important;border-radius:26px !important;padding:34px !important;display:flex !important;gap:24px !important;align-items:center !important;justify-content:space-between !important;box-shadow:0 24px 70px color-mix(in srgb,var(--primary) 24%,transparent) !important;width:100%}
.notice-cta h2{color:#fff !important;margin:.1rem 0 .6rem !important;font-size:clamp(1.6rem,3vw,2.4rem)}
.notice-cta p{color:rgba(255,255,255,.88) !important;margin:0 !important;line-height:var(--cms-text-line-height) !important}
.notice-cta .eyebrow{display:inline-flex !important;width:max-content !important;background:rgba(255,255,255,.14) !important;color:rgba(255,255,255,.82) !important;border:1px solid rgba(255,255,255,.30) !important;border-radius:999px !important;padding:7px 12px !important;font-size:.78rem !important;font-weight:800 !important;text-transform:uppercase !important;letter-spacing:.08em !important;margin:0 0 12px !important}
.notice-cta .hero-actions{display:grid !important;gap:12px !important;min-width:260px !important}
.notice-cta .btn,.notice-cta .btn-secondary{min-height:52px !important;height:auto !important;padding:14px 22px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;background:#ffffff !important;color:var(--primary) !important;border:2px solid #ffffff !important;border-radius:var(--button-radius) !important;font-weight:800 !important;text-decoration:none !important;box-shadow:0 14px 28px rgba(15,23,42,.12) !important}
.notice-cta .btn:hover,.notice-cta .btn-secondary:hover{background:rgba(255,255,255,.92) !important;color:var(--primary) !important;transform:translateY(-2px) !important;box-shadow:0 18px 34px rgba(15,23,42,.18) !important}
@media(max-width:900px){.notice-cta{display:block !important}.notice-cta .hero-actions{margin-top:20px;min-width:0 !important}}
@media(max-width:620px){.notice-cta{padding:24px !important}.notice-cta .hero-actions{display:grid;gap:10px}.notice-cta .btn{width:100%;text-align:center}}
.comparison-table { width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:18px; border:1px solid #e2e8f0; }
.comparison-table th,.comparison-table td { padding:15px 18px; text-align:left; border-bottom:1px solid #e2e8f0; }
.comparison-table th { background:#f8fafc; color:#0f172a; }
.comparison-table tr:last-child td { border-bottom:0; }
.comparison-table td:nth-child(2),.comparison-table td:nth-child(3) { font-weight:700; }
@media(max-width:820px) { .comparison-table { font-size:.92rem; } .comparison-table th,.comparison-table td { padding:12px 10px; } }
.faq-block .faq-item { border-top:1px solid var(--line); padding:17px 0; }
.faq-block .faq-item:first-child { border-top:0; }
.faq-block .faq-item strong { display:block; margin-bottom:6px; color:#0b1220; }
.tabs-accordion { border:1px solid var(--line); border-radius:var(--card-radius); background:var(--card); overflow:hidden; box-shadow:var(--card-shadow); }
.tabs-accordion-tabs { display:flex; flex-wrap:wrap; gap:0; padding:0; border-bottom:none; background:linear-gradient(180deg, rgba(248,250,252,.95), rgba(255,255,255,.95)); }
.tabs-accordion-tab { margin:0 0 -1px 0; border:1px solid var(--line); border-left:0; border-bottom-color:var(--line); background:#f8fafc; color:var(--text); border-radius:10px 10px 0 0; padding:12px 20px; cursor:pointer; font-weight:800; }
.tabs-accordion-tab:first-child { border-left:1px solid var(--line); }
.tabs-accordion-tab.is-active { background:var(--card); border-color:var(--line); border-bottom-color:var(--card); color:var(--primary); }
.tabs-accordion-tab:hover { background:#fff; }
.tabs-accordion-panels { padding:24px; }
.tabs-accordion-panel[hidden] { display:none; }
.tabs-accordion-panel > *:first-child { margin-top:0; }
.tabs-accordion-panel > *:last-child { margin-bottom:0; }
.tabs-accordion-panel img, .tabs-accordion-detail-body img { max-width:100%; height:auto; }
.tab-content-image { width:fit-content; max-width:100%; margin:16px 0; }
.tab-content-image img { width:auto; max-width:100%; height:auto; border-radius:10px; display:block; box-shadow:0 12px 28px rgba(15,23,42,.12); }
.tab-content-image.align-left { margin-left:0; margin-right:auto; }
.tab-content-image.align-center { margin-left:auto; margin-right:auto; }
.tab-content-image.align-right { margin-left:auto; margin-right:0; }
.tab-content-image.w25 { max-width:25%; }
.tab-content-image.w50 { max-width:50%; }
.tab-content-image.w75 { max-width:75%; }
.tab-content-image.w100 { max-width:100%; }
.tab-content-image .gallery-open { display:block; padding:0; border:0; background:transparent; cursor:pointer; }
@media (max-width:720px) { .tab-content-image.w25, .tab-content-image.w50, .tab-content-image.w75 { max-width:100%; } }
.tabs-accordion-mobile { display:none; }
.tabs-accordion-detail { border-top:1px solid var(--line); }
.tabs-accordion-detail:first-child { border-top:0; }
.tabs-accordion-detail summary { cursor:pointer; padding:16px 18px; font-weight:850; list-style:none; }
.tabs-accordion-detail summary::-webkit-details-marker { display:none; }
.tabs-accordion-detail summary::after { content:'+'; float:right; font-weight:900; color:var(--primary); }
.tabs-accordion-detail[open] summary::after { content:'–'; }
.tabs-accordion-detail-body { padding:0 18px 18px; color:var(--text); }
.tabs-accordion.is-desktop-accordion .tabs-accordion-tabs, .tabs-accordion.is-desktop-accordion .tabs-accordion-panels { display:none; }
.tabs-accordion.is-desktop-accordion .tabs-accordion-mobile { display:block; }
@media (max-width:720px) { .tabs-accordion-tabs,.tabs-accordion-panels { display:none !important; } .tabs-accordion-mobile { display:block !important; } }
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.gallery-item { margin:0; }
.gallery-open { display:block; width:100%; padding:0; border:0; background:transparent; cursor:pointer; text-align:left; }
.gallery-item img { aspect-ratio:4/3; object-fit:cover; transition:transform .2s ease, box-shadow .2s ease; }
.gallery-item img:hover { transform:translateY(-2px); box-shadow:0 20px 42px rgba(15,23,42,.16); }
.gallery-item figcaption { color:var(--muted); font-size:.92rem; margin-top:8px; padding:0 4px; }
.slider { position:relative; overflow:hidden; border-radius:var(--card-radius); box-shadow:var(--card-shadow); background:linear-gradient(135deg,#0f172a,#1e293b); }
.slider-track { display:flex; transition:transform .3s ease; }
.slide { min-width:100%; height:clamp(280px, 42vw, 520px); position:relative; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#0f172a,#1e293b); }
.slide img { width:100%; height:100%; object-fit:cover; display:block; }
.slider-fit-cover .slide img { object-fit:cover; }
.slider-fit-contain { background:transparent; box-shadow:none; }
.slider-fit-contain .slide { background:transparent; }
.slider-fit-contain .slide img { object-fit:contain; }
.internal-area-placeholder { background:#94a3b8; color:#fff; border:1px solid rgba(255,255,255,.8); padding:18px 20px; border-radius:4px; font-weight:700; text-align:left; }
.internal-area-live-link { display:none; }
.cms-live-site .internal-area-placeholder { display:none; }
.cms-live-site .internal-area-live-link { display:block; }
.internal-area-login { width:100%; max-width:none; margin:0; padding:30px; background:linear-gradient(145deg,#fff,color-mix(in srgb,var(--primary) 4%,#fff)); border:1px solid #dbe3ef; border-radius:20px; box-shadow:0 18px 48px rgba(15,23,42,.11); box-sizing:border-box; }
.internal-area-runtime { width:100%; box-sizing:border-box; }
html.cms-internal-area-pending body { opacity:0; }
.internal-area-actions { margin-top:20px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.internal-area-actions a { font-weight:800; }
.internal-area-article + .internal-area-article { margin-top:24px; }
.internal-area-article-title { margin:0 0 12px; overflow-wrap:anywhere; }
[data-article-content-error][hidden] { display:none !important; }
.internal-area-article-tools > span { overflow-wrap:anywhere; min-width:0; }
.internal-area-article-heading-input { display:block; box-sizing:border-box; width:100%; min-width:0; padding:12px 14px; margin:0 0 16px; border:1px solid #cbd5e1; border-radius:9px; background:#fff; color:#0f172a; font:inherit; }
.internal-area-article-tools { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 12px; padding:10px; border:1px solid #dbe3ef; border-radius:10px; background:#f8fafc; color:#0f172a; }
.internal-area-article-tools > span { font-weight:700; margin-right:auto; }
.internal-area-article-tools form, .internal-area-actions form { margin:0; }
.internal-area-article-tools .btn { min-height:40px; padding:8px 12px; font-size:14px; }
.internal-area-article-tools button:disabled { opacity:.4; cursor:default; }
@media(max-width:620px) { .internal-area-article-tools > span { flex-basis:100%; } .internal-area-article-tools form { flex:1 1 auto; } .internal-area-article-tools .btn { width:100%; min-height:44px; } }
.internal-area-edit-notice { margin:14px 0 18px; padding:12px 14px; border-radius:12px; background:#eff6ff; border:1px solid #bfdbfe; color:#1e3a8a; font-weight:700; }
.internal-area-edit-form { margin:18px 0 22px; padding:16px; border-radius:14px; background:#f8fafc; border:1px solid #dbe3ef; }
.internal-area-edit-form label { display:block; margin:0 0 8px; font-weight:800; }
.internal-area-edit-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 10px; padding:10px; border:1px solid #dbe3ef; border-radius:12px; background:#fff; }
.internal-area-edit-toolbar button, .internal-area-edit-toolbar select, .internal-area-color-tool { box-sizing:border-box; height:34px; min-height:34px; border:1px solid #cbd5e1; border-radius:9px; background:#f8fafc; color:#0f172a; font:inherit; font-weight:800; padding:0 10px; cursor:pointer; line-height:34px; }
.internal-area-edit-toolbar button, .internal-area-color-tool { display:inline-flex; align-items:center; justify-content:center; }
.internal-area-edit-toolbar select { padding:0 28px 0 10px; }
.internal-area-edit-toolbar button:hover, .internal-area-edit-toolbar select:hover, .internal-area-color-tool:hover { background:#eef2ff; border-color:#93c5fd; }
.internal-area-color-tool { gap:6px; margin:0; vertical-align:middle; white-space:nowrap; }
.internal-area-color-tool input[type=color] { width:18px; height:18px; border:1px solid #94a3b8; border-radius:3px; padding:0; margin:0; background:transparent; cursor:pointer; display:inline-block; vertical-align:middle; -webkit-appearance:none; appearance:none; overflow:hidden; }
.internal-area-color-tool input[type=color]::-webkit-color-swatch-wrapper { padding:0; }
.internal-area-color-tool input[type=color]::-webkit-color-swatch { border:0; border-radius:2px; }
.internal-area-rich-editor { width:100%; min-height:320px; padding:14px 16px; border:1px solid #cbd5e1; border-radius:10px; font:16px/1.6 inherit; box-sizing:border-box; background:#fff; color:#0f172a; outline:none; overflow:auto; }
.internal-area-rich-editor:focus { border-color:#2563eb; box-shadow:0 0 0 4px rgba(37,99,235,.13); }
.internal-area-rich-editor ul, .internal-area-rich-editor ol { padding-left:1.4rem; }
.internal-area-picker { margin:10px 0 12px; padding:12px; border:1px solid #dbe3ef; border-radius:12px; background:#f8fafc; display:none; }
.internal-area-picker.active { display:block; }
.internal-area-picker strong { display:block; margin-bottom:8px; color:#0f172a; }
.internal-area-picker .picker-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px; }
.internal-area-picker select, .internal-area-picker input { min-height:34px; border:1px solid #cbd5e1; border-radius:9px; background:#fff; color:#0f172a; font:inherit; padding:6px 10px; min-width:220px; }
.internal-area-picker button { min-height:34px; border:1px solid #cbd5e1; border-radius:9px; background:#fff; color:#0f172a; font:inherit; font-weight:800; padding:6px 10px; cursor:pointer; }
.internal-area-special-chars { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.internal-area-special-chars button { min-width:34px; padding:6px 8px; }
.internal-area-rich-editor img { max-width:100%; height:auto; border-radius:10px; }
.internal-area-rich-editor table, .internal-area-card table { width:100%; border-collapse:collapse; margin:16px 0; background:#fff; }
.internal-area-rich-editor th, .internal-area-rich-editor td, .internal-area-card th, .internal-area-card td { border:1px solid #dbe3ef; padding:10px 12px; text-align:left; vertical-align:top; }
.internal-area-rich-editor th, .internal-area-card th { background:#f8fafc; color:#0f172a; font-weight:800; }
.internal-area-table-builder { overflow:auto; margin-top:10px; }
.internal-area-table-builder table { width:100%; border-collapse:collapse; background:#fff; }
.internal-area-table-builder td, .internal-area-table-builder th { border:1px solid #cbd5e1; padding:4px; }
.internal-area-table-builder input { width:100%; min-width:0 !important; box-sizing:border-box; border:0; padding:7px 8px; font:inherit; background:transparent; }
.internal-area-picker input.internal-area-small-input { min-width:72px; width:72px; }
.internal-area-picker label.inline-option { display:flex; align-items:center; gap:7px; font-weight:700; margin:0; }
.internal-area-picker label.inline-option input { min-width:0; width:auto; }
.internal-area-heading-row { display:flex; align-items:flex-start; gap:16px; }
.internal-area-heading-text { flex:1; min-width:0; overflow-wrap:anywhere; }
.internal-area-shortcut-login { flex:0 0 auto; margin:0; }
.internal-area-shortcut-login[hidden] { display:none !important; }
@media(max-width:480px) { .internal-area-heading-row { gap:8px; } .internal-area-shortcut-login .btn { padding:8px 10px; } }
.internal-area-card img { max-width:100%; height:auto; border-radius:10px; }
.internal-area-card figure { max-width:100%; margin:16px 0; }
.internal-area-card figure img { display:block; }
.internal-area-edit-form textarea { width:100%; min-height:320px; padding:12px 14px; border:1px solid #cbd5e1; border-radius:10px; font:14px/1.55 Consolas, "Courier New", monospace; resize:vertical; box-sizing:border-box; background:#fff; color:#0f172a; }
.internal-area-edit-form .btn { margin-top:12px; }
.internal-area-success { margin:14px 0 18px; padding:12px 14px; border-radius:12px; background:#ecfdf5; border:1px solid #bbf7d0; color:#166534; font-weight:700; }
.internal-area-login label { display:block; margin:0 0 8px; font-weight:800; }
.internal-area-login input[type=password] { width:100%; padding:12px 14px; border:1px solid #cbd5e1; border-radius:10px; font:inherit; }
.internal-area-login button { margin-top:14px; }
.internal-area-error { color:#b91c1c; font-weight:700; }
.internal-area-login-alert { display:grid; gap:3px; margin:16px 0 18px; padding:14px 16px; border:1px solid #fecaca; border-radius:12px; background:#fef2f2; color:#991b1b; }
.internal-area-login-alert strong { font-weight:800; }
.internal-area-login-countdown { margin-top:4px; font-weight:800; }
.internal-area-login input:disabled,.internal-area-login button:disabled { opacity:.58; cursor:not-allowed; }
.slide-caption { position:absolute; left:22px; right:22px; bottom:18px; width:max-content; max-width:calc(100% - 44px); background:rgba(15,23,42,.78); color:#fff; padding:10px 14px; border-radius:14px; }
.slider-prev,.slider-next { position:absolute; top:50%; transform:translateY(-50%); z-index:2; border:0; border-radius:999px; width:44px; height:44px; font-size:32px; cursor:pointer; }
.slider-prev { left:14px; } .slider-next { right:14px; }
.before-after-wrap { width:100%; max-width:900px; margin-left:auto; margin-right:auto; }
.before-after { --before-after-position:50%; position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; border-radius:var(--card-radius); box-shadow:var(--card-shadow); background:#e2e8f0; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.before-after-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.before-after-image-before { z-index:2; clip-path:inset(0 calc(100% - var(--before-after-position)) 0 0); }
.before-after-image-after { z-index:1; }
.before-after-label { position:absolute; z-index:4; top:14px; padding:7px 10px; border-radius:999px; background:rgba(15,23,42,.72); color:#fff; font-size:.88rem; font-weight:800; line-height:1; pointer-events:none; }
.before-after-label-before { left:14px; }
.before-after-label-after { right:14px; }
.before-after-divider { position:absolute; z-index:5; top:0; bottom:0; left:var(--before-after-position); width:3px; transform:translateX(-50%); background:#fff; box-shadow:0 0 0 1px rgba(15,23,42,.16),0 0 12px rgba(15,23,42,.28); pointer-events:none; }
.before-after-handle { position:absolute; z-index:6; top:50%; left:var(--before-after-position); width:48px; height:48px; transform:translate(-50%,-50%); border:3px solid #fff; border-radius:50%; background:rgba(15,23,42,.72); color:#fff; box-shadow:0 6px 18px rgba(15,23,42,.28); cursor:ew-resize; display:flex; align-items:center; justify-content:center; font:800 22px/1 Arial,sans-serif; padding:0; touch-action:none; }
.before-after-handle:focus-visible { outline:3px solid var(--primary); outline-offset:3px; }
.before-after-caption { margin-top:10px; color:var(--muted); font-size:.92rem; }
.before-after.is-dragging .before-after-handle { cursor:grabbing; }
@media (max-width:720px) { .before-after-label { top:10px; padding:6px 9px; font-size:.82rem; } .before-after-label-before { left:10px; } .before-after-label-after { right:10px; } .before-after-handle { width:44px; height:44px; } }
@media (max-width:820px) and (orientation:landscape) and (max-height:500px) {
.before-after-wrap { max-width:min(100%, calc((100vh - 52px) * 4 / 3)); max-width:min(100%, calc((100dvh - 52px) * 4 / 3)); }
}
.occupancy-calendar-widget { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); width:100%; max-width:none; box-sizing:border-box; }
.occupancy-calendar-widget h2 { margin-top:0; }
.occupancy-calendar-intro { color:var(--muted); margin-bottom:18px; }
.occupancy-calendar-months { display:grid; grid-template-columns:repeat(var(--occ-month-columns,1), minmax(0,1fr)); gap:22px; width:100%; }
.occupancy-calendar-month { min-width:0; width:100%; }
.occupancy-calendar-month-title { text-align:center; font-weight:800; margin:0 0 12px; }
.occupancy-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); width:100%; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.occupancy-calendar-dayname, .occupancy-calendar-day { min-height:38px; display:flex; align-items:center; justify-content:center; border-right:1px solid var(--line); border-bottom:none; font-weight:700; min-width:0; }
.occupancy-calendar-dayname:nth-child(7n), .occupancy-calendar-day:nth-child(7n) { border-right:0; }
.occupancy-calendar-dayname { background:#f8fafc; color:var(--muted); font-size:.88rem; }
.occupancy-calendar-day { background:var(--occ-free-bg,#85db24); color:var(--occ-free-text,#333333); }
.occupancy-calendar-day.is-empty { background:#f8fafc; color:#cbd5e1; }
.occupancy-calendar-day.is-occupied { background:var(--occ-busy-bg,#ffffff); color:var(--occ-busy-text,#333333); }
.occupancy-calendar-legend { display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-top:16px; color:var(--muted); font-weight:700; }
.occupancy-calendar-legend span { display:inline-flex; align-items:center; gap:7px; }
.occupancy-calendar-legend i { width:16px; height:16px; border:1px solid var(--line); display:inline-block; border-radius:3px; }
.occupancy-calendar-legend .free i { background:var(--occ-free-bg,#85db24); }
.occupancy-calendar-legend .busy i { background:var(--occ-busy-bg,#ffffff); }
.occupancy-calendar-details { margin:12px 0 0; padding:0; list-style:none; color:var(--muted); font-size:.9rem; }
.occupancy-calendar-details li { display:flex; justify-content:space-between; gap:10px; padding:5px 0; border-bottom:none; }
.occupancy-calendar-details li:last-child { border-bottom:0; }
.occupancy-calendar-details strong { color:var(--text); text-align:right; }
@media(max-width:700px) { .occupancy-calendar-months { grid-template-columns:1fr; } }
.event-calendar-widget { background:var(--event-widget-bg,#fff); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); width:100%; box-sizing:border-box; --event-accent:var(--accent); }
.event-calendar-widget.is-transparent { background:transparent !important; border-color:transparent !important; box-shadow:none !important; }
.event-calendar-widget.is-transparent .event-calendar-month,
.event-calendar-widget.is-transparent .event-calendar-month-title,
.event-calendar-widget.is-transparent .event-calendar-dayname,
.event-calendar-widget.is-transparent .event-calendar-day,
.event-calendar-widget.is-transparent .event-calendar-day.is-empty { background:transparent !important; }
.event-calendar-widget h2 { margin-top:0; }
.event-calendar-intro { color:var(--muted); margin-bottom:18px; }
.event-calendar-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin:0 0 18px; }
.event-calendar-controls { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.event-calendar-toolbar input,.event-calendar-toolbar select { min-height:40px; border:1px solid var(--line); border-radius:10px; padding:8px 11px; background:#fff; color:var(--text); }
.event-calendar-search { width:min(100%,320px); min-width:280px; }
.event-calendar-view-buttons { display:flex; flex-wrap:wrap; gap:6px; }
.event-calendar-view-buttons button { border:1px solid var(--line); background:#fff; color:var(--text); border-radius:9px; padding:9px 12px; cursor:pointer; font-weight:700; }
.event-calendar-view-buttons button.is-active { background:var(--event-accent); color:#fff; border-color:var(--event-accent); }
.event-calendar-view[hidden] { display:none !important; }
.event-calendar-month { border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.event-calendar-month-title { padding:14px 16px; font-size:1.1rem; font-weight:800; text-align:center; background:#f8fafc; border-bottom:none; }
.event-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.event-calendar-dayname { padding:9px 5px; text-align:center; font-size:.84rem; font-weight:800; color:var(--muted); background:#f8fafc; border-right:1px solid var(--line); border-bottom:none; }
.event-calendar-dayname:nth-child(7n) { border-right:0; }
.event-calendar-day { min-height:105px; padding:7px; border-right:1px solid var(--line); border-bottom:none; min-width:0; }
.event-calendar-day:nth-child(7n) { border-right:0; }
.event-calendar-day.is-empty { background:#fafafa; }
.event-calendar-date { display:block; font-weight:800; margin-bottom:6px; }
.event-calendar-lanes { display:grid; gap:4px; }
.event-calendar-lane { min-height:38px; min-width:0; }
.event-calendar-lane.is-placeholder { visibility:hidden; pointer-events:none; }
.event-calendar-chip { display:-webkit-box; width:100%; min-height:38px; border:0; border-left:4px solid var(--event-color,var(--event-accent)); background:color-mix(in srgb,var(--event-color,var(--event-accent)) 12%,white); border-radius:7px; padding:5px 6px; margin:0; text-align:left; color:var(--text); font-size:.78rem; font-weight:800; line-height:1.2; cursor:pointer; overflow:hidden; white-space:normal; overflow-wrap:anywhere; box-sizing:border-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.event-calendar-chip.is-multiday { border-left:0; border-radius:0; margin-left:-7px; margin-right:-7px; width:calc(100% + 14px); padding-left:10px; padding-right:10px; }
.event-calendar-chip.is-multiday.is-segment-start { margin-left:0; width:calc(100% + 7px); border-radius:7px 0 0 7px; }
.event-calendar-chip.is-multiday.is-segment-end { margin-right:0; width:calc(100% + 7px); border-radius:0 7px 7px 0; }
.event-calendar-chip.is-multiday.is-segment-start.is-segment-end { width:100%; margin-left:0; margin-right:0; border-radius:7px; }
.event-calendar-chip.is-multiday.is-week-start:not(.is-segment-start) { margin-left:0; width:calc(100% + 7px); }
.event-calendar-chip.is-multiday.is-week-end:not(.is-segment-end) { margin-right:0; width:calc(100% + 7px); }
.event-calendar-chip.is-multiday.is-month-start:not(.is-segment-start),.event-calendar-chip.is-multiday.is-month-end:not(.is-segment-end) { box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--event-color,var(--event-accent)) 35%,transparent); }
.event-calendar-list { display:grid; gap:13px; }
.event-calendar-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:15px; align-items:start; border:1px solid var(--line); border-left:5px solid var(--event-color,var(--event-accent)); border-radius:13px; padding:15px; background:#fff; }
.event-calendar-datebox { min-width:58px; text-align:center; border-radius:10px; background:#f8fafc; padding:7px 8px; }
.event-calendar-datebox strong { display:block; font-size:1.45rem; line-height:1; }
.event-calendar-datebox span { display:block; margin-top:4px; color:var(--muted); font-size:.78rem; font-weight:800; text-transform:uppercase; }
.event-calendar-card h3 { margin:0 0 6px; font-size:1.05rem; }
.event-calendar-meta { color:var(--muted); font-size:.9rem; display:flex; flex-wrap:wrap; gap:8px 14px; }
.event-calendar-category { display:inline-flex; margin-top:8px; border-radius:999px; padding:4px 8px; background:color-mix(in srgb,var(--event-color,var(--event-accent)) 12%,white); font-size:.78rem; font-weight:800; }
.event-calendar-details-button { border:1px solid var(--line); background:#fff; border-radius:9px; padding:8px 10px; cursor:pointer; font-weight:700; }
.event-calendar-dialog { width:min(680px,calc(100vw - 32px)); border:0; border-radius:16px; padding:0; box-shadow:0 24px 70px rgba(15,23,42,.28); }
.event-calendar-dialog::backdrop { background:rgba(15,23,42,.58); }
.event-calendar-dialog-inner { position:relative; padding:24px; max-height:calc(100vh - 64px); overflow-y:auto; box-sizing:border-box; }
.event-calendar-dialog-close { position:absolute; top:16px; right:16px; z-index:2; border:0; background:#f1f5f9; border-radius:999px; width:36px; height:36px; cursor:pointer; font-size:1.2rem; }
.event-calendar-dialog h3 { margin:0 42px 10px 0; }
.event-calendar-dialog-image { display:block; clear:both; width:min(100%,560px); height:auto; max-height:320px; object-fit:contain; border-radius:12px; margin:0 auto 18px; background:#f8fafc; }
.event-calendar-dialog-placeholder { width:min(100%,560px); height:220px; margin:0 auto 18px; border-radius:12px; box-sizing:border-box; }
.event-calendar-dialog-map { margin-top:18px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#f8fafc; }
.event-calendar-dialog-map iframe { display:block; width:100%; height:300px; border:0; }
.event-calendar-dialog-map-title { padding:10px 12px; font-weight:800; background:#f8fafc; border-bottom:none; }
.event-calendar-title-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 6px; }
.event-calendar-title-row h3 { margin:0; }
.event-calendar-dialog-title-row { padding-right:44px; margin-bottom:10px; }
.event-calendar-dialog-title-row h3 { margin:0; }
.event-calendar-badge { display:inline-flex; align-items:center; min-height:25px; padding:3px 9px; border-radius:999px; font-size:.76rem; font-weight:900; line-height:1; background:#eef2ff; color:#3730a3; white-space:nowrap; }
.event-calendar-badge.is-today { background:#dcfce7; color:#166534; }
.event-calendar-badge.is-new { background:#dbeafe; color:#1d4ed8; }
.event-calendar-badge.is-sold-out { background:#fef3c7; color:#92400e; }
.event-calendar-badge.is-registration-required { background:#e0f2fe; color:#075985; }
.event-calendar-badge.is-cancelled { background:#fee2e2; color:#b91c1c; }
.event-calendar-corner-badge { position:absolute; top:18px; right:-43px; z-index:3; min-width:132px; padding:8px 38px; transform:rotate(45deg); text-align:center; color:#fff; font-size:.74rem; font-weight:900; line-height:1; box-shadow:0 10px 24px rgba(15,23,42,.18); pointer-events:none; }
.event-calendar-corner-badge span { display:block; }
.event-calendar-corner-badge.is-today { background:#16a34a; }
.event-calendar-corner-badge.is-new { background:#2563eb; }
.event-calendar-corner-badge.is-sold-out { background:#d97706; }
.event-calendar-corner-badge.is-registration-required { background:#0284c7; min-width:154px; right:-48px; top:16px; padding-top:7px; padding-bottom:7px; line-height:1.08; }
.event-calendar-corner-badge.is-cancelled { background:#dc2626; }
.event-calendar-card.is-cancelled,.event-calendar-presentation-card.is-cancelled { opacity:.72; }
.event-calendar-card.is-cancelled h3,.event-calendar-presentation-card.is-cancelled h3 { text-decoration:line-through; }
.event-calendar-registration-hint { margin-top:14px; padding:12px 14px; border-left:4px solid #0284c7; border-radius:10px; background:#f0f9ff; color:#0c4a6e; display:grid; gap:4px; }
.event-calendar-registration-hint strong { font-weight:900; }
.event-calendar-registration-hint span { font-size:.9rem; line-height:1.45; }
.event-calendar-registration-card-hint { margin-top:10px; padding:9px 10px; border-left:3px solid #0284c7; border-radius:8px; background:#f0f9ff; color:#0c4a6e; display:grid; gap:2px; }
.event-calendar-registration-card-hint strong { font-size:.82rem; font-weight:900; }
.event-calendar-registration-card-hint span { font-size:.78rem; line-height:1.35; }
.event-calendar-countdown { margin-top:8px; padding:9px 11px; border-radius:10px; background:color-mix(in srgb,var(--event-color,var(--event-accent)) 10%,#f8fafc); color:var(--text); font-size:.86rem; font-weight:800; }
.event-calendar-dialog-share { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.event-calendar-dialog-share strong { display:block; margin-bottom:9px; }
.event-calendar-share-buttons { display:flex; flex-wrap:wrap; gap:8px; }
.event-calendar-share-button { display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:8px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--text); font-weight:800; text-decoration:none; cursor:pointer; }
.event-calendar-share-button:hover { border-color:var(--event-color,var(--event-accent)); color:var(--event-color,var(--event-accent)); }
.event-calendar-card[hidden], .event-calendar-chip[hidden], .event-calendar-presentation-card[hidden] { display:none !important; }
.event-calendar-grid-view { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.event-calendar-presentation-card { position:relative; border:1px solid var(--line); border-top:5px solid var(--event-color,var(--event-accent)); border-radius:14px; background:#fff; overflow:hidden; min-width:0; display:flex; flex-direction:column; }
.event-calendar-presentation-image { width:100%; height:180px; object-fit:contain; display:block; background:transparent; padding:12px; box-sizing:border-box; }
.event-calendar-image-placeholder { width:100%; height:180px; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:18px; text-align:center; color:var(--muted); background:linear-gradient(135deg,color-mix(in srgb,var(--event-color,var(--event-accent)) 12%,#f8fafc),#f8fafc 58%,color-mix(in srgb,var(--event-color,var(--event-accent)) 7%,#eef2f7)); }
.event-calendar-image-placeholder svg { width:58px; height:58px; stroke:var(--event-color,var(--event-accent)); opacity:.9; }
.event-calendar-image-placeholder strong { color:var(--text); font-size:.96rem; }
.event-calendar-image-placeholder span { font-size:.8rem; }
.event-calendar-presentation-body { padding:15px; display:flex; flex-direction:column; gap:9px; flex:1; }
.event-calendar-presentation-body h3 { margin:0; font-size:1.05rem; }
.event-calendar-presentation-description { color:var(--muted); font-size:.9rem; line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.event-calendar-presentation-card .event-calendar-details-button { margin-top:auto; width:100%; }
.event-calendar-slider-wrap,.event-calendar-carousel-wrap { position:relative; }
.event-calendar-slider { overflow:hidden; }
.event-calendar-slider .event-calendar-presentation-card { display:none; grid-template-columns:minmax(220px,34%) minmax(0,1fr); flex-direction:row; min-height:280px; }
.event-calendar-slider .event-calendar-presentation-card.is-current { display:grid; }
.event-calendar-slider .event-calendar-presentation-card.is-current.is-animating { animation-duration:.70s; animation-timing-function:cubic-bezier(.22,.68,.24,1); animation-fill-mode:both; }
.event-calendar-slider-animation-left .event-calendar-presentation-card.is-current.is-animating { animation-name:eventCalendarSlideFromLeft; }
.event-calendar-slider-animation-right .event-calendar-presentation-card.is-current.is-animating { animation-name:eventCalendarSlideFromRight; }
.event-calendar-slider-animation-top .event-calendar-presentation-card.is-current.is-animating { animation-name:eventCalendarSlideFromTop; }
.event-calendar-slider-animation-bottom .event-calendar-presentation-card.is-current.is-animating { animation-name:eventCalendarSlideFromBottom; }
.event-calendar-slider-animation-zoom .event-calendar-presentation-card.is-current.is-animating { animation-name:eventCalendarSoftZoom; }
@keyframes eventCalendarSlideFromLeft { from { opacity:0; transform:translateX(-54px); } to { opacity:1; transform:translateX(0); } }
@keyframes eventCalendarSlideFromRight { from { opacity:0; transform:translateX(54px); } to { opacity:1; transform:translateX(0); } }
@keyframes eventCalendarSlideFromTop { from { opacity:0; transform:translateY(-38px); } to { opacity:1; transform:translateY(0); } }
@keyframes eventCalendarSlideFromBottom { from { opacity:0; transform:translateY(38px); } to { opacity:1; transform:translateY(0); } }
@keyframes eventCalendarSoftZoom { from { opacity:0; transform:scale(.94); } to { opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion:reduce) { .event-calendar-slider .event-calendar-presentation-card.is-current.is-animating { animation:none !important; } }
.event-calendar-slider .event-calendar-presentation-image { width:100%; height:280px; max-height:280px; object-fit:contain; align-self:center; padding:18px; box-sizing:border-box; }
.event-calendar-slider .event-calendar-image-placeholder { height:280px; max-height:280px; align-self:center; }
.event-calendar-nav { display:flex; justify-content:center; align-items:center; gap:10px; margin-top:14px; }
.event-calendar-nav button { border:1px solid var(--line); background:#fff; border-radius:999px; min-width:42px; height:42px; cursor:pointer; font-size:1.1rem; font-weight:800; }
.event-calendar-nav button:hover { border-color:var(--event-accent); color:var(--event-accent); }
.event-calendar-slider-status { color:var(--muted); font-size:.9rem; min-width:64px; text-align:center; }
.event-calendar-carousel { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 48px)/4); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; scroll-behavior:smooth; padding:2px; }
.event-calendar-carousel::-webkit-scrollbar { display:none; }
.event-calendar-carousel .event-calendar-presentation-card { scroll-snap-align:start; }
.event-calendar-empty { padding:24px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:12px; }
.event-calendar-list-media,.event-calendar-modern-date { display:none; }
.event-calendar-presentation-media { position:relative; min-width:0; }
.event-calendar-widget.is-modern .event-calendar-card { position:relative; grid-template-columns:minmax(180px,28%) minmax(0,1fr); grid-template-rows:auto auto; gap:0; min-height:0; padding:0; overflow:hidden; border:0; border-radius:22px; background:var(--event-color,var(--event-accent)); box-shadow:0 12px 28px rgba(15,23,42,.12); }
.event-calendar-widget.is-modern .event-calendar-card .event-calendar-datebox { display:none; }
.event-calendar-widget.is-modern .event-calendar-list-media { display:block; position:relative; grid-row:1 / span 2; min-height:0; align-self:stretch; background:transparent; overflow:hidden; }
.event-calendar-widget.is-modern .event-calendar-list-media .event-calendar-presentation-image,.event-calendar-widget.is-modern .event-calendar-list-media .event-calendar-image-placeholder { width:100%; height:100%; min-height:0; padding:0; object-fit:cover; }
.event-calendar-widget.is-modern .event-calendar-list-content { min-width:0; padding:22px 24px 14px; color:#fff; display:flex; flex-direction:column; gap:10px; }
.event-calendar-widget.is-modern .event-calendar-list-content .event-calendar-title-row { min-height:30px; }
.event-calendar-widget.is-modern .event-calendar-list-content .event-calendar-meta { min-height:24px; }
.event-calendar-widget.is-modern .event-calendar-list-extras { display:flex; flex-direction:column; gap:10px; min-height:0; margin-top:0; }
.event-calendar-widget.is-modern .event-calendar-list-content h3,.event-calendar-widget.is-modern .event-calendar-list-content .event-calendar-meta,.event-calendar-widget.is-modern .event-calendar-list-content .event-calendar-presentation-description { color:#fff; }
.event-calendar-widget.is-modern .event-calendar-list-content .event-calendar-category { order:-1; margin:0; padding:0; border-radius:0; background:transparent; color:rgba(255,255,255,.82); text-transform:uppercase; letter-spacing:.06em; }
.event-calendar-widget.is-modern .event-calendar-card > .event-calendar-details-button { grid-column:2; grid-row:2; align-self:end; margin:0 24px 20px; border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.12); color:#fff; }
.event-calendar-widget.is-modern .event-calendar-card > .event-calendar-details-button:hover { background:#fff; color:var(--event-color,var(--event-accent)); }
.event-calendar-widget.is-modern .event-calendar-presentation-card { border:0; border-radius:22px; background:var(--event-color,var(--event-accent)); box-shadow:0 12px 28px rgba(15,23,42,.12); }
.event-calendar-widget.is-modern .event-calendar-presentation-media { display:block; position:relative; height:205px; overflow:hidden; background:transparent; }
.event-calendar-widget.is-modern .event-calendar-presentation-image,.event-calendar-widget.is-modern .event-calendar-image-placeholder { width:100%; height:100%; max-height:none; padding:0; object-fit:cover; background:transparent; }
.event-calendar-widget.is-modern .event-calendar-image-placeholder { color:rgba(255,255,255,.82); background:linear-gradient(135deg,color-mix(in srgb,var(--event-color,var(--event-accent)) 82%,#111827),color-mix(in srgb,var(--event-color,var(--event-accent)) 52%,#111827)); }
.event-calendar-widget.is-modern .event-calendar-image-placeholder svg { stroke:#fff; }
.event-calendar-widget.is-modern .event-calendar-image-placeholder strong { color:#fff; }
/* Optionale Bildbühnen für freigestellte Veranstaltungsbilder. */
.event-calendar-list-media,.event-calendar-presentation-media { position:relative; isolation:isolate; overflow:hidden; }
.event-calendar-list-media.has-image::before,.event-calendar-list-media.has-image::after,.event-calendar-presentation-media.has-image::before,.event-calendar-presentation-media.has-image::after { content:""; position:absolute; pointer-events:none; z-index:0; }
.event-calendar-list-media.has-image .event-calendar-presentation-image,.event-calendar-presentation-media.has-image .event-calendar-presentation-image { position:relative; z-index:2; }
.event-calendar-widget .has-image.image-bg-neutral { background:linear-gradient(145deg,#f8fafc,#e2e8f0); }
.event-calendar-widget .has-image.image-bg-gradient { background:linear-gradient(135deg,color-mix(in srgb,var(--event-color,var(--event-accent)) 24%,#f8fafc),#f8fafc 52%,color-mix(in srgb,var(--event-color,var(--event-accent)) 16%,#dbeafe)); }
.event-calendar-widget .has-image.image-bg-glow { background:radial-gradient(circle at 50% 48%,color-mix(in srgb,var(--event-color,var(--event-accent)) 38%,#fff) 0,transparent 48%),linear-gradient(145deg,#f8fafc,#dbeafe); }
.event-calendar-widget .has-image.image-bg-glow::before { inset:12% 18%; border-radius:50%; background:color-mix(in srgb,var(--event-color,var(--event-accent)) 48%,transparent); filter:blur(28px); opacity:.82; }
.event-calendar-widget .has-image.image-bg-glow .event-calendar-presentation-image { object-fit:contain!important; padding:14px!important; filter:drop-shadow(0 14px 18px rgba(15,23,42,.28)); }
.event-calendar-widget .has-image.image-bg-depth3d { background:radial-gradient(circle at 35% 22%,color-mix(in srgb,var(--event-color,var(--event-accent)) 48%,#fff) 0,transparent 34%),linear-gradient(145deg,color-mix(in srgb,var(--event-color,var(--event-accent)) 34%,#172033),#07111f 72%); }
.event-calendar-widget .has-image.image-bg-depth3d::before { left:9%; right:9%; bottom:5%; height:27%; border-radius:50%; background:radial-gradient(ellipse at center,rgba(255,255,255,.34),rgba(255,255,255,.08) 42%,transparent 72%); transform:perspective(280px) rotateX(64deg); filter:blur(2px); opacity:.86; }
.event-calendar-widget .has-image.image-bg-depth3d::after { inset:0; background:linear-gradient(115deg,transparent 0 36%,rgba(255,255,255,.16) 45%,transparent 54% 100%); opacity:.55; }
.event-calendar-widget .has-image.image-bg-depth3d .event-calendar-presentation-image { object-fit:contain!important; padding:15px!important; transform:translateY(-3px) scale(.96); filter:drop-shadow(0 20px 20px rgba(0,0,0,.42)) drop-shadow(0 3px 5px rgba(255,255,255,.2)); }
.event-calendar-widget.is-modern .event-calendar-modern-date { display:flex; position:absolute; top:0; left:0; z-index:4; width:68px; min-height:66px; box-sizing:border-box; flex-direction:column; align-items:center; justify-content:center; border-radius:0 0 18px 0; background:color-mix(in srgb,var(--event-color,var(--event-accent)) 88%,#0f172a); color:#fff; text-transform:uppercase; box-shadow:0 8px 20px rgba(15,23,42,.18); }
.event-calendar-widget.is-modern .event-calendar-modern-date span { font-size:.72rem; font-weight:900; letter-spacing:.08em; line-height:1; }
.event-calendar-widget.is-modern .event-calendar-modern-date strong { margin-top:3px; font-size:1.72rem; line-height:1; }
.event-calendar-widget.is-modern .event-calendar-presentation-body { padding:20px 22px 22px; color:#fff; }
.event-calendar-widget.is-modern .event-calendar-presentation-body h3,.event-calendar-widget.is-modern .event-calendar-presentation-body .event-calendar-meta,.event-calendar-widget.is-modern .event-calendar-presentation-body .event-calendar-presentation-description { color:#fff; }
.event-calendar-widget.is-modern .event-calendar-presentation-body .event-calendar-category { order:-1; margin:0; padding:0; border-radius:0; background:transparent; color:rgba(255,255,255,.82); text-transform:uppercase; letter-spacing:.06em; }
.event-calendar-widget.is-modern .event-calendar-presentation-body .event-calendar-countdown { background:rgba(255,255,255,.16); color:#fff; }
.event-calendar-widget.is-modern .event-calendar-presentation-body .event-calendar-registration-card-hint { border-left-color:#fff; background:rgba(255,255,255,.14); color:#fff; }
.event-calendar-widget.is-modern .event-calendar-presentation-card .event-calendar-details-button { border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.12); color:#fff; }
.event-calendar-widget.is-modern .event-calendar-presentation-card .event-calendar-details-button:hover { background:#fff; color:var(--event-color,var(--event-accent)); }
.event-calendar-widget.is-modern .event-calendar-slider .event-calendar-presentation-card { grid-template-columns:minmax(260px,42%) minmax(0,1fr); min-height:0; }
.event-calendar-widget.is-modern .event-calendar-slider .event-calendar-presentation-media { height:auto; min-height:0; align-self:stretch; }
.event-calendar-widget.is-modern .event-calendar-slider .event-calendar-presentation-image,.event-calendar-widget.is-modern .event-calendar-slider .event-calendar-image-placeholder { height:100%; min-height:0; max-height:none; }
@media(max-width:820px) { .event-calendar-widget.is-modern .event-calendar-slider .event-calendar-presentation-card { grid-template-columns:1fr; } .event-calendar-widget.is-modern .event-calendar-slider .event-calendar-presentation-media { height:230px; } .event-calendar-widget.is-modern .event-calendar-slider .event-calendar-presentation-image,.event-calendar-widget.is-modern .event-calendar-slider .event-calendar-image-placeholder { height:100%; max-height:none; } }
@media(max-width:760px) { .event-calendar-widget.is-modern .event-calendar-card { grid-template-columns:1fr; grid-template-rows:auto auto auto; min-height:0; } .event-calendar-widget.is-modern .event-calendar-list-media { grid-row:auto; min-height:220px; } .event-calendar-widget.is-modern .event-calendar-list-media .event-calendar-presentation-image,.event-calendar-widget.is-modern .event-calendar-list-media .event-calendar-image-placeholder { min-height:220px; } .event-calendar-widget.is-modern .event-calendar-list-extras { min-height:0; } .event-calendar-widget.is-modern .event-calendar-card > .event-calendar-details-button { grid-column:1; grid-row:auto; } }
@media(max-width:1050px) { .event-calendar-grid-view { grid-template-columns:repeat(3,minmax(0,1fr)); } .event-calendar-carousel { grid-auto-columns:calc((100% - 32px)/3); } }
@media(max-width:820px) { .event-calendar-grid-view { grid-template-columns:repeat(2,minmax(0,1fr)); } .event-calendar-carousel { grid-auto-columns:calc((100% - 16px)/2); } .event-calendar-slider .event-calendar-presentation-card { grid-template-columns:1fr; } .event-calendar-slider .event-calendar-presentation-image,.event-calendar-slider .event-calendar-image-placeholder { height:220px; max-height:220px; } }
@media(max-width:760px) { .event-calendar-month-view { overflow-x:auto; } .event-calendar-month { min-width:720px; } .event-calendar-card { grid-template-columns:auto minmax(0,1fr); } .event-calendar-details-button { grid-column:1/-1; width:100%; } .event-calendar-search { min-width:0; width:100%; } .event-calendar-controls { width:100%; } .event-calendar-controls select { width:100%; } }
@media(max-width:560px) { .event-calendar-grid-view { grid-template-columns:1fr; } .event-calendar-carousel { grid-auto-columns:100%; } }
.downloads { display:grid; gap:10px; }
.download-item { display:block; padding:14px 16px; border:1px solid var(--line); border-radius:16px; background:#fff; font-weight:700; }
.lightbox { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:28px 98px 24px; background:rgba(10,15,28,.42); backdrop-filter:blur(24px) saturate(1.20); -webkit-backdrop-filter:blur(24px) saturate(1.20); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .28s ease, visibility .28s ease; }
.lightbox::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 42%,rgba(37,99,235,.14),transparent 48%),linear-gradient(180deg,rgba(2,6,23,.10),rgba(2,6,23,.28)); }
.lightbox.is-open { opacity:1; visibility:visible; pointer-events:auto; }
.lightbox-shell { position:relative; z-index:1; width:min(1180px, calc(100vw - 220px)); max-height:94vh; display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; gap:14px; transform:translateY(12px) scale(.965); opacity:.86; transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease; }
.lightbox.is-open .lightbox-shell { transform:translateY(0) scale(1); opacity:1; }
.lightbox-topbar { position:relative; z-index:5; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:52px; color:#e2e8f0; pointer-events:none; }
.lightbox-titlewrap { grid-column:2; min-width:0; max-width:min(520px,72vw); padding:0; border-radius:999px; background:transparent; border:0; box-shadow:none; text-align:center; }
.lightbox-title { display:none; }
.lightbox-counter { display:inline-flex; align-items:center; justify-content:center; margin:0; padding:6px 13px; min-height:28px; border-radius:999px; font-size:.86rem; line-height:1; color:#e0f2fe; font-weight:900; background:rgba(37,99,235,.48); border:1px solid rgba(147,197,253,.45); box-shadow:0 10px 28px rgba(15,23,42,.26); }
.lightbox-stage { position:relative; min-height:0; display:flex; align-items:center; justify-content:center; overflow:visible; }
.lightbox-content { position:relative; max-width:100%; max-height:74vh; text-align:center; }
.lightbox-imgwrap { position:relative; display:inline-flex; align-items:center; justify-content:center; max-width:100%; max-height:74vh; border-radius:24px; background:linear-gradient(145deg,rgba(255,255,255,.26),rgba(255,255,255,.05)); padding:1px; box-shadow:0 38px 130px rgba(0,0,0,.52),0 0 0 1px rgba(255,255,255,.08); }
.lightbox-imgwrap.is-switching { animation:lightboxSwitch .22s ease; }
@keyframes lightboxSwitch { 0% { opacity:.35; transform:scale(.985); } 100% { opacity:1; transform:scale(1); } }
.lightbox img { display:block; max-width:100%; max-height:74vh; margin:0 auto; border-radius:23px; background:#fff; box-shadow:0 1px 0 rgba(255,255,255,.18) inset; }
.lightbox-caption { justify-self:center; max-width:min(880px,90vw); color:#dbeafe; line-height:1.45; text-align:center; padding:12px 18px; border-radius:18px; background:rgba(15,23,42,.42); border:1px solid rgba(255,255,255,.14); box-shadow:0 14px 40px rgba(0,0,0,.20); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.lightbox-caption strong { display:block; color:#f8fafc; font-size:.98rem; margin-bottom:2px; }
.lightbox button { border:1px solid rgba(255,255,255,.20); border-radius:999px; background:rgba(15,23,42,.42); color:#fff; cursor:pointer; box-shadow:0 18px 50px rgba(0,0,0,.26); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease; }
.lightbox button:hover { background:rgba(37,99,235,.82); border-color:rgba(255,255,255,.42); }
.lightbox-close { position:absolute; z-index:6; top:0; right:0; width:52px; height:52px; font-size:30px; line-height:1; pointer-events:auto; background:rgba(15,23,42,.34) !important; }
.lightbox-close:hover { transform:scale(1.07); background:rgba(239,68,68,.82) !important; }
.lightbox-prev,.lightbox-next { position:absolute; top:50%; z-index:2; width:62px; height:62px; font-size:36px; line-height:1; opacity:.56; transform:translateY(-50%); background:rgba(15,23,42,.34) !important; }
.lightbox-prev { left:-82px; } .lightbox-next { right:-82px; }
.lightbox-prev:hover,.lightbox-next:hover { transform:translateY(-50%) scale(1.09); opacity:1; background:rgba(37,99,235,.78) !important; }
.lightbox-thumbs { display:flex; justify-content:center; gap:8px; overflow-x:auto; padding:2px 8px 4px; scrollbar-width:thin; }
.lightbox-thumb { position:relative; flex:0 0 auto; width:72px; height:46px; padding:0; overflow:hidden; border-radius:12px !important; opacity:.62; background:rgba(15,23,42,.46) !important; }
.lightbox-thumb img { width:100%; height:100%; object-fit:cover; border-radius:10px; box-shadow:none; background:#fff; }
.lightbox-thumb.is-active { opacity:1; border-color:rgba(96,165,250,.96); box-shadow:0 0 0 2px rgba(37,99,235,.34),0 10px 28px rgba(0,0,0,.28); }
.lightbox-thumb:hover { transform:translateY(-2px); opacity:1; }
body.lightbox-lock { overflow:hidden; }
@media (hover:hover) { .lightbox-prev,.lightbox-next { opacity:.34; } .lightbox:hover .lightbox-prev,.lightbox:hover .lightbox-next { opacity:.74; } }
@media (max-width:980px) { .lightbox { padding:18px 58px; } .lightbox-shell { width:min(100%,900px); } .lightbox-prev { left:-50px; } .lightbox-next { right:-50px; } .lightbox-content,.lightbox-imgwrap,.lightbox img { max-height:76vh; } }
@media (max-width:760px) {
.lightbox { align-items:stretch; padding:6px; background:rgba(10,15,28,.78); backdrop-filter:blur(18px) saturate(1.12); -webkit-backdrop-filter:blur(18px) saturate(1.12); }
.lightbox-shell { width:100%; height:100%; max-height:none; display:block; transform:scale(.985); }
.lightbox.is-open .lightbox-shell { transform:scale(1); }
.lightbox-stage { width:100%; height:100%; min-height:0; overflow:hidden; }
.lightbox-content { width:100%; height:100%; max-width:none; max-height:none; display:flex; align-items:center; justify-content:center; }
.lightbox-imgwrap { width:100%; height:100%; max-width:none; max-height:none; display:flex; border-radius:14px; padding:0; background:transparent; box-shadow:none; }
.lightbox img { width:100%; height:100%; max-width:none; max-height:none; object-fit:contain; border-radius:12px; background:transparent; box-shadow:none; }
.lightbox-topbar { position:absolute; z-index:7; top:8px; left:8px; right:8px; display:flex; align-items:flex-start; justify-content:space-between; min-height:0; pointer-events:none; }
.lightbox-titlewrap { display:block; max-width:calc(100% - 54px); padding:0; background:transparent; border:0; box-shadow:none; text-align:left; }
.lightbox-title { display:none; }
.lightbox-counter { margin:0; padding:5px 10px; min-height:26px; font-size:.78rem; background:rgba(15,23,42,.66); border-color:rgba(255,255,255,.22); }
.lightbox-close { position:absolute; top:0; right:0; width:40px; height:40px; font-size:25px; background:rgba(15,23,42,.68) !important; }
.lightbox-prev,.lightbox-next { position:absolute; top:50%; width:40px; height:48px; font-size:30px; opacity:.86; background:rgba(15,23,42,.58) !important; box-shadow:0 8px 24px rgba(0,0,0,.24); }
.lightbox-prev { left:4px; } .lightbox-next { right:4px; }
.lightbox-caption { position:absolute; z-index:6; left:10px; right:10px; bottom:10px; max-width:none; max-height:22vh; overflow:auto; margin:0; padding:8px 11px; border-radius:12px; font-size:.82rem; line-height:1.35; text-align:left; background:rgba(15,23,42,.68); }
.lightbox-caption strong { font-size:.88rem; margin:0; }
.lightbox-thumbs { display:none; }
}
@media (max-width:760px) and (orientation:landscape) {
.lightbox { padding:4px; }
.lightbox-imgwrap { border-radius:10px; }
.lightbox img { border-radius:8px; }
.lightbox-caption { left:50%; right:auto; bottom:6px; width:min(62vw,620px); transform:translateX(-50%); max-height:18vh; padding:6px 10px; }
.lightbox-close { width:38px; height:38px; font-size:23px; }
.lightbox-prev,.lightbox-next { width:38px; height:44px; }
}
.muted { color:var(--muted); }
.contact-box { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }
.contact-line { background:#f8fafc; border:1px solid var(--line); border-radius:var(--card-radius); padding:17px; }
.contact-form-card { position:relative; overflow:hidden; }
.contact-form-card::before { content:""; position:absolute; inset:0 0 auto 0; height:7px; background:linear-gradient(90deg,var(--primary),var(--accent)); }
.contact-intro { max-width:none; width:100%; color:#475569; margin:0 0 28px; line-height:var(--cms-text-line-height); }
.contact-form { margin-top:12px; width:100%; }
.contact-form-section .contact-panel { background:#fff; border:1px solid #dbe3ef; border-radius:24px; padding:30px; box-shadow:0 18px 45px rgba(15,23,42,.08); }
.contact-form-section .contact-panel h2 { margin:0 0 10px; color:#0f172a; font-size:clamp(1.5rem,3vw,2.1rem); }
.contact-form-combo { display:grid; gap:24px; align-items:start; width:100%; }
.contact-form-combo.info-right { grid-template-columns:minmax(0,1.25fr) minmax(280px,.85fr); }
.contact-form-combo.info-above,.contact-form-combo.info-below { grid-template-columns:1fr; }
.contact-form-combo.info-above .contact-form-info-grid,.contact-form-combo.info-below .contact-form-info-grid { grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.contact-form-combo.info-right .contact-form-info-grid { grid-template-columns:1fr; }
.contact-form-info-grid { display:grid; gap:18px; align-items:stretch; }
.contact-form-info-grid .contact-info-card { height:100%; box-sizing:border-box; }
.contact-form-info-grid .contact-info-card a { white-space:nowrap; word-break:normal; overflow-wrap:normal; hyphens:none; }
.contact-form-info-grid .contact-info-card .btn { margin-top:16px; }
@media(max-width:900px) { .contact-form-combo.info-right { grid-template-columns:1fr; } .contact-form-combo.info-right .contact-form-info-grid { grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); } }
.contact-panel-intro { color:#475569; line-height:var(--cms-text-line-height); margin:0 0 16px; }
.contact-panel-intro p { margin:0 0 16px; }
.contact-form-support { margin-top:18px; width:100%; }
.contact-form-support .form-grid { display:grid; gap:16px; }
.contact-form-support .form-field label { font-weight:800; color:#0f172a; margin-bottom:7px; display:block; }
.contact-form-support input,.contact-form-support textarea { width:100%; border:1px solid #cbd5e1; border-radius:14px; padding:13px 14px; font:inherit; background:#fff; color:#0f172a; box-sizing:border-box; }
.contact-form-support textarea { min-height:150px; resize:vertical; }
.contact-form-support input:focus,.contact-form-support textarea:focus { outline:2px solid rgba(37,99,235,.22); border-color:#2563eb; }
.contact-form-support .form-check { display:flex; gap:10px; align-items:flex-start; color:#475569; line-height:1.55; font-size:.95rem; }
.contact-form-support .form-check input { width:auto; margin-top:4px; }
.contact-form-support .form-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.contact-form-support .form-note { font-size:.9rem; color:#64748b; }
@media(max-width:620px) { .contact-form-section .contact-panel { padding:24px; } .contact-form-support .form-actions { display:grid; } .contact-form-support .form-actions .btn { width:100%; } }
/* Kontaktseite: widgetbasierte MASTER-Struktur */
.contact-widget-section { padding:15px 0 !important; }
.contact-widget-section:first-child { padding-top:42px !important; }
.contact-widget-section:last-child { padding-bottom:42px !important; }
.contact-widget-section .widget-row { gap:24px !important; align-items:start !important; }
.contact-intro-card{background:linear-gradient(135deg,#ffffff 0%,#eef4ff 100%);border:1px solid #dbeafe;border-radius:24px;padding:34px;box-shadow:0 18px 50px rgba(15,23,42,.08)}
.contact-intro-card .eyebrow{font-size:.86rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin:0 0 10px;color:#2563eb}
.contact-intro-card h2{margin:.1rem 0 .7rem;font-size:clamp(2rem,4vw,3rem);letter-spacing:-.045em;color:#0f172a;line-height:1.08}
.contact-intro-card p{max-width:850px;color:#475569;font-size:1.08rem;line-height:var(--cms-text-line-height);margin:0}
.contact-widget-section .contact-panel{background:#fff;border:1px solid #dbe3ef;border-radius:24px;padding:30px;box-shadow:0 18px 45px rgba(15,23,42,.08);height:100%;box-sizing:border-box}
.contact-widget-section .contact-panel h2{margin:0 0 10px;color:#0f172a;font-size:clamp(1.5rem,3vw,2.1rem)}
.contact-panel-intro{color:#475569;line-height:var(--cms-text-line-height);margin:0 0 16px}.contact-panel-intro p{margin:0 0 16px}
.contact-info-list{display:grid;gap:18px;height:100%}
.contact-info-card{background:#fff;border:1px solid #dbe3ef;border-radius:22px;padding:24px;box-shadow:0 14px 40px rgba(15,23,42,.07)}
.contact-info-card .icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#dbeafe;color:#1d4ed8;font-size:24px;margin-bottom:14px}
.contact-info-card h3{margin:0 0 8px;color:#0f172a;font-size:1.15rem}.contact-info-card p{margin:0;color:#475569;line-height:var(--cms-text-line-height)}.contact-info-card a{font-weight:800;white-space:nowrap;word-break:normal;overflow-wrap:normal;hyphens:none}
.contact-help{background:#f8fafc;border:1px solid #e2e8f0;border-radius:22px;padding:24px}.contact-help h3{margin:0 0 8px;color:#0f172a}.contact-help p{margin:0 0 16px;color:#475569;line-height:var(--cms-text-line-height)}
.contact-cta{background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%) !important;color:#fff !important;border-radius:26px !important;padding:34px !important;display:flex !important;gap:20px !important;align-items:center !important;justify-content:space-between !important;box-shadow:0 24px 70px rgba(37,99,235,.24) !important}
.contact-cta h2{color:#fff !important;margin:.1rem 0;font-size:clamp(1.6rem,3vw,2.4rem)}.contact-cta p{color:#dbeafe !important;margin:0;line-height:var(--cms-text-line-height)}.contact-cta .eyebrow{display:inline-flex;width:max-content;background:rgba(255,255,255,.12);color:#bfdbfe;border:1px solid rgba(255,255,255,.30);border-radius:999px;padding:7px 12px;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin:0 0 12px}
.contact-cta .hero-actions{display:grid;gap:12px;min-width:260px}.contact-cta .btn,.contact-cta .btn-secondary{min-height:52px;padding:14px 22px;display:inline-flex;align-items:center;justify-content:center;background:#ffffff !important;color:#1d4ed8 !important;border:2px solid #ffffff !important;font-weight:800;text-decoration:none;box-shadow:0 14px 28px rgba(15,23,42,.12)}
@media(max-width:900px){.contact-widget-section .widget-row{grid-template-columns:1fr !important}.contact-cta{display:block !important}.contact-cta .hero-actions{margin-top:20px}}
@media(max-width:620px){.contact-intro-card,.contact-widget-section .contact-panel,.contact-info-card,.contact-help,.contact-cta{padding:24px !important}.contact-cta .hero-actions{display:grid;gap:10px}.contact-cta .btn{width:100%;text-align:center}.contact-form-support .form-actions{display:grid}.contact-form-support .form-actions .btn{width:100%}}
/* Step 134: Mobile Widget-Zeilen robust einspaltig stapeln (z. B. Google Maps + YouTube). */
@media(max-width:820px){
.widget-section .container .widget-row,
.widget-section .container .widget-row.equal-height{
display:grid !important;
grid-template-columns:minmax(0,1fr) !important;
--cols:1 !important;
gap:var(--widget-gap-vertical, 22px) !important;
}
.widget-section .container .widget-row > .widget-slot,
.widget-section .container .widget-row.equal-height > .widget-slot{
grid-column:1 / -1 !important;
min-width:0 !important;
width:100% !important;
display:block !important;
height:auto !important;
}
.widget-row.equal-height .widget-slot > .card,
.widget-row.equal-height .widget-slot > .widget-plain{
min-height:0 !important;
height:auto !important;
}
.google-maps-widget,
.youtube-widget,
.google-maps-consent-placeholder,
.youtube-consent-placeholder,
.youtube-widget-wrap{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
}
iframe.google-maps-embed,
iframe.youtube-embed,
.cookie-protected-embed{
width:100% !important;
max-width:100% !important;
}
}
.form-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; width:100%; }
.form-field { display:flex; flex-direction:column; gap:7px; }
.form-field.full { grid-column:1 / -1; width:100%; }
.form-field label { font-weight:850; color:#0f172a; font-size:.95rem; }
.form-field input, .form-field textarea { width:100%; border:1px solid #cbd5e1; border-radius:16px; background:#f8fafc; padding:13px 15px; font:inherit; color:#0f172a; outline:none; transition:border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.form-field textarea { min-height:230px; resize:vertical; display:block; }
.form-field input:focus, .form-field textarea:focus { border-color:var(--primary); background:#fff; box-shadow:0 0 0 4px rgba(37,99,235,.13); }
.form-check { grid-column:1 / -1; display:flex; align-items:flex-start; gap:11px; background:#f8fafc; border:1px solid var(--line); border-radius:var(--card-radius); padding:14px 16px; color:#334155; }
.form-check input { margin-top:5px; width:18px; height:18px; accent-color:var(--primary); }
.form-check a { color:var(--primary); font-weight:800; }
.form-actions { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:4px; }
.form-note { color:var(--muted); font-size:.94rem; }
.form-local-note { display:none; grid-column:1 / -1; border:1px solid #f59e0b; background:#fffbeb; color:#92400e; border-radius:var(--card-radius); padding:14px 16px; font-weight:700; }
.form-hp { position:absolute !important; left:-5000px !important; opacity:0 !important; height:0 !important; width:0 !important; overflow:hidden !important; }
.form-description { grid-column:1 / -1; color:#475569; line-height:var(--cms-text-line-height); }
.form-divider { grid-column:1 / -1; border:0; border-top:1px solid var(--line); margin:8px 0; }
.form-field select { width:100%; border:1px solid #cbd5e1; border-radius:16px; background:#f8fafc; padding:13px 15px; font:inherit; color:#0f172a; outline:none; }
.form-help { display:block; margin-top:7px; color:#64748b; font-size:.88rem; line-height:1.45; }
.form-error { display:none; margin-top:7px; color:#b91c1c; font-size:.9rem; font-weight:700; line-height:1.4; }
.form-field.has-error input,.form-field.has-error textarea,.form-field.has-error select,.form-check.has-error { border-color:#ef4444 !important; background:#fff7f7 !important; box-shadow:0 0 0 4px rgba(239,68,68,.12) !important; }
.form-field.has-error .form-error,.form-check.has-error .form-error { display:block; }
.form-label { font-weight:850; color:#0f172a; font-size:.95rem; }
.form-options { display:flex; flex-direction:column; gap:9px; background:#f8fafc; border:1px solid var(--line); border-radius:16px; padding:12px 14px; }
.form-option { display:flex; align-items:flex-start; gap:9px; color:#334155; }
.form-option input { width:18px; height:18px; margin-top:2px; accent-color:var(--primary); }
.footer { padding:34px 0; border-top:1px solid var(--line); background:#fff; color:var(--muted); }
/* Banner-Widget */
.site-banner-layer { position:fixed; inset:0; z-index:1190; pointer-events:none; overflow:hidden; contain:strict; width:100vw; height:100vh; }
.site-banner-widget { position:absolute !important; inset:auto; z-index:1; box-sizing:border-box; padding:18px 22px; border-radius:14px; box-shadow:0 18px 50px rgba(15,23,42,.22); display:flex; gap:18px; align-items:center; justify-content:space-between; line-height:1.45; --banner-x:0px; --banner-y:0px; transform:translate3d(var(--banner-x),var(--banner-y),0); margin:0 !important; contain:layout paint style; will-change:transform,opacity; backface-visibility:hidden; pointer-events:auto; }
.site-banner-widget[hidden] { display:none !important; }
.site-banner-widget.banner-pending { opacity:0; visibility:hidden; animation:none !important; }
.site-banner-widget.position-top { top:18px; bottom:auto; }
.site-banner-widget.position-bottom { bottom:18px; top:auto; }
.site-banner-widget.position-center { top:50%; bottom:auto; --banner-y:-50%; }
.site-banner-widget.align-left { left:18px; right:auto; }
.site-banner-widget.align-center { left:50%; right:auto; --banner-x:-50%; }
.site-banner-widget.align-right { right:18px; left:auto; }
.site-banner-widget.full-width { left:18px !important; right:18px !important; width:auto !important; max-width:none !important; --banner-x:0px !important; }
.site-banner-widget .site-banner-content { flex:1 1 auto; min-width:0; color:inherit !important; }
.site-banner-widget .site-banner-content p,
.site-banner-widget .site-banner-content div,
.site-banner-widget .site-banner-content span,
.site-banner-widget .site-banner-content strong,
.site-banner-widget .site-banner-content em,
.site-banner-widget .site-banner-content u,
.site-banner-widget .site-banner-content li { color:inherit !important; }
.site-banner-widget .site-banner-content p { margin:.25rem 0; }
.site-banner-widget .site-banner-content a { color:inherit !important; text-decoration:underline; }
.site-banner-widget .site-banner-close { appearance:none; border:0; border-radius:10px; padding:10px 18px; cursor:pointer; font-weight:800; background:var(--primary); color:#fff; white-space:nowrap; }
.site-banner-widget.banner-fade { animation:bannerFade .9s ease both; }
.site-banner-widget.banner-drop { animation:bannerDrop 1.05s ease both; }
.site-banner-widget.banner-rise { animation:bannerRise 1.05s ease both; }
.site-banner-widget.banner-slide-left { animation:bannerSlideLeft 1.05s ease both; }
.site-banner-widget.banner-slide-right { animation:bannerSlideRight 1.05s ease both; }
.site-banner-widget.banner-zoom { animation:bannerZoom .95s ease both; }
@keyframes bannerFade { from{opacity:0} to{opacity:1} }
@keyframes bannerDrop { from{opacity:0; transform:translate3d(var(--banner-x), calc(var(--banner-y) - 42px), 0)} to{opacity:1; transform:translate3d(var(--banner-x), var(--banner-y), 0)} }
@keyframes bannerRise { from{opacity:0; transform:translate3d(var(--banner-x), calc(var(--banner-y) + 42px), 0)} to{opacity:1; transform:translate3d(var(--banner-x), var(--banner-y), 0)} }
@keyframes bannerSlideLeft { from{opacity:0; transform:translate3d(calc(var(--banner-x) - 56px), var(--banner-y), 0)} to{opacity:1; transform:translate3d(var(--banner-x), var(--banner-y), 0)} }
@keyframes bannerSlideRight { from{opacity:0; transform:translate3d(calc(var(--banner-x) + 56px), var(--banner-y), 0)} to{opacity:1; transform:translate3d(var(--banner-x), var(--banner-y), 0)} }
@keyframes bannerZoom { from{opacity:0; transform:translate3d(var(--banner-x),var(--banner-y),0) scale(.92)} to{opacity:1; transform:translate3d(var(--banner-x),var(--banner-y),0) scale(1)} }
@media (max-width:700px) { .site-banner-widget { left:14px !important; right:14px !important; max-width:none !important; width:auto !important; flex-direction:column; align-items:stretch; --banner-x:0px !important; } .site-banner-widget .site-banner-close { width:100%; } }
.cookie-consent {
position:fixed;
z-index:1200;
left:0;
right:0;
padding:18px;
pointer-events:none;
opacity:0;
transition:opacity .25s ease;
}
.cookie-consent[hidden], .cookie-consent [hidden] { display:none !important; }
.cookie-consent-bottom { bottom:0; }
.cookie-consent-top { top:0; }
.cookie-consent-center { inset:0; display:flex; align-items:center; justify-content:center; background:rgba(15,23,42,.38); }
.cookie-consent-card { width:min(880px, calc(100vw - 36px)); max-height:min(86vh, 820px); margin:0 auto; background:#fff; color:#0f172a; border:1px solid var(--line); border-radius:var(--card-radius); box-shadow:0 24px 80px rgba(15,23,42,.25); padding:20px; pointer-events:auto; display:flex; flex-direction:column; opacity:0; transform:translate3d(0,18px,0); transition:opacity .25s ease,transform .25s ease; will-change:opacity,transform; }
.cookie-consent-top .cookie-consent-card { transform:translate3d(0,-18px,0); }
.cookie-consent-center .cookie-consent-card { transform:translate3d(0,14px,0) scale(.985); }
.cookie-consent.is-visible { opacity:1; }
.cookie-consent.is-visible .cookie-consent-card { opacity:1; transform:translate3d(0,0,0) scale(1); }
.cookie-consent-main { flex:0 0 auto; }
.cookie-consent-main h2 { margin:0 0 6px; font-size:1.28rem; }
.cookie-consent-main p,.cookie-consent-intro { margin:0 0 14px; color:#475569; }
.cookie-consent-scroll { display:contents; }
.cookie-consent-intro { flex:0 0 auto; }
.cookie-consent-details { flex:1 1 auto; overflow:auto; padding-right:6px; margin:4px 0 14px; }
.cookie-consent-details[hidden] { display:none !important; }
.cookie-consent-categories { display:grid; gap:10px; margin:8px 0 12px; }
.cookie-category-panel { background:#f8fafc; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.cookie-category-head { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:start; padding:14px 16px; }
.cookie-category-title { display:flex; align-items:center; gap:8px; font-weight:850; color:#0f172a; font-size:1.02rem; }
.cookie-category-desc { display:block; color:#64748b; margin-top:4px; line-height:1.45; }
.cookie-category-required { font-size:.72rem; font-weight:800; color:#166534; background:#dcfce7; border-radius:999px; padding:2px 8px; }
.cookie-category-unused { font-size:.72rem; font-weight:800; color:#991b1b; background:#fee2e2; border-radius:999px; padding:2px 8px; }
.cookie-category-panel.is-unused { opacity:.78; background:#f8fafc; }
.cookie-category-panel.is-unused .cookie-category-title { color:#334155; }
.cookie-category-panel.is-unused .cookie-switch-ui { background:#dc2626; opacity:.8; cursor:not-allowed; }
.cookie-category-unused-note { display:block; color:#991b1b; font-weight:700; margin-top:6px; }
.cookie-switch { position:relative; display:inline-flex; align-items:center; justify-content:flex-end; width:62px; height:30px; }
.cookie-switch input { position:absolute; opacity:0; width:1px; height:1px; }
.cookie-switch-ui { position:relative; width:62px; height:30px; border-radius:999px; background:#dc2626; box-shadow:inset 0 0 0 1px rgba(15,23,42,.12); transition:background .2s ease; }
.cookie-switch-ui::before { content:'AUS'; position:absolute; right:7px; top:50%; transform:translateY(-50%); color:#fff; font-size:.63rem; font-weight:900; letter-spacing:.02em; }
.cookie-switch-ui::after { content:''; position:absolute; left:4px; top:4px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(15,23,42,.25); transition:transform .2s ease; }
.cookie-switch input:checked + .cookie-switch-ui { background:#16a34a; }
.cookie-switch input:checked + .cookie-switch-ui::before { content:'AN'; left:8px; right:auto; }
.cookie-switch input:checked + .cookie-switch-ui::after { transform:translateX(32px); }
.cookie-switch input:disabled + .cookie-switch-ui { opacity:.75; cursor:not-allowed; }
.cookie-switch input:disabled:checked + .cookie-switch-ui { background:#16a34a; }
.cookie-switch input:disabled:not(:checked) + .cookie-switch-ui { background:#dc2626; }
.cookie-info-toggle { appearance:none; border:0; background:transparent; color:var(--primary); font:inherit; font-weight:850; cursor:pointer; padding:0 16px 12px; text-align:left; }
.cookie-info-toggle:hover { text-decoration:underline; }
.cookie-service-list { display:grid; gap:0; margin:0 16px 14px; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.cookie-service-list[hidden] { display:none !important; }
.cookie-service-row { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:start; padding:12px 14px; border-bottom:none; }
.cookie-service-row:last-child { border-bottom:0; }
.cookie-service-row strong { color:#0f172a; }
.cookie-service-row small { display:block; color:#64748b; margin-top:3px; line-height:1.4; }
.cookie-service-row a { color:var(--primary); font-weight:750; text-decoration:none; }
.cookie-service-row a:hover { text-decoration:underline; }
.cookie-privacy-note { font-size:.85rem; color:#64748b; margin:10px 0 0; }
.cookie-consent-actions { flex:0 0 auto; display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; padding-top:12px; border-top:1px solid var(--line); }
.cookie-consent-actions .btn { border:0; cursor:pointer; }
.cookie-consent-actions .cookie-accept-all,.cookie-consent-actions .cookie-necessary,.cookie-consent-actions .cookie-settings,.cookie-consent-actions .cookie-save { background:#ffffff !important; color:var(--primary) !important; border:1px solid var(--primary) !important; box-shadow:0 10px 20px rgba(15,23,42,.08) !important; opacity:1 !important; filter:none !important; }
.cookie-consent-actions .cookie-accept-all:hover,.cookie-consent-actions .cookie-necessary:hover,.cookie-consent-actions .cookie-settings:hover,.cookie-consent-actions .cookie-save:hover,.cookie-consent-actions .btn.is-selected { background:var(--primary) !important; color:#ffffff !important; border-color:var(--primary) !important; filter:none !important; opacity:1 !important; }
.cookie-consent-actions .cookie-accept-all:disabled,.cookie-consent-actions .cookie-necessary:disabled,.cookie-consent-actions .cookie-settings:disabled,.cookie-consent-actions .cookie-save:disabled { background:#ffffff !important; color:var(--primary) !important; border-color:var(--primary) !important; opacity:1 !important; cursor:pointer !important; }
@media (max-width:720px) { .cookie-consent { padding:10px; } .cookie-consent-card { width:100%; max-height:88vh; padding:16px; } .cookie-category-head,.cookie-service-row { grid-template-columns:1fr; } .cookie-switch { justify-self:start; } .cookie-consent-actions { flex-direction:column; } .cookie-consent-actions .btn { width:100%; text-align:center; } }
/* Step 2159: One mobile scroll area; title and decisions remain visible. */
@media (max-width:720px), (max-width:1024px) and (max-height:500px) and (orientation:landscape) {
html.cms-cookie-dialog-open,html.cms-cookie-dialog-open body { overflow:hidden; }
html.cms-cookie-dialog-open { scrollbar-gutter:auto; }
.cookie-consent { padding:10px; padding-top:calc(10px + env(safe-area-inset-top,0px)); padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)); }
.cookie-consent-card { box-sizing:border-box; min-height:0; max-height:calc(100vh - 20px); max-height:calc(100dvh - 20px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); overflow:hidden; }
.cookie-consent.is-details-open { inset:0; display:flex; align-items:stretch; padding:0; background:transparent; pointer-events:auto; }
.cookie-consent.is-details-open .cookie-consent-card { width:100%; height:100%; max-height:100%; margin:0; border:0; border-radius:0; box-shadow:none; padding:16px; padding-top:calc(16px + env(safe-area-inset-top,0px)); padding-bottom:calc(16px + env(safe-area-inset-bottom,0px)); }
.cookie-consent-main { padding-bottom:10px; flex:0 0 auto; }
.cookie-consent.has-a11y-launcher .cookie-consent-main { padding-right:52px; }
html.cms-cookie-dialog-open .cms-a11y-root { top:calc(16px + env(safe-area-inset-top,0px)); bottom:auto; left:auto !important; right:18px !important; }
html.cms-cookie-dialog-open .cms-a11y-launcher { width:44px; height:44px; padding:0; justify-content:center; }
html.cms-cookie-dialog-open .cms-a11y-launcher-text { display:none; }
html.cms-cookie-dialog-open .cms-a11y-panel { top:52px; bottom:auto; left:auto !important; right:0 !important; width:min(390px,calc(100vw - 48px)); max-height:calc(100vh - 88px); max-height:calc(100dvh - 88px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); }
.cookie-consent-main h2 { margin:0; }
.cookie-consent-scroll { display:block; flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-gutter:stable; padding-right:4px; }
.cookie-consent-details { flex:none; overflow:visible; padding-right:0; margin-bottom:10px; }
.cookie-consent-actions { flex:0 0 auto; gap:8px; margin-top:10px; padding-top:10px; }
.cookie-consent-actions .btn { min-height:44px; min-width:0; overflow-wrap:anywhere; }
}
@media (max-width:1024px) and (max-height:500px) and (orientation:landscape) {
.cookie-consent-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (prefers-reduced-motion:reduce) {
.cookie-consent,.cookie-consent-card { transition:none !important; }
}
.back-to-top-page {
position:fixed;
z-index:999;
width:44px;
height:44px;
border:0;
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
background:var(--back-to-top-color);
color:var(--back-to-top-text);
box-shadow:0 12px 28px color-mix(in srgb,var(--back-to-top-color) 30%,transparent);
cursor:pointer;
font-size:22px;
line-height:1;
opacity:0;
visibility:hidden;
transform:translateY(10px);
transition:opacity .22s ease,transform .22s ease,visibility .22s ease,filter .18s ease;
}
.back-to-top-page.is-visible {
opacity:1;
visibility:visible;
transform:translateY(0);
}
.back-to-top-page:hover {
filter:brightness(.95);
transform:translateY(-2px);
}
.back-to-top-page.bottom-right {
right:24px;
bottom:24px;
}
.back-to-top-page.bottom-left {
left:24px;
bottom:24px;
}
.back-to-top-page.bottom-center {
left:50%;
bottom:24px;
transform:translate(-50%,10px);
}
.back-to-top-page.bottom-center.is-visible {
transform:translate(-50%,0);
}
.back-to-top-page.bottom-center:hover {
transform:translate(-50%,-2px);
}
.cms-branding-block {
padding:32px 0 42px;
}
.cms-branding-inner {
width:min(100% - 36px, var(--container-width));
margin:0 auto;
display:flex;
align-items:center;
gap:18px;
padding:20px 22px;
border:var(--card-border-width) solid var(--card-border-color);
border-radius:var(--card-radius);
background:#ffffff;
box-shadow:var(--card-shadow);
}
.cms-branding-logo {
display:block;
object-fit:contain;
flex:0 0 auto;
}
.cms-branding-content h2 {
margin:0 0 6px;
font-size:1.05rem;
}
.cms-branding-content p {
margin:0 0 8px;
color:var(--muted);
}
.cms-branding-link {
color:var(--primary);
font-weight:700;
text-decoration:none;
}
.cms-branding-link:hover {
text-decoration:underline;
}
@media (max-width:640px) {
.back-to-top-page {
width:40px;
height:40px;
font-size:20px;
}
.back-to-top-page.bottom-right {
right:16px;
bottom:16px;
}
.back-to-top-page.bottom-left {
left:16px;
bottom:16px;
}
.back-to-top-page.bottom-center {
bottom:16px;
}
/* Step 818: Branding auf Smartphones als zentrierte Einspalten-Darstellung. */
.cms-branding-block {
padding:24px 0 32px;
}
.cms-branding-inner {
width:min(100% - 28px, var(--container-width));
flex-direction:column;
align-items:center;
gap:14px;
padding:22px 18px;
text-align:center;
}
.cms-branding-logo {
flex:none;
max-width:100%;
}
.cms-branding-content {
width:100%;
min-width:0;
}
.cms-branding-content h2,
.cms-branding-content p,
.cms-branding-link {
overflow-wrap:break-word;
word-break:normal;
}
}
/* Step 240: Desktop-Korrektur für vertikale Navigation.
Ursache: spätere Section-Style-Regeln setzten main wieder auf zentrierte
Breite/Margins. Dadurch entstand im Desktop-Modus links zwischen
Navigation und Header-/Inhaltsbereich ein sichtbarer Freiraum.
Diese Regeln gelten ausschließlich oberhalb des mobilen Burger-Breakpoints. */
@media (min-width: 821px) {
body.nav-layout-vertikal-links main,
body.nav-layout-vertikal-links .hero,
body.nav-layout-vertikal-links .hero-banner,
body.nav-layout-vertikal-links .site-footer {
margin-left:var(--side-nav-width) !important;
margin-right:0 !important;
width:calc(100% - var(--side-nav-width)) !important;
max-width:none !important;
}
body.nav-layout-vertikal-links main {
border-radius:0 !important;
}
body.nav-layout-vertikal-links .hero > .container,
body.nav-layout-vertikal-links .hero .hero-grid,
body.nav-layout-vertikal-links .widget-section > .container,
body.nav-layout-vertikal-links main > .container,
body.nav-layout-vertikal-links .site-footer > .container {
margin-left:auto !important;
margin-right:auto !important;
width:min(var(--container-width), calc(100% - var(--container-padding))) !important;
}
body.nav-layout-vertikal-links .section-fullwidth {
width:calc(100vw - var(--side-nav-width)) !important;
margin-left:0 !important;
margin-right:0 !important;
}
}
/* Step 241: Vertikale Navigation Desktop strukturell bereinigt.
Ursache der Restprobleme:
- Step-240-Regeln zentrierten die Container im verbleibenden Inhaltsbereich
wieder per margin-left:auto. Dadurch blieb auf Desktop links neben dem
Hero-/Header-Inhalt ein großer leerer Bereich sichtbar.
- Untermenüs nutzten auf Desktop weiterhin die horizontale Dropdown-Logik
(position:absolute). In einer vertikalen Navigation müssen Unterpunkte
statisch eingerückt im linken Menüfluss liegen. */
@media (min-width: 821px) {
body.nav-layout-vertikal-links {
--vertical-content-offset:clamp(24px, 3vw, 48px);
}
body.nav-layout-vertikal-links main,
body.nav-layout-vertikal-links .hero,
body.nav-layout-vertikal-links .hero-banner,
body.nav-layout-vertikal-links .site-footer {
margin-left:var(--side-nav-width) !important;
margin-right:0 !important;
width:calc(100% - var(--side-nav-width)) !important;
max-width:none !important;
}
body.nav-layout-vertikal-links .hero > .container,
body.nav-layout-vertikal-links .hero .hero-grid,
body.nav-layout-vertikal-links .widget-section > .container,
body.nav-layout-vertikal-links main > .container,
body.nav-layout-vertikal-links .site-footer > .container {
margin-left:var(--vertical-content-offset) !important;
margin-right:auto !important;
width:min(var(--container-width), calc(100% - var(--container-padding) - var(--vertical-content-offset))) !important;
max-width:none !important;
}
body.nav-layout-vertikal-links .section-fullwidth {
width:calc(100vw - var(--side-nav-width)) !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
body.nav-layout-vertikal-links .section-fullwidth > .container,
body.nav-layout-vertikal-links .hero.section-fullwidth .hero-grid,
body.nav-layout-vertikal-links .section-fullwidth.hero .hero-grid {
margin-left:var(--vertical-content-offset) !important;
margin-right:auto !important;
width:min(var(--container-width), calc(100% - var(--container-padding) - var(--vertical-content-offset))) !important;
}
body.nav-layout-vertikal-links .menu-list,
body.nav-layout-vertikal-links .menu-list > li {
width:100% !important;
}
body.nav-layout-vertikal-links .menu-list > li {
position:relative !important;
}
body.nav-layout-vertikal-links .has-submenu > a {
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:8px !important;
}
body.nav-layout-vertikal-links .submenu {
position:static !important;
display:block !important;
opacity:1 !important;
visibility:visible !important;
transform:none !important;
transition:none !important;
min-width:0 !important;
width:calc(100% - 10px) !important;
box-shadow:none !important;
border:0 !important;
border-left:3px solid var(--line) !important;
border-radius:0 !important;
background:transparent !important;
padding:4px 0 4px 14px !important;
margin:2px 0 6px 10px !important;
}
body.nav-layout-vertikal-links .submenu a {
width:100% !important;
justify-content:flex-start !important;
padding:7px 10px !important;
border-radius:10px !important;
white-space:normal !important;
font-size:.95em !important;
}
body.nav-layout-vertikal-links .submenu .submenu {
top:auto !important;
left:auto !important;
margin-left:8px !important;
}
}
/* Step 242: Vertikale Desktop-Navigation gezielt korrigiert.
Wichtig: Es wird NUR der Header-/Hero-Bereich an die linke Navigation gezogen.
Normale Inhaltscontainer behalten den Abstand aus der bestehenden Layoutlogik. */
@media (min-width: 821px) {
body.nav-layout-vertikal-links .hero > .container,
body.nav-layout-vertikal-links .hero .hero-grid,
body.nav-layout-vertikal-links .hero.section-fullwidth .hero-grid,
body.nav-layout-vertikal-links .section-fullwidth.hero .hero-grid {
margin-left:0 !important;
margin-right:auto !important;
width:min(var(--container-width), calc(100% - var(--container-padding))) !important;
max-width:none !important;
}
body.nav-layout-vertikal-links .submenu-marker {
cursor:pointer !important;
padding:2px 6px !important;
margin-left:auto !important;
border-radius:999px !important;
}
body.nav-layout-vertikal-links .submenu-marker:hover {
background:rgba(127,127,127,.16) !important;
}
body.nav-layout-vertikal-links .submenu {
display:none !important;
}
body.nav-layout-vertikal-links .has-submenu.is-submenu-open > .submenu {
display:block !important;
}
body.nav-layout-vertikal-links .has-submenu.is-submenu-open > a .submenu-marker {
transform:rotate(180deg);
}
}
/* Step 243: Vertikale Desktop-Navigation final bereinigt.
Analyse: Der Hero/Header ist inzwischen ein normales Hero-Widget innerhalb
von . Frühere Regeln behandelten jede .hero global so, als läge sie
direkt neben der festen linken Navigation. Dadurch bekam ein Hero innerhalb
von main zusätzlich zum main-Versatz noch einen zweiten margin-left und der
Header-Hintergrund begann zu weit rechts. Außerdem waren normale
Inhaltscontainer durch Step 241 zu weit nach links verschoben.
Lösung: Nur direkte Seitenelemente neben der Navigation versetzen. Hero-
Widgets innerhalb von main beginnen bei 0 im Hauptbereich; ihre inneren
Container bleiben wie normale Website-Container zentriert. */
@media (min-width: 821px) {
body.nav-layout-vertikal-links {
--vertical-content-offset:clamp(24px, 3vw, 48px);
}
body.nav-layout-vertikal-links main,
body.nav-layout-vertikal-links > .hero,
body.nav-layout-vertikal-links > .hero-banner,
body.nav-layout-vertikal-links > .site-footer {
margin-left:var(--side-nav-width) !important;
margin-right:0 !important;
width:calc(100% - var(--side-nav-width)) !important;
max-width:none !important;
}
body.nav-layout-vertikal-links main .hero,
body.nav-layout-vertikal-links main .hero-banner,
body.nav-layout-vertikal-links main .section-fullwidth.hero,
body.nav-layout-vertikal-links main .hero.section-fullwidth {
margin-left:0 !important;
margin-right:0 !important;
width:100% !important;
max-width:none !important;
}
body.nav-layout-vertikal-links main .hero > .container,
body.nav-layout-vertikal-links main .hero .hero-grid,
body.nav-layout-vertikal-links main .hero.section-fullwidth .hero-grid,
body.nav-layout-vertikal-links main .section-fullwidth.hero .hero-grid {
margin-left:auto !important;
margin-right:auto !important;
width:min(var(--container-width), calc(100% - var(--container-padding))) !important;
max-width:none !important;
}
body.nav-layout-vertikal-links .widget-section > .container,
body.nav-layout-vertikal-links main > .container,
body.nav-layout-vertikal-links .site-footer > .container {
margin-left:auto !important;
margin-right:auto !important;
width:min(var(--container-width), calc(100% - var(--container-padding))) !important;
max-width:none !important;
}
body.nav-layout-vertikal-links main .section-fullwidth:not(.hero) {
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
/* Step 413: Der neue Inhalts-Container mit aktivierter Vollbreite wird
aus der alten Begrenzung fuer normale Fullwidth-Abschnitte ausgenommen.
Sonst gewinnt diese spezifischere Altregel gegen die eigentliche
Container-Fullwidth-Regel. */
body.nav-layout-vertikal-links main .section-fullwidth:not(.hero):not(.cms-content-container-fullwidth) > .container {
margin-left:auto !important;
margin-right:auto !important;
width:min(var(--container-width), calc(100% - var(--container-padding))) !important;
}
body.nav-layout-vertikal-links > .hero > .container,
body.nav-layout-vertikal-links > .hero .hero-grid,
body.nav-layout-vertikal-links > .hero-banner > .container,
body.nav-layout-vertikal-links > .site-footer > .container {
margin-left:auto !important;
margin-right:auto !important;
width:min(var(--container-width), calc(100% - var(--container-padding))) !important;
}
}
/* Step 244: Bei vertikaler Navigation darf nur der Hero-HINTERGRUND am
linken Menü andocken. Wenn die Header-Vorlage "Volle Browserbreite" nutzt,
muss auch der innere Header-Inhalt die verfügbare Breite rechts neben der
Navigation nutzen. Normale Inhaltscontainer bleiben unverändert. */
@media (min-width: 821px) {
body.nav-layout-vertikal-links main .hero.hero-fullwidth > .container,
body.nav-layout-vertikal-links main .hero.hero-fullwidth .hero-grid,
body.nav-layout-vertikal-links main .hero.section-fullwidth.hero-fullwidth > .container,
body.nav-layout-vertikal-links main .hero.section-fullwidth.hero-fullwidth .hero-grid,
body.nav-layout-vertikal-links main .section-fullwidth.hero.hero-fullwidth > .container,
body.nav-layout-vertikal-links main .section-fullwidth.hero.hero-fullwidth .hero-grid {
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
padding-left:clamp(24px, 5vw, 96px) !important;
padding-right:clamp(24px, 5vw, 96px) !important;
}
}
/* Step 590: Full-Width-Header bei vertikaler Navigation korrekt aus dem
gepolsterten main-Inhaltsbereich herausbrechen.
Der Header ist ein Kind von . Bei vertikaler Navigation ist
bereits um die Navigationsbreite verschoben. Die bisherige spaetere
Step-243-Regel setzte den Full-Width-Header innerhalb von main jedoch nur
auf width:100%. Dadurch blieb die Innenpolsterung des gestalteten main-
Bereichs links und rechts sichtbar und der Header wirkte eingerueckt.
Die Breite wird deshalb aus der tatsaechlich verfuegbaren Browserbreite
rechts neben der Navigation berechnet. Der symmetrische negative Versatz
gleicht ausschliesslich die main-Innenpolsterung aus. Horizontale Navigation,
normale Header und alle Inhaltsbereiche bleiben unberuehrt. */
@media (min-width: 821px) {
body.nav-layout-vertikal-links main > .hero.section-fullwidth,
body.nav-layout-vertikal-links main > .section-fullwidth.hero {
width:calc(100vw - var(--side-nav-width)) !important;
max-width:none !important;
margin-left:calc((100% - (100vw - var(--side-nav-width))) / 2) !important;
margin-right:0 !important;
}
/* Step 594: Beim Ein- und Ausfahren der vertikalen Navigation müssen
Sidebar, main und der darin liegende Full-Width-Header dieselbe
280-ms-Bewegung verwenden. Ohne eigenen Übergang sprang die aus
--side-nav-width berechnete Headerbreite sofort auf den Zielwert,
während Navigation und main noch animierten. Dadurch wurde kurzfristig
der weiße main-Hintergrund als Spalt sichtbar. */
body.nav-layout-vertikal-links.vertical-menu-collapsible main > .hero.section-fullwidth,
body.nav-layout-vertikal-links.vertical-menu-collapsible main > .section-fullwidth.hero {
transition:width 280ms ease, margin-left 280ms ease !important;
will-change:width, margin-left;
}
}
/* Step 596: Vertikale Navigation und Header aus einer einzigen animierten
Breitenvariable steuern.
Ursache des kurz sichtbaren Spalts: --side-nav-width sprang beim Umschalten
sofort auf den Zielwert, waehrend Sidebar, main und einzelne Hero-Regeln
ihre eigenen width-/margin-Transitions abspielten. Dadurch existierten
waehrend der 280 ms mehrere voneinander abweichende Zwischenbreiten.
Die Navigationsbreite selbst wird jetzt als typisierte CSS-Variable
animiert. Sidebar, main und alle daraus abgeleiteten Breiten lesen in jedem
Frame denselben Wert. Ein Hero innerhalb von main erhaelt keinen zweiten
Seitenversatz und keine eigene Layoutanimation. */
@property --side-nav-width {
syntax: "";
inherits: true;
initial-value: 260px;
}
@media (min-width: 821px) {
body.nav-layout-vertikal-links.vertical-menu-collapsible {
transition:--side-nav-width 280ms ease !important;
}
body.nav-layout-vertikal-links.vertical-menu-collapsible .header,
body.nav-layout-vertikal-links.vertical-menu-collapsible .header.sticky,
body.nav-layout-vertikal-links.vertical-menu-collapsible main,
body.nav-layout-vertikal-links.vertical-menu-collapsible > .hero,
body.nav-layout-vertikal-links.vertical-menu-collapsible > .hero-banner,
body.nav-layout-vertikal-links.vertical-menu-collapsible > .site-footer {
transition:none !important;
}
body.nav-layout-vertikal-links.vertical-menu-collapsible main {
margin-left:var(--side-nav-width) !important;
margin-right:0 !important;
width:calc(100% - var(--side-nav-width)) !important;
max-width:none !important;
}
body.nav-layout-vertikal-links.vertical-menu-collapsible main > .hero,
body.nav-layout-vertikal-links.vertical-menu-collapsible main > .hero-banner,
body.nav-layout-vertikal-links.vertical-menu-collapsible main > .hero.section-fullwidth,
body.nav-layout-vertikal-links.vertical-menu-collapsible main > .section-fullwidth.hero,
body.nav-layout-vertikal-links.vertical-menu-collapsible main > .hero-overlay-fullwidth {
margin-left:0 !important;
margin-right:0 !important;
width:100% !important;
max-width:none !important;
transition:none !important;
}
}
/* Step 830/887: Vollbild-Header bei vertikaler Desktop-Navigation.
Ohne einklappbare Navigation bleibt die bisherige Viewporthöhe erhalten.
Bei einer ausgeklappten einklappbaren Sidebar richtet sich die Headerhöhe
dagegen nach dem tatsächlichen Seitenverhältnis des Headerbildes und der
verbleibenden Inhaltsbreite. Das Bild bleibt mit cover flächenfüllend, wird
aber weder unter die Sidebar geschoben noch durch contain mit Balken ergänzt. */
@media (min-width: 821px) {
body.nav-layout-vertikal-links main > .hero-overlay-height-vollbild {
height:100vh !important;
height:100svh !important;
min-height:0 !important;
}
body.nav-layout-vertikal-links.vertical-menu-collapsible:not(.vertical-nav-collapsed)
main > .hero-overlay-fullwidth.hero-overlay-height-vollbild {
height:max(420px, calc((100vw - var(--side-nav-width)) / var(--hero-image-ratio, 2.258824))) !important;
min-height:0 !important;
background-size:cover !important;
background-position:center center !important;
}
}
/* Step 890/892: Responsive Header-Skalierung fuer breite Full-Width-Header.
Ursache des verbleibenden Fehlers bei horizontaler Navigation: Step 891
beschraenkte die seitenverhaeltnisbasierte Hoehe dort auf die CSS-Klasse
.hero-overlay-image-only. Die Projekte Handwerk, Stadtbaeckerei und
WP Dienstleistungen besitzen jedoch sichtbare Overlay-Elemente und erhalten
diese Klasse deshalb nicht. Die neue Regel konnte bei ihnen folglich nie
greifen, waehrend bildreine Referenzprojekte bereits korrekt aussahen.
Tablet und Smartphone verwenden jetzt fuer Full-Width-Header bei horizontaler
und vertikaler Navigation denselben Berechnungsweg. Bei Navigation unterhalb
des Headers liegt der Hero direkt unter statt innerhalb von ;
deshalb wird auch dieser zweite, bereits vorhandene Ausgabepfad explizit
erfasst. Position, Overlay-Inhalte und Navigationslogik bleiben unveraendert. */
@media (max-width: 820px) {
body main > .hero-overlay-fullwidth,
body > .hero-overlay-fullwidth {
height:calc(100vw / var(--hero-image-ratio, 2.258824)) !important;
min-height:0 !important;
background-size:cover !important;
background-position:center center !important;
}
/* Step 1651/1702: Bei einem fixierten Header darf die feste
Hintergrund-Bezugsfläche auf Tablet und Smartphone nicht die gesamte
Viewporthöhe für `cover` verwenden. Das vergrößerte und beschnitt das
Headerbild. Die Bildbreite folgt nun wieder exakt dem responsiven
Headerbereich; die dynamische Kopfzeilenhöhe setzt seine obere Position.
Step 1702 erweitert die Regel auf Header mit Text oder Buttons: Deren
Inhalte werden mobil zwar separat unter dem Bild ausgegeben, der Hero
besitzt deshalb technisch aber nicht die Klasse `hero-overlay-image-only`. */
body.hero-image-fixed.hero-image-fixed-mobile
:is(main > .hero-overlay-fullwidth, body > .hero-overlay-fullwidth)[data-cms-hero-has-image="1"]:not(.hero-overlay-no-image) {
background-attachment:fixed !important;
background-size:100% auto !important;
background-position:center var(--cms-fixed-hero-mobile-offset, 72px) !important;
background-repeat:no-repeat !important;
}
}
@media (max-width:820px) and (prefers-reduced-motion:reduce) {
body.hero-image-fixed.hero-image-fixed-mobile
:is(main > .hero-overlay-fullwidth, body > .hero-overlay-fullwidth)[data-cms-hero-has-image="1"]:not(.hero-overlay-no-image) {
background-attachment:scroll !important;
background-size:cover !important;
background-position:center center !important;
}
}
/* Step 531: Full-Width-Hero im eingeklappten vertikalen Menü.
Der allgemeine Navigationsversatz gilt sowohl für als auch für
.hero. Da der Overlay-Hero innerhalb von gerendert wird, erhielt
er den Sidebar-Versatz ein zweites Mal. Für genau diesen verschachtelten
Hero wird der doppelte Versatz zurückgesetzt. */
@media (min-width: 821px) {
body.nav-layout-vertikal-links.vertical-menu-collapsible.vertical-nav-collapsed main > .hero-overlay-fullwidth {
margin-left:0 !important;
margin-right:0 !important;
width:100% !important;
max-width:none !important;
}
}
/* Step 412: Inhalts-Container mit "Volle Browserbreite" verwendet
dieselbe Breitenlogik wie der bereits funktionierende Header/Hero.
Horizontal: bis 1480 px mit den globalen Seitenabständen.
Vertikal: gesamte verfügbare Inhaltsbreite rechts neben der Navigation
mit denselben responsiven Innenabständen wie der Fullwidth-Hero. */
.cms-content-container-fullwidth > .container {
width:min(1480px, calc(100% - var(--container-padding))) !important;
max-width:none !important;
margin-left:auto !important;
margin-right:auto !important;
}
@media (min-width: 821px) {
body.nav-layout-vertikal-links main .cms-content-container-fullwidth > .container {
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
padding-left:0 !important;
padding-right:0 !important;
box-sizing:border-box !important;
}
/* Step 449: Bei vertikaler Navigation bleibt die äußere Containerfläche
browserbreit. Die innere Gruppierung selbst darf jedoch keine zweite
Breitenbegrenzung erzeugen. Stattdessen erhalten die enthaltenen Widget-
Container exakt dieselbe Breitenregel wie Widgets außerhalb des Containers. */
body.nav-layout-vertikal-links main .cms-content-container-fullwidth .cms-content-container-inner {
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
body.nav-layout-vertikal-links main .cms-content-container-fullwidth .cms-content-container-inner > .widget-section > .container {
width:min(var(--container-width), calc(100% - var(--container-padding))) !important;
max-width:none !important;
margin-left:auto !important;
margin-right:auto !important;
padding-left:0 !important;
padding-right:0 !important;
box-sizing:border-box !important;
}
}
/* Step 418: Im Fullwidth-Modus darf der globale .section-Innenabstand
nicht zusätzlich oberhalb und unterhalb der Container-Inhalte wirken.
Der vertikale Abstand wird ausschließlich vom im Widget eingestellten
Container-Innenabstand bestimmt. */
.cms-content-container-fullwidth {
padding-top:0 !important;
padding-bottom:0 !important;
}
/* Step 422: Im Fullwidth-Modus bleibt nur die äußere Containerfläche
browserbreit. Die enthaltene Widget-Gruppe verwendet exakt dieselbe normale
Inhaltsbreite wie identische Widgets außerhalb eines Containers. Der im
Container eingestellte Innenabstand wirkt dort weiterhin nur oben/unten. */
.cms-content-container-fullwidth .cms-content-container-inner {
width:min(var(--container-width), calc(100% - var(--container-padding))) !important;
max-width:none !important;
margin-left:auto !important;
margin-right:auto !important;
box-sizing:border-box !important;
}
/* Step 877: Abschließende Prioritätsregel für normale Widgets mit expliziter
Bereichsbreite „Volle Browserbreite“. Frühere Navigations- und Fullwidth-
Kompatibilitätsregeln dürfen diese bewusste Auswahl nicht wieder auf die
zentrale Websitebreite begrenzen. */
.section-fullwidth.cms-widget-browser-fullwidth > .container {
width:calc(100% - var(--container-padding)) !important;
max-width:none !important;
margin-left:auto !important;
margin-right:auto !important;
}
@media (min-width: 821px) {
body.nav-layout-vertikal-links main .section-fullwidth.cms-widget-browser-fullwidth:not(.hero) > .container {
width:calc(100% - var(--container-padding)) !important;
max-width:none !important;
margin-left:auto !important;
margin-right:auto !important;
}
}
/* Step 417: Container-Innenabstand und Widget-Abstand sind getrennte
Größen. Der Benutzerwert bestimmt ausschließlich den Abstand zur äußeren
Containerkante. Zwischen den enthaltenen Widgets bleibt dagegen der globale
vertikale Widget-Abstand erhalten. Er wird je zur Hälfte auf die benachbarten
Widget-Abschnitte verteilt; außen entsteht dadurch kein zusätzlicher Abstand. */
.cms-content-container-inner > .widget-section {
padding-top:calc(var(--widget-gap-vertical) / 2) !important;
padding-bottom:calc(var(--widget-gap-vertical) / 2) !important;
margin-top:0 !important;
margin-bottom:0 !important;
}
.cms-content-container-inner > .widget-section:first-of-type {
padding-top:0 !important;
}
.cms-content-container-inner > .widget-section:last-of-type {
padding-bottom:0 !important;
}
.cms-content-container-inner > .widget-section > .container {
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
padding-left:0 !important;
padding-right:0 !important;
box-sizing:border-box !important;
}
/* Step 1630: eigenständiges Layout-Widget „Inhalt mit Sidebar“. */
.cms-sidebar-layout-grid {
display:grid;
grid-template-columns:minmax(0,var(--cms-sidebar-main,70fr)) minmax(0,var(--cms-sidebar-side,30fr));
gap:var(--cms-sidebar-gap,32px);
align-items:start;
}
.cms-sidebar-layout-grid.sidebar-left .cms-sidebar-main { grid-column:2; }
.cms-sidebar-layout-grid.sidebar-left .cms-sidebar-side { grid-column:1; grid-row:1; }
.cms-sidebar-layout-grid .cms-sidebar-side { min-width:0; }
.cms-sidebar-layout-grid.sidebar-hidden { grid-template-columns:minmax(0,1fr); }
.cms-sidebar-layout-grid.sidebar-hidden .cms-sidebar-side { display:none; }
.cms-sidebar-layout-grid .widget-section { padding:0 0 var(--widget-gap-vertical) !important; margin:0 !important; }
.cms-sidebar-layout-grid .widget-section > .container { width:100% !important; max-width:none !important; padding:0 !important; }
@media (max-width: 820px) {
.cms-sidebar-layout-grid { display:flex; flex-direction:column; gap:var(--cms-sidebar-gap,24px); }
.cms-sidebar-layout-grid .cms-sidebar-main, .cms-sidebar-layout-grid .cms-sidebar-side { width:100%; position:static !important; }
.cms-sidebar-layout-grid.mobile-sidebar-first .cms-sidebar-side { order:-1; }
.container { width:min(100% - 28px, 1160px); }
.nav { align-items:center; flex-direction:row !important; flex-wrap:wrap; padding:14px 0; gap:10px; }
.nav-logo-links, .nav-logo-rechts, .nav-logo-zentriert { flex-direction:row !important; justify-content:space-between; }
.nav .logo { flex:1 1 auto; }
.menu-toggle { display:inline-flex; flex:0 0 auto; margin-right:8px; }
.nav .menu { display:none; flex:0 0 100%; width:100%; justify-content:flex-start; margin:8px 0 0 0; }
.nav.is-open .menu { display:flex; }
body.nav-layout-vertikal-links .nav .menu { display:none; flex:0 0 100%; width:100%; justify-content:flex-start; margin:8px 0 0 0; }
body.nav-layout-vertikal-links .nav.is-open .menu { display:flex; }
.nav-menu-links .menu, .nav-menu-zentriert .menu, .nav-menu-rechts .menu { justify-content:flex-start; margin-left:0; margin-right:0; width:100%; }
.menu-list { flex-direction:column; align-items:stretch; width:100%; gap:6px; }
.menu-list > li { width:100%; }
.menu-list a { width:100%; justify-content:space-between; }
.submenu { position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; border-left:3px solid var(--line); border-radius:0; padding:4px 0 4px 14px; margin:2px 0 8px 10px; min-width:0; background:transparent; }
body.nav-layout-vertikal-links .submenu { display:none !important; }
body.nav-layout-vertikal-links .has-submenu.is-submenu-open > .submenu { display:block !important; }
body.nav-layout-vertikal-links .has-submenu.is-submenu-open > a .submenu-marker { transform:rotate(180deg); }
.submenu a { padding:7px 10px; }
.hero { padding:52px 0 42px; }
.hero-grid, .contact-box, .form-grid { grid-template-columns:1fr; }
.mini-card-fa-icon { width:100%; margin:0 0 12px; line-height:1; text-align:center; color:var(--primary); }
.grid3, .gallery, .widget-row, .before-after, .cards-widget.cards-image .grid3 { grid-template-columns:1fr; }
.cards-widget.cards-cols-2 .grid3, .cards-widget.cards-cols-3 .grid3, .cards-widget.cards-cols-4 .grid3, .cards-widget.cards-cols-5 .grid3, .cards-widget.cards-cols-6 .grid3 { grid-template-columns:1fr !important; }
.text-widget-actions { align-items:stretch; }
.text-widget-actions .btn { width:100%; }
.hero-card { min-height:230px; }
.slide { height:clamp(220px, 62vw, 360px); }
.slide-caption { left:14px; right:14px; bottom:12px; max-width:calc(100% - 28px); }
}
/* Step 395: Funktionskorrektur Effekte & Rahmen.
Die erweiterten Theme-Werte gelten jetzt sichtbar für die regulären
Kartenoberflächen des CMS und nicht nur für einzelne Sonderlayouts. */
.card,
.mini-card,
.contact-info-card,
.intro-card,
.cms-screenshot-card,
.hero-feature,
.cms-branding-inner {
border-width:var(--card-border-width) !important;
border-style:solid !important;
border-color:var(--card-border-color) !important;
transition:border-color var(--transition), border-width var(--transition), transform var(--transition), box-shadow var(--transition);
}
@media (max-width:820px) {
.image-text-layout { display:flex !important; flex-direction:column !important; }
}
/* Step 994: Im Smartphone-Querformat werden Hauptpunkte weiterhin
kompakt zweispaltig angeordnet. Öffnet ein Hauptpunkt sein Untermenü,
belegt dieser Eintrag die volle Breite; das Accordion bleibt dadurch
auch bei vielen Unterpunkten lesbar und die Gesamtfläche intern scrollbar. */
@media (max-width:820px) and (orientation:landscape) and (max-height:500px) {
.header .nav.is-open .menu,
body.nav-layout-vertikal-links .header .nav.is-open .menu {
padding:8px 12px 10px !important;
scrollbar-gutter:stable;
}
.header.below-hero-header .nav.is-open .menu {
top:var(--cms-mobile-menu-top,72px) !important;
bottom:0 !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
background:var(--header-background) !important;
}
.header .nav.is-open .menu-list,
body.nav-layout-vertikal-links .header .nav.is-open .menu-list {
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:4px 12px !important;
width:100% !important;
align-items:start !important;
}
.header .nav.is-open .menu-list > li,
body.nav-layout-vertikal-links .header .nav.is-open .menu-list > li {
width:100% !important;
min-width:0 !important;
}
.header .nav.is-open .menu-list > li.is-submenu-open,
body.nav-layout-vertikal-links .header .nav.is-open .menu-list > li.is-submenu-open {
grid-column:1 / -1 !important;
}
.header .nav.is-open .menu-list > li > a,
body.nav-layout-vertikal-links .header .nav.is-open .menu-list > li > a {
width:100% !important;
min-height:36px !important;
padding:7px 9px !important;
font-size:.92rem !important;
line-height:1.2 !important;
white-space:normal !important;
overflow-wrap:anywhere;
justify-content:flex-start !important;
}
.header .nav.is-open .menu-list > li.is-submenu-open > .submenu {
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:2px 10px !important;
width:calc(100% - 12px) !important;
}
}
/* Step 1652: Korrekturen ausschließlich für die vertikale Desktop-Navigation.
1. Logo, optionaler Titel und Untertitel bleiben innerhalb der verfügbaren
Navigationsbreite – auch wenn der Einklapp-Schalter daneben steht.
2. Das Layout-Widget „Inhalt mit Sidebar“ nutzt die nach der vertikalen
Navigation verbleibende Inhaltsbreite und beginnt am normalen linken
Seitenabstand, statt als schmaler Block erneut zentriert zu werden. */
@media (min-width:821px) {
body.nav-layout-vertikal-links .nav .logo {
min-width:0 !important;
max-width:100% !important;
overflow:hidden;
}
body.nav-layout-vertikal-links.vertical-menu-collapsible .nav .logo {
max-width:calc(100% - 48px) !important;
}
body.nav-layout-vertikal-links .nav .logo.has-image .site-logo {
flex:0 0 auto;
max-width:min(var(--logo-max-width), 52px) !important;
}
body.nav-layout-vertikal-links .nav .logo-text-stack {
flex:1 1 auto;
width:auto;
max-width:100%;
overflow:hidden;
}
body.nav-layout-vertikal-links .nav .logo-adjacent-text,
body.nav-layout-vertikal-links .nav .logo-subtitle-text {
max-width:100%;
white-space:normal;
overflow-wrap:break-word;
word-break:normal;
}
body.nav-layout-vertikal-links .nav .logo-adjacent-text {
font-size:min(18px, 1.125rem) !important;
line-height:1.1;
}
body.nav-layout-vertikal-links .nav .logo-subtitle-text {
font-size:min(13px, .8125rem) !important;
line-height:1.2;
}
body.nav-layout-vertikal-links .cms-sidebar-layout-section {
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
body.nav-layout-vertikal-links .cms-sidebar-layout-section > .container {
margin-left:var(--vertical-content-offset) !important;
margin-right:auto !important;
width:calc(100vw - var(--side-nav-width) - var(--vertical-content-offset) - var(--container-padding)) !important;
max-width:none !important;
box-sizing:border-box !important;
}
/* Step 1654: Der Hauptbereich dieses Widgets ist semantisch ebenfalls ein
. Er darf deshalb nicht den Seitenversatz der vertikalen Navigation
ein zweites Mal erben. */
body.nav-layout-vertikal-links .cms-sidebar-layout-grid > main.cms-sidebar-main {
margin-left:0 !important;
margin-right:0 !important;
width:100% !important;
max-width:none !important;
min-width:0 !important;
transition:none !important;
will-change:auto !important;
}
}
/* Step 1665: Eigenständige Off-Canvas-Navigation nach dem Vorbild eines
zentrierten Praxislogos mit dauerhaft sichtbarem Menü-Schalter. Die Regeln
sind vollständig auf diese Navigationsart begrenzt und verändern weder die
horizontale noch die vertikale Bestandsnavigation. */
body.nav-layout-overlay-menue-rechts .header .nav {
position:relative;
justify-content:center !important;
flex-direction:row !important;
flex-wrap:nowrap !important;
min-height:max(78px, calc(var(--logo-height) + 24px));
}
body.nav-layout-overlay-menue-rechts .header .nav .logo {
flex:0 1 auto !important;
width:auto !important;
/* Die Breite des Logo-Links darf nicht auf die reine Bildbreite begrenzt
werden: Zum Logo kann im CMS noch Name und Untertitel hinzukommen. */
max-width:calc(100% - 220px) !important;
margin:0 auto !important;
justify-content:center !important;
}
body.nav-layout-overlay-menue-rechts .overlay-menu-toggle {
display:inline-flex !important;
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
width:auto;
min-width:88px;
height:44px;
padding:0 4px 0 12px;
gap:9px;
border:0;
background:transparent;
color:var(--header-text);
border-radius:10px;
z-index:2003;
}
body.nav-layout-overlay-menue-rechts .overlay-menu-toggle:hover,
body.nav-layout-overlay-menue-rechts .overlay-menu-toggle:focus-visible {
background:rgba(127,127,127,.10);
outline:2px solid color-mix(in srgb,var(--primary) 55%,transparent);
outline-offset:2px;
}
body.nav-layout-overlay-menue-rechts .overlay-menu-toggle-label {
font-size:.98rem;
font-weight:650;
line-height:1;
}
body.nav-layout-overlay-menue-rechts .header .nav .overlay-menu-panel {
display:flex !important;
position:fixed !important;
inset:0 0 0 auto !important;
width:min(360px, 88vw) !important;
height:100vh !important;
height:100dvh !important;
max-width:none !important;
max-height:none !important;
margin:0 !important;
padding:82px 24px 30px !important;
flex-direction:column !important;
align-items:stretch !important;
justify-content:flex-start !important;
overflow-x:hidden !important;
overflow-y:auto !important;
overscroll-behavior:contain;
background:var(--primary) !important;
color:#ffffff !important;
border:0 !important;
border-radius:0 !important;
box-shadow:-22px 0 52px rgba(15,23,42,.28) !important;
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateX(102%);
transition:transform .3s cubic-bezier(.22,.61,.36,1), opacity .22s ease, visibility 0s linear .3s;
z-index:2147483001 !important;
}
body.nav-layout-overlay-menue-rechts .header .nav.is-open .overlay-menu-panel {
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateX(0);
transition-delay:0s;
}
body.nav-layout-overlay-menue-rechts .overlay-menu-panel .menu-list {
display:flex !important;
width:100% !important;
flex-direction:column !important;
align-items:stretch !important;
gap:3px !important;
margin:0 !important;
padding:0 !important;
}
body.nav-layout-overlay-menue-rechts .overlay-menu-panel .menu-list > li { width:100% !important; }
body.nav-layout-overlay-menue-rechts .overlay-menu-panel .menu-list a {
display:flex !important;
width:100% !important;
min-height:50px;
align-items:center;
padding:12px 14px !important;
color:#ffffff !important;
background:transparent !important;
border:0 !important;
border-radius:10px !important;
font-weight:650;
text-decoration:none;
white-space:normal;
}
body.nav-layout-overlay-menue-rechts .overlay-menu-panel .menu-list a:hover,
body.nav-layout-overlay-menue-rechts .overlay-menu-panel .menu-list a:focus-visible,
body.nav-layout-overlay-menue-rechts .overlay-menu-panel .menu-list a.is-active {
background:rgba(255,255,255,.16) !important;
color:#ffffff !important;
}
body.nav-layout-overlay-menue-rechts .overlay-menu-close {
position:absolute;
top:20px;
right:20px;
width:42px;
height:42px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:0;
border:1px solid rgba(255,255,255,.28);
border-radius:50%;
background:rgba(255,255,255,.10);
color:#ffffff;
font-size:1.85rem;
line-height:1;
cursor:pointer;
}
body.nav-layout-overlay-menue-rechts .overlay-menu-close:hover,
body.nav-layout-overlay-menue-rechts .overlay-menu-close:focus-visible {
background:rgba(255,255,255,.22);
outline:2px solid rgba(255,255,255,.72);
outline-offset:2px;
}
body.nav-layout-overlay-menue-rechts .overlay-menu-backdrop {
display:block;
position:fixed;
inset:0;
width:100vw;
height:100vh;
height:100dvh;
padding:0;
border:0;
background:rgba(15,23,42,.46);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .24s ease, visibility 0s linear .3s;
z-index:2147483000;
}
body.nav-layout-overlay-menue-rechts .header .nav.is-open .overlay-menu-backdrop {
opacity:1;
visibility:visible;
pointer-events:auto;
transition-delay:0s;
}
body.nav-layout-overlay-menue-rechts.overlay-nav-open { overflow:hidden !important; }
body.nav-layout-overlay-menue-rechts .overlay-menu-panel .has-submenu > .submenu {
display:none !important;
position:static !important;
width:calc(100% - 12px) !important;
min-width:0 !important;
margin:2px 0 7px 12px !important;
padding:3px 0 3px 10px !important;
border:0 !important;
border-left:2px solid rgba(255,255,255,.36) !important;
border-radius:0 !important;
box-shadow:none !important;
background:transparent !important;
opacity:1 !important;
visibility:visible !important;
transform:none !important;
}
body.nav-layout-overlay-menue-rechts .overlay-menu-panel .has-submenu.is-submenu-open > .submenu { display:block !important; }
body.nav-layout-overlay-menue-rechts .overlay-menu-panel .submenu-marker {
display:inline-flex !important;
margin-left:auto !important;
color:inherit !important;
}
body.nav-layout-overlay-menue-rechts .overlay-menu-panel .has-submenu.is-submenu-open > a .submenu-chevron { transform:rotate(180deg); }
@media (max-width:520px) {
body.nav-layout-overlay-menue-rechts .header .nav .logo { max-width:calc(100% - 74px) !important; margin-left:0 !important; }
body.nav-layout-overlay-menue-rechts .overlay-menu-toggle { right:0; min-width:44px; padding:0 10px; }
body.nav-layout-overlay-menue-rechts .overlay-menu-toggle-label { display:none; }
body.nav-layout-overlay-menue-rechts .header .nav .overlay-menu-panel { width:min(330px, 92vw) !important; padding:76px 18px 24px !important; }
}
@media (prefers-reduced-motion:reduce) {
body.nav-layout-overlay-menue-rechts .header .nav .overlay-menu-panel,
body.nav-layout-overlay-menue-rechts .overlay-menu-backdrop { transition:none !important; }
}
/* Step 1596: Einheitliche feste Überschriftengrößen für alle sichtbaren
Website-Inhalte und Inhaltswidgets. Funktionale Oberflächen außerhalb von
(Footer, Cookie-Manager, Banner und Barrierefreiheit) behalten ihre
bewusst kompakteren Größen. Der automatisch erzeugte Hero liegt teilweise
direkt unter und wird deshalb zusätzlich separat erfasst. */
main h1,
body > .hero h1,
.preview-shell .hero h1 {
font-size:var(--heading-h1-size) !important;
line-height:1.15 !important;
}
main h2 {
font-size:var(--heading-h2-size) !important;
line-height:1.2 !important;
}
main h3,
main .mini-card .mini-card-title {
font-size:var(--heading-h3-size) !important;
line-height:1.25 !important;
}
/* Step 1639: Automatische sprachgerechte Silbentrennung für sämtliche
Website-Inhalte. Das zentrale liefert dem Browser die
deutschen Trennregeln. Bedienelemente sowie technische Inhalte werden
ausdrücklich ausgenommen, damit Navigation, Schaltflächen, Formulare,
Telefonnummern, E-Mail-Adressen und Code unverändert lesbar bleiben. */
main {
-webkit-hyphens:auto;
hyphens:auto;
overflow-wrap:anywhere;
word-break:normal;
}
main :where(
.btn,
button,
input,
textarea,
select,
option,
code,
pre,
[contenteditable="true"],
a[href^="mailto:"],
a[href^="tel:"]
) {
-webkit-hyphens:none;
hyphens:none;
overflow-wrap:normal;
word-break:normal;
}
/* Step 1859: Smaller content H1 headings on phones only. Landscape uses
a short touch viewport, leaving tablet and desktop typography unchanged. */
@media (max-width:600px), (max-width:950px) and (max-height:500px) and (orientation:landscape) and (pointer:coarse) {
main h1,
body > .hero h1,
.preview-shell .hero h1 {
font-size:min(var(--heading-h1-size), clamp(1.25rem, 5.5vw, 1.5rem)) !important;
line-height:1.2 !important;
-webkit-hyphens:none;
hyphens:none;
overflow-wrap:break-word;
word-break:normal;
text-wrap:balance;
}
main h1 *,
body > .hero h1 *,
.preview-shell .hero h1 * {
-webkit-hyphens:none;
hyphens:none;
overflow-wrap:break-word;
word-break:normal;
}
}
.google-maps-widget{overflow:hidden}
.google-maps-embed{display:block;border-radius:inherit}
.google-maps-placeholder{padding:18px;border:1px dashed #cbd5e1;border-radius:10px;color:#64748b;background:#f8fafc}
.google-maps-consent-placeholder{min-height:260px;display:flex;align-items:center;justify-content:center;padding:24px;border:1px dashed #cbd5e1;border-radius:var(--card-radius);background:#f8fafc;color:#334155;text-align:center}
.google-maps-consent-inner{max-width:520px;margin:0 auto}
.google-maps-consent-inner strong{display:block;font-size:1.15rem;margin-bottom:8px;color:#0f172a}
.google-maps-consent-inner p{margin:0 0 14px;color:#64748b}
.google-maps-consent-placeholder.is-loaded{padding:0;border:0;background:transparent;display:block;text-align:initial}
.youtube-widget-wrap{width:100%;max-width:var(--youtube-max-width,860px)}
.youtube-widget-wrap.align-left{margin-right:auto}
.youtube-widget-wrap.align-center{margin-left:auto;margin-right:auto}
.youtube-widget-wrap.align-right{margin-left:auto}
.youtube-consent-placeholder{position:relative;min-height:260px;display:flex;align-items:center;justify-content:center;padding:24px;border:1px dashed #cbd5e1;border-radius:var(--card-radius);background:#f8fafc;color:#334155;text-align:center;aspect-ratio:16/9;overflow:hidden}
.youtube-consent-placeholder.ratio-4-3{aspect-ratio:4/3}
.youtube-consent-placeholder.ratio-1-1{aspect-ratio:1/1}
.youtube-consent-placeholder.is-rounded{border-radius:var(--card-radius)}
.youtube-consent-placeholder.has-shadow{box-shadow:var(--card-shadow)}
.youtube-consent-inner{max-width:520px;margin:0 auto}
.youtube-consent-inner strong{display:block;font-size:1.15rem;margin-bottom:8px;color:#0f172a}
.youtube-consent-inner p{margin:0 0 14px;color:#64748b}
.youtube-consent-placeholder.is-loaded{padding:0;border:0;background:transparent;display:block;text-align:initial}
.youtube-consent-placeholder iframe{position:absolute;inset:0;width:100%!important;height:100%!important}
.youtube-placeholder-empty{padding:22px;border:1px dashed #cbd5e1;border-radius:var(--card-radius);background:#f8fafc;color:#64748b}
.cms-table-responsive{width:100%;min-width:0}
.cms-table-wrap{width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;padding-bottom:1px}
/* Die innere Tabellenfläche darf breitere Tabellen nicht abschneiden. Das
horizontale Scrollen gehört ausschließlich zur äußeren .cms-table-wrap. */
.cms-table-clip{width:100%;min-width:560px;overflow:visible;border-radius:0;background:var(--table-cell-bg,#ffffff)}
.cms-table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;background:var(--table-cell-bg,#ffffff);color:var(--table-cell-text,#1f2937);-webkit-hyphens:none;hyphens:none;overflow-wrap:normal;word-break:normal}
.cms-table th,.cms-table td{padding:var(--table-cell-padding,12px);border:0;border-right:var(--table-border-width,1px) solid var(--table-border,#d1d5db);border-bottom:var(--table-border-width,1px) solid var(--table-border,#d1d5db);text-align:left;vertical-align:top;white-space:normal;-webkit-hyphens:none;hyphens:none;overflow-wrap:normal;word-break:normal}
.cms-table tr>*:first-child{border-left:var(--table-border-width,1px) solid var(--table-border,#d1d5db)}
.cms-table thead tr:first-child>*{border-top:var(--table-border-width,1px) solid var(--table-border,#d1d5db)}
.cms-table>tbody:first-child>tr:first-child>*{border-top:var(--table-border-width,1px) solid var(--table-border,#d1d5db)}
.cms-table thead tr:first-child>*:first-child,.cms-table>tbody:first-child>tr:first-child>*:first-child{border-top-left-radius:0}
.cms-table thead tr:first-child>*:last-child,.cms-table>tbody:first-child>tr:first-child>*:last-child{border-top-right-radius:0}
.cms-table tbody tr:last-child>*:first-child{border-bottom-left-radius:0}
.cms-table tbody tr:last-child>*:last-child{border-bottom-right-radius:0}
.cms-table th{background:var(--table-head-bg,#1f2937);color:var(--table-head-text,#ffffff);font-weight:700}
.cms-table.is-zebra tbody tr:nth-child(even) td{background:var(--table-zebra-bg,#f8fafc)}
.cms-table .align-center{text-align:center}.cms-table .align-right{text-align:right}.cms-table .align-left{text-align:left}
.cms-table-link{color:var(--primary);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.cms-table-button{display:inline-flex;align-items:center;justify-content:center;padding:8px 13px;font-size:.92rem;white-space:nowrap}
.cms-table-icon{display:inline-flex;align-items:center;gap:7px;font-size:1.15em;line-height:1}
.cms-table-fa-icon{font-family:FontAwesome;font-style:normal;font-weight:normal}
.cms-table-icon>span{font-size:.88em}
.cms-table-badge{display:inline-flex;align-items:center;justify-content:center;padding:5px 10px;border-radius:999px;background:var(--badge-bg);color:var(--badge-text);font-size:.82rem;font-weight:700;line-height:1.15;white-space:nowrap}
.cms-table-card-view{display:none}
.cms-table-row-cards,.cms-table-column-cards{gap:12px}
.cms-table-card,.cms-table-card-group{min-width:0}
.cms-table-card{overflow:hidden;border:1px solid var(--table-border,#d1d5db);border-radius:9px;background:var(--table-cell-bg,#ffffff);color:var(--table-cell-text,#1f2937)}
.cms-table-card-accent,.cms-table-group-accent{padding:10px 12px;border-left:4px solid var(--primary);background:color-mix(in srgb,var(--primary) 8%,var(--table-cell-bg,#ffffff));font-weight:700;color:var(--table-cell-text,#1f2937)}
.cms-table-card-detail{display:grid;grid-template-columns:minmax(110px,35%) minmax(0,1fr);gap:10px;padding:8px 12px;border-top:1px solid var(--table-border,#d1d5db);line-height:1.4}
.cms-table-card-label{color:color-mix(in srgb,var(--table-cell-text,#1f2937) 66%,transparent);font-weight:700}
.cms-table-card-value{min-width:0}
.cms-table-card-group{display:block}
.cms-table-group-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.cms-table-compact-card{min-width:0;padding:10px 12px;border:1px solid var(--table-border,#d1d5db);border-radius:8px;background:var(--table-cell-bg,#ffffff);color:var(--table-cell-text,#1f2937);line-height:1.4}
@media(min-width:601px) and (max-width:1100px){
.cms-table-responsive.tablet-cards>.cms-table-wrap{display:none}
.cms-table-responsive.tablet-cards.cards-rows>.cms-table-row-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.cms-table-responsive.tablet-cards.cards-columns>.cms-table-column-cards{display:grid}
}
@media(max-width:1100px){
.cms-table-wrap{padding-bottom:10px;scrollbar-width:thin;scrollbar-color:#94a3b8 #e2e8f0}
.cms-table-wrap::-webkit-scrollbar{height:10px}
.cms-table-wrap::-webkit-scrollbar-track{background:#e2e8f0;border-radius:999px}
.cms-table-wrap::-webkit-scrollbar-thumb{background:#94a3b8;border-radius:999px;border:2px solid #e2e8f0}
.cms-table-clip{min-width:640px}
.cms-table th,.cms-table td{padding:max(8px,calc(var(--table-cell-padding,12px) * .8))}
}
@media(max-width:600px){
.cms-table-responsive.phone-cards>.cms-table-wrap{display:none}
.cms-table-responsive.phone-cards.cards-rows>.cms-table-row-cards{display:grid;grid-template-columns:1fr}
.cms-table-responsive.phone-cards.cards-columns>.cms-table-column-cards{display:grid}
.cms-table-group-cards{grid-template-columns:1fr;gap:7px}
.cms-table-card-detail{grid-template-columns:minmax(96px,34%) minmax(0,1fr);gap:8px;padding:7px 10px}
.cms-table-card-accent,.cms-table-group-accent,.cms-table-compact-card{padding:9px 10px}
}
.site-footer{margin-top:56px;background:var(--footer-bg,var(--footer-background,#0f172a));color:var(--footer-text,#e5e7eb);padding:42px 0 30px}
.site-footer a{color:var(--footer-link,#fff);text-decoration:none}.site-footer a:hover{text-decoration:underline}
.site-footer-cookie-button{appearance:none;border:0;padding:0;margin:0;background:transparent;color:var(--footer-link,#fff);font:inherit;line-height:inherit;cursor:pointer;text-decoration:none}.site-footer-cookie-button:hover{text-decoration:underline}
.site-footer-inner{width:min(var(--container-width),calc(100% - var(--container-padding)));max-width:none;margin:0 auto;display:grid;grid-template-columns:1.15fr 1fr .9fr;gap:42px;align-items:start}
.site-footer-inner.has-custom-column{grid-template-columns:1.15fr 1fr 1fr .9fr;gap:32px}
.site-footer-block h3{margin:0 0 10px;color:var(--footer-heading,#fff);font-size:1rem}
.site-footer-block p,.site-footer-block div{color:var(--footer-text,#cbd5e1);line-height:1.7}
.site-footer-custom-content{margin:0}
.site-footer-contact-line{margin:0;display:flex;align-items:flex-start;gap:8px}
.site-footer-contact-line .contact-field-icon{margin-top:.34em}
.site-footer-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
.site-footer-link-item{display:inline-flex;align-items:baseline;white-space:nowrap}
.site-footer-link-item:not(:last-child)::after{content:"·";margin-left:8px;color:var(--footer-text,#cbd5e1);opacity:.9}
.site-footer-social{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.site-footer-social .site-footer-link-item:not(:last-child)::after{display:none}
.site-footer-social-link{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.site-footer-social-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid currentColor;border-radius:50%;font-size:.78rem;font-weight:800;line-height:1;transition:transform .15s ease,background-color .15s ease}
.site-footer-social-link:hover{text-decoration:none!important}
.site-footer-social-link:hover .site-footer-social-icon{transform:translateY(-1px);background:rgba(255,255,255,.14)}
.site-footer-copy{font-size:.95rem}
.site-footer-bottom{width:min(var(--container-width),calc(100% - var(--container-padding)));max-width:none;margin:30px auto 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.22);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 18px;color:var(--footer-text,#cbd5e1);font-size:.95rem;line-height:1.5}
.site-footer-bottom span{white-space:nowrap}
.site-footer-bottom a{color:var(--footer-link,#fff);font-weight:700;text-decoration:none}
.site-footer-bottom a:hover{text-decoration:underline}
@media (max-width:1100px) and (min-width:761px){.site-footer-inner.has-custom-column,.site-footer-inner.has-custom-column.navigation-hidden{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 34px}}
@media (max-width:760px){.site-footer-navigation-space{display:none}.site-footer-inner,.site-footer-inner.has-custom-column,.site-footer-inner.navigation-hidden,.site-footer-inner.has-custom-column.navigation-hidden{grid-template-columns:1fr;gap:22px}.site-footer-bottom{flex-direction:column;gap:8px}.site-footer-bottom span{white-space:normal}}
/* Step 1666-1676: optionale Navigation im Headerbild und kompakter Sticky-Zustand. */
/* Step 1704: Gemeinsame Burger-Gestaltung fuer mobile und einklappbare vertikale Navigation. */
body .menu-toggle:not(.overlay-menu-toggle) {
color:var(--header-text) !important;
border:1px solid var(--header-border) !important;
background:rgba(127,127,127,.12) !important;
border-radius:12px !important;
}
body.header-over-hero .header:not(.below-hero-header) {
background:linear-gradient(to bottom,
rgba(255,255,255,0.00) 0%,
rgba(255,255,255,0.00) 68%,
rgba(255,255,255,0.00) 100%);
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
border-bottom:0 !important;
box-shadow:none;
transition:background .28s ease, box-shadow .28s ease, border-color .28s ease;
}
body.header-over-hero.header-scrolled .header:not(.below-hero-header) {
background:var(--header-background);
backdrop-filter:blur(16px) !important;
-webkit-backdrop-filter:blur(16px) !important;
border-bottom:1px solid var(--header-border) !important;
box-shadow:var(--header-shadow);
}
body.header-over-hero .header.sticky:not(.below-hero-header),
body.header-over-hero .header:not(.below-hero-header) {
position:fixed !important; top:0 !important; left:0 !important; right:0 !important;
width:100% !important; z-index:1000 !important;
}
body.header-over-hero .header.sticky + .hero,
body.header-over-hero .header.sticky + .hero-banner { margin-top:0 !important; }
body.header-over-hero .header.sticky + main { padding-top:0 !important; }
/* Step 1671/1674: Nur auf Desktop belegt ein Vollbild-Hero mit darueberliegender
Navigation die komplette Viewporthoehe. Tablet und Smartphone behalten die
bewaehrte proportionale Headerhoehe aus der zentralen Responsive-Regel; so
endet der Hero direkt mit dem Bild, ohne graue Restflaeche oder Extrembeschnitt. */
@media (min-width:821px) {
body.header-over-hero .hero-overlay-fullwidth.hero-overlay-height-vollbild,
body.header-over-hero .hero-banner.height-vollbild {
height:100vh !important;
height:100svh !important;
min-height:0 !important;
aspect-ratio:auto !important;
}
}
/* Step 1676/1692: Liegt die Navigation mobil ueber einem fixierten Hero,
beginnt das eigentliche Headerbild unterhalb der Kopfzeile. Die Kopfzeilen-
hoehe muss deshalb zusaetzlich zur proportionalen Bildhoehe in den Hero
eingehen; andernfalls fehlt unten genau dieser Bildanteil. Die Regel gilt
auch fuer Header mit Textrahmen, deren Inhalte mobil ausgeblendet werden. */
@media (max-width:820px) {
body.header-over-hero.hero-image-fixed.hero-image-fixed-mobile
:is(main > .hero-overlay-fullwidth,
body > .hero-overlay-fullwidth)[data-cms-hero-has-image="1"].hero-overlay-height-vollbild {
height:calc(100vw / var(--hero-image-ratio, 2.258824) + var(--cms-fixed-hero-mobile-offset, 72px)) !important;
min-height:0 !important;
aspect-ratio:auto !important;
background-size:100% auto !important;
background-position:center var(--cms-fixed-hero-mobile-offset, 72px) !important;
}
}
body.header-scroll-compact .header:not(.below-hero-header) .nav,
body.header-scroll-compact .header:not(.below-hero-header) .site-logo {
transition:min-height .28s ease, height .28s ease, max-height .28s ease, width .28s ease;
}
body.header-scroll-compact.header-scrolled .header:not(.below-hero-header) .nav {
min-height:64px !important;
}
body.header-scroll-compact.header-scrolled .header:not(.below-hero-header) .site-logo {
height:48px !important;
max-height:48px !important;
width:auto !important;
}
@media (prefers-reduced-motion:reduce) {
body.header-over-hero .header:not(.below-hero-header),
body.header-scroll-compact .header:not(.below-hero-header) .nav,
body.header-scroll-compact .header:not(.below-hero-header) .site-logo { transition:none !important; }
}
.hero:not(.hero-overlay-fullwidth)::after{background:#2563eb1f;}
.hero-overlay-no-image::after{content:"";display:block;position:absolute;inset:auto;left:auto;bottom:auto;right:-120px;top:-160px;width:420px;height:420px;border-radius:50%;background:#2563eb1f;filter:blur(2px);transform:none;}
.hero:not(.hero-overlay-fullwidth)::before,.hero-overlay-no-image::before{display:none!important;}