/* ========================================================================== AKTIVSCHUTZWERK – style.css (Light Theme, Multi-Page) ========================================================================== HERKUNFT DER FARBEN ------------------- 1) Logo.png (Pixel-Analyse): #D9C8AA Sand / Champagner – Schriftzug "Aktiv", Schild-Kontur #97BEDB Helles Sportblau – Schriftzug "Schutzwerk", Welle 2) Screenshots der bestehenden Website (Ordner "Bilder", Pixel-Analyse): #FFFFFF Content-Flächen #F6FAFB abgesetzte Sections (sehr helles Blaugrau) Hero-Gradient diagonal: #5E99B7 -> #4B7B92 -> #355667 -> #070C0F WICHTIG – KONTRAST ------------------ Die reinen Logo-Farben sind auf Weiß NICHT lesbar (#D9C8AA ≈ 1.7:1, #97BEDB ≈ 1.9:1). Für Text auf hellem Grund werden deshalb abgedunkelte Varianten derselben Farbtöne verwendet: --color-accent #2F6F92 (Blau-Text) ≈ 5.6:1 auf Weiß ✔ AA --color-brand-ink #8C6E45 (Sand-Text) ≈ 4.8:1 auf Weiß ✔ AA --color-text #5A646B (Fließtext) ≈ 5.7:1 auf Weiß ✔ AA --color-ink #101418 (Headlines) ≈ 18.5:1 auf Weiß ✔ AAA --color-deep #0F2A38 (CTA-Fläche) Weiß darauf ≈ 14:1 ✔ AAA Die Original-Logo-Farben (--color-brand / --color-blue) werden weiterhin für Flächen, Rahmen, Icons-Hintergründe und Deko genutzt – nie für Text auf Weiß. THEME TAUSCHEN: Werte hier in :root ändern UND die identischen Werte im tailwind.config-Objekt im jeder HTML-Datei anpassen. ========================================================================== */ :root { /* Marke (Original-Logofarben – Flächen & Deko) */ --color-brand: #D9C8AA; /* Logo-Sand */ --color-brand-soft: #F3EDE1; /* Sand, stark aufgehellt – Flächen */ --color-brand-ink: #8C6E45; /* Sand abgedunkelt – Text/Icons auf Weiß */ --color-blue: #97BEDB; /* Logo-Blau */ --color-blue-soft: #E8F1F7; /* Blau, stark aufgehellt – Flächen */ /* Akzente (Text- und CTA-tauglich) */ --color-accent: #2F6F92; /* Blau-Text, Links */ --color-accent-dark: #1E4C66; /* Hover */ --color-deep: #0F2A38; /* dunkler CTA / Footer */ --color-deep-2: #163A4C; /* Flächen */ --color-bg: #FFFFFF; /* Basis */ --color-surface: #F6FAFB; /* abgesetzte Sections (aus bestehender Website) */ --color-line: #E4EAED; /* Rahmen, Trennlinien */ /* Typo */ --color-ink: #101418; /* Headlines */ --color-text: #5A646B; /* Fließtext */ --color-text-light: #8A959C; /* nur Meta/Labels, nie Fließtext */ /* Layout */ --nav-height: 108px; /* Logo 64/72/80px + Padding – passt zum Sprungmarken-Offset */ /* Schatten */ --shadow-sm: 0 1px 2px rgba(16, 20, 24, 0.04), 0 2px 8px rgba(16, 20, 24, 0.04); --shadow-md: 0 4px 12px rgba(16, 20, 24, 0.06), 0 12px 32px rgba(16, 20, 24, 0.07); --shadow-lg: 0 12px 24px rgba(16, 20, 24, 0.08), 0 28px 60px rgba(16, 20, 24, 0.1); } /* -------------------------------------------------------------------------- Basis -------------------------------------------------------------------------- */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background-color: var(--color-bg); color: var(--color-text); overflow-x: hidden; } body.menu-open { overflow: hidden; } section[id], main[id] { scroll-margin-top: calc(var(--nav-height) + 16px); } h1, h2, h3, h4 { color: var(--color-ink); letter-spacing: -0.02em; } /* -------------------------------------------------------------------------- Fokus / Accessibility -------------------------------------------------------------------------- */ :focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; border-radius: 6px; } .skip-link { position: absolute; top: -100px; left: 1rem; z-index: 100; padding: 0.75rem 1.25rem; background: var(--color-deep); color: #fff; font-weight: 700; border-radius: 0 0 0.75rem 0.75rem; transition: top 200ms ease; } .skip-link:focus { top: 0; } /* -------------------------------------------------------------------------- Scrollbar -------------------------------------------------------------------------- */ * { scrollbar-width: thin; scrollbar-color: #C6D1D7 var(--color-surface); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--color-surface); } ::-webkit-scrollbar-thumb { background: #C6D1D7; border-radius: 999px; border: 2px solid var(--color-surface); } ::-webkit-scrollbar-thumb:hover { background: var(--color-accent); } ::selection { background: var(--color-blue-soft); color: var(--color-deep); } /* -------------------------------------------------------------------------- Navigation -------------------------------------------------------------------------- */ .site-nav { background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: box-shadow 300ms ease, border-color 300ms ease, background-color 300ms ease; } .site-nav.scrolled { background: rgba(255, 255, 255, 0.96); border-bottom-color: var(--color-line); box-shadow: var(--shadow-sm); } .nav-link { position: relative; color: var(--color-text); font-weight: 500; transition: color 250ms ease; } .nav-link::after { content: ''; position: absolute; left: 0; bottom: -7px; height: 2px; width: 0; background: var(--color-accent); border-radius: 2px; transition: width 300ms ease; } .nav-link:hover { color: var(--color-ink); } .nav-link:hover::after, .nav-link[aria-current='page']::after, .nav-link.is-active::after { width: 100%; } .nav-link[aria-current='page'], .nav-link.is-active { color: var(--color-accent); font-weight: 600; } /* Aktiver Punkt im mobilen Overlay */ .mobile-nav-link.is-active, .mobile-nav-link[aria-current='page'] { color: var(--color-accent); } /* Mobile-Menü */ .mobile-menu { opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 300ms ease, transform 300ms ease, visibility 300ms; } .mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .mobile-menu a { opacity: 0; transform: translateY(12px); transition: opacity 380ms ease, transform 380ms ease, color 250ms ease; } .mobile-menu.is-open a { opacity: 1; transform: translateY(0); } .mobile-menu.is-open a:nth-child(1) { transition-delay: 60ms; } .mobile-menu.is-open a:nth-child(2) { transition-delay: 110ms; } .mobile-menu.is-open a:nth-child(3) { transition-delay: 160ms; } .mobile-menu.is-open a:nth-child(4) { transition-delay: 210ms; } .mobile-menu.is-open a:nth-child(5) { transition-delay: 260ms; } .mobile-menu.is-open a:nth-child(6) { transition-delay: 310ms; } .burger-line { transition: transform 300ms ease, opacity 200ms ease; transform-origin: center; } .burger.is-open .burger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger.is-open .burger-line:nth-child(2) { opacity: 0; } .burger.is-open .burger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* -------------------------------------------------------------------------- Hero – Markengradient aus der bestehenden Website -------------------------------------------------------------------------- */ .hero-gradient { background: radial-gradient(90% 120% at 8% 0%, rgba(151, 190, 219, 0.35) 0%, transparent 55%), linear-gradient( 118deg, #5E99B7 0%, #4B7B92 26%, #355667 52%, #16242C 78%, #070C0F 100% ); } .hero-gradient-soft { background: radial-gradient(80% 110% at 12% 0%, rgba(151, 190, 219, 0.3) 0%, transparent 58%), linear-gradient(118deg, #4B7B92 0%, #355667 40%, #16242C 76%, #070C0F 100%); } /* -------------------------------------------------------------------------- 3-2-1-Headline im Hero (nur Startseite) Aufbau: eine Zeile je Aussage, die Ziffer sitzt in einer eigenen Spalte, damit 3, 2 und 1 exakt untereinander stehen. Die Ziffern liegen in der Sandfarbe des Logos, der Text bleibt weiss. -------------------------------------------------------------------------- */ .hero-count { display: flex; flex-direction: column; gap: clamp(0.9rem, 0.5rem + 1.2vw, 1.5rem); } /* Zahl und Text nebeneinander, Ziffer in eigener Spalte fuer saubere Flucht */ .hero-count-item { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 0.4em; /* Archivo Black: breit und massiv, deshalb kleinere Grade als bei einer condensed Schrift. Obergrenze so gewaehlt, dass die laengste Zeile ("1 kompromissloses Backup.") auf Desktop einzeilig bleibt. */ font-family: 'Archivo Black', 'Arial Black', Impact, sans-serif; font-weight: 400; font-size: clamp(1.25rem, 0.78rem + 2.05vw, 2rem); line-height: 1.16; letter-spacing: -0.012em; text-transform: uppercase; } .hero-count-num { color: var(--color-brand); font-variant-numeric: tabular-nums; text-align: right; min-width: 1ch; } .hero-count-label { color: #fff; } /* Freigestelltes Logo auf dunklem Grund. Der weiche Schatten hebt die hellen Logoteile vom Gradienten ab, ohne dass eine Fläche hinterlegt werden muss. Farbe stammt aus dem Gradienten selbst. */ .logo-hero { filter: drop-shadow(0 10px 28px rgba(7, 12, 15, 0.5)); } .site-footer img { filter: drop-shadow(0 6px 18px rgba(7, 12, 15, 0.45)); } /* Partnerlogo im Footer. Standard: weisse Logovariante, liegt direkt auf dem dunklen Grund. Gibt es nur die blaue Variante, am im Footer zusaetzlich data-heller-grund setzen. Dann bekommt das Logo eine helle Flaeche darunter, damit das Signal-Iduna-Blau lesbar bleibt. */ .si-partner img { filter: none; opacity: 0.9; transition: opacity 250ms ease; } .si-partner:hover img { opacity: 1; } .si-partner[data-heller-grund] { background: #fff; border-radius: 0.65rem; padding: 0.5rem 0.9rem; } .si-partner[data-heller-grund] img { opacity: 1; } /* Sehr dezentes Punktraster über dem Gradient */ .dot-pattern { background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(75% 70% at 40% 40%, #000 0%, transparent 100%); mask-image: radial-gradient(75% 70% at 40% 40%, #000 0%, transparent 100%); } /* Auftakt-Linie einer Section */ .accent-rule { width: 48px; height: 3px; background: linear-gradient(90deg, var(--color-accent), var(--color-brand)); border-radius: 999px; } /* Kleines Label über einer Headline */ .section-label { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent); } .section-label::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: var(--color-brand); } /* -------------------------------------------------------------------------- Cards -------------------------------------------------------------------------- */ .card { background: #fff; border: 1px solid var(--color-line); border-radius: 1.25rem; box-shadow: var(--shadow-sm); transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #CFDDE5; } /* Card auf hellgrauem Grund */ .card-plain { background: #fff; border: 1px solid var(--color-line); border-radius: 1.25rem; } /* Card auf dunklem Grund */ .card-dark { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 1.25rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform 300ms ease, background-color 300ms ease, border-color 300ms ease; } .card-dark:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.28); } /* Icon-Kachel in Cards */ .icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 0.875rem; background: var(--color-blue-soft); color: var(--color-accent); flex-shrink: 0; } .icon-tile-sand { background: var(--color-brand-soft); color: var(--color-brand-ink); } .icon-tile-dark { background: rgba(255, 255, 255, 0.1); color: #fff; } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; border-radius: 999px; font-weight: 600; line-height: 1.2; padding: 0.95rem 1.75rem; transition: transform 250ms ease, background-color 250ms ease, color 250ms ease, box-shadow 250ms ease, border-color 250ms ease; border: 1px solid transparent; } .btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--color-deep); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--color-deep-2); box-shadow: var(--shadow-md); } .btn-secondary { background: #fff; color: var(--color-ink); border-color: var(--color-line); } .btn-secondary:hover { border-color: var(--color-accent); color: var(--color-accent); box-shadow: var(--shadow-sm); } /* Auf dunklem Grund (Hero, CTA-Band) */ .btn-light { background: #fff; color: var(--color-deep); } .btn-light:hover { background: var(--color-brand); color: var(--color-ink); } .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); } .btn-outline-light:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; } .btn-sm { padding: 0.65rem 1.35rem; font-size: 0.875rem; } /* Textlink mit Pfeil */ .link-arrow { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; color: var(--color-accent); transition: gap 250ms ease, color 250ms ease; } .link-arrow:hover { gap: 0.75rem; color: var(--color-accent-dark); } /* -------------------------------------------------------------------------- Listen mit Häkchen / Kreuzen -------------------------------------------------------------------------- */ .check-list li, .cross-list li { position: relative; padding-left: 2rem; margin-bottom: 0.9rem; line-height: 1.65; } .check-list li::before, .cross-list li::before { content: ''; position: absolute; left: 0; top: 0.15rem; width: 1.25rem; height: 1.25rem; border-radius: 999px; background-repeat: no-repeat; background-position: center; background-size: 0.75rem; } .check-list li::before { background-color: var(--color-blue-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F6F92' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); } .cross-list li::before { background-color: #F1F3F4; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808A90' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); } /* Nummerierte Schritte */ .step-number { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: var(--color-deep); color: #fff; font-weight: 700; font-size: 0.95rem; flex-shrink: 0; } /* -------------------------------------------------------------------------- Typografische Skala – EINE Skala für alle Seiten H1 / H2 / H3 / Body / Small. Größen über clamp(), damit kein Sonderfall pro Section nötig ist. Farben kommen unverändert aus :root. -------------------------------------------------------------------------- */ .t-h1 { font-family: 'Montserrat', system-ui, 'Segoe UI', sans-serif; font-weight: 800; font-size: clamp(1.9rem, 1.35rem + 2.6vw, 3.4rem); line-height: 1.12; letter-spacing: -0.02em; } .t-h2 { font-family: 'Montserrat', system-ui, 'Segoe UI', sans-serif; font-weight: 800; font-size: clamp(1.65rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.18; letter-spacing: -0.02em; } .t-h3 { font-family: 'Montserrat', system-ui, 'Segoe UI', sans-serif; font-weight: 700; font-size: clamp(1.1rem, 1.02rem + 0.35vw, 1.3rem); line-height: 1.3; letter-spacing: -0.01em; } .t-body { font-size: 1rem; line-height: 1.7; } .t-lead { font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.15rem); line-height: 1.65; } .t-small { font-size: 0.8125rem; line-height: 1.6; } /* Fließtext-Spalten begrenzen (~65–75 Zeichen) */ .measure { max-width: 42rem; } /* -------------------------------------------------------------------------- Accordion – barrierefrei, Höhenanimation über grid-template-rows -------------------------------------------------------------------------- */ .accordion { border-top: 1px solid var(--color-line); } .accordion-item { border-bottom: 1px solid var(--color-line); } .accordion-trigger { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 1.15rem 0; text-align: left; font-weight: 600; color: var(--color-ink); background: none; border: 0; cursor: pointer; transition: color 250ms ease; } .accordion-trigger:hover { color: var(--color-accent); } .accordion-icon { flex-shrink: 0; color: var(--color-accent); transition: transform 300ms ease; } .accordion-trigger[aria-expanded='true'] .accordion-icon { transform: rotate(45deg); } /* Panel: 0fr -> 1fr animiert die Höhe ohne feste Pixelwerte */ .accordion-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms ease; } .accordion-panel > div { overflow: hidden; } .accordion-panel[data-open='true'] { grid-template-rows: 1fr; } .accordion-panel .accordion-content { padding-bottom: 1.35rem; } /* Sportart-Zeilen auf sport.html: Sportart gross, Koerperteil klein darunter. So erkennt man auf dem Handy sofort, welche Zeile die eigene ist. */ .sport-tag { display: block; font-family: 'Montserrat', system-ui, 'Segoe UI', sans-serif; font-weight: 700; font-size: 1.05rem; line-height: 1.25; color: var(--color-ink); } .sport-teil { display: block; margin-top: 0.15rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-brand-ink); } .accordion-trigger:hover .sport-tag { color: var(--color-accent); } /* Accordion innerhalb einer Card */ .card .accordion { border-top: 1px solid var(--color-line); margin-top: 1.25rem; } .card .accordion-item:last-child { border-bottom: 0; } .card .accordion-trigger { font-size: 0.9375rem; padding: 0.9rem 0; } /* -------------------------------------------------------------------------- Timeline (Story-Seite) -------------------------------------------------------------------------- */ .timeline { position: relative; padding-left: 2.25rem; } /* Durchgehende Linie */ .timeline::before { content: ''; position: absolute; left: 0.55rem; top: 0.6rem; bottom: 0.6rem; width: 2px; background: linear-gradient( 180deg, var(--color-blue) 0%, var(--color-line) 55%, var(--color-brand) 100% ); } .timeline-item { position: relative; padding-bottom: 3rem; } .timeline-item:last-child { padding-bottom: 0; } /* Punkt auf der Linie */ .timeline-item::before { content: ''; position: absolute; left: -2.25rem; top: 0.45rem; width: 1.15rem; height: 1.15rem; border-radius: 999px; background: #fff; border: 3px solid var(--color-accent); } /* Letzter Punkt = Ziel, in Markensand */ .timeline-item:last-child::before { border-color: var(--color-brand-ink); background: var(--color-brand); } .timeline-year { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 0.5rem; } @media (min-width: 768px) { .timeline { padding-left: 3rem; } /* Linie exakt auf die Punktmitte (0.35rem + 0.7rem = 1.05rem) */ .timeline::before { left: calc(1.05rem - 1px); } .timeline-item::before { left: -2.65rem; width: 1.4rem; height: 1.4rem; } } /* Pull-Quote */ .pull-quote { font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; color: var(--color-ink); } /* -------------------------------------------------------------------------- Scroll-Reveal -------------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- Animationen -------------------------------------------------------------------------- */ @keyframes scroll-hint { 0%, 100% { transform: translateY(0); opacity: 0.65; } 50% { transform: translateY(7px); opacity: 1; } } .animate-scroll-hint { animation: scroll-hint 2.2s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- Formular -------------------------------------------------------------------------- */ .field { width: 100%; background: #fff; border: 1px solid var(--color-line); border-radius: 0.85rem; padding: 0.9rem 1rem; font-size: 1rem; color: var(--color-ink); transition: border-color 200ms ease, box-shadow 200ms ease; } .field::placeholder { color: var(--color-text-light); } .field:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(47, 111, 146, 0.14); } .field[aria-invalid='true'] { border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12); } .field-checkbox { width: 1.25rem; height: 1.25rem; accent-color: var(--color-accent); border-radius: 0.3rem; flex-shrink: 0; margin-top: 0.15rem; cursor: pointer; } .field-error { display: none; color: #C0392B; /* ≈ 5.9:1 auf Weiß ✔ AA */ font-size: 0.8125rem; margin-top: 0.4rem; } .field-error.is-visible { display: block; } .btn-submit[data-state='loading'] { pointer-events: none; opacity: 0.8; } .spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: spin 700ms linear infinite; } .btn-submit[data-state='loading'] .spinner { display: inline-block; } /* -------------------------------------------------------------------------- Auswahl-Cards (Erstpaket) -------------------------------------------------------------------------- */ .choice-card { display: block; cursor: pointer; } .choice-card-inner { display: flex; align-items: flex-start; gap: 1rem; height: 100%; background: #fff; border: 2px solid var(--color-line); border-radius: 1.25rem; padding: 1.5rem; transition: transform 280ms ease, border-color 280ms ease, box-shadow 280ms ease, background-color 280ms ease; } .choice-card:hover .choice-card-inner { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #CFDDE5; } .choice-card input:focus-visible + .choice-card-inner { outline: 3px solid var(--color-accent); outline-offset: 3px; } .choice-card input:checked + .choice-card-inner { border-color: var(--color-accent); background: var(--color-blue-soft); } .choice-dot { width: 1.25rem; height: 1.25rem; border-radius: 999px; border: 2px solid #C6D1D7; margin-top: 0.2rem; flex-shrink: 0; transition: background-color 250ms ease, border-color 250ms ease, box-shadow 250ms ease; } .choice-card input:checked + .choice-card-inner .choice-dot { background: var(--color-accent); border-color: var(--color-accent); box-shadow: inset 0 0 0 3px #fff; } /* -------------------------------------------------------------------------- Bilder / Media-Platzhalter -------------------------------------------------------------------------- */ .media-frame { position: relative; overflow: hidden; border-radius: 1.5rem; background: var(--color-surface); border: 1px solid var(--color-line); } .media-frame img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Sichtbarer Hinweis, solange kein echtes Bild hinterlegt ist */ .media-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 2rem; min-height: 320px; color: var(--color-text-light); text-align: center; font-size: 0.875rem; background: repeating-linear-gradient( 135deg, rgba(151, 190, 219, 0.07) 0px, rgba(151, 190, 219, 0.07) 12px, transparent 12px, transparent 24px ), var(--color-surface); } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .site-footer { background: var(--color-deep); color: rgba(255, 255, 255, 0.72); } .site-footer h2 { color: #fff; } .site-footer a { color: rgba(255, 255, 255, 0.72); transition: color 250ms ease; } .site-footer a:hover { color: var(--color-brand); } /* -------------------------------------------------------------------------- prefers-reduced-motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } .card:hover, .card-dark:hover, .btn:hover, .choice-card:hover .choice-card-inner { transform: none; } .animate-scroll-hint { animation: none; } /* Accordion öffnet ohne Animation, bleibt aber bedienbar */ .accordion-panel { transition: none; } .accordion-icon { transition: none; } } /* -------------------------------------------------------------------------- Print -------------------------------------------------------------------------- */ @media print { .site-nav, .mobile-menu, .no-print { display: none !important; } body { background: #fff; color: #000; } .hero-gradient, .hero-gradient-soft { background: #fff !important; } .hero-gradient *, .hero-gradient-soft * { color: #000 !important; } }