/* ══════════════════════════════════════════════════════════════════ VITAREA · Gemeinsames Stylesheet Corporate Design „Jahresringe / Longevity Edition" Aufbau: 1 Farben und Grundwerte 2 Reset und Basis 3 Zugänglichkeit 4 Navigation 5 Hero 6 Buttons 7 Startseite 8 Preisseite 9 Textseiten 10 Kontaktformular 11 Einwilligung für externe Einbettungen 12 Mitgliedschafts-Banner 13 Footer 14 Responsive Seitenbereiche werden über eine Klasse am gesteuert: .p-home Startseite (index.html) .p-preise Mitgliedschaft und Preise .p-text Textseiten (Kursplan, Impressum, Datenschutz, AGB) Die Schriftdateien liegen unter assets/fonts/ und werden gleich zu Beginn dieser Datei eingebunden – es geht keine Anfrage an Google. ══════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────── 0 · Schriften (liegen lokal – DSGVO) Inter (variabel 300–900) + DM Serif Display Bezogen von Google Fonts, lokal ausgeliefert – es geht keine Anfrage mehr an Google. ══════════════════════════════════════════════ */ /* DM Serif Display · italic · 400 · latin-ext */ @font-face{ font-family:'DM Serif Display'; font-style:italic; font-weight:400; font-display:swap; src:url('../fonts/dm-serif-display-italic-400-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* DM Serif Display · italic · 400 · latin */ @font-face{ font-family:'DM Serif Display'; font-style:italic; font-weight:400; font-display:swap; src:url('../fonts/dm-serif-display-italic-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* DM Serif Display · normal · 400 · latin-ext */ @font-face{ font-family:'DM Serif Display'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/dm-serif-display-normal-400-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* DM Serif Display · normal · 400 · latin */ @font-face{ font-family:'DM Serif Display'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/dm-serif-display-normal-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Inter · normal · 300 900 · latin-ext */ @font-face{ font-family:'Inter'; font-style:normal; font-weight:300 900; font-display:swap; src:url('../fonts/inter-normal-300-900-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Inter · normal · 300 900 · latin */ @font-face{ font-family:'Inter'; font-style:normal; font-weight:300 900; font-display:swap; src:url('../fonts/inter-normal-300-900-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ───────────────────────────────────────────── 1 · Farben und Grundwerte ───────────────────────────────────────────── */ :root{ --deep:#1B3A2F; --vital:#B8E04A; --earth:#0F1C15; --warm:#F6F2EA; --stone:#E2DDD4; --sage:#7A9E8C; --ink:#20241f; --muted:#6a6d63; } /* ───────────────────────────────────────────── 2 · Reset und Basis ───────────────────────────────────────────── */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:78px} body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--warm);color:var(--ink);-webkit-font-smoothing:antialiased} .p-home,.p-preise{line-height:1.7} .p-text{line-height:1.75} a{text-decoration:none;color:inherit} img{max-width:100%;display:block} .wrap{max-width:1180px;margin:0 auto;padding:0 28px} .narrow{max-width:820px} /* Wer Bewegung reduziert haben möchte, bekommt keine Animationen */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } /* ───────────────────────────────────────────── 3 · Zugänglichkeit ───────────────────────────────────────────── */ /* Sprungmarke – nur sichtbar, wenn sie den Fokus hat */ .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--vital);color:var(--earth);font-size:14px;font-weight:800;padding:14px 24px;border-radius:0 0 12px 0} .skip:focus{left:0} /* Sichtbarer Fokus für Tastaturbedienung, überall gleich */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{ outline:3px solid var(--vital);outline-offset:3px;border-radius:4px } /* Auf hellem Grund braucht der Rahmen einen dunklen Kern, sonst reicht der Kontrast nicht */ .p-home section:not(.dark):not(.earth) a:focus-visible, .p-preise section:not(.dark) a:focus-visible, .p-text section a:focus-visible{outline-color:var(--deep)} /* Nur für Screenreader */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ───────────────────────────────────────────── 4 · Navigation ───────────────────────────────────────────── */ header.nav{position:sticky;top:0;z-index:80;background:rgba(15,28,21,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(184,224,74,.14)} .nav-in{max-width:1180px;margin:0 auto;padding:13px 28px;display:flex;align-items:center;gap:26px} .brand{display:flex;align-items:center;gap:12px;margin-right:auto} .brand-word{font-size:20px;font-weight:900;letter-spacing:.09em;color:#fff;line-height:1} .brand-word span{color:var(--vital)} .brand-sub{display:block;font-size:7.5px;letter-spacing:.24em;color:rgba(255,255,255,.56);text-transform:uppercase;margin-top:3px;font-weight:600} .nav-links{display:flex;align-items:center;gap:20px;flex-wrap:wrap} .nav-links a{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.62);transition:color .18s} .nav-links a:hover{color:var(--vital)} .nav-cta{background:var(--vital);color:var(--earth);font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:11px 21px;border-radius:99px;white-space:nowrap;transition:transform .15s} .nav-cta:hover{transform:scale(1.04)} .burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:6px} .burger span{width:24px;height:2px;background:var(--vital);display:block;border-radius:2px} /* ─── Ausklappmenü „Bereiche" ─────────────────────────────────── Die fünf Ringe stehen gebündelt hinter einem Eintrag. Zuvor lagen sie einzeln in der Leiste – die dadurch auf keiner Bildschirmbreite in eine Zeile passte. */ .bereiche{position:relative} .bereiche-knopf{ display:flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer; font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase; color:rgba(255,255,255,.62);padding:0;transition:color .18s } .bereiche-knopf:hover,.bereiche-knopf[aria-expanded="true"]{color:var(--vital)} .bereiche-knopf .pfeil{width:9px;height:9px;flex-shrink:0;transition:transform .2s} .bereiche-knopf[aria-expanded="true"] .pfeil{transform:rotate(180deg)} .bereiche-menu{ display:none;position:absolute;top:calc(100% + 14px);left:-16px;z-index:90;min-width:266px; background:var(--earth);border:1px solid rgba(184,224,74,.18);border-radius:18px; padding:10px;box-shadow:0 22px 50px rgba(0,0,0,.42) } .bereiche-menu.offen{display:block} .bereiche-menu a{ display:flex;align-items:center;gap:13px;padding:9px 12px;border-radius:12px; text-transform:none;letter-spacing:0;font-size:14px;font-weight:600; color:rgba(255,255,255,.78);transition:background .16s,color .16s } .bereiche-menu a:hover{background:rgba(184,224,74,.1);color:var(--vital)} .bereiche-menu a svg{flex-shrink:0} .bereiche-menu .nr{ display:block;font-size:9.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase; color:var(--sage);margin-bottom:1px } .bereiche-menu a:hover .nr{color:var(--vital)} /* ───────────────────────────────────────────── 5 · Hero ───────────────────────────────────────────── */ .hero{background:var(--earth);color:#fff;position:relative;overflow:hidden} .hero-rings{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none} .hero-in{position:relative;z-index:2} .eyebrow{font-size:12px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--vital);margin-bottom:16px} .hero h1 em{font-family:'DM Serif Display',Georgia,serif;font-style:italic;font-weight:400;color:var(--vital)} /* Startseite */ .p-home .hero{padding:120px 0 128px} .p-home .hero-rings{right:-180px} .p-home .eyebrow{margin-bottom:20px} .p-home .hero h1{font-size:clamp(42px,6.4vw,72px);font-weight:900;letter-spacing:-.02em;line-height:1.04;max-width:15ch} .p-home .hero p.lead{margin-top:24px;font-size:17.5px;color:rgba(255,255,255,.56);max-width:52ch} .areas{margin-top:32px;font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.56)} .areas b{color:var(--vital);font-weight:700} /* Preisseite */ .p-preise .hero{padding:82px 0 74px} .p-preise .hero-rings{right:-200px} .p-preise .hero h1{font-size:clamp(36px,5vw,58px);font-weight:900;letter-spacing:-.02em;line-height:1.06} .p-preise .hero p{margin-top:20px;font-size:17px;color:rgba(255,255,255,.55);max-width:56ch} /* Textseiten */ .p-text .hero{padding:74px 0 64px} .p-text .hero-rings{right:-220px} /* Themenseiten – ohne diese Regel steht das Ringmotiv links und der helle Mittelkreis liegt hinter der Ueberschrift. */ .p-thema .hero{padding:74px 0 64px} .p-thema .hero-rings{right:-220px} .p-thema .hero h1{font-size:clamp(34px,4.6vw,54px);font-weight:900;letter-spacing:-.02em;line-height:1.07} .p-thema .hero p{margin-top:18px;font-size:16.5px;color:rgba(255,255,255,.55);max-width:58ch} .p-text .hero h1{font-size:clamp(34px,4.6vw,54px);font-weight:900;letter-spacing:-.02em;line-height:1.07} .p-text .hero p{margin-top:18px;font-size:16.5px;color:rgba(255,255,255,.55);max-width:58ch} /* ───────────────────────────────────────────── 6 · Buttons ───────────────────────────────────────────── */ .cta-row{margin-top:40px;display:flex;gap:15px;flex-wrap:wrap} /* `border:0` ist noetig, weil `.btn` auch auf