/* ========================================================================== 0 SCHRIFTEN lokal, zugeschnitten Archivo: variable Achsen Gewicht 700 bis 900 und Breite 100 bis 125 Prozent. Instrument Sans 400 und 500, Space Mono 400 und 700. Lateinisch mit Umlauten. ========================================================================== */ @font-face{font-family:"Archivo";src:url("/fonts/archivo-var.woff2") format("woff2"); font-weight:700 900;font-stretch:100% 125%;font-style:normal;font-display:swap} @font-face{font-family:"Instrument Sans";src:url("/fonts/instrument-sans-400.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Instrument Sans";src:url("/fonts/instrument-sans-500.woff2") format("woff2"); font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Space Mono";src:url("/fonts/space-mono-400.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Space Mono";src:url("/fonts/space-mono-700.woff2") format("woff2"); font-weight:700;font-style:normal;font-display:swap} /* Metrisch angepasste Ersatzschriften bis die lokalen Schriften geladen sind (kein Layoutsprung) */ @font-face{font-family:"Archivo Ersatz";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica-Bold");font-weight:700 900;size-adjust:125%} @font-face{font-family:"Instrument Sans Ersatz";src:local("Arial"),local("ArialMT"),local("Helvetica");font-weight:400 500;size-adjust:102.7%} @font-face{font-family:"Space Mono Ersatz";src:local("Courier New"),local("CourierNewPSMT"),local("Menlo");font-weight:400 700;size-adjust:97%} /* ========================================================================== 1 TOKENS ========================================================================== */ :root{ --anthrazit:#1D1D1B; --magenta:#E6007E; --magenta-text:#D10073; --orange:#F28C00; --papier:#FFFFFF; --blatt:#F6F5F1; --grau:#6E6E68; --grund:var(--papier); --schrift:var(--anthrazit); --ton:var(--magenta); --leise:var(--grau); --display:"Archivo","Archivo Ersatz",system-ui,sans-serif; --body:"Instrument Sans","Instrument Sans Ersatz",system-ui,sans-serif; --mono:"Space Mono","Space Mono Ersatz",ui-monospace,monospace; --breit:1360px; --rand:clamp(20px,4.5vw,72px); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:clamp(110px,14vh,170px)} body{margin:0;background:var(--grund);color:var(--schrift);font-family:var(--body); font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden; transition:background .9s ease,color .9s ease} body.fix{overflow:hidden} svg,img{display:block;max-width:100%} a{color:inherit} :focus-visible{outline:var(--linie-fokus) solid var(--ton);outline-offset:4px} .wrap{width:min(100% - 2*var(--rand),var(--breit));margin-inline:auto} /* Ab 1180px bleibt links und rechts ein freier Korridor als Buehne fuer die rollende Figur. Dadurch kann sie gross und deckend laufen, ohne Text zu ueberdecken. */ @media (min-width:1180px){ .wrap{width:min(100% - 2*var(--rand) - 2*var(--korridor),var(--breit))} } :root{--korridor:clamp(60px,7vw,130px)} h1,h2,h3{font-family:var(--display);margin:0;font-weight:800;font-stretch:115%; letter-spacing:-.035em;line-height:.92} h1{font-size:clamp(42px,7.6vw,120px);font-weight:900;letter-spacing:-.045em} h2{font-size:clamp(28px,3.9vw,58px)} h3{font-size:clamp(18px,2vw,27px);line-height:1.08;letter-spacing:-.02em;font-stretch:110%} /* Kapitelzeile mit kleinem Ausrufezeichen als Marker. Die Form entspricht dem Logo: Keil oben, Punkt darunter. */ .kap{font-family:var(--body);font-size:12.5px;font-weight:500;letter-spacing:.12em; text-transform:uppercase;color:var(--ton);display:flex;align-items:center;gap:12px; margin:0 0 24px} .kap i{font-style:normal;display:block;width:8px;height:30.5px;flex:none;color:var(--ton)} .kap i svg{display:block;width:100%;height:100%} .lead{font-size:clamp(17px,1.5vw,23px);line-height:1.42;max-width:50ch;font-weight:500} .txt{color:var(--leise);max-width:56ch;font-size:16.5px;line-height:1.6} /* ========================================================================== 2 KAPITELBAND ========================================================================== */ .kapband{overflow:hidden;padding:clamp(14px,2.4vw,26px) 0;position:relative; border-block:var(--linie) solid color-mix(in srgb,var(--schrift) 20%,transparent);z-index:4} .kapband .zeile{display:flex;gap:32px;width:max-content;align-items:center; will-change:transform} .kapband .zeile span{font-family:var(--display);font-weight:900;font-stretch:118%; letter-spacing:-.045em;font-size:clamp(26px,5.6vw,80px);white-space:nowrap; display:flex;align-items:center;gap:32px;line-height:1} .kapband .zeile span{color:inherit} /* Schrift einfarbig (weiss oder schwarz je Band), nur die Zeichen bunt (Karl, 30.10.2026) */ .kapband .zeile svg{width:.19em;flex:none;color:var(--ci1)} /* Die Zeichen im Band wechseln durch die CI-Farben */ .kapband .zeile span:nth-child(4n+2) svg{color:var(--ci2)} .kapband .zeile span:nth-child(4n+3) svg{color:var(--ci3)} .kapband .zeile span:nth-child(4n+4) svg{color:var(--ci4)} [data-welt="papier"]{--ci1:#E6007E;--ci2:#F28C00;--ci3:#1D1D1B;--ci4:#FBBA00} [data-welt="nacht"] {--ci1:#F28C00;--ci2:#FBBA00;--ci3:#E6007E;--ci4:#FFFFFF} /* Jedes Band traegt dieselbe eigene Flaeche (Karl, 30.10.2026, zweiter Anlauf: die Akzentfarben je Akt passten nicht): Anthrazit wie die Wortmarke, Schrift weiss, nur die Ausrufezeichen in den CI-Farben. Feine Linien trennen das Band von einem dunklen Akt. */ .kapband{border-block:var(--linie) solid rgba(255,255,255,.14);background:var(--anthrazit);color:#FFFFFF; --ci1:#E6007E;--ci2:#F28C00;--ci3:#FBBA00;--ci4:#FFFFFF} /* Die Baender wechseln die Farbe (Karl, 30.10.2026: weiss, schwarz, orange, pink je nachdem): jedes Band traegt per data-farbe im Markup eine Flaeche, die sich von BEIDEN Nachbarakten abhebt; Schrift weiss oder schwarz, Zeichen in Farben, die auf der Flaeche stehen. */ /* Zeichenfarben (Karl, 30.10.2026): immer anders als die Schrift und bei jedem Zeichen wechselnd. Schwarz und Weiss: pink und orange. Orange (Schrift schwarz): pink und weiss. Pink (Schrift weiss): orange und schwarz. */ .kapband[data-farbe="weiss"]{background:#FFFFFF;color:var(--anthrazit);border-block-color:rgba(29,29,27,.14); --ci1:#E6007E;--ci2:#F28C00;--ci3:#E6007E;--ci4:#F28C00} .kapband[data-farbe="schwarz"]{background:var(--anthrazit);color:#FFFFFF;--ci1:#E6007E;--ci2:#F28C00;--ci3:#E6007E;--ci4:#F28C00} .kapband[data-farbe="orange"]{background:var(--orange);color:var(--anthrazit);border-block-color:rgba(29,29,27,.12); --ci1:#E6007E;--ci2:#FFFFFF;--ci3:#E6007E;--ci4:#FFFFFF} .kapband[data-farbe="pink"]{background:var(--magenta);color:#FFFFFF;border-block-color:rgba(255,255,255,.18); --ci1:#F28C00;--ci2:#1D1D1B;--ci3:#F28C00;--ci4:#1D1D1B} [data-welt="pink"] {--ci1:#FBBA00;--ci2:#FFFFFF;--ci3:#F28C00;--ci4:#1D1D1B} [data-welt="orange"]{--ci1:#1D1D1B;--ci2:#FFFFFF;--ci3:#E6007E;--ci4:#1D1D1B} /* ========================================================================== 3 KOPFZEILE Logo mit echtem Abstand zum Rand ========================================================================== */ header.top{position:fixed;inset:0 0 auto 0;z-index:70;transition:background .5s; padding-block:clamp(14px,2vw,26px)} /* 97 % statt 92 %: ueber einem dunklen oder magentafarbenen Band blieb der leise Kopftext sonst unter 4,5:1 (WCAG 1.4.3) */ header.top.klebt{background:color-mix(in srgb,var(--grund) 97%,transparent)} body[data-welt="pink"] header.top.klebt{background:var(--grund)} /* Weiss auf Magenta braucht volle Deckung */ body[data-welt="orange"] header.top.klebt{background:var(--grund)} /* Blur nur auf dem Desktop: auf Mobilgeraeten muss der Kopf sonst in jedem Scrollbild neu gefiltert werden. */ @media (min-width:1061px){header.top.klebt{backdrop-filter:blur(16px)}} /* Logo links wie auf adcloud.de (Karl, 30.10.2026); Navigation daneben, rechts aussen Sprache, Anfrage und auf kleinen Bildschirmen der Menueknopf */ .top-in{display:flex;align-items:center;justify-content:flex-start;gap:clamp(18px,3vw,44px); min-height:52px} .nav{display:flex;gap:19px} .nav a{font-family:var(--body);font-size:14.5px;font-weight:500;letter-spacing:.01em; text-decoration:none;color:var(--leise);transition:color .3s; position:relative;padding:5px 0} .nav a:hover,.nav a.an{color:var(--schrift)} /* Hover im Kopfmenue: ein Unterstrich waechst von links (Karl, 30.10.2026: lieber Unterstrich als ein weiteres Ausrufezeichen). Der aktive Eintrag traegt ihn dauerhaft. Nur transform, kein Layoutsprung. */ .nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--linie-zustand);background:var(--ton); transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.16,1,.3,1)} .nav a:hover::after,.nav a:focus-visible::after,.nav a.an::after{transform:scaleX(1)} @media (prefers-reduced-motion:reduce){.nav a::after{transition:none}} @media (max-width:1060px){.nav{display:none}} /* Logo je Farbwelt (Karl, 30.10.2026): auf Weiss das Original. Auf Anthrazit die Fassung fuer dunklen Grund (Wortmarke weiss, Ausrufezeichen orange, Rahmen magenta). Auf Magenta komplett weiss. Keine weisse Flaeche mehr. */ .logo{display:block;width:clamp(90px,8.2vw,118px);flex:none;padding:0;border-radius:0} .logo svg path{transition:fill .5s ease} body[data-welt="nacht"] .logo .lg-wort{fill:#FFFFFF} body[data-welt="pink"] .logo .lg-wort,body[data-welt="pink"] .logo .lg-ruf, body[data-welt="pink"] .logo .lg-rahmen{fill:#FFFFFF} body[data-welt="orange"] .logo .lg-wort,body[data-welt="orange"] .logo .lg-ruf, body[data-welt="orange"] .logo .lg-rahmen{fill:#FFFFFF} /* Offenes Menue ist anthrazit: immer die dunkle Fassung, auch ueber Magenta */ header.top.menue-auf .logo .lg-wort{fill:#FFFFFF} header.top.menue-auf .logo .lg-ruf{fill:#F28C00} header.top.menue-auf .logo .lg-rahmen{fill:#E6007E} /* ========================================================================== 4 FORTSCHRITTSBALKEN ========================================================================== */ .fortschritt{position:fixed;left:0;right:0;bottom:0;height:var(--linie-zustand);z-index:75; background:color-mix(in srgb,var(--schrift) 14%,transparent)} .fortschritt b{display:block;height:100%;width:100%;background:var(--ton);transform:scaleX(0);transform-origin:left} /* ========================================================================== 5 AKTE ========================================================================== */ .akt{padding-block:clamp(84px,12vh,158px);position:relative;z-index:3} /* Jeder Akt traegt seinen eigenen Grund. Dadurch liegen Figur und Trabanten immer dahinter und koennen keinen Text ueberdecken. Sichtbar werden sie ueber die Randzonen, in denen kein Text steht. */ .akt::before{content:"";position:absolute;inset:0;background:var(--grund);z-index:-1} [data-welt="papier"]{--grund:#FFFFFF;--schrift:#1D1D1B;--ton:#E6007E;--leise:#6E6E68} [data-welt="nacht"] {--grund:#1D1D1B;--schrift:#FFFFFF;--ton:#F28C00;--leise:#9C9C95} [data-welt="pink"] {--grund:#E6007E;--schrift:#FFFFFF;--ton:#FBBA00;--leise:#FFFFFF} /* Vierte Welt Orange (Karl, 30.10.2026: warum nie Orange?): Schrift anthrazit, Akzent anthrazit, gedaempft dunkelbraun (5,1:1) */ [data-welt="orange"]{--grund:#F28C00;--schrift:#1D1D1B;--ton:#1D1D1B;--leise:#3F2F1A} .ed{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.88fr); gap:clamp(26px,5vw,78px);align-items:start} @media (max-width:900px){.ed{grid-template-columns:minmax(0,1fr);gap:22px}} .zeilenmaske{overflow:hidden;display:block;padding-bottom:.11em;margin-bottom:-.11em} .zeilenmaske>span{text-wrap:balance} .zeilenmaske > span{display:block;hyphens:none; overflow-wrap:normal} /* Nur im Notfall (vergroesserte Textabstaende, WCAG 1.4.12) bricht ein Wort der h2, statt von der Maske abgeschnitten zu werden. Ohne Textabstaende passen alle Woerter, es aendert sich nichts. */ h2 .zeilenmaske>span{overflow-wrap:break-word} /* ========================================================================== 6 HERO ========================================================================== */ .hero{min-height:100svh;display:flex;align-items:center;padding-top:110px; padding-bottom:60px;position:relative;overflow:hidden} /* Der Inhalt liegt über dem Zeichen, damit es die Schaltflächen nicht deckt */ .hero>.wrap{position:relative;z-index:2} .hero .tipp{z-index:2} .hero h1 em{font-style:normal;color:var(--magenta)} /* Das grosse Ausrufezeichen im Kopfbereich. Es steht rechts, beginnt unterhalb der Kopfzeile und beruehrt das Logo deshalb nicht. */ /* Das Zeichen faellt beim Weiterscrollen nach unten aus dem Bild. Danach erscheint es nur noch in den Kapitelbaendern. */ .hero-ruf{position:fixed;right:clamp(20px,5vw,96px);top:clamp(140px,17vh,190px); height:clamp(230px,44vh,460px);width:clamp(52px,8vw,124px);z-index:0; display:flex;align-items:center;pointer-events:none;will-change:transform} .hero-ruf svg{width:100%;height:auto;display:block;overflow:visible} .hero-ruf .keil{fill:var(--orange);transform-origin:50% 100%; animation:rufFaellt 1s cubic-bezier(.22,1.35,.4,1) .3s both} .hero-ruf .pkt{fill:var(--orange);transform-origin:50% 50%; animation:rufPunkt .6s cubic-bezier(.34,1.7,.5,1) 1.05s both} @keyframes rufFaellt{ 0%{transform:translateY(-170%) scaleY(1.3);opacity:0} 50%{opacity:1} 68%{transform:translateY(0) scaleY(.84)} 84%{transform:translateY(0) scaleY(1.07)} 100%{transform:translateY(0) scaleY(1);opacity:1} } @keyframes rufPunkt{ 0%{transform:translateY(-300%) scale(.65);opacity:0} 55%{opacity:1} 76%{transform:translateY(7%) scale(1.16)} 100%{transform:translateY(0) scale(1);opacity:1} } @media (max-width:900px){.hero-ruf{display:none}} @media (prefers-reduced-motion:reduce){.hero-ruf .keil,.hero-ruf .pkt{animation:none}} .hero-unten{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-end; justify-content:space-between;margin-top:clamp(28px,5vh,54px)} .hero-sub{max-width:42ch;font-size:clamp(16px,1.35vw,19.5px);color:var(--leise);line-height:1.5} /* Mobil steht der Hauptknopf vor dem Absatz, damit er im ersten Bild bleibt (Gestaltung, 30.10.2026) */ @media (max-width:760px){.hero-unten{display:flex;flex-direction:column-reverse;align-items:stretch;gap:22px}.hero-sub{font-size:16px}} .tipp{position:absolute;left:var(--rand);bottom:26px;font-family:var(--body);font-size:12.5px; letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:9px; color:var(--leise);z-index:5} /* ========================================================================== 8 SAEULEN was uns ausmacht ========================================================================== */ .saeulen{display:grid;grid-template-columns:repeat(3,1fr);gap:16px; margin-top:clamp(34px,5vh,60px)} @media (max-width:900px){.saeulen{grid-template-columns:1fr}} .sl{border-radius:26px;padding:clamp(26px,3vw,42px);position:relative;overflow:hidden; display:flex;flex-direction:column;min-height:clamp(260px,32vh,360px)} .sl.a{background:var(--anthrazit);color:var(--papier)} .sl.b{background:var(--magenta);color:#fff} .sl.c{background:var(--orange);color:var(--anthrazit)} .sl .nr{font-family:var(--body);font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase; margin:0 0 16px} .sl h3{font-size:clamp(24px,2.9vw,38px);line-height:.98;font-weight:900;overflow-wrap:break-word} /* "Reichweiten" ragt von 1181 bis 1451 px bis zu 14 px ueber die Titelbox in den Innenabstand. Ohne diesen Platz braeche es dort jetzt mitten im Wort. Nur Deutsch: auf Englisch passen alle Woerter, und "All channels" rueckte schon mit 3 px mehr in eine Zeile. */ .sl h3:lang(de){margin-right:-16px} .sl p{font-size:16px;line-height:1.55;margin:16px 0 0;font-weight:500} /* Saeulen reagieren wie die Reichweite-Karten: Zeichen faerbt sich, Flaeche hellt sich auf, die ganze Saeule fuehrt weiter (Karl: Ausrufezeichen einfaerben) */ .sl{isolation:isolate;display:flex;flex-direction:column} .sl::after{content:"";position:absolute;inset:0;background:#FFFFFF;opacity:0;pointer-events:none;z-index:-1;transition:opacity .35s ease} .sl:hover::after,.sl:focus-within::after{opacity:.08} .sl.c:hover::after,.sl.c:focus-within::after{opacity:.14} .sl-ruf{position:absolute;top:clamp(24px,2.8vw,38px);right:clamp(24px,2.8vw,38px);width:clamp(10px,1vw,14px);display:block} .sl-ruf svg{display:block;width:100%;height:auto;overflow:visible} .sl-ruf path,.sl-ruf rect{fill:currentColor;opacity:.3;transition:opacity .3s ease} .sl.a .sl-ruf{color:var(--orange)} .sl.b .sl-ruf{color:#FFFFFF} .sl.c .sl-ruf{color:var(--anthrazit)} .sl-ruf .k{transform-origin:50% 100%} .sl-ruf .p{transform-origin:50% 50%} .sl:hover .sl-ruf path,.sl:hover .sl-ruf rect,.sl:focus-within .sl-ruf path,.sl:focus-within .sl-ruf rect{opacity:1} .sl:hover .sl-ruf .k{animation:fqKeil .6s cubic-bezier(.22,1.35,.4,1) both} .sl:hover .sl-ruf .p{animation:fqPunkt .5s cubic-bezier(.34,1.7,.5,1) .28s both} .sl h3{transition:transform .5s cubic-bezier(.16,1,.3,1)} .sl:hover h3,.sl:focus-within h3{transform:translateX(6px)} .sl-link{margin-top:auto;padding-top:22px;align-self:flex-start;display:inline-flex;align-items:center;gap:9px; font-family:var(--body);font-size:14.5px;font-weight:500;letter-spacing:.01em;color:inherit;text-decoration:none; border-bottom:var(--linie) solid transparent;transition:border-color .25s} .sl:hover .sl-link,.sl-link:focus-visible{border-bottom-color:currentColor} .sl-link::after{content:"";position:absolute;inset:0;border-radius:inherit} /* Verweise als gefuellte Pillen, Farbe gegen die Saeule (Karl, 30.10.2026) */ .sl-link{padding:11px 18px;border-radius:var(--r-pille);border-bottom:0;background:var(--sl-kb);color:var(--sl-kf);white-space:nowrap; transition:background .3s,color .3s} .sl:hover .sl-link,.sl-link:focus-visible{border-bottom:0;background:var(--sl-kbh);color:var(--sl-kfh)} /* Jede Pille in der Farbe des Zeichens ihrer Karte, alle drei verschieden (Karl, 30.10.2026) */ .sl.a{--sl-kb:var(--orange);--sl-kf:var(--anthrazit);--sl-kbh:#FFFFFF;--sl-kfh:var(--anthrazit)} .sl.b{--sl-kb:#FFFFFF;--sl-kf:var(--magenta-text);--sl-kbh:var(--anthrazit);--sl-kfh:#FFFFFF} .sl.c{--sl-kb:var(--anthrazit);--sl-kf:#FFFFFF;--sl-kbh:#FFFFFF;--sl-kfh:var(--anthrazit)} .sl p{margin-bottom:22px} @media (prefers-reduced-motion:reduce){.sl:hover .sl-ruf .k,.sl:hover .sl-ruf .p{animation:none}.sl:hover h3,.sl:focus-within h3{transform:none}} /* ========================================================================== 9 ODOMETER zaehlt korrekt hoch ========================================================================== */ .odo{display:flex;align-items:flex-start;line-height:1.02; font-family:var(--display);font-weight:900;font-stretch:125%;letter-spacing:-.055em; font-variant-numeric:tabular-nums;font-size:clamp(60px,12vw,178px)} .odo .stelle{overflow:hidden;height:1.02em;height:1lh;display:block} .odo .trenner{display:block;height:1.02em;height:1lh;line-height:1.02} .odo .strip{display:block;will-change:transform} .odo .strip span{display:block;height:1.02em;height:1lh;line-height:1.02} .odo .plus{font-size:.52em;letter-spacing:-.02em;align-self:flex-start; padding-top:.06em;font-weight:900;opacity:.85} .odo .einheit{font-size:.38em;letter-spacing:-.03em;margin-left:.24em;align-self:flex-end; padding-bottom:.2em;font-weight:800} /* ========================================================================== 9b KENNZAHLEN UND REICHWEITENEBENEN ========================================================================== */ /* Vertrauensblock: Branchen statt Markennamen. Namen und Logos duerfen erst nach schriftlicher Freigabe der Kunden erscheinen. */ .marken{margin-top:clamp(46px,7vh,84px);padding-top:clamp(28px,4vh,44px); border-top:var(--linie) solid color-mix(in srgb,var(--schrift) 20%,transparent)} .marken-titel{font-family:var(--body);font-size:12.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--leise);margin:0 0 22px} /* Branchen und Jahresleiste sind Listen (ul, ol), ohne Einzug und Punkte */ .marken-reihe,.jahr-spur{list-style:none;margin:0;padding:0} /* minmax(0,1fr): eine Spalte wird nie breiter als ihr Anteil, ein langes Wort bricht dann um, statt das Raster ueber den Rand zu schieben (WCAG 1.4.12) */ .marken-reihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(24px,3vw,40px) clamp(18px,2.6vw,36px)} @media (max-width:1000px){.marken-reihe{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:380px){.marken-reihe{grid-template-columns:1fr}} .mk-feld{display:block;overflow-wrap:break-word} .mk-feld b{font-family:var(--display);font-weight:800;font-stretch:110%; letter-spacing:-.025em;font-size:clamp(15px,1.6vw,20px);line-height:1.12;display:block} .mk-feld span{display:block;margin-top:8px;font-size:14px;line-height:1.5; color:var(--leise)} .marken-satz{margin-top:clamp(24px,3.5vh,38px);font-size:16px;line-height:1.6; max-width:70ch;color:var(--leise)} .kennzahlen{display:grid;grid-template-columns:repeat(4,1fr); gap:clamp(28px,4vw,64px) clamp(24px,3.4vw,52px); margin-top:clamp(52px,8vh,92px)} @media (max-width:1240px){.kennzahlen{grid-template-columns:1fr 1fr}} @media (max-width:560px){.kennzahlen{grid-template-columns:1fr}} .kz{padding-top:clamp(26px,3vw,38px);border-top:var(--linie) solid var(--ton)} .kz .odo{font-size:clamp(36px,4.8vw,70px)} .kz-text{display:block;margin-top:clamp(18px,2.2vw,26px);font-size:15px;line-height:1.55; color:var(--leise)} .odo{flex-wrap:wrap} .odo .praefix{width:100%;font-family:var(--body);font-size:12.5px;font-weight:500; letter-spacing:.12em;text-transform:uppercase;opacity:.5;margin-bottom:10px; line-height:1} .ebenen{display:grid;grid-template-columns:repeat(3,1fr);gap:16px; margin-top:clamp(34px,5vh,58px)} @media (max-width:920px){.ebenen{grid-template-columns:1fr}} .eb{padding:clamp(26px,3vw,42px);border-radius:26px;overflow:hidden; display:flex;flex-direction:column;gap:12px;min-height:clamp(240px,29vh,320px)} .eb.a{background:var(--magenta);color:#fff} .eb.b{background:var(--orange);color:var(--anthrazit)} .eb.c{background:var(--papier);color:var(--anthrazit)} .eb p{font-size:16px;line-height:1.55;margin:0;font-weight:500} .eb .eb-nr{font-family:var(--body);font-size:12.5px;letter-spacing:.12em; text-transform:uppercase} .eb h3{margin:0} .eb .eb-marke{margin-top:auto;padding-top:18px;font-family:var(--body);font-size:12.5px; letter-spacing:.14em;text-transform:uppercase} /* ========================================================================== 9c ZIELSCHEIBE Vier Ausrufezeichen fliegen nacheinander ein. Jeder Schuss sitzt naeher an der Mitte: sichtbar gemachte Zuspitzung der Zielgruppe. ========================================================================== */ .tgt-raster{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(28px,5vw,72px);align-items:start;margin-top:clamp(30px,4.5vh,52px)} @media (max-width:900px){.tgt-raster{grid-template-columns:1fr;gap:28px}} .tgt-scheibe{position:relative;position:sticky;top:clamp(110px,14vh,150px)} @media (max-width:900px){.tgt-scheibe{position:relative;top:0;max-width:340px}} .tgt-text>.treffer{margin-top:clamp(24px,3.5vh,40px)} .scheibe{width:100%;height:auto;overflow:visible} .scheibe .ringe{color:inherit} .scheibe .ring{fill:none;stroke:currentColor;stroke-width:var(--linie);vector-effect:non-scaling-stroke} .scheibe .r1{opacity:.45} .scheibe .r2{opacity:.55} .scheibe .r3{opacity:.7} .scheibe .r4{opacity:.85} .scheibe .mitte{fill:currentColor} /* Die Beschriftung steht unter der Scheibe. Im Zentrum liegen die weissen Ringe, dort waere weisser Text nicht lesbar. */ /* Etikett unter der Zielscheibe: Beschriftung, kein Knopf (Karl, 30.10.2026: "das ist keine CTA") */ .scheibe-fuss{display:block;margin-top:clamp(14px,2vh,22px);text-align:center; font-family:var(--body);font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase; padding:0;border-radius:0;background:none;color:#FFFFFF; opacity:0;transform:translateY(8px); transition:opacity .45s ease,transform .45s cubic-bezier(.16,1,.3,1)} .scheibe-fuss.an{opacity:1;transform:none} .scheibe .pfeil{opacity:0;transition:opacity .3s} .treffer{list-style:none;margin:0;padding:0;counter-reset:t} .treffer li{display:block;gap:clamp(14px,2vw,24px); align-items:baseline;padding:clamp(14px,2vw,20px) 0;position:relative; border-top:var(--linie) solid color-mix(in srgb,var(--schrift) 40%,transparent); transition:transform .45s cubic-bezier(.16,1,.3,1)} .treffer .inhalt{transition:opacity .45s ease} .treffer li:last-child{border-bottom:var(--linie) solid color-mix(in srgb,var(--schrift) 40%,transparent)} .js .treffer li:not(.an) .inhalt{opacity:.32} .treffer li.an{transform:translateX(clamp(8px,1.4vw,18px))} .treffer .inhalt b{font-family:var(--display);font-weight:800;font-stretch:112%; font-size:clamp(18px,2.2vw,28px);letter-spacing:-.03em;display:block;line-height:1.05} .treffer .inhalt span{display:block;margin-top:8px;font-size:15px;line-height:1.5} .treffer .quelle{display:inline-block;margin-top:10px;font-style:normal; font-family:var(--body);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase; padding:5px 10px;border-radius:var(--r-pille); border:var(--linie) solid color-mix(in srgb,var(--schrift) 70%,transparent)} /* ========================================================================== 11 LEISTUNGSLISTE Grosse Typo, beim Ueberfahren faehrt das Farbfeld durch die ganze Zeile. Beim Scrollen wandert der geloeste Punkt des Ausrufezeichens die Liste hinunter und schlaegt jede Zeile an, auf Wunsch mit Ton. ========================================================================== */ .liste{position:relative;margin-top:clamp(36px,5.5vh,64px); border-top:var(--linie) solid color-mix(in srgb,var(--schrift) 20%,transparent)} .li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) auto; gap:clamp(14px,3vw,42px);align-items:center;width:100%;text-align:left; padding:clamp(16px,2.2vw,26px) clamp(14px,2vw,26px);background:none;border:0; cursor:pointer;font-family:inherit;color:inherit;position:relative; border-bottom:var(--linie) solid color-mix(in srgb,var(--schrift) 20%,transparent); transition:opacity .55s ease,transform .55s cubic-bezier(.16,1,.3,1),color .3s} /* Die Zeile fährt beim Scrollen einzeln herein */ .js .li:not(.da){opacity:0;transform:translateY(22px)} /* Was den Tastaturfokus hat, ist sofort voll sichtbar, auch vor seiner Einblendung (WCAG 2.4.7). Bei data-fx nur die Deckkraft: die Bewegung bleibt am Scrollstand. */ [data-fx]:focus-within{opacity:1!important} .js .li:not(.da):focus-visible,.js .fq:not(.da):focus-within,.js .form:not(.sichtbar) .feld:focus-within{ opacity:1;transform:none;transition:none} /* Kurzer Farbdurchlauf beim Hereinkommen, wie beim Überfahren */ .li.blitz::before{transform:none} .li.blitz .name,.li.blitz .nu,.li.blitz .mehr{color:var(--kt)} .li.blitz .name .pin{opacity:1;transform:none} @media (max-width:820px){.li{grid-template-columns:1fr auto;gap:10px}.li .nu{display:none}} .li:hover{z-index:1} .li.da:hover{transform:translateX(clamp(8px,1.2vw,16px))} .li .name{font-family:var(--display);font-weight:800;font-stretch:112%; font-size:clamp(19px,2.6vw,37px);letter-spacing:-.035em;line-height:1; display:flex;align-items:center;gap:14px} .li .name .pin{width:clamp(5px,.6vw,8px);flex:none;opacity:0;transform:translateY(-8px); transition:opacity .35s,transform .35s} .li:hover .name .pin{opacity:1;transform:none} .li .nu{font-size:15.5px;line-height:1.45;color:var(--leise);margin:0} .li .mehr{font-family:var(--body);font-size:12.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase} .li:hover .mehr{opacity:1} .li::before{content:"";position:absolute; inset:0 calc(-1*clamp(10px,1.4vw,20px));background:var(--kf);z-index:-1; transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1)} .li:hover::before,.li:focus-visible::before{transform:none} .li:hover .nu,.li:hover .name,.li:hover .mehr, .li:focus-visible .nu,.li:focus-visible .name,.li:focus-visible .mehr{color:var(--kt)} .li:focus-visible .name .pin{opacity:1;transform:none} /* ========================================================================== 12 JAHRESLEISTE ========================================================================== */ .jahr{margin-top:clamp(30px,4.5vh,54px);overflow:hidden;position:relative; padding-block:clamp(18px,3vh,32px)} .jahr-linie{position:absolute;left:0;right:0;top:calc(50% - var(--linie)/2);height:var(--linie); background:color-mix(in srgb,var(--schrift) 24%,transparent)} .jahr-spur{display:flex;gap:clamp(24px,4vw,58px);width:max-content;position:relative; will-change:transform;align-items:center} /* Der erste Termin steht auf der Rasterkante wie Ueberschrift und Text darueber, nicht am Fensterrand */ .jahr-spur{padding-inline-start:calc((100% - min(100% - 2*var(--rand),var(--breit)))/2)} @media (min-width:1180px){.jahr-spur{padding-inline-start:calc((100% - min(100% - 2*var(--rand) - 2*var(--korridor),var(--breit)))/2)}} .ap{min-width:clamp(118px,15vw,186px);position:relative;padding-top:40px} .ap .mk{position:absolute;left:0;top:2px;width:13px;height:13px;border-radius:50%; background:var(--grund);border:var(--linie) solid var(--ton)} .ap.spitze .mk{width:8px;height:30px;border:0;background:none;top:-2px} .ap b{font-family:var(--display);font-weight:800;font-stretch:112%; font-size:clamp(16px,1.9vw,24px);letter-spacing:-.03em;display:block;line-height:1.05} .ap.spitze b{color:var(--ton)} .ap span{font-family:var(--body);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--leise);display:block;margin-top:8px} .sonder{display:grid;grid-template-columns:repeat(3,1fr);gap:16px; margin-top:clamp(32px,5vh,56px)} @media (max-width:900px){.sonder{grid-template-columns:1fr}} .sk{padding-top:22px;border-top:var(--linie) solid var(--ton)} .sk h4{margin:0 0 12px;font-family:var(--display);font-weight:800;font-stretch:110%; letter-spacing:-.02em;line-height:1.08;font-size:clamp(18px,2vw,27px)} /* ========================================================================== 13 ABLAUF ========================================================================== */ .schritte{margin-top:clamp(32px,5vh,56px);display:grid;grid-template-columns:repeat(4,1fr); gap:clamp(14px,2.4vw,28px)} @media (max-width:960px){.schritte{grid-template-columns:1fr 1fr}} @media (max-width:560px){.schritte{grid-template-columns:1fr}} .sr{padding-top:24px;border-top:var(--linie) solid color-mix(in srgb,var(--schrift) 20%,transparent); position:relative} .sr .fuell{position:absolute;left:0;right:0;top:calc(-1*var(--linie));height:var(--linie);background:var(--ton); transform:scaleX(0);transform-origin:left;will-change:transform} .sr .nrx{font-family:var(--display);font-weight:900;font-stretch:125%; font-size:clamp(36px,4.8vw,64px);line-height:.85;letter-spacing:-.05em;color:var(--ton); display:block;margin-bottom:16px} .sr h3{margin:0 0 12px} .sr p{margin:0;font-size:15.5px;line-height:1.5;color:var(--leise)} /* ========================================================================== 14 SIEGEL ========================================================================== */ .siegel{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,38px);align-items:flex-end; margin-top:clamp(32px,5vh,56px)} .siegel a,.siegel figure{margin:0;display:flex;flex-direction:column;gap:12px; text-decoration:none;align-items:flex-start;justify-content:flex-end} .siegel img{width:auto;transition:transform .35s} /* Hoehen nach gleicher Wirkflaeche, nicht nach gleicher Hoehe: quer- und rundformatige Siegel wirken bei gleicher Hoehe sonst deutlich groesser. */ .sg-tp{height:clamp(72px,8.4vw,104px)} .sg-ib{height:clamp(46px,5.4vw,67px)} .sg-ku{height:clamp(60px,6.9vw,86px)} .sg-ds{height:clamp(58px,6.8vw,84px)} .siegel a:hover img{transform:translateY(-5px)} .siegel figcaption,.siegel .cap{font-family:var(--body);font-size:13.5px;font-weight:500;letter-spacing:.01em;text-transform:none;line-height:1.5;max-width:24ch} /* Vier Siegel in einer Reihe, auf einer Grundlinie (31.10.2026) */ .siegel figcaption,.siegel .cap{max-width:22ch}.siegel{align-items:flex-start}.siegel a,.siegel figure{display:grid;grid-template-rows:clamp(72px,8.4vw,104px) auto;align-items:end;justify-content:start}.siegel .cap,.siegel figcaption{align-self:start} /* ========================================================================== 14b KONTAKT Direktangaben und Formular ========================================================================== */ .form{background:var(--blatt);border-radius:26px;padding:clamp(24px,3.2vw,42px); border:var(--linie) solid rgba(29,29,27,.2);display:flex;flex-direction:column;gap:16px} /* ---- Formular ---------------------------------------------------------- Die Beschriftung sitzt im Feld und wandert beim Ausfuellen nach oben. Waehrend die Pflichtfelder gefuellt werden, baut sich daneben ein Ausrufezeichen auf: aus dem Umriss wird Schritt fuer Schritt ein volles Zeichen. Beim Absenden setzt es sich. ---------------------------------------------------------------------- */ .form-kopf{display:flex;align-items:center;gap:12px;margin:0 0 6px} .fk-text{font-family:var(--body);font-size:12.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--grau);flex:none} .fk-balken{flex:1;height:var(--linie-zustand);border-radius:1px;overflow:hidden; background:color-mix(in srgb,var(--anthrazit) 14%,transparent);max-width:180px} .fk-balken b{display:block;height:100%;width:100%;background:var(--magenta); transform:scaleX(0);transform-origin:left; transition:transform .5s cubic-bezier(.16,1,.3,1)} .fortzeichen{width:11px;flex:none;display:block;position:relative} /* overflow:visible: der Umriss (Strich 7) ragt oben am Keil und unten am Punkt ueber die viewBox */ .fortzeichen svg{width:100%;height:auto;display:block;overflow:visible} .fortzeichen .umriss{opacity:.28} .fortzeichen .umriss path,.fortzeichen .umriss rect{fill:none;stroke:currentColor;stroke-width:var(--linie);vector-effect:non-scaling-stroke} .fortzeichen .fuellung{fill:var(--magenta); transition:clip-path .55s cubic-bezier(.16,1,.3,1)} .form.gesetzt .fortzeichen{animation:zeichenSetzt .6s cubic-bezier(.3,1.5,.5,1)} @keyframes zeichenSetzt{ 0%{transform:translateY(0) scaleY(1)} 35%{transform:translateY(-26%) scaleY(1.14)} 70%{transform:translateY(0) scaleY(.86)} 100%{transform:translateY(0) scaleY(1)} } .feld{position:relative;display:block; transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1)} .js .form:not(.sichtbar) .feld{opacity:0;transform:translateY(14px)} .form.sichtbar .feld[data-stufe="1"]{transition-delay:.04s} .form.sichtbar .feld[data-stufe="2"]{transition-delay:.10s} .form.sichtbar .feld[data-stufe="3"]{transition-delay:.16s} .form.sichtbar .feld[data-stufe="4"]{transition-delay:.22s} .form.sichtbar .feld[data-stufe="5"]{transition-delay:.28s} .feld input,.feld textarea{font-family:var(--body);font-size:16px;width:100%; color:var(--anthrazit);background:transparent;border:0;border-bottom:var(--linie) solid rgba(29,29,27,.5); border-radius:0;padding:24px 0 9px;transition:border-color .3s} .feld textarea{resize:vertical;min-height:96px;line-height:1.5;display:block} .feld label{position:absolute;left:0;top:20px;font-family:var(--body);font-size:16px; color:var(--grau);pointer-events:none;transform-origin:left top; transition:transform .28s cubic-bezier(.16,1,.3,1),color .28s} /* Beschriftung wandert nach oben, sobald das Feld gefuellt ist oder den Fokus hat */ .feld input:focus + label,.feld textarea:focus + label, .feld input:not(:placeholder-shown) + label, .feld textarea:not(:placeholder-shown) + label{ transform:translateY(-22px) scale(.8);color:var(--magenta-text)} .feld input:focus,.feld textarea:focus{outline:none;border-bottom-color:var(--magenta)} /* Unterstrich waechst beim Fokus von links nach rechts */ /* Die Huelle umschliesst nur Eingabe und Beschriftung. Dadurch bleibt der Unterstrich an der Eingabe, auch wenn darunter eine Meldung erscheint. */ .feld-box{position:relative;display:block} .feld-box::after{content:"";position:absolute;left:0;bottom:0;height:var(--linie-zustand);width:100%; background:var(--magenta);transform:scaleX(0);transform-origin:left; transition:transform .4s cubic-bezier(.16,1,.3,1)} .feld:focus-within .feld-box::after{transform:none} .feld input[aria-invalid="true"],.feld textarea[aria-invalid="true"]{ border-bottom-color:#C0142B} .feld-hinweis{display:block;font-family:var(--body);font-size:13.5px;letter-spacing:0; line-height:1.5; color:#C0142B;min-height:0;max-height:0;overflow:hidden;opacity:0; transition:max-height .3s ease,opacity .3s ease,padding-top .3s ease} .feld-hinweis.an{max-height:6em;opacity:1;padding-top:7px} .feld input[aria-invalid="true"] + label,.feld textarea[aria-invalid="true"] + label{ color:#C0142B} @media (prefers-reduced-motion:reduce){ .feld,.js .form:not(.sichtbar) .feld{opacity:1;transform:none} .form.gesetzt .fortzeichen{animation:none} } /* ---- Absenden ----------------------------------------------------------- Die Felder fahren gestaffelt nach oben weg, das Ausrufezeichen waechst in die Mitte und setzt sich. Danach erscheint der Dank. ---------------------------------------------------------------------- */ .form{position:relative} .form.sendet .feld,.form.sendet .pruef,.form.sendet .ds-hinweis,.form.sendet .pflicht-hinweis, .form.sendet .form-kopf,.form.sendet .btn,.form.sendet .form-status{ opacity:0;transform:translateY(-16px); transition:opacity .32s ease,transform .32s cubic-bezier(.5,0,.75,0)} .form.sendet .feld[data-stufe="1"]{transition-delay:0s} .form.sendet .feld[data-stufe="2"]{transition-delay:.04s} .form.sendet .feld[data-stufe="3"]{transition-delay:.08s} .form.sendet .feld[data-stufe="4"]{transition-delay:.12s} .form.sendet .feld[data-stufe="5"]{transition-delay:.16s} .dank{position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;text-align:center;gap:clamp(20px,3vh,32px); padding:clamp(24px,4vw,44px);opacity:0;pointer-events:none; transition:opacity .45s ease .1s} .form.fertig .dank{opacity:1;pointer-events:auto} .dank-ruf{width:clamp(26px,3vw,42px);display:block} .dank-ruf svg{width:100%;height:auto;display:block} .form.fertig .dank-ruf .keil{transform-origin:50% 100%; animation:dankKeil .7s cubic-bezier(.22,1.35,.4,1) .18s both} .form.fertig .dank-ruf .pkt{transform-origin:50% 50%; animation:dankPunkt .5s cubic-bezier(.34,1.7,.5,1) .62s both} @keyframes dankKeil{ 0%{transform:translateY(-150%) scaleY(1.3);opacity:0} 55%{opacity:1} 72%{transform:translateY(0) scaleY(.84)} 88%{transform:translateY(0) scaleY(1.06)} 100%{transform:translateY(0) scaleY(1);opacity:1} } @keyframes dankPunkt{ 0%{transform:translateY(-260%) scale(.6);opacity:0} 60%{opacity:1} 80%{transform:translateY(6%) scale(1.15)} 100%{transform:translateY(0) scale(1);opacity:1} } .dank b{font-family:var(--display);font-weight:900;font-stretch:115%;letter-spacing:-.035em; font-size:clamp(24px,3.2vw,38px);line-height:1.06;display:block} .dank span{display:block;font-size:16px;line-height:1.55;color:var(--grau);max-width:34ch} .dank b:focus{outline:none} /* traegt nach dem Absenden den Fokus, ist aber nicht bedienbar */ @media (prefers-reduced-motion:reduce){ .form.fertig .dank-ruf .keil,.form.fertig .dank-ruf .pkt{animation:none} } .honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} html:not(.js) #sendKnopf{display:none} /* ohne Skript kein JSON-Versand, der noscript-Hinweis bleibt */ .ds-hinweis{font-size:13.5px;line-height:1.65;color:var(--grau);margin:4px 0 0} /* Die Sternchen sind erklaert, bevor das erste Feld kommt (WCAG 3.3.2) */ .pflicht-hinweis{font-size:13.5px;line-height:1.65;color:var(--grau);margin:0} .ds-hinweis a{color:var(--magenta-text)} /* ---- Kontakt als Buehne (Karl, 30.10.2026: Formular deutlich zentraler, wie adcloud.de): Ueberschrift und Versprechen oben, darunter das Formular in voller Breite als Karte mit zwei Spalten, Direktkontakt als Zeile darunter. */ .ko-kopf{max-width:70ch} .ko-kopf .lead{max-width:62ch} .form.formkarte{margin-top:clamp(30px,4.5vw,52px);display:grid;grid-template-columns:1fr 1fr; gap:18px clamp(20px,3vw,40px);align-items:start} .formkarte>.voll,.formkarte>.form-kopf,.formkarte>.kanaele,.formkarte>.form-fuss{grid-column:1/-1} .form-fuss{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 28px} .form-fuss .feld.rechen{margin:0} .form-fuss .form-status{flex-basis:100%} /* Waehrend des Versands: Knopf bleibt fokussierbar (aria-disabled statt disabled), sonst faellt der Tastaturfokus auf body (WCAG 2.4.3) */ .btn[aria-disabled="true"]{opacity:.6;cursor:progress} @media (max-width:760px){.form-fuss .btn{width:100%;justify-content:center}} .formkarte .btn{align-self:auto;margin-top:0} @media (max-width:760px){.form.formkarte{grid-template-columns:1fr}} .direkt.unter{margin-top:clamp(22px,3vw,34px);padding-top:18px;flex-direction:row;flex-wrap:wrap; align-items:baseline;gap:6px 28px} .direkt.unter .direkt-titel{margin:0} .direkt .mail{font-family:var(--display);font-weight:800;font-stretch:112%; font-size:clamp(19px,2vw,26px);letter-spacing:-.03em} /* ---- Sicherheitsfrage: Aufgabe vom Dienst, Antwort vom Menschen. Die Reihe nutzt den Rahmen der Pruefung (.pruef) samt Drehkreis und Haken. */ .feld .rechen-label{position:static;top:auto;left:auto;transform:none;pointer-events:auto;display:block; font-family:var(--body);font-size:16px;font-weight:500;color:var(--anthrazit);margin:0 0 10px} .rechen-reihe{display:flex;align-items:center;gap:12px;width:max-content;max-width:100%} .rechen-aufgabe{font-family:var(--mono);font-size:17px;font-weight:700;letter-spacing:.04em; color:var(--anthrazit);min-width:5ch} .rechen-reihe input{width:4.5ch;flex:none;font-family:var(--mono);font-size:17px;font-weight:700; text-align:center;padding:4px 2px;border:0;border-bottom:var(--linie) solid rgba(29,29,27,.5); border-radius:0;background:transparent;color:var(--anthrazit)} .rechen-reihe input:focus{outline:none;border-bottom-color:var(--magenta)} .rechen-reihe input[aria-invalid="true"]{border-bottom-color:#C0142B} .pruef[data-status="fertig"] .rechen-aufgabe,.pruef[data-status="fertig"] input{color:var(--anthrazit)} /* ---- Verschmolzene Akte (30.10.2026): Siegel im Akt "Wer wir sind", Timing im Akt "Ablauf". Kuerzerer Weg zur Anfrage, Inhalte bleiben. */ .geprueft,.zwischen{margin-top:clamp(56px,8vh,96px);padding-top:clamp(26px,4vh,40px); border-top:var(--linie) solid color-mix(in srgb,var(--schrift) 20%,transparent)} .geprueft-titel,.zwischen h3{font-family:var(--display);font-weight:800;font-stretch:115%; letter-spacing:-.035em;line-height:.96;margin:0} .geprueft-titel{font-size:clamp(26px,3vw,40px);margin-bottom:14px} .zwischen h3{font-size:clamp(26px,3vw,40px)} /* Regelbloecke im Akt Reichweite (E-Mail-Versand und Lead-Qualifizierung, 31.10.2026): Steckbrief auf der Rasterkante */ .regelblock .txt{margin:14px 0 0;max-width:62ch} .regelblock .steckbrief{margin-top:clamp(28px,4vh,44px)} .regelblock .steckbrief+.txt{margin-top:clamp(24px,3vh,36px)} .regelblock dd a{color:var(--schrift);text-decoration:underline;text-decoration-color:var(--ton);text-decoration-thickness:var(--linie);text-underline-offset:3px} /* Werte ein- oder zweizeilig: die Erlaeuterungen beginnen trotzdem auf einer Hoehe */ @media (min-width:981px){.regelblock .steckbrief dd{display:grid;grid-template-rows:minmax(2.04em,auto) auto}} /* Die Regeln haben laengere Texte als der Steckbrief im Akt Unternehmen: unter 600 px einspaltig */ @media (max-width:600px){.regelblock .steckbrief{grid-template-columns:1fr}} /* Lead-Qualifizierung: laengere Erlaeuterungen, ab 981 px zwei mal zwei statt vier schmaler Spalten, Werte einzeilig */ @media (min-width:981px){#lead-qualifizierung .steckbrief{grid-template-columns:repeat(2,minmax(0,1fr))}#lead-qualifizierung .steckbrief dd{grid-template-rows:auto auto}} .geprueft .kap,.zwischen .kap{margin-bottom:14px} .geprueft .txt{margin:0;max-width:62ch} .geprueft .siegel{margin-top:clamp(24px,4vh,40px)} /* ---- Fuss --------------------------------------------------------------- Gleiche Schriftfamilien wie die uebrige Seite: Anzeigenschrift fuer die Ueberschriften, Fliesstextschrift fuer Links, Schreibmaschinenschrift nur fuer die kleinen Bezeichner. ---------------------------------------------------------------------- */ .seitenfuss{background:var(--grund);color:var(--schrift);position:relative;z-index:3} footer{margin-top:clamp(56px,9vh,110px);padding-top:clamp(34px,5vh,58px); padding-bottom:clamp(22px,3vh,32px); border-top:var(--linie) solid color-mix(in srgb,var(--schrift) 20%,transparent)} .fuss-oben{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.7fr) minmax(0,1.5fr); gap:clamp(26px,4vw,60px)} @media (max-width:960px){.fuss-oben{grid-template-columns:1fr;gap:34px}} @media (max-width:560px){.fuss-oben{grid-template-columns:1fr}} .fuss-logo{display:block;width:clamp(90px,8.2vw,118px);margin-bottom:18px} .fuss-marke{display:block} .fuss-satz{font-size:15px;line-height:1.55;color:var(--leise);margin:0;max-width:38ch} .fuss-titel{font-family:var(--body);font-size:12.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--leise);margin:0 0 16px} .fuss-spalte{display:flex;flex-direction:column;gap:11px;align-items:flex-start} .fuss-spalte a{font-family:var(--body);font-size:15.5px;text-decoration:none; position:relative;transition:color .25s} .fuss-spalte a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:var(--linie-zustand); background:currentColor;transform:scaleX(0);transform-origin:left; transition:transform .35s cubic-bezier(.16,1,.3,1)} .fuss-spalte a:hover::after{transform:none} .fuss-siegel{display:flex;flex-direction:column} /* Die vier Siegel haben sehr verschiedene Formate: hochkant, quer, leicht hochkant und rund. Bei gleicher Hoehe wirken quer- und rundformatige deutlich groesser. Die Hoehen sind deshalb auf gleiche Wirkflaeche gerechnet, nicht auf gleiche Hoehe. */ .fs-reihe{display:flex;flex-wrap:wrap;gap:clamp(14px,1.8vw,24px);align-items:flex-end} .fs-siegel{display:block;line-height:0;flex:none} .fs-siegel img{width:auto;display:block;transition:transform .3s} .fs-tp img{height:clamp(64px,7vw,88px)} .fs-ib img{height:clamp(42px,4.6vw,57px)} .fs-ku img{height:clamp(53px,5.8vw,73px)} .fs-ds img{height:clamp(52px,5.7vw,71px)} a.fs-siegel:hover img{transform:translateY(-5px)} .fuss-unten{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between; align-items:center;margin-top:clamp(30px,4.5vh,52px);padding-top:20px; border-top:var(--linie) solid color-mix(in srgb,var(--schrift) 20%,transparent); font-family:var(--body);font-size:12.5px;letter-spacing:.12em;color:var(--leise)} .fuss-unten nav{display:flex;flex-wrap:wrap;gap:24px} .fuss-unten nav a{font-family:var(--body);font-size:14.5px;font-weight:500;letter-spacing:.01em; min-height:24px;display:inline-flex;align-items:center} .fuss-unten a{text-decoration:none;transition:color .25s} .fuss-unten a:hover{color:var(--schrift)} .form .btn{align-self:flex-start;margin-top:6px} .form-status{font-family:var(--body);font-size:14px;letter-spacing:0;margin:0; min-height:1.2em} .form-status.fehler{color:#C0142B} .form-status.ok{color:var(--magenta-text)} /* Sicherheitspruefung nach dem Rechennachweis-Verfahren */ .pruef{display:flex;align-items:center;gap:11px;padding:13px 16px;border-radius:11px; border:var(--linie) solid rgba(29,29,27,.4);background:#FAFAF8; font-family:var(--body);font-size:13.5px;letter-spacing:0;color:var(--grau); transition:border-color .3s,background .3s,color .3s} .pruef-text{line-height:1.4} .pruef-zeichen{width:16px;height:16px;border-radius:50%;flex:none;position:relative; border:2px solid currentColor;opacity:.5} .pruef[data-status="laeuft"]{border-color:rgba(29,29,27,.3)} .pruef[data-status="laeuft"] .pruef-zeichen{opacity:1;border-color:transparent; border-top-color:currentColor;border-right-color:currentColor; animation:pruefDreht .7s linear infinite} @keyframes pruefDreht{to{transform:rotate(360deg)}} .pruef[data-status="fertig"]{border-color:var(--magenta);background:#FFF5FA; color:var(--magenta-text)} .pruef[data-status="fertig"] .pruef-zeichen{opacity:1;border-color:var(--magenta); background:var(--magenta)} .pruef[data-status="fertig"] .pruef-zeichen::after{content:"";position:absolute; left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0; transform:rotate(42deg)} /* ========================================================================== 15 KARRIERE, KONTAKT ========================================================================== */ .jobs{margin-top:clamp(30px,4.5vh,52px); border-top:var(--linie) solid color-mix(in srgb,var(--schrift) 20%,transparent)} .job{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center; padding:clamp(18px,2.4vw,28px) 0;text-decoration:none;position:relative; border-bottom:var(--linie) solid color-mix(in srgb,var(--schrift) 20%,transparent); transition:transform .4s cubic-bezier(.16,1,.3,1)} .job:hover{transform:translateX(clamp(12px,2vw,26px))} .job .meta{font-family:var(--body);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase; display:flex;flex-wrap:wrap;gap:14px;margin-bottom:10px;color:var(--leise)} .job .meta i{font-style:normal;color:var(--ton)} .job h3{margin:0 0 8px;font-size:clamp(19px,2.3vw,30px);font-weight:800} .job p{margin:0;color:var(--leise);font-size:15.5px;max-width:58ch} .job .go{width:9px;flex:none;opacity:.4;transition:opacity .3s} .job:hover .go{opacity:1} .job-note{font-family:var(--body);font-size:12.5px;color:var(--leise);padding-top:22px; letter-spacing:.06em} .leerbox{border-top:var(--linie) solid var(--ton);padding-top:26px;margin-top:26px} /* CTAs in der Fliesstextschrift (Karl, 30.10.2026): die gesperrte Schreibmaschinenschrift war zu klein zum Lesen. Instrument Sans 500, 15 px, Gross- und Kleinschreibung. Lokal gehostet wie alle Schriften. */ .btn{font-family:var(--body);font-size:15px;font-weight:500;letter-spacing:.01em; text-decoration:none;padding:15px 26px;border-radius:var(--r-pille); display:inline-flex;align-items:center;gap:11px;cursor:pointer;background:transparent; border:var(--linie) solid currentColor;color:inherit;transition:.3s} .btn svg{width:5px;flex:none} .btn.voll{background:var(--ton);border-color:var(--ton);color:#fff} .btn.voll:hover{background:var(--schrift);border-color:var(--schrift);color:var(--grund)} .btn.leer{background:var(--grund)} .btn.leer:hover{background:var(--schrift);color:var(--grund);border-color:var(--schrift)} /* Knoepfe stechen hervor (Karl, 30.10.2026): nie dieselbe Flaeche wie die Kachel dahinter. Der Zweitknopf ist in der Schriftfarbe der Welt gefuellt. */ .btn.leer{background:var(--schrift);color:var(--grund);border-color:var(--schrift)} .btn.leer:hover{background:var(--grund);color:var(--schrift);border-color:var(--schrift)} .knopfreihe{display:flex;flex-wrap:wrap;gap:12px} .rufmini{display:inline-flex;align-items:center;width:5px;flex:none} .rufmini svg{width:100%;height:auto} /* ========================================================================== 16 SCHUBLADE ========================================================================== */ .dunkelheit{position:fixed;inset:0;background:rgba(29,29,27,.6);backdrop-filter:blur(4px); opacity:0;pointer-events:none;transition:opacity .45s;z-index:95} .dunkelheit.auf{opacity:1;pointer-events:auto} .lade{position:fixed;top:0;right:0;bottom:0;width:min(620px,100%);background:#FFFFFF; color:var(--anthrazit);z-index:100;transform:translateX(101%); transition:transform .58s cubic-bezier(.32,.72,0,1);overflow-y:auto; box-shadow:-34px 0 80px rgba(29,29,27,.24)} .lade.auf{transform:none} .lade-kopf{padding:clamp(26px,4vw,46px) clamp(24px,4vw,46px) 0;position:relative} .lade-ruf{width:11px;display:block;margin-bottom:18px} .lade-kopf .lade-titel{font-family:var(--display);font-stretch:115%;line-height:.95;font-size:clamp(26px,4vw,42px);margin:9px 0 0;letter-spacing:-.04em;font-weight:900;overflow-wrap:break-word} /* "Datenschutzerklaerung" ist am Desktop 2 px breiter als die Box: Platz im Innenabstand, damit das weiche Trennzeichen erst auf schmalen Bildschirmen greift */ .lade-kopf .lade-titel.recht{margin-right:-16px} .lade-kopf .kat{font-family:var(--body);font-size:12.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--grau)} .zu{position:sticky;top:22px;z-index:3;margin:22px 22px -66px auto;width:44px;height:44px;border-radius:var(--r-pille); border:var(--linie) solid rgba(29,29,27,.2);background:#FFFFFF;box-shadow:0 6px 18px rgba(29,29,27,.14); cursor:pointer;display:grid;place-items:center;transition:.25s} .zu:hover{background:var(--anthrazit);color:var(--papier);border-color:var(--anthrazit)} .lade-koerper{padding:clamp(22px,3vw,34px) clamp(24px,4vw,46px) clamp(36px,5vw,56px)} .lade-lead{font-size:18px;line-height:1.5;font-weight:500;margin:0 0 28px} .blk{border-top:var(--linie) solid rgba(29,29,27,.2);padding-top:20px;margin-top:20px} .blk h4{font-family:var(--body);font-size:12.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--grau);margin:0 0 8px} .blk ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px} .blk li{display:grid;grid-template-columns:6px 1fr;gap:15px;align-items:start;font-size:15.5px} .blk li svg{width:5px;margin-top:6px} .blk p{margin:0;font-size:15.5px;line-height:1.55} .mrkn{display:flex;flex-wrap:wrap;gap:7px} .mrkn span{font-family:var(--body);font-size:13px;font-weight:500;letter-spacing:.01em;padding:7px 14px;border-radius:var(--r-pille);border:var(--linie) solid rgba(29,29,27,.3)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important; scroll-behavior:auto!important} .zeilenmaske > span{transform:none!important} [data-fx]{transform:none!important;opacity:1!important} .sr .fuell{transform:scaleX(1)!important} .jahr-spur,.kapband .zeile{transform:none!important} .jahr{overflow-x:auto} .hero-ruf{position:absolute} } /* ========================================================================== 17 ERGAENZUNGEN FASSUNG 51 ========================================================================== */ /* Nur fuer Screenreader und Suchmaschinen lesbar, optisch ausgeblendet */ .vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* Sprungmarke fuer Tastatur: erscheint erst beim Fokus */ .sprung{position:fixed;left:16px;top:12px;z-index:200;padding:12px 18px;border-radius:var(--r-pille); background:var(--anthrazit);color:#fff;font-family:var(--body);font-size:14.5px;font-weight:500; letter-spacing:.01em;text-decoration:none; transform:translateY(-160%);transition:transform .3s cubic-bezier(.16,1,.3,1)} .sprung:focus{transform:none} /* Jeder Akt setzt seine Schriftfarbe selbst. Vorher erbte der Text die Farbe vom body, der erst bei 45 Prozent Sichtbarkeit umschaltet: beim Hereinscrollen stand dunkle Schrift kurz auf dunklem Grund. Das weiche Pendeln bleibt in den Kapitelbaendern, die weiter dem body folgen. */ .akt{color:var(--schrift)} /* Pink: Gelb erreicht auf Magenta nur 2,6 zu 1. Kleine Texte stehen deshalb in Weiss, das Gelb bleibt fuer Flaechen und Marker. Die Kapitelzeile folgt ihrem Akt, nicht dem body: sonst traegt sie beim Hereinscrollen noch die Farbe der alten Welt (WCAG 1.4.3). */ .akt[data-welt="pink"]>.wrap>.kap{color:#FFFFFF} .akt[data-welt="orange"]>.wrap>.kap{color:var(--anthrazit)} /* Gefuellte Knoepfe: Weiss auf Orange oder Gelb ist nicht lesbar */ .akt[data-welt="nacht"] .btn.voll:not(:hover),.akt[data-welt="pink"] .btn.voll:not(:hover){color:var(--anthrazit)} .lade .btn.voll:not(:hover){color:#FFFFFF} /* Steckbrief: die wichtigsten Fakten als zitierfaehige Liste */ .steckbrief{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(22px,3vw,44px) clamp(18px,2.6vw,36px);margin:clamp(44px,7vh,84px) 0 0;padding:0} @media (max-width:980px){.steckbrief{grid-template-columns:1fr 1fr}} @media (max-width:340px){.steckbrief{grid-template-columns:1fr}} .steckbrief>div{padding-top:20px;border-top:var(--linie) solid var(--ton)} .steckbrief dt{font-family:var(--body);font-size:12.5px;font-weight:500;letter-spacing:.12em; text-transform:uppercase;color:var(--leise);margin:0 0 14px} .steckbrief dd{margin:0;font-family:var(--display);font-weight:800;font-stretch:112%; font-size:clamp(21px,2.3vw,32px);letter-spacing:-.035em;line-height:1.02} .steckbrief dd span{display:block;margin-top:10px;font-family:var(--body);font-weight:400; font-stretch:100%;font-size:14.5px;letter-spacing:0;line-height:1.5;color:var(--leise)} /* Produktliste: Zeile als Ueberschrift, Details stehen im Quelltext */ .li-art{display:block} .li-kopf{margin:0;font:inherit;letter-spacing:normal;line-height:inherit} .li{font-family:var(--body)} .li-detail[hidden]{display:none} .lade-koerper li svg{color:var(--ladefarbe,var(--magenta))} /* Rechtstexte in der Lade: gleiche Gliederung wie auf den eigenstaendigen Seiten */ .rechtstext h2{font-family:var(--display);font-weight:800;font-stretch:112%;letter-spacing:-.03em; font-size:clamp(19px,2.2vw,26px);line-height:1.1;margin:30px 0 12px;padding-top:18px;border-top:var(--linie) solid var(--magenta)} .rechtstext h2:first-child{margin-top:0;padding-top:0;border-top:0} .rechtstext h3{font-size:17px;line-height:1.3;margin:22px 0 8px} .rechtstext p,.rechtstext li{font-size:15.5px;line-height:1.6;color:var(--anthrazit);max-width:62ch} .rechtstext p{margin:0 0 12px} .rechtstext ul{padding-left:20px;margin:0 0 14px} .rechtstext .mono-block{font-family:var(--body);font-size:15.5px;line-height:1.7} .rechtstext .stand{color:var(--grau);font-size:14px} .rechtstext a{color:var(--magenta-text)} .rechtstext .mail{white-space:normal;overflow-wrap:anywhere} /* lange Adresse bricht bei 320 px um (WCAG 1.4.10) */ .rechtstext .hinweis{background:var(--blatt);border:var(--linie) solid rgba(29,29,27,.2);border-radius:16px; padding:18px 20px;font-size:14.5px;color:var(--grau);margin-top:14px} /* ========================================================================== 17a FASSUNG 52 Reichweite im Fokus, Anfrage in einer Minute ========================================================================== */ /* Hero: Claim als Kapitelzeile, darunter die Reichweite als Versprechen */ .hero-kap{margin-bottom:clamp(18px,3vh,30px)} .hero{padding-bottom:84px} @media (max-height:760px){.hero .tipp{display:none}} /* Drei Reichweiten als Leiste. Jede Kachel ist ein Verweis zur Anfrage und waehlt dort den Bereich vor. */ .reichleiste{list-style:none;margin:clamp(40px,7vh,72px) 0 0;padding:0;display:grid; grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,36px)} @media (max-width:760px){.reichleiste{grid-template-columns:1fr;gap:0}} /* Kacheln als Spalten gleicher Hoehe; seit 30.10.2026 abends Belege ohne Knopf (Karl: CTA-Dichte) */ .reichleiste li{display:flex} .reichleiste .kachel{display:flex;flex-direction:column;align-items:flex-start;flex:1 1 auto;padding-top:18px; border-top:var(--linie) solid var(--magenta)} @media (max-width:760px){.reichleiste .kachel{padding:18px 0}} .reichleiste b{display:block;font-family:var(--display);font-weight:900;font-stretch:115%; font-size:clamp(30px,3.6vw,52px);letter-spacing:-.04em;line-height:1} .reichleiste span{display:block;margin:10px 0 16px;font-size:14.5px;line-height:1.5; color:var(--leise);max-width:30ch} .eb .eb-link{white-space:nowrap} /* Reichweite-Karten: Verweis zur Anfrage am Fuss jeder Karte */ .eb .eb-link{margin-top:14px;display:inline-flex;align-items:center;gap:9px;align-self:flex-start; text-decoration:none;color:inherit;font-family:var(--body);font-size:14.5px;font-weight:500; letter-spacing:.01em;padding:11px 18px;border-radius:var(--r-pille); border:var(--linie) solid currentColor;transition:background .3s,color .3s,border-color .3s} .eb .eb-link .rufmini{width:5px} /* Kontakt: Direktangaben neben dem Formular */ .direkt{margin-top:clamp(26px,4vh,40px);padding-top:22px;border-top:var(--linie) solid var(--ton); display:flex;flex-direction:column;gap:8px;align-items:flex-start} .direkt-titel{margin:0 0 4px;font-family:var(--body);font-size:12.5px;font-weight:500; letter-spacing:.12em;text-transform:uppercase;color:var(--leise)} .direkt a{font-family:var(--display);font-weight:800;font-stretch:112%; font-size:clamp(19px,2vw,26px);letter-spacing:-.03em;text-decoration:none;color:inherit; transition:color .25s} .direkt a:hover{color:var(--magenta-text)} /* Bereichswahl als Chips. Die Beschriftungen stehen NICHT absolut wie bei den Eingabefeldern, deshalb die Rueckstellung der .feld-Regeln. */ .kanaele{border:0;padding:0;margin:0 0 4px;min-width:0} .kanaele legend{padding:0;margin:0 0 12px;font-family:var(--body);font-size:16px;font-weight:500; color:var(--anthrazit);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline} .kanaele legend span{font-size:13.5px;color:var(--grau);font-weight:400} .chips{display:flex;flex-wrap:wrap;gap:8px} .kanaele .chip{position:relative;top:auto;left:auto;display:inline-flex;pointer-events:auto; transform:none;font:inherit;color:inherit;transition:none} .chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0;border:0} .chip span{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--r-pille); border:var(--linie) solid rgba(29,29,27,.5);background:#FFFFFF;font-family:var(--body); font-size:14.5px;font-weight:500;letter-spacing:.01em; color:var(--anthrazit);cursor:pointer; transition:background .25s,border-color .25s,color .25s} /* Kaestchen statt Punkt: Mehrfachauswahl, kein Radio. Gewaehlt: weisses Kaestchen mit magentafarbenem Haken auf der magentafarbenen Flaeche. */ .chip span{position:relative} .chip span::before{content:"";width:13px;height:13px;border-radius:3px;flex:none; border:var(--linie) solid currentColor;transition:background .25s,border-color .25s} .chip span::after{content:"";position:absolute;left:20px;top:50%;width:4px;height:8px; border:solid var(--magenta);border-width:0 2px 2px 0;transform:translateY(-62%) rotate(42deg); opacity:0;transition:opacity .2s} .chip:hover span{border-color:var(--anthrazit)} .chip input:checked + span{background:var(--magenta);border-color:var(--magenta);color:#FFFFFF} .chip input:checked + span::before{background:#FFFFFF;border-color:#FFFFFF} .chip input:checked + span::after{opacity:1} .chip input:focus-visible + span{outline:var(--linie-fokus) solid var(--magenta);outline-offset:3px} .form.sichtbar .feld[data-stufe="6"]{transition-delay:.34s} .form.sendet .feld[data-stufe="6"]{transition-delay:.20s} /* E-Mail-Adresse: richtig fuer Menschen, unbrauchbar fuer Sammelprogramme (dasselbe Verfahren wie auf adcloud.de). Zwei per display:none verborgene Stuecke: Wer die Auszeichnung entfernt und nach name@domain sucht, liest eine Anschrift auf .mail, eine von der ICANN dauerhaft gesperrte Endung, die nirgends aufloest. Wer den Quelltext durchsucht, findet nichts, weil vor dem @ ein Klammerzeichen steht. Menschen sehen, kopieren und hoeren die richtige Adresse. Einen mailto-Verweis gibt es bewusst nicht. ACHTUNG: Die vollstaendige Adresse darf an keiner Stelle der Datei stehen, auch nicht in Kommentaren oder Skriptmeldungen. pruefen.py bricht sonst ab. */ .mail{white-space:nowrap} .ms{display:none} /* Ohne JavaScript kann das Formular nicht senden (Pruefmarke): dann Direktweg */ html:not(.js) #kontaktForm{display:none} .ohne-js{background:var(--blatt);border-radius:26px;padding:clamp(24px,3.2vw,42px); border:var(--linie) solid rgba(29,29,27,.2);font-size:16px;line-height:1.6} /* CTAs: groesser, mit Schatten und Hebung; das Ausrufezeichen hupft beim Ueberfahren (nur transform, kein Layout). */ .btn{font-size:16px;padding:17px 30px;gap:12px; transition:transform .35s cubic-bezier(.16,1,.3,1),background .3s,color .3s,border-color .3s,box-shadow .35s,opacity .3s} .btn.voll{box-shadow:0 10px 26px color-mix(in srgb,var(--ton) 28%,transparent)} .btn.leer{border-width:var(--linie)} .btn:hover{transform:translateY(-2px)} .btn.voll:hover{box-shadow:0 16px 34px rgba(29,29,27,.26)} .btn:hover .rufmini svg{animation:rufHuepft .55s cubic-bezier(.22,1.35,.4,1)} @keyframes rufHuepft{0%{transform:translateY(0)}35%{transform:translateY(-38%) scaleY(1.15)}70%{transform:translateY(4%) scaleY(.9)}100%{transform:none}} .hero .btn.voll{font-size:17px;padding:19px 34px} @media (prefers-reduced-motion:reduce){.btn:hover{transform:none}.btn:hover .rufmini svg{animation:none}} /* Sprachwahl als leiser Textumschalter (Karl, 31.10.2026: woanders hin und weniger prominent; vorher Pille mit Ausklappliste): DE und EN nebeneinander, die aktive Sprache in Schriftfarbe mit Unterstrich wie der aktive Menueeintrag, die andere leise. Nur ab 1061 px im Kopf, darunter steht sie im Menue-Fuss ("English"/"Deutsch"). */ .sprache-wrap{display:flex;align-items:center;gap:8px} .sprache-an,.sprache-link{position:relative;padding:6px 6px;font-family:var(--body);font-size:14.5px; font-weight:500;letter-spacing:.03em;text-decoration:none;color:var(--leise);transition:color .3s} .sprache-an{color:var(--schrift)} .sprache-link:hover,.sprache-link:focus-visible{color:var(--schrift)} .sprache-an::after,.sprache-link::after{content:"";position:absolute;left:6px;right:6px;bottom:1px;height:var(--linie-zustand); background:var(--ton);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.16,1,.3,1)} .sprache-an::after,.sprache-link:hover::after,.sprache-link:focus-visible::after{transform:scaleX(1)} @media (prefers-reduced-motion:reduce){.sprache-an::after,.sprache-link::after{transition:none}} @media (max-width:1060px){header.top .sprache-wrap{display:none}} /* Ohne Skript oeffnet der Menue-Knopf nichts: dann steht die Sprachwahl auch unter 1061 px im Kopf, denn seit 31.10.2026 fuehrt der Seitenfuss keinen Sprachverweis mehr */ @media (max-width:1060px){html:not(.js) header.top .sprache-wrap{display:flex}html:not(.js) .menue-knopf{display:none}} /* Auf Magenta ist Gelb als Strich zu schwach (2,6:1): aktive Sprache und aktiver Menuepunkt weiss */ body[data-welt="pink"] .sprache-an::after,body[data-welt="pink"] .sprache-link::after,body[data-welt="pink"] .nav a::after{background:#FFFFFF} [data-welt="pink"] .btn.leer{color:var(--magenta-text)} /* Pink: Hauptknoepfe weiss mit Magenta-Schrift statt Gelb (Karl, 30.10.2026), beim Ueberfahren anthrazit */ .akt[data-welt="pink"] .btn.voll,body[data-welt="pink"] .kopf-cta{background:#FFFFFF;border-color:#FFFFFF; box-shadow:0 10px 26px rgba(29,29,27,.22)} .akt[data-welt="pink"] .btn.voll:not(:hover),body[data-welt="pink"] .kopf-cta:not(:hover){color:var(--magenta-text)} .akt[data-welt="pink"] .btn.voll:hover,body[data-welt="pink"] .kopf-cta:hover{background:var(--anthrazit);border-color:var(--anthrazit);color:#FFFFFF} /* Orange: Hauptknoepfe anthrazit mit weisser Schrift, Zweitknoepfe weiss; beim Ueberfahren getauscht */ .akt[data-welt="orange"] .btn.voll,body[data-welt="orange"] .kopf-cta{background:var(--anthrazit);border-color:var(--anthrazit);box-shadow:0 10px 26px rgba(29,29,27,.22)} .akt[data-welt="orange"] .btn.voll:not(:hover),body[data-welt="orange"] .kopf-cta:not(:hover){color:#FFFFFF} .akt[data-welt="orange"] .btn.voll:hover,body[data-welt="orange"] .kopf-cta:hover{background:#FFFFFF;border-color:#FFFFFF;color:var(--anthrazit)} .akt[data-welt="orange"] .btn.leer{background:#FFFFFF;border-color:#FFFFFF;color:var(--anthrazit)} .akt[data-welt="orange"] .btn.leer:hover{background:var(--anthrazit);border-color:var(--anthrazit);color:#FFFFFF} /* Menue-Symbol bis 480 px; die Sprachwahl steht seit 31.10.2026 unter 1061 px nur im Menue-Fuss */ @media (max-width:480px){ .menue-knopf{width:40px;padding:0;justify-content:center;gap:0} .menue-knopf .mk-text,.menue-knopf .rufmini{display:none} .menue-knopf::before{content:"";width:16px;height:2px;background:currentColor;border-radius:1px; box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor;transition:box-shadow .25s,transform .25s} .menue-knopf[aria-expanded="true"]::before{transform:rotate(45deg);box-shadow:0 0 0 currentColor} .menue-knopf[aria-expanded="true"]::after{content:"";position:absolute;width:16px;height:2px;background:currentColor;border-radius:1px;transform:rotate(-45deg)} .menue-knopf{position:relative} .top-rechts{gap:8px} } /* Anfrage-Knopf im Kopf (Karl: immer oben sichtbar, nicht unten rechts) */ .top-rechts{display:flex;align-items:center;gap:clamp(14px,2vw,26px);flex:none;margin-left:auto} .kopf-cta{font-size:14.5px;height:40px;padding:0 18px;box-shadow:none} .kopf-cta:hover{box-shadow:none} body[data-welt="nacht"] .kopf-cta:not(:hover){color:var(--anthrazit)} .cta-kurz{display:none} @media (max-width:560px){ .cta-lang{display:none}.cta-kurz{display:inline} .top-rechts{gap:10px} /* Bei offenem Menue weicht der Knopf dem Schliessen-Knopf; die Anfrage steht im Menue (06) */ header.top.menue-auf .kopf-cta{display:none} } /* Reichweite-Karten: die ganze Karte ist der Knopf, Flaeche hellt sich auf */ .eb{position:relative;isolation:isolate} .eb::after{content:"";position:absolute;inset:0;background:#FFFFFF;opacity:0;pointer-events:none;z-index:-1;transition:opacity .35s ease} /* Magenta und Weiss dunkeln ab: ein weisser Schleier senkt Weiss auf Magenta unter 4,5:1 */ .eb.a::after,.eb.c::after{background:var(--anthrazit)} .eb:hover::after,.eb:focus-within::after{opacity:.08} .eb.c:hover::after,.eb.c:focus-within::after{opacity:.05} .eb .eb-link::after{content:"";position:absolute;inset:0;border-radius:inherit} /* Karten-Knoepfe gefuellt in Gegenfarbe zur Karte (Karl, 30.10.2026), nie gestreckt; beim Ueberfahren der Karte kehrt sich die Fuellung um */ .eb .eb-link{justify-self:start;width:max-content;background:var(--eb-kb);border-color:var(--eb-kb);color:var(--eb-kf)} .eb.a{--eb-kb:#FFFFFF;--eb-kf:var(--magenta-text);--eb-kbh:var(--anthrazit);--eb-kfh:#FFFFFF} .eb.b{--eb-kb:var(--anthrazit);--eb-kf:#FFFFFF;--eb-kbh:#FFFFFF;--eb-kfh:var(--anthrazit)} .eb.c{--eb-kb:var(--magenta);--eb-kf:#FFFFFF;--eb-kbh:var(--anthrazit);--eb-kfh:#FFFFFF} .eb.d{--eb-kb:var(--anthrazit);--eb-kf:#FFFFFF;--eb-kbh:#FFFFFF;--eb-kfh:var(--anthrazit)} .eb:hover .eb-link,.eb:focus-within .eb-link{background:var(--eb-kbh);border-color:var(--eb-kbh);color:var(--eb-kfh)} /* Fokusring je Karte in einer Farbe, die sich von der Kartenflaeche abhebt (WCAG 1.4.11) */ .eb.a .eb-link:focus-visible{outline-color:#FFFFFF} .eb.b .eb-link:focus-visible,.eb.c .eb-link:focus-visible,.eb.d .eb-link:focus-visible{outline-color:var(--anthrazit)} .eb h3{transition:transform .5s cubic-bezier(.16,1,.3,1)} .eb:hover h3,.eb:focus-within h3{transform:translateX(6px)} @media (prefers-reduced-motion:reduce){.eb:hover h3,.eb:focus-within h3{transform:none}} /* Reichweite: vier Kanaele, E-Mail als breite Leitkarte mit grosser Zahl */ .ebenen{grid-template-columns:repeat(3,1fr)} .eb.a{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); grid-template-rows:auto auto 1fr auto auto;gap:12px clamp(20px,3vw,48px);min-height:0} .eb.a>*{grid-column:1} .eb.a .eb-zahl{grid-column:2;grid-row:1/-1;align-self:center;justify-self:end;text-align:right; font-family:var(--display);font-weight:900;font-stretch:115%;letter-spacing:-.05em;line-height:.9; font-size:clamp(58px,8.4vw,136px);margin:0} .eb.a .eb-zahl small{display:block;font-family:var(--body);font-weight:500;font-stretch:100%; letter-spacing:0;font-size:clamp(14px,1.3vw,18px);line-height:1.4;margin-top:10px} .eb.d{background:#FBBA00;color:var(--anthrazit)} /* kein eigener Hover fuer .eb.d: die Umkehr (Anthrazit -> Weiss) kommt aus --eb-kbh wie bei allen Karten */ @media (max-width:920px){ .ebenen{grid-template-columns:1fr} .eb.a{grid-template-columns:1fr;grid-template-rows:none} .eb.a .eb-zahl{display:none} } .reichleiste{grid-template-columns:repeat(4,minmax(0,1fr))} .reichleiste li:first-child b{color:var(--magenta-text)} @media (max-width:1000px){.reichleiste{grid-template-columns:1fr 1fr;gap:0 clamp(16px,5vw,28px)}} @media (max-width:760px){.reichleiste{grid-template-columns:1fr;gap:0}} /* Pflichtfelder: Sternchen statt "freiwillig" (Karl, 30.10.2026) */ .pflicht{color:var(--magenta-text);font-weight:600;margin-left:.3em} .ds-hinweis .pflicht,.pflicht-hinweis .pflicht{margin-left:0} /* Direktkontakt: Telefon als Verweis, E-Mail als Koeder-Text */ .direkt .mail{font-family:var(--display);font-weight:800;font-stretch:112%; font-size:clamp(19px,2vw,26px);letter-spacing:-.03em} /* Fokus in der Magenta-Welt: Gelb auf Magenta erreicht nur 2,6:1. Die Regeln gelten nur im Akt und im Kopf darueber, nie im Menue (immer Anthrazit) oder in der Lade (immer Weiss): dort waere der Ring sonst Anthrazit auf Anthrazit oder Weiss auf Weiss (WCAG 2.4.7) */ .akt[data-welt="pink"] :focus-visible,body[data-welt="pink"] header.top:not(.menue-auf) :focus-visible, body[data-welt="pink"] .sprung:focus-visible{outline-color:#FFFFFF} body[data-welt="orange"] header.top:not(.menue-auf) :focus-visible{outline-color:#1D1D1B} header.top.menue-auf :focus-visible,.menue :focus-visible{outline-color:var(--orange)} /* Magenta-Kleintext auf hellem Grund in der dunkleren Stufe (Hausregel) */ .akt[data-welt="papier"]>.wrap>.kap{color:var(--magenta-text)} /* Hero mobil: Leiste zweispaltig bis 360 px, "Scrollen"-Hinweis nur auf grossen Bildschirmen */ @media (max-width:760px){.hero .tipp{display:none}} .akt-cta{margin-top:clamp(34px,5vh,56px)} @media (prefers-reduced-motion:reduce){ .pruef[data-status="laeuft"] .pruef-zeichen{animation:none!important;border-color:currentColor;opacity:1} } :root{--linie:1px;--linie-zustand:2px;--linie-fokus:3px;--r-karte:26px;--r-feld:14px;--r-pille:10px} /* --r-pille 10px statt Pille (Karl, 30.10.2026): der Eckradius des Logo-Rahmens, in Kopfgroesse rund 10px; jeder Knopf wird so ein kleiner Logo-Rahmen, das Zeichen darin sitzt wie im Logo. Karten bleiben bei 26px. */ /* Linien und Radien aus einem System (Design-Review): Linien 1 px (--linie), auch Akzentlinien, Kapitelbaender, Rahmen und Jahresleiste; Zustaende 2 px (--linie-zustand), Fokus 3 px (--linie-fokus: Ringe und Fokuslinie im Feld). Karl, 01.11.2026: "unterschiedliche Liniendicke". Ganze Pixel, weil Chrome Rahmen auf ganze Pixel abrundet, Linien aus Hoehe und Hintergrund aber nicht. Karten 26, Felder 14, Pillen 100 px */ .kapband{border-block:0} .liste,.fragen,.jobs,.marken,footer{border-top-width:var(--linie)} .zu svg path{stroke-width:var(--linie-zustand);vector-effect:non-scaling-stroke} .jobs:has(.leerbox){border-top:0} .li,.fq,.job{border-bottom-width:var(--linie)} .treffer li{border-top-width:var(--linie)} .treffer li:last-child{border-bottom-width:var(--linie)} .fuss-unten{border-top-width:var(--linie)} .kz,.sk,.sr,.steckbrief>div,.reichleiste .kachel,.direkt,.leerbox,.rechtstext h2{border-top-width:var(--linie)} .chip span,.zu,.menue-knopf,.treffer .quelle,.mrkn span,.eb .eb-link{border-width:var(--linie)} .btn{border-width:var(--linie)} .btn.leer{border-width:var(--linie)} .sl,.eb,.form,.ohne-js{border-radius:var(--r-karte)} .pruef,.rechtstext .hinweis,.fq summary{border-radius:var(--r-feld)} .btn,.chip span,.treffer .quelle,.mrkn span,.eb .eb-link,.menue-knopf,.sprung{border-radius:var(--r-pille)} /* ========================================================================== 17b MOBILES MENUE Unter 1060 Pixel Breite ersetzt ein Knopf die Navigation. Die Flaeche faehrt von oben auf, die Eintraege folgen gestaffelt wie in einer App. ========================================================================== */ .menue-knopf{display:none;align-items:center;gap:10px;height:40px;padding:0 18px; border-radius:var(--r-pille);border:var(--linie) solid currentColor;background:var(--grund); color:var(--schrift);font-family:var(--body);font-size:14.5px;font-weight:500; letter-spacing:.01em;cursor:pointer; transition:background .35s ease,color .35s ease,border-color .35s ease} .menue-knopf svg{width:5px;display:block} @media (max-width:1060px){.menue-knopf{display:inline-flex}} header.top.menue-auf{background:transparent;backdrop-filter:none} /* Auch wenn ein Akt in Orange oder Magenta den klebenden Kopf einfaerbt (body[data-welt]-Regeln oben): bei offenem Menue kein farbiger Balken ueber dem Anthrazit, sonst verschwand das orange Ausrufezeichen im Logo auf Orange und der Magenta-Rahmen auf Magenta (31.10.2026). */ body[data-welt] header.top.menue-auf{background:transparent;box-shadow:none} header.top.menue-auf .menue-knopf{background:#FFFFFF;color:var(--anthrazit);border-color:#FFFFFF} .menue{position:fixed;inset:0;z-index:65;background:var(--anthrazit);color:#FFFFFF; display:flex;flex-direction:column;justify-content:flex-start;overflow-y:auto;scroll-padding-top:96px; padding:130px var(--rand) calc(36px + env(safe-area-inset-bottom)); clip-path:inset(0 0 100% 0);visibility:hidden; transition:clip-path .62s cubic-bezier(.76,0,.24,1),visibility 0s linear .62s} .menue.auf{clip-path:inset(0 0 0 0);visibility:visible; transition:clip-path .62s cubic-bezier(.76,0,.24,1),visibility 0s} /* margin-top:auto statt justify-content:flex-end: auf kurzen Bildschirmen (Querformat) laeuft die Liste sonst nach oben aus dem Fenster und ist nicht mehr erreichbar (31.10.2026) */ .menue nav{display:flex;flex-direction:column;gap:4px;margin-top:auto} .menue nav a{font-family:var(--display);font-weight:800;font-stretch:112%; font-size:clamp(34px,9.5vw,62px);letter-spacing:-.04em;line-height:1.08;color:#FFFFFF; text-decoration:none;display:flex;align-items:baseline;gap:16px;padding:4px 0; opacity:0;transform:translateY(36px); transition:opacity .35s ease,transform .6s cubic-bezier(.16,1,.3,1),color .25s} .menue nav a span{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.2em; color:var(--orange);font-stretch:100%} .menue nav a:hover,.menue nav a:focus-visible{color:var(--orange)} .menue.auf nav a{opacity:1;transform:none} .menue.auf nav a:nth-child(1){transition-delay:.20s} .menue.auf nav a:nth-child(2){transition-delay:.25s} .menue.auf nav a:nth-child(3){transition-delay:.30s} .menue.auf nav a:nth-child(4){transition-delay:.35s} .menue.auf nav a:nth-child(5){transition-delay:.40s} .menue.auf nav a:nth-child(6){transition-delay:.45s} .menue.auf nav a:focus-visible{transition-delay:0s} /* Fokusfarbe sofort, ohne Einblend-Verzoegerung */ .menue nav a{overflow-wrap:anywhere} /* mit vergroesserten Textabstaenden bricht ein langes Wort, statt das Menue quer rollen zu lassen (WCAG 1.4.12) */ .menue-fuss{margin-top:34px;padding-top:20px;border-top:var(--linie) solid rgba(255,255,255,.2); display:flex;flex-wrap:wrap;gap:12px 26px;font-family:var(--body);font-size:14.5px; font-weight:500;letter-spacing:.01em;opacity:0;transition:opacity .4s ease .45s} .menue-fuss a,.menue-fuss .mail{min-height:24px;display:inline-flex;align-items:center} .menue.auf .menue-fuss{opacity:1} .menue-fuss a{color:#FFFFFF;text-decoration:none} @media (min-width:1061px){.menue{display:none}} /* ========================================================================== 18 HAEUFIGE FRAGEN Jede Antwort setzt ein Ausrufezeichen: geschlossen steht nur der Umriss, beim Oeffnen faellt das Zeichen gefuellt in seine Position. ========================================================================== */ .fragen{margin-top:clamp(36px,5.5vh,64px); border-top:var(--linie) solid color-mix(in srgb,var(--schrift) 20%,transparent)} .fq{border-bottom:var(--linie) solid color-mix(in srgb,var(--schrift) 20%,transparent); transition:opacity .55s ease,transform .55s cubic-bezier(.16,1,.3,1)} .js .fq:not(.da){opacity:0;transform:translateY(20px)} .fq summary{list-style:none;cursor:pointer;display:grid; grid-template-columns:clamp(34px,4vw,52px) minmax(0,1fr) auto; gap:clamp(12px,2vw,26px);align-items:center;padding:clamp(18px,2.4vw,28px) 0; position:relative;border-radius:4px} .fq summary::-webkit-details-marker{display:none} .fq summary:focus-visible{outline-offset:6px} .fq-nr{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.2em; color:var(--leise)} .fq h3{font-size:clamp(19px,2.3vw,32px);line-height:1.08;letter-spacing:-.03em; font-weight:800;transition:color .3s ease,transform .5s cubic-bezier(.16,1,.3,1)} .fq summary:hover h3{transform:translateX(clamp(6px,1vw,14px))} .fq[open] h3{color:var(--ton)} .fq-zeichen{width:clamp(9px,.9vw,12px);display:block;flex:none;margin-right:4px} .fq-zeichen svg{display:block;width:100%;height:auto;overflow:visible} .fq-zeichen path,.fq-zeichen rect{fill:currentColor;opacity:.28; transition:fill .3s ease,opacity .3s ease} /* Ueberfahren: Zeichen und Nummer faerben sich, die Zeile bekommt einen Hauch Farbe */ .fq summary{padding-inline:clamp(8px,1vw,14px);margin-inline:calc(-1 * clamp(8px,1vw,14px)); transition:background .3s ease} .fq summary:hover{background:color-mix(in srgb,var(--ton) 6%,transparent)} .fq summary:hover .fq-zeichen path,.fq summary:hover .fq-zeichen rect{fill:var(--ton);opacity:1} .fq summary:hover .fq-nr{color:var(--ton)} .fq-zeichen .k{transform-origin:50% 100%} .fq-zeichen .p{transform-origin:50% 50%} .fq[open] .fq-zeichen path,.fq[open] .fq-zeichen rect{fill:var(--ton);opacity:1} .fq[open] .fq-zeichen .k{animation:fqKeil .6s cubic-bezier(.22,1.35,.4,1) both} .fq[open] .fq-zeichen .p{animation:fqPunkt .5s cubic-bezier(.34,1.7,.5,1) .28s both} @keyframes fqKeil{0%{transform:translateY(-60%) scaleY(1.2)}62%{transform:translateY(0) scaleY(.86)} 100%{transform:none}} @keyframes fqPunkt{0%{transform:translateY(-220%) scale(.7)}70%{transform:translateY(8%) scale(1.14)} 100%{transform:none}} .fq-antwort{overflow:hidden} .fq-antwort-in{padding:0 0 clamp(24px,3.2vw,36px) calc(clamp(34px,4vw,52px) + clamp(12px,2vw,26px)); max-width:calc(74ch + 80px)} .fq-antwort-in p{margin:0;font-size:16.5px;line-height:1.65;color:var(--leise)} .fq-antwort-in p:first-child{color:var(--schrift);font-size:clamp(17px,1.4vw,19.5px); line-height:1.5;font-weight:500;margin-bottom:12px} @media (max-width:560px){.fq-antwort-in{padding-left:0}} .fragen-fuss{margin-top:clamp(26px,4vh,40px);display:flex;flex-wrap:wrap;gap:16px 26px; align-items:center} .fragen-fuss p{margin:0;color:var(--leise);font-size:16px} @media (prefers-reduced-motion:reduce){ .fq[open] .fq-zeichen .k,.fq[open] .fq-zeichen .p{animation:none} .js .fq:not(.da){opacity:1;transform:none} } /* Stellenliste: gleiche Zeilen wie die Produkte, alle gleich hoch (Karl, 30.10.2026). Der Titel bekommt die breitere Spalte und eine Groesse, bei der auch der laengste Titel auf einer Zeile bleibt; jede Zeile hat dieselbe Mindesthoehe. */ .stellen .li{grid-template-columns:minmax(0,2.4fr) minmax(0,1fr) auto;min-height:112px} /* hoechste Zeile (zweizeiliger Titel oder Eckdaten) als Mass fuer alle */ .stellen .li .name{font-size:clamp(18px,1.75vw,25px)} /* Der Titel ist EIN Flex-Kind neben dem Zeichen; sonst rutscht "(m/w/d)" als eigenes Kind ab */ .stellen .li .name .titel{display:inline;min-width:0} .nb{white-space:nowrap} /* kein Umbruch innerhalb von "(m/w/d)" oder Bindestrich-Woertern in Stellentiteln */ @media (max-width:820px){ .stellen .li{grid-template-columns:1fr auto;row-gap:6px} .stellen .li .nu{display:block;grid-column:1;grid-row:2;font-size:14px;padding-left:19px} .stellen .li .mehr{grid-column:2;grid-row:1/3} } .stellen a.li{text-decoration:none} .blk p+p{margin-top:10px} .job-note a{color:inherit} /* Formularkarte weiss wie die FAQ-Zeilen, mit feiner Linie und weichem Schatten (Karl, 30.10.2026: das beige Blatt stach heraus, die dunkle Karte gefiel nicht). */ .form.formkarte{background:#FFFFFF;border:var(--linie) solid rgba(29,29,27,.2); box-shadow:0 30px 60px -36px rgba(29,29,27,.35)} .formkarte .rechen-reihe.pruef{background:#FFFFFF} .formkarte .pruef[data-status="fertig"]{background:#FFF5FA} /* ========================================================================== DESIGN-DURCHGANG 1440 PX (30.10.2026): drei Kritiker, ein Design Lead. Ein Mass fuer Gleiches: Skala 27/32/40/52, Pillen 40/62/66, eine Kante. Steht am Ende des Stils und ueberschreibt die fruehen Regeln bewusst. ========================================================================== */ /* 1. Hero schliesst bei 900 px Hoehe mit den Kachel-Pillen */ @media (min-width:761px){.hero{padding-top:clamp(132px,15vh,150px);padding-bottom:clamp(40px,6vh,56px)}} h1{font-size:clamp(42px,7vw,110px)} .hero-kap{margin-bottom:clamp(16px,2.6vh,26px)} .hero-unten{margin-top:clamp(24px,4vh,40px)} .hero-sub{margin:0;font-size:clamp(16px,1.3vw,19px)} @media (min-width:1400px){ .hero-unten{flex-wrap:nowrap} .hero-sub{flex:1 1 38ch;max-width:42ch} .hero-unten .knopfreihe{flex:none} } .reichleiste{margin-top:clamp(32px,5vh,48px)} .reichleiste span{margin:8px 0 14px} /* 2. Kacheln: Zahl einzeilig, Pille 40 px mit Zeichen, Umkehr beim Ueberfahren */ .reichleiste b{font-size:clamp(26px,3vw,43px);white-space:nowrap} html[lang="en"] .reichleiste b{font-size:clamp(22px,2.45vw,35px)} html[lang="en"] .eb.a .eb-zahl{font-size:clamp(48px,6vw,100px)} /* 3. Anfrage: nach dem Klick stehen Felder im Bild, Ueberschrift zweizeilig */ html{scroll-padding-top:clamp(136px,15vh,176px)} #kontakt.akt{padding-top:clamp(56px,8vh,80px)} .ko-kopf{max-width:none} .ko-kopf .lead{max-width:62ch} .form.formkarte{margin-top:clamp(24px,3vw,36px)} /* 4. Formular: Sendeknopf buendig, Sicherheitsfrage als Zeile, Haken erst nach Eingabe */ .form.formkarte .form-fuss .btn{align-self:flex-end;margin-top:0} .form.formkarte .rechen-reihe.pruef{border:0;background:transparent;padding:0;border-radius:0;gap:12px} .form.formkarte .pruef[data-status="bereit"],.form.formkarte .pruef[data-status="fertig"]{border:0;background:transparent;color:var(--grau)} .form.formkarte .pruef[data-status="bereit"] .pruef-zeichen{opacity:1;border-color:currentColor;background:transparent} .form.formkarte .pruef[data-status="bereit"] .pruef-zeichen::after{content:none} .form.formkarte .pruef[data-status="fertig"] .pruef-zeichen{opacity:1;border-color:var(--magenta);background:var(--magenta)} .formkarte .ds-hinweis{max-width:68ch} .formkarte .feld input,.formkarte .feld textarea,.formkarte .rechen-reihe input{border-bottom-width:var(--linie)} .formkarte .feld-box::after{height:var(--linie)} /* Fokus im Feld deutlicher als nur der Farbwechsel der Linie (WCAG 2.4.13): dicke Linie, beim Rechenfeld als Schatten (verschiebt nichts und wirkt auch im Fehlerzustand) */ .formkarte .feld:focus-within .feld-box::after{height:var(--linie-fokus)} .formkarte .rechen-reihe input:focus{box-shadow:0 calc(var(--linie-fokus) - var(--linie)) 0 var(--magenta)} /* 5. Ablauf (orange): Jahresleiste auf der Linie, Spitzen weiss, Hierarchie ueber Ton */ .jahr-linie{top:calc(clamp(18px,3vh,32px) + 16px)} .ap.spitze .mk{top:-18px} [data-welt="orange"] .ap.spitze .mk svg path,[data-welt="orange"] .ap.spitze .mk svg rect{fill:#FFFFFF} [data-welt="orange"] .ap.spitze b{color:var(--anthrazit);font-weight:900} [data-welt="orange"] .ap:not(.spitze) b{color:var(--leise)} [data-welt="orange"] .ap:not(.spitze) .mk{border-color:var(--leise)} .sr h3{min-height:2.16em} /* 6. Ueberschriften im Zweispalter: 52 px, breitere Textspalte */ h2{font-size:clamp(28px,3.6vw,52px)} @media (min-width:901px){.ed{grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr)}} /* unter 900 px bleibt der Zweispalter einspaltig */ /* 7. Kennzahlen: eine Schreibweise ("250 Mio.+"), eine Laufweite, eine Zeile */ .odo,.sr .nrx{font-stretch:115%} .kz .odo{font-size:clamp(34px,4.45vw,64px);flex-wrap:nowrap} .odo .einheit{order:1} .odo .plus{order:2;font-size:.38em;align-self:flex-end;padding:0 0 .2em .08em;letter-spacing:-.03em;font-weight:800;opacity:1} /* 8. Pillen in drei Stufen: 40 / 62 / 66 px */ .btn{padding:0 30px;min-height:62px;line-height:1.2} .hero .btn.voll{padding:0 34px;min-height:66px} .kopf-cta{min-height:0;height:40px;padding:0 18px} .eb .eb-link,.sl-link{min-height:40px;padding:0 18px;line-height:1.2} .chip span{min-height:40px;padding:0 16px;line-height:1.2} /* 9. Zweispalter: Ueberschrift und Lead auf einer Kante */ .lead,.txt{margin:0} .lead+.txt{margin-top:20px} /* 10. Leitfigur sichtbar: Saeulen und Reichweite-Karten, Marker nur am Aktbeginn */ .sl-ruf{width:clamp(12px,1.25vw,18px)} .sl-ruf path,.sl-ruf rect{opacity:1} .eb .sl-ruf{position:absolute;top:clamp(24px,2.8vw,38px);right:clamp(24px,2.8vw,38px);display:block} .eb:not(.a) h3{padding-right:calc(clamp(12px,1.25vw,18px) + 14px)} .eb .sl-ruf svg{display:block;width:100%;height:auto;overflow:visible} .eb .sl-ruf path,.eb .sl-ruf rect{fill:currentColor} .eb .sl-ruf .k{transform-origin:50% 100%} .eb .sl-ruf .p{transform-origin:50% 50%} .eb.b .sl-ruf{color:var(--anthrazit)} .eb.c .sl-ruf{color:var(--magenta)} .eb.d .sl-ruf{color:var(--anthrazit)} .eb:hover .sl-ruf .k,.eb:focus-within .sl-ruf .k{animation:fqKeil .6s cubic-bezier(.22,1.35,.4,1) both} .eb:hover .sl-ruf .p,.eb:focus-within .sl-ruf .p{animation:fqPunkt .5s cubic-bezier(.34,1.7,.5,1) .28s both} @media (prefers-reduced-motion:reduce){.eb:hover .sl-ruf .k,.eb:hover .sl-ruf .p,.eb:focus-within .sl-ruf .k,.eb:focus-within .sl-ruf .p{animation:none}} .geprueft .kap i,.zwischen .kap i{display:none} .geprueft .kap,.zwischen .kap{color:var(--leise)} /* 11. Display-Skala und Gewichte: 27 / 32 / 40 */ .li .name,.fq h3,.job h3,.steckbrief dd{font-size:clamp(19px,2.25vw,32px)} .stellen .li .name{font-size:clamp(18px,1.9vw,27px);text-wrap:balance} .sl h3,.zwischen h3,.geprueft-titel,.dank b{font-size:clamp(26px,2.8vw,40px)} .treffer .inhalt b{font-size:clamp(18px,1.9vw,27px)} .sl .nr,.pflicht{font-weight:500} /* 13. Haeufige Fragen: Zeilen als Bedienelemente erkennbar */ .fq-zeichen path,.fq-zeichen rect{fill:none;stroke:currentColor;stroke-width:var(--linie);vector-effect:non-scaling-stroke;opacity:.75} .tipp svg path{stroke-width:var(--linie);vector-effect:non-scaling-stroke} .fq summary:hover .fq-zeichen path,.fq summary:hover .fq-zeichen rect, .fq[open] .fq-zeichen path,.fq[open] .fq-zeichen rect{fill:var(--ton);stroke:none;opacity:1} .fq-nr{font-size:12.5px;letter-spacing:.14em} .fq summary:hover{background:color-mix(in srgb,var(--ton) 10%,transparent)} /* 14. Produkt- und Stellenliste auf der Rasterkante */ .li{padding-inline:0} .li::before{inset:0 calc(-1*clamp(14px,2vw,26px))} .li .name .pin{margin-left:calc(-14px - clamp(5px,.6vw,8px))} @media (max-width:1179px){.li .name .pin{margin-left:0}} /* 15. Kleinbeschriftungen auf 12,5 px, Laufweiten, Fuss */ .menue nav a span{font-size:12.5px;flex:none;white-space:nowrap} .eb .eb-marke,.job .meta,.ap span{letter-spacing:.12em} .job-note{font-size:13.5px;letter-spacing:0} .fuss-spalte a{font-weight:500} footer{margin-top:0;padding-top:clamp(48px,7vh,84px)} .fuss-cta{margin-top:22px} .leerbox .btn.leer{background:transparent;border:0;padding:0;min-height:0;box-shadow:none;color:inherit;font-family:var(--display);font-weight:800;font-stretch:112%;font-size:clamp(19px,2vw,26px);letter-spacing:-.03em;cursor:auto} .leerbox .btn.leer:hover{transform:none;background:transparent;color:inherit} /* Touch-Geraete ohne Hover (Karl, 30.10.2026): die Farbe jeder Produkt- und Stellenzeile ist sichtbar (Zeichen steht, Verweis in der Zeilenfarbe), Antippen faerbt die Zeile */ @media (hover:none){ .li .name .pin{opacity:1;transform:none} .li .mehr{color:color-mix(in srgb,var(--kf) 70%,#FFFFFF)} /* Magenta pur hat auf Anthrazit nur 3,8:1 */ .li:where([style*="--kf:#F28C00"]) .mehr{color:var(--kf)} /* Orange hat auf Anthrazit 6,9:1, braucht keine Aufhellung */ .li:active::before{transform:none} .li:active .name,.li:active .nu,.li:active .mehr{color:var(--kt)} } /* Zweite Pruefrunde (30.10.2026): Zielbegriffe sichtbar in der H1, Weg zu den Formaten, kompakte Kopfzeile beim Scrollen, Hero-Knoepfe in einer Stufe */ header.top{padding-block:clamp(12px,1.4vw,20px)} .logo{width:clamp(84px,7vw,100px);transform-origin:left center;transition:transform .4s cubic-bezier(.16,1,.3,1)} header.top.klebt .logo{transform:scale(.84)} header.top.klebt{box-shadow:0 1px 0 color-mix(in srgb,var(--schrift) 10%,transparent)} .fuss-logo{width:clamp(84px,7vw,100px)} .hero .btn{font-size:17px;padding:0 34px;min-height:66px} /* FAQ-Zeilen reagieren wie Produkt- und Stellenzeilen (Karl, 30.10.2026: ein Mouseover fuer alle Listen): das Farbfeld faehrt durch die Zeile, Schrift, Nummer und Zeichen in der Gegenfarbe, die Zeile rueckt vor. Farben wechseln je Zeile wie in der Produktliste (Magenta, Orange). */ .fq:nth-of-type(odd) summary{--kf:#E6007E;--kt:#FFFFFF} .fq:nth-of-type(even) summary{--kf:#F28C00;--kt:#1D1D1B} .fq summary{isolation:isolate;border-radius:0;transition:background .3s ease,transform .55s cubic-bezier(.16,1,.3,1)} .fq summary::before{content:"";position:absolute;inset:0 calc(-1*clamp(6px,1vw,12px));background:var(--kf);z-index:-1; transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1)} .fq summary:hover{background:transparent} .fq summary:hover::before,.fq summary:focus-visible::before{transform:none} .fq.da summary:hover{transform:translateX(clamp(8px,1.2vw,16px))} .fq summary:hover h3{transform:none} .fq summary:hover h3,.fq summary:hover .fq-nr,.fq summary:focus-visible h3,.fq summary:focus-visible .fq-nr{color:var(--kt)} .fq summary:hover .fq-zeichen path,.fq summary:hover .fq-zeichen rect, .fq summary:focus-visible .fq-zeichen path,.fq summary:focus-visible .fq-zeichen rect{fill:var(--kt);stroke:none;opacity:1} @media (hover:none){ .fq summary:active::before{transform:none} .fq summary:active h3,.fq summary:active .fq-nr{color:var(--kt)} } @media (prefers-reduced-motion:reduce){.fq.da summary:hover{transform:none}} /* CTA-Dichte (Karl, 30.10.2026: "es kommt mir etwas viel vor"). Die Saeulen sind Argumente ohne Verweis: nur das Zeichen reagiert (Karls Wunsch), Flaeche und Titel nicht mehr, sonst versprechen sie einen Klick, der nichts tut. Unter den Fragen fuehrt ein Textverweis im Satz zum Formular statt eines Zweitknopfs. */ .sl:hover::after,.sl:focus-within::after,.sl.c:hover::after,.sl.c:focus-within::after{opacity:0} .sl:hover h3,.sl:focus-within h3{transform:none} .textverweis{display:inline-flex;align-items:center;gap:8px;margin-left:4px;color:var(--magenta-text);font-weight:500; text-decoration:underline;text-decoration-thickness:var(--linie);text-underline-offset:4px;transition:text-decoration-thickness .25s} .textverweis:hover,.textverweis:focus-visible{text-decoration-thickness:var(--linie-zustand)} .textverweis .rufmini{width:5px} .textverweis:hover .rufmini svg{animation:rufHuepft .55s cubic-bezier(.22,1.35,.4,1)} @media (prefers-reduced-motion:reduce){.textverweis:hover .rufmini svg{animation:none}} /* Anfrage (Karl, 30.10.2026 abends): ein Textfeld statt Auswahlfeldern, Firma Pflicht. Die Frage steht fest ueber dem Feld, nicht als schwebende Beschriftung, darunter die Stichworte, nach denen der Vertrieb fragt. */ .feld .anliegen-titel{position:static;display:block;transform:none;pointer-events:auto; font-family:var(--body);font-size:16px;font-weight:500;color:var(--anthrazit)} .anliegen-hilfe{display:block;margin:4px 0 2px;font-family:var(--body);font-size:13.5px;line-height:1.5;color:var(--grau)} .feld.anliegen textarea{padding:8px 0 9px;min-height:112px} .feld.anliegen{margin-top:clamp(10px,1.4vw,18px)} /* eigener Block nach den Kontaktangaben (Karl: Firma, Name, E-Mail, Telefon, dann der Text) */ /* Direktkontakt mit Art davor (Karl, 30.10.2026 abends: „Tel:“ vor die Nummer, „Mail:“ vor die Adresse). Klein in der Schrift der Zeilenmarke, auf der Grundlinie der grossen Angabe. */ .direkt-weg{display:inline-flex;align-items:baseline;gap:8px} .direkt-art{font-family:var(--body);font-size:15px;font-weight:500;letter-spacing:0;color:var(--leise)} /* Kopf-Knopf nur, solange weder Hero- noch Ablauf-Knopf im Bild ist (Karl, 30.10.2026 abends, Knoepfe mit data-statt-kopf). Solange er verborgen ist, rueckt die Sprachwahl an seinen Platz; beim Erscheinen gleitet sie zurueck und der Knopf blendet ein. Nur transform und opacity; visibility nimmt ihn aus der Tastaturfolge. Ohne Skript (.js fehlt) bleibt alles wie bisher sichtbar. */ /* Gleiten erst nach dem ersten Bild (cta-bereit), sonst schiebt sich die Sprachwahl beim Laden sichtbar nach rechts */ header.top.cta-bereit .sprache-wrap{transition:transform .45s cubic-bezier(.16,1,.3,1)} /* Uebergaenge wie .btn, dazu opacity und visibility, sonst springt der Knopf statt einzublenden. visibility mit Dauer haelt ihn beim Ausblenden sichtbar, bis die Deckkraft durch ist. */ .kopf-cta{transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .3s,visibility .3s,background .3s,color .3s,border-color .3s,box-shadow .35s} .js header.top:not(.cta-frei) .kopf-cta{opacity:0;transform:translateY(-6px);visibility:hidden;pointer-events:none} .js header.top:not(.cta-frei) .sprache-wrap{transform:translateX(var(--cta-platz,0px))} @media (prefers-reduced-motion:reduce){header.top.cta-bereit .sprache-wrap{transition:none}} /* Handy-Masse zuletzt (31.10.2026): Grundregeln weiter oben im Quelltext (.menue-knopf in 17b, .top-rechts unter 560 px, .kopf-cta im Design-Durchgang) hatten sie ueberschrieben. Das Menue-Symbol schrumpfte zu drei Punkten, der Schliessen-Knopf zeigte nur einen Strich, und der Kopf-Knopf blieb unter 420 px breiter als vorgesehen. */ @media (max-width:480px){.menue-knopf{padding:0;gap:0}.top-rechts{gap:8px}} @media (max-width:420px){.kopf-cta{padding:0 14px}} @media (max-width:340px){.top-in{gap:12px}} /* Lange Woerter in Ueberschriften ("zusammenkommen.") ragten unter 330 px ueber den Rand */ @media (max-width:359px){h2{font-size:min(28px,7.6vw)}.sl h3,.zwischen h3,.geprueft-titel,.dank b{font-size:min(26px,7vw)}} /* Druck aus der Lade: nur der Rechtstext, vollstaendig (31.10.2026) */ @media print{body:has(>.lade.auf){overflow:visible}body:has(>.lade.auf)>:not(.lade){display:none!important}.lade.auf{position:static;width:auto;overflow:visible;transform:none;box-shadow:none}.lade.auf .zu{display:none}} /* Formularkopf unter 320 px: die Zeile darf schmaler werden */ @media (max-width:319px){.fk-text{flex:0 1 auto}} /* Fussleiste unter 561 px immer gestapelt, am selben Umbruch wie .fuss-oben: mit nur zwei Rechtsverweisen wurde EN ab 390 px einzeilig und das Copyright las sich wie ein dritter Eintrag */ @media (max-width:560px){.fuss-unten{flex-direction:column;align-items:flex-start}} /* Ohne Skript unter 360 px nur der Verweis auf die andere Sprache, sonst ragt der Kopf-Knopf in den Rand */ @media (max-width:359px){html:not(.js) header.top .sprache-an{display:none}} /* Der Sprachverweis im Menue-Fuss ist unter 1061 px der einzige: groessere Trefferflaeche ohne Layoutaenderung (min-height schob ihn bei 375x548 aus dem Bild) */ /* Sprachwahl im Menue-Fuss wie im Kopf: DE und EN, die aktive mit Unterstrich (Karl, 31.10.2026 abends: "wie im Desktop", vorher "English"/"Deutsch"). Feste Farben fuer das immer anthrazitfarbene Menue, Unterstrich orange wie die Menuenummern; der Verweis ist mit Innenabstand und 24 px Mindesthoehe gross genug (WCAG 2.5.8). */ .menue-sprache{display:inline-flex;align-items:center;gap:2px} #menue .sprache-an{display:inline-flex;align-items:center;min-height:24px;color:#FFFFFF} #menue .sprache-link{color:#B9B9B4} #menue .sprache-link:hover,#menue .sprache-link:focus-visible{color:#FFFFFF} #menue .sprache-an::after,#menue .sprache-link::after{background:var(--orange)} /* Offenes Menue auf niedrigen Fenstern (31.10.2026): im Querformat liefen bis zu neun Eintraege unter den Rand, darunter die Sprachwahl. Dort stehen Menuepunkte und Menue-Fuss nebeneinander (die Reihenfolge im Quelltext und damit fuer Tab bleibt), die Schrift richtet sich nach der Hoehe: (Hoehe - Kopf und Raender) / 6 Punkte. Hochkant unter 601 px Hoehe wird nur verdichtet. Erst ab 480 x 300 px: darunter (Zoom 300 bis 400 %) bleibt das rollbare Grundmenue, sonst liefen Eintraege unter den Kopf. "safe end": passt der Inhalt nicht, rollt das Menue (WCAG 1.4.10, 2.4.11). */ @media (min-width:480px) and (max-width:1060px) and (min-height:300px) and (max-height:600px) and (orientation:landscape){ .menue{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(28px,5vw,64px); align-content:end;align-content:safe end;align-items:end;padding-top:96px} .menue nav{margin-top:0} .menue nav a{font-size:clamp(20px,calc((100vh - 206px) / 7.5),62px);font-size:clamp(20px,calc((100dvh - 206px) / 7.5),62px)} .menue-fuss{margin-top:0;padding:0 0 4px clamp(20px,3vw,32px);border-top:0;border-left:var(--linie) solid rgba(255,255,255,.2); flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:6px} } @media (max-width:1060px) and (max-height:600px) and (orientation:portrait){ .menue{padding-top:96px} .menue nav a{font-size:clamp(28px,8.6vw,34px)} .menue-fuss{margin-top:18px;padding-top:14px} } /* Sprachwahl erst zeigen, wenn ihr Versatz gemessen ist (sonst springt sie beim Laden um rund 220 px) */ .js header.top:not(.sw-bereit) .sprache-wrap{opacity:0;animation:swZeigen 0s 2s forwards}@keyframes swZeigen{to{opacity:1}} #inhalt:focus{outline:none} /* Sehr niedrige Fenster (etwa 400 % Zoom auf 1280 x 1024): der feste Kopf belegt sonst ein Drittel der Hoehe (WCAG 1.4.10). Steht am Ende, weil die Kopfregeln oben sonst gewinnen. Dort ruht die Bewegung wie bei "Bewegung reduzieren": eine Karte, die sich nach dem Fokus noch verschiebt, schob ihren Knopf unter den Kopf (2.4.11), und die Jahresleiste fuhr in wenigen Pixeln Bildlauf quer, Termine waren mit Pfeiltasten nicht zu lesen. */ @media (max-height:300px){ header.top,header.top.klebt{padding-block:6px} .top-in{min-height:40px} .logo{width:64px} html{scroll-padding-top:72px} .menue{padding-top:64px;scroll-padding-top:64px} /* das Menue rollt selbst: Fokus nicht unter den Kopf */ .menue nav a{font-size:clamp(24px,8vw,34px)} /* "Unternehmen" passt bei 320 px in eine Zeile */ [data-fx]{transform:none!important} .jahr-spur{transform:none!important} .jahr{overflow-x:auto} } /* Pruefrunde 01.11.2026: Zwischenkapitel am Handy kleiner als die h2 des Akts (im Akt Lead-Generierung wirkte die h3 schwerer), ausgewogene Umbrueche, Erlaeuterungen im Steckbrief nicht ueberlang, Hinweis darunter so leise wie sie */ @media (max-width:600px){.zwischen h3{font-size:clamp(20px,5.6vw,22px)}} .zwischen h3{text-wrap:balance} .lead{text-wrap:pretty} #lead-qualifizierung .steckbrief dd span{max-width:60ch} #lead-qualifizierung .steckbrief+.txt{font-size:14.5px} /* Steckbrief der Lead-Generierung als vier Karten (Karl, 01.11.2026 nachts: "Sollte nicht jeder Punkt mit einer anderen Hintergrund sein? Weiss, schwarz, pink, orange?"), Mass und Abstand wie Saeulen und Reichweite-Karten. Die Farbe folgt dem Platz, nicht dem Inhalt; jede Karte setzt die Werte ihrer Farbwelt (Fokus und Unterstreichung laufen ueber --ton). Bezeichner und Erlaeuterung stehen wie bei Saeulen und Reichweite-Karten in der Schriftfarbe der Karte (einen gedaempften Ton mit 4,5:1 gibt es auf Magenta nicht), die Erlaeuterung in 16 px und 500 wie .sl p und .eb p. Nur die weisse Karte zeigt den Kartenrahmen (20 %), die anderen tragen ihn unsichtbar, damit alle gleich gross sind. Die Bewegung (data-fx) sitzt auf einer Huelle um dl und OnSite-Satz, nicht auf den Karten: sonst faechern die Reihen beim Scrollen auf und die letzte Karte deckt den Satz zu, und ein eigener Hub am Satz loeste ihn von den Karten (Pruefungen 01.11.2026). */ #lead-qualifizierung .steckbrief{gap:16px} #lead-qualifizierung .steckbrief>div{padding:clamp(26px,3vw,42px);border:var(--linie) solid transparent; border-radius:var(--r-karte);background:var(--grund);color:var(--schrift)} #lead-qualifizierung .steckbrief>div dt,#lead-qualifizierung .steckbrief>div dd span{color:var(--schrift)} #lead-qualifizierung .steckbrief>div dd span{font-size:16px;font-weight:500;line-height:1.55} #lead-qualifizierung .steckbrief>div:nth-child(4n+1){--grund:#FFFFFF;--schrift:#1D1D1B;--ton:#E6007E;border-color:rgba(29,29,27,.2)} #lead-qualifizierung .steckbrief>div:nth-child(4n+2){--grund:#1D1D1B;--schrift:#FFFFFF;--ton:#F28C00} #lead-qualifizierung .steckbrief>div:nth-child(4n+3){--grund:#E6007E;--schrift:#FFFFFF;--ton:#FFFFFF} #lead-qualifizierung .steckbrief>div:nth-child(4n){--grund:#F28C00;--schrift:#1D1D1B;--ton:#1D1D1B} /* Englisch bricht "Purchasing power data" von 601 bis 639 px zweizeilig: Zeilenreserve wie ab 981 px, damit die Erlaeuterungen einer Reihe auf einer Hoehe beginnen */ @media (min-width:601px) and (max-width:639px){html[lang="en"] #lead-qualifizierung .steckbrief dd{display:grid;grid-template-rows:minmax(2.04em,auto) auto}} /* Druck ohne Hintergrundgrafiken: alle vier Karten wie die weisse (dunkle Schrift, Rahmen), keine Karte geteilt */ @media print{#lead-qualifizierung .steckbrief>div:nth-child(n){--grund:#FFFFFF;--schrift:#1D1D1B;--ton:#E6007E;border-color:rgba(29,29,27,.2);break-inside:avoid}}