/* ================================================================= Pflegedex – Haupt-Stylesheet (HELLES THEME) ----------------------------------------------------------------- Helle, freundliche Optik für den Pflegebereich – Bordeaux (#9B1C3B) bleibt als Markenfarbe erhalten und wird als Akzent + farbige Bänder (Trust/CTA) eingesetzt. Aufbau: 1. CSS-Variablen (Farben, Spacing, Typo) 2. Reset & Basis 3. Layout-Helfer (container, section, grid) 4. Buttons & Badges 5. Header / Navigation 6. Hero 7. Sektionen (Problem/Lösung, Features, Trust, Zielgruppen ...) 8. Formular 9. Footer 10. Utilities & Animationen 11. Responsive (Mobile-first Anpassungen) ================================================================= */ /* ----------------------------------------------------------------- 1. CSS-Variablen ----------------------------------------------------------------- */ :root { /* Pflegedex Markenfarben (Bordeaux bleibt!) */ --pflege-bordeaux: #9B1C3B; --pflege-bordeaux-dark: #7a1630; --pflege-bordeaux-soft: rgba(155, 28, 59, 0.08); /* zarte Tönung */ --pflege-bordeaux-tint: #fbeef1; /* heller Bordeaux-Hintergrund (Icons) */ /* Flächen / Hintergründe (hell) */ --pflege-bg: #ffffff; /* Seiten-Basis */ --pflege-bg-soft: #f5f7fb; /* abwechselnde Sektionen / Footer */ --pflege-bg-card: #ffffff; /* Karten */ --pflege-bg-light: #f5f7fb; /* Alias für helle Sektionen */ /* Text */ --pflege-heading: #16202e; /* Überschriften (fast schwarz, leicht navy) */ --pflege-text: #2b3645; /* Fließtext dunkel */ --pflege-text-dark: #16202e; /* dunkler Text (von PHP-Inline genutzt) */ --pflege-muted: #5d6b7e; /* Untertitel, Metainfo */ --pflege-muted-dark: #5d6b7e; /* gedämpfter Text auf hellem Grund */ --pflege-white: #ffffff; /* Trust / Pflege-Hellblau */ --pflege-blue-soft: #e8f4fd; --pflege-blue: #2f6fa8; /* Rahmen & Schatten (für helles Theme weicher) */ --pflege-border: #e4e9f0; --pflege-border-dark: rgba(20, 30, 45, 0.10); --shadow-sm: 0 1px 3px rgba(20, 30, 45, 0.06), 0 1px 2px rgba(20, 30, 45, 0.04); --shadow-md: 0 10px 30px rgba(20, 30, 45, 0.10); --shadow-glow: 0 10px 30px rgba(155, 28, 59, 0.22); /* Spacing-Skala */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 6rem; /* Radius */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px; /* Typografie */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-head: 'Poppins', var(--font-body); /* Layout */ --container-max: 1140px; --header-h: 72px; /* Transitions */ --t-fast: 0.15s ease; --t-base: 0.25s ease; } /* ----------------------------------------------------------------- 2. Reset & Basis ----------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 1.05rem; line-height: 1.65; color: var(--pflege-text); background: var(--pflege-bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; /* Sicherheitsnetz: lange Wörter / E-Mail-Adressen / URLs umbrechen statt überlaufen. */ overflow-wrap: break-word; } h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.18; margin: 0 0 0.6em; font-weight: 700; color: var(--pflege-heading); /* Lange deutsche Komposita (z.B. "Pflegedokumentation") sauber umbrechen, statt aus dem Viewport zu laufen. hyphens nutzt lang="de" aus . -webkit-Prefix ist für iOS Safari nötig, sonst greift die Trennung dort nicht. */ overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; } h1 { font-size: clamp(2.1rem, 5.5vw, 3.5rem); letter-spacing: -0.02em; } h2 { font-size: clamp(1.55rem, 3.6vw, 2.2rem); letter-spacing: -0.01em; } h3 { font-size: 1.25rem; } /* Seiten-Titel auf Unterseiten: semantisch

, optisch wie ein

(eine sichtbare Hauptüberschrift pro Seite, ohne Hero-Größe). */ .page-title { font-size: clamp(1.55rem, 3.6vw, 2.2rem); letter-spacing: -0.01em; } p { margin: 0 0 1rem; } a { color: inherit; text-decoration: none; transition: color var(--t-fast); } img, svg { max-width: 100%; display: block; } ul { margin: 0; padding: 0; list-style: none; } /* Tastatur-Fokus klar sichtbar (Barrierefreiheit) */ :focus-visible { outline: 3px solid var(--pflege-bordeaux); outline-offset: 3px; border-radius: 4px; } /* Skip-Link – nur sichtbar bei Tastaturfokus */ .skip-link { position: absolute; left: -999px; top: 0; background: var(--pflege-bordeaux); color: var(--pflege-white); padding: 0.75rem 1.25rem; z-index: 200; border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { left: 0; } /* ----------------------------------------------------------------- 3. Layout-Helfer ----------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: 1.25rem; } .section { padding-block: var(--space-xl); } .section--tight { padding-block: var(--space-lg); } /* Helle, leicht getönte Sektionen (Wechsel weiß/grau für Rhythmus) */ .section--light { background: var(--pflege-bg-soft); } .section-head { max-width: 720px; margin: 0 auto var(--space-lg); text-align: center; } .section-sub { color: var(--pflege-muted); font-size: 1.12rem; margin: 0; } /* Auszeichnung über Überschriften (kleines Label) */ .eyebrow { display: inline-block; font-family: var(--font-head); font-size: 0.95rem; /* größerer Kicker */ font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pflege-bordeaux); margin-bottom: 0.8rem; } .grid { display: grid; gap: var(--space-md); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } /* ----------------------------------------------------------------- 4. Buttons & Badges ----------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-head); font-weight: 600; font-size: 1rem; line-height: 1; padding: 0.95rem 1.6rem; border-radius: var(--radius-pill); border: 2px solid transparent; cursor: pointer; transition: transform var(--t-fast), background var(--t-base), box-shadow var(--t-base), color var(--t-base); text-align: center; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-sm { padding: 0.6rem 1.1rem; font-size: 0.92rem; } .btn-primary { background: var(--pflege-bordeaux); color: var(--pflege-white); box-shadow: var(--shadow-glow); } .btn-primary:hover { background: var(--pflege-bordeaux-dark); } /* Ghost/Outline – dezenter Rahmen auf hellem Grund */ .btn-ghost { background: transparent; color: var(--pflege-heading); border-color: rgba(20, 30, 45, 0.18); } .btn-ghost:hover { background: rgba(20, 30, 45, 0.04); border-color: rgba(20, 30, 45, 0.30); } /* Outline in Bordeaux */ .btn-outline-dark { background: transparent; color: var(--pflege-bordeaux); border-color: var(--pflege-bordeaux); } .btn-outline-dark:hover { background: var(--pflege-bordeaux); color: var(--pflege-white); } .btn-block { width: 100%; } /* Badge (z.B. Hero-"Powered by KI ...") */ .badge { display: inline-flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: center; font-size: 0.88rem; font-weight: 500; color: var(--pflege-text); background: var(--pflege-white); border: 1px solid var(--pflege-border); box-shadow: var(--shadow-sm); padding: 0.55rem 1.1rem; border-radius: var(--radius-pill); } .badge .dot { color: var(--pflege-bordeaux); font-weight: 700; } /* Kleine Trust-Pills (Hellblau) */ .pill { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; font-weight: 600; color: var(--pflege-blue); background: var(--pflege-blue-soft); padding: 0.45rem 0.95rem; border-radius: var(--radius-pill); } /* ----------------------------------------------------------------- 5. Header / Navigation ----------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; height: var(--header-h); display: flex; align-items: center; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--pflege-border); transition: box-shadow var(--t-base), background var(--t-base); } .site-header.is-scrolled { background: rgba(255, 255, 255, 0.96); box-shadow: 0 4px 20px rgba(20, 30, 45, 0.08); } .nav-wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .brand { display: inline-flex; align-items: center; } .brand-logo { height: 42px; width: auto; display: block; } @media (max-width: 480px) { .brand-logo { height: 34px; } } /* Text-Wortmarke (Fallback/Legacy – aktuell durch Logo-Bild ersetzt) */ .brand-mark { font-family: var(--font-head); font-weight: 800; font-size: 1.45rem; letter-spacing: -0.02em; color: var(--pflege-heading); } .brand-accent { color: var(--pflege-bordeaux); } .primary-nav ul { display: flex; align-items: center; gap: 0.4rem; } .primary-nav a { display: inline-block; padding: 0.5rem 0.9rem; border-radius: var(--radius-sm); color: var(--pflege-muted); font-weight: 500; } .primary-nav a:hover { color: var(--pflege-heading); } .primary-nav a.is-active { color: var(--pflege-bordeaux); } .primary-nav .nav-cta a { color: var(--pflege-white); } /* Burger-Toggle (mobil) */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer; padding: 0; } .nav-toggle span { display: block; width: 24px; height: 2px; margin-inline: auto; background: var(--pflege-heading); border-radius: 2px; transition: transform var(--t-base), opacity var(--t-base); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ----------------------------------------------------------------- 6. Hero ----------------------------------------------------------------- */ .hero { position: relative; text-align: center; padding-block: clamp(3.5rem, 9vw, 7rem); /* Hero läuft unten in WEISS aus (nicht ins Grau), damit die folgende graue Sektion klar als eigener Block startet. Der Bordeaux-Schimmer oben bleibt als Akzent. */ background: radial-gradient(1000px 480px at 50% -8%, rgba(155, 28, 59, 0.10), transparent 60%), #ffffff; overflow: hidden; border-bottom: 1px solid var(--pflege-border); } /* Dezentes Raster im Hintergrund */ .hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(20,30,45,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(20,30,45,0.04) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 80%); pointer-events: none; } .hero > .container { position: relative; z-index: 1; } .hero h1 { margin-bottom: 0.5rem; /* Nur an unserem ­ trennen, nicht automatisch irgendwo. */ -webkit-hyphens: manual; hyphens: manual; } .hero h1 .accent { color: var(--pflege-bordeaux); } .hero-sub { max-width: 640px; margin: 0 auto 2rem; font-size: clamp(1.05rem, 2.5vw, 1.3rem); color: var(--pflege-muted); } .hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2rem; } /* --- EKG-Band (Herzschlag-Akzent unter den CTAs) --- */ .hero-ekg { max-width: 660px; margin: 0 auto 1.6rem; /* Linie an den Rändern weich ausblenden, damit sie nicht hart abbricht. */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%); } .hero-ekg svg { width: 100%; height: 54px; display: block; overflow: visible; /* Glow der Trace-Linie darf leicht überstehen */ } /* Beide Linien "atmen" ganz leicht: kontinuierliches, weiches scaleY um die eigene Mitte. Kein Neuzeichnen -> keine Sprünge, nur minimal lebendig. transform-box/-origin sorgen dafür, dass um den Wellen- Mittelpunkt skaliert wird (Grundlinie bleibt praktisch stabil). */ .ekg-base, .ekg-trace { transform-box: fill-box; transform-origin: center; } /* Ruhende Grundlinie – dezent */ .ekg-base { fill: none; stroke: rgba(155, 28, 59, 0.16); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: ekg-breathe 6s ease-in-out infinite; } /* Heller "Sweep" – ein kurzer Abschnitt wandert über die Linie. dasharray 14/100 bei pathLength=100 => ein sichtbarer Puls mit Pause dazwischen (wie ein Herzschlag). Offset um eine volle Periode (114) bewegt => nahtlose Schleife. */ .ekg-trace { fill: none; stroke: var(--pflege-bordeaux); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14 100; stroke-dashoffset: 114; filter: drop-shadow(0 0 4px rgba(155, 28, 59, 0.45)); /* Sweep (Puls wandert) + dasselbe dezente "Atmen" wie die Grundlinie, synchron, damit beide Linien deckungsgleich bleiben. */ animation: ekg-sweep 3s linear infinite, ekg-breathe 6s ease-in-out infinite; } @keyframes ekg-sweep { from { stroke-dashoffset: 114; } to { stroke-dashoffset: 0; } } /* Sehr subtil: ±wenige Prozent vertikal, langsam, weich. */ @keyframes ekg-breathe { 0%, 100% { transform: scaleY(0.98); } 50% { transform: scaleY(1.05); } } /* --- Hero Trust-Badges (Icon + Text statt Emoji) --- */ .hero-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6rem 0.9rem; margin: 0 auto; max-width: 640px; } .hero-badges li { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; color: var(--pflege-heading); background: var(--pflege-white); border: 1px solid var(--pflege-border); box-shadow: var(--shadow-sm); padding: 0.5rem 0.95rem; border-radius: var(--radius-pill); } .hero-badges svg { width: 18px; height: 18px; color: var(--pflege-bordeaux); /* currentColor der Icons */ flex-shrink: 0; } /* ----------------------------------------------------------------- 7. Sektionen ----------------------------------------------------------------- */ /* --- Problem -> Lösung --- */ .ps-card { background: var(--pflege-bg-card); border: 1px solid var(--pflege-border); border-radius: var(--radius-md); padding: var(--space-md); height: 100%; box-shadow: var(--shadow-sm); } .ps-row { display: flex; align-items: flex-start; gap: 0.75rem; } /* Rundes Icon-Badge – neutral fürs Problem, Bordeaux für die Lösung */ .ps-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; } .ps-icon svg { width: 16px; height: 16px; } /* Problem = Rot (heller als Bordeaux, klar unterscheidbar), Lösung = Grün */ .ps-row--bad .ps-icon { background: #fcebeb; color: #d64545; } .ps-row--good .ps-icon { background: #e7f7ee; color: #1f9d57; } .ps-bad { color: var(--pflege-muted); font-size: 0.97rem; line-height: 1.45; padding-top: 0.2rem; /* optisch zur Badge-Mitte ausrichten */ } /* Übergangspfeil – zentriert, dezent */ .ps-arrow { display: flex; justify-content: center; color: rgba(20, 30, 45, 0.32); margin: 0.55rem 0; } .ps-arrow svg { width: 22px; height: 22px; } .ps-good { font-weight: 600; font-size: 1.04rem; line-height: 1.45; color: var(--pflege-heading); padding-top: 0.2rem; } /* --- Feature-Cards --- */ .feature-card { background: var(--pflege-bg-card); border: 1px solid var(--pflege-border); border-radius: var(--radius-md); padding: var(--space-md); height: 100%; box-shadow: var(--shadow-sm); transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base); } .feature-card:hover { transform: translateY(-4px); border-color: var(--pflege-bordeaux); box-shadow: var(--shadow-md); } .feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--pflege-bordeaux-tint); color: var(--pflege-bordeaux); /* currentColor der Icons */ margin-bottom: 1rem; } .feature-icon svg { width: 28px; height: 28px; } .feature-card h3 { color: var(--pflege-heading); margin-bottom: 0.4rem; } .feature-card p { color: var(--pflege-muted); margin: 0; font-size: 0.98rem; } /* --- Trust / Datenschutz-Block (Bordeaux-Band) --- */ .trust { position: relative; text-align: center; background: radial-gradient(900px 400px at 50% 0%, rgba(255, 255, 255, 0.12), transparent 65%), linear-gradient(135deg, var(--pflege-bordeaux) 0%, var(--pflege-bordeaux-dark) 100%); color: var(--pflege-white); overflow: hidden; } .trust h2 { color: var(--pflege-white); font-size: clamp(1.8rem, 4.5vw, 2.8rem); max-width: 800px; margin-inline: auto; } .trust .eyebrow { color: rgba(255, 255, 255, 0.85); } .trust-lead { color: rgba(255,255,255,0.88); max-width: 620px; margin: 0 auto 2.5rem; font-size: 1.15rem; } .trust-points { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; } .trust-point { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); border-radius: var(--radius-md); padding: 1.4rem 1.8rem; min-width: 200px; } .trust-point .tp-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; /* currentColor der Icons */ margin-bottom: 0.3rem; } .trust-point .tp-icon svg { width: 26px; height: 26px; } .trust-point strong { font-family: var(--font-head); font-size: 1.1rem; } .trust-point span { color: rgba(255,255,255,0.82); font-size: 0.92rem; } /* CTA-Button auf dem Bordeaux-Band: weiß gefüllt für klaren Kontrast */ .trust .btn-primary { background: var(--pflege-white); color: var(--pflege-bordeaux); box-shadow: var(--shadow-md); } .trust .btn-primary:hover { background: rgba(255, 255, 255, 0.9); color: var(--pflege-bordeaux-dark); } /* --- Zielgruppen --- */ .audience-card { display: flex; gap: 1rem; align-items: flex-start; background: var(--pflege-bg-card); border: 1px solid var(--pflege-border); border-left: 4px solid var(--pflege-bordeaux); border-radius: var(--radius-md); padding: 1.6rem; height: 100%; box-shadow: var(--shadow-sm); } .audience-card .ac-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--pflege-bordeaux-tint); color: var(--pflege-bordeaux); /* currentColor der Icons */ flex-shrink: 0; } .audience-card .ac-icon svg { width: 24px; height: 24px; } /* --- 3-Schritte-Stepper ("Mitgestalten") --- */ .steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); max-width: 940px; margin: 0 auto; } /* Verbindungslinie hinter den Nummern (nur Desktop) */ .steps::before { content: ""; position: absolute; top: 28px; /* halbe Höhe des Nummern-Kreises (56px) */ left: 16.6%; right: 16.6%; height: 2px; background: var(--pflege-border); z-index: 0; } .step { position: relative; z-index: 1; text-align: center; padding: 0 0.5rem; } .step-num { width: 56px; height: 56px; margin: 0 auto 1.1rem; border-radius: 50%; background: var(--pflege-bordeaux); color: var(--pflege-white); font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; display: grid; place-items: center; box-shadow: var(--shadow-glow); } .step h3 { color: var(--pflege-heading); margin-bottom: 0.4rem; } .step p { color: var(--pflege-muted); margin: 0; font-size: 0.98rem; } /* Mobil/Tablet: sauberer vertikaler Stepper, Linie aus */ @media (max-width: 900px) { .steps { grid-template-columns: 1fr; max-width: 460px; } .steps::before { display: none; } } .audience-card h3 { color: var(--pflege-heading); margin-bottom: 0.3rem; } .audience-card p { color: var(--pflege-muted); margin: 0; font-size: 0.97rem; } /* --- Demo-Video-Platzhalter --- */ .video-placeholder { position: relative; max-width: 880px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); background: radial-gradient(600px 300px at 50% 40%, rgba(155,28,59,0.08), transparent 70%), var(--pflege-bg-soft); border: 1px solid var(--pflege-border); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem; color: var(--pflege-muted); text-align: center; padding: 1rem; } .video-placeholder strong { color: var(--pflege-heading); } /* EKG als Karten-Hintergrund (Watermark hinter dem Text). */ .video-ekg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0.32; /* dezentes Watermark -> Text bleibt gut lesbar */ /* an den Rändern weich auslaufen */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); } .video-ekg svg { width: 100%; height: 55%; display: block; } /* Im Watermark kein Glow -> ruhiger Hintergrund hinter dem Text */ .video-ekg .ekg-trace { filter: none; stroke-width: 2; } /* Textinhalt über dem EKG */ .video-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; } .video-content .btn { margin-top: 0.4rem; } /* --- Screenshot / App-Mockup Platzhalter --- */ .mockup { border-radius: var(--radius-lg); border: 1px solid var(--pflege-border); overflow: hidden; box-shadow: var(--shadow-md); background: var(--pflege-bg-card); } /* ----------------------------------------------------------------- 8. Formular ----------------------------------------------------------------- */ .form-card { max-width: 640px; margin: 0 auto; background: var(--pflege-bg-card); border: 1px solid var(--pflege-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: clamp(1.5rem, 4vw, 2.5rem); } .form-group { margin-bottom: 1.2rem; } .form-group label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.4rem; color: var(--pflege-heading); } .form-group .req { color: var(--pflege-bordeaux); } .form-control { width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--pflege-text); background: var(--pflege-white); border: 1.5px solid var(--pflege-border); border-radius: var(--radius-sm); padding: 0.8rem 1rem; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .form-control::placeholder { color: #9aa6b6; } .form-control:focus { outline: none; border-color: var(--pflege-bordeaux); box-shadow: 0 0 0 3px var(--pflege-bordeaux-soft); } textarea.form-control { min-height: 140px; resize: vertical; } .form-hint { font-size: 0.88rem; color: var(--pflege-muted); margin-top: 1rem; text-align: center; } /* --- Kontakt-Layout: Formular + Info-Panel --- */ .contact-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: var(--space-md); align-items: start; max-width: 960px; margin: 0 auto; } /* Formular-Karte füllt im Grid ihre Spalte (Zentrierung aufheben) */ .contact-grid .form-card { max-width: none; margin: 0; } .contact-info { background: var(--pflege-bg-soft); border: 1px solid var(--pflege-border); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2rem); } .contact-info > h3 { color: var(--pflege-heading); margin-bottom: 0.4rem; } .contact-info > p { color: var(--pflege-muted); margin-bottom: 1.6rem; } .contact-points { display: flex; flex-direction: column; gap: 1.15rem; } .contact-points li { display: flex; gap: 0.85rem; align-items: flex-start; } .contact-points .ci-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--pflege-bordeaux-tint); color: var(--pflege-bordeaux); flex-shrink: 0; } .contact-points .ci-icon svg { width: 20px; height: 20px; } .contact-points strong { display: block; color: var(--pflege-heading); font-family: var(--font-head); font-size: 1rem; } .contact-points span { color: var(--pflege-muted); font-size: 0.95rem; } .contact-points a { color: var(--pflege-bordeaux); font-weight: 600; word-break: break-word; } .contact-points a:hover { text-decoration: underline; } /* Mobil: untereinander, Info-Panel unter das Formular */ @media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; max-width: 640px; } } /* Erfolgs- / Fehlermeldungen */ .alert { border-radius: var(--radius-md); padding: 1.1rem 1.3rem; margin-bottom: 1.5rem; font-size: 0.98rem; border: 1px solid transparent; } .alert-success { background: #e7f7ee; border-color: #a9e0c2; color: #1c6b40; } .alert-error { background: #fdecec; border-color: #f4b9b9; color: #9b1c1c; } /* Honeypot-Feld gegen Spam (versteckt) */ .hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* ----------------------------------------------------------------- 9. Footer ----------------------------------------------------------------- */ .site-footer { background: var(--pflege-bg-soft); border-top: 1px solid var(--pflege-border); color: var(--pflege-muted); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-md); padding-block: var(--space-lg); } .footer-brand .brand-mark { font-size: 1.6rem; } .footer-logo { height: 48px; width: auto; display: block; margin-bottom: 0.85rem; } .footer-tagline { margin-top: 0.8rem; max-width: 320px; font-size: 0.95rem; color: var(--pflege-muted); } .footer-heading { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--pflege-heading); margin-bottom: 0.9rem; } .footer-nav a { color: var(--pflege-muted); display: inline-block; padding: 0.25rem 0; } .footer-nav a:hover { color: var(--pflege-bordeaux); } .footer-bottom { border-top: 1px solid var(--pflege-border); } .footer-bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; padding-block: 1.3rem; font-size: 0.9rem; } .footer-bottom-inner p { margin: 0; } .footer-producer a { color: var(--pflege-bordeaux); font-weight: 600; } .footer-producer a:hover { color: var(--pflege-bordeaux-dark); } /* ----------------------------------------------------------------- 10. Utilities & Animationen ----------------------------------------------------------------- */ .text-center { text-align: center; } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mb-0 { margin-bottom: 0; } .muted { color: var(--pflege-muted); } /* Scroll-Reveal: Start-Zustand, .is-visible wird per JS gesetzt */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.is-visible { opacity: 1; transform: none; } /* Lange Rechtstext-Seiten (Impressum/Datenschutz) */ .legal { max-width: 800px; margin: 0 auto; } .legal h2 { margin-top: 2.5rem; } .legal h3 { margin-top: 1.8rem; color: var(--pflege-heading); } .legal p, .legal li { color: var(--pflege-muted); } .legal a { color: var(--pflege-bordeaux); } .legal a:hover { text-decoration: underline; } .legal ul { list-style: disc; padding-left: 1.3rem; margin-bottom: 1rem; } .legal li { margin-bottom: 0.4rem; } /* Klar erkennbare Platzhalter im Rechtstext */ .placeholder { background: var(--pflege-bordeaux-soft); color: var(--pflege-bordeaux); border: 1px dashed var(--pflege-bordeaux); border-radius: 4px; padding: 0.05em 0.4em; font-weight: 600; font-size: 0.92em; } /* Reduzierte Bewegung respektieren */ @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; transition: none; } .btn:hover, .feature-card:hover { transform: none; } /* EKG nicht animieren -> komplette Linie ruhig anzeigen */ .ekg-base { animation: none; } .ekg-trace { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; filter: none; stroke: rgba(155, 28, 59, 0.55); } } /* ----------------------------------------------------------------- 11. Responsive ----------------------------------------------------------------- */ @media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 720px) { /* Mobile Navigation: Burger einblenden, Nav als Dropdown */ .nav-toggle { display: flex; } .primary-nav { position: fixed; top: var(--header-h); left: 0; right: 0; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--pflege-border); box-shadow: var(--shadow-md); max-height: 0; overflow: hidden; transition: max-height var(--t-base); } .primary-nav.is-open { max-height: 80vh; } .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 1.25rem 1.25rem; } .primary-nav a { padding: 0.85rem 0.5rem; border-radius: var(--radius-sm); } .primary-nav .nav-cta { margin-top: 0.6rem; } .primary-nav .nav-cta a { display: block; text-align: center; } .grid-3, .grid-2 { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .hero-actions { flex-direction: column; } .hero-actions .btn { width: 100%; } .trust-point { min-width: 0; width: 100%; } } @media (max-width: 420px) { body { font-size: 1rem; } .section { padding-block: var(--space-lg); } }