/* ============================================================ LEICHT IN BEWEGUNG · zentrales Stylesheet bewegungs-idee.de · Stand 2026 Dieses File wird von ALLEN Seiten geladen. Änderungen hier wirken sich auf die ganze Website aus. Auf Haus-Tokensystem umgestellt (siehe assets/tokens.css, muss im VOR dieser Datei geladen werden). Schriftfamilien, line- height-body, letter-spacing-eyebrow und Reveal-Timing kommen jetzt aus dem Haus-:root. Farben (--gruen/--blaugrau/--dunkel/--offwhite/ --warmsand/--gruenlich) bleiben unverändert lokal – das ist das Markenfarbsystem und Quelle, nicht Ziel der Migration. Abstände: nur Werte, die exakt einem Haus-Space-Token entsprechen (8/16/32/64/128px), wurden auf --space-xs/sm/md/lg/xl umgestellt. Alle anderen Literale bleiben bewusst unverändert stehen. ============================================================ */ :root{ /* Markenfarben */ --gruen:#90ca4d; --blaugrau:#6a8ca3; --dunkel:#232629; --offwhite:#fefefc; --warmsand:#f7f4ef; --gruenlich:#f4f8ef; /* abgeleitete Töne */ --text:#3a3d40; --text-leise:#6f7376; --linie:rgba(106,140,163,0.22); /* Maße */ --maxread:680px; --maxwide:1180px; } *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{ font-family:var(--font-sans);font-weight:400; color:var(--text);background:var(--offwhite); line-height:var(--line-height-body);font-size:18px; -webkit-font-smoothing:antialiased; } /* === HEADER / NAVIGATION === */ header.site{ position:sticky;top:0;z-index:50; background:rgba(254,254,252,0.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--linie); } .nav{ max-width:var(--maxwide);margin:0 auto;padding:20px var(--space-md); display:flex;align-items:center;justify-content:space-between;gap:24px; } .logo{ font-family:var(--font-serif);font-size:22px;color:var(--dunkel); text-decoration:none;font-weight:500;display:flex;align-items:center;gap:10px; } .logo-img{height:34px;width:auto;display:block;} .nav-links{display:flex;gap:30px;align-items:center;} .nav-links a{ color:var(--dunkel);text-decoration:none;font-size:15.5px; letter-spacing:.01em;transition:color .25s; } .nav-links a:hover{color:var(--gruen);} .nav-cta{ background:var(--gruen);color:var(--dunkel)!important; padding:10px 22px;border-radius:24px;font-weight:700;font-size:15px; } .nav-cta:hover{opacity:.9;} .nav-toggle{display:none;background:none;border:0;cursor:pointer;font-size:22px;} /* === BUTTON (vereinheitlicht) === Uebernimmt Form/Groesse/Hover-Mechanik der Landingpage-.btn/.btn--primary (assets/verbindung.css, muehelos-singen.css, koerpersprechstunde.css, therapeuten-workshop.css sind hier untereinander wortgleich), behaelt aber die Markenfarbe --gruen dieses Haupttemplates statt des dortigen dunklen --ink. Ersetzt .hero-cta, .nav-cta--xl und .cta-btn (bisher elf Buttons auf Index/Einzelunterricht/Workshops/Wissen/Ueber-uns) – ab jetzt nur noch hier zentral gepflegt. Textfarbe bewusst --dunkel statt --offwhite: Weiss auf --gruen kommt nur auf ~1.9:1 Kontrast (WCAG-Fail, auch fuer Grosstext unter dem 3:1-Minimum). --dunkel auf --gruen liegt bei ~7.8:1 (besteht AAA). --dunkel ist zudem bereits die Farbe, die JEDER bestehende Gruen-Button auf diesen Seiten nutzt (.nav-cta color steht sogar mit !important). Muss NACH .nav-cta stehen: die grossen CTA-Buttons tragen sowohl .nav-cta (JS-Dropdown-Hook, siehe Erstgespraech-Skript in den Seiten) als auch .btn/.btn--primary (Optik) – bei gleicher Spezifitaet gewinnt hier die spaeter stehende Regel. Der kleine Header-Button behaelt nur .nav-cta (ohne .btn) und bleibt dadurch unveraendert klein. */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:12px; padding:16px 28px;border-radius:999px; font-family:'Lato',sans-serif;font-size:14px;font-weight:500;line-height:1.2;letter-spacing:.04em; border:1px solid transparent;cursor:pointer; text-decoration:none;white-space:nowrap; transition:transform 280ms cubic-bezier(.22,1,.36,1),background 280ms ease,color 280ms ease,box-shadow 280ms ease,border-color 280ms ease,filter 280ms ease; } .btn:hover{transform:translateY(-1px);} .btn--primary{ background:var(--gruen);color:var(--dunkel); box-shadow:0 1px 0 rgba(35,38,41,.04),0 12px 28px -16px rgba(35,38,41,.5); } .btn--primary:hover{ background:#81bd3f;filter:brightness(1.08); box-shadow:0 1px 0 rgba(0,0,0,.04),0 18px 36px -16px rgba(35,38,41,.65); } /* === TRANSPARENT-OVERLAY-HEADER === Nur auf Seiten mit dunklem, vollflaechigem Hero-Foto (Klasse .header--overlay am

). Oben liegt der Header transparent ueber dem Hero (heller Text); nach dem Scrollen bekommt er den hellen Standard-Hintergrund und dunklen Text (.is-scrolled, per JS). */ header.site.header--overlay{ position:fixed;left:0;right:0;top:0; background:transparent; backdrop-filter:none; border-bottom-color:transparent; transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease; } header.site.header--overlay .logo{color:#fff;transition:color .3s ease;} header.site.header--overlay .nav-links a{color:#fff;} header.site.header--overlay .nav-toggle{color:#fff;} header.site.header--overlay.is-scrolled{ background:rgba(254,254,252,0.86); backdrop-filter:blur(10px); border-bottom-color:var(--linie); } header.site.header--overlay.is-scrolled .logo{color:var(--dunkel);} header.site.header--overlay.is-scrolled .nav-links a{color:var(--dunkel);} header.site.header--overlay.is-scrolled .nav-toggle{color:var(--dunkel);} /* CTA-Button deutlich vom Menue absetzen (nur Desktop). Zielt auf den Header-Pill-Button direkt (frueher .nav-cta-wrap, das den Button umschloss – entfallen seit der Umstellung auf das zentrale Bottom-Sheet, assets/sheet.js, das ohne Wrapper-Element auskommt). */ @media(min-width:721px){ .nav--with-cta button.nav-cta{margin-left:22px;} } /* Nav-Container auf breiten Desktop-Screens weiten, damit der Erstgespraech-Button naeher am rechten Viewport-Rand steht statt im 1180px-Rahmen mittig zu wirken. Nur Desktop (>720px) betroffen – unterhalb greift weiterhin der max-width-Rahmen, da hier ohnehin kein Freiraum entsteht. Mobiles Burger-Menue bleibt unberuehrt. */ @media(min-width:721px){ .nav{max-width:1400px;} } /* Mobiles offenes Menue ist ein heller Panel -> dunkler Text, unabhaengig vom Overlay-Zustand des Headers */ @media(max-width:720px){ header.site.header--overlay .nav.nav-open .nav-links a{color:var(--dunkel);} } /* ============================================================ HERO-KOMPONENTE (gemeinsam fuer index/einzelunterricht/ ueber-uns/workshops) – vollflaechiges Foto mit dunklem Overlay, linksbuendiger Text, vertikal zentriert per Flexbox im jeweiligen Hero-Container. Seiten-spezifisch bleibt (im