/*
* Startseite (ab 1.36). Mobil zuerst, ohne Schriften oder Skripte von außen.
* Die Rohfarben (--ink-900, --gruen-700 …) kommen aus inc/farben.php (siehe Seite „Farbpalette“),
* hier stehen nur die Rollen (Hintergrund, Text, Knopf …) für Hell- und Dunkelmodus.
* Ab 1.46 nach dem Design-Manual: Hausschrift Atkinson Hyperlegible (eigener Server), eigene Icons und Grafiken, Ampel mit Formen.
*/
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../webschrift/AtkinsonHyperlegibleNext-Variable.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: italic; font-weight: 200 800; font-display: swap; src: url("../webschrift/AtkinsonHyperlegibleNext-Italic-Variable.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Mono"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../webschrift/AtkinsonHyperlegibleMono-Variable.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("../webschrift/AtkinsonHyperlegible-Regular.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("../webschrift/AtkinsonHyperlegible-Bold.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap; src: url("../webschrift/AtkinsonHyperlegible-Italic.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 700 900; font-display: swap; src: url("../webschrift/AtkinsonHyperlegible-BoldItalic.woff2") format("woff2"); }
:root {
color-scheme: light dark;
--bg: var(--ink-50);
--flaeche: var(--weiss);
--text: var(--ink-900);
--text2: var(--ink-600);
--linie: var(--ink-200);
--prim: var(--gruen-700);
--prim-text: var(--weiss);
--link: var(--gruen-700);
--kachel: var(--gruen-100);
--kachel-text: var(--gruen-800);
--schatten: 0 1px 2px rgba(20, 35, 44, .06), 0 6px 20px rgba(20, 35, 44, .06);
--radius: 14px;
--seite: 1120px;
--rand: 16px;
--icon-akzent: var(--gruen-600);
--karte: var(--weiss);
--schrift: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--schrift-zahl: "Atkinson Hyperlegible Mono", ui-monospace, Consolas, monospace;
--m-offen: url("data:image/svg+xml,");
--m-arbeit: url("data:image/svg+xml,");
--m-fertig: url("data:image/svg+xml,");
--m-problem: url("data:image/svg+xml,");
--m-haken: url("data:image/svg+xml,");
--m-kreuz: url("data:image/svg+xml,");
}
@media (prefers-color-scheme: dark) {
:root {
--bg: var(--ink-900);
--flaeche: var(--ink-800);
--text: var(--ink-100);
--text2: var(--ink-300);
--linie: var(--ink-700);
--prim: var(--gruen-400);
--prim-text: var(--ink-900);
--link: var(--gruen-400);
--kachel: var(--ink-700);
--kachel-text: var(--gruen-400);
--schatten: none;
--icon-akzent: var(--gruen-400);
--karte: var(--ink-800);
}
}
* { box-sizing: border-box; }
body { overflow-x: clip; }
html { overflow-x: hidden; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0; background: var(--bg); color: var(--text);
font: 17px/1.6 var(--schrift);
}
a { color: var(--link); }
img, svg { max-width: 100%; }
h1, h2, h3 { line-height: 1.2; margin: 0; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: var(--seite); margin: 0 auto; padding: 0 var(--rand); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--weiss); color: var(--ink-900); padding: 8px 12px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--gruen-400); outline-offset: 2px; }
/* Kopf */
.kopf { position: sticky; top: 0; z-index: 20; background: var(--ink-900); color: var(--ink-100); border-bottom: 1px solid var(--ink-700); }
.kopf .wrap { display: flex; align-items: center; gap: 16px; min-height: 60px; }
.marke { display: inline-flex; align-items: center; gap: 10px; color: var(--weiss); text-decoration: none; font-weight: 800; letter-spacing: .14em; font-size: 1.15rem; }
.marke svg { flex: none; }
.kopf nav { display: none; margin-left: auto; gap: 4px; }
.kopf nav a { color: var(--ink-200); text-decoration: none; padding: 8px 12px; border-radius: 8px; font-size: .95rem; }
.kopf nav a:hover { color: var(--weiss); background: var(--ink-800); }
.kopf .anmelden { margin-left: auto; }
.knopf {
display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px;
border-radius: 8px; border: 2px solid transparent; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
background: var(--prim); color: var(--prim-text);
}
.knopf:hover { filter: brightness(1.08); }
.knopf.hell { background: var(--gruen-400); color: var(--ink-900); }
.knopf.rand { background: transparent; color: var(--ink-100); border-color: var(--ink-300); }
.knopf.rand:hover { background: var(--ink-800); filter: none; }
.kopf .knopf { min-height: 40px; padding: 6px 16px; background: transparent; color: var(--weiss); border-color: var(--ink-300); }
.kopf .knopf:hover { background: var(--ink-800); filter: none; }
/* Held */
.held { background: var(--ink-900); color: var(--ink-100); position: relative; overflow: hidden; }
.held::before { /* Raster aus Kästchen, angelehnt an die Bildmarke */
content: ""; position: absolute; inset: 0; opacity: .5;
background-image: linear-gradient(var(--ink-800) 1px, transparent 1px), linear-gradient(90deg, var(--ink-800) 1px, transparent 1px);
background-size: 48px 48px; mask-image: linear-gradient(180deg, #000, transparent 85%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.held .wrap { position: relative; display: grid; gap: 40px; padding-top: 48px; padding-bottom: 56px; }
.vorspann { color: var(--gruen-400); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; margin-bottom: 14px; }
.held h1 { font-size: clamp(2rem, 7.5vw, 3.4rem); color: var(--weiss); }
.held h1 em { font-style: normal; color: var(--gruen-400); }
.held .lead { font-size: 1.1rem; color: var(--ink-200); margin: 18px 0 26px; max-width: 34em; }
.aktionen { display: flex; flex-wrap: wrap; gap: 12px; }
.held .fakten { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--ink-300); font-size: .92rem; }
.held .fakten li::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .4em; vertical-align: -.12em; background: var(--gruen-400); -webkit-mask: var(--m-haken) center / contain no-repeat; mask: var(--m-haken) center / contain no-repeat; }
/* Beispielansicht im Held */
.vorschau { background: var(--ink-800); border: 1px solid var(--ink-700); border-radius: 18px; padding: 18px; max-width: 420px; width: 100%; justify-self: center; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.vorschau .titel { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; color: var(--weiss); }
.vorschau .titel b { font-size: 1.25rem; }
.vorschau .titel span { color: var(--ink-300); font-size: .85rem; }
.zeile { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; background: var(--ink-900); margin-bottom: 8px; color: var(--ink-100); }
.zeile .punkt { flex: none; width: 14px; height: 14px; background: var(--ink-500); }
.zeile.ok .punkt { background: var(--gruen-500); }
.zeile.laeuft .punkt { background: var(--signal-gelb); --m: var(--m-arbeit); }
.zeile.ok .punkt { --m: var(--m-fertig); }
.zeile .was { flex: 1; font-weight: 600; }
.zeile .wert { color: var(--ink-300); font-size: .9rem; }
.balken { height: 10px; border-radius: 6px; background: var(--ink-900); overflow: hidden; margin: 14px 0 6px; }
.balken i { display: block; height: 100%; width: 62%; background: linear-gradient(90deg, var(--gruen-600), var(--gruen-400)); }
.vorschau .fuss { color: var(--ink-300); font-size: .8rem; display: flex; justify-content: space-between; gap: 8px; }
/* Abschnitte */
section { scroll-margin-top: 68px; }
.abschnitt { padding-top: 56px; padding-bottom: 56px; }
.abschnitt .kopfzeile { max-width: 40em; margin-bottom: 32px; }
.abschnitt .kopfzeile .vorspann { color: var(--link); }
.abschnitt h2 { font-size: clamp(1.6rem, 5vw, 2.3rem); }
.abschnitt .kopfzeile p { color: var(--text2); margin: 12px 0 0; font-size: 1.05rem; }
.raster { display: grid; gap: 16px; grid-template-columns: 1fr; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 22px; box-shadow: var(--schatten); }
.karte h3 { font-size: 1.12rem; margin: 14px 0 8px; }
.karte p { color: var(--text2); margin: 0; }
.symbol { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: var(--kachel); color: var(--kachel-text); font-size: 1.4rem; }
.karte .vorteil { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linie); color: var(--kachel-text); }
.karte .vorteil b { color: inherit; }
.vergleich { display: grid; gap: 16px; }
.vergleich ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vergleich li { padding-left: 28px; position: relative; color: var(--text); }
.vergleich li::before { position: absolute; left: 0; font-weight: 800; }
.vergleich .vorher li::before { content: ""; width: 1em; height: 1em; background: var(--text2); -webkit-mask: var(--m-kreuz) center / contain no-repeat; mask: var(--m-kreuz) center / contain no-repeat; }
.vergleich .nachher { border-color: var(--prim); border-width: 2px; }
.vergleich .nachher li::before { content: ""; width: 1em; height: 1em; background: var(--link); -webkit-mask: var(--m-haken) center / contain no-repeat; mask: var(--m-haken) center / contain no-repeat; }
.vergleich h3 { margin-top: 0; margin-bottom: 14px; }
/* Ablauf */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: s; }
.schritte li { counter-increment: s; position: relative; padding: 22px 22px 22px 74px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.schritte li::before {
content: counter(s); position: absolute; left: 20px; top: 20px; width: 40px; height: 40px; border-radius: 10px;
background: var(--prim); color: var(--prim-text); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem;
}
.schritte h3 { font-size: 1.1rem; margin-bottom: 6px; }
.schritte p { margin: 0; color: var(--text2); }
/* Datenschutz-Band */
.band { background: var(--ink-900); color: var(--ink-100); }
.band .abschnitt .kopfzeile p { color: var(--ink-300); }
.band .vorspann { color: var(--gruen-400); }
.band h2 { color: var(--weiss); }
.band .karte { background: var(--ink-800); border-color: var(--ink-700); box-shadow: none; }
.band .karte h3 { color: var(--weiss); }
.band .karte p { color: var(--ink-300); }
.band .symbol { background: var(--ink-700); color: var(--gruen-400); }
.band a { color: var(--gruen-400); }
/* Hinweisband (Gelb) */
.hinweis { background: var(--signal-gelb); color: var(--ink-900); border-radius: var(--radius); padding: 14px 18px; font-weight: 600; margin-top: 16px; }
/* Kontakt */
.kontakt { display: grid; gap: 28px; }
.kontakt .info p { color: var(--text2); }
.kontakt .info ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.kontakt .info li::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .4em; vertical-align: -.12em; background: var(--link); -webkit-mask: var(--m-haken) center / contain no-repeat; mask: var(--m-haken) center / contain no-repeat; }
.formular { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 22px; box-shadow: var(--schatten); }
.formular label { display: block; font-weight: 600; margin-bottom: 14px; }
.formular label small { font-weight: 400; color: var(--text2); }
.formular input[type=text], .formular input[type=email], .formular textarea {
display: block; width: 100%; margin-top: 6px; padding: 12px 14px; font: inherit; color: var(--text); background: var(--bg);
border: 1.5px solid var(--ink-500); border-radius: 10px;
}
.formular textarea { min-height: 140px; resize: vertical; }
.formular .haken { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--text2); font-size: .93rem; }
.formular .haken input { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--prim); }
.formular .knopf { width: 100%; }
.honig { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.meldung { padding: 14px 16px; border-radius: 10px; margin-bottom: 16px; font-weight: 600; }
.meldung.gut { background: var(--gruen-100); color: var(--gruen-800); border: 1px solid var(--gruen-200); }
.meldung.schlecht { background: var(--signal-gelb); color: var(--ink-900); }
.meldung a { color: inherit; }
.klein { font-size: .88rem; color: var(--text2); }
/* Fuß */
.seitenfuss { background: var(--ink-900); color: var(--ink-300); padding: 36px 0 44px; font-size: .92rem; }
.seitenfuss .wrap { display: grid; gap: 16px; }
.seitenfuss a { color: var(--ink-100); }
.seitenfuss .links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.seitenfuss .marke { font-size: 1rem; }
@media (min-width: 640px) {
:root { --rand: 24px; }
.raster { grid-template-columns: repeat(2, 1fr); }
.schritte { grid-template-columns: repeat(2, 1fr); }
.formular { padding: 28px; }
}
@media (min-width: 900px) {
.kopf nav { display: flex; }
.kopf .anmelden { margin-left: 8px; }
.held .wrap { grid-template-columns: 1.15fr .85fr; align-items: center; padding-top: 88px; padding-bottom: 96px; gap: 56px; }
.abschnitt { padding-top: 88px; padding-bottom: 88px; }
.raster.drei { grid-template-columns: repeat(3, 1fr); }
.raster.vier { grid-template-columns: repeat(4, 1fr); }
.vergleich { grid-template-columns: 1fr 1fr; }
.schritte { grid-template-columns: repeat(4, 1fr); }
.schritte li { padding: 74px 20px 22px; }
.schritte li::before { left: 20px; top: 20px; }
.kontakt { grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print { .kopf { position: static; } .held::before { display: none; } }
.chip { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: .78rem; font-weight: 700; background: var(--kachel); color: var(--kachel-text); }
.karte .chip + h3 { margin-top: 12px; }
/* ===== Überarbeitung 1.37.2: Intro, Nutzen, Einblicke ===== */
.kopfzeile.mitte { margin-left: auto; margin-right: auto; text-align: center; }
.mitte-text { text-align: center; margin-top: 14px; }
.symbol.gross { width: 60px; height: 60px; font-size: 1.9rem; border-radius: 16px; }
/* Intro: Text und Gerätebild */
.held-text { max-width: 36em; }
.held .lead { max-width: 30em; }
.geraete { position: relative; width: 100%; max-width: 560px; justify-self: center; font-size: clamp(9px, 2.55vw, 14px); padding-bottom: 5.5em; }
.fenster { width: 92%; background: var(--ink-800); border: 1px solid var(--ink-700); border-radius: 1em; box-shadow: 0 1.6em 3.6em rgba(0, 0, 0, .4); overflow: hidden; }
.fenster-kopf { display: flex; align-items: center; gap: .45em; padding: .8em 1em; background: var(--ink-900); color: var(--ink-300); font-size: .85em; }
.fenster-kopf i { width: .8em; height: .8em; border-radius: 50%; background: var(--ink-700); }
.fenster-kopf span { margin-left: .6em; }
.fenster-inhalt { padding: 1em; }
.kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; margin-bottom: 1em; }
.kachel { background: var(--ink-900); border-radius: .7em; padding: .7em .9em; display: flex; flex-direction: column; }
.kachel b { font-size: 2em; line-height: 1.1; }
.kachel span { font-size: .85em; color: var(--ink-300); }
.kachel.ok b { color: var(--gruen-400); } .kachel.laeuft b { color: var(--signal-gelb); } .kachel.offen b { color: var(--ink-200); }
.liste { display: grid; gap: .5em; }
.lz { display: flex; align-items: center; gap: .8em; background: var(--ink-900); border-radius: .6em; padding: .65em .9em; color: var(--ink-100); font-size: .95em; }
.lz b { flex: none; width: 7.5em; }
.lz .bahn { flex: 1; height: .6em; background: var(--ink-700); border-radius: .4em; overflow: hidden; }
.lz .bahn i { display: block; height: 100%; border-radius: .4em; }
.lz em { flex: none; width: 3.2em; text-align: right; font-style: normal; color: var(--ink-300); font-size: .9em; }
.lz.ok .bahn i { background: var(--gruen-500); } .lz.laeuft .bahn i { background: var(--signal-gelb); }
.punkt { flex: none; width: 1em; height: 1em; background: var(--ink-500); display: inline-block; }
.punkt, .zeile .punkt { -webkit-mask: var(--m, var(--m-offen)) center / contain no-repeat; mask: var(--m, var(--m-offen)) center / contain no-repeat; }
.ok > .punkt { background: var(--gruen-500); --m: var(--m-fertig); } .laeuft > .punkt { background: var(--signal-gelb); --m: var(--m-arbeit); } .offen > .punkt { background: var(--ink-500); --m: var(--m-offen); } .rot > .punkt { background: #e5534b; --m: var(--m-problem); }
.handy { position: absolute; right: 0; bottom: 1.4em; width: 14.5em; background: var(--ink-900); border: .35em solid var(--ink-700); border-radius: 2em; padding: 1.1em; color: var(--ink-100); box-shadow: 0 1.6em 3em rgba(0, 0, 0, .5); }
.handy-kopf { font-weight: 700; color: var(--weiss); text-align: center; margin-bottom: .8em; }
.handy-zahl { background: var(--ink-800); border-radius: .8em; padding: .7em .9em; margin-bottom: .7em; }
.handy-zahl small { display: block; color: var(--ink-300); font-size: .8em; }
.handy-zahl b { font-size: 1.9em; color: var(--weiss); } .handy-zahl u { text-decoration: none; font-size: .5em; color: var(--ink-300); }
.handy-schritt { display: flex; align-items: center; gap: .6em; background: var(--ink-800); border-radius: .6em; padding: .55em .8em; margin-bottom: .45em; font-size: .9em; }
.handy-knopf { margin-top: .8em; background: var(--gruen-400); color: var(--ink-900); font-weight: 800; text-align: center; padding: .8em; border-radius: .8em; font-size: .95em; }
.beispiel { position: absolute; left: 0; bottom: 0; margin: 0; font-size: .85em; color: var(--ink-300); }
.held .wrap { padding-top: 40px; }
.streifen { background: var(--ink-800); color: var(--ink-200); border-top: 1px solid var(--ink-700); }
.streifen .wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; padding-top: 16px; padding-bottom: 16px; font-size: .95rem; }
.streifen b { margin-right: 6px; }
/* Nutzen */
.ergebnisse { margin-top: 8px; }
.ergebnis { padding: 4px 4px 4px 0; }
.ergebnis h3 { font-size: 1.2rem; margin: 16px 0 8px; }
.ergebnis p { color: var(--text2); margin: 0; }
.szenen { margin-top: 64px; }
.szenen > h3 { font-size: 1.4rem; text-align: center; margin-bottom: 24px; }
.szene { margin-bottom: 20px; }
.szene .wann { font-weight: 800; margin: 0 0 8px; letter-spacing: .02em; }
.vn { display: grid; gap: 12px; }
.vn > div { border-radius: var(--radius); padding: 18px 20px; }
.vn p { margin: 6px 0 0; }
.vn span { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.frueher { background: var(--flaeche); border: 1px dashed var(--ink-500); color: var(--text2); }
.heute { background: var(--kachel); border: 2px solid var(--prim); color: var(--text); }
.heute span { color: var(--kachel-text); }
/* Einblicke */
.zeile-zwei { display: grid; gap: 24px; margin-bottom: 56px; align-items: center; }
.zeile-zwei .text h3 { font-size: 1.5rem; margin: 16px 0 10px; }
.zeile-zwei .text p { color: var(--text2); }
.zeile-zwei .text .vorteil { color: var(--kachel-text); border-top: 1px solid var(--linie); padding-top: 12px; }
.bild { background: var(--kachel); border-radius: 22px; padding: 28px 18px; display: flex; justify-content: center; }
.mk { width: 100%; max-width: 340px; background: var(--weiss); color: var(--ink-900); border-radius: 18px; overflow: hidden; box-shadow: 0 14px 40px rgba(20, 35, 44, .25); }
.mk-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; background: var(--ink-900); color: var(--weiss); padding: 12px 16px; }
.mk-kopf span { color: var(--ink-300); font-size: .85rem; }
.mk-wert { margin: 14px 16px; padding: 10px 14px; border: 2px solid var(--ink-200); border-radius: 12px; font-size: 2rem; font-weight: 800; text-align: right; }
.mk-wert u { text-decoration: none; font-size: 1rem; color: var(--ink-600); }
.mk-block { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 16px; }
.mk-block i { font-style: normal; font-weight: 700; font-size: 1.2rem; background: var(--ink-100); border-radius: 10px; text-align: center; padding: 10px 0; }
.mk-zeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px 16px; }
.chip-foto { background: var(--gruen-100); color: var(--gruen-800); font-weight: 700; font-size: .85rem; padding: 6px 10px; border-radius: 99px; }
.mk-gross { background: var(--gruen-700); color: var(--weiss); font-weight: 800; padding: 10px 20px; border-radius: 10px; }
.mk-reihe { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ink-100); }
.mk-reihe b { flex: 1; }
.mk-reihe em { font-style: normal; font-size: .85rem; color: var(--ink-600); }
.mk-reihe .punkt { width: 14px; height: 14px; }
.mk-reihe.ok .punkt { background: var(--gruen-600); --m: var(--m-fertig); }
.mk-reihe.laeuft .punkt { background: #b36b00; } .mk-reihe.rot .punkt { background: #c62828; }
.mk-etikett { padding: 22px; text-align: center; }
.etikett { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 2px solid var(--ink-900); border-radius: 10px; padding: 14px 16px; text-align: left; }
.et-text small { display: block; letter-spacing: .12em; font-weight: 700; color: var(--ink-600); }
.et-text b { font-size: 3rem; line-height: 1; display: block; }
.et-text span { font-weight: 700; }
.qr { width: 112px; height: 112px; flex: none; }
.mk-unter { margin: 14px 0 0; color: var(--ink-600); font-size: .9rem; }
/* Kompakte Karten */
.raster.kompakt .karte { padding: 18px; }
.raster.kompakt .karte h3 { font-size: 1.05rem; margin: 12px 0 6px; }
.raster.kompakt .karte p { font-size: .95rem; }
.branchen .karte h3 { margin-top: 0; }
/* Schnittstellen */
.schnittstellen { display: grid; gap: 24px; align-items: center; }
.diagramm { position: relative; width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 4 / 3; }
.diagramm > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.knoten { position: absolute; transform: translate(-50%, -50%); background: var(--ink-800); border: 1px solid var(--ink-700); color: var(--ink-100); border-radius: 12px; padding: 10px 14px; font-size: .9rem; font-weight: 600; text-align: center; max-width: 42%; }
.mitte-knoten { left: 50%; top: 50%; background: var(--ink-700); border-color: var(--gruen-400); display: flex; align-items: center; gap: 10px; font-size: 1.1rem; letter-spacing: .1em; color: var(--weiss); }
.k1 { left: 16%; top: 16%; } .k2 { left: 84%; top: 16%; } .k3 { left: 14%; top: 83%; } .k4 { left: 50%; top: 92%; } .k5 { left: 86%; top: 83%; }
.schnitt-text h3 { color: var(--weiss); font-size: 1.4rem; margin-bottom: 10px; }
.schnitt-text p { color: var(--ink-300); }
.schnitt-text b { color: var(--weiss); }
.hinweis-ehrlich { margin: 24px auto 0; max-width: 46em; background: var(--kachel); border-left: 4px solid var(--prim); padding: 14px 18px; border-radius: 10px; color: var(--text); }
.chip.idee { background: transparent; border: 1px solid var(--linie); color: var(--text2); }
@media (min-width: 640px) {
.vn { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
.held .wrap { grid-template-columns: 1fr 1fr; padding-top: 72px; }
.zeile-zwei { grid-template-columns: 1fr 1fr; gap: 56px; }
.zeile-zwei.umgekehrt .bild { order: -1; }
.schnittstellen { grid-template-columns: 1.1fr .9fr; gap: 48px; }
.bild { padding: 40px; }
}
/* ===== Terminbuchung (ab 1.39), ohne Skript ===== */
#termin { scroll-margin-top: 76px; }
.buchung fieldset { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.buchung legend { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-weight: 800; font-size: 1.08rem; padding: 0; margin-bottom: 12px; }
.buchung legend small { font-weight: 400; font-size: .85rem; color: var(--text2); }
.buchung .nr { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--prim); color: var(--prim-text); font-size: .9rem; }
/* Kompakter Terminkalender (ab 1.39.1): Wochenraster oben, Uhrzeiten des gewählten Tages darunter */
.kal { position: relative; }
.kal .tw { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.kal-raster { display: grid; grid-template-columns: 2.9em repeat(var(--sp, 5), 1fr); gap: 4px; align-items: center; }
.kal-raster .wt { text-align: center; font-size: .75rem; font-weight: 800; color: var(--text2); letter-spacing: .04em; }
.kal-raster .kw { font-size: .7rem; color: var(--text2); font-variant-numeric: tabular-nums; }
.formular .tz, .tz { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 46px; margin: 0 !important;
border: 1.5px solid var(--ink-500); border-radius: 10px; background: var(--flaeche); cursor: pointer; line-height: 1.15; font-weight: 400 !important; }
.tz b { font-size: .98rem; font-variant-numeric: tabular-nums; }
.tz i { font-style: normal; font-size: .68rem; opacity: .75; }
.tz:hover { border-color: var(--prim); }
.kal .tw:focus-visible ~ .kal-raster { outline: 3px solid var(--gruen-400); outline-offset: 3px; border-radius: 10px; }
.tz.leer { border-color: transparent; background: transparent; cursor: default; color: var(--text2); opacity: .55; }
.tz.leer b { font-weight: 400; font-size: .85rem; }
.tz::after { content: ""; display: none; position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--gruen-600); border: 2px solid var(--flaeche); }
.kal-hinweis { margin: 8px 0 12px; font-size: .8rem; color: var(--text2); }
.panel { display: none; background: var(--bg); border: 1.5px solid var(--linie); border-radius: 12px; padding: 10px 10px 12px; }
.panel-kopf { margin: 0 0 8px; font-weight: 800; }
.zeiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; padding: 0; }
.zeit { position: relative; margin: 0 !important; }
.zeit input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.zeit span { display: flex; align-items: center; justify-content: center; min-height: 38px; font-size: .95rem; border: 1.5px solid var(--ink-500); border-radius: 10px; font-weight: 700; background: var(--flaeche); font-variant-numeric: tabular-nums; }
.zeit input:hover + span { border-color: var(--prim); }
.zeit input:focus-visible + span { outline: 3px solid var(--gruen-400); outline-offset: 2px; }
.zeit input:checked + span { background: var(--prim); border-color: var(--prim); color: var(--prim-text); }
.zeit input:checked + span::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .3em; background: currentColor; -webkit-mask: var(--m-haken) center / contain no-repeat; mask: var(--m-haken) center / contain no-repeat; }
.buchung textarea { min-height: 90px; }
.hinweis-unten { margin: 10px 0 0; text-align: center; }
.alternativ { margin-top: 16px; }
.alternativ > summary { cursor: pointer; font-weight: 700; color: var(--link); padding: 10px 0; }
.alternativ[open] > summary { margin-bottom: 8px; }
/* Whitepaper (Datenschutz, IT-Sicherheit) */
.whitepaper { margin-top: 36px; }
.whitepaper > h3 { font-size: 1.25rem; color: var(--weiss); }
.whitepaper > p { color: var(--ink-300); margin: 6px 0 16px; }
.raster.zwei { grid-template-columns: 1fr; }
.download { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 8px 14px; text-decoration: none; color: inherit; }
.download .dl-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.download .dl-text b { color: var(--weiss); }
.download .dl-text small { color: var(--ink-300); font-size: .9rem; line-height: 1.45; }
.download .dl-knopf { grid-column: 2; font-weight: 800; color: var(--gruen-400); white-space: nowrap; }
a.download:hover { border-color: var(--gruen-400); }
.download.leer .dl-knopf { font-weight: 600; }
/* Terminseite */
.schmal-termin { max-width: 640px; }
.termin-karte h1 { font-size: clamp(1.4rem, 5vw, 1.9rem); margin-bottom: 10px; }
.status-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--text2); }
.badge { display: inline-block; padding: 3px 12px; border-radius: 99px; font-size: .85rem; font-weight: 800; }
.badge.gruen { background: var(--gruen-100); color: var(--gruen-800); }
.badge.rot { background: #fde2e1; color: #8c1d18; }
.badge.grau { background: var(--ink-100); color: var(--ink-700); }
.gedimmt { color: var(--text2); }
.knopfreihe, .aenderung { display: grid; gap: 10px; margin: 18px 0; }
.termin-karte .knopf { width: 100%; }
.knopf.zweit { background: transparent; color: var(--link); border-color: var(--link); }
.knopf.warn { background: #b42318; color: #fff; }
.absagen > summary { cursor: pointer; text-align: center; padding: 12px; color: var(--text2); font-weight: 600; }
.absagen form { margin-top: 6px; }
.termin-karte .buchung { margin-top: 18px; border-top: 1px solid var(--linie); padding-top: 18px; }
@media (min-width: 640px) {
.raster.zwei { grid-template-columns: 1fr 1fr; }
.knopfreihe { grid-template-columns: 1fr 1fr; }
}
/* Eigene Icons und Grafiken (ab 1.46) */
svg.ic { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; flex: none; vertical-align: -.25em; overflow: visible; }
.symbol svg.ic { width: 26px; height: 26px; }
.symbol.gross svg.ic { width: 34px; height: 34px; }
.streifen b svg.ic { width: 22px; height: 22px; color: var(--gruen-400); --icon-akzent: var(--gruen-400); }
.knoten svg.ic { width: 20px; height: 20px; margin-right: 6px; }
.ic-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.grafik { display: block; width: 100%; height: auto; }
.szenen-grafik { max-width: 760px; margin: 0 auto 22px; }
.ablauf-grafik { max-width: 960px; margin: 8px auto 0; }
.mk-block i svg.ic { width: 22px; height: 22px; }
.chip-foto svg.ic { width: 18px; height: 18px; vertical-align: -.2em; }
/* Zahlen in der Zahlenschrift (Manual Kapitel 05) */
.handy-zahl b, .mk-wert, .kachel b, .zeit span { font-family: var(--schrift-zahl); font-variant-numeric: tabular-nums; }
.bild svg.grafik { max-width: 360px; margin: 0 auto; }
.export-grafik { max-width: 300px; margin: 0 auto 20px; }
.ablauf-grafik { margin: 0 auto 24px; }
/* Whitepaper anfordern (ab 1.54): Formular mit Bestätigung per E-Mail */
#whitepaper { scroll-margin-top: 76px; }
.wp-formular { margin-top: 18px; color: var(--text); }
.wp-formular h4 { font-size: 1.15rem; margin: 0 0 14px; }
.wp-formular fieldset { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.wp-formular legend { font-weight: 800; padding: 0; margin-bottom: 8px; }
.wp-formular .wp-auswahl .haken { margin-bottom: 8px; color: var(--text); font-size: 1rem; }
.wp-felder { display: grid; gap: 0 18px; }
.wp-einwilligung { background: var(--kachel); border-left: 4px solid var(--prim); padding: 12px 14px; border-radius: 10px; }
.wp-einwilligung b { color: var(--text); font-weight: 600; }
.wp-meldung { margin-top: 18px; }
.wp-ersatz { margin-top: 16px; }
.wp-seite .formular h1 { font-size: clamp(1.5rem, 5vw, 2rem); margin-bottom: 12px; }
.wp-seite .dl-liste { display: grid; gap: 10px; margin: 18px 0; }
@media (min-width: 640px) {
.wp-felder { grid-template-columns: 1fr 1fr; }
}
/* Termin und Kontakt als zwei Bereiche (ab 1.54) */
.bereich-vorspann { color: var(--link); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; margin-bottom: 14px; }
.bereich-titel { font-size: clamp(1.6rem, 5vw, 2.3rem); }
/* ===== Überarbeitung 1.55: modernere Blöcke, Einblenden beim Scrollen, GIFs, Whitepaper-Fenster ===== */
.held { background: radial-gradient(1100px 520px at 85% 10%, rgba(127, 209, 139, .16), transparent 60%), radial-gradient(800px 480px at 0% 100%, rgba(47, 102, 148, .22), transparent 60%), var(--ink-900); }
.held h1 { font-size: clamp(2.2rem, 8vw, 4rem); letter-spacing: -.025em; line-height: 1.06; }
.held .lead { font-size: clamp(1.05rem, 2.6vw, 1.22rem); }
.kopf { background: rgba(20, 35, 44, .88); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }
.kopf .kopf-termin { background: var(--gruen-400); color: var(--ink-900); border-color: var(--gruen-400); }
.kopf .kopf-termin:hover { background: var(--gruen-400); filter: brightness(1.08); }
.knopf { border-radius: 999px; transition: transform .2s ease, filter .2s ease, background-color .2s ease; }
.knopf:hover { transform: translateY(-1px); }
.formular .knopf:hover { transform: none; }
/* Abschnittsköpfe mit laufender Nummer */
main { counter-reset: abschnitt; }
.abschnitt .kopfzeile .vorspann { counter-increment: abschnitt; display: inline-flex; align-items: center; gap: 10px; }
.abschnitt .kopfzeile .vorspann::before { content: counter(abschnitt, decimal-leading-zero); font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 99px; border: 1.5px solid currentColor; font-size: .75rem; letter-spacing: .04em; }
.abschnitt h2, .bereich-titel { font-size: clamp(1.8rem, 5.6vw, 2.9rem); letter-spacing: -.02em; line-height: 1.1; }
/* Karten: ruhiger Rahmen, beim Darüberfahren leicht anheben */
.karte { border-radius: 18px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.raster .karte:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(20, 35, 44, .06), 0 18px 40px rgba(20, 35, 44, .12); border-color: var(--ink-300); }
.band .raster .karte:hover { border-color: var(--gruen-400); box-shadow: none; }
.symbol { border-radius: 14px; }
/* Einblicke: jeder Block ein ganzes Bild, mit animierter Beispielansicht */
.zeile-zwei { margin-bottom: 0; padding: 40px 0; }
.zeile-zwei + .zeile-zwei { border-top: 1px solid var(--linie); }
.zeile-zwei .text h3 { font-size: clamp(1.5rem, 4.4vw, 2rem); letter-spacing: -.015em; }
.bild { border-radius: 26px; padding: 18px; background: linear-gradient(140deg, var(--gruen-100), var(--ink-100)); }
.gif { margin: 0; width: 100%; max-width: 560px; }
.gif img { display: block; width: 100%; height: auto; border-radius: 14px; }
.gif figcaption { margin-top: 10px; font-size: .8rem; color: var(--ink-600); text-align: center; }
@media (prefers-color-scheme: dark) {
.bild { background: linear-gradient(140deg, var(--ink-800), var(--ink-700)); }
.gif figcaption { color: var(--ink-300); }
}
/* Termin ohne eingerichtete Buchung */
.termin-ersatz { text-align: center; }
.termin-ersatz h3 { font-size: 1.25rem; margin: 16px 0 8px; }
.termin-ersatz p { color: var(--text2); }
.termin-ersatz .knopf { width: auto; }
/* Whitepaper-Karten mit „Anfordern“ */
.download .dl-knopf { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; justify-self: start; }
a.dl-knopf { padding: 8px 16px; margin-top: 6px; border-radius: 99px; border: 1.5px solid var(--gruen-400); color: var(--gruen-400); }
a.dl-knopf:hover { background: var(--gruen-400); color: var(--ink-900); }
.band .wp-ersatz .knopf.zweit { color: var(--gruen-400); border-color: var(--gruen-400); }
/* Whitepaper-Fenster: ohne Skript über #wp-anfordern, mit Skript über die Klasse „offen“ */
.wp-fenster { display: none; position: fixed; inset: 0; z-index: 60; align-items: flex-end; justify-content: center; padding: 0; }
html:not(.js) .wp-fenster:target, .wp-fenster.offen { display: flex; }
.wp-huelle { position: absolute; inset: 0; background: rgba(20, 35, 44, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); cursor: default; }
.wp-box { position: relative; width: 100%; max-width: 640px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
background: var(--flaeche); color: var(--text); border-radius: 22px 22px 0 0; padding: 18px 18px 22px; box-shadow: 0 -10px 40px rgba(0, 0, 0, .3); animation: wp-rein .28s ease-out; }
.wp-box-kopf { position: sticky; top: -18px; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -18px -18px 12px; padding: 16px 18px 12px; background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.wp-box-kopf h2 { font-size: 1.3rem; }
.wp-zu { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border-radius: 50%; color: var(--text); background: var(--bg); }
.wp-zu svg.ic { width: 22px; height: 22px; }
.wp-box .wp-formular { margin: 0; border: 0; padding: 0; box-shadow: none; background: transparent; }
.wp-box .wp-meldung { margin-top: 4px; }
.wp-zu-knopf { width: 100%; }
html.fenster-offen, html.fenster-offen body { overflow: hidden; }
@keyframes wp-rein { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 640px) {
.wp-fenster { align-items: center; padding: 24px; }
.wp-box { border-radius: 22px; padding: 24px 28px 28px; }
.wp-box-kopf { top: -24px; margin: -24px -28px 16px; padding: 20px 28px 14px; }
}
/* Einblenden beim Scrollen (nur mit Skript und ohne „Bewegung reduzieren“) */
.einblenden { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.einblenden.sichtbar { opacity: 1; transform: none; }
.raster.einblenden > * { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.raster.einblenden.sichtbar > * { opacity: 1; transform: none; }
.raster.einblenden.sichtbar > :nth-child(2) { transition-delay: .07s; } .raster.einblenden.sichtbar > :nth-child(3) { transition-delay: .14s; }
.raster.einblenden.sichtbar > :nth-child(4) { transition-delay: .21s; } .raster.einblenden.sichtbar > :nth-child(5) { transition-delay: .28s; }
.raster.einblenden.sichtbar > :nth-child(6) { transition-delay: .35s; } .raster.einblenden.sichtbar > :nth-child(n+7) { transition-delay: .42s; }
.zeile-zwei.einblenden .bild { transform: scale(.96); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.zeile-zwei.einblenden.sichtbar .bild { transform: none; }
.raster.einblenden.sichtbar > .karte:hover { transform: translateY(-3px); transition-delay: 0s; }
@media (min-width: 900px) {
.bild { padding: 28px; }
}
@media (prefers-reduced-motion: reduce) {
.karte, .knopf, .wp-box { transition: none; animation: none; }
.raster .karte:hover, .knopf:hover { transform: none; }
}
/* ===== 1.57: Seiten statt endloser Liste, Handlungsaufrufe, Termin zugeklappt ===== */
/* Jeder Abschnitt (Klasse seite) ist höchstens etwa einen Bildschirm hoch. Am PC rastet die Seite Abschnitt für
Abschnitt ein wie beim Umblättern; am Handy wischen Kartenreihen seitwärts statt die Seite lang zu machen. */
.seite { scroll-snap-align: start; }
@media (min-width: 900px) and (min-height: 640px) {
.seite { min-height: calc(100vh - 61px); min-height: calc(100svh - 61px); display: flex; flex-direction: column; justify-content: center; padding-top: 40px; padding-bottom: 40px; }
.held.seite { min-height: calc(100vh - 61px - 58px); min-height: calc(100svh - 61px - 58px); }
.held.seite .wrap { min-height: 0; padding-top: 32px; padding-bottom: 32px; }
.seite > .kopfzeile { margin-bottom: 24px; }
.zeile-zwei.seite, .seite-einblick .zeile-zwei { min-height: 0; padding: 24px 0; }
.zeile-zwei + .zeile-zwei, .seite-einblick + .zeile-zwei { border-top: 0; }
.seite-einblick .gif { max-width: 480px; }
.seite .raster.kompakt .karte p { font-size: .9rem; }
#roadmap .karte, #funktionen .karte { padding: 16px; }
#roadmap .karte p { font-size: .92rem; }
}
@media (min-width: 900px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
html.bewegt { scroll-snap-type: y mandatory; scroll-padding-top: 61px; }
}
#einblicke { padding-top: 0; padding-bottom: 0; }
/* Handlungsaufruf im Kopfbereich */
.knopf.gross { min-height: 52px; padding: 12px 26px; font-size: 1.08rem; box-shadow: 0 8px 24px rgba(127, 209, 139, .25); }
.aktionen .knopf svg.ic { width: 20px; height: 20px; }
.cta-zusatz { margin: 12px 0 0; color: var(--ink-300); font-size: .92rem; }
/* Handlungsaufruf nach dem ersten Block */
.cta-band { margin-top: 36px; display: grid; gap: 16px; align-items: center; padding: 22px 24px; border-radius: 20px;
background: linear-gradient(120deg, var(--ink-900), var(--ink-800)); color: var(--ink-100); }
.cta-band b { display: block; color: var(--weiss); font-size: 1.25rem; margin-bottom: 4px; }
.cta-band span { color: var(--ink-300); }
.cta-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.cta-band .knopf { background: var(--gruen-400); color: var(--ink-900); }
.cta-band .knopf.zweit { background: transparent; color: var(--weiss); border-color: var(--ink-300); }
@media (min-width: 760px) { .cta-band { grid-template-columns: 1fr auto; } }
.szenen { margin-top: 0; }
.szenen-titel { text-align: center; margin-bottom: 24px; }
.whitepaper { margin-top: 0; }
.whitepaper .kopfzeile h2 { color: var(--weiss); }
/* Terminbuchung: Schritte zum Aufklappen */
.schritt-klapp { border: 1.5px solid var(--linie); border-radius: 14px; margin-bottom: 12px; background: var(--flaeche); }
.schritt-klapp > summary { list-style: none; cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 14px 16px; font-weight: 800; font-size: 1.05rem; }
.schritt-klapp > summary::-webkit-details-marker { display: none; }
.schritt-klapp > summary::after { content: ""; margin-left: auto; width: 1.1em; height: 1.1em; background: currentColor; -webkit-mask: var(--m-auf) center / contain no-repeat; mask: var(--m-auf) center / contain no-repeat; transition: transform .2s ease; }
.schritt-klapp[open] > summary::after { transform: rotate(180deg); }
.schritt-klapp > summary small { font-weight: 400; font-size: .85rem; color: var(--text2); }
.schritt-klapp > summary small.gewaehlt { color: var(--link); font-weight: 700; }
.schritt-klapp > fieldset { border: 0; margin: 0; padding: 0 16px 14px; min-width: 0; }
:root { --m-auf: url("data:image/svg+xml,"); }
.wp-lesen { font-size: .88rem; }
/* Handy: Kartenreihen seitwärts wischen statt untereinander (kürzere Seite) */
@media (max-width: 639px) {
.raster.vier, .raster.drei, .raster.kompakt { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px;
margin: 0 calc(-1 * var(--rand)); padding: 4px var(--rand) 14px; scroll-padding: 0 var(--rand); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.raster.vier::-webkit-scrollbar, .raster.drei::-webkit-scrollbar { display: none; }
.raster.vier > *, .raster.drei > * { flex: 0 0 82%; scroll-snap-align: start; }
.raster.einblenden > * { opacity: 1; transform: none; }
.abschnitt { padding-top: 44px; padding-bottom: 44px; }
}
@media (min-width: 900px) {
.zeile-zwei { grid-template-columns: .85fr 1.15fr; }
.zeile-zwei.umgekehrt { grid-template-columns: 1.15fr .85fr; }
}
@media (min-width: 900px) and (min-height: 640px) {
.zeile-zwei.seite { display: grid; align-content: center; }
}
/* Meldungen als Pop-up (ab 1.58, wie die App ab 1.57): schweben unter der Kopfleiste, blenden aus, Antippen schließt */
.pop-stapel { position: fixed; left: 50%; top: 72px; transform: translateX(-50%); width: min(560px, calc(100vw - 24px)); z-index: 450;
display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.pop { margin: 0; padding: 12px 16px; border-radius: 12px; font-weight: 600; overflow-wrap: anywhere; box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
pointer-events: auto; cursor: pointer; animation: pop-aus 6s ease-in forwards; }
.pop.fehler, .pop.warn { animation-duration: 10s; }
.pop:hover, .pop:focus { animation-play-state: paused; }
.pop.fehler { background: #fde3e1; color: #8c1d18; border: 1px solid #f3b6b0; }
.pop.warn { background: #fff1d9; color: #6d4a00; border: 1px solid #f2cf8a; }
.pop.info { background: var(--ink-100); color: var(--ink-900); border: 1px solid var(--ink-200); }
.pop.ok { background: var(--gruen-100); color: var(--gruen-800); border: 1px solid var(--gruen-200); }
.pop.weg { display: none; }
@keyframes pop-aus { 0% { opacity: 0; } 4%, 85% { opacity: 1; } 99% { opacity: 0; } 100% { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) { .pop { animation-name: pop-aus; } }
@media print { .pop-stapel { display: none; } }
@media (min-width: 900px) and (max-height: 900px) {
.held h1 { font-size: 3.1rem; }
.held .lead { margin: 14px 0 20px; }
.held .fakten { margin-top: 18px; }
}
/* 1.59.1: Kontaktformular startet zugeklappt (wie die Terminschritte); die Klappe ist die Karte */
.kontakt-klapp { border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); margin: 0; }
.kontakt-klapp > summary { padding: 18px 22px; font-size: 1.1rem; }
.kontakt-klapp > summary svg.ic { width: 1.3em; height: 1.3em; color: var(--link); }
.kontakt-klapp > .formular { border: 0; box-shadow: none; background: transparent; padding-top: 4px; }
/* 1.59.1: Fußzeile mit eigenem Akzent (Grün statt Tinte) und über die ganze Breite */
.seitenfuss { width: 100%; scroll-snap-align: end; background: linear-gradient(120deg, var(--gruen-800) 0%, #10391e 60%, var(--ink-900) 100%); color: var(--gruen-200); border-top: 4px solid var(--gruen-400); }
.seitenfuss .wrap { max-width: none; padding: 0 clamp(16px, 4vw, 56px); }
.seitenfuss a { color: #ffffff; }
.seitenfuss .links a:hover { color: var(--gruen-400); }
@media (min-width: 900px) {
.seitenfuss .wrap { grid-template-columns: auto 1fr auto; align-items: center; gap: 16px 40px; }
}
/* Umschalter Deutsch/Englisch (ab 1.65, Stufenplan P4): zwei kleine Links, die gewählte Sprache hervorgehoben */
.sprachwahl { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--ink-700); border-radius: 8px; font-size: .82rem; line-height: 1; }
.sprachwahl a { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 30px; padding: 0 8px; border-radius: 6px; color: var(--ink-200); text-decoration: none; font-weight: 700; letter-spacing: .04em; }
.sprachwahl a:hover { color: var(--weiss); background: var(--ink-800); }
.sprachwahl a.aktiv { background: var(--ink-700); color: var(--weiss); }
.kopf .kopf-sprache { margin-left: auto; flex: none; }
.kopf nav.sprachwahl { display: inline-flex; } /* sonst blendet „.kopf nav“ den Umschalter auf dem Handy aus */
.kopf .kopf-sprache ~ .anmelden { margin-left: 0; }
/* Startseite am schmalen Handy: oben nur Logo und Termin-Knopf, der Umschalter steht dann unten im Fuß */
@media (max-width: 419px) { .kopf .kopf-sprache.kann-weg { display: none; } .kopf .kopf-sprache.kann-weg ~ .anmelden { margin-left: auto; } }
@media (min-width: 900px) {
.kopf nav ~ .kopf-sprache { margin-left: 8px; }
.seitenfuss .wrap { grid-template-columns: auto 1fr auto auto; }
}
.seitenfuss .fuss-sprache { justify-self: start; border-color: rgba(255, 255, 255, .35); }
.seitenfuss .fuss-sprache a { color: #ffffff; }
.seitenfuss .fuss-sprache a.aktiv { background: rgba(255, 255, 255, .18); }
/* ===== 1.67 (Patrick 20.10.2026): Einrasten mittig, Seitennavigation, nach oben, Termin-Kachel, Wischhinweise ===== */
/* Jeder Abschnitt rastet mittig im freien Bereich unter der Kopfleiste ein. Ist einer doch höher (Skript setzt zu-hoch),
rastet er oben ein, damit nichts verdeckt wird. */
@media (min-width: 900px) and (min-height: 640px) {
.seite, #termin, #whitepaper { scroll-snap-align: center; scroll-margin-top: 0; }
.seite.zu-hoch { scroll-snap-align: start; }
/* „So arbeiten Sie damit“ war am PC höher als der Bildschirm: Bild und Abstände begrenzen */
.seite-einblick > .kopfzeile { margin-bottom: 8px; }
.seite-einblick > .kopfzeile p { font-size: 1rem; margin-top: 6px; }
.seite .gif img { max-height: calc(100svh - 61px - 300px); width: auto; margin: 0 auto; }
.zeile-zwei.seite .gif img { max-height: calc(100svh - 61px - 140px); }
.seite .zeile-zwei .text h3 { margin: 10px 0 8px; }
}
/* Termin als eigene Kachel über die ganze Breite */
.band-termin { background: linear-gradient(160deg, var(--gruen-100), var(--weiss) 70%); border-top: 4px solid var(--gruen-500); border-bottom: 1px solid var(--linie); }
.band-termin .vorspann { color: var(--gruen-700); }
.band-termin .formular { box-shadow: 0 12px 34px rgba(23, 81, 42, .14); border-color: var(--gruen-200); }
@media (prefers-color-scheme: dark) {
.band-termin { background: linear-gradient(160deg, #123522, var(--ink-900) 70%); border-top-color: var(--gruen-400); border-bottom-color: var(--ink-700); }
.band-termin .vorspann { color: var(--gruen-400); }
.band-termin .formular { border-color: var(--ink-700); }
}
/* Was erfasst wird (Einsatzbereiche) */
.erfasst { list-style: none; margin: -8px 0 22px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.erfasst li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: var(--kachel); color: var(--kachel-text); font-size: .9rem; font-weight: 600; }
.erfasst svg.ic { width: 1.1em; height: 1.1em; }
/* Kurze Haken mit aufklappbarem Wortlaut (Whitepaper-Fenster) */
.haken-block { margin-bottom: 10px; }
.haken-block .haken { margin-bottom: 2px; }
.wortlaut { margin: 0 0 0 34px; font-size: .86rem; color: var(--text2); }
.wortlaut summary { cursor: pointer; color: var(--link); text-decoration: underline; width: max-content; }
.wortlaut p { margin: 6px 0 0; }
/* Knopf nach oben: schwebt unten rechts, erscheint nach dem ersten Abschnitt */
.nach-oben { position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 48px; height: 48px; border-radius: 50%; display: flex;
align-items: center; justify-content: center; background: var(--ink-900); color: var(--weiss); border: 2px solid var(--gruen-400);
box-shadow: 0 8px 22px rgba(0, 0, 0, .3); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s, transform .25s; }
.nach-oben svg.ic { width: 24px; height: 24px; }
.nach-oben.zeigen { opacity: 1; transform: none; pointer-events: auto; }
.nach-oben:hover { background: var(--ink-800); }
html:not(.js) .nach-oben { display: none; }
html.fenster-offen .nach-oben { display: none; }
/* Seitennavigation am rechten Rand (PC): Linie füllt sich mit dem Scrollen, Punkt je Abschnitt, Name beim Zeigen */
.seitennav { display: none; }
@media (min-width: 900px) {
.seitennav { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 30; display: flex; flex-direction: column;
align-items: flex-end; gap: 6px; padding: 8px 4px; transition: opacity .25s; }
.seitennav.weg { opacity: 0; pointer-events: none; }
.sn-linie { position: absolute; right: 12px; top: 14px; bottom: 14px; width: 2px; background: rgba(125, 144, 156, .35); border-radius: 2px; overflow: hidden; }
.sn-linie i { position: absolute; inset: 0; background: var(--gruen-500); transform-origin: top; transform: scaleY(0); }
.sn-punkt { position: relative; display: flex; align-items: center; justify-content: flex-end; width: 26px; height: 22px; padding: 0;
border: 0; background: none; cursor: pointer; font: inherit; }
.sn-punkt::after { content: ""; width: 10px; height: 10px; margin-right: 4px; border-radius: 50%; background: var(--bg); border: 2px solid var(--ink-500);
transition: transform .2s, background .2s, border-color .2s; }
.sn-punkt.aktiv::after { background: var(--gruen-500); border-color: var(--gruen-500); transform: scale(1.35); }
.sn-punkt span { position: absolute; right: 30px; white-space: nowrap; padding: 4px 10px; border-radius: 8px; background: var(--ink-900);
color: var(--weiss); font-size: .82rem; font-weight: 700; opacity: 0; transform: translateX(6px); pointer-events: none; transition: opacity .2s, transform .2s; }
.sn-punkt:hover span, .sn-punkt:focus-visible span, .seitennav:hover .sn-punkt.aktiv span { opacity: 1; transform: none; }
.nach-oben { right: 52px; }
}
/* Fortschritt am Handy: dünner Balken unter der Kopfleiste */
.fortschritt { position: fixed; left: 0; right: 0; top: 60px; height: 3px; z-index: 21; pointer-events: none; }
.fortschritt i { display: block; height: 100%; background: var(--gruen-500); transform-origin: left; transform: scaleX(0); }
@media (min-width: 900px) { .fortschritt { display: none; } }
@media print { .seitennav, .fortschritt, .nach-oben { display: none !important; } }
/* Wischbare Kartenreihen am Handy: Punkte und Hinweis darunter */
.wisch-punkte { display: none; }
@media (max-width: 639px) {
.wisch-punkte { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 2px 0 6px; }
.wisch-punkte i { width: 7px; height: 7px; border-radius: 50%; background: var(--linie); transition: background .2s, width .2s; }
.wisch-punkte i.aktiv { width: 18px; border-radius: 4px; background: var(--gruen-500); }
.wisch-text { margin-left: 8px; font-size: .8rem; color: var(--text2); transition: opacity .3s; }
.wisch-text::after { content: " \2192"; }
.wisch-punkte.gewischt .wisch-text { opacity: 0; }
.band .wisch-punkte i { background: var(--ink-700); }
.band .wisch-text { color: var(--ink-300); }
}
/* 1.67: Abschnitte passen auch auf niedrige PC-Bildschirme (Laptop 1366 × 768, 1280 × 720) in den freien Bereich */
@media (min-width: 900px) and (min-height: 640px) {
#material .karte { padding: 16px 18px; }
#material .karte h3 { margin-top: 0; font-size: 1.05rem; }
#material .karte p { font-size: .92rem; }
#material .mitte-text { margin: 14px 0 0; }
}
@media (min-width: 900px) and (min-height: 640px) and (max-height: 920px) {
.seite { padding-top: 20px; padding-bottom: 20px; }
.seite > .kopfzeile, .seite .kopfzeile { margin-bottom: 18px; }
.abschnitt h2 { font-size: 2rem; }
.abschnitt .kopfzeile p { font-size: 1rem; margin-top: 8px; }
.erfasst { margin: -4px 0 14px; }
.erfasst li { padding: 4px 10px; font-size: .85rem; }
.seite .karte { padding: 16px 18px; }
.seite .karte h3 { margin: 10px 0 6px; font-size: 1.05rem; }
.seite .karte p { font-size: .92rem; line-height: 1.5; }
.seite .symbol { width: 40px; height: 40px; }
.seite .symbol.gross { width: 48px; height: 48px; }
.cta-band { margin-top: 18px; padding: 16px 20px; }
}
@media (min-width: 900px) and (min-height: 640px) and (max-height: 780px) {
.abschnitt h2 { font-size: 1.75rem; }
.vorspann { margin-bottom: 8px; }
.seite .karte p { font-size: .88rem; }
.seite .raster { gap: 12px; }
.szene { margin-bottom: 12px; }
.szenen-titel { margin-bottom: 14px; }
.szene .vn > div { padding-top: 10px; padding-bottom: 10px; }
}
/* 1.67: beide Pflicht-Haken im Whitepaper-Fenster gleich hervorgehoben; Seitennavigation nicht über dem Fenster */
.haken-block .wp-lesen { font-size: inherit; background: var(--kachel); border-left: 4px solid var(--prim); padding: 12px 14px; border-radius: 10px; }
.haken-block .wp-lesen b { color: var(--text); font-weight: 600; }
html.fenster-offen .seitennav, html.fenster-offen .fortschritt { opacity: 0; pointer-events: none; }
/* Support-Seite (ab 1.73) */
.formular select, .formular input[type=file] { width: 100%; margin-top: 6px; font: inherit; }
.support-formular fieldset { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.support-formular legend { font-weight: 600; margin-bottom: 8px; }
.support-klassen .haken { margin-bottom: 10px; color: var(--text); font-size: 1rem; }
.support-dringend { margin-bottom: 18px; }
.ticket-verlauf { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 10px; }
.ticket-verlauf > li { border-radius: 10px; padding: 10px 14px; border: 1px solid var(--linie); border-left: 4px solid var(--linie); }
.ticket-verlauf > li.tv-support { border-left-color: var(--link); }
.tv-kopf { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.tv-text { overflow-wrap: anywhere; }
.tv-bild img { display: block; max-width: 100%; max-height: 320px; margin-top: 8px; border-radius: 6px; border: 1px solid var(--linie); }
.support-antwort h2 { font-size: 1.15rem; margin: 22px 0 10px; }
.support-erledigt { margin-top: 10px; }
.support-erledigt .knopf { width: 100%; }
/* Wissensportal sorqa.info (ab 1.74, wissen.php) */
.wissen-abmelden { margin: 0; }
.kopf .wissen-abmelden .knopf { min-height: 40px; padding: 6px 14px; }
.wissen-nav { background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.wissen-nav .wrap { display: flex; gap: 4px; overflow-x: auto; padding-top: 6px; padding-bottom: 6px; }
.wissen-nav a { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 8px 12px; border-radius: 8px; text-decoration: none; color: var(--text); font-size: .95rem; }
.wissen-nav a svg { width: 1.1em; height: 1.1em; }
.wissen-nav a:hover { background: var(--bg); }
.wissen-nav a[aria-current="page"] { background: var(--prim); color: var(--prim-text); }
.wissen-inhalt { padding-top: 28px; padding-bottom: 48px; max-width: 860px; }
.wissen-inhalt h1 { margin-top: 0; }
.wissen-suche { display: flex; gap: 8px; margin: 18px 0 22px; }
.wissen-suche input { flex: 1; min-width: 0; font: inherit; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); color: var(--text); }
.wissen-bereiche { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-bottom: 28px; }
.wissen-bereiche .karte { display: grid; gap: 4px; text-decoration: none; color: var(--text); }
.wissen-bereiche .karte:hover { border-color: var(--prim); }
.wissen-bereiche .wb-sym svg { width: 28px; height: 28px; color: var(--link); }
.wissen-liste { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.wissen-liste a { display: grid; gap: 2px; padding: 12px 16px; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); text-decoration: none; color: var(--text); }
.wissen-liste a:hover { border-color: var(--prim); }
.wissen-liste .wl-titel { font-weight: 700; color: var(--link); }
.wissen-liste .wl-titel svg { width: 1em; height: 1em; vertical-align: -.12em; }
.wissen-liste .wl-kurz { color: var(--text2); }
.wissen-liste .wl-info { font-size: .85rem; color: var(--text2); }
.wissen-kurz { font-size: 1.1rem; color: var(--text2); }
.wissen-text { line-height: 1.6; overflow-wrap: anywhere; }
.wissen-text h2 { margin: 1.6em 0 .5em; font-size: 1.3rem; }
.wissen-text h3 { margin: 1.3em 0 .4em; font-size: 1.1rem; }
.wissen-text li { margin: .25em 0; }
.wissen-hinweis { border-left: 4px solid var(--signal-gelb, #f2c94c); background: var(--flaeche); border-radius: 8px; padding: 10px 14px; margin: 14px 0; }
.wissen-hinweis p { margin: 0; }
.wissen-medium { margin: 18px 0; }
.wissen-medium img, .wissen-medium video { display: block; max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--linie); }
.wissen-medium figcaption { font-size: .88rem; color: var(--text2); margin-top: 6px; }
.wissen-fehlt { color: var(--text2); font-style: italic; }
.wissen-firma { margin: 18px 0 8px; }
/* ===== Startanimation (ab 1.76): vier Szenen à 4,5 s, gesteuert über data-szene am Block .intro (assets/js/start.js) =====
* 1 Scannen: Behälter mit Etikett, das Handy scannt, Materialien wechseln. 2 Erfassen: Waage, Kamera und Zählen laufen
* ins Handy. 3 Überblick: Probe 0456 wird in der Übersicht grün, Kacheln zählen weiter. 4 Bericht: PDF und Excel.
* Bewegung nur mit der Klasse laeuft (setzt das Skript); ohne Skript und bei „Bewegung reduzieren“ Standbild Szene 2. */
.intro { width: 100%; max-width: 560px; justify-self: center; }
.intro .buehne { max-width: none; padding-bottom: 4.6em; }
.intro .beispiel { position: static; margin: .5em 0 0; font-size: .8rem; }
.intro .fenster, .intro .handy, .behaelter, .zufluss, .bericht { transition: opacity .6s ease, transform .6s ease, box-shadow .6s ease; }
.intro[data-szene="1"] .fenster { opacity: .3; transform: scale(.96); }
.intro[data-szene="3"] .fenster { box-shadow: 0 0 0 .2em rgba(127, 209, 139, .5), 0 1.6em 3.6em rgba(0, 0, 0, .4); }
.intro[data-szene="4"] .fenster { opacity: .45; }
.intro[data-szene="4"] .handy { opacity: .5; transform: translateY(.6em); }
/* Zahlen, die in Szene 3 wechseln */
.intro .kachel b, .intro .lz em { display: inline-grid; }
.intro .lz em { justify-items: end; }
.intro .vorher, .intro .nachher { grid-area: 1 / 1; transition: opacity .3s ease; }
.intro .nachher { opacity: 0; }
.intro[data-szene="3"] .vorher, .intro[data-szene="4"] .vorher { opacity: 0; }
.intro[data-szene="3"] .nachher, .intro[data-szene="4"] .nachher { opacity: 1; }
.intro[data-szene="3"] .vorher, .intro[data-szene="3"] .nachher { transition-delay: 1.5s; }
.intro .lz.wechsel .bahn i { width: 60%; background: var(--signal-gelb); transition: width .4s ease, background-color .3s ease; }
.intro[data-szene="3"] .lz.wechsel .bahn i, .intro[data-szene="4"] .lz.wechsel .bahn i { width: 100%; background: var(--gruen-500); }
.intro[data-szene="3"] .lz.wechsel .bahn i { transition: width 1.2s ease .3s, background-color .3s ease 1.4s; }
.intro[data-szene="3"] .lz.wechsel > .punkt, .intro[data-szene="4"] .lz.wechsel > .punkt { background: var(--gruen-500); --m: var(--m-fertig); }
/* Szene 1: Behälter mit Etikett und wechselnden Materialien */
.behaelter { position: absolute; left: 3%; bottom: 1.4em; width: 15em; opacity: 0; transform: translateX(-2em); }
.intro[data-szene="1"] .behaelter { opacity: 1; transform: none; }
.material { position: relative; height: 2em; margin: 0 0 .5em; }
.material span { position: absolute; left: 0; top: 0; padding: .25em .85em; border-radius: 99px; background: var(--gruen-400); color: var(--ink-900); font-weight: 700; font-size: .9em; opacity: 0; }
.material span:first-child { opacity: 1; }
.box { position: relative; height: 9.5em; border: .3em solid var(--ink-300); border-radius: .4em; background-color: var(--ink-800);
background-image: linear-gradient(90deg, rgba(169, 186, 197, .45) .14em, transparent .14em), linear-gradient(0deg, rgba(169, 186, 197, .45) .14em, transparent .14em);
background-size: 1.6em 1.6em; box-shadow: 0 1.4em 3em rgba(0, 0, 0, .45); }
.box-etikett { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: .5em; background: var(--weiss); color: var(--ink-900); border-radius: .3em; padding: .5em .7em; font-weight: 700; font-size: .9em; white-space: nowrap; }
.qr { display: block; width: 2.6em; height: 2.6em; fill: var(--ink-900); shape-rendering: crispEdges; }
/* Handy: drei Ansichten übereinander, je Szene eine sichtbar */
.intro .handy::after { content: ""; position: absolute; inset: 0; border-radius: 1.6em; background: var(--weiss); opacity: 0; pointer-events: none; }
.handy-ansichten { display: grid; }
.handy-ansichten > div { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.intro[data-szene="1"] .handy-scan, .intro[data-szene="2"] .handy-erfassen,
.intro[data-szene="3"] .handy-fertig, .intro[data-szene="4"] .handy-fertig { opacity: 1; visibility: visible; transition-delay: 0s; }
.handy-scan, .handy-fertig { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .6em; }
.sucher { position: relative; width: 8em; height: 8em; border-radius: .8em; border: .18em solid rgba(127, 209, 139, .7); background: var(--ink-800); display: grid; place-items: center; overflow: hidden; }
.sucher .qr { width: 4.8em; height: 4.8em; fill: var(--weiss); }
.scanlinie { position: absolute; left: .7em; right: .7em; top: 18%; height: .18em; background: var(--gruen-400); box-shadow: 0 0 .8em var(--gruen-400); opacity: 0; }
.scan-text { margin: 0; color: var(--ink-300); font-size: .9em; }
.scan-treffer { margin: 0; display: flex; align-items: center; gap: .3em; color: var(--gruen-400); font-weight: 700; }
.s-foto { white-space: nowrap; }
.handy-schritt .foto { flex: none; margin-left: auto; width: 1.5em; height: 1.1em; border-radius: .25em; background: linear-gradient(135deg, var(--gruen-400), var(--gibo)); }
.gross-haken { width: 3.4em; height: 3.4em; border-radius: 50%; background: var(--gruen-400); color: var(--ink-900); display: grid; place-items: center; }
.gross-haken .ic { width: 2em; height: 2em; --icon-akzent: var(--ink-900); }
.handy-fertig b { color: var(--weiss); font-size: 1.1em; }
.handy-fertig small { color: var(--ink-300); font-size: .85em; }
/* Szene 2: Waage, Kamera, Zählen laufen ins Handy */
.zufluss { list-style: none; margin: 0; padding: 0; position: absolute; right: 15.8em; bottom: 3.4em; display: flex; flex-direction: column; align-items: flex-end; gap: .5em; opacity: 0; transform: translateX(-1em); }
.intro[data-szene="2"] .zufluss { opacity: 1; transform: none; }
.zufluss li { position: relative; display: flex; align-items: center; gap: .45em; background: var(--ink-900); border: 1px solid var(--ink-700); color: var(--ink-100); padding: .45em .8em; border-radius: 99px; font-size: .9em; font-weight: 700; box-shadow: 0 .6em 1.4em rgba(0, 0, 0, .35); }
.zufluss .ic { width: 1.3em; height: 1.3em; color: var(--gruen-400); --icon-akzent: var(--gruen-400); }
.zufluss li::after { content: ""; position: absolute; right: -1.1em; top: 50%; width: .55em; height: .55em; margin-top: -.275em; border-radius: 50%; background: var(--gruen-400); opacity: 0; }
/* Szene 4: fertiger Bericht */
.bericht { position: absolute; left: 7%; top: 10%; width: 19em; background: var(--weiss); color: var(--ink-900); border-radius: .9em; padding: 1.1em 1.2em; box-shadow: 0 1.6em 3.6em rgba(0, 0, 0, .45); opacity: 0; transform: translateY(2em) scale(.92); }
.intro[data-szene="4"] .bericht { opacity: 1; transform: none; transition-timing-function: cubic-bezier(.2, .8, .2, 1); transition-duration: .7s; }
.bericht-kopf { display: flex; align-items: center; gap: .5em; }
.bericht-kopf .ic { width: 1.6em; height: 1.6em; color: var(--gruen-700); --icon-akzent: var(--gruen-600); }
.bericht-dateien { display: flex; gap: .5em; margin: .8em 0; }
.bericht-dateien span { padding: .25em .7em; border-radius: .4em; font-weight: 800; font-size: .85em; color: var(--weiss); }
.bericht-dateien .pdf { background: var(--ampel-problem); } .bericht-dateien .xls { background: var(--gruen-700); }
.bericht ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35em; }
.bericht li { display: flex; align-items: center; gap: .4em; font-weight: 700; }
.bericht li .ic { width: 1.2em; height: 1.2em; color: var(--gruen-700); }
/* Schritte unter dem Bild und Pause-Knopf */
.intro-leiste { display: flex; align-items: center; gap: 12px; margin-top: .8em; }
.intro-schritte { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; counter-reset: schritt; }
.intro-schritte li { counter-increment: schritt; color: var(--ink-300); font-size: .82rem; font-weight: 700; min-width: 0; }
.intro-schritte span { display: block; overflow-wrap: anywhere; }
@media (max-width: 480px) { .intro-schritte { gap: 6px; } .intro-schritte li { font-size: .74rem; } }
.intro-schritte span::before { content: counter(schritt) "\00a0"; color: var(--gruen-400); }
.intro-schritte i { display: block; position: relative; height: 4px; margin-top: 5px; border-radius: 4px; background: var(--ink-700); overflow: hidden; }
.intro-schritte i::after { content: ""; position: absolute; inset: 0; background: var(--gruen-400); transform-origin: left center; transform: scaleX(0); }
.intro[data-szene="1"] .i1, .intro[data-szene="2"] .i2, .intro[data-szene="3"] .i3, .intro[data-szene="4"] .i4 { color: var(--weiss); }
.intro[data-szene="1"] .i1 i::after, .intro[data-szene="2"] .i2 i::after, .intro[data-szene="3"] .i3 i::after, .intro[data-szene="4"] .i4 i::after { transform: none; }
.intro-pause { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ink-600); background: var(--ink-800); color: var(--weiss); display: inline-grid; place-items: center; cursor: pointer; padding: 0; }
.intro-pause[hidden] { display: none; }
.intro-pause .ic { grid-area: 1 / 1; width: 18px; height: 18px; --icon-akzent: var(--gruen-400); }
.intro-pause .zeichen-start, .intro.gestoppt .intro-pause .zeichen-pause { display: none; }
.intro.gestoppt .intro-pause .zeichen-start { display: block; }
.intro-pause:hover { border-color: var(--gruen-400); }
.intro-pause:focus-visible { outline: 3px solid var(--gruen-400); outline-offset: 2px; }
/* Bewegung je Szene (nur mit Skript) */
@keyframes intro-auf { from { opacity: 0; transform: translateY(.5em); } to { opacity: 1; transform: none; } }
@keyframes intro-pop { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
@keyframes intro-wort { 0% { opacity: 0; transform: translateY(.5em); } 15%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-.5em); } }
@keyframes intro-scan { 0% { top: 18%; opacity: 0; } 10% { opacity: 1; } 50% { top: 78%; } 90% { opacity: 1; } 100% { top: 18%; opacity: 0; } }
@keyframes intro-fluss { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(1.8em); } }
@keyframes intro-blitz { 0% { opacity: 0; } 20% { opacity: .6; } 100% { opacity: 0; } }
@keyframes intro-balken { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.intro.laeuft[data-szene="1"] .material span { animation: intro-wort .9s ease both; }
.intro.laeuft[data-szene="1"] .material span:nth-child(2) { animation-delay: .9s; }
.intro.laeuft[data-szene="1"] .material span:nth-child(3) { animation-delay: 1.8s; }
.intro.laeuft[data-szene="1"] .material span:nth-child(4) { animation-delay: 2.7s; }
.intro.laeuft[data-szene="1"] .material span:nth-child(5) { animation-delay: 3.6s; }
.intro.laeuft[data-szene="1"] .scanlinie { animation: intro-scan 2.4s ease-in-out .5s both; }
.intro.laeuft[data-szene="1"] .scan-treffer, .intro.laeuft[data-szene="1"] .handy-kopf { animation: intro-auf .4s ease 2.9s both; }
.intro.laeuft[data-szene="1"] .scan-text { animation: intro-auf .4s ease reverse 2.6s both; }
.intro.laeuft[data-szene="2"] .zufluss li { animation: intro-auf .4s ease both; }
.intro.laeuft[data-szene="2"] .zufluss li::after { animation: intro-fluss .7s ease-in .4s both; }
.intro.laeuft[data-szene="2"] .zufluss .z-kamera, .intro.laeuft[data-szene="2"] .zufluss .z-kamera::after { animation-delay: 1.1s; }
.intro.laeuft[data-szene="2"] .zufluss .z-kamera::after { animation-delay: 1.4s; }
.intro.laeuft[data-szene="2"] .zufluss .z-zaehlen { animation-delay: 2.1s; }
.intro.laeuft[data-szene="2"] .zufluss .z-zaehlen::after { animation-delay: 2.4s; }
.intro.laeuft[data-szene="2"] .handy::after { animation: intro-blitz .5s ease 1.7s both; }
.intro.laeuft[data-szene="2"] .s-foto { animation: intro-auf .4s ease 1.8s both; }
.intro.laeuft[data-szene="2"] .s-merkmal { animation: intro-auf .4s ease 2.8s both; }
.intro.laeuft[data-szene="2"] .s-fraktion { animation: intro-auf .4s ease 3.3s both; }
.intro.laeuft[data-szene="3"] .gross-haken { animation: intro-pop .5s ease .2s both; }
.intro.laeuft[data-szene="3"] .kachel.ok b, .intro.laeuft[data-szene="3"] .kachel.laeuft b { animation: intro-pop .5s ease 1.5s both; }
.intro.laeuft[data-szene="4"] .bericht-dateien { animation: intro-auf .4s ease .5s both; }
.intro.laeuft[data-szene="4"] .bericht li { animation: intro-auf .4s ease .9s both; }
.intro.laeuft[data-szene="4"] .bericht li:nth-child(2) { animation-delay: 1.3s; }
.intro.laeuft[data-szene="4"] .bericht li:nth-child(3) { animation-delay: 1.7s; }
.intro.laeuft[data-szene="1"] .i1 i::after, .intro.laeuft[data-szene="2"] .i2 i::after,
.intro.laeuft[data-szene="3"] .i3 i::after, .intro.laeuft[data-szene="4"] .i4 i::after { animation: intro-balken 4.5s linear both; }
.intro.halt *, .intro.halt *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
.intro *, .intro *::before, .intro *::after { animation: none !important; transition: none !important; }
}
/* Ab 1.79 (SEO): Beispielansichten als kleines Video statt GIF. Bei „Bewegung reduzieren“ das Standbild. */
.gif video, .gif .gif-standbild img { display: block; width: 100%; height: auto; border-radius: 14px; }
.gif .gif-standbild { display: none; }
@media (prefers-reduced-motion: reduce) {
.gif video { display: none; }
.gif .gif-standbild { display: block; }
}
@media (min-width: 900px) and (min-height: 640px) {
.seite .gif video, .seite .gif .gif-standbild img { max-height: calc(100svh - 61px - 300px); width: auto; max-width: 100%; margin: 0 auto; }
.zeile-zwei.seite .gif video, .zeile-zwei.seite .gif .gif-standbild img { max-height: calc(100svh - 61px - 140px); }
}
/* Ab 1.79: Links auf die Themenseiten (Startseite: „Mehr …“ am Ende eines Abschnitts, Fußzeile: alle Themen) */
.mehr-link { margin: 24px 0 0; text-align: center; font-weight: 700; }
.mehr-link a { display: inline-flex; align-items: center; gap: 6px; color: var(--link); text-decoration: none; }
.mehr-link a:hover { text-decoration: underline; }
.mehr-link .ic { width: 1em; height: 1em; }
.band .mehr-link a { color: var(--gruen-400); }
.seitenfuss .themen-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .9rem; }
.seitenfuss .themen-links a { text-decoration: none; }
.seitenfuss .themen-links a:hover, .seitenfuss .themen-links a[aria-current] { color: var(--gruen-400); }
/* Ab 1.79: Themenseiten (inc/themen.php). Normale, fließende Seite: kein Einrasten, keine bildschirmhohen Abschnitte. */
.themenseite .seite { min-height: 0 !important; }
.themenseite .kopf nav a[aria-current] { color: var(--gruen-400); }
.brotkrumen { padding-top: 18px; font-size: .88rem; color: var(--text2); }
.brotkrumen a { color: var(--link); }
.themen-kopf { padding-bottom: 8px; max-width: calc(46em + 2 * var(--rand)); }
.themen-kopf h1, .themen-artikel h1 { font-size: clamp(1.8rem, 5.5vw, 2.7rem); margin-bottom: 18px; }
.einleitung { font-size: 1.12rem; color: var(--text2); margin: 0 0 14px; max-width: 46em; }
.themen-text { max-width: calc(46em + 2 * var(--rand)); }
.themen-text h2 { font-size: clamp(1.35rem, 4vw, 1.8rem); margin: 36px 0 12px; }
.themen-text h3 { font-size: 1.08rem; margin: 22px 0 6px; }
.themen-text p, .themen-text li { color: var(--text); line-height: 1.6; }
.themen-text p { margin: 0 0 12px; }
.themen-text a { color: var(--link); }
.schritte-liste li { margin-bottom: 10px; }
.inhaltsverzeichnis { margin: 18px 0 8px; padding: 14px 20px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.inhaltsverzeichnis ol { margin: 0; padding-left: 1.3em; }
.themen-karten { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 700px) { .themen-karten { grid-template-columns: repeat(2, 1fr); } }
.themen-karten a.karte { display: flex; flex-direction: column; gap: 6px; height: 100%; text-decoration: none; color: var(--text); }
.themen-karten a.karte span { color: var(--text2); font-size: .92rem; line-height: 1.5; }
.themen-karten a.karte:hover b { color: var(--link); }
.themen-termin { text-align: center; }
.themen-termin p { color: var(--text2); }
.themen-termin .knopf { margin: 6px; }
/* Ab 1.95 (Patrick 21.10.2026): „So arbeiten Sie damit“ als Diashow in einem Bildschirm. Die Folien liegen nebeneinander
in einer seitwärts einrastenden Spur; darunter Pfeile, Punkte, Zähler und Pause (assets/js/start.js setzt .aktiv).
Ohne Skript (und auf der Themenseite) stehen die Folien wie bisher untereinander. */
.dia-steuerung[hidden], .dia-pause[hidden] { display: none; }
.diashow.aktiv .dia-spur { position: relative; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
overscroll-behavior-x: contain; scrollbar-width: none; }
.diashow.aktiv .dia-spur::-webkit-scrollbar { display: none; }
.diashow.aktiv .folie { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; border-top: 0; padding: 8px 2px; }
.dia-steuerung { display: flex; align-items: center; justify-content: center; gap: 8px 12px; margin-top: 14px; }
.dia-knopf { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; cursor: pointer;
border: 1.5px solid var(--linie); background: var(--flaeche); color: var(--text); transition: border-color .2s, color .2s; }
.dia-knopf:hover { border-color: var(--prim); color: var(--link); }
.dia-knopf .ic { grid-area: 1 / 1; width: 20px; height: 20px; }
.dia-pause .zeichen-start, .dia-pause.gestoppt .zeichen-pause { display: none; }
.dia-pause.gestoppt .zeichen-start { display: block; }
.dia-punkte { display: flex; align-items: center; }
.dia-punkt { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: inline-grid; place-items: center; }
.dia-punkt::after { content: ""; width: 9px; height: 9px; border-radius: 5px; background: var(--ink-300); transition: width .2s, background .2s; }
.dia-punkt:hover::after { background: var(--link); }
.dia-punkt.aktiv::after { width: 22px; background: var(--prim); }
.dia-zaehler { min-width: 3.2em; text-align: center; font-family: var(--schrift-zahl); font-variant-numeric: tabular-nums; font-size: .9rem; color: var(--text2); }
.dia-knopf:focus-visible, .dia-punkt:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
@media (prefers-color-scheme: dark) { .dia-punkt::after { background: var(--ink-500); } }
@media (max-width: 899px) {
/* Folien sind hier höher als der Bildschirm: Bedienung über der Folie, damit sie gleich zu sehen ist */
.diashow.aktiv { display: flex; flex-direction: column; }
.diashow.aktiv .dia-steuerung { order: -1; margin: 4px 0 6px; }
.diashow.aktiv .folie .text h3 { margin-top: 10px; }
}
@media (max-width: 639px) { .dia-zaehler { display: none; } } /* am Handy reichen die Punkte */
@media (min-width: 900px) and (min-height: 640px) {
/* Kopf, Folie und Bedienung passen zusammen in den freien Bereich unter der Kopfleiste */
.seite-einblick .diashow.aktiv .gif video, .seite-einblick .diashow.aktiv .gif .gif-standbild img { max-height: calc(100svh - 61px - 330px); }
.diashow.aktiv .folie { padding: 4px 2px; }
}
@media (prefers-reduced-motion: reduce) { .dia-knopf, .dia-punkt::after { transition: none; } }
@media print { .dia-steuerung { display: none; } .diashow.aktiv .dia-spur { display: block; overflow: visible; } }
/* ===== 1.97 (Patrick 21.10.2026): Website-Redesign „weniger langweilig, state of the art“ =====
* Nach der Einschätzung zu den CI-Farben: Farben bleiben, Wirkung kommt aus Layout, Weißraum und Tiefe. Grün nur für den
* Hauptknopf und Akzente, Flächen ruhig. Karten mit feiner Kante und Lichtschein unter dem Mauszeiger (--mx/--my setzt
* assets/js/start.js), Abschnitte mit weichem Farbschein im Hintergrund, Abschnitt 04 als ruhiges Raster, Schema in 05
* lebt, „Ein Tag in der Halle“ als Tageslauf. Alles ohne Skript lesbar; „Bewegung reduzieren“ hält alles an. */
:root { --kante: rgba(20, 35, 44, .09); --kante-hell: rgba(20, 35, 44, .16); --glanz: rgba(46, 139, 62, .10); }
@media (prefers-color-scheme: dark) {
:root { --kante: rgba(255, 255, 255, .08); --kante-hell: rgba(255, 255, 255, .16); --glanz: rgba(127, 209, 139, .12); }
}
/* Abschnitte: weicher Farbschein hinter dem Inhalt, abwechselnd links und rechts */
main > .abschnitt.seite, .band > .abschnitt.seite, .band > section > .abschnitt { position: relative; isolation: isolate; }
main > .abschnitt.seite::before, .band > .abschnitt.seite::before {
content: ""; position: absolute; z-index: -1; top: 10%; bottom: 10%; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none;
background: radial-gradient(38% 42% at 10% 50%, var(--glanz), transparent 100%);
}
main > .abschnitt.seite:nth-of-type(even)::before, .band > .abschnitt.seite:nth-of-type(even)::before { background: radial-gradient(38% 42% at 90% 50%, var(--glanz), transparent 100%); }
.band { background: radial-gradient(900px 500px at 50% 0%, rgba(127, 209, 139, .07), transparent 70%), var(--ink-900); }
/* Überschriften: etwas kräftiger und enger, Vorspann-Nummer als feine Marke */
.abschnitt h2, .bereich-titel { letter-spacing: -.028em; text-wrap: balance; }
.abschnitt .kopfzeile p { text-wrap: pretty; }
.abschnitt .kopfzeile .vorspann::before { border-width: 1px; background: rgba(127, 209, 139, .10); }
/* Karten: feine Kante, leichter Verlauf, Lichtschein folgt dem Mauszeiger */
.karte { position: relative; border-color: var(--kante); border-radius: 20px; overflow: hidden;
background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%), var(--flaeche); }
.karte::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease;
background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(127, 209, 139, .16), transparent 65%); }
.karte:hover::after { opacity: 1; }
.raster .karte:hover { border-color: var(--kante-hell); }
.karte > * { position: relative; z-index: 1; }
@media (prefers-color-scheme: dark) {
.karte { background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01)), var(--ink-800); }
.raster .karte:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
}
.band .karte { border-color: rgba(255, 255, 255, .08); background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01)), var(--ink-800); }
.band .raster .karte:hover { border-color: rgba(127, 209, 139, .45); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
/* Symbolkachel mit feiner grüner Kante statt flacher Fläche */
.symbol { background: linear-gradient(145deg, rgba(127, 209, 139, .22), rgba(127, 209, 139, .06)); box-shadow: inset 0 0 0 1px rgba(46, 139, 62, .18); }
.band .symbol, .seite .symbol { color: var(--kachel-text); }
@media (prefers-color-scheme: dark) { .symbol { box-shadow: inset 0 0 0 1px rgba(127, 209, 139, .22); } }
.band .symbol { background: linear-gradient(145deg, rgba(127, 209, 139, .22), rgba(127, 209, 139, .06)); color: var(--gruen-400); }
/* Nutzen: vier Aussagen mit feiner Linie oben statt loser Texte */
.ergebnis { padding: 22px 0 0; border-top: 1px solid var(--kante-hell); }
.ergebnis .symbol.gross { width: 52px; height: 52px; }
/* Handlungsaufruf-Band mit Lichtkante */
.cta-band { position: relative; overflow: hidden; border: 1px solid rgba(127, 209, 139, .22);
background: radial-gradient(600px 220px at 100% 0%, rgba(127, 209, 139, .18), transparent 70%), linear-gradient(120deg, var(--ink-900), var(--ink-800)); }
/* Seitennavigation rechts erst, wenn daneben Platz ist (sonst lag sie über den Karten) */
@media (min-width: 900px) and (max-width: 1279px) { .seitennav { display: none; } .nach-oben { right: 16px; } }
/* ---------- 04 Einsatzbereiche: ruhiges Raster ---------- */
.erfasst { margin: 0 auto 24px; max-width: 1000px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; padding: 0;
border: 1px solid var(--kante-hell); border-radius: 18px; overflow: hidden; background: var(--flaeche); }
.erfasst li { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; border-radius: 0; background: none;
color: var(--text); font-size: .88rem; font-weight: 600; line-height: 1.35; border-right: 1px solid var(--kante); border-bottom: 1px solid var(--kante); }
.erfasst li:nth-child(2n) { border-right: 0; }
.erfasst li:last-child { grid-column: 1 / -1; border-bottom: 0; }
.erfasst svg.ic { width: 22px; height: 22px; color: var(--kachel-text); }
@media (min-width: 760px) {
.erfasst { grid-template-columns: repeat(5, 1fr); }
.erfasst li, .erfasst li:nth-child(2n) { border-bottom: 0; border-right: 1px solid var(--kante); }
.erfasst li:last-child { grid-column: auto; border-right: 0; }
}
@media (prefers-color-scheme: dark) { .erfasst { background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)), var(--ink-800); } }
.branchen { grid-auto-rows: 1fr; }
.branchen .karte { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; gap: 6px 14px; align-content: start; }
.branchen .karte .symbol { grid-row: 1 / 3; width: 42px; height: 42px; }
.branchen .karte .symbol svg.ic { width: 22px; height: 22px; }
.branchen .karte h3 { margin: 0; align-self: center; }
.branchen .karte p { grid-column: 2; }
#material .mitte-text { max-width: 46em; margin-left: auto; margin-right: auto; }
@media (min-width: 900px) and (min-height: 640px) and (max-height: 920px) {
.erfasst li { padding: 10px 14px; font-size: .84rem; }
.erfasst { margin-bottom: 16px; }
}
@media (max-width: 639px) {
.branchen .karte { grid-template-columns: 1fr; grid-template-rows: none; }
.branchen .karte .symbol { grid-row: auto; }
.branchen .karte p { grid-column: 1; }
}
/* ---------- 05 Schnittstellen: lebendes Schema ---------- */
.diagramm > svg { overflow: visible; }
.diagramm .weg { fill: none; stroke: rgba(169, 186, 197, .28); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.diagramm .fluss { fill: none; stroke: var(--gruen-400); stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-dasharray: 2 10; opacity: .7;
animation: schema-fluss 1.6s linear infinite; }
.diagramm .paket { fill: var(--gruen-400); filter: drop-shadow(0 0 1.2px var(--gruen-400)); }
@keyframes schema-fluss { to { stroke-dashoffset: -24; } }
.knoten { white-space: nowrap; max-width: none; display: inline-flex; align-items: center; gap: 2px; padding: 9px 14px; border-radius: 99px;
border-color: rgba(255, 255, 255, .1); background: rgba(31, 49, 61, .92); box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: schema-schweben 6s ease-in-out infinite; }
.knoten svg.ic { color: var(--gruen-400); }
.k2 { animation-delay: -1.5s; } .k3 { animation-delay: -3s; } .k4 { animation-delay: -4.5s; } .k5 { animation-delay: -2.2s; }
@keyframes schema-schweben { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 5px)); } }
.mitte-knoten { padding: 14px 20px; border-radius: 18px; border: 1px solid rgba(127, 209, 139, .6); background: var(--ink-800);
box-shadow: 0 0 0 6px rgba(127, 209, 139, .08), 0 16px 40px rgba(0, 0, 0, .4); animation: none; overflow: visible; }
.mitte-knoten .puls { position: absolute; inset: -1px; border-radius: inherit; border: 1.5px solid var(--gruen-400); opacity: 0; pointer-events: none;
animation: schema-puls 3s ease-out infinite; }
.mitte-knoten .puls + .puls { animation-delay: 1.5s; }
@keyframes schema-puls { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45, 1.9); } }
@media (max-width: 559px) { .knoten { font-size: .74rem; padding: 6px 10px; white-space: normal; max-width: 38%; border-radius: 12px; flex-direction: column; text-align: center; line-height: 1.25; } .knoten svg.ic { width: 16px; height: 16px; margin-right: 3px; } .mitte-knoten { font-size: .95rem; padding: 10px 14px; } }
/* Einblenden: die Knoten erscheinen nacheinander, wenn das Schema ins Bild kommt */
.schnittstellen.einblenden .knoten:not(.mitte-knoten) { opacity: 0; transition: opacity .5s ease; }
.schnittstellen.einblenden.sichtbar .knoten:not(.mitte-knoten) { opacity: 1; }
.schnittstellen.einblenden.sichtbar .k2 { transition-delay: .15s; } .schnittstellen.einblenden.sichtbar .k3 { transition-delay: .3s; }
.schnittstellen.einblenden.sichtbar .k4 { transition-delay: .45s; } .schnittstellen.einblenden.sichtbar .k5 { transition-delay: .6s; }
@media (prefers-reduced-motion: reduce) {
.diagramm .fluss, .knoten, .mitte-knoten .puls { animation: none; }
.diagramm .paket, .mitte-knoten .puls { display: none; }
}
/* ---------- Ein Tag in der Halle: Tageslauf ---------- */
.szenen-kopf { text-align: center; margin-bottom: 36px; }
.szenen-vorspann { color: var(--link); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; margin: 0 0 10px; }
.szenen-titel { margin-bottom: 0; }
.tag { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; position: relative; }
.tag-moment { display: grid; gap: 10px; position: relative; padding-left: 58px; }
/* Zeitleiste: am Handy senkrecht links, am PC waagerecht oben durch die drei Zeitpunkte, von Morgen- zu Abendfarbe */
.tag::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px;
background: linear-gradient(180deg, var(--gruen-400), var(--gruen-500) 50%, var(--ink-500)); opacity: .7; }
.tag-zeit { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-height: 44px; }
.tag-punkt { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
background: var(--bg); border: 1.5px solid var(--kante-hell); color: var(--kachel-text); }
.tag-punkt svg.ic { width: 22px; height: 22px; }
.tag-zeit b { font-family: var(--schrift-zahl); font-variant-numeric: tabular-nums; font-size: 1.05rem; color: var(--text); padding: 2px 10px; border-radius: 99px; border: 1px solid var(--kante-hell); }
.tag-zeit .wann { color: var(--text); }
.tag-moment .frueher, .tag-moment .heute { border-radius: 16px; padding: 14px 18px; }
.tag-moment .frueher > span, .tag-moment .heute > span, .tag-zeit .wann { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tag-moment p { margin: 4px 0 0; }
.tag-moment .frueher { background: transparent; border: 1px dashed var(--kante-hell); color: var(--text2); }
.tag-moment .frueher p { text-decoration: line-through; text-decoration-color: rgba(229, 83, 75, .55); text-decoration-thickness: 1.5px; }
.tag-moment .frueher span::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .35em; vertical-align: -.15em; background: currentColor;
-webkit-mask: var(--m-kreuz) center / contain no-repeat; mask: var(--m-kreuz) center / contain no-repeat; }
.tag-moment .heute { position: relative; border: 1px solid rgba(127, 209, 139, .55); color: var(--text);
background: linear-gradient(160deg, rgba(127, 209, 139, .16), rgba(127, 209, 139, .03) 70%), var(--flaeche); box-shadow: 0 14px 34px rgba(46, 139, 62, .12); }
.tag-moment .heute span { color: var(--kachel-text); }
.tag-moment .heute span::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .35em; vertical-align: -.15em; background: currentColor;
-webkit-mask: var(--m-haken) center / contain no-repeat; mask: var(--m-haken) center / contain no-repeat; }
.tag-moment .heute p { font-weight: 600; }
@media (min-width: 900px) {
.tag { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tag::before { left: 16.66%; right: 16.66%; top: 21px; bottom: auto; width: auto; height: 2px;
background: linear-gradient(90deg, var(--gruen-400), var(--gruen-500) 50%, var(--ink-500)); }
.tag-moment { padding-left: 0; grid-template-rows: auto 1fr auto; }
.tag-zeit { flex-direction: column; text-align: center; padding-top: 56px; gap: 6px; }
.tag-punkt { left: 50%; transform: translateX(-50%); }
.tag-moment .frueher, .tag-moment .heute { padding: 16px 20px; }
.tag-moment .heute { min-height: 7.5em; }
}
/* Bewegung: Linie wächst, dann erscheinen die Momente nacheinander (nur mit Skript, .szenen bekommt einblenden/sichtbar) */
.szenen.einblenden { opacity: 1; transform: none; }
.szenen.einblenden .tag::before { transform: scaleY(0); transform-origin: top; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.szenen.einblenden .tag-moment { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.szenen.einblenden .tag-moment .heute { opacity: 0; transform: scale(.96); transition: opacity .5s ease, transform .5s ease; }
.szenen.einblenden.sichtbar .tag::before { transform: none; }
.szenen.einblenden.sichtbar .tag-moment, .szenen.einblenden.sichtbar .tag-moment .heute { opacity: 1; transform: none; }
.szenen.einblenden.sichtbar .tag-moment:nth-child(2) { transition-delay: .35s; } .szenen.einblenden.sichtbar .tag-moment:nth-child(3) { transition-delay: .7s; }
.szenen.einblenden.sichtbar .tag-moment:nth-child(1) .heute { transition-delay: .6s; } .szenen.einblenden.sichtbar .tag-moment:nth-child(2) .heute { transition-delay: .95s; }
.szenen.einblenden.sichtbar .tag-moment:nth-child(3) .heute { transition-delay: 1.3s; }
@media (min-width: 900px) { .szenen.einblenden .tag::before { transform: scaleX(0); transform-origin: left; } }
@media (min-width: 900px) and (min-height: 640px) and (max-height: 780px) {
.szenen-kopf { margin-bottom: 20px; } .tag-zeit { padding-top: 50px; } .tag-moment .frueher, .tag-moment .heute { padding: 10px 16px; }
}
/* ---------- Whitepaper: Abstand zum Knopf „Alle Whitepaper anfordern“ ---------- */
.whitepaper .raster.zwei + .wp-ersatz { margin: 28px 0 0; text-align: center; }
.download { padding: 22px 24px; }
a.dl-knopf { margin-top: 12px; }
/* ---------- Kontaktseite: luftiger, Formular als Karte mit Lichtkante ---------- */
.kontaktseite .band-termin { border-top: 0; background: radial-gradient(900px 480px at 85% 0%, rgba(127, 209, 139, .14), transparent 70%), var(--bg); }
@media (prefers-color-scheme: dark) { .kontaktseite .band-termin { background: radial-gradient(900px 480px at 85% 0%, rgba(127, 209, 139, .12), transparent 70%), var(--ink-900); } }
.kontaktseite .formular, .kontaktseite .kontakt-klapp { border-radius: 22px; border-color: var(--kante-hell); }
.kontaktseite .termin-ersatz { padding: 36px 28px; }