/* ===== 00-base.css ===== */
/* =========================================================================
K-ProTech · 00-base.css
Fundament für alle Abschnitte: Schriften, Tokens, Reset, Typografie,
Raster, Flächen, Knöpfe, Ring-Marker, Tafeln, Einstiege.
Quelle der Werte: dokumente/DESIGN-PAKET.md (Abschnitte 4, 5, 9).
========================================================================= */
/* ---------- Schriften (lokal, Latin) ----------
Drei Rollen (Typo-Runde 08.10.2026, Kritik «Schrift wirkt wie Code, Titel klotzig»):
Archivo Titel (leicht breit, nicht mehr fett-breit) und Etiketten (ganz breit, Versalien, wie das Logo)
Instrument Sans Fliesstext, Leads, Bedienung
IBM Plex Mono nur noch Plan-Beschriftung (Hausschnitt, Masslinien) und Messwerte (--f-mono)
Die Datei archivo-var.woff2 enthält wght 100 bis 900 und wdth 62 bis 125 %: hier vollständig angemeldet. */
@font-face{
font-family:"Archivo";
src:url("/assets/fonts/archivo-var.woff2") format("woff2");
font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap;
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Fliesstext: Instrument Sans (seit 08.10.2026, statt Atkinson: Kristijan wollte eine normale 0 ohne Schrägstrich) */
@font-face{
font-family:"Instrument Sans";
src:url("/assets/fonts/instrument-sans-var.woff2") format("woff2");
font-weight:400 700; font-stretch:75% 100%; font-style:normal; font-display:swap;
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Ziffern in Plan-Beschriftungen: aus Instrument Sans (normale 0, Kristijan will keine durchgestrichene
oder punktierte Null), Buchstaben bleiben IBM Plex Mono. Archivo hat selbst eine normale 0. */
@font-face{
font-family:"KP Ziffern";
src:url("/assets/fonts/instrument-sans-var.woff2") format("woff2");
font-weight:400 700; font-style:normal; font-display:swap;
unicode-range:U+0030-0039;
}
@font-face{
font-family:"IBM Plex Mono";
src:url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
font-weight:500; font-style:normal; font-display:swap;
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* ---------- Tokens ---------- */
:root{
/* Flächen */
--paper:#F3F6F9;
--paper-2:#E6EDF3;
--sheet:#FAFCFD;
--deep:#0A1C31;
--deep-panel:#11294A;
--deep-2:#071427;
/* Schrift */
--ink:#0B2A4A;
--ink-2:#4A6178;
--on-deep:#E9F0F6;
--on-deep-2:#9FB4C8;
/* Marke */
--marine:#0B3A6F;
--tech:#1F78BE;
--tech-hell:#5B9BD5;
--ok:#6FD3CF;
/* Akzent: NUR Knöpfe und Fokus */
--accent:#45C1E6;
--accent-hover:#6CD0EE;
--accent-ink:#0A6E91;
--accent-ink-hover:#095E7D;
--accent-muted:rgba(69,193,230,.16);
/* Linien */
--rule:#C9D5E0;
--rule-strong:#6E849A;
--rule-deep:#24425F;
--field-border-deep:#5F7F9F;
/* Schriften */
--f-display:"Archivo","Arial Narrow",system-ui,sans-serif;
--f-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
/* Etiketten, Kicker, Feldnamen, Nummern im Ring: Archivo ganz breit in Versalien (Logo-Verwandtschaft).
Immer zusammen mit --label-wdth, --label-wght, --label-track und text-transform:uppercase (Klasse .label). */
--f-label:"Archivo","Arial",system-ui,sans-serif;
/* Nur Plan-Beschriftung (SVG-Hausschnitt .plan text, Masslinien) und Messwerte */
--f-mono:"KP Ziffern","IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
/* Typo-Skala (eine Grösse pro Rolle; Handy-Werte links, Computer rechts) */
--t-display:clamp(2.5rem,1.15rem + 5.4vw,5.5rem); /* 40 bis 88 px */
--t-h2:clamp(2rem,1.2rem + 2.8vw,3.375rem); /* 32 bis 54 px */
--t-h3:clamp(1.25rem,1.06rem + .65vw,1.5rem); /* 20 bis 24 px */
--t-lead:clamp(1.1875rem,1.06rem + .55vw,1.375rem); /* 19 bis 22 px */
--t-body:clamp(1.0625rem,1.01rem + .2vw,1.125rem); /* 17 bis 18 px */
--t-klein:.9375rem; /* 15 px: Hilfen, Notizen */
--t-meta:.875rem; /* 14 px: Stand, Zeiten, Bildlegenden */
--t-label:.75rem; /* 12 px: Etiketten in Versalien */
--t-label-klein:.6875rem; /* 11 px: Etiketten in engen Feldern */
/* Achsen und Laufweite je Rolle (Titel weniger breit und weniger fett als im ersten Wurf) */
--display-wdth:108%; --display-wght:700; --display-track:-.03em;
--h2-wdth:108%; --h2-wght:700; --h2-track:-.026em;
--h3-wdth:104%; --h3-wght:640; --h3-track:-.012em;
--label-wdth:125%; --label-wght:600; --label-track:.1em;
/* Fliesstext auf dunklen Flächen eine Spur kräftiger (helle Schrift auf Dunkel wirkt dünner) */
--text-wght-deep:450;
/* Vertikaler Rhythmus: Titel → Lead eng, Kopf → Inhalt weit (Gruppen mindestens doppelt so weit) */
--gap-titel:clamp(18px,1.8vw,26px);
--gap-kopf:clamp(44px,5.6vw,80px);
/* Raster */
--wrap:1240px;
--gutter:clamp(20px,4vw,40px);
--sec-y:clamp(88px,12vw,168px);
--header-h:var(--kopf-h-klein,68px); /* Höhe des kompakten Seitenkopfs, Wert nur in 10-kopf.css */
--fase:10px;
/* Zeilenlänge Fliesstext: in em, nicht in ch. Instrument Sans setzt schmal,
darum 28em (bei 17 bis 18 px rund 60 bis 66 Zeichen, Paket 5). */
--mass:28em;
/* Kleine Titelstufe (Unter-Titel in Listenblöcken, z. B. «Messtechnik vor Ort») */
--t-h3-klein:clamp(1.125rem,1rem + .4vw,1.25rem);
/* Bewegung */
--ease-out:cubic-bezier(0.23,1,0.32,1);
--ease-in-out:cubic-bezier(0.77,0,0.175,1);
--ease-draw:cubic-bezier(.65,0,.35,1);
--dur-1:180ms;
--dur-2:320ms;
--dur-3:600ms;
/* Kontext-Variablen (werden pro Fläche umgestellt) */
--bg:var(--paper);
--fg:var(--ink);
--fg-2:var(--ink-2);
--fg-lead:var(--ink-2); /* Leads: grösser und weicher als der Fliesstext */
--title:var(--marine);
--line:var(--rule);
--line-strong:var(--rule-strong);
--btn-bg:var(--accent-ink);
--btn-bg-hover:var(--accent-ink-hover);
--btn-fg:var(--paper);
--focus:var(--accent-ink);
--fiber:var(--tech);
color-scheme:light;
}
/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
background:var(--deep); /* Überziehen am Handy: oben dunkel wie der Hero */
-webkit-text-size-adjust:100%; text-size-adjust:100%;
overflow-x:clip;
scroll-padding-top:calc(var(--header-h) + 16px);
-webkit-tap-highlight-color:transparent;
}
/* Unterseiten haben einen hellen Kopf: dort hell überziehen */
html:has(body[data-kopf="solid"]){background:var(--paper)}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{
margin:0; overflow-x:clip;
background:var(--paper); color:var(--ink);
font-family:var(--f-body); font-size:var(--t-body); line-height:1.6; font-weight:400;
font-kerning:normal; text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img,svg,video,canvas,picture{display:block;max-width:100%}
img,video{height:auto}
a,button,input,select,textarea,label,summary{touch-action:manipulation}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul[role="list"],ol[role="list"],.liste-plain{list-style:none;padding:0}
[hidden]{display:none!important}
::selection{background:var(--accent);color:var(--deep)}
/* ---------- Flächen (setzen die Kontext-Variablen) ---------- */
.sec{position:relative;padding-block:var(--sec-y);background:var(--bg);color:var(--fg)}
.sec--paper{--bg:var(--paper)}
.sec--paper2{--bg:var(--paper-2)}
.sec--deep,.sec--deep2,.on-deep{
--bg:var(--deep);
--fg:var(--on-deep);
--fg-2:var(--on-deep-2);
--fg-lead:var(--on-deep); /* auf Dunkel bleibt der Lead hell, er ist schon ruhig genug */
--title:var(--on-deep);
--line:var(--rule-deep);
--line-strong:var(--field-border-deep);
--btn-bg:var(--accent);
--btn-bg-hover:var(--accent-hover);
--btn-fg:var(--deep);
--focus:var(--accent);
--fiber:var(--tech-hell);
color-scheme:dark;
font-weight:var(--text-wght-deep);
}
.sec--deep2{--bg:var(--deep-2)}
/* Körnung nur auf dunklen Flächen (2 bis 3 %) */
.sec--deep::before,.sec--deep2::before{
content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
opacity:.035; mix-blend-mode:screen;
}
.sec--deep > *,.sec--deep2 > *{position:relative;z-index:1}
/* Fadenkreuze an den Ecken eines Planblatts (nur helle Flächen, nur Deko) */
.kreuze{
--k:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath d='M6.5 0v13M0 6.5h13' stroke='%236E849A' stroke-width='1'/%3E%3C/svg%3E");
background-image:var(--k),var(--k),var(--k),var(--k);
background-repeat:no-repeat;
background-position:left top,right top,left bottom,right bottom;
background-size:13px 13px;
}
/* ---------- Raster ---------- */
.wrap{
width:100%; max-width:calc(var(--wrap) + 2*var(--gutter)); margin-inline:auto;
/* Handy quer: nie unter die Kamera-Aussparung */
padding-inline:max(var(--gutter),env(safe-area-inset-left,0px)) max(var(--gutter),env(safe-area-inset-right,0px));
}
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,32px)}
/* ---------- Typografie ----------
Hierarchie: Etikett (Archivo breit, Versalien, 12 px) → Titel (Archivo 108 %, 700, eng) →
Lead (Instrument Sans 19 bis 22 px, weicher) → Fliesstext (17 bis 18 px, Zeilenhöhe 1.6).
Abschnitte mit eigenen Titelklassen übernehmen die Werte über die Tokens (--display-wdth usw.). */
.t-display,.t-h2,.t-h3,h1,h2,h3{
font-family:var(--f-display); color:var(--title);
font-kerning:normal; text-wrap:balance; hyphens:manual;
}
.t-display{
font-size:var(--t-display);
font-stretch:var(--display-wdth); font-weight:var(--display-wght);
line-height:.96; letter-spacing:var(--display-track);
}
.t-h2,h2{
font-size:var(--t-h2);
font-stretch:var(--h2-wdth); font-weight:var(--h2-wght);
line-height:1.02; letter-spacing:var(--h2-track);
}
.t-h3,h3{
font-size:var(--t-h3);
font-stretch:var(--h3-wdth); font-weight:var(--h3-wght);
line-height:1.15; letter-spacing:var(--h3-track);
}
/* Schmal: Titel fast normal breit, sonst bricht jedes zweite Wort */
@media (max-width:480px){
:root{--display-wdth:102%;--h2-wdth:102%;--h3-wdth:100%;--display-track:-.025em;--h2-track:-.022em}
}
p,li,dd,figcaption,.port__text,.etikett__text{text-wrap:pretty}
.lead{
font-size:var(--t-lead); line-height:1.5; letter-spacing:-.004em;
color:var(--fg-lead); max-width:30em; /* rund 60 bis 66 Zeichen */
}
.lead strong,.lead b{color:var(--fg)}
.text{max-width:var(--mass)}
.klein{font-size:var(--t-klein);line-height:1.55;color:var(--fg-2)}
/* Etikett-Stil: Kicker, Feldnamen, Beschriftungen, Zähler. Archivo ganz breit wie im Logo.
Ziffern tabellarisch (Archivo hat eine normale 0, keine durchgestrichene). */
.kicker,.label,.etikett{
font-family:var(--f-label); font-stretch:var(--label-wdth); font-weight:var(--label-wght);
font-size:var(--t-label); line-height:1.45; letter-spacing:var(--label-track); text-transform:uppercase;
font-variant-numeric:tabular-nums lining-nums; font-kerning:normal;
color:var(--fg-2);
}
.kicker{display:block}
/* .mono heisst aus Gewohnheit so: Nebenzeilen in gemischter Schreibung (Stand, Zeiten, Bildlegenden),
seit der Typo-Runde in Instrument Sans statt Schreibmaschinen-Mono. Echte Mono nur über --f-mono. */
.mono{
font-family:var(--f-body); font-weight:500;
font-size:var(--t-meta); line-height:1.45; letter-spacing:.005em;
font-variant-numeric:tabular-nums; color:var(--fg-2);
}
strong,b{font-weight:600}
.lang{hyphens:auto;-webkit-hyphens:auto}
/* Fliesstext-Links: Textfarbe mit Unterstreichung, nie Cyan */
.link{
color:inherit; text-decoration:underline; text-decoration-thickness:1px;
text-underline-offset:.22em; text-decoration-color:var(--line-strong);
text-decoration-skip-ink:auto;
transition:text-decoration-color var(--dur-1) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){ .link:hover{text-decoration-color:currentColor} }
/* ---------- Fokus ---------- */
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
:focus:not(:focus-visible){outline:none}
/* ---------- Knöpfe (eine Absicht: «Anliegen beschreiben») ---------- */
.btn{
position:relative; /* Bezug für den Lichtlauf (.btn__lauf, main.js) */
display:inline-flex; align-items:center; justify-content:center; gap:.6em;
min-height:48px; padding:0 22px;
border:0; border-radius:2px;
background:var(--btn-bg); color:var(--btn-fg);
font-family:var(--f-body); font-weight:600; font-size:1rem; line-height:1.2;
text-decoration:none; white-space:nowrap;
-webkit-user-select:none; user-select:none; -webkit-touch-callout:none; /* langer Druck: keine Linkvorschau */
transition:background-color var(--dur-1) var(--ease-out), transform 120ms var(--ease-out);
}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .btn:hover{background:var(--btn-bg-hover)} }
.btn__pfeil{width:16px;height:16px;flex:none}
/* Zweiter Weg (Telefon, Textlink-Knopf): nur Linie, kein Akzent */
.btn--linie{
background:transparent; color:var(--fg);
box-shadow:inset 0 0 0 1px var(--line-strong);
}
@media (hover:hover) and (pointer:fine){ .btn--linie:hover{background:transparent;box-shadow:inset 0 0 0 1px var(--fg)} }
@media (prefers-reduced-motion:reduce){ .btn{transition:background-color var(--dur-1) var(--ease-out)} .btn:active{transform:none} }
/* Lichtlauf: ein Lichtpunkt mit Schweif läuft einmal um den Rahmen
(Maus: beim Darüberfahren, Handy: beim Antippen). main.js setzt das SVG beim ersten Mal
ein und legt die Bahn genau auf die Knopfkante (1 Einheit = 1 Pixel). Kein Layoutsprung:
das SVG liegt absolut über dem Knopf und fängt keine Klicks.
data-ton: «dunkel» = Petrol-Knopf auf hell, «hell» = Cyan-Knopf auf dunkel, «linie» = Linienknopf. */
.btn__lauf{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.btn__lauf path{fill:none;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;vector-effect:non-scaling-stroke;stroke-dasharray:0 100000}
.btn__lauf .btn__lauf-s{stroke:var(--lauf)}
.btn__lauf .btn__lauf-kopf{stroke:var(--lauf-kopf);stroke-width:2}
.btn__lauf .btn__lauf-zu{stroke:var(--lauf-kanal);stroke-width:1;stroke-dasharray:none;opacity:0}
.btn__lauf[data-ton="dunkel"]{--lauf:var(--accent);--lauf-kopf:var(--sheet);--lauf-kanal:var(--accent)}
.btn__lauf[data-ton="hell"]{--lauf:var(--sheet);--lauf-kopf:var(--sheet);--lauf-kanal:var(--deep)}
.btn__lauf[data-ton="linie"]{--lauf:var(--focus);--lauf-kopf:var(--focus);--lauf-kanal:var(--focus)}
@media (prefers-reduced-motion:reduce){ .btn__lauf{display:none} }
/* ---------- Ring-Marker (offener Logo-Ring mit Nummer innen) ----------
Markup:
01
Spalt über --gap (in % des Umfangs, 0 = geschlossen). Geschlossen: .is-zu */
.marker{
--gap:14; --ring:currentColor;
position:relative; display:inline-grid; place-items:center;
width:40px; height:40px; flex:none; color:var(--title);
}
.marker .ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ring__arc{
fill:none; stroke:var(--ring); stroke-width:1.6;
stroke-dasharray:calc(100 - var(--gap)) var(--gap);
stroke-dashoffset:-4; /* Spalt oben rechts wie im Logo */
transform:rotate(-90deg); transform-origin:50% 50%;
transition:stroke-dasharray var(--dur-3) var(--ease-draw), stroke var(--dur-2) var(--ease-out);
}
.marker.is-zu{--gap:0}
.marker.is-ok{--gap:0;--ring:var(--ok)}
.marker__nr{
font-family:var(--f-label); font-stretch:var(--label-wdth); font-weight:var(--label-wght);
font-size:var(--t-label); line-height:1; letter-spacing:.02em;
font-variant-numeric:tabular-nums lining-nums; color:currentColor;
}
/* Kleiner, geschlossener Ring als Aufzählungszeichen für «Das erhalten Sie»-Listen
(Übergabe-Mappe, Ergebnis der Prüfstrecke). Gewöhnliche Aufzählungen: Quadrat (.liste-punkt). */
.marker--klein{width:11px;height:11px;margin-top:calc(.725em - 5.5px);margin-top:calc(.5lh - 5.5px);color:var(--title)}
.marker--klein .ring__arc{stroke-width:6.5}
/* Gewöhnliche Aufzählung: kleines gefülltes Quadrat wie ein Messpunkt im Plan.
Keine Striche (sähen aus wie Gedankenstriche am Zeilenanfang). */
.liste-punkt > li{position:relative;padding-inline-start:22px}
.liste-punkt > li::before{
content:""; position:absolute; inset-inline-start:1px; top:calc(.78em - 2.5px); top:calc(.5lh - 2.5px);
width:5px; height:5px; background:var(--title);
}
/* Etikett wie eine Patchpanel-Beschriftung (Schrift: Etikett-Stil oben).
Das Schild darf umbrechen (lange Ortsnamen bei 320 px). Rechts weniger Polster:
die Laufweite hängt hinter dem letzten Buchstaben noch 0.1em an. */
.etikett{display:inline-flex;align-items:center;gap:10px;min-width:0;max-width:100%}
.etikett__text{
min-width:0; padding:4px calc(8px - var(--label-track)) 3px 8px;
border:1px solid var(--line-strong); border-radius:1px;
font-size:var(--t-label-klein); line-height:1.35; color:var(--fg);
}
/* ---------- Tafeln mit Fase oben rechts (Haarlinie läuft um die Fase) ----------
…
Variablen: --tafel-bg, --tafel-line */
.tafel{
--tafel-bg:var(--sheet); --tafel-line:var(--marine);
position:relative; isolation:isolate;
padding:clamp(20px,3vw,32px);
clip-path:polygon(0 0,calc(100% - var(--fase)) 0,100% var(--fase),100% 100%,0 100%);
background:var(--tafel-line);
}
.tafel::before{
content:""; position:absolute; inset:1px; z-index:-1;
background:var(--tafel-bg);
clip-path:polygon(0 0,calc(100% - var(--fase) + .6px) 0,100% calc(var(--fase) - .6px),100% 100%,0 100%);
}
.on-deep .tafel,.sec--deep .tafel{--tafel-bg:var(--deep-panel);--tafel-line:var(--rule-deep)}
/* ---------- Haarlinien ---------- */
.haar{border:0;border-top:1px solid var(--line);margin:0}
/* ---------- Abschnittskopf (Standard, darf pro Abschnitt variieren) ---------- */
.kopf{display:grid;gap:clamp(16px,2vw,24px);max-width:62ch;margin-bottom:clamp(40px,6vw,72px)}
/* ---------- Einstiege beim Scrollen ----------
Grundzustand = Endzustand. Nur mit JS (html.js) und ohne Reduced Motion
wird vorher versteckt. main.js setzt .is-in. */
@media (prefers-reduced-motion:no-preference){
html.js [data-reveal]:not(.is-in){opacity:0;transform:translate3d(0,18px,0)}
html.js [data-reveal]{transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out);transition-delay:calc(var(--i,0) * 50ms)}
}
/* ---------- Hilfsklassen ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Sprunglink: ohne Tastatur-Fokus über dem Bildrand UND durchsichtig. Nur verschoben lag er 16 px über
dem Rand und tauchte bei Element-Fotos (Aufnahme über den Bildschirm hinaus) und beim Überziehen am
Seitenanfang auf. Bleibt fokussierbar (opacity, nicht visibility). */
.skip{
position:fixed; left:12px; top:12px; z-index:200;
padding:10px 14px; background:var(--deep); color:var(--on-deep);
font-weight:600; text-decoration:none; border-radius:2px;
opacity:0; transform:translateY(calc(-100% - 24px));
transition:transform var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out);
}
.skip:focus-visible{transform:none; opacity:1}
@media (prefers-reduced-motion:reduce){ .skip{transition:none} }
/* Unbestätigte Aussagen ([K]) sind normaler Text. data-k dient nur der Liste vor dem Livegang. */
[data-k]{}
/* ---------- Abschnittstitel steigen aus einer Maske (main.js) ----------
main.js zerlegt das h2 jedes Abschnitts (ausser Hero) in Wörter:
Wort …
Screenreader lesen den ganzen Titel aus aria-label. Ohne JS, mit Reduced Motion oder ohne
IntersectionObserver wird nichts zerlegt. Versatz pro Zeile (110 ms) und Wort (45 ms) setzt main.js.
Die Maske reicht unten bis unter die Unterlängen (padding-bottom), damit nichts abgeschnitten wird. */
.tw{
display:inline-block; vertical-align:top;
padding-bottom:.18em; margin-bottom:-.18em;
clip-path:inset(-.4em -.3em 0 -.3em);
}
.tw__i{display:inline-block}
@media (prefers-reduced-motion:no-preference){
html.js .tw-titel .tw__i{transition:transform 900ms var(--ease-out)}
html.js .tw-titel:not(.is-in) .tw__i{transform:translate3d(0,130%,0)}
}
/* ===== 05-knopf.css ===== */
/* =========================================================================
05-knopf.css · Knöpfe für die ganze Seite (Helfer Kopf, 08.10.2026, Feedback 4, Korrektur 21:00)
Kommt nach 00-base.css und überschreibt dort .btn. Ein Look für alle Knöpfe:
Ruhe Fläche aus --btn-bg (Petrol auf hell, Cyan auf dunkel), 2 px Radius, Pfeil rechts.
Maus Eine zweite Ebene in --btn-bg-hover blendet über die Deckkraft ein (200 ms), der Pfeil
gleitet 5 px nach rechts. Kein Lichtstreif, kein Verlauf. Nur (hover:hover) and (pointer:fine).
Drücken Der Knopf gibt nach (scale .95, 160 ms). Beim Loslassen federt er kurz über 1 hinaus zurück,
und von seiner Kante läuft ein Ring nach aussen und vergeht (knopf.js, .btn__puls).
Der Ring liegt ausserhalb der Schrift und ist geschlossen: kein Lade-Kreisel.
Linien .btn--linie: Telefon und WhatsApp mit Symbol links, kein Pfeil; Maus: Rahmen in --fg, leise Fläche.
Symbole sind CSS-Masken in currentColor: kein zusätzliches Markup, kein Layoutsprung, ohne JS gleich.
Animiert werden nur opacity und scale/transform. Reduced Motion: Zustände ohne Bewegung.
Ersetzt den Lichtlauf aus main.js: .btn__lauf bleibt ausgeblendet.
========================================================================= */
.btn{
--knopf-zeichen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 8h11.2M8.7 3.7 13 8l-4.3 4.3' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3C/svg%3E");
isolation:isolate;
gap:10px;
min-height:48px; padding:0 18px 0 22px;
letter-spacing:-.002em;
transition:scale 160ms var(--ease-out);
}
/* Druck über die eigene Eigenschaft scale (nicht transform): verträgt sich mit Einstiegen anderer Abschnitte,
und knopf.js kann beim Loslassen nahtlos weiterfedern. */
.btn:active{transform:none;scale:.95}
/* Zweite Ebene für die Maus (über der Fläche, unter der Schrift) */
.btn::before{
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
border-radius:inherit;
background:var(--btn-bg-hover);
opacity:0;
}
/* Symbol (Pfeil, bei Linienknöpfen Telefon oder WhatsApp) */
.btn::after{
content:""; flex:none; width:16px; height:16px; margin-inline-end:-2px;
background-color:currentColor;
-webkit-mask:var(--knopf-zeichen) center / 100% 100% no-repeat;
mask:var(--knopf-zeichen) center / 100% 100% no-repeat;
}
@media (hover:hover) and (pointer:fine){
/* Grundfarbe bleibt stehen, die Ebene darüber wechselt (00-base würde die Fläche hart umschalten) */
.btn:not(.btn--linie):hover{background:var(--btn-bg)}
.btn--linie:hover{background:transparent;box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn:hover::before{opacity:1}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
.btn::before{transition:opacity 200ms var(--ease-out)}
.btn:not(.btn--linie)::after{transition:transform 200ms var(--ease-out)}
.btn:not(.btn--linie):hover::after{transform:translate3d(5px,0,0)}
}
/* ---------- Linienknöpfe: Telefon, WhatsApp ---------- */
.btn--linie{padding:0 20px 0 17px}
.btn--linie::before{
background:color-mix(in srgb,var(--fg) 6%,transparent);
box-shadow:inset 0 0 0 1px var(--fg);
}
.btn--linie::after{order:-1;width:18px;height:18px;margin:0}
.btn--linie[href^="tel:"]{
--knopf-zeichen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3.5h3.2l1.6 4.2-2.1 1.4a11 11 0 0 0 7.2 7.2l1.4-2.1 4.2 1.6v3.2a2 2 0 0 1-2.2 2A17.5 17.5 0 0 1 3 5.7a2 2 0 0 1 2-2.2z' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.btn--linie[href*="wa.me"]{
--knopf-zeichen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.6 20.4l1.4-4.1A8.6 8.6 0 1 1 8.2 19.3z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M9.3 7.9c.3-.3.8-.3 1 .1l.8 1.4c.2.3.1.7-.2.9l-.5.4c.5 1.1 1.4 2 2.5 2.5l.4-.5c.2-.3.6-.4.9-.2l1.4.8c.4.2.4.7.1 1l-.6.6c-.5.5-1.3.6-1.9.3-2-1-3.5-2.5-4.5-4.5-.3-.6-.2-1.4.3-1.9z'/%3E%3C/svg%3E");
}
.btn--linie:not([href^="tel:"]):not([href*="wa.me"])::after{content:none}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
/* der Hörer nickt einmal kurz (wie im Kopf) */
.btn--linie[href^="tel:"]:hover::after{animation:knopf-klingeln 520ms var(--ease-out)}
}
@keyframes knopf-klingeln{
0%{transform:rotate(0)}
18%{transform:rotate(-14deg)}
38%{transform:rotate(10deg)}
58%{transform:rotate(-6deg)}
78%{transform:rotate(3deg)}
100%{transform:rotate(0)}
}
/* ---------- Ring beim Loslassen (knopf.js) ----------
Geschlossener Rahmen in Knopfform, liegt bündig um die Kante und läuft rund 10 px nach aussen,
dabei vergeht er (opacity). Farbe: Fläche des Knopfs, bei Linienknöpfen die Schriftfarbe.
Grösse und Lauf setzt knopf.js per transform (scale getrennt für Breite und Höhe). */
.btn__puls{
position:absolute; inset:0; z-index:-2; pointer-events:none;
border-radius:inherit;
color:var(--btn-bg);
box-shadow:0 0 0 2px currentColor;
opacity:0;
}
.btn--linie .btn__puls{color:var(--fg)}
/* Lichtlauf aus main.js: ersetzt (siehe oben). Alter Druck-Ring (erster Wurf): weg. */
.btn__lauf,.btn__ring{display:none!important}
@media (prefers-reduced-motion:reduce){
.btn{transition:none}
.btn:active{scale:none;transform:none}
.btn__puls{display:none}
}
/* ===== 10-kopf.css ===== */
/* =========================================================================
10-kopf.css · Seitenkopf (Helfer Kopf, Stand 08.10.2026 spät, Feedback 13)
.kopf ist in 00-base.css auch der Abschnittskopf (Grid, 62ch, Abstand unten).
Darum hängen alle Regeln hier an .kopf--seite, und die Grundwerte von .kopf
werden für diesen Kopf zurückgesetzt.
Zustände: gross (oben auf der Seite) · .is-klein (ab 48 px Scroll, kopf.js)
durchsichtig über dem Hero (Standard) · .is-solid (hell, Haarlinie)
· body[data-kopf="solid"] (Unterseiten, von Anfang an hell)
· .is-offen (Handy-Menü offen, Vollfläche --deep)
· .is-bereit (erst danach gibt es Übergänge: beim Laden schrumpft nichts sichtbar)
Feedback 13 («Kacheln schöner, Lücke vor der Telefonnummer zu gross, Logo oben zu gross»):
Computer: Logo links, rechts zwei gleich hohe Kapseln auf der Mittellinie des Logos, 12 px auseinander:
[Navigation: sechs Menüpunkte, die Markierung gleitet] [Telefon im offenen Logo-Ring | Knopf]
Über dem Film mattiertes Glas mit Haarlinie, nach dem Hero eine helle Schale mit weissem Schieber.
Gewechselt wird nur über opacity (zwei Ebenen je Kapsel), das Glas wird danach ganz abgeschaltet.
Logo oben und klein gleich gross (84 px): beim Scrollen wird nur die Leiste niedriger.
Handy: «Menü» ist dieselbe Kapsel, im offenen Menü hängen die Punkte als Knoten an einer Faser.
Schrumpfen ohne Layout-Animation: die Zeile behält die Lage für den grossen Zustand,
klein rückt alles mit translate nach oben. Fläche und Abdunklung sind eigene Ebenen in voller
Höhe und rücken ebenfalls nur mit translate.
Radien: Kapseln 6 px (nur hier im Kopf), innen 2 px wie alle Knöpfe der Seite (6 = 2 + 4 px Rand).
========================================================================= */
/* ---------- Höhen (die einzige Stelle) ----------
--kopf-h-gross oben auf der Seite
--kopf-h-klein nach dem ersten Scrollen: kompakte Leiste. So hoch, dass im ganzen Logo «K-ProTech GmbH»
klar und «Telecommunication Services» noch lesbar ist (Freigabe Kristijan 08.10. spät).
Sie ist zugleich --header-h aus 00-base.css (dort: --header-h:var(--kopf-h-klein)):
scroll-padding-top für Anker, klebende Teile (Leistungs-Plan, Kachelstapel, Klima,
Ablauf-Bühne, Fragen, Recht) und pruefstrecke.js / mappe.js rechnen damit. Nie eine feste Zahl.
--kopf-h auf :root immer die grosse Höhe: oberer Abstand des Heros und der Unterseiten
(kein Sprung im Inhalt, der Kopf liegt fest darüber). Im Kopf selbst stellt
.is-klein sie auf die kleine Höhe um (Menü-Fläche, Messungen).
--kopf-logo-h Logo-Höhe, oben und klein gleich (Feedback 13: oben kleiner als vorher 104 px,
klein wie freigegeben). Computer 84 px (116 px breit), Handy 68 px (94 px breit). */
:root{
--kopf-h-gross:108px;
--kopf-h-klein:92px;
--kopf-logo-h:84px;
--kopf-h:var(--kopf-h-gross);
}
@media (min-width:861px) and (max-height:700px){
:root{--kopf-h-gross:96px;--kopf-h-klein:88px;--kopf-logo-h:80px}
}
@media (max-width:860px){
:root{--kopf-h-gross:88px;--kopf-h-klein:76px;--kopf-logo-h:68px}
}
@media (max-width:359px){
:root{--kopf-h-gross:80px;--kopf-h-klein:72px;--kopf-logo-h:64px}
}
/* Handy quer: der Platz ist zu knapp für einen grossen Zustand. Logo 54 px, damit die Kapseln (40 / 44 px)
die Marke nicht überragen; 5 px Luft oben und unten. */
@media (orientation:landscape) and (max-height:500px){
:root{--kopf-h-gross:64px;--kopf-h-klein:64px;--kopf-logo-h:54px}
}
/* Wächter für «klein» (kopf.js): 48 px am Seitenanfang. Ist er aus dem Bild, schrumpft der Kopf. */
.kopf-oben{position:absolute;left:0;top:0;width:1px;height:48px;pointer-events:none;opacity:0}
.kopf.kopf--seite{
display:block; gap:0; max-width:none; margin:0;
position:fixed; inset:0 0 auto 0; z-index:60;
padding-top:env(safe-area-inset-top,0px);
isolation:isolate;
color:var(--fg);
/* Weg nach oben beim Schrumpfen (negativ) */
--kopf-hub:calc(var(--kopf-h-klein) - var(--kopf-h-gross));
/* Kapseln: Höhe, Rand bis Markierung und Knopf, Radius, Trefferfläche (nie unter 44 px) */
--kk-h:44px;
--kk-pad:4px;
--kk-r:6px;
--kk-hit:max(44px, var(--kk-h));
/* Zustand über dem Hero: Kontext dunkel */
--fg:var(--on-deep);
--fg-2:var(--on-deep-2);
--line:var(--rule-deep);
--line-strong:var(--field-border-deep);
--btn-bg:var(--accent);
--btn-bg-hover:var(--accent-hover);
--btn-fg:var(--deep);
--focus:var(--accent);
--kk-glas:color-mix(in srgb,var(--deep-2) 48%,transparent);
--kk-kante:color-mix(in srgb,var(--on-deep) 16%,transparent);
--kk-licht:color-mix(in srgb,var(--on-deep) 9%,transparent);
--kk-mark:color-mix(in srgb,var(--on-deep) 14%,transparent);
--kk-ring:var(--tech-hell);
--kk-ring-zu:var(--ok);
--kk-faser:var(--tech-hell);
color-scheme:dark;
}
.kopf.kopf--seite.is-klein{--kopf-h:var(--kopf-h-klein)}
/* Helle Fläche als eigene Ebene in voller Höhe: überblendet wird nur die Deckkraft, beim Schrumpfen rückt sie hoch */
.kopf.kopf--seite::before{
content:""; position:absolute; left:0; right:0; top:0; z-index:-1; pointer-events:none;
height:calc(env(safe-area-inset-top,0px) + var(--kopf-h-gross));
background:var(--paper);
box-shadow:inset 0 -1px 0 var(--rule);
opacity:0;
}
/* Abdunklung über dem Film: damit «GmbH» und «Telecommunication Services» auf jeder Fassade lesbar bleiben.
Ein weicher Verlauf über die ganze Breite plus eine ruhige Ellipse hinter dem Logo. Nur im durchsichtigen Zustand. */
.kopf.kopf--seite::after{
content:""; position:absolute; left:0; right:0; top:0; z-index:-2; pointer-events:none;
height:calc(env(safe-area-inset-top,0px) + var(--kopf-h-gross) + 64px);
background:
radial-gradient(closest-side, color-mix(in srgb,var(--deep-2) 56%,transparent), transparent)
calc(max(var(--gutter), (100vw - var(--wrap)) / 2) - 70px)
calc(env(safe-area-inset-top,0px) + var(--kopf-h-gross) / 2 - (var(--kopf-logo-h) + 60px) / 2)
/ calc(var(--kopf-logo-h) * 1.38 + 140px) calc(var(--kopf-logo-h) + 60px) no-repeat,
linear-gradient(to bottom,
color-mix(in srgb,var(--deep-2) 64%,transparent) 0%,
color-mix(in srgb,var(--deep-2) 38%,transparent) 55%,
transparent 100%);
}
.kopf.kopf--seite.is-klein::before,
.kopf.kopf--seite.is-klein::after{translate:0 var(--kopf-hub)}
/* hell: nach dem Hero, auf Unterseiten und ohne JavaScript (sonst stünde helle Schrift über hellen Abschnitten) */
.kopf.kopf--seite.is-solid,
body[data-kopf="solid"] .kopf.kopf--seite,
html:not(.js) .kopf.kopf--seite{
--fg:var(--ink);
--fg-2:var(--ink-2);
--line:var(--rule);
--line-strong:var(--rule-strong);
--btn-bg:var(--accent-ink);
--btn-bg-hover:var(--accent-ink-hover);
--btn-fg:var(--paper);
--focus:var(--accent-ink);
--kk-mark:color-mix(in srgb,var(--ink) 7%,transparent);
--kk-ring:var(--tech);
--kk-ring-zu:var(--tech);
--kk-faser:var(--tech);
color-scheme:light;
}
.kopf.kopf--seite.is-solid::before,
body[data-kopf="solid"] .kopf.kopf--seite::before,
html:not(.js) .kopf.kopf--seite::before{opacity:1}
.kopf.kopf--seite.is-solid::after,
body[data-kopf="solid"] .kopf.kopf--seite::after,
html:not(.js) .kopf.kopf--seite::after{opacity:0}
/* ohne JavaScript kann das Menü nicht aufgehen und der Kopf nicht schrumpfen:
Knopf weglassen, Kopf scrollt mit der Seite weg, statt dauerhaft Inhalt zu verdecken */
html:not(.js) .kopf__menu{display:none!important}
html:not(.js) .kopf.kopf--seite{position:absolute}
/* Unterseiten: Inhalt beginnt unter dem festen Kopf (grosse Höhe, sie gilt oben auf der Seite) */
body[data-kopf="solid"] main{padding-top:calc(var(--kopf-h) + env(safe-area-inset-top,0px))}
/* Menü offen (nur Handy): immer dunkel, auch auf Unterseiten */
.kopf.kopf--seite.kopf--seite.is-offen{
--fg:var(--on-deep);
--fg-2:var(--on-deep-2);
--line:var(--rule-deep);
--line-strong:var(--field-border-deep);
--btn-bg:var(--accent);
--btn-bg-hover:var(--accent-hover);
--btn-fg:var(--deep);
--focus:var(--accent);
color-scheme:dark;
}
.kopf.kopf--seite.kopf--seite.is-offen::before,
.kopf.kopf--seite.kopf--seite.is-offen::after{opacity:0}
/* ---------- Zeile ----------
Die Zeile ist so hoch wie der Kopf gerade ist (Messungen anderer Skripte stimmen), ihr Inhalt liegt aber
fest für den grossen Zustand (oben ausgerichtet, Abstand oben = halbe Differenz). Klein rückt er mit translate. */
.kopf__in{
display:flex; align-items:flex-start;
gap:clamp(20px,2.4vw,40px);
height:var(--kopf-h);
}
/* ---------- Marke: ganzes Logo, oben und klein gleich gross ---------- */
.kopf__marke{
position:relative; display:block; flex:none;
height:var(--kopf-logo-h);
margin-top:calc((var(--kopf-h-gross) - var(--kopf-logo-h)) / 2);
color:inherit; text-decoration:none;
-webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
.kopf__logo{display:block;height:var(--kopf-logo-h);width:auto;max-width:none}
.kopf__logo--hell{position:absolute;left:0;top:0;opacity:0}
.kopf.kopf--seite.is-solid .kopf__logo--hell,
[data-kopf="solid"] .kopf.kopf--seite .kopf__logo--hell,
html:not(.js) .kopf__logo--hell{opacity:1}
.kopf.kopf--seite.is-solid .kopf__logo--dunkel,
[data-kopf="solid"] .kopf.kopf--seite .kopf__logo--dunkel,
html:not(.js) .kopf__logo--dunkel{opacity:0}
.kopf.kopf--seite.kopf--seite.is-offen .kopf__logo--dunkel{opacity:1}
.kopf.kopf--seite.kopf--seite.is-offen .kopf__logo--hell{opacity:0}
.kopf--seite.is-klein .kopf__marke{translate:0 calc(var(--kopf-hub) / 2)}
/* ---------- Anker (gemeinsam) ---------- */
.kopf__liste{
display:flex; align-items:center;
margin:0; padding:0; list-style:none;
}
.kopf__anker{
position:relative;
display:inline-flex; align-items:center; min-height:44px;
color:var(--fg); text-decoration:none;
font-weight:560; font-size:.9375rem; line-height:1.2; white-space:nowrap;
transition:color 200ms var(--ease-out);
}
.kopf__extra{display:none}
.kopf__gleiter{display:none}
/* =========================================================================
Computer (ab 861 px): zwei Kapseln
========================================================================= */
@media (min-width:861px){
/* Logo links, rechts eine Gruppe aus Navigation und Kontakt, 12 px auseinander (keine Lücke vor dem Telefon) */
.kopf__in{gap:12px}
/* Kapsel 1: Navigation */
.kopf__nav{
position:relative; isolation:isolate;
flex:0 1 auto; min-width:0; margin-inline-start:auto;
display:flex; align-items:center;
height:var(--kk-h); padding-inline:var(--kk-pad);
border-radius:var(--kk-r);
}
.kopf__liste{height:100%}
/* Kapsel 2: Telefon und Knopf */
.kopf__aktion{
position:relative; isolation:isolate; flex:none;
display:flex; align-items:center;
height:var(--kk-h); padding:var(--kk-pad);
border-radius:var(--kk-r);
}
.kopf__nav,.kopf__aktion{margin-top:calc((var(--kopf-h-gross) - var(--kk-h)) / 2)}
.kopf--seite.is-klein :is(.kopf__nav,.kopf__aktion){translate:0 calc(var(--kopf-hub) / 2)}
/* Ebenen beider Kapseln: ::before Glas (über dem Film), ::after helle Schale (nach dem Hero, Unterseiten) */
:is(.kopf__nav,.kopf__aktion)::before,
:is(.kopf__nav,.kopf__aktion)::after{
content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
border-radius:var(--kk-r);
}
:is(.kopf__nav,.kopf__aktion)::before{
background:var(--kk-glas);
-webkit-backdrop-filter:blur(12px) saturate(1.4);
backdrop-filter:blur(12px) saturate(1.4);
box-shadow:inset 0 0 0 1px var(--kk-kante), inset 0 1px 0 var(--kk-licht);
}
:is(.kopf__nav,.kopf__aktion)::after{
background:var(--paper-2);
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 11%,transparent);
opacity:0;
}
/* Menüpunkte: Trefferfläche über die ganze Kapselhöhe (mindestens 44 px) */
.kopf__anker{min-height:var(--kk-hit);padding-inline:14px}
.kopf__anker:focus-visible{outline-offset:-3px}
/* Markierung: Grundbreite 100 px, kopf.js setzt --gx (Lage) und --gs (Breite / 100).
::before helle Glasfläche über dem Film, ::after weisser Schieber auf der hellen Schale.
Die Faser unten zeigt den Abschnitt, in dem man liest (.is-abschnitt), nicht das Darüberfahren. */
.kopf__gleiter{
display:block; position:absolute; left:0; top:var(--kk-pad); bottom:var(--kk-pad); width:100px; z-index:-1;
border-radius:2px; pointer-events:none;
transform-origin:0 50%;
transform:translateX(var(--gx,0px)) scaleX(var(--gs,1));
opacity:0;
}
.kopf__gleiter.is-an{opacity:1}
.kopf__gleiter::before,.kopf__gleiter::after{content:"";position:absolute;inset:0;border-radius:inherit}
.kopf__gleiter::before{background:var(--kk-mark)}
.kopf__gleiter::after{
background:var(--sheet);
box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 9%,transparent), 0 1px 0 rgba(11,58,111,.08);
opacity:0;
}
.kopf__gleiter-faser{
position:absolute; left:12px; right:12px; bottom:4px; z-index:1; height:1px;
background:var(--kk-faser);
opacity:0;
}
.kopf__gleiter.is-abschnitt .kopf__gleiter-faser{opacity:1}
/* Telefon: Hörer im offenen Logo-Ring, Nummer in Menügrösse. Trefferfläche über die ganze Kapselhöhe,
beim Darüberfahren erscheint eine Kachel wie die Markierung. */
.kopf__tel{
position:relative; isolation:isolate;
display:inline-flex; align-items:center; gap:10px;
height:var(--kk-hit);
margin-block:calc((var(--kk-h) - var(--kk-hit)) / 2 - var(--kk-pad));
margin-inline:calc(-1 * var(--kk-pad)) 0;
padding:0 calc(14px + var(--kk-pad)) 0 calc(var(--kk-pad) * 2);
border-radius:var(--kk-r);
font-family:var(--f-body); font-weight:560; font-size:.9375rem; line-height:1.2; letter-spacing:0;
font-variant-numeric:tabular-nums lining-nums; white-space:nowrap;
color:var(--fg); text-decoration:none;
-webkit-user-select:none; user-select:none;
transition:color 200ms var(--ease-out);
}
.kopf__tel::before{
content:""; position:absolute; z-index:-1; pointer-events:none;
inset:calc(var(--kk-pad) + (var(--kk-hit) - var(--kk-h)) / 2) var(--kk-pad);
border-radius:2px; background:var(--kk-mark); opacity:0;
}
.kopf__tel:focus-visible{outline-offset:-3px}
/* offener Logo-Ring um den Hörer: Spalt oben wie bei den Ring-Markern der Seite (14 % des Umfangs).
Darüber ein geschlossener Ring, der beim Darüberfahren einblendet (nur opacity). */
.kopf__tel-ring{
position:relative; display:grid; place-items:center; flex:none;
width:28px; height:28px;
}
.kopf__tel-bogen{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:rotate(-75.6deg)}
.kopf__tel-bogen circle{fill:none;stroke-width:2.2}
.kopf__tel-offen{stroke:var(--kk-ring);stroke-dasharray:86 14}
.kopf__tel-zu{stroke:var(--kk-ring-zu);opacity:0}
.kopf__tel-zeichen{
position:relative; width:14px; height:14px; overflow:visible;
fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round;
transform-origin:30% 70%;
}
/* Knopf: Fläche wie die Markierung 4 px eingerückt (36 px), die Trefferfläche ist die ganze Kapselhöhe.
Der durchsichtige Rand trägt die Trefferfläche, die Fläche sitzt im Innenbereich (background-clip).
Radius aussen = 2 px + Rand: innen bleibt er 2 px wie alle Knöpfe. Druck gibt zur Telefonseite hin nach.
Nur Kopf-Selektoren: die globalen .btn in 05-knopf.css bleiben unverändert. */
.kopf.kopf--seite .kopf__aktion .kopf__cta{
--kk-cta-b:calc((var(--kk-hit) - var(--kk-h)) / 2 + var(--kk-pad));
--puls-weg:4; /* knopf.js: der Ring beim Loslassen läuft genau bis an den Rand der Kapsel */
height:var(--kk-hit); min-height:0;
margin-block:calc(-1 * var(--kk-cta-b)); margin-inline:calc(-1 * var(--kk-pad));
border:solid transparent; border-width:var(--kk-cta-b) var(--kk-pad);
background-clip:padding-box;
border-radius:calc(2px + var(--kk-pad)) / calc(2px + var(--kk-cta-b));
padding:0 14px 0 16px; gap:10px;
font-size:.9375rem;
transform-origin:0 50%;
}
.kopf__aktion .kopf__cta::before,
.kopf__aktion .kopf__cta .btn__puls{border-radius:2px}
.kopf__aktion .kopf__cta:focus-visible{outline-offset:-3px}
}
/* hell: Glas aus (nach dem Ausblenden ganz abgeschaltet, die Grafikkarte rechnet nichts mehr), Schale an */
@media (min-width:861px){
.kopf.kopf--seite.is-solid :is(.kopf__nav,.kopf__aktion)::before,
body[data-kopf="solid"] .kopf.kopf--seite :is(.kopf__nav,.kopf__aktion)::before,
html:not(.js) .kopf.kopf--seite :is(.kopf__nav,.kopf__aktion)::before{opacity:0;visibility:hidden}
.kopf.kopf--seite.is-solid :is(.kopf__nav,.kopf__aktion)::after,
body[data-kopf="solid"] .kopf.kopf--seite :is(.kopf__nav,.kopf__aktion)::after,
html:not(.js) .kopf.kopf--seite :is(.kopf__nav,.kopf__aktion)::after{opacity:1}
.kopf.kopf--seite.is-solid .kopf__gleiter::before,
body[data-kopf="solid"] .kopf.kopf--seite .kopf__gleiter::before{opacity:0}
.kopf.kopf--seite.is-solid .kopf__gleiter::after,
body[data-kopf="solid"] .kopf.kopf--seite .kopf__gleiter::after{opacity:1}
}
@media (min-width:861px) and (hover:hover) and (pointer:fine){
.kopf__tel:hover::before{opacity:1}
.kopf__tel:hover .kopf__tel-zu{opacity:1}
.kopf.kopf--seite.is-solid .kopf__tel:hover::before,
body[data-kopf="solid"] .kopf.kopf--seite .kopf__tel:hover::before{
background:var(--sheet);
box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 9%,transparent), 0 1px 0 rgba(11,58,111,.08);
}
}
@media (min-width:861px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
/* der Hörer nickt einmal kurz, wie ein Klingeln */
.kopf__tel:hover .kopf__tel-zeichen{animation:kopf-klingeln 520ms var(--ease-out)}
}
@keyframes kopf-klingeln{
0%{transform:rotate(0)}
18%{transform:rotate(-14deg)}
38%{transform:rotate(10deg)}
58%{transform:rotate(-6deg)}
78%{transform:rotate(3deg)}
100%{transform:rotate(0)}
}
/* Breiten: ab 1180 px alles mit ausgeschriebener Nummer.
Darunter nur der Hörer im Ring (Kachel 36 px), bis 1099 px etwas engere Menüpunkte und Knopf mit 14 px,
861 bis 939 px ohne Telefon (ausser am Handy quer, unten), die Kontakt-Kapsel bleibt um den Knopf.
Abstand Logo bis Navigation nie unter 36 px (861 px), also immer mindestens das Dreifache der 12 px zwischen den Kapseln. */
@media (min-width:861px) and (max-width:1179px){
.kopf__tel{padding:0 calc(var(--kk-pad) * 2)}
.kopf__tel-nr{display:none}
}
@media (min-width:861px) and (max-width:1099px){
.kopf__anker{padding-inline:11px;font-size:.875rem}
.kopf.kopf--seite .kopf__aktion .kopf__cta{padding-inline:12px 10px;font-size:.875rem}
}
@media (min-width:861px) and (max-width:979px){
.kopf__anker{padding-inline:9px}
}
@media (min-width:861px) and (max-width:939px){
.kopf__anker{padding-inline:8px}
.kopf__tel{display:none}
}
/* Handy quer über 861 px (z. B. 915 × 412): Logo 54 px, die Kapseln niedriger (40 px), damit sie die Marke nicht
überragen. Trefferflächen bleiben 44 px (sie reichen 2 px über die Kapsel hinaus). */
@media (min-width:861px) and (orientation:landscape) and (max-height:500px){
.kopf.kopf--seite{--kk-h:40px}
.kopf__anker{font-size:.8125rem}
}
/* Am Handy quer (861 bis 939 px, z. B. 874, 896, 915, 932 px breit) gibt es keine Handy-Leiste: dort bleibt der
Hörer im Ring in der Kontakt-Kapsel, sonst fehlte der Anruf ganz. Mit 13-px-Menü passt er neben die Navigation. */
@media (min-width:861px) and (max-width:939px) and (orientation:landscape) and (max-height:500px){
.kopf__tel{display:inline-flex}
}
/* =========================================================================
Menü-Knopf (nur Handy): dieselbe Kapsel, Glas als ruhige Fläche (am Handy kein Weichzeichner)
========================================================================= */
.kopf__menu{
display:none; position:relative; isolation:isolate;
align-items:center; gap:10px;
height:44px; margin-inline-start:auto; padding:0 14px 0 16px;
margin-top:calc((var(--kopf-h-gross) - 44px) / 2);
border:0; border-radius:var(--kk-r); background:transparent;
color:var(--fg); font-weight:600; font-size:.9375rem; line-height:1;
-webkit-user-select:none; user-select:none;
transition:color 200ms var(--ease-out), transform 120ms var(--ease-out);
}
.kopf__menu:active{transform:scale(.97)}
.kopf__menu::before,.kopf__menu::after{
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
}
.kopf__menu::before{
background:color-mix(in srgb,var(--deep-2) 60%,transparent);
box-shadow:inset 0 0 0 1px var(--kk-kante), inset 0 1px 0 var(--kk-licht);
}
.kopf__menu::after{
background:var(--paper-2);
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 11%,transparent);
opacity:0;
}
.kopf.kopf--seite.is-solid .kopf__menu::before,
body[data-kopf="solid"] .kopf.kopf--seite .kopf__menu::before{opacity:0}
.kopf.kopf--seite.is-solid .kopf__menu::after,
body[data-kopf="solid"] .kopf.kopf--seite .kopf__menu::after{opacity:1}
.kopf.kopf--seite.kopf--seite.is-offen .kopf__menu::before{opacity:1}
.kopf.kopf--seite.kopf--seite.is-offen .kopf__menu::after{opacity:0}
/* «Menü» / «Schliessen»: die Kapsel nimmt die Breite ihres Worts an, die rechte Kante bleibt stehen */
.kopf__menu-text{display:block}
.kopf__menu[aria-expanded="true"] .kopf__menu-zu,
.kopf__menu:not([aria-expanded="true"]) .kopf__menu-auf{display:none}
.kopf__menu-icon{position:relative;display:block;width:16px;height:10px}
.kopf__menu-icon i{
position:absolute; left:0; right:0; height:1.5px; border-radius:1px; background:currentColor;
transition:transform 200ms var(--ease-out);
}
.kopf__menu-icon i:first-child{top:1px}
.kopf__menu-icon i:last-child{bottom:1px}
.kopf__menu[aria-expanded="true"] .kopf__menu-icon i:first-child{transform:translateY(3.75px) rotate(45deg)}
.kopf__menu[aria-expanded="true"] .kopf__menu-icon i:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.kopf--seite.is-klein .kopf__menu{translate:0 calc(var(--kopf-hub) / 2)}
/* =========================================================================
Handy und schmale Tablets: Vollfläche
========================================================================= */
@media (max-width:860px){
.kopf__aktion{display:none}
.kopf__menu{display:inline-flex}
.kopf__nav{
position:fixed; inset:0; z-index:-1;
display:flex; flex-direction:column; justify-content:flex-start;
padding:calc(var(--kopf-h) + env(safe-area-inset-top,0px) + 12px) var(--gutter) calc(28px + env(safe-area-inset-bottom,0px));
background:var(--deep);
overflow-y:auto; overscroll-behavior:contain;
visibility:hidden; opacity:0;
transition:opacity 200ms var(--ease-out), visibility 0s linear 200ms;
}
.kopf--seite.is-offen .kopf__nav{
visibility:visible; opacity:1;
transition:opacity 200ms var(--ease-out), visibility 0s;
}
.kopf__liste{flex-direction:column;align-items:stretch;gap:0}
.kopf__anker{
display:flex; width:100%; min-height:64px;
font-family:var(--f-display); font-stretch:var(--h2-wdth); font-weight:680;
font-size:clamp(1.625rem,6.4vw,2.125rem); letter-spacing:-.018em; line-height:1.1;
}
.kopf__extra{
display:grid; gap:12px;
margin-top:auto; padding-top:36px;
}
.kopf__extra .btn{width:100%}
.kopf__zeit{color:var(--fg-2);margin-top:4px}
/* Inhalt der Fläche kommt ruhig dazu */
.kopf__liste,.kopf__extra{transition:transform 260ms var(--ease-out)}
.kopf--seite:not(.is-offen) .kopf__liste,
.kopf--seite:not(.is-offen) .kopf__extra{transform:translate3d(0,8px,0)}
/* Die Menüpunkte hängen als Knoten an einer Faser, wie die Leitung links durch die Seite:
geplanter Weg als feine Strichlinie, das Licht (--tech-hell) reicht vom ersten Punkt bis zum Abschnitt,
in dem man liest (aria-current, kopf.js Teil 5), dort ein heller Knoten in --ok. Nur transform (scaleY).
Ohne :has() bleibt nur die Faser. Ohne JavaScript ist das Menü eine waagrechte Zeile (unten). */
html.js .kopf__nav .kopf__liste{position:relative;padding-inline-start:30px;--zeile:64px} /* schlägt ul[role="list"]{padding:0} */
html.js .kopf__liste::before,
html.js .kopf__liste::after{
content:""; position:absolute; left:4px; top:calc(var(--zeile) / 2); width:2px; pointer-events:none;
}
html.js .kopf__liste::before{
bottom:calc(var(--zeile) / 2);
background:repeating-linear-gradient(to bottom,var(--rule-deep) 0 3px,transparent 3px 7px);
}
html.js .kopf__liste::after{
height:calc(var(--zeile) * 5);
background:var(--tech-hell);
transform-origin:50% 0; transform:scaleY(calc(var(--spy-n,0) / 5));
}
html.js .kopf__liste li{position:relative}
html.js .kopf__liste li::before{
content:""; position:absolute; left:-30px; top:50%; z-index:1; width:10px; height:10px; margin-top:-5px;
border-radius:50%; background:var(--deep);
box-shadow:inset 0 0 0 1.5px var(--field-border-deep);
pointer-events:none;
}
/* Punkte, an denen das Licht schon vorbei ist */
html.js .kopf__liste li:has(~ li > [aria-current])::before{box-shadow:inset 0 0 0 1.5px var(--tech-hell)}
html.js .kopf__liste li:has(> [aria-current])::before{
background:var(--ok);
box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 22%,transparent);
}
html.js .kopf__liste:has(> li:nth-child(2) > [aria-current]){--spy-n:1}
html.js .kopf__liste:has(> li:nth-child(3) > [aria-current]){--spy-n:2}
html.js .kopf__liste:has(> li:nth-child(4) > [aria-current]){--spy-n:3}
html.js .kopf__liste:has(> li:nth-child(5) > [aria-current]){--spy-n:4}
html.js .kopf__liste:has(> li:nth-child(6) > [aria-current]){--spy-n:5}
}
@media (max-width:360px){
.kopf__in{gap:12px}
}
@media (max-width:860px) and (max-height:560px){
.kopf__anker{min-height:52px;font-size:1.5rem}
html.js .kopf__nav .kopf__liste{--zeile:52px}
.kopf__extra{padding-top:24px}
}
/* ---------- Handy ohne JavaScript: die Anker als ruhige, waagrecht scrollbare Zeile ----------
Das Menü kann ohne JavaScript nicht aufgehen. Der Kopf wird eine Zeile höher (44 px)
und scrollt mit der Seite weg (oben: position absolute), statt Inhalt dauerhaft zu verdecken. */
@media (max-width:860px){
html:not(.js) .kopf.kopf--seite::before{height:auto;bottom:0}
html:not(.js) .kopf__in{flex-wrap:wrap;height:auto;row-gap:0}
html:not(.js) .kopf__marke{margin-bottom:calc((var(--kopf-h-gross) - var(--kopf-logo-h)) / 2)}
html:not(.js) .kopf__nav{
position:static; z-index:auto; flex:1 0 100%; order:3;
display:block; padding:0; margin-top:0; background:none;
visibility:visible; opacity:1; transition:none;
overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter);
box-shadow:inset 0 1px 0 var(--rule);
}
html:not(.js) .kopf__nav::-webkit-scrollbar{display:none}
html:not(.js) .kopf__liste{flex-direction:row;align-items:center;gap:22px;transform:none;width:max-content}
html:not(.js) .kopf__anker{
width:auto; min-height:44px;
font-family:var(--f-label); font-stretch:var(--label-wdth); font-weight:var(--label-wght);
font-size:var(--t-label); letter-spacing:var(--label-track); line-height:1.2; text-transform:uppercase;
text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:.3em;
}
html:not(.js) .kopf__extra{display:none}
/* Inhalt beginnt unter der zweiten Zeile */
html:not(.js) .hero__stage{padding-top:44px}
html:not(.js) body[data-kopf="solid"] main{padding-top:calc(var(--kopf-h) + 44px + env(safe-area-inset-top,0px))}
}
/* Seite hinter dem offenen Menü steht still (Sperre auf , weil html overflow-x:clip trägt) */
html.menu-offen{overflow:hidden}
/* ---------- Weniger Transparenz gewünscht: Glas als ruhige Vollfläche, kein Weichzeichner ---------- */
@media (prefers-reduced-transparency:reduce){
.kopf.kopf--seite{--kk-glas:color-mix(in srgb,var(--deep-2) 92%,transparent)}
:is(.kopf__nav,.kopf__aktion)::before{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.kopf__menu::before{background:color-mix(in srgb,var(--deep-2) 92%,transparent)}
}
/* ---------- Bewegung: erst nach dem ersten Zustand (.is-bereit), nie mit Reduced Motion ----------
Schrumpfen 420 ms --ease-out (antwortet sofort auf den Scroll), Flächen, Kapsel-Ebenen und Logo über
opacity 240 ms. Das Glas wird nach dem Ausblenden abgeschaltet (visibility mit 240 ms Verzögerung).
Markierung: transform 220 ms, opacity 160 ms; aus dem Nichts oder bei weiten Sprüngen nur einblenden (.is-sofort).
Ausnahme von der Regel «nur transform/opacity»: die Schriftfarbe von Ankern, Telefon und «Menü» folgt
dem Wechsel dunkel/hell in 200 ms (color), sonst stünde für einen Moment dunkle Schrift auf dunklem Film. */
@media (prefers-reduced-motion:no-preference){
.kopf--seite.is-bereit::before{transition:opacity 240ms var(--ease-out), translate 420ms var(--ease-out)}
.kopf--seite.is-bereit::after{transition:opacity 320ms var(--ease-out), translate 420ms var(--ease-out)}
.kopf--seite.is-bereit .kopf__marke{transition:translate 420ms var(--ease-out)}
.kopf--seite.is-bereit .kopf__logo{transition:opacity 240ms var(--ease-out)}
.kopf--seite.is-bereit .kopf__menu{transition:color 200ms var(--ease-out), transform 120ms var(--ease-out), translate 420ms var(--ease-out)}
.kopf--seite.is-bereit .kopf__menu::before,
.kopf--seite.is-bereit .kopf__menu::after{transition:opacity 240ms var(--ease-out)}
}
@media (min-width:861px) and (prefers-reduced-motion:no-preference){
.kopf--seite.is-bereit :is(.kopf__nav,.kopf__aktion){transition:translate 420ms var(--ease-out)}
.kopf--seite.is-bereit :is(.kopf__nav,.kopf__aktion)::before{transition:opacity 240ms var(--ease-out), visibility 0s}
.kopf--seite.is-bereit.is-solid :is(.kopf__nav,.kopf__aktion)::before{transition:opacity 240ms var(--ease-out), visibility 0s linear 240ms}
.kopf--seite.is-bereit :is(.kopf__nav,.kopf__aktion)::after,
.kopf--seite.is-bereit .kopf__gleiter::before,
.kopf--seite.is-bereit .kopf__gleiter::after{transition:opacity 240ms var(--ease-out)}
.kopf__gleiter{transition:transform 220ms var(--ease-out), opacity 160ms var(--ease-out)}
.kopf__gleiter.is-sofort{transition:opacity 160ms var(--ease-out)}
.kopf__gleiter-faser{transition:opacity 200ms var(--ease-out)}
.kopf__tel::before{transition:opacity 160ms var(--ease-out)}
.kopf__tel-zu{transition:opacity 240ms var(--ease-out)}
}
@media (max-width:860px) and (prefers-reduced-motion:no-preference){
/* das Licht in der Faser folgt dem Lesen ruhig (man sieht es nur bei offenem Menü) */
html.js .kopf__liste::after{transition:transform 320ms var(--ease-out)}
}
@media (prefers-reduced-motion:reduce){
.kopf.kopf--seite::before,.kopf.kopf--seite::after,
.kopf__marke,.kopf__logo,
.kopf__nav,.kopf__aktion,
:is(.kopf__nav,.kopf__aktion,.kopf__menu)::before,
:is(.kopf__nav,.kopf__aktion,.kopf__menu)::after,
.kopf__gleiter,.kopf__gleiter::before,.kopf__gleiter::after,.kopf__gleiter-faser,
.kopf__tel::before,.kopf__tel-zu,
.kopf__liste,.kopf__liste::after,.kopf__extra,
.kopf__menu-icon i{transition:none!important}
.kopf--seite:not(.is-offen) .kopf__liste,
.kopf--seite:not(.is-offen) .kopf__extra{transform:none}
}
/* ===== 15-leitung.css ===== */
/* =========================================================================
K-ProTech · 15-leitung.css
Leitung durch die Seite (Animation d1): eine Glasfaser am linken Rand,
von unter dem Hero bis #kontakt. Markup parts/leitung.html, Logik assets/js/leitung.js.
Modi (data-modus, setzt JS):
breit ab 1280 px und freier Rand ab 84 px: Knoten 18 px, Führungslinie zum Titel
schmal ab 1280 px, enger Rand: Knoten 16 px, keine Führungslinie
handy darunter: 2-px-Linie bei x≈6 px, kleine Knoten ohne Beschriftung
Bewegt werden nur transform, opacity und stroke-dashoffset.
========================================================================= */
.leitung{
/* Masse je Modus (Strichstärken der Ringe in viewBox-Einheiten, viewBox 40) */
--kd:11px; --ke:13px;
--kbw:4.4; --kzw:5.8; /* Knoten: offener Grundring, schliessender Ring */
--ebw:3.7; --eow:6; /* Endknoten: Grundring, Ring in --ok */
--nr:9px; --punkt:5px;
position:absolute; left:0; top:0; width:0; height:0;
z-index:4; pointer-events:none;
}
html:not(.js) .leitung{display:none}
.leitung:not(.is-bereit){visibility:hidden}
.leitung[data-modus="breit"]{
--kd:18px; --ke:40px;
--kbw:3; --kzw:4.6; --ebw:1.5; --eow:2.5;
--nr:10px; --punkt:6px;
}
.leitung[data-modus="schmal"]{
--kd:16px; --ke:30px;
--kbw:3.3; --kzw:5; --ebw:2; --eow:3.3;
--nr:9px; --punkt:6px;
}
/* Spalte: x der Leitung. Handy am Bildschirmrand (Safe-Area beachtet), sonst setzt JS --lx */
.leitung__spalte{
position:absolute; top:0; width:0; height:0;
left:var(--lx,calc(env(safe-area-inset-left,0px) + 6px));
}
/* ---------- Bahn: ein Abschnitt pro Fläche (Farbe passt sich an) ---------- */
.leitung__seg{
--c:var(--tech); --spur:var(--rule);
position:absolute; left:-1px; top:0; width:2px; height:0;
}
.leitung__seg.is-dunkel{--c:var(--tech-hell);--spur:var(--rule-deep)}
/* geplanter Weg: feine Strichlinie, wird von der Faser überdeckt */
.leitung__spur{
position:absolute; top:0; bottom:0; left:.5px; width:1px;
background:repeating-linear-gradient(to bottom,var(--spur) 0 3px,transparent 3px 7px);
}
.leitung__faser{
position:absolute; inset:0; background:var(--c);
transform:scaleY(0); transform-origin:50% 0; will-change:transform;
}
/* Anfang unter dem Hero: Messpunkt wie in den Listen */
.leitung__start{
position:absolute; left:-3px; top:-3px; width:6px; height:6px;
background:var(--tech); opacity:0;
transition:opacity var(--dur-1) var(--ease-out);
}
.leitung__start.is-dunkel{background:var(--tech-hell)}
.leitung__start.is-an{opacity:1}
/* ---------- Knoten auf der Leitung ----------
Ohne Nummer: Abschnitte sind keine Reihenfolge, die der Leser braucht (Nummern bleiben den Plan-Markern,
Stationen und Schritten). Grundzustand ein geschlossener feiner Ring wie eine leere Buchse (der offene
Logo-Ring steht nur mit Nummer oder im Logo). Erreicht die Leitung den Knoten, zieht sich der kräftige
Ring in Faserfarbe herum: der Knoten ist belegt. */
.leitung__knoten{
--kc:var(--tech); --kb:var(--rule-strong); --kt:var(--marine);
position:absolute; top:0; left:calc(var(--kd) / -2);
width:var(--kd); height:var(--kd);
display:grid; place-items:center;
border-radius:50%; background:var(--k-bg,var(--paper)); color:var(--kt);
}
.leitung__knoten.is-dunkel{--kc:var(--tech-hell);--kb:var(--field-border-deep);--kt:var(--on-deep)}
.leitung__knoten svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.leitung__k-basis{
fill:none; stroke:var(--kb); stroke-width:calc(var(--kbw) * .75);
}
.leitung__k-zu{
fill:none; stroke:var(--kc); stroke-width:var(--kzw);
stroke-dasharray:1 1; stroke-dashoffset:1;
transition:stroke-dashoffset 220ms var(--ease-out);
}
.leitung__knoten.is-zu .leitung__k-zu{stroke-dashoffset:0;transition:stroke-dashoffset 560ms var(--ease-draw)}
.leitung__nr{
position:relative; display:none;
font-family:var(--f-label); font-stretch:var(--label-wdth); font-weight:var(--label-wght);
font-size:var(--nr); line-height:1; letter-spacing:.02em; font-variant-numeric:tabular-nums;
opacity:.55; transition:opacity var(--dur-1) var(--ease-out);
}
.leitung:not([data-modus="handy"]) .leitung__nr{display:none}
.leitung__knoten.is-zu .leitung__nr{opacity:1;transition-duration:var(--dur-2)}
/* Führungslinie vom Knoten zum Abschnittstitel (endet 10 px vor dem Inhalt) */
.leitung__fuehrung{
position:absolute; top:50%; left:calc(100% + 5px);
width:calc(var(--rest,0px) - 50% - 15px); height:1px; margin-top:-.5px;
background:var(--kc); display:none;
transform:scaleX(0); transform-origin:0 50%;
transition:transform var(--dur-1) var(--ease-out);
}
.leitung[data-modus="breit"] .leitung__fuehrung{display:block}
.leitung__knoten:is(.is-zu,.is-ok) .leitung__fuehrung{transform:scaleX(1);transition:transform 380ms var(--ease-out) 200ms}
/* Endknoten am Kontakt: Ring schliesst sich in --ok, dann gehen Punkt und WLAN-Bögen an */
.leitung__knoten--ende{left:calc(var(--ke) / -2);width:var(--ke);height:var(--ke)}
.leitung__knoten--ende .leitung__k-basis{stroke-width:var(--ebw)}
.leitung__knoten--ende .leitung__k-zu{stroke:var(--ok);stroke-width:var(--eow)}
.leitung__knoten--ende.is-ok .leitung__k-zu{stroke-dashoffset:0;transition:stroke-dashoffset 640ms var(--ease-draw)}
.leitung__knoten--ende.is-ok .leitung__nr{opacity:0;transition-duration:var(--dur-1)}
.leitung__wlan{
fill:none; stroke:var(--kt); stroke-width:1.6; stroke-linecap:round;
opacity:0; transition:opacity var(--dur-1) var(--ease-out);
}
.leitung__wlan--punkt{fill:var(--kt);stroke:none}
.leitung[data-modus="handy"] .leitung__wlan{display:none}
.leitung__knoten--ende.is-ok .leitung__wlan{
opacity:1;
transition:opacity 420ms var(--ease-out) calc(520ms + var(--w,0) * 130ms);
}
/* ---------- Lichtimpuls an der Spitze: Punkt, Schweif wächst mit dem Tempo ---------- */
.leitung__impuls{
--ic:var(--on-deep);
position:absolute; left:0; top:0; width:0; height:0;
opacity:0; transition:opacity 240ms var(--ease-out);
will-change:transform;
}
.leitung__impuls.is-an{opacity:1}
.leitung__impuls.is-hell{--ic:var(--marine)}
.leitung__punkt{
position:absolute; left:calc(var(--punkt) / -2); top:calc(var(--punkt) / -2);
width:var(--punkt); height:var(--punkt); border-radius:50%; background:var(--ic);
}
.leitung__schweif{
position:absolute; bottom:0; left:-1px; width:2px; height:140px;
background:var(--ic); opacity:.34;
transform:scaleY(0); transform-origin:50% 100%; will-change:transform;
}
.leitung__schweif--kurz{left:-1.3px;width:2.6px;opacity:.92}
.leitung[data-modus="handy"] .leitung__schweif--kurz{left:-1px;width:2px}
/* ---------- Ruhe ---------- */
.leitung.is-still *{transition:none!important}
@media (prefers-reduced-motion:reduce){
.leitung *{transition:none!important}
.leitung__impuls{display:none}
}
@media print{ .leitung{display:none} }
/* ===== 17-band.css ===== */
/* =========================================================================
K-ProTech · 17-band.css · Patchpanel-Leiste direkt nach dem Hero (Vorlage Demo d7)
Grundzustand = Endzustand: alle Stecker sitzen, LEDs türkis, 6 / 6, Ring zu.
band.js setzt .band--bewegt und führt Kabel, Stecker, LEDs und Zähler mit dem Scrollen.
Ebenen: .band ist ein eigener Stapelkontext (isolation). Die Kabel-Ebene (z 2) liegt über
der Frontplatte, die Stecker (.pp-dreh, z 3) über den Kabeln. Darum erzeugt kein Vorfahre
der Stecker einen eigenen Stapelkontext (Wrap ohne z-index, kein transform im Panel).
Handy: 2 Reihen zu 3 Ports, Beschriftung in der Mitte, obere Reihe von oben gesteckt
(Kabel laufen oben hinaus), untere von unten. Ab 720 px eine Reihe, ab 1180 px zweispaltig.
========================================================================= */
.band{
--S:42px; /* Kantenlänge einer Buchse */
--ohr:16px; /* Breite der Rackwinkel */
--kabel-oben:46px; /* Platz für die Kabel über dem Panel (Handy: obere Reihe) */
--kabel-unten:46px; /* Platz für die Kabel unter dem Panel */
position:relative; isolation:isolate; overflow:clip;
padding-block:48px 30px;
background:var(--bg); color:var(--fg);
}
.band > .band__wrap{position:relative;z-index:auto}
.band > .band__kabel{
position:absolute; left:0; top:0; z-index:2;
width:100%; height:100%; overflow:visible; pointer-events:none;
}
/* ---------- Text: Kicker, Aussage, Zähler ---------- */
.band__wrap{display:grid;row-gap:clamp(4px,1.6vw,20px)}
.band__text{display:grid;gap:14px;align-content:start;min-width:0}
.band__satz{
max-width:15em;
font-family:var(--f-display); font-stretch:var(--h2-wdth); font-weight:680;
font-size:clamp(1.625rem,1.15rem + 1.2vw,2.125rem); line-height:1.08; letter-spacing:-.022em;
color:var(--title); text-wrap:balance;
}
.band__status{display:flex;align-items:center;gap:10px;margin-top:4px;color:var(--fg)}
.band__ring{width:18px;height:18px;flex:none;overflow:visible}
.band__ring circle{fill:none;stroke-width:2.6;transform:rotate(-90deg);transform-origin:50% 50%}
.band__ring-offen{stroke:var(--fg-2);stroke-opacity:.5;stroke-dasharray:84 16;stroke-dashoffset:-4}
.band__ring-zu{stroke:var(--ok);stroke-dasharray:100 100;stroke-dashoffset:0}
.band--bewegt .band__ring-zu{transition:stroke-dashoffset 220ms var(--ease-out)}
.band--bewegt:not(.is-voll) .band__ring-zu{stroke-dashoffset:100}
.band--bewegt.is-voll .band__ring-zu{transition:stroke-dashoffset 780ms var(--ease-draw) 140ms}
.band__zahl{display:inline-flex;align-items:baseline;gap:.35em;font-variant-numeric:tabular-nums}
.band__ziffern{display:inline-grid;clip-path:inset(0 -.15em)}
.band__z{grid-area:1/1;text-align:right}
.band__z--aus{opacity:0}
.band__von{color:var(--fg-2)}
/* ---------- Panel ---------- */
.band__panel{min-width:0;padding-block:var(--kabel-oben) var(--kabel-unten)}
.band__mass{display:none}
.band__rack{display:flex;background:var(--deep-panel);border:1px solid var(--rule-deep)}
.band__ohr{
flex:none; width:var(--ohr);
display:flex; flex-direction:column; align-items:center; justify-content:space-between;
padding:14px 0;
}
.band__ohr--l{border-right:1px solid var(--rule-deep)}
.band__ohr--r{border-left:1px solid var(--rule-deep)}
.pp-loch{position:relative;width:9px;height:16px;border-radius:5px;background:var(--deep-2)}
.pp-schraube{position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;overflow:visible}
.band .pp-sk{fill:var(--deep);stroke:var(--on-deep-2);stroke-opacity:.55;stroke-width:1;vector-effect:non-scaling-stroke}
.band .pp-sx{fill:none;stroke:var(--deep-2);stroke-width:1.7;stroke-linecap:round}
.band__ports{
flex:1; min-width:0; margin:0; padding:0 6px; list-style:none;
display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
}
.band__port{display:flex;flex-direction:column;min-width:0}
.band__port:nth-child(-n+3){flex-direction:column-reverse}
/* Beschriftungsstreifen wie auf einem echten Panel */
.band__etikett{
display:flex; align-items:center; justify-content:center; gap:5px;
height:26px; margin:0; padding:0 4px; overflow:hidden; white-space:nowrap;
background:var(--on-deep); color:var(--ink);
font-family:var(--f-display); font-stretch:100%; font-weight:600;
font-size:10px; line-height:1; letter-spacing:.06em; text-transform:uppercase;
font-variant-numeric:tabular-nums lining-nums;
}
.band__port:not(:nth-child(3n+1)) .band__etikett{border-left:1px solid var(--rule)}
.band__port:nth-child(n+4) .band__etikett{border-top:1px solid var(--rule)}
.band__nr{color:var(--ink-2)}
.band__name{color:var(--ink)}
@media (max-width:359px){ .band__nr{display:none} }
/* Buchse, Stecker, LED */
.pp-platz{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding:12px 0 16px}
.band__port:nth-child(-n+3) .pp-platz{padding:16px 0 12px}
.pp-buchse{position:relative;flex:none;width:var(--S);height:var(--S)}
.pp-dreh{position:absolute;inset:0;z-index:3}
.band__port:nth-child(-n+3) .pp-dreh{transform:rotate(180deg)}
.pp-modul{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pp-stecker{position:absolute;left:0;top:0;width:100%;height:calc(var(--S) * 76 / 56);pointer-events:none}
.pp-stecker svg{width:100%;height:100%;overflow:visible}
.band--bewegt .pp-stecker{will-change:transform,opacity}
.pp-aus{position:absolute;left:50%;top:calc(100% * 76 / 56);width:0;height:0}
.pp-led{
position:absolute; left:calc(50% + var(--S) / 2 + 8px); top:14px;
width:8px; height:8px; border-radius:50%;
background:var(--deep-2); border:1px solid var(--rule-deep);
}
.band__port:nth-child(-n+3) .pp-led{top:auto;bottom:14px}
.pp-led i{position:absolute;inset:-1px;border-radius:50%}
.pp-led-an{background:var(--on-deep);opacity:0}
.pp-led-ok{background:var(--ok)}
/* Zeichnung: Modul (Buchse) */
.band .m-rahmen{fill:var(--deep-2);stroke:var(--rule-deep);stroke-width:1;vector-effect:non-scaling-stroke}
.band .m-licht{fill:none;stroke:var(--on-deep);stroke-opacity:.09;stroke-width:1;vector-effect:non-scaling-stroke}
.band .m-loch{fill:var(--deep);stroke:var(--on-deep-2);stroke-opacity:.38;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.band .m-fein{fill:none;stroke:var(--on-deep-2);stroke-opacity:.55;stroke-width:.8;vector-effect:non-scaling-stroke;stroke-linecap:round}
.band .m-pin{fill:var(--on-deep-2);fill-opacity:.8}
.band .m-blitz{fill:none;stroke:var(--on-deep);stroke-width:1.3;vector-effect:non-scaling-stroke;opacity:0}
/* Zeichnung: Stecker */
.band .p-k{fill:var(--marine);stroke:var(--fiber);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.band .p-f{fill:none;stroke:var(--fiber);stroke-opacity:.6;stroke-width:.9;vector-effect:non-scaling-stroke;stroke-linecap:round}
.band .p-l{fill:none;stroke:var(--on-deep);stroke-opacity:.16;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:round}
.band .p-pin{fill:var(--fiber)}
.band .p-kabel{fill:none;stroke:var(--fiber);stroke-width:1.6;vector-effect:non-scaling-stroke}
.band .p-kabel--duo{stroke-width:1.15}
/* Kabel-Ebene (Pfade aus band.js) */
.band__kabel .k{fill:none;stroke:var(--fiber);stroke-width:1.6;stroke-linejoin:round}
.band__kabel .k--duo{stroke-width:1.15}
.band__kabel .k-puls{fill:none;stroke:var(--on-deep);stroke-width:2;stroke-linecap:round;opacity:0}
/* ---------- Ab 720 px: eine Reihe mit sechs Ports, Masslinie darüber ---------- */
@media (min-width:720px){
.band{--S:46px;--ohr:38px;--kabel-oben:0px;--kabel-unten:64px;padding-block:clamp(44px,4.4vw,56px) clamp(24px,2.6vw,36px)}
.band__wrap{row-gap:28px}
.band__mass{display:block;position:relative;height:14px;margin-bottom:12px}
.band__mass-linie{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--rule-deep)}
.band__mass-linie::before,.band__mass-linie::after{content:"";position:absolute;top:-5px;width:1px;height:11px;background:var(--on-deep-2);opacity:.7}
.band__mass-linie::before{left:0}
.band__mass-linie::after{right:0}
.band__mass-text{
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
padding:0 12px; background:var(--bg);
font-family:var(--f-mono); font-weight:500; font-size:.6875rem; line-height:1;
letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; color:var(--fg-2);
}
.band__ports{grid-template-columns:repeat(6,minmax(0,1fr));padding:7px 8px 0}
.band__port:nth-child(-n+3){flex-direction:column}
.band__port:nth-child(-n+3) .pp-platz{padding:12px 0 16px}
.band__port:nth-child(-n+3) .pp-dreh{transform:none}
.band__port:nth-child(-n+3) .pp-led{top:14px;bottom:auto}
.band__port:nth-child(n+4) .band__etikett{border-top:0}
.band__port:nth-child(4) .band__etikett{border-left:1px solid var(--rule)}
.band__etikett{height:24px;font-size:9.5px;font-stretch:108%}
.band__ohr{padding:14px 0}
.pp-loch{width:22px;height:11px;border-radius:6px}
.pp-schraube{width:15px;height:15px;margin:-7.5px 0 0 -7.5px}
}
/* ---------- Ab 1180 px: links Aussage (4/12), rechts Panel (8/12) ---------- */
@media (min-width:1180px){
.band{--S:50px;--kabel-unten:66px}
.band__wrap{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,32px);align-items:start}
.band__text{grid-column:1 / span 4;padding-top:2px}
.band__panel{grid-column:5 / -1}
}
@media (min-width:1360px){
.band__etikett{font-size:10.5px;font-stretch:118%;gap:8px;letter-spacing:.07em}
}
@media (prefers-reduced-motion:reduce){
.band__ring-zu{transition:none}
}
/* ===== 20-hero.css ===== */
/* =========================================================================
20-hero.css · Hero · Paket 8.1 und 9 · Runde 08.10.2026 abends
(Kritik 1, 2, 3, 4, 5, 8 und Feedback 7: Inhalt ab Bild 0, kürzerer Weg, Handy 4:5,
Faserlinie über dem Film, Überblendung bei langsamer Verbindung, Scroll-Hinweis, Schrift)
Ohne Film (static): 100svh (min. 560 px), Text unten links (6 von 12 Spalten),
rechts der offene Logo-Ring als Planzeichnung.
Handy (bis 720 px): oben unter dem Kopf der Bildbereich (höchstens 4:5), darunter der Text auf --deep.
Mit Film: siehe Abschnitt «Film» unten (html[data-film="an"], data-hero video|seq|static).
Kein Pseudo-Element am Hero. Abstand oben über var(--kopf-h, 68px) (Kopf wird höher, anderer Helfer).
Bewegt werden nur transform, opacity, clip-path und stroke-dashoffset.
Korrektur-Runde 08.10.2026 nachts (Prüfer-Befunde): Zeilenwechsel zeitgesteuert (data-zustand), Kicker in
Instrument Sans, Kicker/Unterzeile ohne Einblendung ab Deckkraft 0 (LCP), Faser blendet beim Verlassen des
Heros aus, keine bleibenden 3D-Transformationen. Unter 861 px übernimmt die Handy-Leiste den Hero-Knopf ab Bild 0:
das regelt 92-leiste.css (Helfer Kopf/Leiste, html.js .hero__cta / .hero__hinweis und Abstand unten).
========================================================================= */
.hero{
--hero-len:100svh; /* Scrollweg im Film-Modus, setzt der Film-Schalter aus der Konfiguration in hero.html */
/* Breite der Textspalte: 6 von 12 Spalten. Der Film-Schalter rechnet mit derselben Kante (W/2 - 16 px),
um das Haus rechts daneben zu setzen. */
--hero-spalte:calc((min(var(--wrap), 100vw - 2 * var(--gutter)) - clamp(16px,2.4vw,32px)) / 2);
/* Grosse Zeile: Token-Grösse, aber nie so gross, dass «Stockwerk für» oder «Wir verbinden» (6.75em breit)
eine dritte Zeile bräuchte. So sind alle drei Zeilen zweizeilig und die Zeile springt nicht. */
--hero-display:min(var(--t-display), var(--hero-spalte) / 6.9);
position:relative;
background:var(--deep);
color:var(--fg);
}
/* Die Körnung aus 00-base.css (.sec--deep::before) gilt hier nicht: kein Pseudo-Element am Hero */
.hero.sec--deep::before{content:none}
.hero__stage{
position:relative;
display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:1fr auto;
min-height:max(560px,100svh);
overflow:clip;
}
/* ---------- Bildebene: Foto, Start-/Endbild, Film, Sequenz, Faser, Platzhalter ---------- */
.hero__bild{position:absolute;inset:0;z-index:0;overflow:clip}
.hero__still,.hero__film,.hero__seq{position:absolute;inset:0;width:100%;height:100%}
.hero__still img,.hero__film{width:100%;height:100%;object-fit:cover}
/* Sobald ein Foto da ist, tritt die Planzeichnung ab (mit Film: html[data-film="an"], Abschnitt «Film») */
.hero__still:not([hidden]) ~ .hero__plan{display:none}
/* Planzeichnung: offener Ring, rechts angeschnitten, Spalt oben rechts sichtbar.
Der Ringkörper (Aussenradius 41.2 % der Fläche) bleibt mindestens 32 px unter dem Kopf. */
.hero__plan{
--plan:min(95svh,62vw);
--plan-oben:calc(var(--kopf-h,68px) + 32px - var(--plan) * .088);
position:absolute;
width:var(--plan); height:var(--plan);
right:calc(var(--plan) * -.2);
top:max(calc(46% - var(--plan) / 2), var(--plan-oben));
overflow:visible;
pointer-events:none;
}
.hero__plan path,.hero__plan circle{vector-effect:non-scaling-stroke}
/* Achsen bleiben Haarlinien (--rule-deep), Ring und Bögen in --field-border-deep (rund 4:1 auf --deep) */
.plan__achse{fill:none;stroke:var(--rule-deep);stroke-width:1;stroke-dasharray:36 9 5 9}
.plan__koerper{fill:none;stroke:var(--field-border-deep);stroke-width:1.5;stroke-linejoin:round}
.plan__wlan{fill:none;stroke:var(--field-border-deep);stroke-width:1.5;stroke-linecap:round}
/* Die eine farbige Linie: Glasfaser, endet am geschlossenen Ring (Quelle der WLAN-Bögen) */
.plan__faser{fill:none;stroke:var(--tech-hell);stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter}
.plan__faser--links{display:none}
.plan__ende{fill:var(--deep);stroke:var(--tech-hell);stroke-width:2}
/* Start- und Endbild, Abdunklung, Kopfschatten, Faser: nur mit Film (Abschnitt «Film») */
.hero__kamera,.hero__abdunklung,.hero__kopfschatten,.hero__faser,.hero__hinweis{display:none}
/* ---------- Inhalt ---------- */
.hero__inhalt{
position:relative; z-index:2;
grid-row:2;
padding-block:calc(var(--kopf-h,68px) + 40px) clamp(56px,9vh,104px);
}
.hero__inhalt .wrap{
display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
column-gap:clamp(16px,2.4vw,32px);
}
.hero__text{
position:relative;
grid-column:1 / span 6;
display:flex; flex-direction:column; align-items:flex-start;
}
/* Wächter für kopf.js: oberer Rand des Textblocks */
.hero__wache{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}
/* Wächter für die Handy-Leiste (kopf.js): 85 % der ersten Bildschirmhöhe unter dem Anfang des Heros.
Ist er oben aus dem Bild, darf die Leiste kommen. Liegt im Hero selbst (nicht in der klebenden Bühne). */
.hero > .hero__leiste-wache{position:absolute;z-index:auto;left:0;top:85vh;top:85svh;width:1px;height:1px;pointer-events:none}
/* Wächter für das Ende des Heros (hero-film.js): 8 px nachdem die Bühne sich löst (bzw. nach 8 px Scroll ohne
Scroll-Strecke). Ist er oben aus dem Bild, blendet die Faserlinie aus, damit sie nicht hinter Nummer und
Navigation im noch durchsichtigen Kopf durchzieht. */
.hero > .hero__faser-wache{position:absolute;left:0;top:calc(100% - 100vh + 8px);top:calc(100% - 100svh + 8px);width:1px;height:1px;pointer-events:none}
/* Grosse Zeile: drei Zeilen in derselben Rasterzelle. Die H1 (Zeile 3 plus Kicker) liegt als Subgrid
über beiden Reihen, so ist Reihe 1 so hoch wie die höchste der drei Zeilen und der Kicker steht immer gleich. */
.hero__kopf{
display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto;
row-gap:clamp(18px,1.8vw,26px);
width:100%;
}
.hero__kopf > .hero__zeile--1,.hero__kopf > .hero__zeile--2{grid-area:1 / 1;display:none}
.hero__titel{
grid-area:1 / 1 / 3 / 2;
display:grid; grid-template-rows:subgrid; grid-template-columns:minmax(0,1fr);
margin:0; font-size:1rem; font-weight:400;
}
.hero__titel > .hero__zeile--3{grid-row:1}
.hero__titel > .hero__kicker{grid-row:2}
@supports not (grid-template-rows:subgrid){
.hero__kopf{position:relative;display:block}
.hero__titel{display:flex;flex-direction:column;gap:clamp(18px,1.8vw,26px)}
.hero__kopf > .hero__zeile--1,.hero__kopf > .hero__zeile--2{position:absolute;left:0;right:0;top:0}
}
/* Titel eleganter (Feedback 7): Archivo 108 %, 700, enger gesetzt. Immer genau zweizeilig: höchstens 7.2em breit
(die längste erste Zeile «Stockwerk für» braucht 6.75em), so ist keine der drei Zeilen einzeilig und unter
der grossen Zeile entsteht nie eine Lücke. */
.hero__titel > .hero__zeile--3{display:block}
.hero__zeile{
max-width:7.2em; margin:0;
font-family:var(--f-display); font-stretch:var(--display-wdth); font-weight:var(--display-wght);
font-size:var(--hero-display); line-height:.96; letter-spacing:var(--display-track);
color:var(--title); text-wrap:balance;
}
/* Kicker: Teil der H1 und die wichtigste Infozeile (Leistung und Region), 12 Wörter. An allen Breiten
Instrument Sans 600 in normaler Schreibung (Prüfer-Befund: lange Versalzeilen liest man schlechter,
Versalien und Breitschnitt nur für kurze Etiketten). Computer 17 bis 18 px, Handy 15 px (unten). */
.hero__kicker{
display:block; max-width:34em;
font-family:var(--f-body); font-stretch:100%; font-weight:600;
font-size:clamp(1.0625rem,1rem + .2vw,1.125rem); line-height:1.42; letter-spacing:.002em;
text-transform:none; font-variant-numeric:lining-nums;
color:var(--fg); text-wrap:balance;
}
/* Unterzeile: Lead-Grösse aus 00-base.css (19 bis 22 px), 450 auf Dunkel, gut lesbar */
.hero__unter{
max-width:30em; margin-top:clamp(22px,2.4vw,32px);
font-size:var(--t-lead); line-height:1.5; letter-spacing:-.003em;
font-weight:var(--text-wght-deep);
color:var(--fg); text-wrap:pretty;
}
.hero__cta{margin-top:clamp(28px,3vw,40px)}
/* =========================================================================
Film (Paket 9). Aktiv nur mit html[data-film="an"], das setzt der Film-Schalter
in hero.html, wenn dort "film": true steht. Den Modus wählt nur JavaScript:
video Computer: Scrub-Video (.hero__film), davor Start- und Endbild (.hero__kamera)
seq Handy, Tablet hoch: Bildsequenz auf Canvas (.hero__seq)
static Reduced Motion, Datensparmodus, 2G, Handy quer, Ladefehler: Endbild des Films, Faser fertig gezogen
Am Hero setzt JavaScript --hero-len, --film-bild, --film-ende und --film-fokus.
========================================================================= */
.hero__film,.hero__seq{display:none}
/* Schattenschrift für Text über dem Film (Farbe aus --deep-2) */
html[data-film="an"] .hero{
--film-schatten:
0 1px 2px color-mix(in srgb,var(--deep-2) 90%,transparent),
0 2px 10px color-mix(in srgb,var(--deep-2) 62%,transparent),
0 8px 32px color-mix(in srgb,var(--deep-2) 52%,transparent);
/* Abdunklung hinter der Textspalte (linke Hälfte: Baum, Laterne, Seitenfassade). Sie endet an der Hausecke
(Steigzone mindestens 24 px rechts vom Text, Film-Schalter), dort wirkt die dunklere Seitenfassade wie Schatten;
die Vorderfassade mit den Fenstern bleibt hell. Nach oben läuft sie aus (Maske), der Himmel bleibt offen.
Lesbarkeits-Prüfung ohne Schattenschrift: medien/hero/test/lesbarkeit.cjs */
--film-abdunklung:
linear-gradient(to right,
color-mix(in srgb,var(--deep-2) 66%,transparent) 0%,
color-mix(in srgb,var(--deep-2) 60%,transparent) 36%,
color-mix(in srgb,var(--deep-2) 46%,transparent) 46%,
transparent 53%),
radial-gradient(ellipse 46% 50% at 12% 86%,
color-mix(in srgb,var(--deep-2) 40%,transparent) 0%,
transparent 100%);
}
.hero__abdunklung{
-webkit-mask-image:linear-gradient(to bottom,transparent 4%,#000 34%);
mask-image:linear-gradient(to bottom,transparent 4%,#000 34%);
}
/* Die Planzeichnung tritt ab, die Bildebene trägt Start- und Endbild */
html[data-film="an"] .hero__plan{display:none}
html[data-film="an"] .hero__bild{background:var(--deep)}
html[data-film="an"] .hero__kamera{display:block;position:absolute;inset:0;overflow:clip}
.hero__kamera-start,.hero__kamera-ende{
position:absolute; inset:0;
background:var(--film-bild,none) var(--film-fokus,50% 50%) / cover no-repeat;
transform-origin:0 0;
}
/* Endbild: nur im Video-Modus, solange das Video lädt (hero-film.js setzt --film-ende, Deckkraft und Kamera).
Weicher Rand, damit beim Verkleinern (Kamerafahrt rückwärts) keine Kante zu sehen ist. */
.hero__kamera-ende{
display:none; opacity:0;
background-image:var(--film-ende,none);
-webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent);
mask-composite:intersect;
}
html[data-hero="video"] .hero__kamera-ende{display:block}
/* Scroll-Strecke: Bühne bleibt stehen, der Film läuft mit dem Scrollen */
html[data-hero="video"] .hero,
html[data-hero="seq"] .hero{height:var(--hero-len)}
html[data-hero="video"] .hero__stage,
html[data-hero="seq"] .hero__stage{position:sticky;top:0;height:100svh;min-height:0}
/* Video und Sequenz blenden erst ein, wenn das erste Bild wirklich steht (bis dahin: Startbild darunter) */
html[data-hero="video"] .hero__film{
display:block; object-position:var(--film-fokus,50% 50%);
opacity:0; transform:translateZ(0);
transition:opacity var(--dur-3) var(--ease-out);
}
html[data-hero="video"] .hero.video-bereit .hero__film{opacity:1}
html[data-hero="seq"] .hero__seq{display:block;opacity:0}
html[data-hero="seq"] .hero.seq-bereit .hero__seq{opacity:1}
/* Text über dem Bild (Computer, Tablet quer, Standbild ab 721 px): Abdunklung unten links und Schattenschrift */
html[data-hero="video"] .hero__abdunklung{display:block;position:absolute;inset:0;background:var(--film-abdunklung);pointer-events:none}
html[data-hero="video"] .hero__inhalt{text-shadow:var(--film-schatten);padding-bottom:clamp(76px,11vh,112px)} /* Platz für den Scroll-Hinweis darunter */
.hero__inhalt .btn{text-shadow:none}
@media (min-width:721px){
html[data-film="an"][data-hero="static"] .hero__abdunklung{display:block;position:absolute;inset:0;background:var(--film-abdunklung);pointer-events:none}
html[data-film="an"][data-hero="static"] .hero__inhalt{text-shadow:var(--film-schatten)}
}
/* Kopf über dem Himmel: ein weicher Schatten oben, damit Logo und Navigation lesbar bleiben */
html[data-film="an"] .hero__kopfschatten{
display:block; position:absolute; inset:0 0 auto 0;
height:calc(var(--kopf-h,68px) + 96px); pointer-events:none;
background:linear-gradient(to bottom,
color-mix(in srgb,var(--deep-2) 58%,transparent) 0%,
color-mix(in srgb,var(--deep-2) 24%,transparent) 55%,
transparent 100%);
}
/* ---------- Grosse Zeile im Film-Modus: Scroll löst aus, Zeit spielt ab ----------
Zeile 1 und 2 nur mit Film. hero-film.js setzt je Zeile data-zustand, sobald der Fortschritt eine Bandgrenze
überschreitet (Hysterese 0.01). Den Wechsel spielt CSS in fester Zeit, unabhängig vom Scroll-Tempo:
unten wartet unter der Maske (Wörter 120 % tiefer) · zurück: Wörter sinken in 240 ms
steht Wörter steigen wie beim Laden (780 ms --ease-out, 60 ms Versatz, 100 ms nach dem Wechsel);
von oben zurück: Zeile senkt sich und blendet ein (520 ms)
oben Zeile hebt sich um .3em und blendet aus (240 ms --ease-out)
So zeigt kein Ruhezustand halbe Wörter oder eine Geisterzeile (Prüfer-Befund Bewegung).
Grundzustand ohne Attribut = Anfang des Films: Zeile 1 steht, Zeile 2 und 3 warten.
Die Maske (.hero__w) schneidet nur, solange ein Wort steigt oder wartet; steht es, fällt sie nach dem Auftritt
weg (sonst schnitte sie die Schattenschrift). Ruhend ist transform none (keine bleibende Compositing-Ebene). */
html[data-hero="video"] .hero__kopf > .hero__zeile--1,html[data-hero="video"] .hero__kopf > .hero__zeile--2,
html[data-hero="seq"] .hero__kopf > .hero__zeile--1,html[data-hero="seq"] .hero__kopf > .hero__zeile--2{display:block}
/* steht (Grundzustand jeder Zeile) */
html[data-hero="video"] .hero__zeile,html[data-hero="seq"] .hero__zeile{
opacity:1; transform:none; visibility:visible;
transition:opacity 520ms var(--ease-out) 80ms, transform 520ms var(--ease-out) 80ms, visibility 0s;
}
html[data-hero="video"] .hero__zeile .hero__w,html[data-hero="seq"] .hero__zeile .hero__w{
clip-path:inset(-3.3em -3.25em -3em -3.25em);
transition:clip-path 0s calc(880ms + var(--i,0) * 60ms);
}
html[data-hero="video"] .hero__zeile .hero__wi,html[data-hero="seq"] .hero__zeile .hero__wi{
transform:none;
transition:transform 780ms var(--ease-out) calc(100ms + var(--i,0) * 60ms);
}
/* unten (Zeile 2 und 3 ohne Attribut, oder zurückgescrollt) */
html[data-hero="video"] .hero__zeile:is(.hero__zeile--2,.hero__zeile--3):not([data-zustand]),
html[data-hero="seq"] .hero__zeile:is(.hero__zeile--2,.hero__zeile--3):not([data-zustand]),
html[data-hero="video"] .hero__zeile[data-zustand="unten"],html[data-hero="seq"] .hero__zeile[data-zustand="unten"]{
transition:opacity 0s 240ms, transform 0s 240ms, visibility 0s 240ms;
}
html[data-hero="video"] .hero__zeile:is(.hero__zeile--2,.hero__zeile--3):not([data-zustand]) .hero__w,
html[data-hero="seq"] .hero__zeile:is(.hero__zeile--2,.hero__zeile--3):not([data-zustand]) .hero__w,
html[data-hero="video"] .hero__zeile[data-zustand="unten"] .hero__w,html[data-hero="seq"] .hero__zeile[data-zustand="unten"] .hero__w{
clip-path:inset(-.3em -.25em 0 -.25em);
transition:none;
}
html[data-hero="video"] .hero__zeile:is(.hero__zeile--2,.hero__zeile--3):not([data-zustand]) .hero__wi,
html[data-hero="seq"] .hero__zeile:is(.hero__zeile--2,.hero__zeile--3):not([data-zustand]) .hero__wi,
html[data-hero="video"] .hero__zeile[data-zustand="unten"] .hero__wi,html[data-hero="seq"] .hero__zeile[data-zustand="unten"] .hero__wi{
transform:translateY(120%);
transition:transform 240ms var(--ease-out);
}
/* oben (schon gelesen) */
html[data-hero="video"] .hero__zeile[data-zustand="oben"],html[data-hero="seq"] .hero__zeile[data-zustand="oben"]{
opacity:0; transform:translateY(-.3em);
transition:opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s 240ms;
}
/* kam die Zeile direkt von unten (schneller Sprung), bleiben die Wörter verdeckt, bis sie ausgeblendet ist */
html[data-hero="video"] .hero__zeile[data-zustand="oben"] .hero__w,html[data-hero="seq"] .hero__zeile[data-zustand="oben"] .hero__w{
transition:clip-path 0s 240ms;
}
html[data-hero="video"] .hero__zeile[data-zustand="oben"] .hero__wi,html[data-hero="seq"] .hero__zeile[data-zustand="oben"] .hero__wi{
transition:transform 0s 240ms;
}
/* Zeile 1 und 2 sind nur Bild (aria-hidden): ausser Sicht ganz weg. Die H1 (Zeile 3) bleibt immer im Baum. */
html[data-hero="video"] .hero__kopf > .hero__zeile--2:not([data-zustand]),
html[data-hero="seq"] .hero__kopf > .hero__zeile--2:not([data-zustand]),
html[data-hero="video"] .hero__kopf > .hero__zeile:is([data-zustand="unten"],[data-zustand="oben"]),
html[data-hero="seq"] .hero__kopf > .hero__zeile:is([data-zustand="unten"],[data-zustand="oben"]){visibility:hidden}
/* ---------- Faserlinie über dem Film (Kritik 4) ----------
Erst sichtbar, wenn hero-film.js Ausschnitt und Kamera gesetzt hat (.faser-bereit). Eine Linie, 2 px, --tech-hell,
kein Glow. Punkte = Linienenden ohne Länge (runde Kappe 7 px, bleibt bei jedem Massstab gleich gross). */
html[data-film="an"] .hero.faser-bereit .hero__faser{
display:block; position:absolute; inset:0; width:100%; height:100%;
overflow:visible; pointer-events:none;
transition:opacity var(--dur-2) var(--ease-out);
}
/* Hero verlassen (Wächter .hero__faser-wache, hero-film.js): Faser blendet in 240 ms aus, bevor Ring und
Stockwerkslinien hinter Nummer und Navigation im durchsichtigen Kopf durchziehen (Prüfer-Befund). */
html[data-film="an"] .hero.faser-bereit.faser-raus .hero__faser{opacity:0;transition-duration:240ms}
.faser__linie{
fill:none; stroke:var(--tech-hell); stroke-width:2;
stroke-linecap:butt; stroke-linejoin:miter; vector-effect:non-scaling-stroke;
stroke-dasharray:1 3; stroke-dashoffset:1;
}
/* Noch nicht begonnene Linien ganz weg (sonst zeichnen manche Browser an den Enden einen Haarpunkt) */
.faser__linie.is-leer{opacity:0}
.faser__punkt,.faser__schacht{
fill:none; stroke:var(--tech-hell); stroke-width:7; stroke-linecap:round; vector-effect:non-scaling-stroke;
opacity:0; transition:opacity var(--dur-1) var(--ease-out);
}
.faser__schacht{stroke-width:9;stroke-linecap:square}
.faser__punkt.is-an,.faser__schacht.is-an{opacity:1}
/* Ring geschlossen: dieselben Bögen in --ok blenden darüber (Türkis nur für den geschlossenen Ring) */
.faser__ok{stroke:var(--ok);opacity:0;transition:opacity var(--dur-2) var(--ease-out)}
.hero__faser.is-zu .faser__ok{opacity:1}
/* ---------- Scroll-Hinweis (Kritik 8): Etikett und eine kurze Faserlinie nach unten ----------
Liegt in der Bildebene (.hero__bild): am Computer (Bild = ganze Bühne) unten links unter dem Text,
in der Sequenz auf Tablets hoch (Bild oben, Text darunter) unten rechts im Bild. Unter 861 px fällt er mit
dem Hero-Knopf weg (92-leiste.css: die Leiste steht dort ab Bild 0, Wischen ist die erste Geste).
Ruhig: die Linie steht in --tech-hell, ein heller Impuls läuft alle 2.4 s hinunter.
Lädt der Film länger als 400 ms (.hero[data-laden]), füllt sich die Linie nach dem Ladestand (--ld), ohne Impuls.
Nach dem ersten Band (.hinweis-aus) blendet er aus. */
html[data-hero="video"] .hero__hinweis,
html[data-hero="seq"] .hero__hinweis{
display:flex; flex-direction:column; align-items:flex-start; gap:10px;
position:absolute; z-index:3; bottom:0;
left:max(var(--gutter),env(safe-area-inset-left,0px),calc((100% - var(--wrap)) / 2));
pointer-events:none;
transition:opacity var(--dur-2) var(--ease-out);
}
.hero.hinweis-aus .hero__hinweis{opacity:0}
.hero__hinweis-text{
font-family:var(--f-label); font-stretch:var(--label-wdth); font-weight:var(--label-wght);
font-size:var(--t-label-klein); line-height:1; letter-spacing:var(--label-track); text-transform:uppercase;
color:var(--on-deep-2); text-shadow:var(--film-schatten);
}
.hero__hinweis-linie{
position:relative; display:block; width:2px; height:clamp(28px,5.2vh,48px);
overflow:hidden; background:var(--rule-deep);
}
.hero__hinweis-laden,.hero__hinweis-puls{position:absolute;left:0;top:0;width:100%;height:100%}
.hero__hinweis-laden{background:var(--tech-hell);transform-origin:50% 0}
.hero__hinweis-puls{height:38%;background:var(--on-deep);transform:translateY(-110%)}
.hero[data-laden] .hero__hinweis-laden{transform:scaleY(var(--ld,0))}
.hero[data-laden] .hero__hinweis-puls{display:none}
@keyframes hero-puls{0%{transform:translateY(-110%)}55%,100%{transform:translateY(270%)}}
@media (prefers-reduced-motion:no-preference){
.hero__hinweis-puls{animation:hero-puls 2400ms var(--ease-in-out) 1200ms infinite}
.hero.hinweis-aus .hero__hinweis-puls{animation-play-state:paused} /* ausgeblendet: Impuls ruht */
}
/* =========================================================================
Auftritt nach Demo d3 (medien/moodboard/demos/d3.html), einmal beim Laden, Kurve --ease-out:
Wörter der sichtbaren grossen Zeile steigen aus der Maske, Kicker und Unterzeile blenden nach, zuletzt der Knopf.
Zeitplan (ms): Wort i 140 + 60 × i, je 780 · Kicker 440, 600, 6 px · Unterzeile 620, 640, 8 px
Knopf 1000, 560, 8 px · Schlusspunkt (nur static) 1110, 300, Skalierung 0.4 auf 1
Film-Modus: Zeile 1. static: Zeile 3 (die H1). Reduced Motion: keine Animation = Endzustand.
Die Animation liegt auf .hero__wi; der Zeilenwechsel (data-zustand) auf der Zeile selbst,
beides verträgt sich (wer gleich scrollt, sieht kein Springen).
Kicker und Unterzeile beginnen bei Deckkraft .01 statt 0: Text mit Deckkraft 0 zählt Chrome nicht als gemalt,
und weil die Blende im Compositor läuft, meldete Chrome das LCP erst nach rund 3 s (Prüfer-Befund SEO/Technik).
Ab .01 ist die Unterzeile beim ersten Bild gemalt (LCP unter 0.5 s), optisch bleibt es dieselbe Blende.
========================================================================= */
.hero__w{display:inline-block;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
.hero__wi{display:inline-block}
.hero__punkt{display:inline-block;transform-origin:50% 85%}
@keyframes hero-maske{from,to{clip-path:inset(-.3em -.25em 0 -.25em)}}
@keyframes hero-wort{from{transform:translateY(120%)}}
@keyframes hero-blende{from{opacity:0;transform:translateY(var(--hero-y,8px))}}
@keyframes hero-blende-lcp{from{opacity:.01;transform:translateY(var(--hero-y,8px))}}
@keyframes hero-punkt{from{opacity:0;transform:scale(.4)}}
@media (prefers-reduced-motion:no-preference){
html[data-hero="static"] .hero__zeile--3 .hero__w,
html[data-hero="video"] .hero__zeile--1 .hero__w,
html[data-hero="seq"] .hero__zeile--1 .hero__w{
animation:hero-maske 780ms linear calc(140ms + var(--i,0) * 60ms) backwards;
}
html[data-hero="static"] .hero__zeile--3 .hero__wi,
html[data-hero="video"] .hero__zeile--1 .hero__wi,
html[data-hero="seq"] .hero__zeile--1 .hero__wi{
animation:hero-wort 780ms var(--ease-out) calc(140ms + var(--i,0) * 60ms) backwards;
}
html[data-hero] .hero__kicker{--hero-y:6px;animation:hero-blende-lcp 600ms var(--ease-out) 440ms backwards}
html[data-hero] .hero__unter{animation:hero-blende-lcp 640ms var(--ease-out) 620ms backwards}
html[data-hero] .hero__cta{animation:hero-blende 560ms var(--ease-out) 1000ms backwards}
html[data-hero="static"] .hero__punkt{animation:hero-punkt 300ms var(--ease-out) 1110ms backwards}
html[data-hero="video"] .hero__hinweis,html[data-hero="seq"] .hero__hinweis{animation:hero-blende 560ms var(--ease-out) 1300ms backwards}
}
/* ---------- mittlere Breiten ---------- */
@media (max-width:1180px){
.hero__plan{top:max(calc(40% - var(--plan) / 2), var(--plan-oben))}
}
@media (min-width:721px) and (max-aspect-ratio:1/1){
/* Hochformat-Tablet ohne Film: Ring weiter oben, Text bekommt die untere Hälfte. Faser vom linken Rand,
darum der Ring so klein, dass sie über dem Kicker bleibt. */
.hero__plan{--plan:min(84vw,58svh,calc((100svh - 560px) * 1.33));top:var(--plan-oben)}
.hero__text{grid-column:1 / span 10}
.hero{--hero-spalte:calc((min(var(--wrap), 100vw - 2 * var(--gutter)) - clamp(16px,2.4vw,32px)) * .83)}
.plan__faser--links{display:inline}
.plan__faser--unten{display:none}
}
/* ---------- Handy und Bildsequenz: Bild oben unter dem Kopf, Text darunter ----------
Kritik 3: Bild höher (bis 4:5, Haus drin), keine leere Fläche. Das Bildfeld nimmt, was der Text übrig lässt
(höchstens 4:5, mindestens 150 px), der Kopf steht auf --deep (Logo lesbar). Mit JavaScript steht unter 861 px
die Handy-Leiste ab Bild 0 statt des Hero-Knopfs; den Abstand unten setzt dann 92-leiste.css.
Gilt für alle Modi unter 721 px und für die Sequenz auf Tablets hoch. */
@media (max-width:720px){
.hero{--hero-spalte:calc(100vw - 2 * var(--gutter))}
.hero__stage{
display:flex; flex-direction:column; min-height:100svh;
padding-top:calc(var(--kopf-h,68px) + env(safe-area-inset-top,0px));
}
.hero__bild{position:relative;inset:auto;flex:1 1 auto;min-height:150px;max-height:125vw}
.hero__inhalt{flex:none;padding-block:22px max(26px,env(safe-area-inset-bottom,0px))}
.hero__inhalt .wrap{display:block}
/* Ohne Film: Ring passt immer ganz in das Bildfeld, rechts bewusst um gut 20 % angeschnitten (auch bei 320 px).
Die Faser kommt vom linken Bildrand. */
/* Grösse aus der Höhe des Bildfelds (Prozent), quadratisch; 22 % des Rings liegen rechts ausserhalb */
.hero__plan{
width:auto; height:min(115%, 112vw); aspect-ratio:1 / 1;
right:0; left:auto; top:50%;
transform:translate(26.9%,-50%);
}
.plan__faser--links{display:inline}
.plan__faser--unten{display:none}
.hero__kopf{row-gap:14px}
.hero__kicker{font-size:.9375rem;max-width:none}
.hero__unter{margin-top:14px;font-size:1.0625rem;line-height:1.5}
.hero__unter-a{display:none}
.hero__cta{margin-top:20px}
}
/* Bildsequenz auf Tablets hoch (721 bis 1024 px): dasselbe Raster wie am Handy */
@media (min-width:721px){
html[data-hero="seq"] .hero{--hero-spalte:calc((min(var(--wrap), 100vw - 2 * var(--gutter)) - clamp(16px,2.4vw,32px)) * .83)}
html[data-hero="seq"] .hero__stage{
display:flex; flex-direction:column;
padding-top:calc(var(--kopf-h,68px) + env(safe-area-inset-top,0px));
}
html[data-hero="seq"] .hero__bild{position:relative;inset:auto;flex:1 1 auto;min-height:200px;max-height:125vw}
html[data-hero="seq"] .hero__inhalt{flex:none;padding-block:32px max(40px,env(safe-area-inset-bottom,0px))}
html[data-hero="seq"] .hero__text{grid-column:1 / span 10}
/* Tablet hoch: Text knapp halten, damit das Bildfeld möglichst viel vom Haus zeigt (Dachgaube bis Erdgeschoss) */
html[data-hero="seq"] .hero{--hero-display:min(var(--t-display), 3.25rem)}
html[data-hero="seq"] .hero__unter-a{display:none}
html[data-hero="seq"] .hero__unter{margin-top:18px}
html[data-hero="seq"] .hero__cta{margin-top:24px}
}
/* Scroll-Hinweis in der Sequenz (Tablet hoch ab 861 px; darunter blendet 92-leiste.css ihn aus): unten rechts
im Bild (Etikett über der kurzen Linie), über dem Foto mit Schattenschrift. Links unten liegt der Schacht der
Faser, rechts unten nur Strasse. */
html[data-hero="seq"] .hero__hinweis{
left:auto; right:max(var(--gutter),env(safe-area-inset-right,0px));
bottom:14px; align-items:center; gap:7px;
}
html[data-hero="seq"] .hero__hinweis-linie{height:22px}
html[data-hero="seq"] .hero__hinweis-text{color:var(--on-deep)}
@media (min-width:721px){ html[data-hero="seq"] .hero__hinweis{bottom:20px} }
@media (prefers-reduced-motion:reduce){
.faser__punkt,.faser__schacht,.faser__ok,.hero__hinweis{transition:none}
}
@media (max-width:480px){
.hero__punkt{transform-origin:50% 85%}
}
@media (max-width:340px){
.hero__kicker{font-size:.875rem}
.hero__unter{font-size:1rem}
}
/* ===================== Schrift-Vorschläge (medien/review/typo/fremd-vorschlag.css, Teil 20-hero) =====================
Abgeglichen am 08.10.2026 nachts, nichts doppelt gesetzt:
.hero__display / Bandzeilen schon gleichwertig über .hero__zeile (--display-wdth, --display-wght, --display-track,
Zeilenhöhe .96); Grösse bleibt --hero-display = min(--t-display, Spalte / 6.9),
damit alle drei Zeilen zweizeilig bleiben und nichts springt.
.hero__unter übernommen: font-size var(--t-lead), 450 auf Dunkel (Regel oben), Handy 17 px wie vorgeschlagen.
.hero__kicker nicht übernommen: der Prüfer-Befund (lange Versalzeilen) gilt vor dem Etikett-Stil,
der Kicker steht jetzt überall in Instrument Sans 600, normale Schreibung.
Etikett «Scrollen» schon Etikett-Stil (--f-label, Versalien, kurz). Keine Mono mehr im Hero. */
/* ===== 30-leistungen.css ===== */
/* =========================================================================
K-ProTech · 30-leistungen.css · Abschnitt «Leistungen» (#leistungen, hell)
Gerüst: Kopf (H2 + Lead, Spalten 1 bis 7) → Plan «Die Strecke» (Hausschnitt)
+ sieben gleich gebaute Kacheln in drei Gruppen.
Ab 1280 px klebt die Plan-Spalte links (Plan + Knopf, 1.6fr), rechts laufen die Kacheln (1fr).
900 bis 1279 px: Querfassung über volle Breite, Kacheln zweispaltig darunter.
Unter 900 px: Hochformat-Fassung mit Nummernmarken und Legende, dann die Kacheln (Stapel).
Der Plan wurde erzeugt mit medien/review/B/strecke_plan.py, seither von Hand ergänzt (siehe Teil).
Bewegung (Animations-Runde 08.10.2026, strecke.js): Einstieg des Plans (Plotter, Faser, Ringe,
Etiketten, WLAN, Lichtimpuls), danach Ruhe. Zustände: .is-wartet, .is-intro, .is-gelaufen,
[data-aktiv] an .strecke; .is-anim am Abschnitt, .is-in an Kachel und Gruppentitel.
Kachel-Runde 08.10.2026: Kacheln sind Fase-Tafeln (.leistung__kachel), Einstieg, Anheben bei Maus
(kein Kippen mehr, Prüfrunde), Lichtkante, Stapel am Handy.
Orts-Runde 08.10.2026 (Feedback 1, Kritik 7):
· Ab 1280 px: der aktive Ort leuchtet. Marker gefüllt (Marine, weisse Nummer, zweimal Puls),
Etikett invertiert, übrige Marker 30 %, Raum bzw. Geschoss zart blau (.raum), bei 04 die ganze
Faser. Eine feine Faserlinie (.strecke__verbindung) führt vom Etikett zum Titel der aktiven Kachel.
· Unter 1280 px: jede Kachel trägt oben rechts einen Schlüsselplan (.leistung__kp) mit ihrem Punkt.
· «Umfang» ist überall zugeklappt (ohne JavaScript offen). Plan am Computer grösser.
========================================================================= */
/* ---------- Kopf ---------- */
.leistungen__kopf{margin-bottom:clamp(40px,6vw,72px)}
.leistungen__kopf-inhalt{grid-column:1 / -1;display:grid;gap:clamp(16px,2vw,24px)}
@media (min-width:900px){ .leistungen__kopf-inhalt{grid-column:1 / span 7} }
/* ---------- Raster ---------- */
.leistungen__raster{display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(56px,8vw,88px)}
.leistungen__plan{min-width:0}
@media (min-width:1280px){
.leistungen__raster{
grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
column-gap:56px; align-items:start;
}
/* Klebende Spalte, in der Bildschirmhöhe mittig, nie unter dem Kopf */
.leistungen__plan{
position:sticky; z-index:2;
top:max(calc(var(--header-h) + 24px), calc(50svh - 310px));
}
}
/* ---------- Plan «Die Strecke» ---------- */
.strecke{position:relative;margin:0;min-width:0}
.strecke__blatt{position:relative;padding:12px}
.plan{display:block;width:100%;height:auto;aspect-ratio:var(--plan-ratio);overflow:visible}
.plan--quer{display:none}
@media (max-width:899px){
/* Hochformat: Blatt reicht bis 13 px an den Bildschirmrand, 4 px Polster. So liegt Marker 04
(Masslinie ganz links) mit seiner Tippfläche ganz im Bild, und bei 375 px sind alle
Marker mindestens 44 px gross. */
.strecke__blatt{margin-inline:calc(13px - var(--gutter));padding:10px 4px}
.strecke__legende{margin-inline:0}
}
@media (min-width:600px) and (max-width:899px){
.strecke__blatt{max-width:600px;margin-inline:0}
}
@media (min-width:900px){
.plan--hoch{display:none}
.plan--quer{display:block}
.strecke__blatt{max-width:min(980px,calc((86vh - 72px) * var(--plan-k,1.46)))}
}
@media (min-width:1280px){
/* Spalte ganz nutzen; nur bei niedrigem Fenster kleiner, damit Plan, Legende und Knopf ins Bild passen */
.strecke__blatt{padding:6px;max-width:min(100%,calc((100svh - var(--header-h) - 190px) * var(--plan-k,1.46)))}
.strecke__legende{margin-inline:6px}
}
/* Grundstriche: 1-px-Haarlinien in Marine, unabhängig vom Massstab.
Über :where() ohne Gewicht, damit die Füllungen der Klassen unten greifen
(Marker-Scheibe, Etikett, Koten, Massstab, Objekte). */
.plan :where(path,rect,circle){vector-effect:non-scaling-stroke;stroke:var(--marine);stroke-width:1}
.plan :where(path,rect,circle):where(:not([fill])){fill:none}
.plan pattern *{vector-effect:none}
.plan .pbg{fill:var(--bg);stroke:none}
.plan .ph{stroke:var(--marine);stroke-width:.75;stroke-opacity:.5}
.plan .ph--mw{stroke-opacity:.3}
.plan .ph--er{stroke-opacity:.42}
.plan .w{stroke-linejoin:miter}
.plan .holz{fill:var(--bg)}
.plan .luft{fill:var(--bg);stroke:none}
.plan .erde{stroke:none}
.plan .v{stroke-opacity:.42}
.plan .o{fill:var(--bg)}
.plan .x{stroke-dasharray:3 2.5;stroke-opacity:.7}
.plan .wl{stroke-dasharray:2.5 3.5;stroke-opacity:.6}
.plan .fein path,.plan .fein rect,.plan .fein circle{stroke-opacity:.68}
.plan .rohr{stroke-width:7;stroke-linecap:butt}
.plan .rohr-in{stroke:var(--bg);stroke-width:5;stroke-linecap:square}
.plan .kanal{stroke-width:4;stroke-linejoin:miter;stroke-linecap:butt}
.plan .kanal-in{stroke:var(--bg);stroke-width:2;stroke-linejoin:miter;stroke-linecap:square}
.plan .patch,.plan .leitung{stroke-linecap:round}
/* Die eine farbige Linie: Glasfaser. Abzweige pro Geschoss etwas feiner. */
.plan .faser-grund{stroke:var(--bg);stroke-width:6;stroke-linejoin:round;stroke-linecap:round}
.plan .faser{stroke:var(--fiber);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.plan .faser--ast{stroke-width:1.6}
/* Ring an der Dose. Gedreht, damit er sich beim Einstieg oben schliesst (in Ruhe unsichtbar). */
.plan .ende{fill:none;stroke:var(--fiber);stroke-width:1.6;transform:rotate(-90deg);transform-box:fill-box;transform-origin:center}
/* Masskette, Koten, Massstab, Plankopf */
.plan .ml{stroke-opacity:.8}
.plan .hl{stroke-opacity:.42}
.plan .kd{fill:var(--marine);stroke:none}
.plan text{font-family:var(--f-mono);font-weight:500;fill:var(--fg);stroke:none;font-variant-numeric:tabular-nums}
.plan .kt,.plan .mst{fill:var(--fg-2)}
.plan .ms{fill:var(--bg)}
.plan .ms--voll{fill:var(--marine)}
.plan .pk{fill:none;stroke:var(--marine)}
.plan .pkt--titel{fill:var(--title)}
/* Marker: Ring mit Nummer, Führungslinie, Etikett wie Patchpanel-Beschriftung */
.plan .pm{cursor:pointer;-webkit-tap-highlight-color:transparent}
.plan .pm__h{fill:transparent;stroke:none;pointer-events:all}
.plan .pm__f{fill:none;stroke:none}
.plan .pm__g{fill:var(--bg);stroke:none}
.plan .pm__r{
--gap:14;
fill:none; stroke:var(--marine); stroke-width:1.5;
stroke-dasharray:calc(100 - var(--gap)) var(--gap);
stroke-dashoffset:-4;
transform:rotate(-90deg); transform-box:fill-box; transform-origin:center;
}
.plan .pm__n{fill:var(--title);text-anchor:middle}
.plan .pm__l{fill:none;stroke-opacity:.75}
.plan .pm__e{fill:var(--bg);stroke:var(--rule-strong)}
.plan .pm__t{fill:var(--fg);text-anchor:middle}
/* Nach dem Einstieg (strecke.js setzt .is-gelaufen): alle Ringe geschlossen, die Strecke ist geprüft.
Ohne JavaScript bleiben die Ringe offen wie im Logo. */
.strecke.is-gelaufen .plan .pm__r{--gap:0}
/* ---------- Aktiver Ort (ab 1280 px; strecke.js setzt data-aktiv an .strecke und .is-aktiv am Marker) ----------
strecke.js legt je Marker an: .pm__hof (Leuchtfläche für den Puls), .pm__voll (gefüllte Scheibe),
.pm__n2 (weisse Nummer), .pm__inv (invertiertes Etikett, öffnet sich von der Führungslinie her,
Richtung in --inv-zu). Die übrigen Marker treten auf 30 % zurück, Hover holt sie nach vorn. */
.plan .pm__voll{fill:var(--marine);stroke:none;opacity:0;transform:scale(.5);transform-box:fill-box;transform-origin:center;pointer-events:none}
.plan .pm__n2{fill:var(--sheet);text-anchor:middle;opacity:0;pointer-events:none}
.plan .pm__hof{fill:var(--fiber);stroke:none;opacity:0;transform-box:fill-box;transform-origin:center;pointer-events:none}
.plan .pm__inv{clip-path:var(--inv-zu,inset(0 100% 0 0));pointer-events:none}
.plan .pm__inv rect{fill:var(--marine);stroke:var(--marine)}
.plan .pm__inv text{fill:var(--sheet);text-anchor:middle}
.plan .pm.is-aktiv .pm__r{--gap:0}
.plan .pm.is-aktiv .pm__voll{opacity:1;transform:none}
.plan .pm.is-aktiv .pm__n2{opacity:1}
.plan .pm.is-aktiv .pm__inv{clip-path:inset(0 0 0 0)}
.strecke[data-aktiv] .plan .pm:not(.is-aktiv){opacity:.3}
@media (hover:hover) and (pointer:fine){
.strecke .plan .pm:hover .pm__r{--gap:0}
.strecke[data-aktiv] .plan .pm:not(.is-aktiv):hover{opacity:1}
.strecke .plan .pm:hover .pm__e{stroke:var(--marine)}
}
/* Raum bzw. Geschoss des aktiven Orts: zart blau hinterlegt (Wände und Decken bleiben weiss,
ihre Schraffur deckt). 04 «Die ganze Strecke»: ein weiches Band entlang der ganzen Faser. */
.plan .raum{fill:var(--fiber);fill-opacity:.13;stroke:none;opacity:0;pointer-events:none}
.plan .raum--faser{fill:none;stroke:var(--fiber);stroke-opacity:.2;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.strecke[data-aktiv="01"] .plan .raum[data-raum="01"],
.strecke[data-aktiv="02"] .plan .raum[data-raum="02"],
.strecke[data-aktiv="03"] .plan .raum[data-raum="03"],
.strecke[data-aktiv="04"] .plan .raum[data-raum="04"],
.strecke[data-aktiv="05"] .plan .raum[data-raum="05"],
.strecke[data-aktiv="06"] .plan .raum[data-raum="06"],
.strecke[data-aktiv="07"] .plan .raum[data-raum="07"]{opacity:1}
@media (prefers-reduced-motion:no-preference){
.plan .pm{transition:opacity 280ms var(--ease-out)}
.plan .pm .pm__r{transition:stroke-dasharray 420ms var(--ease-draw)}
.plan .pm__voll{transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out)}
.plan .pm__n2{transition:opacity 120ms var(--ease-out)}
.plan .pm__inv{transition:clip-path 160ms var(--ease-out)}
.plan .raum{transition:opacity 220ms var(--ease-out)}
/* Kommen langsamer als Gehen: Scheibe füllt sich, Nummer wird weiss, dann öffnet sich das Etikett */
.plan .pm.is-aktiv .pm__voll{transition:opacity 200ms var(--ease-out),transform 420ms var(--ease-out)}
.plan .pm.is-aktiv .pm__n2{transition:opacity 240ms var(--ease-out) 80ms}
.plan .pm.is-aktiv .pm__inv{transition:clip-path 460ms var(--ease-draw) 120ms}
.strecke[data-aktiv] .plan .raum{transition:opacity 520ms var(--ease-out) 60ms}
/* Während des Einstiegs führt strecke.js die Marker selbst */
.strecke.is-intro .plan .pm,.strecke.is-intro .plan .pm :is(.pm__r,.pm__l,.pm__n){transition:none}
}
/* Faserlinie vom aktiven Etikett zum Titel der aktiven Kachel (strecke.js, ab 1280 px).
Liegt über dem Plan; hinter dem Haus ist sie ausgeblendet (Maske), sie läuft «hinten durch». */
.strecke__verbindung{
position:absolute; left:0; top:0; width:100%; height:100%;
overflow:visible; pointer-events:none; z-index:3;
opacity:0;
}
.strecke__verbindung.is-an{opacity:1}
.strecke__verbindung .vb__grund{fill:none;stroke:var(--bg);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.strecke__verbindung .vb__linie{fill:none;stroke:var(--fiber);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.strecke__verbindung .vb__punkt{fill:var(--fiber);stroke:var(--bg);stroke-width:2;paint-order:stroke;transform-box:fill-box;transform-origin:center}
@media (max-width:1279px){ .strecke__verbindung{display:none} }
@media (prefers-reduced-motion:no-preference){
.strecke__verbindung{transition:opacity 180ms var(--ease-out)}
}
/* ---------- Laufzeit-Elemente der Bewegung (strecke.js legt sie an, in Ruhe unsichtbar) ---------- */
/* Wartezustand: leeres Planblatt, bis der Plan ins Bild kommt (nur mit JavaScript und Bewegung) */
@media (prefers-reduced-motion:no-preference){
.strecke.is-wartet .plan > g{opacity:0}
}
/* Schraffur getrennt von den Umrissen, damit sich die Umrisse zeichnen und die Schraffur einblendet */
.plan .e-schraffur path{stroke:none}
/* WLAN-Bögen wachsen aus dem Gerät (Ursprung in Plan-Einheiten) */
.plan .wl{transform-box:view-box}
/* Ping: dünner Ring in Faserfarbe, der sich vom Marker löst */
.plan .ping{fill:none;stroke:var(--fiber);stroke-width:1;opacity:0;transform-box:fill-box;transform-origin:center;pointer-events:none}
.plan .ping--stark{stroke-width:2}
/* Messkopf auf der Spitze der Faser */
.plan .spitze{fill:var(--fiber);stroke:var(--bg);stroke-width:2;paint-order:stroke;opacity:0;pointer-events:none}
/* Lichtimpuls: Schweif, Hof in Faserfarbe, heller Kern */
.plan .imp{fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;stroke-dasharray:.06 3;pointer-events:none}
.plan .imp--schweif{stroke:var(--fiber);stroke-width:4;stroke-opacity:.3;stroke-dasharray:.22 3;stroke-linecap:butt}
.plan .imp--hof{stroke:var(--fiber);stroke-width:6.5}
.plan .imp--kern{stroke:var(--bg);stroke-width:2.2}
.plan .imp--fein.imp--schweif{stroke-width:3;stroke-opacity:.22;stroke-dasharray:.12 3}
.plan .imp--fein.imp--hof{stroke-width:4.4;stroke-dasharray:.03 3}
.plan .imp--fein.imp--kern{stroke-width:1.4;stroke-dasharray:.03 3}
/* Hochformat: Etiketten nur während des Einstiegs (Texte aus den Kachel-Etiketten) */
.plan .tag{opacity:0;pointer-events:none}
.plan .tag__f{fill:var(--bg);stroke:var(--marine)}
.plan .tag__l{fill:none;stroke:var(--marine)}
.plan .tag__t{font-size:12px;fill:var(--fg)}
/* Legende unter dem Plan */
.strecke__legende{
display:flex; align-items:baseline; gap:12px;
margin:14px 12px 0; max-width:var(--mass);
font-size:var(--t-klein); line-height:1.5; color:var(--fg-2);
}
.strecke__probe{flex:none;width:28px;height:2px;background:var(--fiber);transform:translateY(-5px)}
/* ---------- Knopf: am Computer unter dem Plan (klebt mit), sonst am Ende der Liste ---------- */
.leistungen__aktion{margin-top:clamp(48px,6vw,72px)}
.leistungen__aktion--plan{display:none}
@media (min-width:1280px){
/* rechts neben der Legende (Legende höchstens 28em breit), so bleibt die Spalte kurz */
.leistungen__aktion--plan{display:flex;justify-content:flex-end;margin:-48px 6px 0 0}
.leistungen__aktion--liste{display:none}
/* Luft unter der letzten Kachel: solange 07 gelesen wird, bleibt der Plan ganz im Bild */
.leistungen__liste{padding-bottom:64px}
}
/* ---------- Gruppen und Kacheln ----------
bleibt unbewegt: Trefferfläche für die Maus, Anker, Fokusziel,
am Handy das klebende Element des Stapels. Bewegt wird nur .leistung__kachel darin
(Einstieg, Kippen zur Maus, Stapel-Skalierung), so flackert der Hover nie an der Kante.
Die Kachel ist eine Fase-Tafel wie .tafel: ::before = Haarlinie (--rule-strong), ::after = Fläche (--sheet).
strecke.js legt dazu an (aria-hidden): .leistung__licht (Lichtkante oben), .leistung__faser
(Faserlinie links, aktive Kachel), .leistung__decke und .leistung__dunkel (Stapel am Handy),
.leistung__kp (Schlüsselplan, unter 1280 px). */
.leistungen__liste{min-width:0}
.leistungen__gruppe + .leistungen__gruppe{margin-top:clamp(48px,6vw,72px)}
.leistungen__gruppentitel{
font-family:var(--f-label); font-stretch:var(--label-wdth); font-weight:var(--label-wght);
font-size:var(--t-label); line-height:1.45; letter-spacing:var(--label-track); text-transform:uppercase;
color:var(--fg-2);
margin-bottom:14px;
}
.leistung{
--k:0;
position:relative; display:flex; flex-direction:column;
/* zählt zu scroll-padding-top von html (Kopf + 16 px) dazu: Anker landen bei Kopf + 24 px */
scroll-margin-top:8px;
}
.leistung + .leistung{margin-top:clamp(14px,1.6vw,20px)}
.leistung:focus{outline:none}
.leistung:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
/* Fase-Tafel: Haarlinie läuft um die Fase oben rechts. Einziger Schatten der Seite (Token). */
.leistung__kachel{
position:relative; isolation:isolate; flex:1 1 auto;
padding:clamp(18px,2.2vw,28px) clamp(18px,2.2vw,28px) 8px;
box-shadow:0 1px 0 rgba(11,58,111,.08);
}
.leistung__kachel::before,.leistung__kachel::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.leistung__kachel::before{
inset:0; background:var(--rule-strong);
clip-path:polygon(0 0,calc(100% - var(--fase)) 0,100% var(--fase),100% 100%,0 100%);
}
.leistung__kachel::after{
inset:1px; background:var(--sheet);
clip-path:polygon(0 0,calc(100% - var(--fase) + .6px) 0,100% calc(var(--fase) - .6px),100% 100%,0 100%);
}
/* Maus (ab 900 px): die Kachel hebt sich 3 px, kein Kippen (Lesen bleibt gerade). Die Lichtkante läuft
dazu einmal über die Oberkante (strecke.js). Unter 900 px schreibt der Stapel transform: dort kein Übergang. */
@media (hover:hover) and (pointer:fine) and (min-width:900px) and (prefers-reduced-motion:no-preference){
.leistung__kachel{transition:transform 200ms var(--ease-out)}
.leistung:hover .leistung__kachel{transform:translate3d(0,-3px,0)}
}
/* Kopfzeile: Etikett links, darunter 1280 px der Schlüsselplan rechts */
.leistung__oben{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.leistung__oben .leistung__ort{min-width:0}
.leistung__ort .marker{width:36px;height:36px}
.leistung.is-aktiv .marker{--gap:0}
.leistung h3{margin-bottom:10px}
.leistung__lage{max-width:var(--mass)}
/* Schlüsselplan (strecke.js, aus der Hochformat-Fassung): ganzes Haus in klein, der Raum der Leistung
zart blau, ihr Ort als Punkt mit Leuchtfläche. Wie der kleine Übersichtsplan in der Ecke eines Planblatts. */
.leistung__kp{flex:none;display:block;width:clamp(64px,22vw,104px);height:auto;aspect-ratio:400 / 354;overflow:visible;margin-right:2px}
@media (min-width:1280px){ .leistung__kp{display:none} }
/* Schmal: Etikett etwas weniger breit gesetzt, damit «Hausanschluss» neben dem Schlüsselplan Platz hat;
unter 360 px steht der Ring über dem Etikett */
@media (max-width:479px){
.leistung__oben{gap:12px}
.leistung__kp{width:clamp(64px,19.5vw,80px)}
.leistung__ort .etikett__text{font-stretch:112%;letter-spacing:.08em}
}
@media (max-width:359px){
.leistung__ort{flex-direction:column;align-items:flex-start;gap:8px}
}
.leistung__kp .kp__bau{fill:none;stroke:var(--marine);stroke-opacity:.42;stroke-width:1}
.leistung__kp .kp__faser{fill:none;stroke:var(--fiber);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.leistung__kp .kp__band{fill:none;stroke:var(--fiber);stroke-opacity:.24;stroke-width:6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.leistung__kp .kp__raum{fill:var(--fiber);fill-opacity:.2;stroke:none}
.leistung__kp .kp__hof{fill:var(--fiber);opacity:.2;transform-box:fill-box;transform-origin:center}
.leistung__kp .kp__punkt{fill:var(--marine);stroke:var(--sheet);stroke-width:1.5;paint-order:stroke;vector-effect:non-scaling-stroke}
.leistung__kp .kp__puls{fill:none;stroke:var(--fiber);stroke-width:1.5;opacity:0;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center}
/* Laufzeit-Teile der Kachel (strecke.js), in Ruhe unsichtbar */
.leistung__licht{
position:absolute; left:0; top:0; z-index:3;
width:calc(100% - var(--fase)); height:2px; overflow:hidden; pointer-events:none;
}
.leistung__licht > i{position:absolute;left:0;top:0;height:100%;background:var(--fiber);opacity:0}
.leistung__licht > .licht__spur{width:100%;transform-origin:0 50%}
.leistung__licht > .licht__kopf{width:22%}
.leistung__faser{
position:absolute; left:0; top:0; bottom:0; z-index:3; width:2px;
background:var(--fiber); pointer-events:none;
transform:scaleY(0); transform-origin:50% 0; opacity:0;
}
.leistung.is-aktiv .leistung__faser{transform:none;opacity:1}
.leistung__decke,.leistung__dunkel{position:absolute;pointer-events:none;opacity:0}
.leistung__decke{
inset:1px; z-index:1; background:var(--sheet);
clip-path:polygon(0 0,calc(100% - var(--fase) + .6px) 0,100% calc(var(--fase) - .6px),100% 100%,0 100%);
}
.leistung__dunkel{
inset:0; z-index:2; background:var(--deep);
clip-path:polygon(0 0,calc(100% - var(--fase)) 0,100% var(--fase),100% 100%,0 100%);
}
@media (prefers-reduced-motion:no-preference){
/* Faserlinie der aktiven Kachel: zeichnet sich von oben, gleichzeitig mit der Verbindungslinie
(560 ms --ease-draw, 60 ms Versatz); geht schnell weg */
.leistung__faser{transition:opacity 200ms var(--ease-out),transform 0s linear 200ms}
.leistung.is-aktiv .leistung__faser{transition:transform 560ms var(--ease-draw) 60ms,opacity 0s}
}
/* Umfang: drei bis vier Punkte je Leistung (.liste-punkt aus 00-base.css), überall zugeklappt
(strecke.js beim Laden), Text bleibt im HTML. Ohne JavaScript offen. */
.leistung__umfang{margin-top:12px}
.leistung__umfang-kopf{
display:flex; align-items:center; gap:12px;
min-height:44px; cursor:pointer; list-style:none;
font-family:var(--f-label); font-stretch:var(--label-wdth); font-weight:var(--label-wght);
font-size:var(--t-label); line-height:1.2; letter-spacing:var(--label-track); text-transform:uppercase;
color:var(--fg);
-webkit-user-select:none; user-select:none;
}
.leistung__umfang-kopf::-webkit-details-marker{display:none}
.leistung__umfang-kopf::marker{content:""}
/* Haarlinie bis zum Zeichen, wie ein Feld im Plankopf */
.leistung__umfang-kopf::after{content:"";order:1;flex:1 1 auto;height:1px;background:var(--line)}
.leistung__umfang-zeichen{order:2;position:relative;flex:none;width:14px;height:14px;color:var(--title)}
.leistung__umfang-zeichen::before,.leistung__umfang-zeichen::after{
content:""; position:absolute; left:0; top:50%; width:14px; height:1.5px; margin-top:-.75px;
background:currentColor;
}
.leistung__umfang-zeichen::after{transform:rotate(90deg)}
.leistung__umfang[open] .leistung__umfang-zeichen::after{transform:rotate(0deg)}
.leistung__umfang[open] .leistung__punkte{padding-block:4px 14px}
.leistung__punkte{display:grid;gap:10px;margin:0;padding:0;list-style:none;max-width:var(--mass)}
.leistung__punkte li{font-size:1rem;line-height:1.55;color:var(--fg-2)}
@media (prefers-reduced-motion:no-preference){
.leistung__umfang-zeichen,.leistung__umfang-zeichen::after{transition:transform 200ms var(--ease-out)}
.leistung__umfang[open] .leistung__punkte{animation:umfang-ein 220ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
.leistung__umfang-kopf:hover .leistung__umfang-zeichen{transform:scale(1.18)}
}
.leistung__umfang-kopf:active .leistung__umfang-zeichen{transform:scale(.9)}
}
@keyframes umfang-ein{from{opacity:0;transform:translate3d(0,-4px,0)}}
.leistung__weiter{margin-top:0;font-weight:600}
.leistung__weiter .link{display:inline-flex;align-items:center;min-height:44px}
/* 07: Notizen wie auf einem Planblatt, Zusatz, Tipp (derzeit nicht im Markup, bleibt bereit) */
.leistung__notizen{
margin:28px 0 0; padding:18px 20px; display:grid; gap:14px; max-width:var(--mass);
background:var(--sheet); box-shadow:inset 0 0 0 1px var(--line), 0 1px 0 rgba(11,58,111,.08);
}
.leistung__notizen > div{display:grid;gap:2px}
.leistung__notizen dt{font-family:var(--f-label);font-stretch:var(--label-wdth);font-weight:var(--label-wght);font-size:var(--t-label);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--fg-2)}
.leistung__notizen dd{margin:0;font-size:1rem;line-height:1.5;color:var(--fg)}
@media (min-width:420px){
.leistung__notizen > div{grid-template-columns:8em minmax(0,1fr);column-gap:16px}
.leistung__notizen dt{padding-top:.2em}
}
.leistung__zusatz{margin-top:18px;max-width:var(--mass);font-size:var(--t-klein);line-height:1.55;color:var(--fg-2)}
.leistung__tipp{margin-top:14px;max-width:var(--mass);font-size:var(--t-klein);line-height:1.5;color:var(--fg)}
/* Tablet und kleiner Laptop (900 bis 1279 px): Kacheln zweispaltig unter dem Plan,
Kacheln einer Zeile gleich hoch (Tafeln stehen auf einer Linie) */
@media (min-width:900px) and (max-width:1279px){
.leistungen__gruppe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.leistungen__gruppentitel{grid-column:1 / -1;margin-bottom:0}
.leistung + .leistung{margin-top:0}
/* Allein in ihrer Gruppe (05 «Für Bauprojekte»): volle Breite statt halbleerer Zweierzeile.
Innen zwei Spalten wie die Zeile darüber: links Titel, Lage und Link, rechts «Umfang». */
.leistung:only-of-type{grid-column:1 / -1}
.leistung:only-of-type .leistung__kachel{
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
/* Spaltenfuge = zwei Innenränder + Fuge zwischen den Kacheln: «Umfang» steht genau über der rechten Kachel */
column-gap:calc(2 * clamp(18px,2.2vw,28px) + clamp(16px,2vw,24px)); align-content:start;
}
.leistung:only-of-type .leistung__oben{grid-column:1 / -1;grid-row:1}
.leistung:only-of-type h3{grid-column:1;grid-row:2}
.leistung:only-of-type .leistung__lage{grid-column:1;grid-row:3}
.leistung:only-of-type .leistung__weiter{grid-column:1;grid-row:4}
.leistung:only-of-type .leistung__umfang{grid-column:2;grid-row:2 / span 3;align-self:start;margin-top:-6px}
}
/* ---------- Handy (unter 900 px): Kacheln nicht breiter als der Plan ---------- */
@media (max-width:899px){
.leistung{max-width:600px}
.leistung:nth-of-type(2){--k:1}
.leistung:nth-of-type(3){--k:2}
.leistung:nth-of-type(4){--k:3}
/* Stapel (nur mit JavaScript und Bewegung, strecke.js setzt .is-stapel und die genauen top-Werte):
jede Kachel klebt unter dem Kopf, 8 px tiefer als die vorige; die nächste schiebt sich darüber,
die verdeckte wird kleiner (bis .94, von oben) und minimal dunkler. Ohne JavaScript und bei
Reduced Motion: gewöhnliche Liste. */
.leistungen.is-stapel .leistung{
position:sticky;
top:calc(var(--header-h) + env(safe-area-inset-top,0px) + 12px + var(--k) * 8px);
}
.leistungen.is-stapel .leistung__kachel{transform-origin:50% 0}
/* Messen (strecke.js, nur für einen Moment ohne Bild): Lage im Fluss ohne Kleben */
.leistungen.is-stapel.is-messen .leistung{position:relative!important;top:auto!important}
/* Ganz verdeckt: nichts darin bleibt antippbar (der Fokus holt die Kachel nach vorn, strecke.js) */
.leistung.is-verdeckt .leistung__kachel{pointer-events:none}
.leistung__oben{margin-bottom:12px}
}
/* ---------- Einstieg der Kacheln (strecke.js) ----------
strecke.js setzt .is-anim am Abschnitt und .is-in an jeder Kachel, sobald sie ins Bild kommt,
dazu --kd (70 ms Versatz je Kachel, die gleichzeitig hereinkommen).
Ab 900 px fächert die Kachel auf (von unten, leicht nach hinten gekippt, stellt sich auf).
Darin: Ring zeichnet sich offen und schliesst sich, Etikett öffnet sich von links, Titel steigt Wort
für Wort aus der Maske, Lage und «Umfang» folgen, der Schlüsselplan blendet ein (sein Punkt pulst,
strecke.js). Über die Oberkante läuft einmal die Lichtkante. Ohne JavaScript: Grundzustand, alles da. */
.leistungen.is-anim .leistung .ring__arc{transition:none}
.leistungen.is-anim .leistung.is-in .marker{--gap:0}
/* Titelwörter (strecke.js zerlegt den Titel nur bei Bewegung) */
.leistung .wort{
display:inline-block; vertical-align:top;
padding-bottom:.16em; margin-bottom:-.16em;
clip-path:inset(-.3em -.2em 0 -.2em);
}
.leistung .wort__i{display:inline-block}
@media (prefers-reduced-motion:no-preference){
/* Wartezustand vor dem Einstieg */
.leistungen.is-anim .leistung:not(.is-in) .ring__arc{stroke-dasharray:0 100}
.leistungen.is-anim .leistung:not(.is-in) :is(.marker__nr,.leistung__lage,.leistung__umfang,.leistung__weiter,.leistung__kp){opacity:0}
.leistungen.is-anim .leistung:not(.is-in) .etikett__text{clip-path:inset(0 100% 0 0)}
.leistungen.is-anim .leistung:not(.is-in) .wort__i{transform:translate3d(0,115%,0)}
.leistungen.is-anim .leistungen__gruppentitel:not(.is-in){opacity:0}
/* Einstieg (Prüfrunde 08.10.2026: kürzer und unabhängig vom Plan; Titel ab 100 ms, Text ab 220 ms) */
.leistungen__gruppentitel.is-in{animation:lst-steigt-k 480ms var(--ease-out) var(--kd,0ms) backwards}
.leistung.is-in .ring__arc{animation:lst-ring 1400ms linear calc(var(--kd,0ms) + 80ms) backwards}
.leistung.is-in .marker__nr{animation:lst-blende 320ms var(--ease-out) calc(var(--kd,0ms) + 160ms) backwards}
.leistung.is-in .etikett__text{animation:lst-etikett 460ms var(--ease-out) calc(var(--kd,0ms) + 120ms) backwards}
.leistung.is-in .leistung__kp{animation:lst-kp 520ms var(--ease-out) calc(var(--kd,0ms) + 120ms) backwards}
.leistung.is-in .wort__i{animation:lst-wort 640ms var(--ease-out) calc(var(--kd,0ms) + 100ms + var(--w,0) * 45ms) backwards}
.leistung.is-in .leistung__lage{animation:lst-steigt 560ms var(--ease-out) calc(var(--kd,0ms) + 220ms) backwards}
.leistung.is-in .leistung__umfang{animation:lst-steigt-k 480ms var(--ease-out) calc(var(--kd,0ms) + 320ms) backwards}
.leistung.is-in .leistung__weiter{animation:lst-steigt-k 480ms var(--ease-out) calc(var(--kd,0ms) + 380ms) backwards}
/* Ab 900 px: die Kachel selbst fächert auf (translateY 24 px und rotateX 5° auf null, einmal beim Einstieg) */
@media (min-width:900px){
.leistungen.is-anim .leistung:not(.is-in) .leistung__kachel{opacity:0;transform:perspective(900px) translate3d(0,24px,0) rotateX(5deg)}
.leistung.is-in .leistung__kachel{animation:kachel-ein 600ms var(--ease-out) var(--kd,0ms) backwards}
}
}
/* Nach dem Einstieg (strecke.js setzt .is-fertig): Einstiegs-Animationen ab. Sonst startet ein Wechsel
über eine Breitengrenze (Tablet drehen, 900 px) sie neu und alle Kacheln blenden noch einmal ein. */
.leistungen.is-anim .leistung.is-fertig :is(.leistung__kachel,.ring__arc,.marker__nr,.etikett__text,.wort__i,.leistung__lage,.leistung__weiter,.leistung__umfang,.leistung__kp),
.leistungen.is-anim .leistungen__gruppentitel.is-fertig{animation:none}
/* Tastaturfokus im Block (strecke.js setzt .is-sofort): sofort Endzustand, Link und Fokusring nie unsichtbar */
.leistungen.is-anim .is-sofort,.leistungen.is-anim .is-sofort *,
.leistungen.is-anim .is-sofort::before,.leistungen.is-anim .is-sofort::after{animation:none!important}
@keyframes kachel-ein{from{opacity:0;transform:perspective(900px) translate3d(0,24px,0) rotateX(5deg)}}
@keyframes lst-ring{
0%{stroke-dasharray:0 100;animation-timing-function:var(--ease-draw)}
42%{stroke-dasharray:86 14}
66%{stroke-dasharray:86 14;animation-timing-function:var(--ease-draw)}
100%{stroke-dasharray:100 0}
}
@keyframes lst-blende{from{opacity:0}}
@keyframes lst-etikett{from{clip-path:inset(0 100% 0 0)}}
@keyframes lst-kp{from{opacity:0;transform:scale(.94)}}
@keyframes lst-wort{from{transform:translate3d(0,115%,0)}}
@keyframes lst-steigt{from{opacity:0;transform:translate3d(0,10px,0)}}
@keyframes lst-steigt-k{from{opacity:0;transform:translate3d(0,8px,0)}}
/* ---------- Schrift-Runde 08.10.2026 (Vorschlag medien/review/typo/fremd-vorschlag.css) ----------
Gruppentitel, «Umfang» und Notizen stehen oben schon im Etikett-Stil (--f-label). Hier nur, was fehlte:
Punkte etwas luftiger, «Umfang» am Handy in der kleinen Etikettstufe, Tipp als Nebenzeile (keine Mono). */
.leistung__punkte li{line-height:1.6}
.leistung__tipp{font-family:var(--f-body);font-weight:500;font-size:var(--t-meta);letter-spacing:.005em}
@media (max-width:719px){
.leistung__umfang-kopf{font-size:var(--t-label-klein)}
}
/* ===== 35-klima.css ===== */
/* =========================================================================
K-ProTech · 35-klima.css · Abschnitt Klimaanlagen «Ein Zimmer kühlt ab» (Neubau 08.10.2026)
Dunkle Fläche. Kopf (H2, darunter der Lead) → klebende Bühne mit dem Film
(Raumtemperatur und Kapitel-Etikett auf dem Bild, lokale Abdunklung) und der Fernbedienung →
vier Stationen als kompakte Zeile → Notizen links, Tipp und Knopf rechts.
Modus am Abschnitt (data-modus, setzt der Schalter in klima.html, klima.js live):
video Computer: Scrollweg 200vh, Bühne klebt, Video folgt dem Scroll
seq Handy und Tablet hoch: Scrollweg 175svh, Bildsequenz im Canvas
static oder ohne data-modus (ohne JavaScript): keine klebende Bühne, Endbild kühl, 22 Grad
Breites Gerüst ab 1000 px (Film links, Fernbedienung rechts daneben), darunter Film über die
ganze Breite und die Fernbedienung quer darunter.
Bewegung nur über transform, opacity, stroke-dash*. Kurven aus den Tokens.
========================================================================= */
.klima{
--unten:0px; /* Handy-Leiste (unter 861 px) */
--fern-w:176px; /* Fernbedienung hoch (breites Gerüst) */
--fern-gap:clamp(20px,2.4vw,32px);
--bed-h:154px; /* Fernbedienung quer + Titel (schmales Gerüst) */
--fokus:55% 40%; /* Bildausschnitt Computer-Film */
--kl-schatten:
0 1px 2px color-mix(in srgb,var(--deep-2) 80%,transparent),
0 4px 22px color-mix(in srgb,var(--deep-2) 55%,transparent);
}
@media (max-width:860px){ .klima{--unten:calc(56px + env(safe-area-inset-bottom,0px))} }
/* Handy-Sequenz (4:5-Ausschnitt): gleiche Bedingungen wie im Markup und der Modus «seq» */
@media (max-width:720px),(orientation:portrait) and (max-width:1024px),(orientation:portrait) and (pointer:coarse){
.klima{--fokus:50% 38%}
}
/* ---------- Kopf: Titel, darunter der Lead (beides links, Prüfer-Runde 08.10.: kein geteilter Kopf mehr) ---------- */
.klima__kopf{display:grid;justify-items:start;row-gap:var(--gap-titel);margin-bottom:clamp(28px,4vw,56px)}
/* klebende Bühne: ihr eigenes Polster (Kopfhöhe) trennt schon genug */
.klima[data-modus="video"] .klima__kopf,.klima[data-modus="seq"] .klima__kopf{margin-bottom:0}
.klima__kopf h2{max-width:12em}
.klima__kopf .lead{max-width:30em}
/* ---------- Strecke und Bühne ---------- */
.klima__strecke{position:relative}
/* Scrollweg (Prüfer-Runde 08.10.: kürzer, die Seite war zu lang): 22 Grad nach 0.8 Bildschirmen Klebeweg */
.klima[data-modus="video"] .klima__strecke{height:200vh}
.klima[data-modus="seq"] .klima__strecke{height:175vh;height:175svh}
.klima[data-modus="video"] .klima__buehne,
.klima[data-modus="seq"] .klima__buehne{
position:sticky; top:0;
height:100vh; height:100svh; min-height:520px;
display:flex; flex-direction:column; justify-content:center;
padding:calc(var(--header-h) + 14px) 0 calc(18px + var(--unten));
}
.klima__szene{position:relative}
@media (min-width:1000px){
.klima__szene{
display:grid; grid-template-columns:minmax(0,1fr) var(--fern-w);
column-gap:var(--fern-gap); align-items:end;
}
}
/* ---------- Bildfeld ---------- */
.klima__rahmen{
position:relative; overflow:hidden; isolation:isolate;
background:var(--deep-2);
aspect-ratio:1.45;
max-height:calc(100svh - var(--header-h) - 36px - var(--unten));
}
@media (min-width:1000px){
/* Fase oben rechts wie die Tafeln. Volle Spaltenbreite: begrenzt die Höhe, wird das Bild breiter (nicht schmaler) */
.klima__rahmen{width:100%;justify-self:stretch;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
}
@media (max-width:999px){
/* über die ganze Breite, Höhe = was neben Kopf, Fernbedienung und Leiste bleibt */
.klima__rahmen{
margin-inline:calc(-1 * var(--gutter));
aspect-ratio:auto;
height:clamp(220px,calc(100svh - var(--header-h) - var(--unten) - var(--bed-h) - 40px),62.5vw);
max-height:none;
}
}
@media (max-width:720px),(orientation:portrait) and (max-width:1024px),(orientation:portrait) and (pointer:coarse){
.klima__rahmen{height:clamp(220px,calc(100svh - var(--header-h) - var(--unten) - var(--bed-h) - 40px),125vw)}
}
@media (max-width:999px){
/* statisch (ohne klebende Bühne): die Höhe hängt nicht am Bildschirm */
.klima:not([data-modus="video"]):not([data-modus="seq"]) .klima__rahmen{height:auto;aspect-ratio:1.45}
}
@media (max-width:720px),(orientation:portrait) and (max-width:1024px),(orientation:portrait) and (pointer:coarse){
.klima:not([data-modus="video"]):not([data-modus="seq"]) .klima__rahmen{aspect-ratio:4 / 4.4}
}
.klima__bild,.klima__still,.klima__film,.klima__seq,.klima__luft,.klima__abdunklung{position:absolute;inset:0;width:100%;height:100%}
.klima__still img,.klima__film{width:100%;height:100%;object-fit:cover;object-position:var(--fokus)}
.klima__still img{display:block}
/* Grundzustand (ohne JS, static): kühles Endbild über dem Startbild */
.klima__still--ende{opacity:1}
.klima[data-modus="video"] .klima__still--ende,
.klima[data-modus="seq"] .klima__still--ende{opacity:0}
.klima[data-modus="static"] .klima__still--ende{transition:opacity 700ms var(--ease-in-out)}
.klima__film,.klima__seq{opacity:0}
.klima:not([data-modus="video"]) .klima__film{display:none}
.klima:not([data-modus="seq"]) .klima__seq{display:none}
.klima.video-bereit .klima__film,.klima.seq-bereit .klima__seq{opacity:1}
.klima__film{transition:opacity 300ms var(--ease-out)}
.klima__luft{pointer-events:none}
.klima:not([data-modus="video"]):not([data-modus="seq"]) .klima__luft{display:none}
/* Lokale Abdunklung: unten links hinter der Zahl, oben links hinter dem Kapitel-Etikett */
.klima__abdunklung{
pointer-events:none;
background:
radial-gradient(ellipse 52% 64% at 0% 100%,
color-mix(in srgb,var(--deep-2) 78%,transparent) 0%,
color-mix(in srgb,var(--deep-2) 46%,transparent) 44%,
transparent 80%),
radial-gradient(ellipse 38% 24% at 0% 0%,
color-mix(in srgb,var(--deep-2) 62%,transparent) 0%,
transparent 82%);
}
/* Handy und Tablet: das Bild ist hoch, das helle Bettlaken und die beige Wand liegen hinter der Zahl.
Die Abdunklung misst in em der Zahl (font-size wie .klima__zahl), wächst also mit dem HUD und deckt
«Raumtemperatur» auch bei 320 px und 768 px ganz ab (Prüfer-Runde 08.10.: Etikett mindestens 4.5:1). */
@media (max-width:999px),(orientation:portrait) and (max-width:1024px),(orientation:portrait) and (pointer:coarse){
.klima__abdunklung{
font-size:clamp(4.5rem,2.6rem + 7vw,11rem);
background:
radial-gradient(ellipse 5.4em 3.9em at 0 100%,
color-mix(in srgb,var(--deep-2) 86%,transparent) 0%,
color-mix(in srgb,var(--deep-2) 72%,transparent) 50%,
color-mix(in srgb,var(--deep-2) 34%,transparent) 80%,
transparent 100%),
radial-gradient(ellipse 80% 22% at 0% 0%,
color-mix(in srgb,var(--deep-2) 60%,transparent) 0%,
transparent 84%);
}
}
/* ---------- Raumtemperatur auf dem Bild ---------- */
.klima__hud{
position:absolute; z-index:2;
left:clamp(18px,2.6vw,36px); bottom:clamp(14px,2.2vw,30px);
margin:0; display:grid; justify-items:start; row-gap:6px;
color:var(--on-deep); text-shadow:var(--kl-schatten); pointer-events:none;
}
.klima__hud-label{
font-family:var(--f-label); font-stretch:var(--label-wdth); font-weight:var(--label-wght);
font-size:var(--t-label); line-height:1.3; letter-spacing:var(--label-track); text-transform:uppercase;
}
.klima__zahl{
display:flex; align-items:flex-start;
font-family:var(--f-display); font-stretch:112%; font-weight:700;
font-size:clamp(4.5rem,2.6rem + 7vw,11rem); line-height:.86; letter-spacing:-.045em;
font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1;
}
.klima__ziffern{display:inline-grid;clip-path:inset(0 -.2em 0 -.2em)}
.klima__wert{grid-area:1 / 1;display:block}
.klima__grad{font-size:.46em;font-weight:600;margin:.06em 0 0 .04em;letter-spacing:0}
/* ---------- Kapitel-Etikett oben links: wechselt mit dem Fortschritt ---------- */
.klima__kapitel{
position:absolute; z-index:2;
left:clamp(18px,2.6vw,36px); top:clamp(16px,2.2vw,28px);
display:flex; align-items:center; gap:14px;
color:var(--on-deep); text-shadow:var(--kl-schatten); pointer-events:none;
opacity:0; transform:translate3d(0,-6px,0);
transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out);
}
.klima[data-kapitel="1"] .klima__kapitel,
.klima[data-kapitel="2"] .klima__kapitel,
.klima[data-kapitel="3"] .klima__kapitel{opacity:1;transform:none}
.klima__striche{display:flex;gap:4px}
.klima__striche i{display:block;width:16px;height:2px;background:currentColor;opacity:.32;transition:opacity 320ms var(--ease-out)}
.klima[data-kapitel="1"] .klima__striche i:nth-child(-n+1),
.klima[data-kapitel="2"] .klima__striche i:nth-child(-n+2),
.klima[data-kapitel="3"] .klima__striche i{opacity:1}
.klima__kapitel-feld{display:grid}
.klima__kap{
grid-area:1 / 1; white-space:nowrap;
font-family:var(--f-label); font-stretch:var(--label-wdth); font-weight:var(--label-wght);
font-size:var(--t-label); line-height:1.3; letter-spacing:var(--label-track); text-transform:uppercase;
font-variant-numeric:tabular-nums;
opacity:0; transform:translate3d(0,9px,0);
transition:opacity 320ms var(--ease-out),transform 320ms var(--ease-out);
}
.klima__kap b{font-weight:var(--label-wght);margin-right:.9em;opacity:.62}
/* aktives Kapitel steht, frühere sind nach oben weg, spätere warten unten */
.klima[data-kapitel="1"] .klima__kap[data-kap="1"],
.klima[data-kapitel="2"] .klima__kap[data-kap="2"],
.klima[data-kapitel="3"] .klima__kap[data-kap="3"]{opacity:1;transform:none}
.klima[data-kapitel="2"] .klima__kap[data-kap="1"],
.klima[data-kapitel="3"] .klima__kap[data-kap="1"],
.klima[data-kapitel="3"] .klima__kap[data-kap="2"]{transform:translate3d(0,-9px,0)}
/* ohne JavaScript: Endzustand «Ziel erreicht» */
html:not(.js) .klima__kapitel{opacity:1;transform:none}
html:not(.js) .klima__kap[data-kap="2"]{opacity:1;transform:none}
html:not(.js) .klima__striche i:nth-child(-n+2){opacity:1}
/* ---------- Bedienung: Titel und Fernbedienung ---------- */
.klima__bedienung{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
.klima__fern-titel{
margin:0; white-space:nowrap;
font-family:var(--f-label); font-stretch:var(--label-wdth); font-weight:var(--label-wght);
font-size:var(--t-label-klein); line-height:1.3; letter-spacing:var(--label-track); text-transform:uppercase;
color:var(--fg-2);
}
@media (min-width:1000px){ .klima__fern-titel{align-self:center} }
/* ---------- Computer: Programmleiste oben in der Spalte neben dem Film (Prüfer-Runde 08.10.: die Spalte über der
Fernbedienung war leer). Oben der Stand (01 bis 03), unten die Bedienung. Ersetzt dort das Etikett auf dem Bild. ---------- */
.klima__programm{display:none}
@media (min-width:1000px){
.klima__bedienung{align-self:stretch}
.klima__fern-titel{margin-top:auto} /* Titel bleibt bei der Fernbedienung, die Leiste oben */
.klima__kapitel{display:none}
.klima__programm{display:grid;row-gap:4px;width:100%;margin:0;padding:0;list-style:none}
.klima__programm li{
display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:10px; align-items:baseline;
padding:8px 0 8px 12px; border-left:2px solid currentColor;
/* Etikett-Stil, eine Spur schmaler (wie die engen Plankopf-Felder), damit «Schnell kühlen» in 176 px auf eine Zeile passt */
font-family:var(--f-label); font-stretch:112%; font-weight:var(--label-wght);
font-size:var(--t-label-klein); line-height:1.35; letter-spacing:.08em; text-transform:uppercase;
font-variant-numeric:tabular-nums;
color:var(--on-deep); opacity:.34;
transition:opacity 320ms var(--ease-out);
}
.klima__programm b{font-weight:inherit;opacity:.62}
/* aktiv voll, erledigt halb, kommend blass */
.klima[data-kapitel="1"] .klima__programm [data-kap="1"],
.klima[data-kapitel="2"] .klima__programm [data-kap="2"],
.klima[data-kapitel="3"] .klima__programm [data-kap="3"]{opacity:1}
.klima[data-kapitel="2"] .klima__programm [data-kap="1"],
.klima[data-kapitel="3"] .klima__programm [data-kap="1"],
.klima[data-kapitel="3"] .klima__programm [data-kap="2"]{opacity:.6}
/* ohne JavaScript: Endzustand «Ziel erreicht» */
html:not(.js) .klima__programm [data-kap="1"]{opacity:.6}
html:not(.js) .klima__programm [data-kap="2"]{opacity:1}
}
@media (min-width:1000px) and (prefers-reduced-motion:reduce){ .klima__programm li{transition:opacity 200ms var(--ease-out)} }
@media (max-width:999px){
.klima__bedienung{margin-top:12px;gap:8px}
}
/* ---------- Fernbedienung (wie ein echtes Gerät: weisses Gehäuse, dunkles Display, Gummitasten) ----------
Gehäuse in --sheet bis --paper-2 mit Kantenlicht, Schlagschatten nur für die Tiefe auf der dunklen Fläche.
Hoch im breiten Gerüst, quer darunter auf schmalen Bildschirmen. */
.fern{
--focus:var(--accent-ink);
position:relative; width:var(--fern-w); max-width:100%;
padding:16px 16px 26px;
border-radius:36px 36px 46px 46px / 28px 28px 44px 44px;
background:linear-gradient(162deg,var(--sheet) 0%,var(--paper) 50%,var(--paper-2) 100%);
box-shadow:
inset 0 1px 0 var(--sheet),
inset 0 -3px 5px color-mix(in srgb,var(--ink) 12%,transparent),
inset 2px 0 3px color-mix(in srgb,var(--sheet) 80%,transparent),
0 1px 0 rgba(11,58,111,.08),
0 34px 60px -20px color-mix(in srgb,var(--deep-2) 92%,transparent),
0 12px 22px -10px color-mix(in srgb,var(--deep-2) 80%,transparent);
color:var(--ink); font-weight:400; text-shadow:none;
}
/* Gehäusefuge */
.fern::before{
content:""; position:absolute; inset:5px; border-radius:31px 31px 41px 41px / 24px 24px 40px 40px;
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rule) 55%,transparent);
pointer-events:none;
}
.fern__ir{
display:block; width:46px; height:8px; margin:0 auto 14px; border-radius:4px;
background:var(--deep-2);
box-shadow:inset 0 1px 1px color-mix(in srgb,var(--on-deep) 22%,transparent),0 1px 0 var(--sheet);
}
/* Display */
.fern__display{
position:relative; display:grid; row-gap:3px;
padding:10px 12px 9px; border-radius:10px;
background:var(--deep-2); color:var(--on-deep);
box-shadow:0 0 0 3px var(--paper-2),0 1px 0 3px var(--sheet),inset 0 0 0 1px var(--rule-deep);
overflow:hidden;
}
/* Glas: ein schräger Lichtstreif */
.fern__display::after{
content:""; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(116deg,transparent 0 58%,color-mix(in srgb,var(--on-deep) 4%,transparent) 58% 70%,transparent 70%);
}
.fern__zeile{
display:flex; justify-content:space-between; align-items:center; min-height:12px;
font-family:var(--f-label); font-stretch:125%; font-weight:600;
font-size:.5625rem; line-height:1; letter-spacing:.12em; text-transform:uppercase; color:var(--on-deep-2);
}
.fern__modus{display:inline-flex;align-items:center;gap:5px;color:var(--on-deep)}
.fern__flocke{width:11px;height:11px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fern__luefter{display:flex;align-items:flex-end;gap:2px;height:9px}
.fern__luefter i{display:block;width:3px;background:currentColor}
.fern__luefter i:nth-child(1){height:3px}
.fern__luefter i:nth-child(2){height:6px}
.fern__luefter i:nth-child(3){height:9px}
.fern__wert{
display:grid; grid-template-columns:auto auto; justify-content:end; align-items:start;
font-family:var(--f-display); font-stretch:100%; font-weight:600;
font-size:2.75rem; line-height:.95; letter-spacing:-.02em;
font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1;
}
.fern__soll{grid-area:1 / 1;justify-self:end}
.fern__einheit{grid-area:1 / 2;margin:.2em 0 0 .18em;font-size:.32em;font-weight:600;letter-spacing:.02em;color:var(--on-deep-2)}
.fern__zeile--unten{justify-content:flex-start}
/* Aus: das Display zeigt die Raumtemperatur (31 °C, gesetzt in klima.js), Modus, Lüfter und «Soll» sind aus.
Kein LCD-Starttest mit «88» (Kristijan 08.10.2026): die Zahl stimmt von Anfang an. */
.fern[data-an="0"] .fern__modus,.fern[data-an="0"] .fern__luefter,.fern[data-an="0"] .fern__soll-label{opacity:0}
/* Kurzes Aufblinken der Anzeige (Taste Modus, wenn die Anlage schon kühlt) */
.fern__display.is-blink .fern__modus{animation:fern-blink 520ms steps(2,jump-none) 1}
@keyframes fern-blink{0%,100%{opacity:1}50%{opacity:.15}}
/* Lüfter läuft, solange die Anlage an ist und die Bühne im Bild */
@media (prefers-reduced-motion:no-preference){
.klima.is-sicht .fern[data-an="1"] .fern__luefter i{animation:fern-luefter 1.2s steps(1,end) infinite}
.klima.is-sicht .fern[data-an="1"] .fern__luefter i:nth-child(2){animation-delay:.4s}
.klima.is-sicht .fern[data-an="1"] .fern__luefter i:nth-child(3){animation-delay:.8s}
}
@keyframes fern-luefter{0%{opacity:1}33%{opacity:.35}66%{opacity:.7}}
/* Tasten */
.fern__tasten{
position:relative; margin-top:18px;
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px 10px;
grid-template-areas:"ein ein" "minus plus" "modus modus";
justify-items:stretch; align-items:center;
}
.fern__taste{
position:relative; display:inline-flex; align-items:center; justify-content:center; gap:7px;
min-width:44px; min-height:44px; margin:0; padding:0; border:0;
border-radius:13px;
background:linear-gradient(180deg,var(--sheet) 0%,var(--paper) 60%,var(--paper-2) 100%);
box-shadow:
inset 0 1px 0 var(--sheet),
inset 0 -1.5px 0 color-mix(in srgb,var(--ink) 13%,transparent),
0 0 0 1px color-mix(in srgb,var(--rule-strong) 30%,transparent);
color:var(--ink); cursor:pointer;
-webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
transition:transform 120ms var(--ease-out);
}
/* Tiefe der Taste: eigener Schatten, beim Drücken wird er flach (nur Deckkraft) */
.fern__taste::after{
content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
box-shadow:0 2px 0 color-mix(in srgb,var(--ink) 16%,transparent),0 4px 8px -2px color-mix(in srgb,var(--ink) 26%,transparent);
transition:opacity 120ms var(--ease-out);
}
.fern__taste:active,.fern__taste.is-druck{transform:translate3d(0,1.5px,0) scale(.97)}
.fern__taste:active::after,.fern__taste.is-druck::after{opacity:.2}
.fern__taste[disabled]{cursor:default}
.fern__taste svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fern__taste:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
.fern__taste:not([disabled]):hover{transform:translate3d(0,-1px,0)}
.fern__taste:not([disabled]):active{transform:translate3d(0,1.5px,0) scale(.97)}
}
.fern__taste--ein{
grid-area:ein; justify-self:center;
width:58px; height:58px; border-radius:50%;
background:var(--accent-ink); color:var(--sheet);
box-shadow:inset 0 1px 0 color-mix(in srgb,var(--sheet) 30%,transparent),inset 0 -2px 0 color-mix(in srgb,var(--deep-2) 30%,transparent);
}
.fern__taste--ein svg{width:22px;height:22px;stroke-width:2.2}
/* Einladung: ein dünner Ring läuft vom Ein-Knopf weg, solange die Anlage aus ist und niemand gedrückt hat */
.fern__taste--ein::before{
content:""; position:absolute; inset:-5px; border-radius:50%; pointer-events:none;
box-shadow:0 0 0 2px var(--accent-ink); opacity:0;
}
@media (prefers-reduced-motion:no-preference){
.klima.is-lockt .fern__taste--ein::before{animation:fern-lockt 2.6s var(--ease-out) 4}
}
@keyframes fern-lockt{0%{opacity:1;transform:scale(.96)}75%,100%{opacity:0;transform:scale(1.4)}}
.fern__led{
grid-area:ein; justify-self:end; align-self:center; margin-right:6px;
width:7px; height:7px; border-radius:50%;
background:var(--rule-strong); box-shadow:inset 0 1px 1px color-mix(in srgb,var(--deep-2) 30%,transparent);
}
.fern[data-an="1"] .fern__led{background:var(--accent)}
.fern__taste--minus{grid-area:minus;height:46px;border-radius:14px 8px 8px 14px}
.fern__taste--plus{grid-area:plus;height:46px;border-radius:8px 14px 14px 8px}
.fern__taste--modus{grid-area:modus;height:44px;border-radius:22px}
.fern__taste--modus svg{width:17px;height:17px;stroke-width:1.8}
.fern__tasten-text{
font-family:var(--f-label); font-stretch:125%; font-weight:600;
font-size:.625rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2);
}
/* Fernbedienung quer (schmales Gerüst): IR-Fenster links, Display, Tasten 2 x 2 */
@media (max-width:999px){
.fern{
width:100%; max-width:420px;
display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:stretch; column-gap:12px;
padding:12px 14px 12px 12px;
border-radius:26px 34px 34px 26px / 26px 30px 30px 26px;
}
.fern::before{border-radius:21px 29px 29px 21px / 21px 25px 25px 21px}
.fern__ir{width:8px;height:40px;margin:0;align-self:center}
.fern__display{padding:10px 12px;align-content:space-between}
.fern__wert{font-size:2.5rem}
.fern__tasten{
position:static; margin:0; grid-template-columns:48px 48px; gap:10px;
grid-template-areas:"ein modus" "minus plus";
}
.fern__taste{min-height:48px}
.fern__taste--ein{width:48px;height:48px}
.fern__taste--minus,.fern__taste--plus,.fern__taste--modus{width:48px;height:48px;border-radius:12px}
.fern__tasten-text{display:none}
/* Sende-LED über dem IR-Fenster (Gehäuse links oben) */
.fern__led{position:absolute;grid-area:auto;left:13px;top:16px;margin:0;width:6px;height:6px}
}
@media (max-width:359px){
.fern{grid-template-columns:minmax(0,1fr) auto;column-gap:9px;padding:10px 11px 10px 10px}
.fern__ir{display:none}
.fern__luefter{display:none}
.fern__display{padding:9px 10px}
.fern__wert{font-size:2.125rem}
.fern__tasten{grid-template-columns:46px 46px;gap:8px}
.fern__taste,.fern__taste--ein,.fern__taste--minus,.fern__taste--plus,.fern__taste--modus{width:46px;height:46px;min-height:46px}
.fern__led{display:none} /* zu eng: das Display zeigt Ein und Aus */
}
/* Flache Bildschirme (Computer): Fernbedienung etwas kleiner, damit sie neben dem Film Platz hat */
@media (min-width:1000px) and (max-height:700px){
.klima{--fern-w:160px}
.fern{padding:12px 13px 18px}
.fern__ir{margin-bottom:10px}
.fern__wert{font-size:2.375rem}
.fern__tasten{margin-top:12px;gap:8px 8px}
.fern__taste--ein{width:50px;height:50px}
.fern__taste--minus,.fern__taste--plus{height:44px}
}
/* ---------- Danach: vier Stationen, Notizen, Knopf ---------- */
.klima__nach{margin-top:var(--gap-kopf)}
.klima[data-modus="video"] .klima__nach,.klima[data-modus="seq"] .klima__nach{margin-top:clamp(24px,3vw,40px)}
.klima__ablauf-titel{
margin:0 0 22px;
font-family:var(--f-label); font-stretch:var(--label-wdth); font-weight:var(--label-wght);
font-size:var(--t-label); line-height:1.3; letter-spacing:var(--label-track); text-transform:uppercase;
color:var(--fg-2);
}
.klima__stationen{
--st-gap:clamp(20px,2.4vw,32px);
margin:0; padding:0; list-style:none;
display:grid; row-gap:26px;
}
.klima__station{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:16px;align-items:start;align-content:start}
.klima__station .marker{color:var(--on-deep);background:var(--deep);border-radius:50%}
.klima__station h3{font-size:var(--t-h3-klein);margin:0 0 6px;padding-top:9px}
.klima__station p{font-size:var(--t-klein);line-height:1.55;color:var(--fg-2);max-width:24em}
/* Faser von Ring zu Ring (schmal: senkrecht) */
.klima__station:not(:last-child)::after{
content:""; position:absolute; pointer-events:none;
left:19.25px; top:46px; width:1.5px; height:calc(100% - 52px + 26px);
background:var(--fiber); transform-origin:50% 0;
}
@media (min-width:900px){
.klima__stationen{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--st-gap)}
.klima__station{grid-template-columns:minmax(0,1fr);row-gap:18px}
.klima__station h3{padding-top:0}
.klima__station:not(:last-child)::after{
left:48px; top:19.25px; height:1.5px; width:calc(100% + var(--st-gap) - 56px);
transform-origin:0 50%;
}
}
/* Einklicken nacheinander (nur mit klima.js und ohne Reduced Motion) */
@media (prefers-reduced-motion:no-preference){
.klima__stationen.is-wartet .klima__station:not(.is-in) .marker{--gap:14;opacity:.42}
.klima__stationen.is-wartet .klima__station:not(.is-in) .klima__station-text{opacity:0;transform:translate3d(0,10px,0)}
.klima__stationen.is-wartet .klima__station:not(.is-in)::after{transform:scaleY(0)}
.klima__station .marker{transition:opacity 260ms var(--ease-out)}
.klima__station .ring__arc{transition:stroke-dasharray 380ms var(--ease-draw)}
.klima__station-text{transition:opacity 460ms var(--ease-out) 90ms,transform 460ms var(--ease-out) 90ms}
.klima__station::after{transition:transform 380ms var(--ease-draw) 240ms}
.klima__station.is-in .marker{animation:klima-klick 420ms var(--ease-out) 1}
}
@media (prefers-reduced-motion:no-preference) and (min-width:900px){
.klima__stationen.is-wartet .klima__station:not(.is-in)::after{transform:scaleX(0)}
}
@keyframes klima-klick{0%{transform:scale(.86)}55%{transform:scale(1.07)}100%{transform:scale(1)}}
.klima__raster{margin-top:clamp(56px,7vw,104px);display:grid;row-gap:40px;align-items:start}
@media (min-width:1000px){
.klima__raster{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(32px,5vw,72px)}
}
.klima__notizen{margin:0;border-top:1px solid var(--line)}
.klima__notizen > div{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.klima__notizen dt,.klima__tipp-label{
font-family:var(--f-label); font-stretch:var(--label-wdth); font-weight:var(--label-wght);
font-size:var(--t-label); line-height:1.45; letter-spacing:var(--label-track); text-transform:uppercase;
color:var(--fg-2);
}
.klima__notizen dt{padding-top:.42em}
.klima__notizen dd{margin:0;color:var(--fg);max-width:var(--mass)}
@media (max-width:420px){
.klima__notizen > div{grid-template-columns:1fr;gap:4px}
}
.klima__aktion{display:grid;row-gap:26px;align-content:start}
@media (min-width:1000px){ .klima__aktion{border-top:1px solid var(--line);padding-top:16px} }
.klima__tipp{font-size:var(--t-klein);line-height:1.55;color:var(--fg-2);max-width:26em}
.klima__tipp-label{display:block;margin-bottom:6px}
.klima__knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin:0}
.klima__mehr{display:inline-flex;align-items:center;min-height:44px;font-weight:500}
/* ---------- Reduced Motion: Endzustand, nur Überblendungen ---------- */
@media (prefers-reduced-motion:reduce){
.klima__kapitel,.klima__kap,.klima__striche i,.klima__film{transition:opacity 200ms var(--ease-out)}
.klima__kapitel,.klima__kap{transform:none!important}
.fern__taste,.fern__taste::after{transition:none}
.fern__taste:active,.fern__taste.is-druck{transform:none}
.fern__display.is-blink .fern__modus{animation:none}
}
/* ===================== Typo-Runde 08.10.2026 (Vorschlag medien/review/typo/fremd-vorschlag.css) =====================
Kicker und Etiketten (.klima__hud-label, .klima__kap, .klima__fern-titel, .klima__ablauf-titel, .klima__notizen dt,
.klima__tipp-label) stehen schon im Etikett-Stil mit den Tokens. Hier nur, was noch fehlte:
die grosse Zahl schlanker wie die Titel, die Gerätebeschriftung über die Etikett-Tokens. Keine Mono im Abschnitt. */
.klima__zahl{font-stretch:var(--display-wdth);font-weight:var(--display-wght)}
.fern__zeile,.fern__tasten-text{font-family:var(--f-label);font-stretch:var(--label-wdth);font-weight:var(--label-wght)}
/* ===== 37-klima-seite.css ===== */
/* =========================================================================
K-ProTech · 37-klima-seite.css
Unterseite /klimaanlagen/ (Vorlage dokumente/bau/seiten/klimaanlagen.html).
Gerüste: Kopf (Plankopf-Leiste mit Pfad, H1, Text links, Bild rechts)
→ So läuft es ab (dunkel, vier Ringe an einer Leitung)
→ Was Sie vorher klären (Detailschnitt mit A/B/C, Punkte rechts)
→ Offerte (Blatt links, Text rechts) → Fragen (Titel links klebend)
→ Kontakt (dunkel).
Nur Tokens aus 00-base.css. Alle Klassen beginnen mit «ks-», damit nichts
auf die Startseite wirkt. Fragen nutzen .faq aus 80-fragen.css.
Bewegung: nur data-reveal / data-auftritt (main.js), nur transform, opacity
und stroke-dasharray. Ohne JS und mit Reduced Motion: Endzustand.
========================================================================= */
/* ---------- Kopf ---------- */
.ks-kopf{padding-top:clamp(20px,3.6vw,48px);padding-bottom:clamp(72px,9vw,128px)}
/* Plankopf-Leiste: Pfad links, Einsatzgebiet rechts */
.ks-leiste{
display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
gap:0 24px; border-bottom:1px solid var(--line);
}
.ks-pfad ol{
display:flex; flex-wrap:wrap; align-items:center;
margin:0; padding:0; list-style:none;
font-family:var(--f-mono); font-weight:500; font-size:.8125rem; line-height:1.4; letter-spacing:.04em;
color:var(--fg-2);
}
.ks-pfad li{display:flex;align-items:center;min-height:44px}
.ks-pfad li + li::before{content:"/";content:"/" / "";margin-inline:.75em;color:var(--line-strong)}
.ks-pfad a{
display:inline-flex; align-items:center; min-height:44px;
color:var(--fg); text-decoration:underline; text-decoration-thickness:1px;
text-underline-offset:.22em; text-decoration-color:var(--line-strong);
}
/* Hover ohne Farbübergang (Bewegungsregel: nur transform, opacity, clip-path, stroke-dash*) */
@media (hover:hover) and (pointer:fine){ .ks-pfad a:hover{text-decoration-color:currentColor} }
.ks-pfad [aria-current]{color:var(--fg-2)}
.ks-leiste__ort{padding-block:12px}
/* Titel: zwei Zeilen «Klimaanlagen:» / «Verkauf und Montage» (Umbruch über max-width) */
.ks-titel{
margin-top:clamp(28px,4.4vw,60px);
font-size:clamp(2.125rem,1rem + 4.4vw,4.75rem);
font-stretch:118%; font-weight:780; line-height:1; letter-spacing:-.025em;
max-width:14em;
}
@media (max-width:480px){ .ks-titel{font-stretch:104%} }
.ks-kopf__raster{
display:grid; grid-template-columns:minmax(0,1fr);
row-gap:clamp(36px,5vw,56px);
margin-top:clamp(24px,3.2vw,44px);
}
.ks-kopf__text{display:grid;gap:clamp(24px,3vw,32px);align-content:start}
.ks-aktion{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:479px){
.ks-aktion{flex-direction:column;align-items:stretch}
}
/* Kleines Typenschild unter den Knöpfen */
.ks-fakten{margin:0;border-top:1px solid var(--line)}
.ks-fakten > div{
display:grid; grid-template-columns:7.5rem minmax(0,1fr); gap:12px; align-items:baseline;
padding:10px 0; border-bottom:1px solid var(--line);
}
.ks-fakten dt{
font-family:var(--f-mono); font-weight:500; font-size:.75rem; letter-spacing:.06em;
text-transform:uppercase; color:var(--fg-2);
}
.ks-fakten dd{margin:0;font-size:.9375rem;line-height:1.45;color:var(--fg)}
@media (max-width:359px){ .ks-fakten > div{grid-template-columns:6.25rem minmax(0,1fr)} }
/* Bild: Planblatt mit Fadenkreuzen, Haarlinie um das Bild */
.ks-bild{margin:0;padding:14px}
.ks-bild img{
width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover;
background:var(--paper-2);
outline:1px solid var(--marine); outline-offset:0;
}
@media (min-width:960px){
.ks-kopf__raster{
grid-template-columns:minmax(0,5fr) minmax(0,7fr);
column-gap:clamp(40px,5vw,88px); align-items:start;
}
/* Bild bündig mit dem Text: das Polster der Kreuze ragt nach aussen */
.ks-bild{margin:-14px -14px 0 0}
}
/* ---------- So läuft es ab (dunkel) ---------- */
.ks-ablauf__kopf{display:grid;gap:16px}
.ks-ablauf__satz{color:var(--fg-2);font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.5;max-width:22em}
@media (min-width:900px){
.ks-ablauf__kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.ks-ablauf__satz{max-width:32em;text-align:right;padding-bottom:.35em}
}
.ks-weg{
--ks-spalt:clamp(24px,3vw,48px);
list-style:none; margin:clamp(40px,5.6vw,72px) 0 0; padding:0;
display:grid; grid-template-columns:minmax(0,1fr);
}
.ks-schritt{
position:relative;
display:grid; grid-template-columns:40px minmax(0,1fr);
column-gap:20px; row-gap:8px; align-content:start;
padding-bottom:clamp(32px,5vw,44px);
}
.ks-schritt:last-child{padding-bottom:0}
.ks-schritt .marker{grid-column:1;grid-row:1 / span 2}
.ks-schritt__titel{grid-column:2;font-size:var(--t-h3-klein);padding-top:8px}
.ks-schritt__text{grid-column:2;color:var(--fg-2);max-width:var(--mass)}
/* Leitung vom Ring zum nächsten Ring (Handy senkrecht) */
.ks-schritt::before{
content:""; position:absolute; left:19px; top:44px; bottom:4px; width:2px;
background:var(--fiber); transform-origin:50% 0;
}
.ks-schritt:last-child::before{content:none}
@media (min-width:900px){
.ks-weg{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--ks-spalt)}
.ks-schritt{grid-template-columns:minmax(0,1fr);row-gap:0;padding-bottom:0}
.ks-schritt .marker{grid-row:auto}
.ks-schritt__titel,.ks-schritt__text{grid-column:1}
.ks-schritt__titel{padding-top:24px}
.ks-schritt__text{margin-top:10px}
/* waagrecht: vom Ring bis kurz vor den Ring der nächsten Spalte */
.ks-schritt::before{
left:44px; right:calc(4px - var(--ks-spalt)); top:19px; bottom:auto;
width:auto; height:2px; transform-origin:0 50%;
}
}
/* Einstieg: die Leitung zeichnet sich zum nächsten Ring, am Schluss schliesst sich Ring 04 in Türkis */
@media (prefers-reduced-motion:no-preference){
html.js .ks-schritt[data-reveal]::before{transition:transform 900ms var(--ease-draw) calc(250ms + var(--i,0) * 50ms)}
html.js .ks-schritt[data-reveal]:not(.is-in)::before{transform:scaleY(0)}
html.js .ks-schritt[data-reveal] .marker.is-ok .ring__arc{transition-delay:700ms}
html.js .ks-schritt[data-reveal]:not(.is-in) .marker.is-ok{--gap:14;--ring:currentColor}
}
@media (prefers-reduced-motion:no-preference) and (min-width:900px){
html.js .ks-schritt[data-reveal]:not(.is-in)::before{transform:scaleX(0)}
}
/* ---------- Was Sie vorher klären ---------- */
.ks-vorher__kopf{display:grid;gap:20px}
.ks-vorher__raster{
display:grid; grid-template-columns:minmax(0,1fr);
row-gap:clamp(36px,5vw,56px);
margin-top:clamp(40px,5.6vw,72px);
}
@media (min-width:1024px){
.ks-vorher__raster{
grid-template-columns:minmax(0,7fr) minmax(0,5fr);
column-gap:clamp(40px,5vw,88px); align-items:start;
}
}
/* Detailschnitt auf einem Planblatt */
.ks-detail{margin:0;padding:clamp(6px,1.6vw,18px)}
.ks-detail__blatt{padding:clamp(14px,2vw,20px) clamp(8px,2vw,20px)}
.ks-detail__zeichnung{position:relative}
.ks-detail__svg{width:100%;height:auto;overflow:visible}
.ks-d-muster{stroke:var(--rule-strong);stroke-width:1}
.ks-d-schnitt{fill:url(#ks-schraffur)}
.ks-d-l{fill:none;stroke:var(--marine);stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.ks-d-l2{stroke:var(--rule-strong);stroke-width:1}
.ks-d-l3{stroke-width:1}
.ks-d-hell{fill:var(--sheet)}
.ks-d-led{fill:var(--marine)}
.ks-d-luft{fill:none;stroke:var(--rule-strong);stroke-width:1.2;stroke-dasharray:4 5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ks-d-rohr{fill:none;stroke:var(--fiber);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ks-d-blatt{fill:none;stroke:var(--marine);stroke-width:1.1;vector-effect:non-scaling-stroke}
.ks-d-nabe{fill:var(--marine)}
.ks-d-hinweis{fill:none;stroke:var(--marine);stroke-width:1;vector-effect:non-scaling-stroke}
.ks-d-punkt{fill:var(--marine)}
/* Positionsringe A/B/C (gleiche Form wie die Ring-Marker: Spalt oben rechts) */
.ks-pos,.ks-punkt__ring{
--d:36px;
display:inline-grid; place-items:center;
width:var(--d); height:var(--d); flex:none;
color:var(--marine);
}
.ks-pos{position:absolute;transform:translate(-50%,-50%);background:var(--sheet);border-radius:50%}
.ks-punkt__ring{position:relative}
.ks-pos svg,.ks-punkt__ring svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ks-pos circle,.ks-punkt__ring circle{
fill:none; stroke:currentColor; stroke-width:1.6;
stroke-dasharray:86 14; stroke-dashoffset:-4;
transform:rotate(-90deg); transform-origin:50% 50%;
}
.ks-bst{font-family:var(--f-mono);font-weight:500;font-size:.8125rem;line-height:1}
@media (max-width:599px){
.ks-pos{--d:28px}
.ks-pos .ks-bst{font-size:.6875rem}
}
.ks-detail__seite{
position:absolute;
font-family:var(--f-mono); font-weight:500; font-size:.6875rem; line-height:1;
letter-spacing:.08em; text-transform:uppercase; color:var(--fg-2);
}
.ks-detail__seite--innen{left:6%;top:76%}
.ks-detail__seite--aussen{right:3%;top:86%}
.ks-detail__legende{
margin-top:clamp(10px,1.4vw,14px); padding-top:10px;
border-top:1px solid var(--rule);
font-size:.75rem; color:var(--ink-2);
}
/* Drei Punkte zum Abklären */
.ks-punkte{margin:0;padding:0;list-style:none;border-bottom:1px solid var(--line)}
.ks-punkt{
display:grid; grid-template-columns:36px minmax(0,1fr); column-gap:18px;
padding:20px 0; border-top:1px solid var(--line);
}
.ks-punkt__text h3{font-size:var(--t-h3-klein);padding-top:7px}
.ks-punkt__text p{margin-top:8px;max-width:var(--mass)}
/* ---------- Offerte ---------- */
.ks-offerte__raster{display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(40px,5vw,56px)}
.ks-offerte__text{display:grid;gap:20px;align-content:start}
.ks-offerte__text h2{max-width:12ch}
@media (min-width:960px){
.ks-offerte__raster{
grid-template-columns:minmax(0,6fr) minmax(0,5fr);
column-gap:clamp(48px,6vw,112px); align-items:center;
}
.ks-blatt{grid-column:1;grid-row:1}
.ks-offerte__text{grid-column:2;grid-row:1}
}
/* Offerten-Blatt: Tafel mit Fase, zweites Blatt um 10 px versetzt dahinter */
.ks-blatt{
position:relative; isolation:isolate; max-width:34rem;
margin-inline-end:10px; margin-block-end:10px;
filter:drop-shadow(0 1px 0 rgba(11,58,111,.08));
}
.ks-blatt::before,.ks-blatt::after{
content:""; position:absolute; z-index:-1;
inset:10px -10px -10px 10px;
clip-path:polygon(0 0,calc(100% - var(--fase)) 0,100% var(--fase),100% 100%,0 100%);
}
.ks-blatt::before{background:var(--rule-strong)}
.ks-blatt::after{
inset:11px -9px -9px 11px; background:var(--paper);
clip-path:polygon(0 0,calc(100% - var(--fase) + .6px) 0,100% calc(var(--fase) - .6px),100% 100%,0 100%);
}
.ks-blatt__tafel{--tafel-bg:var(--sheet);--tafel-line:var(--marine);padding:clamp(22px,3.2vw,40px)}
.ks-blatt__kopf{
display:flex; justify-content:space-between; align-items:center; gap:14px;
padding-bottom:12px; border-bottom:1px solid var(--marine);
font-family:var(--f-mono); font-weight:500; font-size:.75rem; line-height:1.4;
letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2);
}
.ks-blatt__titel{margin-top:clamp(22px,2.6vw,30px);max-width:18ch}
.ks-blatt__zeilen{list-style:none;margin:clamp(20px,2.4vw,28px) 0 0;padding:0;border-bottom:1px solid var(--rule)}
.ks-blatt__zeile{
display:flex; align-items:flex-start; gap:16px;
padding-block:13px; border-top:1px solid var(--rule);
line-height:1.45; color:var(--ink);
}
.ks-blatt__fuss{
display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
margin-top:clamp(28px,3.6vw,40px);
}
.ks-stempel{
flex:none; display:inline-block;
padding:10px 16px 9px; padding-inline-start:calc(16px + .22em);
border:1.5px solid var(--marine); outline:1px solid var(--marine); outline-offset:-6px; border-radius:2px;
font-family:var(--f-display); font-stretch:125%; font-weight:760;
font-size:.9375rem; line-height:1.2; letter-spacing:.22em; text-transform:uppercase;
color:var(--marine); opacity:.8;
transform:rotate(-5deg); transform-origin:50% 50%;
margin-block-end:6px; -webkit-user-select:none; user-select:none;
}
.ks-plankopf{
flex:0 1 240px; min-width:0;
display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
border:1px solid var(--marine);
}
.ks-plankopf__feld{
display:block; min-height:40px; padding:5px 8px;
font-family:var(--f-mono); font-weight:500; font-size:.6875rem; line-height:1.3;
letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2);
border-top:1px solid var(--rule-strong);
}
.ks-plankopf__feld + .ks-plankopf__feld{border-inline-start:1px solid var(--rule-strong)}
.ks-plankopf__feld--breit{grid-column:1 / -1;border-top:0;min-height:44px}
.ks-plankopf__feld--breit + .ks-plankopf__feld{border-inline-start:0}
@media (max-width:420px){
.ks-blatt__fuss{flex-direction:column;align-items:stretch;gap:18px}
.ks-stempel{align-self:flex-start}
.ks-plankopf{flex-basis:auto}
}
@media (prefers-reduced-motion:no-preference){
html.js .ks-blatt[data-auftritt]{transition:opacity 650ms var(--ease-out),transform 900ms var(--ease-out)}
html.js .ks-blatt[data-auftritt]:not(.is-in){opacity:0;transform:translate3d(0,40px,0)}
html.js .ks-blatt[data-auftritt] .ks-blatt__zeile{
transition:opacity 500ms var(--ease-out),transform 600ms var(--ease-out);
transition-delay:calc(300ms + var(--i,0) * 90ms);
}
html.js .ks-blatt[data-auftritt]:not(.is-in) .ks-blatt__zeile{opacity:0;transform:translate3d(0,8px,0)}
html.js .ks-blatt[data-auftritt] .ks-stempel{transition:opacity 260ms var(--ease-out) 760ms,transform 380ms var(--ease-out) 760ms}
html.js .ks-blatt[data-auftritt]:not(.is-in) .ks-stempel{opacity:0;transform:rotate(-5deg) scale(1.12)}
}
/* ---------- Fragen ---------- */
.ks-fragen__raster{display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(32px,5vw,48px)}
.ks-fragen__titel{max-width:14ch}
.ks-fragen__liste{border-bottom:1px solid var(--line)}
@media (min-width:1024px){
.ks-fragen__raster{
grid-template-columns:minmax(0,5fr) minmax(0,7fr);
column-gap:clamp(40px,5vw,88px); align-items:start;
}
.ks-fragen__titel{position:sticky;top:calc(var(--header-h) + 40px)}
.ks-fragen__liste{margin-top:6px}
}
/* ---------- Kontakt (dunkel) ---------- */
.ks-kontakt__raster{display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(40px,5vw,56px)}
.ks-kontakt__text{display:grid;gap:clamp(20px,2.4vw,28px);align-content:start}
.ks-kontakt__text .ks-aktion{margin-top:4px}
@media (min-width:960px){
.ks-kontakt__raster{
grid-template-columns:minmax(0,7fr) minmax(0,5fr);
column-gap:clamp(48px,6vw,112px); align-items:end;
}
}
.ks-kontakt__liste{margin:0;border-top:1px solid var(--line)}
.ks-kontakt__liste > div{
display:grid; grid-template-columns:8rem minmax(0,1fr); gap:14px; align-items:baseline;
padding:12px 0; border-bottom:1px solid var(--line);
}
.ks-kontakt__liste dt{
font-family:var(--f-mono); font-weight:500; font-size:.75rem; letter-spacing:.06em;
text-transform:uppercase; color:var(--fg-2);
}
.ks-kontakt__liste dd{margin:0;color:var(--fg);min-width:0;overflow-wrap:anywhere}
.ks-kontakt__liste a{
display:inline-flex; align-items:center; min-height:44px;
margin-block:-10px; margin-block:calc((1lh - 44px) / 2);
}
.ks-kontakt .nw{white-space:nowrap}
@media (max-width:420px){
.ks-kontakt__liste > div{grid-template-columns:minmax(0,1fr);gap:2px}
}
/* ===================== Typo-Runde 08.10.2026 (Vorschlag medien/review/typo/fremd-vorschlag.css) =====================
Titel mit den Display-Tokens aus 00-base.css (schlanker, wie die Startseite). Pfad in Instrument Sans.
Feldnamen, Blattkopf und Plankopf im Etikett-Stil (Archivo breit, Versalien) statt Schreibmaschinen-Mono.
.ks-bst und .ks-detail__seite stehen in der Zeichnung: dort bleibt Mono (Plan-Beschriftung). */
.ks-titel{font-stretch:var(--display-wdth);font-weight:var(--display-wght);letter-spacing:var(--display-track);line-height:.98}
.ks-pfad ol{font-family:var(--f-body);font-weight:500;font-size:var(--t-meta);letter-spacing:.005em}
.ks-fakten dt,.ks-kontakt__liste dt,.ks-blatt__kopf,.ks-plankopf__feld{
font-family:var(--f-label); font-stretch:var(--label-wdth); font-weight:var(--label-wght);
font-size:var(--t-label-klein); letter-spacing:var(--label-track); text-transform:uppercase;
}
.ks-plankopf__feld{font-size:.625rem;font-stretch:112%;letter-spacing:.06em}
@media (max-width:359px){ .ks-kontakt__liste dt,.ks-fakten dt{font-stretch:112%;letter-spacing:.06em} } /* «Erreichbar» passt bei 320 px in die Begriffsspalte */
/* ===== 40-stoerung.css ===== */
/* =========================================================================
K-ProTech · 40-stoerung.css (Helfer C)
Abschnitt Störung mit dem interaktiven Moment «Strecke prüfen»,
gestaltet wie ein Messgerät (OTDR, Vorlage Demo d4 «Messkurve live»).
Geometrie: Der Schirm ist in 12 gleiche Spalten geteilt. Station i (0 bis 5)
sitzt bei (1 + 2i) / 12 der Breite. Raster, Kurve, Ziffern, Regler und
Beschriftung rechnen alle damit, darum liegen sie genau übereinander.
Grundzustand = Endzustand (ohne JavaScript). pruefstrecke.js setzt
.is-bereit an .pruef__tafel und übernimmt Griff, Kurve und Zustände.
Zustände während der Einstiegsmessung: .is-messen (Schirm leer, wartet bzw.
misst), .is-scan (Scan-Linie fährt).
Andockstellen: --p (0 bis 1) an .pruef__tafel, data-state an den
Stationen, .ergebnis[data-open].
========================================================================= */
/* ---------- Kopf: Titel und Text links über 6/12, Anruf-Hinweis rechts (ab 1180 px) ---------- */
.st-kopf{margin-bottom:var(--gap-kopf);row-gap:clamp(28px,4vw,40px)}
.st-kopf__inhalt{grid-column:1 / -1;display:grid;gap:var(--gap-titel)}
/* Der Text unter dem Titel ist der Lead des Abschnitts (gleiche Stufe wie in den anderen Abschnitten) */
.st-kopf__text{font-size:var(--t-lead);line-height:1.5;letter-spacing:-.004em;color:var(--fg-lead);max-width:30em}
.st-kopf__hinweis{grid-column:1 / -1}
@media (min-width:900px){ .st-kopf__inhalt,.st-kopf__hinweis{grid-column:1 / span 6} }
@media (min-width:1180px){
/* Lead etwas breiter (7/12), damit er nicht auf sechs Zeilen wächst */
.st-kopf__inhalt{grid-column:1 / span 7}
/* Hinweis neben dem Titel, unten bündig mit dem Text; feine Linie links wie eine Randnotiz im Plan */
.st-kopf__hinweis{
grid-column:8 / span 5; grid-row:1; align-self:end;
padding-inline-start:clamp(24px,2.4vw,32px); border-inline-start:1px solid var(--line);
}
}
/* ---------- Rahmen ---------- */
.pruef{container:pruef / inline-size}
/* Anleitung und «Ganze Strecke prüfen»: in der Tafel direkt unter dem Reglerband.
Breit (ab 760 px Inhalt) stehen sie unter den Stationsnamen, die an ihren Strichen bleiben. */
.pruef__bedienung{
display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
column-gap:24px; margin-top:6px;
}
.pruef__anleitung{color:var(--fg);padding-block:12px;font-size:.9375rem;line-height:1.5}
/* Nach der Einstiegsmessung steht der Prüfpunkt schon im Zimmer: Hinweis abblenden (Platz bleibt) */
.pruef__tafel.is-selbst .pruef__anleitung{opacity:0}
/* Ohne JavaScript ändert der Regler nichts: Hinweis und Regler weglassen, Inhalt bleibt vollständig */
html:not(.js) .pruef__regler,html:not(.js) .pruef__anleitung{display:none}
.pruef__start{
display:inline-flex; align-items:center; min-height:44px; padding:0;
border:0; background:none; color:var(--fg);
font-family:var(--f-body); font-weight:600; font-size:1rem; line-height:1.2;
text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.25em;
text-decoration-color:var(--line-strong);
-webkit-user-select:none; user-select:none;
transition:transform 120ms var(--ease-out), text-decoration-color var(--dur-1) var(--ease-out);
}
.pruef__start:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .pruef__start:hover{text-decoration-color:currentColor} }
/* ---------- Instrumenten-Tafel ---------- */
.pruef__tafel{
display:flex; flex-direction:column;
--hp:176px; /* Höhe Messschirm */
--hb:56px; /* Höhe Reglerband */
--taste:48px; /* Griff */
--wlan-h:34px;
touch-action:pan-y; touch-action:pan-y pinch-zoom; /* senkrecht scrollen bleibt beim Browser (Safari kennt pinch-zoom nicht, dann gilt pan-y) */
}
/* Kopfzeile wie am Messgerät: Messpunkt · Leitung · Geprüft.
Feste Spalten, damit beim Messen nichts springt, wenn die Werte wechseln. */
.pruef__anzeige{
display:grid; grid-template-columns:minmax(0,1fr) 5.4rem auto; column-gap:14px; align-items:end;
margin:0 0 18px; padding-bottom:14px; border-bottom:1px solid var(--line);
}
.pruef__feld{display:grid;gap:7px;min-width:0;margin:0}
.pruef__etikett{
font-family:var(--f-label); font-stretch:var(--label-wdth); font-weight:var(--label-wght);
font-size:var(--t-label-klein); line-height:1.2;
letter-spacing:var(--label-track); text-transform:uppercase; color:var(--fg-2);
}
.pruef__wert{
display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
font-weight:600; font-size:.9375rem; line-height:1.25; color:var(--fg);
}
.pruef__wert-nr{display:none} /* schmal nur der Name, breit «Station 4 von 6 · Dose» */
.pruef__feld--zahl{justify-items:end;text-align:right}
.pruef__zahl{
display:inline-flex; align-items:flex-start; gap:.32em;
font-family:var(--f-display); font-stretch:125%; font-weight:700;
font-size:1.0625rem; line-height:1; letter-spacing:.02em;
font-variant-numeric:tabular-nums; color:var(--fg);
}
/* Zähler: die Ziffer rollt (nur transform) */
.pruef__rolle{display:block;height:1em;overflow:hidden}
.pruef__ziffern{display:block}
.pruef__ziffern > span{display:block;height:1em}
.pruef__von{color:var(--fg-2)}
.pruef__zahl.is-ok,.pruef__zahl.is-ok .pruef__von{color:var(--ok)}
/* Schirm = Messschirm + Reglerband */
.pruef__schirm{
position:relative; height:calc(var(--hp) + var(--hb));
-webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
touch-action:pan-y; touch-action:pan-y pinch-zoom;
}
@media (hover:hover) and (pointer:fine){
.is-bereit .pruef__schirm{cursor:grab}
.is-zieht .pruef__schirm{cursor:grabbing}
}
.pruef__plot{
position:absolute; left:0; right:0; top:0; height:var(--hp); overflow:hidden;
box-shadow:inset 1px 0 0 var(--field-border-deep), inset 0 -1px 0 var(--field-border-deep);
}
.spur__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* Raster in zwei Stufen wie auf dem Messschirm: grob durchgezogen, fein gepunktet (fein erst ab 560 px) */
.spur__gitter path{fill:none;stroke:var(--rule-deep);stroke-width:1;vector-effect:non-scaling-stroke;shape-rendering:crispEdges}
.spur__gitter .spur__gitter-fein{display:none;stroke-dasharray:1 3}
.pruef__achse{
position:absolute; z-index:1; padding:3px 4px; background:var(--deep-panel); /* deckt Raster und Cursor ab */
font-family:var(--f-label); font-stretch:var(--label-wdth); font-weight:var(--label-wght); font-size:var(--t-label-klein); line-height:1;
letter-spacing:var(--label-track); text-transform:uppercase; color:var(--fg-2);
}
/* Schmal: «Pegel» senkrecht unten links an der Achse (oben links steht die Ziffer 1) */
.pruef__achse--y{left:3px;bottom:6px;padding:4px 3px;writing-mode:vertical-rl;transform:rotate(180deg)}
.pruef__achse--x{right:2px;bottom:5px}
/* Kurve: gestrichelt = noch offen, durchgezogen mit Fläche = geprüft.
Bis zur Dose Glasfaser (kräftig), danach Patchkabel (fein), dann Funk (gepunktet) */
.spur{position:absolute;inset:0}
.spur path{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:miter;stroke-miterlimit:10}
.spur__faser{stroke-width:2}
.spur__patch{stroke-width:1}
.spur__funk{stroke-width:1.5;stroke-linecap:round;stroke-dasharray:0 5}
.spur--basis path{stroke:var(--field-border-deep)}
.spur--basis .spur__faser{stroke-dasharray:6 5}
.spur--basis .spur__patch{stroke-dasharray:3 4}
.spur--farbe path{stroke:var(--fiber);stroke-linejoin:round}
.spur--farbe .spur__faser{stroke-width:1.75}
.spur--farbe .spur__patch{stroke-width:1.15}
.spur .spur__flaeche{fill:var(--fiber);fill-opacity:.1;stroke:none}
.spur__wlan{
position:absolute; left:75%; top:64.8%;
width:calc(var(--wlan-h) * 17 / 40); height:var(--wlan-h);
transform:translateY(-50%); overflow:visible;
}
.spur__wlan path{fill:none;stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.spur--basis .spur__wlan path{stroke:var(--field-border-deep)}
.spur--farbe .spur__wlan path{stroke:var(--fiber)}
/* Zwei Fenster (nur transform): links gibt die geprüfte Kurve frei, rechts der Rest die gestrichelte */
.spur__fenster,.spur__innen,.spur__rest,.spur__rest-innen{position:absolute;inset:0}
.spur__fenster,.spur__rest{overflow:hidden}
/* Ohne JavaScript ist alles geprüft: das Rest-Fenster steht ganz rechts draussen (JS setzt die Lage in px) */
.spur__rest{transform:translate3d(100%,0,0)}
.spur__rest-innen{transform:translate3d(-100%,0,0)}
.is-messen .spur__rest{opacity:0} /* beim Messen ist der Schirm vor der Scan-Linie leer */
/* Stationen auf der Kurve */
.pruef__ziffer{
position:absolute; left:calc((1 + 2 * var(--i)) * 100% / 12); top:calc(var(--y) * 1%);
transform:translate(-50%,calc(-100% - 5px)); padding-bottom:8px;
font-family:var(--f-label); font-stretch:var(--label-wdth); font-weight:var(--label-wght); font-size:var(--t-label); line-height:1;
font-variant-numeric:tabular-nums; color:var(--fg-2);
}
.pruef__ziffer::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:5px;background:currentColor}
.pruef__ziffer[data-state="geprueft"]{color:var(--ok)}
/* Ende der Leitung: offener Logo-Ring mit «6», schliesst sich in Schrift-Farbe. «Geprüft 6 / 6» bleibt als
Wort in Türkis; der Türkis-Ring ist Band, Ablauf und Kontakt vorbehalten. */
.pruef__ring{
position:absolute; left:calc(11 * 100% / 12); top:calc(var(--y) * 1%);
width:32px; height:32px; transform:translate(-50%,-50%); color:var(--fg-2);
}
.pruef__ring::before{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--deep-panel)}
.pruef__ring .marker__nr{position:relative}
.pruef__ring.is-ok{color:var(--fg);--ring:var(--fg)}
/* Kurzer Ring an der Prüfstelle (Logo-Motiv), nur beim Abhaken. Ohne JavaScript unsichtbar. */
.pruef__ping{
position:absolute; left:calc((1 + 2 * var(--i)) * 100% / 12); top:calc(var(--y) * 1%);
width:28px; height:28px; margin:-14px 0 0 -14px; border-radius:50%;
border:1px solid var(--ok); opacity:0; pointer-events:none;
}
/* Messcursor und Prüfpunkt (nur mit JavaScript). Liegen im Schirm unter Ziffern und Ring:
an der letzten Station verschwindet der Prüfpunkt im Ring. */
.pruef__cursor{
position:absolute; left:0; top:0; bottom:0; width:0; display:none; pointer-events:none;
border-left:1px dashed var(--field-border-deep);
}
/* Beim Messen: helle Scan-Linie mit Kopf (blendet über der gestrichelten Linie ein) */
.pruef__scan{
position:absolute; left:-1px; top:0; bottom:0; width:1px;
background:var(--fg); opacity:0;
}
.pruef__scan::before{
content:""; position:absolute; left:-5px; top:0; width:11px; height:7px;
background:var(--fg); clip-path:polygon(0 0,100% 0,50% 100%);
}
.is-scan .pruef__scan{opacity:.9}
.pruef__punkt{
position:absolute; left:-5px; top:-5px; width:10px; height:10px; display:none; pointer-events:none;
border:1.5px solid var(--fg); background:var(--deep-panel);
}
.is-messen:not(.is-scan) .pruef__punkt{opacity:0} /* vor der Messung: noch kein Messpunkt */
.is-bereit .pruef__cursor,.is-bereit .pruef__punkt{display:block}
/* «Messung läuft» oben rechts im Schirm, nur während der Scan-Linie */
.pruef__lauf{
position:absolute; z-index:2; right:8px; top:8px;
display:flex; align-items:center; gap:8px; padding:4px 6px;
background:var(--deep-panel);
font-family:var(--f-label); font-stretch:var(--label-wdth); font-weight:var(--label-wght); font-size:var(--t-label-klein); line-height:1;
letter-spacing:var(--label-track); text-transform:uppercase; color:var(--fg-2);
opacity:0; pointer-events:none;
}
.pruef__lauf i{display:block;flex:none;width:6px;height:6px;background:var(--fiber)}
.is-scan .pruef__lauf{opacity:1}
/* Reglerband */
.pruef__band{position:absolute;left:0;right:0;top:var(--hp);height:var(--hb)}
.pruef__spurlinie{
position:absolute; left:calc(100% / 12); right:calc(100% / 12); top:50%; height:1px;
background:var(--field-border-deep);
}
.pruef__spurlinie i{position:absolute;top:-5px;left:calc(var(--i) * 20%);width:1px;height:11px;background:var(--field-border-deep)}
.pruef__spurlinie i[data-state="geprueft"]{background:var(--ok)}
/* Natives Input: ohne JavaScript sichtbar und bedienbar (Daumen = Taste),
mit JavaScript unsichtbar über dem Band. Tastatur und Screenreader bleiben beim Input. */
.pruef__regler{
position:absolute; margin:0; padding:0;
left:calc(100% / 12 - var(--taste) / 2); width:calc(100% * 10 / 12 + var(--taste));
top:calc(50% - var(--taste) / 2); height:var(--taste);
-webkit-appearance:none; appearance:none; background:transparent; border:0; border-radius:0;
cursor:pointer; touch-action:pan-y; touch-action:pan-y pinch-zoom;
}
.pruef__regler::-webkit-slider-runnable-track{height:var(--taste);background:transparent;border:0}
.pruef__regler::-moz-range-track{height:var(--taste);background:transparent;border:0}
.pruef__regler::-webkit-slider-thumb{
-webkit-appearance:none; appearance:none; width:var(--taste); height:var(--taste);
border:1px solid var(--on-deep-2); border-radius:0;
background:
linear-gradient(var(--on-deep),var(--on-deep)) center / 1px 28px no-repeat,
linear-gradient(var(--on-deep),var(--on-deep)) center / 28px 1px no-repeat,
var(--deep);
}
.pruef__regler::-moz-range-thumb{
box-sizing:border-box; width:var(--taste); height:var(--taste);
border:1px solid var(--on-deep-2); border-radius:0;
background:
linear-gradient(var(--on-deep),var(--on-deep)) center / 1px 28px no-repeat,
linear-gradient(var(--on-deep),var(--on-deep)) center / 28px 1px no-repeat,
var(--deep);
}
.is-bereit .pruef__regler{opacity:0;pointer-events:none}
/* Eigener Griff: 48-px-Taste mit Fase und Fadenkreuz, links und rechts je eine Kerbe für die Zugrichtung */
.pruef__griff{position:absolute;left:0;top:50%;width:0;height:0;display:none;pointer-events:none}
.is-bereit .pruef__griff{display:block}
.pruef__griff::before,.pruef__griff::after{
content:""; position:absolute; top:-5px; width:0; height:0;
border-block:5px solid transparent;
}
.pruef__griff::before{right:calc(var(--taste) / 2 + 6px);border-right:6px solid var(--fg-2)}
.pruef__griff::after{left:calc(var(--taste) / 2 + 6px);border-left:6px solid var(--fg-2)}
.pruef__taste{
position:absolute; left:calc(var(--taste) / -2); top:calc(var(--taste) / -2);
width:var(--taste); height:var(--taste);
background:var(--on-deep-2);
clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
transition:transform 120ms var(--ease-out);
}
.pruef__taste::before{
content:""; position:absolute; inset:1px; background:var(--deep);
clip-path:polygon(0 0,calc(100% - 9.6px) 0,100% 9.6px,100% 100%,0 100%);
}
.pruef__taste svg{position:absolute;inset:0;width:100%;height:100%}
.pruef__taste path{fill:none;stroke:var(--fg);stroke-width:1;shape-rendering:crispEdges}
.pruef__taste rect{fill:var(--fg)}
.is-zieht .pruef__taste{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){ .pruef__schirm:hover .pruef__taste{background:var(--fg)} }
.pruef__fokus{
position:absolute; left:calc(var(--taste) / -2 - 5px); top:calc(var(--taste) / -2 - 5px);
width:calc(var(--taste) + 10px); height:calc(var(--taste) + 10px);
border:2px solid var(--focus); border-radius:2px; opacity:0;
}
.pruef__regler:focus-visible ~ .pruef__griff .pruef__fokus{opacity:1}
/* Stationsliste. Handy: zwei Spalten unter der Linie, hakt mit. */
.pruef__stationen{
list-style:none; margin:16px 0 0; padding:0;
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,auto);
grid-auto-flow:column; column-gap:16px;
}
.pruef__station{
display:grid; grid-template-columns:18px minmax(0,1fr); grid-template-areas:"nr name" ". status";
column-gap:6px; align-items:baseline; align-content:center;
min-height:48px; padding-block:4px;
}
.pruef__nr{grid-area:nr;font-family:var(--f-label);font-stretch:var(--label-wdth);font-weight:var(--label-wght);font-size:var(--t-label);font-variant-numeric:tabular-nums;color:var(--fg-2)}
.pruef__name{grid-area:name;font-size:.9375rem;line-height:1.35;color:var(--fg);overflow-wrap:break-word}
.pruef__status{
grid-area:status; display:flex; align-items:center; gap:6px;
font-family:var(--f-label); font-stretch:var(--label-wdth); font-weight:var(--label-wght); font-size:var(--t-label-klein); line-height:1.4;
letter-spacing:.08em; text-transform:uppercase; color:var(--fg-2);
}
/* Zeichen: offener Kreis, beim Prüfen zieht sich ein Haken (stroke-dashoffset) */
.pruef__zeichen{flex:none;width:11px;height:11px}
.pruef__zeichen svg{display:block;width:100%;height:100%;overflow:visible}
.pruef__kreis{fill:none;stroke:currentColor;stroke-width:1.2;transform-box:fill-box;transform-origin:center}
.pruef__haken{
fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
stroke-dasharray:1 2; stroke-dashoffset:1.05;
}
.pruef__station[data-state="geprueft"] .pruef__kreis{opacity:0;transform:scale(.4)}
.pruef__station[data-state="geprueft"] .pruef__haken{stroke-dashoffset:0}
.pruef__station[data-state="geprueft"] .pruef__nr,
.pruef__station[data-state="geprueft"] .pruef__status{color:var(--ok)}
.pruef__station.is-hier .pruef__name{font-weight:600}
.is-bereit .pruef__station{cursor:pointer}
@media (hover:hover) and (pointer:fine){
.is-bereit .pruef__station:hover .pruef__name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
}
.pruef__stationen{order:2}
.pruef__schema{order:3;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);color:var(--fg-2)} /* Schrift: .mono = Nebenzeile */
/* ---------- Unter der Tafel: Ergebnis (Telefon-Hinweis steht im Kopf) ---------- */
.pruef__unten{margin-top:clamp(20px,2.4vw,28px);row-gap:clamp(32px,4vw,40px);align-items:start}
.pruef__unten > *{grid-column:1 / -1}
.pruef .ergebnis{display:grid;gap:14px;justify-items:start;align-content:start}
.ergebnis h3:focus:not(:focus-visible){outline:none}
.ergebnis__text{color:var(--fg)}
.ergebnis__liste{list-style:none;margin:2px 0 10px;padding:0;display:grid;gap:8px;color:var(--fg)}
.ergebnis__liste li{display:flex;align-items:flex-start;gap:14px;line-height:1.5}
/* Zeichen wie in der Übergabe-Mappe: kleiner geschlossener Ring (.marker--klein aus 00-base.css) */
.pruef__hinweis{display:grid;gap:16px;justify-items:start}
.pruef__hinweis .text{color:var(--fg)}
/* ---------- Schmal (unter 350 px Inhalt, z. B. 320- bis 375-px-Handys) ----------
Schlusskontrolle 08.10.: bei 375 px (Inhalt 335) blieben für den Messpunkt nur 105 px,
«Hausanschluss» braucht 117 px und wurde zu «Hausanschlu…» gekürzt. Darum die Leitung erst ab 350 px Inhalt. */
@container pruef (max-width:349px){
.pruef__anzeige{grid-template-columns:minmax(0,1fr) auto}
.pruef__feld--leitung{display:none}
}
@container pruef (max-width:299px){
.pruef__griff::before{display:none} /* wenig Platz: nur die Kerbe in Zugrichtung */
.pruef__stationen{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}
.pruef__station{grid-template-columns:18px minmax(0,1fr) auto;grid-template-areas:"nr name status";min-height:40px}
}
/* ---------- Mittel (480 bis 759 px Inhalt): drei Spalten in Leserichtung der Linie ---------- */
@container pruef (min-width:480px) and (max-width:759px){
.pruef__stationen{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;grid-auto-flow:row}
}
/* ---------- Ab 560 px Inhalt: feines Raster, «Pegel» waagrecht oben links, Messpunkt ausführlich ---------- */
@container pruef (min-width:560px){
.spur__gitter .spur__gitter-fein{display:inline}
.pruef__achse--y{left:20px;top:6px;bottom:auto;padding:3px 4px;writing-mode:horizontal-tb;transform:none}
.pruef__anzeige{grid-template-columns:18rem minmax(0,1fr) auto}
.pruef__wert-nr{display:inline;word-spacing:.12em}
.pruef__lauf{right:12px;top:10px}
}
/* ---------- Breit (ab 760 px Inhalt) ---------- */
@container pruef (min-width:760px){
.pruef__tafel{--hp:224px;--wlan-h:44px}
.pruef__ring{width:40px;height:40px}
.pruef__ping{width:34px;height:34px;margin:-17px 0 0 -17px}
.pruef__stationen{display:block;position:relative;height:60px;margin-top:6px}
.pruef__station{
position:absolute; top:0; left:calc((1 + 2 * var(--i)) * 100% / 12); transform:translateX(-50%);
display:flex; flex-direction:column; align-items:center; gap:2px;
padding:6px 8px; text-align:center;
}
.pruef__nr{display:none}
/* Stationsnamen im Etikett-Stil. Bis 1000 px Inhalt etwas schmaler gesetzt, damit «Hausanschluss»
in seine Sechstel-Spalte passt. Die aktuelle Station hebt sich über die Farbe ab (kein Breitensprung). */
.pruef__name{font-family:var(--f-label);font-stretch:110%;font-weight:var(--label-wght);font-size:var(--t-label-klein);line-height:1.4;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--fg-2)}
.pruef__station.is-hier .pruef__name{font-weight:var(--label-wght);color:var(--fg)}
/* Bedienung unter die Stationsnamen, die an ihren Strichen stehen bleiben */
.pruef__bedienung{order:2;margin-top:10px}
.pruef__stationen{order:1}
/* Ergebnis rechts unter dem Ring am Ende der Linie */
.pruef .ergebnis{grid-column:7 / -1;grid-row:1}
}
@container pruef (min-width:1000px){
.pruef__name{font-stretch:var(--label-wdth);font-size:var(--t-label);letter-spacing:var(--label-track)}
}
/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion:no-preference){
/* Einrasten: weich auf die nächste Station */
.pruef__griff,.pruef__cursor,.spur__fenster,.spur__innen,.spur__rest-innen{transition:transform 240ms var(--ease-out)}
.pruef__punkt{transition:transform 240ms var(--ease-out),opacity 220ms var(--ease-out)}
.spur__rest{transition:transform 240ms var(--ease-out),opacity 220ms var(--ease-out)}
.is-zieht :is(.pruef__griff,.pruef__cursor,.spur__fenster,.spur__innen,.spur__rest-innen),
.is-faehrt :is(.pruef__griff,.pruef__cursor,.spur__fenster,.spur__innen,.spur__rest-innen),
.is-scan :is(.pruef__griff,.pruef__cursor,.spur__fenster,.spur__innen,.spur__rest-innen){transition:none}
/* beim Ziehen, Fahren und Messen folgt die Lage jedem Bild, nur das Ein- und Ausblenden bleibt weich */
:is(.is-zieht,.is-faehrt,.is-scan) :is(.pruef__punkt,.spur__rest){transition:opacity 220ms var(--ease-out)}
/* Scan-Linie und «Messung läuft» blenden ein und aus */
.pruef__scan{transition:opacity 260ms var(--ease-out)}
.pruef__lauf{transition:opacity 220ms var(--ease-out)}
.is-scan .pruef__lauf i{animation:pruef-blinken 1s steps(2,jump-none) infinite}
/* Zähler rollt, Haken zieht sich, Kreis geht */
.pruef__ziffern{transition:transform 420ms var(--ease-out)}
.pruef__kreis{transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}
.pruef__haken{transition:stroke-dashoffset 380ms var(--ease-out) 70ms}
.pruef__station[data-state="offen"] .pruef__haken{transition-duration:140ms;transition-delay:0ms}
/* Start, Grössenänderung: ohne Übergang setzen */
.is-still :is(.pruef__griff,.pruef__cursor,.pruef__punkt,.spur__fenster,.spur__innen,.spur__rest,.spur__rest-innen,.ring__arc,.pruef__ziffern,.pruef__kreis,.pruef__haken,.pruef__scan,.pruef__lauf){transition:none}
/* Ergebnis: die Tafel steht immer im Layout (Platz reserviert, nichts springt), Text, Liste und Knopf
sind sofort lesbar. Mit JavaScript wartet nur der Befund «Durchgang in Ordnung.» auf das Ende der
Messung; dann steigt er auf und die vier Listenringe schliessen sich nacheinander. */
.pruef__anleitung{transition:opacity 600ms var(--ease-out)}
.pruef .ergebnis > h3{transition:opacity 420ms var(--ease-out) 60ms,transform 520ms var(--ease-out) 60ms}
html.js .pruef .ergebnis:not([data-open]) > h3{opacity:0;transform:translate3d(0,8px,0)}
html.js .pruef .ergebnis:not([data-open]) .ergebnis__liste .marker{--gap:14}
.pruef .ergebnis .ergebnis__liste .ring__arc{transition:stroke-dasharray 520ms var(--ease-draw) var(--d,0ms)}
html.js .pruef .ergebnis:not([data-open]) .ergebnis__liste .ring__arc{transition:none}
.pruef .ergebnis .ergebnis__liste > li:nth-child(1){--d:160ms}
.pruef .ergebnis .ergebnis__liste > li:nth-child(2){--d:250ms}
.pruef .ergebnis .ergebnis__liste > li:nth-child(3){--d:340ms}
.pruef .ergebnis .ergebnis__liste > li:nth-child(4){--d:430ms}
}
@keyframes pruef-blinken{from{opacity:1}to{opacity:.25}}
@media (prefers-reduced-motion:reduce){
.pruef__ring .ring__arc,.pruef__taste,.pruef__start{transition:none}
.is-zieht .pruef__taste,.pruef__start:active{transform:none}
}
/* ===== 41-stoerung-plus.css ===== */
/* =========================================================================
K-ProTech · 41-stoerung-plus.css (Runde Kritik 6, 08.10.2026)
Ergänzt 40-stoerung.css (das gerade der Schrift-Helfer betreut) und wird danach geladen.
1. Prüfpunkt lädt zum Ziehen ein: Die Einstiegsmessung hält an der Steigzone (Station 3),
pruefstrecke.js setzt dann .is-lockt an .pruef__tafel (und .is-sicht, solange der Schirm
im Bild ist). Der Umriss der Taste pulsiert, die Kerbe rechts stupst in Zugrichtung.
Jede Berührung beendet es. Reduced Motion: kein Pulsieren (dort gilt ohnehin der Endzustand).
2. Ergebnis-Tafel: schmal untereinander, ab 760 px Inhalt über die volle Breite zweispaltig
(Titel, Satz und Knopf links, Liste rechts). Die Liste steht wie ein Protokoll mit Haarlinien.
Bis die Strecke geprüft ist, steht an der Stelle des Titels der Zwischenstand
(«Noch 3 Stationen offen.», .ergebnis__offen, zählt mit). Ohne JavaScript: nur der Titel.
========================================================================= */
/* ---------- 1. Einladung zum Ziehen ---------- */
.pruef__puls{
position:absolute; left:calc(var(--taste) / -2); top:calc(var(--taste) / -2);
width:var(--taste); height:var(--taste); max-width:none; overflow:visible; /* der Griff selbst ist 0 px breit */
opacity:0; pointer-events:none;
}
.pruef__puls path{fill:none;stroke:var(--fg);stroke-width:1.25;vector-effect:non-scaling-stroke}
/* Die Kerbe in Zugrichtung (rechts) wird beim Warten hell. Ohne Farbübergang (Bewegungsregel: nur
transform, opacity, clip-path, stroke-dash*): der Wechsel fällt mit dem Anhalten zusammen. */
.is-lockt .pruef__griff::after{border-left-color:var(--fg)}
/* Drei Einladungen, dann Ruhe (neben «Noch 3 Stationen offen.» soll nichts endlos zappeln).
Kommt der Schirm neu ins Bild (.is-sicht wieder gesetzt), beginnen die drei von vorn. */
@media (prefers-reduced-motion:no-preference){
.is-lockt.is-sicht .pruef__puls{animation:pruef-puls 2200ms var(--ease-out) 420ms 3 both}
.is-lockt.is-sicht .pruef__griff::after{animation:pruef-stups 2200ms var(--ease-in-out) 420ms 3 both}
}
@keyframes pruef-puls{
0%{opacity:0;transform:scale(1)}
10%{opacity:.8;transform:scale(1.02)}
58%,100%{opacity:0;transform:scale(1.55)}
}
@keyframes pruef-stups{
0%,34%,100%{transform:none}
15%{transform:translate3d(5px,0,0)}
}
/* ---------- 2. Ergebnis-Tafel ---------- */
.pruef .ergebnis{
grid-template-columns:minmax(0,1fr);
grid-template-areas:"titel" "text" "liste" "knopf";
}
.pruef .ergebnis > h3,.pruef .ergebnis__offen{grid-area:titel}
.pruef .ergebnis__text{grid-area:text}
.pruef .ergebnis__liste{grid-area:liste}
.pruef .ergebnis > .btn{grid-area:knopf}
/* Zwischenstand: dieselbe Grösse wie der Titel, gedämpft. Ohne JavaScript leer und unsichtbar. */
.pruef .ergebnis__offen{margin:0;color:var(--fg-2);opacity:0;pointer-events:none}
/* Liste wie ein Protokoll: jede Zeile zwischen Haarlinien, der kleine geschlossene Ring als Zeichen */
.pruef .ergebnis__liste{gap:0;margin:6px 0 10px;border-top:1px solid var(--line);justify-self:stretch} /* Tafel richtet sonst links aus: Linien über die ganze Spalte */
.pruef .ergebnis__liste > li{padding-block:11px;border-bottom:1px solid var(--line)}
@container pruef (min-width:760px){
.pruef .ergebnis{
grid-column:1 / -1; grid-row:auto;
grid-template-columns:minmax(0,5fr) minmax(0,7fr);
grid-template-rows:auto auto minmax(0,1fr);
grid-template-areas:"titel liste" "text liste" "knopf liste";
column-gap:clamp(40px,5vw,80px); row-gap:12px;
align-items:start;
}
/* Der Befund ist der Abschluss der Prüfung: eine Stufe grösser als ein gewöhnliches h3 */
.pruef .ergebnis > h3,.pruef .ergebnis__offen{font-size:clamp(1.5rem,1.05rem + .95vw,1.875rem)}
/* Knopf unten bündig mit der letzten Protokollzeile: links entsteht keine Lücke */
.pruef .ergebnis > .btn{align-self:end;margin-top:16px}
.pruef .ergebnis__liste{margin:0}
.pruef .ergebnis__liste > li{padding-block:10px}
}
/* Bewegung: Zwischenstand weicht dem Titel (Titel steigt wie in 40-stoerung.css auf) */
@media (prefers-reduced-motion:no-preference){
html.js .pruef .ergebnis:not([data-open]) .ergebnis__offen{opacity:1}
.pruef .ergebnis__offen{transition:opacity 180ms var(--ease-out),transform 220ms var(--ease-out)}
html.js .pruef .ergebnis[data-open] .ergebnis__offen{transform:translateY(-6px)}
/* Der Befund wartet flach (2D) statt als eigene Ebene (translate3d aus 40-stoerung.css) */
html.js .pruef .ergebnis:not([data-open]) > h3{transform:translateY(8px)}
}
/* ---------- 3. Bewegungsregel (Prüfer 08.10.2026) ----------
«Ganze Strecke prüfen»: 40-stoerung.css blendet die Farbe der Unterstreichung über. Hier nur noch der
Druck (transform); die Unterstreichung wechselt beim Darüberfahren sofort. */
@media (prefers-reduced-motion:no-preference){
.pruef__start{transition:transform 120ms var(--ease-out)}
}
/* ===== 50-firmen.css ===== */
/* =========================================================================
K-ProTech · 50-firmen.css · Abschnitt «Für Firmen» (#firmen, hell 2)
Gerüst: Kicker-Leiste über die volle Breite → Split (Titel, Lead, darunter Messtechnik und
Nachweise | Übergabe-Mappe mit Schlusszeile und Knopf) → zwei Rollen-Kacheln nebeneinander.
Schmal (unter 900 px): Titel, Lead, Rollen untereinander, Mappe, Messtechnik, Nachweise.
Kacheln (Runde 08.10.2026): Fase-Tafeln mit Haarlinie, die Rollen mit Ring-Marker. Beim
Einscrollen steigen sie knapp nacheinander aus der eigenen Fläche auf (unter 1 s, ohne Überlappung).
Maus: heben, sanft kippen, Lichtkante (kacheln.js; die generischen Regeln für [data-kachel]
stehen weiter unten und gelten auch für andere Abschnitte).
Mappe (Runde 08.10.2026, Feedback 6): Stapel aus drei Blättern (Übergabe, Messprotokoll,
Regierapport) mit Register und Pfeilen. Blatt 1 füllt sich beim Einscrollen aus (mappe.js):
Haken, Handschrift, Unterschrift, Stempel «Geprüft». Ohne JavaScript stehen die drei Blätter
fertig untereinander; erst .mappe--js stapelt sie.
========================================================================= */
/* ---------- Kicker-Leiste: Text, dann Haarlinie bis an den Rand ---------- */
.firmen__kicker{
display:flex; align-items:center; gap:18px;
margin-bottom:clamp(40px,6vw,80px);
}
.firmen__kicker::after{
content:""; flex:1 1 48px; height:1px; min-width:48px;
background:var(--line-strong);
}
/* schmal: der Kicker bricht um, die Haarlinie läuft darunter über die volle Breite */
@media (max-width:639px){
.firmen__kicker{flex-wrap:wrap;row-gap:14px}
.firmen__kicker::after{flex-basis:100%}
}
/* ---------- Raster ---------- */
/* Reihenfolge im Code (= Handy): Text, Rollen, Mappe (mit Schlusszeile und Knopf), Belege.
Ab 900 px: links Text und darunter die Belege, rechts die Mappe; darunter die Rollen über die
volle Breite (Regeln am Ende des Mappe-Teils). */
.firmen__raster{row-gap:0;align-items:start}
.firmen__raster > *{grid-column:1 / -1;min-width:0}
.firmen__rollen{margin-top:clamp(44px,5.6vw,64px)}
.firmen__mappe-spalte{margin-top:clamp(56px,8vw,88px)}
.firmen__belege{margin-top:clamp(56px,7vw,80px)}
/* ---------- Textspalte ---------- */
.firmen__titel{max-width:14ch}
.firmen__lead{margin-top:clamp(20px,2.4vw,28px)}
/* ---------- Rollen-Kacheln ---------- */
.firmen__rollen{
--rollen-gap:clamp(16px,2.4vw,32px);
display:grid; gap:var(--rollen-gap);
}
@media (min-width:720px){
.firmen__rollen{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* .rolle trägt den Einstieg, .rolle__kachel das Kippen (zwei Elemente, zwei transforms) */
.rolle{position:relative;z-index:1;display:grid}
.rolle__kachel{
--tafel-bg:var(--sheet); --tafel-line:var(--rule-strong); --kachel-fase:var(--fase);
padding:clamp(22px,2.8vw,36px);
}
.rolle__kopf{
display:grid; grid-template-columns:40px minmax(0,1fr); column-gap:16px; align-items:center;
padding-bottom:clamp(16px,1.8vw,20px);
border-bottom:1px solid var(--rule);
}
.rolle__kopf .marker{color:var(--marine)}
.rolle__kopf .ring__arc{transition:stroke-dasharray var(--dur-2) var(--ease-draw)}
.rolle__titel{max-width:12em}
.rolle__liste{
list-style:none; margin:clamp(16px,1.8vw,22px) 0 0; padding:0;
display:grid; gap:10px;
}
.rolle__liste li{line-height:1.5}
/* Punkt: .liste-punkt aus 00-base.css (kleines Quadrat wie ein Messpunkt im Plan) */
/* Maus über der Kachel: der Ring schliesst sich (verbunden). Kippen und Lichtkante: kacheln.js */
@media (hover:hover) and (pointer:fine){
.rolle__kachel:hover .marker{--gap:0}
}
@media (prefers-reduced-motion:reduce){ .rolle__kopf .ring__arc{transition:none} }
/* ---------- Belege: Messtechnik als schmale Kachel-Leiste, Nachweise ---------- */
.messtechnik{
padding-top:20px;
border-top:1px solid var(--line-strong);
}
.messtechnik__titel{
font-size:var(--t-h3-klein); font-stretch:106%; font-weight:650; letter-spacing:-.005em;
}
.messtechnik__liste{
--leiste-gap:8px;
list-style:none; margin:16px 0 0; padding:0;
display:grid; grid-template-columns:minmax(0,1fr); gap:var(--leiste-gap);
}
/* ab 560 px zwei Spalten; ab 900 px steht die Leiste in der linken Spalte neben der Mappe: 2 × 2 */
@media (min-width:560px){ .messtechnik__liste{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* Platz = Steckplatz in der Leiste (Einstieg), Kachel = das Modul darin (Kippen) */
.messtechnik__platz{position:relative;display:grid;z-index:calc(4 - var(--k,0))}
.messtechnik__kachel{
--fase:6px; --kachel-fase:6px;
--tafel-bg:var(--sheet); --tafel-line:var(--rule-strong);
display:block; min-height:52px;
padding:14px 16px 14px 36px;
font-size:.9375rem; line-height:1.45;
font-variant-numeric:tabular-nums;
color:var(--fg);
}
/* Messpunkt wie in .liste-punkt, auf der ersten Zeile */
.messtechnik__kachel::after{
content:""; position:absolute; left:17px;
top:calc(14px + .725em - 2.5px); top:calc(14px + .5lh - 2.5px);
width:5px; height:5px; background:var(--title);
}
/* Zeile unter der Leiste: Titel als Etikett, Einträge als Nebenzeile (Typo-Runde: keine Mono mehr) */
.nachweise{margin-top:clamp(28px,3.4vw,36px)}
.nachweise__titel{
font-family:var(--f-label); font-stretch:var(--label-wdth); font-weight:var(--label-wght);
font-size:var(--t-label); line-height:1.45; letter-spacing:var(--label-track); text-transform:uppercase;
color:var(--fg);
}
/* Trenner als linke Haarlinie jedes Eintrags; am Zeilenanfang wird er abgeschnitten */
.nachweise__liste{
list-style:none; margin:8px 0 0 -12px; padding:0;
display:flex; flex-wrap:wrap; row-gap:4px;
overflow:hidden;
font-family:var(--f-body); font-weight:500; font-size:var(--t-meta); line-height:1.5;
font-variant-numeric:tabular-nums;
color:var(--fg-2);
}
.nachweise__liste li{
white-space:nowrap;
margin-inline-start:-1px;
padding-inline:12px;
border-inline-start:1px solid var(--line-strong);
}
/* =========================================================================
Übergabe-Mappe
========================================================================= */
.mappe{
--versatz:8px; /* Versatz je Blatt im Stapel */
--stift:var(--marine); /* Handschrift, Haken, Unterschrift: wie Kugelschreiber */
position:relative;
container:mappe / inline-size;
}
.mappe__defs{position:absolute;width:0;height:0;overflow:hidden}
/* ---------- Blatt (Grundform, auch ohne JavaScript) ----------
Spalte minmax(0,1fr) und min-width:0: das Blatt wächst nie über den Stapel hinaus
(320 px: vorher stand es 39 px über den Rand, Haarlinie und Fase fehlten). */
.mappe__stapel{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.mappe__blatt{
--tafel-bg:var(--sheet); --tafel-line:var(--marine);
display:flex; flex-direction:column;
min-width:0;
padding:clamp(20px,3.2vw,36px);
}
/* Fokus auf dem offenen Blatt (Tabs-Muster): Rahmen innen, die Fase schneidet sonst ab */
.mappe__blatt:focus-visible{outline-offset:-7px}
/* Kopfzeile des Blatts: Dokumentart links, kleiner Stempel rechts auf der Linie */
.mappe__kopf{
display:flex; align-items:center; justify-content:space-between; gap:10px 14px;
min-height:36px; padding-bottom:10px;
border-bottom:1px solid var(--marine);
}
.mappe__kopf-text,
.plankopf dt,
.mappe__blattnr,
.protokoll thead th,
.rapport thead th,
.mappe__reiter-nr,
.otdr__nr{
font-family:var(--f-label); font-stretch:var(--label-wdth); font-weight:var(--label-wght);
font-size:var(--t-label-klein); line-height:1.35; letter-spacing:var(--label-track); text-transform:uppercase;
font-variant-numeric:tabular-nums lining-nums;
color:var(--ink-2);
}
.mappe__kopf-text{min-width:0;font-size:var(--t-label)}
.mappe__titel{margin-top:clamp(20px,2.4vw,28px);max-width:18ch}
/* ---------- Stempel (SVG mit Tinten-Filter: raue Kante, kleine Fehlstellen) ---------- */
.stempel{display:block;overflow:visible;color:var(--marine)}
.stempel rect{fill:none;stroke:currentColor}
.stempel text{fill:currentColor}
.stempel__wort{
font-family:var(--f-display); font-stretch:125%; font-weight:780;
font-size:15px; letter-spacing:.2em;
}
.stempel__wort--gross{font-size:20.5px;font-weight:800;letter-spacing:.1em}
.stempel__klein{
font-family:var(--f-label); font-stretch:125%; font-weight:650;
font-size:7.4px; letter-spacing:.32em;
}
.stempel--klein{
flex:none; width:88px; height:auto;
color:var(--ink-2); opacity:.92;
transform:rotate(-4deg);
margin-block:-8px -12px; /* sitzt halb auf der Kopflinie */
}
.stempel__hall{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
/* ---------- Zeilen mit Kästchen und Haken ---------- */
.mappe__zeilen{
list-style:none; margin:clamp(18px,2.2vw,26px) 0 0; padding:0;
border-bottom:1px solid var(--rule);
}
.mappe__zeile{
display:flex; align-items:flex-start; gap:16px;
padding-block:13px;
border-top:1px solid var(--rule);
line-height:1.45; color:var(--ink);
}
/* Kästchen = kleiner Logo-Ring (offen, bis der Haken sitzt), Haken von Hand darüber */
.mappe__kaestchen{
--gap:0; --ring:var(--stift);
position:relative; flex:none; display:inline-block;
width:17px; height:17px;
margin-top:calc(.725em - 8.5px); margin-top:calc(.5lh - 8.5px);
}
.mappe__kaestchen .ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mappe__kaestchen .ring__arc{stroke-width:3.4;transition:none}
.mappe__haken{
position:absolute; left:3px; top:-13px;
width:28px; height:28px; overflow:visible; pointer-events:none;
}
.mappe__haken path,
.hand__svg path,
.unterschrift path,
.otdr__kurve{
fill:none; stroke-linecap:round; stroke-linejoin:round;
stroke-dasharray:1 3; stroke-dashoffset:0;
}
.mappe__haken path{stroke:var(--stift);stroke-width:1.6}
/* ---------- Plankopf (Felder unten) ---------- */
.mappe__fuss{position:relative;margin-top:clamp(24px,3vw,34px)}
.plankopf{
display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
gap:1px; margin:0;
background:var(--rule-strong); /* Haarlinien zwischen den Feldern */
border:1px solid var(--marine);
}
.plankopf__feld{
display:flex; flex-direction:column; justify-content:space-between; gap:4px;
min-width:0; min-height:62px;
padding:6px 10px 8px;
background:var(--sheet);
}
.plankopf__feld--objekt,
.plankopf__feld--oto,
.plankopf__feld--unterschrift{grid-column:1 / -1}
.plankopf dt{display:flex;justify-content:space-between;gap:8px}
.plankopf__hinweis{
font-family:var(--f-body); font-stretch:100%; font-weight:500; text-transform:none;
font-size:.75rem; letter-spacing:.01em; color:var(--ink-2);
}
.plankopf dd{margin:0;min-height:24px;display:flex;align-items:flex-end}
.plankopf__feld--unterschrift{min-height:84px}
/* Handschrift. Ohne JavaScript: der Wert als normaler Text in Stiftfarbe. */
.hand{display:inline-block;font-weight:600;color:var(--stift);line-height:1.3}
.hand--js{display:block;line-height:0}
.hand__svg{display:block;height:24px;width:auto;max-width:100%;overflow:visible}
.hand__svg path{stroke:var(--stift);stroke-width:1.55}
.unterschrift{display:block;width:150px;height:auto;max-width:100%;overflow:visible;margin-bottom:-4px}
.unterschrift path{stroke:var(--stift);stroke-width:1.55}
/* Stempel «Geprüft»: liegt schräg über Unterschrift und Datum */
.stempel-platz{
position:absolute; right:clamp(6px,6%,34px); bottom:16px;
width:clamp(128px,34%,168px);
transform:rotate(-7deg);
pointer-events:none;
}
.stempel--geprueft{width:100%;height:auto;opacity:.94}
/* Blattnummer unten rechts */
.mappe__blattnr{margin-top:auto;padding-top:18px;text-align:right}
/* breiter (Mappe ab 460 px): Objekt und OTO-ID nebeneinander */
@container mappe (min-width:460px){
.plankopf__feld--objekt{grid-column:1}
.plankopf__feld--oto{grid-column:2}
}
/* ---------- Blatt 2: OTDR-Kurve (Schema) und Tabelle ---------- */
.otdr{margin:clamp(16px,2vw,22px) 0 0}
.otdr__flaeche{position:relative;padding:20px 0 22px}
.otdr__svg{display:block;width:100%;height:auto;overflow:visible}
.otdr__raster path{fill:none;stroke:var(--rule);stroke-width:.8}
.otdr__raster .otdr__ereignis{stroke-dasharray:2 3}
.otdr__achsen{fill:none;stroke:var(--rule-strong);stroke-width:1}
.otdr__kurve{stroke:var(--tech);stroke-width:1.7}
.otdr__achse{
position:absolute;
font-family:var(--f-mono); font-weight:500; font-size:.6875rem; line-height:1.2; letter-spacing:.04em;
color:var(--ink-2);
}
.otdr__achse--y{top:0;left:calc(28 / 320 * 100%)}
.otdr__achse--x{right:0;bottom:0}
/* schmal kein Platz neben Station 4: dort genügt «Pegel» */
@container mappe (max-width:499px){ .otdr__achse--x{display:none} }
.otdr__nr{position:absolute;bottom:0;left:calc(var(--x) / 320 * 100%);transform:translateX(-50%)}
.protokoll,.rapport{width:100%;border-collapse:collapse;font-size:var(--t-klein);line-height:1.4}
.protokoll{margin-top:clamp(14px,1.8vw,20px)}
.protokoll thead th,.rapport thead th{
text-align:left; padding:0 10px 8px 0;
border-bottom:1px solid var(--marine);
}
.protokoll tbody th,.protokoll td{
text-align:left; font-weight:500; color:var(--ink);
padding:9px 10px 9px 0;
border-bottom:1px solid var(--rule);
vertical-align:top;
}
.protokoll__station{display:flex;align-items:baseline;gap:.5em;hyphens:manual}
.protokoll__nr{
flex:none; min-width:1em;
font-family:var(--f-label); font-stretch:var(--label-wdth); font-weight:var(--label-wght);
font-size:var(--t-label-klein); color:var(--ink-2);
}
.protokoll td.protokoll__wert{font-family:var(--f-mono);font-weight:500;font-size:var(--t-meta);color:var(--ink-2);white-space:nowrap}
.protokoll thead th:last-child,.protokoll__ok{width:1%;white-space:nowrap;padding-right:6px}
.protokoll__ok .mappe__kaestchen{margin-top:calc(.7em - 8.5px);margin-top:calc(.5lh - 8.5px)}
.mappe__notiz{
margin-top:12px;
font-family:var(--f-body); font-weight:500; font-size:var(--t-meta); line-height:1.45;
color:var(--ink-2);
}
/* ---------- Blatt 3: Regierapport (leer, eine Zeile «Muster») ---------- */
.rapport{margin-top:clamp(16px,2vw,22px);table-layout:fixed}
.rapport thead th:nth-child(1){width:24%}
.rapport thead th:nth-child(2){width:34%}
.rapport thead th:nth-child(3){width:26%}
.rapport thead th:nth-child(4){width:16%}
.rapport td{
height:42px; padding:6px 8px 6px 0;
border-bottom:1px solid var(--rule);
vertical-align:bottom;
}
.rapport td + td{padding-left:8px;border-left:1px solid var(--rule)}
.rapport thead th + th{padding-left:8px}
.plankopf--rapport{grid-template-columns:minmax(0,1fr);margin-top:clamp(18px,2.2vw,24px)}
@container mappe (max-width:379px){
.rapport thead th,.protokoll thead th{font-stretch:100%;letter-spacing:.04em}
}
/* sehr schmal (Mappe unter 330 px, Bildschirm bis rund 370 px): Kopfzeile und Tabelle rücken
zusammen, damit nichts breiter als das Blatt wird (Blatt 2: «Messprotokoll ·» plus Stempel) */
@container mappe (max-width:329px){
.mappe__blatt{padding-inline:18px}
.mappe__kopf-text{font-size:var(--t-label-klein);font-stretch:112%;letter-spacing:.07em}
.stempel--klein{width:70px}
.protokoll thead th,.protokoll tbody th,.protokoll td{padding-right:6px}
.protokoll td.protokoll__wert{font-size:.8125rem}
}
/* ---------- Register (erst mit JavaScript) ---------- */
.mappe__register{
--aktiv:0;
position:relative;
display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
margin-bottom:18px;
border-bottom:1px solid var(--line-strong);
}
.mappe__reiter{
-webkit-appearance:none; appearance:none;
display:flex; align-items:baseline; gap:10px;
min-width:0; min-height:48px; margin:0; padding:10px 10px 12px 0;
background:transparent; border:0; border-radius:2px;
text-align:left; color:var(--fg-2);
font-family:var(--f-body); font-weight:600; font-size:.9375rem; line-height:1.25;
hyphens:manual;
transition:transform 120ms var(--ease-out);
}
.mappe__reiter .mappe__reiter-nr{color:inherit}
.mappe__reiter[aria-selected="true"]{color:var(--fg)}
.mappe__reiter:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .mappe__reiter:hover{color:var(--fg)} }
.mappe__zeiger{
position:absolute; left:0; bottom:-1px;
width:calc(100% / 3); height:2px;
background:var(--title);
transform:translate3d(calc(var(--aktiv) * 100%),0,0);
transition:transform 280ms var(--ease-out);
}
/* schmal: Nummer über dem Namen */
@container mappe (max-width:419px){
.mappe__reiter{flex-direction:column;align-items:flex-start;gap:2px;padding:8px 6px 10px 0;font-size:.875rem}
}
/* ---------- Pfeile unter dem Stapel ---------- */
.mappe__steuerung{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.mappe__pfeil{
-webkit-appearance:none; appearance:none;
display:inline-grid; place-items:center;
width:44px; height:44px; margin:0; padding:0;
background:transparent; border:0; border-radius:2px;
box-shadow:inset 0 0 0 1px var(--line-strong);
color:var(--fg);
transition:transform 120ms var(--ease-out), opacity var(--dur-1) var(--ease-out);
}
.mappe__pfeil svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square}
.mappe__pfeil:active{transform:scale(.95)}
.mappe__pfeil[aria-disabled="true"]{opacity:.32;cursor:default}
.mappe__pfeil[aria-disabled="true"]:active{transform:none}
@media (hover:hover) and (pointer:fine){
.mappe__pfeil:not([aria-disabled="true"]):hover{box-shadow:inset 0 0 0 1px var(--fg)}
}
/* ---------- Schlusszeile mit Knopf ---------- */
.mappe__schluss{
display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px;
margin-top:clamp(28px,3.6vw,40px);
}
.mappe__schluss-text{
font-family:var(--f-display); font-size:var(--t-h3);
font-stretch:var(--h3-wdth); font-weight:var(--h3-wght); letter-spacing:var(--h3-track);
line-height:1.15; color:var(--title);
text-wrap:balance;
}
/* ---------- Stapel (nur mit JavaScript) ----------
Alle Blätter liegen in derselben Rasterzelle (gleich hoch), versetzt um --tiefe × --versatz.
Umblättern: das Blatt dreht sich um die linke Kante zum Betrachter (rotateY bis -180°,
Rückseite unsichtbar), die darunter liegenden rücken nach. Schatten nur über opacity (::after). */
.mappe--js .mappe__stapel{
gap:0;
margin-inline-end:calc(2 * var(--versatz)); margin-block-end:calc(2 * var(--versatz));
perspective:2400px; perspective-origin:30% 45%;
touch-action:pan-y;
transition:opacity 600ms var(--ease-out),transform 1000ms var(--ease-out);
}
.mappe--js .mappe__blatt{
grid-area:1 / 1;
transform-origin:0 50%;
-webkit-backface-visibility:hidden; backface-visibility:hidden;
transform:translate3d(calc(var(--tiefe,0) * var(--versatz)),calc(var(--tiefe,0) * var(--versatz)),0) rotateY(0deg);
transition:transform 460ms var(--ease-out) var(--blatt-verz,90ms);
}
.mappe--js .mappe__blatt[data-blatt="1"]{z-index:3}
.mappe--js .mappe__blatt[data-blatt="2"]{z-index:2}
.mappe--js .mappe__blatt[data-blatt="3"]{z-index:1}
.mappe--js .mappe__blatt::after{
content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
background:var(--deep);
opacity:calc(var(--tiefe,0) * .05);
transition:opacity 520ms var(--ease-out) 60ms;
}
/* Weg: bis kurz über die Kante (-100°), dort ist nur noch die unsichtbare Rückseite zu sehen.
ease-out: das Blatt hebt sofort ab und wird zur Kante hin langsamer (kein träger Start). */
.mappe--js .mappe__blatt.ist-weg{
transform:translate3d(0,0,0) rotateY(-100deg);
visibility:hidden;
transition:transform 680ms var(--ease-out) var(--verz,0ms),visibility 0s linear calc(680ms + var(--verz,0ms));
}
.mappe--js .mappe__blatt.ist-weg::after{opacity:.16;transition:opacity 260ms var(--ease-out) var(--verz,0ms)}
.mappe--js .mappe__blatt.ist-zurueck{transition:transform 600ms var(--ease-out) var(--verz,0ms)}
.mappe--js .mappe__blatt.ist-zurueck::after{transition:opacity 380ms var(--ease-out) calc(80ms + var(--verz,0ms))}
/* Auftritt: der Stapel steigt auf, die unteren Blätter schieben sich danach hervor */
.mappe--js.ist-vor .mappe__stapel{opacity:0;transform:translate3d(0,48px,0)}
.mappe--js.ist-vor .mappe__blatt{transform:translate3d(0,0,0) rotateY(0deg)}
.mappe--js .mappe__register,.mappe--js .mappe__steuerung{transition:opacity 600ms var(--ease-out) 240ms}
.mappe--js.ist-vor .mappe__register,.mappe--js.ist-vor .mappe__steuerung{opacity:0}
/* Leer bis zum Ausfüllen (mappe.js setzt die Attribute nur ohne Reduced Motion).
Blatt 1: je Element data-wartet (Haken, Feld, Unterschrift, Stempel warten einzeln, bis ihr Ort
im Bild steht). Blatt 2 und 3: das ganze Blatt data-leer bis zum ersten Aufschlagen. */
.mappe__kaestchen[data-wartet],
.mappe__blatt[data-leer] .protokoll .mappe__kaestchen{--gap:14}
.mappe__kaestchen[data-wartet] .mappe__haken path,
.hand[data-wartet] .hand__svg path,
.unterschrift[data-wartet] path,
.mappe__blatt[data-leer] .protokoll .mappe__haken path,
.mappe__blatt[data-leer] .hand__svg path,
.mappe__blatt[data-leer] .unterschrift path,
.mappe__blatt[data-leer] .otdr__kurve{stroke-dashoffset:1.01}
.stempel--geprueft[data-wartet],
.mappe__blatt[data-leer] .stempel--geprueft{opacity:0}
/* Handy: kleinerer Versatz im Stapel */
@media (max-width:479px){ .mappe{--versatz:6px} }
/* Reduced Motion: kein 3D, Blätter blenden nur über */
@media (prefers-reduced-motion:reduce){
.mappe--js .mappe__stapel{transition:none}
.mappe--js .mappe__blatt{transition:opacity 200ms var(--ease-out)}
.mappe--js .mappe__blatt.ist-weg{
transform:translate3d(0,0,0) rotateY(0deg); opacity:0;
transition:opacity 200ms var(--ease-out),visibility 0s linear 200ms;
}
.mappe--js .mappe__blatt.ist-zurueck{transition:opacity 200ms var(--ease-out)}
.mappe--js .mappe__blatt::after{transition:none}
.mappe__zeiger,.mappe__reiter,.mappe__pfeil{transition:none}
.mappe__reiter:active,.mappe__pfeil:active{transform:none}
.mappe__kaestchen[data-wartet],
.mappe__blatt[data-leer] .protokoll .mappe__kaestchen{--gap:0}
.mappe__kaestchen[data-wartet] .mappe__haken path,
.hand[data-wartet] .hand__svg path,
.unterschrift[data-wartet] path,
.mappe__blatt[data-leer] :is(.mappe__haken path,.hand__svg path,.unterschrift path,.otdr__kurve){stroke-dashoffset:0}
.stempel--geprueft[data-wartet],
.mappe__blatt[data-leer] .stempel--geprueft{opacity:.94}
}
/* ---------- ab 900 px: links Text, darunter Messtechnik und Nachweise, rechts die hohe Mappe;
darunter die Rollen-Kacheln über die volle Breite ----------
Korrektur-Runde 08.10.2026 (Prüfer: links unter dem Lead rund 400 px leer, Seite zu lang):
die Belege stehen jetzt in der linken Spalte neben der Mappe statt in einer eigenen Zeile.
Zeile 2 ist 1fr: die Mehrhöhe der Mappe (über Zeile 1 und 2) geht ganz in Zeile 2, die
Belege bleiben direkt unter dem Lead (align-self:start). */
@media (min-width:900px){
.firmen__raster{grid-template-rows:auto 1fr auto}
.firmen__text{grid-column:1 / span 6;grid-row:1}
.firmen__belege{grid-column:1 / span 6;grid-row:2;align-self:start;margin-top:clamp(48px,5vw,64px)}
.firmen__mappe-spalte{grid-column:7 / -1;grid-row:1 / span 2;margin-top:0}
.firmen__rollen{grid-row:3;margin-top:clamp(72px,8vw,112px)}
}
@media (min-width:1180px){
.firmen__text,.firmen__belege{grid-column:1 / span 5}
}
/* ---------- Kacheln, die zur Maus kippen (kacheln.js, generisch für [data-kachel]) ----------
Das Element mit data-kachel braucht position:relative (.tafel hat es) und darf selbst keinen
eigenen Einstieg per transform haben (Einstieg auf ein umschliessendes Element legen).
kacheln.js setzt beim ersten Darüberfahren