/* Jost lokal — kein Google-Fonts-Request. Wird nur geladen, wenn Century Gothic und Futura auf dem Geraet fehlen. */ @font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/inter-400.woff2') format('woff2'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/inter-500.woff2') format('woff2'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/inter-600.woff2') format('woff2'); } @font-face { font-family:'Jost'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/jost-400.woff2') format('woff2'); } @font-face { font-family:'Jost'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/jost-500.woff2') format('woff2'); } @font-face { font-family:'Jost'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/jost-600.woff2') format('woff2'); } @font-face { font-family:'Jost'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/jost-700.woff2') format('woff2'); } /* Jost hat keine Pfeile und keinen Aufzaehlungspunkt. Beide werden deshalb gezeichnet statt gesetzt — sonst kaemen sie aus einer Ersatzschrift und saessen anders im Zeilenbild. */ .b9-pf { width:1em; height:1em; vertical-align:-.12em; flex:none; } .b9p-ja { display:inline-block; width:10px; height:10px; border-radius:50%; background:#1a1a1a; vertical-align:middle; } .b9-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ── Kapitel Herausforderung / Loesung ─────────────────────────── Kein Strahl mehr: der Takt bleibt dem Ansatz vorbehalten. Hier traegt der Farbumschlag. Die Loesungshaelfte steht auf Schwarz, randlos ueber die ganze Breite — der Wechsel ist das Ereignis. */ #b9k .b9t-schiene, #b9k .b9t-marke { display:none; } #b9k { grid-template-columns:1fr 1fr; } #b9k .b9t-kopf { grid-column:1; } #b9k .b9t-liste { grid-column:2; } #b9k .b9t-wende-inhalt { grid-column:1 / -1; } #b9k .b9t-gruppe { padding-left:0; } .b9k-flaeche { position:absolute; left:0; top:0; width:0; height:0; background:#1a1a1a; z-index:0; pointer-events:none; } #b9k > .b9t-stufe > * { position:relative; z-index:1; } /* Schrift auf Schwarz. Kontrast gegen #1a1a1a: weiss 16.9:1, #c9c9c9 9.5:1, #a8ada2 6.6:1 — alle ueber AA. */ #b9k .b9k-hell .b9t-titel, #b9k .b9k-hell .b9t-wende-titel { color:#fff; } #b9k .b9k-hell .b9t-unter, #b9k .b9k-hell .b9t-wende-text { color:#c9c9c9; } #b9k .b9k-hell .b9t-wende-eyebrow { color:#a8ada2; } #b9k .b9k-hell .b9t-zeile { color:#f3f2ef; border-top-color:#3a3a3a; } #b9k .b9k-hell .b9t-kopf, #b9k .b9k-hell .b9t-liste { border-top-color:#3a3a3a; } #b9k .b9t-wende-inhalt { border-top-color:#fff; } /* Beim Scrollen laufen die Bloecke einzeln ein. Kein Zurueck: einmal da, bleibt da. */ #b9k .b9t-kopf, #b9k .b9t-liste, #b9k .b9t-wende-inhalt { opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease; } #b9k .ein { opacity:1; transform:none; } @media (prefers-reduced-motion: reduce) { #b9k .b9t-kopf, #b9k .b9t-liste, #b9k .b9t-wende-inhalt { opacity:1 !important; transform:none !important; transition:none !important; } } @media (max-width:780px) { #b9k { grid-template-columns:1fr; } #b9k .b9t-kopf, #b9k .b9t-liste, #b9k .b9t-wende-inhalt { grid-column:1; } } /* ── Kopfbereich: Wortmarke auf dem Video ──────────────────────── Der Block steht senkrecht mittig links, weil die Betonwand dort ueber die ganze Hoehe dunkel bleibt. Gemessen liegt die Textzone ueber die volle Laufzeit unter Helligkeit 65 von 255. */ #b9-video-kopf { object-fit:cover; object-position:center; } .b9-kopfblock { position:relative; z-index:2; margin:auto auto auto 0; padding:0 40px; color:#fff; max-width:1000px; } .b9-marke { margin:0; display:grid; grid-template-columns:auto 1fr; column-gap:.30em; font-size:clamp(44px,6.4vw,80px); font-weight:700; line-height:1.03; letter-spacing:-.01em; } .b9-signet { grid-area:1 / 1; align-self:center; width:.92em; height:.92em; display:block; opacity:0; animation:b9-auf .7s ease .15s forwards, b9-kreisel 72s linear .15s infinite; } .b9-wort { grid-area:1 / 2; opacity:0; animation:b9-auf .7s ease .15s forwards; } .b9-zusatz { grid-area:2 / 2; justify-self:start; font-size:clamp(20px,2.4vw,30px); font-weight:400; letter-spacing:.02em; color:#e6e6e6; margin:14px 0 0; opacity:0; transform:translateY(10px); animation:b9-auf-hoch 1.1s ease .95s forwards; } @keyframes b9-kreisel { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } @keyframes b9-auf { to { opacity:1; } } @keyframes b9-auf-hoch { to { opacity:1; transform:none; } } /* Schmale Schirme: das Video ist 2,33:1, im Hochformat bleibt davon nur ein schmaler Streifen. Ohne Korrektur faellt der Ausschnitt auf die leuchtende Halle und die Wortmarke steht auf hellem Grund. Deshalb nach links ruecken, wo die Betonwand steht, und den Verlauf etwas nachziehen. */ @media (max-width:780px) { /* Im Hochformat bleiben vom 2,33:1-Video nur rund 19 Prozent Breite uebrig. Links waere das reine Betonwand ohne Motiv, rechts waere die Halle zu hell fuer weisse Schrift. Deshalb hier: Ausschnitt auf die Halle, Wortmarke nach unten, Verlauf von unten. */ .b9-kopfblock { padding:0 24px 56px; margin:auto 0 0 0; } #b9-video-kopf { object-position:64% center; } .b9-schleier-quer { background:linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,.72) 72%, rgba(0,0,0,.88) 100%) !important; } .b9-schleier-hoch { opacity:0 !important; } } @media (prefers-reduced-motion: reduce) { .b9-wort, .b9-zusatz, .b9-signet { opacity:1 !important; transform:none !important; animation:none !important; } .b9m-row, .b9m-cap, .b9m-note, .b9m-close { opacity:1 !important; transform:none !important; transition:none !important; } } /* Schutzregel: das hidden-Attribut muss jeden Inline-display schlagen. Ohne sie gewinnt ein inline gesetztes display:flex gegen [hidden]. */ [hidden] { display: none !important; } body { margin: 0; background: #fff; } a { color: #000; text-decoration: none; } a:hover { color: #6d747a; } .pill { display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:999px; font-size:16px; font-weight:500; white-space:nowrap; } @keyframes b9-blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } } /* Desktop: kompaktes Dropdown, oben rechts unter dem Burger. */ #b9-menu { position:fixed; top:96px; right:34px; z-index:200; background:#fff; border:1px solid #e2e0db; border-radius:20px; padding:14px 10px; width:264px; max-height:calc(100vh - 120px); overflow-y:auto; display:flex; flex-direction:column; box-shadow:0 16px 44px rgba(0,0,0,.12); } #b9-menu-head { display:none; } #b9-menu-addr { display:none; } #b9-menu-group { display:flex; flex-direction:column; } .b9-nav { font-size:17px; font-weight:500; line-height:1.3; color:#000; padding:11px 14px; border-radius:12px; } .b9-nav:hover, .b9-nav:focus-visible { color:#000; background:#f3f2ef; } .b9-nav-s { font-size:15px; font-weight:400; color:#3c3c3c; } /* ── Mobile Bühne: der Ring ist die Fortschrittsanzeige ── */ .b9-mobile-diagram { display:none; } #b9m-stage { position:relative; height:215vh; } /* Die Bühne beginnt unter der Kopfzeile. Dadurch kann das Signet nicht mehr darunter geraten, egal wie hoch der Inhalt wird. */ .b9m-sticky { box-sizing:border-box; position:sticky; top:78px; height:calc(100vh - 78px); height:calc(100svh - 78px); display:flex; flex-direction:column; align-items:center; justify-content:center; justify-content:safe center; gap:clamp(22px,5.5vh,54px); padding:10px 24px 22px; overflow:hidden; } .b9m-ring { width:clamp(112px,34vw,152px); height:clamp(112px,34vw,152px); flex:none; } .b9m-tick { opacity:.2; transition:opacity .32s ease; } .b9m-tick.on { opacity:1; } .b9m-body { position:relative; width:100%; max-width:430px; flex:0 1 auto; height:clamp(270px,42vh,350px); min-height:0; } .b9m-panel { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; opacity:0; pointer-events:none; } .b9m-cap { font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#8a8f94; margin-bottom:12px; } .b9m-list { list-style:none; margin:0; padding:0; } .b9m-row { font-size:clamp(17px,4.6vw,20px); font-weight:600; padding:clamp(9px,1.5vh,13px) 0; border-top:1px solid #e2e0db; } .b9m-row:last-child { border-bottom:1px solid #e2e0db; } .b9m-row a { color:#000; display:block; } .b9m-row a span { color:#8a8f94; } .b9m-note { font-size:15px; line-height:1.55; color:#6d747a; margin:16px 0 0; } .b9m-close { font-size:clamp(23px,6.4vw,30px); font-weight:700; line-height:1.25; margin:0; text-align:center; } .b9m-close span { color:#6d747a; font-weight:400; } .b9m-hint { font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#a8ada2; flex:none; } @media (prefers-reduced-motion: reduce) { .b9m-tick { opacity:1 !important; transition:none; } } /* Sehr niedrige Bildschirme (quer gehaltenes Handy, alte Geräte): Die Choreografie braucht Bauhöhe. Fehlt sie, wird der Abschnitt statisch untereinander gezeigt — vollständig lesbar statt gequetscht. */ @media (max-height: 560px) { #b9m-stage { height:auto !important; } .b9m-sticky { position:static !important; height:auto !important; padding:40px 24px 56px !important; gap:26px !important; } .b9m-body { position:static !important; height:auto !important; } .b9m-panel { position:static !important; opacity:1 !important; pointer-events:auto !important; margin-bottom:34px; } .b9m-panel .b9m-row { opacity:1 !important; transform:none !important; } .b9m-tick { opacity:1 !important; } #b9m-hint { display:none !important; } #b9m-panel-c { margin-bottom:0; } } /* ── Taktstrahl ────────────────────────────────────────────── Der Zeitstrahl aus der Praesentation, senkrecht gestellt. Die Marken sind dieselbe Form wie die Striche im Signet. Bewegung entsteht nur durch Scrollen, nichts laeuft von allein. */ .b9t { position:relative; display:grid; grid-template-columns:72px 1fr; column-gap:0; } .b9t-schiene { position:absolute; left:23px; top:14px; bottom:14px; width:2px; background:#e2e0db; } .b9t-fuellung { position:absolute; left:0; top:0; width:2px; height:100%; background:#1a1a1a; transform:scaleY(0); transform-origin:top center; } .b9t-stufe { display:contents; } .b9t-marke { grid-column:1; position:relative; padding:56px 0 0; } .b9t-tick { position:absolute; left:13px; top:62px; width:22px; height:11px; border-radius:5.5px; background:#cfcdc7; transition:background-color .45s ease; } .b9t-stufe.an .b9t-tick { background:#1a1a1a; } .b9t-gruppe { grid-column:1 / -1; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#8a8f94; margin:40px 0 0; padding-left:72px; } .b9t-kopf, .b9t-liste { padding:56px 0; border-top:1px solid #e2e0db; } .b9t-kopf { grid-column:2; padding-right:64px; } .b9t-liste { grid-column:3; display:flex; flex-direction:column; } .b9t { grid-template-columns:72px 1fr 1fr; } .b9t-nr { font-size:13px; font-weight:700; letter-spacing:.08em; color:#8a8f94; margin:0 0 10px; transition:color .45s ease; } .b9t-stufe.an .b9t-nr { color:#1a1a1a; } .b9t-titel { font-size:30px; font-weight:700; margin:0 0 16px; } .b9t-unter { font-size:18px; line-height:1.7; margin:0; color:#3c3c3c; max-width:460px; } .b9t-zeile { font-size:17px; line-height:1.5; color:#1a1a1a; padding:16px 0; border-top:1px solid #e2e0db; } .b9t-zeile:first-child { border-top:0; padding-top:0; } .b9t-ergebnis { font-weight:600; border-bottom:1px solid #e2e0db; } @media (max-width:780px) { .b9t { grid-template-columns:40px 1fr; } .b9t-schiene { left:9px; } .b9t-tick { left:0; top:46px; width:18px; height:9px; border-radius:4.5px; } .b9t-marke { padding-top:40px; } .b9t-gruppe { padding-left:40px; } .b9t-kopf { grid-column:2; padding:40px 0 0; } .b9t-liste { grid-column:2; padding:20px 0 40px; border-top:0; } } @media (prefers-reduced-motion: reduce) { .b9t-fuellung { transform:scaleY(1) !important; } .b9t-tick { background:#1a1a1a !important; } .b9t-nr { color:#1a1a1a !important; } } /* ── Mobil: Feinschliff ────────────────────────────────────── Lange deutsche Komposita brechen sonst aus ihrer Kachel heraus ("Investitionsunsicherheit", "Schnittstellenkomplexitaet"). Trennung nach deutschen Regeln, Notumbruch als Sicherheitsnetz. Dazu groessere Tippflaechen fuer Daumen. */ h1, h2, h3, h4, p, li, td, th, .b9t-titel, .b9t-zeile { overflow-wrap:break-word; } @media (max-width:900px) { h1, h2, h3, h4, .b9t-titel { hyphens:auto; -webkit-hyphens:auto; } } @media (max-width:780px) { .b9m-row { padding:0; } .b9m-row a { padding:12px 0; } .b9m-hint, #b9m-hint { font-size:12px; } footer a[href^="tel:"], footer a[href^="mailto:"], footer a[href^="http"], footer a[href^="#"] { display:inline-block; padding:9px 0; } } /* Kapitel Herausforderung → Loesung: eine Linie, zwei Zustaende. Offene Marke = Frage steht. Volle Marke = beantwortet. */ .b9t-offen .b9t-tick { background:transparent; box-shadow:inset 0 0 0 2px #cfcdc7; transition:box-shadow .45s ease, background-color .45s ease; } .b9t-offen.an .b9t-tick { background:transparent; box-shadow:inset 0 0 0 2px #1a1a1a; } .b9t-text { font-size:17px; line-height:1.65; color:#3c3c3c; margin:0; } .b9t-wende .b9t-marke { padding-top:76px; } .b9t-wende .b9t-tick { top:84px; width:30px; height:15px; border-radius:7.5px; left:9px; } .b9t-wende-inhalt { grid-column:2 / -1; padding:76px 0 8px; border-top:2px solid #1a1a1a; } .b9t-wende-eyebrow { font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#8a8f94; margin:0 0 14px; } .b9t-wende-titel { font-size:clamp(24px,3vw,38px); font-weight:700; line-height:1.22; margin:0 0 16px; } .b9t-wende-text { font-size:18px; line-height:1.7; color:#3c3c3c; margin:0; max-width:820px; } @media (max-width:780px) { .b9t-wende .b9t-tick { left:0; top:64px; width:24px; height:12px; border-radius:6px; } .b9t-wende .b9t-marke { padding-top:56px; } .b9t-wende-inhalt { grid-column:2; padding:56px 0 8px; } } /* "Wann" ist eine Checkliste, keine Kartensammlung: durchlaufende Liste mit Haarlinien, dicht und schnell zu ueberfliegen. Setzt sich damit von den Kacheln bei "Warum BALERION" direkt darueber ab. */ .b9w { border-top:1px solid #e2e0db; } .b9w-zeile { display:grid; grid-template-columns:64px minmax(0,1fr) minmax(0,1.15fr); column-gap:32px; align-items:baseline; padding:30px 0; border-bottom:1px solid #e2e0db; } .b9w-nr { font-size:13px; font-weight:700; letter-spacing:.08em; color:#8a8f94; margin:0; } .b9w-titel { font-size:22px; font-weight:700; line-height:1.28; margin:0; } .b9w-text { font-size:17px; line-height:1.6; color:#3c3c3c; margin:0; } @media (max-width:900px) { .b9w-zeile { grid-template-columns:46px 1fr; row-gap:8px; padding:26px 0; } .b9w-titel { grid-column:2; } .b9w-text { grid-column:2; } .b9w-nr { grid-row:1 / span 2; } } /* Kapitel: die Fragehaelfte ist eine offene, gepunktete Linie, die Antworthaelfte durchgezogen. Damit ist der Unterschied eine Aussage und nicht ein halb gefuellter Balken. Die Marken schalten beim Scrollen um, so wie im Ansatz. */ #b9k .b9t-schiene { background:transparent; background-image:repeating-linear-gradient(to bottom, #cfcdc7 0 4px, transparent 4px 11px); } #b9k .b9t-fuellung { transform-origin:bottom center; transform:scaleY(0); background:#1a1a1a; } /* ── Hover: nur dort, wo es beim Lesen hilft ────────────────── Die Paketmatrix hat zehn Zeilen und drei Spalten; ohne Hilfe verliert man beim Querlesen die Zeile. Gilt nur fuer Geraete mit Zeiger — auf dem Handy gibt es kein Hover. */ @media (hover:hover) and (pointer:fine) { .b9w-zeile { transition:background-color .18s ease, padding-left .18s ease; } .b9w-zeile:hover { background:#f3f2ef; padding-left:14px; } footer a:hover, .b9-page a:hover { text-decoration:underline; } } /* Preistabelle: beim Ueberfahren leuchtet die ganze Spalte, nicht die Zeile — verglichen wird innerhalb eines Pakets, nicht quer ueber die Pakete. Die Flaeche liegt als durchgehendes Rechteck hinter der Tabelle. Zellen einzeln zu faerben ginge nicht: die Gruppenzeilen laufen ueber alle vier Spalten und rissen Luecken in die Bahn. */ .b9p-wrap { position:relative; } .b9p-spur { position:absolute; top:0; left:0; width:0; height:0; z-index:0; background:#f3f2ef; border-radius:6px; opacity:0; transition:opacity .18s ease; pointer-events:none; } .b9p-spur.an { opacity:1; } #pakete thead th { transition:background-color .18s ease; } #pakete thead th.sp-an { background:#ece9e3; border-radius:6px 6px 0 0; } /* Tastaturbedienung: dieselbe Hervorhebung wie beim Zeiger. */ .b9w-zeile:focus-within { background:#f3f2ef; } .b9-menu-sep { height:1px; background:#e2e0db; margin:8px 14px; } /* Über dem Titelbild stehen die Bedienelemente weiß. Sobald die Seite auf weißen Grund wechselt, drehen Knopf und Menü ins Gegenteil, damit sie ihre Kontur behalten. Die Wortmarke bleibt unverändert. */ #b9-cta, #b9-menu-btn { transition: background-color .28s ease, color .28s ease; } #b9-menu-btn svg line { transition: stroke .28s ease; } /* Der Kontaktknopf ist die einzige Handlung im Kopf und traegt deshalb als einziges Element eine Flaeche in Markenblau. Ueber dem dunklen Band waere dieses Blau zu nah am Grund (2,5:1), dort uebernimmt das helle Blau mit schwarzer Schrift. */ /* Grundzustand ist der Kopf ueber einem dunklen Block: dort traegt das helle Blau. b9-inv setzt der Kopf ueber hellem Grund, dort das Markenblau mit weisser Schrift. */ #b9-cta { background:var(--b9-blau-hell); color:#1a1a1a; } #b9-cta:hover, #b9-cta:focus-visible { background:#A9C6F0; color:#1a1a1a; } header.b9-inv #b9-cta { background:var(--b9-blau) !important; color:#fff; } header.b9-inv #b9-cta:hover, header.b9-inv #b9-cta:focus-visible { color:#fff; background:var(--b9-blau-tief) !important; } #b9-cta .b9-pf { stroke:currentColor; } header.b9-inv #b9-menu-btn { background:#1a1a1a !important; } header.b9-inv #b9-menu-btn svg line { stroke:#fff; } .b9-wa { display:inline-flex; align-items:center; gap:9px; margin-top:4px; padding:12px 22px; border-radius:999px; border:1px solid #1a1a1a; font-size:16px; font-weight:500; color:#1a1a1a; white-space:nowrap; } .b9-wa:hover, .b9-wa:focus-visible { background:#1a1a1a; color:#fff; } /* Mobil: Vollbild — auf kleinen Displays die richtige Form. */ @media (max-width:780px) { #b9-menu { inset:0; top:0; right:0; width:auto; max-height:none; border:0; border-radius:0; padding:32px 24px; box-shadow:none; } #b9-menu-head { display:flex; justify-content:space-between; align-items:center; } #b9-menu-addr { display:block; font-size:15px; color:#6d747a; } #b9-menu-group { margin:auto 0; gap:2px; } .b9-nav { font-size:clamp(28px,7vw,44px); font-weight:700; padding:6px 0; border-radius:0; } .b9-nav:hover, .b9-nav:focus-visible { background:none; color:#6d747a; } .b9-nav-s { font-size:18px; font-weight:500; } .b9-menu-sep { margin:22px 0 14px; } } .b9-page { padding:150px 40px 100px; max-width:820px; margin:0 auto; } .b9-page h1 { font-size:clamp(34px,4.6vw,52px); font-weight:700; line-height:1.1; margin:0 0 12px; } .b9-page h2 { font-size:24px; font-weight:700; margin:52px 0 12px; } .b9-page h3 { font-size:18px; font-weight:700; margin:28px 0 8px; } .b9-page p, .b9-page li { font-size:17px; line-height:1.7; color:#3c3c3c; } .b9-page ul { padding-left:20px; } .b9-page li { margin:5px 0; } .b9-page a { text-decoration:underline; } .b9-lede { font-size:19px !important; color:#1a1a1a !important; } .b9-box { background:#f3f2ef; border-radius:16px; padding:26px 28px; margin:22px 0; } .b9-box p { margin:0; } .b9-lab-a { pointer-events: none; } .b9-lab-a .b9-link { cursor: pointer; } .b9-lab-a:hover .b9-link { fill: #000; text-decoration: underline; } .b9-lab-a:focus-visible .b9-link { fill: #000; text-decoration: underline; } @media (max-width: 780px) { header { left: 22px !important; right: 22px !important; top: 22px !important; flex-wrap: nowrap !important; } /* Auf schmalen Geraeten nur Wortmarke und Menue — der Kontaktknopf steht im Menue und im Fussbereich. Sonst bricht die Zeile um. */ #b9-cta { display: none !important; } .b9-mobile-diagram { display: block !important; } /* Ränder auf schmalen Displays zurücknehmen */ section, footer { padding-left: 24px !important; padding-right: 24px !important; } /* Baender tragen den Rand innen, sonst zaehlt er doppelt. */ .b9-band-creme, .b9-band-dunkel { padding-left:0 !important; padding-right:0 !important; } .b9-inhalt { padding:0 24px; } .b9-page { padding: 120px 24px 80px !important; } .b9m-sticky { padding-left: 24px !important; padding-right: 24px !important; } .b9-2col { grid-template-columns: 1fr !important; } .b9-desktop-diagram { display: none !important; } /* Titelbild: Textspalte darf auf schmalen Geraeten die volle Breite nutzen, sonst bricht der Positionierungssatz in zu viele Zeilen. */ #b9-hero > div:last-of-type { padding: 28px 24px 44px !important; } .b9-mobile-diagram { display: block !important; } } @media (prefers-reduced-motion: reduce) { /* Nur das Dauerblinken abschalten. Die scrollgesteuerte Grafik folgt der Nutzereingabe und laeuft weiter. */ @keyframes b9-blink { 0%, 100% { opacity: .45; } 50% { opacity: .45; } } } /* ══════════════════════════════════════════════════════════════════ HANDY — eigene Fassung, nicht der verkleinerte Desktop. Der Desktop setzt fast alles zweispaltig. Auf dem Handy faellt das untereinander: aus einer Zeile werden zwei Bloecke, aus fuenf Herausforderungen zehn. Deshalb hier eigene Masse und eigene Anordnung. Alles ab hier gilt nur unter 780px und beruehrt den Desktop nicht. ══════════════════════════════════════════════════════════════════ */ @media (max-width:780px) { /* ── Der Ring aus der Uebersicht ───────────────────────────────── Zwoelf Marken, einige dunkel, die meisten grau: das ist die Figur, die jedes Betriebssystem fuer "laedt" benutzt — und zugleich unser Signet, das oben in der Kopfzeile nochmal steht. Auf dem Handy traegt ihn nichts, also faellt er weg. Die beiden Listen tragen die Aussage allein. */ .b9m-ring { display:none !important; } /* Mit dem Ring faellt auch seine Buehne: 215vh Scrollstrecke, in der er stehenblieb und drei Tafeln durchwechselten. Ohne ihn waere das eine leere Strecke. Die drei Tafeln stehen jetzt untereinander. */ #b9m-stage { height:auto !important; } .b9m-sticky { position:static !important; height:auto !important; padding:0 24px !important; gap:0 !important; display:block !important; } .b9m-body { position:static !important; height:auto !important; max-width:none !important; } .b9m-panel { position:static !important; opacity:1 !important; pointer-events:auto !important; margin:0 0 34px !important; display:block !important; } .b9m-body > .b9m-panel:last-child { margin-bottom:0 !important; } /* Die Bewegung kommt jetzt von derselben Geste wie im Kapitel: jede Zeile laeuft beim Erreichen der Leselinie einmal ein. */ .b9m-row { opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease; } .b9m-row.ein { opacity:1 !important; transform:none !important; } .b9m-cap, .b9m-note, .b9m-close { opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease; } .b9m-cap.ein, .b9m-note.ein, .b9m-close.ein { opacity:1; transform:none; } /* ── Kopfzeile ─────────────────────────────────────────────────── Zwischen Wortmarke und Menueknopf lief der Fliesstext bisher ungeschuetzt durch. Ueber hellem Inhalt kommt jetzt ein Grund darunter; ueber den dunklen Baendern bleibt sie frei stehen. */ header::before { content:""; position:fixed; top:0; left:0; right:0; height:104px; background:#fff; opacity:0; z-index:-1; transition:opacity .22s ease; pointer-events:none; } header.b9-inv::before { opacity:1; } header.b9-inv #b9-home { background:#1a1a1a !important; color:#fff !important; } /* ── Abschnittsluft ────────────────────────────────────────────── 80 oben und 120 unten sind Desktopmasse. */ #wann, #ansatz { padding-top:52px !important; padding-bottom:60px !important; padding-left:24px !important; padding-right:24px !important; } /* ── Herausforderung, Loesung, Ansatz ──────────────────────────── Enger gesetzt, und Aufzaehlungen zweispaltig statt als Turm. Die Regel greift nur dort, wo wirklich Listenzeilen stehen — Fliesstext bleibt ueber die volle Breite. */ .b9t-titel { font-size:23px; line-height:1.2; margin:0 0 10px; } .b9t-nr { margin:0 0 6px; } .b9t-unter, .b9t-text { font-size:16px; line-height:1.55; } .b9t-kopf { padding:26px 0 0 !important; } .b9t-liste { padding:10px 0 26px !important; } .b9t-zeile { font-size:15px; line-height:1.4; padding:9px 0; } .b9t-liste:has(.b9t-zeile) { display:grid; grid-template-columns:1fr 1fr; column-gap:16px; align-content:start; } .b9t-liste:has(.b9t-zeile) .b9t-zeile:nth-child(-n+2) { border-top:0; padding-top:0; } /* Die Ergebniszeile schliesst den Takt ab und gehoert ueber beide Spalten. */ .b9t-liste:has(.b9t-zeile) .b9t-ergebnis { grid-column:1 / -1; } .b9t-wende-titel { font-size:26px; } .b9t-wende-text { font-size:16px; line-height:1.55; } .b9t-wende-inhalt { padding:36px 0 10px !important; } /* ── Paketmatrix ───────────────────────────────────────────────── 720px Tabelle in einem 342px Fenster hiess: seitwaerts schieben, und dabei verschwand die Merkmalspalte nach links — man sah die Punkte, aber nicht mehr, wozu sie gehoeren. Vier Spalten passen bei 390px nicht ohne Quetschen: "Secure" braucht bei 12px rund 73px, und darunter wird der Paketname unleserlich. Also bleibt ein Rest Seitwaertsweg, rund 30px, und die Merkmalspalte steht dabei fest. Die Zuordnung geht nie verloren, egal wie weit geschoben wird. */ #pakete table { min-width:0 !important; table-layout:fixed; width:100%; } #pakete th:first-child, #pakete tbody tr td:first-child:not([colspan]) { position:sticky; left:0; z-index:2; background:#fff; } /* Die Gruppenzeilen laufen ueber alle Spalten und koennen nicht stehenbleiben; sie bekommen nur ihren Grund, damit nichts durchscheint. */ #pakete td[colspan] { background:#fff; } #pakete th:first-child, #pakete td:first-child { width:141px; } #pakete thead th:not(:first-child) { width:67px; font-size:11px; padding:0 2px 12px !important; white-space:nowrap; hyphens:none; -webkit-hyphens:none; overflow-wrap:normal; } #pakete thead th span { display:none; } /* Unterzeilen tragen hier nicht */ #pakete td { padding:11px 3px !important; font-size:12.5px; line-height:1.35; } #pakete td:first-child { padding-right:12px !important; } #pakete td[colspan] { font-size:11px; padding:24px 0 6px !important; width:auto; } #pakete .b9p-ja { width:8px; height:8px; } #pakete tbody tr:last-child td { font-size:11.5px; } /* ── Abschnittsueberschriften ──────────────────────────────────── Sie stehen inline auf 32px, einem Desktopmass. Auf 390px werden daraus bis zu sieben Zeilen, bevor der Abschnitt ueberhaupt anfaengt. Der Attributselektor greift sie, ohne das Markup an zwoelf Stellen anzufassen. */ #page-start p[style*="font-size:32px"] { font-size:25px !important; line-height:1.22 !important; } /* ── Warum und Wann ──────────────────────────────────────────────*/ .b9w-zeile { padding:20px 0; row-gap:6px; } .b9w-titel { font-size:19px; line-height:1.25; } .b9w-text { font-size:15.5px; line-height:1.5; } } /* ══ Anrisse auf der Startseite ═══════════════════════════════════ Die Startseite nennt nur noch die Titel; die vollen Texte stehen unveraendert auf den Unterseiten. Kein Wort wurde umformuliert, es faellt nur der Fliesstext weg. */ .b9a-liste { list-style:none; margin:26px 0 0; padding:0; } .b9a-zeile { display:grid; grid-template-columns:46px 1fr; column-gap:16px; align-items:baseline; padding:20px 0; border-top:1px solid #e2e0db; } .b9a-zeile:last-child { border-bottom:1px solid #e2e0db; } .b9a-nr { font-size:13px; font-weight:700; letter-spacing:.08em; color:#8a8f94; margin:0; } .b9a-titel { font-size:clamp(19px,2.2vw,24px); font-weight:700; line-height:1.25; margin:0; } .b9a-unter { font-size:16px; font-weight:400; color:#6d747a; margin:4px 0 0; } .b9a-mehr { display:inline-flex; align-items:center; gap:11px; margin-top:34px; font-size:17px; font-weight:600; color:#1a1a1a; border-bottom:2px solid #1a1a1a; padding-bottom:5px; transition:gap .18s ease; } .b9a-hell .b9a-mehr { color:#fff; border-bottom-color:#fff; } .b9a-hell .b9a-zeile { border-top-color:#3a3a3a; } .b9a-hell .b9a-zeile:last-child { border-bottom-color:#3a3a3a; } .b9a-hell .b9a-titel { color:#fff; } .b9a-hell .b9a-unter { color:#c9c9c9; } .b9a-hell .b9a-nr { color:#a8ada2; } @media (hover:hover) and (pointer:fine) { .b9a-mehr:hover { gap:18px; } } /* Preiszeilen im Paketanriss */ .b9a-preis { font-size:17px; font-weight:600; white-space:nowrap; color:#1a1a1a; } .b9a-zeile-preis { grid-template-columns:1fr auto; } @media (max-width:780px) { .b9a-zeile { grid-template-columns:38px 1fr; column-gap:12px; padding:15px 0; } .b9a-mehr { margin-top:26px; font-size:16px; } .b9a-unter { font-size:15px; } } /* ══ Geschaeftsfuehrung ═══════════════════════════════════════════ Aufbau wie auf Folie 2 des Pitch: Bild, Name, Rolle, eine zusammenfassende Zeile, darunter die Stationen. Die Texte stehen wortgleich so im Deck. */ .b9team { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:56px; row-gap:48px; margin-top:44px; } .b9team-kopf { display:flex; gap:20px; align-items:flex-start; } .b9team-bild { width:104px; height:138px; object-fit:cover; object-position:center top; border-radius:14px; flex:none; background:#f3f2ef; display:block; } .b9team-name { font-size:clamp(21px,2.2vw,26px); font-weight:700; line-height:1.2; margin:2px 0 0; } .b9team-rolle { font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#8a8f94; margin:8px 0 0; } .b9team-kurz { font-size:18px; font-weight:600; line-height:1.5; margin:24px 0 0; } .b9team-liste { list-style:none; margin:16px 0 0; padding:0; } .b9team-punkt { font-size:16px; line-height:1.55; color:#3c3c3c; padding:12px 0; border-top:1px solid #e2e0db; } .b9team-punkt:last-child { border-bottom:1px solid #e2e0db; } @media (max-width:780px) { .b9team { grid-template-columns:1fr; row-gap:40px; margin-top:32px; } .b9team-bild { width:88px; height:116px; } .b9team-kurz { font-size:16.5px; margin-top:20px; } .b9team-punkt { font-size:15px; padding:10px 0; } } /* ══════════════════════════════════════════════════════════════════ V17 — Menueleiste, leichtere Schrift, Blau als Akzent ══════════════════════════════════════════════════════════════════ */ :root { --b9-blau:#2F5597; --b9-blau-tief:#012069; } /* ── Menueleiste (Desktop) ─────────────────────────────────────── Ab 1100px tragen Wortmarke, Leiste und Kontaktknopf nebeneinander. Darunter uebernimmt der Hamburger. */ .b9-leiste { display:flex; align-items:center; gap:26px; background:#fff; border-radius:20px; padding:15px 26px; } .b9-leiste a { position:relative; font-size:16px; font-weight:500; color:#3c3c3c; padding:2px 0; white-space:nowrap; transition:color .16s ease; } .b9-leiste a[aria-current="page"] { color:#1a1a1a; font-weight:600; } .b9-leiste a[aria-current="page"]::after { content:""; position:absolute; left:0; right:0; bottom:-5px; height:2px; background:var(--b9-blau); border-radius:1px; } @media (hover:hover) and (pointer:fine) { .b9-leiste a:hover { color:var(--b9-blau); } } #b9-menu-btn { display:none; align-items:center; } @media (max-width:1100px) { .b9-leiste { display:none; } #b9-menu-btn { display:inline-flex; } } /* Ueber dunklem Grund traegt die Leiste ihren eigenen weissen Kasten, darum bleibt sie dort unveraendert. */ /* ── Schrift einen Ticken leichter ─────────────────────────────── 700 wirkt auf Jost sehr kraeftig. 600 traegt dieselbe Hierarchie bei ruhigerem Bild. Die Wortmarke bleibt bei 700, sie ist das einzige Element, das Gewicht tragen soll. */ #page-start [style*="font-weight:700"], #page-vorgehen [style*="font-weight:700"], #page-team [style*="font-weight:700"], #page-standort [style*="font-weight:700"], #page-karriere [style*="font-weight:700"] { font-weight:600 !important; } .b9t-titel, .b9w-titel, .b9team-name, .b9a-titel, .b9t-wende-titel, .b9m-close, .b9-nav { font-weight:600; } .b9t-nr, .b9w-nr, .b9a-nr { font-weight:600; } .b9-wort { font-weight:700; } /* ── Blau als Akzent ───────────────────────────────────────────── Linien, Marken und aktive Zustaende. Die Flaechen bleiben schwarz und weiss. */ .b9t-fuellung { background:var(--b9-blau); } .b9t-stufe.an .b9t-tick { background:var(--b9-blau); } .b9t-offen.an .b9t-tick { box-shadow:inset 0 0 0 2px var(--b9-blau); } .b9a-mehr { border-bottom-color:var(--b9-blau); } .b9a-hell .b9a-mehr { border-bottom-color:#fff; } a:focus-visible, button:focus-visible { outline:2px solid var(--b9-blau); outline-offset:3px; } /* ── Eyebrow als eigene Klasse ───────────────────────────────────*/ /* Die Kapitelmarke traegt dieselbe Form wie die Wortmarke oben links: abgerundete Box, Text darin. Nur in Blau, damit sie sich von der Wortmarke unterscheidet und die Marke nicht doppelt auftritt. */ .b9-ey { display:inline-block; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; line-height:1; color:#fff; background:var(--b9-blau); border-radius:999px; padding:10px 18px; margin:0 0 20px; } /* ── Platzhalterseiten ───────────────────────────────────────────*/ .b9-platz { border:1px dashed #cfcdc7; border-radius:20px; padding:clamp(36px,6vw,64px); background:#faf9f7; } .b9-platz-marke { display:inline-block; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--b9-blau); border:1px solid var(--b9-blau); border-radius:999px; padding:5px 13px; margin:0 0 18px; } .b9-platz-text { font-size:18px; line-height:1.7; color:#3c3c3c; margin:0 0 26px; max-width:60ch; } /* ============================================================ V17: Loesungs-Karussell, Dreieck, Cockpit ============================================================ */ /* Header-Untertitel traegt jetzt einen ganzen Satz. Deshalb kleiner und auf 34 Zeichen gebrochen, sonst laeuft er im Video aus dem dunklen Bereich heraus. Gemessen bleibt der Satz bis 1280px innerhalb der Betonwand. */ .b9-zusatz { font-size:clamp(16px,1.35vw,19px) !important; line-height:1.45; max-width:530px; } @media (max-width:780px) { .b9-zusatz { max-width:30ch; font-size:16px !important; } } /* --- Cremeband und Ueberschriften ------------------------------ Ueberschriften laufen ueber die volle Spaltenbreite. Vorher standen sie in einer schmalen Saeule links, was die Seite in zwei Haelften zerlegt hat. */ .b9-band-creme { margin:16px; border-radius:28px; background:#fff; padding:clamp(56px,6vw,88px) 0 clamp(56px,6vw,80px); scroll-margin-top:104px; } /* Zwei Baender hintereinander wachsen zu einem zusammen, getrennt durch eine Haarlinie. Loesung und Angebot gehoeren zusammen; ein weisser Spalt dazwischen wuerde sie auseinanderreissen. */ .b9-band-creme + .b9-band-creme { margin-top:-16px; padding-top:clamp(28px,2.6vw,40px); border-top-left-radius:0; border-top-right-radius:0; } .b9-band-creme:has(+ .b9-band-creme) { border-bottom-left-radius:0; border-bottom-right-radius:0; padding-bottom:clamp(18px,1.6vw,26px); } .b9-band-creme + .b9-band-creme > .b9-inhalt { border-top:1px solid #dcdad4; padding-top:clamp(28px,2.6vw,38px); } .b9-inhalt { max-width:1200px; margin:0 auto; padding:0 40px; } .b9-titel { font-size:clamp(28px,3.8vw,44px); font-weight:600; line-height:1.18; letter-spacing:-.005em; margin:0 0 18px; max-width:none; } .b9-titel-luft { margin-bottom:56px; } .b9-vorlauf { font-size:18px; line-height:1.7; color:#3c3c3c; margin:0; max-width:74ch; } /* --- Die vier Aufgaben, als Stapel ------------------------------- Das Foto kleidet die ganze Kachel aus, der Text liegt darauf. Damit die Schrift auf jedem Bild traegt, liegt ein Verlauf dazwischen: links dunkel, nach rechts offen. Der Verlauf ist kein Effekt, er ist die Lesbarkeit. */ .b9k-kopf { max-width:1200px; margin:0 auto; padding:0 40px; } .b9k-kopf-text { min-width:0; } .b9k-band { margin-top:48px; } .b9k-spur { max-width:1200px; margin:0 auto; padding:0 40px 13vh; display:block; } .b9k-karte { position:sticky; top:calc(104px + var(--i) * 16px); height:min(66vh, 620px); min-height:500px; background:#101215; border-radius:22px; overflow:hidden; box-shadow:0 20px 44px rgba(26,26,26,.18); scroll-margin-top:130px; } .b9k-karte + .b9k-karte { margin-top:18px; } .b9k-innen { position:relative; height:100%; } .b9k-bild { position:absolute; inset:0; margin:0; background:#101215; } .b9k-bild img { width:100%; height:100%; object-fit:cover; object-position:50% 50%; display:block; } /* Je Kachel ein eigener Ausschnitt: der Text sitzt links, also wandert das Motiv nach rechts, wo der Verlauf es freigibt. */ .b9k-karte:nth-of-type(1) .b9k-bild img { object-position:62% 62%; } .b9k-karte:nth-of-type(2) .b9k-bild img { object-position:78% 40%; } .b9k-karte:nth-of-type(3) .b9k-bild img { object-position:70% 50%; } .b9k-karte:nth-of-type(4) .b9k-bild img { object-position:60% 45%; } .b9k-innen::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(101deg, rgba(10,13,18,.94) 0%, rgba(10,13,18,.91) 40%, rgba(10,13,18,.86) 50%, rgba(10,13,18,.46) 62%, rgba(10,13,18,.14) 76%, rgba(10,13,18,0) 92%); } .b9k-text { position:relative; z-index:2; height:100%; max-width:43%; padding:clamp(30px,3.2vw,46px) clamp(26px,3vw,44px); display:flex; flex-direction:column; justify-content:flex-start; color:#fff; } .b9k-titel { font-size:clamp(24px,2.4vw,33px); font-weight:600; line-height:1.15; margin:0 0 8px; color:#fff; } .b9k-unter { font-size:16px; font-weight:500; line-height:1.45; color:#A9C6F0; margin:0 0 22px; } /* Haken als Zeichnung, nicht als Zeichen: Jost hat keinen. */ .b9k-liste { list-style:none; margin:0; padding:0; display:grid; gap:11px; } .b9k-liste li { position:relative; padding-left:30px; font-size:15.5px; line-height:1.42; color:rgba(255,255,255,.93); border:0; } .b9k-liste li::before { content:""; position:absolute; left:0; top:.14em; width:19px; height:19px; background-repeat:no-repeat; background-size:19px 19px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='none' stroke='%23A9C6F0' stroke-width='1.6'/%3E%3Cpath d='M7.4 12.4l3.1 3.1 6.1-6.6' fill='none' stroke='%23A9C6F0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Schmal: kein Stapel, weiter wischen. Der Verlauf dreht sich von links nach unten, weil die Kachel hochkant steht. */ @media (max-width:900px) { .b9k-kopf { padding:0 24px; } .b9k-band { margin-top:32px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-snap-type:x proximity; } .b9k-band::-webkit-scrollbar { display:none; } .b9k-spur { display:flex; width:max-content; gap:16px; padding:0 24px; } /* Keine feste Hoehe: der Text bestimmt sie, das Foto fuellt den Rest. Mit fester Hoehe lief die letzte Zeile unten heraus. */ .b9k-karte { position:static; flex:0 0 80vw; scroll-snap-align:start; height:auto; min-height:0; aspect-ratio:auto; margin-top:0 !important; } /* Die Kachel ist jetzt hoeher, der Text sitzt damit weiter oben im Verlauf. Gemessen lag die Unterzeile bei 3:1 — zu wenig fuer 15px. Der Verlauf traegt deshalb weiter nach oben. */ .b9k-innen::after { background:linear-gradient(to top, rgba(10,13,18,.94) 0%, rgba(10,13,18,.90) 38%, rgba(10,13,18,.74) 56%, rgba(10,13,18,.34) 76%, rgba(10,13,18,0) 100%); } /* Die Kachel war 451px hoch, der Text brauchte 671px: overflow:hidden schnitt die Haken ab. Ursache war height:100% aus der Desktop-Regel, das auf dem Handy nie zurueckgenommen wurde. Jetzt bestimmt der Text die Hoehe, das Foto fuellt den Rest. */ .b9k-innen { height:auto !important; min-height:340px; } .b9k-text { max-width:100%; height:auto !important; justify-content:flex-end; padding:170px 22px 26px; } .b9k-titel { font-size:clamp(21px,5.2vw,26px); } .b9k-unter { font-size:15px; margin-bottom:16px; } .b9k-liste li { font-size:14.5px; } } /* --- Dunkles Band ------------------------------------------------ */ .b9-band-dunkel { margin:16px; border-radius:28px; background:#151515; padding:clamp(56px,6vw,88px) 0 clamp(56px,6vw,80px); scroll-margin-top:104px; color:#fff; } .b9-band-dunkel .b9-ey { color:#fff; background:var(--b9-blau); } .b9-band-dunkel .b9-titel { color:#fff; } /* --- Dreieck --------------------------------------------------- Aufbau wie im Vorbild: die Kanten sind ein breites Band, in dem ein Bild steht, innen die Grundfarbe, drei Knoten auf den Ecken, gepunktete Speichen nach innen, in der Mitte die Plakette. Die Zahlen stammen aus der Inkreis-Rechnung, damit das Band an allen drei Kanten gleich breit ist (32 Einheiten). */ .b9d-raster { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,72px); align-items:center; } .b9d-bild { min-width:0; } .b9d-svg { display:block; width:100%; height:auto; overflow:visible; } .b9d-bild image.b9d-bild, .b9d-svg .b9d-bild { filter:grayscale(1) contrast(1.06) brightness(.92); } .b9d-innen { fill:#151515; } .b9d-speichen { stroke:#7d7d7d; } .b9d-ring { fill:#fff; stroke:none; transition:fill .25s ease; } .b9d-icon { color:#1a1a1a; transition:color .25s ease; } .b9d-lab { font-size:18px; font-weight:600; fill:#fff; font-family:inherit; transition:fill .25s ease; } .b9d-plakette { fill:#fff; } .b9d-signet { fill:#1a1a1a; } .b9d-wort { font-size:21px; font-weight:700; fill:#1a1a1a; letter-spacing:.015em; font-family:inherit; } .b9d-knoten.an .b9d-ring { fill:var(--b9-blau); } .b9d-knoten.an .b9d-icon { color:#fff; } .b9d-knoten.an .b9d-lab { fill:var(--b9-blau-hell); } .b9d-liste { list-style:none; margin:0; padding:0; min-width:0; } .b9d-erk { padding:24px 0 24px 22px; border-top:1px solid #3a3a3a; border-left:2px solid transparent; transition:border-left-color .25s ease; } .b9d-erk:last-child { border-bottom:1px solid #3a3a3a; } .b9d-erk.an { border-left-color:var(--b9-blau-hell); } .b9d-titel { font-size:22px; font-weight:600; margin:0 0 8px; color:#fff; } .b9d-text { font-size:17px; line-height:1.65; color:#c9c9c9; margin:0; } .b9d-mehr { display:inline-flex; align-items:center; gap:10px; margin-top:14px; font-size:16px; font-weight:500; color:#fff; border-bottom:1px solid var(--b9-blau-hell); padding-bottom:2px; transition:gap .25s ease; } .b9d-mehr:hover { color:#fff; } .b9-band-dunkel .b9-platz-marke { color:var(--b9-blau-hell); border-color:var(--b9-blau-hell); } .b9-band-dunkel .b9-platz-hinweis { color:#a8ada2; } @media (hover:hover) and (pointer:fine) { .b9d-mehr:hover { gap:16px; } } @media (max-width:900px) { .b9d-raster { grid-template-columns:1fr; } .b9d-bild { max-width:440px; margin:0 auto 12px; } } /* Schmale Schirme: die Grafik schrumpft auf rund 60 Prozent. Beschriftung und Plakette wachsen deshalb in Grafikeinheiten mit, die Plakette als ganze Gruppe, damit Signet, Schrift und Flaeche im Verhaeltnis bleiben. */ @media (max-width:560px) { .b9d-lab { font-size:26px; } .b9d-mitte { transform-box:view-box; transform-origin:280px 361px; transform:scale(1.36); } .b9d-knoten { transform-box:view-box; } } /* --- Cockpit ---------------------------------------------------- */ /* --- Cockpit ------------------------------------------------------ Der Text steht oben, die Geraete laufen darunter ueber die volle Bandbreite. Das Bild ist freigestellt, es braucht also keinen Rahmen und keine Flaeche. */ .b9c-geraete { margin-top:clamp(30px,3.4vw,52px); width:100%; } .b9c-geraete img { display:block; width:100%; height:auto; } @media (max-width:900px) { .b9c-geraete { margin-top:26px; } } /* Platzhalter: sichtbar unfertig, damit niemand sie fuer Text haelt. */ .b9-platz-hinweis { font-size:15px; line-height:1.6; color:#8a8f94; } .b9-platz-liste { list-style:none; margin:0; padding:0; } .b9-platz-liste li { font-size:15px; line-height:1.6; color:#8a8f94; padding:7px 0 7px 18px; position:relative; } .b9-platz-liste li::before { content:"\2013"; position:absolute; left:0; color:#cfcdc7; } /* ============================================================ V17.1: Kopfzeile, Fotolinks ============================================================ */ /* Die Menueleiste dreht mit Knopf und Wortmarke. Ueber den dunklen Baendern steht sie weiss, auf hellem Grund schwarz. Ohne das war sie das einzige Element der Kopfzeile, das nie gewechselt hat. */ :root { --b9-blau-hell:#7C9FDC; } .b9-leiste { transition: background-color .28s ease; } .b9-leiste a { transition: color .28s ease; } .b9-leiste a[aria-current="page"]::after { transition: background-color .28s ease; } header.b9-inv .b9-leiste { background:#1a1a1a; } header.b9-inv .b9-leiste a { color:#c9c9c9; } header.b9-inv .b9-leiste a[aria-current="page"] { color:#fff; } header.b9-inv .b9-leiste a[aria-current="page"]::after { background:var(--b9-blau-hell); } @media (hover:hover) and (pointer:fine) { .b9-leiste a:hover { color:#1a1a1a; } header.b9-inv .b9-leiste a:hover { color:#fff; } } /* Die Wortmarke dreht mit. Ohne Flaeche liefe der Fliesstext der Seite unter ihr durch, weil die Kopfzeile fest steht; mit weisser Flaeche stand sie als Fleck auf dem Cremeband. Schwarz loest beides und ist dieselbe Regel wie bei Knopf und Leiste. */ #b9-home { transition: background-color .28s ease, color .28s ease; } header.b9-inv #b9-home { background:#1a1a1a !important; color:#fff !important; } /* Die beiden Portraets im Kontaktbereich fuehren ins Team. */ .b9-kopf-link { display:flex; align-items:center; gap:20px; color:inherit; } .b9-kopf-link img { transition:filter .28s ease; } @media (hover:hover) and (pointer:fine) { .b9-kopf-link:hover { color:inherit; } .b9-kopf-link:hover img { filter:brightness(1.06); } .b9-kopf-link:hover div div:first-child { text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; } } /* Die Mobilregeln stehen weiter oben in der Datei und verlieren daher gegen die spaeteren Bandregeln. Deshalb hier noch einmal. */ @media (max-width:780px) { .b9-inhalt { padding:0 24px; } } /* ============================================================ Teamseite: zwei Abschnitte im Wechsel ============================================================ */ .b9g-kopf { padding:150px 0 8px; } .b9g-kopf .b9-titel { margin:0; } .b9g-person { padding:64px 0; } .b9g-blau { margin:16px; border-radius:28px; background:#edf1f8; padding:clamp(48px,5vw,72px) 0; } .b9g-raster { display:grid; grid-template-columns:360px minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:center; } /* Gekehrt heisst auch: die schmale Spur wechselt die Seite. Ohne das landet das Bild in der breiten Spalte und wird doppelt so gross. */ .b9g-kehrt .b9g-raster { grid-template-columns:minmax(0,1fr) 360px; } .b9g-kehrt .b9g-bild { grid-column:2; grid-row:1; } .b9g-kehrt .b9g-text { grid-column:1; grid-row:1; } /* Hinter dem Bild liegt eine blaue Flaeche, leicht versetzt. Sie bringt die Farbe herein, ohne das Foto anzufassen. */ .b9g-bild { position:relative; } .b9g-bild::before { content:""; position:absolute; left:-18px; bottom:-18px; width:100%; height:100%; border-radius:20px; background:var(--b9-blau); opacity:.16; } .b9g-kehrt .b9g-bild::before { left:auto; right:-18px; } .b9g-bild img { position:relative; display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; object-position:50% 12%; border-radius:20px; } .b9g-text { min-width:0; } .b9g-rolle { font-size:15px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--b9-blau); margin:0 0 10px; padding-top:16px; border-top:3px solid var(--b9-blau); display:inline-block; } .b9g-name { font-size:clamp(30px,3.4vw,40px); font-weight:600; line-height:1.14; margin:0 0 14px; } .b9g-kurz { font-size:clamp(18px,1.7vw,21px); line-height:1.55; color:#3c3c3c; margin:0 0 26px; max-width:46ch; } .b9g-liste { list-style:none; margin:0; padding:0; } .b9g-liste li { position:relative; font-size:16px; line-height:1.6; color:#3c3c3c; padding:14px 0 14px 26px; border-top:1px solid #dcdad4; } .b9g-liste li:last-child { border-bottom:1px solid #dcdad4; } .b9g-liste li::before { content:""; position:absolute; left:0; top:22px; width:10px; height:3px; border-radius:1.5px; background:var(--b9-blau); } .b9g-blau .b9g-liste li { border-top-color:#d3dbea; } .b9g-blau .b9g-liste li:last-child { border-bottom-color:#d3dbea; } .b9g-fuss { padding:40px 0 110px; } @media (max-width:900px) { .b9g-raster, .b9g-kehrt .b9g-raster { grid-template-columns:1fr; gap:28px; } .b9g-kehrt .b9g-bild, .b9g-kehrt .b9g-text { grid-column:1; grid-row:auto; } .b9g-kehrt .b9g-bild { grid-row:1; } /* Das Bild fuellt die Spalte, hoechstens 320. Im blauen Band faellt es um dessen 32 Pixel Aussenrand schmaler aus; das ist gewollt. */ .b9g-bild { width:100%; max-width:320px; } .b9g-kehrt .b9g-bild { margin-left:auto; } .b9g-kopf { padding:120px 0 4px; } .b9g-person { padding:44px 0; } } /* --- Zwei Schriften ----------------------------------------------- Jost traegt die Ueberschriften und die Wortmarke. Im Fliesstext laesst die geometrische Form die Zeile flach wirken: runde o und e, gleiche Strichstaerke, kleine x-Hoehe. Inter ist fuer den Bildschirm gezeichnet, hat eine hohe x-Hoehe und traegt ab 14 px. */ :root { --b9-display:'Jost','Century Gothic',Futura,sans-serif; --b9-text:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; } h1, h2, h3, h4, .b9-wort, .b9-titel, .b9k-titel, .b9d-wort, .b9d-lab, .b9-nav, #b9-home, .b9-ey { font-family:var(--b9-display); } /* Der Zusatz in der Kopfzeile ist ein Satz, keine Ueberschrift. */ .b9-zusatz { font-family:var(--b9-text); } /* ============================================================ Prozessseite: links steht der Kopf, rechts laufen die Schritte an einer Schiene entlang. Die Schiene fuellt sich beim Scrollen bis zum erreichten Punkt — sie zeigt den Stand, sie laeuft nicht von selbst. ============================================================ */ .b9p-abschnitt { padding:150px 0 120px; } .b9p-raster { display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:0 76px; max-width:1200px; margin:0 auto; padding:0 40px; } .b9p-links { position:sticky; top:130px; align-self:start; padding-bottom:60px; } .b9p-h1 { font-size:clamp(28px,3.2vw,40px); font-weight:600; line-height:1.18; margin:0 0 20px; font-family:var(--b9-display); } .b9p-vorlauf { font-size:17px; line-height:1.7; color:#3c3c3c; margin:0 0 30px; } .b9p-knopf { display:inline-flex; align-items:center; gap:10px; background:var(--b9-blau); color:#fff; text-decoration:none; font-family:var(--b9-display); font-weight:600; font-size:16px; padding:15px 26px; border-radius:999px; transition:background .2s ease; } .b9p-knopf::after { content:"\2192"; } .b9p-knopf:hover { background:var(--b9-blau-tief); } .b9p-rechts { position:relative; padding-left:56px; } .b9p-schiene { position:absolute; left:7px; top:14px; bottom:40px; width:2px; background:#dcdad4; } .b9p-fuellung { position:absolute; left:0; top:0; width:100%; display:block; height:var(--b9p-stand,0%); background:var(--b9-blau); transition:height .45s cubic-bezier(.4,0,.2,1); } .b9p-phase { position:relative; margin:0 0 22px; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#8a8f94; font-family:var(--b9-display); } .b9p-phase + .b9p-schritt { margin-top:0; } .b9p-rechts > .b9p-phase:not(:first-of-type) { margin-top:54px; } .b9p-schritt { position:relative; margin:0 0 20px; } /* box-sizing:border-box, sonst rechnet der Rand 2 px oben drauf und der Punkt sitzt neben der Linie statt auf ihr. */ .b9p-punkt { position:absolute; left:-56px; top:34px; width:16px; height:16px; box-sizing:border-box; border-radius:50%; background:#fff; border:2px solid #dcdad4; transition:border-color .35s ease, background .35s ease; } .b9p-schritt.an .b9p-punkt { border-color:var(--b9-blau); background:var(--b9-blau); } .b9p-karte { background:#fff; border:1px solid #e2e0da; border-radius:20px; padding:clamp(26px,2.6vw,36px); box-shadow:0 10px 28px rgba(26,26,26,.07); } .b9p-nr { margin:0; font-size:14px; font-weight:600; letter-spacing:.08em; color:var(--b9-blau); font-family:var(--b9-display); text-transform:uppercase; } .b9p-titel { font-family:var(--b9-display); font-size:clamp(22px,2.1vw,28px); font-weight:600; line-height:1.2; margin:6px 0; color:#1a1a1a; } .b9p-zweck { font-size:16px; font-weight:500; color:#3c3c3c; margin:0 0 20px; } .b9p-liste { list-style:none; margin:0 0 22px; padding:0; display:grid; gap:10px; } .b9p-liste li { position:relative; padding-left:28px; font-size:15.5px; line-height:1.45; color:#3c3c3c; } .b9p-liste li::before { content:""; position:absolute; left:0; top:.16em; width:18px; height:18px; background-repeat:no-repeat; background-size:18px 18px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='none' stroke='%232F5597' stroke-width='1.6'/%3E%3Cpath d='M7.4 12.4l3.1 3.1 6.1-6.6' fill='none' stroke='%232F5597' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .b9p-ergebnis { margin:0; border-top:1px solid #e2e0da; padding-top:16px; font-size:15px; line-height:1.5; color:#1a1a1a; } .b9p-ergebnis b { font-family:var(--b9-display); font-weight:600; color:var(--b9-blau); } @media (max-width:900px) { .b9p-abschnitt { padding:120px 0 90px; } .b9p-raster { grid-template-columns:1fr; gap:34px; padding:0 24px; } .b9p-links { position:static; padding-bottom:0; } .b9p-rechts { padding-left:34px; } .b9p-schiene { left:5px; } .b9p-punkt { left:-34px; top:30px; width:12px; height:12px; } } @media (prefers-reduced-motion: reduce) { .b9p-fuellung, .b9p-punkt { transition:none; } } /* --- Bildbanner --------------------------------------------------- Randloses Band ueber die volle Fensterbreite. */ .b9-bannerband { width:100%; margin:38px 0 0; padding:0; box-sizing:border-box; } .b9-banner { margin:0; width:100%; overflow:hidden; position:relative; aspect-ratio:21/9; max-height:min(58vh,600px); background:#101215; } .b9-banner img { width:100%; height:100%; object-fit:cover; object-position:50% 44%; display:block; } @media (max-width:900px) { /* Die allgemeine Mobilregel gibt Abschnitten seitliche Polsterung. Das Banner laeuft randlos, also hier ausgenommen. */ .b9-bannerband { margin-top:26px; padding:0 !important; width:100%; box-sizing:border-box; } .b9-banner { aspect-ratio:16/9; max-height:none; } } /* Die Ecke Region traegt die Rautenflagge statt eines Strichsymbols. Eigene Klasse, damit die Umschaltfarbe der anderen Ecken sie nicht uebermalt; der aktive Zustand zeigt sich an der Fassung. */ .b9d-ring-fahne { fill:url(#b9d-rauten); transition:none; } .b9d-knoten.an .b9d-ring-fahne { fill:url(#b9d-rauten); } .b9d-fassung { transition:stroke .25s ease; } .b9d-knoten.an .b9d-fassung { stroke:var(--b9-blau-hell); } /* ═══ Mobil-Nachbesserungen (29.09.) ══════════════════════════════════ Drei Befunde aus dem Handy-Check, keine Textaenderung. */ @media (max-width:760px) { /* 1. Angebotsmatrix. Auf dem Handy bleibt die Leistungsspalte stehen, und es ist immer genau EIN Paket zu sehen. Gewischt wird seitlich, die Reiter darueber zeigen, wo man ist, und schalten auf Tipp um. Zwei angeschnittene Spalten waren unleserlich. */ .b9a-reiter { display:flex !important; gap:6px; margin:0 0 14px; position:sticky; top:92px; z-index:5; background:#fff; padding:10px 0 10px; } .b9a-reiter button { flex:1 1 0; min-width:0; appearance:none; cursor:pointer; font-family:var(--b9-display); font-size:13.5px; font-weight:600; letter-spacing:.03em; line-height:1.1; padding:11px 6px; border:1px solid #e2e0db; background:#fff; color:#6d747a; border-radius:999px; transition:background .18s ease, color .18s ease, border-color .18s ease; } .b9a-reiter button.an { background:var(--b9-blau); border-color:var(--b9-blau); color:#fff; } .b9a-rahmen { overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; } .b9a-rahmen::-webkit-scrollbar { display:none; } .b9a-matrix { min-width:0 !important; width:auto !important; border-collapse:separate !important; border-spacing:0 !important; } .b9a-matrix thead { display:none !important; } /* Leistungsspalte: steht beim Wischen. Lange Woerter werden getrennt, statt mitten im Wort zu brechen. */ .b9a-matrix td:first-child { position:sticky; left:0; z-index:3; background:#fff; width:204px; min-width:204px; max-width:204px; padding:15px 14px 15px 0 !important; font-size:14.5px !important; line-height:1.38 !important; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word; box-shadow:7px 0 8px -8px rgba(26,26,26,.18); } /* Paketspalte: fuellt den Rest, genau eine je Ansicht. */ .b9a-matrix td:not(:first-child) { width:calc(100vw - 252px); min-width:calc(100vw - 252px); padding:15px 6px !important; scroll-snap-align:end; } /* Gruppentitel bleiben beim Wischen stehen. Die Zelle selbst kann nicht haften, weil sie ueber alle vier Spalten laeuft und damit keinen Spielraum hat — also haftet der Text darin. */ .b9a-matrix tr.b9a-gruppe td { position:static !important; width:auto !important; min-width:0 !important; max-width:none !important; box-shadow:none !important; padding:24px 0 4px !important; background:transparent; } .b9a-gtext { position:sticky; left:0; display:inline-block; font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#8a8f94; font-family:var(--b9-display); background:#fff; padding-right:14px; } .b9a-matrix tbody tr:not(.b9a-gruppe) td { border-top:1px solid #e2e0db !important; } .b9a-matrix td[data-ja="0"] { font-size:15px !important; } /* 2. Cockpit-Streifen. Vier Geraete auf 342px ergaben Zahlen von knapp zwei Millimetern. Der Streifen laeuft jetzt in Lesegroesse seitlich durch. */ .b9c-geraete { overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-snap-type:x proximity; } .b9c-geraete::-webkit-scrollbar { display:none; } .b9c-geraete img { width:auto !important; height:190px !important; max-width:none !important; } /* 3. Tippflaechen. Textlinks massen 20 bis 27 Pixel Hoehe; unter 44 trifft der Daumen daneben. Die Flaeche waechst, der Text nicht. */ .b9d-mehr, .b9a-mehr { padding:11px 0 !important; } footer a, .b9-page a { display:inline-block; padding:8px 0; } } /* ═══ Korrekturen Handy (29.09., zweiter Durchgang) ═══════════════════ */ /* Wortmarke. Sie darf unter keinen Umstaenden umbrechen — auch nicht, wenn iOS die Schrift hochskaliert (Einstellungen > Anzeige > Textgroesse) oder der Browser zoomt. Statt umzubrechen wird sie schmaler. */ #b9-home, .b9-wort, #b9-home *, #b9-foot-wort, .b9-foot-wort, #b9-menu-wort { white-space:nowrap !important; word-break:keep-all; hyphens:none; } #b9-home { flex:0 0 auto; min-width:0; max-width:calc(100% - 66px); } header .b9-rechts { flex-wrap:nowrap !important; } header { flex-wrap:nowrap !important; gap:10px; } @media (max-width:400px) { /* Ab hier wird es eng: Signet und Schrift ruecken zusammen. */ #b9-home { padding:11px 16px !important; font-size:20px !important; gap:8px !important; } #b9-home svg { width:24px !important; height:24px !important; } } @media (max-width:340px) { #b9-home { padding:10px 13px !important; font-size:18px !important; } } /* Die Paketreiter sind eine Handy-Bedienung; auf dem Desktop traegt die Kopfzeile der Tabelle diese Aufgabe. */ .b9a-reiter { display:none; } /* Sehr schmale Geraete (iPhone SE der ersten Reihe, 320px): Kopfzeile und Fussbereich ruecken enger zusammen, sonst steht der Menueknopf ueber dem Rand. Betrifft heute unter ein Prozent der Geraete, kostet aber nichts. */ @media (max-width:355px) { header { left:12px !important; right:12px !important; } #b9-menu-btn { width:46px !important; height:46px !important; } footer, footer * { max-width:100% !important; } footer a { word-break:break-word; } section, footer { padding-left:16px !important; padding-right:16px !important; } } /* ═══ Menü auf dem Handy ═══════════════════════════════════════════════ Vorher: weiße Fläche, schwarze Liste, nichts von der Marke, und die wichtigste Handlung stand als sechster Listeneintrag zwischen den anderen. Jetzt trägt das Menü dieselbe dunkle Fläche wie die Bänder der Seite, die Wortmarke bleibt als helle Pille stehen, und "Kontakt aufnehmen" ist als Einziges blau. */ @media (max-width:780px) { /* Achtung: display darf nicht pauschal erzwungen werden, sonst schlaegt es [hidden] und das geschlossene Menue liegt unsichtbar ueber der Seite und faengt jede Beruehrung ab. Deshalb :not([hidden]). */ #b9-menu:not([hidden]) { background:#151515 !important; padding:22px 22px calc(22px + env(safe-area-inset-bottom)) !important; display:flex !important; flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch; } /* Kopf: Wortmarke als helle Pille wie in der Kopfzeile, damit der Übergang beim Öffnen nicht springt. */ #b9-menu-head { align-items:center; gap:14px; flex:0 0 auto; } #b9-menu-head > a { background:#fff; border-radius:20px; padding:12px 20px !important; font-size:20px !important; gap:9px !important; color:#000 !important; white-space:nowrap; } #b9-menu-close { width:52px !important; height:52px !important; flex:none; border:0 !important; border-radius:50% !important; background:rgba(255,255,255,.10) !important; color:#fff !important; display:inline-flex; align-items:center; justify-content:center; transition:background .2s ease; } #b9-menu-close:hover, #b9-menu-close:focus-visible { background:rgba(255,255,255,.2) !important; } #b9-menu-close svg line, #b9-menu-close svg path { stroke:#fff !important; } /* Hauptnavigation */ /* Navigation beginnt oben, Anschrift sitzt unten: sonst klafft oben und unten je ein Drittel Leerraum. */ #b9-menu-group { margin:30px 0 auto !important; gap:0 !important; } .b9-nav { color:#fff !important; font-family:var(--b9-display); font-size:clamp(26px,6.6vw,38px) !important; font-weight:600 !important; line-height:1.12; padding:15px 0 !important; border-radius:0 !important; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.12); transition:color .18s ease, padding-left .18s ease; } .b9-nav:hover, .b9-nav:focus-visible { background:none !important; color:#9fc6e8 !important; padding-left:6px !important; } /* Pfeil, der die Richtung zeigt. Kein Bild, nur Zeichen. */ .b9-nav::after { content:"→"; font-size:.52em; font-weight:400; color:rgba(255,255,255,.35); transition:transform .18s ease, color .18s ease; } .b9-nav:hover::after { color:#9fc6e8; transform:translateX(3px); } /* Die aktuelle Seite ist erkennbar, ohne dass man sie anklicken kann. */ .b9-nav[aria-current="page"] { color:rgba(255,255,255,.42) !important; } .b9-nav[aria-current="page"]::after { content:"•"; color:var(--b9-blau-hell); font-size:.7em; } /* Kontakt: die einzige Handlung, also die einzige Farbe. */ .b9-nav-kontakt { margin-top:24px; border-bottom:0 !important; background:var(--b9-blau); border-radius:999px !important; padding:17px 26px !important; justify-content:center; gap:12px; font-size:clamp(18px,4.6vw,22px) !important; box-shadow:0 12px 30px rgba(11,108,180,.34); } .b9-nav-kontakt::after { content:"→"; color:rgba(255,255,255,.85); font-size:.85em; } .b9-nav-kontakt:hover, .b9-nav-kontakt:focus-visible { background:var(--b9-blau-tief) !important; color:#fff !important; padding-left:26px !important; } .b9-nav-kontakt:hover::after { color:#fff; } .b9-menu-sep { display:none !important; } /* Rechtliches: klein, ruhig, unten. */ .b9-menu-klein { display:flex; flex-wrap:wrap; gap:6px 20px; margin-top:30px; } .b9-nav-s { font-size:14.5px !important; font-weight:400 !important; color:rgba(255,255,255,.55) !important; padding:9px 0 !important; border-bottom:0 !important; display:inline-flex; } .b9-nav-s::after { content:none !important; } .b9-nav-s:hover, .b9-nav-s:focus-visible { color:#fff !important; padding-left:0 !important; } #b9-menu-addr { color:rgba(255,255,255,.38) !important; font-size:13px !important; line-height:1.5; margin-top:26px; padding-top:18px; flex:0 0 auto; border-top:1px solid rgba(255,255,255,.10); } /* Öffnen: die Fläche blendet auf, die Einträge laufen versetzt nach. */ #b9-menu:not([hidden]) { animation:b9-menu-auf .26s cubic-bezier(.32,0,.24,1) both; } @keyframes b9-menu-auf { from { opacity:0; } to { opacity:1; } } #b9-menu:not([hidden]) .b9-nav { animation:b9-menu-zeile .34s cubic-bezier(.22,.9,.3,1) both; } #b9-menu:not([hidden]) .b9-nav:nth-child(1) { animation-delay:.05s; } #b9-menu:not([hidden]) .b9-nav:nth-child(2) { animation-delay:.09s; } #b9-menu:not([hidden]) .b9-nav:nth-child(3) { animation-delay:.13s; } #b9-menu:not([hidden]) .b9-nav:nth-child(4) { animation-delay:.17s; } #b9-menu:not([hidden]) .b9-nav:nth-child(5) { animation-delay:.21s; } #b9-menu:not([hidden]) .b9-nav:nth-child(6) { animation-delay:.25s; } @keyframes b9-menu-zeile { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce) { #b9-menu:not([hidden]), #b9-menu:not([hidden]) .b9-nav { animation:none !important; } } } /* ═══ Wisch-Hinweis bei den Lösungskacheln ═════════════════════════════ Die nächste Kachel schaute nur 35px hervor — zu wenig, um zu erkennen, dass es seitlich weitergeht. Drei Mittel zusammen: die Kachel wird schmaler, sodass die nächste deutlich sichtbar anschneidet; darunter stehen Punkte mit der Position; und beim ersten Erscheinen rückt das Band einmal kurz an und zurück. */ @media (max-width:900px) { .b9k-karte { flex:0 0 74vw !important; } .b9k-punkte { display:flex !important; align-items:center; justify-content:center; gap:7px; margin:16px 0 0; padding:0 24px; } .b9k-punkte i { display:block; width:7px; height:7px; border-radius:999px; background:#d3d1cb; transition:width .28s cubic-bezier(.4,0,.2,1), background .28s ease; } .b9k-punkte i.an { width:26px; background:var(--b9-blau); } .b9k-wink { display:flex !important; align-items:center; justify-content:center; gap:8px; margin:12px 0 0; padding:0 24px; font-family:var(--b9-display); font-size:13px; font-weight:500; letter-spacing:.04em; color:#8a8f94; } .b9k-wink span { display:inline-block; animation:b9k-zeig 2.1s ease-in-out infinite; } @keyframes b9k-zeig { 0%,100% { transform:translateX(0); opacity:.55; } 50% { transform:translateX(5px); opacity:1; } } /* Sobald einmal gewischt wurde, hat der Hinweis seinen Zweck erfüllt. */ .b9k-band.b9k-berührt ~ .b9k-wink, .b9k-wink.weg { opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; } /* Das einmalige Anrücken beim ersten Sichtbarwerden. */ .b9k-spur.b9k-nick { animation:b9k-nick .95s cubic-bezier(.32,0,.24,1) both; } @keyframes b9k-nick { 0% { transform:translateX(0); } 38% { transform:translateX(-26px); } 100% { transform:translateX(0); } } @media (prefers-reduced-motion:reduce) { .b9k-spur.b9k-nick, .b9k-wink span { animation:none !important; } } } .b9k-punkte, .b9k-wink { display:none; }