/* ============================================================ base.css — Geteiltes Fundament für ALLE Seiten Design-Tokens, Reset, Navigation (zwei Varianten), Mobil-Menü, gemeinsamer Seitenkopf (.phead), Buttons und Footer. Seiten-spezifisches CSS liegt jeweils in assets/css/.css ============================================================ */ /* ============================================================ SCHRIFT — Barlow, selbst gehostet (Dateien in /assets/fonts/) font-display:swap = Text sofort sichtbar (System-Fallback), tauscht zu Barlow. Fehlen die .woff2-Dateien noch, greift automatisch der System-Stack. ============================================================ */ @font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:local('Barlow Regular'),local('Barlow-Regular'),url('/assets/fonts/barlow-400.woff2') format('woff2')} @font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:local('Barlow Medium'),local('Barlow-Medium'),url('/assets/fonts/barlow-500.woff2') format('woff2')} @font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:local('Barlow SemiBold'),local('Barlow-SemiBold'),url('/assets/fonts/barlow-600.woff2') format('woff2')} @font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:local('Barlow Bold'),local('Barlow-Bold'),url('/assets/fonts/barlow-700.woff2') format('woff2')} @font-face{font-family:'Barlow';font-style:normal;font-weight:800;font-display:swap;src:local('Barlow ExtraBold'),local('Barlow-ExtraBold'),url('/assets/fonts/barlow-800.woff2') format('woff2')} :root{ --gruen:#00b218;--gruen-m:#0a6610;--gruen-d:#0c500e;--gruen-t:#073a09; --verlauf:linear-gradient(122deg,var(--gruen-d) 0%,var(--gruen-m) 42%,var(--gruen) 100%); --button-verlauf:linear-gradient(135deg,#0c500e 0%,#00b218 100%); /* --grau: von #737d73 auf #6a746a abgedunkelt -> erfüllt WCAG-AA (>= 4,5:1) auf dem Papier-Hintergrund auch für Fließtext unter 18 px */ --tinte:#16201a;--tinte-2:#3f4a42;--grau:#6a746a;--dunkel:#1a2f22; --papier:#fbfbf7;--papier-2:#f4f3ec;--papier-3:#ecebe1;--linie:#e6e4d8;--weiss:#fff; --r:16px;--r-l:22px;--r-xl:30px;--takt:cubic-bezier(.19,1,.22,1); --motion-fast:.18s;--motion-base:.24s;--motion-slow:.36s;--ease-out:var(--takt);--lift-control:-2px;--lift-card:-4px; --sh-s:0 4px 16px -8px rgba(12,80,14,.18); --sh-m:0 18px 44px -22px rgba(12,80,14,.26); --sh-l:0 34px 80px -34px rgba(12,80,14,.32); --wm-content-max:1200px;--wm-wide-max:1280px;--wm-market-max:1200px;--wm-profile-max:1120px;--wm-article-max:980px;--wm-info-max:1040px;--wm-reading-max:780px;--wm-readable-max:980px;--wm-legal-max:820px;--wm-gutter:clamp(18px,4vw,28px); } /* ---- Reset & Grundlagen ---- */ *{margin:0;padding:0;box-sizing:border-box} /* Hintergrund AUCH auf : iOS-Safari zeigt sonst im Überscroll-/Safe-Area- Bereich unten (hinter der schwebenden Adressleiste) reines Weiß statt der Seitenfarbe. Die Tönungs-Klassen (wm-bg-*) sitzen zusätzlich auf . */ html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;background:var(--papier)} body{font-family:'Barlow','Segoe UI',system-ui,-apple-system,sans-serif;background:var(--papier);color:var(--tinte);line-height:1.65;overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column} body>footer{margin-top:auto} /* Footer klebt auch auf kurzen Seiten unten */ ::selection{background:var(--gruen);color:#fff} /* Sichtbarer Tastatur-Fokus (nur bei Tastatur-Bedienung, nicht beim Klicken) */ :focus-visible{outline:3px solid var(--gruen);outline-offset:2px;border-radius:6px} /* Skip-Link: unsichtbar, bis er per Tab fokussiert wird */ .skip-link{position:fixed;top:10px;left:10px;z-index:2000;background:var(--gruen-d);color:#fff;font-weight:700;font-size:.92rem;padding:11px 20px;border-radius:100px;box-shadow:var(--sh-m);transform:translateY(-220%);opacity:0;visibility:hidden;pointer-events:none;transition:transform .25s var(--takt),opacity .2s} .skip-link:focus-visible{transform:none;opacity:1;visibility:visible;pointer-events:auto} h1,h2,h3{font-weight:800;letter-spacing:-.03em;line-height:1.03} a{text-decoration:none;color:inherit} img{max-width:100%;display:block} .wrap{width:100%;max-width:var(--wm-content-max);margin-inline:auto;padding-inline:var(--wm-gutter);min-width:0} .wrap>*{min-width:0} .wm-container{width:100%;margin-inline:auto;padding-inline:var(--wm-gutter);min-width:0} .wm-container--wide{max-width:var(--wm-wide-max)}.wm-container--market{max-width:var(--wm-market-max)}.wm-container--profile{max-width:var(--wm-profile-max)}.wm-container--article{max-width:var(--wm-article-max)}.wm-container--info{max-width:var(--wm-info-max)} p,li,h1,h2,h3,h4{overflow-wrap:anywhere} /* Nur für Screenreader: Text bleibt für assistive Technik lesbar, ist aber visuell unsichtbar (kein display:none, damit er vorgelesen wird). Wird u. a. auf der Marktübersicht für die zugängliche Link-Bezeichnung des Marktbildes genutzt — ohne diese Regel stünde der Name sonst sichtbar auf dem Bild. */ .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ============================================================ NAVIGATION Standard = feste, solide Leiste (alle Unterseiten) .overlay = transparente Leiste über dem Hero (nur Startseite), wird beim Scrollen via .solid undurchsichtig WICHTIG: ausschließlich #nav stylen. Ein globaler nav-Selektor würde auch Filter, Linklisten und die mobile Unter-Navigation versehentlich sticky machen. ============================================================ */ #nav{position:sticky;top:0;z-index:900;background:rgba(251,251,247,.9);backdrop-filter:blur(12px) saturate(1.4);border-bottom:1px solid var(--linie)} #nav .bar{display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,4vw,28px);height:66px;transition:height .28s var(--takt)} #nav.scrolled .bar{height:56px} /* Overlay-Variante (Startseite) */ #nav.overlay{position:fixed;top:0;left:0;right:0;background:transparent;backdrop-filter:none;border-bottom:none} #nav.overlay .bar{padding:0 clamp(18px,4vw,28px);height:66px;transition:height .28s var(--takt)} #nav.overlay::before{content:"";position:absolute;inset:0;background:rgba(251,251,247,.88);backdrop-filter:blur(12px) saturate(1.4);border-bottom:1px solid transparent;opacity:0;transition:opacity .35s var(--takt);will-change:opacity} #nav.overlay.solid::before{opacity:1;border-bottom-color:var(--linie)} #nav.overlay.scrolled .bar{height:56px} #nav.overlay .bar>*{position:relative;z-index:2} /* Marke / Logo */ .brand{display:flex;align-items:center;gap:13px;font-weight:800;font-size:1.22rem;line-height:1;letter-spacing:-.03em;flex-shrink:0;color:var(--tinte)} .brand>span{display:block;text-align:left;line-height:1} .brand .logo{display:block;height:42px;width:auto} /* Basis (z. B. Footer) */ /* In der Navi: das Logo „dockt" oben bündig an (kein Spalt) und hängt wie ein Lesezeichen nach unten heraus. Beim Scrollen wird es kleiner. */ #nav .brand{align-self:stretch;position:relative;padding-left:104px;transition:padding-left .45s var(--takt)} #nav .brand .logo{ position:absolute;top:0;left:0;height:104px;width:auto; transition:height .45s var(--takt)} #nav.scrolled .brand{padding-left:84px} #nav.scrolled .brand .logo{height:80px} @media(max-width:560px){ #nav .bar, #nav.overlay .bar{height:58px} #nav.scrolled .bar{height:52px} #nav .brand{padding-left:86px} #nav .brand .logo{height:86px} #nav.scrolled .brand{padding-left:70px} #nav.scrolled .brand .logo{height:66px} } footer .brand .logo{height:46px} .brand small{display:block;font-size:.58rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--grau);margin-top:3px;line-height:1;transition:color var(--motion-base) var(--takt)} #nav.overlay:not(.solid) .brand{color:#fff} #nav.overlay:not(.solid) .brand small{color:rgba(255,255,255,.7)} /* Menü */ .menu{display:flex;align-items:center;gap:2px} .menu>a,.drop>button{font:inherit;font-weight:600;font-size:.92rem;background:none;border:none;cursor:pointer;padding:9px 14px;border-radius:100px;position:relative;display:inline-flex;align-items:center;gap:5px;transition:color var(--motion-base) var(--takt),background var(--motion-base) var(--takt);color:var(--tinte)} .menu>a::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;background:var(--gruen);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform var(--motion-base) var(--takt)} .menu>a:hover::after,.menu>a.active::after{transform:scaleX(1)} .menu>a:hover,.drop>button:hover{color:var(--gruen-d)} #nav.overlay:not(.solid) .menu>a,#nav.overlay:not(.solid) .drop>button{color:rgba(255,255,255,.92)} #nav.overlay:not(.solid) .menu>a::after{background:#fff} #nav.overlay:not(.solid) .menu>a:hover,#nav.overlay:not(.solid) .drop>button:hover{color:#fff} /* Märkte-Dropdown — per Hover UND per Tastatur (Fokus/Enter) erreichbar */ .drop{position:relative} .drop>button svg{width:13px;height:13px;transition:transform .35s var(--takt)} .drop.open>button svg{transform:rotate(180deg)} .drop-panel{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%) translateY(6px);background:var(--weiss);border:1px solid var(--linie);border-radius:16px;padding:8px;min-width:256px;box-shadow:var(--sh-m);opacity:0;visibility:hidden;transition:transform .35s var(--takt),opacity .35s var(--takt),background-color .35s var(--takt),border-color .35s var(--takt),color .35s var(--takt),box-shadow .35s var(--takt)} .drop.open .drop-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .drop-panel a{display:flex;flex-direction:column;gap:1px;padding:10px 14px;border-radius:11px;transition:background .25s;color:var(--tinte)} .drop-panel a:hover{background:var(--papier-2)} .drop-panel a b{font-size:.9rem;font-weight:700} .drop-panel a span{font-size:.76rem;color:var(--grau)} .drop-panel .sep{height:1px;background:var(--linie);margin:6px 8px} /* CTA-Button in der Navi */ .nav-cta{margin-left:8px;padding:10px 20px !important;border-radius:100px;font-weight:700;background:var(--verlauf) !important;border:none !important;color:#fff !important;box-shadow:0 4px 14px -6px rgba(12,80,14,.35);transition:transform .35s var(--takt),opacity .35s var(--takt),background-color .35s var(--takt),border-color .35s var(--takt),color .35s var(--takt),box-shadow .35s var(--takt) !important;white-space:nowrap;flex:0 0 auto} .nav-cta::after{display:none} .nav-cta:hover,.nav-cta.active{background:var(--verlauf) !important;transform:translateY(-2px);box-shadow:0 6px 18px -6px rgba(12,80,14,.45);color:#fff !important} /* Über dem Hero (transparente Navi): weiße Pille, grüne Schrift, kein Rahmen */ #nav.overlay:not(.solid) .nav-cta{background:#fff !important;color:var(--gruen-d) !important;box-shadow:0 4px 16px -8px rgba(0,0,0,.3)} #nav.overlay:not(.solid) .nav-cta:hover{background:#fff !important;color:var(--gruen-t) !important;transform:translateY(-2px)} /* Burger */ .burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:9px;border-radius:10px;transition:opacity .25s var(--takt)} /* Bei offenem Menü übernimmt das ✕ im Menü-Kopf das Schließen — Burger ausblenden, damit nicht zwei Schließen-Symbole übereinander liegen. */ body.m-open .burger{opacity:0;pointer-events:none} .burger span{width:24px;height:2.5px;border-radius:3px;background:var(--tinte);transition:.35s var(--takt)} #nav.overlay:not(.solid) .burger span{background:#fff} /* Bei geöffnetem Menü liegt das X über dem weißen Menü-Panel — Striche immer dunkel erzwingen (sonst weiß-auf-weiß auf der Startseiten-Overlay-Navi). */ body.m-open #nav.overlay:not(.solid) .burger span, body.m-open #nav .burger span{background:var(--tinte)} .burger.x span:nth-child(1){transform:translateY(7.5px) rotate(45deg)} .burger.x span:nth-child(2){opacity:0} .burger.x span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)} /* ============================================================ Mobiles Menü — ruhige Vollbild-Navigation ============================================================ */ .m-menu{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;background: radial-gradient(circle at 90% 8%,rgba(109,198,126,.22),transparent 34%), linear-gradient(160deg,var(--papier) 0%,var(--papier-2) 100%); color:var(--tinte);z-index:950;display:flex;flex-direction:column;overflow:hidden; opacity:0;visibility:hidden;transform:translateY(-12px) scale(.985); transition:opacity var(--motion-base) var(--ease-out),transform var(--motion-base) var(--ease-out),visibility 0s linear var(--motion-base)} .m-menu.open{opacity:1;visibility:visible;transform:none;transition-delay:0s} .m-menu .m-head{display:flex;align-items:center;justify-content:space-between;gap:16px; padding:calc(18px + env(safe-area-inset-top)) clamp(20px,6vw,54px) 18px;border-bottom:1px solid var(--linie);flex-shrink:0} .m-menu .m-brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.15rem;letter-spacing:-.03em;line-height:1;padding:0} .m-menu .m-brand img{height:42px;width:auto;display:block} .m-menu .m-brand span{display:block;text-align:left;line-height:1} .m-menu .m-brand small{display:block;font-size:.58em;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--grau);margin-top:4px} .m-menu .m-brand:hover{background:none} .m-close{flex-shrink:0;width:46px;height:46px;border:1px solid var(--linie);border-radius:50%;background:rgba(255,255,255,.7);color:var(--tinte);display:grid;place-items:center;cursor:pointer;transition:background-color var(--motion-fast),transform var(--motion-fast),border-color var(--motion-fast)} .m-close:hover{background:var(--papier);border-color:var(--gruen)} .m-close:active{transform:scale(.94)} .m-close svg{width:21px;height:21px} .m-menu .m-nav{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;width:min(100%,780px);margin:0 auto;padding:clamp(22px,5vh,46px) clamp(20px,6vw,54px) 24px;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:4px} .m-menu a{display:flex;align-items:center;padding:12px 14px;border-radius:14px;font-weight:700;font-size:clamp(1.06rem,4vw,1.42rem);color:var(--tinte);transition:background-color var(--motion-fast),transform var(--motion-fast),color var(--motion-fast)} .m-menu a:hover,.m-menu a.active{background:rgba(255,255,255,.82);color:var(--gruen-d)} .m-menu .m-nav a:active{transform:scale(.985)} .m-menu .m-sub{font-size:.72rem;color:var(--grau);padding:18px 14px 7px;font-weight:800;letter-spacing:.15em;text-transform:uppercase} .m-menu .m-nav>.m-sub:first-child{padding-top:0} .m-menu .m-nav .m-sub:not(:first-child){margin-top:12px;border-top:1px solid var(--linie);padding-top:22px} .m-menu .m-small{justify-content:space-between;font-size:clamp(.98rem,3.7vw,1.18rem);font-weight:650;padding:10px 14px;color:var(--tinte-2)} .m-menu .m-small em{font-style:normal;font-weight:800;font-size:.76rem;color:var(--gruen-d);background:#e6f2e9;border-radius:100px;padding:5px 11px;flex-shrink:0;min-width:42px;text-align:center} .m-menu .m-foot{flex-shrink:0;padding:14px clamp(20px,6vw,54px) calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--linie);background:rgba(248,245,240,.86);backdrop-filter:blur(14px)} .m-menu .m-cta{justify-content:center;background:var(--verlauf);color:#fff;text-align:center;font-weight:800;padding:15px;border-radius:100px;box-shadow:0 12px 28px -16px rgba(12,80,14,.55)} .m-menu .m-cta:hover{background:var(--verlauf);color:#fff;} .m-menu .m-nav>*{opacity:0;transform:translateY(10px);transition:opacity var(--motion-base) var(--ease-out),transform var(--motion-base) var(--ease-out)} .m-menu.open .m-nav>*{opacity:1;transform:none} .m-menu.open .m-nav>*:nth-child(1){transition-delay:.04s}.m-menu.open .m-nav>*:nth-child(2){transition-delay:.07s}.m-menu.open .m-nav>*:nth-child(3){transition-delay:.1s}.m-menu.open .m-nav>*:nth-child(4){transition-delay:.13s}.m-menu.open .m-nav>*:nth-child(n+5){transition-delay:.16s} @media(min-width:620px) and (max-width:1120px){.m-menu .m-nav{grid-template-columns:1fr 1fr;column-gap:26px}.m-menu .m-nav .m-sub,.m-menu .m-nav .m-small{grid-column:1}.m-menu .m-nav .m-sub:not(:first-child),.m-menu .m-nav .m-sub:not(:first-child)~a{grid-column:2}.m-menu .m-nav .m-sub:not(:first-child){grid-row:1;margin-top:0;border-top:0;padding-top:0}} @media(prefers-reduced-motion:reduce){.m-menu,.m-menu .m-nav>*{transition:none}.m-menu .m-nav>*{opacity:1;transform:none}} /* Solange das mobile Menü offen ist, das WhatsApp-Popup nicht darüber schweben lassen */ body.m-open .wm-pop{opacity:0;visibility:hidden;pointer-events:none} /* ============================================================ GEMEINSAMER SEITENKOPF DER UNTERSEITEN (.phead) ============================================================ */ .phead{background:var(--papier-2);border-bottom:1px solid var(--linie);padding:clamp(40px,7vw,72px) 0 clamp(34px,5vw,52px)} .crumb{font-size:.84rem;color:var(--grau);margin-bottom:16px} .crumb a{color:var(--grau);text-decoration:none} .crumb a:hover{color:var(--gruen-d)} .phead h1{font-size:clamp(2.1rem,5vw,3.4rem);margin-bottom:14px} .phead p{font-size:clamp(1rem,1.5vw,1.15rem);color:var(--tinte-2);max-width:560px} /* ---- Akzent-Label über Überschriften ---- */ .klabel{display:inline-block;font-size:.76rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gruen);margin-bottom:13px} .klabel::before{content:none} /* ============================================================ BUTTONS ============================================================ */ .btn{display:inline-flex;align-items:center;gap:9px;padding:15px 27px;border-radius:100px;font-weight:700;font-size:1rem;cursor:pointer;border:none;transition:transform var(--motion-base) var(--takt),opacity .4s var(--takt),background-color .4s var(--takt),border-color .4s var(--takt),color .4s var(--takt),box-shadow .4s var(--takt);font-family:inherit} .btn-light{background:#fff;color:var(--gruen-d)} .btn-light:hover{transform:translateY(var(--lift-control));box-shadow:0 18px 38px -14px rgba(0,0,0,.4)} .btn-light svg{width:17px;height:17px;transition:transform var(--motion-base) var(--takt)} .btn-light:hover svg{transform:translateX(4px)} .btn-glass{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.4);backdrop-filter:blur(8px)} .btn-glass:hover{background:rgba(255,255,255,.22);transform:translateY(var(--lift-control))} .btn-primary{background:var(--verlauf);color:#fff} .btn-primary:hover{transform:translateY(var(--lift-control));box-shadow:0 18px 38px -14px rgba(12,80,14,.45)} .btn-primary svg{width:17px;height:17px;transition:transform var(--motion-base) var(--takt)} .btn-primary:hover svg{transform:translateX(4px)} .btn-outline{background:transparent;color:var(--gruen-d);border:1.5px solid var(--linie)} .btn-outline:hover{background:var(--papier-3);transform:translateY(var(--lift-control))} /* ---- Zentrale Seitenanimation ---- Die Klasse wm-motion wird bereits im vor dem CSS gesetzt. Dadurch beginnt die Animation beim ersten Paint und Inhalte blitzen nicht erst sichtbar auf, bevor JavaScript sie wieder ausblendet. Ohne JavaScript und bei reduzierter Bewegung bleiben alle Inhalte sofort sichtbar. */ @keyframes wm-page-enter{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:translate3d(0,0,0)}} @keyframes wm-item-enter{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:translate3d(0,0,0)}} html.wm-motion main{animation:wm-page-enter var(--motion-base) var(--ease-out) backwards} html.wm-motion footer{animation:wm-page-enter var(--motion-base) var(--ease-out) .04s backwards} .reveal{opacity:1;transform:none} .wm-enter-pending{opacity:0;transform:translate3d(0,8px,0)} .wm-enter-pending.wm-enter-active{animation:wm-item-enter var(--motion-base) var(--ease-out) var(--wm-enter-delay,0ms) both} .d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}.d4{transition-delay:.28s} /* ---- Gemeinsame Status-, Leer- und Formularzustände ---- */ .status-ausfall{--status-color:#b42318;background-color:#fff1f0!important;color:#7a271a!important} .status-zeit{--status-color:#a15c00;background-color:#fff7e8!important;color:#713b00!important} .status-ort{--status-color:#185fa5;background-color:#eef6ff!important;color:#174e7a!important} .status-sonder,.status-hinweis{--status-color:#0c7a1a;background-color:#edf8ef!important;color:#0b5d16!important} .empty-state{padding:clamp(34px,6vw,58px);border:1px solid var(--linie);border-radius:var(--r-xl);background:var(--weiss);text-align:center} .form-card{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-l);box-shadow:var(--sh-m)} .form-status{margin:0 0 18px;padding:12px 14px;border-radius:12px;font-size:.9rem;font-weight:650;line-height:1.45} .form-status[hidden]{display:none} .form-status.is-success{background:#edf8ef;border:1px solid #b8dfbf;color:#0b5d16} .form-status.is-error{background:#fff1f0;border:1px solid #f2c2bd;color:#7a271a} .field-error{display:block;margin-top:6px;color:#9f241a;font-size:.8rem;font-weight:650} [aria-invalid="true"]{border-color:#b42318!important;box-shadow:0 0 0 3px rgba(180,35,24,.1)} .form-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important} /* ============================================================ FOOTER ============================================================ */ footer{background:var(--dunkel);color:rgba(255,255,255,.7);padding:clamp(34px,5vw,52px) 0 24px} .f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:34px} .f-brand p{margin-top:15px;font-size:.92rem;max-width:280px} .f-col h4{color:#fff;font-size:.95rem;margin-bottom:15px} .f-col a{display:flex;align-items:center;font-size:.9rem;margin-bottom:11px;transition:color var(--motion-base) var(--takt),transform var(--motion-base) var(--takt)} .f-col a .f-ico{width:15px;height:15px;flex:0 0 15px;margin-right:8px} .f-col a:hover{color:#7de592;transform:translateX(4px)} .f-bot{padding-top:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.85rem} .f-bot a{color:rgba(255,255,255,.65);text-decoration:none} .f-bot a:hover{color:#7de592} /* Rechtliches als Flex-Liste: Trennpunkte sind eigene Elemente und können mobil nicht mehr allein am Zeilenende hängen bleiben. */ .f-links{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px} .f-links .fsep{color:rgba(255,255,255,.35)} @media(max-width:600px){.f-links .fsep{display:none}.f-links{gap:6px 16px}} /* ============================================================ PROMO-/BANNER-BAUSTEIN (Werbung, Saison-Hinweise) Farbe kommt per inline-Gradient aus banner.php — hier nur Layout. ============================================================ */ .promo-wrap{padding:clamp(8px,2vw,20px) 0 clamp(28px,5vw,56px)} .promo{display:flex;align-items:center;gap:clamp(20px,4vw,48px);border-radius:26px;padding:clamp(26px,4vw,44px) clamp(24px,4vw,48px);color:#fff;position:relative;overflow:hidden;box-shadow:var(--sh-m)} .promo::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.1);top:-120px;right:-50px} .promo-body{position:relative;z-index:2;flex:1;min-width:0} .promo-eyebrow{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.18);padding:5px 12px;border-radius:100px;margin-bottom:14px} .promo h2{font-size:clamp(1.5rem,3vw,2.2rem);color:#fff;margin-bottom:10px;line-height:1.1} .promo p{opacity:.92;font-size:1rem;margin-bottom:22px;max-width:560px} .promo-btn{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--tinte);font-weight:700;padding:13px 22px;border-radius:100px;transition:transform .35s var(--takt),opacity .35s var(--takt),background-color .35s var(--takt),border-color .35s var(--takt),color .35s var(--takt),box-shadow .35s var(--takt)} .promo-btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(0,0,0,.3)} .promo-btn svg{width:16px;height:16px;transition:transform .35s var(--takt)} .promo-btn:hover svg{transform:translateX(3px)} .promo-photo{position:relative;z-index:2;width:210px;flex-shrink:0;aspect-ratio:4/3;border-radius:18px;background:rgba(255,255,255,.14);display:grid;place-items:center;text-align:center;color:rgba(255,255,255,.75);font-size:.76rem;font-weight:600;padding:14px} .promo-photo svg{width:30px;height:30px;margin:0 auto 8px;display:block;opacity:.8} @media(max-width:760px){.promo{flex-direction:column;align-items:flex-start}.promo-photo{width:100%;aspect-ratio:16/9}} /* ============================================================ GETEILTE RESPONSIVE-REGELN (Navi + Footer) ============================================================ */ /* Die vollständige Desktop-Navigation benötigt real rund 1.050 px. Schon davor auf das Vollbild-Menü wechseln, statt Links zu quetschen oder außerhalb des Viewports zu verstecken. Der Footer behält seinen eigenen Breakpoint. */ @media(max-width:1120px){ .menu{display:none} .burger{display:flex} } @media(max-width:860px){ .f-grid{grid-template-columns:1fr 1fr;gap:32px} } @media(max-width:600px){ .f-grid{grid-template-columns:1fr} .f-bot{flex-direction:column;text-align:center} } /* (prefers-reduced-motion: ein gemeinsamer Block weiter unten bei den Micro-Animationen) */ /* ===== Bild-Lightbox ===== */ .lb{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;padding:40px;background:rgba(7,30,12,.93); opacity:0;visibility:hidden;transition:opacity .35s var(--takt),visibility 0s linear .35s} .lb.on{opacity:1;visibility:visible;transition:opacity .35s var(--takt)} .lb-img{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:12px;box-shadow:0 30px 90px rgba(0,0,0,.55); transform:scale(.94);transition:transform .5s var(--takt)} .lb.on .lb-img{transform:scale(1)} .lb-x,.lb-nav{position:absolute;border:0;cursor:pointer;color:#fff;background:rgba(255,255,255,.12);border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1;transition:background .2s} .lb-x:hover,.lb-nav:hover{background:rgba(255,255,255,.24)} .lb-x{top:18px;right:22px;width:46px;height:46px;font-size:26px} .lb-nav{top:50%;transform:translateY(-50%);width:54px;height:54px;font-size:30px} .lb-prev{left:22px} .lb-next{right:22px} .lb-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.82);font-size:.92rem;font-weight:600;letter-spacing:.02em} @media(max-width:560px){ .lb{padding:14px} .lb-nav{width:44px;height:44px;font-size:26px} .lb-prev{left:8px}.lb-next{right:8px} .lb-x{top:10px;right:12px} } /* Fehlerseite (404 / kein Zugriff) */ .errpage{min-height:60vh;display:grid;place-items:center;text-align:center;padding:clamp(56px,12vh,140px) 0} .errpage .wrap{max-width:660px} .errpage .err-num{display:inline-block;font-size:clamp(4.6rem,17vw,9rem);font-weight:800;line-height:.95;letter-spacing:-.04em;background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:6px} .errpage h1{font-size:clamp(1.7rem,4vw,2.5rem);font-weight:800;letter-spacing:-.03em;margin:0 0 14px;color:var(--tinte)} .errpage p{font-size:clamp(1rem,1.4vw,1.14rem);color:var(--tinte-2);max-width:500px;margin:0 auto 28px;line-height:1.6} .errpage .err-actions{margin-bottom:28px} .errpage .err-actions a{display:inline-flex;align-items:center;gap:8px;background:var(--verlauf);color:#fff;font-weight:700;padding:14px 30px;border-radius:100px;text-decoration:none;box-shadow:0 14px 30px -12px rgba(12,80,14,.5);transition:transform var(--motion-base) var(--takt),filter var(--motion-base) var(--takt)} .errpage .err-actions a:hover{transform:translateY(-2px);filter:brightness(1.05)} .errpage .err-links{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;font-size:.94rem} .errpage .err-links a{color:var(--gruen-d);font-weight:700;text-decoration:none} .errpage .err-links a:hover{text-decoration:underline} /* ===== Hinweis-Einblendung (Pop-up) ===== */ .wm-pop{position:fixed;right:20px;bottom:20px;z-index:1200;max-width:340px;display:flex;gap:14px;align-items:flex-start; background:var(--weiss);color:var(--tinte);border:1px solid var(--linie);border-radius:18px; padding:16px 36px 16px 18px;box-shadow:0 18px 50px rgba(7,58,9,.18); transform:translateY(24px);opacity:0;pointer-events:none;transition:transform .55s var(--takt),opacity .45s var(--takt)} .wm-pop[hidden]{display:none} .wm-pop.show{transform:translateY(0);opacity:1;pointer-events:auto} .wm-pop-ico{flex:0 0 42px;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--verlauf);color:#fff} .wm-pop-ico svg{width:23px;height:23px} .wm-pop-body{min-width:0} .wm-pop-body strong{display:block;font-weight:800;letter-spacing:-.02em;font-size:15.5px;margin-bottom:3px} .wm-pop-body p{margin:0 0 11px;font-size:13.5px;line-height:1.5;color:var(--tinte-2)} .wm-pop-cta{display:inline-block;background:var(--gruen);color:#fff;text-decoration:none;font-weight:700;font-size:13.5px;padding:9px 18px;border-radius:100px;transition:background .2s} .wm-pop-cta:hover{background:var(--gruen-d)} .wm-pop-x{position:absolute;top:9px;right:11px;border:0;background:none;font-size:21px;line-height:1;color:var(--grau);cursor:pointer;padding:2px 6px;border-radius:8px} .wm-pop-x:hover{color:var(--tinte);background:var(--papier-2)} @media(max-width:560px){.wm-pop{left:12px;right:12px;bottom:12px;max-width:none}} /* ===== Bausteine (einblendbare Module) ===== */ .bz-zone > *{margin:clamp(46px,8vw,94px) 0} .bz-zone > *:last-child{margin-bottom:clamp(54px,9vw,104px)} .bz-eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gruen-d);margin-bottom:12px} .bz-btn{display:inline-flex;align-items:center;gap:9px;margin-top:18px;background:var(--verlauf);color:#fff;font-weight:700;font-size:.95rem;padding:12px 22px;border-radius:100px;text-decoration:none;transition:transform var(--motion-base) var(--takt),box-shadow var(--motion-base) var(--takt)} .bz-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(12,80,14,.6)} .bz-btn svg{width:16px;height:16px} /* Foto */ .bz-foto img{display:block;width:100%;height:auto;border-radius:22px} .bz-foto.wide img{border-radius:0} .bz-foto figcaption{margin-top:11px;font-size:.86rem;color:var(--grau);text-align:center} /* Foto + Text */ .bz-ft-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,4vw,58px);align-items:center} .bz-fototext.flip .bz-ft-media{order:2} .bz-ft-media{aspect-ratio:4/3;border-radius:22px;background:var(--papier-2);background-size:cover;background-position:center;display:grid;place-items:center;color:var(--gruen);overflow:hidden} .bz-ft-media svg{width:54px;height:54px;opacity:.45} .bz-ft-media.has-img svg{display:none} .bz-ft-body h2{font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.08;margin-bottom:14px} .bz-ft-body p{font-size:1.05rem;line-height:1.65;color:var(--tinte-2);margin-bottom:13px} /* Hinweis-Streifen */ .bz-hinweis-in{display:flex;align-items:center;gap:13px;padding:15px 22px;border-radius:16px;color:#fff;font-weight:600} .bz-hinweis-in svg{width:22px;height:22px;flex:0 0 22px} .bz-hinweis-in span{flex:1;font-size:1rem;line-height:1.4} .bz-hinweis-link{color:#fff;font-weight:800;text-decoration:none;white-space:nowrap;border-bottom:2px solid rgba(255,255,255,.5)} .bz-hinweis.c-gruen .bz-hinweis-in{background:var(--verlauf)} .bz-hinweis.c-gold .bz-hinweis-in{background:linear-gradient(122deg,#8a6516,#c8922f 60%,#e0b54e)} .bz-hinweis.c-blau .bz-hinweis-in{background:linear-gradient(122deg,#0d3b66,#1f6feb 75%,#3b8bf0)} .bz-hinweis.c-rot .bz-hinweis-in{background:linear-gradient(122deg,#7a1f16,#c0392b 75%,#d65a4e)} /* Info-/Aktions-Box */ .bz-box-card{padding:clamp(30px,4vw,48px);border-radius:24px;text-align:center} .bz-box-card h2{font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.1;margin-bottom:14px} .bz-box-card p{font-size:1.06rem;line-height:1.6;margin-bottom:6px;max-width:620px;margin-inline:auto} .bz-box-card .bz-eyebrow{color:inherit;opacity:.85} .bz-box-card.c-gruen{background:var(--verlauf);color:#fff} .bz-box-card.c-gold {background:linear-gradient(135deg,#8a6516,#c8922f 60%,#e6bd57);color:#fff} .bz-box-card.c-blau {background:linear-gradient(135deg,#0d3b66,#1f6feb 75%,#4a90f2);color:#fff} .bz-box-card.c-gruen .bz-btn,.bz-box-card.c-gold .bz-btn,.bz-box-card.c-blau .bz-btn{background:#fff;color:var(--tinte)} .bz-box-card.c-hell{background:var(--papier-2);color:var(--tinte);border:1px solid var(--linie)} /* Zitat */ .bz-quote{max-width:780px;margin:0 auto;text-align:center} .bz-qmark{width:40px;height:40px;color:var(--gruen);opacity:.55;margin-bottom:6px} .bz-quote blockquote{font-size:clamp(1.35rem,2.6vw,1.85rem);line-height:1.4;font-weight:600;letter-spacing:-.01em;color:var(--tinte);margin:0 0 16px} .bz-quote figcaption b{font-weight:800} .bz-quote figcaption span{display:block;font-size:.9rem;color:var(--grau);margin-top:2px} @media(max-width:760px){ .bz-ft-grid{grid-template-columns:1fr;gap:22px} .bz-fototext.flip .bz-ft-media{order:0} .bz-hinweis-in{flex-wrap:wrap} } /* ============================================================ Hintergrund-Designs (Blöcke & Seiten). Klassen .wm-bg-0..30. Farbe pro Verwendung anpassbar über --wmbg (Grundton) und --wmink (Musterfarbe). !important, damit eine bewusste Wahl auch fest eingestellte Block-Hintergründe überschreibt. ============================================================ */ .wm-bg-0{background:var(--wmbg,#fff)!important} .wm-bg-1{background:var(--wmbg,#f4f3ec)!important} .wm-bg-2{background:var(--wmbg,#ecebe1)!important} .wm-bg-3{background:var(--wmbg,#faf6ea)!important} .wm-bg-4{background:var(--wmbg,#f1f7ed)!important} .wm-bg-5{background:var(--wmbg,#e8f0e6)!important} .wm-bg-6{background:var(--wmbg,#eaf3ee)!important} .wm-bg-7{background:var(--wmbg,#eef4e2)!important} .wm-bg-8{background:var(--wmbg,#e6efdf)!important} .wm-bg-9{background:var(--wmbg,#fbf1ea)!important} .wm-bg-10{background:var(--wmbg,#fdf0e4)!important} .wm-bg-11{background:var(--wmbg,#fbf6df)!important} .wm-bg-12{background:var(--wmbg,#ecf3f8)!important} .wm-bg-13{background:var(--wmbg,#f1eef7)!important} .wm-bg-14{background:var(--wmbg,#fbeef0)!important} .wm-bg-15{background-color:var(--wmbg,#f4f3ec)!important;background-image:radial-gradient(var(--wmink,rgba(20,32,26,.06)) 1.1px,transparent 1.1px)!important;background-size:21px 21px!important} .wm-bg-16{background-color:var(--wmbg,#f1f7ed)!important;background-image:radial-gradient(var(--wmink,rgba(20,32,26,.06)) 1.3px,transparent 1.3px)!important;background-size:34px 34px!important} .wm-bg-17{background-color:var(--wmbg,#faf6ea)!important;background-image:linear-gradient(var(--wmink,rgba(20,32,26,.05)) 1px,transparent 1px),linear-gradient(90deg,var(--wmink,rgba(20,32,26,.05)) 1px,transparent 1px)!important;background-size:24px 24px!important} .wm-bg-18{background-color:var(--wmbg,#f4f3ec)!important;background-image:linear-gradient(var(--wmink,rgba(20,32,26,.04)) 1px,transparent 1px),linear-gradient(90deg,var(--wmink,rgba(20,32,26,.04)) 1px,transparent 1px)!important;background-size:13px 13px!important} .wm-bg-19{background-color:var(--wmbg,#f1f7ed)!important;background-image:repeating-linear-gradient(45deg,var(--wmink,rgba(20,32,26,.05)) 0,var(--wmink,rgba(20,32,26,.05)) 1px,transparent 1px,transparent 11px)!important} .wm-bg-20{background-color:var(--wmbg,#faf6ea)!important;background-image:repeating-linear-gradient(45deg,var(--wmink,rgba(20,32,26,.045)) 0,var(--wmink,rgba(20,32,26,.045)) 8px,transparent 8px,transparent 22px)!important} .wm-bg-21{background-color:var(--wmbg,#f4f3ec)!important;background-image:linear-gradient(45deg,var(--wmink,rgba(20,32,26,.05)) 25%,transparent 25%,transparent 75%,var(--wmink,rgba(20,32,26,.05)) 75%),linear-gradient(45deg,var(--wmink,rgba(20,32,26,.05)) 25%,transparent 25%,transparent 75%,var(--wmink,rgba(20,32,26,.05)) 75%)!important;background-size:26px 26px!important;background-position:0 0,13px 13px!important} .wm-bg-22{background-color:var(--wmbg,#f1f7ed)!important;background-image:radial-gradient(var(--wmink,rgba(20,32,26,.06)) 1.1px,transparent 1.1px),radial-gradient(var(--wmink,rgba(20,32,26,.06)) 1.1px,transparent 1.1px)!important;background-size:24px 24px!important;background-position:0 0,12px 12px!important} .wm-bg-23{background-color:var(--wmbg,#eaf3ee)!important;background-image:radial-gradient(circle at 12px 16px,transparent 8px,var(--wmink,rgba(20,32,26,.05)) 8px,var(--wmink,rgba(20,32,26,.05)) 9px,transparent 9px)!important;background-size:24px 18px!important} .wm-bg-24{background-color:var(--wmbg,#fbf1ea)!important;background-image:radial-gradient(circle at 10px 0,transparent 7px,var(--wmink,rgba(20,32,26,.05)) 7px,var(--wmink,rgba(20,32,26,.05)) 8px,transparent 8px)!important;background-size:20px 15px!important} .wm-bg-25{background-color:var(--wmbg,#faf6ea)!important;background-image:radial-gradient(var(--wmink,rgba(20,32,26,.07)) 1.5px,transparent 1.5px),radial-gradient(var(--wmink,rgba(20,32,26,.05)) 1.5px,transparent 1.5px)!important;background-size:46px 46px!important;background-position:0 0,23px 23px!important} .wm-bg-26{background-color:var(--wmbg,#f1f7ed)!important;background-image:linear-gradient(135deg,var(--wmink,rgba(20,32,26,.05)) 25%,transparent 25%),linear-gradient(225deg,var(--wmink,rgba(20,32,26,.05)) 25%,transparent 25%)!important;background-size:18px 18px!important} .wm-bg-27{background-color:var(--wmbg,#f4f3ec)!important;background-image:linear-gradient(45deg,var(--wmink,rgba(20,32,26,.05)) 25%,transparent 25%),linear-gradient(-45deg,var(--wmink,rgba(20,32,26,.05)) 25%,transparent 25%)!important;background-size:20px 20px!important} .wm-bg-28{background-color:var(--wmbg,#eef4e2)!important;background-image:linear-gradient(60deg,var(--wmink,rgba(20,32,26,.05)) 25%,transparent 25%),linear-gradient(-60deg,var(--wmink,rgba(20,32,26,.05)) 25%,transparent 25%)!important;background-size:22px 13px!important} .wm-bg-29{background-color:var(--wmbg,#eef5e8)!important;background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='54'%20height='54'%3E%3Cpath%20d='M27%2010C36%2017%2036%2032%2027%2044C18%2032%2018%2017%2027%2010Z'%20fill='%231a201a'%20opacity='0.05'/%3E%3C/svg%3E")!important} .wm-bg-30{background-color:var(--wmbg,#f4f3ec)!important;background-image:radial-gradient(var(--wmink,rgba(20,32,26,.05)) .9px,transparent .9px)!important;background-size:9px 9px!important} /* ============================================================ Moderne, cleane Designs & Verläufe (31–60). Anpassbar über --wmbg (Hauptfarbe) und --wmbg2 (zweite Farbe bzw. Verlaufsende). Bewusst hell gehalten, damit dunkle Schrift lesbar bleibt; Nr. 60 ist ein kräftiger Akzent. ============================================================ */ .wm-bg-31{background-image:linear-gradient(135deg,var(--wmbg,#f1f7ed),var(--wmbg2,#e3efdb))!important} .wm-bg-32{background-image:linear-gradient(135deg,var(--wmbg,#fdf0e4),var(--wmbg2,#fbf6df))!important} .wm-bg-33{background-image:linear-gradient(180deg,var(--wmbg,#ffffff),var(--wmbg2,#edf2f8))!important} .wm-bg-34{background-image:linear-gradient(135deg,var(--wmbg,#eef4ea),var(--wmbg2,#deecdc))!important} .wm-bg-35{background-image:linear-gradient(180deg,var(--wmbg,#fbfbf7),var(--wmbg2,#efece1))!important} .wm-bg-36{background-image:linear-gradient(120deg,var(--wmbg,#fdf0e6),var(--wmbg2,#fbe9ee))!important} .wm-bg-37{background-image:linear-gradient(160deg,var(--wmbg,#eef3f8),var(--wmbg2,#e1ebf4))!important} .wm-bg-38{background-image:linear-gradient(135deg,var(--wmbg,#f3eff6),var(--wmbg2,#e9e1f0))!important} .wm-bg-39{background-image:linear-gradient(135deg,var(--wmbg,#eaf6ef),var(--wmbg2,#d8ece2))!important} .wm-bg-40{background-image:linear-gradient(115deg,var(--wmbg,#f1f7ed) 0,var(--wmbg,#f1f7ed) 50%,var(--wmbg2,#eaf3f8) 50%,var(--wmbg2,#eaf3f8) 100%)!important} .wm-bg-41{background-image:linear-gradient(115deg,var(--wmbg,#f4f3ec),var(--wmbg2,#e7f0e2))!important} .wm-bg-42{background-color:var(--wmbg,#f3f7ef)!important;background-image:radial-gradient(120% 120% at 0% 0%,var(--wmbg2,#dcecd6) 0,transparent 55%)!important} .wm-bg-43{background-color:var(--wmbg,#f6f5ee)!important;background-image:radial-gradient(90% 70% at 50% -10%,var(--wmbg2,#e6f0dc) 0,transparent 60%)!important} .wm-bg-44{background-color:var(--wmbg,#f4f6f1)!important;background-image:radial-gradient(90% 70% at 50% 115%,var(--wmbg2,#d7ecdd) 0,transparent 60%)!important} .wm-bg-45{background-color:var(--wmbg,#f3f8ef)!important;background-image:radial-gradient(at 18% 22%,var(--wmbg2,#cdeccd) 0,transparent 55%),radial-gradient(at 82% 16%,#e7f3d6 0,transparent 50%),radial-gradient(at 72% 84%,#d6efe3 0,transparent 55%)!important} .wm-bg-46{background-color:var(--wmbg,#fbf4ef)!important;background-image:radial-gradient(at 20% 20%,var(--wmbg2,#fbdcd0) 0,transparent 52%),radial-gradient(at 80% 22%,#dfeaf8 0,transparent 50%),radial-gradient(at 60% 85%,#ece1f3 0,transparent 55%)!important} .wm-bg-47{background-color:var(--wmbg,#f6f8ec)!important;background-image:radial-gradient(at 22% 25%,var(--wmbg2,#d8edcb) 0,transparent 55%),radial-gradient(at 80% 30%,#f3eecb 0,transparent 52%),radial-gradient(at 65% 88%,#dcefd9 0,transparent 55%)!important} .wm-bg-48{background-color:var(--wmbg,#fcf3ea)!important;background-image:radial-gradient(at 18% 20%,var(--wmbg2,#fcdcc8) 0,transparent 55%),radial-gradient(at 82% 25%,#fbe6c0 0,transparent 50%),radial-gradient(at 60% 85%,#fbd8e0 0,transparent 55%)!important} .wm-bg-49{background-color:var(--wmbg,#eef5f6)!important;background-image:radial-gradient(at 20% 22%,var(--wmbg2,#cfe9f1) 0,transparent 55%),radial-gradient(at 80% 20%,#d8efe4 0,transparent 50%),radial-gradient(at 65% 85%,#e7f1f6 0,transparent 55%)!important} .wm-bg-50{background-color:var(--wmbg,#f8f0f4)!important;background-image:radial-gradient(at 20% 22%,var(--wmbg2,#f4d6e2) 0,transparent 55%),radial-gradient(at 80% 22%,#e3def3 0,transparent 50%),radial-gradient(at 62% 85%,#f6ead2 0,transparent 55%)!important} .wm-bg-51{background-image:conic-gradient(from 220deg at 70% 30%,var(--wmbg,#f1f7ed),var(--wmbg2,#eaf2f8),var(--wmbg,#f1f7ed))!important} .wm-bg-52{background-color:var(--wmbg,#f3f7ef)!important;background-image:conic-gradient(from 180deg at 50% 50%,var(--wmbg2,#e8f1df),transparent 25%,var(--wmbg2,#e8f1df) 50%,transparent 75%,var(--wmbg2,#e8f1df))!important} .wm-bg-53{background-image:linear-gradient(180deg,var(--wmbg2,#ffffff),var(--wmbg,#eaf2e4))!important} .wm-bg-54{background-image:linear-gradient(180deg,var(--wmbg,#eaf2e4),var(--wmbg2,#ffffff))!important} .wm-bg-55{background-color:var(--wmbg,#eef3ea)!important;background-image:radial-gradient(120% 80% at 50% 40%,var(--wmbg2,#ffffff) 0,transparent 75%)!important} .wm-bg-56{background-image:linear-gradient(90deg,var(--wmbg,#edf4e7),var(--wmbg2,#ffffff))!important} .wm-bg-57{background-image:linear-gradient(135deg,var(--wmbg,#bfe6c2) 0,var(--wmbg2,#ffffff) 92%)!important} .wm-bg-58{background-image:linear-gradient(135deg,var(--wmbg,#ecc98a) 0,var(--wmbg2,#fdfaf2) 92%)!important} .wm-bg-59{background-image:linear-gradient(135deg,var(--wmbg,#a9cde6) 0,var(--wmbg2,#ffffff) 92%)!important} .wm-bg-60{background-image:linear-gradient(122deg,var(--wmbg,#0c500e) 0%,var(--wmbg2,#00b218) 100%)!important} /* ============================================================ 20 komplett neue Design-Typen (61–80): echte neue Muster & Effekte (Körnung, Höhenlinien, 3D-Würfel, Terrazzo, Bokeh, Marmor …). Grundton über --wmbg, zweite Farbe über --wmbg2, Linien/Tinte über --wmink anpassbar. ============================================================ */ .wm-bg-61{background-color:var(--wmbg,#f4f3ec)!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='wg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23wg)' opacity='0.05'/%3E%3C/svg%3E")!important} .wm-bg-62{background-color:var(--wmbg,#eef4f2)!important;background-image:repeating-radial-gradient(circle at 100% 0,transparent 0,transparent 20px,var(--wmink,rgba(20,32,26,.05)) 20px,var(--wmink,rgba(20,32,26,.05)) 21px)!important} .wm-bg-63{background-color:var(--wmbg,#eef4ef)!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='22'%3E%3Cpath d='M0 11 Q20 1 40 11 T80 11' fill='none' stroke='%231a201a' stroke-opacity='0.07' stroke-width='1.4'/%3E%3C/svg%3E")!important} .wm-bg-64{background-color:var(--wmbg,#f1f5ee)!important;background-image:repeating-radial-gradient(circle at 30% 35%,transparent 0,transparent 14px,var(--wmink,rgba(20,32,26,.045)) 14px,var(--wmink,rgba(20,32,26,.045)) 15px),repeating-radial-gradient(circle at 78% 72%,transparent 0,transparent 16px,var(--wmink,rgba(20,32,26,.035)) 16px,var(--wmink,rgba(20,32,26,.035)) 17px)!important} .wm-bg-65{background-color:var(--wmbg,#f4f3ec)!important;background-image:linear-gradient(30deg,var(--wmink,rgba(20,32,26,.05)) 12%,transparent 12.5%,transparent 87%,var(--wmink,rgba(20,32,26,.05)) 87.5%,var(--wmink,rgba(20,32,26,.05))),linear-gradient(150deg,var(--wmink,rgba(20,32,26,.05)) 12%,transparent 12.5%,transparent 87%,var(--wmink,rgba(20,32,26,.05)) 87.5%,var(--wmink,rgba(20,32,26,.05))),linear-gradient(30deg,var(--wmink,rgba(20,32,26,.05)) 12%,transparent 12.5%,transparent 87%,var(--wmink,rgba(20,32,26,.05)) 87.5%,var(--wmink,rgba(20,32,26,.05))),linear-gradient(150deg,var(--wmink,rgba(20,32,26,.05)) 12%,transparent 12.5%,transparent 87%,var(--wmink,rgba(20,32,26,.05)) 87.5%,var(--wmink,rgba(20,32,26,.05))),linear-gradient(60deg,rgba(20,32,26,.03) 25%,transparent 25.5%,transparent 75%,rgba(20,32,26,.03) 75%,rgba(20,32,26,.03)),linear-gradient(60deg,rgba(20,32,26,.03) 25%,transparent 25.5%,transparent 75%,rgba(20,32,26,.03) 75%,rgba(20,32,26,.03))!important;background-size:40px 70px!important;background-position:0 0,0 0,20px 35px,20px 35px,0 0,20px 35px!important} .wm-bg-66{background-color:var(--wmbg,#eaf1f7)!important;background-image:linear-gradient(var(--wmink,rgba(22,60,96,.07)) 1px,transparent 1px),linear-gradient(90deg,var(--wmink,rgba(22,60,96,.07)) 1px,transparent 1px),linear-gradient(rgba(22,60,96,.13) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(22,60,96,.13) 1.5px,transparent 1.5px)!important;background-size:22px 22px,22px 22px,110px 110px,110px 110px!important} .wm-bg-67{background-color:var(--wmbg,#fbfbf3)!important;background-image:linear-gradient(var(--wmink,rgba(36,96,36,.06)) 1px,transparent 1px),linear-gradient(90deg,var(--wmink,rgba(36,96,36,.06)) 1px,transparent 1px),linear-gradient(rgba(36,96,36,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(36,96,36,.11) 1px,transparent 1px)!important;background-size:13px 13px,13px 13px,65px 65px,65px 65px!important} .wm-bg-68{background-color:var(--wmbg,#f1f7ed)!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M13 8.5v9M8.5 13h9' stroke='%231a201a' stroke-opacity='0.10' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")!important} .wm-bg-69{background-color:var(--wmbg,#faf6ea)!important;background-image:linear-gradient(135deg,var(--wmink,rgba(20,32,26,.05)) 25%,transparent 25%),linear-gradient(225deg,var(--wmink,rgba(20,32,26,.05)) 25%,transparent 25%),linear-gradient(45deg,var(--wmink,rgba(20,32,26,.05)) 25%,transparent 25%),linear-gradient(315deg,var(--wmink,rgba(20,32,26,.05)) 25%,transparent 25%)!important;background-size:44px 44px!important;background-position:0 0,22px 0,22px -22px,0 22px!important} .wm-bg-70{background-image:repeating-linear-gradient(45deg,var(--wmbg,#f1f7ed) 0,var(--wmbg,#f1f7ed) 26px,var(--wmbg2,#e3efdb) 26px,var(--wmbg2,#e3efdb) 52px)!important} .wm-bg-71{background-color:var(--wmbg,#f6f4ec)!important;background-image:radial-gradient(circle at 15% 20%,var(--wmbg2,#bfd9a8) 0,var(--wmbg2,#bfd9a8) 5px,transparent 6px),radial-gradient(circle at 70% 15%,#e7b9a0 0,#e7b9a0 4px,transparent 5px),radial-gradient(circle at 40% 55%,#a9c6d8 0,#a9c6d8 6px,transparent 7px),radial-gradient(circle at 85% 60%,#d9c27a 0,#d9c27a 4px,transparent 5px),radial-gradient(circle at 25% 85%,#c3a6cf 0,#c3a6cf 5px,transparent 6px),radial-gradient(circle at 60% 90%,#bfd9a8 0,#bfd9a8 4px,transparent 5px)!important;background-size:150px 150px!important} .wm-bg-72{background-color:var(--wmbg,#eef4f6)!important;background-image:radial-gradient(circle at 20% 30%,var(--wmbg2,rgba(255,255,255,.85)) 0,transparent 16%),radial-gradient(circle at 75% 25%,rgba(255,255,255,.6) 0,transparent 12%),radial-gradient(circle at 60% 75%,rgba(255,255,255,.7) 0,transparent 18%),radial-gradient(circle at 35% 85%,rgba(255,255,255,.5) 0,transparent 14%),radial-gradient(circle at 90% 60%,rgba(255,255,255,.55) 0,transparent 12%)!important} .wm-bg-73{background-color:var(--wmbg,#eef4ec)!important;background-image:repeating-linear-gradient(0deg,var(--wmbg2,rgba(28,96,28,.07)) 0,var(--wmbg2,rgba(28,96,28,.07)) 2px,transparent 2px,transparent 22px),repeating-linear-gradient(90deg,var(--wmbg2,rgba(28,96,28,.07)) 0,var(--wmbg2,rgba(28,96,28,.07)) 2px,transparent 2px,transparent 22px),repeating-linear-gradient(0deg,rgba(28,96,28,.05) 0,rgba(28,96,28,.05) 8px,transparent 8px,transparent 22px),repeating-linear-gradient(90deg,rgba(28,96,28,.05) 0,rgba(28,96,28,.05) 8px,transparent 8px,transparent 22px)!important} .wm-bg-74{background-color:var(--wmbg,#f3eff6)!important;background-image:linear-gradient(45deg,var(--wmink,rgba(20,32,26,.05)) 25%,transparent 25%,transparent 75%,var(--wmink,rgba(20,32,26,.05)) 75%),linear-gradient(-45deg,var(--wmink,rgba(20,32,26,.05)) 25%,transparent 25%,transparent 75%,var(--wmink,rgba(20,32,26,.05)) 75%)!important;background-size:32px 32px!important} .wm-bg-75{background-color:var(--wmbg,#eef4ea)!important;background-image:linear-gradient(60deg,var(--wmink,rgba(20,32,26,.05)),transparent 55%),linear-gradient(300deg,rgba(20,32,26,.04),transparent 55%),linear-gradient(180deg,var(--wmbg2,rgba(20,32,26,.03)),transparent 70%)!important;background-size:64px 56px!important} .wm-bg-76{background-color:var(--wmbg,#f4f3ec)!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M0 0.5H22M0.5 0V22' fill='none' stroke='%231a201a' stroke-opacity='0.09' stroke-width='1' stroke-dasharray='3 3'/%3E%3C/svg%3E")!important} .wm-bg-77{background-color:var(--wmbg,#f1f7ed)!important;background-image:repeating-linear-gradient(0deg,var(--wmbg2,rgba(28,96,28,.05)) 0,var(--wmbg2,rgba(28,96,28,.05)) 11px,transparent 11px,transparent 22px),repeating-linear-gradient(90deg,var(--wmbg2,rgba(28,96,28,.05)) 0,var(--wmbg2,rgba(28,96,28,.05)) 11px,transparent 11px,transparent 22px)!important} .wm-bg-78{background-color:var(--wmbg,#eff2f7)!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='%231a201a' fill-opacity='0.09'%3E%3Cpath d='M16 8l1.4 4.2 4.4 0.2-3.5 2.7 1.3 4.3-3.6-2.5-3.6 2.5 1.3-4.3-3.5-2.7 4.4-0.2z'/%3E%3Ccircle cx='46' cy='40' r='1.5'/%3E%3Ccircle cx='30' cy='52' r='1'/%3E%3C/g%3E%3C/svg%3E")!important} .wm-bg-79{background-color:var(--wmbg,#f4f3ec)!important;background-image:radial-gradient(var(--wmink,rgba(20,32,26,.09)) 2.2px,transparent 2.4px),radial-gradient(var(--wmink,rgba(20,32,26,.05)) 1.1px,transparent 1.3px)!important;background-size:26px 26px,26px 26px!important;background-position:0 0,13px 13px!important} .wm-bg-80{background-color:var(--wmbg,#f3f1ea)!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='wmm'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.024' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.18 0 0 0 0 0.12 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23wmm)' opacity='0.45'/%3E%3C/svg%3E")!important} /* ===== Consent-Banner ===== */ .wm-cc{position:fixed;left:0;right:0;bottom:0;z-index:1200;display:flex;justify-content:center;padding:14px;pointer-events:none;transform:translateY(130%);transition:transform .5s var(--takt)} .wm-cc.show{transform:none} .wm-cc-card{pointer-events:auto;max-width:760px;width:100%;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-l);box-shadow:var(--sh-l);padding:18px 20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap} .wm-cc-txt{flex:1;min-width:240px} .wm-cc-txt strong{display:block;font-weight:800;color:var(--tinte);margin-bottom:3px} .wm-cc-txt p{font-size:.86rem;color:var(--tinte-2);line-height:1.45;margin:0} .wm-cc-txt a{color:var(--gruen-m);font-weight:700} .wm-cc-btns{display:flex;gap:10px;flex:0 0 auto} .wm-cc-btn{font-family:inherit;font-weight:700;font-size:.92rem;padding:11px 22px;border-radius:100px;cursor:pointer;border:1.5px solid var(--linie);transition:transform .3s var(--takt),opacity .3s var(--takt),background-color .3s var(--takt),background-position .3s var(--takt),border-color .3s var(--takt),color .3s var(--takt),box-shadow .3s var(--takt),filter .3s var(--takt);white-space:nowrap} /* Ablehnen bleibt neutral; Umrandung, Link und Fokus nutzen den mittleren Ton des bestehenden Verlaufs. */ .wm-cc-btn.choice{background:var(--weiss);color:var(--tinte);border-color:var(--gruen-m)} .wm-cc-btn.choice:hover{background:var(--papier-2);border-color:var(--gruen-m);transform:translateY(-1px)} .wm-cc-btn.choice:focus-visible{outline:3px solid var(--gruen-m);outline-offset:2px} /* Akzeptieren verwendet dasselbe zentrale Verlaufgrün wie die übrigen primären Website-Buttons. */ .wm-cc-btn.choice[data-cc="all"]{background:var(--verlauf);background-size:120% 120%;background-position:0 50%;color:var(--weiss);border-color:transparent;box-shadow:0 8px 20px rgba(10,102,16,.18)} .wm-cc-btn.choice[data-cc="all"]:hover{background:var(--verlauf);background-size:120% 120%;background-position:100% 50%;color:var(--weiss);border-color:transparent;transform:translateY(-1px);box-shadow:0 10px 24px rgba(10,102,16,.25)} .wm-cc-btn.choice[data-cc="all"]:focus-visible{outline:3px solid var(--gruen-m);outline-offset:2px} @media(max-width:560px){.wm-cc-card{padding:16px}.wm-cc-btns{width:100%}.wm-cc-btn{flex:1}} /* ============================================================= MICRO-ANIMATIONEN — dezent & modern (kein Effekt-Overkill) ============================================================= */ .d5{transition-delay:.35s}.d6{transition-delay:.42s} /* Hero: Inhalte gleiten pro Slide sanft nach oben ein (erste Slide ist serverseitig .active -> auch ohne JS sichtbar) */ .hs-copy>*{opacity:0;transform:translateY(16px);transition:opacity .7s var(--takt),transform .7s var(--takt)} .hs-slide.active .hs-copy>*{opacity:1;transform:none} .hs-slide.active .hs-copy>*:nth-child(1){transition-delay:.10s} .hs-slide.active .hs-copy>*:nth-child(2){transition-delay:.22s} .hs-slide.active .hs-copy>*:nth-child(3){transition-delay:.34s} .hs-slide.active .hs-copy>*:nth-child(4){transition-delay:.46s} /* Buttons: fühlbarer Klick */ .btn:active,.promo-btn:active,.hs-cta:active,.fbtn:active,.sp-cta:active{transform:scale(.965)} /* Karten ohne eigenen Hover bekommen sanften Lift */ .k-person:hover{transform:translateY(-4px);box-shadow:var(--sh-s)} .faq-item:hover{box-shadow:var(--sh-s)} .news-list>*{transition:transform .35s var(--takt),box-shadow .35s var(--takt)} .news-list>*:hover{transform:translateY(var(--lift-control))} .k-item{transition:transform .35s var(--takt)} .k-item:hover{transform:translateX(4px)} /* (Unterstrich-Slide der Navi: bereits oben im Menü-Abschnitt definiert) */ /* Barrierefreiheit: reduzierte Bewegung respektieren (einziger Reduce-Block) */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto!important} *,*::before,*::after{animation:none !important;transition-duration:.01ms !important} html.wm-motion main,html.wm-motion footer,.wm-enter-pending,.wm-enter-pending.wm-enter-active,.reveal,.hs-copy>*{opacity:1!important;transform:none!important;transition:none!important;animation:none!important} .news-list>*,.k-item,.k-person{transition:none!important} *{animation-duration:.001s!important;animation-iteration-count:1!important} } /* Seitenköpfe verwenden dieselbe zentrale Reveal-Logik wie Karten und Inhaltsblöcke. */ /* Zentrale Abwesenheitskomponente: hell, warm und bewusst weniger wie eine Fehlermeldung. Der Text selbst benennt den Zustand eindeutig; ein zusätzliches Warnsymbol ist deshalb nicht nötig. */ .absence-note{ --absence-text:#6b3700; display:inline-flex;align-items:flex-start;max-width:100%;width:fit-content; padding:8px 11px;border:1px solid rgba(224,126,0,.24);border-radius:12px; background:linear-gradient(135deg,rgba(255,164,43,.24),rgba(255,205,120,.17)); color:var(--absence-text);box-shadow:0 10px 24px -22px rgba(214,112,0,.9); font-size:.75rem;font-style:normal;font-weight:720;line-height:1.38; overflow-wrap:anywhere;backdrop-filter:saturate(1.08); } @media(max-width:430px){.absence-note{padding:7px 10px;font-size:.73rem;border-radius:11px}} /* Originaler Wochenmarkt-Verlauf für interaktive grüne Elemente: exakt von oben links (#0c500e) nach unten rechts (#00b218). Safari/WebKit rendert ihn ohne Filter-Animation und ohne dunkle Antialias-Nähte an den abgerundeten Kanten. Dekorative Flächen behalten weiterhin --verlauf. */ .btn-primary,.nav-cta,.m-menu .m-cta,.wm-cc-btn.choice[data-cc="all"], .fchip.on,.nf.on,.reset-filter,.site-search button,.search-empty a, .wm-sp .sp-seg button.on,.wm-sp .sp-save,.wm-sp .sp-info .sp-profile, .wm-sp .sp-pop .sp-profile,.bz-btn,.errpage .err-actions a{ background-color:#0c500e!important; background-image:var(--button-verlauf)!important; background-size:100% 100%!important; background-position:center!important; background-repeat:no-repeat!important; background-clip:padding-box!important; -webkit-background-clip:padding-box!important; overflow:hidden; isolation:isolate; backface-visibility:hidden; -webkit-backface-visibility:hidden; filter:none!important; } .fchip.on,.nf.on,.wm-cc-btn.choice[data-cc="all"]{border-color:#0c500e!important} .nav-cta:hover,.nav-cta.active,.m-menu .m-cta:hover, .wm-cc-btn.choice[data-cc="all"]:hover,.fchip.on:hover,.nf.on:hover, .reset-filter:hover,.site-search button:hover,.search-empty a:hover, .wm-sp .sp-seg button.on:hover,.wm-sp .sp-save:hover, .wm-sp .sp-info .sp-profile:hover,.wm-sp .sp-pop .sp-profile:hover, .bz-btn:hover,.errpage .err-actions a:hover{filter:none!important}