/* Theme Name: Layout Description: Child Theme fuer Enfold - Balanced Dogwork Version: 2.0 Author: aninova Template: enfold */ /* ========================================================================= Balanced Dogwork — Gestaltungssystem Neufassung nach der Design-Tiefenanalyse (Befunde in DESIGN.md). Leitidee: ruhig, erwachsen, fotogefuehrt. Die Fotos tragen die Seite, die Typografie ordnet sie, Flaechen gibt es nur vier. Die drei Regeln, an denen sich alles hier misst: 1. VIER EBENEN, sonst keine. Papier -> Sand -> Weiss (nur auf Sand) -> Dunkel. Weisse Kaesten auf Papier gibt es nicht; dort steht Satz auf der Flaeche. 2. GOLD IST EINE ZUSAGE. Gold traegt ausschliesslich die eine Hauptaktion (Erstgespraech/Ersttermin). Alles andere ist Umriss oder Textlink. 3. ABSTAND ZUM ZUGEHOERIGEN < ABSTAND ZUM NAECHSTEN. Alle Werte kommen aus der 4/8-Skala unten. Kein Wert ausserhalb der Skala. ========================================================================= */ /* --- Schriften: GENAU ZWEI, beide lokal --------------------------------- Auftrag 04.08.2026: keine Times-New-Roman-artige Schrift, genau zwei Familien, Open Sans fuer den Fliesstext und eine moderne fuer Menue und Ueberschriften, lokal ausgeliefert (Bezug google-webfonts-helper). FAMILJEN GROTESK traegt Titel, Menue und Etiketten. Ausgewaehlt aus acht Kandidaten, die an den echten Ueberschriften und im echten Farbschema gerendert wurden (build/fonts/v3/kandidat-*.jpg): schwedische Grotesk, im deutschen KMU-Web praktisch unbenutzt, eng und warm — und die einzige des Feldes, die die vorhandene Zeilenhoehe traegt (Tintenmass 1,017 em bei zweizeiligen Ueberschriften mit Ue und g; Manrope/Outfit/Instrument Sans brauchen dafuer 1,20 und haetten die ganze Skala gesprengt). Zweitplatziert war Archivo. OPEN SANS steht hier ausdruecklich, obwohl Enfold es selbst lokal ausliefert: Enfolds Uploader deklariert JEDE Datei einer Familie mit font-weight:400 (gemessen im dynamischen CSS: -600 und -regular beide als 400). Die letzte Deklaration gewinnt, es gab also faktisch nur einen Schnitt — Halbfett und Fett hat der Browser auf der ganzen Seite selbst verzerrt. Diese Bloecke laden nach dem dynamischen CSS und stellen die echten Schnitte wieder her. Erzeugt von build/fonts/install.py — dort aendern, nicht hier. */ @font-face{ font-family:'Familjen Grotesk'; font-style:normal; font-weight:600; font-display:swap; src:url('assets/fonts/familjen-grotesk-v11-latin_latin-ext-600.woff2') format('woff2'); } @font-face{ font-family:'Familjen Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('assets/fonts/familjen-grotesk-v11-latin_latin-ext-700.woff2') format('woff2'); } @font-face{ font-family:'open-sans'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/open-sans-v44-latin_latin-ext-regular.woff2') format('woff2'); } @font-face{ font-family:'open-sans'; font-style:italic; font-weight:400; font-display:swap; src:url('assets/fonts/open-sans-v44-latin_latin-ext-italic.woff2') format('woff2'); } @font-face{ font-family:'open-sans'; font-style:normal; font-weight:600; font-display:swap; src:url('assets/fonts/open-sans-v44-latin_latin-ext-600.woff2') format('woff2'); } @font-face{ font-family:'open-sans'; font-style:normal; font-weight:700; font-display:swap; src:url('assets/fonts/open-sans-v44-latin_latin-ext-700.woff2') format('woff2'); } :root{ /* Flaechen — genau vier Ebenen */ --bdw-papier:#f4f2ee; /* E0 Grund aller Inhaltssektionen */ --bdw-sand:#e6e0d4; /* E1 Ruheflaeche, traegt den Sektionsrhythmus */ --bdw-weiss:#ffffff; /* E2 erhoben — NUR auf Sand */ --bdw-dunkel:#3a2f28; /* Zaesur dunkelbraun */ --bdw-moos:#4f5535; /* Zaesur und Marke gruen */ --bdw-moos-tief:#414629; /* Schrift */ --bdw-tinte:#332b26; /* Ueberschriften 12,4:1 auf Papier */ --bdw-text:#4a3f38; /* Fliesstext 9,1:1 auf Papier */ --bdw-leise:#665c51; /* Nebentext 5,0:1 auf Sand */ --bdw-hell:#e7e1d7; /* Text auf Dunkel 10,0:1 */ /* Akzent — nur fuer die eine Hauptaktion */ --bdw-gold:#c9a227; /* mit Text #332b26 = 5,7:1 */ --bdw-gold-tief:#b8931e; /* Hover, mit Text #332b26 = 4,8:1 */ --bdw-gold-hell:#d9b53a; /* Gold AUF Dunkel = 6,6:1 */ --bdw-nein:#7d6e61; /* Ausschlusszeichen (Grafik, 3:1 genuegt) */ --bdw-linie:rgba(58,47,40,.14); --bdw-linie-hell:rgba(255,255,255,.22); /* Abstaende — 4/8-Skala, nichts ausserhalb davon */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:48px; --s10:64px; --s11:80px; --s12:128px; /* Radien — vier Werte */ --r-s:4px; /* Knoepfe, Etiketten, Formularfelder */ --r-m:10px; /* Karten, Bilder, Aufklapper */ --r-voll:999px; /* Ein einziges Lichtmodell fuer Ebene E2 */ --schatten:0 1px 2px rgba(58,47,40,.06), 0 10px 24px -8px rgba(58,47,40,.16); --schatten-hover:0 2px 4px rgba(58,47,40,.08), 0 16px 32px -10px rgba(58,47,40,.22); /* Schriftfamilien — Lato ist ersatzlos entfallen (charakterlose Paarung mit Open Sans, siehe DESIGN.md 2.1); die Serifenschrift traegt jetzt die Stimme. */ /* Genau zwei Familien. Der Rueckfall ist bewusst sans-serif: mit font-display:swap wuerde ein Serifen-Rueckfall genau die Anmutung aufblitzen lassen, die der Auftrag ausschliesst. */ --font-titel:'Familjen Grotesk','open-sans',system-ui,-apple-system,Helvetica,Arial,sans-serif; --font-sans:'open-sans', 'Open Sans', system-ui, -apple-system, Helvetica, Arial, sans-serif; /* Lesebreiten */ /* Hoehe des feststehenden Kopfes (Topbar + Menuezeile). Kein Schrumpfen mehr beim Scrollen (Auftrag 04.08.2026), der Wert gilt also durchgehend. */ --kopf:110px; --mass:66ch; /* Fliesstext */ --mass-eng:46ch; /* Karten- und Listentext */ } /* ========================================================================= 1 Enfold-Korrekturen — was das Theme von sich aus falsch macht ========================================================================= */ /* Randabfallende Elemente (Portraet, Bildbaender) ragen ueber den Container hinaus. Ohne diese Regel entsteht daraus ein waagerechter Rollbalken. clip statt hidden: hidden wuerde position:sticky im Inneren toeten. */ html,body{ overflow-x:clip; } /* wpautop-Rest: leerer Absatz vor der ersten Sektion */ #top #main > p{ margin:0 !important; height:0; overflow:hidden; } /* Die Zierlinie neben jeder Ueberschrift. Ihre Laenge haengt an der Spaltenbreite — dadurch sieht dieselbe Ueberschrift ueberall anders aus. */ #top .special-heading-border{ display:none !important; } /* Enfold gibt der Ueberschrift keinen Unterrand. Dadurch klebt sie am Text, waehrend Absatz zu Absatz weiter auseinandersteht: Hierarchie verkehrt. */ #top .av-special-heading{ margin:0 0 var(--s5); padding:0; } #top .flex_column_table{ margin-bottom:0; } /* ========================================================================= 2 Typografie ========================================================================= */ /* ACHTUNG SPEZIFITAET: Enfolds dynamisches CSS schreibt `#top #wrap_all .all_colors h2{font-size:32px;…}` — das sind zwei IDs, eine Klasse und ein Element (0-2-1-1). `#top h2` (0-1-0-1) verliert dagegen immer; genau daran sind die Groessen der ersten Fassung gescheitert. `.all_colors` haengt an `#main` und am `#header`, deckt also den ganzen Inhalt ab. Das Child-Stylesheet laedt NACH dem dynamischen CSS -> gleiche Spezifitaet genuegt. Jede Groessenregel unten traegt deshalb dieselbe Struktur. */ #top h1,#top h2,#top h3,#top h4,#top h5,#top h6,#top .bdw-serif, #top #wrap_all .all_colors h1,#top #wrap_all .all_colors h2, #top #wrap_all .all_colors h3,#top #wrap_all .all_colors h4, #top #wrap_all .all_colors h5,#top #wrap_all .all_colors h6{ font-family:var(--font-titel); font-weight:600; color:var(--bdw-tinte); } /* Die Groessen sind gegenueber der Serifenfassung um rund 2 px gefallen: Familjen hat bei gleicher Versalhoehe 9,2 % mehr x-Hoehe, bei unveraenderten Pixelwerten wirkt der Satz dichter — und genau das war der Vorwurf. Die Zeilenhoehen steigen dafuer leicht. Eine Grotesk bindet die Zeile ausserdem nur ueber die Stemme, sie braucht am Display mehr Negativ und im Kleinen keins. */ #top h1,#top #wrap_all .all_colors h1{ font-size:clamp(32px,3.9vw,48px); line-height:1.08; letter-spacing:-.022em; margin:0 0 var(--s5); } #top h2,#top #wrap_all .all_colors h2{ font-size:clamp(26px,3.0vw,36px); line-height:1.16; letter-spacing:-.018em; margin:0 0 var(--s6); } #top h3,#top #wrap_all .all_colors h3{ font-size:24px; line-height:1.28; letter-spacing:-.012em; margin:var(--s9) 0 var(--s3); } #top .bdw-karte h3,#top .bdw-werte h3,#top .bdw-ablauf h3,#top .bdw-passt h3, #top .bdw-preisanker h3,#top .avia_textblock > h3:first-child{ margin-top:0; } #top h4,#top #wrap_all .all_colors h4{ font-size:19px; line-height:1.32; letter-spacing:0; margin:0 0 var(--s3); } /* Unterschneidung erst ab 28 px — darunter macht sie den Satz nur enger, nicht besser */ #top #wrap_all .all_colors h3,#top #wrap_all .all_colors h4, #top .bdw-karte h3,#top .bdw-werte h3,#top #wrap_all .bdw-ablauf h3{ letter-spacing:0; } /* Mehrzeilige Ueberschriften gleichmaessig umbrechen */ #top h1,#top h2,#top #wrap_all .bdw-kopf h2{ text-wrap:balance; } /* ACHTUNG: die Startseite besteht fast nur aus av_codeblock — die zusammengesetzten Bausteine laufen bewusst nicht ueber Enfolds Spaltenmodell. Ohne den Codeblock im Selektor waren ALLE Fliesstextregeln des Child-Themes auf der Startseite tot: der Absatzabstand kam mit gemessenen 15,3 px unbemerkt aus Enfold, und die 66-ch-Grenze griff nirgends. Die spezielleren Klassenregeln weiter unten (.bdw-vorspann, .bdw-mikro, .bdw-karte p, .bdw-werte p, .bdw-ablauf p) gewinnen weiterhin. */ #top .avia_textblock, #top .avia_textblock p, #top .avia_codeblock > p, #top .bdw-medien-text p{ color:var(--bdw-text); font-size:18px; line-height:1.65; } #top .avia_textblock p, #top .avia_codeblock > p, #top .bdw-medien-text p{ margin:0 0 var(--s6); max-width:var(--mass); } #top .avia_textblock p:last-child, #top .avia_codeblock > p:last-child, #top .bdw-medien-text p:last-child{ margin-bottom:0; } #top .avia_textblock li{ margin-bottom:var(--s4); } /* Vorspann: eine Stufe ueber dem Fliesstext, nie so laut wie eine Ueberschrift */ #top .bdw-vorspann,#top .bdw-vorspann p{ font-size:21px; line-height:1.5; color:var(--bdw-tinte); max-width:58ch; } #top .bdw-mikro,#top .bdw-klein{ font-size:15px; line-height:1.5; color:var(--bdw-leise); margin:var(--s3) 0 0; } /* Etikett ueber der Ueberschrift — ersetzt die geloeschte Zierlinie. Steht in der Titelschrift, nicht in Open Sans: Open-Sans-Versalien sind breit und rund, das ist die Loesung, die jede Vorlage benutzt. Familjens Versalien stehen 9,8 % enger, deshalb .08em statt .09em Laufweite. */ /* Die beiden Absatz-Fassungen stehen mit in der Liste, seit die Etiketten als

im Textblock stehen (Auftrag 05.08.2026 13:36). `#top .avia_textblock p` traegt einen Typselektor mehr und wuerde sonst Schriftgrad, Zeilenhoehe UND Abstand ueberschreiben — gemessen 18 statt 14 px. */ #top .bdw-eyebrow, #top .avia_textblock p.bdw-eyebrow, #top .avia_codeblock > p.bdw-eyebrow{ display:block; font-family:var(--font-titel); font-size:14px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--bdw-moos); margin:0 0 var(--s3); max-width:none; /* 29,7 px = 18 px x 1,65, also der Wert, den das Etikett als im Codeblock GEERBT hat. `inherit` genuegt hier NICHT: eine einheitenlose Zeilenhoehe vererbt sich als FAKTOR, nicht als Laenge — 1,65 x 14 px waeren 23,1 px, und der Hero wuerde um 6,6 px kuerzer. Gemessen am Codeblock. */ line-height:29.7px; } #top .avia_textblock a{ text-decoration:underline; text-underline-offset:.15em; } #top .avia_textblock a:hover{ text-decoration-thickness:2px; } /* Eine einzige Lesebreite, egal ob links oder mittig gesetzt */ #top .bdw-schmal{ max-width:var(--mass); } #top .bdw-mitte .bdw-schmal{ margin-left:auto; margin-right:auto; } /* ========================================================================= 3 Raster und Sektionsrhythmus Naht = max(unten_A, oben_B). Enfold setzt beide Polster, deshalb steht hier jeweils die HALBE Zielgroesse. ========================================================================= */ /* Die Naht MUSS groesser sein als die Fuge zwischen zwei Bloecken derselben Sektion (40 px). Vorher war die kleinste Naht mit 48 px praktisch gleich gross — dadurch gab es faktisch nur EINE Abstandsstufe, und genau das liest sich als "gedrungen": es fehlt nicht Weissraum, es fehlt eine Rangordnung im Weissraum. */ #top .bdw-eng .content{ padding-top:var(--s7); padding-bottom:var(--s7); } /* Naht 64 */ #top .bdw-normal .content{ padding-top:var(--s9); padding-bottom:var(--s9); } /* Naht 96 */ #top .bdw-weit .content{ padding-top:var(--s11); padding-bottom:var(--s11); } /* Naht 160 */ /* Anschluss: haengt direkt an der Sektion darueber, keine Naht nach oben. */ #top .bdw-anschluss .content{ padding-top:0; } /* Vollbreite Baender: kein Container, kein Radius, keine Polsterung. Bewusst ohne 100vw-Rechnung — die Sektion ist ohnehin fensterbreit. */ #top #wrap_all .bdw-vollband > .container{ max-width:none !important; width:100%; padding-left:0; padding-right:0; margin:0; } #top #wrap_all .bdw-vollband .content{ padding-left:0; padding-right:0; width:100%; } /* Abschnittskopf: eine Form fuer alle. Die Stufung war 12 / 16 / 40 px — drei Werte, die man nicht auseinanderhaelt. Jetzt 8 / 20 / 48, also 1 : 2,5 : 6. */ #top .bdw-kopf{ margin:0 0 var(--s9); max-width:var(--mass); } #top .bdw-kopf.bdw-mitte{ margin-left:auto; margin-right:auto; text-align:center; } #top #wrap_all .bdw-kopf h2{ margin-bottom:var(--s5); } /* Das Etikett erbt sonst die Zeilenhoehe 1,65 und schwebt in einer 30-px-Box */ #top .bdw-kopf .bdw-eyebrow{ line-height:1.3; margin:0 0 var(--s2); } #top .bdw-kopf p{ font-size:19px; line-height:1.6; color:var(--bdw-leise); margin:0; max-width:58ch; } #top .bdw-kopf.bdw-mitte p{ margin-left:auto; margin-right:auto; } /* Eigene Raster in den Codebloecken — verlaesslicher als Enfold-Spalten */ #top .bdw-raster{ display:grid; gap:var(--s6); align-items:stretch; } #top .bdw-raster-2{ grid-template-columns:repeat(2,1fr); } #top .bdw-raster-3{ grid-template-columns:repeat(3,1fr); } #top .bdw-raster-4{ grid-template-columns:repeat(4,1fr); } /* ========================================================================= 4 Kopfbereich ========================================================================= */ #top .bdw-topbar{ font-size:14px; letter-spacing:.01em; } #top .phone-info a{ color:inherit; text-decoration:none; } #top .phone-info a:hover{ text-decoration:underline; } #header .logo img,#header .logo svg{ max-height:62px; width:auto; padding:var(--s1) 0; } #top #header .logo a{ display:flex; align-items:center; height:100%; } /* Die Vorlage hatte das Logo per Quick-CSS ausgeblendet */ #top .logo{ visibility:visible !important; } #top .av-main-nav-wrap,#top .main_menu{ white-space:nowrap; } #top #header .logo{ box-sizing:content-box; padding-right:var(--s9); } /* Ohne Schrumpfen steht der Kopf dauerhaft in voller Hoehe. Enfolds "slim" gibt 88 px vor (header_custom_size greift nur bei header_size='custom'); mit der Telefonzeile waren das 121 px = 13 % jedes Bildschirms, und genau die fehlten dem Hero. 76 px ergeben mit der Telefonzeile die 107 px, mit denen --kopf und die Hero-Hoehe rechnen. */ #top #header_main .container, #top #header .logo, #top #header .logo a, #top #header .main_menu, #top #header .av-main-nav > li > a, #top #header .av-burger-menu-main > a{ height:76px !important; } #top #header .av-main-nav > li > a{ line-height:76px !important; } /* Acht Punkte auf der Hauptebene. Enfolds Vorgabe sind 13 px Polster links und rechts; die Rechnung fuehrt der Kopf mit sich: Satzbreite 1.100 (Container 1.200 minus 2x50 px Rand), davon Logo 54 px und die Fuge zum ersten Wort — dem Menue bleiben 1.048 px. AENDERUNG 05.08.2026: aus "Start" (45 px) wurde "Balanced DogWork" (149 px), dazu kam "Kundenbereich" (121 px); dafuer sind "Über mich" und "Kontakt" ins Untermenue gewandert. Unterm Strich 1.069 px bei 10 px Polster — 21 px zu viel, gemessen brach die Zeile und "Ersttermin anfragen" stand unter dem Kopf. 8 px ergaben 1.037 px — dann standen aber nur 9 px zwischen Logobild und erstem Wort (das Menue ist rechtsbuendig, es rutscht in das Logopolster). 7 px ergeben 1.021 px: 25 px Fuge hinter dem Logo, 14 px zwischen zwei Beschriftungen. Wer hier Punkte ergaenzt, muss neu messen (tools/messpunkt.mjs, analyse/messung/v11-menue-*.json). */ #top #header .av-main-nav > li > a{ padding-left:7px; padding-right:7px; } /* Umbruchpunkt fuer den Burger. Er ist GEMESSEN, nicht gewaehlt: der Container ist auf 1.200 px gedeckelt, die Satzbreite betraegt darueber also IMMER 1.100 px — mehr Fensterbreite bringt dem Menue nichts. Unterhalb von 1.200 px schrumpft sie mit dem Fenster, und die Fuge hinter dem Logo geht gegen null. Deshalb Burger unter 1.200 px (vorher unter 1.121 px, als das Menue noch fuenf Punkte hatte). Wer hier Punkte ergaenzt, muss neu messen. */ @media only screen and (min-width:768px) and (max-width:1199px){ .responsive.html_mobile_menu_tablet #top .av-burger-menu-main{ display:block; } .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item{ display:none; } .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special{ display:block; } .responsive #top #wrap_all .av_mobile_menu_tablet .main_menu{ top:0; left:auto; right:0; display:block; } #top .av-burger-menu-main{ display:flex; align-items:center; height:100%; } } #top #av-burger-menu-ul li a{ white-space:normal; } /* Das Menue laeuft in der Titelschrift (Auftrag: "eine passende fuer Menue und Ueberschriften"). Enfold kann die Familie nicht selbst liefern — Familjen ist kein registriertes avia_custom_type_fonts-Paket —, also hier nachziehen, in derselben Selektorstruktur wie die Ueberschriften: das dynamische CSS schreibt mit zwei IDs, weniger spezifische Regeln verlieren immer. */ #top #wrap_all .av-main-nav > li > a, #top #wrap_all .av-main-nav > li > a .avia-menu-text, #top #wrap_all #av-burger-menu-ul a{ font-family:var(--font-titel); font-weight:600; letter-spacing:.005em; } /* Die Menue-Schaltflaeche traegt dieselbe Zusage wie der Hero-CTA. Sie bleibt Open Sans: ein Knopf ist eine Anweisung, kein Titel. */ #top #wrap_all .av-main-nav > li.bdw-menu-cta > a .avia-menu-text, #top .av-main-nav > li.bdw-menu-cta > a .avia-menu-text{ background:var(--bdw-gold); color:var(--bdw-tinte); font-family:var(--font-sans); font-weight:700; letter-spacing:0; padding:9px var(--s4); border-radius:var(--r-s); } #top .av-main-nav > li.bdw-menu-cta > a:hover .avia-menu-text{ background:var(--bdw-gold-tief); } #top .av-main-nav > li.bdw-menu-cta > a{ padding-left:var(--s2); padding-right:var(--s2); } #top #av-burger-menu-ul li.bdw-menu-cta > a{ color:var(--bdw-gold-hell) !important; font-weight:700; } /* Aktuelle Seite auch im Burger-Menue markieren. Am Schreibtisch trug der aktive Punkt schon die 2-px-Linie darunter; im Ausklapper war er Wert fuer Wert von den acht anderen nicht zu unterscheiden — auf dem Handy wusste man im Menue also nicht, wo man steht. BEWUSST ein Goldbalken links und KEINE goldene Schrift: gold ist im Ausklapper schon vergeben, naemlich an die Schaltflaeche "Ersttermin anfragen". Zwei goldene Zeilen mit verschiedener Bedeutung waeren wieder der Fehler, der die Farbe entwertet. `inset`-Schatten statt Rahmen, damit der Text nicht verrutscht. SPEZIFITAET: Enfold setzt die Farbe hier mit `#top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a` — drei IDs. Eine kuerzere Regel verliert lautlos (erster Versuch tat genau das). */ #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li.current-menu-item > a{ box-shadow:inset 3px 0 0 var(--bdw-gold-hell); } /* ========================================================================= 5 Schaltflaechen — drei Raenge, ueberall gleich angewandt ========================================================================= */ #top .avia-button{ font-family:var(--font-sans); font-size:17px; font-weight:700; letter-spacing:.01em; border-radius:var(--r-s); padding:16px 30px; border:0; min-height:54px; display:inline-flex; align-items:center; justify-content:center; transition:background-color .14s ease, box-shadow .14s ease, color .14s ease; } /* Rang 1 — Gold. Nur Erstgespraech und Ersttermin. */ #top .avia-button.bdw-cta, #top .avia-button.bdw-cta:hover{ color:var(--bdw-tinte) !important; } #top .avia-button.bdw-cta{ background-color:var(--bdw-gold) !important; } #top .avia-button.bdw-cta:hover{ background-color:var(--bdw-gold-tief) !important; } /* Rang 2 — Umriss. Gleiche Hoehe, keine Flaeche. bdw-cta2 ist der Altname aus der ersten Fassung; er hatte nie eine Regel und liess die Knoepfe als graue Kaesten zurueckfallen. Deshalb beide. */ #top .avia-button.bdw-zweit, #top .avia-button.bdw-cta2{ background-color:transparent !important; color:var(--bdw-tinte) !important; box-shadow:inset 0 0 0 2px var(--bdw-tinte); } #top .avia-button.bdw-zweit:hover, #top .avia-button.bdw-cta2:hover{ background-color:rgba(58,47,40,.07) !important; } #top .bdw-hero .avia-button.bdw-zweit, #top .bdw-hero .avia-button.bdw-cta2, #top .av-dark-bg .avia-button.bdw-zweit{ color:#fff !important; box-shadow:inset 0 0 0 2px rgba(255,255,255,.72); } #top .bdw-hero .avia-button.bdw-zweit:hover, #top .bdw-hero .avia-button.bdw-cta2:hover{ background-color:rgba(255,255,255,.14) !important; } /* Rang 3 — Textlink mit Pfeil. Kein Knopfkoerper. */ #top .bdw-drittlink{ display:inline-block; font-size:16px; font-weight:700; color:var(--bdw-moos); text-decoration:underline; text-underline-offset:.2em; } #top .bdw-drittlink::after{ content:" \2192"; } #top .bdw-hero .bdw-drittlink,#top .av-dark-bg .bdw-drittlink{ color:var(--bdw-gold-hell); } #top .av_button_row .avia-button{ margin:var(--s2) var(--s3) var(--s2) 0 !important; } #top .bdw-handlung{ margin:var(--s6) 0 0; } #top .bdw-handlung .bdw-mikro{ margin-top:var(--s3); } /* Gestapelte Knopfgruppe: beide Knoepfe so breit wie der breitere von beiden. AUFTRAG 04.08. 23:08 (/kontakt/): "Button 'Zum Formular' selbe Breite wie den darueber." In der halben Spalte (526 px) passen 390 + 182 px ohnehin nicht nebeneinander — sie standen also schon untereinander, nur unterschiedlich breit, was wie ein Versehen aussieht. Ein Raster mit EINER max-content-Spalte loest das ohne feste Pixelbreite: die Spalte ist so breit wie der laengste Knopf, beide Knoepfe fuellen sie. NUR hier — im Hero und im Abschlussband stehen dieselben zwei Knoepfe nebeneinander und sollen es bleiben. */ #top .bdw-handlung-block{ display:grid; grid-template-columns:minmax(0,max-content); gap:var(--s3); } #top .bdw-handlung-block .bdw-mikro{ margin-top:0; } /* ========================================================================= 6 Hero ========================================================================= */ #top .bdw-hero{ position:relative; overflow:hidden; } #top .bdw-hero .entry-content-wrapper{ text-align:left; } /* Das Hintergrundbild muss den Hero KOMPLETT ausfuellen (Auftrag 04.08.2026). Enfold liefert dafuer `repeat='stretch'` -> Klasse .avia-full-stretch. Die Regel hier ist der Guertel zum Hosentraeger: sie greift auch dann, wenn eine Sektion versehentlich ohne 'stretch' angelegt wird. */ #top .bdw-hero,#top .bdw-hero .av-parallax-inner{ background-size:cover !important; background-position:center 42% !important; background-repeat:no-repeat !important; } /* Hoehe: Enfold schreibt sie als INLINE-Stil (`style="height:720px"`) an den Container. Ein fester Pixelwert ist auf einem 13-Zoll-Notebook zu hoch und auf einem grossen Schirm zu niedrig; deshalb hier ueberschrieben. `display:table` von Enfold bleibt — die senkrechte Mitte haengt daran. */ #top .bdw-hero > .container{ position:relative; z-index:2; height:auto !important; min-height:clamp(660px, calc(100svh - var(--kopf)), 880px); } /* Abdunklung waagerecht, damit die Hunde rechts im Bild bleiben. Auf dem Handy wird das unten durch ein senkrechtes Rezept ersetzt. */ #top .bdw-hero::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(100deg, rgba(26,20,17,.90) 0%, rgba(26,20,17,.82) 34%, rgba(26,20,17,.55) 58%, rgba(26,20,17,.18) 82%, rgba(26,20,17,.10) 100%), linear-gradient(to bottom, rgba(26,20,17,.36) 0%, rgba(26,20,17,0) 32%); } /* Enfold setzt Ueberschriftenfarben ueber `#top #wrap_all .all_colors h1` — ZWEI IDs. Weniger spezifische Regeln verlieren, deshalb hier dieselbe Struktur. */ #top #wrap_all .bdw-hero, #top #wrap_all .bdw-hero p, #top #wrap_all .bdw-hero .avia_textblock, #top #wrap_all .bdw-hero h1, #top #wrap_all .bdw-hero h2, #top #wrap_all .bdw-hero h3{ color:#fff; } #top #wrap_all .bdw-hero .bdw-eyebrow{ color:var(--bdw-gold-hell); } #top #wrap_all .bdw-hero .bdw-hero-sub{ color:#f4f1ea; } #top #wrap_all .bdw-hero .bdw-mikro{ color:#ded8cd; } #top #wrap_all .bdw-hero h1{ font-size:clamp(31px,4.2vw,52px); line-height:1.08; margin:0 0 var(--s5); max-width:16em; text-shadow:0 1px 10px rgba(20,15,12,.55); } #top .bdw-hero .bdw-hero-sub{ font-size:clamp(18px,1.7vw,21px); line-height:1.55; max-width:34em; text-shadow:0 1px 8px rgba(20,15,12,.5); } /* Die Breite im Hero regeln die Bauteile selbst: h1 16em, .bdw-hero-sub 34em. Hier stand bis 05.08.2026 zusaetzlich `.bdw-hero .avia_textblock{max-width:640px}` — eine Regel, die NUR den einen Hero traf, der damals schon ein Textblock war. Seit die Hero-Koepfe durchgaengig Textbloecke sind (Auftrag 13:36), haette sie die Ueberschrift auf allen Seiten umbrechen lassen (gemessen: "Einzeltraining für Hund und Mensch" zweizeilig statt einzeilig). */ #top .bdw-hero .av_button_row{ max-width:none; } /* Wiedererkennungsanker im Hero: kurze Stichzeilen statt eines langen Absatzes */ /* Haken und Kreuze standen an FUENF Stellen der Startseite, 18 Zeilen insgesamt. Das Zeichen bleibt genau dort, wo es etwas bedeutet: beim Vergleich "Das passt / Das passt nicht". Hier traegt stattdessen eine senkrechte Goldlinie — aus einem generischen Symbol, das fuenfmal vorkommt, wird ein Hauszeichen, das zweimal vorkommt. */ #top .bdw-hero-punkte{ list-style:none; margin:var(--s6) 0 0; padding:0 0 0 var(--s4); border-left:2px solid rgba(217,181,58,.55); } #top .bdw-hero-punkte li{ position:relative; padding-left:0; margin:0 0 var(--s2); font-size:17px; line-height:1.5; color:#f4f1ea; text-shadow:0 1px 8px rgba(20,15,12,.5); } #top .bdw-hero-punkte li::before{ content:none; } /* Seitenkopf der Unterseiten — mit Foto, ohne den Schattenrest der Startseite */ #top .bdw-hero-klein::before{ background: linear-gradient(100deg, rgba(26,20,17,.86) 0%, rgba(26,20,17,.74) 40%, rgba(26,20,17,.42) 68%, rgba(26,20,17,.20) 100%), linear-gradient(to bottom, rgba(26,20,17,.34) 0%, rgba(26,20,17,0) 40%); } #top #wrap_all .bdw-hero-klein h1{ font-size:clamp(30px,3.6vw,44px); } /* ========================================================================= 7 Die Zeile unter dem Hero — O-Ton statt Kennzahlband Vorher: vier gleich breite, zentrierte Felder mit senkrechten Haarlinien auf dunkler Flaeche. Genau das Widget, das in jedem Baukasten steckt. Die drei Merkmale, die es verraten, sind hier bewusst alle weg: gleich breite Spalten, Zentrierung, Trennlinien. Ordnung macht die Typografie. ========================================================================= */ /* Das Band unter dem Hero trug frueher `bdw-anschluss` und damit oben 0 px Polster: der Satz beruehrte die Unterkante des Hero-Fotos, waehrend unten 32 px standen (gemessen). Das war die Rueckmeldung "der Abstand in der Hoehe unter dem Hero stimmt nicht". `bdw-anschluss` gehoert zu den BILDbaendern, die bewusst nahtlos anschliessen — ein Textband braucht Luft, und zwar gleich viel oben wie unten. */ #top .bdw-stimmzeile-band .content{ padding-top:var(--s8); padding-bottom:var(--s8); } #top .bdw-stimmzeile{ display:grid; grid-template-columns:1fr auto; gap:var(--s9); align-items:center; text-align:left; } #top .bdw-stimmzeile-satz > p:first-child{ font-family:var(--font-titel); font-weight:600; font-size:22px; line-height:1.45; color:var(--bdw-tinte); max-width:52ch; margin:0; text-wrap:pretty; } #top .bdw-stimmzeile-wer{ font-size:15px; line-height:1.5; color:var(--bdw-leise); margin:var(--s2) 0 0; } #top .bdw-stimmzeile-score{ display:block; text-align:right; text-decoration:none; white-space:nowrap; } /* Gold traegt hier nur die Sterne, nicht den Zahlwert — vorher war die einzige pruefbare Angabe kleiner gesetzt als die drei Behauptungen daneben. */ #top .bdw-stimmzeile-score .bdw-sterne{ display:block; color:var(--bdw-gold); font-size:15px; letter-spacing:2px; margin-bottom:2px; } #top .bdw-stimmzeile-score .bdw-score-text{ font-size:15px; color:var(--bdw-moos); text-decoration:underline; text-underline-offset:.2em; } #top .bdw-stimmzeile-score:hover .bdw-score-text{ color:var(--bdw-moos-tief); } /* ========================================================================= 8 Karten — nur wo sie etwas leisten Eine Karte ist gerechtfertigt, wenn sie (a) zu einem eigenen Ziel fuehrt oder (b) mit gleichrangigen Geschwistern verglichen wird. ========================================================================= */ #top .bdw-karte{ display:flex; flex-direction:column; position:relative; background:var(--bdw-weiss); border-radius:var(--r-m); box-shadow:var(--schatten); overflow:hidden; transition:box-shadow .16s ease; } #top .bdw-karte:hover{ box-shadow:var(--schatten-hover); } #top .bdw-karte-bild{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--bdw-sand); } #top .bdw-karte-bild img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:0; transition:transform .4s ease; } #top .bdw-karte:hover .bdw-karte-bild img{ transform:scale(1.03); } #top .bdw-karte-inhalt{ display:flex; flex-direction:column; flex:1 1 auto; padding:var(--s7); } /* 20 px wie jeder andere Kachelkopf. Vorher 21 px — gleichrangige Kachelkoepfe trugen damit drei Groessen (Ablauf/Vergleich 20, Angebote 21, Werte 22), und ein Unterschied von einem Pixel traegt keine Bedeutung, den liest niemand als Rang. Auf dem Handy fielen ohnehin alle drei auf 20 px zusammen. */ #top #wrap_all .bdw-karte h3{ font-size:20px; margin:0 0 var(--s1); } #top .bdw-karte h3 a{ text-decoration:none; color:var(--bdw-tinte); } #top .bdw-karte h3 a:hover{ color:var(--bdw-moos); text-decoration:underline; } #top .bdw-karte .bdw-preis{ display:block; font-size:15px; font-weight:700; color:var(--bdw-moos); margin:0 0 var(--s3); } #top .bdw-karte p{ font-size:16px; line-height:1.6; color:var(--bdw-text); margin:0; max-width:var(--mass-eng); } /* Die Fusszeile aller Karten einer Reihe steht auf einer Linie */ #top .bdw-karte .bdw-karte-fuss{ margin-top:auto; padding-top:var(--s5); } /* Empfehlungskarte — genau eine je Reihe */ #top .bdw-karte.bdw-empfohlen{ box-shadow:var(--schatten), inset 0 0 0 2px var(--bdw-gold); } /* Das Etikett sitzt absolut, sonst kippt es die Preisachse der ganzen Reihe */ #top .bdw-badge{ position:absolute; top:var(--s4); right:var(--s4); z-index:2; background:var(--bdw-gold); color:var(--bdw-tinte); font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:5px 10px; border-radius:var(--r-s); margin:0; } /* Das Etikett ist bis zu 142 px breit (gemessen an "INTENSIVSTE FORM"). Ohne Freiraum laeuft ein langer Titel darunter — auf /intensivbegleitung/ stand "Klartext & Konsequenz" unter dem Etikett. Der Freiraum steht am Titel; damit die Preise trotzdem auf einer Linie bleiben, sind in einer Preisreihe generell ZWEI Titelzeilen reserviert. */ #top .bdw-preise .bdw-karte.bdw-empfohlen h3{ padding-right:166px; } /* Preistafeln: gleiche Kopfhoehe, damit die Preise auf einer Linie stehen */ #top .bdw-preiskarte .bdw-preis-gross{ font-family:var(--font-titel); font-size:32px; font-weight:600; color:var(--bdw-moos); line-height:1.1; margin:0 0 var(--s3); display:block; } /* ZWEI Zeilen reserviert, nicht eine: sonst sitzt der Preis der Karte mit dem Etikett 26 px tiefer als der ihrer Nachbarn (gemessen 2.416 gegen 2.390). Die zwei Zeilen kosten in Karten mit kurzem Titel 26 px Luft — das ist der Preis dafuer, dass die Preisachse einer Reihe steht. */ #top #wrap_all .bdw-preiskarte h3{ min-height:2.56em; } #top .bdw-preis,#top .bdw-preis-gross,#top .bdw-preisanker-zahl{ font-variant-numeric:tabular-nums; } /* Angebotsraster: fuenf Karten in einem Dreierraster liessen eine leere Zelle von 435 px stehen — das liest sich wie ein Fehler. Sechs Spuren, jede Karte zwei breit, die letzte Reihe um eine Spur versetzt = mittig. */ #top .bdw-angebote{ grid-template-columns:repeat(6,1fr); } #top .bdw-angebote > *{ grid-column:span 2; } #top .bdw-angebote > *:nth-child(4){ grid-column:2 / span 2; } #top .bdw-angebote > *:nth-child(5){ grid-column:4 / span 2; } /* Preisanker: einmal gross und mit Gegenwert, statt dreimal beilaeufig im Kleintext */ #top .bdw-preisanker{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--s7); margin-top:var(--s8); padding:var(--s7); background:var(--bdw-weiss); border-radius:var(--r-m); box-shadow:var(--schatten); } #top .bdw-preisanker-zahl{ font-family:var(--font-titel); font-size:52px; font-weight:600; line-height:1; color:var(--bdw-moos); white-space:nowrap; } #top #wrap_all .bdw-preisanker h3{ font-size:20px; margin:0 0 var(--s2); } #top .bdw-preisanker p{ font-size:16px; line-height:1.6; margin:0; max-width:62ch; color:var(--bdw-text); } #top .bdw-preisanker .avia-button{ margin:0 !important; white-space:nowrap; } /* Zwischenschritt am Entscheidungspunkt — kein zweiter Hero-Block, nur ein Weg. AUFTRAG 04.08. 23:08: "Der Button nach '…' ist nicht zentriert" (Startseite) und viermal "'Diesen Termin anfragen'-Button zentrieren". Beides ist DIESELBE Stelle. Vorher eine Flexzeile mit `flex:1 1 20em` auf dem Satz: der Knopf landete dort, wo der Satz aufhoerte, also je nach Textlaenge woanders — gemessen Knopfmitte 813 px auf der Startseite, 894 px auf /einzeltraining/, Containermitte 720 px. Jetzt drei Spalten 1fr auto 1fr: der Knopf steht auf JEDER Seite exakt mittig, unabhaengig davon, wie lang der Satz links ist. Der Satz bekommt dadurch nur noch die halbe Restbreite und laeuft zwei- bis dreizeilig um — das ist der Preis fuer eine Mitte, die ueber alle sechs Vorkommen dieselbe ist. */ #top .bdw-zwischen-cta{ margin-top:var(--s9); padding-top:0; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; column-gap:var(--s6); row-gap:var(--s4); } #top .bdw-zwischen-text{ margin:0; font-size:18px; line-height:1.5; color:var(--bdw-tinte); font-family:var(--font-titel); } #top .bdw-zwischen-cta .avia-button{ margin:0 !important; justify-self:center; } #top .bdw-zwischen-cta .bdw-drittlink{ justify-self:end; text-align:right; } /* Abgesetzter Zwischenschritt (Auftrag 04.08.): "Kommt dir das bekannt vor?" ist der Einstieg in den Ersttermin und soll als solcher erkennbar sein. Umgesetzt mit den Mitteln, die das Haus schon hat: eine Ebene hoeher auf Sand und die 2-px-Moosoberlinie der Werte. Kein Radius — mit der Oberlinie sieht ein abgerundeter Kasten wie ein Reiter aus; kein Goldrahmen — Gold ist der Handlung vorbehalten. So ist es abgegrenzt, ohne ein neues Idiom zu erfinden. */ #top .bdw-zwischen-cta.bdw-abgesetzt{ margin-top:var(--s10); padding:var(--s7) var(--s8); background:var(--bdw-sand); border-top:2px solid var(--bdw-moos); gap:var(--s5) var(--s7); } #top .bdw-abgesetzt .bdw-zwischen-text{ font-size:19px; } /* ------------------------------------------------------------------------- 8b Das Band, in dem die Zeile ALLEIN steht AUFTRAG 05.08. 00:26: "Von der Zeile im Screenshot gibt es mehrere auf der Seite, alle haben das selbe Problem: der Abstand oben ist groesser als unten." Der Fehler liegt NICHT im Sektionspolster — das ist oben wie unten gleich. .bdw-zwischen-cta traegt margin-top (Desktop 48, Handy 32). Das ist richtig, solange die Zeile UNTER anderem Inhalt derselben Sektion steht (Startseite dreimal, unter jeder Preistafel): dort ist es ihr Abstand zum Block darueber. Steht sie als EINZIGER Inhalt in einem eigenen Band, addiert sich derselbe Wert auf das Polster — und nur oben. Gemessen (tools/polster.mjs, Tinte statt Kasten, oben wie unten DERSELBE Goldknopf): 1440 px oben 80 unten 32 +48 (intensivbegleitung, onlinecoaching, 768 px oben 82 unten 32 +50 welpenkompass, seminare — vier Baender, 390 px oben 54 unten 35 +19 ueberall derselbe Wert) Deshalb bekommt genau dieses Band eine eigene Klasse (make-content.py, beide Aufrufstellen) und die Zeile darin keinen Aussenabstand mehr. Ein struktureller Selektor (:first-child o. ae.) waere hier falsch: die Zeile ist auch am ENDE einer Sektion oft das letzte Kind, und dann braucht sie den Abstand. bdw-normal (48/48) statt bdw-eng (32/32): mit 32 stuende die zweizeilige Vorzeile mit ihren Unterlaengen ("Praxisseminar") fast auf der Bandkante — gegenuebergestellt in analyse/bilder/v10-probe/. 48 ist ausserdem der Wert jeder anderen Inhaltssektion, das Band faellt damit in den Hausrhythmus: Naht nach oben wie unten 96 px statt vorher 80/80 um eine verschobene Zeile. ------------------------------------------------------------------------- */ #top .bdw-cta-band .bdw-zwischen-cta{ margin-top:0; } /* ========================================================================= 9 Satz auf der Flaeche — was frueher unnoetig Karte war ========================================================================= */ /* Werte: vierspaltiger Satz mit Oberlinie, keine Kaesten. Die Reihe stiess vorher mit gemessenen 0 px an den Block darueber — die dichteste Stelle der ganzen Seite. margin-left ist einer von genau DREI bewussten Bruechen der durchgehenden linken Kante (die anderen: Portraet randabfallend, Stimmen versetzt); mehr Ausnahmen waeren kein Rhythmus mehr, sondern Unruhe. */ #top .bdw-werte{ margin-top:var(--s9); gap:var(--s8); } /* Der Einzug ist ein DESKTOP-Bruch — auf dem Handy waere er nur ein verrutschter Block. Er gilt nur fuer die freistehende Reihe (/ueber-mich/), nicht fuer die in den Jennifer-Block eingeruecke Fassung. */ @media only screen and (min-width:1025px){ #top .bdw-werte:not(.bdw-werte-inline){ margin-left:var(--s10); } } #top .bdw-werte > div{ border-top:2px solid var(--bdw-moos); padding-top:var(--s5); } #top #wrap_all .bdw-werte h3{ font-size:20px; margin:0 0 var(--s2); } #top .bdw-werte p{ font-size:16px; line-height:1.6; color:var(--bdw-text); margin:0; } /* Auftrag 04.08.: die vier Werte stehen nicht mehr als eigene Zeile unter dem Block, sondern IN der Textspalte neben dem Portraet — sie erlaeutern den Absatz "Wie ich arbeite" direkt darueber. Zwei Spuren statt vier, kleinere Grade, engere Fugen: eine Textspalte traegt keine vierspaltige Tabelle. */ #top .bdw-werte-inline{ margin-top:var(--s7); margin-left:0; gap:var(--s6) var(--s7); } #top .bdw-werte-inline > div{ padding-top:var(--s3); } #top #wrap_all .bdw-werte-inline h3{ font-size:17px; } #top .bdw-werte-inline p{ font-size:15px; line-height:1.55; color:var(--bdw-leise); } #top .bdw-medien .bdw-medien-mehr{ margin:var(--s7) 0 0; } /* Passt / passt nicht: eine Flaeche, zwei Spalten, eine Trennlinie */ #top .bdw-passt{ display:grid; grid-template-columns:1fr 1fr; gap:0; background:var(--bdw-weiss); border-radius:var(--r-m); box-shadow:var(--schatten); overflow:hidden; } #top .bdw-passt > div{ padding:var(--s8); } /* Die zweite Haelfte leicht abgesetzt: auf dem Handy stehen beide nie gleichzeitig im Bild, dann ist die Flaeche der einzige Hinweis, in welcher Haelfte man liest. */ #top .bdw-passt > div:last-child{ background:#faf8f4; } #top .bdw-passt > div + div{ border-left:1px solid var(--bdw-linie); } #top #wrap_all .bdw-passt h3{ font-size:20px; margin:0 0 var(--s5); } /* Zeichen: eine Regel fuer Haken und Kreuz — gleiche Staerke, gleiche Groesse. Das Zeichen haengt im Rand, der Text steht auf der Kante der Ueberschrift. */ #top .bdw-haken ul,#top .bdw-kreuz ul{ list-style:none; margin:0; padding:0; } #top .bdw-haken li,#top .bdw-kreuz li{ position:relative; padding-left:30px; margin:0 0 var(--s4); font-size:16px; line-height:1.6; max-width:46ch; } #top .bdw-haken li::before,#top .bdw-kreuz li::before{ content:""; position:absolute; left:0; top:.3em; width:20px; height:20px; background-repeat:no-repeat; background-position:center; background-size:20px 20px; } #top .bdw-haken li::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234f5535' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E"); } #top .bdw-kreuz li::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%237d6e61' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 5l10 10M15 5L5 15'/%3E%3C/svg%3E"); } /* Ablauf: drei Schritte als Strecke, nicht als drei einsame Punkte */ /* Ablauf: nummerierte Kreise mit Verbindungslinie und zentriertem Text sind das Standardmotiv jeder Baukastenvorlage. Die Ziffer bleibt — als ruhiges grosses Zeichen in der Marke, ohne Kreis, ohne Linie, linksbuendig. Die dritte Spalte ist breiter, weil ihr Text ohnehin der laengste ist. */ #top .bdw-ablauf{ grid-template-columns:1fr 1fr 1.22fr; gap:var(--s10); } #top .bdw-ablauf > div{ position:relative; } #top .bdw-ablauf .bdw-nr{ display:block; margin:0 0 var(--s2); font-family:var(--font-titel); font-size:44px; font-weight:600; line-height:1; color:var(--bdw-moos); opacity:.34; } #top #wrap_all .bdw-ablauf h3{ font-size:20px; margin:0 0 var(--s2); text-align:left; } #top .bdw-ablauf p{ font-size:16px; line-height:1.6; margin:0; text-align:left; max-width:44ch; } /* ========================================================================= 10 Bewertungsband — volle Seitenbreite, der Beleganker der Seite ========================================================================= */ #top .bdw-bewertungen{ background:var(--bdw-moos); } #top .bdw-bewertungen .bdw-band-innen{ max-width:1240px; margin:0 auto; padding:0 var(--s9); } #top .bdw-bewertungen .bdw-score{ text-align:center; margin:0 0 var(--s8); } #top .bdw-bewertungen .bdw-sterne{ display:block; color:var(--bdw-gold-hell); font-size:30px; letter-spacing:4px; line-height:1; margin-bottom:var(--s3); } #top .bdw-bewertungen .bdw-score-zahl{ display:block; font-family:var(--font-titel); font-size:clamp(28px,3vw,38px); font-weight:600; color:#fff; line-height:1.15; } #top .bdw-bewertungen .bdw-score-zusatz{ display:block; font-size:16px; color:var(--bdw-hell); margin-top:var(--s2); } /* auto-fit statt fester Dreiteilung: es gibt heute zwei belegte Stimmen, nicht drei (erfundene Platzhalternamen sind raus, siehe texte.STIMMEN). Mit repeat(3,1fr) blieb rechts eine leere Zelle stehen. */ #top .bdw-bewertungen .bdw-stimmen{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--s7); max-width:900px; margin-left:auto; margin-right:auto; } #top .bdw-bewertungen .bdw-band-cta{ text-align:center; margin:var(--s8) 0 0; } #top .bdw-bewertungen .bdw-band-cta .avia-button{ margin:0 !important; } #top .bdw-stimme{ margin:0; padding:0 0 0 var(--s5); border-left:3px solid var(--bdw-gold-hell); font-style:normal; background:none; } #top .bdw-stimme p{ font-size:20px; line-height:1.55; color:#fff; margin:0 0 var(--s3); max-width:none; font-style:normal; } #top .bdw-stimme footer{ font-size:15px; color:var(--bdw-hell); } #top .bdw-stimme-name{ font-weight:700; color:#fff; } /* Das Leerzeichen HINTER einer CSS-Hex-Escape beendet die Escape und wird verschluckt — deshalb stand da gemessen "Ajuna O. ·Google". Escape auf sechs Stellen auffuellen und die Abstaende ueber margin setzen. */ #top .bdw-stimme-quelle::before{ content:"\0000b7"; margin:0 .4em; } #top .bdw-bewertungen .bdw-rechtshinweis{ font-size:14px; line-height:1.55; color:var(--bdw-hell); opacity:.85; max-width:82ch; margin:var(--s8) auto 0; text-align:center; } #top .bdw-bewertungen a{ color:var(--bdw-gold-hell); } #top #wrap_all .bdw-bewertungen .bdw-band-titel{ color:#fff; text-align:center; margin:0 0 var(--s6); } #top .bdw-bewertungen .bdw-score-link{ text-align:center; margin:calc(var(--s5) * -1) 0 var(--s8); } #top .bdw-bewertungen .bdw-score-link a{ font-weight:700; } #top .bdw-rechtshinweis{ font-size:14px; color:var(--bdw-leise); max-width:66ch; margin:var(--s6) 0 0; } /* ========================================================================= 10b Abschlussband — Zusage statt Wiederholung des Heros ========================================================================= */ #top .bdw-abschluss-band{ background:var(--bdw-dunkel); } #top .bdw-abschluss{ display:grid; grid-template-columns:minmax(220px,.62fr) 1fr; gap:var(--s10); align-items:center; } #top .bdw-abschluss-bild img{ width:100%; height:100%; object-fit:cover; border-radius:var(--r-m); display:block; } #top #wrap_all .bdw-abschluss-band h2{ color:#fff; margin:0 0 var(--s4); } #top .bdw-abschluss-band .bdw-vorspann{ color:var(--bdw-hell); margin:0 0 var(--s6); } #top .bdw-abschluss-belege{ list-style:none; margin:0 0 var(--s7); padding:0 0 0 var(--s4); border-left:2px solid rgba(217,181,58,.55); } #top .bdw-abschluss-belege li{ position:relative; padding-left:0; margin:0 0 var(--s3); font-size:16px; line-height:1.55; color:var(--bdw-hell); } #top .bdw-abschluss-belege li::before{ content:none; } #top .bdw-abschluss-band .avia-button.bdw-zweit{ color:#fff !important; box-shadow:inset 0 0 0 2px rgba(255,255,255,.72); } #top .bdw-abschluss-band .avia-button.bdw-zweit:hover{ background:rgba(255,255,255,.14) !important; } #top .bdw-abschluss-tel{ margin:var(--s5) 0 0; font-size:16px; color:var(--bdw-hell); } #top .bdw-abschluss-tel a{ color:var(--bdw-gold-hell); font-weight:700; } #top .bdw-abschluss-band .bdw-drittlink{ color:var(--bdw-gold-hell); } /* Vollbreites Bildband als Zaesur */ #top .bdw-bildstreifen .content{ padding-top:0 !important; padding-bottom:0 !important; } /* Seitenkopf OHNE Foto: dann auch kein Textschatten — der ist auf einer einfarbigen Flaeche als Halo sichtbar und wirkt wie ein Rest von woanders. */ #top .bdw-hero-flach::before{ background:none; } #top #wrap_all .bdw-hero-flach h1, #top .bdw-hero-flach .bdw-hero-sub, #top .bdw-hero-flach .bdw-mikro{ text-shadow:none; } /* ========================================================================= 11 Fragen und Antworten — Ebene statt Tabellenraster ========================================================================= */ /* Der EINZIGE zweispaltig gesetzte Abschnittskopf der Seite: Titel links in einer schmalen Spalte, die Aufklapper rechts daneben. Auch linksbuendig blieben sonst vier Koepfe derselben Bauform uebrig — bei zwei Ausnahmen waere es wieder ein Muster. Umgesetzt ohne zusaetzliches Markup um die Toggles: der Kopfblock spannt das Raster auf, die Aufklapper werden per margin darin einsortiert. */ #top .bdw-faq-block .bdw-faq-kopf .bdw-kopf{ margin-bottom:var(--s6); } #top .bdw-faq-block .bdw-faq{ max-width:none; } #top .bdw-faq{ max-width:880px; } #top .bdw-faq-schluss{ font-size:16px; color:var(--bdw-leise); margin:var(--s6) 0 0; } #top .bdw-faq .single_toggle{ margin:0 0 var(--s2); } #top .bdw-faq p.toggler{ position:relative; display:flex; align-items:flex-start; min-height:58px; padding:17px 56px 17px var(--s5); background:var(--bdw-sand); border:0 !important; border-radius:var(--r-m); font-size:18px; font-weight:600; line-height:1.35; color:var(--bdw-tinte); font-family:var(--font-titel); transition:background-color .14s ease; } #top .bdw-faq p.toggler:hover{ background:#ded7c8; } #top .bdw-faq p.toggler.activeTitle{ background:var(--bdw-weiss); box-shadow:var(--schatten); border-radius:var(--r-m) var(--r-m) 0 0; } /* Enfolds blasses Plus-Kaestchen durch ein eigenes Zeichen ersetzen */ #top .bdw-faq .toggle_icon{ position:absolute; right:var(--s5); left:auto; top:26px; width:18px; height:18px; border:0; background:none; margin:0; transition:transform .2s ease; } #top .bdw-faq .toggle_icon .vert_icon, #top .bdw-faq .toggle_icon .hor_icon{ border:0; background:var(--bdw-moos); position:absolute; left:0; top:8px; width:18px; height:2px; border-radius:1px; margin:0; } #top .bdw-faq .toggle_icon .vert_icon{ transform:rotate(90deg); transition:opacity .2s ease; } #top .bdw-faq p.toggler.activeTitle .toggle_icon{ transform:rotate(180deg); } #top .bdw-faq p.toggler.activeTitle .toggle_icon .vert_icon{ opacity:0; } #top .bdw-faq .toggle_content{ background:var(--bdw-weiss); border:0 !important; border-radius:0 0 var(--r-m) var(--r-m); box-shadow:var(--schatten); padding:0 var(--s5) var(--s5); margin:0 0 var(--s2); } /* Die Antworten sind gewoehnlicher Fliesstext und laufen jetzt auch so: 18/1,65 mit 24 px Absatzabstand. Vorher standen sie als einziger Textkoerper der Seite ausserhalb des Gestaltungssystems — 17 px, und der Absatzabstand kam mit gemessenen 14,45 px still aus Enfold, weil die Fliesstextregeln nur .avia_textblock und av_codeblock treffen, nicht .toggle_content. Ein Schritt von einem Pixel gegen die Frage darueber traegt ohnehin keine Bedeutung; die Frage unterscheidet sich durch Titelschrift, Halbfett und Sandflaeche. */ #top .bdw-faq .toggle_content p{ font-size:18px; line-height:1.65; max-width:var(--mass); margin:0 0 var(--s6); } #top .bdw-faq .toggle_content p:last-child{ margin-bottom:0; } /* ========================================================================= 12 Bilder ========================================================================= */ /* Fotos ohne Radius. Vorher trug JEDES Foto der Startseite denselben 10-px-Radius; das abgerundete Rechteck ist die Standardgeste der Baukastenvorlagen. Radius bleibt dort, wo er etwas begrenzt: Karten und Aufklapper. */ #top .avia-image-container img,#top .bdw-bild img{ border-radius:0; } #top .noHover .avia-image-container-inner:hover .av-image-caption-overlay{ opacity:0; } /* Zwei Formate, sonst keine */ #top .bdw-bild-32,#top .bdw-bild-32 img{ aspect-ratio:3/2; object-fit:cover; width:100%; } #top .bdw-bild-45,#top .bdw-bild-45 img{ aspect-ratio:4/5; object-fit:cover; width:100%; } /* die Verhaeltnisklasse gewinnt gegen die Vorgabe des Medienblocks */ #top .bdw-medien .bdw-medien-bild img.bdw-bild-45{ aspect-ratio:4/5; } #top .bdw-medien .bdw-medien-bild img.bdw-bild-32{ aspect-ratio:3/2; } #top .bdw-rund img{ border-radius:var(--r-voll); } /* Vollbreites Bildband als Zaesur */ /* 460 px waren 51 % einer Bildschirmhoehe fuer ein Band ohne Aussage. */ #top .bdw-bildband{ display:block; position:relative; overflow:hidden; width:100%; height:clamp(240px,22vw,340px); } #top .bdw-bildband img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:0; object-position:center 34%; } /* Ein Band, dessen Motiv den Bildkopf braucht (Hund frontal, Apportierholz im Maul): bei 34 % waere nur die Brust im Streifen. */ #top .bdw-bildband-kopf img{ object-position:center 18%; } /* Zwei Hoehenstufen (Auftrag 04.08.: das Band vor "Womit ich arbeite" groesser, das vor den Kundenstimmen "ein bisschen hoeher"). Bewusst UNTERSCHIEDLICH — zwei gleich hohe Baender auf einer Seite waeren wieder eine Wiederholung. AUFTRAG 04.08. 23:08: "Das Bild darunter bitte groesseren Ausschnitt." 36vw zeigten bei 1.440 px 518 von 1.001 Bildzeilen, also 51,8 % des Motivs; 46vw zeigen 662 Zeilen = 66,2 %. Der Anteil ist im ganzen clamp-Bereich konstant, weil Bandhoehe und Bildhoehe beide an der Fensterbreite haengen. Die Untergrenze bleibt bei 340 px: bei 400 px waere zwischen 768 und 870 px der Ueberhang kleiner als die Parallaxreserve von 2 x 70 px, und `cover` wuerde auf die Hoehe statt auf die Breite rechnen (Motiv sprunghaft groesser). */ #top .bdw-bildband-gross{ height:clamp(340px,46vw,760px); } #top .bdw-bildband-mittel{ height:clamp(300px,29vw,450px); } /* --- Parallax ------------------------------------------------------------- Das Bild ist oben und unten um --weg hoeher als sein Fenster; das Skript in functions.php verschiebt es innerhalb dieser Reserve. Ohne JavaScript und bei `prefers-reduced-motion: reduce` bleibt es bei den Regeln darueber stehen — deshalb haengen Position und Ueberhoehe an `.js` und an der Medienabfrage und nicht an der Klasse allein. */ @media (prefers-reduced-motion: no-preference){ .js #top .bdw-parallax{ --weg:70px; } .js #top .bdw-parallax img{ position:absolute; left:0; top:calc(-1 * var(--weg)); height:calc(100% + 2 * var(--weg)); will-change:transform; } /* AUSSCHNITT NACHZIEHEN — sonst zeigt das Band in Bewegung etwas anderes als geplant. Der Bildkasten ist hier 2 * --weg hoeher als das Band. `object-fit:cover` rechnet den Prozentwert aber auf den Ueberhang IN DIESEM KASTEN, und der ist um 2 * --weg kleiner. Gemessen bei 1440 px in der Mittellage (Band mittig im Fenster, also Versatz 0): Band 1 begann bei Bildzeile 186,5 statt 164,1, Band 2 bei 145,1 statt 100,3 — beim Motiv mit dem Hundekopf waren die Ohren dadurch abgeschnitten, und zwar genau solange das Band ganz im Fenster steht. Die neuen Werte sind gerechnet, nicht geschaetzt: Anteil_bewegt = (Anteil_ruhend * Ueberhang_ruhend - --weg) / Ueberhang_bewegt Band 1: (0,34 * 338,6 - 70) / 198,6 = 22,7 % (bei 518 px Bandhoehe: 27,5 %) Band 2: (0,18 * 557,4 - 70) / 417,4 = 7,3 % Band 1 ist seit dem 04.08. 23:08 hoeher (46vw statt 36vw), damit schrumpft sein Ueberhang von 482,6 auf 338,6 px und der Prozentwert muss mit — sonst begaenne das Band in der Mittellage 22 Bildzeilen tiefer als geplant. Ausserhalb dieses Blocks bleiben 34 % und 18 % stehen — wer `reduce` gesetzt hat, sieht das unbewegte Band und braucht die Korrektur nicht. */ .js #top .bdw-parallax img{ object-position:center 22.7%; } .js #top .bdw-bildband-kopf.bdw-parallax img{ object-position:center 7.3%; } } #top .bdw-bildunterschrift{ font-size:14px; line-height:1.5; color:var(--bdw-leise); margin:var(--s2) 0 0; } /* Brueche der durchgehenden linken Kante. Vorher begannen acht von zehn gemessenen Bloecken bei x=170 und kein Element ueberlappte je eine Sektionsnaht — das ist praezise, aber es liest sich wie gerastert. Von den drei Bruechen der Fassung 3 sind zwei entfallen, beide auf Wunsch des Auftraggebers (04.08.): das randabfallende Portraet gehoert in den Container, die eingerueckten Werte in den Block darueber. Geblieben ist der Versatz der Kundenstimmen; die Unruhe, die der Rest erzeugt hat, war ohnehin der Grund fuer die Rueckmeldung. */ @media only screen and (min-width:1025px){ /* Der Rasterbau des Portraetblocks steht bewusst WEITER UNTEN, hinter den Grundregeln von .bdw-medien. Grund: gleiche Spezifitaet, und die Grundregel kommt in dieser Datei spaeter — eine Spaltenangabe an dieser Stelle waere wirkungslos. Genau das ist unbemerkt passiert: die Fassung 3 setzte hier `.8fr 1fr`, gerendert wurde durchgehend `.72fr 1fr` (nachgemessen). */ /* 3: die Kundenstimmen stehen gegeneinander versetzt — aber nur, wenn es DREI sind. Der Versatz war fuer drei Zitate entworfen; belegt sind zurzeit zwei, und bei zweien liest sich dieselbe Regel nicht als Rhythmus, sondern als verrutscht: gemessen begannen die beiden Goldlinien 32 px gegeneinander versetzt, waehrend im Band darueber und darunter alles mittig steht. `:not(:last-child)` loest das ohne Schalter — sobald eine dritte Stimme belegt ist und dazukommt, greift der Versatz von selbst wieder. */ #top .bdw-bewertungen .bdw-stimmen > *:nth-child(2):not(:last-child){ margin-top:var(--s7); } #top .bdw-bewertungen .bdw-stimmen > *:nth-child(3){ margin-top:var(--s10); } } /* Bild und Text nebeneinander: gleiche Ober- UND Unterkante */ #top .bdw-medien{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s10); align-items:center; } #top .bdw-medien.bdw-medien-58{ grid-template-columns:1.38fr 1fr; } /* Portraet im Hochformat: schmalere Bildspalte, Text oben ausgerichtet — sonst haengt die Textspalte mittig neben einem 640 px hohen Bild. */ #top .bdw-medien.bdw-medien-portraet{ grid-template-columns:.72fr 1fr; align-items:start; gap:var(--s11); } /* "Das ganze Bild" (Auftrag 04.08.): das Hochformat laeuft in seiner eigenen Proportion, kein Zuschnitt. Die Vorgabe des Medienblocks (3:2, object-fit:cover) wuerde von 2000 px Bildhoehe rund die Haelfte wegschneiden. */ #top .bdw-medien.bdw-medien-portraet .bdw-medien-bild img{ aspect-ratio:auto; height:auto; } #top .bdw-medien-portraet .bdw-medien-text{ padding-top:var(--s2); } #top #wrap_all .bdw-medien-portraet h3{ margin-top:var(--s8); font-size:22px; } /* Die Zeile darueber trifft ALLE h3 im Portraetblock — also auch die vier Wertekacheln, die weiter oben ausdruecklich auf 17 px stehen. Gleiche Spezifitaet, spaetere Regel gewinnt: gemessen rendeten die Kacheln mit 22 px, also genauso gross wie die uebergeordnete Zwischenueberschrift "Wie ich arbeite", und der beschreibende Satz darunter mit 15 px. Damit war die Rangordnung, die das CSS zwei Bloecke weiter oben festlegt, auf dem Bildschirm nicht vorhanden. Hier zuruecknehmen statt die Dateireihenfolge umzustellen. */ #top #wrap_all .bdw-medien-portraet .bdw-werte-inline h3{ margin-top:0; font-size:17px; } /* Portraetblock am Schreibtisch: Foto oben links, Weiterlink darunter, Text rechts ueber beide Zeilen. Der Link stand vorher am Fuss der Textspalte — links daneben lagen dann 238 px leere Flaeche, weil das Hochformat kuerzer ist als der Text. Jetzt fuellt er genau diese Stelle und wirkt wie eine Bildunterschrift zur Person. Muss NACH den Grundregeln von .bdw-medien stehen (gleiche Spezifitaet). */ @media only screen and (min-width:1025px){ #top .bdw-medien.bdw-medien-portraet{ grid-template-columns:.9fr 1fr; /* `1fr` in der zweiten Zeile ist kein Schoenheitswert, sondern noetig: ein Element, das mehrere Zeilen ueberspannt (hier die Textspalte), verteilt seinen Ueberhang sonst gleichmaessig auf alle uebersprungenen auto-Zeilen. Zeile 1 waere dann hoeher als das Foto und der Link haenge darunter in der Luft (gemessen 113 px). Sobald eine der Zeilen flexibel ist, laesst der Algorithmus diesen Schritt aus: Zeile 1 bleibt exakt so hoch wie das Bild, der ganze Ueberhang landet in Zeile 2. */ grid-template-rows:auto 1fr; column-gap:var(--s11); row-gap:var(--s6); } #top .bdw-medien-portraet .bdw-medien-bild{ grid-column:1; grid-row:1; } #top .bdw-medien-portraet .bdw-medien-mehr{ grid-column:1; grid-row:2; align-self:start; margin:0; } #top .bdw-medien-portraet .bdw-medien-text{ grid-column:2; grid-row:1 / span 2; } } /* Der Kartenplatzhalter war als 4:3 hoeher als die Textspalte daneben */ #top .bdw-medien .bdw-karte-platz{ aspect-ratio:16/10; } #top .bdw-medien .bdw-medien-bild img{ width:100%; height:100%; object-fit:cover; border-radius:0; display:block; aspect-ratio:3/2; } #top #wrap_all .bdw-medien h2{ margin-top:0; } /* ========================================================================= 13 Karten-Platzhalter (Klick zu laden) und NAP ========================================================================= */ #top .bdw-karte-platz{ background:var(--bdw-sand); border:1px dashed rgba(58,47,40,.28); border-radius:var(--r-m); padding:var(--s7); text-align:center; display:flex; flex-direction:column; justify-content:center; aspect-ratio:4/3; } #top .bdw-karte-platz p{ margin:0 0 var(--s3); max-width:none; } #top .bdw-karte-platz p:last-child{ margin:0; } /* AUFTRAG 04.08. 23:08: "Kleinen Abstand zwischen '… Onlinecoaching ist bundesweit möglich.' und Karte." Der Platzhalter stiess bisher mit 0 px an den Absatz — der Codeblock darueber gibt keinen Nachabstand her. */ #top .bdw-karte-abstand{ margin-top:var(--s6); } #top .bdw-nap{ line-height:1.7; } #top .bdw-nap strong{ color:var(--bdw-tinte); } /* Kanalzeile statt fuenf dunkler Knoepfe nebeneinander (Knopfsuppe). AUFTRAG 04.08. 23:08: "Bleib in Verbindung schöner, zentriert, mit Icons." Vorher fuenf unterstrichene Textlinks mit Pfeil in einer Flexzeile: vier passten in die erste Zeile, "Kundenbereich" fiel in die zweite und stand dort allein mittig — der Block sah nach Rest aus, nicht nach Absicht. Jetzt fuenf gleich breite Felder mit Symbol und Namen; das Symbol traegt die Wiedererkennung, der Name die Aussage. Kein Kasten und keine Markenfarbe: dieselbe Zurueckhaltung wie im Fuss. BEWUSST Flex mit fester Feldbreite und nicht `repeat(5,1fr)`: bei fuenf Feldern bleibt in jeder schmaleren Stufe ein Rest (3+2 auf dem Tablet, 2+2+1 auf dem Telefon), und im Raster stuende dieser Rest linksbuendig in Spalte 1 — also wieder das einsame Feld, das gerade behoben wurde. `justify-content:center` setzt jede angebrochene Reihe mittig. */ #top .bdw-kanaele{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s5); margin:var(--s8) 0 0; padding:0; max-width:none; } #top .bdw-kanaele li{ flex:0 1 190px; margin:0; padding:0; } #top .bdw-kanaele li::before{ content:none; } #top .bdw-kanaele a{ display:flex; flex-direction:column; align-items:center; gap:var(--s3); padding:var(--s5) var(--s3); border-radius:var(--r-m); font-size:16px; font-weight:700; color:var(--bdw-moos); text-decoration:none; text-align:center; line-height:1.35; transition:background-color .14s ease, color .14s ease; } #top .bdw-kanaele a:hover,#top .bdw-kanaele a:focus-visible{ background:rgba(88,94,60,.10); color:var(--bdw-tinte); } #top .bdw-kanal-symbol{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--r-voll); background:rgba(88,94,60,.12); } #top .bdw-kanaele a:hover .bdw-kanal-symbol{ background:rgba(88,94,60,.22); } #top .bdw-kanal-symbol svg{ width:21px; height:21px; fill:currentColor; display:block; } /* ========================================================================= 14 Formulare und Tastaturbedienung ========================================================================= */ #top .wpcf7 label{ display:block; font-weight:700; margin-bottom:var(--s1); font-size:15px; color:var(--bdw-tinte); } #top .wpcf7 input[type=text],#top .wpcf7 input[type=email],#top .wpcf7 input[type=tel], #top .wpcf7 textarea,#top .wpcf7 select{ width:100%; padding:13px var(--s4); border:1px solid rgba(58,47,40,.28); border-radius:var(--r-s); background:var(--bdw-weiss); color:var(--bdw-text); font-size:16px; } #top .wpcf7 input:focus,#top .wpcf7 textarea:focus,#top .wpcf7 select:focus{ outline:2px solid var(--bdw-moos); outline-offset:1px; border-color:var(--bdw-moos); } #top .wpcf7 input[type=submit]{ background:var(--bdw-gold); color:var(--bdw-tinte); border:0; border-radius:var(--r-s); padding:16px 30px; font-size:17px; font-weight:700; cursor:pointer; min-height:54px; } #top .wpcf7 input[type=submit]:hover{ background:var(--bdw-gold-tief); } #top .wpcf7 .bdw-pflichthinweis{ font-size:14px; color:var(--bdw-leise); } /* Das lange Anfrageformular (Auftrag 05.08.2026 12:26: alle Felder der Altseite). Achtzehn gleich aussehende Felder untereinander sind der haeufigste Abbruchgrund — deshalb vier beschriftete Abschnitte, und was zusammengehoert und kurz ist, steht nebeneinander. */ #top .wpcf7 .bdw-formteil{ font-size:16px; color:var(--bdw-leise); margin-bottom:var(--s7); } /* Die vier Abschnitte sind h2 und nicht h3: die Seite hat sonst einen Ueberschriftensprung h1 -> h3 (tools/checksite.py meldet ihn). Die Groesse macht die Klasse, nicht die Ebene. */ #top #wrap_all .wpcf7 .bdw-formkopf{ font-size:18px; line-height:1.3; margin:var(--s10) 0 var(--s5); padding-bottom:var(--s2); border-bottom:1px solid var(--bdw-linie); } #top #wrap_all .wpcf7 .bdw-formkopf:first-of-type{ margin-top:var(--s7); } #top .wpcf7 .bdw-feld{ margin:0 0 var(--s6); } #top .wpcf7 .bdw-feldpaar{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s5); } #top .wpcf7 .bdw-feldhinweis{ display:block; font-size:14px; line-height:1.5; color:var(--bdw-leise); margin:0 0 var(--s2); } /* Auswahlgruppen: die Gruppenfrage traegt und sieht aus wie ein

und traegt den einzigen sichtbaren Link der Zeile. Ohne die Einschraenkung war die Angebotsliste auf dem Handy komplett ohne erkennbaren Link. */ #top .bdw-angebote .bdw-karte p:not(.bdw-karte-fuss){ display:none; } /* Die ganze Zeile antippbar, Titel-Link bleibt das einzige fokussierbare Element */ #top .bdw-angebote .bdw-karte-inhalt{ position:relative; padding-right:44px; } #top .bdw-angebote .bdw-karte h3 a::after{ content:""; position:absolute; inset:0; } #top .bdw-angebote .bdw-karte::after{ content:""; position:absolute; right:20px; top:50%; width:9px; height:9px; border-right:2px solid var(--bdw-moos); border-top:2px solid var(--bdw-moos); transform:translateY(-50%) rotate(45deg); pointer-events:none; } #top .bdw-angebote .bdw-karte{ position:relative; } #top .bdw-angebote .bdw-karte .bdw-karte-fuss{ padding-top:var(--s3); } #top .bdw-angebote .bdw-karte.bdw-empfohlen{ box-shadow:none; background:#fdf8ea; } /* .bdw-karte ist ein Spalten-Flexcontainer: display:inline-block allein reicht nicht, align-self:stretch zieht das Kind sonst auf volle Kartenbreite — 390 px durchgehendes Gold, das man fuer einen Knopf haelt. */ #top .bdw-angebote .bdw-badge{ position:static; display:inline-block; align-self:flex-start; width:max-content; margin:0 0 var(--s2) var(--s5); } /* Passt/passt-nicht untereinander mit waagerechter Trennung */ #top .bdw-passt{ grid-template-columns:1fr; } #top .bdw-passt > div{ padding:var(--s5); } #top .bdw-passt > div + div{ border-left:0; border-top:1px solid var(--bdw-linie); } /* Ablauf: Nummer links, Text linksbuendig */ #top .bdw-ablauf .bdw-nr{ margin:0 0 var(--s3); } #top #wrap_all .bdw-ablauf h3,#top #wrap_all .bdw-ablauf p{ text-align:left; } /* Bewertungsband */ /* padding:0 hiess im vollbreiten Band 0 px Seitenrand — Woerter wurden am Rand abgeschnitten, ausgerechnet im staerksten Vertrauensblock der Seite. */ #top .bdw-bewertungen .bdw-band-innen{ padding:0 var(--s6); } #top .bdw-bewertungen .bdw-score{ margin-bottom:var(--s6); } #top .bdw-stimme p{ font-size:16px; } #top .bdw-bewertungen .bdw-rechtshinweis{ text-align:left; margin-top:var(--s6); } /* FAQ */ #top .bdw-faq p.toggler{ font-size:17px; padding:16px 48px 16px var(--s4); } #top .bdw-faq .toggle_icon{ right:var(--s4); top:24px; } #top .bdw-faq .toggle_content{ padding:0 var(--s4) var(--s4); } /* Bilder randlos ueber die volle Breite */ #top .bdw-vollbild img{ width:100vw; margin-left:calc(50% - 50vw); border-radius:0; height:260px; object-fit:cover; } #top .bdw-bildband{ height:180px; } /* Auf dem Handy ist ein Band vor allem Scrollweg — die Stufung bleibt, der Zuwachs faellt kleiner aus als am Schreibtisch. */ #top .bdw-bildband-gross{ height:280px; } #top .bdw-bildband-mittel{ height:230px; } /* --weg war 40 px und hat auf dem Handy das Motiv zerstoert. Grund: `cover` skaliert nach der GROESSEREN der beiden Achsen. Bei 390 px Breite ist das Bild auf Breite skaliert 264 px hoch; sobald der Bildkasten (230 + 2 * --weg) darueber liegt, kippt `cover` auf Hoehenskalierung — das Bild wird um 17 % vergroessert und waagerecht beschnitten, der Hundekopf lag dann ausserhalb. Der Kippunkt liegt bei --weg = 17 px ((264 - 230) / 2). Mit 16 px bleibt die Breitenskalierung erhalten, die Bewegung ist weiterhin sichtbar, und das groessere Band aus dem Auftrag vom 04.08. bleibt unangetastet. */ .js #top .bdw-parallax{ --weg:16px; } #top .bdw-medien .bdw-medien-bild img, #top .bdw-medien .bdw-medien-bild img.bdw-bild-45{ aspect-ratio:4/3; object-position:center 30%; } /* Das Portraet bleibt auch auf dem Handy ungeschnitten (Auftrag 04.08.) */ #top .bdw-medien.bdw-medien-portraet .bdw-medien-bild img{ aspect-ratio:auto; height:auto; } #top .bdw-karte-platz{ aspect-ratio:auto; padding:var(--s5); } /* Preisanker und Abschlussband stapeln */ #top .bdw-preisanker{ grid-template-columns:1fr; gap:var(--s4); padding:var(--s5); text-align:left; } #top .bdw-preisanker-zahl{ font-size:40px; } /* .bdw-abschluss stapelt jetzt schon ab 1024 px (Abschnitt 17) */ #top .bdw-abschluss-bild img{ aspect-ratio:3/2; } /* Auf 390 px hat auch die zweispaltige Fassung keinen Platz: eine Spur, der Knopf ueber die Breite. */ #top .bdw-zwischen-cta{ margin-top:var(--s7); grid-template-columns:1fr; gap:var(--s3); } /* 40 px Seitenpolster sind auf 390 px Breite ein Achtel des Bildschirms */ #top .bdw-zwischen-cta.bdw-abgesetzt{ margin-top:var(--s8); padding:var(--s6) var(--s5); } /* Das Textband unter dem Hero: gleich viel oben wie unten, nur kleiner */ #top .bdw-stimmzeile-band .content{ padding-top:var(--s6); padding-bottom:var(--s6); } #top .bdw-zwischen-text{ font-size:17px; } #top .bdw-zwischen-cta .avia-button{ margin:var(--s2) 0 !important; justify-self:stretch; } /* Auf einer Spur ist der Zweitweg das LETZTE Element des CTA-Bandes (§ 8b). Er traegt 10 px Polster, damit die Antippflaeche ueber 44 px kommt; zu sehen ist davon nichts. Gemessen stand seine Unterlinie dadurch 15 px ueber der Bandkante, waehrend oben nur 2 px standen — also oben 34, unten 47. Die Antippflaeche bleibt unangetastet, sie darf in das Bandpolster hineinragen. */ #top .bdw-cta-band .bdw-drittlink{ margin-bottom:-10px; } /* Fuss: zwei Spalten, Antippflaechen ueber 44 px. Der Claim war hier frueher per display:none abgeschaltet — ausgerechnet der Block, der nach dem Auftrag eine eigene Spalte tragen soll, und mit ihm die vier Ortsnamen. Versteckter Text nuetzt weder Leser noch Auffindbarkeit. */ #footer{ padding:var(--s8) 0 var(--s6); text-align:left; } #footer .container{ grid-template-columns:repeat(2,1fr); column-gap:var(--s6); row-gap:var(--s8); } #footer .widget{ margin:0; } #footer .bdw-footer-claim{ font-size:14px; } #footer .bdw-mitgliedschaft{ margin-top:var(--s5); } #footer .bdw-prohunde{ width:80px; } #footer .bdw-footer-listen ul{ display:block; } #footer li a{ padding:11px 0; } /* Sockel: die Rechtslinks ueberlappten sich sichtbar. ACHTUNG: das Sockelmenue heisst bei Enfold NICHT .sub_menu, sondern nav.sub_menu_socket > div.avia3-menu > ul#avia3-menu — auf .sub_menu gezielte Regeln laufen ins Leere (genau daran ist der erste Versuch gescheitert). */ #socket{ padding:var(--s6) 0 var(--s5); } #socket .sub_menu_socket{ float:none; width:100%; } #socket .sub_menu_socket .avia3-menu, #socket nav.sub_menu_socket ul.menu{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--s3) var(--s5); float:none; width:100%; margin:0; padding:0; } #socket nav.sub_menu_socket ul.menu li{ float:none; margin:0; padding:0 !important; border:0 !important; line-height:1.5; } /* 44 px Antippflaeche - mit var(--s2) waren es gemessen nur 37 px */ #socket nav.sub_menu_socket ul.menu li a{ padding:13px 0 !important; display:inline-block; line-height:1.4; } #socket nav.sub_menu_socket ul.menu li.bdw-menu-widerruf{ flex-basis:100%; text-align:right; margin-top:var(--s2); } /* Die Regel darueber setzt das WAAGERECHTE Polster auf 0 - der Umrissknopf braucht es. Senkrecht bleibt var(--s3): damit ist die Antippflaeche 44 px wie bei den uebrigen Sockellinks (mit 10 px waren es gemessen 40). */ #socket nav.sub_menu_socket ul.menu li.bdw-menu-widerruf > a{ padding:var(--s3) var(--s4) !important; } } /* Telefon: die beiden TEXTspalten des Fusses ueber die volle Breite. Im Zweispalter blieben je 154 px, und darin passt keine Anschrift und erst recht keine Mailadresse: gemessen stand dort "Metzinger Strasse" / "37", "72800 Eningen" / "unter Achalm" und — am schlimmsten — "info@balanced-" / "dogwork.de", also ein Wortbruch mitten in der Kontaktadresse. Genau die Angaben, wegen derer jemand ueberhaupt bis in den Fuss scrollt. Die beiden LINKlisten bleiben nebeneinander: kurze Zeilen, die vertragen 154 px, und einspaltig waere der Fuss unnoetig lang geworden. */ @media only screen and (max-width:600px){ #footer .container > .flex_column:nth-child(1), #footer .container > .flex_column:nth-child(2){ grid-column:1 / -1; } #footer .bdw-footer-claim{ max-width:34ch; } } /* Sehr schmale Geraete: dann auch die beiden Linklisten untereinander. */ @media only screen and (max-width:359px){ #footer .container{ grid-template-columns:1fr; row-gap:var(--s7); } } /* ========================================================================= 18b Aktionsleiste auf dem Telefon Nur unter 768 px. Erscheint ab 600 px Scrollweg und verschwindet wieder, sobald ein Goldknopf im Bild ist (Beobachter in functions.php) — damit gilt weiter: ein gefuelltes Gold je Bildschirmhoehe. ========================================================================= */ #top .bdw-leiste{ display:none; } @media only screen and (max-width:767px){ #top .bdw-leiste{ position:fixed; left:0; right:0; bottom:0; z-index:60; display:grid; grid-template-columns:56px 1fr 1.35fr; gap:var(--s2); align-items:center; padding:var(--s2) var(--s4); padding-bottom:calc(var(--s2) + env(safe-area-inset-bottom)); background:#fff; box-shadow:0 -2px 16px rgba(58,47,40,.18); transform:translateY(115%); transition:transform 200ms ease-out; } #top .bdw-leiste.ist-da{ transform:none; } #top .bdw-leiste a{ display:flex; align-items:center; justify-content:center; min-height:46px; border-radius:var(--r-s); font-size:15px; font-weight:700; text-decoration:none; line-height:1.2; } #top .bdw-leiste-tel, #top .bdw-leiste-wa{ color:var(--bdw-tinte); box-shadow:inset 0 0 0 1px rgba(58,47,40,.25); } #top .bdw-leiste-tel{ font-size:22px; } #top .bdw-leiste-cta{ background:var(--bdw-gold); color:var(--bdw-tinte); margin:0 !important; padding:0 var(--s3) !important; min-width:0; } /* Der Sockel darf nicht unter der Leiste verschwinden */ #socket{ padding-bottom:calc(var(--s5) + 60px); } } @media (prefers-reduced-motion:reduce){ #top .bdw-leiste{ transition:none !important; } } /* ========================================================================= 19 Bewegung — EIN Idiom, EIN Wert Die Seite war ueber 8.800 px vollkommen bewegungslos gestapelt. Ein einziges, sehr zurueckhaltendes Einblenden gibt dem Scrollen einen Puls, ohne dass es nach Vorlage aussieht. Bewusst NICHT: Staffelversatz, Skalieren, seitliches Einfliegen — genau das waere wieder Baukasten-Optik. Die Klasse `js` setzt ein Inline-Schnipsel im (functions.php). Ohne JavaScript greift keine der Regeln, es bleibt also nichts verborgen. ========================================================================= */ html.js #top .bdw-einblenden{ opacity:0; transform:translateY(12px); transition:opacity 420ms ease-out, transform 420ms ease-out; } html.js #top .bdw-einblenden.ist-da{ opacity:1; transform:none; } /* Bewegung reduzieren */ @media (prefers-reduced-motion:reduce){ #top *,#top *::before,#top *::after{ transition:none !important; animation:none !important; } #top .bdw-karte:hover .bdw-karte-bild img{ transform:none; } html.js #top .bdw-einblenden{ opacity:1 !important; transform:none !important; } } /* ========================================================================= 20 Ratgeber — Beitragsraster und Einzelbeitrag (Auftrag 05.08.2026 13:20) Der Blog ist der einzige Teil der Seite, der NICHT aus dem Baukasten kommt: ein Beitrag ist Text mit Gliederung. Enfold liefert dafuer eine eigene Vorlage — die aber mit den Vorgaben des Kindthemas nichts zu tun hat. Gemessen am ersten ausgelieferten Beitrag: - Fliesstext im BLOCKSATZ (Enfold-Vorgabe). Auf 800 px Satzbreite reisst das sichtbare Loecher zwischen die Woerter; die ganze uebrige Seite ist linksbuendig. - Satzbreite 800 px statt der 66ch, mit denen jede andere Seite rechnet. - Schriftgrad 19 px statt 18 px. Deshalb hier: dieselbe Lesebreite, dieselbe Ausrichtung, dieselbe Groesse. ========================================================================= */ #top.single-post .entry-content-wrapper, #top.single-post .entry-content-wrapper p, #top.single-post .entry-content-wrapper li{ text-align:left; } /* Eine Lesespalte, mittig unter dem randabfallenden Beitragsbild. FESTER Wert statt var(--mass): 66ch loest je nach Schriftgroesse des Elements anders auf. Gemessen ergaben dieselben 66ch am Absatz (18 px) 679 px, an der Hakenliste (Erbwert) 781 px — Absaetze und Listen standen dadurch auf zwei verschiedenen linken Kanten, 51 px auseinander. 680 px sind dieselben 66ch bei 18 px, nur an EINER Stelle gerechnet. SPEZIFITAET: Enfold setzt die Blogbreite in blog.css mit `#top .fullsize .template-blog .post .entry-content-wrapper > *{max-width:40em}` (gemessen 828 px) und die Ueberschrift mit `#top .fullsize .template-blog .post-title{text-align:center}`. Beides schlaegt eine Regel mit `#top.single-post .entry-content`. Deshalb hier dieselbe Selektorkette, eine Klasse laenger — nicht !important. */ #top.single-post .fullsize .template-blog .post .entry-content, #top.single-post .fullsize .template-blog .post-title, #top.single-post .fullsize .template-blog .post-meta-infos{ max-width:680px; margin-left:auto; margin-right:auto; } #top.single-post .fullsize .template-blog .post-title{ text-align:left; } /* Der Aussenabstand der Ueberschrift kommt aus der eigenen Grundregel `#top h1, #top #wrap_all .all_colors h1{margin:0 0 var(--s5)}` — zwei IDs, die schlaegt jede Blogregel. Deshalb hier dieselbe Kette. */ #top.single-post #wrap_all .all_colors .template-blog h1.post-title{ margin-left:auto; margin-right:auto; } #top.single-post .entry-content > *{ max-width:none; } #top.single-post .entry-content p, #top.single-post .entry-content li{ font-size:18px; line-height:1.65; color:var(--bdw-text); } #top.single-post .entry-content p{ margin:0 0 var(--s6); } #top.single-post .entry-content > h2{ margin:var(--s10) 0 var(--s4); } #top.single-post .entry-content > h3{ margin:var(--s8) 0 var(--s3); } /* Die Ueberschrift steht linksbuendig wie jede andere H1 der Seite. Enfolds Vorlage zentriert sie — ueber einem linksbuendigen Text ist das ein Bruch, der nirgends sonst vorkommt. */ #top.single-post .post-title{ margin-bottom:var(--s3); } /* Rueckweg in den Ratgeber: leise, unter der Handlung. */ #top .bdw-beitrag-zurueck{ margin:var(--s6) 0 0; font-size:15px; color:var(--bdw-leise); } #top .bdw-beitrag-zurueck a::before{ content:"\2190\00a0"; } #top.single-post .post-meta-infos{ margin-bottom:var(--s8); color:var(--bdw-leise); } /* Das Beitragsbild bleibt breit — es ist die Zaesur zwischen Kopf und Text. */ #top.single-post .big-preview{ max-width:none; margin-bottom:var(--s9); } #top.single-post .big-preview img{ border-radius:var(--r-m); } /* Zitat am Textanfang: dieselbe Form wie im uebrigen Satz, nur eine Spur groesser — es traegt hier die Rolle des Vorspanns. */ #top.single-post .entry-content blockquote.bdw-zitat p{ font-family:var(--font-titel); font-size:21px; line-height:1.45; color:var(--bdw-tinte); margin:0; } /* Der Abschluss unter jedem Beitrag — dieselbe Zeile wie der Zwischenschritt auf den Angebotsseiten, nur abgesetzt statt dreispaltig: unter einem Text steht sie am Ende einer Lesespalte, nicht mitten in einer Sektion. */ #top .bdw-beitrag-cta{ margin:var(--s10) 0 0; padding-top:var(--s7); border-top:1px solid var(--bdw-linie); } #top .bdw-beitrag-cta .bdw-zwischen-text{ margin:0 0 var(--s5); } /* Die beiden Wege stehen in EINEM eigenen Absatz. Ohne den setzt wpautop selbst ein

um die zwei Verweise — dann greift das Flex-Raster des Kastens nicht mehr auf sie durch und die beiden standen ohne Fuge aneinander (gemessen 2 px). */ #top .bdw-beitrag-wege{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4) var(--s6); margin:0; } #top .bdw-beitrag-cta .avia-button{ margin:0 !important; } /* Aehnliche Beitraege unter dem Einzelbeitrag: dieselbe Lesespalte. */ #top.single-post .related_posts{ max-width:var(--mass); margin:var(--s10) auto 0; } /* ------------------------------------------------------------------------- 20b Beitragsraster auf /ratgeber/ — dieselbe Karte wie auf der Startseite Anweisung 05.08.2026 18:07: "Die Uebersicht ist nicht optimal, Paddings fuer den Textinhalt fehlen. Da nochmal nachjustieren, die sollten so aussehen, wie auf der Startseite." HIER STANDEN DREI REGELN, DIE NIE GEGRIFFEN HABEN. Das Polster fehlte also nicht aus Versehen, sondern weil die Selektoren ins Leere zeigten: 1. `.entry-content-wrapper` gibt es im Rastermarkup NICHT (gemessen: 0 Treffer unterhalb von .slide-entry; die vier Vorkommen auf der Seite gehoeren zum Artikelrahmen der SEITE selbst). Der Textteil heisst `.slide-content` — und darauf hat Enfold selbst keine einzige Regel, gemessen `padding:0`. 2. `.slide-entry .entry-title` (1,3,0) verliert gegen die eigene Grundregel `#top #wrap_all .all_colors h3` (2,1,1) in Abschnitt 3. Durch kamen 24 px mit `margin-top:48px` — der optisch groesste Teil des "fehlenden Polsters" war in Wahrheit ein Ueberschriftenabstand INNERHALB der Karte. 3. `.entry-content p` findet kein

: Enfold schreibt den Auszug als Textknoten direkt in `.slide-entry-excerpt`. Der Text erbte 18 px. LADEREIHENFOLGE — der Grund, warum die Selektoren hier so lang sind: das Child-Stylesheet laedt auf Platz 14, Enfolds blog.css und postslider.css auf 16 und 17. Gegen die beiden reicht GLEICHE Spezifitaet nicht (der Hinweis in Abschnitt 1 gilt nur gegenueber dynamic_avia auf Platz 12). ------------------------------------------------------------------------- */ /* Das Raster. Enfold legt die Karten per FLOAT (grid.css `.flex_column{float:left}` + `.av_one_half{width:47%;margin-left:6%}`). Floats sind inhaltshoch — gemessen standen die zwei Karten einer Reihe bis zu 90 px unterschiedlich hoch, und die Fugen waren 66 px waagerecht / 40 px senkrecht statt der 24 px, mit denen .bdw-raster auf der Startseite rechnet. `.slide-entry-wrap` ist Enfolds Reihencontainer (zwei Eintraege je Wrap), je Reihe also ein Raster. Bewusst NICHT `display:contents` auf dem Wrap: Enfolds Slidernavigation positioniert Wraps absolut (postslider.css) — Fernwirkungsrisiko fuer null Gewinn, das Ergebnis ist mit einem Raster je Reihe dasselbe. */ #top .bdw-ratgeber .slide-entry-wrap{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s6); align-items:stretch; float:none; width:auto; margin:0 0 var(--s6); } #top .bdw-ratgeber .slide-entry-wrap:last-child{ margin-bottom:0; } /* postslider.css setzt `overflow:hidden` auf den Slider UND seinen Innencontainer. Gemessen sass die linke Karte exakt auf der Containerkante — die 24 px Weichzeichnung des Kartenschattens waren links und rechts abgeschnitten. */ #top .bdw-ratgeber .avia-content-slider, #top .bdw-ratgeber .avia-content-slider-inner{ overflow:visible; } /* Die Karte selbst = .bdw-karte (Ebene E2 auf Sand, ein Lichtmodell). `width:auto` ist zwingend: `.av_one_half{width:47%}` gilt fuer ein Rasterfeld genauso wie fuer einen Float und schrumpfte die Karte sonst auf 47 % ihrer Zelle. NUR .slide-entry traegt die Karte — NICHT `.post-entry`: diese Klasse traegt auch der Artikelrahmen der SEITE selbst, die ganze Sektion stand dadurch einmal in einem weissen Kasten (gemessen auf 390 px). */ #top .bdw-ratgeber .slide-entry{ display:flex; flex-direction:column; float:none; width:auto; margin:0; background:var(--bdw-weiss); border:none; border-radius:var(--r-m); box-shadow:var(--schatten); overflow:hidden; transition:box-shadow .16s ease; } #top .bdw-ratgeber .slide-entry:hover{ box-shadow:var(--schatten-hover); } /* Bild wie .bdw-karte-bild: gleiches Format, randabfallend, ohne Enfolds 6-px-Fuge und 3-px-Radius. Ohne `height:100%` am img wirkt weder `aspect-ratio` am umschliessenden noch `object-fit` — das Bild kam mit seinem eigenen Verhaeltnis 1,24 durch und war 95 px zu hoch. */ #top .bdw-ratgeber .slide-image{ display:block; aspect-ratio:16/10; overflow:hidden; margin:0; border-radius:0; background:var(--bdw-sand); } #top .bdw-ratgeber .slide-entry img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:0; transition:transform .4s ease; } #top .bdw-ratgeber .slide-entry:hover img{ transform:scale(1.03); } /* DAS EIGENTLICHE POLSTER — .bdw-karte-inhalt, gleicher Wert (--s7 = 32 px). Die Flex-Kette muss DREI Ebenen tief gehen, weil "Weiterlesen" zwei Ebenen tiefer sitzt als die Fusszeile der Startseitenkarte: .slide-entry > .slide-content > .slide-entry-excerpt > .read-more-link Fehlt eines der beiden `flex:1 1 auto`, bleibt das `margin-top:auto` unten wirkungslos und die Verweise stehen nicht mehr auf einer Linie. */ #top .bdw-ratgeber .slide-content{ display:flex; flex-direction:column; flex:1 1 auto; padding:var(--s7); } #top .bdw-ratgeber .slide-entry-excerpt{ display:flex; flex-direction:column; flex:1 1 auto; font-size:16px; line-height:1.6; color:var(--bdw-text); overflow:visible; text-overflow:clip; } /* KEIN `max-width:var(--mass-eng)` wie bei `.bdw-karte p`: dort deckelt es nichts (Karte 286 px innen), hier waeren es 453 px gegen 421 px — 32 px Leerlauf rechts, der wie ein Fehler aussieht. 453 px sind bei 16 px rund 53 Zeichen und liegen damit im Lesemass. */ #top .bdw-ratgeber .read-more-link{ margin-top:auto; padding-top:var(--s5); } /* Enfolds leerer Fuss wuerde als Flex-Element eine Zeile Luft erzeugen */ #top .bdw-ratgeber .entry-footer{ display:none; } /* Titel: ZWEI IDs, sonst gewinnt `#top #wrap_all .all_colors h3` (2,1,1) aus Abschnitt 3 mit 24 px und margin-top 48 px. Gleiche Groesse wie .bdw-karte h3. */ #top #wrap_all .bdw-ratgeber .slide-entry-title{ font-size:20px; line-height:1.28; letter-spacing:0; margin:0 0 var(--s1); } #top .bdw-ratgeber .slide-entry-title a{ text-decoration:none; color:var(--bdw-tinte); } #top .bdw-ratgeber .slide-entry-title a:hover{ color:var(--bdw-moos); text-decoration:underline; } #top .bdw-ratgeber .av-vertical-delimiter{ display:none; } /* Das Datum steht da, wo auf der Startseitenkarte der Preis steht — deshalb dieselbe Groesse und derselbe Abstand, nur in der Nebentextfarbe. Enfold haengt der Zeile ausserdem `padding-bottom:10px` an. */ #top .bdw-ratgeber .slide-meta{ padding:0; margin:0 0 var(--s3); } #top .bdw-ratgeber .slide-meta time{ font-size:15px; line-height:1.4; color:var(--bdw-leise); } /* 44 px Antippflaeche fuer "Weiterlesen" (gemessen 33 px). */ #top .bdw-ratgeber .read-more-link a, #top .bdw-ratgeber .more-link{ display:inline-block; min-height:44px; padding:11px 0 0; font-size:16px; font-weight:600; } /* Auf dem Telefon eine Karte je Zeile. Der Umstieg auf Raster raeumt dabei einen alten Spezifitaetskampf mit ab: postslider.css setzt `margin:0` mit (2,4,0) auf jede ungerade Karte und schlug damit die frueher hier stehende Regel (2,3,0) — gemessen 0 px zwischen den zwei Karten eines Wraps und 40 px zwischen den Wraps. Mit `gap` haengt der Abstand nicht mehr an Aussenabstaenden. Die Breite braucht weiterhin zwei IDs und eine Klasse mehr als `.responsive #top #wrap_all .slide-entry{width:48%}`. */ @media only screen and (max-width:767px){ /* `gap` MUSS hier mit: .bdw-raster faellt auf dem Telefon auf --s4 zurueck. Ohne die Zeile stuenden die zwei Karten INNERHALB eines Wraps 24 px auseinander und die Wraps untereinander 16 px — ein Rhythmus 24/16/24, der die vier Karten in zwei Paare zerlegt, die es gar nicht gibt. */ #top .bdw-ratgeber .slide-entry-wrap{ grid-template-columns:1fr; gap:var(--s4); margin-bottom:var(--s4); } .responsive #top #wrap_all .bdw-ratgeber .slide-entry{ width:auto; margin:0; } } /* Enfold legt in jede Rasterkarte eine unsichtbare Hilfszeile mit der Bild-URL (span.hidden, position:absolute, visibility:hidden). Sie ist 345-394 px breit und laesst jede Karte "ueber ihre Kante laufen" — sichtbar ist davon nichts, aber jede Breitenmessung meldet es. Auf 1 px gestutzt. */ #top .bdw-ratgeber .slide-entry .hidden{ max-width:1px; max-height:1px; overflow:hidden; } /* Bewegung reduzieren — dieselbe Zusage wie bei .bdw-karte in Abschnitt 19. */ @media (prefers-reduced-motion:reduce){ #top .bdw-ratgeber .slide-entry:hover img{ transform:none; } }