/* ============================================================ Jürgen Zinken – Bürgermeister für Kruft Hell · freundlich · emotional · CDU-Markenfarben (Türkis · Gold · Blau) ============================================================ */ :root{ --teal: #52b7c1; /* Cadenabbia-Türkis */ --teal-deep: #2f8d97; --teal-soft: #d6eef1; --ink: #2d3c4b; /* Rhöndorf-Blau */ --ink-soft: #5a6878; /* ===== SIGNALFARBE (umschaltbar) ===================================== Standard = Union-Gold. Zum Testen einfach am -Tag setzen: -> Union-Gold -> Cadenabbia-Türkis -> Rhöndorf-Blau --signal = Füllfarbe (Buttons, Badges, Ticker, Linien) --signal-ink = lesbarer Signalton als TEXT auf hellem Grund --on-signal = Schriftfarbe AUF Signal-Flächen --signal-rgb = gleiche Farbe als RGB-Tripel (für Schatten/Verläufe) */ --signal: #ffa600; --signal-ink: #c47e00; --on-signal: #2d3c4b; --signal-rgb: 255,166,0; --cream: #fbf8f3; --cream-2: #f3ede3; --white: #ffffff; --radius: 22px; --shadow: 0 24px 60px -24px rgba(23,132,151,.35); --shadow-sm: 0 12px 30px -16px rgba(28,43,49,.4); --maxw: 1180px; --ease: cubic-bezier(.22,1,.36,1); } /* ----- Signalfarben-Presets: per umschalten ----- */ [data-signal="gold"] {--signal:#ffa600;--signal-ink:#c47e00;--on-signal:#2d3c4b;--signal-rgb:255,166,0} [data-signal="tuerkis"]{--signal:#52b7c1;--signal-ink:#2f8d97;--on-signal:#2d3c4b;--signal-rgb:82,183,193} [data-signal="blau"] {--signal:#2d3c4b;--signal-ink:#2d3c4b;--on-signal:#ffffff;--signal-rgb:45,60,75} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:'Poppins',system-ui,-apple-system,sans-serif; color:var(--ink); background:var(--cream); line-height:1.65; overflow-x:hidden; -webkit-font-smoothing:antialiased; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} section{position:relative} h1,h2,h3{line-height:1.08;font-weight:800;letter-spacing:-.02em} h2{font-size:clamp(1.9rem,4.2vw,3.1rem)} h3{font-size:1.3rem} /* ---------- shared bits ---------- */ .kicker{ display:inline-block;font-weight:700;font-size:.8rem;letter-spacing:.18em; text-transform:uppercase;color:var(--signal-ink);margin-bottom:1rem; } .kicker--center{display:block;text-align:center} .kicker--light{color:#fff;opacity:.85} .section-head{max-width:760px;margin:0 auto;text-align:center;padding:0 24px} .section-head h2{margin-bottom:.4em} .btn{ display:inline-flex;align-items:center;gap:.5em; padding:.95em 1.7em;border-radius:100px;font-weight:700;font-size:1rem; cursor:pointer;border:2px solid transparent;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s; will-change:transform; } .btn--sm{padding:.7em 1.3em;font-size:.92rem} .btn--solid{background:var(--signal);color:var(--on-signal)} .btn--solid:hover{transform:translateY(-3px);filter:brightness(.96)} .btn--ghost{border-color:rgba(255,255,255,.8);color:#fff} .btn--ghost:hover{background:#fff;color:var(--teal-deep);transform:translateY(-3px)} .btn--ghost.btn--dark{border-color:var(--teal-deep);color:var(--teal-deep)} .btn--ghost.btn--dark:hover{background:var(--teal-deep);color:#fff} /* reveal */ .reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s)} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} /* ============================================================ NAV ============================================================ */ .nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:padding .3s;padding:18px 0} /* Blur/Hintergrund auf Pseudoelement, damit .nav KEIN Containing Block für das fixed positionierte Mobil-Menü wird (backdrop-filter würde es brechen) */ .nav::before{content:"";position:absolute;inset:0;background:rgba(251,248,243,.92); backdrop-filter:blur(12px);box-shadow:0 6px 24px -18px rgba(28,43,49,.6); opacity:0;transition:opacity .3s;pointer-events:none} .nav--solid::before{opacity:1} .nav--solid{padding:10px 0} .nav__inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between} .nav__brand{position:relative;display:block;line-height:0} .nav__logo{height:44px;width:auto;display:block;transition:opacity .3s,height .3s} .nav__logo--c{position:absolute;top:0;left:0;opacity:0} .nav--solid .nav__logo{height:38px} .nav--solid .nav__logo--w{opacity:0} .nav--solid .nav__logo--c{opacity:1} .nav__links{display:flex;align-items:center;gap:30px} .nav__links a{font-weight:600;font-size:.95rem;color:#fff;transition:color .25s;position:relative} .nav__links a:not(.nav__cta)::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--signal);transition:width .3s var(--ease)} .nav__links a:not(.nav__cta):hover::after{width:100%} .nav--solid .nav__links a{color:var(--ink)} .nav__cta{background:var(--signal);color:var(--on-signal)!important;padding:.6em 1.3em;border-radius:100px} .nav__cta:hover{transform:translateY(-2px)} .nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px} .nav__burger span{width:26px;height:3px;background:#fff;border-radius:3px;transition:.3s} .nav--solid .nav__burger span{background:var(--ink)} /* ============================================================ HERO ============================================================ */ .hero{min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--teal-deep)} .hero__bg{position:absolute;inset:-8% 0;z-index:0;will-change:transform} .hero__img{width:100%;height:120%;object-fit:cover;object-position:70% 35%;transform:scale(1.12)} .hero__veil{position:absolute;inset:0;z-index:1; background: linear-gradient(105deg,rgba(15,90,104,.92) 0%,rgba(23,132,151,.7) 38%,rgba(23,132,151,.15) 64%,rgba(23,132,151,0) 80%), linear-gradient(0deg,rgba(15,80,93,.55),rgba(0,0,0,0) 45%); } .hero__content{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:120px 24px 80px;width:100%} .hero__eyebrow{display:inline-block;color:var(--on-signal);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.82rem; background:var(--signal);padding:.5em 1.1em;border-radius:100px;margin-bottom:1.4rem;box-shadow:var(--shadow-sm)} .hero__title{font-size:clamp(3.2rem,10vw,7rem);color:#fff;letter-spacing:-.03em;margin-bottom:.4em} .hero__title span{display:block} .hero__accent{color:var(--teal-soft);position:relative;width:max-content} .hero__accent::after{content:"";position:absolute;left:0;bottom:.08em;width:100%;height:.12em;background:var(--signal);border-radius:4px} .hero__sub{color:rgba(255,255,255,.92);font-size:clamp(1.05rem,2.2vw,1.35rem);max-width:34ch;margin-bottom:2rem;font-weight:400} .hero__actions{display:flex;gap:14px;flex-wrap:wrap} .hero__signature{position:absolute;right:5%;bottom:6%;z-index:2;width:clamp(180px,28vw,360px);height:auto; opacity:.18;pointer-events:none;transform:rotate(-4deg)} .hero__scroll{position:absolute;left:50%;bottom:26px;z-index:3;width:26px;height:42px;border:2px solid rgba(255,255,255,.6); border-radius:14px;transform:translateX(-50%)} .hero__scroll span{position:absolute;left:50%;top:8px;width:4px;height:8px;background:#fff;border-radius:3px;transform:translateX(-50%);animation:scroll 1.6s infinite} @keyframes scroll{0%{opacity:0;top:8px}30%{opacity:1}60%{opacity:1;top:20px}100%{opacity:0;top:24px}} /* ============================================================ TICKER ============================================================ */ .ticker{overflow:hidden;position:relative;z-index:4} .ticker__track{display:flex;align-items:center;gap:28px;width:max-content;padding:14px 0;background:var(--teal);color:var(--ink);animation:marquee 26s linear infinite;font-weight:700;font-size:1.05rem;white-space:nowrap} .ticker__track span{letter-spacing:.01em} .ticker__track i{font-style:normal;color:#fff;font-size:.8rem} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ============================================================ PERSON ============================================================ */ .person{padding:clamp(70px,10vw,130px) 24px} .person__grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(40px,6vw,90px);align-items:center} .person__media{position:relative} .person__frame{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transform:rotate(-2deg);position:relative} .person__frame::after{content:"";position:absolute;inset:0;border:6px solid #fff;border-radius:var(--radius);pointer-events:none} .person__frame img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.2s var(--ease)} .person__media:hover .person__frame img{transform:scale(1.05)} .person__badge{position:absolute;right:-14px;bottom:-22px;background:var(--teal);color:#fff;border-radius:50%;width:130px;height:130px; display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:var(--shadow); transform:rotate(6deg);border:4px solid #fff} .person__badge__x{width:38px;height:38px;object-fit:contain;display:block} .person__badge span{font-size:.74rem;font-weight:600;line-height:1.2;margin-top:4px} .person__text h2{margin:.1em 0 .6em} .person__text p{color:var(--ink-soft);margin-bottom:1.1em;max-width:54ch} .person__text em{color:var(--signal-ink);font-style:italic;font-size:.85em;font-weight:600} .person__facts{list-style:none;display:flex;gap:30px 36px;margin-top:1.6em;flex-wrap:wrap;justify-content:center;text-align:center} .person__facts li{display:flex;flex-direction:column;align-items:center} .person__facts span{font-size:2.6rem;font-weight:800;color:var(--teal-deep);line-height:1} .person__facts small{font-size:.82rem;color:var(--ink-soft);font-weight:600} /* ============================================================ THEMEN ============================================================ */ .themen{padding:clamp(60px,9vw,120px) 24px;background: radial-gradient(1200px 500px at 80% -10%,var(--teal-soft),transparent 60%), var(--cream)} .themen__grid{max-width:var(--maxw);margin:48px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .card{background:#fff;border-radius:var(--radius);padding:32px 30px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden; display:flex;gap:22px;align-items:flex-start; transition:transform .4s var(--ease),box-shadow .4s var(--ease)} .card::before{content:"";position:absolute;left:0;top:0;height:6px;width:100%;background:var(--c,var(--teal));transform-origin:left;transform:scaleX(.25);transition:transform .5s var(--ease)} .card:hover{transform:translateY(-8px);box-shadow:0 30px 50px -22px rgba(28,43,49,.45)} .card:hover::before{transform:scaleX(1)} .card__icon{flex:0 0 auto;color:var(--c);line-height:0;margin-top:2px;transition:transform .5s var(--ease)} .card__icon svg{width:56px;height:56px;display:block} .card:hover .card__icon{transform:scale(1.08) rotate(-3deg)} .card__body{min-width:0} .card h3{color:var(--ink);margin-bottom:.5em} .card p{color:var(--ink-soft);font-size:.96rem} .card__tag{display:inline-block;margin-top:18px;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:color-mix(in srgb,var(--c) 62%,var(--ink));background:color-mix(in srgb,var(--c) 14%,#fff);padding:.4em .9em;border-radius:100px} .card--cta{background:linear-gradient(135deg,var(--teal-deep),var(--teal));color:#fff;align-items:center} .card--cta::before{display:none} .card--cta h3{color:#fff} .card--cta p{color:rgba(255,255,255,.9);margin-bottom:1.2em} /* ============================================================ VISION / QUOTE ============================================================ */ .vision{min-height:80vh;display:flex;align-items:center;overflow:hidden;background:var(--ink)} .vision__media{position:absolute;inset:-10% 0;z-index:0;will-change:transform} .vision__media img{width:100%;height:120%;object-fit:cover;object-position:50% 30%;transform:scale(1.12)} .vision__veil{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(45,60,75,.92),rgba(45,60,75,.55) 50%,rgba(var(--signal-rgb),.35))} .vision__content{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:90px 24px;width:100%} .vision__mark{font-family:'Caveat',cursive;font-size:7rem;color:var(--teal-soft);line-height:0;display:block;height:.4em} .vision__content blockquote{color:#fff;font-size:clamp(1.5rem,3.6vw,2.6rem);font-weight:700;max-width:18ch;letter-spacing:-.02em;line-height:1.18} .vision__by{color:var(--teal-soft);margin-top:1.4em;font-weight:600} .vision__by em{opacity:.6;font-size:.8em} /* ============================================================ PLAKATE ============================================================ */ .plakate{padding:clamp(60px,9vw,120px) 24px} .plakate__row{max-width:var(--maxw);margin:48px auto 0;display:grid;grid-template-columns:repeat(5,1fr);gap:18px} .plakat{border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .45s var(--ease),box-shadow .45s var(--ease);aspect-ratio:3/4} .plakat img{width:100%;height:100%;object-fit:cover} .plakat:hover{transform:translateY(-10px) rotate(-1.5deg);box-shadow:0 30px 50px -20px rgba(28,43,49,.5)} /* ============================================================ WAHL CTA ============================================================ */ .wahl{padding:clamp(70px,10vw,130px) 24px;background: radial-gradient(900px 500px at 10% 110%,rgba(var(--signal-rgb),.18),transparent 60%), linear-gradient(160deg,var(--teal) 0%,var(--teal-deep) 100%)} .wahl__card{max-width:760px;margin:0 auto;text-align:center;background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25);border-radius:32px;padding:clamp(40px,6vw,70px);color:#fff; backdrop-filter:blur(6px);box-shadow:0 40px 80px -40px rgba(0,0,0,.5)} .wahl__card h2{color:#fff;margin-bottom:.3em} .wahl__x{position:relative;width:132px;margin:30px auto 18px} .wahl__cross{display:block;width:100%;height:auto;transform-origin:center;animation:stamp 2.4s var(--ease) infinite} @keyframes stamp{0%,70%,100%{transform:scale(1) rotate(-4deg)}80%{transform:scale(1.1) rotate(-4deg)}} .wahl__name{display:block;width:clamp(220px,42%,340px);height:auto;margin:6px auto 0} .wahl__date{opacity:.9;margin-bottom:1.6em} .wahl__date em{opacity:.7;font-size:.85em} .wahl__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* ============================================================ FOOTER ============================================================ */ .footer{background:var(--ink);color:rgba(255,255,255,.7);padding:60px 24px 40px} .footer__inner{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap} .footer__sign{display:block;width:200px;height:auto;margin-bottom:4px} .footer__brand p{font-size:.9rem;margin-top:4px} .footer__meta{text-align:right;font-size:.85rem;line-height:1.9} .footer__meta a{color:var(--teal-soft);font-weight:600} .footer__meta a:hover{text-decoration:underline} .footer__copy{opacity:.5;margin-top:6px} /* ============================================================ KONTAKT / FORMULAR ============================================================ */ .kontakt{padding:clamp(70px,10vw,130px) 24px;background: radial-gradient(900px 500px at 90% -10%,var(--teal-soft),transparent 60%), var(--cream)} .kontakt__grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,6vw,80px);align-items:center} .kontakt__intro h2{margin:.1em 0 .5em} .kontakt__intro p{color:var(--ink-soft);max-width:46ch} .kontakt__points{list-style:none;margin-top:1.4em;display:flex;flex-direction:column;gap:.7em} .kontakt__points li{display:flex;align-items:center;gap:.65em;font-weight:600;color:var(--ink)} .kontakt__points li::before{content:"✓";flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center; background:var(--signal);color:var(--on-signal);border-radius:50%;font-size:.8rem;font-weight:800;line-height:1} .formbox{background:#fff;border-radius:var(--radius);padding:clamp(26px,4vw,40px);box-shadow:var(--shadow); display:flex;flex-direction:column;gap:18px} .formrow{display:flex;flex-direction:column;gap:7px} .formrow--split{flex-direction:row;gap:18px} .formrow--split>div{flex:1;display:flex;flex-direction:column;gap:7px;min-width:0} .formbox label{font-weight:600;font-size:.92rem;color:var(--ink)} .formbox label span{font-weight:500;color:var(--ink-soft);font-size:.85em} .formbox label .req{color:var(--signal-ink);font-weight:800} .formbox input,.formbox textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink); background:var(--cream);border:2px solid #e7e0d4;border-radius:14px;padding:.75em .9em;transition:border-color .2s,box-shadow .2s,background .2s} .formbox input:focus,.formbox textarea:focus{outline:none;border-color:var(--signal);background:#fff; box-shadow:0 0 0 4px rgba(var(--signal-rgb),.18)} .formbox textarea{resize:vertical;min-height:120px} .formbox .btn{align-self:flex-start;margin-top:4px} .formbox__hint{font-size:.82rem;color:var(--ink-soft);margin-top:-4px} .formbox__hint .req{color:var(--signal-ink);font-weight:800} .formbox__error{background:#fdecec;color:#a11717;border:1px solid #f3c0c0;border-radius:12px;padding:.7em 1em;font-size:.92rem;font-weight:600} /* Honeypot komplett verstecken */ .formrow--hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .formbox--ok{text-align:center;align-items:center;gap:10px;padding-top:clamp(34px,5vw,52px);padding-bottom:clamp(34px,5vw,52px)} .formbox--ok .formbox__icon{width:72px;height:72px;display:grid;place-items:center;border-radius:50%; background:var(--signal);color:var(--on-signal);font-size:2.1rem;font-weight:800;margin-bottom:6px;box-shadow:0 14px 30px -12px rgba(var(--signal-rgb),.7)} .formbox--ok h3{font-size:1.6rem} .formbox--ok p{color:var(--ink-soft);max-width:40ch} .formbox--ok .btn{margin-top:10px;align-self:center} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:980px){ .person__grid{grid-template-columns:1fr;gap:60px} .person__media{max-width:420px;margin:0 auto} .themen__grid{grid-template-columns:repeat(2,1fr)} .plakate__row{grid-template-columns:repeat(3,1fr)} .kontakt__grid{grid-template-columns:1fr;gap:40px} } @media (max-width:720px){ .formrow--split{flex-direction:column;gap:18px} .nav__links{position:fixed;inset:0 0 0 auto;width:min(78vw,320px);background:var(--teal-deep);flex-direction:column; justify-content:center;gap:26px;transform:translateX(100%);transition:transform .4s var(--ease);box-shadow:-20px 0 60px rgba(0,0,0,.3)} .nav__links a{color:#fff!important;font-size:1.2rem} body.menu-open .nav__links{transform:translateX(0)} .nav__burger{display:flex;z-index:60} body.menu-open .nav__burger span{background:#fff} body.menu-open .nav__burger span:nth-child(1){transform:translateY(8px) rotate(45deg)} body.menu-open .nav__burger span:nth-child(2){opacity:0} body.menu-open .nav__burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} .themen__grid{grid-template-columns:1fr} .plakate__row{grid-template-columns:repeat(2,1fr)} .hero__img{object-position:64% 30%} .footer__inner{flex-direction:column} .footer__meta{text-align:left} .person__facts{gap:22px} } @media (max-width:420px){ .plakate__row{grid-template-columns:1fr} } /* ============================================================ RECHTSTEXTE (Impressum / Datenschutz) ============================================================ */ .legalpage{background:var(--cream)} .legal__bar{display:flex;align-items:center;justify-content:space-between;gap:16px; max-width:840px;margin:0 auto;padding:22px 24px} .legal__home img{height:42px;width:auto;display:block} .legal__back{font-weight:700;font-size:.95rem;color:var(--teal-deep)} .legal__back:hover{text-decoration:underline} .legal{max-width:840px;margin:0 auto;padding:8px 24px 70px} .legal h1{font-size:clamp(2rem,5vw,2.8rem);color:var(--ink);margin-bottom:.5em;letter-spacing:-.02em} .legal h2{font-size:1.2rem;color:var(--teal-deep);margin:1.7em 0 .5em} .legal h3{font-size:1.02rem;color:var(--ink);margin:1.2em 0 .3em} .legal p,.legal li{color:var(--ink-soft);line-height:1.75;margin-bottom:.7em} .legal strong{color:var(--ink)} .legal a{color:var(--teal-deep);font-weight:600;text-decoration:underline} .legal ul{padding-left:1.3em;margin-bottom:1em} .legal address{font-style:normal;color:var(--ink-soft);line-height:1.7;margin-bottom:.7em} .legal .platzhalter{color:var(--signal-ink);font-style:italic;font-weight:600} .legal__hinweis{background:#fff;border-left:4px solid var(--signal);border-radius:10px; padding:.9em 1.1em;margin:0 0 28px;font-size:.92rem;box-shadow:var(--shadow-sm)} .legal__foot{border-top:1px solid #e7ddcd;margin-top:40px;padding-top:22px; display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:.9rem;color:var(--ink-soft)} .legal__foot a{color:var(--teal-deep);font-weight:600} .legal__foot a:hover{text-decoration:underline} /* ============================================================ VORSCHAU-MODUS-LEISTE (nur sichtbar, wenn Sperre aktiv & freigeschaltet) ============================================================ */ .vorschau-bar{position:fixed;left:18px;bottom:18px;z-index:60;display:inline-flex;align-items:center;gap:.45em; background:var(--ink);color:#fff;font-size:.85rem;font-weight:600;padding:.6em 1.1em;border-radius:100px; box-shadow:0 12px 30px -10px rgba(0,0,0,.5);transition:transform .25s var(--ease),background .25s} .vorschau-bar strong{color:var(--signal);font-weight:700} .vorschau-bar:hover{transform:translateY(-2px);background:#1d2932} @media (max-width:520px){.vorschau-bar{left:12px;bottom:12px;font-size:.8rem;padding:.55em .9em}} /* ============================================================ DAS PACKE ICH AN (konkrete Themen) ============================================================ */ .packe{padding:clamp(60px,9vw,120px) 24px;background: radial-gradient(1100px 460px at 15% -10%,var(--teal-soft),transparent 60%),var(--cream)} .packe__intro{max-width:58ch;margin:.7em auto 0;color:var(--ink-soft)} .packe__grid{max-width:var(--maxw);margin:48px auto 0;display:grid;grid-template-columns:repeat(2,1fr);gap:22px} .packe-item{display:flex;gap:20px;align-items:flex-start;background:#fff;border-radius:var(--radius); padding:28px 30px;box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease)} .packe-item:hover{transform:translateY(-6px);box-shadow:0 30px 50px -22px rgba(28,43,49,.4)} .packe-item__num{flex:0 0 auto;font-size:1.4rem;font-weight:800;color:var(--signal-ink);line-height:1; font-variant-numeric:tabular-nums;background:color-mix(in srgb,var(--signal) 16%,#fff); width:54px;height:54px;display:grid;place-items:center;border-radius:14px} .packe-item h3{color:var(--ink);margin-bottom:.35em;font-size:1.2rem} .packe-item p{color:var(--ink-soft);font-size:.96rem} /* Briefwahl-Hinweis in der Wahl-Sektion */ .wahl__hinweis{display:inline-block;margin:-.6em 0 1.6em;color:#fff;font-size:.9rem; background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:100px;padding:.5em 1.1em} @media (max-width:720px){ .packe__grid{grid-template-columns:1fr} } /* ============================================================ THEMEN-KARTEN ANKLICKBAR + LIGHTBOX (Themen-Poster) ============================================================ */ .card[data-poster]{cursor:pointer} .card[data-poster]:focus-visible{outline:3px solid var(--c);outline-offset:3px} .card__flyer{display:inline-flex;align-items:center;gap:.42em;margin-left:10px;vertical-align:middle; font-size:.78rem;font-weight:700;letter-spacing:.02em;color:var(--c); background:color-mix(in srgb,var(--c) 12%,#fff);border:1.5px solid color-mix(in srgb,var(--c) 34%,#fff); padding:.42em .85em;border-radius:100px;transition:background .25s,color .25s,border-color .25s,transform .25s} .card__flyer svg{width:14px;height:14px;flex:0 0 auto} .card[data-poster]:hover .card__flyer{background:var(--c);color:#fff;border-color:var(--c);transform:translateY(-1px)} .lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px; background:rgba(20,30,36,.9);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s} .lightbox.open{opacity:1;visibility:visible} .lightbox__img{max-width:min(92vw,560px);max-height:88vh;width:auto;height:auto;border-radius:16px; box-shadow:0 40px 90px -30px rgba(0,0,0,.75);transform:scale(.94);transition:transform .35s var(--ease)} .lightbox.open .lightbox__img{transform:scale(1)} .lightbox__close{position:absolute;top:20px;right:24px;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer; background:rgba(255,255,255,.16);color:#fff;font-size:1.2rem;font-weight:700;line-height:1;transition:background .2s} .lightbox__close:hover{background:rgba(255,255,255,.32)} /* ============================================================ THEMEN-FLYER SLIDER ============================================================ */ .flyerslider{padding:clamp(50px,7vw,80px) 24px clamp(60px,9vw,110px);background: radial-gradient(1000px 420px at 85% -10%,var(--teal-soft),transparent 60%),var(--cream)} .slider{position:relative;max-width:var(--maxw);margin:0 auto} .slider__track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth; padding:6px 2px 18px;scrollbar-width:none;-ms-overflow-style:none} .slider__track::-webkit-scrollbar{display:none} .slide{flex:0 0 auto;width:clamp(230px,30vw,290px);scroll-snap-align:center;cursor:pointer; border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm); transition:transform .35s var(--ease),box-shadow .35s var(--ease)} .slide img{width:100%;aspect-ratio:1086/1448;object-fit:cover;display:block} .slide:hover{transform:translateY(-6px);box-shadow:0 30px 50px -22px rgba(28,43,49,.5)} .slide:focus-visible{outline:3px solid var(--signal);outline-offset:3px} .slider__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:48px;height:48px;border-radius:50%; border:0;cursor:pointer;background:#fff;color:var(--ink);font-size:1.7rem;line-height:1;padding-bottom:3px; box-shadow:0 10px 26px -10px rgba(28,43,49,.55);display:grid;place-items:center;transition:background .2s,color .2s} .slider__nav:hover{background:var(--signal);color:var(--on-signal)} .slider__nav--prev{left:-8px} .slider__nav--next{right:-8px} @media (max-width:720px){ .slide{width:74vw} .slider__nav{display:none} } /* ============================================================ MEIN WEG / EHRENAMT + MASTERPLAN ============================================================ */ .weg{padding:clamp(60px,9vw,110px) 24px;background: radial-gradient(1000px 460px at 12% -10%,var(--teal-soft),transparent 60%),var(--cream)} .weg__block{max-width:var(--maxw);margin:0 auto} .weg__block + .weg__block{margin-top:clamp(54px,8vw,100px)} .weg__bild{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer; transition:transform .35s var(--ease),box-shadow .35s var(--ease)} .weg__bild img{width:100%;height:auto;display:block} .weg__bild:hover{transform:translateY(-5px);box-shadow:0 34px 62px -28px rgba(28,43,49,.5)} .weg__bild:focus-visible{outline:3px solid var(--signal);outline-offset:3px} .weg__bild--wide{max-width:940px;margin:36px auto 0} /* Ehrenamt-Meilensteine */ .engagement{list-style:none;max-width:1000px;margin:40px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:18px 44px} .engagement li{position:relative;padding-left:1.5em;color:var(--ink-soft);line-height:1.65} .engagement li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%; background:var(--signal);box-shadow:0 0 0 4px color-mix(in srgb,var(--signal) 22%,transparent)} .engagement li strong{color:var(--ink)} /* Masterplan (Bild + Text) */ .weg__block--split{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(30px,5vw,64px);align-items:center} .weg__block--split .weg__bild{margin:0;max-width:440px} .weg__text h2{margin:.1em 0 .15em} .weg__lead{font-weight:700;color:var(--signal-ink);font-size:1.15rem;margin-bottom:1.1em} .masterplan-schritte{list-style:none;display:flex;flex-direction:column;gap:14px;margin-bottom:1.5em} .masterplan-schritte li{padding-left:1.1em;border-left:3px solid var(--signal);color:var(--ink-soft);line-height:1.6} .masterplan-schritte strong{display:block;color:var(--ink);font-size:1.05rem;margin-bottom:.1em} .masterplan-ziele{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:1.3em} .masterplan-ziele span{background:color-mix(in srgb,var(--teal) 16%,#fff);color:var(--teal-deep); font-weight:700;font-size:.82rem;padding:.5em 1.05em;border-radius:100px} .weg__slogan{font-family:'Caveat',cursive;font-size:1.7rem;color:var(--teal-deep);line-height:1.1} @media (max-width:820px){ .engagement{grid-template-columns:1fr} .weg__block--split{grid-template-columns:1fr} .weg__block--split .weg__bild{max-width:360px;margin:0 auto} }