/* website.css — Theme der öffentlichen Website (neu.freya-bewegen.de). * * ALLES hier ist unter `.theme-website` gescoped. Studio/LMS und die Website * teilen sich dieselbe Editor-Shell (`landing/page.html`); keine Regel aus * dieser Datei darf eine Studio-Seite treffen. Deshalb auch der eigene * Token-Präfix `--web-*`: keine Kollision mit `--color-*`/`--space-*` aus * style.css, und der Wechsel `theme=studio|website` bleibt eine reine * Klassen-Frage am . * * Werte-Quelle: Baukasten-Entwürfe „Freya-Bewegen Website Redesign" * (offizielle Brand-Palette Petrol/Flieder, identisch zu app/core/branding.py). * * Aufbau: 1) Tokens 2) Grundlagen 3) Typo 4) Layout 5) Buttons * 6) Navigation 7) Footer 8) Editor-Neutralisierer */ /* ─────────────────────────────────────────────────────── 1) Tokens */ .theme-website { /* Palette */ --web-petrol: #276378; --web-petrol-dark: #1B4552; --web-violet: #4F2678; --web-lilac: #E1CBF7; --web-brown: #6B3F1E; --web-cream: #FFFAF5; --web-beige: #F0EDE8; --web-white: #ffffff; /* Rollen — Flächen */ --web-bg: var(--web-cream); --web-bg-alt: var(--web-beige); --web-bg-dark: var(--web-petrol-dark); --web-surface: var(--web-white); --web-surface-soft: var(--web-lilac); /* Rollen — Text. Die Alpha-Stufen sind die Konvention der Entwürfe: .8 = Fließtext, .65 = Nebentext, .55 = Fußnoten/Meta. */ --web-text: var(--web-petrol-dark); --web-text-muted: rgba(27, 69, 82, .8); --web-text-soft: rgba(27, 69, 82, .65); --web-text-faint: rgba(27, 69, 82, .55); --web-on-dark: rgba(255, 250, 245, .75); --web-on-dark-soft: rgba(255, 250, 245, .7); --web-on-dark-full: #FFFAF5; /* Rollen — Akzent & Links */ --web-accent: var(--web-violet); --web-link: var(--web-petrol); --web-link-hover: var(--web-violet); /* Linien — hell auf Creme, Flieder-transparent auf Petrol */ --web-border-soft: rgba(39, 99, 120, .12); --web-border: rgba(39, 99, 120, .14); --web-border-strong: rgba(39, 99, 120, .16); --web-border-dark: rgba(225, 203, 247, .18); /* Schrift */ --web-font-heading: 'Playfair Display', Georgia, serif; --web-font-body: 'Open Sans', system-ui, -apple-system, sans-serif; /* Typo-Skala — clamp() von 375px bis 1180px (die Entwürfe sind auf 1180px gezeichnet, darüber wächst nichts mehr). */ --web-fs-h1: clamp(2rem, 1.42rem + 2.48vw, 3.25rem); /* 32 → 52 */ --web-fs-h2: clamp(1.5rem, 1.33rem + 0.75vw, 1.875rem); /* 24 → 30 */ --web-fs-h3: clamp(1.125rem, 1.09rem + 0.16vw, 1.25rem); /* 18 → 20 */ --web-fs-lead: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem); /* 16 → 17 */ --web-fs-body: 1rem; --web-fs-small: 0.875rem; --web-fs-micro: 0.8125rem; --web-fs-eyebrow: 0.78rem; /* Block-Headlines: die Entwürfe setzen Sektions-Titel größer als die Standard-h2 (34-38px) und die c-Variante nochmal darüber (40-44px). */ --web-fs-title-lg: clamp(1.625rem, 1.29rem + 1.44vw, 2.35rem); /* 26 → 37.6 */ --web-fs-title-xl: clamp(1.875rem, 1.46rem + 1.79vw, 2.775rem); /* 30 → 44.4 */ --web-fs-dream: clamp(1.3rem, 1.13rem + 0.75vw, 1.6875rem);/* 21 → 27 */ /* Sperrung: Eyebrows und Buttons tragen die 4px-Spur der Entwürfe. */ --web-tracking-eyebrow: 4px; --web-tracking-wide: 2px; /* Maße */ --web-wrap: 1180px; --web-wrap-text: 720px; --web-gutter: clamp(20px, 4vw, 40px); --web-section-y: clamp(48px, 7vw, 72px); --web-radius: 10px; --web-radius-sm: 4px; --web-radius-pill: 999px; } /* ────────────────────────────────────────────────── 2) Grundlagen */ body.theme-website { background: var(--web-bg); color: var(--web-text); font-family: var(--web-font-body); font-size: var(--web-fs-body); line-height: 1.65; } .theme-website a { color: var(--web-link); } .theme-website a:hover { color: var(--web-link-hover); } .theme-website img { max-width: 100%; } /* ───────────────────────────────────────────────────────── 3) Typo */ .theme-website h1, .theme-website h2, .theme-website h3 { font-family: var(--web-font-heading); font-weight: 600; color: var(--web-text); line-height: 1.12; letter-spacing: -0.5px; } .theme-website h1 { font-size: var(--web-fs-h1); } .theme-website h2 { font-size: var(--web-fs-h2); } .theme-website h3 { font-size: var(--web-fs-h3); letter-spacing: 0; line-height: 1.3; } /* Farbige Kursiv-Klausel — das wiederkehrende Stilmittel der Entwürfe: der zweite Halbsatz einer Headline steht kursiv in Petrol bzw. Flieder. */ .theme-website h1 em, .theme-website h2 em { font-style: italic; color: var(--web-petrol); } .theme-website p { color: var(--web-text-muted); font-size: var(--web-fs-lead); } /* Eyebrow — die gesperrte Kleinschrift über jeder Sektions-Headline. */ .theme-website .web-eyebrow { margin: 0 0 18px; font-size: var(--web-fs-eyebrow); font-weight: 800; letter-spacing: var(--web-tracking-eyebrow); text-transform: uppercase; color: var(--web-accent); } /* ─────────────────────────────────────────────────────── 4) Layout */ .theme-website .web-wrap { max-width: var(--web-wrap); margin: 0 auto; padding: 0 var(--web-gutter); } .theme-website .web-section { padding: var(--web-section-y) 0; } /* ────────────────────────────────────────────────────── 5) Buttons */ .theme-website .web-btn { display: inline-block; padding: 15px 30px; border: 1.5px solid transparent; border-radius: var(--web-radius-sm); font-family: var(--web-font-body); font-size: var(--web-fs-small); font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .theme-website .web-btn--primary { background: var(--web-petrol); color: var(--web-on-dark-full); } .theme-website .web-btn--primary:hover { background: var(--web-violet); color: var(--web-on-dark-full); } .theme-website .web-btn--ghost { background: transparent; border-color: var(--web-petrol); color: var(--web-petrol); } .theme-website .web-btn--ghost:hover { background: var(--web-petrol); color: var(--web-on-dark-full); } .theme-website .web-btn--accent { background: var(--web-lilac); color: var(--web-violet); border-radius: var(--web-radius-pill); } .theme-website .web-btn--accent:hover { background: var(--web-on-dark-full); color: var(--web-violet); } /* Block-CTA-Default (Variante a, Entwurf: Petrol auf Creme). Die Varianten- Overrides (--b/--c) stehen später in der Datei und gewinnen. */ .theme-website .web-btn--block { background: var(--web-petrol); color: var(--web-on-dark-full); } .theme-website .web-btn--block:hover { background: var(--web-violet); color: var(--web-on-dark-full); } /* ─────────────────────────────────────────────────── 6) Navigation */ .theme-website .web-nav { position: sticky; top: 0; z-index: 100; background: var(--web-bg); border-bottom: 1px solid var(--web-border-strong); } .theme-website .web-nav__inner { max-width: var(--web-wrap); margin: 0 auto; padding: 0 var(--web-gutter); min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .theme-website .web-nav__wordmark { font-family: var(--web-font-heading); font-size: 1.3125rem; color: var(--web-petrol); text-decoration: none; white-space: nowrap; } .theme-website .web-nav__wordmark:hover { color: var(--web-violet); } .theme-website .web-nav__menu { display: flex; align-items: center; gap: 30px; font-size: 0.84375rem; font-weight: 600; } .theme-website .web-nav__link { color: var(--web-petrol); text-decoration: none; } .theme-website .web-nav__link:hover, .theme-website .web-nav__link.is-active { color: var(--web-violet); } /* Burger — nur mobil sichtbar (siehe Breakpoint unten). */ .theme-website .web-nav__burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; background: none; border: 0; cursor: pointer; } .theme-website .web-nav__burger-bar { display: block; height: 2px; background: var(--web-petrol); border-radius: 2px; } @media (max-width: 860px) { .theme-website .web-nav__burger { display: flex; } .theme-website .web-nav__inner { position: relative; min-height: 60px; } /* Klapp-Panel unter der Leiste. `hidden`-Attribut wäre hier falsch: das Menü ist auf Desktop immer offen, nur mobil geschlossen. */ .theme-website .web-nav__menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--web-gutter) 16px; background: var(--web-bg); border-bottom: 1px solid var(--web-border-strong); font-size: 1rem; } .theme-website .web-nav__menu.is-open { display: flex; } .theme-website .web-nav__link { padding: 12px 0; border-bottom: 1px solid var(--web-border-soft); } .theme-website .web-nav__link:last-child { border-bottom: 0; } } /* ─────────────────────────────────────────────────────── 7) Footer */ .theme-website .web-footer { background: var(--web-bg-dark); color: var(--web-on-dark); padding: 44px 0; font-size: var(--web-fs-micro); } .theme-website .web-footer__inner { max-width: var(--web-wrap); margin: 0 auto; padding: 0 var(--web-gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .theme-website .web-footer__wordmark { font-family: var(--web-font-heading); font-size: 1.1875rem; color: var(--web-on-dark-full); text-decoration: none; } .theme-website .web-footer__links { display: flex; gap: 26px; flex-wrap: wrap; } .theme-website .web-footer a { color: var(--web-on-dark); text-decoration: none; } .theme-website .web-footer a:hover { color: var(--web-on-dark-full); text-decoration: underline; } @media (max-width: 560px) { .theme-website .web-footer__inner { flex-direction: column; align-items: flex-start; gap: 18px; } .theme-website .web-footer__links { flex-direction: column; gap: 10px; } } /* ──────────────────────────────────────── 8) Editor-Neutralisierer `landing/page.html` bringt eine eigene