/* ── Haumėa Maris Design System v3 ── Gestylt werden native Elementor-Widgets über css_classes-Hooks (hm-*), damit Inhalte im Editor bearbeitbar bleiben und das Design zentral liegt. */ :root { --dark: #161C2E; --navy: #1B2F4E; --turq: #3D9688; --turql: #5AC8B4; --white: #FFFFFF; --gray: rgba(255,255,255,0.62); } html { scroll-behavior: smooth; scroll-padding-top: 104px; font-size: 17px; } html, body { background: var(--dark) !important; color: var(--white); font-family: 'Montserrat', sans-serif; } body .elementor-widget-text-editor, body .elementor-widget-text-editor p { color: rgba(255,255,255,0.88); } /* Theme-eigenen Header/Footer ausblenden, da die Seiten eigene haben */ #site-header, #site-footer { display: none; } img { max-width: 100%; height: auto; } /* ── Sticky Navigation ── */ .site-nav-section { position: sticky; top: 0; z-index: 200; transition: background 0.3s ease, box-shadow 0.3s ease; background: rgba(22,28,46,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .site-nav-section.is-scrolled { background: rgba(22,28,46,0.92); box-shadow: 0 8px 30px rgba(0,0,0,0.35); } .site-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .site-nav-brand { font-family: 'Cormorant Garamond', serif; font-size: 1.65rem; color: var(--white); text-decoration: none; display: flex; align-items: center; gap: 0.7em; } /* Wortmarke: EIN Wort. "Maris" türkis, davon nur das M in Pinyon Script. Absichtlich nicht auf .site-nav-brand beschränkt – dieselbe Marke steht auch im Footer, im Hero und im Fließtext. */ .nav-maris { color: var(--turql); } .nav-maris-m { font-family: 'Pinyon Script', cursive; font-size: 1.34em; line-height: 0; /* Der Schwung des Script-M läuft weit nach rechts – ohne Abstand klebt "aris" daran. Bei Bedarf hier justieren. */ margin-right: 0.09em; } /* Ausnahme Navigation: In der großen Brand-Schrift wirkt derselbe Abstand zu weit – hier bleibt das "aris" dicht am M (Stand wie vor der Anpassung). */ .site-nav-brand .nav-maris-m { margin-right: -0.04em; } .nav-logo { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 4px 18px rgba(0,0,0,0.45); } .site-nav-menu { display: flex; align-items: center; gap: 2rem; } .site-nav-links { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; } .site-nav-links a { color: rgba(255,255,255,0.72); text-decoration: none; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; padding-bottom: 4px; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; } .site-nav-links a:hover, .site-nav-links a.is-active { color: var(--turql); border-color: var(--turq); } .site-nav-cta { background: var(--turq); color: #161C2E !important; padding: 0.6rem 1.15rem; border-radius: 4px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; } .site-nav-cta:hover { background: var(--turql); } /* Burger (nur mobil sichtbar) */ .nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: none !important; border: none !important; cursor: pointer; padding: 8px; } .nav-burger span { display: block; height: 2px; width: 100%; background: var(--white); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; } .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 1024px) { .nav-burger { display: flex; } .site-nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 1.2rem; background: rgba(22,28,46,0.97); padding: 1.6rem 2rem 2rem; box-shadow: 0 24px 40px rgba(0,0,0,0.45); } .site-nav-menu.is-open { display: flex; } .site-nav-links { flex-direction: column; gap: 1.1rem; } .site-nav-links a { font-size: 0.85rem; } } /* ── Typo-Bausteine (heading-Widgets) ── */ body .hm-eyebrow .elementor-heading-title { font-size: 0.66rem; font-family: 'Montserrat', sans-serif; font-weight: 500; letter-spacing: 0.36em; color: var(--turq); text-transform: uppercase; display: flex; align-items: center; gap: 0.9rem; } body .hm-eyebrow .elementor-heading-title::before { content: ''; display: inline-block; width: 36px; height: 1px; background: var(--turq); flex-shrink: 0; } body .hm-eyebrow-plain .elementor-heading-title::before { display: none; } .hm-eyebrow { margin-bottom: 1.3rem; } body .hm-h1 .elementor-heading-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(3rem, 5vw, 5.2rem); font-weight: 300; line-height: 1.08; color: var(--white); } body .hm-h1 .elementor-heading-title em, body .hm-h2 .elementor-heading-title em { color: var(--turq); font-style: normal; } .hm-h1 { margin-bottom: 1.6rem; } body .hm-h2 .elementor-heading-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.1rem, 3.4vw, 3.2rem); font-weight: 300; line-height: 1.15; color: var(--white); } .hm-h2 { margin-bottom: 1.8rem; } .hm-wave { margin-bottom: 1.4rem; } .wave-svg { display: block; width: 110px; opacity: 0.8; } .hero-text { font-size: 1.16rem; line-height: 1.85; color: rgba(255,255,255,0.82); max-width: 520px; margin-bottom: 1.6rem; } .hero-text strong { color: var(--white); font-weight: 600; } /* ── CTA-Buttons (button-Widgets) ── */ body .hm-cta .elementor-button { background: var(--turq); color: #161C2E; padding: 1.05rem 1.9rem; border-radius: 4px; font-size: 0.84rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; transition: background 0.2s, transform 0.2s; } body .hm-cta .elementor-button:hover { background: var(--turql); color: #161C2E; transform: translateY(-2px); } .hm-hero-img img { border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,0.55); } .image-credit { margin-top: 1rem; font-size: 0.68rem; color: rgba(255,255,255,0.55); text-align: center; letter-spacing: 0.03em; line-height: 1.7; } .image-credit a { color: rgba(91,200,180,0.8); text-decoration: none; } .image-credit a:hover { color: var(--turql); } /* ── Reveal-Animationen ── */ .reveal-fade { opacity: 0; transform: translateY(36px); transition: opacity 0.9s cubic-bezier(.22,.61,.36,1), transform 0.9s cubic-bezier(.22,.61,.36,1); } .reveal-fade.in-view { opacity: 1; transform: none; } .reveal-grow { opacity: 0; transform: scale(0.92); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.22,.61,.36,1); } .reveal-grow.in-view { opacity: 1; transform: scale(1); } /* Barrierefreiheit: Bewegung reduzieren, wenn das System es wünscht */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal-fade, .reveal-grow { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ── Full-bleed Break-Sections (Parallax via background_attachment:fixed) ── */ /* Tidepool: Zitat ins untere Drittel (Gesicht sitzt oben im Bild) */ /* Zell-Break: Mikroskopie-Bild ist dunkel – weniger Overlay, Caption dezent */ /* ── Pull Quote ── */ /* ── Für dich (icon-box-Karten) ── */ #fuer-dich { border-top: 1px solid rgba(255,255,255,0.07); } .hm-pillar { flex: 1; } .hm-pillar .elementor-icon-box-wrapper { text-align: left; } .hm-pillar .elementor-icon-box-icon { margin-bottom: 1rem; } .hm-pillar .elementor-icon { font-size: 1.6rem; color: var(--turq); } .hm-pillar .elementor-icon svg { width: 1.6rem; fill: var(--turq); } .hm-pillar .elementor-icon-box-title { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 400; color: var(--white); margin-bottom: 0.7rem; } .hm-pillar .elementor-icon-box-description { font-size: 0.98rem; line-height: 1.85; color: rgba(255,255,255,0.72); } #fuer-dich .hm-pillar { background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 1.8rem 1.7rem; transition: border-color 0.25s ease, transform 0.25s ease; } #fuer-dich .hm-pillar:hover { border-color: rgba(61,150,136,0.55); transform: translateY(-4px); } .fd-note { margin-top: 2.4rem; font-size: 0.98rem; color: rgba(255,255,255,0.72); } .fd-note a { color: var(--turql); text-decoration: none; border-bottom: 1px solid rgba(91,200,180,0.4); } .fd-note a:hover { border-color: var(--turql); } /* ── Über mich ── */ .ueber-section { background: var(--navy); border-top: 1px solid rgba(255,255,255,0.07); border-bottom: 1px solid rgba(255,255,255,0.07); } .insta-box { display: flex; align-items: center; gap: 1rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 1rem 1.2rem; } .insta-info { display: flex; flex-direction: column; gap: 3px; } .insta-label { font-size: 0.6rem; letter-spacing: 0.2em; color: var(--gray); text-transform: uppercase; } .insta-handle { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; color: var(--turq); font-style: italic; text-decoration: none; } .insta-handle:hover { color: var(--turql); } .insta-sub { font-size: 0.68rem; color: rgba(255,255,255,0.5); } .ueber-absatz { font-size: 1.12rem; line-height: 1.9; color: rgba(255,255,255,0.82); margin-bottom: 1.5rem; max-width: 620px; } .ueber-absatz strong { color: var(--white); font-weight: 600; } /* ── Bedeutung ── */ .bedeutung-intro { font-size: 1.15rem; line-height: 1.85; color: rgba(255,255,255,0.75); max-width: 720px; font-style: italic; } /* Werte (icon-list-Widget) */ .hm-werte { max-width: 660px; } .hm-werte .elementor-icon-list-item { margin-bottom: 1rem; } .hm-werte .elementor-icon-list-icon { color: var(--turq); } .hm-werte .elementor-icon-list-icon svg { fill: var(--turq); width: 1rem; } .hm-werte .elementor-icon-list-text { font-size: 1rem; line-height: 1.75; color: rgba(255,255,255,0.8); padding-left: 0.6rem; } .hm-werte .elementor-icon-list-text strong { color: var(--white); } /* ── Angebot + Ablauf ── */ /* ── FAQ (accordion-Widget) ── */ .faq-section { border-top: 1px solid rgba(255,255,255,0.07); } .hm-faq .elementor-accordion-item { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 10px; margin-bottom: 0.9rem; overflow: hidden; } .hm-faq .elementor-tab-title { padding: 1.15rem 1.4rem; font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 400; color: var(--white) !important; } .hm-faq .elementor-tab-title a { color: inherit; } .hm-faq .elementor-tab-title.elementor-active { color: var(--turql) !important; } .hm-faq .elementor-accordion-icon { color: var(--turq) !important; } .hm-faq .elementor-accordion-icon svg { fill: var(--turq); } .hm-faq .elementor-tab-content { padding: 0 1.4rem 1.3rem; font-size: 0.98rem; line-height: 1.85; color: rgba(255,255,255,0.78) !important; border-top: none !important; } /* ── Kontakt (Break + Formular) ── */ .kontakt-section .hm-buehne-inhalt { max-width: 640px; width: 100%; } .kontakt-text { font-size: 1.08rem; line-height: 1.8; color: rgba(255,255,255,0.88); margin-bottom: 1.6rem; } .kontakt-links { display: flex; gap: 1.6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.6rem; } .kontakt-links a { color: rgba(255,255,255,0.85); text-decoration: none; font-size: 0.85rem; letter-spacing: 0.04em; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 3px; transition: color 0.2s, border-color 0.2s; } .kontakt-links a:hover { color: var(--turql); border-color: var(--turq); } /* Kontaktformular (Contact Form 7) */ .hm-form form { text-align: left; background: rgba(22,28,46,0.72); border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; padding: 1.8rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .hm-form label { display: block; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.72); margin-bottom: 1.1rem; } .hm-form .hm-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; } @media (max-width: 700px) { .hm-form .hm-form-row { grid-template-columns: 1fr; } } .hm-form .hm-optional { text-transform: none; letter-spacing: 0; color: rgba(255,255,255,0.45); } .hm-form input[type="text"], .hm-form input[type="email"], .hm-form textarea { display: block; width: 100%; margin-top: 0.45rem; padding: 0.75rem 0.9rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); border-radius: 6px; color: var(--white); font-family: 'Montserrat', sans-serif; font-size: 0.95rem; transition: border-color 0.2s, background 0.2s; } .hm-form input:focus, .hm-form textarea:focus { outline: none; border-color: var(--turq); background: rgba(255,255,255,0.09); } .hm-form .wpcf7-acceptance .wpcf7-list-item { margin: 0; } .hm-form .wpcf7-acceptance label { display: flex; gap: 0.6rem; align-items: flex-start; text-transform: none; letter-spacing: 0; font-size: 0.78rem; line-height: 1.6; color: rgba(255,255,255,0.65); } .hm-form .wpcf7-acceptance input { margin-top: 0.2rem; accent-color: var(--turq); } .hm-form .wpcf7-acceptance a { color: var(--turql); } .hm-form input[type="submit"] { background: var(--turq); color: #161C2E; border: none; border-radius: 4px; cursor: pointer; padding: 1rem 1.9rem; font-size: 0.84rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; transition: background 0.2s, transform 0.2s; margin-top: 0.4rem; } .hm-form input[type="submit"]:hover { background: var(--turql); transform: translateY(-2px); } .hm-form .wpcf7-not-valid-tip { color: #FFB4A2; font-size: 0.75rem; text-transform: none; letter-spacing: 0; margin-top: 0.3rem; } .hm-form .wpcf7-response-output { border: 1px solid rgba(91,200,180,0.5) !important; border-radius: 8px; padding: 0.8rem 1rem !important; margin: 1rem 0 0 !important; font-size: 0.88rem; color: var(--white); } .hm-form .wpcf7-spinner { display: block; margin: 0.6rem auto 0; } /* ── Footer ── */ .footer-legal { font-size: 0.7rem; color: rgba(255,255,255,0.55); } .footer-legal a { color: rgba(255,255,255,0.7); text-decoration: none; } .footer-legal a:hover { color: var(--turql); } /* Footer ohne Trennlinie: lag direkt unter dem Kontakt-Panorama und wirkte dort als helle Kante unter dem Bild. Der Abstand trennt ausreichend. */ .footer-location { font-size: 0.62rem; letter-spacing: 0.22em; color: rgba(255,255,255,0.45); text-transform: uppercase; } /* ── Legal- & Unterseiten ── */ .legal-content { max-width: 760px; margin: 0 auto; } .legal-h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 300; margin: 0 0 2.4rem; } .legal-h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 500; color: var(--turql); margin: 2.4rem 0 0.8rem; } .legal-p { font-size: 1.02rem; line-height: 1.85; color: rgba(255,255,255,0.8); margin-bottom: 1rem; } .legal-p a { color: var(--turql); } .hm-sub-img img { border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,0.55); } .sub-hero { border-bottom: 1px solid rgba(255,255,255,0.07); } .hm-hinweis-box { background: rgba(61,150,136,0.08); border: 1px solid rgba(61,150,136,0.35); border-radius: 10px; padding: 1.2rem 1.4rem; font-size: 0.92rem; line-height: 1.75; color: rgba(255,255,255,0.78); } /* ── Responsive ── */ @media (max-width: 900px) { html { font-size: 16px; } body .hm-eyebrow .elementor-heading-title { letter-spacing: 0.22em; } body .hm-eyebrow .elementor-heading-title::before { width: 24px; } .nav-logo { width: 48px; height: 48px; } .site-nav-brand { font-size: 1.35rem; } .hm-form form { padding: 1.3rem; } } /* ══════════════════════════════════════════════════════════════════════ DESIGNSYSTEM · Teaser 2026 Vier Regeln, überall gleich – siehe build/content-start.php: 1 Bühne (Bild + Überschrift) · 2 Duo (Text + ein Akzent) 3 Flächen wechseln · 4 ein Akzent, eine Karte, ein Eyebrow ══════════════════════════════════════════════════════════════════════ */ /* ── 1 · FLÄCHEN ────────────────────────────────────────────────────── Zwei Töne, im Wechsel. Nie zwei gleiche hintereinander – der Generator prüft das und warnt. */ .hm-flaeche { background: var(--dark); } .hm-flaeche--panel { background: #1A2136; } /* BEWUSST KEINE Haarlinien an den Flächen-Nahtstellen: Neben den Bühnen lasen sie sich als helle Pixelzeile an den Bildkanten (Symptom vom 22.08.2026). Der Tonwechsel der Flächen trennt allein. */ /* ── 2 · BÜHNE: Bild, darauf nur Eyebrow + Überschrift ─────────────── */ /* Parallax-Layer (von motion.js erzeugt): viewport-fixiertes Bild, die Sektion clippt es als "Fenster". Funktioniert – anders als background-attachment:fixed – auch auf iOS/Android. Wichtig: clip-path erzeugt KEINEN Containing Block für position:fixed (transform/filter würden das tun und den Effekt zerstören – hier also nie ergänzen). */ .hm-buehne--clip { clip-path: inset(0 0 0 0); isolation: isolate; } /* Subpixel-Saum an Ober-/Unterkante: Die viewport-fixierte Bildebene und das mitscrollende Overlay runden an den Clip-Kanten unterschiedlich – oben und unten blitzte 1 px ungetöntes (helleres) Bild durch. Overlay und Bildebene laufen deshalb 2 px über die Sektion hinaus; der clip-path schneidet sie exakt an der Kante zurück. Die Regel für ::after steht weiter unten, NACH `.hm-buehne::after` – siehe die Begründung dort. Hier bleibt nur die Bildebene: `.hm-buehne--clip .hm-buehne-bg` hat zwei Klassen und damit höhere Spezifität als `.hm-buehne-bg`, sie setzt sich unabhängig von der Reihenfolge durch. */ .hm-buehne--clip .hm-buehne-bg { inset: -2px; } .hm-buehne-bg { position: fixed; inset: 0; z-index: 0; background-size: cover; background-repeat: no-repeat; pointer-events: none; } .hm-buehne { position: relative; min-height: 78vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* inset: -1px statt 0 – das ist kein Schönheitsfehler, sondern die Reparatur des hellen Saums an Ober- und Unterkante: Das Hintergrundbild liegt auf der Sektion, die Abdunklung auf diesem Pseudoelement. Beim Scrollen landen beide auf gebrochenen Gerätepixeln und werden unterschiedlich gerundet – dann bleibt oben oder unten eine Pixelreihe UNGETÖNT stehen und wirkt heller als der Rest. Ein Pixel Überstand schließt die Lücke; `.hm-buehne` hat `overflow: hidden`, der Überstand ist also unsichtbar. ⚠️ Diese Regel muss VOR den Varianten stehen (siehe direkt darunter): `.hm-buehne::after` und `.hm-buehne--clip::after` haben dieselbe Spezifität, bei Gleichstand gewinnt die spätere. Früher stand die Clip-Variante weiter oben – ihre Korrektur wurde dadurch von dieser Regel überschrieben und war wirkungslos. */ .hm-buehne { --hm-schleier: linear-gradient(180deg, rgba(22,28,46,0.62) 0%, rgba(22,28,46,0.34) 45%, rgba(22,28,46,0.82) 100%); } .hm-buehne::after { content: ''; position: absolute; inset: -1px; z-index: 1; pointer-events: none; background: var(--hm-schleier); } /* ── Der helle Saum an Ober- und Unterkante ──────────────────────── Im Clip-Modus liegt die Bildebene (position:fixed) und die Abdunklung (::after auf der Sektion) in ZWEI getrennten Ebenen, die der clip-path beide an derselben Kante anschneidet. Endet die Sektion auf einem halben Gerätepixel – gemessen: y = 783,5625 –, glättet der Browser diese Kante: beide Ebenen werden dort teildurchlässig. Dabei verliert die Abdunklung mehr Wirkung als das Bild, und übrig bleibt eine hellere Pixelreihe. Ein Überstand (inset: -2px) half nicht – genau dieser Überstand wird ja vom clip-path abgeschnitten. Eine feste Verkleinerung (inset(1px)) auch nicht: Sie verschiebt den Saum nur eine Reihe nach oben, weil der Bruchteil derselbe bleibt. Gemessen: ohne Änderung Kante 73 (Nachbarreihe 57) inset(1px 0) Kante 71 Schleier innen Kante 59 ← unsichtbar Die Lösung ist deshalb, die Abdunklung IN die Bildebene zu legen. Dann sind Bild und Schleier bereits verrechnet, bevor geschnitten wird – die angeschnittene Reihe wird dadurch dunkler statt heller und geht im ebenfalls dunklen Seitenhintergrund unter. */ .hm-buehne--clip::after { background: none; } .hm-buehne--clip .hm-buehne-bg::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--hm-schleier); } .hm-buehne > .e-con-inner, .hm-buehne .hm-buehne-inhalt { position: relative; z-index: 2; } .hm-buehne-inhalt { text-align: center; max-width: 780px; padding: 3.4rem 2rem; } .hm-buehne-inhalt .hm-h2 { margin-bottom: 0; } body .hm-buehne .hm-h2 .elementor-heading-title { text-shadow: 0 2px 24px rgba(0,0,0,0.55); } .buehne-caption { margin-top: 1.6rem; font-size: 0.82rem; line-height: 1.7; color: rgba(255,255,255,0.66); } /* ── 3 · DUO: Fließtext links, ein Akzent rechts ───────────────────── */ .hm-duo-text .ueber-absatz { max-width: 620px; } .hm-duo-akzent { display: flex; flex-direction: column; justify-content: center; gap: 1.6rem; } /* ── 4 · DER AKZENT – ein Look für ALLE Zitate ─────────────────────── */ .hm-akzent { margin: 0; padding: 2rem 2rem 2rem 1.9rem; border-left: 2px solid var(--turq); background: rgba(61,150,136,0.07); border-radius: 0 10px 10px 0; } .hm-akzent blockquote { margin: 0; padding: 0; border: none; } .hm-akzent p { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(1.3rem, 1.8vw, 1.7rem) !important; line-height: 1.5 !important; color: var(--turql) !important; margin: 0 !important; } .hm-akzent figcaption { margin-top: 1.1rem; font-family: 'Montserrat', sans-serif; font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.45); } /* ── EYEBROW – ein Look, eine Variante für Bühnen ──────────────────── */ .hm-eyebrow--zentriert .elementor-heading-title { justify-content: center; } /* ── KARTEN – ein Look für Säulen, Ausblick, Für-wen ───────────────── */ .hm-karten .hm-pillar { background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.09); border-radius: 10px; padding: 2.1rem 1.8rem; transition: border-color 0.25s, transform 0.25s; } .hm-karten .hm-pillar:hover { border-color: rgba(61,150,136,0.55); transform: translateY(-4px); } .hm-karten .hm-pillar .elementor-icon-box-title { color: var(--turql) !important; } /* ── HERO ─────────────────────────────────────────────────────────── */ /* Kicker zweizeilig: "Zellgesundheit" trägt allein und groß. */ .hm-kicker { display: flex; flex-direction: column; gap: 0.5rem; margin: 0 0 1.7rem; } .hm-kicker-haupt { font-family: 'Montserrat', sans-serif; font-size: 1.02rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--turq); display: flex; align-items: center; gap: 0.9rem; } .hm-kicker-haupt::before { content: ''; display: inline-block; width: 36px; height: 1px; background: var(--turq); flex-shrink: 0; } .hm-kicker-sub { font-family: 'Montserrat', sans-serif; font-size: 0.68rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.5); padding-left: calc(36px + 0.9rem); } .hm-quali { font-family: 'Montserrat', sans-serif; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.62); margin: 0 0 1.6rem; line-height: 1.9; } .hm-coming { display: inline-block; margin-top: 1.8rem; padding: 0.5rem 1rem 0.5rem 0.9rem; border-left: 2px solid var(--turq); background: rgba(61,150,136,0.08); font-size: 0.86rem; line-height: 1.7; color: rgba(255,255,255,0.72); } .hm-coming strong { color: var(--turql); font-weight: 600; } /* ── WO BEIDE WELTEN SICH TREFFEN ──────────────────────────────────── */ /* Höhe begrenzt, damit die Sektion mit einem Blick erfassbar bleibt. */ .welten-bild { display: flex; align-items: center; justify-content: center; } .welten-bauch img { width: auto; max-width: 100%; max-height: 62vh; height: auto; margin: 0 auto; display: block; } .welten-text .bedeutung-intro { max-width: 560px; } .welten-text .image-credit { text-align: left; margin-top: 1.6rem; } /* Mikroskopie ist dunkel – weniger Overlay, sonst verschwindet das Bild */ #zelle.hm-buehne { --hm-schleier: linear-gradient(180deg, rgba(22,28,46,0.46) 0%, rgba(22,28,46,0.22) 45%, rgba(22,28,46,0.7) 100%); } #zelle.hm-buehne::after { } /* ── FORMULAR-HINWEIS (ersetzt die frühere Pflicht-Checkbox) ───────── */ .hm-form-hinweis { font-size: 0.78rem; line-height: 1.7; color: rgba(255,255,255,0.55); margin: 0.2rem 0 1.4rem; } .hm-form-hinweis a { color: var(--turql); text-decoration: none; border-bottom: 1px solid rgba(91,200,180,0.35); } .hm-form-hinweis a:hover { border-color: var(--turql); } @media (max-width: 1024px) { .welten-bauch img { max-height: 48vh; } .hm-buehne { min-height: 62vh; } } @media (max-width: 900px) { .hm-buehne { min-height: 56vh; } .hm-buehne-inhalt { padding: 2.6rem 1.4rem; } .welten-bauch img { max-height: 44vh; } .welten-text .image-credit { text-align: center; } .hm-kicker-haupt { font-size: 0.86rem; letter-spacing: 0.22em; } .hm-kicker-sub { padding-left: 0; } .hm-kicker-haupt::before { display: none; } .hm-akzent { padding: 1.6rem 1.4rem; } } /* ── Nummerierte Schrittliste ────────────────────────────────────────── Wird von der Unterseite /praekonzeption-schwangerschaft/ genutzt (build-sub-pages.php, "Wie ich arbeite"). Auf der Startseite kommt sie bewusst NICHT vor – dort gibt es keine Ablaufschritte. */ .ablauf-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; } .ablauf-steps li { counter-increment: step; position: relative; padding: 0 0 1.8rem 3.4rem; font-size: 1.02rem; line-height: 1.8; color: rgba(255,255,255,0.8); } .ablauf-steps li strong { color: var(--white); display: block; margin-bottom: 0.3rem; font-weight: 600; } .ablauf-steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 0; width: 2.2rem; height: 2.2rem; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(61,150,136,0.5); border-radius: 50%; font-family: 'Montserrat', sans-serif; font-size: 0.7rem; letter-spacing: 0.05em; color: var(--turql); background: var(--dark); } .ablauf-steps li::after { content: ''; position: absolute; left: 1.1rem; top: 2.4rem; bottom: 0.4rem; width: 1px; background: rgba(61,150,136,0.28); } .ablauf-steps li:last-child::after { display: none; } /* Kontakt liegt auf dem Ostsee-Panorama. Das Formular hat eine eigene dunkle Karte, die Überschrift darüber braucht aber etwas mehr Rückhalt. */ .kontakt-section.hm-buehne { --hm-schleier: linear-gradient(180deg, rgba(22,28,46,0.74) 0%, rgba(22,28,46,0.58) 40%, rgba(22,28,46,0.88) 100%); } /* ── Kontakt auf breiten Schirmen: Baum links, Formular rechts ────── Das Panorama ist mit xpos 0 am linken Rand verankert, links im Bild sitzt Martina im Baum. Bei zentriertem Inhalt lag das Formular genau darüber – der Baum verschwand hinter der Eingabemaske. Deshalb hier: Inhalt nach rechts, und die Abdunklung läuft waagerecht statt senkrecht – links bleibt das Bild fast klar, rechts wird es dunkel genug, dass weiße Schrift und Formular ruhig darauf liegen. Erst ab 1000 px: Darunter ist schlicht nicht genug Breite für beides nebeneinander, dort bleibt es beim zentrierten Inhalt über dem ganzen Bild (die senkrechte Abdunklung von oben gilt dann weiter). */ @media (min-width: 1000px) { /* ⚠️ align-items, NICHT justify-content. Elementor-Container laufen als `flex-direction: column` – dort steuert justify-content die SENKRECHTE Achse. Ein `justify-content: flex-end` schob den Inhalt an den unteren Rand statt nach rechts; waagerecht entscheidet align-items. */ .kontakt-section.hm-buehne { align-items: flex-end; } .kontakt-section .hm-buehne-inhalt { margin-right: clamp(1.5rem, 5vw, 5rem); text-align: left; } /* Überschrift und Eyebrow sind global zentriert – hier linksbündig, sonst steht der Text mittig über einem linksbündigen Formular. */ .kontakt-section .hm-eyebrow--zentriert .elementor-heading-title, .kontakt-section .hm-h2 .elementor-heading-title { justify-content: flex-start; text-align: left; } /* Waagerecht statt senkrecht – über die Variable, damit sie auch im Clip-Modus greift (dort liegt der Schleier in der Bildebene). */ .kontakt-section.hm-buehne { --hm-schleier: linear-gradient(90deg, rgba(22,28,46,0.20) 0%, rgba(22,28,46,0.34) 30%, rgba(22,28,46,0.78) 55%, rgba(22,28,46,0.90) 100%); } } /* Kleines Bild in der Akzentspalte eines Duos (z.B. Tauchbild in "Über mich") */ .hm-duo-bild img { width: 100%; border-radius: 12px; box-shadow: 0 16px 44px rgba(0,0,0,0.45); } /* Isa Marias Zitat im Bildcredit unter dem Haumea-Gemälde */ .image-credit .credit-zitat { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.25em; color: rgba(91,200,180,0.85); } /* Freigestellte Betonung im Fließtext: eigene Zeile mit Abstand, kursiv, türkis, in der Serif – wie ein kurzes Innehalten beim Lesen. Einheitliche Klasse für alle betonten Wortgruppen. */ .hm-betont { display: block; margin: 1.1em 0; padding-left: 1.4em; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.3em; line-height: 1.4; color: var(--turql); } /* ── Sprachumschalter (DE · EN) in der Navigation ── */ .nav-lang { display: flex; align-items: center; gap: 0.45rem; font-family: 'Montserrat', sans-serif; font-size: 0.7rem; letter-spacing: 0.12em; } .nav-lang a { color: rgba(255,255,255,0.5); text-decoration: none; padding: 0.2rem 0.1rem; transition: color 0.2s; } .nav-lang a:hover { color: var(--turql); } .nav-lang a.is-current { color: var(--white); font-weight: 600; } .nav-lang span { color: rgba(255,255,255,0.3); } .footer-note { color: rgba(255,255,255,0.4); font-size: 0.9em; } @media (max-width: 1024px) { /* Im aufgeklappten Burger-Menü als eigene Zeile */ .site-nav-menu .nav-lang { font-size: 0.85rem; } } /* ── Ankündigungsbanner ──────────────────────────────────────────── Schmaler Streifen ganz oben, ausgegeben von haumeamaris-design.php (Einstellungen → Ankündigung). Türkis auf Navy, damit er auffällt, ohne mit der Marke zu konkurrieren. Die Navigation ist sticky mit `top: 0`; der Streifen scrollt bewusst mit weg – er ist eine Ankündigung, kein Dauerelement. */ .hm-banner { background: var(--turq); color: #161C2E; position: relative; z-index: 210; } .hm-banner-inner { max-width: 1140px; margin: 0 auto; padding: 0.62rem 1.4rem; text-align: center; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5; } .hm-banner a { color: #161C2E; text-decoration: underline; text-underline-offset: 3px; } .hm-banner a:hover { color: #0E1220; } @media (max-width: 700px) { .hm-banner-inner { padding: 0.55rem 1rem; font-size: 0.68rem; letter-spacing: 0.06em; } }