/* ============================================================================
Raketenwachstum - gemeinsames Stylesheet
Ausgelagert am 2026-08-09 aus index.html.
Gilt fuer ALLE Seiten. Eine Stilaenderung hier wirkt sofort ueberall,
deshalb keine seitenspezifischen Regeln hier ablegen, sondern unten im
Abschnitt der jeweiligen Seite.
Schriftpfade sind relativ zu diesem Ordner, also ../fonts/.
========================================================================= */
/* Schriften liegen lokal, es geht kein Aufruf an Google. Noto Sans ist eine
variable Schrift und deckt 400 bis 600 aus einer Datei ab. */
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:400 600;font-display:swap;
src:url('../fonts/noto-sans-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:400 600;font-display:swap;
src:url('../fonts/noto-sans-var-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;
src:url('../fonts/playfair-display-600-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;
src:url('../fonts/playfair-display-600-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:600;font-display:swap;
src:url('../fonts/playfair-display-600-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:600;font-display:swap;
src:url('../fonts/playfair-display-600-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* ===========================================================================
1 · Grundlagen
=========================================================================== */
:root{
--violet:#8509AD;
--violet-deep:#5E0A7C;
--violet-hell:#D9A7F0;
--flame:#C02188;
--ink:#342C31;
--ink-soft:#5C545F;
/* Zurueckhaltender Grauton fuer Kleingedrucktes (Quellenzeilen, Bild-
unterschriften, Etiketten). Bis zum 19.08. stand hier #8B8391, das kommt
auf Weiss auf 3,65:1 und auf --paper-2 auf 3,46:1. Gefordert sind 4,5:1
fuer Text unter 18,66 Pixel (WCAG 1.4.3), und der Ton traegt an allen 18
Fundstellen Schrift zwischen 11 und 14,5 Pixel, die Ausnahme fuer grosse
Schrift greift also nirgends. #767078 kommt auf 4,81:1 beziehungsweise
4,58:1, behaelt den violetten Unterton und ist mit blossem Auge derselbe
Ton. Eine Zeile heilt alle 18 Stellen auf einmal. */
--faint:#767078;
--line:#ECE7F0;
--paper:#FFFFFF;
--paper-2:#FAF8FC;
--nacht:#241B2A;
--serif:'Playfair Display',Georgia,'Times New Roman',serif;
--sans:'Noto Sans',system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
img,svg{max-width:100%}
/* overflow-x: clip statt hidden. Der geschlossene Menue-Schub ist "fixed" und
steht rechts ausserhalb des Bildes, das erzeugt sonst auf dem Telefon eine
Querleiste. "hidden" wuerde einen Scroll-Behaelter aufmachen und die klebende
Kopfleiste brechen, "clip" schneidet nur ab. Muss auf html stehen, auf body
wirkt es nicht auf fest positionierte Elemente. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.62;font-size:16px;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.06;color:var(--ink)}
h1 em,h2 em,h3 em{font-style:italic;font-weight:400;color:var(--violet)}
p{color:var(--ink-soft)}
a{color:var(--violet)}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--violet);color:#fff;padding:12px 18px;border-radius:9px}
.skip:focus{left:16px}
:focus-visible{outline:2.5px solid var(--violet);outline-offset:3px;border-radius:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
section{padding:clamp(58px,7.5vw,100px) 0;border-top:1px solid var(--line)}
.kopf{max-width:680px;margin:0 auto 44px;text-align:center}
.kopf .kick{display:inline-flex;align-items:center;gap:14px;font-size:11.5px;font-weight:600;
letter-spacing:.22em;text-transform:uppercase;color:var(--violet)}
.kopf .kick .strich{display:block;width:28px;height:1px;background:var(--violet);opacity:.6}
.kopf h2{font-size:clamp(30px,4.4vw,46px);margin-top:18px}
.kopf p{margin-top:18px;font-size:17px;line-height:1.65}
.punch{font-family:var(--serif);font-size:clamp(20px,2.6vw,26px);line-height:1.35;color:var(--ink);
max-width:48ch;margin:44px auto 0;text-align:center}
/* Buttons */
/* muss vor .btn stehen, sonst gewinnt display:inline-flex gegen das hidden-Attribut */
.btn[hidden],[hidden]{display:none !important}
.btn{font-family:var(--sans);display:inline-flex;align-items:center;justify-content:center;gap:9px;
font-weight:600;font-size:14.5px;border-radius:9px;padding:14px 24px;min-height:48px;cursor:pointer;
border:1px solid transparent;text-decoration:none;line-height:1.1;text-align:center;
transition:background .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s}
.btn:active{transform:translateY(1px)}
.btn-solid{background:var(--violet);color:#fff}
.btn-solid:hover,.btn-solid:focus-visible{background:var(--violet-deep);box-shadow:0 10px 26px -10px hsla(286 90% 30% / .7)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover,.btn-ink:focus-visible{background:#000}
.btn-line{background:transparent;color:var(--violet);border-color:#DCCFE4}
.btn-line:hover,.btn-line:focus-visible{background:var(--paper-2);border-color:var(--violet)}
.btn-hell{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-hell:hover,.btn-hell:focus-visible{background:rgba(255,255,255,.12);border-color:#fff}
.btn-weiss{background:#fff;color:var(--ink)}
.btn-weiss:hover,.btn-weiss:focus-visible{background:var(--paper-2)}
.btn-sm{padding:11px 18px;min-height:42px;font-size:13.5px}
/* PUNKT 12 · Hover-Unterstrich, baut sich von links nach rechts auf.
Einheitlich fuer Kopf-Navigation, Fuss-Links und Textlinks. */
.ul-hover{position:relative;text-decoration:none;display:inline-block}
.ul-hover .ul-strich{position:absolute;left:0;right:0;bottom:-3px;height:1.5px;background:currentColor;
transform:scaleX(0);transform-origin:left center;transition:transform .32s cubic-bezier(.22,1,.36,1)}
.ul-hover:hover .ul-strich,.ul-hover:focus-visible .ul-strich{transform:scaleX(1)}
/* Häkchen als echte Elemente, nicht als ::before: so tragen sie ein eigenes
SVG und lassen sich einzeln einfärben. */
.checks{list-style:none;display:grid;gap:14px;text-align:left}
.checks li{display:flex;align-items:flex-start;gap:12px;font-size:15.5px;line-height:1.5;color:var(--ink)}
.checks li .hk{flex:none;width:17px;height:17px;margin-top:3px;color:var(--violet)}
.checks li .hk svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* ===========================================================================
2 · Header
=========================================================================== */
/* über der Schublade, damit das Kreuz zum Schließen erreichbar bleibt */
/* Ueber dem Hero durchsichtig mit Unschaerfe, darunter liegt ein nach unten
auslaufender dunkler Verlauf. Dadurch bleibt das Bild sichtbar und die weisse
Schrift trotzdem lesbar. Sobald der Hero durchgescrollt ist, deckt die Leiste
zu und die Schrift wird wieder dunkel. Gemessen ueber dem Hero: 9,3:1. */
.kopfleiste{position:sticky;top:0;z-index:70;
background:linear-gradient(180deg,hsla(282 22% 13% / .58),hsla(282 22% 13% / .12));
-webkit-backdrop-filter:blur(10px) saturate(130%);backdrop-filter:blur(10px) saturate(130%);
border-bottom:1px solid rgba(255,255,255,.16);
transition:background .3s ease,border-color .3s ease}
/* liegt über der Schublade, sonst ist der Knopf zum Schließen nicht erreichbar */
.kopfleiste .inner{position:relative;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:24px;height:78px}
.kopfleiste .marke,.kopfleiste .hauptnav a,.kopfleiste .marke .zeichen{
transition:color .3s ease,stroke .3s ease}
/* Zustand ueber dem Hero */
.kopfleiste .marke{color:#fff}
.kopfleiste .marke .zeichen{stroke:#fff}
.kopfleiste .hauptnav a{color:rgba(255,255,255,.92)}
.kopfleiste .hauptnav a:hover,.kopfleiste .hauptnav a:focus-visible{color:#fff}
.kopfleiste .inner > .btn-solid{background:#fff;color:var(--ink)}
.kopfleiste .inner > .btn-solid:hover,.kopfleiste .inner > .btn-solid:focus-visible{
background:var(--violet-hell);color:var(--ink);box-shadow:none}
.kopfleiste .menuknopf{border-color:rgba(255,255,255,.45);color:#fff}
.kopfleiste .menuknopf:hover,.kopfleiste .menuknopf:focus-visible{
border-color:#fff;background:rgba(255,255,255,.12)}
/* Zustand nach dem Hero. Dieselbe helle Fassung gilt, solange das Menü offen
ist: dahinter liegt dann die weiße Schublade, auf der weiße Schrift und ein
weißes Kreuz unsichtbar wären. "data-menue" ist bewusst ein eigenes Attribut,
denn "data-fest" wird bei jedem Scrollen und Größenwechsel neu gesetzt und
würde den Menü-Zustand sofort überschreiben. */
.kopfleiste:is([data-fest="true"],[data-menue="true"]){background:rgba(255,255,255,.94);border-bottom-color:var(--line)}
.kopfleiste:is([data-fest="true"],[data-menue="true"]) .marke{color:var(--ink)}
.kopfleiste:is([data-fest="true"],[data-menue="true"]) .marke .zeichen{stroke:var(--violet)}
.kopfleiste[data-fest="true"] .hauptnav a{color:var(--ink-soft)}
.kopfleiste[data-fest="true"] .hauptnav a:hover,.kopfleiste[data-fest="true"] .hauptnav a:focus-visible{color:var(--violet)}
.kopfleiste[data-fest="true"] .inner > .btn-solid{background:var(--violet);color:#fff}
.kopfleiste:is([data-fest="true"],[data-menue="true"]) .menuknopf{border-color:var(--line);color:var(--ink)}
.kopfleiste:is([data-fest="true"],[data-menue="true"]) .menuknopf:hover,
.kopfleiste:is([data-fest="true"],[data-menue="true"]) .menuknopf:focus-visible{
border-color:var(--violet);background:var(--paper-2)}
/* der geöffnete Knopf bleibt violett, auch auf heller Leiste */
.kopfleiste .menuknopf[aria-expanded="true"]{color:var(--violet);border-color:var(--violet)}
/* LinkedIn-Zeichen in der Kopfzeile */
.sozial-kopf{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
border-radius:50%;border:1px solid rgba(255,255,255,.3);color:rgba(255,255,255,.9);
transition:color .3s ease,border-color .3s ease,background .2s ease}
.sozial-kopf svg{width:16px;height:16px;fill:currentColor}
.sozial-kopf:hover,.sozial-kopf:focus-visible{background:rgba(255,255,255,.14);color:#fff}
.kopfleiste[data-fest="true"] .sozial-kopf{border-color:var(--line);color:var(--ink-soft)}
.kopfleiste[data-fest="true"] .sozial-kopf:hover,.kopfleiste[data-fest="true"] .sozial-kopf:focus-visible{
background:var(--paper-2);color:var(--violet);border-color:var(--violet)}
/* Wort-Bild-Marke: die Rakete steigt im 45-Grad-Winkel dicht vor dem R auf,
traegt die Schriftfarbe (nur die Flamme bleibt Magenta) und ist auf die
Versalhoehe der Wortmarke abgestimmt. Enger Abstand, gemeinsame Farbe und
gemeinsame Flugrichtung machen aus Zeichen und Wort EINEN Zug. */
.marke{display:inline-flex;align-items:center;gap:7px;text-decoration:none;font-family:var(--serif);
font-weight:600;font-size:22px;color:var(--ink);white-space:nowrap}
.marke .zeichen{width:31px;height:31px;flex:none;display:block;stroke:var(--violet)}
/* Sechs Eintraege brauchen enge Abstaende und duerfen nicht umbrechen,
sonst wird die Kopfleiste zweizeilig. */
.hauptnav{display:flex;align-items:center;gap:22px;font-size:14.5px;white-space:nowrap}
.hauptnav a{color:var(--ink-soft)}
@media (max-width:1180px){.hauptnav{gap:16px;font-size:14px}}
.hauptnav a:hover,.hauptnav a:focus-visible{color:var(--violet);outline-color:var(--violet)}
/* Menüknopf: drei Balken, die sich beim Öffnen zum Kreuz drehen */
.menuknopf{display:none;width:46px;height:46px;align-items:center;justify-content:center;background:transparent;
border:1px solid var(--line);border-radius:9px;color:var(--ink);cursor:pointer;
transition:background .2s ease,border-color .2s ease}
.menuknopf:hover,.menuknopf:focus-visible{border-color:var(--violet);background:var(--paper-2)}
.menuknopf .balken{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;
transition:transform .34s cubic-bezier(.4,0,.2,1)}
.menuknopf .balken span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;
transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .2s ease}
.menuknopf[aria-expanded="true"]{color:var(--violet);border-color:var(--violet)}
/* Beim Öffnen dreht sich das ganze Zeichen eine Vierteldrehung, während die
Balken zum Kreuz zusammenlaufen. Erst dadurch sieht man die Bewegung. */
.menuknopf[aria-expanded="true"] .balken{transform:rotate(90deg)}
.menuknopf[aria-expanded="true"] .balken span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menuknopf[aria-expanded="true"] .balken span:nth-child(2){opacity:0}
.menuknopf[aria-expanded="true"] .balken span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* Schublade fährt von rechts ein, die Seite dahinter tritt zurück */
.schleier-menue{position:fixed;inset:0;z-index:58;background:hsla(282 55% 8% / .38);
-webkit-backdrop-filter:blur(9px) saturate(120%);backdrop-filter:blur(9px) saturate(120%);
opacity:0;visibility:hidden;transition:opacity .32s ease,visibility .32s ease}
.schleier-menue[data-offen="true"]{opacity:1;visibility:visible}
.schublade{position:fixed;inset:0 0 0 auto;z-index:59;width:min(86%,340px);
display:flex;flex-direction:column;padding:88px 22px 0;
background:var(--paper);border-left:1px solid var(--line);
box-shadow:-18px 0 44px -20px hsla(286 50% 20% / .45);
transform:translateX(100%);visibility:hidden;
/* Die Schublade selbst rollt seit dem 19.08. NICHT mehr. Sie ist in zwei
Teile geteilt: oben der rollende Bereich mit den Links, unten ein Fuss,
der stehen bleibt. Wuerde die Schublade als Ganzes rollen, wanderte der
Fuss beim Rollen mit aus dem Bild. */
overflow:hidden;
transition:transform .32s cubic-bezier(.4,0,.2,1),visibility .32s ease}
.schublade[data-offen="true"]{transform:translateX(0);visibility:visible}
.schublade a{display:block;padding:13px 2px;color:var(--ink);text-decoration:none;font-size:16px;
transition:color .2s ease}
.schublade a:hover,.schublade a:focus-visible{color:var(--violet)}
/* Der rollende Teil. overscroll-behavior verhindert, dass die Seite dahinter
mitwandert, sobald der Bereich am Ende angekommen ist. */
.sch-rollen{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
display:flex;flex-direction:column;padding-bottom:6px;
/* Weicher Auslauf nach unten: Auf flachen Geraeten (gemessen 320 mal 568)
reicht die Liste ueber die Kante und der naechste Eintrag wurde vom Fuss
mitten in der Zeile abgeschnitten. Jetzt laeuft er aus, das liest sich
als "hier geht es weiter". Wo nichts ueberlaeuft, faellt der Verlauf auf
leere Flaeche und ist unsichtbar. */
-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);
mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent)}
/* ---------- Gruppen-Ueberschriften ----------
Jede Gruppe traegt eine kleine Versal-Ueberschrift mit einer Linie darunter.
Vorher hatte nur die zweite Gruppe eine ("Mehr"), die Linie stand darueber
und die drei Bereiche trugen zusaetzlich Trennlinien zwischen den Zeilen.
Das wirkte unsortiert, weil zwei verschiedene Ordnungsmittel gleichzeitig
liefen. Jetzt gilt eines: Ueberschrift, Linie, Eintraege ohne Linien. */
.sch-titel{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-soft);
padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.sch-haupt,.sch-weiter{display:flex;flex-direction:column}
.sch-weiter{margin-top:26px}
/* Zweite Gruppe eine Stufe kleiner und in der weichen Schriftfarbe, damit die
drei Bereiche darueber die Hierarchie behalten. Die Zeilen bleiben mit
40 Pixeln Hoehe ueber der Tastgroesse, obwohl sie kleiner gesetzt sind. */
.sch-weiter a{font-size:14.5px;padding:11px 2px;color:var(--ink-soft)}
/* ---------- Fester Fuss: Mail und Termin ----------
Bleibt beim Rollen stehen, damit der Daumen beides jederzeit erreicht.
Die Trennlinie oben setzt ihn vom rollenden Teil ab, der Farbverlauf
darunter faengt Text ab, der sonst hart unter der Linie verschwaende. */
.sch-direkt{flex:none;padding:16px 0 max(20px, env(safe-area-inset-bottom));
border-top:1px solid var(--line);background:var(--paper);
display:flex;flex-direction:column}
.sch-direkt .sch-titel{border-bottom:0;padding-bottom:0;margin-bottom:6px}
.sch-mail{font-size:15.5px;font-weight:600;color:var(--ink);padding:0 2px 12px;
word-break:break-word}
.schublade .sch-mail:hover,.schublade .sch-mail:focus-visible{color:var(--violet)}
.schublade .hervor{padding:14px 18px;border-radius:9px;
background:var(--violet);color:#fff;text-align:center;font-weight:600}
.schublade .hervor:hover,.schublade .hervor:focus-visible{color:#fff;background:var(--violet-deep)}
/* Flache Geraete (iPhone SE und aehnlich, 667 Pixel hoch): Abstaende straffen,
damit auch dort alles ohne Rollen im Bild steht. */
@media (max-height:720px){
.schublade{padding-top:76px}
.schublade a{padding:11px 2px}
.sch-weiter{margin-top:18px}
.sch-weiter a{padding:9px 2px}
.sch-direkt{padding-top:12px}
.schublade .hervor{padding:12px 18px}
}
@media (max-width:980px){
.hauptnav,.kopfleiste .inner .btn{display:none}
.menuknopf{display:inline-flex}
.kopfleiste .inner{height:68px}
.hero{margin-top:-68px;padding-top:calc(68px + clamp(40px,5vw,64px))}
/* ---------- Kopfleiste bei offenem Menue (Fund 19.08.) ----------
Das Skript legt die Seite hinter der Schublade stumm, indem es dem
Koerper "overflow:hidden" gibt. Damit wird der Koerper selbst zum
Rollbehaelter, und eine klebende Leiste klebt ab da an DIESEM Behaelter
statt am Fenster. Sein Rollstand ist null, also sprang die Leiste an
ihre Stelle im Dokument zurueck: bei einer weit gescrollten Seite weit
oberhalb des Bildes. Sichtbar war das nur, wenn man das Menue
ausserhalb des Heros oeffnete, oben stehen Leiste und Dokumentanfang
ohnehin an derselben Stelle. Mit der Leiste verschwand das Kreuz zum
Schliessen, das Menue liess sich dann nur ueber den Schleier verlassen.
Solange das Menue offen ist, haengt die Leiste deshalb am Fenster.
"fixed" nimmt sie aus dem Fluss, ihre 68 Pixel wuerden dem Inhalt
dahinter fehlen und er ruckte nach oben. Der Koerper traegt deshalb
genau solange dasselbe Mass als oberes Polster, unter dem Strich
bewegt sich nichts. */
body[data-menue="true"]{padding-top:68px}
.kopfleiste[data-menue="true"]{position:fixed;top:0;left:0;right:0}
}
@media (min-width:981px){.schublade,.schleier-menue{display:none}}
/* ===========================================================================
3 · PUNKT 1 · Hero mit Vollflaechen-Hintergrund und Startsequenz
=========================================================================== */
/* Hero passt in den sichtbaren Bereich, damit die Rakete am Boden vor dem
ersten Scrollen zu sehen ist. Unten extra Platz fuer die Startsequenz. */
/* Der Hero zieht unter die durchsichtige Kopfleiste, sonst haette sie nichts,
wodurch sie hindurchsehen koennte. Die Hoehe der Leiste kommt oben als
Innenabstand wieder drauf, damit die Ueberschrift nicht darunter verschwindet. */
.hero{position:relative;border-top:none;display:flex;align-items:center;
margin-top:-78px;min-height:100svh;
padding:calc(78px + clamp(40px,5vw,64px)) 0 clamp(96px,11vw,132px);
overflow:hidden;isolation:isolate;background:#2C0D3F}
/* ---------- Hero der Bereichsseiten ----------
Gleicher Aufbau wie oben, nur flacher: 74 statt 100 Prozent der Höhe. Auf
einer Unterseite ist der Hero der Auftakt, nicht die ganze Bühne, und
direkt darunter steht die Einordnung, die angelesen sein soll. Der große
Fußabstand stammt von der Startsequenz der Rakete, die es hier nicht gibt.
Bewusst in einer min-width-Abfrage: die Telefon-Regeln für.hero stehen
weiter unten in der Datei und würden bei gleicher Spezifität sonst
überschrieben werden (der den Fall vom 13.08.). */
@media (min-width:821px){
.hero--seite{min-height:74svh;padding-bottom:clamp(56px,7vw,84px)}
}
/* ---------- Hero im Nachthimmel der Loesungs-Sektion ----------
Die grosse Marken-Rakete in der rechten Haelfte ist entfallen. An ihrer
Stelle traegt der Hero jetzt exakt den Grund der Sektion "Die Loesung" der
Startseite: dasselbe Bild, aber scharf statt weichgezeichnet, ungespiegelt,
Deckkraft.82, und derselbe zweiteilige Verlauf darueber.
Der Verlauf traegt eine Schicht mehr als die Vorlage: Im Loesungs-Band
steht der Text mittig unter dem dichten Kern, hier steht er links. Die
erste, waagerechte Schicht legt deshalb zusaetzliche Deckung unter die
Textsaeule. Ohne sie druecken einzelne helle Sterne den Kontrast der
weissen Schrift unter die geforderten 4,5:1, derselbe den Fall wie am 14.08.
im Loesungs-Band. Die zwei Schichten darunter sind unveraendert die der
Vorlage: dichter Kern in der Bildmitte, Kanten ins volle Nachtviolett. */
.hero--nacht{background:var(--nacht)}
.hero--nacht .bg{inset:0;width:100%;height:100%;object-fit:cover;
object-position:50% 34%;transform:none;filter:none;opacity:.82}
.hero--nacht .schleier{
background:
linear-gradient(100deg, hsla(282 30% 11% / .58) 0%, hsla(282 30% 11% / .26) 48%, hsla(282 30% 11% / 0) 80%),
radial-gradient(66% 60% at 50% 34%, hsla(282 30% 11% / .56) 0%, hsla(282 30% 11% / .34) 66%, hsla(282 30% 11% / .10) 100%),
linear-gradient(180deg, var(--nacht) 0%, hsla(282 30% 11% / .30) 26%, hsla(282 30% 11% / .34) 72%, var(--nacht) 100%)}
.hero .bg{position:absolute;inset:-8px;z-index:0;width:calc(100% + 16px);height:calc(100% + 16px);
object-fit:cover;object-position:40% 50%;transform:scaleX(-1);filter:blur(2.5px)}
/* Video liegt über dem Standbild und blendet erst auf, wenn es wirklich läuft. */
.hero .film{filter:blur(1.4px);opacity:0;transition:opacity .8s ease}
.hero .film.laeuft{opacity:1}
/* Der Rauch im Video ist deutlich heller als das Standbild, deshalb zieht der
Schleier bei laufendem Video nach, sonst reicht der Textkontrast nicht.
Links dicht fuer die Schrift, rechts fast offen, damit die Rakete frei steht. */
.hero .film.laeuft ~ .schleier{
background:linear-gradient(100deg,rgba(34,9,52,.76) 0%,rgba(48,12,72,.54) 52%,rgba(64,16,94,.18) 100%)}
/* ---------- Hero auf dem Telefon: ohne Bild ----------
am 13.08.: "das Bild mit der Rakete fliegt aus dem Hero, das geht
nicht". Der Grund ist bauartbedingt: Das Motiv ist quer angelegt, im
Hochformat steht die Rakete zwangslaeufig hinter der Schrift und beides
stoert sich. Statt Bild und Video steht hier eine ruhige Flaeche in den
Markenfarben mit einem Lichtpunkt oben rechts. Kein Bild heisst zugleich:
nichts zu laden, der Hero steht sofort. */
@media (max-width:820px){
.hero .film,.hero picture,.hero .bg{display:none}
/* Tim am 23.08.: Fassung B aus dem Vergleich, das Sternenfeld. Vier
Schichten, von oben nach unten:
1 ein Schleier, der die Textspalte ruhig haelt
2 die Sterne
3 der Lichtpunkt oben rechts
4 die Grundflaeche in den Markenfarben
Der Schleier ist nicht schmueckend, er ist gemessen noetig: Ohne ihn
standen einzelne Sterne mitten in "Noch nicht." und im Fliesstext, der
Kontrast der Kleinzeile fiel auf 1,72:1 statt der geforderten 4,5. Auch
stehen unterhalb von y=580 der Zeichenflaeche bewusst keine Sterne mehr,
dort laeuft die Belegzeile. Mit beidem zusammen liegt der schlechteste
Wert bei 6,48:1, gemessen am gerenderten Bild gegen den hellsten Punkt.
Die Sterne stecken als Zeichnung in dieser Datei, es wird also kein Bild
nachgeladen. Erzeugt von
der Projektablage, dort liegen auch die Positionen. */
.hero{background:
radial-gradient(118% 76% at 34% 48%, rgba(42,11,64,.90) 0%, rgba(42,11,64,.80) 52%,
rgba(42,11,64,.34) 82%, rgba(42,11,64,.12) 100%),
url("data:image/svg+xml,") center/cover no-repeat,
radial-gradient(120% 80% at 82% 8%, rgba(133,9,173,.42) 0%, rgba(133,9,173,0) 58%),
linear-gradient(168deg, #2A0B40 0%, #3E1058 46%, #52157A 100%)}
.hero .schleier{background:none}
/* Ohne Bild darf der Block flacher sein, der erste Knopf soll sichtbar
bleiben, ohne dass man scrollen muss. Der grosse Fussabstand stammt von
der Startsequenz der Rakete, die hier nicht mehr laeuft. */
.hero{min-height:0;padding-bottom:44px}
.hero .inhalt{max-width:none}
/* Tims Dreizeiler gilt auch auf dem Telefon: bei diesem Grad passt
"Kann Dein Unternehmen" in eine Zeile, damit stehen die drei Zeilen
genau wie am Schreibtisch. Die harten Umbrueche bleiben deshalb hier
sichtbar (die Ausblendregel weiter unten wird zurueckgenommen). */
.hero h1.h1-dreizeilig{font-size:clamp(22px,6.4vw,28px);line-height:1.16;max-width:none}
.hero h1.h1-dreizeilig br{display:inline}
.hero .kick{font-size:11px;letter-spacing:.18em}
.hero .rule{margin:14px 0 16px}
/* ACHTUNG, hier stand bis zum 24.08. ".hero.lead{font-size:17px}". Die
Regel hat nie gewirkt: Weiter unten steht ".hero.lead" noch einmal
ohne Fensterabfrage, bei gleicher Spezifitaet gewinnt die spaetere Regel,
und eine Media-Abfrage aendert daran nichts. Der neue Wert steht deshalb
hinter jener Regel, siehe "Telefon: Absatz unter der Ueberschrift". */
/* Der erklaerende Absatz steht sinngemaess gleich darunter im Abschnitt
"Das Problem". Auf dem Telefon kostet er sieben Zeilen und schiebt den
Handlungsaufruf aus dem Bild, deshalb hier ausgeblendet. */
.hero .sub{display:none}
.hero .micro{font-size:12px;margin-top:10px}
.hero .proof{font-size:13px;line-height:1.5}
}
/* Heller und violetter.
Der Schleier war fast schwarz angesetzt, dadurch kippte das Lila ins
Dunkelbraune. Jetzt liegt der gleiche Verlauf rund 12 Prozentpunkte
durchsichtiger und im Farbton der Marke. Kontrast der weissen Schrift
darueber am Messpunkt gepruefen, siehe Sitzungsnotiz. */
.hero .schleier{position:absolute;inset:0;z-index:1;
background:linear-gradient(100deg,rgba(42,11,64,.62) 0%,rgba(58,15,84,.38) 52%,rgba(74,19,106,.10) 100%)}
.hero > .wrap{width:100%}
/* 660 statt 600 Pixel: genau so viel, dass Tims erste Zeile
"Kann Dein Unternehmen" bei 50 Pixel Grad auf eine Zeile passt (gemessen).
Lead und Fliesstext haben eigene Zeilenbreiten und bleiben unveraendert,
die Rakete rechts behaelt ihren freien Raum. */
.hero .inhalt{position:relative;z-index:3;max-width:660px}
.hero .kick{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.22em;
text-transform:uppercase;color:var(--violet-hell)}
.hero .rule{width:46px;height:1px;background:var(--violet-hell);opacity:.7;margin:18px 0 22px}
/* Untergrenze so gewählt, dass die längsten Wörter auf schmalen Telefonen
nicht über den Rand laufen. Silbentrennung als zweite Sicherung.
Breite auf 19 Zeichen, seit die Überschrift aus zwei Sätzen besteht. */
.hero h1{font-size:clamp(30px,6.6vw,58px);max-width:19ch;color:#fff;
overflow-wrap:break-word;hyphens:auto}
/* Tims Umbruch (13.08.): drei feste Zeilen. Die laengste Zeile ist
"Kann Dein Unternehmen", dafuer faellt die Zeilenbreiten-Grenze weg und der
Grad eine Spur kleiner aus, sonst laeuft die Zeile in die Rakete.
Nur ab 821 Pixel: auf dem Telefon gilt der eigene, kleinere Satz weiter
oben, und der stuende sonst vor dieser Regel und wuerde ueberschrieben. */
@media (min-width:821px){
.hero h1.h1-dreizeilig{max-width:none;font-size:clamp(30px,5.8vw,50px)}
}
/* Dreizeiler mit kurzen Zeilen, Programm-Seite:
"Zwölf Monate. / Ein Führungsteam. / Ein System, das trägt."
Die längste Zeile hat 22 Zeichen und braucht bei 54 Pixel Grad rund 600
Pixel, die Textsäule ist 660 breit. Die Breitenbegrenzung von 19 Zeichen
muss weg, sonst bricht der Satz zusätzlich zum gesetzten Umbruch um.
Anders als der Startseiten-Dreizeiler gilt das ohne Fensterabfrage: die
Zeilen sind kurz genug, dass sie auch auf schmalen Telefonen stehen
bleiben (bei 360 Pixel Fenster braucht die längste 297 von 316 Pixeln). */
.hero h1.h1-drei-kurz{max-width:none;font-size:clamp(27px,5.8vw,54px)}
.hero h1 em{color:var(--violet-hell)}
.hero .lead{font-size:19.5px;line-height:1.5;margin-top:24px;max-width:46ch;color:#fff}
/* Der Hero der Programm-Seite muss rechts keine Bildhaelfte freihalten, dort
steht nur der Nachthimmel. Der Text laeuft deshalb ueber eine breitere
Saeule, aus sechs Zeilen
werden vier. Diese Regeln stehen bewusst HINTER ".hero.inhalt" und
".hero.lead": bei gleicher Spezifitaet gewinnt die spaetere Regel, davor
platziert waeren sie wirkungslos. Nur am Rechner. */
@media (min-width:981px){
.hero--nacht .inhalt{max-width:900px}
/* Vier Zeilen bleiben, aber gleich lang: Die letzte trug nur
zwei Woerter, waehrend die drei darueber bis an den Rand liefen.
"text-wrap:balance" verteilt die Woerter gleichmaessig auf die Zeilen.
Browser ohne diese Eigenschaft brechen wie bisher um, es geht also
nichts verloren. */
.hero--nacht .lead{max-width:none;text-wrap:balance}
}
.hero .sub{font-size:16.5px;line-height:1.62;margin-top:16px;max-width:48ch;color:rgba(255,255,255,.82)}
.hero .row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:32px}
.hero .micro{margin-top:16px;font-size:13px;color:rgba(255,255,255,.6)}
.hero .proof{margin-top:32px;padding-top:20px;border-top:1px solid rgba(255,255,255,.22);
font-size:13.5px;color:rgba(255,255,255,.66);max-width:52ch}
.hero .proof b{color:#fff;font-weight:600}
/* ---------- Telefon: Absatz unter der Ueberschrift ----------
Vorgabe: der Absatz unter dem Hero soll auf dem Telefon kleiner
werden, und zwar NUR dort. Betroffen sind genau zwei Stellen, der Satz
"In zwoelf Monaten baue ich..." auf der Startseite und die Einordnung
"Fuer Unternehmen mit 15 bis 250 Mitarbeitenden..." auf der Programm-Seite.
Sonst kommt ".lead" nirgends innerhalb eines ".hero" vor, alle uebrigen
Seiten tragen ihren Vorspann in ".bs-kopf" und bleiben unberuehrt.
Der Programm-Absatz ist mit 340 Zeichen der laengste und kostete bei 390
Pixel Fensterbreite neun Zeilen, damit stand der erste Knopf ausserhalb des
ersten Bildschirms. Die Zeilenhoehe geht im Gegenzug leicht hoch, kleinere
Schrift braucht mehr Luft. 15,5 Pixel liegen ueber der 14-Pixel-Grenze der
Mobil-Pruefung, das bleibt Fliesstext und wird nicht zu Kleingedrucktem.
Der Block steht bewusst HINTER ".hero.lead": Die Media-Abfrage weiter
oben in dieser Datei hat dieselbe Spezifitaet, dort verliert sie gegen die
spaetere Regel und ist wirkungslos. Genau daran ist der bisherige
Telefon-Wert von 17 Pixel gescheitert, gemessen wurden 19,5.
Der Fussabstand von 16 statt 24 Pixeln kommt aus derselben alten Regel und
wirkt jetzt zum ersten Mal. */
@media (max-width:820px){
.hero .lead{font-size:15.5px;line-height:1.52;margin-top:16px}
}
@media (max-width:900px){
.hero .inhalt{max-width:none}
}
/* ===========================================================================
4 · PUNKT 4 · Logo-Band direkt unter dem Hero
=========================================================================== */
/* Reines Weiss statt Toenung: einige Kundenlogos bringen weisse Kaesten mit,
auf Weiss verschwinden deren Kanten. */
.vertrauen{padding:32px 0 30px;border-top:none;background:var(--paper);overflow:hidden}
.vertrauen .lbl{text-align:center;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
color:#786F7E;margin-bottom:18px}
/* ---------- Kennzahlen-Zeile zwischen Hero und Logos ----------
Vier Angaben in einer Zeile, getrennt durch einen Mittelpunkt. Der Punkt
kommt aus:before und steht nie am Zeilenanfang, weil er zum folgenden
Eintrag gehoert und mit ihm umbricht. Auf dem Telefon brechen die vier
Angaben in zwei Zeilen, dort traegt jede ihren eigenen Punkt nicht mehr,
sondern es zaehlt der Abstand. */
/* Ohne Flaeche und ohne Rahmen: nur kraeftiger
gesetzt und im selben Grau wie die Beschriftung "Vertrauen von" darunter.
Der Ton dort war #8B8391 und kommt auf Weiss auf 3,65:1, also unter die
geforderten 4,5:1 (WCAG 1.4.3, ueber das BFSG verbindlich). Beide Zeilen
tragen deshalb #786F7E: 4,80:1 und mit blossem Auge derselbe Ton. Die
Schriftgroesse bleibt bei 14 Pixeln. */
.cred{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
gap:4px 0;max-width:900px;margin:0 auto 26px;padding:0 8px;
font-size:14px;font-weight:600;line-height:1.5;color:#786F7E;text-align:center}
.cred li{display:inline-flex;align-items:baseline}
.cred li + li::before{content:"·";display:inline-block;margin:0 18px;color:#786F7E;
font-weight:400;opacity:.7}
/* Auf dem Telefon stehen die vier Angaben untereinander. In einer
umbrechenden Zeile landete der Trennpunkt sonst am Zeilenanfang und stand
dort wie ein Aufzaehlungszeichen, das keins ist (gemessen auf 390 Pixel). */
@media (max-width:640px){
.cred{flex-direction:column;align-items:center;font-size:13px;margin-bottom:20px;gap:3px}
.cred li + li::before{content:none}
}
/* Auf dem Telefon faellt die Zeile ganz weg: Untereinander
gesetzt belegte sie vier Zeilen direkt unter dem Hero und drueckte das
Logo-Band nach unten. Dieselben Angaben stehen weiter unten noch einmal,
im Abschnitt "Ueber mich" und auf der Programm-Seite, sie gehen also nicht
verloren. Nur ausgeblendet, nicht aus dem Markup entfernt, weil sie am
Rechner unveraendert steht. */
@media (max-width:820px){
.cred{display:none}
}
/* Gilt fuer Wortgruppen, die nicht getrennt werden duerfen, etwa
"mit 15 bis 250 Mitarbeitenden" im Hero-Kicker. */
.nowrap{white-space:nowrap}
.laufband{position:relative;width:100%;overflow:hidden}
.laufband .bahn{display:flex;width:max-content}
.laufband .gruppe{display:flex;align-items:center;gap:48px;padding-right:48px}
/* Echte Kundenlogos, vereinheitlicht ueber Graustufen und eine gemeinsame
Hoehe. Kompakte Bildmarken (Quadrate) bekommen etwas mehr Hoehe, sonst
wirken sie neben den Wortmarken verloren. Farbe erst beim Ueberfahren. */
.lb-logo{flex:none;height:28px;width:auto;filter:grayscale(1);opacity:.62;
transition:filter .25s ease,opacity .25s ease}
.lb-logo--hoch{height:38px}
/* Zwei Ausnahmen von der Grundhoehe, gemessen an der Hoehe der
ausgeschriebenen Wortmarke im Verhaeltnis zur Bildhoehe:
secucloud (Referenz) 66 %, Teamfluence 74 %, Vielhaber 49 % ohne Weissraum.
Bei gleicher Kastenhoehe wirkt Teamfluence dadurch groesser und Vielhaber
kleiner als die Reihe. Die Werte hier stellen die Schriftgroessen gleich,
nicht die Kaesten. */
.lb-logo--teamfluence{height:22px}
.lb-logo--vielhaber{height:47px}
.lb-logo:hover{filter:none;opacity:1}
.laufband--logos .bahn{animation:laufen 60s linear infinite}
.laufband:hover .bahn,.laufband:focus-within .bahn{animation-play-state:paused}
@keyframes laufen{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ===========================================================================
5 · Über mich mit drehbarer Porträtkarte
=========================================================================== */
/* Die Karte läuft oben und unten bündig mit der Textspalte daneben */
.person{display:grid;grid-template-columns:290px 1fr;gap:clamp(32px,5vw,60px);align-items:stretch;max-width:980px;margin:0 auto}
.person > div{display:flex;flex-direction:column}
.person .dreher,.person .dreher .flaeche,.person .dreher .seite{height:100%}
.person p + p{margin-top:16px}
.person .checks{margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
/* Tim 23.08.: Auf dem Telefon stand die Portraetkarte linksbuendig unter der
Ueberschrift, die selbst mittig steht. Jetzt sitzt sie mittig, die Textspalte
darunter bleibt im Flattersatz links. */
@media (max-width:820px){
.person{grid-template-columns:1fr}
.person .dreher,.person .portraet{max-width:290px;margin-left:auto;margin-right:auto}
/* Auf dem Telefon stehen Bild und Text untereinander, es gibt also keine
gemeinsame Zeilenhoehe mehr, an der sich das Bild strecken koennte.
Zwei Dinge muessen deshalb zurueckgenommen werden, sonst faellt das Bild
auf 0 mal 0 Pixel zusammen (gemessen am 24.08.):
1. "flex:1" aus der Grundregel bedeutet "flex-basis:0 plus wachsen". Am
Rechner gibt das Raster der Spalte eine feste Hoehe, in die das Bild
hineinwachsen kann. Hier richtet sich die Hoehe nach dem Inhalt, es gibt
also nichts zu verteilen, und aus der Basis 0 wird nie mehr als 0.
2. "height:100%" haette danach ohnehin keinen Bezugswert.
Also zurueck auf das Quadrat, gleiche Loesung wie bei ".bs-portrait img"
auf der Seite "Ueber mich".
3. Die Breite muss ausdruecklich gesetzt werden. Die Regel darueber gibt
dem Kaesten nur eine Hoechstbreite und zwei automatische Aussenabstaende,
damit es mittig steht. Automatische Aussenabstaende heben das Strecken
auf die Spaltenbreite auf, uebrig bleibt "so breit wie der Inhalt".
Diese Breite kam bisher von der Bildunterschrift, die Zeile
"Sparringspartner fuer Fuehrungsteams" war rund 210 Pixel breit. Die
Unterschrift ist am 24.08. entfallen, und ein Bild mit "width:100%"
traegt selbst keine Breite bei, gemessen wurden 0 Pixel.
"min(290px, 100%)" setzt einen festen Wert und laesst das Bild auf
schmalen Telefonen trotzdem mitschrumpfen. */
.person .portraet{flex:0 0 auto;width:min(290px,100%)}
.person .portraet img{height:auto;aspect-ratio:1}
}
/* ---------- Portraet ohne Rahmen ----------
Bis zum 24.08. steckte das Foto hier in einer Karte: Polster, Rahmen,
Schatten, darunter Name und Rolle. Auf der Seite "Ueber mich" steht dasselbe
Foto nackt, nur mit runden Ecken. Vorgabe: eine Optik, und zwar die
ohne Rahmen. Die Bildunterschrift ist mit weg, weil der Absatz daneben den
Namen und die Rolle im ersten Satz nennt.
Werte sind bewusst dieselben wie bei ".bs-portrait img" in
css/bereichsseiten.css: 16 Pixel Radius, Ausschnitt 50% 22%, damit auf
beiden Seiten derselbe Bildausschnitt steht. Aendert sich einer der Werte,
muss die andere Stelle mit. */
.portraet{display:grid;flex:1;min-height:0}
.portraet img{display:block;width:100%;height:100%;
object-fit:cover;object-position:50% 22%;border-radius:16px}
/* Drehkarte: vorn das Porträt, hinten die Zahlen. Bedienung per Klick und Tastatur. */
.dreher{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
perspective:1200px;font:inherit;text-align:left;color:inherit}
/* Beide Seiten liegen im selben Rasterfeld übereinander. Dadurch bestimmt die
höhere Seite die Kartenhöhe, und nichts läuft über den Rand hinaus. */
.dreher .flaeche{display:grid;width:100%;
transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.dreher[aria-expanded="true"] .flaeche{transform:rotateY(180deg)}
.dreher .seite{grid-area:1/1;position:relative;display:flex;flex-direction:column;backface-visibility:hidden}
.dreher .seite.hinten{transform:rotateY(180deg);justify-content:center;
padding:22px 20px 38px;border:1px solid var(--line);border-radius:16px;background:var(--paper-2)}
/* Die breite Karte bringt ihre Flächen selbst mit, sie braucht keinen zweiten Rahmen */
.dreher--breit .seite.hinten{padding:0;border:0;background:none}
/* Die Vorderseite ist eine eigene Karte: heller Rahmen, weiche Ecken, leichter
Schatten. Beim Überfahren hebt sie sich an, damit erkennbar ist, dass sie lebt. */
.dreher--portraet{--wink-x:18px;--wink-y:15px}
.dreher--portraet .vorn{padding:14px 14px 38px;border:1px solid var(--line);border-radius:16px;
background:var(--paper);box-shadow:0 10px 26px -20px hsla(286 50% 25% / .55);
transition:box-shadow .22s ease,border-color .22s ease}
.dreher--portraet:hover .vorn{border-color:hsla(286 50% 60% / .5);
box-shadow:0 18px 38px -20px hsla(286 50% 25% / .6)}
.dreher .foto{display:block;border-radius:11px;overflow:hidden;background:var(--paper-2)}
.dreher .foto img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.dreher .name{display:block;font-family:var(--serif);font-size:22px;color:var(--ink);margin-top:14px}
.dreher .rolle{display:block;font-size:13px;color:var(--violet);font-weight:600;margin-top:2px;margin-bottom:12px}
/* Der Dreh-Hinweis steht auf jeder Karte unten rechts, damit erkennbar ist,
dass sie sich wenden lässt. margin-top:auto drückt ihn an den Fuß der Seite. */
/* Fest an der Kante verankert statt im Textfluss. Nur so sitzt der Hinweis
vorn und hinten an derselben Stelle, obwohl die Seiten anders aufgebaut sind.
Der Platz dafür wird unten über padding-bottom freigehalten. */
.dreher .wink{position:absolute;right:var(--wink-x,16px);bottom:var(--wink-y,14px);
display:inline-flex;align-items:center;gap:6px;
font-size:11.5px;font-weight:500;letter-spacing:.02em;color:var(--faint);
transition:color .2s ease}
.dreher .wink svg{width:13px;height:13px;flex:none;opacity:.8;
transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .2s ease}
.dreher:hover .wink,.dreher:focus-visible .wink{color:var(--violet)}
.dreher:hover .wink svg{transform:rotate(-180deg);opacity:1}
/* auf dunklem Grund dreht sich die Farbgebung um */
.dreher .wink--hell{color:rgba(255,255,255,.5)}
.dreher:hover .wink--hell,.dreher:focus-visible .wink--hell{color:var(--violet-hell)}
.dreher .hinten .titel{display:block;font-size:11px;font-weight:600;letter-spacing:.18em;
text-transform:uppercase;color:var(--faint);padding-bottom:12px;margin-bottom:6px;
border-bottom:1px solid var(--line)}
/* Werte in einer festen Spalte, dadurch stehen sie sauber untereinander.
Eine Schrift, zwei Helligkeiten, keine farbigen Einsprengsel im Satz. */
.dreher .zahlen{display:block}
.dreher .zahl{display:grid;grid-template-columns:84px 1fr;gap:10px;align-items:baseline;
padding:9px 0;border-bottom:1px solid var(--line)}
.dreher .zahl:last-child{border-bottom:0}
.dreher .zahl b{font-weight:600;font-size:14px;color:var(--ink);letter-spacing:-.01em}
.dreher .zahl i{font-style:normal;font-size:13px;line-height:1.35;color:var(--ink-soft)}
.dreher:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:16px}
/* ===========================================================================
6 · Das Problem
=========================================================================== */
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:900px;margin:0 auto}
.tafel{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:30px}
.tafel .nr{font-family:var(--serif);font-size:15px;color:var(--flame);font-style:italic}
.tafel h3{font-size:26px;margin:8px 0 10px}
.tafel p{font-size:15.5px;line-height:1.55}
/* Auf dem Telefon stehen die beiden Fälle untereinander. Vorher
liefen sie in einer Wischreihe: Man sah immer nur einen den Fall und musste
wischen, um den zweiten zu finden. Beide gehören aber zusammen, der Text
darunter sagt "In beiden Fällen …". Untereinander sind sie in einem Zug
lesbar. Nebeneinander wären sie das auch, dort blieben je Karte aber nur
rund 170 Pixel Textbreite, das reicht für die Überschriften nicht. */
@media (max-width:820px){
.zwei{grid-template-columns:1fr;gap:14px}
.tafel{padding:22px 20px;border-radius:12px}
.tafel .nr{font-size:14px}
.tafel h3{font-size:22px;margin:6px 0 10px}
.tafel p{font-size:15px;line-height:1.55}
}
/* ---------- Zeilenfall im Problem-Abschnitt, nur am Rechner
Der zweite den Fall fiel auf drei Zeilen, der erste auf zwei. Statt die Schrift
zu verkleinern bekommen beide Karten mehr Breite: Das Paar laeuft jetzt
ueber die volle Inhaltsbreite (1064 Pixel, also genau die Breite von.wrap
ohne Polster), beide Karten wachsen gleich mit und bleiben als Gruppe
mittig. Textbreite je Karte damit 460 statt 376 Pixel.
Beide Absaetze brechen fest nach ihrem ersten Satz, sonst zieht der freie
Umlauf die ersten Woerter des zweiten Satzes noch mit hoch. Die Ueberschrift
bricht ebenso fest nach "Du hast Fuehrungskraefte." und braucht dafuer mehr
als die 680 Pixel des Standard-Kopfes.
Grenze 1120 Pixel ist gemessen, nicht geschaetzt: Erst dort stellt.wrap die
vollen 1064 Pixel bereit. Darunter bleibt es beim alten Stand (900 Pixel,
freier Umlauf), die harten Umbrueche werden ausgeblendet. Die Regeln stehen
bewusst HINTER der Grundregel.zwei weiter oben, sonst blieben sie bei
gleicher Spezifitaet wirkungslos.
Die Breite muss am Kopf-Block selbst haengen, nicht an der Ueberschrift: Ein
max-width am Kind kann die Inhaltsbox des Elternteils nicht ueberschreiten,
ein erster Versuch mit "#problem.kopf h2{max-width:820px}" blieb deshalb
wirkungslos. Der Einleitungssatz darunter wird auf seine bisherigen 680
Pixel zurueckgesetzt, damit sein Zeilenfall unveraendert bleibt. */
/* Tim am 23.08.: Der Einleitungssatz bekommt einen festen Umbruch nach
"Konflikte, die niemand loest." Damit beide Haelften auf je EINER Zeile
stehen, braucht der Absatz mehr Breite als die bisherigen 680 Pixel: Die
zweite Haelfte misst 83 Zeichen. Der Kopf-Block wird deshalb auf 940 Pixel
geoeffnet und die Ueberschrift darin auf ihre bisherigen 820 Pixel
zurueckgesetzt, damit ihr Zeilenfall unveraendert bleibt. */
@media (min-width:1120px){
.zwei{max-width:1064px}
#problem .kopf{max-width:940px}
#problem .kopf h2{max-width:820px;margin-left:auto;margin-right:auto}
#problem .kopf p{max-width:940px;margin-left:auto;margin-right:auto}
}
@media (max-width:1119px){
.tafel p br,#problem .kopf h2 br,#problem .kopf p br{display:none}
}
/* ===========================================================================
7 · Acht Felder
=========================================================================== */
.felder{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
border:1px solid var(--line);border-radius:12px;overflow:hidden}
.feldkachel{background:var(--paper);padding:26px 22px;transition:background .2s ease}
.feldkachel:hover{background:var(--paper-2)}
.feldkachel .nr{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--flame)}
.feldkachel h3{font-size:19px;margin:6px 0 8px}
.feldkachel p{font-size:14px;line-height:1.5}
.feldkachel.betont{background:var(--ink)}
.feldkachel.betont:hover{background:#241E22}
.feldkachel.betont .nr{color:var(--violet-hell)}
.feldkachel.betont h3{color:#fff}
.feldkachel.betont p{color:rgba(255,255,255,.76)}
@media (max-width:980px){.felder{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.felder{grid-template-columns:1fr}}
/* ===========================================================================
8 · Die Lösung: dunkles Band mit Stufen-Karten und Stufentrennung
Das erste der dunklen Rhythmus-Baender: flaechiges Nachtviolett
wie im Vorhang, Karten als dunkles Glas, Schrift vollstaendig umgefaerbt
(: jede Textfarbe gegen den echten Hintergrund gerechnet).
=========================================================================== */
#loesung{background:var(--nacht);border-top:none}
#loesung .kopf .kick{color:var(--violet-hell)}
#loesung .kopf .kick .strich{background:var(--violet-hell)}
#loesung h2{color:#fff}
#loesung h2 em{color:var(--violet-hell)}
#loesung .kopf p{color:rgba(255,255,255,.78)}
/* Der Einleitungssatz laeuft am Rechner ueber die Breite der drei Karten
darunter, damit er auf drei statt vier Zeilen faellt. 980
statt 1064 Pixel: Er bleibt damit sichtbar innerhalb der Kartenreihe und
stoesst nicht an deren Kanten. */
@media (min-width:981px){
#loesung .kopf{max-width:980px}
}
/* Ueberschrift und Einleitung brechen fest, im HTML als :
"Ein Fuehrungssystem fuer Dein Team," / "in zwoelf Monaten." und der
Schlusssatz "Bei Unternehmen sind es dieselben drei..." auf einer eigenen
dritten Zeile. Unter 981 Pixel steht nur der 680 Pixel breite Standard-Kopf
zur Verfuegung, dort wuerden die erzwungenen Zeilen selbst wieder umbrechen,
deshalb fallen beide Umbrueche dort weg. */
@media (max-width:980px){
#loesung .kopf h2 br,#loesung .kopf p br{display:none}
/* Auch die Klammer um "Bloom Growth Systems" wird geloest: In der schmalen
Spalte passt der Name nicht mehr in den Rest der laufenden Zeile und
springt komplett auf die naechste, die Zeile darueber bleibt dann zu
einem Drittel leer stehen (gemessen auf 390 Pixel). */
#loesung .kopf p .nowrap{white-space:normal}
}
/* Dezenter Verweis auf die Programm-Seite, kein Knopf.
Helles Violett auf Nachtviolett, gerechnet 8,5:1. */
.weiterweg{margin:34px 0 0;text-align:center;font-size:15.5px}
.weiterweg a{color:var(--violet-hell);text-decoration:none}
.weiterweg .pfeil{color:var(--violet-hell);margin-left:6px;display:inline-block;
transition:transform .2s ease}
.weiterweg:hover .pfeil{transform:translateX(3px)}
.stufen{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.stufe{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-top:3px solid var(--violet-hell);
border-radius:3px 3px 12px 12px;padding:30px 26px;transition:transform .2s,box-shadow .2s,background .2s}
.stufe:hover,.stufe:focus-within{transform:translateY(-3px);background:rgba(255,255,255,.08);
box-shadow:0 16px 36px -18px rgba(0,0,0,.6)}
.stufe .ico{display:block;width:34px;height:34px;color:var(--violet-hell);margin-bottom:14px}
.stufe .ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.stufe .rolle{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--violet-hell)}
.stufe h3{font-size:24px;margin:6px 0 10px;color:#fff}
.stufe p{font-size:15px;line-height:1.55;color:rgba(255,255,255,.75)}
.stufe .balken{height:3px;border-radius:3px;background:linear-gradient(90deg,var(--violet),var(--flame));
transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.22,1,.36,1);margin-top:20px}
.stufe:hover .balken,.stufe:focus-within .balken{transform:scaleX(1)}
@media (max-width:820px){.stufen{grid-template-columns:1fr}}
/* Icon-Bewegungen: einmal beim Erscheinen, danach bei jedem Ueberfahren */
@keyframes ic-dreh{to{transform:rotate(360deg)}}
@keyframes ic-zeichnen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* Die Rakete verlässt das Feld nach oben und kommt von unten wieder herein.
Der Sprung von oben nach unten passiert in einem Schritt, außerhalb der Sicht. */
@keyframes ic-durchbruch{
0%{transform:translateY(0)}
42%{transform:translateY(-165%)}
43%{transform:translateY(165%)}
100%{transform:translateY(0)}
}
/* Die Icons bewegen sich beim Überfahren, und zwar jedes Mal neu. Sie laufen
bewusst nicht schon beim Erscheinen, sonst ist der erste Hover wirkungslos.
Ausgelöst wird über die Klasse "ico-laeuft" statt über:hover. js/seite.js
setzt die Klasse beim Betreten und nimmt sie erst zurück, wenn die Bewegung
durchgelaufen ist. Mit:hover brach sie ab, sobald die Maus die Karte
verließ, und eine abgebrochene Bewegung sieht aus wie ein Fehler.
Die Tastatur-Fassung über:focus-within bleibt daneben bestehen. */
.ic-kompass{transform-origin:50% 50%}
.stufe.ico-laeuft .ic-kompass,.stufe:focus-within .ic-kompass{animation:ic-dreh 1.1s cubic-bezier(.4,0,.2,1)}
.ic-puls path{stroke-dasharray:1;stroke-dashoffset:0}
.stufe.ico-laeuft .ic-puls path,.stufe:focus-within .ic-puls path{animation:ic-zeichnen .9s ease}
/* Damit die Rakete wirklich durchbricht, wird über den Rand hinaus abgeschnitten */
.stufe .ico--rakete{overflow:hidden}
.stufe.ico-laeuft .ic-rakete,.stufe:focus-within .ic-rakete{animation:ic-durchbruch .85s cubic-bezier(.5,0,.3,1)}
/* Mobile Schieber-Punkte im dunklen Band brauchen helle Farben */
#loesung .punkte button{background:rgba(255,255,255,.28)}
#loesung .punkte button[aria-current="true"]{background:var(--violet-hell)}
/* Stufentrennungs-Block */
/* Drehkarte: vorn die Stufentrennung auf dunklem Grund, hinten der Umfang.
Im dunklen Band setzt sich die Karte ueber eine Haarlinie und das waermere
Ink vom Nachtviolett ab. */
/* Volle Breite wie die drei Karten darueber */
/* Der Dreh-Hinweis sitzt absolut an der Kante. Sein Platz muss unten als
Polster freigehalten werden: gebraucht werden --wink-y plus die Zeilenhoehe
des Hinweises (18 Pixel). Ist das Polster kleiner, laeuft der Text darunter
(gemessen am 18.08. auf 390 Pixel: 6 Pixel Ueberlappung). Deshalb hier 18
plus 40 Pixel Polster in beiden Seiten der Karte. */
.dreher--breit{margin:44px auto 0;--wink-x:28px;--wink-y:18px}
.abkoppeln{display:grid;grid-template-columns:56px 1fr;gap:24px;align-items:stretch;flex:1;
padding:30px 36px 48px;background:var(--ink);border:1px solid rgba(255,255,255,.14);
border-radius:12px;min-height:100%}
/* Die Textspalte steht mittig in der Karte (18.08.). Die Kartenhöhe kommt von
der Rückseite mit ihren fünf Punkten, der Text der Vorderseite ist seit
Tims Kürzung deutlich kürzer. Oben ausgerichtet stand die Differenz als
ein Block Leerraum unter dem Text und las sich, als fehle etwas. Mittig
verteilt sie sich auf beide Seiten und wird zu Luft statt zu einer Lücke. */
.abkoppeln > span:last-child{display:flex;flex-direction:column;justify-content:center}
.abkoppeln .zeichen{align-self:center}
.abkoppeln .zeichen{display:block;width:56px;height:66px;color:var(--violet-hell)}
.abkoppeln .zeichen svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.abkoppeln .rolle{display:block;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--violet-hell)}
.abkoppeln .tit{display:block;font-family:var(--serif);font-weight:600;line-height:1.12;
color:#fff;font-size:26px;margin:8px 0 12px}
.abkoppeln .tit em{color:var(--violet-hell)}
.abkoppeln .txt{display:block;color:rgba(255,255,255,.78);font-size:15.5px;line-height:1.6}
@media (max-width:700px){.abkoppeln{grid-template-columns:1fr}.abkoppeln .zeichen{width:46px;height:54px}}
/* Die Rueckseite bestimmt die Hoehe der Karte, weil beide Seiten im selben
Rasterfeld liegen. Sie traegt fuenf Punkte, die Vorderseite seit dem 18.08.
nur noch drei Textzeilen: der Unterschied stand als Leerraum unter dem Text. Die Rueckseite ist deshalb enger
gesetzt, gleiche Schriftfamilie, eine Spur kleiner und mit engeren
Abstaenden. Gemessen wurde vorher und nachher, siehe Sitzungsnotiz. */
.umfang{display:flex;flex-direction:column;justify-content:center;flex:1;
padding:24px 36px 48px;background:var(--paper-2);
border:1px solid var(--line);border-radius:12px;min-height:100%}
.umfang .tit{display:block;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
color:var(--faint);font-family:var(--sans);text-align:center;margin-bottom:14px}
.umfang .liste{display:grid;gap:8px;max-width:56ch;margin:0 auto}
.umfang .pos{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;line-height:1.45;color:var(--ink)}
.umfang .pos .hk{flex:none;width:17px;height:17px;margin-top:3px;color:var(--violet)}
.umfang .pos .hk svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* ===========================================================================
9 · So fangen wir an
=========================================================================== */
.schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.schritt{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:30px 26px}
.schritt .n{font-family:var(--serif);font-size:38px;color:var(--violet);line-height:1;margin-bottom:12px}
.schritt h3{font-size:20px;margin-bottom:8px}
.schritt p{font-size:15px;line-height:1.55}
.garantie{max-width:820px;margin:32px auto 0;padding:26px 30px;border:1px solid var(--line);border-left:3px solid var(--violet);
border-radius:3px 12px 12px 3px;background:var(--paper)}
.garantie h3{font-size:20px;margin-bottom:8px}
.garantie p{font-size:15px;line-height:1.55}
@media (max-width:820px){.schritte{grid-template-columns:1fr}}
/* ===========================================================================
10 · Was wir konkret erreichen
=========================================================================== */
.etappen{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.etappe{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:30px 26px}
.etappe .marke-zeit{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
color:var(--flame);margin-bottom:16px;display:block}
.etappe .checks li{font-size:14.5px}
/* Bleiben untereinander, aber enger gestellt */
@media (max-width:900px){.etappen{grid-template-columns:1fr;gap:12px}}
@media (max-width:820px){.etappe{padding:22px 20px}}
/* ===========================================================================
11 · Kundenstimmen als Dauerlauf-Band
Am Rechner ziehen die sechs Karten seitlich durch und halten an, sobald der
Zeiger oder der Tastatur-Fokus darauf steht. Auf dem Telefon bleibt der
Wisch-Schieber, dort gibt es kein Hover zum Anhalten.
=========================================================================== */
#stimmen{background:var(--paper-2)}
.stimmen-band{position:relative}
.stimmen-gruppe{display:flex;gap:24px;padding-right:24px}
.stimme{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:28px 26px;
display:flex;flex-direction:column;width:360px;flex:none}
.stimme .ergebnis{font-family:var(--serif);font-size:18px;line-height:1.3;color:var(--ink);margin-bottom:12px}
.stimme blockquote{font-size:14.5px;line-height:1.6;color:var(--ink-soft);font-style:italic;flex:1}
.stimme .wer{display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.stimme .wer img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.stimme .wer b{display:block;font-size:14px;color:var(--ink);font-weight:600}
.stimme .wer span{display:block;font-size:12.5px;color:var(--faint)}
/* Karten, deren Zitat noch auf die schriftliche Freigabe wartet: der Vermerk
steht aufrecht und leiser, damit er nicht wie ein echtes Zitat wirkt. */
.stimme--folgt blockquote{font-style:normal;color:var(--faint);font-size:13.5px}
@media (min-width:821px){
.stimmen-band{overflow:hidden;padding:2px 0 6px}
.stimmen-band .bahn{display:flex;width:max-content;animation:stimmen-lauf 75s linear infinite}
.stimmen-band:hover .bahn,.stimmen-band:focus-within .bahn{animation-play-state:paused}
.stimmen-band [data-punkte]{display:none}
}
@keyframes stimmen-lauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:820px){
/* Wisch-Schieber wie bei den anderen Karten-Reihen. Die Regeln stehen hier
eigens, weil die Spur im Band eine Ebene tiefer liegt als beim
Standard-Schieber ([data-schieber] > .spur greift nicht). */
.stimmen-gruppe--klon{display:none}
.stimmen-band .spur{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;
padding:2px 20px}
.stimmen-band .spur::-webkit-scrollbar{display:none}
.stimmen-band .spur > *{flex:0 0 84%;width:auto;scroll-snap-align:center;margin:0}
}
/* ===========================================================================
12 · Kontakt: dunkles Abschluss-Band, Tims Schnitt vom 10.08.
(kein Formular auf der Seite): Überschrift, drei Handlungswege, Mail-Zeile.
Der Anfrage-Dialog liegt hinter dem dritten Knopf, seine Stile stehen
direkt darunter. Farbumkehr vollstaendig, Kontraste gerechnet:
weiss .78 auf Nachtviolett = 10,9:1, .62 = 8,1:1.
=========================================================================== */
/* Bildausschnitt im Hintergrund, bewusst ohne jede Bewegung.
Seit dem 14.08. tragen ihn beide dunklen Baender, Loesung und Kontakt. Der Text liegt darueber, deshalb drei Schichten:
Bild, Verlauf, Inhalt. isolation:isolate haelt die Stapelung in der
Sektion, overflow:clip schneidet das Bild an den Kanten ab (nicht hidden,
das brach sticky). */
#kontakt,#loesung{background:var(--nacht);border-top:none;position:relative;isolation:isolate;overflow:clip}
#kontakt .kt-bild,#loesung .kt-bild{position:absolute;inset:0;z-index:0;width:100%;height:100%;
object-fit:cover;object-position:50% 34%;opacity:.82}
/* Zwei Verlaeufe mit umgekehrter Aufgabe:
1. dicht HINTER dem Text, offen zu den Seiten. Erst so gemessen: einzelne
helle Sterne lagen genau hinter der Ueberschrift und drueckten den
Kontrast dort auf 3,9:1, also unter die geforderten 4,5:1. Jetzt liegt
die Deckung dort, wo die Schrift steht, und die Raender bleiben offen.
2. der senkrechte Verlauf schliesst die Kanten ins volle Nachtviolett,
damit die Sektion oben und unten sauber an ihre Nachbarn stoesst. */
#kontakt .kt-schleier,#loesung .kt-schleier{position:absolute;inset:0;z-index:1;
background:
radial-gradient(58% 56% at 50% 42%, hsla(282 30% 11% / .72) 0%, hsla(282 30% 11% / .34) 62%, hsla(282 30% 11% / .06) 100%),
linear-gradient(180deg, var(--nacht) 0%, hsla(282 30% 11% / .22) 26%, hsla(282 30% 11% / .30) 70%, var(--nacht) 100%)}
#kontakt > .wrap,#loesung > .wrap{position:relative;z-index:2}
/* Im Loesungs-Band steht mehr Text uebereinander als im Kontakt-Band, die
Einleitung reicht tiefer als der dichte Kern des Verlaufs. Gemessen kam sie
dort auf 4,96:1, also nur knapp ueber die geforderten 4,5:1. Der Kern wird
deshalb hier tiefer gesetzt und groesser gezogen. */
#loesung .kt-schleier{
background:
radial-gradient(66% 52% at 50% 30%, hsla(282 30% 11% / .74) 0%, hsla(282 30% 11% / .40) 66%, hsla(282 30% 11% / .10) 100%),
linear-gradient(180deg, var(--nacht) 0%, hsla(282 30% 11% / .30) 30%, hsla(282 30% 11% / .34) 70%, var(--nacht) 100%)}
.kt-band{max-width:780px;margin:0 auto;text-align:center}
.kt-band .kick{display:inline-flex;align-items:center;gap:14px;font-size:11.5px;font-weight:600;
letter-spacing:.22em;text-transform:uppercase;color:var(--violet-hell)}
.kt-band .kick .strich{display:block;width:28px;height:1px;background:var(--violet-hell);opacity:.7}
.kt-band h2{font-size:clamp(28px,3.4vw,40px);color:#fff;margin-top:16px}
.kt-band h2 em{color:var(--violet-hell)}
.kt-satz{margin:16px auto 0;font-size:16px;line-height:1.65;color:rgba(255,255,255,.78);max-width:52ch}
/* Zwei Zeilen statt drei, Umbruch steht als im HTML nach
"keine Präsentation.". Dafuer muss die Grenze von 52 Zeichen weg und das
Band eine Spur breiter werden. Diese Regeln stehen bewusst HIER und nicht
im Loesungs-Abschnitt weiter oben: bei gleicher Spezifitaet gewinnt die
spaetere Regel, und.kt-band/.kt-satz werden genau hier gesetzt.
Unter 900 Pixel faellt der harte Umbruch weg, dort ist fuer die lange
erste Zeile kein Platz. */
@media (min-width:981px){
.kt-band{max-width:820px}
.kt-satz{max-width:none}
}
@media (max-width:899px){.kt-satz br{display:none}}
.kt-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}
.kt-mail{margin-top:24px;font-size:14.5px;color:rgba(255,255,255,.62)}
/* Hinweis, wohin der Termin-Knopf fuehrt. Leiser als die Knoepfe,
aber bewusst nicht am Rand der Wahrnehmung: Die Helligkeit ist gegen die
hellste Stelle der Textzone gerechnet und bleibt ueber 4,5:1. */
.kt-quelle{margin-top:20px;font-size:14px;color:rgba(255,255,255,.72)}
.kt-mail a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.kt-mail a:hover,.kt-mail a:focus-visible{color:var(--violet-hell);border-color:var(--violet-hell)}
/* ===========================================================================
12b · Der Shift: Wachstumskurve und Kennzahlen
=========================================================================== */
.shift{background:var(--paper-2)}
.figur{max-width:860px;margin:0 auto}
.figur svg{width:100%;height:auto;display:block}
.bildunter{margin-top:10px;font-size:13px;color:var(--faint);text-align:center;line-height:1.6;
max-width:70ch;margin-left:auto;margin-right:auto}
.ueberleitung{max-width:60ch;margin:38px auto 0;text-align:center;font-weight:600;color:var(--ink)}
/* ---------- Zeilenfall im Shift, nur am Rechner ----------
Drei Absaetze standen enger, als die Fläche hergibt, und fielen dadurch auf
eine Zeile mehr als noetig. Die Breiten orientieren sich jetzt an dem, was
daneben steht: der Einleitungssatz an der Inhaltsbreite, der Ueberleitungs-
satz an der Breite des Diagramms (860 Pixel), der Einleitungssatz der
Loesung an den drei Karten darunter. Bewusst in einer min-width-Abfrage,
damit auf dem Telefon nichts davon greift. */
@media (min-width:981px){
/* "98 von 100 Unternehmen ..." — eine Zeile statt zwei, dafuer eine Spur
kleiner, dunkler und kraeftiger. */
#shift .kopf p{max-width:none;font-size:15px;font-weight:600;color:var(--ink)}
.ueberleitung{max-width:860px}
}
/* Drei gleichwertige Kacheln nebeneinander, wie die Belegzahlen
auf der Programm-Seite. Vorher stand links eine grosse Kachel und rechts
zwei kleine uebereinander.
Alle Regeln haengen an ".shift", sonst greifen sie auch auf die Zahlen-
Rueckseite der Drehkarte unter "Ueber mich" durch: dort heissen die Zeilen
ebenfalls "zahl" und bekaemen Rahmen, Radius und Mittelsatz mit. */
.shift .zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
max-width:900px;margin:22px auto 0}
/* Inhalt oben statt mittig: Die drei Kacheln sind gleich hoch,
ihre Beschriftungen aber ein, zwei und drei Zeilen lang. Mittig gesetzt
rutschte jede Zahl um die halbe Textdifferenz nach unten, die drei Ziffern
standen dadurch treppenartig versetzt. Oben ausgerichtet liegen Ziffern und
Beschriftungen auf denselben Achsen. */
.shift .zahl{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:24px 22px;
text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
/* Kennzahlen in der Grotesk, nicht in der Ueberschriften-Serife: gleich breite
Ziffern, enger gesetzt, sachlicher Bericht-Charakter. */
.shift .zahl .num{font-family:var(--sans);font-weight:600;font-size:clamp(30px,3.9vw,40px);
letter-spacing:-.025em;font-variant-numeric:tabular-nums lining-nums;color:var(--violet);line-height:1}
.shift .zahl .num .pz{font-size:.52em;font-weight:600;letter-spacing:0;margin-left:.08em;
vertical-align:.42em;opacity:.75}
.shift .zahl .lbl{margin-top:20px;font-size:13.5px;font-weight:600;line-height:1.5;color:var(--ink)}
/* Die Leitzahl stand bis zum 15.08. eine Spur groesser (46 statt 40 Pixel).
Zusammen mit der mittigen Ausrichtung war das der zweite Grund fuer die
versetzten Ziffern: eine groessere Schrift bedeutet eine hoehere Zeile und
damit eine andere Grundlinie, die Beschriftung darunter beginnt tiefer.
Alle drei Zahlen tragen jetzt denselben Grad, damit Ziffern und
Beschriftungen ueber die Reihe hinweg auf einer Linie liegen. Die erste
Zahl fuehrt weiterhin, das leistet ihre Stellung ganz links. */
.shift .zahl.gross .lbl{max-width:none}
.quelle{margin-top:16px;text-align:center;font-size:12px;color:var(--faint)}
/* Auf dem Telefon liegen die drei Kacheln in einer Wischreihe. Die
Beschriftung steht seit dem 19.08. mittig UNTER der Zahl. Vorher
stand die Zahl links und der Text rechts daneben: Das war sinnvoll, solange
die drei Kacheln untereinander standen und Hoehe sparen mussten. In der
Wischreihe steht immer nur eine Kachel im Bild, dort kostet die flache
Aufteilung nur Textbreite. Zugleich sehen die Kacheln jetzt genauso aus wie
die gleichwertigen Belegzahlen auf der Programm-Seite. */
@media (max-width:720px){
/* 30 statt 22 Pixel Abstand nach oben. Der Wert entspricht dem Rhythmus der uebrigen Uebergaenge
in dieser Sektion: Ueberleitung 26, Schlusssatz 30, Testband 34. */
.shift .zahlen{grid-template-columns:1fr;gap:12px;margin-top:30px}
.shift .zahl{flex-direction:column;align-items:center;justify-content:center;
gap:0;text-align:center;padding:24px 20px;border-radius:12px}
.shift .zahl .num{font-size:clamp(30px,9vw,38px)}
.shift .zahl .lbl{margin-top:12px;font-size:14px;line-height:1.5}
}
/* ---------- Ueberleitungssatz auf dem Telefon ----------
Er stand in sechs Zeilen und wirkte als Block zu schwer. Gewuenscht waren
vier. Vier sind mit diesem Wortlaut nicht erreichbar: 254 Zeichen auf 350
Pixel Breite brauchten dafuer rund 11 Pixel Schriftgrad, das liegt unter
der Lesbarkeitsgrenze von 14 Pixeln fuer Fliesstext und saehe gequetscht
aus. Erreicht sind fuenf Zeilen, gemessen 113 statt 155 Pixel Hoehe.
Zwei Hebel zusammen: Der Grad haengt an der Fensterbreite, damit die Zahl
der Zeichen je Zeile ueber alle Telefongroessen aehnlich bleibt. Und der
Satz laeuft acht Pixel breiter als der uebrige Inhalt, das ist mit blossem
Auge nicht zu sehen und bringt genau die Zeile, die sonst fehlt.
"max-width:none" muss dabei stehen: das geerbte "60ch" schrumpft mit dem
Schriftgrad mit, ein kleinerer Grad allein haette also nichts gebracht. */
@media (max-width:820px){
.shift .ueberleitung{max-width:none;margin-inline:-12px;
font-size:14px;line-height:1.6}
}
/* Die Linie zeichnet sich, Krisen und Raketen setzen sich genau dann, wenn die
Linie ihre Stelle erreicht. Die Zeitpunkte rechnet das Skript aus dem Pfad. */
.shift .kurve-linie{stroke-dasharray:var(--laenge);stroke-dashoffset:var(--laenge)}
.shift.an .kurve-linie{transition:stroke-dashoffset 1.7s cubic-bezier(.4,0,.2,1);stroke-dashoffset:0}
.shift .kurve-teil{opacity:0;transform:scale(.5);transform-box:fill-box;transform-origin:center;
transition:opacity .45s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
.shift.an .kurve-teil{opacity:1;transform:none}
/* Eigener Klassenname, "stufe" gehoert in dieser Datei bereits den
Loesungs-Karten und wuerde deren Kartenrahmen mitbringen. */
.shift-ein{opacity:0;transform:translateY(16px);
transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}
/* Eigener Schalter, nicht "an": der Überleitungssatz und die drei Kennzahlen
hängen NICHT mehr an der Kurve darüber. Sie kommen, wenn sie selbst im Bild
stehen, sonst laufen sie unsichtbar ab, während oben noch gezeichnet wird. */
.shift.zahlen-an .shift-ein{opacity:1;transform:none}
/* Der Überleitungssatz steht über den Kacheln und kommt darum eigenständig,
sonst bliebe er auf dem Telefon unsichtbar, bis die Kacheln so weit sind. */
.shift-ein.sichtbar{opacity:1;transform:none}
.shift.zahlen-an .shift-ein[data-i="4"]{transition-delay:0s}
.shift.zahlen-an .shift-ein[data-i="5"]{transition-delay:.12s}
.shift.zahlen-an .shift-ein[data-i="6"]{transition-delay:.24s}
/* Weiterlesen-Zeile unter "Über mich" */
.weiterlesen{margin-top:22px;font-size:14.5px}
/* ===========================================================================
12b · Wachstumstest-Band im Lesefluss, steht am Ende des Shift
Reines Layout, kein Overlay und kein JavaScript: das Band ist auch dann
noch da, wenn der Schieber weggeklickt wurde. Linien-Knopf, damit es dem
Erstgespraech nicht die Aufmerksamkeit nimmt.
=========================================================================== */
.testband{max-width:900px;margin:52px auto 0;display:flex;flex-wrap:wrap;align-items:center;
justify-content:space-between;gap:22px;padding:26px 28px;background:var(--paper);
border:1px solid #DCCFE4;border-left:3px solid var(--violet);border-radius:14px}
.testband .txt{flex:1 1 320px}
.testband h3{font-size:22px;margin:8px 0 6px}
.testband p{font-size:14.5px;margin:0}
@media (max-width:560px){.testband{padding:22px 20px}.testband .btn{width:100%}}
/* Der Kicker sah in Band und Schieber wie normaler Text aus: die Regel dafuer
haengt an ".kopf" und griff hier nicht. */
.testband .kick,.testschieber .kick{display:inline-flex;align-items:center;gap:14px;font-size:11.5px;
font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--violet)}
.testband .kick .strich,.testschieber .kick .strich{display:block;width:28px;height:1px;
background:var(--violet);opacity:.6}
/* ===========================================================================
12c · Hinweis auf den Wachstumstest, Schieber unten rechts
=========================================================================== */
.testschieber{position:fixed;right:22px;bottom:22px;z-index:90;width:min(360px,calc(100vw - 44px));
background:var(--paper);border:1px solid #DCCFE4;border-radius:16px;padding:22px 24px 20px;
box-shadow:0 30px 70px -28px hsla(286 55% 20% / .55);
transform:translateY(140%);opacity:0;visibility:hidden;
transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .32s ease,visibility .42s ease}
.testschieber[data-offen="true"]{transform:none;opacity:1;visibility:visible}
.testschieber h3{font-size:21px;color:var(--ink);margin:8px 0 8px}
.testschieber p{font-size:14px;margin-bottom:16px}
.testschieber .btn{width:100%}
.testschieber .zu{position:absolute;top:10px;right:10px;width:36px;height:36px;display:inline-flex;
align-items:center;justify-content:center;border:0;background:transparent;color:var(--faint);
border-radius:8px;cursor:pointer;font-size:20px;line-height:1}
.testschieber .zu:hover,.testschieber .zu:focus-visible{background:var(--paper-2);color:var(--ink)}
/* Auf dem Telefon ganz aus. Der Schieber legte sich dort ueber rund 40 Prozent
des Bildschirms und verdeckte die Garantie-Karte, waehrend derselbe Hinweis
als Band im Lesefluss ohnehin dauerhaft steht und zusaetzlich im Menue, im
Kontakt-Block und im Fuss verlinkt ist. Am Rechner bleibt er, dort liegt er
in einer freien Ecke. */
@media (max-width:820px){.testschieber{display:none}}
/* ===========================================================================
12d · Vorhang beim Seitenwechsel, statt weissem Blitz
=========================================================================== */
.wechsel{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
background:var(--nacht);visibility:hidden;opacity:0;
transition:opacity .28s ease,visibility .28s ease}
.wechsel[data-an="true"]{visibility:visible;opacity:1}
.wechsel .mitte{position:relative;text-align:center;color:#fff}
.wechsel .rakete{width:52px;height:62px;display:block;margin:0 auto 20px;
transform:translateY(14px);opacity:0;
transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s ease}
.wechsel[data-an="true"] .rakete{transform:none;opacity:1;transition-delay:.08s}
.wechsel .wort{font-family:var(--serif);font-size:20px;color:#fff;opacity:0;transform:translateY(8px);
transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s ease}
.wechsel[data-an="true"] .wort{opacity:1;transform:none;transition-delay:.16s}
.wechsel .bahn3{width:180px;height:2px;margin:22px auto 0;border-radius:2px;
background:rgba(255,255,255,.18);overflow:hidden}
.wechsel .bahn3 i{display:block;height:100%;width:40%;border-radius:2px;
background:linear-gradient(90deg,transparent,var(--violet-hell),transparent);transform:translateX(-100%)}
.wechsel[data-an="true"] .bahn3 i{animation:bahnlauf 1.1s ease-in-out infinite;animation-delay:.2s}
@keyframes bahnlauf{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}
.wechsel .sternchen{position:absolute;inset:0;opacity:.22;pointer-events:none}
.wechsel .sternchen svg{width:100%;height:100%}
/* Fuellfarben des Sternenfelds. Es wird nur noch hier benutzt, im Fuss ist die
Sternenschicht am 2026-08-05 wieder entfernt worden. */
.stern{fill:#fff}
.stern.gross{fill:var(--violet-hell)}
/* ===========================================================================
13 · PUNKT 2 + 13 · Scroll-Rakete mit Status-Badge
=========================================================================== */
/* Ueber der Kopfleiste (z-index 70), damit die Rakete vor ihr wegfliegt und
nicht dahinter verschwindet. Bleibt unter Hinweis-Schieber und Vorhang. */
.flug{position:fixed;right:26px;top:0;bottom:0;width:40px;z-index:80;pointer-events:none}
.flug .trail{position:absolute;left:50%;transform:translateX(-50%);bottom:6%;width:1.5px;height:0;border-radius:2px;
background:linear-gradient(0deg,hsla(286 90% 45% / 0),hsla(286 90% 45% / .5));transition:height .12s linear}
.flug .rakete{position:absolute;left:0;width:40px;height:52px;bottom:6%;transition:bottom .12s linear}
.flug .rakete svg{width:100%;height:100%;display:block}
.flug .qualm{transition:opacity .5s ease}
/* Countdown-Phase: die Rakete steht auf der Rampe und vibriert, sie steigt noch nicht */
.flug.wartet .rakete{animation:flug-ruettel .12s linear infinite}
@keyframes flug-ruettel{0%,100%{transform:translateX(0)}25%{transform:translateX(-.7px)}75%{transform:translateX(.7px)}}
.flug .badge{position:absolute;right:52px;bottom:6%;white-space:nowrap;font-size:10.5px;font-weight:600;
letter-spacing:.18em;text-transform:uppercase;color:var(--violet);background:rgba(255,255,255,.94);
border:1px solid var(--line);border-radius:999px;padding:7px 15px;transition:bottom .12s linear;
box-shadow:0 4px 14px -8px hsla(286 60% 30% / .5)}
/* Der Streifen sitzt fest am rechten Rand, der Inhalt liegt mittig in maximal
1120 Pixeln. Je schmaler das Fenster, desto weniger Rand bleibt daneben.
Gemessen an der breitesten Sektion: die Rakete steht ab 1281 frei, das Schild
erst ab rund 1530. Darum zwei Grenzen statt einer, sonst liegt der Status-Text
auf den Karten, und genau dort laufen die meisten Notebooks. */
@media (max-width:1280px){.flug{display:none}}
@media (max-width:1529px){.flug .badge{display:none}}
/* ===========================================================================
14 · Fuß, dunkel nach Hauszeit-Vorbild
Vier Spalten, darunter die Folgen-Zeile mit dem LinkedIn-Knopf, darunter
die Schlusszeile. Kontraste gerechnet: weiss.72 auf Nachtviolett = 9,7:1,55 = 6,4:1,52 = 5,9:1.
=========================================================================== */
.fuss{background:var(--nacht);border-top:1px solid rgba(255,255,255,.12);
padding:56px 0 30px;font-size:14.5px;color:rgba(255,255,255,.72)}
/* Drei Bloecke seit dem 18.08. (vorher vier mit Ueberschriften): Marke,
Navigation, Kontakt. Die erste Spalte bleibt die breiteste, die beiden
Listen daneben brauchen weniger und stehen dadurch naeher beim Text. */
.fuss .spalten{display:grid;grid-template-columns:1.6fr 1fr 1.15fr;gap:36px;
padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.12)}
.fuss .marke{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:600;
font-size:21px;color:#fff;margin-bottom:12px}
.fuss .marke svg{stroke:var(--violet-hell)}
/* Seit dem 14.08. steht im Fuß dasselbe Zeichen wie in der Kopfleiste, nur
eine Spur kleiner: die Wortmarke ist hier 21 statt 22 Pixel groß. Vorher
trug die Seite oben die schräge und unten die aufrechte Rakete. */
.fuss .marke .zeichen{width:28px;height:28px;flex:none;display:block}
.fuss p{font-size:14px;line-height:1.65;color:rgba(255,255,255,.66)}
.fuss h4{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
color:rgba(255,255,255,.55);margin-bottom:14px}
.fuss ul{list-style:none}
/* Tippfläche auf mindestens 24 Pixel Höhe, sonst reißt die Vorgabe aus dem BFSG */
.fuss li{margin-bottom:5px}
.fuss li a{display:inline-block;padding:4px 0}
.fuss a{color:rgba(255,255,255,.72)}
.fuss a:hover,.fuss a:focus-visible{color:var(--violet-hell)}
.fuss .adresse{font-size:14px;line-height:1.7;color:rgba(255,255,255,.66)}
/* Die Navigation im Fuss traegt keine Ueberschrift mehr. Damit der Block
trotzdem auf derselben Hoehe beginnt wie der Text links, steht oben genau
so viel Luft, wie die Ueberschrift vorher belegte (11 Pixel Schrift,
Zeilenhoehe und 14 Pixel Abstand darunter). */
.fuss-nav,.fuss .adresse{padding-top:4px}
.fuss-nav li.abstand{margin-top:16px}
.fuss-mail{margin-top:12px}
.fuss-mail a{display:inline-block;padding:4px 0}
/* Das LinkedIn-Zeichen stand bis zum 18.08. in einer eigenen Zeile unter der
Beschriftung "Folge mir". Die Zeile ist gestrichen, das Zeichen sitzt jetzt
im Kontakt-Block, wo es hingehoert: neben Adresse und Mail. */
.fuss-sozial{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
margin-top:14px;
border:1px solid rgba(255,255,255,.22);border-radius:12px;color:rgba(255,255,255,.85);
transition:background .2s ease,color .2s ease,border-color .2s ease}
.fuss-sozial svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.fuss-sozial:hover,.fuss-sozial:focus-visible{background:rgba(255,255,255,.1);color:#fff;
border-color:var(--violet-hell)}
/* Nur noch die Rechtezeile, die Schlusszeile ist am 18.08. gestrichen.
Deshalb mittig statt auseinandergezogen. */
.fuss .unten{display:flex;justify-content:center;text-align:center;flex-wrap:wrap;gap:10px;
padding-top:20px;font-size:13px;color:rgba(255,255,255,.55)}
.fuss .hinweis{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);
font-size:12px;color:rgba(255,255,255,.52);line-height:1.7}
/* Zwischenstufe: die beiden Listen bleiben nebeneinander, der Markenblock
darueber ueber die ganze Breite. Vorher standen vier Spalten zu 2x2, mit
drei Bloecken waere die vierte Zelle leer geblieben. */
@media (max-width:980px){
.fuss .spalten{grid-template-columns:1fr 1fr;gap:28px 36px}
.fuss .spalten > :first-child{grid-column:1 / -1}
.fuss-nav,.fuss .adresse{padding-top:0}
}
@media (max-width:560px){.fuss .spalten{grid-template-columns:1fr;gap:24px}}
/* ---------- Fuss auf dem Telefon ----------
Zwei Korrekturen, beide nur hier, am Rechner bleibt der Fuss unveraendert.
1 · Das LinkedIn-Zeichen stand unter der Mail-Zeile und damit als
einzelnes Kaestchen am Ende einer langen Spalte. Es steht jetzt rechts
neben dem Anschriften-Block, dessen drei Zeilen genau die Hoehe des
Kaestchens tragen. Der Block wird dadurch als Einheit lesbar:
Anschrift und Weg zum Profil auf einer Zeile, Mail darunter.
2 · Die Rechtezeile brach mitten in "USt-ID" um, weil sie als ein
durchgehender Satz lief. Der Mittelpunkt entfaellt auf dem Telefon,
die Steuernummer bildet geschlossen die zweite Zeile. */
@media (max-width:820px){
.fuss-kontakt{display:grid;grid-template-columns:1fr auto;
column-gap:16px;align-items:start}
.fuss-kontakt .adresse{grid-column:1;grid-row:1;margin:0}
.fuss-kontakt .fuss-sozial{grid-column:2;grid-row:1;margin-top:0;align-self:center}
.fuss-kontakt .fuss-mail{grid-column:1 / -1;grid-row:2;margin-top:10px}
.fuss .unten .fuss-trenn{display:none}
.fuss .unten .fuss-ust{display:block}
}
@media (prefers-reduced-motion:reduce){
*{transition:none !important;animation:none !important;scroll-behavior:auto !important}
.stufe .balken{transform:scaleX(1)}
.ul-hover .ul-strich{transform:scaleX(0)}
.laufband .bahn{flex-wrap:wrap;justify-content:center;width:100%}
.laufband .gruppe[aria-hidden="true"]{display:none}
/* Kundenstimmen-Band steht still: Karten umbrechen, Kopie verschwindet */
.stimmen-band .bahn{flex-wrap:wrap;justify-content:center;width:100%;row-gap:24px}
.stimmen-gruppe--klon{display:none}
/* Ohne Drehung: die Rückseite klappt einfach unter die Vorderseite */
.dreher .flaeche{transform:none !important}
.dreher .seite{backface-visibility:visible}
.dreher .seite.hinten{position:static;transform:none;margin-top:16px;display:none}
.dreher[aria-expanded="true"] .seite.hinten{display:block}
.dreher[aria-expanded="true"] .seite.vorn{display:none}
/* Der Shift steht sofort vollstaendig da */
.shift-ein,.shift .kurve-teil{opacity:1;transform:none;transition-delay:0s !important}
.shift .kurve-linie{stroke-dashoffset:0}
/* Der Vorhang beim Seitenwechsel bleibt komplett aus */
.wechsel{display:none}
}
/* ---------------------------------------------------------------------------
Karten-Schieber, nur auf dem Telefon. Auf großen Bildschirmen bleibt das
ursprüngliche Raster unangetastet, das Markup ist dasselbe.
--------------------------------------------------------------------------- */
.punkte{display:none}
@media (max-width:820px){
/* Abstand zwischen den Karten: 24 statt 14 Pixel. Er muss mindestens so
gross sein wie das seitliche Polster der Spur (20 Pixel), sonst schaut
die Nachbarkarte am Rand hervor, obwohl die aktuelle Karte die volle
Breite hat. Bei 14 Pixeln blieben rechnerisch 6 Pixel sichtbar, in den
Aufnahmen als heller Streifen zu sehen. */
/* Nur die seitlichen Raender setzen, nicht "margin:0 -20px" (Fund 19.08.):
Die Kurzschreibweise setzte auch margin-top auf null und ueberschrieb
dabei die Abstaende, die einzelne Gruppen selbst mitbringen. Sie steht
weiter unten im Stylesheet als jene Regeln und gewinnt bei gleicher
Spezifitaet. Betroffen waren die Zahlen-Karten im Shift (Abstand fiel
von 22 auf 0) und die Ergebnis-Karten der Programm-Seite (von 42 auf 0,
dort sichtbar als Karte, die unmittelbar unter der Punktanzeige klebte).
Familie: eine Kurzschreibweise loescht mehr, als sie soll. */
[data-schieber] > .spur{display:flex;gap:24px;overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;
padding:2px 0 2px;margin-inline:-20px;padding-inline:20px}
[data-schieber] > .spur::-webkit-scrollbar{display:none}
/* Volle Breite statt 84 Prozent: Die Karte steht mittig und
der Nachbar bleibt vollstaendig ausserhalb des Bildes. Vorher lugte er
an beiden Raendern hervor, die Karte stand dadurch nie wirklich in der
Mitte und das Bild wirkte unruhig. Dass es Karten zum Wischen sind,
sagen die Punkte darunter, dafuer braucht es den Nachbarn nicht.
Ausgenommen sind die Kundenstimmen: dort sind die Punkte ausgeblendet,
der angeschnittene Nachbar ist ihr einziger Hinweis aufs Wischen. */
[data-schieber] > .spur > *{flex:0 0 100%;scroll-snap-align:center;margin:0}
.stimmen-band .spur > *{flex:0 0 84%}
/* Die Acht Felder sind am Rechner ein Block mit Trennlinien. Im Schieber
bekommt jede Kachel ihren eigenen Rahmen, sonst zöge er als Kasten mit. */
.felder.spur{background:none;border:0;border-radius:0;overflow:visible;overflow-x:auto}
.felder.spur .feldkachel{border:1px solid var(--line);border-radius:12px;background:var(--paper)}
/* Die Anzeige zeigt, wie viele Karten es sind und wo man steht, und lässt
sich antippen. Die Punkte sind bewusst klein, ihre Trefferfläche ist es
nicht: das unsichtbare Feld darüber misst 25 mal 42 Pixel, damit sie sich
mit dem Daumen bedienen lassen (die sichtbaren 9 Pixel wären unbedienbar). */
.punkte{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:20px}
.punkte button{position:relative;width:9px;height:9px;padding:0;border:0;border-radius:50%;
background:var(--line);cursor:pointer;transition:width .25s ease,background .25s ease}
.punkte button::after{content:"";position:absolute;inset:-16px -8px}
.punkte button[aria-current="true"]{width:26px;border-radius:99px;background:var(--violet)}
/* Keine Auftritts-Animation für Karten in einer Wischreihe.
`.shift-ein` startet mit `opacity:0` und 16 Pixel Versatz nach unten, ein
Beobachter hebt das auf, sobald das Element ins Bild kommt. In einer
waagerechten Spur kommen die hinteren Karten erst beim Wischen ins Bild:
Sie wandern dann senkrecht, während der Finger waagerecht zieht, und wer
schnell durchwischt, sieht leere Karten, weil der Beobachter sie nie
erfasst hat. Familie, aufgefallen am 15.08. bei Bernstein.
Am Rechner, wo die Karten nebeneinander stehen, bleibt sie erhalten. */
[data-schieber] > .spur > .shift-ein,
.stimmen-band .spur > .shift-ein{opacity:1;transform:none;transition:none}
}
/* ===========================================================================
Kompakter Rhythmus auf dem Telefon
"Die Seite muss einfach zu scrollen sein und darf nicht ellenlang sein."
Der Inhalt bleibt vollständig, es wird nur enger gesetzt: Abstände zwischen
den Abschnitten, Überschriftengrade und die Innenpolster der großen Karten.
Gemessen wurde vorher und nachher, die Werte stehen in der Sitzungsnotiz.
=========================================================================== */
@media (max-width:820px){
section{padding:42px 0}
.wrap{padding:0 20px}
/* Gleichmäßiger Abstand zwischen ALLEN Sektionen. Das Vertrauens-Band und der Fuß
hatten eigene, kleinere Werte und brachen den Takt: gemessen 76, 72 und
84 Pixel zwischen den Abschnitten. Jetzt tragen alle Übergänge 84. */
.vertrauen{padding:42px 0}
.fuss{padding:42px 0 30px}
.kopf{margin-bottom:26px}
.kopf h2{font-size:clamp(26px,6.6vw,32px);margin-top:14px}
.kopf p{margin-top:14px;font-size:16px;line-height:1.6}
.kopf .kick{font-size:11px}
/* Die großen Karten tragen am Rechner viel Luft, auf dem Telefon
verschenkt sie eine halbe Bildschirmhöhe. Die Rückseite hatte bis zum
18.08. weiter das Desktop-Polster und war damit die höhere der beiden
Seiten: sie bestimmte die Kartenhöhe und erzeugte den Leerraum unter dem
Text der Vorderseite. Jetzt tragen beide Seiten dasselbe Maß. */
.dreher--breit{--wink-x:20px;--wink-y:14px}
.dreher--breit .abkoppeln{padding:24px 22px 42px;gap:16px}
.dreher--breit .umfang{padding:22px 18px 42px}
/* Rueckseite eine Stufe kleiner. Fuenf
Punkte, von denen vier ueber zwei Zeilen laufen, fuellten die Karte bis
an den Rand. Kleinere Schrift und ein etwas groesserer Abstand ZWISCHEN
den Punkten wirken zusammen: weniger Flaeche, mehr Luft. Die
Ueberschrift traegt weniger Laufweite, sie lief vorher fast ueber die
ganze Kartenbreite und wog schwerer als die Punkte darunter. */
.dreher--breit .umfang .tit{font-size:11px;letter-spacing:.14em;margin-bottom:14px}
.dreher--breit .umfang .liste{gap:11px}
.dreher--breit .umfang .pos{font-size:13.5px;line-height:1.45;gap:10px}
.dreher--breit .umfang .pos .hk{width:15px;height:15px;margin-top:2px}
.dreher--breit .tit{font-size:22px;line-height:1.25}
.dreher--breit .txt{font-size:15px;line-height:1.55}
/* Zwischenräume der Startseite */
.shift .ueberleitung{margin-top:26px}
.shift .punch{margin-top:30px}
.testband{margin-top:34px;padding:22px 20px}
.weiterweg{margin-top:26px}
#ueber-mich .person{gap:22px}
.quelle{margin-top:12px}
/* Gestapelte Knöpfe unterschiedlicher Textlänge wirken wie ausgefranst.
Auf dem Telefon laufen sie deshalb über die volle Breite. */
.kt-ctas{flex-direction:column;align-items:stretch;gap:12px}
.kt-ctas .btn{width:100%;justify-content:center}
.hero .row{gap:12px}
.hero .row .btn{width:100%;justify-content:center}
}
/* ===========================================================================
Trefferflächen auf Berührungsgeräten (15.08.)
WCAG 2.2 verlangt in 2.5.8 mindestens 24 mal 24 Pixel je Bedienelement, über
das Barrierefreiheitsstärkungsgesetz seit Juni 2025 verbindlich. Gemessen
mit 00-admin/scripts/die Pruefung in vier Formaten: Die Textlinks mit
Unterstreichungs-Effekt kamen auf 21 bis 23 Pixel Höhe, ebenso die
Mail-Zeile im Kontaktband und die Links in den FAQ-Antworten.
Senkrechtes Polster statt größerer Schrift: Bei einem Element im Textfluss
vergrößert es die Klickfläche, ohne den Zeilenabstand zu verschieben, das
Schriftbild bleibt also unverändert.
=========================================================================== */
@media (hover:none), (pointer:coarse){
a.ul-hover,
.kt-mail a,
.antwort a,
.bs-faq .antwort a{padding-block:4px}
}