/* ========================================================================== Idencom — Design Tokens & Components ========================================================================== */ /* --- Selbst gehostete Schriftarten ----------------------------------------- Archivo und Instrument Sans sind Variable Fonts; eine Datei pro Familie deckt den gesamten genutzten Schnittbereich ab (font-weight als Bereich), der Browser wählt den passenden Schnitt selbst. Nur das "latin"-Subset — deckt auch deutsche Umlaute und ß ab (U+0000–00FF). Keine Verbindung zu Google mehr, siehe datenschutz.html#schriftarten. */ @font-face{ font-family:'Archivo'; font-style:normal; font-weight:400 700; font-display:swap; src:url('../fonts/archivo-variable.woff2') format('woff2'); } @font-face{ font-family:'Instrument Sans'; font-style:normal; font-weight:400 600; font-display:swap; src:url('../fonts/instrument-sans-variable.woff2') format('woff2'); } :root{ --accent:#15395B; --accent-hover:#0F2C48; --accent-tint:#EAF0F6; --success:#2E6F4E; --success-tint:#EDF5F0; --error:#A33A2E; --error-tint:#F7EBE9; --n-100:#FFFFFF; --n-200:#F7F6F4; --n-300:#EFEDE9; --n-400:#E2DFDA; --n-500:#C9C5BE; --n-600:#8A8781; --n-700:#5A5854; --n-800:#3A4247; /* Ein Hauch waermer als --n-900, damit die Linie auf dunklem Grund nicht ins Schwarz kippt. Raster in .usp-grid und Trennlinie im Fussbereich. */ --n-850:#2C2B29; --n-900:#0E1215; --font-display:'Archivo',system-ui,sans-serif; --font-text:'Instrument Sans',system-ui,sans-serif; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:112px; /* --- Sektionsrhythmus --------------------------------------------------- Vier Werte statt bisher 80/88/96/104/112/120 px. Sie wachsen mit dem Fenster, deshalb clamp() und keine Umbruchpunkte: die Maxima sind unveraendert die alten Desktop-Werte, die Minima die, die bis 860 px galten. Vorher stiegen nur die Baender und die CTA ab — .section, alle margin-top, der Fussbereich und .section-head nicht. Auf 390 px stand deshalb 48 px Polsterung INNERHALB eines Bandes gegen 112 px Abstand ZWISCHEN zwei Sektionen: der Takt stand auf dem Kopf. */ --gap-section:clamp(56px,8vw,112px); /* Sektion zu Sektion */ --pad-band:clamp(48px,8vw,104px); /* innen: .band-dark/.band-light */ --pad-panel:clamp(36px,6.5vw,88px); /* innen: .cta, Fusszeile oben */ --pad-head:clamp(48px,7vw,96px); /* Kopfzone unter dem Header */ /* --- Bewegung ------------------------------------------------------------ Vier Dauern und eine Kurve fuer die ganze Datei. Vorher standen sechs Dauern (.15/.2/.25/.5/.6/.7 s) und drei Kurven im Umlauf, die niemand unterscheiden konnte: .2 und .25 fallen zu --dur-2 zusammen, .5 und .6 zu --dur-3. Die Kurve ist die bisherige Hauskurve der Bildzooms — jetzt gilt sie ueberall, damit Zustandswechsel und Einblenden denselben Nachlauf haben. Bei reduzierter Bewegung werden alle vier auf 1 ms gesetzt, siehe den @media-Block weiter unten. */ --dur-1:150ms; /* Mikro: Skip-Link, Nav-Unterstrich, Druckpunkt */ --dur-2:200ms; /* Zustand: Farbe, Rahmen, Schatten, Marker */ --dur-3:550ms; /* Bildzoom im Hover */ --dur-4:700ms; /* Einblenden beim Scrollen */ --ease:cubic-bezier(.2,.7,.2,1); /* Eine Erhoehung statt zweier, die sich nur in der Deckkraft unterschieden (.09 bei .card, .14 bei .solution). */ --shadow-hover:0 16px 40px rgba(14,18,21,.10); /* Fokusfarbe. Wird auf dunklen Flaechen einmal am Container auf Weiss umgestellt, jedes Kind erbt sie — siehe Abschnitt Fokus. */ --focus:var(--accent); /* Mindestgroesse fuer Bedienelemente (Finger). Gilt fuer Schaltflaechen, nicht fuer dekorative Kacheln. */ --tap:44px; --container:1280px; --gutter:24px; --edge:64px; --radius:2px; --border:1px solid var(--n-400); --header-h:84px; } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0;background:var(--n-100);color:var(--n-900); font-family:var(--font-text);font-size:16px;line-height:1.5; -webkit-font-smoothing:antialiased; overflow-wrap:break-word; } img{max-width:100%;display:block;} a{color:var(--accent);text-decoration:none;transition:color var(--dur-2) var(--ease);} a:hover{color:var(--accent-hover);} ::selection{background:var(--accent);color:#fff;} /* --- Typografie ---------------------------------------------------------- */ h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:600;margin:0;color:var(--n-900);} .t-h1{font-size:66px;line-height:1.03;letter-spacing:-.035em;text-wrap:balance;} .t-h2{font-size:42px;line-height:1.1;letter-spacing:-.03em;} .t-h3{font-size:22px;line-height:1.2;letter-spacing:-.02em;} .t-h4{font-size:20px;line-height:1.25;} .t-h5{font-size:17px;line-height:1.35;font-weight:500;} .kicker{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--n-600);} .lead{font-size:18px;line-height:1.65;color:var(--n-700);text-wrap:pretty;} .body{font-size:15px;line-height:1.65;color:var(--n-700);} .caption{font-size:13px;color:var(--n-600);} /* --- Fehlende Stufen der Skala ------------------------------------------- Die Skala sprang von .t-h2 (42) auf .t-h3 (22). Genau in dieser Luecke lagen 18 inline style="font-size:32px" auf zehn Seiten, dazu 48 px auf den vier Produktseiten und 56 px auf Formular- und Kampagnenseite. Jetzt sind es drei benannte Stufen; die Seiten tragen keine Schriftgroessen mehr im style-Attribut. Der obere Abstand von .t-h2--section kommt aus der Nachbarschaft zum Kicker (so stand es in 12 der 18 Faelle), der untere aus den beiden Varianten, die real vorkamen: 16 px vor Text, 32 px vor einem Block. */ .t-h1--page{font-size:56px;line-height:1.05;letter-spacing:-.035em;margin:0 0 20px;} .t-h1--pdp{font-size:48px;line-height:1.06;letter-spacing:-.03em;margin:0 0 20px;} .t-h2--section{font-size:32px;line-height:1.15;letter-spacing:-.025em;margin:0;} .kicker + .t-h2--section{margin-top:var(--sp-4);} .t-h2--section.is-tight{margin-bottom:var(--sp-4);} .t-h2--section.is-wide{margin-bottom:var(--sp-6);} .lead--pdp{font-size:17px;margin:0 0 var(--sp-6);} /* --- Layout -------------------------------------------------------------- */ .container{max-width:var(--container);margin:0 auto;padding:0 var(--edge);} .section{padding-top:var(--gap-section);} .grid{display:grid;gap:var(--gutter);} .grid-2{grid-template-columns:repeat(2,minmax(0,1fr));} .grid-3{grid-template-columns:repeat(3,minmax(0,1fr));} .grid-4{grid-template-columns:repeat(4,minmax(0,1fr));} .stack{display:flex;flex-direction:column;} /* Liste ohne Punkte — fuer Verweisspalten wie auf der 404-Seite. */ .plain-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3);} .row{display:flex;align-items:center;} .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px; margin-bottom:clamp(var(--sp-5),3.5vw,44px);} /* Flex-Kinder duerfen unter ihre Wortbreite schrumpfen — sonst sprengen lange Komposita wie "Anwendungsbereiche" auf 320 px den Viewport. */ .section-head > *{min-width:0;} .section-head .kicker{margin-bottom:16px;} /* --- Platzhalter (im Handoff durch echte Assets ersetzen) ----------------- */ .placeholder{ background-color:var(--n-200); background-image:repeating-linear-gradient(135deg,rgba(21,57,91,.055) 0 10px,rgba(21,57,91,0) 10px 20px); border:1px dashed var(--n-500); display:flex;align-items:center;justify-content:center;text-align:center; font-size:11px;letter-spacing:.1em;font-weight:500;color:var(--n-600);line-height:1.8; padding:12px; } .placeholder--dark{background-color:transparent;border-color:var(--n-800);color:var(--n-600);background-image:none;} .placeholder--circle{border-radius:50%;} .ratio-16-11{aspect-ratio:16/11;} .ratio-4-3{aspect-ratio:4/3;} .ratio-3-4{aspect-ratio:3/4;} .ratio-1-1{aspect-ratio:1/1;} /* --- Buttons ------------------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center; height:54px;padding:0 32px;border-radius:var(--radius);border:1px solid transparent; font-family:var(--font-text);font-size:14px;font-weight:600;letter-spacing:.02em; cursor:pointer;white-space:nowrap; transition:var(--dur-2) var(--ease);transition-property:background,border-color,color; } .btn--primary{background:var(--accent);color:#fff;} .btn--primary:hover{background:var(--accent-hover);color:#fff;} .btn--secondary{background:#fff;color:var(--n-900);border-color:var(--n-500);} .btn--secondary:hover{border-color:var(--n-900);color:var(--n-900);} .btn--ghost{background:transparent;color:var(--accent);padding:0 20px;} .btn--ghost:hover{color:var(--accent-hover);} .btn--sm{height:44px;padding:0 24px;font-size:13px;} .btn--invert{background:#fff;color:var(--accent);} .btn--invert:hover{background:var(--accent-tint);color:var(--accent);} .btn--outline-invert{border-color:rgba(255,255,255,.34);color:#fff;} .btn--outline-invert:hover{border-color:#fff;color:#fff;} .btn[disabled]{background:var(--n-300);color:var(--n-500);cursor:not-allowed;} .link-underline{font-size:14px;font-weight:600;color:var(--n-900);border-bottom:1px solid var(--n-500);padding-bottom:3px;} .link-underline:hover{color:var(--accent);border-color:var(--accent);} /* --- Badges -------------------------------------------------------------- */ .badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.06em;padding:7px 12px;} .badge--success{color:var(--success);background:var(--success-tint);} .badge--accent{color:var(--accent);background:var(--accent-tint);} .badge--neutral{color:var(--n-700);background:var(--n-300);} .tag{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--n-700);border:var(--border);padding:4px 8px;} .nav-badge{display:inline-block;margin-left:6px;padding:2px 6px;font-size:9px;font-weight:700; letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--accent); border-radius:3px;vertical-align:2px;line-height:1;} /* --- Skip-Link ----------------------------------------------------------- */ /* Erstes fokussierbares Element der Seite. Bleibt unsichtbar, bis er per Tastatur erreicht wird — dann faehrt er ueber den klebenden Header. */ .skip-link{ position:absolute;left:var(--edge);top:-100px;z-index:100; display:inline-flex;align-items:center;height:44px;padding:0 20px; background:var(--accent);color:#fff;border-radius:var(--radius); font-family:var(--font-text);font-size:14px;font-weight:600; transition:top var(--dur-1) var(--ease); } .skip-link:focus{top:12px;color:#fff;} /* --- Header -------------------------------------------------------------- */ /* Der Kopf klebt und ist milchig. Solange die Seite oben steht, genuegt die Linie unten; sobald Inhalt darunter durchlaeuft, braucht er eine Kante, sonst scheinen Karten ueber ihm zu schweben. Nur Grund und Schatten wechseln — die Hoehe darf sich nicht aendern, --header-h ist Bezug fuer scroll-margin-top und .pdp__info. */ .header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92); backdrop-filter:blur(14px);border-bottom:var(--border); transition:var(--dur-2) var(--ease);transition-property:background-color,box-shadow;} .header.is-scrolled{background:rgba(255,255,255,.86); box-shadow:0 6px 20px -8px rgba(14,18,21,.14);} .header__inner{height:var(--header-h);display:flex;align-items:center;gap:48px;} /* Feste Box, das Logo skaliert seitenverhaeltnistreu hinein — so bleibt der Platzhalter im Footer masshaltig und die PNG sprengt nichts. */ .logo{width:234px;height:61px;flex:none;display:flex;align-items:center;} .logo img{display:block;width:auto;max-width:100%;max-height:100%;} /* Sieben Nav-Punkte plus Sprachwahl und Schaltflaeche — der Abstand ist auf den engsten Fall abgestimmt: knapp ueber 1180 px verdoppelt sich --edge auf 64 px, waehrend der Abstand noch der grosse ist. white-space haelt zweiteilige Beschriftungen wie "Kombi X" auf einer Zeile. */ .nav{display:flex;gap:28px;flex:1;} /* Der Unterstrich waechst aus der Mitte statt zu blinken. Als Hintergrundverlauf und nicht als ::after, weil .nav a im aufgeklappten Menue schon eine eigene Trennlinie unten traegt — ein zusaetzliches Element wuerde dort doppeln. Ersetzt den transparenten 1,5-px-Rahmen, der nie animiert wurde; padding-bottom haelt die Grundlinie dort, wo der Rahmen sie hatte. */ .nav a{font-size:14px;font-weight:500;color:var(--n-800);padding:4px 0 5.5px;white-space:nowrap; background-image:linear-gradient(var(--accent),var(--accent)); background-repeat:no-repeat;background-position:50% 100%;background-size:0 1.5px; transition:var(--dur-1) var(--ease);transition-property:color,background-size;} .nav a:hover{color:var(--n-900);background-size:100% 1.5px;} .nav a[aria-current="page"]{color:var(--n-900);background-size:100% 1.5px;} /* Die Anfragen-Schaltflaeche steht zweimal im Kopf: in .header__actions fuer breite Fenster und noch einmal im Menue fuer schmale. Hier die Desktop-Seite ausblenden — .btn setzt display:inline-flex, deshalb zwei Klassen. */ .nav .nav__cta{display:none;} .header__actions{display:flex;align-items:center;gap:20px;} .lang{display:flex;gap:2px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--n-600);} .lang [aria-current]{color:var(--n-900);} .lang__soon{color:var(--n-500);cursor:pointer;background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;} .divider-v{width:1px;height:20px;background:var(--n-400);} .header .btn{height:44px;padding:0 24px;font-size:13px;} .burger{display:none;width:34px;height:34px;border:none;background:transparent;flex-direction:column;justify-content:center;gap:5px;cursor:pointer;padding:0;} .burger span{display:block;height:1.5px;background:var(--n-900); transition:var(--dur-2) var(--ease);transition-property:transform,opacity,background;} /* Aufgeklappt wandern die aeusseren Striche auf die Mitte und kreuzen sich, der mittlere blendet aus. 6,5 px = Strichhoehe 1,5 + Luecke 5. Der Zustand haengt an aria-expanded, das site.js schon setzt — kein zusaetzliches JS und keine zweite Wahrheit darueber, was "offen" ist. Vorher hatte die Schaltflaeche nur zwei Striche und blieb beim Oeffnen unveraendert stehen. */ .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);} .burger[aria-expanded="true"] span:nth-child(2){opacity:0;} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);} /* --- Hero ---------------------------------------------------------------- */ /* Die Medienspalte wiegt schwerer als die Textspalte, damit der Faecher auf grossen Schirmen Praesenz hat: bei vollem Container 610 px Buehne statt 553. 1.3 ist die Obergrenze — mehr, und die Textspalte unterschreitet auch bei vollem Container die 460 px des Lead-Absatzes. Zwischen 1181 px und dem vollen Container liegt sie ohnehin darunter, der Absatz bricht dort eine Zeile mehr; ab 1180 px stellt der Umbruchblock auf 1.05fr zurueck. Die laengste H1-Zeile misst 299 px und ist nie die Grenze. */ .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:72px;align-items:center;padding-top:var(--pad-head);} .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:var(--border);border-radius:var(--radius); font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--n-700);margin-bottom:var(--sp-5);} .eyebrow .dot{width:5px;height:5px;background:var(--accent);border-radius:50%;} .hero p{margin:0;max-width:460px;} .hero h1{margin:0 0 20px;} .btn-group{display:flex;gap:var(--sp-3);flex-wrap:wrap;} /* Produktfaecher im Kopf. Vier freigestellte Motive liegen deckungsgleich als gleich grosse Kacheln uebereinander und faechern beim Laden auf. Die Kachel ist eine unsichtbare Box: sie bringt Motive von 0,30 bis 1,00 Seitenverhaeltnis auf denselben Platzbedarf, hat aber weder Flaeche noch Rahmen. Sichtbar ist allein das PNG. Kein data-reveal am Kopf und an den Kacheln: .js [data-reveal].is-visible (0-3-0) wuerde die Faecher-Animation der .hero-fan__item (0-1-0) schlicht ersetzen, der Faecher faecherte nie. Nebengewinn: der Kopf wartet nicht auf html.js und malt im ersten Frame. */ /* Die Buehne ist selbst der Verweis auf die Produktuebersicht. Nur die Kacheln nehmen Zeiger an: sonst waere das leere Quadrat um den Faecher herum — auf grossen Schirmen 610 x 610 px — eine unsichtbare Klickfalle neben der Textspalte. Der Klick auf eine Kachel steigt zum auf. */ .hero-fan{display:block;position:relative;isolation:isolate;aspect-ratio:1/1; margin:0;padding:0;pointer-events:none;} /* Alle vier Kacheln sind dieselbe Box, damit der Startstapel deckungsgleich liegt, obwohl die Motive von 0,30 bis 1,00 Seitenverhaeltnis reichen. Die Ruhelage steht als drei Custom Properties je Kachel und nicht im Keyframe: so aendern die Umbruchbloecke sie, ohne den Keyframe zu kopieren. Ueberlaufprobe bei jeder Aenderung von --fx, --fr, Kachelbreite oder Buehnen-Seitenverhaeltnis: Prozente in translate beziehen sich auf die Kachel, left/top:50% auf die Buehne. Mit w = Kachelbreite/Buehne, r = fx/100 und Kachel 3:4 muss gelten 0.5 + r*w + (w/2)*(cos t + 1.333*sin t) <= 1 Innerhalb der Buehne waere bei 10 Grad und 40 Prozent Kachelbreite bei r = 0.64 Schluss. Auf grossen Schirmen steht hier bewusst r = 0.72: der Faecher ragt dann 3,1 Prozent der Buehnenbreite ueber jede Seite hinaus. Das ist unschaedlich, weil die Buehne nur ein Layoutanker ist — sie zeichnet nichts, und die Kacheln liegen absolut. Rechts ragt der Faecher in die 64 px Containerpolsterung, links in die 72 px Rasterluecke zur Textspalte; beides bleibt weit von Text und Fensterrand entfernt. Ab 1180 px ist dafuer kein Platz mehr, der Umbruchblock stellt dort auf r = 0.60 zurueck, das wieder ganz in der Buehne liegt. */ .hero-fan__item{position:absolute;left:50%;top:50%;width:40%;aspect-ratio:3/4; translate:calc(-50% + var(--fx)) calc(-50% + var(--fy));rotate:var(--fr); animation:hero-faecher var(--dur-4) var(--ease) backwards;} .hero-fan__item:nth-child(1){--fx:-72%;--fy:7%;--fr:-10deg;animation-delay:260ms;} .hero-fan__item:nth-child(2){--fx:-24%;--fy:-5%;--fr:-4deg;animation-delay:330ms;} .hero-fan__item:nth-child(3){--fx:24%;--fy:-5%;--fr:4deg;animation-delay:400ms;} .hero-fan__item:nth-child(4){--fx:72%;--fy:7%;--fr:10deg;animation-delay:470ms;} /* Der Hover liegt auf der inneren Kachel: die aeussere __item hat ihre Bewegungseigenschaften translate und rotate schon besetzt. */ /* drop-shadow statt box-shadow: die Motive sind freigestellt, ein box-shadow zeichnete einen Schatten um die unsichtbare Kachel statt um das Produkt. drop-shadow folgt dem Alphakanal. Eigene Werte statt --shadow-hover: das Token ist fuer Karten gedacht, 40 px Weichzeichnung bei 10 Prozent Deckung verschwinden an einer schmalen Silhouette. Enger und dichter, dafuer in derselben Schattenfarbe wie der Rest der Datei. Der Ruheschatten staffelt die Motive in die Tiefe, statt sie flach nebeneinander stehen zu lassen. */ .hero-fan__tile{display:block;width:100%;height:100%;pointer-events:auto; filter:drop-shadow(0 5px 12px rgba(14,18,21,.15)); transition-property:translate,filter; transition-duration:var(--dur-2);transition-timing-function:var(--ease);} /* Ein Ziel, eine Rueckmeldung: alle vier Motive heben gemeinsam ab, nicht nur das unter dem Zeiger. */ .hero-fan:hover .hero-fan__tile{translate:0 -6px;filter:drop-shadow(0 12px 24px rgba(14,18,21,.20));} /* Nur ein from-Bild: das 100-%-Bild setzt der Browser aus dem Elementzustand zusammen, also aus der Ruhelage oben — Bauart wie @keyframes seal-linie, nur andersherum. backwards statt both deckt die Verzoegerung ab und gibt translate/rotate danach wieder frei; mit both froren sie ein und die Umbruchbloecke koennten die Lage nicht mehr aendern. */ @keyframes hero-faecher{from{opacity:0;translate:-50% calc(-50% + 14px);rotate:0deg;scale:.96;}} /* Startbewegung der Textspalte, Muster der Danke-Seite: 0/80/160/240 ms fuer Augenbraue, H1 und Text. Der Faecher setzt ab 260 ms ueberlappend ein und endet bei 1170 ms, damit beides als eine Bewegung liest. Zweiter fester Sonderfall der Datei neben .danke. */ .hero__text > *{animation:reveal var(--dur-4) var(--ease) both;} .hero__text > :nth-child(2){animation-delay:80ms;} .hero__text > :nth-child(3){animation-delay:160ms;} /* --- Scroll-Hinweis unter dem Kopf --------------------------------------- Ersetzt die fruehere Sprungleiste aus sechs beschrifteten Verweisen und davor die Trustbar aus fuenf unbeschrifteten Siegeln. Ein einziger Anker auf #technik, der zum Weiterscrollen einlaedt. */ .scrollcue{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2); margin-top:var(--sp-6);padding:var(--sp-4) 0;color:var(--accent); transition:color var(--dur-2) var(--ease);} .scrollcue:hover{color:var(--accent-hover);} /* Der Kicker bringt eine eigene Farbe mit, die die Vererbung schlaegt — deshalb hier ausdruecklich auf die Akzentfarbe gesetzt. */ .scrollcue .kicker{color:inherit;font-size:12px;} /* 40 px statt 26 und eine kraeftigere Strichstaerke: der Hinweis ist das einzige Element zwischen Kopf und Technikband und soll gefunden werden. Strichstaerke per CSS, nicht im Attribut — siehe README, Icon-Idiom. */ .scrollcue__glyph{width:40px;height:40px;stroke-width:2.5; animation:cue-wippe 1800ms var(--ease) infinite;} @keyframes cue-wippe{0%,100%{translate:0 0;}50%{translate:0 6px;}} /* Drei Winkel, die nacheinander aufleuchten und so nach unten laufen. 1800 ms ist bewusst keines der vier Dauer-Token: die decken Uebergaenge von 150 bis 700 ms ab und waeren als Dauerschleife hektisch. Dasselbe Zugestaendnis wie bei den Sekundenwerten der Danke-Seite. Die Regel steht oberhalb des Sammelblocks fuer reduzierte Bewegung, der sie abschaltet — eine Endlosschleife ist genau das, was dort niemand sehen will. */ .scrollcue__glyph path{animation:cue-lauf 1800ms var(--ease) infinite;} .scrollcue__glyph path:nth-child(2){animation-delay:150ms;} .scrollcue__glyph path:nth-child(3){animation-delay:300ms;} @keyframes cue-lauf{0%,60%,100%{opacity:.18;}30%{opacity:1;}} /* --- Grund-Aufklapper (Startseite, Abschnitt "Unsere Technik") ------------ Steht hier oben und nicht neben dem .faq-Akkordeon, obwohl das der topisch naechste Nachbar waere: .grund__inhalt traegt feste animation-delay-Werte, die der Sammelblock fuer reduzierte Bewegung per animation:none abschaltet. Das gewinnt bei gleicher Spezifitaet nur ueber die Quellreihenfolge, also muss jede animation der Datei oberhalb des Sammelblocks stehen. .faq und .kx-hero duerfen nur deshalb darunter liegen, weil sie ausschliesslich transition benutzen. Diesen Block nicht nach unten verschieben. */ .gruende-liste{display:grid;gap:var(--sp-3);} .grund{position:relative;border:var(--border);background:#fff; transition:var(--dur-2) var(--ease); transition-property:border-color,background-color,box-shadow;} /* Akzentbalken links: die um 90 Grad gedrehte Entsprechung der Haarlinie ueber .step — dort waechst sie mit scaleX aus der linken Kante, hier mit scaleY aus der oberen. */ .grund::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:var(--accent);transform:scaleY(0);transform-origin:top; transition:transform var(--dur-2) var(--ease);} .grund:hover::before,.grund[open]::before{transform:scaleY(1);} .grund:hover{border-color:var(--n-600);} .grund[open]{border-color:var(--accent);background:var(--accent-tint);box-shadow:var(--shadow-hover);} .grund__kopf{display:grid;grid-template-columns:auto auto auto minmax(0,1fr) auto; align-items:center;gap:var(--sp-4);cursor:pointer;list-style:none; padding:var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);} .grund__kopf::-webkit-details-marker{display:none;} /* Geisterziffer: macht die vorgegebene Reihenfolge sichtbar und gibt dem Abschnitt seine eigene Handschrift. */ .grund__nr{font-family:var(--font-display);font-size:26px;font-weight:700; line-height:1;color:var(--n-500);transition:color var(--dur-2) var(--ease);} .grund[open] .grund__nr{color:var(--accent);} .grund__glyph{width:30px;height:30px;color:var(--n-700); transition:color var(--dur-2) var(--ease);} .grund:hover .grund__glyph,.grund[open] .grund__glyph{color:var(--accent);} .grund__titel{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--n-900);} .grund__teaser{font-size:14px;color:var(--n-600);text-align:right;} /* Marker plus/minus: dasselbe Zwei-Gradienten-Verfahren wie .faq summary, samt Begruendung dort — die Zeichen fuer Plus und Minus haben in Archivo verschiedene Dickten, das Zeichen sprang beim Aufklappen sichtbar. */ .grund__marker{width:14px;height:14px; background-image:linear-gradient(var(--accent),var(--accent)), linear-gradient(var(--accent),var(--accent)); background-repeat:no-repeat;background-position:center,center; background-size:100% 1.5px,1.5px 100%; transition:background-size var(--dur-2) var(--ease);} .grund[open] .grund__marker{background-size:100% 1.5px,1.5px 0;} .grund__inhalt{padding:0 var(--sp-5) var(--sp-5) var(--sp-6);max-width:80ch;} .grund__inhalt p{margin:0 0 var(--sp-4);font-size:15px;line-height:1.7;color:var(--n-700);} .grund__inhalt ul{margin:0 0 var(--sp-4);padding-left:1.1em;} .grund__inhalt li{font-size:15px;line-height:1.7;color:var(--n-700);margin-bottom:6px;} .grund__inhalt > :last-child{margin-bottom:0;} .grund__verweise{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5);align-items:center;} /* Die beiden Schaltflaechen standen frueher im Kopf. Unter den sechs Aufklappern stehen sie dort, wo die Argumente gerade gelesen wurden. */ .technik-cta{justify-content:center;margin-top:var(--sp-8);} /* Der Inhalt gleitet gestaffelt ein statt als Block zu erscheinen. Genau dieser Selektor steht im Sammelblock fuer reduzierte Bewegung — mit einem kuerzeren dort bliebe die Bewegung an, weil 0-1-0 gegen 0-3-0 verliert. */ .grund[open] .grund__inhalt > *{animation:grund-auf var(--dur-3) var(--ease) both;} .grund[open] .grund__inhalt > :nth-child(2){animation-delay:70ms;} .grund[open] .grund__inhalt > :nth-child(3){animation-delay:140ms;} @keyframes grund-auf{from{opacity:0;transform:translateY(-8px);}} /* Die Hoehe gleitet nur mit, wo ::details-content existiert. Wo es fehlt (derzeit Firefox), springt die Hoehe und der Inhalt gleitet trotzdem ein. interpolate-size wird vererbt, deshalb reicht .grund statt :root. */ @supports selector(::details-content){ .grund{interpolate-size:allow-keywords;} .grund::details-content{block-size:0;overflow:hidden; transition:block-size var(--dur-3) var(--ease), content-visibility var(--dur-3) allow-discrete;} .grund[open]::details-content{block-size:auto;} } /* --- Karten -------------------------------------------------------------- */ .card{display:block;border:var(--border);background:#fff;overflow:hidden;color:inherit; transition:var(--dur-2) var(--ease);transition-property:border-color,box-shadow;} .card:hover{border-color:var(--accent);box-shadow:var(--shadow-hover);color:inherit;} .card__media{border-bottom:var(--border);overflow:hidden;} .card__media > *{transition:transform var(--dur-3) var(--ease);} .card:hover .card__media > *{transform:scale(1.04);} .card__body{padding:28px;} .card__cat{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;} .card__body h3{margin:0 0 10px;} .card__body p{margin:0;font-size:14px;line-height:1.6;color:var(--n-700);} .card__tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:18px;} /* --- USP (dunkle Sektion) ------------------------------------------------ */ .band-dark{background:var(--n-900);padding:var(--pad-band) 0;margin-top:var(--gap-section);color:#fff;} .band-dark h2{color:#fff;} .band-dark .lead{color:var(--n-600);} .usp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--n-850);} .usp-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));} .usp{background:var(--n-900);padding:40px 32px 44px;} .usp .placeholder{width:48px;height:48px;margin-bottom:28px;font-size:9px;letter-spacing:.06em;} .usp h3{color:#fff;margin:0 0 12px;} .usp p{margin:0;font-size:14px;line-height:1.65;color:var(--n-600);} /* --- Anwendungsbereiche (Startseite) ------------------------------------- */ .solution{position:relative;overflow:hidden;border:var(--border); transition:var(--dur-2) var(--ease);transition-property:border-color,box-shadow;} .solution:hover{border-color:var(--accent);box-shadow:var(--shadow-hover);} .solution .placeholder{align-items:flex-end;padding:32px;justify-content:flex-start;text-align:left;} .solution h3{font-size:26px;letter-spacing:-.02em;margin:0 0 10px;} .solution p{margin:0 0 18px;font-size:14px;line-height:1.6;color:var(--n-700);} .solution__tag{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:10px;} /* Karte mit echtem Foto: Bild fuellt die Kachel, Text liegt auf einem Verlauf. */ .solution__media{position:relative;display:flex;align-items:flex-end;padding:32px;overflow:hidden;} .solution__media > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform var(--dur-3) var(--ease);} .solution:hover .solution__media > img{transform:scale(1.05);} .solution__media::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(20,22,24,0) 30%,rgba(20,22,24,.82) 100%);} .solution__media > div{position:relative;z-index:1;} .solution__media h3{color:#fff;margin-top:0;} .solution__media p{color:rgba(255,255,255,.82);} /* Fortsetzungslink auf dunklem Grund. Die Werte standen zweimal zeichengleich als style-Attribut in index.html und hier zusaetzlich als vier !important. Eine Regel fuer beide Faelle: gleiche Spezifitaet wie .link-underline:hover, deshalb genuegt die Reihenfolge und !important entfaellt. */ .band-dark .link-underline,.solution__media .link-underline{ color:var(--n-100);border-bottom-color:rgba(255,255,255,.34);} .band-dark .link-underline:hover,.solution__media .link-underline:hover{ color:var(--n-100);border-bottom-color:var(--n-100);} /* Der Link sitzt unter dem Kacheltext, nicht daneben. */ .usp .link-underline{display:inline-block;margin-top:14px;font-size:12px;} /* --- Testimonial --------------------------------------------------------- */ .band-light{background:var(--n-200);padding:var(--pad-band) 0;margin-top:var(--gap-section);} .carousel-nav{display:flex;gap:var(--sp-2);} /* Vorher standen hier "←" und "→" als Schriftzeichen. Die Schaltflaeche erbt --font-text, und das Instrument-Sans-Subset enthaelt die Pfeile nicht — sie fielen auf Arial zurueck und sassen zu hoch. Jetzt dasselbe Idiom wie alle anderen Icons, also folgen sie Hover und Deaktiviert- Zustand von selbst (stroke:currentColor). */ .carousel-nav button{width:var(--tap);height:var(--tap);border:1px solid var(--n-500); background:transparent;color:var(--n-800);cursor:pointer;border-radius:var(--radius); display:grid;place-items:center; transition:var(--dur-2) var(--ease);transition-property:border-color,color;} .carousel-nav__icon{width:20px;height:20px;} .carousel-nav button:hover:not([disabled]){border-color:var(--n-900);color:var(--n-900);} .carousel-nav button[disabled]{opacity:.35;cursor:not-allowed;} /* --- Service ------------------------------------------------------------- */ .service{border:var(--border);padding:48px;display:flex;flex-direction:column;gap:var(--sp-4); transition:border-color var(--dur-2) var(--ease);} .service:hover{border-color:var(--accent);} .service .kicker{color:var(--accent);} .service h3{font-size:30px;letter-spacing:-.025em;} .service p{margin:0;max-width:380px;} .service .link-underline{align-self:flex-start;margin-top:var(--sp-3);} /* --- CTA ----------------------------------------------------------------- */ .cta{background:var(--accent);padding:var(--pad-panel) clamp(var(--sp-5),6vw,72px); display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center;margin-top:var(--gap-section);} .cta h2{color:#fff;font-size:44px;line-height:1.08;margin:0 0 18px;max-width:620px;} .cta p{margin:0;font-size:17px;line-height:1.6;color:rgba(255,255,255,.72);max-width:520px;} .cta__actions{display:flex;flex-direction:column;gap:var(--sp-3);} /* --- Footer -------------------------------------------------------------- */ .footer{margin-top:var(--gap-section);background:var(--n-900);padding:var(--pad-panel) 0 40px;color:var(--n-600);} .footer__cols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:var(--sp-7);padding-bottom:56px;border-bottom:1px solid var(--n-850);} .footer h2{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin:0 0 20px;font-family:var(--font-text);} .footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3);} .footer a{font-size:14px;color:var(--n-600);} .footer a:hover{color:#fff;} .footer p{font-size:14px;line-height:1.7;margin:0 0 var(--sp-5);max-width:280px;} .footer__social{display:flex;gap:var(--sp-2);} .footer__social .placeholder{width:36px;height:36px;font-size:8px;padding:0;} /* Bis echte Icons vorliegen: beschriftete Kacheln, aber echte Profil-Links. */ .footer__social a{display:flex;align-items:center;justify-content:center;height:36px;padding:0 12px; border:1px solid var(--n-800);font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--n-600);} .footer__social a:hover{color:#fff;border-color:var(--n-600);} .footer__bottom{padding-top:28px;display:flex;justify-content:space-between;font-size:13px;color:var(--n-700);} .footer__bottom a{color:var(--n-700);} .footer__legal{display:flex;gap:var(--sp-3) var(--sp-5);flex-wrap:wrap;} /* --- Filter / Produktübersicht ------------------------------------------- */ .breadcrumb{font-size:12px;color:var(--n-600);} .breadcrumb [aria-current]{color:var(--n-900);} /* --- Produkt-Detail ------------------------------------------------------ */ .pdp{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--sp-8);align-items:start;} .pdp__info{position:sticky;top:calc(var(--header-h) + 36px);} .thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3);margin-top:var(--sp-3);} .thumb{aspect-ratio:1/1;background:var(--n-200);border:1px dashed var(--n-500); font-family:var(--font-text);font-size:10px;letter-spacing:.06em;color:var(--n-600);cursor:pointer;} .thumb[aria-pressed="true"]{border:1px solid var(--accent);} .feature{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;} /* Noch ohne Motiv: Kombi X, dort sind auch die Merkmalstexte Platzhalter. */ .feature .placeholder{width:22px;height:22px;font-size:7px;padding:0;} /* Dasselbe 48er Raster wie alle Icons, nur klein ausgegeben. Bei 22 px waere stroke-width 2 nur 0,9 px dick und damit blasser als die 48-px-Glyphen — CSS schlaegt das Praesentationsattribut, deshalb wird die Strichstaerke hier fuer diese Groesse nachgezogen statt eine zweite Zeichnung zu pflegen. */ .feature__glyph{width:22px;height:22px;margin-top:1px;stroke-width:3;color:var(--accent);} .feature span{font-size:15px;line-height:1.55;color:var(--n-800);} .spec{display:flex;justify-content:space-between;gap:var(--sp-5);padding:18px 0;border-bottom:var(--border);font-size:15px;} .spec dt{color:var(--n-600);} .spec dd{margin:0;color:var(--n-900);font-weight:500;text-align:right;} .spec-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sp-8);margin:0;} /* --- Kontakt-Layout (kontakt.html) --------------------------------------- */ .contact-layout{grid-template-columns:minmax(0,1fr) 380px;gap:80px;align-items:start;} /* --- Anfrage-Layout (anfragen.html) -------------------------------------- Kopf über die ganze Breite, darunter Produktwähler und Formular je zur Hälfte. Klappt bei 1080 px auf eine Spalte um — deutlich früher als das Kontakt-Layout, weil der Wähler nebeneinander sonst zu schmal für drei Kacheln wird, gestapelt dagegen die ganze Container-Breite bekommt. */ .anfrage-head{margin-bottom:var(--sp-7);} .anfrage-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-7);align-items:start;} /* Richtet die Überschrift der Formularspalte auf die im Wähler aus, die dessen eigene Innenpolsterung nach unten versetzt. */ .anfrage-form-col{padding-top:var(--sp-6);} .anfrage-form-head{margin-bottom:var(--sp-6);} .anfrage-form-head .kicker{display:block;} .anfrage-form-head h2{font-size:22px;letter-spacing:-.02em;margin:var(--sp-3) 0 10px;} .anfrage-form-head p{margin:0;font-size:14px;line-height:1.6;color:var(--n-700);max-width:46ch;} /* --- Produktauswahl (anfragen.html) ------------------------------------- */ .picker{border:var(--border);background:var(--n-200);padding:var(--sp-6);} .picker > .kicker{display:block;} .picker h2{font-size:22px;letter-spacing:-.02em;margin:var(--sp-3) 0 10px;} .picker > p{margin:0;font-size:14px;line-height:1.6;color:var(--n-700);max-width:56ch;} .pick-group{margin-top:var(--sp-6);} .pick-group h3{font-family:var(--font-text);font-size:11px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--accent);margin:0 0 var(--sp-4);} .pick-group h3 em{font-style:normal;color:var(--n-600);letter-spacing:.1em;} /* Die Spaltenzahl folgt der wirklich verfügbaren Breite, nicht der des Viewports: unter 1080 px wird die linke Spalte des Kontakt-Layouts eng, unter 860 px klappt das Layout einspaltig und der Wähler bekommt die ganze Container-Breite zurück — dort passen wieder drei Kacheln. */ .pick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);} /* Das um die ganze Karte. :focus-visible und nicht :focus: Mausklicks sollen keinen Ring hinterlassen, Tastaturbedienung schon. :where() haelt die Spezifitaet bei 0, damit Komponenten mit eigenem Ring (.pick) weiter gewinnen. Die Farbe kommt aus --focus und wird vererbt: auf dunklen Flaechen stellt der Container sie einmal auf Weiss um, jedes Kind erbt sie. Textfelder sind absichtlich draussen — .field:focus hat mit Rahmen und Halo schon eine eigene, immer sichtbare Anzeige. */ :where(a,button,summary,[tabindex]):focus-visible{ outline:2px solid var(--focus);outline-offset:3px;} .band-dark,.footer,.cta,.solution__media,.skip-link, .btn--invert,.btn--outline-invert{--focus:var(--n-100);} /* Diese drei waren echte Schaltflaechen ohne jede Rueckmeldung — weder Hover noch Fokus. Rahmenfarbe wie bei .pick, damit es ein Muster bleibt. */ .thumb:hover{border-color:var(--n-900);} .faq summary:hover{color:var(--accent);} .burger:hover span{background:var(--accent);} /* 1 px nach unten, keine Skalierung: bei 1 px Rahmen und 2 px Radius bleibt die Kante dabei ruhig. Karten sind absichtlich nicht dabei — auf ihnen haelt die Reveal-Animation transform dauerhaft besetzt (fill-mode both), ein transform bliebe dort wirkungslos. Sie bestaetigen ueber den Schatten. */ .btn:not([disabled]):active,.thumb:active,.pick:active, .carousel-nav button:not([disabled]):active,.burger:active{ transform:translateY(1px);transition-duration:var(--dur-1);} .card:active{box-shadow:0 4px 12px rgba(14,18,21,.10);border-color:var(--accent);} .link-underline:active,.linklist a:active,.footer a:active{opacity:.7;} /* --- Reduzierte Bewegung ------------------------------------------------- Ein Block fuer die ganze Datei (vorher zwei, 100 Zeilen auseinander). Die vier Dauer-Token auf 1 ms zu setzen entschaerft jeden Uebergang auf einmal — auch jeden kuenftigen. 1 ms und nicht 0, damit transitionend und animationend weiter feuern; site.js raeumt dort den Reihenversatz auf. Uebrig bleiben nur Zustaende ohne Dauer: die beiden Hover-Zooms und das weiche Scrollen sowie die Bewegungen der Danke-Seite, die eigene Verzoegerungen tragen — beide sind unten ausdruecklich abgeschaltet. Der Fokusring bleibt — er ist keine Zierde. .is-visible muss im Selektor stehen, sonst verliert animation:none gegen die spezifischere Reveal-Regel. */ @media (prefers-reduced-motion:reduce){ :root{--dur-1:1ms;--dur-2:1ms;--dur-3:1ms;--dur-4:1ms;} html,.awards__track{scroll-behavior:auto;} .js [data-reveal],.js [data-reveal].is-visible{opacity:1;transform:none;animation:none;} .card:hover .card__media > *, .solution:hover .solution__media > img{transform:none;} /* Danke-Seite: die Verzoegerungen dort sind fest verdrahtet, damit die Reihenfolge stimmt — bei 1 ms Dauer bliebe sonst eine Seite stehen, die sich haeppchenweise aufbaut. Deshalb hier ganz abgeschaltet; die Endzustaende sind die Ruhezustaende, es geht nichts verloren. */ .danke > *,.seal__disc,.seal__ripple{animation:none;} .seal__ring,.seal__check{animation:none;stroke-dashoffset:0;} .js .step[data-reveal]::before, .js .step[data-reveal].is-visible::before{animation:none;transform:none;} /* Startbewegung des Kopfes und die gestaffelten Aufklapper: beide tragen feste Verzoegerungen, die der Token-Trick nicht abschaltet. Die Selektoren stehen hier Zeichen fuer Zeichen wie oben — bei geringerer Spezifitaet verlieren sie den Gleichstand und die Bewegung bliebe an. */ .hero__text > *,.hero-fan__item{animation:none;} .grund[open] .grund__inhalt > *{animation:none;} .scrollcue__glyph,.scrollcue__glyph path{animation:none;} } /* --- Bilder in Komponenten ------------------------------------------------ */ .card__media img,.pdp-stage img,.variant__media img{ width:100%;height:100%;object-fit:contain;background:#fff;display:block;} /* Breite UND Hoehe: sonst gewinnt das height-Attribut als Presentational Hint und zieht die Kachel auf 1017 bzw. 1468 px hoch. */ .hero-fan__tile img{width:100%;height:100%;object-fit:contain;display:block;} .pdp-stage{border:var(--border);background:#fff;} /* --- Seitenkopf (Unterseiten) -------------------------------------------- */ .page-head{padding-top:var(--pad-head);padding-bottom:var(--sp-7);} /* Kopfzone ohne eigene Ueberschriftenzone (Formularseiten): dieselbe Hoehe wie .page-head, aber ohne Polsterung unten — der Inhalt bringt seine eigene mit. Vorher stand hier inline var(--sp-9), also feste 96 px auch auf 390 px, weil die .page-head-Sonderregel nie griff. */ .page-head--flush{padding-top:var(--pad-head);} /* --- Produktkopf --------------------------------------------------------- Bewusst enger als .page-head: hier gibt es keine Ueberschriftenzone, die Galerie soll ohne Anlauf im Bild sein. Neu ist nur, dass der Wert mitwaechst — auf 390 px waren 40 px ueber dem Krumenpfad zu viel. */ .pdp-head{padding-top:clamp(var(--sp-5),3.5vw,40px);} .pdp-head .breadcrumb{display:block;margin-bottom:clamp(var(--sp-5),3.5vw,40px);} .page-head .breadcrumb{margin-bottom:var(--sp-6);display:block;} .page-head h1{font-size:56px;line-height:1.05;letter-spacing:-.035em;margin:0 0 var(--sp-5);} .page-head .lead{max-width:620px;margin:0;} [id]{scroll-margin-top:calc(var(--header-h) + var(--sp-5));} /* --- Hinweisbalken (unfertige Inhalte) ----------------------------------- */ .notice{background:var(--accent-tint);border-left:3px solid var(--accent); padding:18px 22px;margin-bottom:var(--sp-7);font-size:14px;line-height:1.65;color:var(--n-800);} .notice strong{color:var(--accent);} /* --- Promo-Band (Kombi X 4-in-1) ----------------------------------------- */ .promo{background:var(--accent-tint);border:1px solid #D3DEE9; display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:var(--sp-8); align-items:center;padding:var(--sp-8);margin-top:var(--sp-8);} .promo__body h2{font-size:38px;line-height:1.1;letter-spacing:-.03em;margin:var(--sp-4) 0;} .promo__body > p{margin:0 0 var(--sp-5);font-size:17px;line-height:1.65;color:var(--n-700);max-width:520px;} .promo__list{list-style:none;min-width:0;margin:0 0 var(--sp-6);padding:0;display:grid;gap:10px;} .promo__list li{position:relative;padding-left:26px;font-size:15px;line-height:1.55;color:var(--n-800);} .promo__list li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;background:var(--accent);} .promo__media{background:#fff;border:var(--border);display:flex;align-items:center;justify-content:center; padding:var(--sp-6);min-height:0;} .promo__media img{width:auto;max-width:100%;max-height:440px;height:auto;object-fit:contain;} /* --- Galerie-Thumbs mit echten Bildern ----------------------------------- */ .thumbs--3{grid-template-columns:repeat(3,minmax(0,1fr));} .thumb--img{background:#fff;border:1px solid var(--n-400);padding:6px;} .thumb--img img{width:100%;height:100%;object-fit:contain;} .thumb--img[aria-pressed="true"]{border:1px solid var(--accent);} /* --- Kampagnenseite Kombi X (kombi-x.html) ------------------------------- Eigener Kopf statt .hero: das Produktfoto ist ein hochkantes Freisteller- PNG (310x1024). Es liegt deshalb mittig und vollstaendig in einer ruhigen Flaeche, statt wie in einer Kachel fester Form beschnitten zu werden. */ .kx-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:var(--sp-8);align-items:center;padding-top:var(--pad-head);} .kx-hero .badge{display:inline-flex;} .kx-hero__media{background:var(--n-200);border:var(--border); display:flex;align-items:center;justify-content:center;padding:var(--sp-7);} .kx-hero__media img{width:auto;max-width:100%;max-height:520px;height:auto;object-fit:contain;} /* Strichgezeichnete Icons — das einzige Icon-Idiom der Seite (README Z.139). Vorher standen hier zwei: gefuellte 56-px-Bildkacheln (.usp__icon, navy eingebrannt) neben transparenter 48-px-Strichzeichnung, abwechselnd in einem einzigen Raster. Die Bildkacheln sind weg, damit auch die fuenf Extra-Anfragen und die feste Farbe darin. Die Farbe kommt jetzt vom Band, nicht von hier — so ist dasselbe Glyph auch auf hellen Flaechen brauchbar. */ .usp__glyph{display:block;width:48px;height:48px;margin-bottom:28px;} .band-dark .usp__glyph{color:var(--n-100);} /* Die vier Kombi-X-Technologiekacheln sind dagegen Bildmotive (362x338, Blau eingebrannt, abgeschraegte Ecken) — kein Strich-Glyph, deshalb eine eigene Regel. Ohne sie zog nur das globale img{max-width:100%} die Breite auf die Spalte zusammen, waehrend das height-Attribut bei 338 px stehen blieb: die Motive standen verzerrt in die Hoehe gezogen. width+height gehoeren hier zusammen, und max-width deckelt die Kachel, wenn das Raster unter 1000 px auf zwei bzw. eine Spalte faellt. */ .usp__icon{width:100%;max-width:200px;height:auto;margin-bottom:28px;} /* Werbemotiv mit eingebrannter Schrift: unter 860 px unlesbar, dort also ausgeblendet statt in Miniatur ausgeliefert (siehe Kommentar im HTML). */ .kx-banner{width:100%;height:auto;border:var(--border);} /* --- Vergleichstabelle ---------------------------------------------------- */ /* Die Tabelle hat min-width 760px und scrollt in ihrem Kasten — das verhindert korrekt, dass die Seite waagerecht scrollt, aber auf 390 px war nichts davon zu sehen. Der Verlauf am rechten Rand zeigt, dass es weitergeht; tabindex im Markup macht den Kasten mit Tastatur scrollbar. background-attachment:local haengt den Verlauf an den Inhalt, er verschwindet also am Ende von selbst. */ .compare{overflow-x:auto;border:var(--border); background:linear-gradient(to right,transparent 80%,rgba(14,18,21,.06)) right/40px 100% no-repeat local;} .compare table{border-collapse:collapse;width:100%;min-width:760px;font-size:14px;} .compare th,.compare td{text-align:left;padding:16px 20px;border-bottom:var(--border);vertical-align:top;} .compare thead th{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--n-900);background:var(--n-200);} .compare tbody th{font-weight:500;color:var(--n-600);width:180px;} .compare td{color:var(--n-800);} .compare tr:last-child th,.compare tr:last-child td{border-bottom:none;} /* --- Zugangsvarianten (Fingerabdruck / Code / RFID) ---------------------- */ .variant{border:var(--border);background:#fff;} .variant__media{border-bottom:var(--border);} .variant__body{padding:24px 28px 28px;} .variant__body h3{font-size:18px;margin:0 0 8px;} .variant__body p{margin:0;font-size:14px;line-height:1.6;color:var(--n-700);} /* --- Anwendungsbeispiel --------------------------------------------------- */ .anwendung__media{border:var(--border);background:var(--n-200);padding:var(--sp-6); display:flex;align-items:center;justify-content:center;} .anwendung__media img{width:100%;max-width:300px;height:auto;} /* --- Auszeichnungen: horizontales Karussell ------------------------------ */ .awards{margin-top:var(--sp-7);} .awards__track{ --per-view:6; display:flex;gap:var(--sp-4);list-style:none;margin:0;padding:0; overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth; scrollbar-width:none;-ms-overflow-style:none; } .awards__track::-webkit-scrollbar{display:none;} .awards__item{ flex:0 0 calc((100% - (var(--per-view) - 1) * var(--sp-4)) / var(--per-view)); scroll-snap-align:start; } .awards__item img{ width:100%;height:auto;aspect-ratio:1/1;object-fit:contain; background:#fff;border:var(--border);padding:18px; } /* --- Inhaltsplatzhalter auf Hub-Seiten ----------------------------------- */ .stub{border:var(--border);background:var(--n-200);padding:40px;} .stub h3{margin:0 0 12px;} .stub p{margin:0;font-size:15px;line-height:1.65;color:var(--n-700);} /* --- FAQ-Akkordeon (natives
, kein JS) -------------------------- */ .faq details{border-bottom:var(--border);padding:var(--sp-5) 0;} .faq details:first-child{border-top:var(--border);} .faq summary{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--n-900); cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--sp-4);} .faq summary::-webkit-details-marker{display:none;} /* Zwei Striche aus zwei Hintergrundverlaeufen statt der Zeichen "+" und "–": die haben in Archivo verschiedene Dickten und Hoehen, das Zeichen sprang beim Aufklappen sichtbar. Die Box ist fest 14x14, nur der senkrechte Strich schrumpft aus der Mitte auf 0 — aus dem Plus wird ein Minus, ohne dass eine Kante wandert. 5 px oben setzen die Box auf die Mittellinie der ersten Textzeile. */ .faq summary::after{ content:"";flex:none;width:14px;height:14px;margin-top:5px; background-image:linear-gradient(var(--accent),var(--accent)), linear-gradient(var(--accent),var(--accent)); background-repeat:no-repeat;background-position:center,center; background-size:100% 1.5px,1.5px 100%; transition:background-size var(--dur-2) var(--ease);} .faq details[open] summary::after{background-size:100% 1.5px,1.5px 0;} .faq p{margin:var(--sp-4) 0 0;font-size:15px;line-height:1.7;color:var(--n-700);max-width:70ch;} /* --- Versicherungsgesellschaften (alphabetische Liste) -------------------- */ .insurers{column-count:3;column-gap:var(--sp-8);margin-top:var(--sp-6);} .insurers > div{break-inside:avoid-column;} .insurers h3{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:28px 0 6px;} .insurers > div:first-child h3{margin-top:0;} .insurers ul{list-style:none;margin:0;padding:0;} .insurers li{padding:7px 0;border-bottom:1px solid var(--n-300);font-size:14px;} .insurers li:last-child{border-bottom:none;} .insurers a{color:var(--n-800);} .insurers a:hover{color:var(--accent);} .insurers .no-link{color:var(--n-700);} /* --- Linkliste (Tutorials, Downloads) ------------------------------------ */ .linklist{list-style:none;margin:0;padding:0;border-top:var(--border);} .linklist li{border-bottom:var(--border);} .linklist a{display:flex;align-items:baseline;gap:12px;padding:18px 0;color:var(--n-900);font-size:15px;font-weight:500;} .linklist a:hover{color:var(--accent);} .linklist .meta{margin-left:auto;font-size:12px;letter-spacing:.06em;color:var(--n-600);white-space:nowrap;} /* --- News-Artikel (Unterseiten zu news.html) ------------------------------ */ .article{max-width:760px;} .article__date{margin-bottom:var(--sp-4);} .article__media{margin:0 0 var(--sp-8);max-width:760px;} .article__media img{display:block;width:auto;max-width:100%;height:auto;border:var(--border);} .article h2{font-size:24px;letter-spacing:-.02em;line-height:1.25;margin:var(--sp-7) 0 var(--sp-4);} .article h2:first-child{margin-top:0;} .article p{font-size:16px;line-height:1.75;color:var(--n-700);margin:0 0 var(--sp-4);} .article ul{margin:0 0 var(--sp-4);padding-left:1.25em;} .article li{font-size:16px;line-height:1.75;color:var(--n-700);margin-bottom:6px;} .article figure{margin:var(--sp-6) 0;} .article figure img{display:block;width:auto;max-width:100%;height:auto;border:var(--border);} .article__source{font-size:13px;line-height:1.6;color:var(--n-600);word-break:break-word; border-top:var(--border);padding-top:var(--sp-4);margin-top:var(--sp-6);} .article__back{margin-top:var(--sp-7);} /* --- Rechtstext-Seiten ---------------------------------------------------- */ .legal{max-width:760px;} .legal h2{font-size:24px;letter-spacing:-.02em;margin:var(--sp-8) 0 var(--sp-4);} .legal h2:first-of-type{margin-top:0;} .legal p{font-size:15px;line-height:1.75;color:var(--n-700);margin:0 0 var(--sp-4);} .legal ul{margin:0 0 var(--sp-4);padding-left:1.25em;} .legal li{font-size:15px;line-height:1.75;color:var(--n-700);margin-bottom:6px;} .legal .stand{font-size:13px;color:var(--n-600);border-top:var(--border);padding-top:var(--sp-4);} /* --- Responsive ---------------------------------------------------------- */ /* Navigation klappt früher, sonst kollidiert Nav + CTA mit dem Container */ @media (max-width:1180px){ :root{--edge:32px;} /* Ab hier wird es eng: die Medienspalte faellt auf ihr altes Gewicht zurueck, sonst unterschreitet die Textspalte die 460 px des Lead. */ .hero{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);} /* Und der Faecher zieht sich in die Buehne zurueck: die Containerpolsterung faellt hier auf 32 px, ein Ueberstand kaeme dem Fensterrand zu nahe. */ .hero-fan__item:nth-child(1){--fx:-60%;--fy:5%;--fr:-10deg;} .hero-fan__item:nth-child(2){--fx:-20%;--fy:-4%;--fr:-4deg;} .hero-fan__item:nth-child(3){--fx:20%;--fy:-4%;--fr:4deg;} .hero-fan__item:nth-child(4){--fx:60%;--fy:5%;--fr:10deg;} .nav{gap:16px;} .nav a{font-size:13px;} .header .btn{padding:0 18px;} } @media (max-width:1080px){ .grid-3,.usp-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .promo{grid-template-columns:minmax(0,1fr);gap:var(--sp-6);} .awards__track{--per-view:4;} .footer__cols{grid-template-columns:repeat(2,minmax(0,1fr));} .insurers{column-count:2;} /* Anfrage-Layout auf eine Spalte, damit der Wähler die ganze Breite bekommt. Einspaltig steht keine Überschrift daneben, auf die auszurichten wäre. */ .anfrage-layout{grid-template-columns:minmax(0,1fr);} .anfrage-form-col{padding-top:0;} } @media (max-width:1000px){ :root{--header-h:60px;} .header .logo{width:209px;height:55px;} .nav,.header__actions .btn,.header__actions .divider-v,.header__cta{display:none;} .burger{display:flex;} .header__inner{gap:var(--sp-4);justify-content:space-between;} /* Der Header ist wegen backdrop-filter der umschliessende Block fuer fixierte Kinder — deshalb absolut zum Header statt fixed zum Viewport, mit expliziter Hoehe (bottom:0 waere hier die Header-Unterkante). */ .nav{position:absolute;top:100%;left:0;right:0;height:calc(100vh - var(--header-h)); height:calc(100dvh - var(--header-h));background:#fff;z-index:40; flex-direction:column;gap:0;padding:28px 20px;overflow-y:auto;overscroll-behavior:contain;} /* Erschien vorher hart. Nur Deckkraft und ein kurzer Weg nach oben — display laesst sich nicht ueberblenden, deshalb liegt die Animation auf dem geoeffneten Zustand. */ .nav[data-open="true"]{display:flex;animation:nav-auf var(--dur-2) var(--ease) both;} @keyframes nav-auf{from{opacity:0;translate:0 -6px;}to{opacity:1;translate:none;}} /* Im aufgeklappten Menue fuehrt die Trennlinie das Bild — der wachsende Unterstrich von oben wuerde darauf doppelt liegen. */ .nav a{font-family:var(--font-display);font-size:26px;letter-spacing:-.02em;font-weight:500; padding:16px 0;border-bottom:1px solid var(--n-300);background-image:none;} .nav a[aria-current="page"]{border-bottom-color:var(--accent);} /* Muss ".nav a" von oben ueberstimmen, sonst erbt die Schaltflaeche Displayschrift, 26 px und die Trennlinie der Menuepunkte. */ .nav a.nav__cta{display:inline-flex;align-items:center;justify-content:center; align-self:stretch;margin-top:28px;height:54px;padding:0 32px; font-family:var(--font-text);font-size:14px;font-weight:600;letter-spacing:.02em; color:#fff;background:var(--accent);border:1px solid transparent; border-radius:var(--radius);} .nav a.nav__cta:hover{background:var(--accent-hover);color:#fff;} } @media (max-width:860px){ :root{--edge:20px;} .header .logo{width:185px;height:48px;} .t-h1{font-size:40px;} .t-h2{font-size:30px;} /* Auch die neuen Stufen steigen ab. Vorher standen die Werte inline und blieben auf 390 px unveraendert bei 56 bzw. 48 px. */ .t-h1--page{font-size:36px;} .t-h1--pdp{font-size:34px;} .t-h2--section{font-size:26px;} .hero,.pdp,.grid-2,.grid-3,.form,.spec-list,.contact-layout,.kx-hero,.steps{grid-template-columns:minmax(0,1fr);} .kx-hero{gap:var(--sp-6);} .kx-hero__media{padding:var(--sp-5);} .kx-hero__media img{max-height:360px;} /* Ganze Sektion, nicht nur das Bild — sonst bliebe deren Polsterung als leerer Streifen stehen. */ .kx-banner-wrap{display:none;} .hero{gap:var(--sp-6);} .usp-grid{grid-template-columns:minmax(0,1fr);} /* Der Kopf faellt hier einspaltig. Ohne Deckel waere das Quadrat der Buehne bis zu 820 px hoch. width:100% ist Pflicht: margin-inline:auto schaltet an einem Rasterkind das justify-self:stretch ab, die Breite faellt dann auf fit-content — und weil alle vier Kacheln absolut liegen, ist das null. */ .hero-fan{width:100%;max-width:clamp(300px,78vw,460px);margin-inline:auto;} .scrollcue{margin-top:var(--sp-5);} /* Neben dem Titel ist kein Platz mehr fuer den Halbsatz. */ .grund__teaser{display:none;} .grund__kopf{grid-template-columns:auto auto minmax(0,1fr) auto; gap:var(--sp-3);padding:var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);} .grund__inhalt{padding:0 var(--sp-4) var(--sp-5) var(--sp-5);} .cta{grid-template-columns:minmax(0,1fr);} .cta h2{font-size:28px;} .section-head{flex-direction:column;align-items:flex-start;gap:var(--sp-4);} .section-head > *{width:100%;} .service{padding:28px;} .pdp__info{position:static;} .span-2{grid-column:span 1;} .footer__cols{grid-template-columns:minmax(0,1fr);gap:var(--sp-6);} .page-head h1{font-size:34px;} .promo{padding:var(--sp-5);} .promo__body h2{font-size:26px;} .awards__track{--per-view:2;} .promo__media{padding:var(--sp-5);} .promo__media img{max-height:340px;} .ds-swatches{grid-template-columns:repeat(2,minmax(0,1fr));} .ds-row{grid-template-columns:minmax(0,1fr);gap:6px;} .ds-two{grid-template-columns:minmax(0,1fr);gap:32px;} .ds-grid12{grid-template-columns:repeat(4,minmax(0,1fr));} .picker{padding:var(--sp-5);} .footer__bottom{flex-direction:column;gap:var(--sp-3);} .insurers{column-count:1;} } @media (max-width:560px){ .pick-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .pick img{max-height:130px;} /* Auf dem Telefon kein Faecher: vier Motive nebeneinander waeren hier jedes rund 140 px breit und nicht mehr zu erkennen. Stattdessen steht allein das INSIDE-Motiv hinter dem Einleitungstext — Text und Buehne teilen sich eine Rasterzelle, die Buehne rutscht nach unten und liegt in der Stapelordnung darunter. z-index genuegt an Rasterkindern auch ohne position. */ /* Der weisse Streifen unter der Kopfzeile kam nicht aus der Polsterung, sondern aus align-items:center: die Zeile ist so hoch wie Buehne plus Versatz, der kuerzere Text wurde darin zentriert und bekam rund 105 px Vorlauf. start setzt ihn nach oben, die kleinere Polsterung nimmt den Rest. Nebenwirkung, sehr willkommen: die Ueberlappung mit dem Motiv halbiert sich. */ .hero{align-items:start;padding-top:var(--sp-6);} .hero__text,.hero-fan{grid-area:1/1;} .hero__text{z-index:1;} /* margin-top in Prozent der Buehnenbreite, damit der Versatz mit dem Geraet skaliert: bei 390 px beginnt das Motiv rund 135 px unter dem H1 und ragt rund 85 px unter den Text hinaus. Weiter nach unten geht nicht ohne den Kopf so hoch werden zu lassen, dass der Scroll-Hinweis unter die Falz rutscht — deshalb bleibt die Ueberlappung gross und die Lesbarkeit kommt stattdessen aus der Deckkraft: bei voller Deckung stand der Lead-Absatz auf gebuerstetem Edelstahl und war kaum zu lesen, bei 0.6 liest das Motiv als Hintergrund. */ .hero-fan{z-index:0;max-width:none;margin-top:61%;opacity:.7; filter:drop-shadow(0 8px 20px rgba(14,18,21,.13));} .hero-fan__item:nth-child(n+2){display:none;} /* Groesser als eine Faecherkachel, leicht nach rechts und angeschraegt, damit es als Motiv und nicht als abgeschnittenes Foto liest. */ .hero-fan__item:nth-child(1){--fx:14%;--fy:0%;--fr:-6deg;width:60%;} /* Der Schatten sitzt jetzt an der Buehne, sonst zoege er unter dem Text eine zweite Kante. */ .hero-fan__tile,.hero-fan:hover .hero-fan__tile{filter:none;translate:0;} .grund__nr{font-size:20px;} }