/* ========================================================================== corelay - Layout und geteilte Bausteine -------------------------------------------------------------------------- Header, Footer und alle Bausteine, die von mehreren Seiten benutzt werden. Setzt auf css/tokens.css und css/base.css auf. Inhalt 1. Header - Grundgeruest und Sticky-Zustand 2. Logo (Bildzeichen, Wortmarke, Claim) 3. Hauptnavigation 4. Kopf-Button 5. Burger 6. Mobiles Overlay 7. Umschaltpunkt 1024px 8. Footer 9. Newsletter im Footer 10. Seitenkopf der Unterseiten 11. Sektionskoepfe 12. Karten 13. Icon-Kacheln 14. Raster (grid-2 / grid-3 / grid-4) 15. Haekchen-Listen 16. CTA-Band 17. Lesetypo fuer Rechtstexte 18. Formularbausteine ========================================================================== */ /* -------------------------------------------------------------------------- 1. Header - Grundgeruest und Sticky-Zustand -------------------------------------------------------------------------- Der Header liegt transparent ueber dem Hero. Ab 40px Scroll setzt js/main.js die Klasse .is-stuck (Abschnitt 4 der Spezifikation). -------------------------------------------------------------------------- */ .site-header { /* Der Header schwebt UEBER dem Hero, statt Platz im Fluss zu belegen. Nur so bleibt der dunkle Hero-Hintergrund hinter der Kopfzeile sichtbar und die weisse Schrift lesbar. Hero und .page-head rechnen die Header-Hoehe ueber --header-h in ihrem padding-top bereits ein. */ position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header); background-color: transparent; border-bottom: 1px solid transparent; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease); } .site-header.is-stuck { background-color: rgba(8, 12, 22, .82); border-bottom-color: var(--ink-border); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } /* Bei offenem mobilen Menue liegt der Header ueber dem Overlay (Ebenen in css/tokens.css), damit Logo und Burger - dann ein X - erreichbar bleiben. Die Flaeche traegt in diesem Moment das Overlay: der Header gibt seinen eigenen Hintergrund ab, sonst zoege sich ein sichtbares Band aus rgba(8,12,22,.82) ueber das --ink-900 des Menues. js/main.js setzt .is-locked am , solange das Menue offen ist. */ body.is-locked .site-header, body.is-locked .site-header.is-stuck { background-color: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); height: var(--header-h); } /* -------------------------------------------------------------------------- 2. Logo (Bildzeichen, Wortmarke, Claim) -------------------------------------------------------------------------- */ .brand { display: inline-flex; align-items: center; gap: 10px; flex: none; text-decoration: none; color: var(--t-on-dark); } .brand-mark { width: 36px; height: 36px; flex: none; } .brand-text { display: flex; flex-direction: column; justify-content: center; gap: 4px; } .brand-word { font-family: var(--ff-display); font-size: 22px; font-weight: var(--fw-extrabold); line-height: 1; letter-spacing: var(--ls-brand); text-transform: lowercase; color: var(--t-on-dark); } .brand-claim { font-family: var(--ff-body); font-size: 7.5px; font-weight: var(--fw-semibold); line-height: 1; letter-spacing: var(--ls-claim); color: var(--t-on-dark-mute); white-space: nowrap; } /* -------------------------------------------------------------------------- 3. Hauptnavigation -------------------------------------------------------------------------- */ .nav { display: flex; align-items: center; gap: 28px; } .nav a { position: relative; padding-bottom: 6px; font-size: 14px; font-weight: var(--fw-medium); line-height: 1; color: var(--t-on-dark-soft); text-decoration: none; white-space: nowrap; transition: color var(--dur) var(--ease); } .nav a:hover { color: var(--t-on-dark); } /* Aktiver Punkt: weiss plus 2px blauer Unterstrich in Textbreite */ .nav a.is-active { color: var(--t-on-dark); } .nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background-color: var(--blue-500); } /* -------------------------------------------------------------------------- 4. Kopf-Button -------------------------------------------------------------------------- */ .header-cta { flex: none; padding: 11px 20px; font-size: 14px; } /* -------------------------------------------------------------------------- 5. Burger (drei Linien, Animation zum X) -------------------------------------------------------------------------- */ .burger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 44px; flex: none; margin-right: -8px; border-radius: 10px; background: none; } .burger-line { display: block; width: 22px; height: 2px; border-radius: 2px; background-color: var(--t-on-dark); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .burger[aria-expanded="true"] .burger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger[aria-expanded="true"] .burger-line:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] .burger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* -------------------------------------------------------------------------- 6. Mobiles Overlay -------------------------------------------------------------------------- */ .mobile-nav { position: fixed; inset: 0; z-index: var(--z-overlay); display: flex; flex-direction: column; /* „safe center“ zentriert nur, solange der Inhalt passt, und kippt bei Ueberlauf selbsttaetig auf den Anfang. Bei hartem „center“ ragt das Menue auf flachen Schirmen (Telefon im Querformat) oben heraus - und genau dieser Teil laesst sich nicht herunterscrollen. Die Kurzform davor bleibt als Wert fuer Browser stehen, die „safe“ noch nicht kennen; fuer die greift zusaetzlich die Hoehen-Abfrage weiter unten. */ justify-content: center; justify-content: safe center; padding: calc(var(--header-h) + var(--sp-8)) var(--wrap-pad-sm) var(--sp-12); background-color: var(--ink-900); color: var(--t-on-dark); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease), visibility var(--dur-slow) var(--ease); overflow-y: auto; } .mobile-nav[data-open="true"] { opacity: 1; visibility: visible; pointer-events: auto; transform: none; } .mobile-nav-list { display: flex; flex-direction: column; gap: var(--sp-6); margin-bottom: var(--sp-10); } .mobile-nav-list a { font-family: var(--ff-display); font-size: 20px; font-weight: var(--fw-semibold); letter-spacing: -.01em; color: var(--t-on-dark); text-decoration: none; transition: color var(--dur) var(--ease); } .mobile-nav-list a:hover, .mobile-nav-list a.is-active { color: var(--blue-400); } .mobile-nav .btn { align-self: flex-start; } /* Ruecklage fuer Browser ohne „safe“: Der Inhalt des Overlays ist rund 560px hoch. Bleibt weniger Hoehe uebrig, wird von oben gesetzt statt zentriert - erst dadurch sind „Startseite“ und „Leistungen“ im Querformat erreichbar. */ @media (max-height: 620px) { .mobile-nav { justify-content: flex-start; } } /* -------------------------------------------------------------------------- 7. Umschaltpunkt 1024px -------------------------------------------------------------------------- */ @media (max-width: 1023.98px) { .nav, .header-cta { display: none; } .burger { display: inline-flex; } } @media (min-width: 1024px) { .mobile-nav { display: none; } } /* -------------------------------------------------------------------------- 8. Footer (Abschnitt 5.8) -------------------------------------------------------------------------- */ .site-footer { background-color: var(--ink-950); color: var(--t-on-dark-soft); padding-block: clamp(48px, 6vw, 72px); } .footer-grid { display: grid; grid-template-columns: 1.4fr .8fr .8fr .8fr 1.3fr; gap: var(--sp-8); align-items: start; } /* Spalte 1 - Logo, Claim, Copyright */ .footer-brand { display: flex; flex-direction: column; gap: var(--sp-6); align-items: flex-start; } .footer-copy { font-size: 12.5px; line-height: 1.6; color: var(--t-on-dark-mute); } /* Spalten 2 bis 4 - Linklisten */ .footer-col { display: flex; flex-direction: column; gap: 10px; } .footer-title { font-family: var(--ff-display); font-size: 13px; font-weight: var(--fw-bold); line-height: 1.3; letter-spacing: -.01em; color: var(--t-on-dark); margin-bottom: 2px; } /* Spalte 3 traegt keine Ueberschrift, startet aber auf gleicher Hoehe */ .footer-col--headless { padding-top: calc(13px * 1.3 + 2px + 10px); } .footer-links { display: flex; flex-direction: column; gap: 10px; } /* Die Zeilenhoehe allein ergaebe nur 18px Trefferflaeche - zu wenig fuer neun dicht gestapelte Links auf dem Telefon. display:block plus Innenabstand, den eine gleich grosse Negativ-Marge wieder herausrechnet, vergroessert das Ziel auf 28px: Die Flaechen stossen luecken- und ueberlappungsfrei aneinander, der optische Abstand bleibt unveraendert. */ .footer-links a { display: block; padding-block: 5px; margin-block: -5px; font-size: 13px; line-height: 1.4; color: var(--t-on-dark-mute); text-decoration: none; transition: color var(--dur) var(--ease); } .footer-links a:hover { color: var(--t-on-dark); } /* Spalte 5a - Soziale Netzwerke */ .footer-social { display: flex; gap: 10px; } .social-btn { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 1px solid var(--ink-border); border-radius: var(--r-pill); color: var(--t-on-dark-soft); text-decoration: none; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .social-btn .ico { width: 15px; height: 15px; } .social-btn:hover { border-color: var(--blue-500); color: var(--blue-500); } /* Spalte 5 - Stapel aus „Folge uns“ und Newsletter */ .footer-side { display: flex; flex-direction: column; gap: var(--sp-7); } /* -------------------------------------------------------------------------- 9. Newsletter im Footer -------------------------------------------------------------------------- */ .footer-news { display: flex; flex-direction: column; gap: 10px; } .news-title { font-family: var(--ff-display); font-size: 14px; font-weight: var(--fw-bold); line-height: 1.3; letter-spacing: -.01em; color: var(--t-on-dark); } .news-form { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 16px; background-color: var(--ink-850); border: 1px solid var(--ink-border); border-radius: var(--r-input); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } /* Die Pille zeichnet den Fokus zusaetzlich aus - der Fokusring selbst kommt unveraendert aus base.css und wird hier bewusst NICHT abgeschaltet. */ .news-form:focus-within { border-color: var(--blue-500); box-shadow: var(--sh-ring); } .news-input { flex: 1 1 auto; min-width: 0; padding: 6px 0; border: 0; background: transparent; color: var(--t-on-dark); font-size: 13px; line-height: 1.4; } .news-input::placeholder { color: var(--t-on-dark-mute); } .news-send { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: 0; border-radius: var(--r-pill); background-color: var(--blue-500); color: #fff; cursor: pointer; transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .news-send .ico { width: 14px; height: 14px; } .news-send:hover { background-color: var(--blue-600); } .news-send:active { transform: scale(.94); } .news-note { font-size: 11.5px; line-height: 1.55; color: var(--t-on-dark-mute); } /* Handschriftliche Schlusszeile, rechtsbuendig */ .footer-script { margin-top: var(--sp-4); font-family: var(--ff-script); font-size: 22px; font-weight: var(--fw-semibold); line-height: 1.15; text-align: right; color: var(--t-on-dark-soft); } @media (max-width: 1023.98px) { .footer-grid { grid-template-columns: 1.2fr .8fr .8fr .8fr; } .footer-side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--ink-border); } .footer-news { min-width: 280px; flex: 1 1 320px; } .footer-script { text-align: left; } } @media (max-width: 767.98px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-7); } .footer-brand { grid-column: 1 / -1; } .footer-col--headless { padding-top: 0; } } @media (max-width: 479.98px) { .footer-grid { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- 10. Seitenkopf der Unterseiten (Abschnitt 6) -------------------------------------------------------------------------- Wird zusammen mit .bg-dark .dot-grid .glow eingesetzt. -------------------------------------------------------------------------- */ .page-head { padding-top: 150px; padding-bottom: 72px; --glow-x: 78%; --glow-y: -30%; --glow-size: 620px; } .page-head-inner { position: relative; z-index: var(--z-raised); max-width: 720px; } .page-head .eyebrow { color: var(--blue-400); margin-bottom: var(--sp-4); } .page-head .h1 { color: var(--t-on-dark); margin-bottom: var(--sp-5); } .page-head .lead { max-width: 620px; color: var(--t-on-dark-soft); } @media (max-width: 639.98px) { .page-head { padding-top: 124px; padding-bottom: 56px; } } /* -------------------------------------------------------------------------- 11. Sektionskoepfe -------------------------------------------------------------------------- */ .section-head { max-width: var(--head-w); margin: 0 auto var(--sp-12); text-align: center; } /* --blue-600 statt --blue-500: Das Eyebrow ist 12px kleiner Text und braucht 4.5:1. --blue-500 kaeme auf --paper nur auf 3.72:1 und auf --paper-50 auf 3.55:1, --blue-600 dagegen auf 4.90:1 bzw. 4.68:1. Die Headline-Zweitzeile (.accent-on-light) ist Grosstext und bleibt bei --blue-500. */ .section-head .eyebrow { color: var(--blue-600); margin-bottom: var(--sp-3); } .section-head .h2 { margin-bottom: var(--sp-4); } .section-head .lead { color: var(--t-on-light-soft); } /* Auf dunklem Grund */ .section-head--dark .eyebrow { color: var(--blue-400); } .section-head--dark .h2 { color: var(--t-on-dark); } .section-head--dark .lead { color: var(--t-on-dark-soft); } /* Zweispaltig: Text links, Button rechts unten ausgerichtet */ .section-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-8); max-width: none; margin-inline: 0; text-align: left; } .section-head--split .section-head-text { max-width: 620px; } .section-head--split .section-head-aside { flex: none; padding-bottom: 4px; } @media (max-width: 767.98px) { .section-head { margin-bottom: var(--sp-10); } .section-head--split { flex-direction: column; align-items: flex-start; gap: var(--sp-6); } .section-head--split .section-head-aside { padding-bottom: 0; } } /* -------------------------------------------------------------------------- 12. Karten -------------------------------------------------------------------------- */ .card { display: flex; flex-direction: column; padding: 26px; background-color: var(--paper); border: 1px solid var(--paper-200); border-radius: var(--r-card); box-shadow: var(--sh-card); color: var(--t-on-light); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .card .card-title { margin-bottom: 8px; } .card p { color: var(--t-on-light-soft); font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); } @media (hover: hover) { .card:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); border-color: var(--blue-a18); } } .card:focus-within { border-color: var(--blue-a18); } /* Karte auf dunklem Grund */ .card-dark { display: flex; flex-direction: column; padding: 22px; background-color: var(--ink-850); border: 1px solid var(--ink-border); border-radius: var(--r-card); color: var(--t-on-dark); transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .card-dark .card-title { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--t-on-dark); margin-bottom: 6px; } .card-dark p { font-size: 13px; line-height: 1.6; color: var(--t-on-dark-mute); } @media (hover: hover) { .card-dark:hover { background-color: var(--ink-800); } } /* -------------------------------------------------------------------------- 13. Icon-Kacheln -------------------------------------------------------------------------- */ .icon-tile { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: var(--r-tile); background-color: var(--blue-50); color: var(--blue-500); } .icon-tile .ico { width: 22px; height: 22px; } /* Kleine Variante, z. B. in den Prozess-Karten */ .icon-tile--sm { width: 38px; height: 38px; } .icon-tile--sm .ico { width: 19px; height: 19px; } /* Kachel auf dunklem Grund */ .icon-tile--dark { width: 42px; height: 42px; background-color: var(--blue-a14); color: var(--blue-400); } .icon-tile--dark .ico { width: 20px; height: 20px; } /* -------------------------------------------------------------------------- 14. Raster -------------------------------------------------------------------------- */ .grid-2, .grid-3, .grid-4 { display: grid; gap: 22px; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1023.98px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767.98px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 639.98px) { .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } } /* -------------------------------------------------------------------------- 15. Haekchen-Listen -------------------------------------------------------------------------- Das Haekchen steckt als Inline-SVG (Data-URI) im ::before - keine externe Datei, kein zusaetzlicher Request. -------------------------------------------------------------------------- */ .check-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } .check-list li { position: relative; padding-left: 30px; font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--t-on-light-soft); } .check-list li::before { content: ""; position: absolute; left: 0; top: .12em; 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 20 20' fill='none' stroke='%232F80FF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='8.4'/%3E%3Cpath d='m6.4 10.3 2.4 2.4 4.8-5'/%3E%3C/svg%3E"); } /* Variante fuer dunkle Sektionen */ .check-list--dark li { color: var(--t-on-dark-soft); } .check-list--dark li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234A9EFF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='8.4'/%3E%3Cpath d='m6.4 10.3 2.4 2.4 4.8-5'/%3E%3C/svg%3E"); } /* Zweispaltige Variante fuer laengere Leistungslisten */ @media (min-width: 768px) { .check-list--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-8); } } /* -------------------------------------------------------------------------- 16. CTA-Band (dunkler Abschluss jeder Unterseite) -------------------------------------------------------------------------- */ .cta-band { padding-block: clamp(56px, 6vw, 84px); text-align: center; --glow-x: 50%; --glow-y: -40%; --glow-size: 720px; } .cta-band-inner { position: relative; z-index: var(--z-raised); max-width: var(--head-w); margin-inline: auto; } .cta-band .h2 { color: var(--t-on-dark); margin-bottom: var(--sp-4); } .cta-band p { max-width: 560px; margin-inline: auto; color: var(--t-on-dark-soft); margin-bottom: var(--sp-8); } .cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); } @media (max-width: 479.98px) { .cta-actions .btn { width: 100%; } } /* -------------------------------------------------------------------------- 17. Lesetypo fuer Rechtstexte -------------------------------------------------------------------------- */ .prose { max-width: var(--prose-w); margin-inline: auto; color: var(--t-on-light-soft); font-size: var(--fs-body); line-height: var(--lh-body); } .prose > * + * { margin-top: var(--sp-4); } .prose h2 { font-family: var(--ff-display); font-size: 1.375rem; font-weight: var(--fw-bold); line-height: 1.3; letter-spacing: -.02em; color: var(--t-on-light); margin-top: var(--sp-10); } .prose h3 { font-family: var(--ff-display); font-size: 1.0625rem; font-weight: var(--fw-bold); line-height: 1.35; letter-spacing: -.01em; color: var(--t-on-light); margin-top: var(--sp-7); } .prose > h2:first-child, .prose > h3:first-child { margin-top: 0; } .prose a { color: var(--blue-600); text-decoration: underline; } /* Im Hover wird der Link dunkler statt heller: --blue-500 faellt auf --paper auf 3.72:1 zurueck, --blue-700 haelt 5.91:1 und bleibt gegenueber dem Ruhezustand (--blue-600) deutlich unterscheidbar. */ .prose a:hover { color: var(--blue-700); } .prose ul, .prose ol { padding-left: 22px; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li + li { margin-top: 6px; } .prose li::marker { color: var(--t-on-light-mute); } .prose table { font-size: var(--fs-body-sm); border: 1px solid var(--paper-200); border-radius: var(--r-faq); overflow: hidden; } .prose th, .prose td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--paper-200); } .prose th { background-color: var(--paper-100); color: var(--t-on-light); font-weight: var(--fw-semibold); } .prose tr:last-child td { border-bottom: 0; } .prose blockquote { padding-left: var(--sp-5); border-left: 2px solid var(--paper-200); color: var(--t-on-light-mute); } /* Waagerecht scrollbare Tabellenhuelle, damit ab 320px nichts ueberlaeuft */ .prose-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* -------------------------------------------------------------------------- 18. Formularbausteine -------------------------------------------------------------------------- */ .field { display: grid; gap: 8px; } .field + .field, .field + .checkbox-row, .checkbox-row + .field { margin-top: var(--sp-4); } .field > label { font-size: 13.5px; font-weight: var(--fw-semibold); line-height: 1.3; color: var(--t-on-light); } .field .field-hint { font-size: var(--fs-micro); color: var(--t-on-light-mute); } .field input, .field textarea, .field select { width: 100%; padding: 12px 14px; border: 1px solid var(--paper-200); border-radius: var(--r-field); background-color: var(--paper); color: var(--t-on-light); font-family: var(--ff-body); font-size: var(--fs-body-sm); line-height: 1.5; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .field textarea { min-height: 132px; line-height: var(--lh-body); } .field select { -webkit-appearance: none; appearance: none; padding-right: 40px; background-repeat: no-repeat; background-position: right 14px center; background-size: 14px 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234A5A72' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); } .field input::placeholder, .field textarea::placeholder { color: var(--t-on-light-mute); } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--blue-500); box-shadow: var(--sh-ring); } .field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--danger); background-color: var(--danger-soft); } /* Fehlermeldung unter dem Feld - sichtbar erst per [data-visible] aus main.js */ .field-error { display: none; margin: 0; font-size: 12.5px; line-height: 1.45; font-weight: var(--fw-medium); color: var(--danger); } .field-error[data-visible] { display: block; } /* Checkbox-Zeile (Datenschutz-Einwilligung) */ .checkbox-row { display: flex; align-items: flex-start; gap: 10px; } .checkbox-row input[type="checkbox"] { width: 18px; height: 18px; flex: none; margin: 2px 0 0; accent-color: var(--blue-500); cursor: pointer; } .checkbox-row label { font-size: 13px; line-height: 1.55; color: var(--t-on-light-soft); cursor: pointer; } .checkbox-row a { color: var(--blue-600); text-decoration: underline; } /* Formularblock auf dunklem Grund */ .form-dark .field > label { color: var(--t-on-dark); } .form-dark .field input, .form-dark .field textarea, .form-dark .field select { background-color: var(--ink-850); border-color: var(--ink-border); color: var(--t-on-dark); } .form-dark .checkbox-row label { color: var(--t-on-dark-soft); }