/* GenerationKlick – Gemeinsames Stylesheet */ /* Corporate Design "Der smarte Begleiter" – Petrol, Koralle, Soft Design */ /* Barrierefreiheit für Senioren: Große Schrift, hoher Kontrast, ruhiges Layout */ /* Schriften: Montserrat (Überschriften) + Open Sans (Fließtext). Lokal gehostet aus /schriften/ – KEIN externer Google-Abruf mehr (DSGVO: es wird keine IP-Adresse mehr an Google übertragen). Nur die tatsächlich genutzten Schnitte, als schlanke woff-Dateien. */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('schriften/montserrat-600.woff') format('woff'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('schriften/montserrat-700.woff') format('woff'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('schriften/montserrat-800.woff') format('woff'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('schriften/opensans-400.woff') format('woff'); } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('schriften/opensans-400italic.woff') format('woff'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('schriften/opensans-500.woff') format('woff'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('schriften/opensans-600.woff') format('woff'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('schriften/opensans-700.woff') format('woff'); } :root { /* Markenfarben Konzept 1 */ --cd-petrol: #008080; --cd-petrol-tief: #006666; --cd-petrol-hell: #e6f2f2; --cd-koralle: #F08080; --cd-koralle-tief: #e06868; --cd-schiefer: #34495e; /* Bestehende Variablennamen – auf neue Palette gemappt */ --farbe-hintergrund: #fcfbfa; --farbe-text: #34495e; --farbe-ueberschrift: #008080; --farbe-akzent: #F08080; --farbe-hinweis-hintergrund: #e6f2f2; --farbe-hinweis-rahmen: #008080; --farbe-warnung-hintergrund: #fdeeea; --farbe-warnung-rahmen: #e06868; --farbe-tipp-hintergrund: #eef5f5; --farbe-tipp-rahmen: #008080; --farbe-navigation: #fcfbfa; --farbe-navigation-text: #34495e; --schrift-basis: 18px; --schrift-gross: 1.3rem; --schrift-ueberschrift: 1.6rem; --schrift-titel: 2.1rem; --zeilenabstand: 1.75; --max-breite: 880px; /* Soft-Design-Token */ --cd-radius: 18px; --cd-radius-gross: 26px; --cd-schatten: 0 6px 24px -10px rgba(52, 73, 94, 0.18); --cd-schatten-soft: 0 3px 14px -6px rgba(52, 73, 94, 0.14); --cd-rahmen: #e8e6e3; } /* ============================================= HOCHKONTRAST-MODUS (gelb auf schwarz) ============================================= */ body.hochkontrast { --farbe-hintergrund: #000000; --farbe-text: #ffff00; --farbe-ueberschrift: #ffff00; --farbe-akzent: #ffff00; --farbe-hinweis-hintergrund: #111111; --farbe-hinweis-rahmen: #ffff00; --farbe-warnung-hintergrund: #111111; --farbe-warnung-rahmen: #ff9900; --farbe-tipp-hintergrund: #111111; --farbe-tipp-rahmen: #ffff00; --farbe-navigation: #0c0c0c; --farbe-navigation-text: #ffff00; --cd-rahmen: #ffff00; --cd-schatten: none; --cd-schatten-soft: none; background-color: #000000; color: #ffff00; } /* Brücke gegen weißes Aufblitzen: das Inline-Kopf-Skript setzt vor dem Rendern .hochkontrast-pre auf , bis barrierefreiheit.js die volle Kontrast-Darstellung (body.hochkontrast) übernimmt. */ html.hochkontrast-pre, html.hochkontrast-pre body { background: #000 !important; color: #ffff00 !important; } body.hochkontrast a { color: #ffff00; } body.hochkontrast h2, body.hochkontrast h3 { color: #ffff00; } body.hochkontrast nav.hauptnavigation { border-bottom: 3px solid #ffff00; background-color: #0c0c0c; } body.hochkontrast nav.hauptnavigation .logo { color: #ffff00; } body.hochkontrast .nav-schaltflaeche { background-color: #222; border: 2px solid #ffff00; color: #ffff00; } body.hochkontrast .nav-schaltflaeche:hover { background-color: #444; } body.hochkontrast .analogie { background-color: #111; border-color: #ffff00; color: #ffff00; } body.hochkontrast .analogie::before { color: #ff9900; } body.hochkontrast .einleitung { background-color: #111; color: #ffff00; border-color: #ffff00; } body.hochkontrast ol.schritte li { background-color: #111; border: 1px solid #444; } body.hochkontrast ol.schritte li::before { background-color: #333; border: 2px solid #ffff00; color: #ffff00; } body.hochkontrast .teil-karte { border-color: #ffff00; background-color: #000; } body.hochkontrast .willkommen { background: #111 !important; border: 2px solid #ffff00; } body.hochkontrast .willkommen h1, body.hochkontrast .willkommen p { color: #ffff00 !important; opacity: 1; } body.hochkontrast .versprechen { background-color: #111; border-color: #ffff00; } body.hochkontrast .fortschrittsbalken-huelle { background-color: #333; border: 1px solid #ffff00; } body.hochkontrast .fortschrittsbalken-fuell { background-color: #ffff00; background-image: none; } body.hochkontrast .fortschritt-info { color: #ffff00; } body.hochkontrast .lesezeit-badge { background-color: #222; color: #ffff00; border: 1px solid #ffff00; } body.hochkontrast .kapitel-kopf { border-color: #ffff00; } body.hochkontrast .einstieg-box { background: #111; border-color: #ffff00; } body.hochkontrast .einstieg-box h2, body.hochkontrast .einstieg-box p { color: #ffff00; } body.hochkontrast .einstieg-schaltflaeche { background-color: #333; border: 2px solid #ffff00; color: #ffff00; } body.hochkontrast ul.liste li { border-color: #333; } body.hochkontrast ul.liste li::before { color: #ffff00; } body.hochkontrast .merksatz { background-color: #111; border-color: #ff9900; color: #ffff00; } body.hochkontrast .merksatz-titel { color: #ff9900; } body.hochkontrast .teil-buchstabe, body.hochkontrast .teil-karte .teil-buchstabe { background-color: #0c0c0c; border: 2px solid #ffff00; color: #ffff00; } * { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: var(--schrift-basis); scroll-behavior: smooth; } body { font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif; background-color: var(--farbe-hintergrund); color: var(--farbe-text); line-height: var(--zeilenabstand); max-width: var(--max-breite); margin: 0 auto; padding: 0 24px 60px 24px; -webkit-font-smoothing: antialiased; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ============================================= VOLLBREITEN-MODUS (Landingpage & Kurs-Übersicht) Hebt die schmale Lesespalte auf. Diese Seiten bringen eigene innere Container (.inhalt-breit) mit, die den Inhalt großzügig, aber nicht endlos breit zentrieren. ============================================= */ body.voll-breite { max-width: none; padding-left: 0; padding-right: 0; padding-bottom: 0; --rand: 48px; /* seitlicher Rand der breiten Bahnen */ --bahn: 1480px; /* maximale Bahnbreite auf großen Schirmen */ } @media (max-width: 900px) { body.voll-breite { --rand: 28px; } } @media (max-width: 600px) { body.voll-breite { --rand: 18px; } } /* ============================================= KURS- & USE-CASE-SEITEN: gleiche großzügige Breite wie die übrigen Seiten. Der Inhalt liegt hier direkt im (ohne eigenen .inhalt-breit-Container), darum zentriert der selbst die breite Bahn. Das behebt auch den umbrechenden Kopf: Logo, Navigation und Barrierefreiheits-Werkzeuge haben in der breiten Bahn wieder in einer Zeile Platz und verdecken nicht mehr die erste Überschrift. (kurse.html/register.html sind bereits .voll-breite und bleiben durch :not(.voll-breite) unberührt.) ============================================= */ body[data-gk-schutz]:not(.voll-breite) { --rand: 48px; --bahn: 1480px; max-width: var(--bahn); padding-left: var(--rand); padding-right: var(--rand); } @media (max-width: 900px) { body[data-gk-schutz]:not(.voll-breite) { --rand: 28px; } } @media (max-width: 600px) { body[data-gk-schutz]:not(.voll-breite) { --rand: 18px; } } body[data-gk-schutz]:not(.voll-breite) .kopf-bahn { max-width: var(--bahn); padding-left: var(--rand); padding-right: var(--rand); } /* Innerer Container: nutzt die Breite, deckelt aber bei sehr großen Bildschirmen für angenehme Zeilenlängen. */ body.voll-breite .inhalt-breit { width: 100%; max-width: var(--bahn); margin: 0 auto; padding-left: var(--rand); padding-right: var(--rand); } /* Navigation oben */ nav.hauptnavigation { background-color: var(--farbe-navigation); color: var(--farbe-navigation-text); padding: 14px 0; margin: 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--cd-rahmen); } nav.hauptnavigation a { color: var(--cd-petrol); text-decoration: none; font-size: 0.9rem; font-weight: 600; padding: 12px 18px; border-radius: 14px; border: 2px solid transparent; min-height: 52px; display: inline-flex; align-items: center; transition: background-color .2s ease, border-color .2s ease; } nav.hauptnavigation a:hover, nav.hauptnavigation a:focus { background-color: var(--cd-petrol-hell); border-color: var(--cd-petrol); outline: none; } body.hochkontrast nav.hauptnavigation a:hover, body.hochkontrast nav.hauptnavigation a:focus { background-color: #1a1a1a; } nav.hauptnavigation a.logo { font-family: 'Montserrat', sans-serif; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.5px; color: var(--cd-schiefer); margin-right: auto; padding: 8px 4px; border: none; min-height: 0; } nav.hauptnavigation a.logo:hover, nav.hauptnavigation a.logo:focus { background-color: transparent; border-color: transparent; color: var(--cd-petrol-tief); } body.hochkontrast nav.hauptnavigation a.logo:hover, body.hochkontrast nav.hauptnavigation a.logo:focus { background-color: transparent; } /* aktiver Navigationspunkt */ nav.hauptnavigation a[aria-current="page"] { background-color: var(--cd-petrol-hell); border-color: var(--cd-petrol); color: var(--cd-petrol-tief); } body.hochkontrast nav.hauptnavigation a[aria-current="page"] { background-color: #1a1a1a; border-color: #ffff00; color: #ffff00; } /* Kapitel-Kopf */ .kapitel-kopf { border-bottom: 3px solid var(--cd-petrol-hell); padding-top: 32px; margin-bottom: 40px; padding-bottom: 22px; } .kapitel-nummer { font-family: 'Montserrat', sans-serif; font-size: 0.7rem; font-weight: 700; color: var(--cd-petrol); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; } h1 { font-family: 'Montserrat', sans-serif; font-size: var(--schrift-titel); font-weight: 800; color: var(--cd-schiefer); line-height: 1.15; letter-spacing: -1px; margin-bottom: 14px; } body.hochkontrast h1 { color: #ffff00; } h2 { font-family: 'Montserrat', sans-serif; font-size: var(--schrift-gross); font-weight: 700; color: var(--farbe-ueberschrift); margin-top: 48px; margin-bottom: 16px; padding-left: 16px; border-left: 5px solid var(--farbe-akzent); letter-spacing: -0.4px; } h3 { font-family: 'Montserrat', sans-serif; font-size: 1.1rem; color: var(--cd-schiefer); margin-top: 32px; margin-bottom: 12px; font-weight: 700; } body.hochkontrast h3 { color: #ffff00; } p { font-size: 1rem; margin-bottom: 20px; } /* Einleitung / Einführungstext */ .einleitung { font-size: 1.05rem; color: var(--cd-schiefer); border-left: 6px solid var(--cd-petrol); padding: 20px 24px; background-color: var(--cd-petrol-hell); margin-bottom: 40px; border-radius: 0 var(--cd-radius) var(--cd-radius) 0; } body.hochkontrast .einleitung { color: #ffff00; } /* Hinweis-Boxen */ .hinweis, .warnung, .tipp, .merksatz { padding: 22px 26px; border-radius: var(--cd-radius); margin: 32px 0; border-left: 6px solid; box-shadow: var(--cd-schatten-soft); } .hinweis { background-color: var(--farbe-hinweis-hintergrund); border-color: var(--farbe-hinweis-rahmen); } .warnung { background-color: var(--farbe-warnung-hintergrund); border-color: var(--farbe-warnung-rahmen); } .tipp { background-color: var(--farbe-tipp-hintergrund); border-color: var(--farbe-tipp-rahmen); } .merksatz { background-color: #fdeeea; border-color: var(--cd-koralle); font-size: 1.05rem; font-weight: 600; } .hinweis-titel, .warnung-titel, .tipp-titel, .merksatz-titel { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.8rem; display: block; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; } .hinweis-titel { color: var(--cd-petrol-tief); } .warnung-titel { color: var(--cd-koralle-tief); } .tipp-titel { color: var(--cd-petrol-tief); } .merksatz-titel { color: var(--cd-koralle-tief); } /* Schritt-für-Schritt Listen */ ol.schritte { list-style: none; counter-reset: schritt; padding: 0; } ol.schritte li { counter-increment: schritt; display: flex; gap: 20px; align-items: flex-start; margin-bottom: 20px; padding: 22px 24px; background-color: #ffffff; border: 1px solid var(--cd-rahmen); border-radius: var(--cd-radius); box-shadow: var(--cd-schatten-soft); } ol.schritte li::before { content: counter(schritt); background-color: var(--cd-petrol); color: white; width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 800; flex-shrink: 0; } ul.liste { list-style: none; padding: 0; } ul.liste li { padding: 12px 0 12px 34px; position: relative; border-bottom: 1px solid var(--cd-rahmen); font-size: 1rem; } ul.liste li::before { content: "✓"; position: absolute; left: 0; top: 12px; color: var(--cd-petrol); font-weight: bold; font-size: 1rem; } /* Analogie-Box */ .analogie { background-color: #fff6f0; border: 2px dashed var(--cd-koralle); border-radius: var(--cd-radius); padding: 22px 26px; margin: 32px 0; font-style: italic; font-size: 1rem; color: var(--cd-schiefer); } .analogie::before { content: "💡 Zum besseren Verständnis: "; font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 700; color: var(--cd-koralle-tief); display: block; margin-bottom: 8px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; } /* Navigation zwischen Kapiteln */ .kapitel-navigation { display: flex; justify-content: space-between; margin-top: 60px; padding-top: 28px; border-top: 2px solid var(--cd-rahmen); gap: 16px; flex-wrap: wrap; } .nav-schaltflaeche { display: inline-flex; align-items: center; justify-content: center; padding: 18px 30px; background-color: var(--cd-petrol); color: white; text-decoration: none; border-radius: var(--cd-radius); font-family: 'Montserrat', sans-serif; font-size: 0.9rem; font-weight: 700; min-width: 180px; min-height: 60px; text-align: center; box-shadow: var(--cd-schatten-soft); transition: background-color .2s ease, transform .15s ease; } .nav-schaltflaeche:hover, .nav-schaltflaeche:focus { background-color: var(--cd-petrol-tief); transform: translateY(-2px); outline: 3px solid var(--cd-koralle); outline-offset: 2px; } /* Fortschrittsanzeige (Untertitel im Kapitelkopf) */ .fortschritt { color: var(--cd-schiefer); font-size: 0.85rem; margin-bottom: 8px; opacity: 0.85; } body.hochkontrast .fortschritt { color: #ffff00; opacity: 1; } /* Responsive */ @media (max-width: 600px) { :root { --schrift-basis: 18px; --schrift-titel: 1.5rem; } h1 { font-size: 1.4rem; } h2 { font-size: 1.1rem; } } /* ============================================= FIXIERTER KOPFBEREICH (einheitlich auf allen Seiten) Barrierefreiheits-Leiste + Navigation sind zusammen am oberen Rand fixiert und über alle Seiten konsistent. ============================================= */ .kopf-fixiert { position: fixed; top: 0; left: 0; right: 0; z-index: 200; background-color: rgba(252, 251, 250, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--cd-rahmen); } body.hochkontrast .kopf-fixiert { background-color: #0c0c0c; border-color: #555; backdrop-filter: none; -webkit-backdrop-filter: none; } /* Platz schaffen, damit Inhalt nicht unter dem fixierten Kopf verschwindet. barrierefreiheit.js überschreibt diesen Wert dynamisch nach JS-Load. */ body { padding-top: 84px; } @media (max-width: 720px) { body { padding-top: 132px; } } /* Anker (z.B. #kaufen) nicht unter dem fixierten Kopf landen lassen */ :target { scroll-margin-top: 100px; } /* Eine Zeile: Logo · Navigation · kompakte Barrierefreiheit */ .kopf-bahn { max-width: var(--max-breite); margin: 0 auto; width: 100%; min-height: 64px; padding: 8px 24px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } body.voll-breite .kopf-bahn { max-width: var(--bahn); padding-left: var(--rand); padding-right: var(--rand); } .kopf-bahn .logo { display: flex; align-items: center; text-decoration: none; margin-right: 8px; flex-shrink: 0; } .kopf-bahn .logo:hover, .kopf-bahn .logo:focus { outline: none; opacity: 0.85; } .kopf-bahn .logo:focus-visible { outline: 3px solid var(--cd-petrol); border-radius: 4px; } .logo-bild { height: 48px; width: auto; max-width: 240px; display: block; } /* Hochkontrast: Logo invertieren damit es auf schwarzem Hintergrund lesbar bleibt */ body.hochkontrast .logo-bild { filter: brightness(0) invert(1); } /* Navigationslinks */ .kopf-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-right: auto; } .kopf-nav a { color: var(--cd-petrol); text-decoration: none; font-size: 0.9rem; font-weight: 600; padding: 10px 16px; border-radius: 12px; border: 2px solid transparent; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; transition: background-color .2s ease, border-color .2s ease; } .kopf-nav a:hover, .kopf-nav a:focus { background-color: var(--cd-petrol-hell); border-color: var(--cd-petrol); outline: none; } body.hochkontrast .kopf-nav a { color: #ffff00; } body.hochkontrast .kopf-nav a:hover, body.hochkontrast .kopf-nav a:focus { background-color: #1a1a1a; } .kopf-nav a[aria-current="page"] { background-color: var(--cd-petrol-hell); border-color: var(--cd-petrol); color: var(--cd-petrol-tief); } body.hochkontrast .kopf-nav a[aria-current="page"] { background-color: #1a1a1a; border-color: #ffff00; color: #ffff00; } /* Kompakte Barrierefreiheits-Werkzeuge (rechts, eine Gruppe) */ .bf-werkzeuge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px; background-color: rgba(255,255,255,0.6); border: 1px solid var(--cd-rahmen); border-radius: 100px; } body.hochkontrast .bf-werkzeuge { background-color: #1a1a1a; border-color: #ffff00; } .bf-werkzeuge .bf-anzeige { font-family: 'Montserrat', sans-serif; font-size: 0.7rem; font-weight: 700; color: var(--cd-schiefer); min-width: 30px; text-align: center; } body.hochkontrast .bf-werkzeuge .bf-anzeige { color: #ffff00; } .bf-trenner { width: 1px; height: 24px; background-color: var(--cd-rahmen); margin: 0 2px; } body.hochkontrast .bf-trenner { background-color: #ffff00; } .bf-btn { background-color: var(--cd-petrol); color: white; border: 2px solid transparent; border-radius: 50%; padding: 0; font-family: 'Montserrat', sans-serif; font-size: 0.85rem; font-weight: 700; cursor: pointer; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; transition: background-color .2s ease, transform .15s ease; } .bf-btn:hover, .bf-btn:focus { background-color: var(--cd-petrol-tief); transform: translateY(-1px); outline: 3px solid var(--cd-koralle); outline-offset: 2px; } body.hochkontrast .bf-btn { background-color: #333; border: 2px solid #ffff00; color: #ffff00; } body.hochkontrast .bf-btn:hover { background-color: #555; } .bf-btn-kontrast { background-color: var(--cd-schiefer); width: auto; border-radius: 100px; padding: 0 14px; font-size: 0.7rem; gap: 6px; } body.hochkontrast .bf-btn-kontrast { background-color: #ffff00; color: #000; border-color: #000; } @media (max-width: 720px) { .kopf-bahn { gap: 10px; } .kopf-nav { gap: 2px; width: 100%; order: 3; } .bf-werkzeuge { margin-left: auto; } .logo-bild { height: 40px; max-width: 180px; } } /* ============================================= FORTSCHRITTSBALKEN ============================================= */ .fortschritt-container { margin: 0 -24px 36px -24px; background-color: var(--cd-petrol-hell); padding: 14px 24px; border-bottom: 1px solid var(--cd-rahmen); } body.hochkontrast .fortschritt-container { background-color: #111; border-color: #444; } .fortschritt-info { font-size: 0.75rem; color: var(--cd-schiefer); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; } .fortschritt-info strong { color: var(--cd-petrol-tief); font-size: 0.8rem; font-family: 'Montserrat', sans-serif; } body.hochkontrast .fortschritt-info { color: #ffff00; } body.hochkontrast .fortschritt-info strong { color: #ffff00; } .fortschrittsbalken-huelle { background-color: #d4e6e6; border-radius: 100px; height: 14px; overflow: hidden; } .fortschrittsbalken-fuell { background: linear-gradient(90deg, var(--cd-petrol), var(--cd-koralle)); height: 100%; border-radius: 100px; transition: width 0.4s ease; } /* ============================================= LESEZEIT-BADGE ============================================= */ .lesezeit-badge { display: inline-block; background-color: var(--cd-petrol-hell); color: var(--cd-petrol-tief); border: 1px solid #a9d4d4; border-radius: 100px; padding: 5px 16px; font-family: 'Montserrat', sans-serif; font-size: 0.75rem; font-weight: 700; margin-top: 8px; } /* ============================================= EINSTIEGS-BOX (Startseite) ============================================= */ .einstieg-box { background: linear-gradient(135deg, #e6f2f2 0%, #fdeeea 100%); border: 2px solid var(--cd-petrol); border-radius: var(--cd-radius-gross); padding: 36px 40px; margin: 32px 0 40px 0; text-align: center; box-shadow: var(--cd-schatten-soft); } .einstieg-box h2 { font-family: 'Montserrat', sans-serif; border: none; padding: 0; margin-top: 0; font-size: 1.4rem; font-weight: 800; color: var(--cd-schiefer); letter-spacing: -0.6px; } body.hochkontrast .einstieg-box h2 { color: #ffff00; } .einstieg-box p { font-size: 1rem; color: var(--cd-schiefer); margin-bottom: 24px; } .einstieg-schaltflaeche { display: inline-flex; align-items: center; justify-content: center; background-color: var(--cd-petrol); color: white; text-decoration: none; padding: 18px 36px; border-radius: var(--cd-radius); font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 700; min-height: 60px; margin: 6px 8px; box-shadow: var(--cd-schatten-soft); transition: background-color .2s ease, transform .15s ease; } .einstieg-schaltflaeche:hover { background-color: var(--cd-petrol-tief); transform: translateY(-3px); } .einstieg-schaltflaeche.sekundaer { background-color: var(--cd-koralle); } .einstieg-schaltflaeche.sekundaer:hover { background-color: var(--cd-koralle-tief); } /* ============================================= STARTSEITE (index.html) Diese Regeln standen früher in einem