/* ============================================================== WEBMOUNT — DESIGN SYSTEM Schweizer Grid · Engineering · Radius max. 2px Navy #0B2557 · Blau #185BED · Weiß · Grau ============================================================== */ :root{ --navy:#0B2557; --navy-deep:#071A3E; --blue:#185BED; --blue-press:#0F49C8; --blue-bright:#5B8DF3; /* Akzent auf dunklem Grund */ --ink:#0A1730; --ink-2:#44506A; --ink-3:#8B94A8; --bg:#FFFFFF; --bg-alt:#F5F6F8; --line:rgba(10,23,48,.14); --line-soft:rgba(10,23,48,.08); --wline:rgba(255,255,255,.16); --wline-soft:rgba(255,255,255,.09); --f:'Inter Tight',system-ui,-apple-system,sans-serif; --ease:cubic-bezier(.22,.8,.24,1); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:110px} body{ font-family:var(--f);font-size:16px;line-height:1.6; color:var(--ink-2);background:var(--bg); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;overflow-x:hidden; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} /* Textmarkierung (Maus-Selektion und "Scroll to text"-Sprungziele aus Browser-Links) in Markenblau statt Browser-Standardgelb/-blau. */ ::selection{background:rgba(24,91,237,.22);color:var(--ink)} ::target-text{background:rgba(24,91,237,.22);color:var(--ink)} button{font:inherit;background:none;border:0;cursor:pointer;color:inherit} h1{font-weight:300;color:var(--ink);letter-spacing:-.02em} .container{max-width:1360px;margin:0 auto;padding:0 48px} @media(max-width:760px){.container{padding:0 22px}} /* ---------- Buttons ---------- */ .btn{ position:relative;display:inline-flex;align-items:center;gap:14px; padding:18px 30px;border-radius:2px;overflow:hidden; font-size:15px;font-weight:500;letter-spacing:.02em; transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease); } .btn .ar{display:inline-block;transition:transform .3s var(--ease)} .btn:hover .ar{transform:translateX(5px)} .btn--p{background:var(--blue);color:#fff} .btn--p::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%); transform:translateX(-120%);transition:transform .7s var(--ease); } .btn--p:hover{background:var(--blue-press)} .btn--p:hover::after{transform:translateX(120%)} /* ---------- Motion ---------- */ .anim [data-rv]{opacity:0;transform:translateY(22px);transition:opacity .85s var(--ease),transform .85s var(--ease)} .anim [data-rv].in{opacity:1;transform:none} .anim [data-rv="m"]{opacity:1;transform:none;clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--ease)} .anim [data-rv="m"].in{clip-path:inset(0 0 0 0)} .anim [data-d="1"]{transition-delay:.09s} .anim [data-d="2"]{transition-delay:.18s} .anim [data-d="3"]{transition-delay:.27s} @media(prefers-reduced-motion:reduce){ .anim [data-rv]{opacity:1 !important;transform:none !important;clip-path:none !important;transition:none !important} .anim .dbar i{transition:none !important} } /* ============================================================== HEADER ============================================================== */ .hdr{ position:fixed;inset:0 0 auto 0;z-index:200; background:transparent;border-bottom:1px solid transparent; transition:background .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s var(--ease); } /* Verlauf statt Leiste (23.09.2026, zuerst am Handy, jetzt ueberall). Der Kopfbalken liegt ohne eigene Flaeche ueber dem Hero: Logo, Menue und Knopf standen frei im Bild und verschwammen mit der Headline darunter — es fehlte die Trennung, nicht der Kontrast (gemessen 10,3 bis 18,6:1). Der Verlauf loest sich nach unten vollstaendig auf, erzeugt also keine sichtbare Leiste, gibt dem Balken aber Halt. Sobald der Balken auf hell schaltet, verschwindet er. */ .hdr::before{ content:"";position:absolute;inset:0 0 auto 0;height:158px; pointer-events:none;opacity:1;transition:opacity .35s var(--ease); background:linear-gradient(180deg, rgba(6,19,45,.60) 0%,rgba(6,19,45,.36) 42%, rgba(6,19,45,.12) 74%,rgba(6,19,45,0) 100%); } .hdr.light::before,.hdr.open::before{opacity:0} .hdr__in{position:relative;z-index:1} .hdr__in{height:88px;display:flex;align-items:center;gap:0} /* Icon-Basis auf Text-Grundlinie (Berg „steht“ auf derselben Linie wie die Wortmarke). Asset ist eng auf den soliden Berg beschnitten (assets/webmount-mark.png), daher keine Crop-Hacks nötig. */ .hdr__logo{display:flex;align-items:baseline;gap:7px;flex-shrink:0} .hdr__logo-ic{height:30px;width:auto} .hdr__logo-wm{ font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1; color:#fff;transition:color .35s var(--ease); } .hdr.light .hdr__logo-wm{color:var(--ink)} .hdr__nav{display:flex;align-items:stretch;height:100%;gap:6px;margin-inline:auto} .hdr__item{position:relative;display:flex;align-items:center} .hdr__link{ position:relative;display:inline-flex;align-items:center;gap:6px;height:100%; padding:0 14px;font-size:14.5px;font-weight:500;letter-spacing:.01em; color:rgba(255,255,255,.82);transition:color .25s var(--ease);white-space:nowrap; } .hdr__link::after{ content:"";position:absolute;left:14px;right:14px;bottom:26px;height:1px; background:currentColor;transform:scaleX(0);transform-origin:left; transition:transform .35s var(--ease);opacity:.9; } .hdr__link:hover{color:#fff} .hdr__link:hover::after{transform:scaleX(1)} /* Menue-Hover am Desktop (23.09.2026). Der ueberfahrene Punkt bleibt voll und wird heller, die uebrigen treten zurueck. Getragen wird das von der Transparenz der Geschwister, nicht von einer Farbaenderung des Einzelnen: dadurch entsteht die Tiefe, die man eher spuert als sieht. Nur fuer echte Zeigegeraete — auf Touch gibt es kein Hover, dort wuerde der Zustand nach dem Antippen haengen bleiben. :focus-within spiegelt dasselbe fuer die Tastatur, damit die Navigation mit Tab nicht anders aussieht als mit der Maus. */ @media (hover:hover) and (pointer:fine){ .hdr__nav .hdr__link{transition:color .25s var(--ease),opacity .3s var(--ease)} .hdr__nav:hover .hdr__link, .hdr__nav:focus-within .hdr__link{opacity:.42} .hdr__nav .hdr__link:hover, .hdr__nav .hdr__link:focus-visible{opacity:1} /* Das Kundenportal steht ausserhalb der Navigation, gehoert aber zur selben Zeile — es tritt mit zurueck. */ .hdr__in:has(.hdr__nav:hover) .hdr__portal{opacity:.42;transition:opacity .3s var(--ease)} } .hdr__caret{transition:transform .25s var(--ease);opacity:.7} .hdr__item:hover .hdr__caret,.hdr__item:focus-within .hdr__caret{transform:rotate(180deg)} /* Dropdown-Panel: weiße Karte, 1px-Linie, kein Schatten */ .hdr__sub{ position:absolute;top:100%;left:6px;min-width:236px; background:#fff;border:1px solid var(--line);border-radius:2px;padding:7px; opacity:0;visibility:hidden;transform:translateY(7px); transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s var(--ease); } .hdr__item:hover .hdr__sub,.hdr__item:focus-within .hdr__sub,.hdr__item.open .hdr__sub{ opacity:1;visibility:visible;transform:none; } .hdr__sub a{ display:block;padding:11px 14px;border-radius:2px; font-size:14.5px;font-weight:400;color:var(--ink-2); transition:background .2s var(--ease),color .2s var(--ease); } .hdr__sub a:hover{background:var(--bg-alt);color:var(--ink)} .hdr__cta{flex-shrink:0;margin-left:24px;padding:13px 22px;font-size:14px} .hdr__nav-cta{display:none} /* nur im mobilen Menü sichtbar */ /* --- Light-Zustand: weiß, sobald man den Hero verlässt --- */ .hdr.light{background:rgba(255,255,255,.72);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);border-bottom-color:var(--line-soft)} .hdr.light .hdr__link{color:var(--ink-2)} .hdr.light .hdr__link:hover{color:var(--ink)} /* --- Burger (mobil) --- */ .hdr__burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin-left:auto} .hdr__burger span{display:block;width:22px;height:2px;background:#fff;transition:transform .3s var(--ease),opacity .3s var(--ease),background .35s var(--ease);margin-left:auto} .hdr.light .hdr__burger span{background:var(--ink)} .hdr.open .hdr__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} .hdr.open .hdr__burger span:nth-child(2){opacity:0} .hdr.open .hdr__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(max-width:900px){ .hdr__in{height:72px} .hdr__cta{display:none} .hdr__burger{display:flex} .hdr__nav{ position:fixed;top:72px;left:0;right:0; flex-direction:column;align-items:stretch;height:auto;gap:0;margin:0; background:#fff;border-bottom:1px solid var(--line-soft); padding:8px 22px 22px; transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none; transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s var(--ease); } .hdr.open .hdr__nav{transform:none;opacity:1;visibility:visible;pointer-events:auto} /* Header im offenen Zustand immer hell */ .hdr.open{background:#fff;border-bottom-color:var(--line-soft)} .hdr.open .hdr__logo-wm{color:var(--ink)} .hdr__logo-ic{height:27px;width:auto} .hdr__logo-wm{font-size:21px} .hdr__item{flex-direction:column;align-items:stretch} .hdr__link{height:auto;padding:15px 6px;color:var(--ink);justify-content:space-between} .hdr__link::after{display:none} .hdr__link:hover{color:var(--ink)} .hdr__sub{ position:static;opacity:1;visibility:visible;transform:none; border:0;border-left:1px solid var(--line);border-radius:0; min-width:0;margin:0 0 8px 6px;padding:2px 0; } .hdr__sub a{padding:11px 16px;color:var(--ink-2)} .hdr__caret{display:none} .hdr__nav-cta{display:inline-flex;align-self:flex-start;margin-top:16px} } /* ============================================================== HERO ============================================================== */ .hero{ position:relative;overflow:hidden; min-height:100vh;display:flex;align-items:center; } .hero::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(rgba(11,37,87,.26),rgba(11,37,87,.26)), url("assets/e-hero.jpg") center center / cover no-repeat, linear-gradient( to right, rgba(11,37,87,.955) 0%, rgba(11,37,87,.955) 18%, rgba(11,37,87,.93) 35%, rgba(11,37,87,.84) 44%, rgba(11,37,87,.56) 51%, rgba(11,37,87,.25) 58%, rgba(11,37,87,.07) 63%, rgba(11,37,87,0) 68% ), radial-gradient(circle at 92% 8%,rgba(11,37,87,.16) 0%,rgba(11,37,87,.08) 22%,rgba(11,37,87,0) 55%); background-blend-mode:multiply,normal,normal,multiply; } .hero__inner{position:relative;z-index:3;width:100%;padding-top:24px} .hero__lbl{ display:inline-flex;align-items:center; font-size:15px;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--blue);margin-bottom:16px; } .hero h1{ font-size:clamp(40px,5vw,68px);line-height:1.04;font-weight:400; color:#fff;letter-spacing:-.02em;max-width:14em; } .hero h1 .acc{color:var(--blue);font-weight:500} .hero__lede{ margin:22px 0 32px;max-width:540px; font-size:clamp(16.5px,1.4vw,19px);line-height:1.55;color:rgba(255,255,255,.8); } .hero__lede strong{color:#fff;font-weight:500} .hero__cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center} .hero__trust{display:flex;align-items:center;gap:16px;margin-top:32px} /* Kunden-Avatare: überlappende Gruppe (rund, weißer Ring) + Pfeil-Kreis — wie Original */ .hero__trust-ava{display:flex} .hero__trust-ava .ava{flex:none;position:relative;width:42px;height:42px;border-radius:50%;overflow:hidden; border:2px solid #C1C4BF;margin-left:-13px;background:var(--bg-alt);display:block} .hero__trust-ava .ava:first-child{margin-left:0} .hero__trust-ava .ava:nth-child(1){z-index:6} .hero__trust-ava .ava:nth-child(2){z-index:5} .hero__trust-ava .ava:nth-child(3){z-index:4} .hero__trust-ava .ava:nth-child(4){z-index:3} .hero__trust-ava .ava--arrow{z-index:2;display:flex;align-items:center;justify-content:center;background:#fff;color:#C1C4BF} .hero__trust-ava img{width:100%;height:100%;object-fit:cover;display:block; transform:scale(1.08);transform-origin:50% 32%} .hero__trust-txt{font-size:15px;color:rgba(255,255,255,.82)} .hero__trust-txt b{color:var(--blue);font-weight:600} @media(max-width:760px){ .hero__inner{padding-top:104px} .hero h1{max-width:100%} .hero__trust{margin-top:40px} } /* ============================================================== SEKTIONEN & TYPOGRAFIE ============================================================== */ .g{display:grid;grid-template-columns:repeat(12,1fr);gap:24px} .sec{padding:150px 0} @media(max-width:900px){.sec{padding:96px 0}} h2,h3{font-weight:300;color:var(--ink);letter-spacing:-.02em} .h2{font-size:clamp(32px,3.9vw,54px);line-height:1.1} .h2 strong{font-weight:500} .lede{font-size:clamp(16.5px,1.4vw,19px);line-height:1.65;color:var(--ink-2)} /* Sektions-Label: Marken-Blau, ohne Zierstrich */ .lbl{ display:inline-flex;align-items:baseline;gap:14px; font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--blue); } .lbl i{font-style:normal;font-weight:400;color:var(--ink-3);letter-spacing:.08em} /* Wasserzeichen-Index: Tiefe + Rhythmusbruch */ .wmk{ position:absolute;top:-30px;right:-6px;z-index:0;pointer-events:none;user-select:none; font-size:clamp(96px,12vw,180px);font-weight:300;line-height:1;letter-spacing:-.05em; color:rgba(11,37,87,.05); } /* Sektionskopf: zweispaltig (H2 links, Lede rechts) */ .head-split{position:relative;border-top:1px solid var(--line);padding-top:32px;margin-bottom:84px} .head-split .lbl{margin-bottom:24px} .head-split .g{align-items:end} .head-split .h2{grid-column:1/8} .head-split .lede{grid-column:9/13;padding-bottom:6px} @media(max-width:900px){ .head-split{margin-bottom:56px} .head-split .h2,.head-split .lede{grid-column:1/13} .head-split .lede{margin-top:16px} } /* Sektionskopf zentriert — dieselbe Grammatik wie #formel und #vergleich. Ersetzt fuer #angebot den zweispaltigen head-split, nachdem die Lede auf Seitennorm gekuerzt wurde und die schmale rechte Spalte nicht mehr gebraucht wird. head-split bleibt fuer #zahlen bestehen. OHNE Haarlinie ueber dem Kopf (Melvin, 01.09.: „hairline erstmal weg") — damit sieht der Kopf aus wie der von #formel, der seine Linie ebenfalls nicht selbst traegt. Das padding-top:32px war der Rest, der die entfernte Linie vom Kopf abgehalten hat; ohne Linie hat es nichts mehr zu polstern und liess #angebot als einzige Sektion 182 statt 150px tief anfangen. Raus. */ .head-mitte{position:relative;margin-bottom:84px; text-align:center} .head-mitte .lbl{margin-bottom:16px} .head-mitte .g{display:block} .head-mitte .h2{max-width:900px;margin:0 auto} .head-mitte .lede{max-width:700px;margin:18px auto 0;text-wrap:balance} @media(max-width:900px){ .head-mitte{margin-bottom:56px} .head-mitte .lede{margin-top:16px} } /* ============================================================== ZAHLEN & FAKTEN — Data-Band ============================================================== */ .data{border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .data .g{gap:0} .dcell{grid-column:span 4;padding:58px 44px 54px;border-left:1px solid var(--line-soft)} .dcell:first-child{border-left:0;padding-left:0} .dcell__tag{ display:inline-block;margin-bottom:34px; font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--blue);border:1px solid rgba(24,91,237,.35);border-radius:2px;padding:6px 12px; } .dcell__num{ font-size:clamp(58px,5.4vw,84px);font-weight:300;line-height:1; color:var(--ink);letter-spacing:-.03em;display:flex;align-items:baseline; } .dcell__num .cnt{font-variant-numeric:tabular-nums;min-width:2ch} .dcell__num .pct{font-size:.38em;font-weight:400;color:var(--blue);margin-left:.1em} .dbar{position:relative;height:2px;background:var(--line-soft);margin:26px 0 24px} .dbar i{position:absolute;inset:0 auto 0 0;background:var(--blue);width:var(--w)} .anim .dbar i{width:0;transition:width 1.3s var(--ease) .2s} .anim .dbar.go i{width:var(--w)} .dcell__txt{font-size:16.5px;line-height:1.65;color:var(--ink-2);max-width:30ch} .dcell__src{display:block;margin-top:20px;font-size:12.5px;letter-spacing:.04em;color:var(--ink-3)} @media(max-width:900px){ .dcell{grid-column:span 12;border-left:0;border-top:1px solid var(--line-soft);padding:38px 0} .dcell:first-child{border-top:0} } /* ============================================================== PAIN — 50/50 Zickzack, Typo-Hierarchie, hell→dunkel Abstieg ============================================================== */ .pain{background:var(--bg-alt);transition:background 1s var(--ease);overflow:hidden;padding:150px 0 160px} .pain.dark{background:var(--navy)} .pain__head{position:relative;max-width:860px;margin-bottom:104px} .pain .wmk{color:rgba(11,37,87,.05);transition:color 1s var(--ease)} .pain.dark .wmk{color:rgba(255,255,255,.06)} .pain__head .lbl{margin-bottom:20px} .pain__head .h2{color:var(--ink);transition:color 1s var(--ease)} .pain.dark .pain__head .h2,.pain.dark .pain__head .h2 strong{color:#fff} .pscene{align-items:center;margin-bottom:132px} .pscene__text{grid-column:1/6} .pscene__viz{grid-column:7/13} /* Zickzack: Szene mit --rev spiegelt (Grafik links, Text rechts) */ .pscene--rev .pscene__text{grid-column:8/13} .pscene--rev .pscene__viz{grid-column:1/6} /* beide Spalten in dieselbe Grid-Zeile — sonst schiebt Auto-Placement die Grafik nach unten */ .pscene__text,.pscene__viz{grid-row:1} .pscene__title{font-size:clamp(30px,3.4vw,48px);line-height:1.1;font-weight:300;color:#fff;letter-spacing:-.02em;margin-bottom:26px} .pscene__body{font-size:clamp(16px,1.25vw,17.5px);line-height:1.72;color:rgba(255,255,255,.58);margin-bottom:22px;max-width:40ch} .pscene__body b{font-weight:500;color:rgba(255,255,255,.9)} .pscene__body:last-child{margin-bottom:0} .pscene__pointe{font-size:clamp(18px,1.55vw,21px);line-height:1.5;color:rgba(255,255,255,.82);max-width:38ch;margin-bottom:22px} .pscene__pointe b{font-weight:500;color:#fff} .ptransition{max-width:720px;margin:0 auto;text-align:center;font-size:clamp(20px,2vw,26px);line-height:1.45;font-weight:300;color:#fff;letter-spacing:-.01em;text-wrap:balance} /* --- Szene 1: Suche --- */ .field{display:flex;align-items:center;gap:11px;padding:15px 16px;border:1px solid rgba(255,255,255,.16);border-radius:2px;margin-bottom:18px;color:rgba(255,255,255,.5)} .field .q{font-size:15.5px;color:#fff;white-space:pre} .caret{width:1.5px;height:19px;background:#5B8DF3;display:inline-block;margin-left:1px;animation:blink 1s steps(1,end) infinite} @keyframes blink{50%{opacity:0}} .s1rows{position:relative} .res{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border:1px solid rgba(255,255,255,.12);border-radius:2px;color:rgba(255,255,255,.72);font-size:16px; opacity:0;transform:translateY(9px);transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .45s var(--ease),background .45s var(--ease)} .res.in{opacity:1;transform:none} .res.pick{position:relative;overflow:hidden} .res.pick.picked{border-color:var(--blue);background:rgba(24,91,237,.16)} .res.pick.picked .name{color:#fff} .res.pick.picked::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue)} .res .tag{font-style:normal;font-size:13px;font-weight:500;color:#8FB2FF} .res.empty{border-style:dashed;border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.45)} .res.empty .miss-tag{font-style:normal;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45)} .conn{height:34px;position:relative} .conn::before{content:"";position:absolute;left:24px;top:0;bottom:0;width:1px;background:rgba(255,255,255,.18);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)} .conn.in::before{transform:scaleY(1)} /* --- Szene 2: vier gleiche, Preis gewinnt --- */ .s2{display:flex;flex-direction:column;gap:10px} .c2row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border:1px solid rgba(255,255,255,.12);border-radius:2px;color:rgba(255,255,255,.72); opacity:0;transform:translateY(9px);transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .45s var(--ease),background .45s var(--ease)} .c2row.in{opacity:1;transform:none} .c2row .name{font-size:16px} .c2row .meta{font-size:12.5px;color:rgba(255,255,255,.4);letter-spacing:.02em} .c2row .tag{font-style:normal;font-size:13px;font-weight:500;color:#8FB2FF} .s2.decided .c2row:not(.c2win){opacity:.4} .c2win.won{border-color:var(--blue);background:rgba(24,91,237,.16)} .c2win.won .name{color:#fff} @media(prefers-reduced-motion:reduce){.caret{display:none}.res,.c2row{opacity:1;transform:none;transition:none}} @media(max-width:900px){.pain{padding:96px 0}.pscene__text,.pscene__viz,.pscene--rev .pscene__text,.pscene--rev .pscene__viz{grid-column:1/13;grid-row:auto}.pscene__viz{margin-top:32px}.pscene{margin-bottom:80px}} /* ============================================================== VERGLEICH — Vorher/Nachher (Mockups, unten ausgerichtet) ============================================================== */ .h2{text-wrap:balance} .cmp{background:var(--bg-alt)} /* Mockups: geringere Größendifferenz, unten ausgerichtet (gemeinsame Bodenlinie) */ .cmp__grid{display:grid;grid-template-columns:minmax(0,5.5fr) minmax(0,6.5fr);gap:48px;align-items:end} .cmp__shot{position:relative;margin:0} .cmp__mock{width:100%;height:auto;display:block} .cmp__mock--old{filter:grayscale(.2);opacity:.96} /* Bodenschatten unter der Nachher-Aufnahme: am 01.09.2026 entfernt. Er ragte unter die Figur hinaus und lag als blauer Fleck hinter dem Betriebs-Schild. Die Geräte stehen jetzt ohne Ellipse auf Weiß. */ .cmp__shot--new{isolation:isolate} .cmp__shot--new .cmp__mock{position:relative;z-index:1} /* Tags: schweben über der oberen Kante, verdecken einen kleinen Teil */ .cmp__tag{position:absolute;top:-13px;left:16px;z-index:2;display:inline-block; font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:2px; background:#fff;border:1px solid var(--line);color:var(--ink-3)} .cmp__tag--good{background:var(--blue);color:#fff;border-color:var(--blue)} /* Punkte darunter, spaltenbündig zu den Mockups */ .cmp__lists{display:grid;grid-template-columns:minmax(0,5.5fr) minmax(0,6.5fr);gap:48px;margin-top:26px;align-items:start} .cmp__points{display:grid;gap:10px} .cmp__points li{display:flex;gap:12px;align-items:baseline;font-size:15px;line-height:1.45} .cmp__points--flaws li{color:var(--ink-3)} .cmp__points--flaws li::before{content:"—";color:var(--ink-3);flex:none} .cmp__points--wins li{color:var(--ink-2)} .cmp__points--wins li::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--blue);flex:none;align-self:flex-start;transform:translateY(6px)} /* CTA neben die Stärken-Liste, vertikal zentriert */ .cmp__winrow{display:flex;justify-content:space-between;align-items:center;gap:40px} .cmp__winrow .btn--o{flex:none} .btn--o{border:1px solid var(--line);color:var(--ink)} .btn--o i{position:absolute;width:10px;height:10px;border:0 solid var(--blue);transition:width .3s var(--ease),height .3s var(--ease);pointer-events:none;font-style:normal} .btn--o i:first-of-type{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px;width:0;height:0} .btn--o i:last-of-type{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px;width:0;height:0} .btn--o:hover{border-color:rgba(10,23,48,.3)} .btn--o:hover i{width:12px;height:12px} @media(max-width:1000px){ .cmp__grid,.cmp__lists{grid-template-columns:1fr;gap:32px} .cmp__grid{align-items:start} .cmp__lists{margin-top:22px} .cmp__cta{justify-content:flex-start} } /* ============================================================== LÖSUNG B — Timeline-Aufstieg mit animierten Grafiken (mutig) ============================================================== */ .loesb{background:var(--bg);overflow:hidden} .lb__steps{position:relative;padding-left:0} /* Fortschritts-Spine (füllt sich beim Scrollen) */ .lb__spine{position:absolute;left:25px;top:14px;bottom:14px;width:2px;background:var(--line)} .lb__spine i{position:absolute;left:0;top:0;width:2px;height:0;background:var(--blue);transition:height .8s var(--ease)} .lb__step{position:relative;padding-left:92px;margin-bottom:120px} .lb__step:last-child{margin-bottom:0} /* Nummer-Node auf der Spine (Quadrat, 2px Radius) */ .lb__node{position:absolute;left:0;top:0;width:52px;height:52px;display:flex;align-items:center;justify-content:center; border:1px solid var(--line);border-radius:2px;background:#fff; font-size:15px;font-weight:600;letter-spacing:.04em;color:var(--ink-3); transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease);z-index:2} .lb__step.active .lb__node{background:var(--blue);color:#fff;border-color:var(--blue);transform:scale(1.04)} /* Zickzack-Inneres */ .lb__inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .lb__step--rev .lb__text{order:2} .lb__step--rev .lb__viz{order:1} .lb__text,.lb__viz{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .lb__step.active .lb__text{opacity:1;transform:none;transition-delay:.05s} .lb__step.active .lb__viz{opacity:1;transform:none;transition-delay:.15s} .lb__title{font-size:clamp(26px,2.6vw,38px);font-weight:300;color:var(--ink);letter-spacing:-.02em;line-height:1.08;margin-bottom:20px} .lb__body{font-size:16px;line-height:1.72;color:var(--ink-2);margin-bottom:20px;max-width:42ch} .lb__pointe{font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--ink);font-weight:300;max-width:36ch} .lb__pointe b{font-weight:500;color:var(--blue)} /* --- gemeinsame Viz-Karte --- */ .lbviz{background:var(--bg-alt);border:1px solid var(--line);border-radius:2px;padding:26px} /* Viz 1 — Google-Suche, Ihr Betrieb klettert auf Platz 1 */ .lbviz--rank{background:#fff} .gsearch{margin-bottom:16px} .glogo{display:block;font-size:22px;font-weight:500;letter-spacing:-.01em;line-height:1;margin-bottom:14px} .glogo b{font-weight:500} .gbar{display:flex;align-items:center;gap:12px;padding:11px 16px;background:#fff;border:1px solid var(--line);border-radius:22px} .gmag{color:#9aa0a6;flex:none} .gq{flex:1;font-size:15px;color:var(--ink)} .gmic{flex:none} .gmeta{font-size:12px;color:var(--ink-3);margin-bottom:14px} .rank{position:relative;height:280px} .rank__row{position:absolute;left:0;right:0;top:0;height:64px;display:flex;flex-direction:column;justify-content:center;gap:3px; padding:0 14px;background:#fff;border-bottom:1px solid var(--line-soft);border-radius:2px; transform:translateY(calc(var(--slot) * 72px)); transition:transform .85s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease)} .gr__url{font-size:12px;color:#5f6368;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gr__title{font-size:15.5px;color:#1a0dab;line-height:1.25;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rank__me .gr__url,.rank__me .gr__title{padding-right:84px} .rank__badge{position:absolute;top:50%;right:12px;transform:translateY(-50%);opacity:0; font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:#fff;background:var(--blue);border-radius:2px;padding:5px 10px;transition:opacity .4s var(--ease) .55s} .lbviz--rank.go .rank__me{transform:translateY(0);background:rgba(24,91,237,.07);box-shadow:inset 3px 0 0 var(--blue)} .lbviz--rank.go .rank__me .gr__title{color:var(--blue)} .lbviz--rank.go .rank__row:not(.rank__me){transform:translateY(calc((var(--slot) + 1) * 72px));opacity:.5} .lbviz--rank.go .rank__badge{opacity:1} /* Viz 2 — Wahrgenommener Eindruck (Balken) */ .perc__cap{display:block;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:22px} .perc__row{display:flex;align-items:center;gap:16px;margin-bottom:18px} .perc__row:last-child{margin-bottom:0} .perc__name{flex:none;width:78px;font-size:14px;color:var(--ink-2)} .pbar{position:relative;flex:1;height:10px;background:var(--line-soft);border-radius:2px;overflow:hidden} .pbar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--ink-3);opacity:.55;border-radius:2px;transition:width 1s var(--ease)} .perc__me .perc__name{color:var(--ink);font-weight:500} .perc__me .pbar i{background:var(--blue);opacity:1} .perc__tag{flex:none;font-style:normal;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--blue);opacity:0;transition:opacity .5s var(--ease) .7s} .lbviz--perc.go .pbar i{width:var(--w)} .lbviz--perc.go .perc__tag{opacity:1} /* Viz 3 — Posteingang (Mail-Client) */ .lbviz--inbox{background:#fff;padding:0;overflow:hidden} .mail__top{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-bottom:1px solid var(--line)} .mail__title{font-size:15px;font-weight:600;color:var(--ink)} .mail__flag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line);border-radius:2px;padding:3px 8px} .feed{display:block} .feed__i{display:flex;align-items:flex-start;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line-soft); opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)} .feed__i:last-child{border-bottom:0} .feed__i.in{opacity:1;transform:none} .feed__i--unread{background:rgba(24,91,237,.035)} .mail__av{flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-size:13px;font-weight:600;color:#fff;background:var(--c,#185BED)} .mail__body{flex:1;min-width:0} .mail__line1{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:5px} .mail__from{font-size:14.5px;font-weight:500;color:var(--ink-2)} .feed__i--unread .mail__from{font-weight:600;color:var(--ink)} .mail__time{flex:none;font-size:12px;color:var(--ink-3)} .mail__line2{display:flex;align-items:center;gap:9px;min-width:0} .feed__t{flex:none;font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;border-radius:2px;padding:3px 7px} .feed__t--a{color:#fff;background:var(--blue)} .feed__t--b{color:#fff;background:var(--navy)} .feed__x{font-size:13.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lb__cta{margin-top:96px;display:flex;justify-content:center} @media(prefers-reduced-motion:reduce){ .lb__text,.lb__viz{opacity:1;transform:none} .rank__row{transition:none} } @media(max-width:900px){ .lb__step{padding-left:76px;margin-bottom:80px} .lb__spine{left:21px} .lb__node{width:44px;height:44px;font-size:14px} .lb__inner{grid-template-columns:1fr;gap:30px} .lb__step--rev .lb__text{order:1} .lb__step--rev .lb__viz{order:2} .lb__cta{margin-top:64px} } /* ============================================================== FEINSCHLIFF — Google-Markierung leiser (Badge weg, ruhiger Akzent) ============================================================== */ .rank__badge{display:none} .lbviz--rank.go .rank__me{background:rgba(24,91,237,.045);box-shadow:inset 2px 0 0 var(--blue)} .rank__me .gr__url,.rank__me .gr__title{padding-right:14px} .lbviz--rank.go .rank__me .gr__title{color:var(--blue);font-weight:400} /* ===== Variante A — große dünne Zahl auf der Spine (ungeboxt) ===== */ .lb__node{width:60px;height:auto;min-height:0;left:-4px;padding:8px 0; background:var(--bg);border:0;border-radius:0; display:flex;align-items:center;justify-content:center; font-size:48px;font-weight:300;letter-spacing:-.04em;line-height:.9;color:var(--ink-3); transform:none;transition:color .5s var(--ease)} .lb__step.active .lb__node{color:var(--blue);background:var(--bg);transform:none} @media(max-width:900px){.lb__node{width:48px;height:auto;font-size:34px;left:-3px}} /* ============================================================== GRAFIK 1 v2 — reichhaltiges Google-Ergebnis (Rich Result + Maps) ============================================================== */ .serp{background:#fff} .serp__head{margin-bottom:22px} .serp .glogo{display:block;font-size:22px;font-weight:500;letter-spacing:-.01em;line-height:1;margin-bottom:14px} .serp .glogo b{font-weight:500} .serp .gbar{display:flex;align-items:center;gap:12px;padding:11px 16px;background:#fff;border:1px solid var(--line);border-radius:22px} .serp .gmag{color:#9aa0a6;flex:none} .serp .gq{flex:1;font-size:15px;color:var(--ink)} .serp .gmic{flex:none} .serp__tabs{display:flex;gap:22px;margin-top:14px;padding-bottom:0;border-bottom:1px solid var(--line-soft)} .serp__tabs span{font-size:13px;color:#5f6368;padding-bottom:10px} .serp__tabs .on{color:var(--blue);box-shadow:inset 0 -2px 0 var(--blue)} .serp__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:start} /* Rich Result */ .serp__result{min-width:0} .serp__title{font-size:19px;line-height:1.2;color:#1a0dab;font-weight:400;margin-bottom:4px} .serp__url{font-size:13px;color:#0a7c2f;margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .serp__desc{font-size:13.5px;line-height:1.55;color:#4d5156;margin-bottom:10px} .serp__chips{font-size:13px;color:#5f6368;margin-bottom:14px} .serp__rate{display:flex;align-items:center;gap:8px} .serp__score{font-size:13.5px;color:#70757a} .stars{position:relative;display:inline-block;font-size:15px;line-height:1;letter-spacing:1px} .stars__base{color:#dadce0} .stars__fill{position:absolute;left:0;top:0;color:#fbbc05;overflow:hidden;white-space:nowrap;width:0;transition:width 1s var(--ease) .2s} .serp.go .stars__fill{width:100%} .serp__count{font-size:13px;color:#70757a} /* Maps-Karte */ .serp__map{border:1px solid var(--line);border-radius:2px;overflow:hidden;background:#fff} .serp__mapimg{position:relative;height:132px;overflow:hidden} .serp__mapimg .map{display:block;width:100%;height:100%} .serp__pin{position:absolute;left:52%;top:46%;transform:translate(-50%,-135%);opacity:0; transition:transform .55s var(--ease) .35s,opacity .3s var(--ease) .35s; filter:drop-shadow(0 3px 4px rgba(10,23,48,.28))} .serp.go .serp__pin{transform:translate(-50%,-100%);opacity:1} .serp__mapinfo{padding:13px 15px 15px} .serp__mapname{font-size:15px;color:var(--ink);font-weight:500;margin-bottom:5px} .serp__rate--sm{gap:6px;margin-bottom:7px} .stars-sm{color:#fbbc05;font-size:13px;letter-spacing:1px;line-height:1} .serp__rate--sm .serp__score,.serp__rate--sm .serp__count{font-size:12.5px} .serp__mapmeta{font-size:12.5px;color:#5f6368;margin-bottom:5px} .serp__open{font-size:12.5px;color:#5f6368} .serp__open b{color:#0a7c2f;font-weight:500} /* Aufbau-Reveal */ .serp__result,.serp__map{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)} .serp.go .serp__result{opacity:1;transform:none;transition-delay:.05s} .serp.go .serp__map{opacity:1;transform:none;transition-delay:.18s} @media(max-width:560px){ .serp__grid{grid-template-columns:1fr;gap:20px} } /* ============================================================== REST-SEKTIONEN (aus Prototyp portiert) — 05–09 + Footer ============================================================== */ .btn--w{background:#fff;color:var(--navy)} .btn--w:hover{background:#E9EEF9} @keyframes blip{0%,100%{opacity:1}50%{opacity:.25}} /* Sektionsköpfe (Rhythmus) */ .head-row{position:relative;border-top:1px solid var(--line);padding-top:30px;margin-bottom:64px; display:flex;align-items:baseline;justify-content:space-between;gap:32px;flex-wrap:wrap} .head-row .h2{font-size:clamp(28px,3vw,40px)} /* Ohne Linie (01.09.2026): #fragen ist die einzige Sektion mit .head-left, und die Linie war dort dasselbe Bauteil, das über dem CTA weggefallen ist. Das padding-top von 32px hing an der Linie und ist mit ihr weg — der Abstand kommt jetzt von #fragen. */ .head-left{position:relative;margin-bottom:72px;max-width:640px} .head-left .lbl{margin-bottom:22px} /* Ecken-Marker */ .tick{position:absolute;width:14px;height:14px;border-color:rgba(11,37,87,.4);border-style:solid} .tick--tl{top:-1px;left:-1px;border-width:2px 0 0 2px} .tick--tr{top:-1px;right:-1px;border-width:2px 2px 0 0} /* 05 · Ergebnisse */ .refrow{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:baseline;padding:38px 0;border-top:1px solid var(--line-soft)} .refrow:last-of-type{border-bottom:1px solid var(--line-soft)} .refrow__score{grid-column:1/3;font-size:14px;letter-spacing:2.5px;color:var(--navy);white-space:nowrap} .refrow__score b{display:block;font-size:12px;letter-spacing:.06em;color:var(--ink-3);font-weight:400;margin-top:6px} .refrow__quote{grid-column:3/10;font-size:clamp(17px,1.6vw,21px);line-height:1.55;font-weight:300;color:var(--ink)} .refrow__who{grid-column:10/13;text-align:right} .refrow__who b{display:block;font-size:14.5px;font-weight:500;color:var(--ink)} .refrow__who span{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)} .refs__note{margin-top:26px;font-size:13px;color:var(--ink-3);text-align:right} @media(max-width:900px){ .refrow{gap:10px;padding:30px 0} .refrow__score,.refrow__quote,.refrow__who{grid-column:1/13} .refrow__who{text-align:left;margin-top:4px} } /* 06 · Ablauf */ .proc{position:relative} .proc__track{position:relative;height:2px;background:var(--line-soft);margin-bottom:14px} .proc__track i{display:block;height:100%;width:100%;background:var(--blue)} .anim .proc__track i{width:0;transition:width 2s var(--ease) .2s} .anim .proc__track i.go{width:100%} .proc__node{position:absolute;top:-5px;width:12px;height:12px;border-radius:2px;background:#fff;border:2px solid var(--blue)} .proc__ruler{display:flex;justify-content:space-between;margin-bottom:52px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)} .proc__ruler span{position:relative;padding-top:12px} .proc__ruler span::before{content:"";position:absolute;top:0;left:50%;width:1px;height:7px;background:var(--line)} .pstep{grid-column:span 3} .pstep__no{font-size:44px;font-weight:300;color:var(--ink-3);letter-spacing:-.02em;line-height:1} .pstep__t{font-size:18px;font-weight:500;color:var(--ink);margin:16px 0 10px} .pstep__d{font-size:14.5px;line-height:1.65;color:var(--ink-2)} .pstep__meta{display:inline-block;margin-top:16px;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)} @media(max-width:900px){.proc__ruler{display:none}.pstep{grid-column:span 6;margin-bottom:36px}} @media(max-width:560px){.pstep{grid-column:1/13}} /* 07 · Direktkontakt — neues Layout, großes Foto */ /* Weißer Abstand rings um das graue Band, gemessen 01.09.2026: über der Kante lagen 150px, darunter 91px — das Band klebte an der FAQ. Beide jetzt auf 130px. Gerechnet wird bis zur Farbkante, nicht bis zur Tinte: bei einer farbigen Fläche liest das Auge die Kante als Grenze; das Innenmaß des Bandes (150px) ist dessen eigene Sache. Warum 130 und nicht der Seitenstandard 150: die Farbkante trennt schon, deshalb darf hier weniger Weiß stehen als zwischen zwei weißen Abschnitten. 150 unten hätte die FAQ um 59px nach unten geschoben — der Bereich war ohnehin schon als zu luftig bemängelt. MESSFALLE, hier zum zweiten Mal in einer Sitzung reingelaufen: [data-rv] steht vor dem Reveal auf translateY(22px)/opacity:0. Wer misst, ohne vorher `.in` zu setzen UND die Transition zu killen, bekommt Werte, die um zweistellige Beträge danebenliegen. */ #ablauf{padding-bottom:130px} @media(max-width:900px){#ablauf{padding-bottom:84px}} .contact{background:var(--bg-alt)} .contact .container{position:relative} .contact .wmk{top:-8px;left:-8px;right:auto} .contact__grid{align-items:center} /* Inhaber freigestellt: kein Kasten, weicher Ausfaden nach unten. ZUM BILD (01.09.2026): die Datei ist beschnitten. Vorher lag im PNG ein durchsichtiger Rand — die Person füllte nur 21–100 % der Höhe und 17–87 % der Breite. Der Bildkasten war dadurch deutlich größer als die Person: 143px leerer Raum über dem Kopf, 89px links. Sichtbare Folge: die Person begann bei x=150, während der Rest der Seite und die Bildunterschrift darunter bei x=61 anfangen — das Foto war als einziges Element der Seite auf nichts ausgerichtet. Gemessen, nicht geschätzt (Alphakanal-Bbox 275/446/1399/2134). Jetzt ist der Kasten die Person. `width:70%` hält die Person exakt so groß wie vorher — 70 % der Spalte entspricht der Ink-Breite, die sie im ungeschnittenen Bild hatte. Wer die Breite ändert, ändert damit auch die optische Höhe und muss die Ausrichtung unten neu messen. FASSUNG J (01.09.2026, entschieden nach Vergleich gegen H1/82 %): ganzes Bild, aspect-ratio 800/1201 — kein Beschnitt unten mehr. Ausgerichtet wird nicht mehr über gleiche Unterkanten, sondern mittig: die Person überragt den Textblock oben und unten um denselben Betrag (`.contact__panel{align-self:center}`). Bei ungleich hohen Spalten ist das die einzige Definition von „auf einer Höhe“, die trägt. */ .contact__photo{grid-column:1/6;position:relative;margin:0;border:0;border-radius:0;overflow:visible;background:none;align-self:start;margin-top:9px} .contact__photo img{width:70%;aspect-ratio:800/1201;height:auto;display:block; object-fit:cover;object-position:top center; -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%); mask-image:linear-gradient(to bottom,#000 70%,transparent 100%)} /* Die Unterschrift bleibt UNTER der Person. Zwei Versuche, sie auf Knopfhöhe hochzuziehen (-116px, -123px), landeten auf Unterarm bzw. Oberarm und waren nicht lesbar. Wer es doch will, nimmt sie aus dem Fluss (position:absolute + z-index über der Maske) — ein negatives margin-top verkürzt die Figur, dadurch schrumpft die Rasterzeile und der mittig gesetzte Textblock rutscht mit hoch: der Abstand schließt sich nur zur Hälfte. */ .contact__photo figcaption{position:static;padding:0;margin-top:-26px;background:none} .contact__photo figcaption b{display:block;font-size:16px;font-weight:600;color:var(--ink)} .contact__photo figcaption span{font-size:12.5px;letter-spacing:.04em;color:var(--ink-3)} /* Hintergrund-Rhythmus: Ergebnisse abgesetzt (Testimonials auf getöntem Grund) */ #ergebnisse{background:var(--bg-alt)} .contact__panel{grid-column:6/13;align-self:center} .contact__status{display:flex;width:fit-content;align-items:center;gap:10px;margin-bottom:24px;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)} .contact__status::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--blue);animation:blip 1.8s var(--ease) infinite} .contact__panel .lbl{display:block;margin-bottom:14px} .contact__panel .h2{margin:0 0 20px} .contact__panel .lede{max-width:46ch;margin-bottom:30px} /* Die Zeilen enden dort, wo auch die Lede endet. Vorher liefen die Linien 223px weiter nach rechts als jeder Text darüber. 46ch wie bei der Lede geht NICHT: ch hängt an der Schriftgröße des Elements, und die Zeilen sind kleiner gesetzt — sie endeten damit 79px zu früh. 505px ist die nachgemessene Breite der Lede (46ch bei deren Schriftgröße) in dieser Spaltenbreite. Kanten fluchten dadurch exakt; auf der Testseite standen hier 513, also 8px daneben. */ .contact__rows{display:grid;border-top:1px solid var(--line);margin-bottom:32px;max-width:505px} .crow{display:grid;grid-template-columns:160px 1fr;gap:20px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line-soft)} .crow small{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)} .crow p,.crow a{font-size:15.5px;font-weight:500;color:var(--ink)} .crow a{position:relative;width:fit-content} .crow a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--blue);transition:width .35s var(--ease)} .crow a:hover{color:var(--blue)} .crow a:hover::after{width:100%} .crow .sub{display:block;font-size:12.5px;font-weight:400;color:var(--ink-3);margin-top:3px} .contact__act{display:flex;gap:14px;flex-wrap:wrap} @media(max-width:900px){ .contact__photo,.contact__panel{grid-column:1/13} .contact__photo{max-width:340px} .contact__panel{margin-top:34px} .crow{grid-template-columns:1fr;gap:4px} } /* 08 · FAQ */ .faq{max-width:880px} .faq details{border-bottom:1px solid var(--line-soft)} .faq details:first-of-type{border-top:1px solid var(--line-soft)} .faq summary{list-style:none;display:flex;align-items:center;gap:22px;padding:26px 0;cursor:pointer;font-size:18px;font-weight:400;color:var(--ink);transition:color .2s} .faq summary::-webkit-details-marker{display:none} /* Kein Blau mehr in der Liste: Blau ist auf dieser Seite die Farbe des Knopfes. Eine geöffnete Zeile darf nicht dasselbe Gewicht tragen wie „Erstgespräch anfragen". Reagiert deshalb der Kasten, nicht der Text. */ .faq summary:hover .x{border-color:var(--ink-3);color:var(--ink)} .faq summary .q{flex:1} .faq summary .x{flex-shrink:0;width:28px;height:28px;border:1px solid var(--line);border-radius:2px;display:flex;align-items:center;justify-content:center;color:var(--ink-3);transition:border-color .3s,color .3s} /* Offen = Minus. Vorher drehte sich das Quadrat um 45° und füllte sich blau — das einzige rotierende Element der ganzen Seite, und durch den 2px-Radius wurde daraus eine Linse statt einer Raute. Jetzt wird nur der senkrechte Strich ausgeblendet. */ .faq details[open] summary .x{border-color:var(--ink);color:var(--ink)} .faq .x .v{transition:opacity .25s var(--ease)} .faq details[open] summary .x .v{opacity:0} /* Links bündig: ohne die Nummernspalte (F.01 …) beginnt die Frage am Containerrand, die Antwort muss mit. Der alte Einzug von 62px hing an 38px Nummer + 22px Abstand. */ .faq .a{padding:0 60px 28px 0;font-size:15.5px;line-height:1.7;color:var(--ink-2)} @media(max-width:700px){.faq .a{padding-left:2px}} /* FINAL CTA — eine Zeile im Raster, weiß (Fassung A, 01.09.2026). Ersetzt den Navy-Block: der war die einzige dunkle Fläche der Seite und stand direkt über dem hellgrauen Footer — zwei Farbwechsel auf 200px. Getrennt wird jetzt über dieselbe Haarlinie in Containerbreite, die auch die Sektionsköpfe benutzen (.head-left, .head-split). */ /* KEINE Trennlinie über dem Block (entschieden 01.09.2026, Melvin). Getrennt wird allein über den Farbwechsel Weiß -> --bg-alt. Vorgeschichte, damit das niemand rückgängig macht, ohne sie zu kennen: Solange der Block weiß auf weiß stand, war eine Linie zwingend, und sie musste über die volle Breite laufen — eingerückt in Containerbreite ist sie auf dieser Seite die Ankündigung eines Sektionskopfes (.head-left, .head-split, #formel::before), auf den immer ein blauer Kicker, eine Nummer und eine H2 folgen. Der Abschlussblock hat davon nichts, die eingerückte Linie hätte also eine Sektion versprochen, die nicht kommt. Seit der Block auf --bg-alt steht, trägt die Fläche die Trennung selbst. Eine Fassung mit --line-soft wurde gebaut und verworfen: gegen den Farbsprung ist sie unsichtbar, also nur Code ohne Wirkung. Falls die Hintergrundfarbe je wieder auf Weiß zurückgeht: Linie wieder rein, und zwar hier am
, nicht an .final__row. */ /* Abstände am Seitenende (01.09.2026, gemessen mit abgeschalteten Transitions — .final__row traegt beim Einblenden translateY(22px), und getComputedStyle liefert direkt nach dem Setzen der Klasse noch den Startwert. Wer hier nachmisst, ohne die Transitions vorher auszuschalten, misst 22px daneben. Zwischen letzter FAQ-Zeile und Blockoberkante lagen 150px — das volle Sektionspolster. Die Kante hing dadurch mitten in einer leeren Zone, statt die Fragenliste zu schließen. Deshalb bekommt #fragen unten ein eigenes, kleineres Polster; .sec bleibt global bei 150px. Der Block selbst ist optisch zentriert, nicht kastenzentriert: gemessen wird von der Blockoberkante bis zur Versalhöhe (45px) und von der Unterlänge der Zusagen-Zeile bis zur Footerkante (45px). Die Kästen sind deshalb ungleich gepolstert (34 oben / 42 unten). */ /* In der Höhe zentriert: der weiße FAQ-Streifen steht zwischen zwei grauen Flächen (#kontakt und dem CTA). Statt der globalen 150px von .sec steht oben und unten derselbe optische Abstand: 96px. Die Kastenwerte sind trotzdem ungleich (86 oben / 96 unten), weil über den Versalien des Kickers „FRAGEN" rund 10px Vorlauf liegen, unter der letzten Haarlinie der Liste dagegen nichts. Gemessen mit abgeschalteten Transitions, siehe Hinweis weiter unten. */ /* 125 statt 130: der Kicker bringt 5px eigenen Vorlauf mit, gemessen. */ #fragen{padding-top:125px;padding-bottom:96px} /* Grund: --bg-alt, dieselbe Fläche wie die Kontaktsektion (.contact{background:var(--bg-alt)}). */ .final{background:var(--bg-alt)} .final__row{padding:34px 0 42px; display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px;align-items:center} .final__row .h2{margin:0 0 16px} /* Die drei Zusagen als eine Zeile statt als Hakenliste — die Liste war der größte Einzelposten an der Bauhöhe des alten Blocks. */ .final__pts{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2)} .final__pts span{color:var(--ink-3);margin:0 12px} .final__act{justify-self:end} @media(max-width:900px){#fragen{padding-top:79px;padding-bottom:64px}} @media(max-width:760px){.final__row{grid-template-columns:1fr;gap:30px; padding:26px 0 40px}.final__act{justify-self:start}} /* FOOTER — Navy mit gespiegeltem Berg (Fassung F05, 01.09.2026). Vorher: hellgrau, senkrechte Streifen alle 120px, Trennlinie über der Rechtszeile. Beide Linienarten sind raus — getrennt wird nur noch über Abstand. Der Berg steht kopfüber (scaleY(-1)) und sehr schwach: er soll als Nachhall des Heros lesbar sein, nicht als zweites Hero. Zwei Bergbilder auf einer Seite tragen nur, wenn das zweite deutlich leiser ist — deshalb opacity .28 plus Schleier darüber. Der Berg liegt in einer eigenen Ebene, nicht als background des