/* ============================================================ GRAF PFLEGEDIENST – DESIGN SYSTEM Light: Logo-Grün | Dark Mode: Logo-Pink ============================================================ */ /* ---------- 1. Design Tokens ---------- */ :root { /* Farben – Light Theme (Grün, abgeleitet vom Logo) */ --color-primary: #2e7d32; --color-primary-hover: #1f5c23; --color-accent: #d94f7e; --color-accent-hover: #b93a67; --color-secondary: #6aa84f; --color-bg: #fafcf7; --color-surface: #ffffff; --color-text: #1c241c; --color-text-muted: #4a5548; --color-border: #dde5d6; --color-tint: #eef4e9; --color-focus: #1f5c23; --color-focus-inner: #ffffff; --color-error: #b3261e; /* Kontrastfarben für Buttons/Flächen */ --color-on-primary: #ffffff; --color-on-accent: #ffffff; /* Flächen mit fester Bedeutung */ --color-footer-bg: #1c241c; --color-footer-text: #e6ebe3; --color-recruiting-bg: #2e7d32; --color-overlay: rgba(28, 36, 28, 0.55); --pulse-color: 217, 79, 126; /* Typografie – Fluid Scale */ --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-display: Georgia, "Times New Roman", serif; --fs-sm: clamp(0.9rem, 0.85rem + 0.2vw, 1rem); --fs-base: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); --fs-lg: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem); --fs-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem); --fs-2xl: clamp(1.9rem, 1.5rem + 1.8vw, 2.8rem); --fs-hero: clamp(2.2rem, 1.7rem + 2.6vw, 3.6rem); /* Layout & Effekte */ --container: 74rem; --radius: 1rem; --radius-sm: 0.6rem; --shadow-sm: 0 2px 8px rgba(31, 92, 35, 0.08); --shadow-md: 0 8px 28px rgba(31, 92, 35, 0.13); --shadow-lg: 0 18px 50px rgba(31, 92, 35, 0.18); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --tap-target: 52px; } /* ---------- Dark Mode (dunkel-neutral, Pink nur als Akzent) ---------- Wird per Klasse .theme-dark auf aktiviert. Kräftiges Pink (--color-accent) bleibt CTAs, dem Notruf-Button und kleinen Highlights vorbehalten. Alles andere ist ruhig und dunkel; --color-primary ist nur ein dezentes, entsättigtes Rosé für Links und Primär-Buttons. */ .theme-dark { --color-primary: #c99cae; --color-primary-hover: #dab3c2; --color-accent: #ec7fa0; --color-accent-hover: #f49ab4; --color-secondary: #a9a1a6; --color-bg: #141317; --color-surface: #1e1c22; --color-text: #f0edf1; --color-text-muted: #b5aeb4; --color-border: #37333c; --color-tint: #232028; --color-focus: #ec7fa0; --color-focus-inner: #141317; --color-error: #ff8a80; --color-on-primary: #221a1f; --color-on-accent: #2a1018; --color-footer-bg: #0e0d11; --color-footer-text: #c9c3c9; --color-recruiting-bg: #1e1c22; --color-overlay: rgba(0, 0, 0, 0.7); --pulse-color: 236, 127, 160; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.45); --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55); } /* Fotos im Dark Mode leicht abdunkeln, damit nichts blendet */ .theme-dark .hero__image, .theme-dark .team-card__photo { filter: brightness(0.85); } /* ---------- 2. Reset & Basis ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; } html { scroll-behavior: smooth; scroll-padding-top: 8rem; } body { font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.65; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out); } img { max-width: 100%; height: auto; display: block; } h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; color: var(--color-text); text-wrap: balance; } a { color: var(--color-primary); text-underline-offset: 0.2em; } a:hover { color: var(--color-primary-hover); } .icon { width: 1.25em; height: 1.25em; flex-shrink: 0; } .icon--chevron { transition: transform 0.3s var(--ease-out); } /* Fokus-Ring: zweifarbig, 3px, unübersehbar */ :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--color-focus-inner); border-radius: 4px; } .skip-link { position: absolute; top: -100%; left: 1rem; z-index: 200; padding: 0.9rem 1.4rem; background: var(--color-primary); color: var(--color-on-primary); border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-weight: 700; text-decoration: none; } .skip-link:focus-visible { top: 0; color: var(--color-on-primary); } .container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); } .container--narrow { max-width: 52rem; } /* ---------- 3. Buttons & Interaktive Grundelemente ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: var(--tap-target); padding: 0.8rem 1.7rem; border-radius: var(--radius-sm); border: 2px solid transparent; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), background-color 0.25s var(--ease-out), color 0.25s var(--ease-out); } .btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .btn:active { transform: translateY(0) scale(0.98); } .btn--primary { background: var(--color-primary); color: var(--color-on-primary); } .btn--primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); } .btn--accent { background: var(--color-accent); color: var(--color-on-accent); } .btn--accent:hover { background: var(--color-accent-hover); color: var(--color-on-accent); } .btn--secondary { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-primary); } .btn--ghost { background: transparent; color: var(--color-primary); border-color: var(--color-border); } .btn--ghost:hover { border-color: var(--color-primary); } .btn--full { width: 100%; } /* ---------- 4. Utility-Topbar (Barrierefreiheits-Konsole) ---------- */ .utility-bar { background: var(--color-primary); color: var(--color-on-primary); font-size: var(--fs-sm); } .theme-dark .utility-bar { background: #100b0e; color: #f6edf1; border-bottom: 1px solid var(--color-border); } .utility-bar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; padding-block: 0.5rem; } .utility-bar__group { display: flex; align-items: center; gap: 0.4rem; } .utility-bar__label { font-weight: 700; margin-right: 0.2rem; } .utility-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-width: var(--tap-target); min-height: var(--tap-target); padding: 0.4rem 0.9rem; background: rgba(255, 255, 255, 0.12); color: inherit; border: 2px solid rgba(255, 255, 255, 0.4); border-radius: var(--radius-sm); font: inherit; font-weight: 700; cursor: pointer; transition: background-color 0.25s var(--ease-out), transform 0.25s var(--ease-out); } .utility-btn:hover { background: rgba(255, 255, 255, 0.25); transform: translateY(-2px); } .utility-btn[aria-pressed="true"] { background: #fff; color: var(--color-primary); border-color: #fff; } .theme-dark .utility-btn { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.25); } .theme-dark .utility-btn:hover { background: rgba(255, 255, 255, 0.14); } .theme-dark .utility-btn[aria-pressed="true"] { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); } .emergency-call { position: relative; display: inline-flex; align-items: center; gap: 0.6rem; margin-left: auto; min-height: var(--tap-target); padding: 0.5rem 1.3rem; background: var(--color-accent); color: var(--color-on-accent); border-radius: 999px; font-weight: 800; text-decoration: none; transition: background-color 0.25s var(--ease-out), transform 0.25s var(--ease-out); } .emergency-call:hover { background: var(--color-accent-hover); color: var(--color-on-accent); transform: translateY(-2px); } .emergency-call__pulse { position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(var(--pulse-color), 0.65); animation: pulse 2.2s infinite; pointer-events: none; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--pulse-color), 0.65); } 70% { box-shadow: 0 0 0 14px rgba(var(--pulse-color), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--pulse-color), 0); } } /* ---------- 5. Header & Navigation ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--color-surface) 82%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--color-border); transition: box-shadow 0.3s var(--ease-out); } .site-header.is-compact { box-shadow: var(--shadow-md); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 0.7rem; transition: padding 0.3s var(--ease-out); } .site-header.is-compact .site-header__inner { padding-block: 0.35rem; } .brand { display: inline-flex; align-items: center; gap: 0.85rem; text-decoration: none; min-height: var(--tap-target); } .brand__logo { width: 3.4rem; height: 3.4rem; object-fit: contain; transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out); } .site-header.is-compact .brand__logo { width: 2.7rem; height: 2.7rem; } /* Logo-Wechsel je Theme: hell = grün, dunkel = pink */ .brand__logo--dark { display: none; } .theme-dark .brand__logo--light { display: none; } .theme-dark .brand__logo--dark { display: block; } .brand__name { display: block; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--color-primary); line-height: 1.1; } .brand__tagline { display: block; font-size: var(--fs-sm); color: var(--color-text-muted); } .main-nav__list { display: flex; align-items: center; gap: 0.25rem; list-style: none; padding: 0; } .main-nav__item { position: relative; } .main-nav__link { display: inline-flex; align-items: center; gap: 0.35rem; min-height: var(--tap-target); padding: 0.5rem 0.95rem; background: none; border: none; border-radius: var(--radius-sm); font: inherit; font-weight: 600; color: var(--color-text); text-decoration: none; cursor: pointer; position: relative; transition: color 0.25s var(--ease-out); } .main-nav__link::after { content: ""; position: absolute; left: 0.95rem; right: 0.95rem; bottom: 0.35rem; height: 3px; border-radius: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease-out); } .main-nav__link:hover { color: var(--color-primary); } .main-nav__link:hover::after { transform: scaleX(1); } .main-nav__link--cta { background: var(--color-accent); color: var(--color-on-accent); margin-left: 0.5rem; } .main-nav__link--cta::after { display: none; } .main-nav__link--cta:hover { background: var(--color-accent-hover); color: var(--color-on-accent); } .main-nav__item--dropdown .icon--chevron { width: 1em; height: 1em; } .main-nav__link[aria-expanded="true"] .icon--chevron { transform: rotate(180deg); } .dropdown { position: absolute; top: calc(100% + 0.4rem); left: 0; min-width: 17rem; padding: 0.5rem; list-style: none; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(-8px); visibility: hidden; transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0.25s; } .dropdown.is-open { opacity: 1; transform: translateY(0); visibility: visible; } .dropdown__link { display: flex; align-items: center; min-height: var(--tap-target); padding: 0.6rem 1rem; border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; color: var(--color-text); transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out); } .dropdown__link:hover { background: var(--color-tint); color: var(--color-primary); } .menu-toggle { display: none; flex-direction: column; justify-content: center; gap: 6px; width: var(--tap-target); height: var(--tap-target); background: none; border: 2px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; padding: 0.7rem; } .menu-toggle__bar { height: 3px; width: 100%; background: var(--color-primary); border-radius: 2px; } /* Mobiles Menü */ .mobile-menu { position: fixed; inset: 0; z-index: 150; background: var(--color-overlay); } .mobile-menu__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(24rem, 100%); padding: 1.5rem; background: var(--color-surface); overflow-y: auto; display: flex; flex-direction: column; gap: 1.5rem; box-shadow: var(--shadow-lg); } .mobile-menu__close { align-self: flex-end; width: var(--tap-target); height: var(--tap-target); display: grid; place-items: center; background: var(--color-tint); border: none; border-radius: var(--radius-sm); color: var(--color-text); cursor: pointer; } .mobile-menu__list { list-style: none; padding: 0; display: grid; gap: 0.4rem; } .mobile-menu__link { display: flex; align-items: center; min-height: var(--tap-target); padding: 0.7rem 1rem; border-radius: var(--radius-sm); font-size: var(--fs-lg); font-weight: 700; text-decoration: none; color: var(--color-text); } .mobile-menu__link:hover { background: var(--color-tint); color: var(--color-primary); } .mobile-menu__link--cta { background: var(--color-accent); color: var(--color-on-accent); justify-content: center; } .mobile-menu__link--cta:hover { background: var(--color-accent-hover); color: var(--color-on-accent); } .mobile-menu__call { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: var(--tap-target); padding: 0.8rem; background: var(--color-primary); color: var(--color-on-primary); border-radius: var(--radius-sm); font-weight: 700; text-decoration: none; text-align: center; } /* ---------- 6. Sektionen & Karten ---------- */ .section { padding-block: clamp(3.5rem, 8vw, 6rem); } .section--tinted { background: var(--color-tint); } .section__header { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3.2rem); } .section__title { font-size: var(--fs-2xl); margin-bottom: 0.8rem; } .section__lead { font-size: var(--fs-lg); color: var(--color-text-muted); } .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } /* ---------- 7. Hero ---------- */ .hero { padding-block: clamp(3rem, 7vw, 5.5rem); container-type: inline-size; } .hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .hero__eyebrow { font-weight: 700; color: var(--color-secondary); letter-spacing: 0.02em; margin-bottom: 1rem; } .hero__title { font-size: var(--fs-hero); margin-bottom: 1.2rem; } .hero__title em { font-style: normal; color: var(--color-primary); } .hero__lead { font-size: var(--fs-lg); color: var(--color-text-muted); margin-bottom: 1.6rem; max-width: 36rem; } .hero__badges { display: flex; flex-wrap: wrap; gap: 0.7rem; list-style: none; padding: 0; margin-bottom: 2rem; } .badge { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.8rem; padding: 0.4rem 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; font-weight: 700; font-size: var(--fs-sm); color: var(--color-primary); box-shadow: var(--shadow-sm); } .badge .icon { color: var(--color-accent); } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; } .hero__figure { position: relative; } .hero__image { border-radius: var(--radius); box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; object-fit: cover; } .hero__figcaption { margin-top: 0.8rem; font-size: var(--fs-sm); color: var(--color-text-muted); } /* ---------- 8. Pflege-Rechner ---------- */ .calculator { max-width: 46rem; margin-inline: auto; padding: clamp(1.5rem, 4vw, 2.5rem); } .calculator__progress { display: flex; gap: 0.5rem; list-style: none; padding: 0; margin-bottom: 2rem; } .calculator__progress-step { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.55rem 0.5rem; border-radius: var(--radius-sm); background: var(--color-tint); color: var(--color-text-muted); font-weight: 700; border: 2px solid transparent; transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out); } .calculator__progress-step.is-active { background: var(--color-primary); color: var(--color-on-primary); } .calculator__progress-step.is-done { border-color: var(--color-secondary); color: var(--color-secondary); } .calculator__question { font-size: var(--fs-xl); margin-bottom: 1.4rem; } .calculator__step[hidden] { display: none; } .choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: 0.8rem; } .choice-grid--stacked { grid-template-columns: 1fr; } .choice { display: flex; align-items: center; justify-content: center; gap: 0.7rem; min-height: var(--tap-target); padding: 0.9rem 1.1rem; background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; font-weight: 700; color: var(--color-text); text-align: center; cursor: pointer; transition: border-color 0.25s var(--ease-out), background-color 0.25s var(--ease-out), transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); } .choice:hover { border-color: var(--color-primary); transform: translateY(-3px); box-shadow: var(--shadow-sm); } .choice.is-selected, .choice--radio:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-on-primary); } .choice--radio { justify-content: flex-start; text-align: left; } .choice--radio input { width: 1.4rem; height: 1.4rem; accent-color: var(--color-accent); flex-shrink: 0; } .calculator__back { margin-top: 1.2rem; } .calculator__result { display: grid; gap: 1rem; margin-bottom: 1.5rem; } .result-box { padding: 1.3rem 1.5rem; border-radius: var(--radius-sm); border: 2px solid var(--color-border); background: var(--color-bg); } .result-box--highlight { border-color: var(--color-secondary); background: color-mix(in srgb, var(--color-secondary) 10%, var(--color-surface)); } .result-box__label { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: 0.25rem; } .result-box__value { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; color: var(--color-primary); } .result-box__detail { margin-top: 0.4rem; color: var(--color-text-muted); } .calculator__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 1rem; } .calculator__note { font-size: var(--fs-sm); color: var(--color-text-muted); } /* ---------- 9. Leistungs-Karten ---------- */ .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.4rem; } .service-card { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.8rem; transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); } .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .service-card__icon { width: 3.6rem; height: 3.6rem; display: grid; place-items: center; background: var(--color-tint); border-radius: var(--radius-sm); color: var(--color-primary); } .service-card__icon svg { width: 2.2rem; height: 2.2rem; } .service-card__title { font-size: var(--fs-lg); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .service-card__law { font-family: var(--font-body); font-size: 0.75em; font-weight: 700; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--color-secondary); color: #fff; } .theme-dark .service-card__law { background: var(--color-tint); color: var(--color-text); border: 1px solid var(--color-border); } .service-card__text { color: var(--color-text-muted); flex-grow: 1; } .service-card__coverage { display: flex; align-items: flex-start; gap: 0.5rem; font-size: var(--fs-sm); font-weight: 600; color: var(--color-secondary); } .service-card__coverage .icon { margin-top: 0.15em; } /* ---------- 10. Prozess-Schritte ---------- */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.4rem; list-style: none; padding: 0; } .step { position: relative; padding: 2rem 1.8rem 1.8rem; } .step__number { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; margin-bottom: 1rem; border-radius: 50%; background: var(--color-accent); color: var(--color-on-accent); font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; } .step__title { font-size: var(--fs-lg); margin-bottom: 0.6rem; } .step__text { color: var(--color-text-muted); } /* ---------- 11. Recruiting ---------- */ .section--recruiting { background: var(--color-recruiting-bg); } .theme-dark .section--recruiting { border-block: 1px solid var(--color-border); } .section--recruiting .section__title, .section--recruiting .section__lead { color: #fff; } .theme-dark .section--recruiting .section__title { color: var(--color-text); } .theme-dark .section--recruiting .section__lead { color: var(--color-text-muted); } .recruiting__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .recruiting__benefits { list-style: none; padding: 0; display: grid; gap: 0.7rem; color: #fff; font-weight: 600; } .theme-dark .recruiting__benefits { color: var(--color-text); } .recruiting__benefits li { display: flex; align-items: center; gap: 0.7rem; } .recruiting__benefits li::before { content: "✓"; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; flex-shrink: 0; border-radius: 50%; background: var(--color-accent); color: var(--color-on-accent); font-weight: 800; } .recruiting-form { padding: clamp(1.5rem, 4vw, 2.3rem); } .form-progress { font-weight: 700; color: var(--color-secondary); margin-bottom: 1.2rem; } .form-step { border: none; padding: 0; } .form-step[hidden] { display: none; } .form-step__legend { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; margin-bottom: 1.2rem; padding: 0; } .form-step__nav { display: flex; justify-content: space-between; gap: 0.9rem; margin-top: 1.5rem; } .form-step__nav .btn:only-child { margin-left: auto; } /* ---------- 12. Formulare (allgemein) ---------- */ .form-field { margin-bottom: 1.2rem; } .form-label { display: block; font-weight: 700; margin-bottom: 0.4rem; } .form-input { width: 100%; min-height: var(--tap-target); padding: 0.8rem 1rem; font: inherit; color: var(--color-text); background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-sm); transition: border-color 0.25s var(--ease-out); } .theme-dark .form-input { background: var(--color-bg); } .form-input:hover { border-color: var(--color-text-muted); } .form-input:focus-visible { border-color: var(--color-focus); } .form-input[aria-invalid="true"] { border-color: var(--color-error); } textarea.form-input { min-height: 8rem; resize: vertical; } .form-hint { font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: 0.35rem; } .form-error { display: flex; align-items: flex-start; gap: 0.4rem; font-size: var(--fs-sm); font-weight: 700; color: var(--color-error); margin-top: 0.45rem; } .form-error::before { content: "⚠"; flex-shrink: 0; } .form-error[hidden] { display: none; } /* ---------- 13. FAQ ---------- */ .faq-search { margin-bottom: 2rem; } .faq-search__field { position: relative; margin-top: 0.4rem; } .faq-search__field .icon { position: absolute; left: 1rem; top: 50%; translate: 0 -50%; color: var(--color-text-muted); pointer-events: none; } .faq-search__field .form-input { padding-left: 3rem; } .faq-search__status { min-height: 1.5em; font-size: var(--fs-sm); font-weight: 600; color: var(--color-secondary); margin-top: 0.5rem; } .faq-list { display: grid; gap: 0.8rem; } .faq-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; transition: box-shadow 0.3s var(--ease-out); } .faq-item:has(.faq-item__trigger[aria-expanded="true"]) { box-shadow: var(--shadow-md); border-color: var(--color-primary); } .faq-item[hidden] { display: none; } .faq-item__heading { margin: 0; font-family: var(--font-body); } .faq-item__trigger { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: var(--tap-target); padding: 1.1rem 1.4rem; background: none; border: none; font: inherit; font-size: var(--fs-lg); font-weight: 700; text-align: left; color: var(--color-text); cursor: pointer; transition: color 0.2s var(--ease-out); } .faq-item__trigger:hover { color: var(--color-primary); } .faq-item__trigger[aria-expanded="true"] .icon--chevron { transform: rotate(180deg); } .faq-item__panel { padding: 0 1.4rem 1.3rem; color: var(--color-text-muted); } .faq-empty { padding: 1.3rem 1.5rem; background: var(--color-tint); border-radius: var(--radius); font-weight: 600; } /* ---------- 14. Team & Kundenstimmen ---------- */ .team-grid { display: grid; grid-template-columns: minmax(16rem, 22rem) 1fr; gap: 1.8rem; align-items: start; } .team-card { padding: 1.6rem; text-align: center; } .team-card__photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); margin-bottom: 1.1rem; } .team-card__name { font-size: var(--fs-xl); } .team-card__role { font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0.4rem 0 0.9rem; } .team-card__quote { font-style: italic; color: var(--color-text); } .testimonials { display: grid; gap: 1.2rem; } .testimonial { padding: 1.5rem 1.7rem; } .testimonial__stars span { color: var(--color-accent); font-size: var(--fs-lg); letter-spacing: 0.15em; } .testimonial p { margin-bottom: 0.6rem; } .testimonial__author { font-size: var(--fs-sm); font-weight: 700; color: var(--color-text-muted); } /* ---------- 15. Kontakt ---------- */ .contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .contact__address { font-style: normal; display: grid; gap: 0.8rem; margin-block: 1.4rem; } .contact__area { padding: 1.5rem 1.7rem; } .contact__area-title { font-size: var(--fs-lg); margin-bottom: 0.5rem; } .contact-form { padding: clamp(1.5rem, 4vw, 2.3rem); } .contact-form__privacy { font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: 0.9rem; text-align: center; } /* ---------- 16. Footer ---------- */ .site-footer { background: var(--color-footer-bg); color: var(--color-footer-text); padding-block: 3rem 1.5rem; } .theme-dark .site-footer { border-top: 1px solid var(--color-border); } .site-footer a { color: inherit; font-weight: 600; } .site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 2rem; margin-bottom: 2.5rem; } .site-footer__brand { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; color: #fff; margin-bottom: 0.5rem; } .site-footer__list { list-style: none; padding: 0; display: grid; gap: 0.6rem; } .site-footer__list a { display: inline-flex; align-items: center; min-height: 2.5rem; } .site-footer__legal { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 1.3rem; font-size: var(--fs-sm); } /* ---------- 17. Modal ---------- */ .modal { position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; padding: 1rem; background: var(--color-overlay); } .modal[hidden] { display: none; } .modal__panel { max-width: 26rem; width: 100%; padding: 2.2rem; text-align: center; display: grid; gap: 1rem; justify-items: center; animation: modal-in 0.45s var(--ease-out); } @keyframes modal-in { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal__icon { width: 4rem; height: 4rem; } .modal__title { font-size: var(--fs-xl); } .modal__text { color: var(--color-text-muted); } /* ---------- 18. Lesehilfe (Reading Guide) ---------- */ .reading-guide { position: fixed; left: 0; right: 0; z-index: 90; height: 2.6rem; translate: 0 -50%; background: color-mix(in srgb, var(--color-accent) 16%, transparent); border-top: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent); pointer-events: none; } .reading-guide[hidden] { display: none; } /* ---------- 19. Scroll-Reveal ---------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* ---------- 20. Responsive ---------- */ @media (max-width: 62rem) { .main-nav { display: none; } .menu-toggle { display: flex; } .hero__grid, .recruiting__grid, .contact__grid, .team-grid { grid-template-columns: 1fr; } .hero__figure { order: -1; } .utility-bar__inner { justify-content: center; } .emergency-call { margin-left: 0; } } @media (max-width: 40rem) { .calculator__progress-step span { display: none; } .form-step__nav { flex-direction: column-reverse; } .form-step__nav .btn { width: 100%; } } /* ---------- 21. Reduced Motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; } .emergency-call__pulse { animation: none; } } /* ---------- 22. Theme-Umschalter: Sonne/Mond-Icon ---------- */ .icon--sun { display: none; } .theme-dark .icon--sun { display: inline-block; } .theme-dark .icon--moon { display: none; } /* ---------- 23. Rechtsseiten (Impressum & Datenschutz) ---------- */ .legal-main { padding-block: clamp(2.5rem, 6vw, 4rem); } .back-link { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--tap-target); font-weight: 700; text-decoration: none; margin-bottom: 1.5rem; } .prose h1 { font-size: var(--fs-2xl); margin-bottom: 1.2rem; } .prose h2 { font-size: var(--fs-xl); margin-top: 2.2rem; margin-bottom: 0.6rem; } .prose p, .prose ul { margin-bottom: 1rem; color: var(--color-text); } .prose ul { padding-left: 1.4rem; } .prose li { margin-bottom: 0.4rem; } .placeholder-note { padding: 1.2rem 1.4rem; margin-bottom: 2rem; border: 2px dashed var(--color-accent); border-radius: var(--radius); background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface)); font-weight: 600; } .placeholder-mark { font-weight: 800; color: var(--color-accent); } /* ---------- 24. Mobile-Feinschliff ---------- */ @media (max-width: 48rem) { html { scroll-padding-top: 5.5rem; } /* Utility-Bar kompakter: Notruf-Button volle Breite, gut tippbar */ .utility-bar__inner { gap: 0.5rem 0.8rem; padding-block: 0.6rem; } .utility-bar__label { display: none; } .utility-btn { padding: 0.4rem 0.7rem; font-size: 0.95rem; } .emergency-call { width: 100%; justify-content: center; order: 5; } /* Header: Logo + Menü-Knopf, Tagline weicht auf sehr kleinen Screens */ .brand__logo { width: 2.9rem; height: 2.9rem; } /* Hero: Bild oben, Buttons volle Breite */ .hero { padding-block: 2rem 3rem; } .hero__actions .btn { width: 100%; } .hero__badges { gap: 0.5rem; } .badge { font-size: 0.9rem; padding: 0.35rem 0.8rem; } /* Sektionen: weniger Luft, mehr Inhalt im Blick */ .section { padding-block: 2.8rem; } .calculator { padding: 1.2rem; } .calculator__actions .btn { width: 100%; } .choice { padding: 0.8rem 0.9rem; } .service-card, .step { padding: 1.4rem; } .faq-item__trigger { font-size: var(--fs-base); padding: 1rem 1.1rem; } .faq-item__panel { padding: 0 1.1rem 1.1rem; } .testimonial { padding: 1.2rem 1.3rem; } .contact-form, .recruiting-form { padding: 1.3rem; } } @media (max-width: 26rem) { .brand__tagline { display: none; } .choice-grid { grid-template-columns: 1fr 1fr; } .choice-grid--stacked { grid-template-columns: 1fr; } }