begann bei y=118). Hier wird deshalb NUR die Farbe gesetzt, nicht die Positionierung. Der Ton ist exakt der Startwert des Hero-Verlaufs, damit keine Naht sichtbar wird. */ .seite-beratung .header, .seite-beratung .header--scrolled { background: #17406F; box-shadow: none; border-bottom: 1px solid rgba(255, 255, 255, .14); backdrop-filter: none; } .seite-beratung .header-container { width: 100%; max-width: var(--kr-breit); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); } .seite-beratung .logo-text { color: #fff; } .seite-beratung .nav-link { color: #C3D6EA; } .seite-beratung .nav-link:hover, .seite-beratung .nav-link.active { color: #fff; } .seite-beratung .nav-link.active::after { background: var(--kr-teal); } .seite-beratung .hamburger-line { background: #fff; } /* --------------------------------------------------------------------------- 3. Der Pass — Kopf mit Kenndaten --------------------------------------------------------------------------- */ .beratung-hero { /* KEIN min-height:100vh mehr: der Kopf ist jetzt eine Bande, kein Vorhang. Vorher stand das Ergebnis unter einer bildschirmhohen leeren Fläche. */ background: radial-gradient(120% 140% at 82% -10%, #24558E 0%, rgba(36, 85, 142, 0) 58%), linear-gradient(180deg, #17406F 0%, var(--kr-navy) 100%); color: #fff; /* Der Header ist fixed (styles.css) -- der Pass beginnt darunter. */ padding-block: var(--header-height) clamp(2rem, 5vw, 3rem); } .beratung-header { margin: clamp(1.6rem, 4vw, 2.4rem) 0 0; max-width: none; text-align: left; } .beratung-header .section-tag { display: inline-block; background: none; border: 0; padding: 0; font-family: var(--kr-schrift); font-size: .74rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: #8FC7E8; } .beratung-header .section-title { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.7rem); font-weight: 800; letter-spacing: -.022em; line-height: 1.14; color: #fff; margin: .5rem 0 0; max-width: 24ch; } /* Der statische Hinweis vor dem Laden einer Beratung */ .beratung-description { color: #C3D6EA; margin-top: .7rem; max-width: 34rem; } /* Der kontextabhängige Kopf NACH dem Laden (#8, 07.07.2026): Er trägt jetzt die Hauptaussage — der Gruß IST die Überschrift (Befund 2). Deshalb hier Blockrichtung und Titelgröße statt der früheren zentrierten Fließzeile unter der H1. */ .beratung-context { display: block; margin-top: .5rem; } .beratung-context-main { display: block; background: none; border: 0; padding: 0; margin: 0; text-align: left; font-family: var(--kr-schrift-titel); font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.7rem); font-weight: 800; letter-spacing: -.022em; line-height: 1.14; color: #fff; cursor: default; max-width: 22ch; } /* Nur wenn er wirklich irgendwohin führt, sieht er auch klickbar aus. */ .beratung-context-main--link { cursor: pointer; color: #9FE4DA; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem); text-decoration: underline; text-decoration-color: rgba(159, 228, 218, .45); text-underline-offset: 5px; max-width: 26ch; } .beratung-context-main--link:hover, .beratung-context-main--link:focus-visible { color: #BFF0E9; } .beratung-context-tag { display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem; padding: .34rem .8rem; border-radius: 100px; border: 1px solid rgba(111, 217, 206, .35); background: rgba(57, 163, 153, .16); color: #9FE4DA; font-family: var(--kr-schrift); font-size: .84rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s; } .beratung-context-tag:hover, .beratung-context-tag:focus-visible { background: rgba(57, 163, 153, .26); border-color: rgba(111, 217, 206, .55); } /* Kenndaten: was einen Pass ausmacht — Nummer, Datum, Gültigkeit. Ersetzt die frühere Zeile "Beratung vom … / Code: …" unter dem ✅. */ .pass-kenndaten { margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; gap: 1px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--kr-radius); overflow: hidden; } .pass-kenn { flex: 1 1 9rem; background: rgba(11, 32, 58, .5); padding: .8rem 1.1rem; } .pass-kenn dt { font-family: var(--kr-schrift); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8FA8C4; } .pass-kenn dd { margin: .25rem 0 0; font-family: var(--kr-schrift-titel); font-weight: 700; font-size: 1.06rem; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: .01em; } .pass-kenn dd.result-code { letter-spacing: .16em; color: #6FD9CE; } /* --------------------------------------------------------------------------- 4. Code-Eingabe --------------------------------------------------------------------------- */ .code-entry-container { margin: 1.8rem 0 0; max-width: 30rem; } .code-form { background: rgba(11, 32, 58, .5); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--kr-radius); padding: clamp(1.2rem, 3.5vw, 1.8rem); box-shadow: none; } .code-input-group { margin-bottom: 1.1rem; } .code-label { display: block; font-family: var(--kr-schrift); font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8FA8C4; margin-bottom: .5rem; } .code-input-wrapper { position: relative; } .code-input { width: 100%; padding: .85rem 2.8rem .85rem 1rem; border-radius: var(--kr-radius-klein); border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: #fff; font-family: var(--kr-schrift-titel); font-size: 1.3rem; font-weight: 700; letter-spacing: .2em; text-align: left; text-transform: uppercase; transition: border-color .15s, background-color .15s; } .code-input::placeholder { color: rgba(255, 255, 255, .3); letter-spacing: .2em; text-transform: uppercase; } .code-input:focus { outline: none; border-color: var(--kr-cyan); background: rgba(255, 255, 255, .1); } .code-input--error { border-color: #FF9E8F !important; background: rgba(255, 158, 143, .1) !important; } .code-input--valid { border-color: #6FD9CE !important; background: rgba(111, 217, 206, .1) !important; } .code-validation-icon { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; opacity: 0; transition: opacity .15s; } .code-validation-icon--visible { opacity: 1; } .code-hint { margin-top: .55rem; font-size: .84rem; color: #8FA8C4; text-align: left; } .code-error { margin-top: .5rem; font-size: .88rem; font-weight: 600; color: #FFB4A8; text-align: left; min-height: 1.4em; } .code-submit { width: 100%; position: relative; } .code-submit:disabled { opacity: .7; cursor: not-allowed; } .submit-spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, .3); border-top-color: #fff; border-radius: 50%; animation: kr-dreh .8s linear infinite; } .code-submit--loading .submit-text { opacity: .6; } .code-submit--loading .submit-spinner { display: block; position: absolute; } @keyframes kr-dreh { to { transform: rotate(360deg); } } /* --------------------------------------------------------------------------- 5. Sprungleiste — auf dem Handy der schnellste Weg zum richtigen Abschnitt --------------------------------------------------------------------------- */ /* Bewusst zurueckhaltend (Christophs Feedback 02.08.2026: "koennte noch ein wenig weniger praesent sein"): kleiner, grau statt dunkel, ohne Trennlinie. Sie ist eine Hilfe fuer den, der sie sucht -- kein Element, das um Aufmerksamkeit konkurriert. */ .pass-sprung { position: sticky; /* Klebt UNTER dem fixed Header, nicht darunter weg. */ top: var(--header-height); z-index: 20; background: rgba(244, 247, 250, .86); backdrop-filter: blur(10px); border-bottom: 0; } .pass-sprung-inner { display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: none; padding-block: .35rem; } .pass-sprung-inner::-webkit-scrollbar { display: none; } .pass-sprung a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .6rem; border-radius: 100px; font-size: .8rem; font-weight: 400; color: #7A8CA3; text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s; } .pass-sprung a:hover { background: #EAF0F6; color: var(--kr-navy); } .pass-sprung .kr-icon { font-size: .92rem; opacity: .75; } /* --------------------------------------------------------------------------- 6. Ergebnis: Sektionen --------------------------------------------------------------------------- */ .session-result { max-width: none; margin: 0; padding-block: clamp(2rem, 5vw, 3.2rem) 1rem; animation: kr-auf .4s ease-out; } @keyframes kr-auf { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .result-section { background: none; border-radius: 0; box-shadow: none; margin-bottom: 0; padding: clamp(1.8rem, 4vw, 2.6rem) 0; border-top: 1px solid var(--kr-linie); } .result-section:first-of-type { border-top: 0; padding-top: 0; } /* Sektionskopf: Icon ueber dem Titel, beides zentriert (Christophs Entscheid 02.08.2026 nach dem Variantenvergleich -- Variante C, "definitiv C"). Die Ueberschriften gingen im Fliesstext unter; jetzt tragen sie den Abschnitt sichtbar. Das Icon ist gefuellt statt getoent -- auf der Mittelachse braucht es Gewicht, sonst schwebt es. */ .result-section-title { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem; font-size: 1.44rem; font-weight: 800; letter-spacing: -.018em; color: var(--kr-navy); margin: 0 0 1.5rem; padding-bottom: 0; border-bottom: 0; max-width: 30ch; margin-inline: auto; } .section-icon { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--kr-teal); color: #fff; font-size: 1.45rem; } /* Der Textblock bekommt DIESELBE Mittelachse wie die Ueberschrift (der Satz selbst bleibt linksbuendig -- zentrierter Fliesstext waere unlesbar). Ohne diese Zeile stuende die zentrierte Ueberschrift ueber einem links klebenden Block, und genau das Springen waere der Preis der Zentrierung. */ .result-section-content { color: var(--kr-text); line-height: 1.62; max-width: var(--kr-spalte); margin-inline: auto; } /* Bereiche mit Kacheln/Karten dürfen die volle Dokumentbreite nutzen. */ .result-section--breit .result-section-content { max-width: none; } .result-section-content p { margin-bottom: .8rem; } .result-section-content p:last-child { margin-bottom: 0; } #result-summary p { font-size: 1.06rem; line-height: 1.68; color: #263C56; } /* --------------------------------------------------------------------------- 7. Gesprächsverlauf (#6, 07.07.2026) — NUR KonRats Antworten --------------------------------------------------------------------------- */ .verlauf-details { margin-top: 1.4rem; border-top: 1px solid var(--kr-linie-zart); padding-top: 1rem; max-width: var(--kr-spalte); } .verlauf-summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .55rem; font-size: .93rem; font-weight: 600; color: var(--kr-teal-tief); } .verlauf-summary::-webkit-details-marker { display: none; } .verlauf-summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s; } .verlauf-details[open] .verlauf-summary::before { transform: rotate(45deg); } .verlauf-list { list-style: none; margin: 1.1rem 0 0; padding: 0 0 0 1.4rem; border-left: 2px solid var(--kr-linie); display: flex; flex-direction: column; gap: 1.1rem; max-height: none; overflow-y: visible; } .verlauf-entry { position: relative; display: block; padding: 0; background: none; border: 0; border-radius: 0; } .verlauf-entry::before { content: ""; position: absolute; left: calc(-1.4rem - 5px); top: .5rem; width: 8px; height: 8px; border-radius: 50%; background: var(--kr-teal); box-shadow: 0 0 0 3px var(--kr-grund); } .verlauf-time { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .06em; color: var(--kr-text-leise); font-variant-numeric: tabular-nums; } .verlauf-text { display: block; margin-top: .2rem; color: #3A4D66; font-size: .97rem; line-height: 1.6; } /* --------------------------------------------------------------------------- 8. Produkte aus der Beratung --------------------------------------------------------------------------- */ .products-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .product-card { display: grid; grid-template-columns: minmax(0, 11.5rem) minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 1.8rem); align-items: start; width: 100%; text-align: left; background: var(--kr-karte); border: 1px solid var(--kr-linie); border-left: 1px solid var(--kr-linie); border-radius: var(--kr-radius); padding: clamp(1.1rem, 3vw, 1.6rem); box-shadow: var(--kr-schatten); font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s; } .product-card:hover { transform: none; } /* Auf dem Handy untereinander: bei 390 px blieben sonst rund 150 px für den Beschreibungstext, und "Flachstrick-Maßanfertigung, Kompressionsklasse 2 …" brach in eine Buchstabensäule (am 02.08.2026 im 390-px-Rendering gemessen). Die Seite wird überwiegend am Handy gelesen — das ist kein Randfall. */ @media (max-width: 40rem) { .product-card { grid-template-columns: 1fr; } } .product-card--clickable { cursor: pointer; } .product-card--clickable:hover, .product-card--clickable:focus-visible { transform: none; border-color: var(--kr-teal); box-shadow: 0 1px 2px rgba(23, 58, 100, .05), 0 12px 28px -14px rgba(23, 58, 100, .28); } .product-image { width: auto; height: auto; background: #EDF3F9; border-radius: var(--kr-radius-klein); aspect-ratio: 4 / 5; display: grid; place-items: center; overflow: hidden; } .product-image img { width: 100%; height: 100%; object-fit: contain; display: block; } .product-image-placeholder { font-size: 2rem; opacity: .35; } .product-info { min-width: 0; } .product-name { font-family: var(--kr-schrift-titel); font-size: 1.42rem; font-weight: 800; letter-spacing: -.018em; color: var(--kr-navy); margin-bottom: 0; } .product-description { margin-top: .6rem; font-size: 1rem; color: #3A4D66; line-height: 1.6; } /* Chips (Kompressionsklasse, Machart) — das Fach-Signal der Karte. */ .produkt-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; } .produkt-chip { display: inline-flex; align-items: center; padding: .3rem .7rem; border-radius: 100px; font-family: var(--kr-schrift); font-size: .82rem; font-weight: 600; } .produkt-chip--kkl { background: var(--kr-cyan-hauch); color: var(--kr-cyan-tief); } .produkt-chip--fach { background: var(--kr-teal-hauch); color: var(--kr-teal-tief); } /* Details am Ort statt Modal (Entscheid 02.08.2026): auf dem Handy war ein Overlay mit 14 Ausführungen mühsam — jetzt klappt es an der Karte auf. Damit entfällt auch der Overlay-Riegel-Fall von 12.07. an der Wurzel. */ .produkt-details { margin-top: 1.2rem; border-top: 1px solid var(--kr-linie-zart); padding-top: .9rem; } .produkt-details-summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .55rem; font-size: .92rem; font-weight: 600; color: var(--kr-teal-tief); } .produkt-details-summary::-webkit-details-marker { display: none; } .produkt-details-summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s; } .produkt-details[open] .produkt-details-summary::before { transform: rotate(45deg); } .produkt-details-inhalt { margin-top: 1.1rem; display: grid; gap: 1.3rem; } .produkt-feld-titel { font-family: var(--kr-schrift); font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--kr-text-leise); margin: 0 0 .55rem; } .produkt-farbleiste img { width: 100%; max-width: 26rem; border-radius: 6px; display: block; } /* Die Ausführungs-Kacheln behalten ihre Klassennamen (product-modal-ausf-*): das JS erzeugt sie und tests/js/meine_beratung_polish_dom.test.js prüft sie. Geändert hat sich der ORT (Karte statt Overlay), nicht der Vertrag. */ .product-modal-ausf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .6rem; } .product-modal-ausf-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; border: 1px solid var(--kr-linie); border-radius: var(--kr-radius-klein); padding: .6rem .5rem; background: #FAFCFE; box-shadow: none; } /* R1 (20.07.2026): Kacheln ohne Piktogramm tragen lange HiMi-Nummernketten — sie dürfen umbrechen, statt das Raster zu sprengen. */ .product-modal-ausf-tile--text { padding: .6rem .7rem; } .product-modal-ausf-tile img { width: 100%; max-width: 44px; height: auto; object-fit: contain; margin-inline: auto; display: block; /* Kontrast-Fix statt Asset-Anfassen: die IFU-Piktogramme sind hellgraue Strichzeichnungen — nachdunkeln rein per CSS (Christophs Befund 30.07.). */ filter: contrast(1.3) brightness(0.82); } .product-modal-ausf-code { display: block; margin-top: .35rem; font-family: var(--kr-schrift-titel); font-weight: 700; font-size: .92rem; color: var(--kr-navy); overflow-wrap: break-word; } .product-modal-ausf-numbers { display: block; margin-top: .2rem; font-size: .68rem; line-height: 1.4; color: var(--kr-text-leise); font-variant-numeric: tabular-nums; word-break: break-word; } /* --------------------------------------------------------------------------- 9. Anziehen — Befund 3: Bild und Text nebeneinander statt fünf Spalten --------------------------------------------------------------------------- */ /* Folgt der Mittelachse der Sektionsueberschrift (Variante C) -- linksbuendig haengte der Untertitel unter dem zentrierten Kopf in der Luft. */ .anziehen-titel { font-family: var(--kr-schrift-titel); font-size: 1.02rem; font-weight: 700; color: var(--kr-navy); text-align: center; margin: 0 0 .9rem; } .anziehen-schritte { list-style: none; margin: 0 0 0; padding: 0; display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); } /* Anleitungen ganz ohne Zeichnungen bleiben einspaltig (reiner Textfall). */ .anziehen-schritte.nur-text { grid-template-columns: 1fr; } .anziehen-schritt { position: relative; display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 1.1rem; align-items: center; flex-direction: unset; background: var(--kr-karte); border: 1px solid var(--kr-linie); border-radius: var(--kr-radius-klein); padding: .85rem 1.1rem; } /* Schritt 1 hat in der IFU keine Zeichnung — er bekommt die volle Zeile, damit daneben keine Lücke klafft und die Reihenfolge lesbar bleibt. */ .anziehen-schritte:not(.nur-text) .anziehen-schritt:first-child { grid-column: 1 / -1; } .anziehen-schritte.nur-text .anziehen-schritt { grid-template-columns: 2.8rem minmax(0, 1fr); padding: .75rem 1.1rem; } /* Ohne Zeichnung trägt die Ziffer die erste Spalte. */ .anziehen-nr { position: static; grid-column: 1; grid-row: 1; width: 100%; height: auto; display: grid; place-items: center; background: none; color: var(--kr-teal); border-radius: 0; font-family: var(--kr-schrift-titel); font-weight: 800; font-size: 1.5rem; font-variant-numeric: tabular-nums; } /* Mit Zeichnung: das Bild füllt die erste Spalte, die Ziffer wird zur kleinen Marke an seiner Ecke. */ .anziehen-schritt:has(.anziehen-bild) .anziehen-nr { position: absolute; top: .55rem; left: .6rem; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--kr-teal); color: #fff; font-size: .8rem; z-index: 1; } .anziehen-bild { grid-column: 1; grid-row: 1; width: 4.6rem; height: 4.6rem; aspect-ratio: auto; border-radius: 8px; background: #F1F6FA; display: grid; place-items: center; overflow: hidden; } .anziehen-bild img { width: 100%; height: 100%; object-fit: contain; } .anziehen-text { grid-column: 2; grid-row: 1; margin: 0; font-size: 1.01rem; line-height: 1.55; color: #2E4159; } .anziehen-tipps { margin: 1.3rem 0 0; background: var(--kr-teal-hauch); border-radius: var(--kr-radius-klein); padding: 1rem 1.2rem; } .anziehen-tipps-label { font-family: var(--kr-schrift); font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--kr-teal-tief); margin: 0 0 .6rem; } .anziehen-tipps-liste { list-style: none; display: flex; flex-direction: column; gap: .55rem; padding: 0; margin: 0; } .anziehen-tipps-liste li { position: relative; padding-left: 1.7rem; font-size: .97rem; color: #2E4159; } .anziehen-tipps-liste li::before { content: ""; position: absolute; left: 0; top: .42em; width: .95rem; height: .5rem; border-left: 2px solid var(--kr-teal-tief); border-bottom: 2px solid var(--kr-teal-tief); transform: rotate(-45deg); } /* Die Quelle ist Pflicht, keine Deko — medizinische Anleitung, kein Werbetext (dieselbe Regel wie am Kiosk, s. display-web/web/app.js renderAnziehen). */ .anziehen-quelle { margin-top: 1rem; padding-top: 0; border-top: 0; font-size: .81rem; line-height: 1.55; color: var(--kr-text-leise); max-width: var(--kr-spalte); } /* --------------------------------------------------------------------------- 10. Pflege — Befund 4: die Überschrift ist keine Häkchen-Zeile --------------------------------------------------------------------------- */ .care-tips-list { list-style: none; display: grid; gap: 0; margin: 0; padding: 0; } .care-tips-list li { display: grid; grid-template-columns: 1.35rem 1fr; gap: .8rem; align-items: start; padding: .7rem 0; background: none; border-radius: 0; border-top: 1px solid var(--kr-linie-zart); } .care-tips-list li:first-child { border-top: 0; } .care-tips-list li::before { content: ""; width: 1.05rem; height: .55rem; margin-top: .42em; background: none; border-left: 2.2px solid var(--kr-teal); border-bottom: 2.2px solid var(--kr-teal); border-radius: 0; transform: rotate(-45deg); } /* Der Einleitungssatz ("So bleibt Ihre Versorgung lange wirksam …") ist eine ÜBERSCHRIFT, kein Pflegepunkt — kein Häkchen, keine Trennlinie. */ .care-tips-list li.care-tip-intro { display: block; border-top: 0; padding: 0 0 .9rem; font-size: 1.06rem; font-weight: 600; color: var(--kr-navy); } .care-tips-list li.care-tip-intro::before { content: none; } /* T2 (06.07.2026): optionales Bild je Pflegehinweis. */ .care-tips-list li.care-tip-with-image { grid-template-columns: 1.35rem auto 1fr; } .care-tips-list li.care-tip-with-image::before { content: ""; } .care-tip-image { width: 4rem; height: 4rem; object-fit: cover; border-radius: 6px; } /* --------------------------------------------------------------------------- 11. Folgeversorgung --------------------------------------------------------------------------- */ .follow-up-card { display: block; background: var(--kr-karte); border: 1px solid var(--kr-linie); border-left: 3px solid var(--kr-bernstein); border-radius: var(--kr-radius); padding: clamp(1.1rem, 3vw, 1.5rem); box-shadow: var(--kr-schatten); } .follow-up-date { display: block; font-family: var(--kr-schrift-titel); font-weight: 800; font-size: clamp(1.3rem, 1rem + 1.3vw, 1.7rem); letter-spacing: -.018em; color: var(--kr-navy); line-height: 1.2; } .follow-up-note { margin: .6rem 0 0; font-size: 1rem; color: #3A4D66; } .follow-up-disclaimer { margin: .9rem 0 0; font-size: .84rem; color: var(--kr-text-leise); } /* --------------------------------------------------------------------------- 12. Nachtrag (v22/AP4) — erscheint nur bei offener Lücke --------------------------------------------------------------------------- */ .nachtrag-card { display: block; background: var(--kr-karte); border: 1px dashed var(--kr-teal); border-radius: var(--kr-radius); padding: clamp(1.1rem, 3vw, 1.5rem); box-shadow: none; } .nachtrag-intro { margin: 0 0 1rem; font-size: 1rem; color: #3A4D66; } .nachtrag-products { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; } .nachtrag-product { padding: .55rem 1rem; border-radius: 100px; border: 1px solid var(--kr-linie); background: #FAFCFE; color: var(--kr-navy); font-family: var(--kr-schrift); font-size: .92rem; font-weight: 600; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; } .nachtrag-product:hover { border-color: var(--kr-teal); } .nachtrag-product.selected { background: var(--kr-teal-tief); border-color: var(--kr-teal-tief); color: #fff; } .nachtrag-msg { margin: 0 0 .8rem; font-size: .92rem; font-weight: 600; color: var(--kr-teal-tief); } .nachtrag-msg--error { color: #B4402C; } .nachtrag-submit:disabled { opacity: .5; cursor: not-allowed; } .nachtrag-hint { margin: .8rem 0 0; font-size: .84rem; color: var(--kr-text-leise); } /* --------------------------------------------------------------------------- 13. Abschluss und Aktionen --------------------------------------------------------------------------- */ /* Abschluss-Block (Uplift-Punkt d, 30.07.2026) — ehrlicher Handlungs- Abschluss OHNE Termin-CTA: das Backend kennt keine Filiale pro Session, ein Buchungsknopf wäre vorgetäuscht (Christophs Entscheid 27.07.). */ .beratung-abschluss { display: block; margin-top: 2.4rem; background: linear-gradient(180deg, var(--kr-teal-hauch) 0%, #E4F1EF 100%); border-radius: var(--kr-radius); padding: clamp(1.3rem, 3.5vw, 1.9rem); } .beratung-abschluss-info { margin: 0; background: none; border-radius: 0; padding: 0; font-size: 1rem; line-height: 1.6; color: #2E4159; } .beratung-abschluss-info strong { display: block; font-family: var(--kr-schrift-titel); font-size: 1.16rem; color: var(--kr-navy); margin-bottom: .35rem; } .beratung-abschluss-link { align-self: flex-start; margin-top: .9rem; background: none; border: 0; border-bottom: 0; padding: 0; font-family: var(--kr-schrift); font-size: .95rem; font-weight: 600; color: var(--kr-teal-tief); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; } .beratung-abschluss-link:hover, .beratung-abschluss-link:focus-visible { color: var(--kr-navy); border-bottom-color: transparent; outline: none; } .result-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; padding-top: 0; border-top: 0; } /* Knöpfe: die Seite erbt .cta-button aus styles.css — hier wird nur die Farbe auf die Marke gezogen, damit das Orange der alten Palette nicht durchschlägt. */ .seite-beratung .cta-button { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; background: var(--kr-navy); color: #fff; border: 1px solid transparent; border-radius: 100px; padding: .72rem 1.3rem; font-family: var(--kr-schrift); font-size: .96rem; font-weight: 600; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; } .seite-beratung .cta-button:hover { background: #102C4E; } .seite-beratung .secondary-button { background: transparent; color: var(--kr-navy); border-color: var(--kr-linie); } .seite-beratung .secondary-button:hover { background: transparent; border-color: var(--kr-navy); color: var(--kr-navy); } /* ICS-Download: primäre Aktion der Folgeversorgungs-Karte — Teal statt Navy, damit sie sich vom Druck-Knopf abhebt, ohne werblich zu wirken (Konzept F4). */ .seite-beratung .follow-up-ics-button { margin-top: 1rem; background: var(--kr-teal-tief); } .seite-beratung .follow-up-ics-button:hover { background: #23695F; } .seite-beratung .nachtrag-submit { background: var(--kr-teal-tief); } .seite-beratung .nachtrag-submit:hover { background: #23695F; } /* --------------------------------------------------------------------------- 14. Fehlerzustand — sitzt auf dem dunklen Passkopf --------------------------------------------------------------------------- */ .session-error { margin: 1.8rem 0 0; max-width: 34rem; text-align: left; padding: clamp(1.3rem, 3.5vw, 1.9rem); background: rgba(11, 32, 58, .5); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--kr-radius); color: #D8E4F0; animation: kr-auf .4s ease-out; } .error-icon { font-size: 1.7rem; margin-bottom: .4rem; } .error-title { color: #fff; font-size: 1.24rem; font-weight: 700; margin-bottom: .5rem; } .error-message { font-size: 1rem; color: #C3D6EA; margin-bottom: 1rem; } .error-hints { background: rgba(255, 255, 255, .07); border-radius: var(--kr-radius-klein); padding: 1rem 1.2rem; margin-bottom: 1.2rem; text-align: left; } .error-hints p { color: #fff; font-weight: 600; font-size: .93rem; margin-bottom: .5rem; } .error-hints ul { list-style: none; display: flex; flex-direction: column; gap: .3rem; } .error-hints li { position: relative; padding-left: 1.1rem; font-size: .89rem; color: #A8BDD4; } .error-hints li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--kr-teal); } .session-error .cta-button { background: #fff; color: var(--kr-navy); } .session-error .cta-button:hover { background: #E7EEF6; } /* --------------------------------------------------------------------------- 15. Zusicherungen (früher drei „info-card"-Kacheln mit Emoji) --------------------------------------------------------------------------- */ .info-section { background: transparent; border-top: 1px solid var(--kr-linie); margin-top: 2.6rem; padding: 1.8rem 0 2.4rem; } .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.1rem; max-width: none; margin: 0; } .info-card { display: grid; grid-template-columns: 1.5rem 1fr; gap: .7rem; align-items: start; background: none; border-radius: 0; padding: 0; text-align: left; box-shadow: none; } .info-card:hover { transform: none; box-shadow: none; } .info-icon { font-size: 1.2rem; color: var(--kr-text-leise); margin: .1rem 0 0; } .info-title { font-size: .93rem; font-weight: 700; color: var(--kr-navy); margin-bottom: .15rem; } .info-text { font-size: .87rem; color: var(--kr-text-leise); line-height: 1.5; } /* --------------------------------------------------------------------------- 16. Druck — die Seite hat einen Druck-Knopf, also gehört sie gesetzt --------------------------------------------------------------------------- */ @media print { .header, .pass-sprung, .info-section, .footer, .code-entry-container, .result-actions, .beratung-abschluss, .follow-up-ics-button, .nachtrag-submit, .beratung-context-tag { display: none !important; } .seite-beratung { background: #fff; font-size: 11pt; } .beratung-hero { min-height: auto; background: #fff !important; color: var(--kr-navy); padding-block: 1rem 1rem; } .beratung-header .section-title, .beratung-context-main { color: var(--kr-navy) !important; } .beratung-header .section-tag, .beratung-description { color: #444 !important; } .pass-kenn { background: #F2F5F8; } .pass-kenn dt { color: #444; } .pass-kenn dd, .pass-kenn dd.result-code { color: var(--kr-navy) !important; } .session-result { animation: none; } .result-section { break-inside: avoid; } .product-card, .anziehen-schritt, .follow-up-card, .nachtrag-card { box-shadow: none; break-inside: avoid; } /* Ausgeklappte Details drucken mit, zugeklappte verschwinden GANZ -- inklusive ihrer Aufklapp-Zeile. Auf Papier kann niemand "Farben und Ausführungen ansehen" anklicken; die Zeile wäre eine Aufforderung ins Leere (im Druck-Rendering am 02.08.2026 gesehen). */ .verlauf-details:not([open]), .produkt-details:not([open]) { display: none; } } @media (prefers-reduced-motion: reduce) { .seite-beratung *, .seite-beratung *::before, .seite-beratung *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* --------------------------------------------------------------------------- [hidden] heißt hidden — immer. Christophs Befund 12.07.2026: „Ein nicht zu entfernendes Popup wird hier angezeigt." Ursache: Das Produkt-Modal trug zwar brav das hidden-Attribut (das JS setzt es korrekt), aber .product-modal-overlay { display: flex; ... } hat die Browser-Regel `[hidden] { display: none }` ausgehebelt. Beide haben dieselbe Spezifität — und das Autoren-Stylesheet steht NACH dem des Browsers, also gewinnt `display: flex`. Ergebnis: ein leeres weißes Fenster mit einem Schließen-Knopf, der nichts bewirken kann, über einem dunklen Schleier (position:fixed, inset:0, z-index:100), der die ganze Seite blockiert. Das Modal selbst ist am 02.08.2026 entfallen (die Details klappen jetzt an der Produktkarte auf) — der Riegel bleibt und ist NICHT weniger nötig geworden: er schützt genauso `.beratung-context` (display:block), `.pass-kenndaten` (display:flex), `.anziehen-tipps`, `.follow-up-card`, `.nachtrag-card` und jede künftige display-Regel auf einem Element, das das JS über `hidden` schaltet. Davon lebt diese Seite — sie zeigt fast jeden Abschnitt bedingt. !important ist hier bewusst: `hidden` ist eine semantische Zusage des HTML, keine Stilfrage. Kein Layout-Wunsch darf sie überstimmen. --------------------------------------------------------------------------- */ [hidden] { display: none !important; }