/* ============================================================ Christina Stanke – Brautstyling | Stylesheet Basis: hessimmo (Tokens, Reset, .wrap, Section-Header), hesserodiertechnik (Nav, Buttons, .page-body), pehcon (Fade-In) ============================================================ */ /* ---------- Schrift: Marcellus – selbst gehostet (SIL OFL 1.1) ---------- Bewusste, freigegebene Abweichung von der zentralen Regel „nur System- Font-Stack": die Datei liegt lokal in fonts/ — es geht KEIN Request an Google, keine IP-Übertragung. Genau das trägt den Datenschutz-Abschnitt „keine Drittdienste"; ohne Self-Hosting wäre der Abschnitt falsch. Lizenztext liegt als fonts/OFL.txt daneben (Pflicht der OFL 1.1). Marcellus hat NUR Schnitt 400 → siehe font-synthesis im Reset. Version steckt im Dateinamen, bewusst kein „?v=" — die Pipeline ersetzt „?v=" nur in *.html, ein Font-Query hier bliebe ewig 0000000. ---------------------------------------------------------------------- */ @font-face { font-family: 'Marcellus'; src: url('../fonts/marcellus-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; /* Kein unicode-range: es wird genau EIN Subset (latin) ausgeliefert. Latin deckt ä ö ü ß € – ab. */ } /* ---------- Tokens ---------- */ :root { /* --- Palette: aus Christinas Flyer ausgelesen (Rosé + Greige/Gold) --- */ --rose: #FCF0FC; /* Flyer-Hintergrund – Haupt-Hintergrund */ --creme: #FBF4F7; /* Karten auf --rose */ --rose-2: #F5E7EF; /* Sekundär-Hintergrund (satteres Rosé) */ --sand: #E7D9CE; /* Trennlinien, Deko-Rahmen */ --sand-deep: #D8C3B4; /* Kartenkanten auf --rose */ --greige: #A89C84; /* Flyer-Akzent – NIE als Textfarbe! s. unten */ --ink: #312321; /* Flyer-Dunkel – Text, Headings, Footer */ /* --- Zwei verdunkelte Töne: das Flyer-Greige hält AA nicht --- Alle Werte selbst nachgerechnet (WCAG 2.x Relative Luminance): --greige #A89C84 fällt als TEXTfarbe klar durch: auf --rose 2.45:1 · weiß darauf 2.71:1 Der Flyer selbst ist an diesen Stellen nicht barrierefrei. Genau dort säßen .section-overline (0.72rem), alle Button-Labels und das „beliebt"-Banner. → --greige ist FLÄCHEN- und Hover-Rand-Farbe. WICHTIG: Anders als das alte Mocha reicht --greige NICHT einmal als Formularrahmen (2.71:1 gegen weiß < SC-1.4.11-Grenze 3.0) — dafür dient --greige-deep. */ --greige-deep: #6E6353; /* 5.32 rose · 5.88 weiß darauf · als Rahmen 5.9 gegen weiß */ --taupe: #6B5F4E; /* 5.64 rose · 5.21 rose-2 · 5.75 creme – hält überall AA */ /* --- Semantische Aliase --- */ --text: var(--ink); /* 13.65 rose · 13.92 creme · AAA */ --muted: var(--taupe); --border: var(--sand); /* NUR Deko-Linien */ --border-ui: var(--greige-deep); /* UI-GRENZEN (Formularfeld, Ghost-Btn): WCAG 1.4.11 verlangt 3:1. Das Flyer-Greige schafft nur 2.71 gegen weiß und wäre dort unsichtbar — deshalb der dunklere Akzent (5.9:1 gegen weiß). Nicht auf --greige zurückdrehen. */ --fehler: #A8443A; /* 5.35:1 auf --rose · 4.94 auf --rose-2 */ /* --- Schrift --- Fallback bewusst Palatino-Familie statt Georgia: Marcellus ist eine schmale Old-Style-Antiqua, Georgia ist deutlich breiter — der Umbruch beim Font-Swap springt damit sichtbar weniger. */ --font-display: 'Marcellus', 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* --- Typo-Skala --- Marcellus hat nur 400. Hierarchie entsteht ausschließlich über GRÖSSE, LAUFWEITE und UPPERCASE — nie über font-weight. */ --fs-hero: clamp(2.4rem, 6vw, 4.4rem); --fs-h1: clamp(1.9rem, 4vw, 2.8rem); --fs-h2: clamp(1.8rem, 2.5vw, 2.4rem); --fs-h3: 1.2rem; --fs-preis: 2rem; --fs-lead: 1.05rem; --fs-body: 1rem; --fs-sm: 0.92rem; --fs-over: 0.72rem; --ls-brand: 0.18em; --ls-over: 0.22em; --ls-label: 0.14em; --ls-btn: 0.10em; /* --- Layout --- */ --nav-h: 84px; /* großzügig, damit das runde Logo mit umlaufendem Text Platz hat */ --sec-y: 96px; --r: 4px; --r-pill: 999px; --shadow-lift: 0 6px 24px rgba(49, 35, 33, 0.10); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: hidden; /* One-Pager mit fixer Nav: ohne das landet jeder #anker unter der Leiste. EXAKT --nav-h, kein Zuschlag: jedes zusätzliche Pixel zeigt einen Streifen der VORHERIGEN Sektion unter der Nav — bei alternierenden Sektionsfarben fällt das als beiger Balken sofort auf. Luft entsteht ohnehin durch das padding-block der Sektionen (96px). */ scroll-padding-top: var(--nav-h); } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.7; color: var(--text); background: var(--rose); -webkit-font-smoothing: antialiased; /* PFLICHT — die wichtigste Zeile des Stylesheets. Marcellus hat nur Schnitt 400. Ohne das rechnet der Browser aus jedem font-weight > 400 einen verschmierten Fake-Fettschnitt. Neutralisiert auch geerbte Werte aus den Vorlagen (hessimmo .whg-size: 800): angefordertes 800 rendert still als echtes 400. Für die System-Sans harmlos — die hat echte Schnitte. */ font-synthesis: none; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { cursor: pointer; font: inherit; border: none; background: none; color: inherit; } input, select, textarea { font: inherit; color: inherit; } address { font-style: normal; } /* Fokus — existiert in KEINEM der Bestandsprojekte. Hier neu, weil dieses Projekt als erstes ein Formular hat und eine Braut, die per Tastatur durch sechs Felder geht, sonst blind tippt. */ :focus-visible { outline: 2px solid var(--greige-deep); outline-offset: 2px; } /* Auf dunklen Flächen ist mocha-deep unsichtbar (1.62:1 auf --brown). Dort heller Ring — --creme auf --brown = 9.58:1. */ .footer :focus-visible, .cookie-banner :focus-visible { outline-color: var(--creme); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ---------- Typografie ---------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 400; /* explizit: Marcellus hat nur diesen Schnitt */ line-height: 1.22; color: var(--ink); letter-spacing: 0.005em; text-wrap: balance; /* Progressive Enhancement */ } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } p { color: var(--text); } .lead { font-size: var(--fs-lead); color: var(--muted); line-height: 1.8; } strong { font-weight: 600; } /* Marcellus auf Nicht-Headings (Preis, Wortmarke, Ziffern). Absichtlich NICHT „.marcellus": der Klassenname überlebt einen Schriftwechsel. */ .display { font-family: var(--font-display); font-weight: 400; } /* ---------- Utilities ---------- */ .wrap { width: min(1160px, 100% - 48px); margin-inline: auto; } /* Rechtsseiten. width greift zuerst, max-width kappt nur nach oben. */ .wrap--schmal { max-width: 760px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Inline-SVGs kollabieren ohne explizite Größe — dokumentierter Bug im Bestand. Ein Utility statt einer Regel pro Sektion. */ .icon { width: 20px; height: 20px; flex-shrink: 0; } .icon--sm { width: 16px; height: 16px; } /* ---------- Section-Header ---------- */ .section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; } .section-header--zentriert { flex-direction: column; align-items: center; text-align: center; } .section-overline { /* bewusst Sans: 700 gibt es in Marcellus nicht, und font-synthesis: none würde es hier still auf 400 zurückfallen lassen. */ font-family: var(--font-body); font-size: var(--fs-over); font-weight: 700; letter-spacing: var(--ls-over); text-transform: uppercase; color: var(--greige-deep); /* NICHT --mocha: 4.39:1 bei 0.72rem = AA-Fail */ margin-bottom: 10px; } .section-title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); color: var(--ink); } /* ---------- Buttons ---------- Der 2px-Rahmen an BEIDEN Varianten ist kein Zufall: er hält prime und ghost exakt gleich hoch, wenn sie nebeneinander im Hero stehen. */ .btn-row { display: flex; gap: 14px; flex-wrap: wrap; } .btn-prime, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 32px; font-size: 0.85rem; font-weight: 700; letter-spacing: var(--ls-btn); text-transform: uppercase; border-radius: var(--r); border: 2px solid transparent; transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s; } .btn-prime { background: var(--greige-deep); border-color: var(--greige-deep); color: #fff; /* 6.51:1 — auf --mocha wären es 4.47:1 */ } .btn-prime:hover { background: var(--ink); /* weiß auf --brown = 10.53:1 */ border-color: var(--ink); box-shadow: var(--shadow-lift); } .btn-ghost { background: transparent; color: var(--greige-deep); border-color: var(--border-ui); } .btn-ghost:hover { border-color: var(--greige-deep); background: var(--creme); color: var(--ink); } /* PFLICHT: Ein inline-SVG ohne width/height rendert mit seiner Ersatzgröße (300×150 px) und sprengt den Button — die Beschriftung bricht dann auf zwei Zeilen. Im Browser verifiziert, nicht theoretisch. */ .btn-prime svg, .btn-ghost svg { width: 15px; height: 15px; flex-shrink: 0; } .btn-prime:disabled, .btn-ghost:disabled { opacity: 0.4; pointer-events: none; } /* Cookie-Banner liegt auf --brown: ein --mocha-deep-Button ist dort nur 1.62:1 vom Grund abgesetzt und verschwindet als FORM. Heller Rahmen gibt ihm eine Kante: --sand auf --brown = 7.81:1. */ .cookie-banner .btn-prime { border-color: var(--sand); } /* ---------- Bild-Platzhalter ---------- Muster: hesserodiertechnik .service-media--soon. Gleicher Container wie das echte Bild, nur Modifier → späterer Tausch ohne Layout-Sprung. */ .media { border-radius: var(--r); overflow: hidden; border: 1px solid var(--border); background: var(--creme); } .media img { width: 100%; height: 100%; object-fit: cover; } .media--3x4 { aspect-ratio: 3 / 4; } .media--4x5 { aspect-ratio: 4 / 5; } .media--soon { border-style: dashed; border-color: var(--border-ui); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted); text-align: center; padding: 24px; } .media--soon svg { width: 30px; height: 30px; opacity: 0.6; } .media--soon span { font-size: var(--fs-over); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; } /* ---------- Animation ---------- Muster: pehcon. WICHTIG: .fade-in setzt opacity 0 — ohne JS wäre die Seite leer. Deshalb greift die Regel NUR, wenn main.js die Klasse .js am gesetzt hat (siehe main.js, erste Zeile). Ohne JS bleibt alles sichtbar. */ .js .fade-in { opacity: 0; transform: translateY(24px); transition: opacity .55s ease, transform .55s ease; } .js .fade-in.is-visible { opacity: 1; transform: none; } .js .fade-in[data-delay="1"] { transition-delay: .10s; } .js .fade-in[data-delay="2"] { transition-delay: .22s; } .js .fade-in[data-delay="3"] { transition-delay: .36s; } @media (prefers-reduced-motion: reduce) { .js .fade-in { opacity: 1; transform: none; transition: none; } } /* ---------- Responsive Basis ---------- */ @media (max-width: 700px) { :root { --sec-y: 64px; } .section-header { flex-direction: column; align-items: flex-start; margin-bottom: 32px; } .btn-prime, .btn-ghost { flex: 1 1 100%; } } /* ============================================================ NAVIGATION Basis: hesserodiertechnik css Z.132-260 — gleiche Mechanik (fixed, Underline-Hover per ::after scaleX, Burger, Drawer, Breakpoint 860px), Farben von dunkel auf hell gedreht. Dauerhaft solid, KEIN Scroll-Toggle: der Hero ist hell, ein Farbwechsel beim Scrollen erzeugt bei „schlicht" nur Unruhe. ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h); background: var(--rose); border-bottom: 1px solid var(--sand); } .nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; } /* Marke. min-height hält die Höhe konstant → kein Sprung, falls das Logo später gegen eine andere Variante (z. B. logo.svg) getauscht wird. */ .nav__brand { display: flex; align-items: center; min-height: 32px; flex-shrink: 0; } /* Christinas echtes Logo (freigestelltes PNG, dunkel auf transparent). Das runde CS-Monogramm mit umlaufendem Schriftzug braucht Höhe, um lesbar zu sein — deshalb ist --nav-h auf 84px angehoben. Das Logo füllt die Leiste fast aus (72px bei 84px Nav). Transition am Grundzustand (NICHT im :hover) — sonst schnappt das Logo beim Verlassen ohne Übergang zurück und „blitzt" auf. */ .nav__logo { height: 72px; width: auto; display: block; transition: opacity 0.2s; } .nav__brand:hover .nav__logo { opacity: 0.82; } .nav__links { display: flex; align-items: center; gap: 4px; margin-left: auto; } .nav__links a { position: relative; display: flex; align-items: center; height: var(--nav-h); padding: 0 16px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--taupe); /* auf Ivory = 6.45:1 */ transition: color 0.2s; } .nav__links a:hover { color: var(--ink); } /* Feine Unterstreichung — hier ist --mocha erlaubt: Dekor, kein Text */ .nav__links a::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 20px; height: 1px; background: var(--greige); transform: scaleX(0); transition: transform 0.25s; } .nav__links a:hover::after { transform: scaleX(1); } .nav__contact { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 10px 20px; background: var(--greige-deep); /* NICHT --mocha: weiß darauf = 4.47:1 */ border-radius: var(--r); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; transition: background 0.2s; } .nav__contact svg { width: 14px; height: 14px; } .nav__contact:hover { background: var(--ink); } /* Burger: 3 leere , X-Animation aus hessimmo css Z.145-147 (gap 5px + height 2px → Mittenabstand 7px → translateY(7px)) */ .nav__burger { display: none; flex-direction: column; gap: 5px; padding: 8px 6px; } .nav__burger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; } .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); } .nav__drawer { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 99; flex-direction: column; background: var(--rose); border-bottom: 1px solid var(--sand); box-shadow: 0 12px 28px rgba(49,35,33,0.08); } .nav__drawer.is-open { display: flex; } .nav__drawer a { padding: 16px 24px; border-bottom: 1px solid var(--sand); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--taupe); transition: color 0.2s, padding-left 0.2s; } .nav__drawer a:hover { color: var(--ink); padding-left: 32px; } /* Letzter Eintrag = CTA */ .nav__drawer a:last-child { background: var(--greige-deep); color: #fff; border-bottom: none; text-align: center; } .nav__drawer a:last-child:hover { padding-left: 24px; background: var(--ink); } @media (max-width: 860px) { .nav__links, .nav__contact { display: none; } .nav__burger { display: flex; } } /* ============================================================ HERO ------------------------------------------------------------ Die Kernfrage: elegant OHNE Foto. Die Antwort ist die Komposition, nicht das Bild: links trägt die Marcellus-Wortmarke als h1 das ganze Gewicht, rechts steht ein versetztes Passepartout (Creme-Block + gerahmter Kasten). Diese Geometrie bleibt nach der Foto-Lieferung exakt bestehen — das Foto fällt in den Kasten, sonst ändert sich nichts. Kein Vollbild-Bild: ein full-bleed Platzhalter ließe die Seite ab der ersten Sekunde kaputt aussehen. ============================================================ */ .hero { position: relative; overflow: hidden; background: var(--rose); padding-top: calc(var(--nav-h) + 88px); padding-bottom: 88px; } .hero__inner { display: grid; grid-template-columns: 1fr 0.82fr; align-items: center; gap: 64px; } .hero__copy { max-width: 34rem; } .hero__overline { font-family: var(--font-body); font-size: var(--fs-over); font-weight: 700; letter-spacing: var(--ls-over); text-transform: uppercase; color: var(--greige-deep); /* auf Ivory = 6.40:1 */ margin-bottom: 20px; } .hero__title { font-size: var(--fs-hero); font-weight: 400; line-height: 1.06; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); margin-bottom: 22px; } .hero__sub { font-size: clamp(0.98rem, 1.4vw, 1.08rem); line-height: 1.8; color: var(--muted); max-width: 44ch; margin-bottom: 38px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; } /* Bildspalte. ::before ist das versetzte Passepartout in --creme. Bewusst mit 1px --sand-Rand: Creme auf Ivory ist nur 1.08:1 — die Kante macht der Rand, die Wärme die Fläche. */ .hero__figure { position: relative; } .hero__figure::before { content: ''; position: absolute; inset: -28px -28px 28px 28px; background: var(--creme); border: 1px solid var(--sand); border-radius: var(--r); } .hero__figure .media { position: relative; } @media (max-width: 860px) { .hero { padding-top: calc(var(--nav-h) + 56px); padding-bottom: 64px; } .hero__inner { grid-template-columns: 1fr; gap: 48px; } /* Text zuerst: ein gestrichelter Kasten als erstes Element auf dem Handy wäre genau der „Baustellen"-Eindruck, den wir vermeiden. */ .hero__copy { max-width: none; } .hero__figure { width: min(340px, 100%); margin-inline: auto; } .hero__figure::before { inset: -16px -16px 16px 16px; } } @media (max-width: 600px) { .hero__sub { margin-bottom: 30px; } } /* ============================================================ ÜBER MICH Merge aus „Willkommen" + „Über mich" + „DEINE VORTEILE" der Referenz. Der Pill-Strip unter dem Raster ersetzt eine Sektion. ============================================================ */ .ueber { background: var(--rose-2); padding-block: var(--sec-y); } .ueber__inner { display: grid; grid-template-columns: 0.85fr 1fr; align-items: center; gap: 64px; } /* DOM: Text → Bild (mobil richtige Reihenfolge). Desktop: Bild nach links. Das Bild ist nicht interaktiv, die Abweichung von DOM- und Leserichtung ist damit unkritisch. */ .ueber__figure { order: -1; } /* Cluster: Haupt-Foto + kleines überlappendes Pinsel-Detail (Inset). max-width am Cluster, damit das Inset relativ zum sichtbaren Foto sitzt. */ .ueber__cluster { position: relative; width: 100%; max-width: 420px; margin-inline: auto; } .ueber__inset { position: absolute; right: -22px; bottom: -30px; width: 46%; margin: 0; border: 5px solid var(--creme); box-shadow: 0 14px 30px rgba(49, 35, 33, 0.20); } .ueber__text { margin-top: 20px; } .ueber__text p { color: var(--muted); line-height: 1.85; } /* auf Beige = 5.70:1 */ .ueber__text p + p { margin-top: 16px; } /* Vertrauens-Fakten. Basis: hessimmo css Z.891-905 (.whg-facts) */ .ueber__fakten { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--sand); } .ueber__fakt { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; background: var(--creme); border: 1px solid var(--sand); border-radius: var(--r-pill); font-size: 0.82rem; font-weight: 600; color: var(--ink); /* auf Creme = 9.58:1 */ } .ueber__fakt svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--greige-deep); } @media (max-width: 860px) { .ueber__inner { grid-template-columns: 1fr; gap: 40px; } .ueber__figure { order: 0; } /* zurück in die DOM-Reihenfolge: Text zuerst */ .ueber__cluster { max-width: 320px; } .ueber__foto { margin-inline: auto; } .ueber__inset { right: -14px; bottom: -20px; width: 44%; } .ueber__fakten { margin-top: 48px; padding-top: 32px; } } /* ============================================================ LOOKS — Bilderfächer Die Bilder liegen wie aufgefächerte Abzüge übereinander: jedes bekommt einen weißen Rand wie ein Fotoabzug, eine eigene Neigung und schiebt sich per negativem Rand über das vorige. Beim Hovern richtet sich das Bild auf, hebt sich an und kommt nach vorne. Der Trick ist transform-origin unterhalb der Karte: dadurch fächern die Neigungen automatisch zu einem Bogen auf, ohne dass jede Karte zusätzlich vertikal versetzt werden muss. ============================================================ */ .looks { background: var(--rose); padding-block: var(--sec-y); overflow: hidden; /* die äußeren Karten dürfen nicht scrollen lassen */ } .looks__faecher { display: flex; justify-content: center; align-items: center; padding-block: 30px 46px; /* Luft für Neigung und Hover-Hub */ } .looks__item { flex: 0 0 auto; width: clamp(140px, 15vw, 210px); margin: 0; padding: 10px 10px 34px; /* unten mehr: Polaroid-Anmutung */ background: #fff; border: 1px solid var(--sand); border-radius: 2px; box-shadow: 0 6px 20px rgba(49, 35, 33, 0.13); transform-origin: 50% 150%; /* Drehpunkt unterhalb → Bogen entsteht */ transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease; } .looks__item + .looks__item { margin-left: -5.5%; } /* Neigungen: symmetrisch um die Mitte. Die z-index-Staffelung lässt den Fächer von links nach rechts überlappen wie Karten in der Hand. Das ist der GRUNDZUSTAND — er gilt auch ohne JavaScript. */ .looks__item:nth-child(1) { transform: rotate(-11deg); z-index: 1; } .looks__item:nth-child(2) { transform: rotate(-6.6deg); z-index: 2; } .looks__item:nth-child(3) { transform: rotate(-2.2deg); z-index: 3; } .looks__item:nth-child(4) { transform: rotate(2.2deg); z-index: 4; } .looks__item:nth-child(5) { transform: rotate(6.6deg); z-index: 5; } .looks__item:nth-child(6) { transform: rotate(11deg); z-index: 6; } /* Mit JavaScript klappt der Fächer beim Hereinscrollen auf: solange der Block noch nicht sichtbar ist, liegen die Karten deckungsgleich gerade übereinander; mit .is-visible fallen sie auf die Neigungen oben zurück und fächern auf. ⚠ WICHTIG: .fade-in sitzt am CONTAINER, nicht an den Karten. Läge es an den Karten, würde `.js .fade-in.is-visible { transform: none }` (0,3,0) die Neigungen `.looks__item:nth-child(n)` (0,2,0) überschreiben und der Fächer bliebe kerzengerade — im Browser passiert, nicht theoretisch. Genau dieser Konflikt ist in pehcon-website live kaputt (.service-card:hover Z.331 vs .fade-in.is-visible Z.876). */ .js .looks__faecher:not(.is-visible) .looks__item { transform: rotate(0deg); } .looks__item:nth-child(1) { transition-delay: 0.05s; } .looks__item:nth-child(2) { transition-delay: 0.11s; } .looks__item:nth-child(3) { transition-delay: 0.17s; } .looks__item:nth-child(4) { transition-delay: 0.23s; } .looks__item:nth-child(5) { transition-delay: 0.29s; } .looks__item:nth-child(6) { transition-delay: 0.35s; } /* Beim Hover darf nichts nachlaufen — sonst zuckt die Karte verzögert. */ .looks__item:hover, .looks__item:focus-within { transition-delay: 0s; } /* Aufrichten + anheben. Die Neigung wird bewusst je Karte überschrieben statt global auf rotate(0): so bleibt die Spezifität gleich (0,2,0) und der Hover gewinnt nicht zufällig, sondern durch die Reihenfolge. */ .looks__item:hover, .looks__item:focus-within { transform: rotate(0deg) translateY(-14px) scale(1.05); box-shadow: 0 16px 40px rgba(49, 35, 33, 0.22); z-index: 10; } .looks__item .media { border: none; border-radius: 0; background: var(--rose-2); } /* Der Platzhaltertext muss in die schmale Karte passen — mit der Standardgröße wurde „FOTO FOLGT" abgeschnitten. */ .looks__item .media--soon { gap: 6px; padding: 10px; } .looks__item .media--soon svg { width: 22px; height: 22px; } .looks__item .media--soon span { font-size: 0.55rem; letter-spacing: 0.08em; } .looks__item img { cursor: zoom-in; } /* Bildunterschrift im weißen Rand unten — handschriftlich anmutend durch Marcellus, aber klein und ruhig. */ .looks__item figcaption { position: absolute; left: 10px; right: 10px; bottom: 9px; font-family: var(--font-display); font-size: 0.72rem; text-align: center; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .looks__item { position: relative; } .looks__hinweis { margin-top: 8px; text-align: center; font-size: var(--fs-sm); color: var(--muted); } .looks__hinweis a { color: var(--greige-deep); text-decoration: underline; text-underline-offset: 3px; } /* Ab hier trägt der Fächer nicht mehr: sechs Karten nebeneinander werden zu schmal. Zwei versetzte Reihen behalten die Verspieltheit. */ @media (max-width: 860px) { .looks__faecher { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding-block: 12px 24px; } .looks__item { width: auto; padding: 7px 7px 24px; transform-origin: 50% 50%; } .looks__item + .looks__item { margin-left: 0; } /* Leichte Streuung statt Fächer — wirkt wie hingelegte Abzüge. */ .looks__item:nth-child(1) { transform: rotate(-3deg); } .looks__item:nth-child(2) { transform: rotate(2deg); } .looks__item:nth-child(3) { transform: rotate(-1.5deg); } .looks__item:nth-child(4) { transform: rotate(2.5deg); } .looks__item:nth-child(5) { transform: rotate(-2deg); } .looks__item:nth-child(6) { transform: rotate(3deg); } .looks__item figcaption { font-size: 0.62rem; bottom: 6px; } } @media (max-width: 560px) { .looks__faecher { grid-template-columns: repeat(2, 1fr); } } /* Ohne Bewegung: keine Neigung, keine Überlappung — ein ruhiges Raster. */ @media (prefers-reduced-motion: reduce) { .looks__faecher { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; } .looks__item, .looks__item:nth-child(n) { width: auto; transform: none; transition: none; margin-left: 0; } .looks__item:hover { transform: translateY(-4px); } } /* ============================================================ LEISTUNGEN & PREISE Basis: hessimmo css Z.799-984 (.whg-card / .whg-price / .whg-status). Bewusste Abweichungen vom Vorbild: - .whg-gallery entfällt ersatzlos (Pakete haben keine Bilder) - font-weight 400 überall dort, wo Marcellus greift - .paket-card--featured ist NEU: ein Hervorhebungs-Modifier für Karten existiert in keinem der sechs Bestandsprojekte. ============================================================ */ /* Sektionsfolge (Hintergründe müssen alternieren): hero --ivory → ueber --beige → looks --ivory → leistungen --beige → kontakt --ivory → footer --brown. Auf --beige stehen die weißen Karten mit 1.15:1 ab — der beste Wert, den diese sehr helle Palette hergibt; die Kante macht der --sand-Rahmen. */ .leistungen { background: var(--rose-2); padding-block: var(--sec-y); } /* Standard = ZWEI Karten, Raster deshalb auf 860px begrenzt und zentriert: über die volle .wrap-Breite (1160px) wären zwei Karten je ~560px breit und wirkten leer. Für eine dritte Karte: .leistungen__grid--drei. */ .leistungen__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; max-width: 860px; margin-inline: auto; } .leistungen__grid--drei { grid-template-columns: repeat(3, 1fr); max-width: none; } /* --paket-banner-h sitzt bewusst HIER und nicht auf .leistungen: .paket-card__banner und .paket-card__body sind Kinder und erben den Wert. Auf .leistungen definiert wäre calc(24px + var(--paket-banner-h)) außerhalb der Sektion „invalid at computed-value time" → padding-top fiele auf 0 und die Karten stünden versetzt. KEIN :hover — bewusst: 1) .paket-card trägt .fade-in. Ein .paket-card:hover { transform } (0,2,0) verliert gegen .js .fade-in.is-visible { transform: none } (0,3,0), das weiter unten steht. In pehcon ist genau das live kaputt (.service-card:hover Z.331 vs .fade-in.is-visible Z.876). 2) Die Karte ist nicht klickbar — nur der CTA darin. Ein Lift auf einer nicht-klickbaren Fläche ist eine falsche Affordance. */ .paket-card { --paket-banner-h: 38px; background: #fff; border: 1px solid var(--sand); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; } /* Hervorhebung: NUR Border + Banner. Bewusst kein scale(), kein Anheben, kein farbiger Schatten. box-sizing: border-box hält die Außenmaße trotz 2px identisch. */ .paket-card--featured { border: 2px solid var(--greige-deep); } /* Banner „Beliebt" — der Kunde sagte „Banner", nicht „Badge". Weiß auf --mocha-deep = 6.51:1. Auf --mocha wären es 4.47:1 → AA-Fail. Kein Marcellus:

erbt den System-Sans, 700 ist dort ein echter Schnitt. */ .paket-card__banner { height: var(--paket-banner-h); display: flex; align-items: center; justify-content: center; background: var(--greige-deep); color: #fff; font-size: var(--fs-over); font-weight: 700; letter-spacing: var(--ls-brand); text-transform: uppercase; } .paket-card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; } /* Karten OHNE Banner gleichen die Bannerhöhe per Padding aus, damit die Paketnamen nebeneinander auf einer Linie sitzen. Kein leeres Platzhalter-Element im DOM (Screenreader läse sonst ins Leere). */ .paket-card:not(.paket-card--featured) .paket-card__body { padding-top: calc(24px + var(--paket-banner-h)); } .paket-card__label { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--greige-deep); margin-bottom: 8px; } /* Paketname: echtes

. hessimmo nutzt hier und
; wohnungen.html hat h2=0 und h3=0 — dieser geerbte Fehler wird NICHT übernommen. */ .paket-card__name { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.3; color: var(--ink); margin-bottom: 14px; } /* Preis = Blickfang der Karte (Rolle der .whg-size). font-weight 400 statt 800: Marcellus hat keinen fetten Schnitt. */ .paket-card__price { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-preis); line-height: 1; color: var(--ink); } .paket-card__price-note { font-size: 0.78rem; color: var(--muted); margin: 6px 0 16px; } .paket-card__desc { color: var(--muted); font-size: var(--fs-sm); line-height: 1.7; margin-bottom: 18px; } /* Häkchen-Liste — 1:1 aus .whg-features (hessimmo Z.918-945). Der Haken ist als Data-URI mit stroke='white' eingebacken — der Kreis MUSS dunkel bleiben. --mocha-deep + weißer Haken = 6.51:1. background-color statt der background-Kurzform: die Kurzform würde ein davor gesetztes background-image zurücksetzen. */ .paket-card__list { padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 7px; } /* Der Text MUSS in einem stehen. Grund: das
  • ist ein Flex-Container — ohne Wrapper wird jedes im Text zu einem eigenen Flex-Item und zerreißt den Satz in nebeneinanderliegende Spalten („Langanhaltendes | und | Make-up am"). Das Vorbild (hessimmo .whg-features) hat kein in der Liste und stolpert deshalb nicht darüber. */ .paket-card__list li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.88rem; color: var(--ink); line-height: 1.45; } .paket-card__list li > span { min-width: 0; } .paket-card__list li::before { content: ''; flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; background-color: var(--greige-deep); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpolyline points='2,6 5,9 10,3' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } /* ist semantisch richtig (Betonung auf „oder"/„und"); nur von Kursiv auf Fett umgestellt, weil Marcellus keinen Kursivschnitt hat. */ .paket-card__list em { font-style: normal; font-weight: 700; } /* margin-top:auto hält die Fußzeilen bündig (Muster .whg-available). */ .paket-card__note { font-size: 0.85rem; color: var(--muted); margin-top: auto; padding-top: 14px; border-top: 1px solid var(--sand); } .paket-card__cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; padding: 13px 24px; background: var(--greige-deep); color: #fff; border: 2px solid var(--greige-deep); border-radius: var(--r); font-size: 0.78rem; font-weight: 700; letter-spacing: var(--ls-btn); text-transform: uppercase; transition: background 0.2s, border-color 0.2s, color 0.2s; } .paket-card__cta:hover { background: var(--ink); border-color: var(--ink); } /* Nicht hervorgehobene Karten bekommen den Ghost-Button: lenkt zur beliebten Karte, ohne die Sektion lauter zu machen. */ .paket-card:not(.paket-card--featured) .paket-card__cta { background: transparent; color: var(--greige-deep); /* auf #fff = 6.51:1 */ } .paket-card:not(.paket-card--featured) .paket-card__cta:hover { background: var(--greige-deep); color: #fff; } /* Gemeinsame Unterüberschrift für Add-ons und Ablauf */ .leistungen__subtitel { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; color: var(--ink); margin-bottom: 16px; } /* ---------- Gäste- & Eventstyling (zweite Preiskategorie) ---------- Kompakte Zeilen statt Karten: es sind nur zwei Preise ohne Leistungs- liste — Karten wären hier überdimensioniert. Zwei Einträge nebeneinander, Preis rechtsbündig wie in Christinas Preisliste. */ .leistungen__gaeste { margin-top: 56px; max-width: 640px; margin-inline: auto; } .gaeste__liste { display: grid; gap: 0; border-top: 1px solid var(--sand); } .gaeste__zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--sand); } .gaeste__name { font-size: 0.95rem; color: var(--ink); } .gaeste__name em { font-style: normal; font-weight: 700; } .gaeste__preis { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; color: var(--ink); white-space: nowrap; } .gaeste__hinweis { margin-top: 14px; font-size: 0.82rem; color: var(--muted); } /* ---------- Ablauf (4 Schritte, animierter Stepper) ---------- Die Schritte hängen an einer Linie, die beim Hereinscrollen von links nach rechts durchläuft. Zwei übereinanderliegende Linien: ::before = graue Spur (immer da), ::after = gefüllte Linie (wächst). Beide laufen nur von Kreismitte 1 bis Kreismitte 4 — bei vier gleich breiten Spalten sind das exakt 12.5% und 87.5%. Kein Überstand. Getrieben wird die Animation vom .fade-in/.is-visible des Elternblocks, also ohne eine einzige Zeile zusätzliches JavaScript. */ .leistungen__ablauf { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--sand); } .ablauf__liste { --ablauf-gap: 24px; counter-reset: schritt; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ablauf-gap); position: relative; } /* Spur + Füllung: laufen exakt von Kreismitte 1 bis Kreismitte 4. top: 17px = Mitte des 34px hohen Kreises. Die Einrückung ist keine runde Prozentzahl. Bei N Spalten mit Gap gilt: Spaltenbreite = (100% − (N−1)×gap) / N Kreismitte = Spaltenbreite / 2 Bei N=4 also (100% − 3×gap) / 8. ⚠ Ändert sich die Zahl der Schritte, MUSS diese Formel mit — sonst endet die Linie neben den Kreisen. Im Browser nachgemessen. */ .ablauf__liste::before, .ablauf__liste::after { content: ''; position: absolute; top: 17px; left: calc((100% - 3 * var(--ablauf-gap)) / 8); right: calc((100% - 3 * var(--ablauf-gap)) / 8); height: 2px; border-radius: 1px; } .ablauf__liste::before { background: var(--sand); } .ablauf__liste::after { background: var(--greige-deep); transform: scaleX(0); transform-origin: left center; } /* Linie läuft los, sobald der Block sichtbar wird. Der Elternblock trägt .fade-in — dessen .is-visible setzt der IntersectionObserver. */ .js .leistungen__ablauf.is-visible .ablauf__liste::after { transform: scaleX(1); transition: transform 2.6s cubic-bezier(0.33, 0.1, 0.4, 1) 0.4s; } /* Ohne JS gibt es kein .is-visible → die Linie wäre für immer leer. Deshalb ist sie ohne die .js-Klasse von vornherein voll. */ html:not(.js) .ablauf__liste::after { transform: scaleX(1); } .ablauf__schritt { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; /* hebt den Kreis über die Linie */ z-index: 1; } /* Ziffernkreis. Weiß auf --mocha-deep = 6.51:1. Der 3px-Ring in der Sektionsfarbe schneidet die Linie sauber am Kreis ab — ohne ihn liefe sie sichtbar unter dem Kreisrand durch. */ .ablauf__schritt::before { counter-increment: schritt; content: counter(schritt); flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--sand); color: var(--ink); box-shadow: 0 0 0 3px var(--rose-2); font-family: var(--font-display); font-weight: 400; font-size: 1rem; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; transition: background 0.4s ease, color 0.4s ease; } /* Die Kreise färben sich nacheinander ein — im Takt der durchlaufenden Linie. Bei drei Schritten liegen sie bei 0 %, 50 % und 100 % der Linie: Verzögerung = 0.25s Vorlauf + Anteil × 1.2s Laufzeit. */ .js .leistungen__ablauf.is-visible .ablauf__schritt::before { background: var(--greige-deep); color: #fff; } /* Vier Kreise bei 0/33/66/100 % der 2.6s-Linie, plus 0.4s Vorlauf. */ .js .leistungen__ablauf.is-visible .ablauf__schritt:nth-child(1)::before { transition-delay: 0.40s; } .js .leistungen__ablauf.is-visible .ablauf__schritt:nth-child(2)::before { transition-delay: 1.27s; } .js .leistungen__ablauf.is-visible .ablauf__schritt:nth-child(3)::before { transition-delay: 2.13s; } .js .leistungen__ablauf.is-visible .ablauf__schritt:nth-child(4)::before { transition-delay: 3.00s; } html:not(.js) .ablauf__schritt::before { background: var(--greige-deep); color: #fff; } .ablauf__name { display: block; font-size: 0.88rem; font-weight: 700; color: var(--ink); margin-bottom: 3px; } .ablauf__text { display: block; font-size: 0.85rem; line-height: 1.6; color: var(--muted); /* auf --beige = 5.70:1 */ max-width: 22ch; margin-inline: auto; } /* Wer Animationen abbestellt hat, bekommt den Endzustand sofort. */ @media (prefers-reduced-motion: reduce) { .js .leistungen__ablauf .ablauf__liste::after { transform: scaleX(1); transition: none; } .js .leistungen__ablauf .ablauf__schritt::before { background: var(--greige-deep); color: #fff; transition: none; } } /* ---------- Ablauf mobil: aus der Waagerechten wird eine Timeline ---------- Die horizontale Linie ergäbe einspaltig keinen Sinn. Statt sie wegzulassen, kippt sie in die Senkrechte — die vertraute Timeline. Der Knackpunkt: die Linie muss exakt am LETZTEN Kreis enden, aber die Texthöhen sind unterschiedlich. Eine durchgehende Linie über die ganze Liste (wie auf dem Desktop) könnte das nicht treffen. Deshalb zeichnet hier JEDER Schritt sein eigenes Segment bis zum nächsten Kreis — das rechnet sich von selbst, egal wie lang die Texte werden. Die Füllung läuft über background-size statt über eine zweite Ebene: ::before ist der Ziffernkreis, ::after ist das Segment — ein drittes Pseudoelement gibt es nicht. Der Farbverlauf liegt als background-image auf der grauen background-color und wächst von 0 auf volle Höhe. */ @media (max-width: 900px) { /* grid-auto-rows: 1fr zieht ALLE Zeilen auf die Höhe der höchsten. Damit ist der Abstand von Kreis zu Kreis konstant, egal ob ein Text eine oder drei Zeilen braucht — ohne feste Pixelhöhe, die bei längeren Texten wieder bräche. */ .ablauf__liste { grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 0; } /* Die waagerechte Linie des Desktops verschwindet */ .ablauf__liste::before, .ablauf__liste::after { display: none; } .ablauf__schritt { flex-direction: row; align-items: flex-start; text-align: left; gap: 16px; padding-bottom: 34px; } .ablauf__schritt:last-child { padding-bottom: 0; } .ablauf__schritt::before { margin-bottom: 0; } /* Segment vom eigenen Kreis bis zum nächsten. left: 16px = Kreismitte (34px/2) minus halbe Linienbreite (1px). */ .ablauf__schritt:not(:last-child)::after { content: ''; position: absolute; left: 16px; top: 40px; /* Unterkante Kreis + 6px Luft */ bottom: 6px; width: 2px; border-radius: 1px; background-color: var(--sand); background-image: linear-gradient(var(--greige-deep), var(--greige-deep)); background-repeat: no-repeat; background-size: 100% 0; /* ungefüllt */ } .js .leistungen__ablauf.is-visible .ablauf__schritt:not(:last-child)::after { background-size: 100% 100%; transition: background-size 0.85s ease; } /* Drei Segmente (zwischen vier Kreisen) laufen nacheinander von oben. */ .js .leistungen__ablauf.is-visible .ablauf__schritt:nth-child(1)::after { transition-delay: 0.45s; } .js .leistungen__ablauf.is-visible .ablauf__schritt:nth-child(2)::after { transition-delay: 1.30s; } .js .leistungen__ablauf.is-visible .ablauf__schritt:nth-child(3)::after { transition-delay: 2.15s; } /* Ohne JS: Segmente gefüllt, damit die Timeline zusammenhängt */ html:not(.js) .ablauf__schritt:not(:last-child)::after { background-size: 100% 100%; } /* Vier Kreise im Takt der Segmente */ .js .leistungen__ablauf.is-visible .ablauf__schritt:nth-child(1)::before { transition-delay: 0.25s; } .js .leistungen__ablauf.is-visible .ablauf__schritt:nth-child(2)::before { transition-delay: 1.10s; } .js .leistungen__ablauf.is-visible .ablauf__schritt:nth-child(3)::before { transition-delay: 1.95s; } .js .leistungen__ablauf.is-visible .ablauf__schritt:nth-child(4)::before { transition-delay: 2.80s; } .ablauf__text { max-width: none; margin-inline: 0; } .ablauf__name { margin-bottom: 4px; } @media (prefers-reduced-motion: reduce) { .js .leistungen__ablauf .ablauf__schritt::after { background-size: 100% 100%; transition: none; } } .leistungen__grid--drei { grid-template-columns: 1fr; max-width: 460px; } .leistungen__grid--drei .paket-card:not(.paket-card--featured) .paket-card__body { padding-top: 24px; } } @media (max-width: 760px) { .leistungen__grid { grid-template-columns: 1fr; max-width: 460px; } /* Einspaltig gibt es nichts auszurichten — der Banner-Ausgleich wäre hier eine unerklärliche Lücke am Kartenkopf. */ .paket-card:not(.paket-card--featured) .paket-card__body { padding-top: 24px; } } @media (max-width: 600px) { .leistungen__ablauf { margin-top: 40px; padding-top: 32px; } .ablauf__liste { grid-template-columns: 1fr; } .paket-card__price { font-size: 1.8rem; } } @media (prefers-reduced-motion: reduce) { .paket-card__cta { transition: none; } } /* ============================================================ KONTAKT (Sektion + Anfrage-Formular) Basis: hessimmo css Z.1111-1120 (.kontakt / .kontakt__grid), hesserodiertechnik css Z.778-796 (Zwei-Spalten-Layout) ============================================================ */ .kontakt { background: var(--rose); padding-block: var(--sec-y); } .kontakt__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: start; } /* ---------- Linke Spalte ---------- */ .kontakt__text { margin-top: 14px; max-width: 46ch; color: var(--muted); line-height: 1.8; } .kontakt__direkt { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 32px; padding-top: 28px; /* --sand ist hier korrekt: eine rein DEKORATIVE Trennlinie. WCAG 1.4.11 (3:1) gilt nur für Grenzen, die ein Bedienelement identifizieren. */ border-top: 1px solid var(--sand); } .kontakt__direkt-link { display: inline-flex; align-items: center; gap: 12px; font-size: 0.95rem; font-weight: 500; color: var(--greige-deep); transition: color 0.2s; } .kontakt__direkt-link:hover { color: var(--ink); } .kontakt__direkt-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--creme); border: 1px solid var(--sand); } .kontakt__direkt-icon svg { width: 17px; height: 17px; } /* ---------- Formular ---------- Bewusst KEINE Karte: die Sektion ist --beige, die Felder sind weiß. Eine weiße Karte auf Beige würde die weißen Felder darin unsichtbar machen. */ .kontakt__form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; } .kontakt__feld { display: flex; flex-direction: column; gap: 7px; min-width: 0; /* sonst sprengt der Textarea-Inhalt die Grid-Spalte */ } .kontakt__feld--voll { grid-column: 1 / -1; } .kontakt__legende { grid-column: 1 / -1; margin-bottom: -4px; font-size: 0.78rem; color: var(--muted); } .kontakt__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--greige-deep); } /* Pflicht UND optional werden gekennzeichnet — beides, nicht nur eins. Der Stern ist aria-hidden: „required" am Feld sagt es Screenreadern bereits korrekt, ein vorgelesenes „Stern" wäre nur Lärm. */ .kontakt__pflicht { color: var(--fehler); font-weight: 700; } .kontakt__optional { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); } /* Feldbezogener Hinweis unter dem Eingabefeld (via aria-describedby) */ .kontakt__feldhinweis { font-size: 0.75rem; color: var(--muted); } /* Fehlermeldung: wird von main.js befüllt und ein-/ausgeblendet. Sitzt im DOM direkt nach dem Feld und ist per aria-describedby verknüpft, damit Screenreader sie beim Fokus vorlesen. */ .kontakt__fehler { display: none; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; color: var(--fehler); /* 5.91:1 auf #fff, 5.14:1 auf --beige */ } .kontakt__fehler.is-sichtbar { display: flex; } .kontakt__fehler::before { content: ''; flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; background-color: var(--fehler); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cline x1='6' y1='3' x2='6' y2='6.8' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='9' r='0.9' fill='white'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } /* RAHMENFARBE IST EIN A11Y-ZWANG, KEIN GESCHMACK — NICHT AUF --sand DREHEN: WCAG 2.1 SC 1.4.11 verlangt 3:1 für die Grenze, die ein Bedienelement erkennbar macht. Ein leeres Eingabefeld hat keinen Text — der Rahmen ist das EINZIGE, was es identifiziert. Nachgerechnet: --sand gegen Feldfüllung #fff = 1.43:1 FAIL --sand gegen Sektion --beige = 1.25:1 FAIL #fff gegen Sektion --beige = 1.15:1 FAIL → das Feld wäre für Menschen mit Sehschwäche nicht auffindbar. --mocha gegen #fff = 4.47:1 OK --mocha gegen --beige = 3.88:1 OK */ .kontakt__input, .kontakt__select, .kontakt__textarea { width: 100%; font-family: inherit; font-size: 1rem; /* PFLICHT: unter 16px zoomt iOS Safari beim Fokus rein */ color: var(--ink); background: #fff; border: 1px solid var(--border-ui); border-radius: var(--r); padding: 12px 14px; -webkit-appearance: none; appearance: none; transition: border-color 0.2s; } .kontakt__input, .kontakt__select { min-height: 46px; } /* normalisiert type=date auf iOS */ .kontakt__textarea { min-height: 132px; line-height: 1.65; resize: vertical; } /* opacity:1 — Firefox dimmt Platzhalter sonst und reißt den Kontrast ein */ .kontakt__input::placeholder, .kontakt__textarea::placeholder { color: var(--muted); opacity: 1; } /* Chevron als Data-URI-SVG. Von der CSP gedeckt (img-src 'self' data:). Das # in der Farbe MUSS %23 sein. SYNC-PUNKT: %236E6353 ist --mocha-deep als Literal — var() ist in einer Data-URI nicht auflösbar. Ändert sich das Token, diesen Hex nachziehen. */ .kontakt__select { cursor: pointer; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6353' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; } /* :user-invalid statt :invalid — färbt erst NACH der Eingabe, nicht schon beim Betreten des leeren Pflichtfelds. */ .kontakt__input:user-invalid, .kontakt__textarea:user-invalid { border-color: var(--fehler); } .kontakt__count { align-self: flex-end; font-size: 0.72rem; color: var(--muted); } /* ---------- Aktion ---------- */ .kontakt__aktion { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 6px; min-width: 0; } .kontakt__hinweis { max-width: 52ch; font-size: 0.8rem; line-height: 1.7; color: var(--muted); /* 5.70:1 auf --beige */ } .kontakt__hinweis a { color: var(--greige-deep); text-decoration: underline; text-underline-offset: 2px; } /* ---------- Status / Fallback ---------- */ .kontakt__status { grid-column: 1 / -1; margin-top: 4px; padding: 20px 22px; background: var(--creme); /* NICHT --ivory: die Sektion ist ivory */ border: 1px solid var(--sand); border-left: 3px solid var(--greige-deep); border-radius: var(--r); } .kontakt__status:focus { outline: none; } /* nur programmatisch fokussiert */ .kontakt__status-lead { font-size: 0.9rem; line-height: 1.75; color: var(--ink); } .kontakt__status-lead a, .kontakt__fallback-body a { color: var(--greige-deep); text-decoration: underline; text-underline-offset: 2px; } .kontakt__fallback { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--sand); } .kontakt__fallback-summary { cursor: pointer; list-style: none; font-size: 0.8rem; font-weight: 700; color: var(--greige-deep); } .kontakt__fallback-summary::-webkit-details-marker { display: none; } .kontakt__fallback-summary::before { content: '+'; display: inline-block; width: 1.1em; font-weight: 400; } .kontakt__fallback[open] .kontakt__fallback-summary::before { content: '–'; } .kontakt__fallback-body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 12px; } .kontakt__fallback-body p { font-size: 0.85rem; line-height: 1.7; color: var(--muted); } .kontakt__fallback-text { width: 100%; font-family: inherit; font-size: 0.85rem; line-height: 1.6; color: var(--ink); background: #fff; border: 1px solid var(--border-ui); border-radius: var(--r); padding: 12px 14px; resize: vertical; } .kontakt__copy { padding: 10px 22px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--greige-deep); background: transparent; border: 1px solid var(--border-ui); border-radius: var(--r); transition: border-color 0.2s, color 0.2s; } .kontakt__copy:hover { border-color: var(--greige-deep); color: var(--ink); } /* ---------- Ohne JavaScript ---------- Wird nur vom