/* ========================================================================== Kind nässt ein – seitenspezifische Ergänzungen Aufbau der Styles dieser Website: 1. fonts.css lokale Schriften (Playfair Display SC, Inter, Lato) 2. tailwind-manus.css UNVERÄNDERTE Kopie des kompilierten Manus-Stylesheets (live: /assets/index-B9LWVbpr.css). Enthält alle Klassen, die in den HTML-Dateien stehen (Tailwind CSS v4). Nicht von Hand bearbeiten – Änderungen gehören hierher. 3. kind-naesst-ein.css diese Datei: nur Ergänzungen/Abweichungen. Wichtig: tailwind-manus.css arbeitet mit Cascade-Layern (@layer base, components, utilities). Regeln in DIESER Datei stehen außerhalb von Layern und haben deshalb immer Vorrang. Sparsam und gezielt einsetzen. Farben der Seite (aus den Manus-Klassen, identisch mit DESIGN_SYSTEM.md): #cd2519 Akzent (= --color-primary) #b01f13 Akzent-Hover #f5efe9 Hintergrund (= --color-background) #edd9b6 Sand (= --color-secondary) #4a4a4a / #2d2d2d Text #6e4949 Footer ========================================================================== */ /* Mobilmenü und ausgeblendete Formular-/Banner-Zustände: Das Attribut „hidden“ wird von tailwind-manus.css bereits mit display:none!important umgesetzt. Hier ist deshalb nichts weiter nötig. */ /* ========================================================================== Phase 2 (17.10.2026): Buch, Angebotsseite, erweiterte Navigation ========================================================================== */ /* Navigation: zusätzlicher Menüpunkt „Begleitung & Preise“. Zwischen 768 und 1023 px reicht der Platz für sechs Einträge nicht. Dort wird nur der Eintrag „Startseite“ ausgeblendet (das Logo führt ebenfalls zur Startseite); Abstände und Button bleiben wie im Original. Ab 1024 px alles sichtbar. */ .nav-desktop > a { white-space: nowrap; } @media (min-width: 768px) and (max-width: 1023.98px) { .nav-desktop > a[href="/"] { display: none; } /* Seit dem Menüpunkt „Buch“ (Phase 4): engere Abstände, damit das Logo frei bleibt */ .nav-desktop { gap: 0.75rem; } } /* Buchbereich (Startseite) */ .buch picture { display: block; width: 100%; max-width: 260px; } .buch-cover { display: block; width: 100%; max-width: 260px; height: auto; } .buch-cover--platzhalter { aspect-ratio: 2 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 1.5rem; text-align: center; font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; line-height: 1.3; color: #4a4a4a; background: #ffffff; border: 2px dashed #cd2519; } .buch-cover--platzhalter small { font-family: var(--font-body); font-weight: 400; font-size: 0.875rem; } /* Angebotsseite: Vergleichstabelle */ .preis-tabelle-wrap { overflow-x: auto; border: 2px solid #cd2519; border-radius: var(--radius); background: #ffffff; } .preis-tabelle { width: 100%; border-collapse: collapse; font-size: 0.9375rem; color: #4a4a4a; } .preis-tabelle th, .preis-tabelle td { padding: 0.75rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid #edd9b6; } .preis-tabelle tbody tr:last-child th, .preis-tabelle tbody tr:last-child td { border-bottom: 0; } .preis-tabelle thead th { font-weight: 700; color: #2d2d2d; background: #fdf8f3; } .preis-tabelle tbody th { font-weight: 600; color: #2d2d2d; white-space: nowrap; } .preis-tabelle strong { color: #cd2519; font-size: 1.125rem; } @media (max-width: 639.98px) { .preis-tabelle { font-size: 0.875rem; } .preis-tabelle th, .preis-tabelle td { padding: 0.625rem 0.5rem; hyphens: auto; -webkit-hyphens: auto; } .preis-tabelle tbody th { white-space: normal; } } /* Buchseite /buch: Autorinnenbild und Responsive-Klassen, die im Manus-CSS nicht vorkommen */ .buch-autorin { display: block; width: 100%; max-width: 280px; } /* Auf dem Smartphone kleineres Cover, damit Titel und Kaufbutton früher sichtbar sind */ @media (max-width: 767.98px) { .buch--seite picture { max-width: 170px; } .buch--seite { gap: 1.5rem; } } @media (min-width: 768px) { .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:col-span-2 { grid-column: span 2 / span 2; } .md\:p-8 { padding: 2rem; } .md\:pb-16 { padding-bottom: 4rem; } } /* Kontaktbereich (Startseite, /lp): Buttons dürfen umbrechen, statt in das Foto zu ragen */ .kontakt-buttons { flex-wrap: wrap; } /* Schmale Handys (< 640 px): Elemente aus dem Manus-Original, die breiter als der Bildschirm waren und die Seite seitlich verschiebbar machten (gemessen bei 375 px). */ @media (max-width: 639.98px) { /* Buttons mit festem Text („Kostenloses Erstgespräch vereinbaren“ u. a.) dürfen umbrechen */ #root [data-slot="button"] { white-space: normal; height: auto; min-height: 2.5rem; max-width: 100%; text-align: center; } /* große Varianten (text-lg + px-8 + py-6) etwas kompakter */ #root [data-slot="button"].text-lg { font-size: 1rem; padding: 0.875rem 1.25rem; } /* CleverReach-Formular (Blog): Button-Text darf umbrechen (CleverReach-CSS setzt nowrap) */ #root .cr_button { white-space: normal !important; max-width: 100%; height: auto; } } /* Lange Wörter in Überschriften (z. B. „Generationsheilungs-Pfad“, „transgenerationale“) bis zur Tablet-Breite trennen – dort sind die Spalten schmal. Desktop unverändert. */ @media (max-width: 1023.98px) { #root h1, #root h2, #root h3 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } } /* Calendly im Erstgespräch-Bereich (Startseite #erstgespraech, /lp #lp-contact-form) auf schmalen Handys: Der Kalender hatte eine feste Mindestbreite von 320 px und ragte mit dem Innenabstand der Box über den Bildschirm (Seite seitlich verschiebbar). Nur wenn der Kalender sichtbar ist. (18.10.2026) */ @media (max-width: 639.98px) { [data-form-state="calendly"] > div[style*="min-width"] { min-width: 0 !important; width: 100%; } #erstgespraech:has(> [data-form-state="calendly"]:not([hidden])), #lp-contact-form:has(> [data-form-state="calendly"]:not([hidden])) { padding-left: 0.5rem; padding-right: 0.5rem; } } /* Blog-PDF-Formular (aus dem CleverReach-Einbettungscode übernommen, 20.10.2026 angepasst): Einwilligung als Zeile „Kästchen links, Text rechts“, Abstand unten wie oben, Button sichtbar inaktiv, solange die Einwilligung fehlt. */ form[data-form="blog-pdf"] .cr_body { padding: 12px 0 20px; } form[data-form="blog-pdf"] [rel="checkbox"] > .label { display: none; } form[data-form="blog-pdf"] [rel="checkbox"] .cr_form-inputgroup { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; } form[data-form="blog-pdf"] [rel="checkbox"] input.cr_ipe_checkbox { flex: 0 0 auto; width: 18px; height: 18px; margin: 3px 0 0; padding: 0; cursor: pointer; } form[data-form="blog-pdf"] [rel="checkbox"] label.no-label { margin-top: 0; cursor: pointer; } form[data-form="blog-pdf"] .cr_button:disabled { opacity: 0.45; cursor: not-allowed; } form[data-form="blog-pdf"] .cr_button:disabled:hover { opacity: 0.45; }