/* dist/style.css (Layer "legacy") wird in snippets/legacy-css.php vor dieser Datei eingebunden (mit Inhalts-Hash) */
/* Design-Tokens nach DESIGN.md. Eigene Regeln stehen ungelayert und gewinnen gegen die Altdatei. */
:root {
--red: #d40001;
--red-dark: #b91d16;
--red-darker: #9a1712;
--ink: #111111;
--ink-soft: #595959;
--dark: #1d1d1d;
--paper: #ffffff;
--blush: rgba(212, 0, 1, .06);
--space-4: 4px;
--space-8: 8px;
--space-16: 16px;
--space-24: 24px;
--space-32: 32px;
--space-48: 48px;
--space-72: 72px;
--space-96: 96px;
--radius: 4px;
--shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
/* Zusatz-Token: Werte aus DESIGN.md (Button sekundär: schwarz, Hover #333) */
:root {
--button-black: #000;
--button-black-hover: #333;
--diag: 6vw; /* ein Winkel für alle Diagonalen: 6 % der Breite */
--bar-h: 72px; /* Kopfzeile */
--section-y: var(--space-96);
}
@media (max-width: 1023px) { :root { --bar-h: 64px; } }
@media (max-width: 767px) { :root { --section-y: var(--space-48); } }
/* ---------------------------------------------------------------
1. Altdatei-Regeln mit !important neutralisieren.
Layer-Regeln mit !important schlagen ungelayerte, deshalb im Layer "legacy",
später in der Reihenfolge = gewinnt bei gleicher Spezifität.
Liste: *:focus outline, .button radius, .container padding, #slider.loaded clip-path.
--------------------------------------------------------------- */
@layer legacy {
*:focus:not(:focus-visible) { outline: none !important; }
:focus-visible { outline: 2px solid var(--red-dark) !important; outline-offset: 2px !important; }
#angebote :focus-visible, .contact :focus-visible, .mobile-menu :focus-visible,
.footer :focus-visible, #slider :focus-visible,
.site-header.is-home:not(.is-scrolled) :focus-visible { outline-color: var(--paper) !important; }
.button, .ReadMore + [data-readmore-toggle] { border-radius: var(--radius) !important; }
.ReadMore + [data-readmore-toggle] { width: auto !important; }
.is-size-7 { font-size: 14px !important; }
.modal a.close-modal { top: var(--space-8) !important; right: var(--space-8) !important; }
.is-contact .contact-form input:not([type=submit]), .is-contact .contact-form textarea { border: 1px solid var(--ink-soft) !important; }
.blocker { background-color: color-mix(in srgb, var(--dark) 80%, transparent) !important; }
.modal { background: var(--paper) !important; border-radius: var(--radius) !important; }
.container { padding-left: var(--space-24) !important; padding-right: var(--space-24) !important; }
@media (max-width: 599px) {
.container { padding-left: var(--space-16) !important; padding-right: var(--space-16) !important; }
}
#slider.loaded {
-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--diag)), 0 100%) !important;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--diag)), 0 100%) !important;
}
}
/* ---------------------------------------------------------------
2. Grundlagen
--------------------------------------------------------------- */
html { scroll-padding-top: var(--bar-h); }
html.menu-open { overflow: hidden; }
body { color: var(--ink); line-height: 1.6; }
h1, h2, h3 { line-height: 1.25; }
.container { max-width: 1248px; width: 100%; margin-left: auto; margin-right: auto; }
p a, .content a:not(.button):not(.text-link) { color: var(--red-dark); font-weight: 700; }
p a:hover, .content a:not(.button):not(.text-link):hover { color: var(--red-darker); }
p em { color: var(--red); }
.is-size-7 { color: var(--ink-soft); }
/* Scroll-Einblendungen nur mit JS; ohne JS ist alles sofort sichtbar */
html:not(.js) [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
/* Abstände Überschrift -> Text */
.content h1, .content h2, h3.red { margin-top: 0; margin-bottom: var(--space-16); }
.content h3.red:not(:first-child) { margin-top: 0; }
p.subheadline, div.subheadline { width: min(100%, 68ch); margin: 0 auto; padding: 0; }
p.subheadline p:last-child, div.subheadline p:last-child { margin-bottom: 0; }
.content.has-text-centered { margin-bottom: var(--space-48); }
/* ---------------------------------------------------------------
3. Buttons: zwei Varianten, Radius 4 px, 44 px hoch
primär = --red-dark gefüllt; sekundär = schwarz (auf roten Flächen u. a.)
--------------------------------------------------------------- */
.button {
display: inline-flex; align-items: center; justify-content: center;
height: auto; min-height: 44px; padding: var(--space-8) var(--space-24);
font-size: 16px; line-height: 1.25; white-space: nowrap;
border: 0; border-radius: var(--radius);
background: var(--red-dark); color: var(--paper);
text-decoration: none; transition: none; box-shadow: none;
}
.button:hover, .button:focus, .button:active { background: var(--red-darker); color: var(--paper); box-shadow: none; }
.button.black, .button.is-medium, .button.openbelow,
#angebote .button, .contact .button, #bild.map-btn { background: var(--button-black); color: var(--paper); }
.button.black:hover, .button.is-medium:hover, .button.openbelow:hover,
#angebote .button:hover, .contact .button:hover, #bild.map-btn:hover { background: var(--button-black-hover); color: var(--paper); }
.button.is-medium { font-size: 18px; }
.button.is-medium.active { background: var(--red-dark); color: var(--paper); }
.button.is-medium.active:hover { background: var(--red-darker); }
.buttons.is-centered { gap: var(--space-8); }
.buttons .button { margin: 0; }
/* Textlink "Mehr lesen" */
.text-link {
display: inline-flex; align-items: center; gap: var(--space-4);
min-height: 44px; color: var(--red-dark); font-weight: 700; text-decoration: none;
}
.text-link::after { content: "\2192"; display: inline-block; transition: transform .2s ease-out; }
.text-link:hover { color: var(--red-darker); }
.text-link:hover::after, .text-link:focus-visible::after { transform: translateX(4px); }
.card .text-link::before { content: ""; position: absolute; inset: 0; } /* ganze Karte klickbar */
/* Karte "Mehr lesen" in Startseite braucht Bezug */
.card { position: relative; }
/* ---------------------------------------------------------------
4. Kopfzeile, Untermenü, Mobilmenü
--------------------------------------------------------------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--paper); }
.site-header.is-home:not(.is-scrolled) {
background: linear-gradient(to bottom, color-mix(in srgb, var(--dark) 60%, transparent), transparent);
}
.site-header.is-home.is-scrolled, .site-header:not(.is-home) {
border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.site-header-bar {
display: flex; align-items: center; gap: var(--space-24);
height: var(--bar-h); padding: 0 var(--space-24);
}
.site-header.is-home:not(.is-scrolled) .site-header-bar { padding-left: 0; }
.site-logo { position: relative; flex: 0 0 auto; display: block; height: var(--bar-h); width: calc((var(--bar-h) - 16px) * 1.93); }
.site-logo img { position: absolute; left: 0; max-width: none; }
.logo-small { display: block; top: 8px; height: calc(var(--bar-h) - 16px); width: auto; }
.logo-full { display: none; top: 0; width: clamp(220px, 28vw, 400px); height: auto; }
.site-header.is-home { --logo-w: clamp(220px, 28vw, 400px); }
.site-header.is-home:not(.is-scrolled) .site-logo { width: var(--logo-w); }
.site-header.is-home:not(.is-scrolled) .logo-full { display: block; }
.site-header.is-home:not(.is-scrolled) .logo-small { display: none; }
.site-nav { margin-left: auto; display: none; }
.site-nav ul, .social-icons, .site-subnav ul { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.site-nav ul { gap: var(--space-4); }
.site-nav a, .site-subnav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.site-nav a { padding: 0 var(--space-8); font-size: 16px; }
.site-nav a::after, .site-subnav a::after {
content: ""; position: absolute; left: var(--space-8); right: var(--space-8); bottom: var(--space-8);
height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .2s ease-out;
}
.site-nav a:hover::after, .site-nav a[aria-current]::after,
.site-subnav a:hover::after, .site-subnav a[aria-current]::after { transform: scaleX(1); }
.site-header.is-home:not(.is-scrolled) .site-nav a,
.site-header.is-home:not(.is-scrolled) .social-icons a { color: var(--paper); }
.social-icons { gap: var(--space-16); }
.site-header-bar .social-icons { display: none; }
.social-icons a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--ink); font-size: 24px; }
.social-icons a:hover { color: var(--red-dark); }
.social-icons li { margin: 0; }
.site-subnav { display: none; background: var(--dark); }
.site-subnav ul { justify-content: center; max-width: 1248px; margin: 0 auto; }
.site-subnav li + li::before { content: ""; width: 1px; height: 16px; background: color-mix(in srgb, var(--paper) 40%, transparent); }
.site-subnav a { padding: 0 var(--space-16); color: var(--paper); }
.site-subnav a[aria-current] { font-weight: 700; }
.site-subnav a::after { left: var(--space-16); right: var(--space-16); }
body.is-subpage { padding-top: var(--bar-h); }
#slider { margin-top: 0; }
/* Mobilmenü */
.nav-toggle {
position: fixed; top: calc((var(--bar-h) - 44px) / 2); right: var(--space-8); z-index: 1300;
display: flex; align-items: center; justify-content: center;
width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer;
}
body#home-page:not(.is-scrolled) .nav-toggle { color: var(--paper); }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 28px; height: 2px; background: currentColor; }
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; transition: transform .2s ease-out; }
.nav-toggle-bars::before { transform: translateY(-8px); }
.nav-toggle-bars::after { transform: translateY(8px); }
body.menu-open .nav-toggle { color: var(--paper); }
body.menu-open .nav-toggle-bars { background: transparent; }
body.menu-open .nav-toggle-bars::before { transform: rotate(45deg); }
body.menu-open .nav-toggle-bars::after { transform: rotate(-45deg); }
.menu-backdrop {
position: fixed; inset: 0; z-index: 1100; background: var(--dark);
opacity: 0; visibility: hidden; transition: opacity .25s ease-out, visibility 0s .25s;
}
body.menu-open .menu-backdrop { opacity: .6; visibility: visible; transition: opacity .25s ease-out; }
.mobile-menu {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 1200;
width: min(85vw, 420px); padding: calc(var(--bar-h) + var(--space-8)) 0 var(--space-32);
background: var(--red); color: var(--paper); overflow-y: auto; overscroll-behavior: contain;
transform: translateX(100%); visibility: hidden; transition: transform .25s ease-out, visibility 0s .25s;
}
body.menu-open .mobile-menu { transform: none; visibility: visible; transition: transform .25s ease-out; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu a { display: flex; align-items: center; min-height: 56px; padding: 0 var(--space-24); color: var(--paper); font-size: 20px; text-decoration: none; }
.mobile-menu a[aria-current] { font-weight: 700; text-decoration: underline; text-underline-offset: 6px; }
.mobile-menu .mobile-submenu { margin: 0 0 var(--space-8) var(--space-24); border-left: 2px solid color-mix(in srgb, var(--paper) 60%, transparent); }
.mobile-menu .mobile-submenu a { font-size: 18px; padding-left: var(--space-16); }
.mobile-menu .social-icons { padding: var(--space-16) var(--space-16) 0; gap: var(--space-16); }
.mobile-menu .social-icons a { color: var(--paper); padding: 0; width: 48px; height: 48px; min-height: 48px; font-size: 32px; }
.mobile-menu:focus { outline: none; }
@media (min-width: 1024px) {
.nav-toggle, .menu-backdrop, .mobile-menu { display: none; }
.site-nav { display: block; }
.site-header-bar { display: grid; grid-template-columns: 1fr auto 1fr; }
.site-header-bar .social-icons { display: flex; justify-self: end; }
.site-nav { margin: 0; }
.site-nav a { padding: 0 var(--space-8); }
.site-subnav { display: block; }
body.has-subnav { padding-top: calc(var(--bar-h) + 44px); }
}
@media (min-width: 1200px) {
.site-nav a { padding: 0 var(--space-16); font-size: 18px; }
.site-nav a::after { left: var(--space-16); right: var(--space-16); }
}
/* Header-Animation Startseite: Logo und Claim blenden ruhig ein */
@keyframes rise-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes rise-in-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
html.js:not(.is-ready) #home-page .logo-full,
html.js:not(.is-ready) #home-page .caption-box { opacity: 0; }
html.is-ready #home-page .logo-full { animation: rise-in .4s ease-out both; }
html.is-ready #home-page .caption-box { animation: rise-in-up .4s ease-out .2s both; }
/* Admin-Leiste (nur eingeloggt, Plugin hängt sie vor ): über der Kopfzeile, unter dem Mobilmenü; die Seite rückt darunter */
body { --admin-bar--z-index: 1050; }
body:has(.admin-bar) { padding-top: var(--admin-bar--height); }
body:has(.admin-bar) .site-header { top: var(--admin-bar--height); }
html:has(.admin-bar) { scroll-padding-top: calc(var(--bar-h) + var(--admin-bar--height)); }
body:has(.admin-bar) .nav-toggle { top: calc(var(--admin-bar--height) + (var(--bar-h) - 44px) / 2); }
body:has(.admin-bar) .mobile-menu { padding-top: calc(var(--admin-bar--height) + var(--bar-h) + var(--space-8)); }
body.is-subpage:has(.admin-bar) { padding-top: calc(var(--bar-h) + var(--admin-bar--height)); }
@media (min-width: 1024px) {
body.has-subnav:has(.admin-bar) { padding-top: calc(var(--bar-h) + 44px + var(--admin-bar--height)); }
}
/* ---------------------------------------------------------------
5. Startseite: Sektionen, eine Diagonale (var(--diag)) für alle Kanten
--------------------------------------------------------------- */
/* Gefälle der Kante wie die alte Seite: 110 px über die Viewportbreite, mobil 70 px */
:root { --edge: 110px; }
@media (max-width: 600px) { :root { --edge: 70px; } }
#philosophie {
top: 0; margin-top: 0; position: relative; z-index: 2;
}
#philosophie .container { padding-top: var(--section-y); padding-bottom: 0; }
/* Bildkacheln: Aussehen und Hover (rote Fläche, schräge Beschriftung) kommen aus der Altdatei; hier nur Fokus, Bewegungsreduktion, Bildhöhe */
#philosophie .content-image { height: auto; }
#philosophie .content-overlay { z-index: 1; background: rgb(185 29 22 / .85); } /* --red-dark statt Original-Hellrot: weiße Schrift bleibt über 4,5 : 1 */
#philosophie .content-headline { z-index: 2; }
#philosophie .content-details { z-index: 3; }
#philosophie .is-child:focus-within .content-overlay { opacity: 1; }
#philosophie .is-child:focus-within .content-details { top: 50%; left: 50%; opacity: 1; }
#philosophie .is-child:focus-within .content-headline { bottom: -50px; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
#philosophie .content-overlay, #philosophie .content-details, #philosophie .content-headline { transition: none; }
}
/* Handy und Tablet: Hover-Text der Kacheln lesbar (Altdatei: 14/11 px bei 40 px Rand); dafür quadratische Kacheln, sonst passt der Text nicht */
@media (max-width: 1023px) {
#philosophie .content-image { aspect-ratio: 1 / 1; object-fit: cover; }
#philosophie .tile article .tile-inner { padding: 0 var(--space-16); }
#philosophie .content-details h2 { font-size: 18px; }
#philosophie .content-details h3 { font-size: 16px; line-height: 1.5; }
}
#philosophie .tile.is-ancestor:last-of-type { margin-bottom: 0; }
#philosophie .tile.is-ancestor:last-of-type .tile.is-parent { padding-bottom: 0; }
/* Letzte Kachelreihe ragt 100 px ins Rot (wie die alte Seite): Kacheln liegen über #angebote */
#angebote {
top: 0; margin-top: -100px;
-webkit-clip-path: polygon(0 var(--edge), 100% 0, 100% calc(100% - var(--diag)), 0 100%);
clip-path: polygon(0 var(--edge), 100% 0, 100% calc(100% - var(--diag)), 0 100%);
}
#angebote .container { padding-top: calc(100px + var(--section-y)); padding-bottom: calc(var(--diag) + var(--section-y)); }
@media (max-width: 767px) { #angebote .container { padding-top: calc(100px + var(--section-y) + var(--space-32)); } }
#angebote .columns > .column { display: flex; }
#angebote .box {
display: flex; flex: 1; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: var(--space-8);
padding: 0; background: transparent; box-shadow: none; border-radius: 0; color: var(--paper);
}
#angebote .box:hover { box-shadow: none; }
#angebote .box-image { flex: 0 0 100%; width: auto; margin: 0; padding: 0 0 var(--space-16); }
#angebote .box .title { flex: 0 0 100%; margin: 0 0 var(--space-8); font-size: 20px; font-weight: 400; color: var(--paper); }
#angebote .box .button { margin: 0; }
@media (max-width: 767px) { #angebote .columns > .column + .column { margin-top: var(--space-24); } } /* Bulma stapelt hier: Kästen nicht aneinanderkleben */
#events { top: 0; -webkit-clip-path: none; clip-path: none; }
#events .container { padding-top: var(--section-y); padding-bottom: var(--space-48); }
#events .columns > .column { display: flex; }
.card {
display: flex; flex-direction: column; width: 100%; max-width: 100%; overflow: hidden;
background: var(--paper); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow);
}
.column:has(> .card) { display: flex; }
.card-image { flex: 0 0 auto; }
.card-image .image { display: block; }
.card-image img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.card-content { display: flex; flex: 1 1 auto; flex-direction: column; padding: 0; }
.card-content > .content { display: flex; flex: 1 1 auto; flex-direction: column; padding: var(--space-24); background: transparent; color: var(--ink); }
.card .content p { margin: 0 0 var(--space-16); color: var(--ink); }
.card .content p.is-size-7 { margin-bottom: var(--space-8); font-size: 14px; color: var(--ink-soft); }
.card .content h2, .card .content h3 { margin: 0 0 var(--space-16); color: var(--ink); font-weight: 700; }
.card .content h2 { font-size: 24px; }
.card .content h3 { font-size: 20px; }
.card .content > .button, .card .content > .text-link { margin-top: auto; align-self: flex-start; }
.card .content a:not(.button):not(.text-link) { color: var(--red-dark); text-decoration: underline; }
#team { top: 0; -webkit-clip-path: none; clip-path: none; pointer-events: auto; }
#team .container { padding-top: var(--space-48); padding-bottom: var(--space-48); pointer-events: auto; }
.teamhero { position: relative; top: 0; height: clamp(420px, 48vw, 700px); }
.teamhero .teamherobg {
height: 100%; background-size: cover; background-position: center;
-webkit-clip-path: polygon(0 var(--diag), 100% 0, 100% calc(100% - var(--diag)), 0 100%);
clip-path: polygon(0 var(--diag), 100% 0, 100% calc(100% - var(--diag)), 0 100%);
}
.teamhero img { left: 50%; right: auto; bottom: 0; width: auto; max-width: 90%; height: 92%; margin: 0; transform: translateX(-50%); }
#team-2 {
top: 0; margin-top: calc(var(--diag) * -1);
-webkit-clip-path: polygon(0 var(--diag), 100% 0, 100% calc(100% - var(--diag)), 0 100%);
clip-path: polygon(0 var(--diag), 100% 0, 100% calc(100% - var(--diag)), 0 100%);
}
#team-2 .container { padding-top: calc(var(--diag) + var(--section-y)); padding-bottom: calc(var(--diag) + var(--section-y)); }
.contact {
margin-top: calc(var(--diag) * -1);
-webkit-clip-path: polygon(0 var(--diag), 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 var(--diag), 100% 0, 100% 100%, 0 100%);
}
.contact .container { padding-top: calc(var(--diag) + var(--section-y)); padding-bottom: var(--section-y); }
.contact .container .columns { padding-top: 0; }
@media (max-width: 767px) { .contact .content.has-text-centered h2, .contact .content.has-text-centered p { text-align: left; } } /* Handy: zentrierter Fließtext liest sich schlecht */
.contact-card {
display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-24); align-items: stretch;
margin-top: var(--space-48); padding: var(--space-24); background: var(--paper); color: var(--ink);
border-radius: var(--radius); box-shadow: var(--shadow);
}
.contact-map { position: relative; min-height: 300px; overflow: hidden; border-radius: var(--radius); }
#map { position: absolute; inset: 0; background: var(--map-bg) no-repeat center / cover; }
#karte { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#bild.map-btn {
position: absolute; left: 0; right: 0; top: calc(50% - 22px); z-index: 1; height: 44px; width: 250px; margin: 0 auto;
padding: 0 var(--space-24); border: 0; border-radius: var(--radius); font-size: 16px; transition: none;
}
.contact-info h3 { margin: 0 0 var(--space-16); color: var(--ink); }
.contact-info p { margin: 0; color: var(--ink); }
.contact .contact-info p a, .contact .contact-info .content a:not(.button) { color: var(--red-dark); text-decoration: underline; }
.contact .contact-info p a:hover { color: var(--red-darker); }
.contact .contact-info .button { margin-top: var(--space-16); background: var(--red-dark); color: var(--paper); }
.contact .contact-info .button:hover { background: var(--red-darker); color: var(--paper); }
.contact .contact-info .socials { margin-top: var(--space-16); }
.contact .contact-info .socials a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 0; margin: 0; padding: 0; color: var(--ink); text-decoration: none; }
.contact .contact-info .socials a:hover { color: var(--red-dark); }
@media (max-width: 767px) {
.contact-card { grid-template-columns: 1fr; padding: var(--space-16); }
.contact-map { min-height: 260px; }
}
/* ---------------------------------------------------------------
6. Unterseiten
--------------------------------------------------------------- */
.offer-intro { padding: var(--section-y) 0 var(--space-48); }
.offer-bottom { padding: var(--section-y) 0; }
.events-bottom { padding: var(--space-48) 0 var(--section-y); }
.text-page { padding-top: var(--section-y); }
.offer-bottom .card .content.bottom, .events-bottom .card .content.bottom { background: transparent; color: var(--ink); }
.offer-bottom .card-content > .content:first-child { flex: 0 0 auto; padding-bottom: var(--space-16); }
.offer-bottom .card-content > .content.bottom { flex: 1 1 auto; padding-top: 0; }
.offer-bottom .card .content h2 { color: var(--red); }
.offer-bottom .card .content.bottom a:not(.button) { color: var(--red-dark); text-decoration: underline; }
.offer-bottom .card .button-right { display: flex; flex-wrap: wrap; gap: var(--space-8); justify-content: flex-end; width: 100%; margin-top: auto; text-align: left; }
.offer-bottom .card .button-right a, .offer-bottom .card .button-right a.openbelow { color: var(--paper); text-decoration: none; margin: 0; }
.offer-intro .buttons.is-centered { margin-bottom: var(--space-24); }
#impressum footer.footer { position: static; margin-top: 0; }
#impressum .events-bottom { padding-bottom: var(--section-y); }
.footer { background: var(--dark); color: var(--paper); padding: 0; margin: 0; max-width: none; }
.footer-inner {
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-24);
max-width: 1248px; margin: 0 auto; padding: var(--space-32) var(--space-24);
}
.footer-logo { justify-self: start; display: block; line-height: 0; }
.footer-logo img { display: block; width: 120px; height: auto; }
.footer-links { display: flex; align-items: center; justify-content: center; gap: var(--space-8); margin: 0; font-size: 16px; font-weight: 400; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); font-size: 16px; font-weight: 400; line-height: 1.6; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-copy { justify-self: end; margin: 0; font-size: 14px; color: var(--paper); }
@media (max-width: 767px) {
.footer-inner { grid-template-columns: 1fr; justify-items: center; gap: var(--space-16); padding: var(--space-32) var(--space-16); text-align: center; }
.footer-logo, .footer-copy { justify-self: center; }
}
/* ---------------------------------------------------------------
Weiches Scrollen (Lenis 1.3.26, Regeln aus lenis.css)
Bewusst weggelassen: ".lenis-smooth iframe { pointer-events: none }" - das Kontaktformular ist ein iframe.
--------------------------------------------------------------- */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
/* ---------------------------------------------------------------
7. Bewegung reduzieren
--------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
[data-aos] { opacity: 1 !important; transform: none !important; }
html.js:not(.is-ready) #home-page .logo-full, html.js:not(.is-ready) #home-page .caption-box { opacity: 1; }
}
/* ---------------------------------------------------------------
8. Barrierefreiheit: Skip-Link, unsichtbare Texte, Kontrast auf Fotos
--------------------------------------------------------------- */
.skip-link {
position: fixed; top: var(--space-8); left: var(--space-8); z-index: 2000;
padding: var(--space-8) var(--space-16); background: var(--paper); color: var(--ink); font-weight: 700;
transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
.visually-hidden {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
#main:focus { outline: none; }
.contact p a { color: var(--paper); }
.caption-box, #slider .caption-box { background-color: color-mix(in srgb, var(--dark) 75%, transparent); }
/* dunkle Schicht unter Text auf Foto-Flächen: Kontrast >= 4,5 : 1 */
#angebote::before, .contact::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: color-mix(in srgb, var(--dark) 25%, transparent);
}
#angebote .container, .contact .container { position: relative; z-index: 1; }
/* Spaltenabstand 24 px, keine Überbreite durch Bulma-Variable-Gaps und AOS-Versatz */
.columns.is-variable { margin-left: -12px; margin-right: -12px; }
.columns.is-variable > .column { padding-left: 12px; padding-right: 12px; }
main { overflow-x: clip; }
.footer a, .contact .content a:not(.button):not(.text-link), .contact p a { color: var(--paper); }
/* ---------------------------------------------------------------
9. Review Runde 1
--------------------------------------------------------------- */
button, input, textarea, select { font-family: inherit; }
.caption-box { border-radius: var(--radius); }
@media (min-width: 1023px) { .caption-box p.flex-caption { font-size: 30px; } }
#slider, #page-holder { transition: none; }
.nocolor a { color: var(--ink); }
.has-text-centered p { max-width: 68ch; margin-left: auto; margin-right: auto; }
.team-text, #team-2 .container { position: relative; }
#team-2::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: color-mix(in srgb, var(--paper) 60%, transparent);
}
#team-2 .container { z-index: 1; }
.contact p a { display: inline-flex; align-items: center; min-height: 44px; }
.column .ReadMore + [data-readmore-toggle], .ReadMore + [data-readmore-toggle] {
display: block; margin: 0 0 var(--space-16) calc(var(--space-8) + var(--space-4)); padding: 0; background: none; color: var(--red-dark); text-align: left; white-space: normal;
}
.text-link-less::after { content: "\2191"; }
.text-link-less:hover::after, .text-link-less:focus-visible::after { transform: translateY(-4px); }
/* Kontakt-Modal und Kontaktseite (iframe) */
.modal { max-width: 560px; }
#ex1.modal { width: 90%; height: auto; margin: 0; padding: 0; overflow: hidden; }
#ex1 iframe { display: block; width: 100%; height: min(640px, calc(100vh - 80px)); border: 0; background: var(--paper); }
.modal a.close-modal.close-modal {
width: 44px; height: 44px; background: none; z-index: 3;
}
.modal a.close-modal.close-modal::before, .modal a.close-modal.close-modal::after {
content: ""; position: absolute; top: 21px; left: 10px; width: 24px; height: 2px; background: var(--ink);
}
.modal a.close-modal.close-modal::before { transform: rotate(45deg); }
.modal a.close-modal.close-modal::after { transform: rotate(-45deg); }
.modal .content { padding: var(--space-24); }
.modal-links { gap: var(--space-8); margin-top: var(--space-16); }
/* Sprungziel: AOS schiebt die Spalte beim Sprung noch 100 px nach unten */
.offer-bottom .card[id] { scroll-margin-top: 100px; }
.modal-links .button { margin: 0; white-space: normal; text-align: center; }
.is-contact { background: var(--paper); overflow: auto; }
.is-contact .contact-form { padding: var(--space-24); }
.contact-title { margin: 0 0 var(--space-24); padding-right: var(--space-48); font-size: 24px; font-weight: 700; color: var(--ink); }
.is-contact .contact-form .field { margin-bottom: var(--space-16); }
.is-contact .contact-form label { display: block; margin-bottom: var(--space-4); font-size: 14px; font-weight: 700; color: var(--ink); }
.is-contact .contact-form input:not([type=submit]), .is-contact .contact-form textarea {
display: block; width: 100%; min-height: 44px; padding: var(--space-8) var(--space-16);
font-size: 16px; color: var(--ink); background: var(--paper);
border: 1px solid var(--ink-soft) !important; border-radius: var(--radius); box-shadow: none;
}
.is-contact .contact-form textarea { height: 150px; resize: vertical; }
.is-contact .contact-form input[type=submit] { float: none; width: auto; margin-left: auto; font-size: 16px; }
.is-contact .contact-form .alert.error { display: block; margin-top: var(--space-4); font-size: 14px; color: var(--red-dark); }
.is-contact .contact-form .alert { padding: var(--space-16); }
#events h2 a { display: inline-flex; align-items: center; min-height: 44px; }
.text-link, .ReadMore + [data-readmore-toggle] { transition: none; }
.text-link::after { transition: transform .2s ease-out; }
/* ---------------------------------------------------------------
Phase 3: Ladezeit
--------------------------------------------------------------- */
/* Hintergrundbilder als WebP, Mobil/Desktop über Custom Properties (Werte kommen aus bgVars()) */
.bg-responsive { background-image: var(--bg-m); }
@media (min-width: 768px) { .bg-responsive { background-image: var(--bg-d); } }
/* Kopfvideo: Standbild (erstes Videobild) trägt das Seitenverhältnis, das Video liegt darüber */
#slider .slider-poster { display: block; background: #000; }
#slider .slider-poster img { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 720; }
@media (max-width: 600px) { #slider .slider-poster img { aspect-ratio: 800 / 676; } }
#slider .slider-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
/* Unterseiten-Kopfbild: schon vor dem Parallax-Skript so groß wie danach (kein Layout-Sprung) */
.hero.jarallax, .hero.jarallax-alt { position: relative; }
.hero > .jarallax-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
/* "Mehr lesen" (site.js): Spalte wie zuvor von der Bibliothek erzwungen */
.ReadMore[data-readmore] { display: block; width: 100%; }
/* Schrift: font-display swap (die Altdatei deklariert dieselbe Schrift ohne). Dateien werden im