/* ========================================================================== Gaiabloom – eigene Styles Ergänzt Tailwind (CDN). Farben und Schriften werden in der Tailwind-Config im jeder Seite definiert – hier stehen nur Dinge, die Tailwind nicht direkt abbildet (Formen, Animationen, Cookie-Banner). ========================================================================== */ /* -------------------------------------------------------------------------- 0. Schriften – selbst gehostet, KEIN Google Fonts Seit dem 10.09.2026 liegen beide Schriften im Ordner assets/fonts/ und werden von Jasmins eigenem Webspace ausgeliefert. Damit geht beim Aufruf der Seite keine IP-Adresse mehr an Google – das war der Grund für den Wechsel. Ein Abschnitt zu Google Fonts in der Datenschutzerklärung ist dadurch nicht mehr nötig. Beides sind „variable" Schriften: eine einzige Datei deckt alle Strichstärken ab, deshalb der Bereich in `font-weight`. Lizenz: SIL Open Font License 1.1 für beide. Selbst-Hosten und Mitliefern sind ausdrücklich erlaubt; der Lizenztext liegt daneben (OFL-*.txt) und gehört mit hochgeladen. -------------------------------------------------------------------------- */ @font-face { font-family: 'Quicksand'; src: url('../fonts/Quicksand-Variable.ttf') format('truetype-variations'); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Dancing Script'; src: url('../fonts/DancingScript-Variable.ttf') format('truetype-variations'); font-weight: 400 700; font-style: normal; font-display: swap; } /* -------------------------------------------------------------------------- 1. Grundlagen -------------------------------------------------------------------------- */ :root { --gb-sand: #FFF8F4; /* Hauptfarbe / Hintergrund */ --gb-peach: #F6DED2; /* Sekundärfarbe 1 */ --gb-sage: #ADCDB5; /* Salbeigrün – Akzente, Rahmen, kleine Flächen */ --gb-sage-light: #E6F0E8; /* helles Salbeigrün – große Flächen */ --gb-forest: #3D5245; /* Waldgrün – dunkler Kontrastblock */ --gb-ink: #2B2228; /* Haupt-Textfarbe */ --gb-ink-soft: #52434E; /* Nebentexte, Bildunterschriften */ --gb-terracotta: #FF5800; /* CTA-Buttons */ --gb-terracotta-dark: #CC4400; /* Terrakotta für Text auf hellem Grund */ --gb-anthracite: #332A28; /* Footer */ } html { scroll-behavior: smooth; /* Damit Ankersprünge nicht unter dem Sticky-Header landen */ scroll-padding-top: 6rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background-color: var(--gb-sand); color: var(--gb-ink); font-family: 'Quicksand', ui-rounded, 'Segoe UI', system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Die Klasse `gb-italic` ist mit Runde 4 aufgelöst: entweder Handschrift (dann `font-hand`) oder ganz normales Quicksand. Kursives Quicksand gibt es nicht mehr – Quicksand hat keinen echten Kursivschnitt, die Browser-Schrägstellung wirkte unruhig neben der Handschrift. `` im Fließtext bleibt kursiv, das ist normale Textauszeichnung. */ em { font-style: italic; letter-spacing: 0.01em; } /* Handschrift-Akzent „Dancing Script" – die einzige Handschrift der Website. Einsatzregeln: nur kurze Akzente, nie Fließtext, nie unter 1.5rem, höchstens ein Akzent je Sektion. Die Schrift hat echte Strichstärken (400–700). Der Konturstrich-Trick aus Runde 3 ist nicht mehr nötig. Wenn sie irgendwo kräftiger soll: font-weight erhöhen. */ .font-hand { font-family: 'Dancing Script', cursive; font-weight: 600; letter-spacing: 0.01em; line-height: 1.25; font-style: normal; } /* Sichtbarer Fokusrahmen für Tastatur-Navigation (Barrierefreiheit) */ a:focus-visible, button:focus-visible { outline: 3px solid var(--gb-terracotta); outline-offset: 3px; border-radius: 0.5rem; } /* -------------------------------------------------------------------------- 2. Buttons -------------------------------------------------------------------------- */ .gb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.9rem 1.75rem; border-radius: 9999px; font-weight: 700; font-size: 1.0625rem; /* etwas größer = besserer Kontrast-Eindruck */ line-height: 1.3; text-align: center; transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease; } /* Haupt-CTA: Terrakotta */ .gb-btn-primary { background-color: var(--gb-terracotta); color: #fff; box-shadow: 0 10px 24px -12px rgba(255, 88, 0, 0.75); } .gb-btn-primary:hover { background-color: #E64E00; transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(255, 88, 0, 0.9); } /* Zweit-CTA: transparent mit Rand – für den mailto-Link. Terrakotta, damit er klar als Link erkennbar ist, aber ruhiger wirkt als der gefüllte Haupt-Button. */ .gb-btn-outline { background-color: #FFFFFF; /* helle Füllung, damit die Schrift überall gut lesbar bleibt */ border: 2px solid var(--gb-terracotta); color: var(--gb-terracotta-dark); } /* Beim Hover füllt sich der Button leicht mit Terrakotta. Die Schrift wird dabei eine Spur dunkler, damit der Kontrast auch gefüllt über 4.5:1 bleibt (#B83D00 auf #FFF2EB = 5.2:1). */ .gb-btn-outline:hover { background-color: #FFF2EB; border-color: var(--gb-terracotta-dark); color: #B83D00; box-shadow: 0 10px 24px -14px rgba(255, 88, 0, 0.65); transform: translateY(-2px); } /* Dritter Button-Typ: Rahmen und Schrift in ink, ohne Füllung. Für Wege, die bewusst NICHT der Hauptweg sind – aktuell nur „Zum Zykluskalender". Terrakotta bleibt dem Kennenlerngespräch vorbehalten, damit die Seite genau einen Hauptweg hat. ink auf peach = 11.96:1, im Hover weiß auf ink = 14.67:1. */ .gb-btn-ink { background-color: transparent; border: 2px solid var(--gb-ink); color: var(--gb-ink); } .gb-btn-ink:hover { background-color: var(--gb-ink); color: var(--gb-sand); transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(43, 34, 40, 0.7); } /* Kompakter Button im Header – auf schmalen Handys noch etwas kleiner, damit Logo + Button nebeneinander passen. */ .gb-btn-sm { padding: 0.55rem 1rem; font-size: 0.85rem; } @media (min-width: 640px) { .gb-btn-sm { padding: 0.6rem 1.15rem; font-size: 0.95rem; } } @media (prefers-reduced-motion: reduce) { .gb-btn:hover { transform: none; } } /* -------------------------------------------------------------------------- 3. Bildformen – weiche „Bogen"-Silhouette statt harter Rechtecke -------------------------------------------------------------------------- */ .gb-arch { border-radius: 14rem 14rem 2.5rem 2.5rem; overflow: hidden; } .gb-blob { border-radius: 62% 38% 55% 45% / 48% 52% 48% 52%; overflow: hidden; } /* Echte Fotos (seit 17.09.2026) bekommen zwei Dinge, um sich in die Seite einzufügen: einen CSS-Filter direkt am (zähmt Sättigung/Kontrast, Wert ist je Foto einzeln gesetzt, siehe index.html) und diesen Überzug – ein Geschwister-Element in Pfirsich, per mix-blend-mode weich über das Bild gelegt. Dieselbe Idee wie die Farbschleier im Hintergrund, nur direkt auf dem Foto. --gb-tone-opacity erlaubt es, die Stärke pro Einsatzstelle zu übersteuern (Inline-Style), Standard ist eher zart. */ .gb-photo-tone { background-color: var(--gb-peach); mix-blend-mode: soft-light; opacity: var(--gb-tone-opacity, 0.16); pointer-events: none; } /* -------------------------------------------------------------------------- 4. Sanfte Sektionsübergänge Jede Sektion mit neuer Hintergrundfarbe bekommt oben große Rundungen. Der Wrapper darum trägt die Farbe der vorherigen Sektion – dadurch entsteht der weiche Übergang ganz ohne Grafiken. -------------------------------------------------------------------------- */ /* Seit Runde 4 ist die Grenze zwischen zwei Sektionen selbst die Welle. Am Ende jeder Sektion steht ein SVG, das in der Farbe der FOLGENDEN Sektion gefüllt ist – dadurch fließt die nächste Farbe in einer weichen Diagonale in die vorige hinein. Die alten abgerundeten Ecken (`gb-soft-top`) und die separaten Wellenlinien sind damit entfallen. Höhe bewusst in `vw`: der Höhenunterschied zwischen linkem und rechtem Ende soll rund 5 % der Bildschirmbreite betragen, also mit der Breite mitwachsen. Die Deckelung bei 120px verhindert, dass die Diagonale auf sehr großen Monitoren zum eigenen Bildteil wird. */ .gb-divider { display: block; width: 100%; height: clamp(24px, 6vw, 120px); /* Verhindert eine Haarlinie zwischen Sektion und Trenner beim Skalieren */ margin-bottom: -1px; } /* Unter 640px die Neigung halbieren – sonst frisst sie zu viel Höhe. */ @media (max-width: 639px) { .gb-divider { height: clamp(16px, 3vw, 30px); } } /* -------------------------------------------------------------------------- 5. Dezente Scroll-Animation (nur wenn JavaScript aktiv ist) -------------------------------------------------------------------------- */ .js .gb-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; } .js .gb-reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .gb-reveal { opacity: 1; transform: none; transition: none; } } /* -------------------------------------------------------------------------- 6. Header -------------------------------------------------------------------------- */ .gb-header { transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease; } .gb-header.is-scrolled { background-color: rgba(255, 248, 244, 0.92); backdrop-filter: blur(10px); box-shadow: 0 6px 24px -18px rgba(43, 34, 40, 0.6); } /* -------------------------------------------------------------------------- 7. Cookie-Consent-Banner (wird per JavaScript eingefügt) -------------------------------------------------------------------------- */ .gb-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 1rem; display: flex; justify-content: center; pointer-events: none; /* nur die Karte selbst ist klickbar */ } .gb-consent__card { pointer-events: auto; width: 100%; max-width: 46rem; background-color: var(--gb-sand); color: var(--gb-ink); border: 1px solid rgba(43, 34, 40, 0.14); border-radius: 1.25rem; box-shadow: 0 20px 45px -22px rgba(51, 42, 40, 0.55); padding: 1.25rem 1.35rem; display: flex; flex-direction: column; gap: 0.9rem; transform: translateY(1.5rem); opacity: 0; transition: opacity 0.4s ease, transform 0.4s ease; } .gb-consent.is-open .gb-consent__card { transform: none; opacity: 1; } .gb-consent__text { font-size: 0.9rem; line-height: 1.6; } .gb-consent__text a { text-decoration: underline; text-underline-offset: 2px; } .gb-consent__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; } .gb-consent__actions .gb-btn { flex: 1 1 10rem; } .gb-consent__decline { background-color: transparent; border: 2px solid rgba(43, 34, 40, 0.35); color: var(--gb-ink); } .gb-consent__decline:hover { border-color: var(--gb-ink); } @media (min-width: 640px) { .gb-consent__card { flex-direction: row; align-items: center; gap: 1.5rem; } .gb-consent__actions { flex-wrap: nowrap; } .gb-consent__actions .gb-btn { flex: 0 0 auto; white-space: nowrap; } } @media (prefers-reduced-motion: reduce) { .gb-consent__card { transition: none; } } /* -------------------------------------------------------------------------- 8. Druckansicht (z. B. für Impressum / Datenschutz) -------------------------------------------------------------------------- */ @media print { .gb-header, .gb-consent, .gb-btn { display: none !important; } body { background: #fff; color: #000; } } /* -------------------------------------------------------------------------- 9. Rechtstexte (Impressum / Datenschutz) Damit die Unterseiten ohne viele Einzel-Klassen im HTML auskommen. -------------------------------------------------------------------------- */ .gb-legal { font-size: 1rem; line-height: 1.75; color: var(--gb-ink-soft); } .gb-legal h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.3; color: var(--gb-ink); margin-top: 3rem; margin-bottom: 1rem; } .gb-legal h2:first-child { margin-top: 0; } .gb-legal h3 { font-size: 1.125rem; font-weight: 700; color: var(--gb-ink); margin-top: 2rem; margin-bottom: 0.5rem; } .gb-legal p { margin-bottom: 1rem; max-width: 68ch; } .gb-legal ul { list-style: disc; padding-left: 1.35rem; margin-bottom: 1rem; max-width: 68ch; } .gb-legal li { margin-bottom: 0.35rem; } .gb-legal a { color: var(--gb-terracotta-dark); /* dunklere Variante – besser lesbar auf hellem Grund */ text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; } .gb-legal a:hover { text-decoration: none; } .gb-legal strong { font-weight: 700; color: var(--gb-ink); } .gb-legal address { font-style: normal; margin-bottom: 1rem; } .gb-legal hr { border: 0; border-top: 1px solid rgba(43, 34, 40, 0.15); margin: 3rem 0; }