/* Theme Name: Drylo Template: twentytwentyfive Description: Child-Theme fuer drylo.de. Farben, Typografie und Abstaende nach AURAs Design-Vorgabe (19.08.2026) - liegen als Presets in theme.json. Version: 1.0 */ /* --- Links auf dunklen Baendern --------------------------------------- Ohne das erben Links die Petrol-Markenfarbe und stehen dann dunkel auf dunkel. Auf #082C3F kommt #0E3A52 auf rund 1,2:1 - praktisch unlesbar. Auf dunklem Grund gilt die helle Textfarbe, unterstrichen bleibt es. */ .has-band-background-color a, .has-primary-background-color a, .wp-block-group.has-band-background-color a:visited { color: #DCE7ED; text-decoration-color: rgba(220, 231, 237, 0.55); } .has-band-background-color a:hover, .has-primary-background-color a:hover { color: #FFFFFF; text-decoration-color: #FFFFFF; } /* --- Tabellenziffern --------------------------------------------------- Bei Manrope ist die Ziffer 1 deutlich schmaler als die 0. Ohne tabular-nums springen Telefonnummern, Preisspannen und Postleitzahlen sichtbar. */ .wp-block-table td, .tel, .num, .plz, time, .preis { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* --- Sichtbarer Fokus -------------------------------------------------- Pflicht fuer Tastaturbedienung; der weisse Ring haelt ihn auch auf dunklen Flaechen sichtbar. */ :where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid #0E3A52; outline-offset: 2px; box-shadow: 0 0 0 6px #fff; } .has-band-background-color :where(a, button):focus-visible { outline-color: #E0922F; box-shadow: 0 0 0 6px #082C3F; } /* --- Logo nicht unterstreichen ---------------------------------------- */ .wp-block-site-logo a { text-decoration: none; } /* --- Offene Stellen sichtbar machen ----------------------------------- Alles, was Meini noch liefern muss, ist im Text als [Platzhalter] markiert. Diese Auszeichnung macht sie beim Durchsehen unübersehbar. VOR DEM LIVEGANG muss diese Regel entfernt werden — dann darf es keinen einzigen Treffer mehr geben. */ mark.q-offen { background: #FFF3CD; color: #6B4A00; border: 1px dashed #B8860B; border-radius: 3px; padding: 0 4px; font-style: normal; font-weight: 600; } .has-band-background-color mark.q-offen { background: #3A2E12; color: #FFD98A; border-color: #A8571A; } /* Augenbraue über der H1 */ .q-augenbraue { text-transform: uppercase; letter-spacing: .08em; font-size: 15px; font-weight: 700; color: #E0922F; margin-bottom: .4em; } /* --- Startseite: kein doppelter Titel --------------------------------- Die Bühne bringt ihre eigene H1. Der automatische Seitentitel „Start" darüber wäre eine zweite H1 und obendrein inhaltsleer. */ .home .wp-block-post-title { display: none; } /* --- Überschriften auf dunklen Bändern -------------------------------- Die Textfarbe #B9CBD6 ist für Fließtext richtig, für Überschriften zu blass. Sie bekommen reines Weiß, damit der Fixpunkt trägt. */ .has-band-background-color :where(h1, h2, h3) { color: #FFFFFF; } /* ====================================================================== AURA · Ultra-Brand — Schritt 2 und 3 Das Prinzip: Alle zeigen den Tropfen. Drylo zeigt die LINIE. Die waagerechte Linie an der Kellerwand, an der die Feuchte aufhört. Sie ENDET immer — eine Linie, die durchläuft, ist Dekoration. ====================================================================== */ :root { --amber-line: #C77A1F; /* Wasserlinie auf hellem Grund 3,37:1 Grafik */ --amber: #E0922F; /* Wasserlinie auf dunklem Band */ --primary: #0E3A52; --ok: #17614A; /* Erfolg im Formular 7,38:1 AAA */ --err: #8E2018; /* Fehler — tiefes Rot, kein Signalrot 8,86:1 */ --ok-dark: #6EE7A8; /* Erfolg auf dem Band 9,47:1 */ --err-dark: #F8B4AE; /* Fehler auf dem Band 8,41:1 */ --draw-1: #0E3A52; /* Kontur in Zeichnungen */ --draw-2: #4A7891; /* Nebenlinien 4,79:1 */ --draw-3: #C3D0D8; /* Flächen — nie bedeutungstragend 1,57:1 */ } /* --- Die Wasserlinie --------------------------------------------------- */ .wl { position: relative; padding-top: 24px; } .wl::before { content: ""; position: absolute; top: 0; left: 0; width: 88px; height: 3px; background: var(--amber-line); border-radius: 2px; } .wl-dark::before { background: var(--amber); } .wl-full::before { width: 100%; max-width: 420px; background: linear-gradient(90deg, var(--amber-line) 0, var(--amber-line) 62%, transparent 100%); } /* Automatisch über jeder Sektionsüberschrift — so trägt die Marke durch die ganze Seite, ohne dass eine einzige Seite umgebaut werden muss. */ .wp-block-group > h2:not(.wp-block-post-title), .wp-block-group > .wp-block-heading:where(h2) { position: relative; padding-top: 24px; margin-top: 2.2em; } .wp-block-group > h2:not(.wp-block-post-title)::before, .wp-block-group > .wp-block-heading:where(h2)::before { content: ""; position: absolute; top: 0; left: 0; width: 88px; height: 3px; background: var(--amber-line); border-radius: 2px; } .has-band-background-color > h2::before, .has-band-background-color .wp-block-heading:where(h2)::before { background: var(--amber); } /* Oberkante jedes dunklen Bandes ist die Linie — hier läuft sie durch, weil das Band selbst die Grenze zwischen hell und dunkel IST. */ .has-band-background-color { position: relative; } .has-band-background-color::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--amber); } /* --- Die Befund-Zeile: Label — Linie — Wert --------------------------- Die Kategorie schreibt Werbesätze. Drylo schreibt Befunde, wie im Messprotokoll. Dasselbe Bauteil trägt auf Angebot, Rechnung, Signatur. */ .q-befund { margin: 1.4em 0; } .q-befund dl, dl.q-befund { margin: 0; } .q-befund dt, .q-befund dd { display: inline; margin: 0; } .q-befund .zeile { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border: 0; } .q-befund .zeile + .zeile { border-top: 1px solid var(--wp--preset--color--line, #DDE3E6); } .q-befund .label { text-transform: uppercase; letter-spacing: .07em; font-size: 14px; font-weight: 700; color: var(--wp--preset--color--contrast-2, #4A5257); white-space: nowrap; } .q-befund .fuellung { flex: 1 1 auto; height: 1px; min-width: 24px; background: var(--wp--preset--color--line, #DDE3E6); } .q-befund .wert { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .has-band-background-color .q-befund .label { color: #9FBACB; } .has-band-background-color .q-befund .fuellung { background: rgba(255,255,255,.22); } .has-band-background-color .q-befund .zeile + .zeile { border-top-color: rgba(255,255,255,.14); } /* --- Beschriftungen in Zeichnungen ------------------------------------ Ohne diese Regel fallen ALLE SVG-Labels auf eine Serifenschrift zurück. */ svg text { font-family: Manrope, system-ui, sans-serif; } /* --- Fokus, zweite Variante ------------------------------------------- Petrol auf dem dunklen Band ergibt 1,21:1 — ein einziger Fokusring wäre dort unsichtbar und ein Tastaturnutzer blind. */ .has-band-background-color :where(a, button, input, select, textarea):focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(8, 44, 63, .92); } /* --- Zustandsfarben ---------------------------------------------------- Das Nein ist grau, nicht rot: Eine Marke, die „ruhig, kein Alarm" sagt und dann bei einem Tippfehler blinkt, widerspricht sich. */ .q-ok { color: var(--ok); } .q-err { color: var(--err); } .has-band-background-color .q-ok { color: var(--ok-dark); } .has-band-background-color .q-err { color: var(--err-dark); } /* --- Breite Inhalte scrollen in sich, nie die Seite -------------------- */ .wp-block-table { overflow-x: auto; } /* ====================================================================== AURA · Die 13 Bauteile Keine Seite wird je frei gestaltet — wer eine Seite braucht, wählt Bauteile. ====================================================================== */ /* 02 · Aktionen — genau EINE gefüllte Aktion je Ansicht ----------------- */ .q-aktion { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 4px; font-weight: 600; font-size: 18px; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background-color .16s ease, color .16s ease; } .q-aktion--primaer { background: var(--primary); color: #fff; } .q-aktion--primaer:hover { background: #15506E; color: #fff; } .q-aktion--sekundaer { background: transparent; color: var(--primary); border-color: var(--primary); } .q-aktion--sekundaer:hover { background: rgba(14,58,82,.06); } .q-aktion[aria-disabled="true"] { opacity: .5; cursor: not-allowed; } .has-band-background-color .q-aktion--primaer { background: #fff; color: var(--primary); } .has-band-background-color .q-aktion--sekundaer { color: #fff; border-color: rgba(255,255,255,.5); } /* 03 · Feld — jeder Zustand trägt ZWEI Signale zusätzlich zur Farbe ----- */ .q-feld { display: flex; flex-direction: column; gap: 6px; } .q-feld label { font-weight: 600; font-size: 16px; } .q-feld input, .q-feld select, .q-feld textarea { padding: 13px 14px; font-size: 18px; font-family: inherit; border: 2px solid #7E8B92; border-radius: 4px; background: #fff; color: #161A1D; } .q-feld .hilfe { font-size: 15px; color: #5E686E; } .q-feld--fehler input { border-color: var(--err); } .q-feld--fehler .hilfe { color: var(--err); font-weight: 600; } /* 04 · PLZ-Prüfung — das Nein ist grau, nie rot ------------------------- */ .q-plz { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 6px; padding: 22px; max-width: 520px; } .q-plz .frage { text-transform: uppercase; letter-spacing: .07em; font-size: 14px; font-weight: 700; color: #9FBACB; margin: 0 0 12px; } .q-plz .reihe { display: flex; gap: 12px; flex-wrap: wrap; } .q-plz input { flex: 1 1 140px; min-width: 120px; padding: 13px 14px; font-size: 18px; font-family: inherit; border: 2px solid #7E8B92; border-radius: 4px; font-variant-numeric: tabular-nums; } .q-plz .antwort { margin-top: 16px; padding: 14px; border-radius: 4px; font-size: 17px; } .q-plz .antwort--ja { background: rgba(110,231,168,.12); border-left: 3px solid var(--ok-dark); } .q-plz .antwort--nein { background: rgba(255,255,255,.07); border-left: 3px solid #5B6770; } /* 05 · Ehrlichkeitsband — der dritte Punkt ist ein HOHLER Ring ---------- */ .q-pegel { display: grid; gap: 28px; margin: 34px 0 0; } @media (min-width: 720px) { .q-pegel { grid-template-columns: repeat(3, 1fr); } } .q-pegel .stufe { position: relative; padding-left: 34px; } .q-pegel .stufe::before { content: ""; position: absolute; left: 0; top: 6px; width: 15px; height: 15px; border-radius: 50%; } .q-pegel .stufe--1::before { background: var(--amber); } .q-pegel .stufe--2::before { background: #7FA8C0; } .q-pegel .stufe--3::before { background: transparent; border: 2px solid #5B6770; } .q-pegel .stufe h3 { margin: 0 0 8px; font-size: 20px; } .q-pegel .stufe p { margin: 0; } /* 06 · Symptom-Kachel — Einstieg über das Symptom, nie über die Lösung -- */ .q-symptome { display: grid; gap: 16px; margin: 28px 0; } @media (min-width: 620px) { .q-symptome { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .q-symptome { grid-template-columns: repeat(3, 1fr); } } /* 🧹 28.08.: Vier Zeilen entfernt, die nie gewirkt haben — padding (durch „0 0 20px" ersetzt), der blaue :hover-Rahmen (zweimal überschrieben), die SVG-Regel (das SVG ist display:none) und font-size 19px (jetzt --fs-h3). Alles Aktive steht gebündelt unter „SYMPTOM-KACHEL" am Dateiende. */ .q-symptom { display: block; border: 1px solid #DDE3E6; border-radius: 10px; background: #fff; text-decoration: none; color: inherit; padding: 0 0 20px; /* Bild an der Kante, Luft unter dem Text */ overflow: hidden; /* sonst überragt das Foto die runden Ecken */ } .q-symptom .name { font-weight: 700; display: block; margin-bottom: 4px; } .q-symptom .was { font-size: 16px; color: #4A5257; } /* 07 · Kosten-Karte — Alles-oder-nichts ---------------------------------- */ .q-kosten { display: grid; gap: 18px; margin: 28px 0; } @media (min-width: 760px) { .q-kosten { grid-template-columns: repeat(3, 1fr); } } .q-kosten .karte { padding: 24px; border: 1px solid #DDE3E6; border-radius: 10px; background: #fff; } .q-kosten .titel { font-weight: 700; font-size: 18px; margin: 0 0 10px; } .q-kosten .zahl { font-size: 30px; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; display: block; margin-bottom: 10px; } .q-kosten .erklaerung { font-size: 16px; color: #4A5257; margin: 0; } /* 08 · Schritt-Kette — Chips auf einer Grundlinie ------------------------ */ .q-schritte { display: grid; gap: 22px; margin: 28px 0; counter-reset: schritt; } @media (min-width: 820px) { .q-schritte { grid-template-columns: repeat(4, 1fr); } } .q-schritt { position: relative; padding-top: 44px; } .q-schritt::before { counter-increment: schritt; content: counter(schritt); position: absolute; top: 0; left: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 16px; } .q-schritt h3 { margin: 0 0 6px; font-size: 19px; } .q-schritt p { margin: 0; font-size: 16px; color: #4A5257; } .q-schritt .dauer { display: inline-block; margin-top: 10px; padding: 3px 12px; border-radius: 100px; background: #F4F6F7; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; } /* 09 · Betriebs-Karte — Porträt VOR Firmenname --------------------------- */ .q-betriebe { display: grid; gap: 22px; margin: 28px 0; } @media (min-width: 760px) { .q-betriebe { grid-template-columns: repeat(2, 1fr); } } .q-betrieb { padding: 26px; border: 1px solid #DDE3E6; border-radius: 10px; background: #fff; } .q-betrieb .portraet { width: 84px; height: 84px; border-radius: 50%; background: #F4F6F7; border: 1px dashed #B8C4CB; display: grid; place-items: center; font-size: 12px; color: #5E686E; text-align: center; margin-bottom: 16px; } .q-betrieb .person { font-weight: 700; font-size: 21px; margin: 0 0 2px; } .q-betrieb .firma { font-size: 16px; color: #4A5257; margin: 0 0 16px; } .q-betrieb .tel { font-size: 22px; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; text-decoration: none; display: inline-block; } .q-betrieb .vertrag { font-size: 15px; color: #5E686E; margin: 16px 0 0; } /* 10 · Beleg-Block — nimmt nur Belegtes ---------------------------------- */ .q-belege { display: grid; gap: 16px; margin: 24px 0; } @media (min-width: 720px) { .q-belege { grid-template-columns: repeat(3, 1fr); } } .q-beleg { padding: 18px; background: #F4F6F7; border-radius: 8px; } .q-beleg .wert { display: block; font-size: 26px; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; } .q-beleg .was { font-size: 16px; color: #4A5257; } /* 11 · FAQ — natives
, kein JS ---------------------------------- */ .q-faq { margin: 28px 0; } .q-faq details { border-bottom: 1px solid #DDE3E6; padding: 4px 0; } .q-faq summary { cursor: pointer; padding: 16px 0; font-weight: 700; font-size: 19px; list-style: none; display: flex; justify-content: space-between; gap: 16px; } .q-faq summary::-webkit-details-marker { display: none; } .q-faq summary::after { content: "+"; font-weight: 400; font-size: 26px; line-height: 1; color: var(--primary); } .q-faq details[open] summary::after { content: "–"; } .q-faq details > *:not(summary) { padding-bottom: 18px; margin-top: 0; } /* 12 · Zitat — höchstens eines je Seite ---------------------------------- */ .q-zitat { margin: 34px 0; padding-left: 24px; border-left: 3px solid var(--amber-line); } .q-zitat blockquote { margin: 0; font-size: 22px; line-height: 1.45; font-weight: 500; } .q-zitat cite { display: block; margin-top: 12px; font-size: 16px; color: #4A5257; font-style: normal; } .has-band-background-color .q-zitat { border-left-color: var(--amber); } /* 13 · Leiste — nur mobil, erscheint nach der Bühne ----------------------- */ .q-leiste { display: none; } @media (max-width: 780px) { .q-leiste { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: var(--primary); padding: 10px 12px; gap: 10px; box-shadow: 0 -2px 14px rgba(0,0,0,.22); } .q-leiste a { flex: 1; text-align: center; padding: 13px 8px; border-radius: 4px; font-weight: 700; text-decoration: none; font-size: 17px; } .q-leiste .anruf { background: #fff; color: var(--primary); } /* 🔴 Bei 320 px brach die Nummer als „07472 302 26 / 66" um und die Leiste wuchs von 77,2 auf 100,4 px. Eine gebrochene Rufnummer ist der schlechteste Umbruch, den diese Seite hat. */ .q-leiste a { white-space: nowrap; } @media (max-width: 359px) { .q-leiste a { font-size: 15px; padding: 13px 6px; } } .q-leiste .anfrage { border: 2px solid rgba(255,255,255,.6); color: #fff; } body { padding-bottom: 76px; } } /* Bauzustand: eine Sektion, die noch nicht livefähig ist ------------------ */ .q-bauzustand { border: 2px dashed #B8860B; border-radius: 8px; padding: 18px; background: #FFFDF5; margin: 24px 0; } .q-bauzustand > .hinweis { text-transform: uppercase; letter-spacing: .07em; font-size: 13px; font-weight: 700; color: #6B4A00; margin: 0 0 12px; } /* ====================================================================== AURA · Wertigkeit — Eingriff 1 Befund: burg-meisters Wärme kommt zur Hälfte vom Papier, nicht vom Foto. Dort steht nirgends reines Weiß. drylo stand auf #FFFFFF. ====================================================================== */ :root { --paper: #FAF9F6; /* das Papier — die eine Änderung */ --surface: #F1EFE9; /* zweiter Grund, warm */ --card: #FFFFFF; /* Karten sind die hellste Fläche */ --line-warm: #E4E0D8; /* Haarlinie, warm statt kalt */ --band-deep: #06222E; /* tieferes Band für die Bühne */ /* Getönte, zweilagige Schatten — mit der Tintenfarbe, nie mit Schwarz */ --sh-sm: 0 1px 2px rgba(8,44,63,.05); --sh-md: 0 1px 2px rgba(8,44,63,.05), 0 22px 48px rgba(8,44,63,.09); --sh-lg: 0 2px 4px rgba(8,44,63,.06), 0 36px 76px rgba(8,44,63,.13); --sect: clamp(80px, 9vw, 132px); /* Raum ist Luxus. drylo endete bei 96 */ } /* --- Die Wasserlinie je Grund ---------------------------------------- 🔴 AURAs eigener Fund: Das warme Papier drückt amber-line von 3,37 auf 3,20 — und auf dem zweiten Grund und im Kachel-Panel UNTER 3:1. Die Kernform der Marke wäre auf jeder zweiten Sektion unsicher gewesen. Deshalb ist --wl grundabhängig. Das kann theme.json nicht, nur CSS. */ :root { --wl: #C77A1F; } /* auf Papier */ .has-base-2-background-color { --wl: #A8571A; } /* auf Fläche */ .has-band-background-color { --wl: #E0922F; } /* auf Band */ .q-symptom, .q-betrieb, .q-kosten .karte, .q-beleg { --wl: #C77A1F; } /* Wasserlinie und Augenbraue ziehen jetzt aus dem Token */ .wp-block-group > h2:not(.wp-block-post-title)::before, .wp-block-group > .wp-block-heading:where(h2)::before, .wl::before { background: var(--wl); } .has-band-background-color::before { background: var(--amber); } /* --- Papier statt Bildschirm ------------------------------------------ */ body { background: var(--paper); } .wp-block-group.has-base-2-background-color { background-color: var(--surface) !important; } /* --- Sektionsabstand: Raum ist Luxus ---------------------------------- */ .wp-block-group[style*="--wp--preset--spacing--70"] { padding-top: var(--sect) !important; padding-bottom: var(--sect) !important; } /* --- Karten: getönter Schatten statt nacktem Rahmen -------------------- */ .q-symptom, .q-betrieb, .q-kosten .karte { background: var(--card); border-color: var(--line-warm); box-shadow: var(--sh-sm); transition: box-shadow .2s cubic-bezier(.2,.6,.2,1), transform .2s cubic-bezier(.2,.6,.2,1), border-color .2s ease; } .q-betrieb { box-shadow: var(--sh-md); } .q-beleg { background: var(--card); box-shadow: var(--sh-sm); } /* Haarlinien überall warm statt kalt */ .q-befund .zeile + .zeile, .q-befund .fuellung, .q-faq details { border-color: var(--line-warm); } .q-befund .fuellung { background: var(--line-warm); } .q-schritt .dauer { background: var(--surface); } /* --- Die Bühne bleibt kalt -------------------------------------------- AURAs Entscheidung: Die Bühne ist kalt, weil sie der Keller ist. Die Seite ist warm, weil sie der Befund ist. Der Temperaturwechsel sagt dasselbe wie die Wasserlinie. */ .wp-block-group.has-band-background-color:first-of-type { background-color: var(--band-deep) !important; } /* Aktionspaar in der Bühne — ersetzt den Platzhalter-Kasten */ .q-aktionen { display: flex; gap: 14px; flex-wrap: wrap; margin: 30px 0 0; } /* ====================================================================== AURA · Eingriff 2 (Bühne) und 3 (zweite Stimme) ====================================================================== */ /* --- Die zweite Stimme ------------------------------------------------- Source Serif 4, SIL OFL 1.1, self-hosted. Auf 79 Glyphen subsettet: 8.960 statt 183.552 Byte. Keine Zahlen im Subset — die Kursive steht nie auf Zahlen (tabular-nums gilt nur für Manrope). 🔴 Die inhaltliche Regel: Bei burg-meister trägt die Kursive den STOLZ („aus Meisterhand"). Bei drylo trägt sie die EINSCHRÄNKUNG („Auch dann, wenn wir abraten müssen"). Genau drei Orte. Nie in Bernstein — die Kursive spricht, Bernstein misst. */ @font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/source-serif-4-italic.woff2") format("woff2"); } .q-nachsatz, /* Ort 1: der Nachsatz unter der H1 */ .q-zitat blockquote, /* Ort 2: das Zitat der Geschäftsführung */ .q-grenze { /* Ort 3: der "wann es nicht passt"-Satz */ font-family: "Source Serif 4", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; letter-spacing: 0; } .q-nachsatz { font-size: clamp(21px, 2.3vw, 27px); line-height: 1.35; color: #DCE7ED; margin: 0 0 26px; max-width: 20ch; } .q-grenze { font-size: clamp(19px, 2vw, 23px); line-height: 1.4; color: #4A5257; } /* --- Die Bühne --------------------------------------------------------- Das Foto leistet vier Dinge. Drei davon gehen ohne Foto: Tonwert-Verlauf (Lichtschacht) · Mikro-Detail (Korn) · Tiefe (Anschnitt). Die vierte, Wärme, wird bewusst NICHT ersetzt: Die Bühne ist kalt, weil sie der Keller ist. */ .q-buehne { position: relative; overflow: hidden; background: #06222E; } /* Lichtschacht — ein Keller hat genau EINE Lichtquelle. Das ist eine Tatsache über den Gegenstand, keine Dekoration. */ .q-buehne::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 18% -10%, rgba(126,168,192,.20) 0%, rgba(126,168,192,.06) 42%, transparent 68%), linear-gradient(178deg, #0B2E3E 0%, #06222E 58%, #041A24 100%); pointer-events: none; } /* Korn — eine glatte Farbfläche hat null Mikro-Detail. feTurbulence als Data-URI: 0 Requests, rund 330 Byte. */ .q-buehne::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); opacity: .055; mix-blend-mode: overlay; pointer-events: none; } .q-buehne > .inhalt { position: relative; z-index: 1; display: grid; gap: 40px; align-items: center; /* Breite und Seitenrand: ohne das läuft der Inhalt aus dem Bild */ max-width: var(--wp--style--global--wide-size, 1200px); margin-inline: auto; padding: clamp(56px, 7vw, 104px) clamp(20px, 4vw, 48px); } /* Die Zeichnung hat rechts eine Beschriftung — Platz dafür lassen */ .q-plan svg { overflow: visible; } .q-plan { padding-right: clamp(22px, 5vw, 74px); } @media (min-width: 940px) { .q-buehne > .inhalt { grid-template-columns: 1fr 1fr; gap: 56px; } } /* Planrahmen — bei einer technischen Zeichnung ist ein Rahmen begründet, bei einem Foto wäre er nur hübsch. */ .q-plan { position: relative; padding: 22px; } .q-plan::before, .q-plan::after { content: ""; position: absolute; width: 26px; height: 26px; border: 2px solid rgba(224,146,47,.55); } .q-plan::before { top: 0; left: 0; border-right: 0; border-bottom: 0; } .q-plan::after { bottom: 26px; right: 0; border-left: 0; border-top: 0; } .q-plan svg { display: block; width: 100%; height: auto; } .q-plan figcaption { margin-top: 14px; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: #7FA8C0; } /* Augenbraue mit vorangestellter Linie */ .q-buehne .q-augenbraue { display: flex; align-items: center; gap: 14px; } .q-buehne .q-augenbraue::before { /* 🔴 --amber (#E0922F) ist der Ton fuer DUNKLE Baender: auf dem hellen Buehnengrund kam der Balken auf 1,9:1, grafische Elemente brauchen 3:1. --amber-solid (#A8571A) steckt schon im Logo und bringt 4,13:1 am schlechtesten Punkt. Hoehe 2 -> 3px: bei 40px Laenge traegt 2px auf hellem Grund nicht. AURA, 28.08. */ content: ""; width: 40px; height: 3px; border-radius: 2px; background: var(--amber-solid); flex: none; /* 🔴 `align-items:center` zentriert ueber ALLE Zeilen. Bei einer Zeile (1440) sitzt der Strich richtig; bei zwei Zeilen (412/390/360) liegt er 11,5 px zu tief, bei drei (320) 23,5 px — auf Hoehe von Zeile 2. Das ist der erste Auftritt der Kernform der Marke auf der Seite. `align-self` statt `align-items`, sonst verliert die Regel im Kaskaden-Konflikt (AURAs erster Versuch tat genau das). Nachgemessen: 0,5 px Abweichung von der Zeilenmitte. */ align-self: flex-start; margin-top: 11px; } /* Befund-Leiste unter der Bühne — Trust im eigenen Duktus, keine Badges */ .q-leiste-befund { display: flex; flex-wrap: wrap; gap: 0; /* padding-inline steht EINMAL, weiter unten bei „Die eine Kante" — AURA 27.08.: „Zwei Wahrheiten sind eine zu viel." */ border-top: 1px solid var(--line-warm); border-bottom: 1px solid var(--line-warm); background: var(--paper); } .q-leiste-befund > div { flex: 1 1 220px; padding: 20px 26px; border-right: 1px solid var(--line-warm); } /* Die erste Zelle beginnt an der Kante, nicht 26 px daneben — sonst hat die Bandleiste eine eigene Kante (28.08. gemessen: 66 statt 40). */ .q-leiste-befund > div:first-child { padding-left: 0; } .q-leiste-befund > div:last-child { border-right: 0; } .q-leiste-befund .label { display: block; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 700; color: #5E686E; margin-bottom: 4px; } .q-leiste-befund .wert { font-weight: 600; font-size: 17px; } /* Kapitelmarke über Sektionsüberschriften */ .q-kapitel { display: flex; align-items: center; gap: 12px; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; font-weight: 700; color: #5E686E; margin-bottom: 6px; } .q-kapitel::after { content: ""; height: 1px; flex: 1; background: var(--line-warm); } /* --- Aktionen auf der Bühne ------------------------------------------- Die Bühne heißt .q-buehne, nicht .has-band-background-color — die Regeln für dunklen Grund müssen sie ausdrücklich mitnehmen, sonst steht der sekundäre Button dunkel auf dunkel. */ /* 🔴 Hier standen bis 28.08. zwei Regeln, die den Primaerknopf auf der Buehne WEISS fuellten — ein Relikt der dunklen Fassung. Auf hellem Grund kam die weisse Flaeche auf 1,32:1 gegen ihren Nachbargrund (WCAG 1.4.11 verlangt 3:1) und der Sekundaerknopf las sich staerker als der Primaere. Ersatzlos gestrichen — jetzt greift der Bauplan .q-aktion--primaer{ background: var(--primary) } wieder. Gemessen danach: Flaeche 7,82:1, Text darauf 11,43:1. AURA, 28.08. */ .q-buehne .q-aktion--sekundaer { color: #fff; border-color: rgba(255,255,255,.55); } .q-buehne .q-aktion--sekundaer:hover { background: rgba(255,255,255,.86); border-color: #0E3A52; } /* Der Sekundaerrand lag mit rgba(14,58,82,.45) bei 2,19:1 — unter den 3:1 fuer Bedienelemente. #35617A bringt 3,89:1. Die leichte weisse Fuellung hebt ihn vom Foto ab, ohne ihn zum zweiten Primaerknopf zu machen: eine gefuellte Aktion, eine umrandete. */ .q-buehne .q-aktion--sekundaer{ background: rgba(255,255,255,.62); border-color: #35617A; } /* 🔴 Auch hier ein Relikt: Der Gegenring rgba(6,34,46,.92) war fuer die DUNKLE Buehne gebaut. Auf hellem Grund ist ein dunkler Gegenring falsch — die globale Regel (dunkler Ring auf weissem Gegenring) passt jetzt. Ersatzlos gestrichen, damit sie greift. AURA, 28.08. */ /* ====================================================================== AURA · Der Rahmen — Kopf, Fuß, Seitenkopf Hauptbefund: vier linke Kanten auf einem Bildschirm (Logo 24 · Befund-Leiste 106 · Bühnen-H1 168 · Fließtext 340). Nichts fluchtete. Das ist der Grund für "zusammengesetzt statt gebaut" — vier Zahlen, keine Geschmacksfrage. ====================================================================== */ :root{/* bestehend */ --primary:#0E3A52; --primary-hover:#15506E; --band:#082C3F; --band-deep:#06222E; --amber:#E0922F; --amber-line:#C77A1F; --amber-solid:#A8571A; --contrast:#161A1D; --contrast-2:#4A5257; --contrast-3:#5E686E; --on-dark:#B9CBD6; --field:#7E8B92; --paper:#FAF9F6; --surface:#F1EFE9; --card:#FFFFFF; --line-warm:#E4E0D8; --sect:clamp(80px,9vw,132px); --sh-sm:0 1px 2px rgba(8,44,63,.05); --sh-md:0 1px 2px rgba(8,44,63,.05),0 22px 48px rgba(8,44,63,.09); --serif:"Source Serif 4",Georgia,"Times New Roman",serif; --ease:cubic-bezier(.2,.6,.2,1); --wl:var(--amber-line); --korn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); /* NEU — die eine Kante. Loest die vier gemessenen Kanten auf. */ --wide:1200px; --gutter:clamp(20px,4vw,48px); --text:760px; /* NEU — Kopfmasse */ --kopf-meta:34px; --kopf-bar:72px;} /* --- die EINE Kante fuer alle vollbreiten Bauteile ---------- 28.08.: gleiches Maß wie .q-buehne und .q-leiste-befund (siehe „DIE EINE KANTE"). Vorher lief .breit auf max-width+margin:auto+gutter und stand dadurch unter 1440 px versetzt zur Bühne: 48/41/31/20 gegen 40. */ .breit{ max-width: none; margin-inline: 0; padding-inline: max( var(--wp--style--root--padding-left, 40px), calc((100% - var(--wp--style--global--wide-size, 1200px)) / 2) ); } /* ========================================================== K2 · DER KOPF (Empfehlung) Meta-Zeile oben · Balken · Wasserlinie auf der Unterkante ========================================================== */ .kopf{position:sticky;top:calc(-1 * var(--kopf-meta));z-index:60; background:var(--paper); box-shadow:0 1px 0 rgba(8,44,63,.07),0 14px 30px -22px rgba(8,44,63,.34)} .kopf__meta{background:var(--surface);height:var(--kopf-meta); border-bottom:1px solid var(--line-warm)} .kopf__meta > div{height:100%;display:flex;align-items:center;justify-content:space-between;gap:28px} .kopf__meta .bf{flex:0 1 auto} .kopf__meta .bf:first-child{max-width:52%} .kopf__meta .bf:last-child{max-width:40%;justify-content:flex-end} .kopf__meta .bf:last-child s{min-width:26px} .kopf__bar{position:relative;height:var(--kopf-bar)} .kopf__bar > div{height:100%;display:flex;align-items:center;gap:32px} .kopf__logo{flex:none;display:block;line-height:0} .kopf__logo svg{display:block;height:44px;width:auto} /* = 121 px breit, Mindestgroesse 120 px */ /* Die Wasserlinie: 88 px, sie ENDET, sie liegt auf der Unterkante des Kopfes — genau auf der Grenze zwischen trocken und Seite. Sie flieht mit der Wortmarke, nicht mit dem Kastenrand. */ .kopf__bar::after{content:"";position:absolute;bottom:0;left:var(--gutter); width:88px;height:3px;border-radius:2px;background:var(--amber-line)} .kopf__tat{flex:none;display:inline-flex;align-items:center;gap:9px; font:700 14px/1 Manrope;letter-spacing:-.004em;text-decoration:none; color:var(--primary);border:2px solid var(--primary);border-radius:4px; padding:11px 18px;background:transparent; transition:background .15s var(--ease),color .15s var(--ease)} .kopf__tat:hover{background:rgba(14,58,82,.07)} .kopf__burger{display:none} /* [Entfernt 26.08.2026: die Entwurfsvarianten K1/K2/K3 und .kopf--breit. Sie waren tot (0 Vorkommen in allen 15 ausgelieferten Seiten und in beiden Template-Parts), aber SCHARF: Spezifitaet (0,2,0) gegen (0,1,0) des Live-Codes — bei DENSELBEN Klassennamen. `.kopf--k1{position:static}` und `.kopf--k1 .kopf__bar::after{display:none}` haetten Klebeverhalten und Wasserlinie gekippt, sobald jemand eine Variante ausprobiert, und der Live-Code haette nicht dagegenhalten koennen. (SYNAPSE/VEKTOR)] */ /* --- K3: Petrol-Kopf --------------------------------------- */ /* Der dunkle Kopf IST ein Band — dort darf die Linie durchlaufen. */ /* ========================================================== DER FUSS Die Seite ist ein Wandschnitt: der Kopf ist trocken, der Fuss liegt unter der Linie. ========================================================== */ .fuss{position:relative;background:var(--band);color:var(--on-dark);isolation:isolate} .fuss::before{content:"";position:absolute;top:0;left:0;right:0;height:3px; background:var(--amber);z-index:2} .fuss__korn{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay; background-image:var(--korn);background-size:160px 160px} .fuss > div{position:relative;z-index:1} .fuss__haupt{display:grid;grid-template-columns:1.35fr 1fr 1.15fr 1.15fr;gap:44px; padding-block:clamp(60px,6.5vw,92px) clamp(34px,3.6vw,48px)} .fuss__marke svg{display:block;height:32px;width:auto;margin-bottom:20px} .fuss__marke p{font-size:14.5px;line-height:1.6;color:var(--on-dark);max-width:32ch} /* Der Fuss traegt GENAU ZWEI Bernsteinmarken: die Oberkante (die Grenze) und die Kapitelmarke am Verbund (die Bedeutung). Vier waeren Dekoration. */ .fuss h3{font:800 10.5px/1 Manrope;letter-spacing:.14em;text-transform:uppercase; color:#8FAEC1;margin-bottom:18px} .fuss ul{list-style:none;padding:0;display:grid;gap:11px} .fuss a{color:#DCE7ED;font-size:14.5px; text-decoration-line:underline;text-decoration-color:rgba(220,231,237,.28); text-underline-offset:3px;transition:text-decoration-color .15s var(--ease),color .15s var(--ease)} .fuss a:hover{color:#fff;text-decoration-color:#fff} .fuss .person{font:800 16px/1.3 Manrope;color:#fff;margin-bottom:2px;letter-spacing:-.01em} .fuss .firma{font-size:13.5px;color:#8FAEC1;margin-bottom:14px} .fuss .ruf{display:inline-block;font:800 21px/1 Manrope;color:#fff; letter-spacing:-.02em;margin-bottom:14px;font-variant-numeric:tabular-nums; text-decoration-line:none} .fuss .ruf:hover,.fuss .ruf:focus-visible{text-decoration-line:underline;text-underline-offset:5px; text-decoration-color:#fff} .fuss .gebiet{font-size:13.5px;line-height:1.55;color:var(--on-dark)} /* Der Verbund — die Vertragspartner-Frage, auf jeder Seite beantwortet */ .fuss__verbund{border-top:1px solid rgba(185,203,214,.16); padding-block:clamp(28px,3vw,40px);display:grid;grid-template-columns:1fr 1.25fr;gap:44px;align-items:start} .fuss__verbund .kap{display:flex;align-items:center;gap:12px;margin-bottom:16px; font:800 10.5px/1 Manrope;letter-spacing:.15em;text-transform:uppercase;color:var(--amber)} .fuss__verbund .kap s{flex:1;max-width:120px;height:1px;background:rgba(185,203,214,.28);text-decoration:none} .fuss__verbund p{font-size:14.5px;line-height:1.62;color:var(--on-dark);max-width:62ch} .fuss__verbund .bf{padding-block:9px} .fuss__verbund .bf + .bf{border-top:1px solid rgba(185,203,214,.14)} .fuss__verbund .bf b{color:#8FAEC1} .fuss__verbund .bf s{background:rgba(185,203,214,.22)} .fuss__verbund .bf span{color:#fff;font-size:13.5px} .fuss__recht{border-top:1px solid rgba(185,203,214,.16); padding-block:20px 26px;display:flex;flex-wrap:wrap;gap:10px 26px; align-items:center;justify-content:space-between} .fuss__recht nav{display:flex;flex-wrap:wrap;gap:22px} .fuss__recht small{font-size:13px;color:#8FAEC1;font-variant-numeric:tabular-nums} .fuss :focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px rgba(8,44,63,.92)} /* ========================================================== MOBIL ========================================================== */ @media(max-width:900px){ .fuss__haupt{grid-template-columns:1fr 1fr;gap:36px} .fuss__verbund{grid-template-columns:1fr;gap:22px} } /* [Klammer 20.08. korrigiert — sie stand am Dateiende und sperrte 130 Zeilen, darunter den kompletten Seitenkopf, hinter max-width:900px ein. Folge: Das Design war auf dem Telefon richtig und auf dem Desktop kaputt.] */ /* --- DIE EINE KANTE ---------------------------------------------------- AURA 27.08.2026, gemessen: Bühne stand 48 px rechts vom Logo darüber UND 48 px rechts von der Überschrift darunter; die Befund-Leiste begann bei 0 und endete bei 1200 (240 px leer rechts). Bei 1440 waren es drei linke Kanten, bei 1280 vier. Ursache war eine max-width auf .q-leiste-befund — genau das, wovor der Kommentar bei „Ein Maß für zwei Aufgaben" warnt. Zusammen mit der negativen alignfull-Marge von WordPress ergab das den Start bei 0. 🔴 Diese Regel ist die EINZIGE Stelle, die das Maß beider Bauteile setzt. Nicht ergänzen, nicht duplizieren — sonst kommt die Kante ein drittes Mal zurück (sie war am 20.08. schon einmal da). Nachgerechnet gegen die gemessenen Sektionskanten: 1440 → max(40, 120) = 120 Sektionen 120 ✓ 1280 → max(40, 40) = 40 Sektionen 40 ✓ 1024 → max(40, −88) = 40 Sektionen 40 ✓ ------------- */ .q-buehne > .inhalt { max-width: none; margin-inline: 0; padding-inline: max( 40px, calc((100% - var(--wp--style--global--wide-size, 1200px)) / 2) ); } /* Die Befund-Leiste braucht dieselbe KANTE, aber eine andere RECHNUNG: • sie trägt alignfull, WordPress gibt ihr margin-inline:-40px • in calc() meint 100% die Breite des ELTERNTEILS (hier 1360 bei 1440), nicht die eigene (1440) — die Bühne liegt eine Ebene höher und rechnet deshalb mit 1440 Beides zusammen ergab 80 statt 120. Die +40 px holen genau das zurück. Nachgerechnet: 1440 → 80+40 = 120 ✓ · 1280 → 0+40 = 40 ✓ · 1024 → max(40,−88) = 40 ✓ */ .q-leiste-befund { max-width: none; padding-inline: max( 40px, calc((100% - var(--wp--style--global--wide-size, 1200px)) / 2 + 40px) ); } /* --- Der Seitenkopf: das Bauteil, das 13 Seiten fehlt ------------------ */ .q-seitenkopf { background: var(--surface); border-bottom: 1px solid var(--line-warm); padding-block: clamp(38px, 5vw, 64px) clamp(30px, 4vw, 48px); --wl: var(--amber-solid); /* Grund ist surface → 4,52:1 */ } .q-seitenkopf .wp-block-post-title { margin: 0 0 .35em; font-size: clamp(30px, 4.2vw, 46px); line-height: 1.1; letter-spacing: -0.02em; } .q-seitenkopf .q-kapitel { margin-bottom: 14px; } .q-seitenkopf .q-kapitel::after { content: none; } /* keine zweite Linie */ .q-seitenkopf .wp-block-post-title::before { content: none; } .q-seitenkopf__lead { font-size: clamp(18px, 2vw, 21px); color: var(--wp--preset--color--contrast-2, #4A5257); max-width: 52ch; margin: 0; } /* Rechtsseiten: kein Kapitel, keine Fläche — sie bleiben schmucklos */ .q-seitenkopf--recht { background: transparent; border-bottom: 0; } /* 🔴 overflow-x:hidden auf body schaltet position:sticky still ab — der Body wird zum Scroll-Container. Deshalb clip auf html. */ html { overflow-x: clip; } body { overflow-x: visible; } /* --- AURAs Meta-Zeile und Navigation, aus ihrem Prototyp --- */ /* ========================================================== BEFUND-ZEILE — Label · Fuellung · Wert Die typografische Signatur. Sie traegt jetzt auch die Chrome. ========================================================== */ .bf{display:flex;align-items:baseline;gap:10px;min-width:0} .bf b{font:800 10.5px/1 Manrope;letter-spacing:.14em;text-transform:uppercase; color:var(--contrast-3);white-space:nowrap} .bf s{flex:1 1 auto;min-width:14px;height:1px;background:#D9D4CA;text-decoration:none; align-self:center} .bf span{font:600 12.5px/1.2 Manrope;color:#3A464C;white-space:nowrap} .kopf__meta .bf{flex:0 1 auto} .kopf__meta .bf:first-child{max-width:52%} .kopf__meta .bf:last-child{max-width:40%;justify-content:flex-end} .kopf__meta .bf:last-child s{min-width:26px} .nav{margin-left:auto;display:flex;align-items:center;gap:26px} .nav a{position:relative;font:600 15px/1 Manrope;letter-spacing:-.004em; color:#2C3A42;text-decoration:none;padding:8px 0; transition:color .15s var(--ease)} .nav a:hover{color:var(--primary)} /* Zustand „hier bin ich" = drei Signale: Farbe · Gewicht · eigene Wasserlinie */ .nav a[aria-current]{color:var(--primary);font-weight:800} .nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-2px; height:2px;border-radius:2px;background:var(--amber-line)} .nav .tief::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px; border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg)} .fuss__verbund .bf{padding-block:9px} .fuss__verbund .bf + .bf{border-top:1px solid rgba(185,203,214,.14)} .fuss__verbund .bf b{color:#8FAEC1} .fuss__verbund .bf s{background:rgba(185,203,214,.22)} .fuss__verbund .bf span{color:#fff;font-size:13.5px} .nav a{font-size:14.5px} /* [herrenloser Media-Rest entfernt: .nav,.kopf__tat{display:none} galt unbedingt] */ /* Der Kopfbalken: Logo · Navigation · Aktion auf EINER Kante */ .kopf__innen { display:flex; align-items:center; gap:32px; height:100%; } .kopf__tat { flex:none; padding:11px 20px; border:2px solid var(--primary); border-radius:4px; font:700 15px/1 Manrope; color:var(--primary); text-decoration:none; } .kopf__tat:hover { background:var(--primary); color:#fff; } /* [Altlast entfernt: @media 900px .nav{display:none} — die Navigation wird heute bei 920 zur scrollbaren Zeile, nicht ausgeblendet.] */ /* --- Navigation: gegen die globale Link-Regel durchsetzen -------------- */ .kopf__innen .nav { margin-left: auto; display: flex; align-items: center; gap: 26px; } .kopf__innen .nav a { position: relative; text-decoration: none !important; font-weight: 600; font-size: 15px; line-height: 1; color: #3A464C; white-space: nowrap; } .kopf__innen .nav a:hover { color: var(--primary); } .kopf__innen .nav a[aria-current] { color: var(--primary); font-weight: 800; } /* --- Meta-Zeile: die Füll-Linie zwischen Label und Wert ---------------- */ .kopf__meta .bf { display: flex; align-items: baseline; gap: 10px; min-width: 0; margin: 0; } .kopf__meta .bf b { font-weight: 800; font-size: 10.5px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: #5E686E; white-space: nowrap; } .kopf__meta .bf s { flex: 1 1 auto; min-width: 14px; height: 1px; background: #D9D4CA; text-decoration: none; align-self: center; } .kopf__meta .bf span { font-weight: 600; font-size: 12.5px; color: #3A464C; white-space: nowrap; } .kopf__meta > .breit { display: flex; align-items: center; justify-content: space-between; gap: 28px; } .q-seitenkopf__titel { margin: 0 0 .35em !important; font-size: clamp(30px, 4.2vw, 46px); line-height: 1.1; letter-spacing: -0.02em; } .q-seitenkopf__titel::before { content: none !important; } /* --- Mobil: von Hand, sauber geklammert -------------------------------- */ @media (max-width: 1240px) { .kopf__innen .nav { gap: 18px; } } @media (max-width: 1080px) { .kopf__innen .nav a { font-size: 14px; } } @media (max-width: 940px) { /* 🔴 Hier stand .nav{display:none}. Die Ersatz-Navigation setzt aber erst bei 920 ein — zwischen 921 und 940 px hatte die Seite GAR KEINE Navigation. Eine Grenze, nicht zwei. */ .kopf__meta .bf:last-child { display: none; } .kopf__innen { gap: 16px; } .kopf__tat { margin-left: auto; } } /* [Klammer vom Dateiende entfernt] */ /* --- Mobile Navigation ------------------------------------------------ AURA gemessen: Nav ab 920 px display:none OHNE Ersatz. Ein Besucher auf einer Unterseite hatte keinen Weg außer 4.883 px bis zum Fuß. Lösung ohne JavaScript: die Navigation wird zur scrollbaren Zeile. */ @media (max-width: 920px) { /* 🔴 .kopf__bar hat eine feste height:72px. Die umgebrochene Navigation macht den Inhalt 96px hoch — der Kasten blieb 72 und die Navigation ragte unten heraus, wo der folgende Inhalt sie verdeckte. Gemessen: Kopf 96px hoch, Navigation bei top 120. Deshalb hier height:auto. */ .kopf__bar, .kopf__bar > .kopf__innen { height: auto !important; } .kopf__innen { flex-wrap: wrap; row-gap: 10px; padding-block: 12px; } .kopf__innen .nav { display: flex !important; order: 3; width: 100%; margin-left: 0; gap: 20px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } .kopf__innen .nav::-webkit-scrollbar { display: none; } .kopf__innen .nav a { font-size: 15px; padding-block: 4px; } .kopf__tat { margin-left: auto; padding: 9px 16px; font-size: 14px; } .kopf__logo svg { height: 34px; } } /* --- Kein stiller Textabschnitt --------------------------------------- Auf 4 Seiten lief Text seitlich heraus — und weil overflow-x:clip greift, OHNE Scrollbalken, still abgeschnitten. Heute sind es Platzhalter, morgen wäre es eine Anschrift. */ .q-befund .wert, .q-befund .label { overflow-wrap: anywhere; } .q-befund .zeile { flex-wrap: wrap; } mark.q-offen { overflow-wrap: anywhere; } .q-betrieb, .q-symptom, .q-kosten .karte { min-width: 0; } /* --- Seitenkopf über die volle Breite ---------------------------------- Fläche voll, Inhalt auf der gemeinsamen Kante — und ALLE Kinder auf derselben. WordPress gibt Überschriften eigene Layout-Klassen, die sie sonst gegen die Absätze verschieben. Genau AURAs Kanten-Befund im Kleinen. */ /* 🔴 :not(.alignfull) — sonst schlaegt dieses `margin-inline: 0 !important` genau die negative Marge tot, mit der WordPress alignfull umsetzt. Gemessen: Band ml=-40px (voll), Seitenkopf ml=0px (1360 statt 1440). Der Fehler war meine eigene Regel, nicht WordPress. */ .q-seitenkopf:not(.alignfull) { max-width: none !important; margin-inline: 0 !important; padding-inline: max(var(--gutter,24px), calc((100% - var(--wide,1200px))/2 + var(--gutter,24px))); } .q-seitenkopf > *, .q-seitenkopf > .wp-block-heading, .q-seitenkopf > p { max-width: var(--wp--style--global--content-size, 760px); margin-left: 0 !important; margin-right: auto !important; } /* --- Ein Maß für zwei Aufgaben ---------------------------------------- AURA gemessen: alles lief auf 760 px. Fließtext 84 Zeichen/Zeile (Ziel 60–75), dreispaltige Bauteile 201 px = 22 Zeichen (Ziel ≥45). Ein Maß kann nicht beides. Fließtext wird schmaler (theme.json 660), die Bauteile dürfen auf die breite Kante. 🔴 Zwei Dinge NICHT anfassen: - .q-leiste-befund ist eine randlose Bandleiste (padding-inline statt max-width) — eine max-width würde sie vom Rand lösen. - Kein 100vw: das rechnet die Scrollbar mit und erzeugt Overflow. Der Elternteil begrenzt ohnehin, max-width allein genügt. Die WordPress-Layoutregel steht in :where() (Spezifität 0), eine Klassenregel gewinnt dagegen ohne !important. */ .q-symptome, .q-kosten, .q-schritte, .q-betriebe, .q-pegel, .q-belege, .q-faq, .q-vorteile { max-width: var(--wp--style--global--wide-size, 1200px); margin-inline: auto; } /* --- Bewegung nur, wenn erwünscht ------------------------------------- 6 Transitions, 0 Animationen — vier Zeilen, kein eigener Arbeitsgang. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; } } /* --- Der Elternteil muss mitwachsen ----------------------------------- Gemessen: .q-symptome.alignwide bekommt korrekt max-width 1200px — und bleibt trotzdem 660 breit, weil die UMGEBENDE Gruppe selbst auf 660 steht. Ein Kind kann nicht breiter werden als sein Elternteil; die Klasse am Bauteil allein reicht nicht. Die Gruppe darf mitwachsen, aber nur wenn sie KEINEN eigenen Hinter- grund traegt — sonst wuerde aus einem 660er Farbkasten unbemerkt ein 1200er. Ihre normalen Kinder (h2, p) bleiben bei 660, weil die innere constrained-Regel weiter auf content-size zeigt. Genau das ist gewollt: Text schmal, Bauteile breit — ein Elternteil, zwei Maße. */ .is-layout-constrained > .wp-block-group:not([class*="-background-color"]):has(> .alignwide) { max-width: var(--wp--style--global--wide-size, 1200px); } /* --- Eine Kante --------------------------------------------------------- Die Verbreiterung der Bauteile hat einen neuen Bruch erzeugt: die Ueberschrift stand zentriert bei 373 px, ihre eigenen Karten begannen bei 104 px. Eine Ueberschrift, die rechts neben ihrem Inhalt haengt, liest sich wie ein Versehen — und ist eines. In einer verbreiterten Gruppe ruecken Ueberschrift und Einleitung an dieselbe linke Kante wie das Bauteil. Sie bleiben schmal (Lesbarkeit), sie stehen nur nicht mehr mittig. Eine Kante, drei Elemente. */ /* Die Hintergrund-Ausnahme gilt hier NICHT: eine randlose Sektion (.alignfull) hat ohnehin volle Breite, ihr Grund kann nicht schrumpfen. Ohne diesen Zusatz stand die Ueberschrift der dunklen Pegel-Sektion bei 374, ihre Leiste bei 104. */ .is-layout-constrained > .wp-block-group:has(> .alignwide):is(.alignfull, :not([class*="-background-color"])) > :where(h2, h3, p, .wp-block-heading, .q-kapitel) { /* 🔴 !important ist hier kein Pfusch, sondern noetig: WordPress setzt die Zentrierung selbst mit !important (.is-layout-constrained > :where(...) { margin-left:auto !important }). Gegen !important verliert jede Spezifitaet — gemessen: meine Regel traf die h2 mit ml:0px, der berechnete Wert blieb 270px. */ margin-left: 0 !important; margin-right: auto !important; } /* --- Die Kante in randlosen Sektionen --------------------------------- Eine .alignfull-Gruppe ist so breit wie das Fenster; ihr breites Bauteil sitzt darin auf 1200 zentriert, also eingerueckt um (100% - 1200)/2. Ein margin-left:0 schickt den Text daneben an den Sektionsrand — gemessen h2 bei 40, Bauteil bei 104. Der Text braucht dieselbe Rechnung. */ .is-layout-constrained > .wp-block-group.alignfull:has(> .alignwide) > :where(h2, h3, p, .wp-block-heading, .q-kapitel) { margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size, 1200px)) / 2)) !important; } /* --- Hero-Foto in der Bühne ------------------------------------------ Gemessen im Textbereich des Bildes: Grauwerte von 21 bis 222. Auf den hellsten Stellen (die weiße Wand) stünde der weiße Titel bei 1,35:1 — unlesbar. Ab 60 % Abdunkelung ist AA sicher; links wird stärker abgedunkelt als rechts, weil dort der Text steht und rechts das Bild wirken soll. Reihenfolge der Ebenen in .q-buehne: ::before Scrim (Verlauf) <- lag vorher der Lichtschacht-Verlauf ::after Korn bleibt: bindet Foto und Fläche Das Foto selbst liegt als background auf .q-buehne. */ .q-buehne { /* 🔴 Fallback-Grund. Faellt das Bild aus (langsame Verbindung, Ladefehler, Bildblocker), steht die Schrift auf DIESER Farbe. Beim hellen Look muss sie hell sein — mit dem alten --band-deep stand dunkle Schrift auf dunklem Grund: gemessen 1,4:1. */ background-color: var(--paper, #FAF9F6); background-image: image-set( url("bilder/hero-hell.webp") type("image/webp"), url("bilder/hero-hell.jpg") type("image/jpeg")); background-size: cover; background-position: 62% center; /* Gewölbe und Fenster bleiben im Ausschnitt */ background-repeat: no-repeat; } /* Der Scrim ersetzt den bisherigen Lichtschacht-Verlauf */ .q-buehne::before { background: linear-gradient(96deg, rgba(6,34,46,.94) 0%, rgba(6,34,46,.90) 34%, rgba(6,34,46,.72) 52%, rgba(6,34,46,.42) 72%, rgba(6,34,46,.34) 100%), linear-gradient(180deg, rgba(6,34,46,.30) 0%, rgba(6,34,46,0) 30%, rgba(6,34,46,0) 70%, rgba(6,34,46,.40) 100%); } /* Auf dem Telefon steht der Text über der ganzen Breite — dort muss der Scrim rundum tragen, ein Links-Verlauf reicht nicht. */ @media (max-width: 860px) { .q-buehne { background-position: 42% center; } .q-buehne::before { background: linear-gradient(180deg, rgba(6,34,46,.90) 0%, rgba(6,34,46,.86) 55%, rgba(6,34,46,.92) 100%); } } /* --- Foto ODER Zeichnung, nicht beides -------------------------------- Der erste Einbau legte den Wandschnitt ÜBER das Foto. Die Zeichnung ging im hellen Wohnbereich unter („FEUCHTEGRENZE" auf dem Sofa), und zwei Bildsprachen kämpften um dieselbe Fläche. AURAs Vorgabe: „Sobald ein echtes Foto da ist, wandert es hierher" — das Foto ERSETZT die Zeichnung in der Bühne. Auf allen Unterseiten bleibt der Wandschnitt unangetastet; er ist dort das, was ein Foto nie zeigen kann. Rücknahme: diesen Block löschen, dann ist die Zeichnung wieder da. */ .q-buehne .q-plan { display: none; } /* Damit rückt der Text auf eine Spalte und bekommt Luft nach unten */ @media (min-width: 940px) { .q-buehne > .inhalt { grid-template-columns: minmax(0, 620px); } } /* Ohne die Zeichnung darf die rechte Seite heller bleiben — das Foto ist jetzt das Bild, nicht nur Untergrund. Links bleibt der Text geschützt. */ .q-buehne::before { background: linear-gradient(96deg, rgba(6,34,46,.95) 0%, rgba(6,34,46,.92) 30%, rgba(6,34,46,.74) 48%, rgba(6,34,46,.40) 68%, rgba(6,34,46,.26) 100%), linear-gradient(180deg, rgba(6,34,46,.34) 0%, rgba(6,34,46,0) 26%, rgba(6,34,46,0) 68%, rgba(6,34,46,.46) 100%); } /* Die Augenbraue steht in Bernstein und lag bei 2,91:1 — der obere Teil des Fotos ist dort zu hell. Oben kräftiger abdunkeln; H1 (6,21) und Nachsatz (10,96) hatten Reserve, die kostet das nichts. */ .q-buehne::before { background: linear-gradient(96deg, rgba(6,34,46,.96) 0%, rgba(6,34,46,.93) 32%, rgba(6,34,46,.76) 50%, rgba(6,34,46,.42) 70%, rgba(6,34,46,.26) 100%), linear-gradient(180deg, rgba(6,34,46,.58) 0%, rgba(6,34,46,.34) 18%, rgba(6,34,46,0) 34%, rgba(6,34,46,0) 66%, rgba(6,34,46,.46) 100%); } /* --- Scrim auf dem Telefon -------------------------------------------- 🔴 Kaskadenfalle: Der Mobil-Block stand weiter oben, danach kam eine .q-buehne::before-Regel OHNE Media Query — die spätere Regel gewinnt, also griff der Mobil-Scrim nicht mehr. Gemessen bei 390 px: Augenbraue 2,17:1, Fließtext 2,67:1. Deshalb steht er jetzt am ENDE. Auf dem Telefon läuft der Text über die volle Breite, ein Links-Verlauf nützt dort nichts. Und das Bild ist ohnehin stark beschnitten — dort zählt Lesbarkeit mehr als Bildwirkung. */ @media (max-width: 860px) { .q-buehne { background-position: 38% center; } .q-buehne::before { background: /* Gemessen war bei .94/.90/.93 alles zwischen 10 und 13:1 — weit über dem Ziel, aber das Foto war praktisch weg. Zurückgenommen, bis das Bild wieder trägt; die Messung darunter hält AA mit Puffer. */ /* Der Bernstein der Augenbraue steht ganz oben und braucht 4,5:1 — bei gleichmäßiger Deckung lag er bei 3,70. Oben also kräftig, in der Bildmitte zurück, damit das Foto trägt. */ linear-gradient(180deg, rgba(6,34,46,.93) 0%, rgba(6,34,46,.91) 30%, rgba(6,34,46,.72) 52%, rgba(6,34,46,.86) 100%) !important; } } /* --- Nachkalibrierung auf das neue Hero-Foto (25.08., 10:25) ---------- Das neue Bild ist im Textbereich deutlich heller als das erste: Median 166 statt 107, hellste Stellen 238 statt 222. Ohne stärkeren Scrim stünde der weiße Titel dort bei 1,16:1. Dafür stehen die Personen jetzt RECHTS statt links — genau dort, wo der Scrim ohnehin schwach ist. Der Kompromiss von vorhin (Silhouetten im dunklen Bereich) entfällt: rechts darf es hell bleiben, links wird kräftiger abgedunkelt. */ .q-buehne { background-position: 58% center; } .q-buehne::before { background: /* 🔴 ZWEI ZONEN, glyphengenau gemessen. Meini 28.08.: "der Uebergang soll schneller sein, damit weniger vom Bild verdeckt wird". Der Verlauf lag vorher bei 96deg, lief also DIAGONAL und traf die obere orange Zeile frueher als die H1 darunter -- ein schnellerer Uebergang traf ausgerechnet den obersten Text. Jetzt 90deg: exakt waagerecht, jede Zeile gleich behandelt. 🔴 Dabei ein Fehler gefunden, der hier schon VOR dem Bildwechsel stand: Unter 1200 px wird die Buehne relativ hoeher und der Text breiter -- bei 925 px reicht die H1 bis 73 % der Breite. Ein seitlicher Verlauf traegt dort nicht mehr; gemessen fielen H1 (2,0:1) und die orange Zeile (1,0:1) klar durch AA. Darum unter 1200 px SENKRECHT decken, wie es unter 861 px ohnehin geschieht. Gemessen ueber 10 Breiten (1600 bis 880 px) glyphengenau: Maske aus zwei Aufnahmen, eine mit color:transparent. Die Kastenmessung luegt in BEIDE Richtungen -- sie las die orange Zeile mit 4,8 statt 6,0 und den CTA mit 4,9 statt 4,4. Schlechtester Wert jetzt 5,0:1. */ } @media (min-width: 1200px) { .q-buehne::before { background: /* HELLER Look: der Schleier hellt auf, statt abzudunkeln. Erst das Kopfband (die Navigation steht ueber dem Gewoelbe), dann waagerecht fuer die Textspalte links. */ linear-gradient(180deg, rgba(252,250,247,.55) 0%, rgba(252,250,247,.28) 12%, rgba(252,250,247,0) 26%), linear-gradient(90deg, rgba(252,250,247,.62) 0%, rgba(252,250,247,.34) 42%, rgba(252,250,247,.10) 58%, rgba(252,250,247,0) 72%); } } @media (min-width: 861px) and (max-width: 1199px) { .q-buehne::before { background: linear-gradient(180deg, rgba(252,250,247,.86) 0%, rgba(252,250,247,.78) 30%, rgba(252,250,247,.62) 58%, rgba(252,250,247,.72) 100%); } } /* Auf dem Telefon den Ausschnitt nach rechts holen — dort steht das Gewoelbe mit Fenster. Links waere nur die leere Wand im Bild. (Der Kommentar sprach bis 28.08. von "Personen" — das war das allererste Motiv mit zwei Maennern, es gibt sie laengst nicht mehr.) */ @media (max-width: 860px) { .q-buehne { background-position: 72% center !important; } .q-buehne::before { background: linear-gradient(180deg, rgba(252,250,247,.90) 0%, rgba(252,250,247,.88) 30%, rgba(252,250,247,.82) 55%, rgba(252,250,247,.88) 100%) !important; /* 🔴 .76 -> .88 bei 54 %. AURA hat die sechs Textknoten auf dem Foto GEMESSEN — nicht per Rechnung ueber die Elternkette (die versagt hier), sondern ueber eine Glyphen-Maske: zwei Renderings, eines mit color:transparent, die Differenz ist die Maske; darunter wird der Grund pixelweise gelesen. Alle sechs bestehen AA an allen vier Breiten. Angehoben wird trotzdem EINE Stelle: der Lead sitzt bei 55-64 % der Buehnenhoehe — genau im Minimum, und dahinter steht im Foto eine Tischlampe. 5,11 -> 7,26 = AAA. Fuer 55- bis 70-Jaehrige das richtige Ziel. NICHT ueber die Textfarbe loesen: dafuer braeuchte der Lead Weiss, waere so laut wie die H1, und die Hierarchie waere hin. Der Scrim gilt ausserdem fuer JEDES kuenftige Foto, die Farbe nur fuer dieses. */ } } /* ====================================================================== FEINSCHLIFF — die Dinge, die man nicht bewusst sieht ====================================================================== */ /* --- 1 · Textauswahl in Markenfarbe ------------------------------------ Ein markiertes Wort wurde Windows-Blau. Auf einer Seite, die sonst jede Farbe begründet, ist das der einzige Fremdkörper. */ ::selection { background: #0E3A52; color: #fff; text-shadow: none; } ::-moz-selection { background: #0E3A52; color: #fff; text-shadow: none; } .q-buehne ::selection, .has-band-background-color ::selection, .q-pegel ::selection { background: #E0922F; color: #06222E; } /* --- 2 · Ankersprünge: gleiten, und nicht unter dem Kopf landen -------- scroll-behavior wird im reduced-motion-Block weiter oben wieder abgeschaltet — das bleibt so. */ html { scroll-behavior: smooth; } :target, [id]:not(body):not(html) { scroll-margin-top: 104px; } /* --- 3 · Formularfelder in Markenfarbe --------------------------------- */ :root { accent-color: #0E3A52; caret-color: #0E3A52; } /* --- 4 · Ziffern untereinander ---------------------------------------- 🔴 Die vorhandene Regel zielte auf .tel/.num/.plz/time/.preis — gemessen trug KEINE der Stellen mit Zahlen eine dieser Klassen. Die Regel lief ins Leere. Hier stehen die Ziffern wirklich: */ .tel, .anruf, .q-befund .wert, .q-leiste-befund .wert, .fuss a[href^="tel:"], a[href^="tel:"], .q-plz input { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "kern" 1; } /* --- 5 · Kerning und Ligaturen ---------------------------------------- */ body { font-kerning: normal; font-feature-settings: "kern" 1, "liga" 1, "calt" 1; text-rendering: optimizeLegibility; } /* --- 6 · Trennung nur im Fließtext ------------------------------------ Lange deutsche Wörter reißen im schmalen Satz Löcher. In Überschriften und Bedienelementen wäre eine Trennung dagegen ein Fehler. */ p, li, dd, details p, .q-symptom p, .q-schritt p, .stufe p { hyphens: auto; } h1, h2, h3, h4, summary, .q-aktion, .kopf__innen, .q-befund, .q-leiste-befund, .q-augenbraue, .q-kapitel, .nav { hyphens: manual; } /* --- 7 · Bildlaufleiste ------------------------------------------------ */ html { scrollbar-color: #C3D0D8 transparent; scrollbar-width: thin; } /* --- 8 · Die Dauer-Chips auf eine Linie ------------------------------- 🔴 Gemessen auf /ablauf/, /muenchen/ und /franchise-ablauf/: die Chips standen auf ZWEI Höhen, 25–26 px auseinander, weil die Schritt-Texte unterschiedlich lang sind. Vier Schritte nebeneinander, deren Fußzeile springt — das liest sich als Unordnung, ohne dass man den Grund sieht. Die Karte wird zur Spalte, der Chip bekommt margin-top:auto und sitzt damit auf einer gemeinsamen Grundlinie. Der Schritt bleibt bewusst OHNE Rahmen und Schatten: Er ist eine nummerierte Ablaufkette, keine Kachel. */ .q-schritt { display: flex; flex-direction: column; } .q-schritt .dauer { margin-top: auto; align-self: flex-start; } /* ====================================================================== DER MITLAUFENDE KOPF Die Startseite ist 6.408 px hoch. Bisher war die Navigation nach dem ersten Scroll weg. Geprüft: kein overflow-Blocker in der Elternkette (html steht auf overflow-x:clip / overflow-y:visible), sticky greift. Die Meta-Zeile darüber (LEISTUNG · VOR ORT) scrollt bewusst weg — sie ist Kontext beim Ankommen, nicht beim Lesen. Nur die Hauptleiste bleibt. ====================================================================== */ .kopf__bar { position: sticky; top: 0; z-index: 50; /* 🔴 Ein klebender Kopf MUSS deckend sein, sonst scrollt der Inhalt sichtbar hindurch. */ background: var(--paper, #FAF9F6); transition: height .22s cubic-bezier(.2,.6,.2,1), box-shadow .22s ease; } /* Beim Scrollen schrumpfen und einen feinen Schatten setzen — ohne JavaScript über eine scroll-gesteuerte Animation. Wo der Browser das nicht kann, klebt der Kopf einfach in voller Höhe: kein Bruch. */ @supports (animation-timeline: scroll()) { .kopf__bar { animation: kopf-verdichtet linear both; animation-timeline: scroll(root block); animation-range: 40px 180px; } .kopf__logo svg { animation: logo-verdichtet linear both; animation-timeline: scroll(root block); animation-range: 40px 180px; } @keyframes kopf-verdichtet { to { height: 58px; box-shadow: 0 1px 0 var(--line-warm, #E4E0D8), 0 10px 26px rgba(8,44,63,.08); } } @keyframes logo-verdichtet { to { height: 30px; } } } /* Der Anker-Abstand muss zum klebenden Kopf passen (war schon auf 104 gesetzt — hier bestätigt, damit beides zusammen gepflegt wird). */ :target, [id]:not(body):not(html) { scroll-margin-top: 96px; } @media (max-width: 920px) { /* Auf dem Telefon trägt der Kopf zwei Zeilen (Logo + Navigation). Schrumpfen würde die Navigation zerdrücken — dort klebt er nur. */ .kopf__bar { animation: none !important; } .kopf__logo svg { animation: none !important; } } /* ====================================================================== BILDPLÄTZE — vorbereitet, aber noch nicht behauptet AURAs Regel bleibt: Solange kein Foto da ist, wird keins behauptet. Es entsteht KEIN graues Kästchen. Diese Regeln greifen erst, wenn ein eingesetzt wird — vorher ändert sich nichts. ====================================================================== */ /* --- Symptom-Kachel: Foto ersetzt die Zeichnung ----------------------- Gemessen: das Zeichnungs-Panel ist 347×92 px = 3,78:1 (Telefon 2,91:1), die Wasserlinie sitzt bei 57 % der Panel-Höhe — NICHT im unteren Drittel. Ein Foto übernimmt exakt diesen Rahmen. Über --fokus lässt sich je Bild nachjustieren, wo die Feuchtekante sitzt, ohne das Bild zu beschneiden. */ .q-symptom > .foto { display: block; width: 100%; object-fit: cover; object-position: center var(--fokus, 57%); background: var(--surface, #F1EFE9); } .q-symptom > .foto + svg { display: none; } /* Foto schlägt Zeichnung */ /* --- Betriebs-Porträt: groß und quer statt klein und rund ------------- 🔴 AURA schrieb ausdrücklich: „Foto — nicht rund und klein, sondern GROSS, EHRLICH, QUER". Umgesetzt war ein 112×112-Kreis. Das Gesicht dessen, der klingelt, ist auf dieser Seite kein Schmuck, sondern das Produkt — es bekommt jetzt den Platz, den AURA vorgesehen hat. Ohne Foto bleibt der bisherige Kreis mit „Foto fehlt" bestehen. */ .q-betrieb:has(> .portraet > img) > .portraet, .q-betrieb > .portraet:has(img) { width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: 10px; background: var(--surface, #F1EFE9); margin-bottom: 20px; } .q-betrieb > .portraet > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center var(--fokus, 42%); /* Augenhöhe leicht über Mitte */ border-radius: 10px; } /* --- Verfahrensbild auf den Leistungsseiten --------------------------- */ .q-verfahrensbild { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center var(--fokus, 50%); border-radius: 10px; box-shadow: var(--sh-sm); margin: 34px 0 0; } /* Bilder allgemein: nie über den Rand, nie verzerrt */ .wp-site-blocks img { max-width: 100%; height: auto; } /* --- Bildunterschrift am Verfahrensbild ------------------------------- */ .q-verfahrensfigur { margin: 34px auto 0; /* Auf die breite Kante — dieselbe wie die übrigen Bauteile (1200 px), damit das Bild in derselben Spur liegt wie Kacheln und Leisten. */ max-width: var(--wp--style--global--wide-size, 1200px); } .q-verfahrensfigur .q-verfahrensbild { margin: 0; } .q-verfahrensfigur figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: #5E686E; padding-left: 14px; border-left: 2px solid var(--wl, #C77A1F); } .has-band-background-color .q-verfahrensfigur figcaption { color: #B9CBD6; } /* --- Vorschau-Balken --------------------------------------------------- Solange Beispielwerte auf der Seite stehen, muss das auf JEDER Seite sichtbar sein. Bewusst quer zur Marke gestaltet: Er soll auffallen, nicht sich einfügen — und beim Entfernen der Beispielwerte fällt auf, dass er noch da ist. Rückbau: diesen Block löschen + den Balken aus dem Header nehmen. */ .q-vorschau { position: relative; z-index: 60; background: #7A2E12; color: #FFFFFF; /* war #FFF3E6 (Amber-Familie) — 8,63 -> 9,43:1 */ font: 600 13px/1.45 Manrope, system-ui, sans-serif; letter-spacing: .005em; padding: 9px clamp(16px, 4vw, 48px); text-align: center; /* 🔴 Die Amber-Wasserlinie an dieser Kante ist WEG (AURA, 26.08.): Sie lief von Kante zu Kante — und ihre eigene Regel lautet „Sie endet. Nie von Kante zu Kante. Eine Linie, die durchlaeuft, ist Dekoration." Schwerer noch: sie sass 88 px UEBER der echten, endenden 88-px- Wasserlinie des Kopfes und war die breitere und lautere von beiden. Das Geruest uebertoente die Marke direkt darunter. Ersatz ist eine neutrale Innenkante, kein Markenmaterial — die 8,96:1 des Feldes trennen ohnehin schon. */ box-shadow: inset 0 -1px 0 rgba(255,255,255,.22); } .q-vorschau strong { color: #FFFFFF; font-weight: 800; } /* war #FFD9A8 — 7,07 -> 9,43:1 */ /* 🔴 Der Versatz steht NICHT hier, sondern im