/* bembel.ai – Startseite. 1:1 aus dem Prototyp uebernommen. Ergaenzungen am Ende der Datei: Fokus-Sichtbarkeit, Formularzustaende und Klassen, die im Prototyp noch Inline-Styles waren. Kopf- und Fusszeile (die Prototyp-Abschnitte NAVIGATION, FOOTER, MOBILE NAV, FOOTER COPYRIGHT und ihre @media-Zeilen) stehen seit Schritt 5 unveraendert in site-chrome.css, weil jede Seite sie benutzt. An ihren alten Stellen unten steht ein Verweis. */ /* ========== NAVIGATION ========== -> site-chrome.css */ /* ========== HERO ========== */ .hero { /* Layout: 100svh nach 100vh (audit.md P3). Auf dem Handy ist 100vh die Hoehe bei eingeklappten Browserleisten – mit sichtbaren Leisten war der Hero hoeher als der Bildschirm und schob die Schaltflaeche unter den Rand. svh ist die kleine Viewport-Hoehe; Browser ohne svh behalten 100vh. Am Desktop sind beide gleich (keine Pixelaenderung). */ min-height:100vh; min-height:100svh; background:var(--navy); display:flex; align-items:center; padding:100px 0 80px; position:relative; overflow:hidden; } .hero-apple { position:absolute; right:-10%; top:50%; transform:translateY(-50%); width:56%; max-width:700px; mix-blend-mode:multiply; opacity:0.7; pointer-events:none; user-select:none; } .hero-apple-fade { position:absolute; right:0; top:0; bottom:0; width:58%; background:linear-gradient(to right,var(--navy) 0%,transparent 28%); pointer-events:none; z-index:2; } .hero-inner { max-width:1100px; margin:0 auto; width:100%; padding:0 2.5rem; position:relative; z-index:3; } .hero-text { max-width:560px; } .hero-eyebrow { display:inline-flex; align-items:center; gap:6px; background:var(--white-a08); border:1px solid var(--white-a14); border-radius:30px; padding:5px 12px; /* Typografie: 11px -> 12px (Lesbarkeits-Untergrenze fuer Fliesstext-nahe Beschriftungen, audit.md P3). Letter-Spacing unveraendert, passt bei 12px weiterhin zur Pillenbreite. */ font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; /* Kontrast: .55 -> .60 (4.29:1 -> 4.79:1 auf der halbtransparenten Pille) */ color:var(--white-a60); margin-bottom:1.4rem; } .eyebrow-dot { width:5px; height:5px; border-radius:50%; background:var(--mint); flex-shrink:0; } .hero-headline { font-family:'DM Sans',sans-serif; font-size:clamp(2.6rem,5.2vw,4rem); font-weight:700; color:#fff; line-height:1.06; letter-spacing:-.025em; margin-bottom:1.6rem; /* Typografie: text-wrap:balance neu (kein Prototyp-Wert veraendert) – verteilt Zeilen gleichmaessiger, statt dass eine kurze letzte Zeile allein steht. Wirkt nur, wenn die Ueberschrift ohnehin umbricht; einzeilige Breiten bleiben unveraendert. */ text-wrap: balance; } .hero-headline em { font-family:'Fraunces',serif; font-style:italic; font-weight:300; color:var(--lavender-mid); letter-spacing:-.01em; } .hero-sub { font-size:1.05rem; color:var(--white-a68); line-height:1.65; margin-bottom:2.5rem; max-width:460px; } .btn-primary { display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--navy); text-decoration:none; padding:14px 28px; border-radius:var(--radius-sm); font-weight:600; font-size:15px; transition:transform .2s,box-shadow .2s; white-space:nowrap; } .btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 28px var(--black-a28); } /* Distill: .btn-secondary/.btn-secondary:hover entfernt (audit.md P3, DESIGN.md "Known debt") – der Prototyp hatte eine zweite Hero-CTA (ghost button), die im Homepage-Block-Aufbau nie benutzt wurde; keine Vorlage referenziert die Klasse. */ .hero-actions { display:flex; gap:1rem; flex-wrap:wrap; } .hero-trust { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:2.2rem; } .chip { display:inline-flex; align-items:center; gap:5px; background:var(--white-a07); border:1px solid var(--white-a12); border-radius:20px; padding:5px 11px; font-size:12px; color:var(--white-a60); white-space:nowrap; } .chip svg { width:11px; height:11px; stroke:var(--white-a40); fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; } /* ========== SECTIONS SHARED ========== */ section { padding: 80px 2rem; } .section-inner { max-width: 1100px; margin: 0 auto; } .section-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--navy); margin-bottom: 0.75rem; } .section-title { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 700; color: var(--navy); letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 1rem; /* Typografie: text-wrap:balance neu, wie .hero-headline. */ text-wrap: balance; } .section-lead { font-size: 1.1rem; color: var(--text-mid); line-height: 1.7; max-width: 620px; } /* ========== USP BAND ========== */ .usp-band { background: var(--lavender); padding: 52px 2.5rem; } .usp-band .section-inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .usp-item { display: flex; gap: 1rem; align-items: flex-start; } .usp-icon { width: 44px; height: 44px; background: var(--white); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px var(--navy-a10); } .usp-icon svg { width: 22px; height: 22px; stroke: var(--navy); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* Semantik:

->

(die Seite sprang von h1 auf h4); gleiche Werte. */ .usp-content .usp-heading { font-size: 15px; font-weight: 600; color: var(--navy); margin-bottom: 4px; } .usp-content p { font-size: 14px; color: var(--text-mid); line-height: 1.5; } /* ========== LEISTUNGEN ========== */ .leistungen { background: var(--white); } .leistungen-header { margin-bottom: 3.5rem; } .leistungen-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .leistung-card { background: var(--lavender); border-radius: var(--radius-md); padding: 2rem; position: relative; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; } .leistung-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px var(--navy-a12); } .leistung-card.featured { background: var(--navy); color: var(--white); } /* Distill: .leistung-num/.leistung-card.featured .leistung-num entfernt (audit.md P3) – die Kartennummer wird seit dem Port ueber services_block.html/{{ service.number }} mit der Klasse .card-number ausgezeichnet (siehe ERGAENZUNGEN unten, "KARTEN-ECKEN & NUMMER"), .leistung-num wird von keiner Vorlage mehr referenziert. */ .leistung-card h3 { font-size: 1.25rem; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; margin-bottom: 0.75rem; } .leistung-card.featured h3 { color: var(--white); } .leistung-card p { font-size: 14px; color: var(--text-mid); line-height: 1.6; } .leistung-card.featured p { color: var(--white-a75); } .leistung-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1.25rem; } .tag { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 20px; background: var(--navy-a10); color: var(--navy); } .leistung-card.featured .tag { background: var(--white-a15); color: var(--white-a90); } /* ========== ABOUT ========== */ .about { background: var(--navy); color: var(--white); } .about-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } /* Distill: .about-photo-placeholder/.placeholder-icon entfernt (audit.md P3) – der Prototyp zeigte hier einen Platzhalter, bevor das echte Portrait eingebunden war; .about-photo im ERGAENZUNGEN-Teil rendert seit Schritt 2 das echte Bild ueber {% picture %}. Keine Vorlage referenziert diese Klassen mehr (geprueft per Grep ueber Templates, JS und content_seed.py). */ .about-content .section-eyebrow { color: var(--lavender-mid); } .about-content .section-title { color: var(--white); } .about-content .section-lead { color: var(--white-a75); margin-bottom: 2rem; } .about-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 2.5rem; } .about-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--white-a80); } .check-icon { width: 20px; height: 20px; background: var(--white-a15); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; } .check-icon svg { width: 10px; height: 10px; stroke: var(--white); fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; } /* ========== WORKSHOPS ========== */ .workshops { background: var(--white); } .workshops-header { margin-bottom: 3rem; } .workshops-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 3rem; } .workshop-card { border: 1.5px solid var(--lavender-mid); border-radius: var(--radius-md); padding: 1.75rem; transition: border-color 0.2s, transform 0.2s; } /* Distill: .workshop-card:hover entfernt (audit.md P3) – setzte border-color/transform exakt auf die Ruhewerte zurueck (Wirkung 0), keine Pixelaenderung. */ .workshop-icon { width: 44px; height: 44px; background: var(--lavender); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .workshop-icon svg { width: 22px; height: 22px; stroke: var(--navy); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .workshop-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--navy); margin-bottom: 0.5rem; } .workshop-card p { font-size: 14px; color: var(--text-mid); line-height: 1.55; } .workshops-cta-box { background: var(--lavender); border-radius: var(--radius-md); padding: 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .workshops-cta-box h3 { font-size: 1.2rem; font-weight: 700; color: var(--navy); margin-bottom: 0.4rem; } .workshops-cta-box p { font-size: 14px; color: var(--text-mid); } /* ========== ZIELGRUPPEN ========== */ .zielgruppen { background: var(--lavender); } .zielgruppen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; } .zg-card { background: var(--white); border-radius: var(--radius-md); padding: 1.75rem; transition: transform 0.2s, box-shadow 0.2s; } /* Distill: .zg-card:hover entfernt (audit.md P3) – ebenfalls ein No-op (Ruhewerte). */ /* Typografie: 11px -> 12px (Lesbarkeits-Untergrenze, audit.md P3); letter-spacing unveraendert. */ .zg-label { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-light); margin-bottom: 0.6rem; } .zg-card h3 { font-size: 1.15rem; font-weight: 700; color: var(--navy); margin-bottom: 0.75rem; } .zg-card p { font-size: 14px; color: var(--text-mid); line-height: 1.55; } /* ========== CONTACT ========== */ .contact { background: var(--white); } .btn-booking { display: inline-flex; align-items: center; gap: 10px; background: var(--navy); color: var(--white); padding: 14px 28px; border-radius: var(--radius-md); font-size: 15px; font-weight: 600; text-decoration: none; margin-bottom: 1.5rem; transition: opacity 0.2s; align-self: flex-start; } .btn-booking:hover { opacity: 0.88; } .contact-or { font-size: 13px; color: var(--text-light); text-align: left; margin-bottom: 0.75rem; margin-top: 0; } .contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: flex-start; } .contact-info h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 700; color: var(--navy); letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 1rem; /* Typografie: text-wrap:balance neu, wie .section-title. */ text-wrap: balance; } .contact-info p:not(.section-eyebrow) { font-size: 1rem; color: var(--text-mid); line-height: 1.7; margin-bottom: 2rem; } .contact-info { display: flex; flex-direction: column; align-items: flex-start; } .contact-details { display: flex; flex-direction: column; gap: 1rem; } .contact-item { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--text-dark); } .contact-item a { color: var(--navy); text-decoration: none; font-weight: 500; } .contact-item a:hover { text-decoration: underline; } .contact-icon-wrap { width: 36px; height: 36px; background: var(--lavender); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-icon-wrap svg { width: 18px; height: 18px; stroke: var(--navy); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .contact-form { background: var(--lavender); border-radius: var(--radius-lg); padding: 2.5rem; } .contact-form h3 { font-size: 1.15rem; font-weight: 700; color: var(--navy); margin-bottom: 1.5rem; } .form-group { margin-bottom: 1.2rem; } .form-group label { display: block; font-size: 13px; font-weight: 500; color: var(--text-mid); margin-bottom: 6px; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 11px 14px; border: 1.5px solid var(--lavender-mid); border-radius: var(--radius-sm); font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--text-dark); background: var(--white); transition: border-color 0.2s; outline: none; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--navy); } .form-group textarea { resize: vertical; min-height: 110px; } .btn-form { width: 100%; padding: 14px; background: var(--navy); color: var(--white); border: none; border-radius: var(--radius-sm); font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.2s, transform 0.2s; } .btn-form:hover { background: var(--navy-light); transform: translateY(-1px); } /* Navy-Variante für helle Sektionen */ /* Distill: !important entfernt (audit.md P3) – ueberfluessig, denn .btn-navy hat dieselbe Spezifitaet wie .btn-primary (je eine Klasse) und steht im Quelltext weiter unten, gewinnt also schon allein durch die Kaskade. Keine Pixelaenderung. */ .btn-navy { background: var(--navy); color: var(--white); } .btn-navy:hover { box-shadow: 0 10px 28px var(--navy-a25); } /* ========== FOOTER ========== -> site-chrome.css */ /* ========== RESPONSIVE ========== */ /* Die Kopf-/Fusszeilen-Zeilen (.nav-links, .nav-mobile-toggle, .footer-inner) stehen in site-chrome.css. */ @media (max-width: 900px) { .hero-inner { padding: 0 1.5rem; } .usp-band .section-inner { grid-template-columns: 1fr; } .leistungen-grid { grid-template-columns: 1fr; } .about-inner { grid-template-columns: 1fr; gap: 3rem; } .workshops-grid { grid-template-columns: 1fr; } .zielgruppen-grid { grid-template-columns: 1fr; } .contact-inner { grid-template-columns: 1fr; gap: 3rem; } .hero-apple { width:90%; right:-22%; } .hero-apple-ink { width:90%; right:-22%; } /* Entfernt: @keyframes apfelIn { to { opacity:.45; } } aus dem Prototyp. Die globale apfelIn-Regel (0.7) steht spaeter in der Datei und hat immer gewonnen; Jesse hat entschieden, die freigegebenen 0.7 auch auf dem Handy zu behalten. */ .hero-apple-fade { width:100%; background:linear-gradient(to right,var(--navy) 0%,transparent 60%); } } @media (max-width: 600px) { section { padding: 60px 1.25rem; } .hero { padding: 88px 0 60px; } .hero-actions { flex-direction: column; } } /* ========== MODAL ========== */ /* Kopf/Fuss: die Grundform des Dialogs (.modal-overlay, .modal-box, modalIn, .modal-close und ihr 640px-Innenabstand) steht unveraendert in site-chrome.css – die Datenschutz-Einstellungen sind ein Dialog auf jeder Seite, nicht nur auf der Startseite. Hier bleibt, was nur die Dialoge der Startseite betrifft. */ .modal-box .section-eyebrow { margin-bottom: 0.4rem; } .modal-box h2 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--navy); margin-bottom: 0.75rem; } .modal-box .section-lead { margin-bottom: 2rem; } .card-cta-hint { margin-top: 1.25rem; font-size: 13px; font-weight: 600; color: var(--white-a65); letter-spacing: 0.02em; transition: color 0.15s; } .leistung-card.featured:hover .card-cta-hint { color: var(--white-a100); } .leistung-card:not(.featured) .card-cta-hint { color: var(--text-light); } .leistung-card:not(.featured):hover .card-cta-hint { color: var(--navy); } /* Distill: .modal-box .workshop-card:hover entfernt (audit.md P3) – derselbe No-op wie .workshop-card:hover oben, hier nur fuer den Modal-Kontext wiederholt. */ /* (@media (max-width: 640px) .modal-box -> site-chrome.css) */ /* ========== FAQ ========== */ /* Layout: padding 6rem 0 -> padding-block 6rem. Die 0 hob den seitlichen Abstand der gemeinsamen section-Regel auf, sodass die FAQ unter ca. 1160px bis an den Bildschirmrand lief (0px statt 20px Handy / 32px Tablet wie alle anderen Sektionen). */ .faq-section { background: var(--lavender); padding-block: 6rem; } .faq-list { max-width: 720px; display: flex; flex-direction: column; gap: 0; } .faq-item { border-bottom: 1px solid var(--lavender-mid); padding: 1.75rem 0; } .faq-item:first-child { border-top: 1px solid var(--lavender-mid); } /* Layout: position:relative traegt den Trefffläche-Layer aus der ERGAENZUNGEN-Sektion (::before, vergroessert 24px -> ~40px Hoehe, ohne den Text zu verschieben). */ /* Politur: font-family:inherit –