/* ═══ STARTSEITEN-EIGENES CSS, GEBUENDELT ═══════════════════════════ 27.08.2026: die drei Startseite-eigenen Dateien (startseite_gesamt_v1, startseite_fein_v10, knopf_atem_v3) zu einer zusammengefasst - PageSpeed fand alle drei einzeln render-blockierend (zus. ~2,4s geschaetzte Einsparung). Byte-identisch aneinandergehaengt, Reihenfolge unveraendert, @import (Fontshare General Sans) an den Dateianfang gezogen (muss vor jeder Regel stehen, sonst faellt die Hausschrift still weg). Quelle: scratchpad/_startseite_zusammen.css (Session 27.08.2026 PageSpeed). */ @import url("https://api.fontshare.com/v2/css?f%5B%5D=general-sans@400,500,600,700&display=swap"); /* ═══ AUSSEHEN DER STARTSEITE, GEBUENDELT ═══════════════════════════ Erzeugt 25.08.2026 aus dem, was der Browser tatsaechlich anzeigt. Warum es diese Datei gibt: das Aussehen der Startseite entstand bisher zur Laufzeit in elf Skripten, die im FUSS liefen - gemessen starteten sie erst 113 ms nach dem Seitenstart, lange nachdem der Browser schon gezeichnet hatte. Genau das war das kurze Aufblitzen der rohen Seite (Logo riesig, Text unformatiert) beim Aufruf. Inhalt und Reihenfolge sind 1:1 das, was die elf Skripte einhaengen - nicht nachgebaut, sondern im Browser ausgelesen (die fuenf verschiedenen Schreibweisen im Quelltext per Regex nachzubauen waere Raten gewesen). Die Skripte laufen unveraendert weiter; diese Datei sorgt nur dafuer, dass ihr Ergebnis schon vor dem ersten Zeichnen da ist. Dass sie es danach ein zweites Mal einhaengen, ist folgenlos - es ist derselbe Text in derselben Reihenfolge. Block 1 ist das Overlay, Block 2-11 sind die os_-Blaetter. */ /* ══ Block 1 · 45123 Zeichen ══ */ /* --- Seiten-Custom-Code des Originals (bei der Duplizierung verloren) --- */ :root{--black:var(--_edelmut-os---black,#050505);--graphite:var(--_edelmut-os---graphite,#0E1013);--white:var(--_edelmut-os---white,#FFFFFF);--ink:var(--_edelmut-os---ink,#0B0C0E);--ink2:var(--_edelmut-os---ink-muted,#54575E);--ink3:var(--_edelmut-os---ink-subtle,#8B8F97);--blue:var(--_edelmut-os---blue,#2E7CF6);--lineD:var(--_edelmut-os---line-dark,rgba(255,255,255,.12));--lineD2:var(--_edelmut-os---line-dark-soft,rgba(255,255,255,.06));--lineL:var(--_edelmut-os---line-light,rgba(11,12,14,.10));--lineL2:var(--_edelmut-os---line-light-soft,rgba(11,12,14,.06));--sans:"General Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--pad:clamp(20px,4.6vw,72px);--maxw:var(--_edelmut-os---container-max,1340px);--ease:cubic-bezier(.16,1,.3,1);--silverDark:linear-gradient(100deg,#1A1C20 0%,#5E626A 18%,#0F1114 34%,#7C818A 52%,#22252A 70%,#6A6F78 86%,#191B1F 100%);--silverXL:linear-gradient(96deg,#3A3D43 0%,#8D939C 12%,#D8DCE2 23%,#FFFFFF 29%,#EDEFF3 32%,#A7ACB5 44%,#5C6068 58%,#9EA3AC 72%,#E8EAEE 82%,#70747C 92%,#33363B 100%)} ::selection{background:var(--white);color:var(--black)} @media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}} @keyframes roleIn{from{transform:translateY(32%);opacity:0}to{transform:none;opacity:1}} @keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} @keyframes blip{0%{background:rgba(255,255,255,.38);box-shadow:none}2%{background:#fff;box-shadow:0 0 12px 3px rgba(255,255,255,.45)}16%{background:rgba(255,255,255,.38);box-shadow:none}100%{background:rgba(255,255,255,.38);box-shadow:none}} @keyframes blipHit{0%{background:var(--blue);box-shadow:0 0 10px 2px rgba(46,124,246,.45)}2%{background:#A6C8FF;box-shadow:0 0 24px 7px rgba(46,124,246,.85)}20%{background:var(--blue);box-shadow:0 0 10px 2px rgba(46,124,246,.45)}100%{background:var(--blue);box-shadow:0 0 10px 2px rgba(46,124,246,.45)}} @media (prefers-reduced-motion:reduce){.sweep,.sweepline,.dot,.dot.hit{animation:none}} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--blue);cursor:pointer;border:4px solid #fff;box-shadow:0 0 0 1px rgba(46,124,246,.5),0 2px 8px rgba(46,124,246,.35)} input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--blue);cursor:pointer;border:4px solid #fff;box-shadow:0 0 0 1px rgba(46,124,246,.5)} .gauge::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,transparent 30%,rgba(255,255,255,.55) 43%,rgba(255,255,255,.1) 52%,transparent 62%)} .faq summary::-webkit-details-marker{display:none} @keyframes pulse{0%,100%{box-shadow:0 0 20px 4px rgba(46,124,246,.35)}50%{box-shadow:0 0 34px 9px rgba(46,124,246,.65)}} @media (prefers-reduced-motion:reduce){.finale .pulse{animation:none}} .beltwrap::before,.beltwrap::after{content:"";position:absolute;top:0;bottom:0;width:70px;z-index:2;pointer-events:none} .beltwrap::before{left:0;background:linear-gradient(90deg,#F4F6F8,transparent)} .beltwrap::after{right:0;background:linear-gradient(270deg,#F4F6F8,transparent)} @keyframes beltrun{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.belt{animation:none}} @keyframes floatSoft{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} @media (prefers-reduced-motion:reduce){.vcard{animation:none}} .em-light::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(58% 42% at 88% 8%,rgba(46,124,246,.10),transparent 62%),radial-gradient(46% 40% at 4% 88%,rgba(46,124,246,.06),transparent 64%)} .secgrey::before{background:radial-gradient(56% 44% at 10% 6%,rgba(46,124,246,.11),transparent 62%),radial-gradient(50% 42% at 94% 90%,rgba(46,124,246,.07),transparent 64%)} .dark::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(52% 44% at 84% 12%,rgba(46,124,246,.13),transparent 64%)} @media (prefers-reduced-motion:reduce){.float{animation:none}} .f-progbars-i::after{content:"";position:absolute;inset:0;background:var(--blue);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)} .f-progbars-i-done::after{transform:scaleX(1)} .quiz::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,transparent 32%,rgba(255,255,255,.5) 44%,rgba(255,255,255,.08) 53%,transparent 63%)} .tl::before{content:"";position:absolute;left:0;right:0;top:11px;height:1px;background:var(--lineL)} @media (max-width:900px){.tl::before{left:11px;right:auto;top:0;bottom:0;width:1px;height:auto}} .f-vcol-uns::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 50% at 80% 0%,rgba(46,124,246,.22),transparent 62%)} @media (prefers-reduced-motion:reduce){.intro-anim .em-hero .inner > *,.intro-anim .radarwrap{opacity:1;transform:none}html.laedt body{opacity:1}} @media (prefers-reduced-motion:reduce){.sharp{filter:none;opacity:1;transform:none}} @keyframes faqauf{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .osys::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(54% 42% at 12% 2%,rgba(46,124,246,.20),transparent 64%),radial-gradient(48% 40% at 90% 96%,rgba(46,124,246,.12),transparent 66%)} @media (prefers-reduced-motion:reduce){.osscene *{animation:none !important}} .osdraht::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.07)} @keyframes osFluss{0%{background-position:0 -44%}72%,100%{background-position:0 144%}} @keyframes osdreh{to{transform:rotate(360deg)}} @keyframes ospuls{0%{transform:scale(.84);opacity:.85}70%{transform:scale(1.24);opacity:0}100%{opacity:0}} @keyframes osauf{0%,7%{color:#fff;border-color:rgba(46,124,246,.6);background:rgba(46,124,246,.15);box-shadow:0 0 24px -4px rgba(46,124,246,.65)}24%,100%{color:rgba(255,255,255,.48);border-color:rgba(255,255,255,.10);background:rgba(255,255,255,.055);box-shadow:0 0 0 0 rgba(46,124,246,0)}} .f-osstep-i::after{content:"";position:absolute;left:4.5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 1.7px 1.7px 0;transform:rotate(45deg);opacity:0} .osstep,.f-osstep-i,.f-osstep-i::after{animation-duration:9s;animation-timing-function:linear;animation-iteration-count:infinite;animation-delay:var(--d)} .f-osstep-i::after{animation-name:osHaken} @keyframes osZeile{0%,5%{opacity:.28}12%,90%{opacity:1}97%,100%{opacity:.28}} @keyframes osKreis{0%,5%{background:transparent;border-color:rgba(255,255,255,.22)}12%,90%{background:var(--blue);border-color:var(--blue)}97%,100%{background:transparent;border-color:rgba(255,255,255,.22)}} @keyframes osHaken{0%,8%{opacity:0}15%,90%{opacity:1}97%,100%{opacity:0}} @keyframes osZeichnen{0%,5%{stroke-dashoffset:420}82%,90%{stroke-dashoffset:0}97%,100%{stroke-dashoffset:420}} @keyframes osRein{0%,4%{opacity:0;transform:translateY(7px)}14%,92%{opacity:1;transform:none}99%,100%{opacity:0;transform:translateY(7px)}} #em-cc{position:fixed;left:20px;bottom:20px;width:360px;max-width:calc(100vw - 40px);background:#0b0b0e;border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:18px 18px 15px;z-index:2147483000;box-shadow:0 12px 40px rgba(0,0,0,0.45);font-family:inherit} #em-cc[hidden]{display:none} #em-cc .em-h{display:flex;align-items:center;gap:8px;margin-bottom:8px;color:#fff;font-size:14.5px;font-weight:500} #em-cc p{color:rgba(255,255,255,0.6);font-size:13px;line-height:1.6;margin:0 0 14px} #em-cc .em-btns{display:flex;gap:8px} #em-cc button{flex:1;border-radius:10px;padding:10px 14px;font-size:13px;cursor:pointer;font-family:inherit;line-height:1} #em-cc .em-acc{background:#e7e7ea;color:#16161a;border:none;font-weight:500} #em-cc .em-dec{background:transparent;color:rgba(255,255,255,0.85);border:1px solid rgba(255,255,255,0.2)} #em-cc .em-dp{display:inline-block;margin-top:11px;color:rgba(255,255,255,0.45);font-size:12px;text-decoration:underline} @media (max-width:479px){#em-cc{left:10px;right:10px;bottom:10px;width:auto}} *{margin:0;padding:0;box-sizing:border-box} h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,figcaption,blockquote,label,fieldset,legend{margin:0;padding:0;line-height:inherit} .quotes blockquote{font-size:clamp(1.24rem,1.05rem + .8vw,1.72rem);font-weight:500;letter-spacing:-.03em;line-height:1.28;color:var(--ink);max-width:26ch} html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;overflow-x:clip} body{font-family:var(--sans);font-weight:400;background:var(--black);color:var(--white);line-height:1.55;letter-spacing:-.011em;overflow-x:clip} h1,h2,h3,h4,h5,h6{color:inherit} h1 em,h2 em,h3 em{font-style:normal;font-weight:600;color:var(--ink3)} .osys h2 em{color:rgba(255,255,255,.4)} .ossp em{font-style:normal;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase} .ossp.sie em{color:rgba(255,255,255,.34)} .ossp.wir em{color:rgba(46,124,246,.85)} .w-form{margin-bottom:0} .btn,.qopt{line-height:normal} .qnav .qdot{display:block;width:26px;height:3px;padding:0;border:none;border-radius:100px;background:rgba(11,12,14,.14);cursor:pointer;transition:background .3s} .qnav .qdot.on{background:var(--blue)} .f-vcol-uns{background:var(--ink)} .dot.hit{width:8px;height:8px;background:var(--blue);animation-name:blipHit} .qopt .f-btn-ar{color:var(--blue);opacity:0;transition:opacity .2s} .qopt:hover .f-btn-ar{opacity:1} #role.out{transform:translateY(-26%);opacity:0;transition:transform .34s cubic-bezier(.4,0,.7,.2),opacity .26s linear} div.inline-div-0{display:block} div.tb.inline-div-0,div.f-checkfacts-div.inline-div-0,div.f-finale-row.inline-div-0{display:flex} #role{display:inline-block;background:var(--silverXL);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 1px rgba(0,0,0,.5));will-change:transform,opacity} nav.em-nav{position:fixed;top:0;left:0;right:0;padding-top:16px;padding-bottom:16px} nav.em-nav.scr{padding-top:13px;padding-bottom:13px} nav.em-nav::before{content:none} .f-finale-h2-em,.f-sealtxt-p,.f-seal3dtxt-p,.f-resgrid-n{-webkit-background-clip:text;background-clip:text} .secgrey{background:linear-gradient(180deg,#FFF 0%,#F7F8F9 7%,#F7F8F9 93%,#FFF 100%)} .f-resgrid-c{padding:clamp(20px,2.4vw,28px);transition:transform .45s var(--ease),background .35s} .kpi{margin-top:24px;display:inline-flex;border-top:none;padding-top:0} .f-kpi-v{font-size:clamp(1.5rem,1.15rem + 1.1vw,2rem)} .f-kpi-k{font-size:.78rem;letter-spacing:.1em} .f-stats-div{border-bottom:none;padding:18px 22px} .faq{border-top:none} .f-faq-details{border-bottom:none} .stagebox{aspect-ratio:16/9} .f-finale-arcs-i:nth-child(1){width:38%} .f-finale-arcs-i:nth-child(2){width:62%;border-color:rgba(255,255,255,.04)} .f-finale-arcs-i:nth-child(3){width:88%;border-color:rgba(255,255,255,.03)} .f-naht-i:nth-child(2){width:min(1000px,110vw);border-color:rgba(46,124,246,.07)} .osstep:nth-child(2){--d:1.1s} .osstep:nth-child(3){--d:2.2s} .osstep:nth-child(4){--d:3.3s} .f-ossp-wir-b:nth-of-type(2){--d:.5s} .f-ossp-wir-b:nth-of-type(3){--d:1s} .f-ossp-wir-b:nth-of-type(4){--d:1.5s} .f-ossp-wir-b:nth-of-type(5){--d:2s} .f-ossp-wir-b:nth-of-type(6){--d:2.5s} .stepblk:first-child{border-top:none} /* 15.08.: Webflow unterstreicht Links im Fliesstext; der Check-Knopf ist ein . */ .ckcta .ckn{text-decoration:none} @media screen and (max-width:1080px){.radarwrap{position:relative;right:auto;top:auto;transform:none;width:min(86vw,460px)}} @media screen and (max-width:991px){.f-hitlbl{transform:translate(calc(-100% - 14px),-50%)}.f-hitlbl-second{display:none}} /* --- Art Direction --- */ /* ========================================================================= Art-Direction-Übernahme 18.08.2026 - alle Eingriffe an einer Stelle. Entfernt man diesen Block plus das Skript darunter, ist die Seite wieder der Bestand. Das Markup daneben ist so gebaut, dass es ohne den Block trotzdem gültig bleibt. ========================================================================= */ /* ---- S5 Zweiton von 11 auf 3 ------------------------------------------- Der Kniff bleibt genau dort, wo er traegt: Hero, Halt, Finale. Alles andere steht einfarbig. Webflow haengt an jedes eine eigene Klasse (.f-prob-h2-em), die `h2 em` immer schlaegt - deshalb !important statt hoeherer Spezifitaet. Die dunkle OS-Sektion hat ihren eigenen Wert und braucht Weiss, nicht die Tinte der hellen Sektionen. */ h1 em,h2 em,h3 em{color:inherit!important} .osys h2 em{color:#fff!important} .halt h2 em,.finale h2 em{color:#8B8F97!important} /* ---- S6 Trustband: vier Icon-Kästen werden eine Haarlinienzeile -------- Dieselbe Behandlung, die der Fuß schon hat. Inhalt unverändert. */ .trustband .tbgrid{ display:flex!important; flex-wrap:wrap; align-items:center; gap:0; border-top:1px solid rgba(255,255,255,.10); border-bottom:1px solid rgba(255,255,255,.10); } .trustband .tb{ background:none!important; border:0!important; box-shadow:none!important; border-radius:0!important; padding:18px 26px!important; display:flex!important; align-items:baseline; gap:9px; flex:0 1 auto; position:relative; } .trustband .tb + .tb::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:15px; background:rgba(255,255,255,.14); } .trustband .tb .ic{display:none!important} .trustband .tb > *:not(.ic){display:inline!important} .trustband .tb br{display:none} /* ---- C Leistungen: Icon im abgerundeten Quadrat raus, Nummer trägt ----- */ .lcard .ic{display:none!important} /* ---- S7 Radar: HUD raus ------------------------------------------------ Die eine Stelle, an der das Radar zur Software wurde. */ .rmeta{display:none!important} /* ---- S7 Reichweiten-Etiketten von der Achse weg ------------------------ Auf dem Ring bei rund 40 Grad statt oben auf der Senkrechten, wo sie mit der Achse kollidierten. 20 Grad statt 40: bei 40 Grad stiessen sie links auf Bruchsal und rechts auf Pforzheim. */ .radarwrap .rlabel:nth-of-type(1){left:58.9%!important; top:25.7%!important} .radarwrap .rlabel:nth-of-type(2){left:63.0%!important; top:14.4%!important} /* ---- S2 Die Punkte sind Menschen in Anstellung ------------------------- Hohl statt gefüllt, und vor allem: ohne Puls. Der Sweep zieht darüber und es passiert nichts - genau das ist die Aussage. */ .radarwrap .dot{ background:none!important; border:1px solid rgba(255,255,255,.30); width:7px!important; height:7px!important; animation:none!important; transition:background-color .9s ease, border-color .9s ease; } .radarwrap .dot.hit{ width:9px!important; height:9px!important; border-color:rgba(46,124,246,.45); animation:none!important; } /* Ein Punkt bekommt einen Grund und füllt sich - von selbst, nicht durch den Sweep. */ .radarwrap .dot.hit.wechselt{ background:#2E7CF6!important; border-color:#2E7CF6; box-shadow:0 0 0 5px rgba(46,124,246,.14), 0 0 18px 2px rgba(46,124,246,.45); } /* Die Linie zur Mitte schreibt sich erst, wenn der Grund da ist. */ .radarwrap .dot.hit::after{ content:""; position:absolute; left:50%; top:50%; height:1px; width:var(--lang,0%); transform-origin:0 50%; transform:rotate(var(--dreh,0deg)) scaleX(0); background:linear-gradient(90deg,rgba(46,124,246,.55),rgba(46,124,246,.05)); transition:transform .9s cubic-bezier(.16,1,.3,1); } .radarwrap .dot.hit.wechselt::after{transform:rotate(var(--dreh,0deg)) scaleX(1)} .radarwrap .dot.hit:nth-of-type(1){--lang:189%; --dreh:149.5deg} .radarwrap .dot.hit:nth-of-type(2){--lang:194%; --dreh:-45deg} /* ---- S7/S8 Das Etikett trägt den Wechselgrund ------------------------ Die Entfernung war die uninteressanteste Angabe am Treffer. Sie bleibt als kleiner Zusatz stehen, führt aber nicht mehr. */ .radarwrap .hitlbl{ -webkit-backdrop-filter:none!important; backdrop-filter:none!important; background:rgba(8,10,14,.86)!important; border-color:rgba(46,124,246,.32)!important; padding:7px 12px!important; line-height:1.32; white-space:nowrap; } /* Das Etikett hing rechts am Punkt und lief aus dem Bild - der Punkt sitzt bei 66 % eines Radars, das ohnehin am rechten Rand klebt. Jetzt hängt es links am Punkt, also nach innen ins Feld. */ .radarwrap .hitlbl{transform:translate(calc(-100% - 15px),-50%)!important} .radarwrap .hitlbl .grund{ display:block; font-size:.76rem; font-weight:600; letter-spacing:-.01em; color:#fff; } .radarwrap .hitlbl .zusatz{ display:block; margin-top:2px; font-size:.62rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.42); } .radarwrap .hitlbl s{text-decoration:none} /* ---- D3 Der Halt ------------------------------------------------------ Eine schwarze Vollhöhe, auf der nichts steht außer einem Satz. Kein Knopf, keine Grafik, keine Sektionsnummer. */ .halt{ background:#050505; color:#fff; min-height:82svh; display:flex; align-items:center; padding:120px 0; position:relative; } .halt h2{ font-size:clamp(2.1rem,1rem + 4.2vw,4.15rem); font-weight:600; letter-spacing:-.05em; line-height:1.02; max-width:19ch; margin:0; color:#fff; } .halt h2 em{font-style:normal} /* Nur "schon" setzt eine Spur später ein - so knapp, dass man es eher bemerkt als sieht. */ .halt .spaet{opacity:0; transition:opacity 1.5s ease .75s} .halt.in .spaet{opacity:1} @media (prefers-reduced-motion:reduce){.halt .spaet{opacity:1; transition:none}} /* ---- D2 Mobil-Hero: eigene Komposition, keine Verkleinerung ----------- Der Mittelpunkt sitzt an der Unterkante, das Feld öffnet sich nach oben HINTER der Überschrift. Radar, Headline und Knopf stehen zusammen über der Falz - statt das Radar unter den Knopf zu hängen (dort saß es bei 846 px in einem 1208 px hohen Hero). */ @media screen and (max-width:900px){ .em-hero{position:relative; min-height:100svh; padding:104px 0 44px!important} .radarwrap{ position:absolute!important; left:50%!important; right:auto!important; bottom:-26%!important; top:auto!important; transform:translateX(-50%)!important; width:min(132vw,580px)!important; opacity:1; z-index:0!important; } /* Auf 375 px sind Haarlinien fast weg - Ringe und Punkte brauchen mehr Kontrast als am Schreibtisch. */ .radarwrap .ring{border-color:rgba(255,255,255,.12)!important} .radarwrap .dot{border-color:rgba(255,255,255,.46)!important} .radarwrap .dot.hit.wechselt{box-shadow:0 0 0 6px rgba(46,124,246,.16),0 0 22px 3px rgba(46,124,246,.5)} .em-hero .inner{position:relative; z-index:2} /* Der Kartenchip ist auf 375 px eine Fremdkörper - der Grund steht als Textzeile unter der Headline. */ .radarwrap .hitlbl,.radarwrap .place,.radarwrap .rlabel, .radarwrap .homelbl{display:none!important} .radarwrap .dot{opacity:.85} .hero-grund{ display:block; margin-top:16px; font-size:.82rem; font-weight:600; letter-spacing:.03em; color:rgba(255,255,255,.62); } .hero-grund b{color:#4E93FF; font-weight:600} /* Damit die Schrift nicht auf dem Feld schwimmt - aber nur so viel, dass das Feld unten frei bleibt. Der erste Versuch deckte es fast ganz zu. */ .em-hero::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,#050505 0%,rgba(5,5,5,.92) 34%,rgba(5,5,5,.55) 58%,rgba(5,5,5,0) 82%); } .halt{min-height:74svh; padding:96px 0} } @media screen and (min-width:901px){.hero-grund{display:none}} /* --- Copy-Deck: neue Kleinteile --- */ .em-cta .side.unterknopf{display:block;width:100%;margin-top:14px;order:2} .em-cta{flex-wrap:wrap} .bspzusatz{margin-top:10px;color:var(--ink3);font-size:.92rem;max-width:52ch} .standortzeile{margin-top:18px;padding-top:16px;border-top:1px solid var(--lineL); color:var(--ink3);font-size:.94rem;max-width:60ch} .stimmefirma{margin-top:14px;font-weight:600;letter-spacing:-.02em;color:var(--ink)} .auftragfolge{margin-top:34px;max-width:56ch;color:var(--ink2)} .auftragmicro{margin-top:10px;color:var(--ink3);font-size:.92rem} .auftragcta{margin-top:26px} #checkergebnis{margin-top:44px} #besetzungsauftrag .vlist .m{opacity:.55} /* --- Wortmarke: Lockup als Bild, Umschaltung fuer den hellen Nav-Zustand --- */ .emlogo{height:36px;width:auto;display:block} .emlogo-dunkel{display:none} nav.em-nav.em-light .emlogo-hell,.em-nav.em-light .emlogo-hell{display:none} nav.em-nav.em-light .emlogo-dunkel,.em-nav.em-light .emlogo-dunkel{display:block} .f-footer .emlogo-dunkel{display:none!important} @media (max-width:900px){.emlogo{height:30px}} /* --- Copy-Revision 20.08.: Bullets in den Modulen, gestrichene Zeilen --- .d2weg nimmt Saetze raus, die laut Fassung an dieser Stelle nicht mehr stehen sollen (Einleitung im Ablauf, Maschinenraum-Satz, Absage im Check). display:none statt Loeschen - so bleibt der Rueckweg eine Zeile. */ .d2weg{display:none!important} .d2frist{white-space:nowrap} /* --- Weg 3 muss die DUNKLE Karte in einer Reihe heller Karten sein --------- Gemessen 20.08.: die Spalte stand auf rgb(244,246,248) - hell - waehrend ihre Ueberschrift weiss blieb. Die Regel `.f-vcol-uns{background:var(--ink)}` hat dieselbe Spezifitaet wie die Basisklasse `.vcol` und verliert, weil `.vcol` spaeter im Blatt steht. Der Flachklopfer hat hier eine Stufe gekostet. Deshalb zwei Klassen im Selektor statt einer. */ .vcol.f-vcol-uns, .vcol.uns, #unterschied .f-vcol-uns{ background:var(--ink)!important; border-color:rgba(255,255,255,.14)!important} .vcol.f-vcol-uns h4, .vcol.uns h4, .vcol.f-vcol-uns .f-vcol-h4, .vcol.uns .f-vcol-h4{color:#fff!important} .vcol.f-vcol-uns .f-vlist-t, .vcol.uns .f-vlist-t, .vcol.f-vcol-uns li, .vcol.uns li{color:rgba(255,255,255,.78)!important} .vcol.f-vcol-uns .kopf, .vcol.uns .kopf, .vcol.f-vcol-uns .f-vcol-kopf, .vcol.uns .f-vcol-kopf{color:rgba(255,255,255,.5)!important} /* --- Kundenstimmen: der Firmenname stand zweimal -------------------------- Die Fassung vom 19.08. haengt eine Zeile .stimmefirma an, direkt darueber steht derselbe Name schon in der Bildunterschrift. Die Zusatzzeile faellt weg. */ .stimmefirma{display:none!important} /* ========================================================================= RUNDE 3 der Bildabnahme (Murat 20.08. abends) - acht Punkte ========================================================================= */ /* 8 · Fliesstext war zu hell. #54575E auf hellem Grund ist grenzwertig, auf dem Handy bei Sonne unlesbar. Eine Variable, wirkt auf die ganze Seite. */ :root{--ink2:#3A3E45!important} /* 2 · Bullets standen nicht hervor: gleiche Farbe wie Fliesstext, Haken grau. Jetzt dunkler, etwas fetter, und der Haken traegt Blau. */ .cl .f-cl-div,.f-cl-div{color:#2C3037!important;font-weight:500} .f-cl-svg,.cl svg{color:var(--blue)!important;opacity:1!important} .cl .f-cl-div b,.f-cl-div b{color:#0B0C0E!important} /* 1 · Mobil: der Kopfbereich hatte zu viel Luft nach oben. */ @media (max-width:900px){ .em-hero{padding-top:66px!important} } /* 7 · Modulstrecke auf Mobil: die Videobuehne schob sich in den Text und den Fortschrittsbalken. ERSTER VERSUCH WAR FALSCH (Murat 20.08.: "das gradient muss hinter dem Video sein und nicht im Video"): ein weisser Verlauf lag als ::after IM Kasten und hat die unteren 74 px des Videos ueberblendet. Das versteckt die Ueberlappung, statt sie zu loesen - und das Video sieht aus, als waere es kaputt. Jetzt traegt der Abstand die Trennung, im Video liegt nichts mehr drueber. Nachgemessen auf 390 px: Buehne endet bei 6076, Balken beginnt bei 6132 - 56 px Luft, keine Ueberlappung. */ @media (max-width:900px){ /* Die Buehne steht jetzt IM aktiven Modul (siehe buehneMobil() im JS), also nicht mehr klebend darueber. Der leere Wrapper darf keinen Platz mehr nehmen, sonst bleibt ein Loch, wo das Video vorher hing. */ .ad-buehnenwrap{position:static!important;min-height:0!important} .stagebox{position:relative!important;margin:20px 0 24px!important; aspect-ratio:16/10!important} .progbars,.f-progbars{margin-top:22px} .stepblk{padding-bottom:12px} } /* 5 · Der Knopf faellt jetzt auf: ein Lichtstreifen laeuft beim Zeigen darueber. Nur auf Geraeten mit echtem Zeiger - auf dem Handy waere er sinnlos. */ @media (hover:hover){ .btn{position:relative;overflow:hidden} .btn::after{content:"";position:absolute;top:0;bottom:0;left:-120%;width:60%; pointer-events:none;transform:skewX(-18deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); transition:left .55s cubic-bezier(.16,1,.3,1)} .btn:hover::after{left:130%} nav.em-nav .btn:hover,.em-cta .btn:hover{transform:translateY(-2px)} .dark .btn::after,.finale .btn::after{ background:linear-gradient(90deg,transparent,rgba(11,12,14,.28),transparent)} } /* 6 · Der Claim traegt jetzt denselben Silberverlauf wie das Finale. */ #leistungszusage .f-gar-h2{ background:var(--silverXL);-webkit-background-clip:text;background-clip:text; color:transparent!important;filter:drop-shadow(0 2px 1px rgba(0,0,0,.45))} /* 3 · Tacho: die Zahl zaehlt hoch. Der Bogen dazu ist wieder raus - die Karte hat bereits eine eigene Grafik, meine lag darueber. */ /* 9 · Kundenstimmen: der Ueberblendmoment war unsauber ------------------ Gemessen: waehrend des Wechsels sind ZWEI Zitate gleichzeitig sichtbar (Deckkraft .90 und .10) - normal fuer eine Blende. Unsauber wurde es durch `.q:not(.on){transform:translateY(12px)}`: das eingehende Zitat kam 12 px versetzt herein, dadurch standen die Firmennamen 25 px auseinander und es sah nach Ueberlappung aus. Ohne Versatz liegen beide deckungsgleich, die Blende wird ruhig. */ .quotes .q:not(.on),.f-quotes-q:not(.f-quotes-q-on){transform:none!important} .quotes .q,.f-quotes-q{transition:opacity .45s ease!important} /* Der Versatz war nur die halbe Ursache. Die Zitate sind unterschiedlich lang, dadurch sassen die Bildunterschriften 35 px auseinander - waehrend der Blende sieht man zwei Namen leicht versetzt, und genau das liest sich als Ueberlappung. Jetzt haengt die Unterschrift am unteren Rand des Zitatblocks: alle drei Namen stehen auf derselben Linie, egal wie lang das Zitat ist. */ .q-stapel{display:grid!important} .q-stapel > .q,.q-stapel > .f-quotes-q{grid-area:1/1!important} .quotes .q,.f-quotes-q{display:flex!important;flex-direction:column;height:100%} .quotes .q blockquote,.f-quotes-q blockquote{flex:0 0 auto} .f-quotes-figcaption{margin-top:auto!important;padding-top:18px} /* --- Nav-Knopf rund, wie die Nav-Pille (Murat 20.08.) ------------------- Die Schale hat border-radius:100px, der Knopf stand auf 3px. */ nav.em-nav .btn,.em-nav .btn{border-radius:100px!important} /* --- Logoband: die Haarlinie ueber den Logos faellt weg ----------------- Sie sass als border-bottom an .f-partners-lead, dem Container des "Maschinenraum"-Satzes. Der Satz ist raus, die Linie blieb stehen. */ .f-partners-lead,.partners .lead{border-bottom:0!important} /* Das Woertchen "Auswahl" ueber den Logos faellt weg - die Logos sprechen fuer sich, und der Uebergang bleibt ruhiger. */ .partners .microd,.partners .microD,.microd.microD{display:none!important} /* --- Modul 02, Kanalfeld: weg von der Konsolen-Optik -------------------- Murat 20.08.: "die Box mit dem Punkt davor sieht sehr stark nach Claude Code aus". Vorher: dunkle Badge mit Radius, Name, Mittelpunkt, Status "aktiv" - das liest sich wie ein Terminal. Jetzt nur noch der Name als ruhige Textmarke; aktiv wird ueber Farbe und Helligkeit gezeigt, nicht ueber ein Statuswort. */ .kf-l{background:none!important;border:0!important;border-radius:0!important; padding:0!important;box-shadow:none!important; font-size:.72rem!important;font-weight:600;letter-spacing:.04em; color:rgba(255,255,255,.42)!important;white-space:nowrap} .kf-l b{color:inherit!important;font-weight:600} .kf-l s{display:none!important} /* Ohne "aktiv" bleibt sonst ein hängender Mittelpunkt stehen: "Meta ·". */ .kf-l .kf-trenn{display:none!important} .kf-l.an{color:#8FBAFF!important} .kf-l.an b{color:#fff!important} /* --- Gebietsexklusivitaet: Kartenausschnitt ---------------------------- Ersetzt die Punktwolke. Blau, dunkel, mit Strassenraster und zwei Umkreisradien. Die Sperre kommt ohne Durchstreichung aus - Murat hat den Strich ausdruecklich bemaengelt. */ .efeld .ef-karte{position:relative;overflow:hidden} /* background:transparent ist hier NICHT kosmetisch: eine Bestandsregel gibt jedem svg in dieser Karte einen blauen Grund - das SVG lag als vollflaechig blaue Platte ueber der Karte, und die ganze Grafik war ein blauer Block. Dreimal daran vorbeigebaut, bis der gemessene Wert es zeigte. */ .ef-map{position:absolute;inset:0;width:100%;height:100%;z-index:0; background:transparent!important} .ef-blk{fill:rgba(140,180,255,.045)} .ef-str{stroke:rgba(140,180,255,.12);stroke-width:1;vector-effect:non-scaling-stroke} .ef-str.ef-diag{stroke:rgba(140,180,255,.08)} .ef-fluss{fill:none;stroke:rgba(46,124,246,.22);stroke-width:7;stroke-linecap:round} .ef-r{fill:rgba(46,124,246,.05);stroke:rgba(120,170,255,.28);stroke-width:1; vector-effect:non-scaling-stroke} .ef-r1{fill:rgba(46,124,246,.10)} .ef-sperrkreis{fill:none;stroke:rgba(46,124,246,.9);stroke-width:1.6;stroke-linecap:round; stroke-dasharray:var(--u,654);stroke-dashoffset:var(--u,654); filter:drop-shadow(0 0 5px rgba(46,124,246,.6)); animation:efZu 2.4s cubic-bezier(.16,1,.3,1) .4s forwards} .ef-kand{fill:rgba(255,255,255,.55);animation:efAtem 5.5s ease-in-out infinite; animation-delay:calc(var(--i,0) * .31s)} .ef-hier{fill:#2E7CF6;filter:drop-shadow(0 0 10px rgba(46,124,246,.9))} /* Der zweite Betrieb: gedaempft und mit Schloss - ohne Strich durch die Schrift. */ .efeld s,.efeld .ef-zweit{text-decoration:none!important} .efeld .ef-zweit::after{display:none!important} /* "zweiter Betrieb" steckt in einem - das streicht der Browser von Haus aus durch. Genau der Strich, den Murat bemaengelt hat; mein eigener kam noch dazu. Beide raus. Das Schloss steht als echtes Zeichen da: "F512" hat CSS als ungueltige Escape-Folge gelesen und "F512" auf die Seite geschrieben. */ .efeld s,.efeld .ef-zweit{text-decoration:none!important} .efeld .ef-zweit::after{display:none!important} /* display:inline-block ist der Trick, ohne den es nicht geht: die Durchstreichung kommt von einem -VORFAHREN, und die laesst sich am Kind nicht abschalten - sie wird durchgereicht. Erst ein eigener Formatierungskontext schneidet sie ab. */ .efeld .ef-gesperrt{color:var(--ink3)!important;font-weight:600; display:inline-block;text-decoration:none!important} .efeld .ef-gesperrt::before{content:"🔒";margin-right:6px;font-size:.85em;opacity:.75} /* --- Kundenstimmen: Bildunterschrift raeumen (Murat 20.08.: "alles ueberlappt") Drei Ursachen, gemessen: (1) der Avatar ist ein LEERER 46-px-Kreis ohne Bild, (2) Firma und Rolle liegen als und im selben Span nebeneinander statt untereinander, (3) wird vom Browser durchgestrichen - das ist der Strich vor dem Namen. steckt hier nur, weil der Webflow-Import Inline-Elemente verschluckt und als einziges ueberlebt (siehe UEBERGABE_FINAL). */ .f-quotes-av:empty,.quotes .av:empty{display:none!important} .f-quotes-figcaption{align-items:baseline!important} .f-quotes-figcaption > span:not(.av){display:flex;flex-direction:column;gap:2px} .f-quotes-figcaption s,.f-quotes-figcaption-s{text-decoration:none!important; color:var(--ink3)!important;font-size:.9rem} /* ========================================================================= GEBIETSEXKLUSIVITAET - neue Grafik (Murat 20.08.: "zu lasch") Vorher: blasse weisse Karte, hellgraue Ringe, ein blauer Chip. Auf hellem Grund verschwand die ganze Aussage. Jetzt eine dunkle Karte - dieselbe Sprache wie der Hero-Radar, aber enger gefasst: EIN Gebiet, EIN Betrieb. Bewegung nur hier, und nur solange die Sektion im Bild ist (.ruht haelt sie sonst an - deshalb keine Dauerlast, siehe Ruckel-Analyse vom 15.08.). ========================================================================= */ .efeld .ef-karte{ background:radial-gradient(120% 100% at 50% 45%, #12161F 0%, #0B0C0E 70%)!important; border:1px solid rgba(255,255,255,.10)!important; border-radius:4px!important; overflow:hidden; position:relative; isolation:isolate; } .efeld .ef-kopf{color:rgba(11,12,14,.55)!important; letter-spacing:.15em} .efeld .ef-ring{ border-color:rgba(120,170,255,.20)!important; box-shadow:0 0 40px -12px rgba(46,124,246,.55) inset; } .efeld .ef-ring.r1{border-color:rgba(120,170,255,.30)!important} /* Die Punkte sind Fachkraefte im Umkreis: hohl, ruhig, und sie atmen leicht. */ .efeld .ef-p{ background:rgba(255,255,255,.34)!important; width:5px!important; height:5px!important; box-shadow:0 0 10px 1px rgba(120,170,255,.35); animation:efAtem 5.5s ease-in-out infinite; animation-delay:calc(var(--i,0) * .27s); } @keyframes efAtem{0%,100%{opacity:.34;transform:scale(1)}50%{opacity:.95;transform:scale(1.35)}} /* Der Sperrring: zeichnet sich einmal und bleibt stehen. Das ist die Aussage - das Gebiet schliesst sich, sobald ein Betrieb drin ist. */ @keyframes efZu{to{stroke-dashoffset:0}} /* "Ihr Betrieb" - der einzige gefuellte Punkt, mit Kranz. */ .efeld .ef-m,.efeld [class*="ef-m"]{ background:#2E7CF6!important; color:#fff!important; box-shadow:0 0 0 6px rgba(46,124,246,.16), 0 0 26px 4px rgba(46,124,246,.45)!important; border:0!important; z-index:3; } .efeld .ef-m b,.efeld [class*="ef-m"] b{color:#fff!important} .efeld .ef-m s,.efeld [class*="ef-m"] s{color:rgba(255,255,255,.62)!important;text-decoration:none} .efeld .ef-lbl{color:rgba(255,255,255,.42)!important; letter-spacing:.12em} /* Der zweite Betrieb bleibt draussen: ausgegraut, mit Schranke. */ .efeld .ef-fuss{color:var(--ink3)!important} /* ========================================================================= BESETZUNGS-CHECK, die drei Urteile (Murat 20.08.: "zu nah dran, zu langweilig") Vorher: drei graue Rundkarten mit 14 px Abstand, alle gleich gewichtet. Jetzt Protokollzeilen statt Kaesten: Signalkante links, Urteil als Wort, klare Trennung - und Luft nach oben. Kein Ampel-Kitsch, die Farbe traegt nur die Kante. ========================================================================= */ #checkergebnis{margin-top:88px!important; gap:0!important; border-top:1px solid var(--lineL); border-bottom:1px solid var(--lineL)} #checkergebnis .lcard{ background:transparent!important; border-radius:0!important; padding:30px 30px 34px 26px!important; position:relative; border-left:1px solid var(--lineL2)!important; } #checkergebnis .lcard:first-child{border-left:0!important} #checkergebnis .lcard::before{ content:"";position:absolute;left:0;top:30px;bottom:34px;width:2px; background:var(--sig,var(--lineL)); } #checkergebnis .lcard:nth-child(1){--sig:#2E7CF6} #checkergebnis .lcard:nth-child(2){--sig:#B8862B} #checkergebnis .lcard:nth-child(3){--sig:rgba(11,12,14,.28)} #checkergebnis .lcard .ckurteil{ display:block;font-family:var(--sans);font-size:.68rem;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--sig);margin-bottom:12px} #checkergebnis .lcard h4{margin-bottom:10px!important} #checkergebnis .lcard p{color:var(--ink2)} @media (max-width:900px){ #checkergebnis{margin-top:56px!important} #checkergebnis .lcard{border-left:0!important;border-top:1px solid var(--lineL2)!important; padding-left:22px!important} #checkergebnis .lcard:first-child{border-top:0!important} } /* ========================================================================= ABNAHME 20.08.: kleine Beschriftungen lesbar machen Gemessen mit audit.py ueber fuenf Breiten: 18 Stellen unter WCAG AA, fast alle 10-11 px gross mit 1,9-3,0:1. Angehoben wird nur, was Aussage traegt - nicht, was bewusst gedaempft ist. Die Zahlen dahinter: auf fast schwarzem Grund braucht weisser Text Deckkraft >= .55 fuer 4,5:1, auf Weiss braucht schwarzer Text >= .60. ========================================================================= */ /* Radar im Hero: Ortsnamen und Radien standen auf 9,6-10,2 px und 2,0:1 */ .radar .place,.place{color:rgba(255,255,255,.68)!important;font-size:11px!important} .radar .rlabel,.rlabel{color:rgba(255,255,255,.68)!important;font-size:11px!important} .homelbl{font-size:11px!important} /* Branchenband: die nicht aktiven Woerter waren bei 2,16:1 kaum zu lesen. Der Unterschied zum aktiven Wort bleibt - der ist weiss und fett. */ .branches b,.f-branches-b{color:rgba(255,255,255,.62)!important} /* Pruefstand: "ABGESAGT" ist die Aussage der Sektion, nicht Dekor. */ .pe,.f-pe{color:rgba(255,255,255,.7)!important;font-size:11px!important} /* Fuss-Spaltenkoepfe */ .fgrid .h,.f-fgrid-em-col-h{color:rgba(255,255,255,.72)!important} /* Check-Urteil "NEIN" stand auf 1,92:1 - der schlechteste Wert der Seite. */ #checkergebnis .lcard:nth-child(3){--sig:rgba(11,12,14,.62)} /* Exklusivitaets-Karte */ .efeld .ef-m s,.efeld [class*="ef-m"] s{color:rgba(255,255,255,.78)!important} .efeld .ef-lbl{color:rgba(255,255,255,.66)!important;font-size:11px!important} /* Buehnen-Label und die Zeile unter dem Kostenbetrag */ .lbl.f-stagebox-lbl,.stagebox .lbl{font-size:11px!important} .f-s3-val-span{font-size:11px!important} /* --- Tippziele auf Mobil ------------------------------------------------ Die Zitat-Punkte messen 26x3 px - mit dem Daumen praktisch nicht zu treffen. Die SICHTBARE Marke bleibt gleich, nur die Flaeche waechst: background-clip:content-box laesst den Grund im Inhaltskasten stehen, das Polster bleibt durchsichtig. Der Abstand kommt jetzt aus dem Polster, deshalb faellt die Luecke im Gitter weg. */ .qdot{padding:15px 5px!important; background-clip:content-box!important; box-sizing:content-box!important; cursor:pointer} .qnav{gap:0!important; margin-left:-5px} /* Ohne href ist der Punkt nur noch per tabindex erreichbar - dann muss der Fokus auch sichtbar sein, sonst tastet man blind. */ .qdot:focus-visible{outline:2px solid var(--blue,#2E7CF6)!important; outline-offset:2px} /* ========================================================================= GEBIETSSCHUTZ: nur noch die Grafik Murat 20.08.: die Zeile ueber der Karte ("EIN GEWERK · EIN EINZUGSGEBIET") und der ganze Fuss darunter (Schloss-Chip "zweiter Betrieb / bleibt draussen" plus "Sonst bieten wir gegen uns selbst ...") fallen weg - "es soll nur die Grafik sein". Beides sagt ohnehin nur, was links im Text schon steht; die Karte kann das allein. Gemessen hat .efeld genau drei Kinder: Kopfzeile, Karte, Fusszeile. Deshalb greift nth-child hier sicher - display:none aendert die Zaehlung nicht, die Karte bleibt Kind 2. ========================================================================= */ .efeld .ef-kopf{display:none!important} .efeld > *:nth-child(3){display:none!important} .efeld .ef-fuss,.efeld .ef-gesperrt{display:none!important} /* ========================================================================= KANALBAND (Modul 02): der blaue Punkt vor jedem Chip faellt weg Murat 20.08.: "sieht sehr stark nach Claude Code Design aus" - und auf die erste Fassung mit schwarzer Fuellung: "nicht schwarz sondern vielleicht dieses Blau was wir haben". Schwarz war die staerkste Flaeche der Sektion. Die Auswahl traegt die Markierung jetzt selbst (siehe LAEUFT im JS), der Rest ist Vorrat - das deckt sich mit dem Satz darunter. ========================================================================= */ .belt .ch i,.f-belt-ch-i{display:none!important} .f-belt-ch,.belt .ch{background:#fff!important;color:#9AA0A9!important; box-shadow:none!important;border-color:rgba(11,12,14,.07)!important; font-weight:500!important} .belt .ch.ad-gewaehlt,.f-belt-ch.ad-gewaehlt{ background:var(--blue,#2E7CF6)!important;color:#fff!important; border-color:var(--blue,#2E7CF6)!important;font-weight:600!important; box-shadow:0 2px 12px rgba(46,124,246,.28)!important} /* ========================================================================= KUNDENSTIMMEN: der Fortschrittsbalken lag auf dem Namen Murat hat das zweimal gemeldet, und beim ersten Mal habe ich es falsch erklaert ("das ist nur der Slider-Uebergang"). Gemessen auf 390 px ist es ein handfester Layoutfehler: .quotes ist 290 px hoch (min-height), die drei Zitate liegen als position:absolute mit inset:0 darin, die Bildunterschrift haengt per margin-top:auto am UNTEREN Rand - und genau dort sitzt .qnav mit bottom:0. Bildunterschrift 15480-15547, Balken 15543-15546: er liegt drin. Padding hilft nicht (inset:0 misst die Padding-Box). Deshalb wandert der Balken unter den Kasten und die Sektion bekommt den Platz dafuer. ZWEITER ANLAUF: den Balken nur nach unten zu schieben hat nicht gereicht. Der eigentliche Grund ist, dass die Zitate position:absolute sind - sie tragen NICHTS zur Hoehe bei, der Kasten bleibt auf seinen 290 px, und das laengste Zitat (MyHome) laeuft unten heraus: Bildunterschrift bis 10237, Balken 10233-10236. Deshalb stehen die drei jetzt als relative Elemente in derselben Gitterzelle: die Zeile nimmt die Hoehe des laengsten, alle drei werden gestreckt, die Unterschrift sitzt bei jedem am selben unteren Rand - und darunter ist Platz fuer den Balken. */ .q-stapel{min-height:0!important} .q-stapel > .q,.q-stapel > .f-quotes-q{ position:relative!important; grid-area:1/1!important; inset:auto!important} #quotes,.quotes{margin-bottom:38px!important} #quotes .qnav,.quotes .qnav{bottom:-28px!important} /* ========================================================================= FINALE: der Punkt in der Mitte mit der Linie Murat 20.08.: "sieht sehr falsch aus". Es sind zwei Elemente: .f-finale-pulse ist ein 10-px-Punkt mit Leuchtkranz, genau auf 50%/50% der Sektion - also direkt unter der Ueberschrift. Die "Linie" daneben ist der Scheitel eines 1100-px-Kreises aus .f-finale-arcs: so weit aussen sieht ein Kreisbogen wie eine waagerechte Linie aus, die quer durch den Satz laeuft. Der Punkt faellt weg. Die Kreise bleiben als leiser Grund, wandern aber so weit nach unten, dass kein Scheitel mehr durch den Text schneidet. ========================================================================= */ .finale .pulse,.f-finale-pulse{display:none!important} .finale .arcs,.f-finale-arcs{top:150%!important; width:min(2000px,220vw)!important} /* ========================================================================= UEBERSCHRIFTEN ZWEITONIG (Murat 20.08.: "nur schwarz ist langweilig, nur weiss genauso") Gemessen: auf den hellen Sektionen stehen h2 UND das darin auf demselben rgb(11,12,14) - der zweite Satz hebt sich nicht ab, obwohl er gestalterisch dafuer gedacht ist. Jetzt traegt der erste Teil das Schwarz, der zweite das Grau; auf dunklem Grund Weiss und ein gedaempftes Weiss. ========================================================================= */ h2 em,h2 .f-prob-h2-em,h2 .f-sysintro-h2-em{color:#6E737C!important} .em-light h2 em{color:#6E737C!important} /* Dunkle Sektionen: dasselbe Prinzip, nur umgedreht. */ .dark h2 em,.finale h2 em,section:not(.em-light) h2 em{ color:rgba(255,255,255,.56)!important} /* Der Silberverlauf im Finale startet bei rgb(58,61,67) - auf schwarzem Grund ist die erste Haelfte des Satzes damit praktisch unsichtbar (im Bild gut zu sehen). Er faellt hier weg; der Verlauf bleibt dem Garantie-Claim vorbehalten, den Murat ausdruecklich so wollte. */ .finale h2 em,.f-finale-h2-em{ background:none!important; -webkit-text-fill-color:currentColor!important; -webkit-background-clip:border-box!important; background-clip:border-box!important; filter:none!important} /* --- Heller Nav-Zustand: REDUNDANT, war ein Fehlalarm (19.08. nachgemessen) --- Richtig ist nur die halbe Diagnose: .f-em-nav-mid und .f-em-nav-tel setzen die Farbe DIREKT auf #ffffff9e, geerbtes Dunkel kommt nie an. Den hellen Zustand traegt aber os_zustaende-1.0.0.js (zweites der elf Seitenskripte) mit `.em-nav.em-light .f-em-nav-mid{color:var(--ink2)}` und Geschwistern - Spezifitaet (0,3,0) gegen (0,1,0), das gewinnt immer. Gemessen mit webflow/navpruef.py, Bestand und neue Seite, em-light und em-light scr, 1280 und 390 px: alles lesbar. Der Block setzt dieselben Werte und schadet nicht - er bleibt stehen, bis die Seite nativ gebaut wird. Nicht als Beleg fuer einen Fehler im Bestand lesen. */ nav.em-nav.em-light .f-em-nav-mid, nav.em-nav.em-light .f-em-nav-mid a, nav.em-nav.em-light .f-em-nav-tel{color:rgba(11,12,14,.72)!important} nav.em-nav.em-light .f-em-nav-mid a:hover{color:#0B0C0E!important} nav.em-nav.em-light .btn{background:#0B0C0E!important;color:#fff!important} nav.em-nav.em-light .btn .ar,nav.em-nav.em-light .btn .f-btn-ar{color:#fff!important} /* ══ Block 2 · 5775 Zeichen ══ */ .microD{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.4)} .microL{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)} .radarwrap{-webkit-mask:radial-gradient(closest-side circle at 52% 50%,#000 48%,rgba(0,0,0,.34) 74%,transparent 94%);mask:radial-gradient(closest-side circle at 52% 50%,#000 48%,rgba(0,0,0,.34) 74%,transparent 94%)} .sweep{-webkit-mask:radial-gradient(closest-side circle,#000 30%,rgba(0,0,0,.6) 72%,transparent 100%);mask:radial-gradient(closest-side circle,#000 30%,rgba(0,0,0,.6) 72%,transparent 100%)} .arcL{position:absolute;right:-14%;top:-24%;width:min(760px,70vw);aspect-ratio:1;border-radius:50%;border:1px solid rgba(11,12,14,.055);pointer-events:none} .f-input-type-range{-webkit-appearance:none;outline:none} .gauge{border-top:1px solid rgba(255,255,255,.95);border-left:1px solid rgba(255,255,255,.8);border-right:1px solid rgba(11,12,14,.07);border-bottom:1px solid rgba(11,12,14,.1)} .f-resgrid-n{font-size:clamp(1.9rem,1.3rem + 1.8vw,2.8rem);font-weight:600;letter-spacing:-.055em;line-height:1;font-variant-numeric:tabular-nums;background:var(--silverDark);-webkit-background-clip:text;background-clip:text;color:transparent} .seal{-webkit-mask:radial-gradient(circle,transparent 42%,#000 42.6%);mask:radial-gradient(circle,transparent 42%,#000 42.6%)} .f-finale-arcs-i:nth-child(1){width:38%} .f-finale-arcs-i:nth-child(2){width:62%;border-color:rgba(255,255,255,.04)} .f-finale-arcs-i:nth-child(3){width:88%;border-color:rgba(255,255,255,.03)} .resgrid{gap:14px;border:none} .f-resgrid-c{border:none;border-radius:18px;background:#F4F6F8} .f-resgrid-c:hover{transform:translateY(-3px)} .stats{border-top:none} .f-stats-div{background:rgba(255,255,255,.66);border:1px solid #fff;border-radius:14px;box-shadow:0 4px 34px rgba(11,12,14,.06)} .f-faq-details{background:#F4F6F8;border-radius:16px;margin-bottom:10px;padding:0 clamp(18px,2vw,26px);transition:background .3s} .vcard{animation:floatSoft 7s ease-in-out infinite} .em-light{position:relative;isolation:isolate} .dark{position:relative;isolation:isolate} .f-probcards-card{padding:0;overflow:hidden} .f-s3-dial-arc{-webkit-mask:radial-gradient(circle,transparent 74px,#000 75px);mask:radial-gradient(circle,transparent 74px,#000 75px)} .f-gseal-rim{-webkit-mask:radial-gradient(circle,transparent 16px,#000 16.6px);mask:radial-gradient(circle,transparent 16px,#000 16.6px)} .tb{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:16px;background:rgba(255,255,255,.045);border-top:1px solid rgba(255,255,255,.14);border-left:1px solid rgba(255,255,255,.1);border-right:1px solid rgba(0,0,0,.4);border-bottom:1px solid rgba(0,0,0,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 24px 50px -34px rgba(0,0,0,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:background .3s,transform .4s var(--ease)} .tb:hover{background:rgba(255,255,255,.07);transform:translateY(-2px)} .fintrust{margin-top:clamp(30px,4vh,44px);display:flex;justify-content:center;align-items:center;gap:clamp(16px,3vw,34px);flex-wrap:wrap} .quiz{position:relative;padding:clamp(26px,3.4vw,38px);border-radius:18px;background:rgba(255,255,255,.66);backdrop-filter:blur(26px) saturate(1.2);-webkit-backdrop-filter:blur(26px) saturate(1.2);border-top:1px solid rgba(255,255,255,.95);border-left:1px solid rgba(255,255,255,.8);border-right:1px solid rgba(11,12,14,.07);border-bottom:1px solid rgba(11,12,14,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(10,12,16,.05),0 36px 74px -44px rgba(10,12,16,.45);overflow:hidden} .qback{background:none;border:none;font-family:var(--sans);font-size:.82rem;color:var(--ink3);cursor:pointer;margin-top:16px;padding:0} .lcard{position:relative;border-radius:18px;background:#F4F6F8;padding:clamp(22px,2.6vw,30px);overflow:hidden;transition:background .35s,transform .45s var(--ease)} .lcard:hover{background:#EDF1F6;transform:translateY(-3px)} .tlx{position:relative;padding:38px 26px 0 0} .vcol{border-radius:20px;padding:clamp(24px,2.8vw,32px);background:#F4F6F8} .btn{will-change:transform} .pill{position:relative;overflow:hidden} .f-faq-a{overflow:hidden} .f-naht-i:nth-child(2){width:min(1000px,110vw);border-color:rgba(46,124,246,.07)} .oscard{position:relative;min-width:0;border-radius:20px;padding:clamp(18px,1.8vw,24px);background:rgba(255,255,255,.045);border-top:1px solid rgba(255,255,255,.13);border-left:1px solid rgba(255,255,255,.09);border-right:1px solid rgba(0,0,0,.4);border-bottom:1px solid rgba(0,0,0,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 34px 70px -46px rgba(0,0,0,.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:background .35s,transform .5s var(--ease),opacity .8s var(--ease)} .oscard:hover{background:rgba(255,255,255,.062);transform:translateY(-3px)} .osdraht{box-shadow:0 0 0 0 rgba(46,124,246,0)} .osstep{--d:0s} .osstep:nth-child(2){--d:1.1s} .osstep:nth-child(3){--d:2.2s} .osstep:nth-child(4){--d:3.3s} .f-ossp-wir{flex-direction:row;flex-wrap:wrap} .f-ossp-wir-b{--d:0s} .f-ossp-wir-b:nth-of-type(2){--d:.5s} .f-ossp-wir-b:nth-of-type(3){--d:1s} .f-ossp-wir-b:nth-of-type(4){--d:1.5s} .f-ossp-wir-b:nth-of-type(5){--d:2s} .f-ossp-wir-b:nth-of-type(6){--d:2.5s} .f-ossp-wir-b{animation-delay:var(--d)} @media screen and (max-width:991px){.radarwrap{margin:40px auto 0;order:2}.f-em-hero-inner{order:1}.em-hero{padding-top:104px}.f-em-hero-trust{max-width:none}.homelbl{display:none}.f-hitlbl{transform:translate(calc(-100% - 14px),-50%)}.f-hitlbl-second{display:none}.stepblk:first-child{border-top:none}.tlx{padding:0 0 30px 38px}} /* ══ Block 3 · 1491 Zeichen ══ */ .rv.in{opacity:1;transform:none} .sharp.in{filter:blur(0);opacity:1;transform:none} .em-nav.scr{padding:13px var(--pad);background:rgba(5,5,5,.62);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);border-bottom-color:var(--lineD)} .em-nav.em-light.scr{background:rgba(255,255,255,.72);border-bottom-color:var(--lineL)} .em-nav.em-light .em-brand{color:var(--ink)} .em-nav.em-light .f-em-brand-span{color:var(--ink3)} .em-nav.em-light .f-em-nav-tel{color:var(--ink2)} .em-nav.em-light .f-em-nav-mid{color:var(--ink2)} .em-nav.em-light .f-em-nav-mid-a:hover{color:var(--ink)} .em-nav.em-light .btn{background:var(--ink);color:#fff;border-color:var(--ink)} .em-nav.scr .f-em-nav-schale{background:rgba(10,12,16,.72);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 44px -26px rgba(0,0,0,.9)} .em-nav.em-light.scr .f-em-nav-schale{background:rgba(255,255,255,.82);border-color:rgba(11,12,14,.08);box-shadow:0 18px 44px -30px rgba(11,12,14,.45)} .hitlbl.out{opacity:0} .mcta.an{transform:none} .btn.mag{transition:transform .35s var(--ease),background .2s,color .2s,border-color .2s} #role.out{transform:translateY(-26%);opacity:0;transition:transform .34s cubic-bezier(.4,0,.7,.2),opacity .26s linear} #role.anim{animation:roleIn .55s var(--ease) both} .float.d3{animation-delay:-4.1s} .f-quotes-q.f-quotes-q-on{opacity:1;transform:none;pointer-events:auto} /* ══ Block 4 · 693 Zeichen ══ */ .branches .b:not(.on){color:rgba(255,255,255,.26)} .branches .b.on{color:#fff} .s1 .pt.on{background:var(--blue);box-shadow:0 0 0 5px rgba(46,124,246,.14),0 2px 8px rgba(46,124,246,.4)} .stepblk:not(.act){opacity:.34} .stepblk.act{opacity:1} .stagebox video:not(.on){opacity:0} .stagebox video.on{opacity:1;transform:none} .progbars i.done::after,.f-progbars-i.done::after{transform:scaleX(1)} .progbars i:not(.done)::after,.f-progbars-i:not(.done)::after{transform:scaleX(0)} .quotes .q:not(.on){opacity:0;transform:translateY(12px);pointer-events:none} .quotes .q.on{opacity:1;transform:none;pointer-events:auto} .qdot:not(.on){background:rgba(11,12,14,.14)} .qdot.on{background:var(--blue)} /* ══ Block 5 · 3064 Zeichen ══ */ /* S-Kurve (smootherstep) in L*, dann nach sRGB umgerechnet - deshalb liegen die Stopps nicht gleichmaessig. Eine Gerade durch die Helligkeit verbringt zwangslaeufig viel Strecke im Mittelgrau; genau das war das Graue-Band-Gefuehl. Die Blende sitzt straff in der Mitte: oben haelt das Schwarz bis 22 %, unten liegt das Weiss ab 92 %. Zwei ruhige Felder, dazwischen eine kurze, entschiedene Blende. */ :root{--s0:#050505;--s1:#101012;--s2:#252527;--s3:#4B4B4F;--s4:#777779;--s5:#ABABAF;--s6:#D1D1D4;--s7:#F0F0F1;--s8:#FDFDFD;--s9:#FFFFFF} .bridge{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,var(--s0) 0%,var(--s0) 22%,var(--s1) 30%,var(--s2) 37%,var(--s3) 44%,var(--s4) 51%,var(--s5) 58%,var(--s6) 65%,var(--s7) 73%,var(--s8) 82%,var(--s9) 92%,var(--s9) 100%)} .bridge2{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,var(--s9) 0%,var(--s9) 8%,var(--s8) 18%,var(--s7) 27%,var(--s6) 35%,var(--s5) 42%,var(--s4) 49%,var(--s3) 56%,var(--s2) 63%,var(--s1) 70%,var(--s0) 78%,var(--s0) 100%)} /* Lichtkegel aus der Zielsektion: macht aus der Zone eine Lichtquelle statt eines Verlaufs. Er liegt im ::before und ist an der HELLEN Kante ausgeblendet - laege er im Hintergrund, endete die Bruecke blaeulich und die Sektion begaenne weiss, also wieder eine Linie. Die Maske zeigt jeweils von der hellen Seite weg: bei .bridge ist Weiss unten, bei .bridge2 oben. */ .bridge::before,.bridge2::before{content:"";position:absolute;inset:0;pointer-events:none} .bridge::before{background:radial-gradient(78% 88% at 50% 116%,rgba(196,220,255,.30),rgba(196,220,255,0) 70%);-webkit-mask:linear-gradient(180deg,#000 0,#000 68%,transparent 94%);mask:linear-gradient(180deg,#000 0,#000 68%,transparent 94%)} .bridge2::before{background:radial-gradient(78% 88% at 50% -16%,rgba(196,220,255,.26),rgba(196,220,255,0) 70%);-webkit-mask:linear-gradient(180deg,transparent 0,#000 16%,#000 100%);mask:linear-gradient(180deg,transparent 0,#000 16%,#000 100%)} /* Feines Rauschen gegen die Streifenbildung, die bei 8 Bit je Kanal sonst unvermeidlich ist. */ .bridge::after,.bridge2::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")} /* Der blaue Schimmer der Sektionen laeuft an den Kanten aus - sonst endet die Bruecke weiss und die Sektion beginnt getoent, und diese ~15 Helligkeitsstufen sieht man als Linie. */ .em-light::before,.secgrey::before,.dark::before,.osys::before{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 130px,#000 calc(100% - 130px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 130px,#000 calc(100% - 130px),transparent 100%)} nav.em-nav::before{-webkit-mask-image:none;mask-image:none} /* ══ Block 6 · 3223 Zeichen ══ */ .pstand{position:relative;width:min(420px,100%);margin:0 auto;padding:22px 22px 20px;border:1px solid var(--lineD);border-radius:20px;background:radial-gradient(120% 90% at 88% -10%,rgba(46,124,246,.14),transparent 62%),linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));box-shadow:0 30px 70px -40px rgba(0,0,0,.9)} .pkopf{display:flex;align-items:center;gap:12px;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.42);font-weight:600} .pkopf i{flex:1;height:1px;background:var(--lineD)} .pliste{position:relative;margin-top:16px;display:grid;gap:7px;overflow:hidden;border-radius:12px} .pz{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;padding:11px 13px;border:1px solid rgba(255,255,255,.08);border-radius:11px;background:rgba(255,255,255,.03);font-size:.82rem} .pz .ps-r{grid-column:1;grid-row:1;color:rgba(255,255,255,.9);font-weight:500;letter-spacing:-.01em;background:none;padding:0} .pz .po{grid-column:1;grid-row:2;font-size:.68rem;color:rgba(255,255,255,.34);letter-spacing:.02em} .pz .pe{grid-column:2;grid-row:1/3;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.28);white-space:nowrap;align-self:center} .pz .pm{position:absolute;left:-1px;top:12px;bottom:12px;width:2px;border-radius:2px;background:rgba(255,255,255,.12)} .pz.ja{border-color:rgba(46,124,246,.38);background:rgba(46,124,246,.09)} .pz.ja .pm{background:var(--blue);animation:pmBlitz 9s linear infinite;animation-delay:var(--d,0s)} .pz.ja .pe{color:rgba(46,124,246,.92)} .pz.nein{opacity:.44} .pz.nein .ps-r{font-weight:400} .pliste .pz:nth-child(2){--d:.6s}.pliste .pz:nth-child(3){--d:1.2s}.pliste .pz:nth-child(4){--d:1.8s}.pliste .pz:nth-child(5){--d:2.4s} .pscan{position:absolute;left:0;right:0;height:70px;pointer-events:none;border-radius:12px;background:linear-gradient(180deg,transparent,rgba(46,124,246,.14) 46%,rgba(46,124,246,.26) 56%,transparent);animation:pscan 9s cubic-bezier(.45,0,.55,1) infinite} @keyframes pscan{0%{transform:translateY(-80px);opacity:0}5%{opacity:1}46%{transform:translateY(340px);opacity:1}54%{opacity:0}100%{opacity:0;transform:translateY(340px)}} @keyframes pmBlitz{0%,7%{box-shadow:none}11%{box-shadow:0 0 14px 2px rgba(46,124,246,.75)}22%,100%{box-shadow:0 0 0 0 rgba(46,124,246,0)}} .pfuss{display:flex;align-items:center;gap:14px;margin-top:18px;padding-top:16px;border-top:1px solid var(--lineD)} .pring{position:relative;flex-shrink:0;width:58px;height:58px;display:grid;place-items:center} .pring::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from -.02turn,var(--blue),#7FB0FF .5turn,var(--blue) .97turn,rgba(255,255,255,.10) .97turn);-webkit-mask:radial-gradient(circle,transparent 22px,#000 22.5px);mask:radial-gradient(circle,transparent 22px,#000 22.5px)} .pring b{position:relative;font-size:.8rem;font-weight:600;color:#fff;letter-spacing:-.02em} .pft{display:grid;gap:3px;line-height:1.35} .pft b{font-size:.96rem;font-weight:600;letter-spacing:-.02em} .pft span{font-size:.78rem;color:rgba(255,255,255,.45)} @media (prefers-reduced-motion:reduce){.pz .pm{animation:none}.pscan{display:none}} /* ══ Block 7 · 2959 Zeichen ══ */ /* Abgestufte Umbruchpunkte des Originals wiederhergestellt. Webflow kennt nur 991/767/479 - der Flachklopfer hat 1080/1040/1000/960/920/900/820/680/560/520 dorthin zusammengezogen. Folge: die Seite sprang bei 991/992 direkt von Desktop auf Vollmobil (bei 991 war sie 4889 px zu hoch), und zwischen 480 und 560 klappten Kacheln zu spaet um. Oberhalb 992 kommen die Baender dazu, die Webflow gar nicht kennt; unterhalb 991 kommt der Desktop-Wert zurueck fuer alles, was Webflow zu frueh zusammenklappt. ACHTUNG bei Klassen mit MEHREREN Umbruchpunkten (.leist 900+560, .tbgrid 900+520): dort gilt je Band ein anderer Wert - ein einziges Band waere falsch. */ @media (min-width:992px) and (max-width:1080px){ .radarwrap{position:relative;right:auto;top:auto;transform:none;margin:40px auto 0;width:min(86vw,460px);order:2} .f-em-hero-inner{order:1} .f-em-hero-sub{max-width:none} .f-em-hero-trust{max-width:none} .hitlbl{padding:4px 8px} .hitlbl.second{display:none} .rmeta{gap:12px} } @media (min-width:992px) and (max-width:1040px){ .osgrid{gap:16px;grid-template-columns:1fr} .osscene{height:clamp(224px,28vh,252px)} } @media (min-width:992px) and (max-width:1000px){ .f-em-nav-mid{display:none} .f-em-nav-tel{display:none} } @media (min-width:961px) and (max-width:991px){ .calc{gap:clamp(32px,5vw,84px);grid-template-columns:1fr 1fr} .checkgrid{gap:clamp(32px,5vw,80px);grid-template-columns:.92fr 1.08fr} .gar{gap:clamp(34px,5vw,80px);grid-template-columns:.8fr 1.2fr} .mod{gap:clamp(30px,5vw,84px);grid-template-columns:.86fr 1.14fr} .qgrid{gap:clamp(32px,5vw,80px);grid-template-columns:1.15fr .85fr} .stage{top:clamp(88px,12vh,120px)} .stepblk{min-height:76vh;padding:clamp(24px,4vh,48px) 0} .sysflow{gap:clamp(36px,5vw,88px);grid-template-columns:1fr 1.04fr} } @media (min-width:921px) and (max-width:991px){ .faqgrid{gap:clamp(28px,4vw,64px);grid-template-columns:.66fr 1.34fr} .oshead{gap:clamp(32px,5vw,86px);grid-template-columns:1fr 1fr} .prob{gap:clamp(32px,5vw,86px);grid-template-columns:1fr 1fr} .sysintro{gap:clamp(32px,5vw,86px);grid-template-columns:1fr 1fr} } @media (min-width:901px) and (max-width:991px){ .haltung{gap:clamp(32px,5vw,84px);grid-template-columns:1fr 1fr} .probcards{grid-template-columns:repeat(3,1fr)} .resgrid{grid-template-columns:repeat(4,1fr)} .tl{grid-template-columns:repeat(4,1fr)} .tlx{padding:38px 26px 0 0} .f-tlx-dot{top:5px} .verg{grid-template-columns:repeat(3,1fr)} .wall{grid-template-columns:repeat(5,1fr)} .leist{grid-template-columns:repeat(3,1fr)} .tbgrid{grid-template-columns:repeat(4,1fr)} } @media (min-width:821px) and (max-width:991px){.mcta{display:none}} @media (min-width:681px) and (max-width:991px){.garpts{grid-template-columns:1fr 1fr}} @media (min-width:480px) and (max-width:560px){.leist{grid-template-columns:1fr}} @media (min-width:480px) and (max-width:520px){.tbgrid{grid-template-columns:1fr}} /* ══ Block 8 · 3331 Zeichen ══ */ .hero::before,.em-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:radial-gradient(circle,#5A5A5A .72px,transparent .8px);background-size:11px 11px;-webkit-mask-image:radial-gradient(48% 45% at 0% 64%,#000 0%,rgba(0,0,0,.55) 55%,transparent 95%);mask-image:radial-gradient(48% 45% at 0% 64%,#000 0%,rgba(0,0,0,.55) 55%,transparent 95%)}.hportraet{margin:0;position:relative;border-radius:22px;overflow:hidden;background:#E4E7EC;box-shadow:0 30px 70px -46px rgba(11,12,14,.55)}.hportraet img{display:block;width:100%;height:auto}.hportraet-txt{position:absolute;left:0;right:0;bottom:0;padding:34px 20px 16px;font-size:.78rem;color:rgba(255,255,255,.82);background:linear-gradient(180deg,transparent,rgba(11,12,14,.62))}.haltung h2{margin-bottom:22px}.haltung .sig .av{background:url("https://cdn.prod.website-files.com/670d00610124a54e8b89560a/6a7de7427da3e6c4521740fc_Murat_Ercan_Portraet.jpg") center/cover no-repeat,linear-gradient(150deg,#E3E5E9,#C3C8D0)}@media (max-width:900px){.hportraet{max-width:420px}}.kpi.stat{background:none;border:none;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;margin-top:26px;padding:15px 0 0;border-top:1px solid var(--lineL);display:flex;align-items:baseline;gap:13px}.stats{gap:0;border-top:1px solid var(--lineL)}.stats div{background:none;border:none;border-radius:0;box-shadow:none;padding:20px 2px;border-bottom:1px solid var(--lineL)}.stagebox .szene{position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:opacity .75s var(--ease),transform 1.1s var(--ease)}.stagebox .szene.on,.stagebox .szene.f-stagebox-video-on{opacity:1;transform:none}.kfeld{background:radial-gradient(120% 100% at 78% -10%,rgba(46,124,246,.16),transparent 60%),linear-gradient(180deg,#0d1014,#07080a)}.kf-q{position:absolute;left:11%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#fff;box-shadow:0 0 16px 4px rgba(255,255,255,.5)}.kf-q::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(255,255,255,.35);animation:kfPuls 3.4s var(--ease) infinite}@keyframes kfPuls{0%{transform:scale(.6);opacity:.9}70%{transform:scale(3.4);opacity:0}100%{opacity:0}}.kf-w{position:absolute;left:11%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;border:1px solid rgba(46,124,246,.55);animation:kfWelle 6s var(--ease) infinite}.kf-w.w2{animation-delay:2s}.kf-w.w3{animation-delay:4s}@keyframes kfWelle{0%{transform:scale(.35);opacity:.9}72%{transform:scale(13);opacity:0}100%{opacity:0}}.kf-p{position:absolute;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.26);transform:translate(-50%,-50%);transition:background .5s,box-shadow .5s,width .5s,height .5s}.kf-p.hell{background:rgba(255,255,255,.6)}.kf-p.an{width:6px;height:6px;background:var(--blue);box-shadow:0 0 12px 3px rgba(46,124,246,.55)}.kf-l{position:absolute;transform:translate(-50%,-50%);font-size:.62rem;white-space:nowrap;color:#fff;background:rgba(12,14,18,.82);border:1px solid rgba(255,255,255,.14);padding:4px 9px;border-radius:7px;opacity:0;transition:opacity .5s}.kf-l.an{opacity:1}.kf-l b{font-weight:600}.kf-l s{text-decoration:none;color:var(--blue);font-weight:600}@media (prefers-reduced-motion:reduce){.kf-w,.kf-q::after{animation:none}} /* ══ Block 9 · 2670 Zeichen ══ */ #nav .em-burger{display:none;position:relative;flex:0 0 auto;width:42px;height:42px;margin-left:12px;padding:0;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(255,255,255,.06);cursor:pointer}#nav .em-burger i{position:absolute;left:10px;width:20px;height:1.5px;border-radius:2px;background:#fff;transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .16s}#nav .em-burger i:nth-child(1){top:14px}#nav .em-burger i:nth-child(2){top:20px}#nav .em-burger i:nth-child(3){top:26px}#nav .em-burger.auf i:nth-child(1){transform:translateY(6px) rotate(45deg)}#nav .em-burger.auf i:nth-child(2){opacity:0}#nav .em-burger.auf i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}#nav.light .em-burger,#nav.em-light .em-burger{border-color:rgba(11,12,14,.12);background:rgba(11,12,14,.04)}#nav.light .em-burger i,#nav.em-light .em-burger i{background:#0b0c0e}.em-menu{position:fixed;left:0;right:0;top:0;bottom:0;z-index:79;opacity:0;visibility:hidden;background:rgba(6,7,9,.94);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);transition:opacity .3s cubic-bezier(.16,1,.3,1),visibility .3s}.em-menu.auf{opacity:1;visibility:visible}.em-menu.hell{background:rgba(255,255,255,.96)}.em-menu-innen{position:absolute;inset:0;display:flex;flex-direction:column;padding:24px;overflow-y:auto;-webkit-overflow-scrolling:touch}.em-menu a{display:block;padding:16px 2px;font-size:1.55rem;font-weight:600;letter-spacing:-.025em;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.09);opacity:0;transform:translateY(12px);transition:opacity .38s ease,transform .38s cubic-bezier(.16,1,.3,1)}.em-menu.auf a{opacity:1;transform:none}.em-menu.auf a:nth-child(1){transition-delay:.04s}.em-menu.auf a:nth-child(2){transition-delay:.08s}.em-menu.auf a:nth-child(3){transition-delay:.12s}.em-menu.auf a:nth-child(4){transition-delay:.16s}.em-menu.auf a:nth-child(5){transition-delay:.2s}.em-menu.auf a:nth-child(6){transition-delay:.24s}.em-menu.hell a{color:#0b0c0e;border-bottom-color:rgba(11,12,14,.1)}.em-menu .em-menu-tel{margin-top:auto;font-size:1.02rem;font-weight:500;border-bottom:none;color:rgba(255,255,255,.58)}.em-menu.hell .em-menu-tel{color:rgba(11,12,14,.55)}.em-menu .em-menu-cta{margin-top:10px;padding:17px 20px;border-bottom:none;border-radius:14px;background:#2E7CF6;color:#fff;font-size:1rem;font-weight:600;text-align:center}@media (max-width:1000px){#nav .em-burger{display:block}}@media (max-width:400px){#nav .side .btn{display:none}}@media (min-width:1001px){.em-menu{display:none}}@media (prefers-reduced-motion:reduce){.em-menu,.em-menu a,#nav .em-burger i{transition:none}} /* ══ Block 10 · 1763 Zeichen ══ */ .resgrid{grid-template-columns:repeat(3,1fr)}@media(max-width:820px){.resgrid{grid-template-columns:1fr}}.f-resgrid-b b{display:block;color:#0B0C0E;font-size:.95rem;font-weight:600;letter-spacing:-.01em;margin-bottom:2px}.f-resgrid-b span{display:block;font-size:.82rem;color:#54575E}.ok{display:inline-flex;align-items:center;gap:6px}.ok::before{content:"";width:6px;height:6px;border-radius:50%;background:#1B8A4B;flex:none}.lwrap{position:relative;overflow:hidden;padding:6px 0}.lwrap::before,.lwrap::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}.lwrap::before{left:0;background:linear-gradient(90deg,#050505,transparent)}.lwrap::after{right:0;background:linear-gradient(270deg,#050505,transparent)}.ltrack{animation:emlauf 58s linear infinite}.lwrap:hover .ltrack{animation-play-state:paused}.ltrack img{height:29px;width:auto;flex:none;filter:grayscale(1) brightness(1.85);opacity:.6;transition:opacity .3s}.ltrack img:hover{opacity:1}@keyframes emlauf{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - 29px),0,0)}}@media(prefers-reduced-motion:reduce){.ltrack{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:34px}}.brow span{color:#54575E}.brow b{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}.bsprech>div:nth-child(6){border-top:1px solid rgba(11,12,14,.14);margin-top:6px;padding-top:9px}.bsprech>div:nth-child(6) b{font-weight:650}.bsprech>div:nth-child(7) b{color:#2E7CF6;font-weight:650}.exklbox h3{font-size:clamp(1.3rem,1.05rem + 1.1vw,1.72rem);line-height:1.2;margin:0 0 11px;letter-spacing:-.02em;color:#0B0C0E}.exklbox p{margin:0 0 9px;font-size:.95rem;line-height:1.64;color:#54575E;max-width:68ch}.exklbox p:last-child{margin-bottom:0} /* ══ Block 11 · 6835 Zeichen ══ */ .ruht,.ruht *,.ruht::before,.ruht::after,.ruht *::before,.ruht *::after{animation-play-state:paused!important} .ltrack,.belt{will-change:transform;backface-visibility:hidden} .tb,.oscard{backdrop-filter:none!important;-webkit-backdrop-filter:none!important} .osstep{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(6,8,12,.88)!important} .f-stagebox-lbl{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(0,0,0,.56)!important} .hitlbl{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(8,10,14,.86)!important} .gauge{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(255,255,255,.86)!important} .quiz{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(255,255,255,.88)!important} nav.em-nav{padding-top:16px!important;padding-bottom:16px!important} nav.em-nav.scr{padding-top:12px!important;padding-bottom:12px!important;background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-bottom-color:transparent!important} .f-em-hero-trust{align-items:stretch!important;gap:0!important;padding-top:20px!important} .ti{display:flex;align-items:center;gap:10px;padding:2px clamp(14px,1.9vw,24px) 2px 0;min-height:34px} .ti+.ti{padding-left:clamp(14px,1.9vw,24px);border-left:1px solid var(--lineD2)} .ti .tii{width:22px;height:22px;flex-shrink:0;display:grid;place-items:center} .ti .tii svg{display:block} .ti .tit{display:flex;flex-direction:column;gap:1px;line-height:1.2} .ti .tit b{display:flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600;letter-spacing:-.015em;color:rgba(255,255,255,.9)} .ti .tit s{text-decoration:none;font-size:.71rem;color:rgba(255,255,255,.4)} .ti .gstars{display:inline-flex;gap:2px;align-items:center} @media(max-width:720px){.f-em-hero-trust{gap:14px 0!important}.ti{width:calc(50% - 1px);padding-right:12px}.ti:nth-child(odd)+.ti{padding-left:14px}.ti:nth-child(3){padding-left:0;border-left:0}} .f-fclaim-zeile{gap:0!important;margin-top:20px!important;line-height:1.5} .f-fclaim-zeile span{display:inline-flex;align-items:center;gap:7px;padding:2px clamp(14px,1.5vw,20px) 2px 0} .f-fclaim-zeile span+span{padding-left:clamp(14px,1.5vw,20px);border-left:1px solid var(--lineD)} .f-fclaim-zeile .st{color:#FBBC04;letter-spacing:2px;font-size:.78rem;font-style:normal} @media(max-width:640px){.f-fclaim-zeile{gap:10px 0!important}.f-fclaim-zeile span{width:50%;padding-right:12px}.f-fclaim-zeile span:nth-child(odd)+span{padding-left:14px}.f-fclaim-zeile span:nth-child(3){padding-left:0;border-left:0}} .fintrust,.fintrust-1{gap:0!important} .f-fintrust-it{padding:2px clamp(14px,2vw,26px)} .f-fintrust-it+.f-fintrust-it{border-left:1px solid var(--lineD)} .exkl{padding-top:clamp(44px,6vh,78px)!important;padding-bottom:clamp(44px,6vh,78px)!important} .exklgrid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(30px,4.4vw,74px);align-items:center;margin-top:clamp(22px,3vh,34px)} @media(max-width:940px){.exklgrid{grid-template-columns:1fr;gap:34px}} .exklbox h3{font-size:clamp(1.45rem,1.05rem + 1.5vw,2.1rem)!important;line-height:1.14!important;margin:0 0 13px!important;letter-spacing:-.035em!important} .exklbox p{max-width:60ch!important;margin:0 0 11px!important} .exklbox p:last-child{margin-bottom:0!important} .efeld{position:relative;padding:clamp(18px,2vw,26px);border:1px solid var(--lineL);border-radius:18px;background:linear-gradient(180deg,#FCFDFE,#F1F4F8);box-shadow:0 30px 60px -46px rgba(10,12,16,.5)} .efeld .ef-kopf{display:flex;align-items:center;gap:8px;font-size:.67rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink3);margin-bottom:13px} .efeld .ef-kopf i{width:6px;height:6px;background:var(--blue);border-radius:1px;transform:rotate(45deg);flex-shrink:0} .efeld .ef-karte{position:relative;aspect-ratio:16/11;border:1px solid var(--lineL);border-radius:13px;background:#fff radial-gradient(rgba(11,12,14,.055) .8px,transparent .9px) 0 0/11px 11px;overflow:hidden} .efeld .ef-ring{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(11,12,14,.1)} .efeld .ef-ring.r1{width:38%;aspect-ratio:1} .efeld .ef-ring.r2{width:68%;aspect-ratio:1;border-color:rgba(11,12,14,.07)} .efeld .ef-p{position:absolute;width:5px;height:5px;border-radius:50%;background:rgba(11,12,14,.2);transform:translate(-50%,-50%)} .efeld .ef-p:nth-of-type(4n+3){background:rgba(46,124,246,.5)} .efeld .ef-mitte{position:absolute;left:50%;top:52%;width:8px;height:8px;border-radius:50%;background:var(--blue);transform:translate(-50%,-50%);box-shadow:0 0 0 5px rgba(46,124,246,.14)} .efeld .ef-chip{position:absolute;display:flex;flex-direction:column;gap:1px;padding:7px 12px;border-radius:9px;line-height:1.22;white-space:nowrap} .efeld .ef-chip b{font-size:.8rem;font-weight:600} .efeld .ef-chip s{text-decoration:none;font-size:.68rem} .efeld .ef-chip.drin{left:50%;top:52%;transform:translate(14px,-50%);background:var(--blue);color:#fff;box-shadow:0 14px 28px -16px rgba(46,124,246,.95)} .efeld .ef-chip.drin s{color:rgba(255,255,255,.74)} .efeld .ef-lbl{position:absolute;left:12px;bottom:10px;font-size:.68rem;letter-spacing:.03em;color:var(--ink3)} .efeld .ef-unten{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap} .efeld .ef-stub{width:18px;height:1px;flex-shrink:0;margin-left:2px;background:repeating-linear-gradient(90deg,rgba(11,12,14,.3) 0 4px,transparent 4px 8px)} .efeld .ef-chip.raus{position:static;background:rgba(11,12,14,.03);border:1px dashed rgba(11,12,14,.22);color:var(--ink3);flex-shrink:0} .efeld .ef-chip.raus b{color:rgba(11,12,14,.45);text-decoration:line-through;text-decoration-color:rgba(11,12,14,.28)} .efeld .ef-fuss{flex:1;min-width:180px;font-size:.79rem;line-height:1.45;color:var(--ink3)} @media(max-width:620px){.efeld .ef-karte{aspect-ratio:16/13}.efeld .ef-chip b{font-size:.74rem}} .ckcta{display:flex;flex-direction:column;align-items:flex-start;gap:0} .ckcta .ckk{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)} .ckcta .ckb{margin-top:12px;font-size:clamp(1.14rem,1rem + .7vw,1.52rem);font-weight:600;letter-spacing:-.03em;line-height:1.18} .ckcta .ckp{margin-top:9px;font-size:.95rem;line-height:1.6;color:var(--ink2);max-width:44ch} .ckcta .ckn{margin-top:clamp(20px,3vh,28px);display:flex;align-items:center;gap:10px;font-family:inherit;font-weight:600;font-size:.95rem;letter-spacing:-.01em;background:var(--ink);color:#fff;border:1px solid var(--ink);padding:15px 26px;border-radius:3px;transition:transform .2s var(--ease)} .ckcta .ckn:hover{transform:translateY(-2px)} .ckcta .ckf{margin-top:14px;font-size:.8rem;color:var(--ink3)} /* ── startseite_fein_v10.css ── */ /* ═══════════ FEINSCHLIFF STARTSEITE ═══════════════════════════════ Kleines Blatt neben dem Overlay - damit die 137 KB des Overlays fuer eine Handvoll Regeln nicht neu gebaut werden muessen. Laedt NACH dem Overlay, gewinnt also bei gleicher Spezifitaet. Der Knopf-Atemzug stand frueher hier und liegt jetzt in knopf_atem.css - er gilt fuer die ganze Site, nicht nur hier. */ /* ═══════════ FUSS AUF SCHMALEN GERAETEN ═══════════════════════════ Befund (390 px gemessen): .fgrid ist ein Flex mit space-between und inhaltsbreiten Spalten. Ergebnis waren vier verschiedene Breiten (118 / 85 / 150 / 146 px) und Luecken von 167 und 58 px - der Fuss sah zerrissen aus. Ein echtes Raster mit zwei gleichen Spalten loest das; die Markenspalte nimmt die volle Breite, sonst steht sie allein neben einer Linkliste. */ @media (max-width:700px){ .f-footer .fgrid{ display:grid;grid-template-columns:1fr 1fr;gap:34px 18px; justify-content:stretch;align-items:start} .f-footer .fgrid > *{width:auto;min-width:0} .f-footer .fgrid > *:first-child{grid-column:1 / -1} /* drei Linkspalten in zwei Spalten lassen die letzte allein stehen - volle Breite liest sich als Absicht, nicht als Rest */ .f-footer .fgrid > *:last-child{grid-column:1 / -1} /* Die Vertrauenszeile bricht sonst nach zwei Eintraegen unsauber um */ .f-footer .fclaim > *:last-child{ display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;align-items:start} .f-footer .fbot{flex-direction:column;align-items:flex-start;gap:12px} } @media (max-width:420px){ .f-footer .fclaim > *:last-child{grid-template-columns:1fr} } /* ═══════════ MODULE AUF MOBIL ═════════════════════════════════════ Gehoert zu startseite_mobil.js: dort wandert je ein Buehneninhalt in seinen Modulblock, hier bekommt er seinen Kasten. 16:10 wie auf dem Desktop, damit der Zuschnitt der Videos stimmt. */ @media (max-width:999px){ .em-mweg{display:none !important} .em-mstage{ position:relative;margin:20px 0 2px;border-radius:14px;overflow:hidden; aspect-ratio:16 / 10;background:#0E0F12; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)} .em-mstage video, .em-mstage .szene{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;display:block !important;opacity:1 !important} } /* ═══════════ DREI BEFUNDE VOM ECHTEN IPHONE ═══════════════════════ 1) Die feste Leiste unten (.mcta) ist 66 px hoch und sitzt 12 px ueber dem Rand - aber NIEMAND reserviert diesen Platz: der Body hat padding-bottom 0. Dadurch liegen die untersten 78 px jeder Seite dauerhaft unter der Leiste. Auf den Screenshots verdeckt sie die letzte Zeitleisten-Station, die Kennzahl "185" und die Fusszeile. Das ist der Grund, warum es an drei ganz verschiedenen Stellen "abgeschnitten" aussieht - ein Fehler, nicht drei. */ @media (max-width:999px){ body{padding-bottom:86px} } /* 2) Der letzte Punkt der Zeitleiste trug einen grauen Ring, waehrend die drei darueber blau sind. Ausgerechnet "Besetzung" - das Ziel der ganzen Strecke - sah dadurch deaktiviert aus. */ .dot.f-tlx-grau-dot, .dot.f-tlx-grau{border-color:#2E7CF6} /* 3) Zwei benachbarte Abschnitte bringen je ~93 px Polsterung mit; auf 390 px stehen dadurch 186 px Leere zwischen Absatz und Zitat - ein ganzer leerer Bildschirm. Auf dem Desktop ist der Abstand richtig, nur am Handy zu grosszuegig. */ @media (max-width:700px){ .sec{padding-top:58px;padding-bottom:58px} } /* ═══════════ ROLLENZEILE IM KOPF ═════════════════════════════════ Befund: die Kopfzeilen sind mit Zeilenhoehe 0,94 gesetzt - also ENGER als die Schrift hoch ist (39,1 px bei 41,6 px). Bei diesem Satz hat eine Unterlaenge schlicht keinen Platz: das g von "Pflegekraft" landet dort, wo schon "besetzt." steht. Mein erster Versuch war falsch und hat es sichtbar schlimmer gemacht: ich habe den Beschnittkasten per padding groesser gemacht und den Zuwachs mit einem gleich grossen NEGATIVEN margin wieder aus dem Layout genommen - damit der Rhythmus bleibt. Der Kasten war dann zwar gross genug, aber der negative margin zieht die naechste Zeile eben in genau diesen Zuwachs hinein. Ergebnis: das g wurde nicht mehr abgeschnitten, sondern von "besetzt." ueberschrieben. Das sah auf dem Handy wieder aus wie "abgehackt". Es gibt hier keinen Trick: entweder die Zeile bekommt echten Platz, oder die Unterlaenge kollidiert. Also Zeilenhoehe 1,2 - gemessen am Bild mit "Zerspaner" und "Pflegekraft", beide stehen frei. Die Ueberschrift waechst dadurch von 181 auf 198 px (Handy), 0 Zeilenueberlappungen. */ .em-hero h1 .l, .em-hero h1 .f-h1-l, .em-hero h1 .f-role, .em-hero h1 .d2frist{line-height:1.2} /* ── knopf_atem_v3.css ── */ /* ═══════════ DER KNOPF-SCHIMMER ══════════════════════════════════ Ein Licht zieht durch den Knopf, dann ruht er. Bewusst OHNE Schwebe-Bindung: auf dem Handy gibt es kein Zeigen, ein reiner Hover-Effekt erreicht die Haelfte der Besucher nie. DIE ZAHLEN STAMMEN VON WOHNEN-PSD.DE, dort am 25.08. am laufenden Knopf gemessen (`btnShine` auf `.ui-btn::before`). Meine erste Fassung hatte dieselbe Mechanik und wirkte trotzdem falsch - als "Balken", zu schwach. Der Vergleich zeigt, warum: dort meine erste Fassung 3 s 9 s <- dreimal so lang ease-in-out linear <- gleichfoermig = mechanisch Deckkraft .45 .20 <- weniger als die Haelfte Breite 55 % 42 % Neigung -18° -12° 55 % laufen, durchgehend <- ohne Ruhe kein Rhythmus 45 % Ruhe Der Durchlauf dauert also 1,65 s und danach liegt der Knopf 1,35 s still. Nicht die Mechanik war das Problem, sondern das Tempo. EIN UNTERSCHIED BLEIBT: dort ist das Licht fest weiss (`rgba(255, 255,255,.45)`), was auf dem lachsfarbenen Knopf dort passt. Die Hauptknoepfe hier sind WEISS - weisses Licht darauf waere unsichtbar. Deshalb kommt die Farbe aus `currentColor`: heller Knopf hat dunklen Text, dunkler Knopf hellen, die Textfarbe weiss also immer, wie herum der Knopf steht. Keine Klassenliste, die beim naechsten neuen Knopf vergessen wird - genau daran war eine Vorfassung gescheitert (weisser Nav-Knopf bekam weisses Licht). Zwei Dinge sind nicht verhandelbar: 1. Nur `transform` - das laeuft auf der GPU und kostet kein Layout. 2. `animation-play-state:paused` steht NACH der Kurzschreibweise, sonst setzt `animation:` sie wieder auf running. Der Beobachter (emknopfatem2) gibt `em-sicht` nur Knoepfen im Bild - 61 Dauer-Animationen waren am 15.08. die gemessene Ursache fuers Scroll-Ruckeln dieser Site. */ /* Alle fuenf Knopf-Systeme der Site. `input[type=submit]` steht bewusst NICHT dabei: ein input kann keine Pseudo-Elemente tragen, die Regel waere dort wirkungslos. Vor der Aufnahme geprueft (25.08., live): keiner dieser Knoepfe hat ein belegtes ::before und bei keinem ragt ein Kind ueber den Rand - `overflow:hidden` schneidet also nichts ab. */ .btn, .dg-knopf, .button, .button-secondary, .em-nav-cta, .em-nav-cta2, .thero-btn, .thero-btn2, .thero-headcta{position:relative;overflow:hidden} .btn::before, .dg-knopf::before, .button::before, .button-secondary::before, .em-nav-cta::before, .em-nav-cta2::before, .thero-btn::before, .thero-btn2::before, .thero-headcta::before{ content:"";position:absolute;top:0;left:0; width:55%;height:100%; pointer-events:none;z-index:1; background:linear-gradient(100deg, transparent 0%, currentColor 50%, transparent 100%); opacity:.45; transform:translateX(-180%) skewX(-18deg); animation:em-schimmer 3s ease-in-out infinite; animation-play-state:paused} .btn.em-sicht::before, .dg-knopf.em-sicht::before, .button.em-sicht::before, .button-secondary.em-sicht::before, .em-nav-cta.em-sicht::before, .em-nav-cta2.em-sicht::before, .thero-btn.em-sicht::before, .thero-btn2.em-sicht::before, .thero-headcta.em-sicht::before{animation-play-state:running} /* 55 % laufen, 45 % ruhen - der Rhythmus ist der eigentliche Effekt. */ @keyframes em-schimmer{ 0% {transform:translateX(-180%) skewX(-18deg)} 55% {transform:translateX(320%) skewX(-18deg)} 100% {transform:translateX(320%) skewX(-18deg)} } @media (prefers-reduced-motion:reduce){ .btn::before, .dg-knopf::before, .button::before, .button-secondary::before, .em-nav-cta::before, .em-nav-cta2::before, .thero-btn::before, .thero-btn2::before, .thero-headcta::before{display:none} }