/* ============================================================ Smart MANV — Layout-System v2 B (FEMA-Raster) + A (Vitra/Apple-Reduktion) + C (Apple-Highlights) ============================================================ */ :root{ --yellow:#FEC902; --ink:#0E0F12; --ink-2:#15171B; --ink-3:#1C1F24; --green:#2E7D32; --red:#C62828; --grey:#8A949C; --grey-2:#8B9299; --txt:#EDEFF2; --line:rgba(255,255,255,0.10); --line-soft:rgba(255,255,255,0.055); --step--2:clamp(10px,0.3vw + 9px,12px); --step--1:clamp(12.5px,0.4vw + 11px,14px); --step-0:clamp(15.5px,0.45vw + 14px,17.5px); --step-1:clamp(17px,0.55vw + 15px,20px); --step-2:clamp(21px,1.4vw + 16px,28px); --step-3:clamp(28px,3vw + 16px,44px); --step-4:clamp(34px,5vw + 12px,64px); --step-5:clamp(40px,6.5vw + 8px,82px); --space:clamp(72px,10vw,128px); --gap-lg:clamp(28px,4vw,56px); } *{margin:0;padding:0;box-sizing:border-box} a{color:inherit;text-decoration:none} html{scroll-behavior:smooth} body{font-family:'Montserrat',system-ui,sans-serif;background:var(--ink);color:var(--txt);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden} .serif{font-weight:700} .mono{font-family:'JetBrains Mono',monospace;letter-spacing:.04em} .wrap{max-width:1240px;margin:0 auto;padding:0 clamp(24px,5vw,64px)} h1,h2,h3,h4{overflow-wrap:break-word} img,svg{display:block;max-width:100%} /* Reveal */ /* Motion-System v0.2.38: ruhig, sichtbar, einmalig. Versteckt wird NUR wenn JS laeuft (html.js), ohne JS ist alles sofort sichtbar. */ html.js .reveal:not(.in){opacity:0;transform:translateY(28px)} html.js .rv:not(.in){opacity:0;transform:translateY(24px)} .reveal{transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)} .rv{transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1)} .reveal.in,.rv.in{opacity:1;transform:none} .reveal.d1{transition-delay:.12s}.reveal.d2{transition-delay:.24s}.reveal.d3{transition-delay:.36s}.reveal.d4{transition-delay:.48s} /* Gestaffelte Gruppen: der Container selbst bleibt neutral, nur die Kinder erscheinen */ html.js .rv-group.reveal{opacity:1;transform:none;transition:none} /* Hero-Auftritt beim Laden: etwas markanter, gleicher Charakter */ html.js .hero .reveal:not(.in),html.js .page-hero .reveal:not(.in){transform:translateY(32px)} .hero .reveal,.page-hero .reveal{transition-duration:1s} .hero .reveal.d1,.page-hero .reveal.d1{transition-delay:.16s} .hero .reveal.d2,.page-hero .reveal.d2{transition-delay:.34s} .hero .reveal.d3,.page-hero .reveal.d3{transition-delay:.52s} .hero .reveal.d4,.page-hero .reveal.d4{transition-delay:.70s} @keyframes smBgIn{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:none}} html.js .hero-bg{animation:smBgIn 1.6s cubic-bezier(.16,1,.3,1) both} /* Reduzierte Bewegung: reines, sanftes Einblenden ohne Verschiebung */ @media(prefers-reduced-motion:reduce){ html.js .reveal:not(.in),html.js .rv:not(.in){transform:none} .reveal,.rv{transition:opacity .4s ease} html.js .hero-bg{animation:none} *{animation:none!important} } /* ---------- Eyebrow / Section-Kopf (A+B) ---------- */ .eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:'JetBrains Mono',monospace;font-size:var(--step--2);letter-spacing:.18em;text-transform:uppercase;color:var(--yellow);margin-bottom:24px} .eyebrow::before{content:"";width:30px;height:1px;background:var(--yellow)} .h-sec{font-weight:800;font-size:var(--step-3);line-height:1.08;letter-spacing:-.015em;max-width:30ch} .lead{font-size:var(--step-0);color:var(--grey);line-height:1.7;max-width:62ch} /* ============ HEADER ============ */ header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(14,15,18,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.05);transition:background .4s,border-color .4s,backdrop-filter .4s} header.scrolled{background:rgba(14,15,18,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;justify-content:space-between;height:76px} .logo{display:inline-flex;align-items:center} .logo svg{height:32px;width:auto} .navlinks{display:flex;gap:32px;align-items:center} .navlinks a{color:rgba(237,239,242,.8);font-size:var(--step--1);font-weight:500;transition:color .2s} .navlinks a:hover{color:#fff} .nav-soon{display:inline-flex;align-items:center;gap:7px;color:rgba(237,239,242,.6);font-size:var(--step--1);font-weight:500;cursor:default;white-space:nowrap} .nav-soon .tag-soon{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-2);border:1px solid var(--line);border-radius:4px;padding:1px 5px} .btn{display:inline-flex;align-items:center;gap:9px;background:var(--yellow);color:#16181C;padding:12px 20px;border-radius:8px;font-weight:700;font-size:var(--step--1);transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s;white-space:nowrap} .btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.3)} .btn .arr{transition:transform .25s}.btn:hover .arr{transform:translateX(4px)} .btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:8px} .btn.ghost:hover{border-color:var(--yellow);color:var(--yellow);box-shadow:none} .btn.text{background:none;color:#fff;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.3);border-radius:0;font-weight:600} .btn.text:hover{border-color:var(--yellow);color:var(--yellow);transform:none;box-shadow:none} .burger{display:none;background:none;border:1px solid var(--line);border-radius:9px;width:46px;height:46px;cursor:pointer;color:#fff;align-items:center;justify-content:center;flex-direction:column;gap:5px} .burger span{width:20px;height:2px;background:#fff;border-radius:2px;transition:.3s} body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} body.menu-open .burger span:nth-child(2){opacity:0} body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .mobile-cta{display:none} /* Dropdown */ .has-drop{position:relative} .drop-toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer;background:none;border:none;color:rgba(237,239,242,.8);font-family:inherit;font-size:var(--step--1);font-weight:500;padding:0;transition:color .2s} .has-drop:hover .drop-toggle{color:#fff} .drop-toggle .chev{font-size:9px;color:var(--yellow);transition:transform .25s} .has-drop:hover .drop-toggle .chev{transform:rotate(180deg)} .dropdown{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(-8px);min-width:330px;background:rgba(21,23,27,.98);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:14px;padding:8px;opacity:0;pointer-events:none;transition:.25s;box-shadow:0 24px 60px rgba(0,0,0,.5)} .has-drop:hover .dropdown{opacity:1;pointer-events:auto;transform:translateX(-50%)} .dropdown::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px} .dropdown a{display:flex;align-items:center;gap:12px;padding:12px 15px;border-radius:9px;color:rgba(237,239,242,.82);font-size:var(--step--1);font-weight:500;transition:background .2s,color .2s} .dropdown a .dnum{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--yellow);min-width:20px} .dropdown a:hover{background:rgba(254,201,2,.1);color:#fff} .dropdown a.soon{color:rgba(237,239,242,.62);pointer-events:none} .dropdown a.soon .tag-soon{margin-left:auto;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-2);border:1px solid var(--line);border-radius:4px;padding:1px 6px} @media(max-width:1099px){ .navlinks{position:fixed;top:76px;left:0;right:0;background:rgba(14,15,18,.98);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);flex-direction:column;gap:0;align-items:stretch;padding:8px 0 18px;transform:translateY(-12px);opacity:0;pointer-events:none;transition:.3s;max-height:calc(100vh - 76px);overflow-y:auto} body.menu-open .navlinks{transform:none;opacity:1;pointer-events:auto} .navlinks>a{padding:15px 40px;border-bottom:1px solid var(--line)} .nav-soon{padding:15px 40px;font-size:16px;border-bottom:1px solid var(--line);justify-content:space-between} .mobile-cta{display:flex;margin:16px 40px 0;justify-content:center} .nav>.btn:not(.mobile-cta){display:none} .burger{display:flex} .has-drop{width:100%} .drop-toggle{padding:15px 40px;font-size:16px;width:100%;justify-content:space-between;border-bottom:1px solid var(--line)} .dropdown{position:static;transform:none;opacity:1;pointer-events:auto;min-width:0;background:rgba(255,255,255,.02);border:none;border-radius:0;box-shadow:none;padding:0;backdrop-filter:none;display:none} .dropdown::before{display:none} .dropdown a{padding:13px 40px 13px 56px;border-bottom:1px solid var(--line);border-radius:0} .has-drop.open-m .dropdown{display:block} .has-drop:hover .dropdown,.has-drop:focus-within .dropdown{transform:none} .has-drop.open-m .drop-toggle .chev{transform:rotate(180deg)} } /* ============ HERO (A: rahmenlos, editorial) ============ */ .hero{min-height:100vh;display:flex;align-items:center;padding:120px 0 60px;position:relative;overflow:hidden} .hero-bg{position:absolute;inset:0;z-index:0;background:radial-gradient(110% 80% at 78% 12%,rgba(254,201,2,.09),transparent 56%)} .hero-grid-lines{position:absolute;inset:0;background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);background-size:clamp(48px,6vw,72px) clamp(48px,6vw,72px);mask-image:radial-gradient(120% 90% at 60% 30%,#000,transparent 78%)} .hero .wrap{position:relative;z-index:2;width:100%} .hero-kicker{display:flex;align-items:center;gap:12px;font-family:'JetBrains Mono',monospace;font-size:var(--step--2);letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);margin-bottom:30px} .hero-kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 4px rgba(254,201,2,.18);animation:pulse 2.4s infinite} @keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(254,201,2,.18)}50%{box-shadow:0 0 0 9px rgba(254,201,2,0)}} .hero h1{font-size:var(--step-5);font-weight:800;line-height:.98;letter-spacing:-.03em;margin-bottom:28px;max-width:20ch} .hero h1 .y{color:var(--yellow)} .hero-lead{font-size:var(--step-1);color:var(--grey);max-width:60ch;margin-bottom:38px;line-height:1.6} .hero-cta{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:0} /* Hero Trust-Leiste als feine Linie unten */ .hero-trust{margin-top:clamp(40px,6vw,72px);padding-top:26px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);gap:30px} .hero-trust .ht{display:flex;flex-direction:column;gap:5px} .hero-trust .ht .v{font-family:'JetBrains Mono',monospace;font-size:var(--step-1);color:#fff;font-weight:600} .hero-trust .ht .l{font-size:var(--step--1);color:var(--grey)} @media(max-width:680px){.hero-trust{grid-template-columns:1fr;gap:18px}} /* Ticker (dezent) */ .ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:16px 0;background:var(--ink-2)} .ticker-track{display:flex;gap:44px;white-space:nowrap;width:max-content;animation:scrollx 32s linear infinite} .ticker-track span{font-family:'JetBrains Mono',monospace;font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;color:var(--grey);display:inline-flex;align-items:center;gap:44px} .ticker-track span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--yellow)} @keyframes scrollx{to{transform:translateX(-50%)}} /* ============ SECTION shell ============ */ .sec{padding:var(--space) 0} .sec--line{border-top:1px solid var(--line)} .sec-head{max-width:760px;margin-bottom:clamp(40px,5vw,64px)} .sec-head .lead{margin-top:20px} /* ---------- B-RASTER (FEMA): rahmenlose Zeilen mit Linien ---------- */ .matrix{border-top:1px solid var(--line)} .mrow{display:grid;grid-template-columns:96px minmax(220px,1fr) 1.5fr;gap:clamp(20px,4vw,56px);padding:clamp(28px,3.5vw,44px) 0;border-bottom:1px solid var(--line);align-items:start;transition:background .35s} /* v0.2.44: Hover-Hintergrund entfernt (Kundenwunsch), Hover wirkt nur noch ueber Pfeil und Titel */ .mrow .mno{font-size:clamp(30px,3.5vw,46px);font-weight:700;color:#7C848C;line-height:.85} .mrow h3{font-size:var(--step-2);font-weight:600;letter-spacing:-.01em;line-height:1.15} .mrow .mtxt{color:var(--grey);font-size:var(--step-0);line-height:1.7} .mrow .mtag{display:inline-block;margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:var(--step--2);letter-spacing:.06em;text-transform:uppercase;color:var(--yellow)} @media(max-width:820px){.mrow{grid-template-columns:1fr;gap:10px;padding:26px 0}.mrow .mno{font-size:32px;margin-bottom:6px}} /* ---------- Leistungen (B-Raster, mit Hover-Link) ---------- */ .svc-matrix .mrow{grid-template-columns:64px minmax(260px,1.1fr) 1.6fr auto;column-gap:24px;cursor:pointer} .svc-matrix .mrow .go{align-self:center;color:var(--grey);font-size:var(--step-1);transition:transform .3s,color .3s} .svc-matrix .mrow:hover .go{color:var(--yellow);transform:translateX(6px)} .svc-matrix .mrow.soon{cursor:default} .svc-matrix .mrow.soon .go{opacity:.3} @media(max-width:820px){.svc-matrix .mrow{grid-template-columns:1fr}.svc-matrix .mrow .go{display:none}} /* ---------- Zielgruppen (A: 3 Spalten rahmenlos, Linie oben) ---------- */ .aud{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)} .aud .acol{padding:clamp(30px,3vw,44px) clamp(22px,2.4vw,34px);border-right:1px solid var(--line);position:relative} .aud .acol:last-child{border-right:none} .aud .acol .arole{font-family:'JetBrains Mono',monospace;font-size:var(--step--2);letter-spacing:.1em;text-transform:uppercase;color:var(--yellow);margin-bottom:18px} .aud .acol h3{font-size:var(--step-1);font-weight:600;line-height:1.25;margin-bottom:14px} .aud .acol p{color:var(--grey);font-size:var(--step--1);line-height:1.65;margin-bottom:20px} .aud .acol .aq{border-left:2px solid var(--yellow);padding-left:14px;font-size:var(--step--1);color:rgba(237,239,242,.78);font-style:italic;margin-bottom:22px} .aud .acol .alink{font-size:var(--step--1);color:var(--yellow);font-weight:600;display:inline-flex;gap:7px;align-items:center} .aud .acol .alink .arr{transition:transform .25s}.aud .acol .alink:hover .arr{transform:translateX(4px)} @media(max-width:820px){.aud{grid-template-columns:1fr}.aud .acol{border-right:none;border-bottom:1px solid var(--line)}.aud .acol:last-child{border-bottom:none}} /* ---------- Zahlen (A: ruhige Statement-Zeile, keine Box) ---------- */ .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,50px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(44px,5vw,68px) 0} .stats .st .n{font-size:var(--step-4);font-weight:800;letter-spacing:-.03em;line-height:.9;color:#fff} .stats .st .n.y{color:var(--yellow)} .stats .st .c{margin-top:22px;font-size:var(--step--1);color:var(--grey);max-width:30ch;line-height:1.6} .statement{margin-top:clamp(40px,5vw,60px);font-weight:700;font-size:var(--step-3);letter-spacing:-.015em;line-height:1.1;display:flex;align-items:center;gap:18px} .statement .d{width:10px;height:10px;border-radius:50%;background:var(--yellow);flex-shrink:0} .statement b{color:#fff;font-weight:500}.statement{color:var(--grey)} @media(max-width:680px){.stats{grid-template-columns:1fr;gap:30px}} /* ============ C-HIGHLIGHT PANEL (Apple) ============ */ .highlight{padding:var(--space) 0} .panel{background:linear-gradient(165deg,#1a1d22,#121317);border:1px solid var(--line);border-radius:24px;overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch} .panel.flip{grid-template-columns:.95fr 1.05fr} .panel .pinfo{padding:clamp(36px,4.5vw,68px)} .panel .peyebrow{font-family:'JetBrains Mono',monospace;font-size:var(--step--2);letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);margin-bottom:20px;display:flex;align-items:center;gap:10px} .panel .peyebrow::before{content:"";width:24px;height:1px;background:var(--yellow)} .panel h2{font-weight:800;font-size:var(--step-3);line-height:1.08;letter-spacing:-.015em;margin-bottom:20px} .panel p{color:var(--grey);font-size:var(--step-0);line-height:1.7;margin-bottom:18px} .panel .pchecks{list-style:none;margin:22px 0 26px;display:flex;flex-direction:column;gap:13px} .panel .pchecks li{display:grid;grid-template-columns:auto 1fr;gap:13px;font-size:var(--step--1);color:rgba(237,239,242,.85);line-height:1.5} .panel .pchecks .ck{width:22px;height:22px;border-radius:6px;background:rgba(46,125,50,.16);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;margin-top:1px} .panel .pvis{position:relative;background:radial-gradient(circle at 60% 35%,rgba(254,201,2,.12),transparent 62%),#0c0d10;min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;border-left:1px solid var(--line)} .panel.flip .pvis{border-left:none;border-right:1px solid var(--line)} .panel .pvis .pbadge{position:absolute;top:24px;left:24px;background:var(--yellow);color:#16181C;font-weight:700;font-size:var(--step--2);padding:7px 13px;border-radius:7px;letter-spacing:.02em} .panel .pvis .ph{font-size:var(--step--1);color:var(--grey)} .panel .pvis .triage{display:flex;gap:7px} .panel .pvis .triage span{width:42px;height:7px;border-radius:4px} /* Stat-Inline im Panel */ .panel .pstats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;width:100%;padding:0 clamp(24px,3vw,44px)} .panel .pstats .ps .n{font-family:'JetBrains Mono',monospace;font-size:var(--step-2);color:var(--yellow);font-weight:600;line-height:1} .panel .pstats .ps .l{font-size:11px;color:var(--grey);margin-top:6px;line-height:1.4} @media(max-width:860px){.panel,.panel.flip{grid-template-columns:1fr}.panel .pvis,.panel.flip .pvis{border-left:none;border-right:none;border-top:1px solid var(--line);min-height:240px;order:2}.panel .pinfo{order:1}} /* ---------- Quotes (A: rahmenlos, große Serif-Anführung) ---------- */ .quotes{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line)} .quotes .q{padding:clamp(30px,3.5vw,48px) clamp(24px,2.6vw,40px);border-right:1px solid var(--line)} .quotes .q:last-child{border-right:none} .quotes .q p{font-size:var(--step-2);color:#fff;line-height:1.45;margin:0 0 26px;font-weight:500;letter-spacing:-.01em} .quotes .q .src{display:flex;align-items:center;gap:12px;font-family:'JetBrains Mono',monospace;font-size:var(--step--2);color:var(--grey);letter-spacing:.04em;line-height:1.5} .quotes .q .src::before{content:"";width:22px;height:2px;background:var(--yellow);flex-shrink:0} @media(max-width:760px){.quotes{grid-template-columns:1fr}.quotes .q{border-right:none;border-bottom:1px solid var(--line)}.quotes .q:last-child{border-bottom:none}} /* ---------- Gründer (A: rahmenlos, Linie) ---------- */ .people{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line)} .people .person{padding:clamp(30px,3.5vw,48px) clamp(24px,2.6vw,40px);border-right:1px solid var(--line);display:flex;gap:22px;align-items:flex-start} .people .person:last-child{border-right:none} .people .avatar{width:64px;height:64px;border-radius:50%;background:var(--ink-3);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--step-1);color:var(--yellow);flex-shrink:0} .people .person h3{font-size:var(--step-1);font-weight:600} .people .person .role{font-size:var(--step--1);color:var(--yellow);font-weight:600;margin:3px 0 12px} .people .person p{font-size:var(--step--1);color:var(--grey);line-height:1.6} @media(max-width:760px){.people{grid-template-columns:1fr}.people .person{border-right:none;border-bottom:1px solid var(--line)}.people .person:last-child{border-bottom:none}} /* ---------- FAQ (B: Linien, klar) ---------- */ .faq{max-width:900px} .faq-item{border-top:1px solid var(--line)} .faq-item:last-child{border-bottom:1px solid var(--line)} .faq-q{width:100%;background:none;border:none;color:#fff;text-align:left;font-family:inherit;font-size:var(--step-1);font-weight:600;padding:26px 50px 26px 0;cursor:pointer;position:relative;display:flex;letter-spacing:-.01em;line-height:1.3} .faq-q .pl{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--yellow);font-size:22px;transition:transform .3s} .faq-item.open .faq-q .pl{transform:translateY(-50%) rotate(45deg)} .faq-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.16,1,.3,1)} .faq-a-inner{padding:0 60px 28px 0;font-size:var(--step-0);color:var(--grey);line-height:1.7} /* ---------- CTA-Schluss (A: zentriert, ruhig) ---------- */ .cta-end{text-align:center;max-width:760px;margin:0 auto} .cta-end .eyebrow{justify-content:center} .cta-end h2{font-weight:800;font-size:var(--step-4);line-height:1.05;letter-spacing:-.02em;margin-bottom:22px} .cta-end p{font-size:var(--step-1);color:var(--grey);margin-bottom:14px;line-height:1.6} .cta-end .meta{font-family:'JetBrains Mono',monospace;font-size:var(--step--1);color:var(--grey);letter-spacing:.04em;margin:24px 0 32px} .cta-end .meta b{color:var(--yellow);font-weight:600} .cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap} /* ---------- Footer ---------- */ footer{border-top:1px solid var(--line);background:#0A0B0D} .foot{padding-top:clamp(56px,7vw,84px);padding-bottom:40px} .foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(28px,4vw,48px);padding-bottom:48px;border-bottom:1px solid var(--line)} .foot-brand .logo svg{height:38px} .foot-brand p{font-size:var(--step--1);color:var(--grey);margin:18px 0;max-width:300px;line-height:1.6} .foot-brand .ivena{font-size:var(--step--1);color:var(--yellow);font-weight:600} .foot-col h5{font-family:'JetBrains Mono',monospace;font-size:var(--step--2);letter-spacing:.1em;text-transform:uppercase;color:var(--grey-2);margin-bottom:18px} .foot-col a{display:block;color:rgba(237,239,242,.72);font-size:var(--step--1);margin-bottom:11px;transition:color .2s} .foot-col a:hover{color:var(--yellow)} .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;font-size:var(--step--2);color:var(--grey-2);flex-wrap:wrap;gap:12px} .foot-bottom .legal{display:flex;gap:22px} .foot-bottom a:hover{color:#fff} @media(max-width:820px){.foot-top{grid-template-columns:1fr 1fr;gap:30px}}@media(max-width:560px){.foot-top{grid-template-columns:1fr;gap:38px}.foot-bottom{flex-direction:column;align-items:flex-start;gap:14px}} /* ---------- Page-Hero (Leistungsseite) ---------- */ .page-hero{padding:clamp(120px,14vw,170px) 0 var(--space);position:relative;overflow:hidden;border-bottom:1px solid var(--line)} .page-hero .hero-bg{background:radial-gradient(80% 110% at 80% 0%,rgba(254,201,2,.08),transparent 56%)} .page-hero .wrap{position:relative;z-index:2} .breadcrumb{font-family:'JetBrains Mono',monospace;font-size:var(--step--2);letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-bottom:24px} .breadcrumb b{color:var(--yellow);font-weight:600} .page-hero h1{font-weight:800;font-size:var(--step-4);letter-spacing:-.02em;line-height:1.04;max-width:28ch;margin-bottom:24px} .page-hero .lead{font-size:var(--step-1);max-width:62ch;margin-bottom:26px} .page-hero .q{border-left:2px solid var(--yellow);padding-left:16px;font-size:var(--step-0);font-style:italic;color:rgba(237,239,242,.8);max-width:60ch;margin-bottom:32px} .page-hero .cta-row{justify-content:flex-start} /* ---------- Prozess-Stepper (B: nummeriert, Linien) ---------- */ .steps{border-top:1px solid var(--line)} .steps .srow{display:grid;grid-template-columns:96px 1fr;gap:clamp(20px,4vw,56px);padding:clamp(26px,3vw,40px) 0;border-bottom:1px solid var(--line);align-items:baseline} .steps .srow .sn{font-size:clamp(28px,3vw,40px);color:var(--yellow);font-weight:700;line-height:.9} .steps .srow h3{font-size:var(--step-2);font-weight:600;margin-bottom:8px;letter-spacing:-.01em} .steps .srow p{color:var(--grey);font-size:var(--step-0);line-height:1.65;max-width:70ch} @media(max-width:820px){.steps .srow{grid-template-columns:60px 1fr;gap:20px}} /* ============================================================ EMOTION / HANDSCHRIFT (subtil, im Markenrahmen) ============================================================ */ /* Hero: zweispaltig mit echter Bildebene */ @media(min-width:1025px){ .hero .wrap{display:grid;grid-template-columns:1.08fr .92fr;column-gap:var(--gap-lg);row-gap:0;align-items:center} .hero .wrap > .hero-kicker{grid-column:1/-1;align-self:start} } .hero-media{position:relative;aspect-ratio:4/4.6;border-radius:18px;overflow:hidden;background:linear-gradient(155deg,#1c1f25,#0d0e11);border:1px solid var(--line);box-shadow:0 40px 90px rgba(0,0,0,.5)} @media(max-width:1024px){.hero-media{aspect-ratio:16/11;margin-top:14px}} /* Bildregie-Platzhalter (zeigt, welches echte Bild hier hingehört) */ .imgslot{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:30px} .imgslot::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.015) 0 11px,transparent 11px 22px);pointer-events:none} .imgslot .ic{width:46px;height:46px;color:var(--grey);opacity:.7} .imgslot .cap{font-family:'JetBrains Mono',monospace;font-size:var(--step--2);color:var(--grey);max-width:30ch;line-height:1.6;position:relative;z-index:2} .imgslot .cap b{display:block;color:rgba(237,239,242,.78);font-weight:600;margin-bottom:5px;letter-spacing:.02em} .imgslot .triage-mini{display:flex;gap:5px} .imgslot .triage-mini span{width:30px;height:5px;border-radius:3px} /* Großer Statement-Anker (Nikos stärkster Satz) */ .anchor{padding:var(--space) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden} .anchor .abg{position:absolute;inset:0;background:radial-gradient(90% 120% at 15% 20%,rgba(254,201,2,.06),transparent 55%)} .anchor .wrap{position:relative;z-index:2} .anchor .alabel{font-family:'JetBrains Mono',monospace;font-size:var(--step--2);letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);margin-bottom:26px;display:flex;align-items:center;gap:12px} .anchor .alabel::before{content:"";width:30px;height:1px;background:var(--yellow)} .anchor blockquote{font-size:clamp(26px,3.6vw,46px);font-weight:600;line-height:1.22;letter-spacing:-.02em;color:var(--grey)} .anchor blockquote .hl{color:#fff} /* Großer O-Ton (eine Stimme prominent) */ .voice{padding:var(--space) 0;border-top:1px solid var(--line)} .voice blockquote{font-size:clamp(24px,3.1vw,42px);font-weight:600;line-height:1.25;letter-spacing:-.02em;max-width:36ch;color:#fff;margin-bottom:30px} .voice .vsrc{display:flex;align-items:center;gap:14px;font-family:'JetBrains Mono',monospace;font-size:var(--step--1);color:var(--grey);letter-spacing:.03em} .voice .vsrc .av{width:48px;height:48px;border-radius:50%;background:var(--ink-3);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--yellow);font-weight:700;font-size:var(--step--1);flex-shrink:0} /* Gründer: größere Portrait-Slots */ .people .person{align-items:stretch} .people .pportrait{width:96px;height:120px;border-radius:12px;background:linear-gradient(155deg,#1c1f25,#0d0e11);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;flex-shrink:0;text-align:center} .people .pportrait .ic{width:26px;height:26px;color:var(--grey);opacity:.7} .people .pportrait .pini{font-weight:700;color:var(--yellow);font-size:var(--step-1)} @media(max-width:520px){.people .pportrait{width:72px;height:90px}} /* ============================================================ GRAFIK-VARIANTE: bildlose Designelemente (Lagebild-Motiv) ============================================================ */ .lagebild{position:absolute;inset:0;width:100%;height:100%;display:block} .hero-viz-label{position:absolute;left:18px;bottom:16px;font-family:'JetBrains Mono',monospace;font-size:var(--step--2);color:var(--grey);z-index:3;letter-spacing:.06em} /* Gründer-Monogramm statt Foto */ .mono-portrait{width:96px;height:120px;border-radius:12px;background:linear-gradient(155deg,#1c1f25,#0d0e11);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;flex-shrink:0} .mono-portrait .mini{font-weight:800;color:var(--yellow);font-size:var(--step-2);letter-spacing:.03em} .mono-portrait .tstrip{display:flex;gap:4px} .mono-portrait .tstrip i{width:14px;height:4px;border-radius:2px;display:block} .mono-portrait .tstrip i:nth-child(1){background:var(--red)} .mono-portrait .tstrip i:nth-child(2){background:var(--yellow)} .mono-portrait .tstrip i:nth-child(3){background:var(--green)} @media(max-width:520px){.mono-portrait{width:72px;height:90px}} .h-sec,.hero h1,.page-hero h1,.cta-end h2,.panel h2,.anchor blockquote,.voice blockquote{text-wrap:balance} /* ============================================================ GUTENBERG / BLOCK-EDITOR — Grundlagen Ausrichtung (alignfull/alignwide), Seiten-Container, Editor ============================================================ */ /* Voll- und Weit-Breite fuer Bloecke (add_theme_support align-wide). .wrap hat max-width 1240px; wide etwas breiter, full = randlos. */ .alignfull{width:100%;margin-left:0;margin-right:0;max-width:none} .alignwide{max-width:1440px;margin-left:auto;margin-right:auto} /* Seiteninhalt (page.php): der fixierte Header ist 76px hoch, deshalb oben Platz lassen, damit der erste Block nicht verdeckt wird. Volle-Breite-Sektionen (Gruppen mit .sec) bringen ihr eigenes Padding mit; hier nur der Grundabstand. */ .page-content{padding-top:clamp(96px,12vw,150px)} /* Bringt der erste Block bereits grosszuegiges Kopf-Padding mit (Hero / Seiten-Hero), entfaellt der Zusatz-Offset, damit er nicht doppelt wirkt. */ .page-content>.hero:first-child, .page-content>.page-hero:first-child{margin-top:calc(-1 * clamp(96px,12vw,150px))} /* Core-Gruppen, die als Sektion dienen (.sec/.highlight/... via className): volle Breite abbilden, Innenabstand kommt aus .sec / .highlight. Die Farbklassen (has-*-background-color) faerben den ganzen Streifen. */ .wp-block-group.sec, .wp-block-group.highlight, .wp-block-group.anchor, .wp-block-group.voice, .wp-block-group.ticker, .wp-block-group.hero, .wp-block-group.page-hero{width:100%} /* Innen-Container einer Sektions-Gruppe: auf .wrap-Breite begrenzen. Core setzt bei "contentSize" bereits die Breite; die .wrap-Klasse auf der inneren Gruppe sorgt zusaetzlich fuer identisches Padding. */ .wp-block-group.wrap{max-width:1240px;margin-left:auto;margin-right:auto;padding-left:clamp(24px,5vw,64px);padding-right:clamp(24px,5vw,64px)} /* Buttons aus Core (core/button) optisch an .btn angleichen, wenn die Theme-Klasse .btn vergeben wurde. Core rendert .wp-block-button__link. */ .wp-block-button.btn .wp-block-button__link, .wp-block-button__link.btn{display:inline-flex;align-items:center;gap:9px;background:var(--yellow);color:#16181C;padding:12px 20px;border-radius:8px;font-weight:700;font-size:var(--step--1);transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s;white-space:nowrap;line-height:1.2} .wp-block-button.btn .wp-block-button__link:hover, .wp-block-button__link.btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.3)} /* Ghost- und Text-Button-Varianten fuer Core-Buttons. */ .wp-block-button.is-style-ghost .wp-block-button__link, .wp-block-button.ghost .wp-block-button__link{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:8px} .wp-block-button.is-style-ghost .wp-block-button__link:hover, .wp-block-button.ghost .wp-block-button__link:hover{border-color:var(--yellow);color:var(--yellow);box-shadow:none} .wp-block-button.is-style-text .wp-block-button__link, .wp-block-button.btn-text .wp-block-button__link{background:none;color:#fff;padding:12px 0;border:0;border-bottom:1px solid rgba(255,255,255,.3);border-radius:0;font-weight:600} .wp-block-button.is-style-text .wp-block-button__link:hover, .wp-block-button.btn-text .wp-block-button__link:hover{border-color:var(--yellow);color:var(--yellow);transform:none;box-shadow:none} /* Button-Gruppe (core/buttons) an das .cta-Layout angleichen. */ .wp-block-buttons.cta-row,.wp-block-buttons.hero-cta,.wp-block-buttons.cta-btns{gap:16px} /* ============================================================ SEKTIONS-FARBVARIANTEN-SYSTEM (Redakteur-Palette) ------------------------------------------------------------ Der Redakteur waehlt pro Bereichs-Gruppe eine Hintergrundfarbe aus der festen Palette. Core erzeugt dann auf der Gruppe die Klasse .has--background-color (+ .has-background). Wir setzen darauf sektionslokale Tokens; die Sektionsinhalte binden sich an diese Tokens statt an feste Farben. Der bestehende dunkle Look bleibt Default (kein Hintergrund = Body-Dunkel), daher sind unten NUR die gewaehlten Hintergruende ueberschrieben. Tokens: --sec-fg Haupttext / Ueberschriften --sec-muted gedaempfter Text (Lead, Meta, Beschreibungen) --sec-accent Akzent (Eyebrow-Text, Linien-Akzent, Zahlen) --sec-line Trennlinien / Rahmen --sec-btn-bg Button-Flaeche --sec-btn-fg Button-Text WCAG (AA-Ziel: >=4.5:1 normaler Text, >=3:1 grosse UI/Headlines). Berechnete Kontraste (Text/Muted/Accent vs. Hintergrund, Button-fg vs. Button-bg): Dunkel (#0E0F12): fg 16.64 muted 7.50 accent 12.38 btn 12.38 AA Anthrazit(#15171B): fg 15.58 muted 7.02 accent 11.60 btn 12.38 AA Hell (#F4F6F8): fg 17.69 muted 6.35 accent 17.69 btn 19.17 AA Gelb (#FEC902): fg 12.38 muted 6.28 accent 12.38 btn 19.17 AA Gruen (#2E7D32): fg 5.13 muted 4.63 accent 5.13 btn 13.51 AA Rot (#C62828): fg 5.62 muted 4.96 accent 5.62 btn 13.59 AA Hinweis Gruen/Rot: muted = rgba(255,255,255,.92) -> 4.63 / 4.96, damit auch gedaempfter Text die AA-Schwelle 4.5:1 sicher haelt (weisses .85 waere mit 4.21/4.43 knapp darunter gewesen). Hinweis Hell: KEIN Gelb als Textakzent (Gelb auf Weiss ~1.4:1), deshalb --sec-accent dunkel; Gelb bleibt nur fuer Flaechen/Punkte. ============================================================ */ /* Default-Tokens (dunkler Look), damit die Inhalts-Regeln auch dann greifen, wenn eine Farbsektion versehentlich ohne Hintergrund steht. */ .wp-block-group[class*="-background-color"]{ --sec-fg:#EDEFF2; --sec-muted:#9BA3AB; --sec-accent:#FEC902; --sec-line:rgba(255,255,255,.12); --sec-btn-bg:#FEC902; --sec-btn-fg:#0E0F12; } /* Dunkel + Anthrazit — heller Text auf dunklem Grund, gelber Akzent. */ .wp-block-group.has-dunkel-background-color, .wp-block-group.has-anthrazit-background-color{ --sec-fg:#EDEFF2; --sec-muted:#9BA3AB; --sec-accent:#FEC902; --sec-line:rgba(255,255,255,.12); --sec-btn-bg:#FEC902; --sec-btn-fg:#0E0F12; } /* Hell (Weiss) — dunkler Text, dunkler Textakzent (kein Gelb als Text), dunkler Button mit weisser Schrift. */ .wp-block-group.has-hell-background-color{ --sec-fg:#0E0F12; --sec-muted:#545B63; --sec-accent:#0E0F12; --sec-line:rgba(0,0,0,.14); --sec-btn-bg:#0E0F12; --sec-btn-fg:#FFFFFF; } /* Gelb — dunkler Text auf Gelb, dunkler Button mit weisser Schrift. */ .wp-block-group.has-gelb-background-color{ --sec-fg:#0E0F12; --sec-muted:rgba(14,15,18,.72); --sec-accent:#0E0F12; --sec-line:rgba(0,0,0,.18); --sec-btn-bg:#0E0F12; --sec-btn-fg:#FFFFFF; } /* Gruen — weisser Text, weisser Button mit dunkelgruenem Text. */ .wp-block-group.has-gruen-background-color{ --sec-fg:#FFFFFF; --sec-muted:rgba(255,255,255,.92); --sec-accent:#FFFFFF; --sec-line:rgba(255,255,255,.22); --sec-btn-bg:#FFFFFF; --sec-btn-fg:#14351A; } /* Rot — weisser Text, weisser Button mit dunkelrotem Text. */ .wp-block-group.has-rot-background-color{ --sec-fg:#FFFFFF; --sec-muted:rgba(255,255,255,.92); --sec-accent:#FFFFFF; --sec-line:rgba(255,255,255,.22); --sec-btn-bg:#FFFFFF; --sec-btn-fg:#5A1414; } /* ---- Inhalte an die --sec-* Tokens binden (nur innerhalb Farbgruppen) ---- */ :where(.wp-block-group[class*="-background-color"]){color:var(--sec-fg)} /* Ueberschriften + starke Textelemente */ .wp-block-group[class*="-background-color"] h1, .wp-block-group[class*="-background-color"] h2, .wp-block-group[class*="-background-color"] h3, .wp-block-group[class*="-background-color"] h4, .wp-block-group[class*="-background-color"] .h-sec, .wp-block-group[class*="-background-color"] blockquote{color:var(--sec-fg)} /* Fliesstext / Absaetze */ .wp-block-group[class*="-background-color"] p{color:var(--sec-fg)} /* Gedaempfter Text: Lead, Meta, Beschreibungen, Raster-Text, Quellen */ .wp-block-group[class*="-background-color"] .lead, .wp-block-group[class*="-background-color"] .mtxt, .wp-block-group[class*="-background-color"] .cta-end .meta, .wp-block-group[class*="-background-color"] .mrow .mtxt, .wp-block-group[class*="-background-color"] .aud .acol p, .wp-block-group[class*="-background-color"] .stats .st .c, .wp-block-group[class*="-background-color"] .steps .srow p, .wp-block-group[class*="-background-color"] .panel p, .wp-block-group[class*="-background-color"] .foot-brand p, .wp-block-group[class*="-background-color"] .has-muted{color:var(--sec-muted)} /* Akzent: Eyebrow-Text, Rollen-Label, Anchor-Label, Panel-Eyebrow */ .wp-block-group[class*="-background-color"] .eyebrow, .wp-block-group[class*="-background-color"] .alabel, .wp-block-group[class*="-background-color"] .peyebrow, .wp-block-group[class*="-background-color"] .aud .acol .arole, .wp-block-group[class*="-background-color"] .breadcrumb b, .wp-block-group[class*="-background-color"] .has-accent{color:var(--sec-accent)} /* Akzent-Linien / Punkte (Eyebrow-Strich, Anchor-Strich, Punkt) */ .wp-block-group[class*="-background-color"] .eyebrow::before, .wp-block-group[class*="-background-color"] .alabel::before, .wp-block-group[class*="-background-color"] .peyebrow::before, .wp-block-group[class*="-background-color"] .statement .d, .wp-block-group[class*="-background-color"] .quotes .q .src::before, .wp-block-group[class*="-background-color"] .voice .vsrc .av{background:var(--sec-accent)} /* Trennlinien / Rahmen an --sec-line binden */ .wp-block-group[class*="-background-color"] .sec--line, .wp-block-group[class*="-background-color"].sec--line{border-top-color:var(--sec-line)} .wp-block-group[class*="-background-color"] .matrix, .wp-block-group[class*="-background-color"] .mrow, .wp-block-group[class*="-background-color"] .aud, .wp-block-group[class*="-background-color"] .aud .acol, .wp-block-group[class*="-background-color"] .stats, .wp-block-group[class*="-background-color"] .steps, .wp-block-group[class*="-background-color"] .steps .srow, .wp-block-group[class*="-background-color"] .hero-trust, .wp-block-group[class*="-background-color"] .faq-item, .wp-block-group[class*="-background-color"] .quotes, .wp-block-group[class*="-background-color"] .quotes .q, .wp-block-group[class*="-background-color"] .people, .wp-block-group[class*="-background-color"] .people .person, .wp-block-group[class*="-background-color"] .wp-block-separator{border-color:var(--sec-line)} /* Statement-Zahlen / Raster-Nummern: auf hellen Gruenden lesbar halten */ .wp-block-group[class*="-background-color"] .stats .st .n, .wp-block-group[class*="-background-color"] .statement b{color:var(--sec-fg)} .wp-block-group[class*="-background-color"] .stats .st .n.y{color:var(--sec-accent)} /* FAQ-Button-Text + Trenner an Tokens binden. */ .wp-block-group[class*="-background-color"] .faq-q{color:var(--sec-fg)} .wp-block-group[class*="-background-color"] .faq-q .pl{color:var(--sec-accent)} .wp-block-group[class*="-background-color"] .faq-a-inner{color:var(--sec-muted)} /* Core-Separator innerhalb Farbsektion: als feine Linie im Token-Stil. */ .wp-block-group[class*="-background-color"] .wp-block-separator:not(.is-style-dots){background-color:var(--sec-line);color:var(--sec-line)} /* Buttons innerhalb einer Farbsektion an --sec-btn-* binden, damit z. B. auf Gelb ein dunkler Button mit weisser Schrift steht. */ .wp-block-group[class*="-background-color"] .btn, .wp-block-group[class*="-background-color"] .wp-block-button:not(.is-style-ghost):not(.is-style-text):not(.btn-text) .wp-block-button__link{ background:var(--sec-btn-bg); color:var(--sec-btn-fg) } .wp-block-group[class*="-background-color"] .btn:hover, .wp-block-group[class*="-background-color"] .wp-block-button:not(.is-style-ghost):not(.is-style-text):not(.btn-text) .wp-block-button__link:hover{ box-shadow:0 10px 26px rgba(0,0,0,.18) } /* Ghost-/Text-Buttons in Farbsektion: Rahmen/Linie an --sec-fg. */ .wp-block-group[class*="-background-color"] .btn.ghost, .wp-block-group[class*="-background-color"] .wp-block-button.is-style-ghost .wp-block-button__link{color:var(--sec-fg);border-color:var(--sec-line)} .wp-block-group[class*="-background-color"] .btn.text, .wp-block-group[class*="-background-color"] .wp-block-button.is-style-text .wp-block-button__link, .wp-block-group[class*="-background-color"] .wp-block-button.btn-text .wp-block-button__link{color:var(--sec-fg);border-bottom-color:var(--sec-line)} .wp-block-group[class*="-background-color"] .btn.ghost:hover, .wp-block-group[class*="-background-color"] .btn.text:hover{color:var(--sec-accent);border-color:var(--sec-accent)} /* Links innerhalb heller Sektionen (Hell/Gelb): nicht Gelb, sondern Akzent (=dunkel), damit sie lesbar bleiben. */ .wp-block-group.has-hell-background-color a:not(.btn):not(.wp-block-button__link), .wp-block-group.has-gelb-background-color a:not(.btn):not(.wp-block-button__link){color:var(--sec-accent)} /* ---- Editor-Angleichung: gleiche Schrift + dunkler Grund im Editor ---- */ .editor-styles-wrapper{background:var(--ink);color:var(--txt);font-family:'Montserrat',system-ui,sans-serif} .editor-styles-wrapper .btn{color:#16181C} /* Ticker-Animation im Editor ruhig stellen, damit die Bearbeitung nicht springt. */ .editor-styles-wrapper .ticker-track{animation:none} /* Reveal-Elemente im Editor sofort sichtbar zeigen, da das Frontend-JS im Editor nicht laeuft. Sonst saehe der Redakteur leere Flaechen. */ .editor-styles-wrapper .reveal{opacity:1;transform:none} /* ============================================================ Smart MANV — Zusatzkomponenten für Unterseiten Karten-Raster, Info-Raster, Hinweis, Checkliste, 3-Spalten- Zitate, Inline-Zitat, Personen-Kontakt. Binden an --sec-*. ============================================================ */ .cards{display:grid;gap:clamp(16px,2vw,22px);border-top:1px solid var(--line);padding-top:clamp(32px,4vw,48px)} .cards.c2{grid-template-columns:1fr 1fr} .cards.c3{grid-template-columns:repeat(3,1fr)} .cards.c4{grid-template-columns:repeat(2,1fr)} .ccard{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:16px;padding:clamp(22px,2.4vw,30px);display:block} a.ccard{transition:border-color .25s,background .25s,transform .25s} a.ccard:hover{border-color:var(--yellow);background:rgba(254,201,2,.06);transform:translateY(-2px)} .ccard.hl{background:rgba(254,201,2,.07);border-color:rgba(254,201,2,.26)} .ccard .clabel{font-family:'JetBrains Mono',monospace;font-size:var(--step--2);letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);font-weight:600;margin-bottom:12px} .ccard h3{font-size:var(--step-1);font-weight:600;line-height:1.2;margin-bottom:10px;letter-spacing:-.01em} .ccard p{color:var(--grey);font-size:var(--step-0);line-height:1.65;margin:0} .ccard .clist{list-style:none;margin:14px 0 0;display:flex;flex-direction:column;gap:9px} .ccard .clist li{position:relative;padding-left:20px;color:var(--grey);font-size:var(--step--1);line-height:1.55} .ccard .clist li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:2px;background:var(--yellow)} .ccard .cnote{margin-top:16px;font-family:'JetBrains Mono',monospace;font-size:var(--step--2);letter-spacing:.03em;color:var(--grey-2);border-top:1px dashed var(--line);padding-top:12px;line-height:1.5} @media(max-width:820px){.cards.c2,.cards.c3,.cards.c4{grid-template-columns:1fr}} .infogrid{border-top:1px solid var(--line);max-width:820px} .infogrid .irow{display:grid;grid-template-columns:minmax(150px,230px) 1fr;gap:clamp(14px,3vw,40px);padding:clamp(15px,1.8vw,20px) 0;border-bottom:1px solid var(--line)} .infogrid .ik{font-family:'JetBrains Mono',monospace;font-size:var(--step--2);letter-spacing:.08em;text-transform:uppercase;color:var(--yellow);padding-top:3px} .infogrid .iv{color:var(--grey);font-size:var(--step-0);line-height:1.55} .infogrid .iv a{border-bottom:1px solid var(--line)} .infogrid .iv a:hover{color:var(--yellow)} @media(max-width:600px){.infogrid .irow{grid-template-columns:1fr;gap:5px}} .notice{border:1px dashed var(--line);border-radius:14px;padding:clamp(18px,2.2vw,26px);background:rgba(255,255,255,.02);color:var(--grey);font-size:var(--step--1);line-height:1.65;max-width:820px} .notice b{color:#fff;font-weight:600} .checklist{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:20px 36px;max-width:820px;margin-top:20px} .checklist li{position:relative;padding-left:30px;color:var(--grey);font-size:var(--step-0);line-height:1.6} .checklist li::before{content:"✓";position:absolute;left:0;top:0;color:var(--yellow);font-weight:700} @media(max-width:600px){.checklist{grid-template-columns:1fr}} .quotes.three{grid-template-columns:repeat(3,1fr)} @media(max-width:860px){.quotes.three{grid-template-columns:1fr}.quotes.three .q{border-right:none;border-bottom:1px solid var(--line)}.quotes.three .q:last-child{border-bottom:none}} .voice-inline{max-width:62ch;margin-bottom:clamp(30px,4vw,48px)} .voice-inline blockquote{font-size:clamp(20px,2.4vw,30px);font-weight:600;line-height:1.3;letter-spacing:-.015em;color:var(--txt);margin-bottom:20px} .voice-inline .vsrc{display:flex;align-items:center;gap:12px;font-family:'JetBrains Mono',monospace;font-size:var(--step--1);color:var(--grey);letter-spacing:.03em} .voice-inline .vsrc .av{width:44px;height:44px;border-radius:50%;background:var(--ink-3);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--yellow);font-weight:700;font-size:var(--step--2);flex-shrink:0} .pcontact{display:flex;flex-direction:column;gap:6px;margin-top:16px} .pcontact a{font-size:var(--step--1);color:var(--grey);border-bottom:1px solid var(--line);width:max-content;padding-bottom:2px;transition:color .2s} .pcontact a:hover{color:var(--yellow)} /* Farbbindung der Zusatzkomponenten an --sec-* */ .wp-block-group[class*="-background-color"] .ccard p, .wp-block-group[class*="-background-color"] .ccard .clist li, .wp-block-group[class*="-background-color"] .infogrid .iv, .wp-block-group[class*="-background-color"] .checklist li, .wp-block-group[class*="-background-color"] .notice, .wp-block-group[class*="-background-color"] .voice-inline .vsrc, .wp-block-group[class*="-background-color"] .pcontact a{color:var(--sec-muted)} .wp-block-group[class*="-background-color"] .ccard .clabel, .wp-block-group[class*="-background-color"] .infogrid .ik{color:var(--sec-accent)} .wp-block-group[class*="-background-color"] .ccard h3, .wp-block-group[class*="-background-color"] .voice-inline blockquote{color:var(--sec-fg)} .wp-block-group[class*="-background-color"] .cards, .wp-block-group[class*="-background-color"] .ccard, .wp-block-group[class*="-background-color"] .ccard .cnote, .wp-block-group[class*="-background-color"] .infogrid, .wp-block-group[class*="-background-color"] .infogrid .irow, .wp-block-group[class*="-background-color"] .infogrid .iv a, .wp-block-group[class*="-background-color"] .notice, .wp-block-group[class*="-background-color"] .pcontact a{border-color:var(--sec-line)} .wp-block-group[class*="-background-color"] .ccard .clist li::before{background:var(--sec-accent)} .wp-block-group[class*="-background-color"] .checklist li::before, .wp-block-group[class*="-background-color"] .voice-inline .vsrc .av{color:var(--sec-accent)} .wp-block-group[class*="-background-color"] a.ccard:hover{border-color:var(--sec-accent);background:rgba(255,255,255,.05)} /* ============================================================ Smart MANV — Feinschliff v0.2.1 (Figma-Abgleich) 1) Hero/Sektionen linksbündig wie im Figma-Entwurf 2) einheitlicher, dezenter Button-Hover 3) Service-Liste: Hover mit Innenabstand statt randlos ============================================================ */ /* 1) WordPress-Constrained-Layout zentriert schmale Blöcke automatisch (margin-inline:auto !important). Der Figma-Entwurf ist linksbündig. Zurücksetzen; .cta-end bleibt über text-align:center zentriert. */ .wp-block-group.wrap > *, .wp-block-group.sec-head > *{ margin-left:0 !important; margin-right:0 !important; } /* 2) Einheitlicher Button-Hover: leichtes Anheben, dezenter Schatten, kein widersprüchlicher gelber Schlagschatten mehr. */ .btn:hover, .wp-block-button.btn .wp-block-button__link:hover, .wp-block-button__link.btn:hover, .wp-block-group[class*="-background-color"] .wp-block-button:not(.is-style-ghost):not(.is-style-text):not(.btn-text) .wp-block-button__link:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.30) !important; } /* 3) Service-Liste (svc-matrix): Hover-Highlight mit Rundung und Innenabstand, damit es nicht bis an die Kante stößt und sichtbar ist. */ .svc-matrix .mrow{position:relative} .svc-matrix .mrow::before{ content:"";position:absolute;top:4px;bottom:4px;left:0;right:0; border-radius:12px;background:transparent;transition:background .25s;z-index:0;pointer-events:none; } /* v0.2.44: Hover-Flaeche entfernt (Kundenwunsch) */ .svc-matrix .mrow > *{position:relative;z-index:1} .svc-matrix .mrow h3,.svc-matrix .mrow .mno{transition:color .25s} .svc-matrix .mrow:hover h3{color:#fff} .svc-matrix .mrow:hover .mno{color:#9BA3AB} /* Service-Karten (Was wir leisten): gelber Akzentbalken oben wie im Figma */ .cards.svc .ccard{padding-top:clamp(24px,2.6vw,30px)} .cards.svc .ccard::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--yellow);margin-bottom:18px} .wp-block-group[class*="-background-color"] .cards.svc .ccard::before{background:var(--sec-accent)} /* ============================================================ Smart MANV — Block-Umbau v0.2.4 Editierbare Core-Bloecke statt Inline-HTML sauber stylen + Button/Hover-Bugs endgueltig beheben. ============================================================ */ /* --- Karten: Ueberschrift-Link erbt Kartenfarbe, kein Gelb --- */ .ccard h3 a,.svc-matrix .mrow h3 a{color:inherit;text-decoration:none} /* wp:list Standard-Einzug in Komponenten zuruecksetzen */ .ccard .clist,.checklist,.panel .pchecks{list-style:none;padding-left:0;margin-top:14px} .checklist{margin-top:6px} /* --- FAQ als core/details (nativer Akkordeon, editierbar) --- */ .faq .faq-item{border-top:1px solid var(--line);background:none;padding:0;margin:0} .faq .faq-item:last-child{border-bottom:1px solid var(--line)} .faq-item summary{list-style:none;cursor:pointer;color:#fff;font-size:var(--step-1);font-weight:600;padding:26px 54px 26px 0;position:relative;letter-spacing:-.01em;line-height:1.3} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::marker{content:""} .faq-item summary::after{content:"+";position:absolute;right:2px;top:24px;color:var(--yellow);font-size:24px;line-height:1;transition:transform .3s} .faq-item[open] summary::after{transform:rotate(45deg)} .faq-item summary+*{padding:0 60px 26px 0;font-size:var(--step-0);color:var(--grey);line-height:1.7;margin:0} /* --- Zitat (wp:quote) --- */ .voice-inline{max-width:62ch;margin:0 0 clamp(30px,4vw,48px);padding:0;border:0} .voice-inline p{font-size:clamp(20px,2.4vw,30px);font-weight:600;line-height:1.3;letter-spacing:-.015em;color:var(--txt);margin:0 0 18px} .voice-inline cite{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:var(--step--1);color:var(--grey);letter-spacing:.03em;display:block} /* --- Panel pchecks als einfache Liste mit Haken --- */ .panel .pchecks{display:flex;flex-direction:column;gap:13px;margin:22px 0 26px} .panel .pchecks li{position:relative;padding-left:34px;font-size:var(--step--1);color:rgba(237,239,242,.85);line-height:1.5;list-style:none} .panel .pchecks li::before{content:"✓";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:6px;background:rgba(46,125,50,.16);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700} /* --- Margin-Resets fuer verschachtelte Bloecke in Rastern --- */ .stats .st .n,.stats .st .c,.infogrid .ik,.infogrid .iv,.quotes .q p,.quotes .q .src,.steps .srow .sn,.steps .srow h3,.steps .srow p,.ccard h3,.ccard p,.people .person h3,.people .person .role,.people .person p{margin:0} .people .person .pbody{flex:1} .steps .srow .scol h3{margin-bottom:8px} .ccard h3{margin-bottom:10px} /* --- svc-matrix: Pfeil als ::after (rechts), 3-Spalten --- */ .svc-matrix .mrow{grid-template-columns:96px minmax(240px,1.1fr) 1.6fr;padding-right:44px} .svc-matrix .mrow::after{content:"→";position:absolute;right:0;top:50%;transform:translateY(-50%);color:var(--grey);font-size:var(--step-1);transition:transform .3s,color .3s;z-index:1} .svc-matrix .mrow:hover::after{color:var(--yellow);transform:translateY(-50%) translateX(6px)} @media(max-width:820px){.svc-matrix .mrow{grid-template-columns:1fr;padding-right:0}.svc-matrix .mrow::after{display:none}} /* ============ BUTTON/HOVER — endgueltig ============ */ /* Text-Link-Button: niemals Hintergrund, Schrift immer sichtbar */ .wp-block-button.is-style-text .wp-block-button__link, .wp-block-button.btn-text .wp-block-button__link{ background:none !important;background-color:transparent !important;box-shadow:none !important; color:#fff !important;padding:12px 0 !important;border:0 !important; border-bottom:1px solid rgba(255,255,255,.3) !important;border-radius:0 !important;font-weight:600; } .wp-block-button.is-style-text .wp-block-button__link:hover, .wp-block-button.btn-text .wp-block-button__link:hover{ color:var(--yellow) !important;border-bottom-color:var(--yellow) !important;transform:none !important;box-shadow:none !important; } .wp-block-group[class*="-background-color"] .wp-block-button.is-style-text .wp-block-button__link, .wp-block-group[class*="-background-color"] .wp-block-button.btn-text .wp-block-button__link{color:var(--sec-fg) !important;border-bottom-color:var(--sec-line) !important} .wp-block-group[class*="-background-color"] .wp-block-button.is-style-text .wp-block-button__link:hover, .wp-block-group[class*="-background-color"] .wp-block-button.btn-text .wp-block-button__link:hover{color:var(--sec-accent) !important;border-bottom-color:var(--sec-accent) !important} /* Primaer-Button: dezenter dunkler Hover, kein Gelb-Glow, Schrift bleibt dunkel */ .btn:hover,.wp-block-button.btn .wp-block-button__link:hover,.wp-block-button__link.btn:hover, .wp-block-group[class*="-background-color"] .wp-block-button:not(.is-style-ghost):not(.is-style-text):not(.btn-text) .wp-block-button__link:hover{ transform:translateY(-2px) !important;box-shadow:0 6px 18px rgba(0,0,0,.3) !important; } /* --- Farbbindung neue Bloecke --- */ .wp-block-group[class*="-background-color"] .faq-item summary{color:var(--sec-fg)} .wp-block-group[class*="-background-color"] .faq-item summary::after{color:var(--sec-accent)} .wp-block-group[class*="-background-color"] .faq-item summary+*{color:var(--sec-muted)} .wp-block-group[class*="-background-color"] .faq .faq-item{border-color:var(--sec-line)} .wp-block-group[class*="-background-color"] .voice-inline p{color:var(--sec-fg)} .wp-block-group[class*="-background-color"] .voice-inline cite{color:var(--sec-muted)} /* ============================================================ Smart MANV — Startseite Block-Umbau v0.2.5 Startseite-Sektionen als editierbare Core-Bloecke. Deko-Spans (Punkt, Pfeil, Haken, Avatar) als Pseudo-Elemente. ============================================================ */ /* Hero-Kicker: Punkt als ::before statt .dot-Span */ .hero-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 4px rgba(254,201,2,.18);flex-shrink:0} .wp-block-group[class*="-background-color"] .hero-kicker{color:var(--sec-accent)} .wp-block-group[class*="-background-color"] .hero-kicker::before{background:var(--sec-accent)} .hero-trust .ht .v,.hero-trust .ht .l{margin:0} /* Warum-/Service-Matrix: Zeilen-Innenabstaende zuruecksetzen */ .matrix .mrow .mno,.matrix .mrow h3,.matrix .mrow .mtxt{margin:0} .matrix .mrow > *{margin-top:0} /* Audience-Spalten editierbar: Abstaende wie zuvor, Pfeil als ::after */ .aud > *,.aud .acol > *{margin-top:0} .aud .acol .alinkwrap{margin:0} .aud .acol .alink::after{content:"→";transition:transform .25s} .aud .acol .alink:hover::after{transform:translateX(4px)} /* Statement: Punkt als ::before statt .d-Span */ .statement::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--yellow);flex-shrink:0} .wp-block-group[class*="-background-color"] .statement{color:var(--sec-muted)} .wp-block-group[class*="-background-color"] .statement b{color:var(--sec-fg)} .wp-block-group[class*="-background-color"] .statement::before{background:var(--sec-accent)} /* Anchor-Statement als core/quote: keine Default-Zitatlinie */ .anchor .wp-block-quote{border:0;padding:0;margin:0} .anchor .wp-block-quote p{margin:0;font:inherit;color:inherit} /* Grosse O-Toene (core/quote) */ .voice-big{max-width:40ch;margin:0 0 clamp(28px,4vw,44px);padding:0;border:0} .voice-big p{font-size:clamp(24px,3.1vw,42px);font-weight:600;line-height:1.25;letter-spacing:-.02em;color:#fff;margin:0 0 24px} .voice-big cite{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:var(--step--1);color:var(--grey);letter-spacing:.03em;display:flex;align-items:center;gap:14px} .voice-big cite::before{content:"„";width:48px;height:48px;border-radius:50%;background:var(--ink-3);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--yellow);font-weight:700;font-size:22px;line-height:1;flex-shrink:0} .voice-big.q2 p{font-size:clamp(18px,2vw,26px);color:var(--grey)} .voices > *{margin-top:0} .voices .lead{margin-top:26px} .wp-block-group[class*="-background-color"] .voice-big p{color:var(--sec-fg)} .wp-block-group[class*="-background-color"] .voice-big.q2 p{color:var(--sec-muted)} .wp-block-group[class*="-background-color"] .voice-big cite{color:var(--sec-muted)} .wp-block-group[class*="-background-color"] .voice-big cite::before{color:var(--sec-accent)} /* Referenz-Panel: editierbares Zitat-Highlight */ .panel .pquote{color:var(--yellow);font-style:italic;margin:0 0 18px} .wp-block-group[class*="-background-color"] .panel .pquote{color:var(--sec-accent)} /* Raster-Kinder gegen Block-Gap-Verschiebung nach Editor-Speichern absichern */ .stats > *,.people > *,.hero-trust > *,.hero-trust .ht > *{margin-top:0} /* --- Über uns: Kontakt + Notiz jetzt editierbar (v0.2.6) --- */ .pcontact p{margin:0} .person .cnote{margin-top:16px;font-family:'JetBrains Mono',monospace;font-size:var(--step--2);letter-spacing:.03em;color:var(--grey-2);border-top:1px dashed var(--line);padding-top:12px;line-height:1.5} .wp-block-group[class*="-background-color"] .person .cnote{color:var(--sec-muted);border-color:var(--sec-line)} /* ============================================================ Smart MANV — Button-Hover FINAL v0.2.7 Kein Schatten, kein Lift, kein Schein. Nur dezente Abdunklung + Pfeilbewegung. Ueberschreibt alle frueheren Hover-Schatten (auch die !important-Regeln). ============================================================ */ .btn:hover, .wp-block-button.btn .wp-block-button__link:hover, .wp-block-button__link.btn:hover, .wp-block-group[class*="-background-color"] .btn:hover, .wp-block-group[class*="-background-color"] .wp-block-button:not(.is-style-ghost):not(.is-style-text):not(.btn-text) .wp-block-button__link:hover{ transform:none !important; box-shadow:none !important; filter:brightness(.94); } /* ============================================================ Smart MANV — Button-Struktur FINAL v0.2.8 Der wp-block-button Wrapper-DIV (.wp-block-button.btn) ist nur Container und darf KEINE eigene Flaeche haben. Sonst entsteht ein gelber Doppelrahmen um das innere . Nur das ist der Button. Betrifft NICHT den Header-Link a.btn (der hat kein .wp-block-button). ============================================================ */ .wp-block-button.btn{ background:none !important; background-color:transparent !important; padding:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; color:inherit !important; filter:none !important; } /* Innerer Link traegt die komplette Button-Optik */ .wp-block-button.btn .wp-block-button__link{ display:inline-flex;align-items:center;gap:9px; padding:12px 22px;border-radius:8px;font-weight:700; transition:filter .2s ease; } /* ============================================================ Smart MANV — Button kraeftiger + Glow-Hover v0.2.9 Struktur ist sauber (nur das ist der Button), daher liegt der gelbe Glow jetzt korrekt um die eine Flaeche. ============================================================ */ .wp-block-button.btn .wp-block-button__link{ padding:16px 34px !important; font-size:var(--step-0) !important; transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, filter .2s ease !important; } .wp-block-button.btn .wp-block-button__link:hover, .wp-block-group[class*="-background-color"] .wp-block-button.btn .wp-block-button__link:hover, a.btn:hover{ transform:translateY(-2px) !important; box-shadow:0 8px 30px rgba(254,201,2,.42) !important; filter:brightness(1.03) !important; } /* ============================================================ Smart MANV — Glow-Hover Spezifitaet-Fix v0.2.10 Die Sektions-Hover-Regeln (mit :not-Kette, Spezifitaet 0,8,0) aus frueheren Versionen haben den Glow ueberschrieben. Diese Regel nutzt dieselbe Spezifitaet und steht zuletzt -> gewinnt. ============================================================ */ .wp-block-group[class*="-background-color"] .wp-block-button:not(.is-style-ghost):not(.is-style-text):not(.btn-text) .wp-block-button__link:hover{ transform:translateY(-2px) !important; box-shadow:0 8px 30px rgba(254,201,2,.42) !important; filter:brightness(1.03) !important; } /* ============================================================ Smart MANV — Stimmen-Zitat Breite v0.2.11 Die max-width lag auf dem 17px-Wrapper .voice-big, dadurch ergab 40ch nur ~450px und die Spalte war viel zu schmal. Breite gehoert auf das grosse

(42px). ============================================================ */ .voice-big{max-width:none} .voice-big p{max-width:34ch} .voice-big.q2 p{max-width:44ch} /* ============================================================ Smart MANV — svc-matrix ohne Hover-Kasten v0.2.12 Kein Kasten/Highlight mehr auf den Kachel-Zeilen. Der Link bleibt erkennbar durch den Pfeil und die dezente Textfarbe. ============================================================ */ .svc-matrix .mrow::before{display:none !important} .svc-matrix .mrow:hover::before{background:transparent !important} /* ============================================================ Smart MANV — SEO/BFSG-Audit-Fixes v0.2.13 1) Skip-Link 2) Fokus-Styles 3) Dropdown per Tastatur 4) Mobile-CTA Kontrast 5) Ticker pausierbar 6) Footer-h2 7) reduced-motion fuer smooth scroll ============================================================ */ /* 1) Skip-Link: unsichtbar bis fokussiert, dann deutlich sichtbar */ .skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--yellow);color:#16181C;font-weight:700;font-size:var(--step--1);padding:14px 22px;border-radius:0 0 10px 0} .skip-link:focus{left:0} /* 2) Sichtbarer Tastatur-Fokus site-weit (WCAG 2.4.7). Gelb auf dunklem Grund, dunkel in hellen/gelben Sektionen. */ a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--yellow);outline-offset:3px;border-radius:3px} .wp-block-group.has-hell-background-color a:focus-visible, .wp-block-group.has-hell-background-color button:focus-visible, .wp-block-group.has-hell-background-color summary:focus-visible, .wp-block-group.has-gelb-background-color a:focus-visible, .wp-block-group.has-gelb-background-color button:focus-visible, .wp-block-group.has-gelb-background-color summary:focus-visible{outline-color:#0E0F12} /* 3) Dropdown auch per Tastatur/Klick: .open-m (JS) und :focus-within oeffnen das Menue zusaetzlich zum Hover. */ @media(min-width:1100px){ .has-drop.open-m .dropdown, .has-drop:focus-within .dropdown{opacity:1;pointer-events:auto;transform:translateX(-50%)} } /* 4) CTA-Button im mobilen Menue: dunkler Text auf Gelb (.navlinks a hatte den .btn-Text ueberschrieben, ~1.5:1). */ .navlinks a.mobile-cta,.navlinks a.mobile-cta:hover{color:#16181C} /* 5) Laufband anhaltbar (WCAG 2.2.2): Pause bei Hover und Fokus. prefers-reduced-motion stoppt die Animation bereits komplett. */ .ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused} /* 6) Footer-Spaltentitel jetzt h2.foot-h statt h5 (Hierarchie), Optik unveraendert. */ .foot-col .foot-h{font-family:'JetBrains Mono',monospace;font-size:var(--step--2);letter-spacing:.1em;text-transform:uppercase;color:var(--grey-2);margin-bottom:18px;font-weight:600} /* 7) Sanftes Scrollen respektiert reduced motion */ @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* ============================================================ Smart MANV — Palette-Hintergruende im Theme v0.2.16 WordPress liefert die Preset-Regeln (.has-*-background-color mit echter Hintergrundfarbe) auf diesem Server nicht aus. Deshalb definiert das Theme sie selbst. Damit rendern die Sektionsfarben garantiert, unabhaengig von global styles, Object Cache oder CSS-Optimierung. ============================================================ */ :root{ --wp--preset--color--dunkel:#0E0F12; --wp--preset--color--anthrazit:#15171B; --wp--preset--color--hell:#F4F6F8; --wp--preset--color--gelb:#FEC902; --wp--preset--color--gruen:#2E7D32; --wp--preset--color--rot:#C62828; } .has-dunkel-background-color{background-color:#0E0F12} .has-anthrazit-background-color{background-color:#15171B} .has-hell-background-color{background-color:#F4F6F8} .has-gelb-background-color{background-color:#FEC902} .has-gruen-background-color{background-color:#2E7D32} .has-rot-background-color{background-color:#C62828} .has-dunkel-color{color:#0E0F12} .has-anthrazit-color{color:#15171B} .has-hell-color{color:#F4F6F8} .has-gelb-color{color:#FEC902} .has-gruen-color{color:#2E7D32} .has-rot-color{color:#C62828} /* ============================================================ Smart MANV — CTA-Buttonzeile v0.2.17 Nach dem Speichern im Editor bekommt core/buttons die Klassen is-layout-flex/wp-block-buttons-is-layout-flex und kippt auf linksbuendig mit Mini-Gap. Diese Regeln stellen sicher: CTA-Zeile immer zentriert mit klarem Abstand zwischen Primaerbutton und Textlink. Im linksbuendigen Hero und Seiten-Hero bleibt die Zeile linksbuendig, Abstand identisch. ============================================================ */ .wp-block-buttons.cta-row, .wp-block-buttons.cta-row.is-layout-flex{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(20px,3.5vw,40px); } .page-hero .wp-block-buttons.cta-row, .page-hero .wp-block-buttons.cta-row.is-layout-flex{justify-content:flex-start} .wp-block-buttons.hero-cta, .wp-block-buttons.hero-cta.is-layout-flex{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(20px,3.5vw,40px); } /* ============================================================ Smart MANV — FAQ-Robustheit v0.2.19 (Redakteurs-Test) Ein neu aus dem Inserter eingefuegter "Aufklappbar"-Block (core/details) hat die Klasse faq-item nicht. Damit Niko nichts kaputt machen kann, werden ALLE details innerhalb der FAQ-Sektion gleich gestylt. ============================================================ */ .faq details{border-top:1px solid var(--line);background:none;padding:0;margin:0} .faq details:last-child{border-bottom:1px solid var(--line)} .faq details summary{list-style:none;cursor:pointer;color:#fff;font-size:var(--step-1);font-weight:600;padding:26px 54px 26px 0;position:relative;letter-spacing:-.01em;line-height:1.3} .faq details summary::-webkit-details-marker{display:none} .faq details summary::marker{content:""} .faq details summary::after{content:"+";position:absolute;right:2px;top:24px;color:var(--yellow);font-size:24px;line-height:1;transition:transform .3s} .faq details[open] summary::after{transform:rotate(45deg)} .faq details summary+*{padding:0 60px 26px 0;font-size:var(--step-0);color:var(--grey);line-height:1.7;margin:0} .wp-block-group[class*="-background-color"] .faq details summary{color:var(--sec-fg)} .wp-block-group[class*="-background-color"] .faq details summary::after{color:var(--sec-accent)} .wp-block-group[class*="-background-color"] .faq details summary+*{color:var(--sec-muted)} .wp-block-group[class*="-background-color"] .faq details{border-color:var(--sec-line)} /* v0.2.22: IVENA-Logos (Partnerschafts- und APP-Seite) */ .ivena-mark{width:72px;height:auto;display:block;margin:0 0 18px} .ivena-wordmark{width:100%;max-width:340px;height:auto;display:block;border-radius:10px;margin:0 0 18px} /* ============================================================ v0.2.23: Karten-Grid-Reparatur (Bugmeldung Paul 3.7.) Ursache: WordPress haengt an Gruppen ohne Layout-Attribut die Klasse is-layout-flow und gibt margin-block-start auf jedes Folgekind. In Grid-Containern verschiebt das jede Karte ausser der ersten nach unten (Versatz + ungleiche Hoehen). 1) Flow-Margins in allen Grid-Containern neutralisieren. 2) Karten strecken auf volle Zeilenhoehe (gleiche Hoehe je Zeile). 3) Grids mit genau 4 Karten laufen als 2x2 statt 3 plus 1. ============================================================ */ .cards > *,.quotes > *,.people > *,.stats > *,.hero-trust > *,.aud > *,.checklist > *{margin-block-start:0 !important;margin-block-end:0 !important} .cards > .ccard,.cards > .wp-block-group,.quotes > .q,.people > .person{height:100%;box-sizing:border-box} .cards.c3:has(> :nth-child(4):last-child){grid-template-columns:1fr 1fr} @media(max-width:820px){.cards.c3:has(> :nth-child(4):last-child){grid-template-columns:1fr}} /* v0.2.24: Rechtstext-Layout (Datenschutz/Impressum) */ .legal{max-width:860px} .legal h2{font-size:var(--step-1);font-weight:600;letter-spacing:-.01em;margin:clamp(36px,4.5vw,54px) 0 14px} .legal h2:first-of-type{margin-top:clamp(20px,2.5vw,30px)} .legal p{color:var(--grey);font-size:var(--step-0);line-height:1.7;margin:0 0 16px} .legal p b{color:#fff;font-weight:600} .legal a{border-bottom:1px solid var(--line)} .legal a:hover{color:var(--yellow)} .legal .notice{margin:22px 0} /* v0.2.25: Panel-Grid darf auf Mobil nicht ueber den Container wachsen (Grid-Items haben min-width:auto, lange Inhalte sprengen sonst die 1fr-Spalte) */ .panel > *{min-width:0} /* ============================================================ v0.2.26: Responsive- und Spacing-Feinschliff (alle Breiten 320-3440) ============================================================ */ /* 1) Zahlen-Statement: Flex ohne Umbruch sprengte 320-375px */ .statement{flex-wrap:wrap;row-gap:8px} /* 2) Grid-/Flex-Kinder duerfen ihre Spur nie aufsprengen (min-width:auto-Falle, sichtbar bei 821-880px in den Karten-Grids und bei 320px im Personen-Flex) */ .cards > *,.quotes > *,.people > *,.stats > *,.aud > *,.hero-trust > *,.foot-top > *,.infogrid .irow > *,.person .pbody{min-width:0} /* 3) Lange Komposita: Notbremse global, Silbentrennung auf schmalen Viewports */ main{overflow-wrap:break-word} @media(max-width:1024px){.ccard h3,.ccard p,.panel p,.panel li,.pchecks li,.pbody p,.pbody h3{hyphens:auto}} /* 4) Personen-Kacheln: unter 420px Portrait ueber dem Text stapeln */ @media(max-width:420px){.people .person{flex-direction:column;gap:16px}} /* 5) Touchziele auf Touch-Breiten: Links bekommen mindestens 24px Hoehe plus Luft (BFSG) */ @media(max-width:1024px){ .foot-col a{padding:8px 0;margin-bottom:3px} .foot-bottom a{display:inline-block;padding:8px 0} .pcontact a,.infogrid .iv a{display:inline-block;padding:7px 0} } /* v0.2.27: Zitat-Quellzeilen mit langen Komposita (z. B. Rettungsdienstjahresfortbildung) duerfen auf schmalen Screens umbrechen, sonst 12px Overflow bei 320px */ .voices cite,.voice-big cite,.voice-inline cite,.quotes .src{hyphens:auto;overflow-wrap:anywhere;word-break:break-word} /* v0.2.29: Silbentrennung nur fuer laengere Woerter (kein "ei-ner"), mindestens 6 Zeichen Wortlaenge, 3 davor, 3 danach */ main,footer{-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:6 3 3} /* ============================================================ v0.2.30: Mobile-Nacharbeiten (Bugmeldung Paul) ============================================================ */ /* 1) Buttons duerfen nie breiter als ihr Container sein. white-space:nowrap + 34px Padding sprengte bei 320px den Viewport. */ .wp-block-button{max-width:100%} .wp-block-button__link{max-width:100%;white-space:normal;text-align:center;box-sizing:border-box} @media(max-width:430px){.wp-block-button__link{padding:14px 20px}} /* 2) Silbentrennung ueberall, auch Ueberschriften (v0.2.32). Ohne hyphens griff in Headlines die Overflow-Notbremse und brach hart OHNE Trennstrich mitten im Wort ("Rettungsdienstber/eich"). Mit hyphens:auto trennt der Browser nach deutschen Duden-Mustern (lang="de-DE") mit echtem Trennstrich, die Grenzen aus v0.2.29 (mindestens 6 Zeichen, 3 davor, 3 danach) verhindern billige Kurztrennungen. */ main h1,main h2,main h3,main h4,main p,main li,main summary,main blockquote,main cite,footer p,footer a{hyphens:auto} /* 3) Rechtliche Links im Footer auf Mobile untereinander */ @media(max-width:600px){.foot-bottom .legal{flex-direction:column;align-items:flex-start;gap:0}} /* v0.2.33: Referenz-Panel ohne Platzhalter-Visual (Kundenwunsch), einspaltig */ .panel--solo{grid-template-columns:1fr} .panel--solo .pinfo{max-width:none} /* v0.2.33: Smart-MANV-Logo in der Rollentrennungs-Karte, Pendant zur IVENA-Wortmarke */ .smartmanv-wordmark{width:100%;max-width:315px;height:auto;display:block;margin:4px 0 22px} /* v0.2.34: Feedback Paul: Solo-Panel nutzt die volle Breite, Zitat-Quellzeilen bekommen deutlich mehr Abstand zum Zitat */ .voices cite,.voice-big cite,.voice-inline cite{margin-top:22px} .quotes .q .src{margin-top:18px} /* v0.2.38: Button-Feinschliff, ruhiges Heben mit weichem Auslauf */ .wp-block-button__link{transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1),background-color .25s,color .25s} .wp-block-button__link:active{transform:translateY(0);transition-duration:.12s} @media(prefers-reduced-motion:reduce){.wp-block-button__link{transition:background-color .25s,color .25s}.wp-block-button__link:hover{transform:none}} /* ============================================================ v0.2.41: Scroll-Fortschrittslinie + Scrollbalken im Marken-Look ============================================================ */ .scroll-progress{position:fixed;top:0;left:0;width:100%;height:2px;background:var(--yellow);transform:scaleX(0);transform-origin:left center;z-index:300;pointer-events:none;will-change:transform} /* Die Linie folgt ausschliesslich dem Nutzer-Scroll und ist damit auch bei reduzierter Bewegung unbedenklich, sie bewegt sich nie von selbst. */ /* Scrollbalken: dunkle Schiene, ruhiger Daumen, gelber Akzent beim Anfassen */ html{scrollbar-color:#2E3238 #0B0C0E;scrollbar-width:thin} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:#0B0C0E} ::-webkit-scrollbar-thumb{background:#2E3238;border-radius:6px;border:2px solid #0B0C0E} ::-webkit-scrollbar-thumb:hover{background:#4A5058} ::-webkit-scrollbar-thumb:active{background:var(--yellow)} /* v0.2.43: Fortschrittslinie unter der Adminbar zeigen (nur eingeloggte Nutzer) */ body.admin-bar .scroll-progress{top:32px} @media(max-width:782px){body.admin-bar .scroll-progress{top:46px}} /* ============================================================ v0.2.44: Lagebild-Motion (GSAP ScrollTrigger, bidirektional) Unter html.gsap uebernimmt GSAP alle Auftritte, die CSS-Reveals werden neutralisiert. Ohne GSAP oder bei reduzierter Bewegung greift weiter der CSS/IO-Fallback (sanftes Einblenden). ============================================================ */ html.gsap .reveal,html.gsap .rv{opacity:1;transform:none;transition:none} html.gsap .hero-bg{animation:none;opacity:1} /* Signatur 1: Sektionslinien zeichnen sich mit dem Scrollverlauf */ html.gsap .sec--line{border-top-color:transparent;position:relative} html.gsap .sec--line::before{content:"";position:absolute;top:-1px;left:0;width:100%;height:1px;background:var(--line);transform:scaleX(var(--lineDraw,1));transform-origin:left center;pointer-events:none} /* Signatur 2: Karten-Akzentbalken zeichnet sich vor dem Inhalt */ html.gsap .cards.svc .ccard::before{transform:scaleX(var(--ck,1));transform-origin:left center} /* ---- v0.2.48: Spacing-Fix Kennzahlen + Checkliste (Paul, 03.07.2026). Spaete Reset-/Altregeln (Z.747, Sammel-Reset) ueberschrieben die Werte, deshalb hier am Dateiende. ---- */ .stats .st .c{margin-top:22px} .checklist{margin-top:20px} /* ---- v0.2.54: permanente Termin-Alternative unter dem Meetergo-Widget (Transparenz bei Consent-Ablehnung) ---- */ .mg-alt{margin-top:16px;font-size:var(--step--1);color:var(--grey);line-height:1.6} /* ============================================================= Smart MANV — Feedback-Runde Niko, Block A (v0.2.55, 12.07.2026) 1) Header-Logo praesenter (Wunsch: Wirkung wie creativecouch.de) 2) Footer-Kontakt untereinander (Firmenname + Adresse als Zeilen) 3) Hero-Kicker: Begriffe brechen nie intern um (.nb), auf Desktop leicht engere Laufweite, damit die Zeile einzeilig bleibt ============================================================ */ header .logo svg{height:40px} @media(max-width:600px){header .logo svg{height:34px}} .foot-col .foot-line{display:block;color:rgba(237,239,242,.72);font-size:var(--step--1);margin-bottom:11px} .hero-kicker .nb{white-space:nowrap} @media(min-width:1024px){.hero-kicker{letter-spacing:.11em}} /* ============================================================= Smart MANV — Feedback-Runde Niko, Block B (v0.2.56, 12.07.2026) 1) Prozess-Stepper Traegerseite: verbundene Schritt-Grafik 2) Panel-Kennzahlen vertikal, Typo wie die Kennzahlen-Leiste 3) Qualifizierungs-Gruppen im Unterschieds-Panel (Traeger) 4) Vergleich ANDERE / SMART MANV / ERGEBNIS deutlicher (AeLRD) 5) Schnellanfrage-Kacheln: sichtbare Klick-Affordance 6) Kontakt: Icons an den Kontaktwegen + waermerer Seitenkopf ============================================================ */ /* 1) Prozess-Stepper */ .steps{position:relative} .steps::before{content:"";position:absolute;left:25px;top:60px;bottom:60px;width:2px;background:var(--line)} .steps .srow{border-bottom:none;grid-template-columns:76px 1fr;align-items:start;padding:clamp(20px,2.4vw,30px) 0} .steps .srow .sn{width:52px;height:52px;border-radius:50%;border:2px solid var(--yellow);background:#0E0F12;color:var(--yellow);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:var(--step-1);font-weight:600;line-height:1;position:relative;z-index:1;box-shadow:0 0 0 6px rgba(254,201,2,.07)} .steps .srow .scol h3{padding-top:11px} @media(max-width:820px){.steps::before{left:19px}.steps .srow{grid-template-columns:56px 1fr}.steps .srow .sn{width:40px;height:40px;font-size:var(--step-0);box-shadow:0 0 0 4px rgba(254,201,2,.07)}.steps .srow .scol h3{padding-top:6px}} /* 2) Panel-Kennzahlen vertikal (ersetzt die Mono-Spalten aus Anlage 4) */ .panel .pstats{display:flex;flex-direction:column;gap:0;padding:0 clamp(24px,3vw,44px);width:100%} .panel .pstats .ps{padding:13px 0} .panel .pstats .ps + .ps{border-top:1px solid var(--line)} .panel .pstats .ps .n{font-family:'Montserrat',sans-serif;font-size:clamp(24px,2.2vw,34px);color:#fff;font-weight:800;letter-spacing:-.02em;line-height:1.05} .panel .pstats .ps:first-child .n{color:var(--yellow)} .panel .pstats .ps .l{font-size:var(--step--1);color:var(--grey);margin-top:5px;line-height:1.5} .panel .pvis{gap:18px} /* 3) Qualifizierungs-Gruppen im Traeger-Panel */ .panel .pvis .qgroups{list-style:none;margin:0;padding:0 clamp(24px,3vw,44px);width:100%;display:flex;flex-direction:column} .panel .pvis .qgroups li{position:relative;padding:10px 0 10px 28px;font-size:var(--step-0);font-weight:600;color:#EDEFF2;line-height:1.4} .panel .pvis .qgroups li + li{border-top:1px solid var(--line)} .panel .pvis .qgroups li::before{content:"✓";position:absolute;left:2px;top:9px;color:#5FA463;font-weight:700} /* 4) Vergleichs-Kacheln AeLRD */ .cards.compare .ccard{padding-top:clamp(24px,2.6vw,30px)} .cards.compare .ccard::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:#3A3F46;margin-bottom:18px} .cards.compare .ccard.hl::before{background:var(--yellow);width:56px} .cards.compare .ccard:last-child::before{background:#5FA463;width:48px} .cards.compare .ccard .clabel{font-size:var(--step--1);letter-spacing:.16em;color:#9BA3AB} .cards.compare .ccard.hl .clabel{color:var(--yellow)} .cards.compare .ccard:last-child .clabel{color:#7FBF83} .cards.compare .ccard.hl{border-color:rgba(254,201,2,.4);background:rgba(254,201,2,.09)} .wp-block-group[class*="-background-color"] .cards.compare .ccard .clabel{color:var(--sec-muted)} .wp-block-group[class*="-background-color"] .cards.compare .ccard.hl .clabel{color:var(--sec-accent)} .wp-block-group[class*="-background-color"] .cards.compare .ccard:last-child .clabel{color:#7FBF83} /* 5) Schnellanfrage-Kacheln klickbar erkennbar */ .qa-cards .ccard{position:relative;padding-right:56px;transition:transform .25s,border-color .25s,background .25s} .qa-cards .ccard::after{content:"→";position:absolute;right:22px;top:clamp(20px,2.2vw,28px);color:var(--sec-muted,var(--grey));font-size:var(--step-1);transition:transform .3s,color .3s} .qa-cards .ccard h3 a{transition:color .25s} .qa-cards .ccard h3 a::after{content:"";position:absolute;inset:0} .qa-cards .ccard:hover{transform:translateY(-4px);border-color:var(--sec-accent,var(--yellow));background:rgba(255,255,255,.06)} .qa-cards .ccard:hover::after{color:var(--sec-accent,var(--yellow));transform:translateX(6px)} .qa-cards .ccard:hover h3 a{color:var(--sec-accent,var(--yellow))} .qa-cards .ccard h3 a:focus-visible{outline:none} .qa-cards .ccard:focus-within{border-color:var(--sec-accent,var(--yellow));box-shadow:0 0 0 2px var(--sec-line,rgba(254,201,2,.35))} /* 6) Kontakt: Icons an den Kontaktwegen + waermerer Seitenkopf */ .infogrid .irow .ik{display:flex;align-items:center;gap:10px} .infogrid .irow .ik::before{content:"";width:16px;height:16px;flex:none;background-repeat:no-repeat;background-size:contain;background-position:center} .infogrid .irow:nth-child(1) .ik::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FEC902' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='M3.5 7.5l8.5 5.7 8.5-5.7'/%3E%3C/svg%3E")} .infogrid .irow:nth-child(2) .ik::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FEC902' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v2.6a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 3.7 2 2 0 0 1 4.1 1.5h2.6a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.7a2 2 0 0 1-.5 2.1L7.7 9.1a16 16 0 0 0 6 6l1.1-1.1a2 2 0 0 1 2.1-.5c.9.3 1.8.5 2.7.6a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E")} .infogrid .irow:nth-child(3) .ik::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FEC902' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s-7-5.9-7-11.2a7 7 0 0 1 14 0c0 5.3-7 11.2-7 11.2z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E")} .page-id-20 .page-hero .hero-bg{background:radial-gradient(60% 95% at 82% 0%,rgba(254,201,2,.15),transparent 58%),radial-gradient(38% 55% at 6% 100%,rgba(254,201,2,.06),transparent 62%)} /* ============================================================= Smart MANV — Feedback-Runde Niko, Block C (v0.2.57, 12.07.2026) 1) Hero: Netzwerk-Motiv (Anlage 2) statt Lagebild-SVG, gelbe Scan-Linie als CSS-Animation, Begriffs-Label bleibt 2) Wiesbaden-Karte im Referenz-Panel (Startseite + Referenzseite) ============================================================ */ .hero-media .lagebild-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;mix-blend-mode:screen} .hero-media .scanline{position:absolute;left:0;right:0;top:6%;height:2px;background:rgba(254,201,2,.38);z-index:2;pointer-events:none;animation:smv-scan 5.5s ease-in-out infinite alternate} @keyframes smv-scan{from{top:6%}to{top:94%}} @media(prefers-reduced-motion:reduce){.hero-media .scanline{animation:none;opacity:.25}} .panel .pvis .wi-map-img{width:min(82%,380px);height:auto;display:block} /* 3) Silbentrennung auf Desktop reduzieren (Feinschliff Niko, 12.07.2026): Fliesstext trennt ab 1025px nicht mehr automatisch, manuelle Trennstellen (­) bleiben wirksam. Ueberschriften behalten hyphens:auto als Schutz vor harten Umbruechen ohne Trennstrich ("Rettungsdienstber/eich"), trennen aber nur noch sehr lange Woerter (ab 14 Zeichen, 6 davor, 6 danach). */ @media(min-width:1025px){ main p,main li,main summary,main blockquote,main cite,footer p,footer a,.voices cite,.voice-big cite,.voice-inline cite,.quotes .src{hyphens:manual} main h1,main h2,main h3,main h4{hyphenate-limit-chars:14 6 6;-webkit-hyphenate-limit-before:6;-webkit-hyphenate-limit-after:6} } /* 4) Kachel-Ueberschriften: ab 1200px ohne automatische Trennung, lange Woerter passen dort komplett in die Zeile (Niko: keine ungewohnten Trennstellen wie "Patientenregis-trierung"). Darunter greift weiter Regel 3. */ @media(min-width:1200px){.cards .ccard h3{hyphens:manual}} /* ============================================================= Smart MANV — Feedback-Runde Niko, Responsive-Fixes (v0.2.58, 12.07.2026) 1) Hero-Kicker darf umbrechen (war flex ohne wrap und wurde auf schmalen Viewports rechts abgeschnitten), .nb haelt die Begriffe weiter zusammen, Umbruch nur zwischen den Begriffen 2) Nav-Breakpoint 880 -> 1099 und Hero-Breakpoint 880 -> 1024 (Tablet-Breiten bekommen die mobile Ansicht, siehe oben inline) ============================================================ */ .hero-kicker{flex-wrap:wrap;row-gap:6px} /* 3) Panel-Badges (Zahlen & Fakten, Referenzprojekt, Referenz Wiesbaden) ueberlappten auf Mobil den Inhalt: gestapelte pvis bekommt Kopf-Puffer */ @media(max-width:860px){.panel .pvis{padding:76px 22px 30px}} /* 4) Mobiles Menue: Desktop-Hover-Regel schob das offene Dropdown per translateX(-50%) links aus dem Bildschirm, oben im Nav-Block neutralisiert */ /* ============================================================= Smart MANV — Feinschliff-Nachzuegler (v0.2.59, 13.07.2026) 1) Hero-Kicker als eigene volle Zeile ueber den zwei Spalten (Niko: einzeilig auf Desktop; Grid-Regel oben im Hero-Block) 2) Anker-Statement: Absatz gedaempft, nur .hl weiss. Die Sektions-Token-Regel (background-color p/blockquote) hatte die anchor-Farben ueberstimmt, darum wirkte alles weiss ============================================================ */ .wp-block-group[class*="-background-color"].anchor blockquote{color:var(--sec-muted)} .wp-block-group[class*="-background-color"].anchor blockquote .hl{color:var(--sec-fg)} /* 3) Statement-Zeile steht seit dem Zahlen-Merge allein in ihrer Sektion: kompakteres Padding, kein margin-top mehr noetig */ .sec--slim{padding:clamp(44px,6vw,72px) 0} .sec--slim .statement{margin-top:0} /* 4) Eyebrow-Begriffsgruppen brechen nur zwischen den Begriffen um, der Mittelpunkt haengt am Vorgaenger (kein "· Hessen"-Umbruch) */ .nb{white-space:nowrap} .panel .peyebrow{flex-wrap:wrap;row-gap:4px} /* ============================================================= Smart MANV — Icons Leistungsbereiche (v0.2.60, 13.07.2026) Nikos Auswahl: 01 Verantwortung, 02 Medizin, 03 Funk, 04 App, 05 Zivilschutz, 06 Abschluss. Eingebaut in Startseiten-Matrix und Leistungen-Uebersicht (Icon ERSETZT die Nummer, 44px, wie die Vorschau-Zeile der Icon-Auswahlseite) sowie im Nav-Dropdown. ============================================================ */ .mcol{display:flex;align-items:flex-start} .mcol .micon{width:56px;height:56px;flex:none;color:var(--sec-fg,#EDEFF2)} @media(max-width:820px){.mcol .micon{width:48px;height:48px}} .dropdown a .dico{width:18px;height:18px;flex:none;color:currentColor} /* ============================================================= Smart MANV — Finales Referenzbild randlos in der Bildspalte (v0.2.66, 15.07.2026): Nikos Bildentscheidung Entwurf 3, der Auswahl-Slider aus v0.2.64/65 ist entfernt. Das Bild sitzt wie zuvor der Slider Kante an Kante, Badge liegt auf dem Bild. ============================================================ */ .pvis--full{padding:0} .pvis--full .pvimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .pvis--full .pbadge{z-index:5} .pvis--full .ph,.panel .pvis--full .triage{display:none} @media(max-width:860px){.panel .pvis--full{padding:0;min-height:0;aspect-ratio:3/4}} /* ============================================================= Smart MANV — Referenzseite Kachel-Sektionen + Footer neu (v0.2.66, 15.07.2026, nach Nikos Icon-/Layout-/Footer-Wahl): 1) fgrid/fcard: "Das Projekt im Überblick" als 3x2-Raster und "Gemeinsam mehr erreichen" als 3+1. Gelbe CTA-Kacheln: im Überblick interner Verweis, im Nutzen-Bereich das einzige Erstgespräch im Inhalt (CTA-Konzept 15.07.). 2) Footer Variante C: Marken-Karte links, gestapelte Blöcke rechts (Leistungen zweispaltig, Unternehmen + Kontakt auf denselben Achsen), gelbes Claim-Band als Markenabschluss OHNE Button, darunter die Impressum-Zeile. Die alten .foot-*-Regeln sind ab jetzt ungenutzt (footer.php = .nf). ACHTUNG Spezifität: .fcard.fcta-Overrides für die breite Kachel immer als .fcard.fcta.fcta--breit schreiben. ============================================================ */ .fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .fcard{background:linear-gradient(165deg,#1A1D22,#121317);border:1px solid var(--line);border-radius:16px;padding:26px 24px;display:flex;flex-direction:column;min-width:0} .fcard .fpic{width:34px;height:34px;flex:none;margin-bottom:16px;color:var(--sec-fg,#EDEFF2)} .fcard h3{font-size:17px;font-weight:800;line-height:1.3;margin:0 0 10px;color:var(--sec-fg,#fff);letter-spacing:-.01em} .fcard p{font-size:var(--step--1);color:var(--sec-muted,var(--grey));line-height:1.6;margin:0} .fcard.fcta{background:var(--yellow);border-color:var(--yellow);justify-content:center;gap:12px} .wp-block-group[class*="-background-color"] .fcard.fcta .ck{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(22,24,28,.68);margin:0} .wp-block-group[class*="-background-color"] .fcard.fcta h3{color:#16181C;margin:0} .fcard.fcta .cbtn{display:inline-block;align-self:flex-start;background:#16181C;color:var(--yellow);font-weight:700;font-size:var(--step--1);border-radius:9px;padding:11px 18px;text-decoration:none;transition:transform .25s cubic-bezier(.16,1,.3,1)} .fcard.fcta .cbtn:hover{transform:translateY(-2px)} .fcard.fcta.fcta--breit{grid-column:span 2;flex-direction:row;align-items:center;justify-content:space-between;gap:26px;padding:26px 30px} .fcard.fcta.fcta--breit .ctxt{display:flex;flex-direction:column;gap:8px;min-width:0} .fcard.fcta.fcta--breit .cbtn{align-self:center;flex:none;white-space:nowrap} .fgrid > *{min-width:0} @media(max-width:900px){ .fgrid{grid-template-columns:1fr 1fr} .fcard.fcta.fcta--breit{grid-column:span 2;flex-direction:column;align-items:flex-start;justify-content:center} .fcard.fcta.fcta--breit .cbtn{align-self:flex-start} } @media(max-width:600px){ .fgrid{grid-template-columns:1fr} .fcard.fcta.fcta--breit{grid-column:span 1} } /* Footer Variante C */ .nf{background:#0A0B0D;border-top:1px solid var(--line);padding:64px 0 0} .nf-split{display:grid;grid-template-columns:1.05fr 1.55fr;gap:clamp(28px,4vw,46px);align-items:start;padding-bottom:56px} .nf-card{background:#101114;border:1px solid var(--line);border-radius:16px;padding:30px 24px} .nf-card .logo svg{height:40px;width:auto;display:block} .nf-card p{font-size:var(--step--1);color:var(--grey);line-height:1.65;margin:20px 0} .nf-ivena{display:flex;align-items:center;gap:10px;font-size:var(--step--1);color:var(--txt)} .nf-ivena b{color:var(--yellow);font-weight:600} .nf-h{font-family:'JetBrains Mono',monospace;font-size:var(--step--2);letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);font-weight:700;margin:0 0 18px} .nf-col a,.nf-line{display:flex;align-items:flex-start;gap:10px;color:rgba(237,239,242,.75);font-size:var(--step--1);line-height:1.5;margin-bottom:12px;transition:color .2s} .nf-col a:hover{color:#fff} .nf .fic{width:18px;height:18px;flex:none;margin-top:2px} .nf .fic.chev{width:15px;height:15px;margin-top:3px} .nf-l{margin-bottom:32px;padding-bottom:20px;border-bottom:1px solid var(--line)} .nf-leist{column-count:2;column-gap:30px} .nf-leist a{break-inside:avoid;font-size:13px} .nf-row2{display:grid;grid-template-columns:1fr 1fr;gap:30px} .nf-band{background:var(--yellow);margin-top:8px} .nf-claim{font-size:clamp(24px,3.2vw,38px);font-weight:800;color:#16181C;letter-spacing:-.015em;line-height:1.1;margin:0;padding:clamp(26px,3.5vw,40px) 0;text-align:center} .nf-bottom{display:flex;justify-content:space-between;align-items:center;padding:24px 0 30px;font-size:var(--step--2);color:var(--grey-2);flex-wrap:wrap;gap:12px} .nf-bottom .legal{display:flex;gap:22px} .nf-bottom a:hover{color:#fff} .nf-split > *,.nf-row2 > *{min-width:0} @media(max-width:1080px){.nf-split{grid-template-columns:1fr}} @media(max-width:620px){ .nf-row2{grid-template-columns:1fr;gap:36px} .nf-leist{column-count:1} .nf-bottom{flex-direction:column;align-items:flex-start;gap:14px} .nf-bottom .legal{flex-direction:column;gap:0} .nf-bottom .legal a{display:inline-block;padding:8px 0} } /* ==== v0.2.68: Fuer-wen Abschluss-CTA (Satz + abgesetzter Button im Rahmen) ==== */ .aud-cta{margin-top:34px;display:flex;align-items:center;justify-content:space-between;gap:18px 32px;flex-wrap:wrap;padding:22px 28px;border:1px solid var(--sec-line,var(--line));border-radius:12px} .aud-cta p{margin:0;flex:1 1 380px;max-width:820px;color:var(--sec-muted,var(--grey));font-size:var(--step--1);line-height:1.6} .aud-cta p b{color:var(--sec-fg,var(--txt));font-weight:600} .aud-cta .aud-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border:1px solid var(--sec-line,var(--line));border-radius:10px;color:var(--sec-fg,var(--txt));font-weight:600;font-size:var(--step--1);white-space:nowrap;transition:border-color .25s,color .25s} .aud-cta .aud-btn::after{content:"\2192";transition:transform .25s} .aud-cta .aud-btn:hover{border-color:var(--sec-accent,var(--yellow));color:var(--sec-accent,var(--yellow))} .aud-cta .aud-btn:hover::after{transform:translateX(4px)} @media(max-width:600px){.aud-cta{margin-top:26px;padding:18px}.aud-cta .aud-btn{width:100%;justify-content:center}} .credit{font-size:var(--step--1);margin-top:30px} .wp-block-group[class*="-background-color"] p.credit{color:var(--sec-muted,var(--grey))} .credit a{color:var(--sec-fg,var(--txt));border-bottom:1px solid var(--sec-line,var(--line));transition:color .25s,border-color .25s} .credit a:hover{color:var(--sec-accent,var(--yellow));border-bottom-color:var(--sec-accent,var(--yellow))} /* ===== v0.2.70: Foto-Heros (Startseite, Referenzen, Traeger, Feuerwehr, Ausbildung) ===== */ .hero-foto{position:absolute;inset:0;z-index:0;overflow:hidden;max-width:none} .hero-foto picture{display:block;width:100%;height:100%} .hero-foto img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block} .hero-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0E0F12 28%,rgba(14,15,18,.84) 50%,rgba(14,15,18,.18) 78%,rgba(14,15,18,.3) 100%),linear-gradient(0deg,rgba(14,15,18,.72),transparent 32%)} .hero--foto .hero-bg,.hero--foto .hero-media{display:none} .hero-foto.hf-start img{object-position:100% 30%} .hero--foto .hero-lead,.hero--foto .lead{color:rgba(237,239,242,.78)} .page-hero.hero--foto h1{max-width:21ch} .page-hero.hero--foto .lead{max-width:52ch} .page-hero.hero--foto .q{max-width:48ch} @media(max-width:782px){ .hero-foto::after{background:linear-gradient(180deg,rgba(11,12,15,.84) 0%,rgba(11,12,15,.7) 46%,rgba(11,12,15,.4) 78%,rgba(11,12,15,.48) 100%)} .hero--foto .hero-foto img{object-position:center 70%} .page-hero.hero--foto{padding-bottom:min(56vw,300px)} } /* ===== v0.2.72: Detailfotos vor CTA + Content-Bausteine ===== */ .sec--menschtech{padding-top:clamp(48px,7vw,86px);padding-bottom:clamp(48px,7vw,86px)} .sec--menschtech .eyebrow{margin-bottom:26px} .mt-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,30px)} .mt-card{margin:0} .mt-card img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;border:1px solid var(--sec-line,var(--line))} .mt-card figcaption{display:flex;flex-direction:column;gap:5px;padding-top:14px;margin-top:14px;border-top:1px solid var(--sec-line,var(--line))} .mt-k{font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--sec-accent,var(--yellow))} .mt-t{font-size:var(--step-0);color:rgba(237,239,242,.82);max-width:34ch} @media(max-width:700px){.mt-grid{grid-template-columns:1fr;gap:24px}.mt-t{max-width:none}} .refbreak{position:relative;width:100%;max-width:none;margin:0;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .refbreak img{display:block;width:100%;height:clamp(240px,38vw,520px);object-fit:cover;object-position:center 45%} .device-figure{max-width:340px;margin:0 auto;text-align:center} .device-figure img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:14px} .device-figure figcaption{margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:var(--step--1);letter-spacing:.04em;color:var(--sec-muted,var(--grey))} /* ===== v0.2.73: Referenzen, zwei Detailfotos vor dem CTA (2er-Grid, quadratisch, ohne Text) ===== */ .rd-band{width:100%;max-width:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden} .rd-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1vw,15px)} .rd-grid figure{margin:0} .rd-grid img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block} @media(max-width:700px){.rd-grid{grid-template-columns:1fr}} /* === Feedback Niko 24.07.2026 === */ /* IVENA-Wordmark als dezente Marke im Section-Head (IVENA MANV APP) */ .ivena-wordmark--head{max-width:240px;margin:0 0 20px} /* Alle Foto-Heros (page-hero) einheitlich hoch angeglichen */ @media (min-width:1100px){.page-hero.hero--foto{min-height:1028px}} /* v0.2.73b: Karten-Ueberschriften saubere Silbentrennung */ .ccard h3{hyphens:auto} /* v0.2.73c: Hero-Hoehe Referenzen + Ueber uns an IVENA-Partnerschaft angleichen */ @media(min-width:783px){.page-id-18 .page-hero.hero--foto,.page-id-19 .page-hero.hero--foto{min-height:1000px}} /* === Feedback Niko 24.08.2026: Icon-Hero (Ueber uns) === */ .page-hero.hero--mark{position:relative;overflow:hidden} .page-hero.hero--mark>.wrap{position:relative;z-index:1} .hero-mark{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;max-width:none} .hero-mark svg{position:absolute;right:-3%;top:53%;transform:translateY(-50%);height:76%;width:auto;opacity:.25;-webkit-mask-image:linear-gradient(to left,#000 24%,rgba(0,0,0,.4) 60%,transparent 92%);mask-image:linear-gradient(to left,#000 24%,rgba(0,0,0,.4) 60%,transparent 92%)} @media (min-width:1100px){.page-hero.hero--mark{min-height:1028px}} .page-hero.hero--mark h1{max-width:21ch} .page-hero.hero--mark .lead{max-width:52ch} @media (max-width:782px){.hero-mark svg{height:42%;right:-14%;top:auto;bottom:4%;transform:none;opacity:.2}} /* Terminanfrage-CTA auf der Kontaktseite (statt Buchungswidget) */ .wp-block-buttons.cta-row.termin-cta{justify-content:flex-start;margin-top:30px} /* Hover fuer den sekundaeren Button in der Terminanfrage */ .termin-cta .wp-block-button.is-style-ghost .wp-block-button__link{transition:border-color .18s ease,color .18s ease,background-color .18s ease} .termin-cta .wp-block-button.is-style-ghost .wp-block-button__link:hover,.termin-cta .wp-block-button.is-style-ghost .wp-block-button__link:focus-visible{border-color:var(--yellow,#FEC902);color:var(--yellow,#FEC902);background:transparent} /* === Cookie-Richtlinie: Ausgabe von Real Cookie Banner ans Theme angleichen === */ .legal--rcb h2{font-size:clamp(1.25rem,1.7vw,1.55rem);font-weight:700;margin:56px 0 14px;letter-spacing:-.01em;color:#fff} .legal--rcb > p:first-child + h2, .legal--rcb h2:first-child{margin-top:8px} .legal--rcb h3{font-size:1.08rem;font-weight:700;margin:32px 0 10px;color:#fff} .legal--rcb p{margin:0 0 16px} .legal--rcb ul,.legal--rcb ol{margin:0 0 22px;padding-left:22px} .legal--rcb li{margin:0 0 8px} .legal--rcb a{color:var(--yellow,#FEC902);text-decoration:underline;text-underline-offset:3px} .legal--rcb a:hover{text-decoration:none} .legal--rcb strong,.legal--rcb b{color:#fff} /* Grid.js Tabelle */ .legal--rcb .gridjs-container{padding:0;color:inherit} .legal--rcb .gridjs-wrapper{border:1px solid var(--line,rgba(255,255,255,.1));border-radius:10px;box-shadow:none;background:rgba(255,255,255,.02)} .legal--rcb table.gridjs-table{color:inherit;font-size:.95rem} .legal--rcb th.gridjs-th{background:rgba(255,255,255,.05);color:#EDEFF2;border-color:var(--line,rgba(255,255,255,.1));font-weight:600;padding:12px 16px} .legal--rcb td.gridjs-td{background:transparent;color:rgba(237,239,242,.86);border-color:var(--line,rgba(255,255,255,.1));padding:12px 16px} .legal--rcb tr.gridjs-tr:hover td.gridjs-td{background:rgba(255,255,255,.03)} .legal--rcb .gridjs-th-sort:hover{background:rgba(255,255,255,.08)} .legal--rcb input.gridjs-input{background:rgba(255,255,255,.05);color:#EDEFF2;border:1px solid var(--line,rgba(255,255,255,.1));border-radius:8px;box-shadow:none} .legal--rcb input.gridjs-input::placeholder{color:rgba(237,239,242,.45)} .legal--rcb .gridjs-head{padding:0 0 14px;border:0} .legal--rcb .gridjs-footer{background:transparent;border:0;box-shadow:none;padding:14px 0 0;color:rgba(237,239,242,.7)} .legal--rcb .gridjs-summary{color:rgba(237,239,242,.6)} .legal--rcb button.gridjs-page{background:transparent;color:#EDEFF2;border:1px solid var(--line,rgba(255,255,255,.1));border-radius:8px;margin-left:6px} .legal--rcb button.gridjs-page:hover{border-color:var(--yellow,#FEC902);color:var(--yellow,#FEC902)} .legal--rcb button.gridjs-page.gridjs-currentPage{background:var(--yellow,#FEC902);color:var(--ink,#0E0F12);border-color:var(--yellow,#FEC902);font-weight:600} .legal--rcb .gridjs-td svg,.legal--rcb .gridjs-th svg{fill:currentColor} /* Grid.js Sortier-Icons im dunklen Theme sichtbar machen */ .legal--rcb button.gridjs-sort{filter:invert(1);opacity:.5} .legal--rcb button.gridjs-sort:hover{opacity:.9} .legal--rcb .gridjs-tbody{background:transparent} .legal--rcb .gridjs-td.gridjs-message{background:transparent;color:rgba(237,239,242,.7)} /* Cookie-Tabelle: volle Breite nutzen statt horizontal scrollen */ .legal--rcb .gridjs-container{width:100%} .legal--rcb .gridjs-wrapper{overflow-x:auto} .legal--rcb table.gridjs-table{width:100%!important;min-width:0;table-layout:auto} .legal--rcb .gridjs-th,.legal--rcb .gridjs-td{white-space:normal;word-break:break-word;width:auto!important;min-width:0!important} @media (max-width:700px){.legal--rcb table.gridjs-table{min-width:560px}} /* Mailadressen ohne href: Cursor und Fokus wie bei einem Link */ a.mlk:not([href]){cursor:pointer} a.mlk:not([href]):focus-visible{outline:2px solid var(--yellow,#FEC902);outline-offset:3px;border-radius:3px} /* === Mehrstufiges Kontaktformular === */ .msf{--msf-text:#EDEFF2;--msf-leise:rgba(237,239,242,.62);--msf-rand:rgba(255,255,255,.16);--msf-rand-stark:rgba(255,255,255,.34);--msf-feld:rgba(255,255,255,.05);--msf-karte:rgba(255,255,255,.04);--msf-akzent:var(--yellow,#FEC902);--msf-akzent-text:#0E0F12;max-width:760px;margin:34px 0 66px;color:var(--msf-text)} .has-gelb-background-color .msf{--msf-text:#0E0F12;--msf-leise:rgba(14,15,18,.66);--msf-rand:rgba(14,15,18,.2);--msf-rand-stark:rgba(14,15,18,.42);--msf-feld:rgba(255,255,255,.78);--msf-karte:rgba(255,255,255,.55);--msf-akzent:#0E0F12;--msf-akzent-text:var(--yellow,#FEC902)} .msf-zaehler{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--msf-leise);margin:0 0 18px} .msf-frage{font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:700;line-height:1.25;margin:0 0 22px;color:var(--msf-text)} .msf-frage:focus{outline:none} .msf-frage:focus-visible{outline:2px solid var(--msf-akzent);outline-offset:6px;border-radius:4px} .msf-hinweis{margin:-8px 0 18px;font-size:.92rem;color:var(--msf-leise)} .msf-auswahl{display:grid;gap:14px} @media (min-width:620px){.msf-auswahl{grid-template-columns:1fr 1fr}.msf-karte:last-child{grid-column:1 / -1}} .msf-karte{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:'icon titel haken' 'icon text haken';column-gap:15px;row-gap:5px;align-items:start;width:100%;text-align:left;font:inherit;color:var(--msf-text);background:var(--msf-karte);border:1.5px solid var(--msf-rand);border-radius:14px;padding:20px;cursor:pointer;transition:border-color .16s ease,background-color .16s ease,transform .16s ease} .msf-karte-icon{grid-area:icon;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:11px;background:var(--msf-feld);border:1px solid var(--msf-rand);color:var(--msf-text);flex:0 0 auto} .msf-karte-icon svg{width:21px;height:21px} .msf-karte-titel{grid-area:titel;font-size:1.02rem;font-weight:700;line-height:1.3} .msf-karte-text{grid-area:text;font-size:.88rem;line-height:1.5;color:var(--msf-leise)} .msf-karte-haken{grid-area:haken;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--msf-rand);color:transparent;align-self:center;flex:0 0 auto;transition:border-color .16s ease,background-color .16s ease,color .16s ease} .msf-karte-haken svg{width:13px;height:13px} .msf-karte:hover{border-color:var(--msf-akzent);transform:translateY(-2px)} .msf-karte:hover .msf-karte-haken{border-color:var(--msf-akzent)} .msf-karte:focus-visible{outline:2px solid var(--msf-akzent);outline-offset:3px} .msf-karte.is-gewaehlt{border-color:var(--msf-akzent);background:var(--msf-feld)} .msf-karte.is-gewaehlt .msf-karte-haken{background:var(--msf-akzent);border-color:var(--msf-akzent);color:var(--msf-akzent-text)} .msf-karte.is-gewaehlt .msf-karte-icon{border-color:var(--msf-akzent)} .msf-felder{display:grid;gap:16px} @media (min-width:640px){.msf-felder{grid-template-columns:1fr 1fr}.msf-feld:nth-child(3){grid-column:1 / -1}} .msf-feld{margin:0} .msf-feld label{display:block;font-size:.86rem;font-weight:600;margin:0 0 7px;color:var(--msf-text)} .msf-pflicht{color:var(--msf-akzent)} .has-gelb-background-color .msf-pflicht{color:#0E0F12} .msf-optional{font-weight:400;color:var(--msf-leise)} .msf input[type=text],.msf input[type=email],.msf input[type=tel],.msf textarea{width:100%;font:inherit;font-size:1rem;color:var(--msf-text);background:var(--msf-feld);border:1px solid var(--msf-rand);border-radius:9px;padding:13px 15px;transition:border-color .16s ease} .has-gelb-background-color .msf input,.has-gelb-background-color .msf textarea{color:#0E0F12} .msf input::placeholder,.msf textarea::placeholder{color:var(--msf-leise)} .msf input:focus,.msf textarea:focus{outline:none;border-color:var(--msf-akzent);box-shadow:0 0 0 3px color-mix(in srgb,var(--msf-akzent) 28%,transparent)} .msf textarea{resize:vertical;min-height:150px} .msf-einwilligung{margin:20px 0 0} .msf-einwilligung label{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;line-height:1.55;color:var(--msf-leise);cursor:pointer} .msf-einwilligung input{margin-top:3px;width:18px;height:18px;accent-color:var(--msf-akzent);flex:0 0 auto} .msf-einwilligung a{color:var(--msf-text);text-decoration:underline;text-underline-offset:3px} .msf-nav{display:flex;gap:12px;align-items:center;margin-top:26px;flex-wrap:wrap} .msf-nav button{font:inherit;font-size:1rem;font-weight:600;border-radius:9px;padding:14px 30px;cursor:pointer;border:1px solid transparent;transition:background-color .16s ease,border-color .16s ease,color .16s ease} .msf-weiter,.msf-senden{background:var(--msf-akzent);color:var(--msf-akzent-text);border-color:var(--msf-akzent)} .msf-weiter:hover,.msf-senden:hover{filter:brightness(1.08)} .msf-senden[disabled]{opacity:.6;cursor:default} .msf-nav .msf-zurueck{background:transparent;color:var(--msf-text);border:1px solid var(--msf-rand-stark)} .msf-nav .msf-zurueck:hover{border-color:var(--msf-akzent);color:var(--msf-akzent)} .has-gelb-background-color .msf-nav .msf-zurueck:hover{color:#0E0F12;border-color:#0E0F12;background:rgba(255,255,255,.4)} .msf-nav button:focus-visible{outline:2px solid var(--msf-akzent);outline-offset:3px} .has-gelb-background-color .msf-nav button:focus-visible{outline-color:#0E0F12} .msf-fehler{margin:18px 0 0;padding:12px 16px;border-radius:9px;background:rgba(198,40,40,.14);border:1px solid rgba(198,40,40,.5);color:#ff9a9a;font-size:.92rem} .has-gelb-background-color .msf-fehler{background:rgba(198,40,40,.1);border-color:rgba(198,40,40,.55);color:#8f1f1f} .msf-danke{border:1px solid var(--msf-rand);border-radius:12px;padding:30px;background:var(--msf-karte)} .msf-danke h3{margin:0 0 10px;font-size:1.3rem;font-weight:700;color:var(--msf-text)} .msf-danke h3:focus{outline:none} .msf-danke p{margin:0;color:var(--msf-leise);line-height:1.6} .msf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} @media (prefers-reduced-motion:reduce){.msf-karte,.msf-nav button{transition:none}.msf-karte:hover{transform:none}} /* Dringend-Hinweis in der Danke-Meldung */ .msf-danke-eilig{margin-top:22px;padding-top:20px;border-top:1px solid var(--msf-rand)} .msf-danke-frage{margin:0 0 4px;font-weight:700;color:var(--msf-text)} .msf-danke-tel{margin:0 0 2px} .msf-danke-tel a{color:var(--msf-text);font-weight:700;text-decoration:underline;text-underline-offset:3px} .msf-danke-tel a:hover{text-decoration:none} .msf-danke-zeit{margin:0;font-size:.88rem;color:var(--msf-leise)} /* Icons bei den Kontaktangaben */ .ik{display:flex;align-items:center;gap:9px} .ik-icon{width:17px;height:17px;flex:0 0 auto;color:var(--yellow,#FEC902)} .has-gelb-background-color .ik-icon{color:#0E0F12;opacity:.7} /* Zwei gleichfarbige Sektionen direkt hintereinander sollen wie ein Block wirken: keine Trennlinie und kein doppeltes Polster an der Nahtstelle. */ .has-gelb-background-color + .has-gelb-background-color{border-top:0} .has-gelb-background-color + .has-gelb-background-color.sec{padding-top:0} .has-gelb-background-color:has(+ .has-gelb-background-color){padding-bottom:64px} .has-dunkel-background-color + .has-dunkel-background-color.sec--line{border-top-color:rgba(255,255,255,.08)}