/* ==========================================================================
Seiten-Feinschliff.
Diese Regeln greifen NUR, wenn am Seiten-Attribut „Förderberatung-Feinschliff"
der Haken gesetzt ist. Sie korrigieren Kleinigkeiten an vorhandenen Theme-Blöcken
und fassen die Theme-CSS nirgends global an.
========================================================================== */
/* FAQ und Beratungs-Box arbeiten im Theme mit Außenabstand (136px Desktop, 48px mobil).
Zwischen zwei farbigen Sektionen scheint dadurch der Seitenhintergrund als Streifen
durch. Abstand nach innen verlegen, dann stoßen die Farbflächen sauber aneinander. */
.page-foerderberatung .faq-mini-section{
margin-top:0;
margin-bottom:0;
padding:clamp(48px,7vw,104px) 0;
}
.page-foerderberatung .contact-form-section{margin-top:0}
/* Die Herz-Sektion (hero-with-images) hat im Theme nur oben Abstand und keinen
eigenen Hintergrund. Auf dieser Seite soll sie weiß sein und gleichmäßig atmen. */
.page-foerderberatung .hero-with-images-section{
background:var(--background-white);
padding:clamp(64px,8vw,104px) 0;
}
/* Die Hero-Überschrift ist per Filter ein h1 (siehe includes/seo.php), damit die Seite
überhaupt eines hat. Das Theme setzt Schriftgrößen aber über die Tags: h1 ist
clamp(37px,6vw,50px), h2 clamp(28px,6vw,37px). Ohne diese Regel würde die Überschrift
allein durch den Tagwechsel größer. Wir halten die h2-Werte des Themes fest, damit die
Seite genau so aussieht wie in der freigegebenen Vorschau. */
.page-foerderberatung h1.media-text__title{
font-size:clamp(28px,6vw,37px);
line-height:1.2973;
}
/* --------------------------------------------------------------------------
Premium-Feinschliff (Body-Klasse page-premium)
-------------------------------------------------------------------------- */
/* Auf dieser Seite ist die Hero-Überschrift per Filter ein h1, damit die Seite eines hat.
Gleiche Begründung und gleiche Größenfixierung wie oben. */
.page-premium h1.media-text__title{
font-size:clamp(28px,6vw,37px);
line-height:1.2973;
}
/* Diese drei Theme-Blöcke haben gar kein Feld für die Hintergrundfarbe und erben
deshalb den der Seite. Auf dieser Seite müssen sie ausdrücklich weiß sein:
Das Logo-Karussell, weil ein Teil der Partnerlogos selbst einen weißen Hintergrund
hat und auf einer Farbfläche als Kasten stehen würde. FAQ und Newsletter, weil sie
im Farbrhythmus der Seite die ruhigen Flächen sind. */
.page-premium .partners-carousel,
.page-premium .faq-mini-section,
.page-premium .subscribe-block{
background-color:var(--background-white);
}
/* Der Beratungsblock arbeitet im Theme mit Außenabstand (48px mobil, 136px Desktop).
Weil er eine eigene Hintergrundfarbe hat und die Stimmen darüber ebenfalls, scheint
in dieser Lücke der Seitenhintergrund als heller Streifen durch. Abstand nach innen
verlegen, dann stoßen die Farbflächen sauber aneinander. */
.page-premium .contact-form-section{
margin-top:0;
margin-bottom:0;
padding-top:clamp(40px,6vw,88px);
}
/* Der FAQ-Block bringt im Theme nur Außenabstand mit und klebt dadurch an der Sektion
darüber, sobald die eine eigene Hintergrundfarbe hat. Abstand nach innen verlegen,
dann atmet die Sektion und die Farbflächen stoßen sauber aneinander. */
.page-premium .faq-mini-section{
margin-top:0;
margin-bottom:0;
padding:clamp(64px,8vw,104px) 0;
}
/* Umgekehrter Fall: Intro- und Premium-Partner-Block rendern fest ein h1 und hatten damit
die zweite und dritte h1 der Seite. Der Filter macht daraus h2. Damit das Aussehen
unverändert bleibt, bekommen genau diese beiden Überschriften die h1-Größe des Themes
zurück (h1 ist clamp(37px,6vw,50px)/1.12, h2 wäre clamp(28px,6vw,37px)/1.2973). */
.page-premium .into-block h2,
.page-premium .premium-partner-block > .container > h2{
font-size:clamp(37px,6vw,50px);
line-height:1.12;
}
/* Die 2x2-Kacheln im media-text-Block („Du musst Dich nirgends bewerben") gehen im Theme
zwischen 992px und 768px auf eine Spalte, ab 768px aber wieder auf zwei und erst unter
350px endgültig auf eine. Auf dem Telefon stehen dadurch zwei Spalten von rund 150px
nebeneinander, in denen deutsche Komposita in Drei-Wort-Zeilen umbrechen und die vier
Punkte paarweise auseinanderreißen. Auf dieser Seite deshalb ein Punkt pro Zeile.
Die max-width der Titel stammt aus dem Zweispalter und würde sonst kurz umbrechen. */
@media only screen and (max-width:767px){
.page-premium .media-text-section .media-text__content-holder .block-2x2-items .block-2x2-item{
grid-column:span 12;
}
.page-premium .media-text-section .media-text__content-holder .block-2x2-items .block-2x2-item .title{
max-width:none;
}
}
/* --------------------------------------------------------------------------
Erfahrungsberichte (Seite 38684)
Zwei Theme-Blöcke stehen dort zwischen den Blöcken dieses Plugins und bringen
eigene, abweichende Abstände mit. Gemessen am 02.08.2026 bei 1440px: der senkrechte
Rhythmus der Seite schwankte dadurch zwischen 62px und 192px, also um den Faktor 3,1.
Alles hier hängt an der Seiten-ID und wirkt nirgends sonst.
-------------------------------------------------------------------------- */
/* Die Ratings-Section hatte oben und unten 0px: das Theme setzt den Abstand über
margin, und der fällt zwischen zwei Sections mit eigener Hintergrundfarbe weg.
Abstand nach innen verlegen, dann stoßen die Farbflächen sauber aneinander. */
.page-id-38684 .ratings-block-section{
margin-top:0;
margin-bottom:0;
padding:clamp(56px,8vw,96px) 0;
}
/* Im Feld `content_text` stand ursprünglich nur die Quellenzeile, deshalb setzt das Theme
es auf 14px/24. Das ist genau die Größe, die auf dieser Seite sonst Quellenangaben unter
Zitaten tragen. Seit dem 02.08.2026 steht dort der Fließtext der Section, und der las
sich in Fußnotengröße wie Kleingedrucktes. 18px/1.6 ist die Fließtextgröße der übrigen
Seite, damit hat sie eine statt drei.
Am Layout ändert das nichts: gemessen bei 1280px treibt die Siegelspalte die Höhe, beide
Spalten stehen bei 14px wie bei 18px auf 440px, die Section bleibt bei 720px. */
.page-id-38684 .ratings-block__text p{
font-size:18px;
line-height:1.6;
}
/* „Fernstudium-direkt" brach auf dem Telefon am Bindestrich um, der Portalname stand dann
auf zwei Zeilen. Die drei Namen sind höchstens 126px breit und passen damit auch bei
320px Fenster in eine Zeile, ein Überlauf ist ausgeschlossen. */
.page-id-38684 .ratings-block__text a{
white-space:nowrap;
}
/* 75px oben, während der Rest der Seite auf 96px läuft. */
.page-id-38684 .contact-form-section{
margin-top:0;
padding-top:clamp(56px,8vw,96px);
}
/* Unter 992px beginnt der Container des Kontaktformulars 20px vom Rand, jeder andere
Container auf der Seite 16px. Auf dem Telefon sieht man die 4px als Versatz genau
dort, wo die Seite um die Adresse bittet. */
@media only screen and (max-width:991px){
.page-id-38684 .contact-form-section .container{padding-left:16px;padding-right:16px}
}
/* Nummerierte Listen im media-text-Block: Folgezeilen bündig unter dem Text
statt unter der Ziffer. */
.page-foerderberatung .media-text__content ul.iterations{gap:1.5rem}
.page-foerderberatung .media-text__content ul.iterations li{
display:flex !important;
flex-direction:row !important;
align-items:flex-start;
gap:20px;
}
.page-foerderberatung .media-text__content ul.iterations li .iteration{
margin-right:0;
flex-shrink:0;
}
@media only screen and (max-width:767px){
.page-foerderberatung .media-text__content ul.iterations li{gap:14px}
}
/* --------------------------------------------------------------------------
Fragen-Feinschliff (Body-Klasse page-fragen)
Grundlage ist der freigegebene Entwurf fragen-seite/Fragen-Seite.dc.html. Er
arbeitet mit genau drei Flaechen und einem einzigen vertikalen Mass:
#F5EFE6 Hero, Kennzahlen, Erfahrungen (Einstieg und Beweis)
#F7F5F1 Ablauf, Pruefung, Einladung (die sachlichen Wege)
#FFFFFF die vier Fragenkataloge, Kurse
96px oben und unten, margin 0, an jeder Section
Live gemessen waren es dagegen sieben verschiedene Abstaende (40, 64, 76.8,
80, 96, 108 und 120px), teils als margin statt als padding. Zwischen zwei
farbigen Sections scheint dadurch der Seitenhintergrund als Streifen durch,
und die Seite wirkt zusammengesetzt statt gesetzt. Siehe dazu den Absatz
„Farbige Nachbarsektionen" in guidelines/section-standards.md.
-------------------------------------------------------------------------- */
/* Die Fragenkataloge tragen im Theme gar keinen Abstand. Sie stehen zwischen
den farbigen Sections und muessen die Luft selbst mitbringen. */
.page-fragen .faq-section{
margin:0;
padding:clamp(56px,8vw,96px) 0;
}
/* Kennzahlen kamen auf 76.8px, Kurse auf 108/80, die Kontaktoptionen auf 40/40
plus 80px Aussenabstand. Alles auf dasselbe Mass, Abstand nach innen. */
.page-fragen .kennzahlen-section,
.page-fragen .additional-options,
.page-fragen .courses{
margin:0;
padding:clamp(56px,8vw,96px) 0;
}
/* Das Frageformular arbeitete mit 64px Aussenabstand oben und unten. */
.page-fragen .contact-form-section{
margin:0;
padding:clamp(56px,8vw,96px) 0;
}
/* Der Ablauf-Block laesst unten bewusst Platz fuer das Bild, das buendig
abschliesst. Nur oben angleichen. */
.page-fragen .ablauf-section{padding-top:clamp(56px,8vw,96px)}
/* Die Themenkacheln: im Entwurf eine ruhige weisse Flaeche unter dem Hero.
Das gruene Hintergrundbild ist ueber das Feld entfernt, hier steht die
Flaeche selbst. Die Kacheln bleiben weiss und heben sich ueber ihren Rand
ab, damit sie nicht in der Flaeche verschwinden. */
.page-fragen .category-block{
margin:0;
padding:clamp(48px,6vw,64px) 0 clamp(24px,4vw,32px);
background-color:var(--background-white);
}
.page-fragen .category-block__item{
border:1px solid var(--background-borders);
}
/* Die Ueberschrift des categories-Blocks ist per Filter (includes/seo.php) von
h1 zu h2 geworden, damit die Seite genau ein h1 hat. Das Theme setzt die
Schriftgroessen ueber die Tags, ohne diese Regel wuerde die Ueberschrift
allein durch den Tagwechsel kleiner. Die h1-Werte des Themes festhalten. */
.page-fragen h2.category-block__title{
font-size:clamp(37px,6vw,50px);
line-height:1.2;
}
/* --- Der Ausloeser im Accordion ---
includes/accordion.php setzt einen echten button in die Ueberschrift. Er muss
aussehen wie die Ueberschrift vorher, sonst aendert sich das Bild der Seite.
Trefferflaeche mindestens 44px, Fokus sichtbar und nie unterdrueckt
(guidelines/faq-accordion.md, Abnahmekriterien 5 und 10). */
.page-fragen .question .question__trigger{
display:flex;align-items:center;justify-content:space-between;gap:16px;
width:100%;min-height:44px;margin:0;padding:0;
background:none;border:0;cursor:pointer;text-align:left;
font:inherit;color:inherit;letter-spacing:inherit;
}
/* Der Umriss ist bewusst NICHT --orange-400, obwohl die Zustaende-Tabelle in
guidelines/faq-accordion.md das so schreibt. #ffaf54 auf der Kartenflaeche
#f7f5f1 ergibt 1,67:1, gegen Weiss 1,82:1. Abnahmekriterium 5 derselben Datei
verlangt mindestens 3:1, die Guideline widerspricht sich hier also selbst.
--typography-black kommt auf ueber 8:1 und ist der Ton, den auch die uebrigen
Bloecke des Plugins fuer Fokus verwenden. Aufgefallen im Review am 02.08.2026,
die Guideline gehoert an dieser Stelle korrigiert. */
.page-fragen .question .question__trigger:focus-visible{
outline:2px solid var(--typography-black);
outline-offset:2px;
}
/* Das Theme setzt `.faq-section .question span{display:block;max-width:calc(100% - 22px)}`.
Der Fragetext ist dort schon ein span, unser .question__text liegt darum: die
Breite wuerde sich zweimal um 22px verkuerzen. Deshalb hier zuruecknehmen, die
Verkuerzung fuer das Plus-Zeichen macht weiterhin der innere span. */
.page-fragen .question .question__text{flex:1 1 auto;min-width:0;max-width:none}
/* Zwei Videos fuellen die Wischreihe nicht.
Der Block ist auf viele Kacheln ausgelegt: .vt-card steht auf flex:0 0 340px
und die Reihe scrollt. Auf /fragen/ stehen genau zwei Videos, gemessen am
02.08.2026 blieben dadurch 658 von 1425px Containerbreite rechts leer. Hier
duerfen die beiden Kacheln deshalb wachsen, gedeckelt, damit das 16:9-Motiv
nicht ins Riesenhafte geht. Ab drei Kacheln greift die Regel nicht mehr,
dann traegt die Reihe sich selbst. */
@media(min-width:992px){
/* Nur wenn es KEINE dritte Kachel gibt. Kommt spaeter ein Video dazu, greift
die Regel von selbst nicht mehr und die wischbare Reihe uebernimmt wieder.
Browser ohne :has() bekommen ebenfalls die Reihe, das ist der richtige
Rueckfall und nicht der kaputte. */
.page-fragen .video-testimonials__grid:not(:has(.vt-card:nth-child(3))){
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
overflow:visible;
}
.page-fragen .video-testimonials__grid:not(:has(.vt-card:nth-child(3))) .vt-card{
min-width:0;
max-width:none;
}
}
/* Hier stand bis 04.08.2026 eine Sonderbehandlung der Videokacheln: eine Kontur, damit sie
mit den Zitatkarten des `erfahrungen`-Blocks ein Feld aus vier Karten bilden, und dazu ein
Innenabstand, den die Kontur nötig machte.
Beides ist entfernt, weil die Voraussetzung weggefallen ist: **der `erfahrungen`-Block
steht gar nicht mehr auf dieser Seite.** Die Kachel hatte damit kein Gegenstück mehr und
war die einzige Fläche der ganzen Seite mit Rahmen ohne Füllung. Gemessen am 04.08.2026
trugen alle übrigen Kartenarten (Sorge-Paare, Kontaktoptionen, Kurskacheln) eine gefüllte
Fläche und keine Kante.
Ohne diese Regeln greift wieder das Aussehen aus dem Block selbst, dasselbe wie auf
/erfahrungsberichte/. Das ist auch der Grund, warum hier nichts Neues steht: Eine Kachel,
die überall von allein gleich aussieht, muss nicht je Seite gepflegt werden. Wer sie
irgendwo wieder einrahmt, muss den Innenabstand mitbringen, sonst klebt der Text am
Rahmen. */
/* Der Erfahrungs-Block schliesst mit Abstand nach unten ab, der Video-Block
setzt oben ohne an. Zwischen beiden soll genau ein Kartenabstand stehen,
nicht ein voller Sectionabstand. */
.page-fragen .erfahrungen-section{padding-bottom:24px}
/* --------------------------------------------------------------------------
Blog-Beitrag-Feinschliff (alle Beitraege, templates/template-single-blog.php)
GEMESSEN 26.08.2026 auf /blog/arbeitgeber-weiterbildung-ueberzeugen/ (mit
?nowprocket=1, 5928 geparste Regeln): ein globaler Reset (style.min.css,
`*{margin:0;padding:0}`) nimmt jedem Flusselement seinen Abstand. p-p, p-h2,
h2-p, p-ul, ul-p, p-table und table-p standen alle bei 0px Luecke -- der
Beitrag las sich als Textwand, nicht nur an den Ueberschriften.
Das Theme haelt die Ueberschriften zusaetzlich mit margin-top:0 !important
fest (_blog-single.scss:119). Deshalb kommt der Abstand hier als
margin-bottom auf das VORANGEHENDE Element -- das ist von der Regel nicht
beruehrt und gewinnt gegen den *{margin:0}-Reset schon ueber Spezifitaet,
ganz ohne eigenes !important. */
.single-blog-post .blog-content>*{margin-bottom:24px}
.single-blog-post .blog-content>:last-child{margin-bottom:0}
.single-blog-post .blog-content>h2,
.single-blog-post .blog-content>h3,
.single-blog-post .blog-content>h4{margin-bottom:16px}
/* Vor einer Ueberschrift zusaetzliche Luft, sonst haengt sie nur am Standard-
Absatzabstand und wirkt nicht wie ein neuer Abschnitt. `:has()` traegt in
allen aktuellen Browsern (Chrome/Edge/Firefox/Safari seit 2023); ohne
`:has()` bleibt es beim normalen 24px-Absatzabstand -- der richtige
Rueckfall, nicht ein kaputtes Layout. */
.single-blog-post .blog-content>*:has(+h2),
.single-blog-post .blog-content>*:has(+h3),
.single-blog-post .blog-content>*:has(+h4){margin-bottom:40px}
/* Inhaltsverzeichnis ohne die ID `toc_container`.
GEMESSEN 26.08.2026 auf der Live-Seite: Das Plugin Table of Contents Plus
ist aktiv und laedt sein CSS auf jedem Beitrag, baut hier aber gar kein
Verzeichnis (die Beitraege laufen als `page`, TOC+ greift nur bei `post`).
Zwei seiner Regeln haben unser eigenes Markup zerlegt, weil es die ID trug:
#toc_container li{padding:0} -> Aufzaehlungspunkt sass im ersten
Buchstaben (Denis, zweimal)
#toc_container a{text-decoration:none} -> Eintraege sahen aus wie toter
Text, gemessen: keine Unterstreichung
Dazu haengt das Plugin einen Klick-Handler an `#toc_container a`. Ob der den
Sprung zusaetzlich stoert, ist NICHT belegt -- der Gegentest lief in einem
Hintergrund-Tab, in dem Chrome weiches Scrollen ohnehin unterdrueckt.
Mit eigener Klasse greift keine der Regeln mehr, der Browser springt nativ
(im sichtbaren Tab nachgestellt: 800 -> 5578, Ziel 128px unter der Kante)
und die Eintraege sehen aus wie die uebrigen Links im Fliesstext. Die Liste
nutzt `wp-block-list` -- dieselbe Theme-Regel, die auch den Fliesstext-Listen
ihre Punkte gibt. blog_formatierung.py schreibt das Markup. */
.single-blog-post .blog-content .blog-toc{
background:var(--background-white);
border:1px solid var(--background-borders);
border-radius:12px;
padding:24px 32px;
}
.single-blog-post .blog-content .blog-toc__titel{
font-weight:700;
margin-bottom:12px;
}
/* Die Eintraege sind Navigation, nicht Fliesstext, und stehen deshalb eine
Stufe kleiner. GEMESSEN 26.08.2026 bei 375px: in Fliesstextgroesse lief der
laengste Eintrag ueber drei Zeilen und der Kasten wurde schwerer als der
Beitrag, den er erschliessen soll. */
.single-blog-post .blog-content .blog-toc li{margin-bottom:10px;font-size:17px;line-height:1.5}
.single-blog-post .blog-content .blog-toc li:last-child{margin-bottom:0}
.single-blog-post .blog-content .blog-toc a{
color:var(--typography-dark-grey);
text-decoration:underline;
text-underline-offset:3px;
}
.single-blog-post .blog-content .blog-toc a:hover{color:var(--typography-black)}
/* Auf dem Telefon bleiben von 375px nach Seitenrand und Kastenrand nur 278px
Textbreite -- der Innenrand wird deshalb schmaler. */
@media (max-width:767px){
.single-blog-post .blog-content .blog-toc{padding:20px}
}
/* Der Kopf der Seite ist fixiert (69px). Ohne Abstand landet jedes Sprungziel
des Inhaltsverzeichnisses genau darunter und die Ueberschrift ist verdeckt. */
.single-blog-post .blog-content>[id]{scroll-margin-top:96px}
/* Quellenblock: Wiederverwendung der vorhandenen Kleintext-Klasse text-body-4
(common/_base.scss, 14px/1.71) -- genau die Klasse, die .wp-element-caption
im selben Theme schon fuer Bildunterschriften nutzt. Die Klasse liefert die
Schriftgroesse von selbst, hier nur die Farbe und der Listen-Einzug.
blog_formatierung.py setzt .blog-quellen um alles ab der "Quellen"-Ueberschrift. */
.single-blog-post .blog-content .blog-quellen{color:var(--typography-light-grey)}
.single-blog-post .blog-content .blog-quellen ol,
.single-blog-post .blog-content .blog-quellen ul{padding-left:1.2em}
/* Breadcrumb ueber dem Beitrag (includes/blog-thema.php haengt das Markup per
the_content-Filter an). .breadcrumbs ist im Theme schon gestaltet
(_blog-single.scss: margin-bottom 80px), nur Link/Trenner-Farben fehlen noch --
die gab es nirgends im Theme, weil die Klasse bisher nie gerendert wurde. */
.single-blog-post .breadcrumbs a{color:var(--typography-dark-grey);text-decoration:underline;text-underline-offset:3px}
.single-blog-post .breadcrumbs a:hover{color:var(--typography-black)}
.single-blog-post .breadcrumbs .separator{margin:0 6px;color:var(--typography-light-grey)}
.single-blog-post .breadcrumbs .current{color:var(--typography-dark-grey)}
/* Absaetze INNERHALB eines .quote-Kastens (z. B. die E-Mail-Vorlage).
Die Abstandsregeln oben greifen nur auf direkte Kinder von .blog-content --
Absaetze im Kasten sind Enkel und liefen deshalb zusammen. Das Theme setzt
dort zusaetzlich margin-top:0 !important, also wieder ueber margin-bottom.
Denis 26.08.2026: "mach noch zw betreff und mailtext nen abstand". */
.single-blog-post .blog-content .quote>p{margin-bottom:14px}
.single-blog-post .blog-content .quote>p:last-child{margin-bottom:0}
/* Die Betreffzeile ist der Kopf der Vorlage und wird abgesetzt. */
.single-blog-post .blog-content .blog-mailvorlage>p:first-child{
padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--orange-300)}
/* ==========================================================================
Karriere-Check-Seite (1660): Feinschliff an Theme-Bloecken (Audit 09.09.2026).
========================================================================== */
/* Sektionsrhythmus 96px; das FAQ arbeitet im Theme mit margin und liess ein weisses Loch vor der Lila-Flaeche.
LOOP RUNDE 3 10.09.2026, Punkt 4: die padding-Deklaration ist seit der Rhythmusregel weiter unten
(main > section, Runde 2) doppelt -- die Regel dort hat durch main > section:not(...) ohnehin mehr
Klassen und gewinnt bereits. Nur die margin-Reset bleibt hier, den setzt die Rhythmusregel nicht. */
.page-id-1660 .faq-mini-section{margin-top:0;margin-bottom:0}
.page-id-1660 .contact-form-section{margin-top:0}
/* Videos haengen ohne eigene Ueberschrift an den Rezensionen: gleiche Flaeche, oben ohne Abstand (Denis 09.09.). */
.page-id-1660 section.video-testimonials-section{background-color:#f7f5f1;padding-top:0}
/* FAQ-Button fuehrt weg von der Seite und stand als oranger Primaerbutton direkt vor dem Formular.
LOOP RUNDE 2 10.09.2026, Punkt 4: nicht mehr als eigener unterstrichener Textlink, sondern
im Bild des Hausbauteils .tlink (assets/hubs.css Zeile 1503), damit alle Tertiaerlinks der
Seite (Hero, Wege-Panel, Beweisstrecke, FAQ) gleich aussehen. Der Block wird auf dieser Seite
als einziger mit gesetztem `knopf`-Feld gerendert (hoeher_block_button gibt bei leerer URL
nichts aus), deshalb hier als Seitenregel statt als Aenderung an blocks/faq/index.php, das
auch auf anderen Hubs laeuft. */
.page-id-1660 .faq-mini__content-holder .button{
background:none;border:0;box-shadow:none;padding:0;height:auto;
min-height:44px;display:inline-flex;align-items:center;gap:12px;
font-family:var(--font4);font-weight:600;font-size:14px;letter-spacing:.06em;
text-transform:uppercase;color:var(--typography-black);text-decoration:none;
}
.page-id-1660 .faq-mini__content-holder .button::after{
content:"";flex:0 0 auto;width:28px;height:28px;
background:url('data:image/svg+xml;utf8,') no-repeat 50%/28px 28px;
}
.page-id-1660 .faq-mini__content-holder .button:hover,
.page-id-1660 .faq-mini__content-holder .button:focus-visible{background:none;color:var(--primary-300);text-decoration:none}
/* Beratungsformular: ein Absendebutton statt zwei (Hinweis steht dann ueberall UEBER dem Button). */
/* Sichtbare Labels, Token-Rand, ruhige Feldhoehe, sichtbarer Fokus (Theme setzt outline:none). */
/* Nicoles Namensschild: Text nie ungeschuetzt auf dem Motiv, Flaeche darunter. */
/* =====================================================================================
LOOP RUNDE 1 10.09.2026 -- Denis-Direktion runde1-direktion.md
===================================================================================== */
/* Punkt 3a (Runde 1) ist entfallen: LOOP RUNDE 2 10.09.2026, Punkt 8 gibt die Metazeile in
blocks/karriere-check/index.php nur noch aus, wenn das Rohfeld dauer_hinweis wirklich einen
Wert traegt. Sie steht auf dieser Seite damit gar nicht mehr im Markup, die Ausblendregel
ist ueberfluessig geworden. */
/* Punkt 4: Eckdaten fressen mobil 360px zwischen Hero und Sprungnav (vier gestapelte
Zeilen, hubs.css .ed__grid geht unter 560px auf 1fr). Zweispaltiges Band statt Sektion,
kleinere Typstufen und weniger Innenabstand -- die vier Fakten bleiben stehen
(Denis-Entscheidung: schrumpfen, nicht streichen), nur die Flaeche schrumpft. */
@media (max-width:560px){
.page-id-1660 .ed__grid{grid-template-columns:repeat(2,1fr);gap:8px 20px;padding:16px 0}
.page-id-1660 .ed__wert{font-size:20px;line-height:1.1}
.page-id-1660 .ed__label{font-size:13px;line-height:1.3;margin-top:2px}
}
/* Punkt 5: die Sticky-Sprungnav zeigt am Handy keinen CTA (hubs.css blendet .sn__cta unter
900px komplett aus) und der Beleg (Sterne/Text) ist am Handy ohnehin ueberfluessig, weil
derselbe Beleg schon im Hero steht. Sichtbar schalten, aber ohne den Beleg -- der bleibt
naemlich NICHT breitenlos und wuerde die Leiste seitlich sprengen. Die Marken sind bereits
in seite_bauen() auf vier gekuerzt (Check, Wege, Gehalt, Beratung), damit die Zeile ohne
zusaetzliches Ausblenden passt. Die 44px Mindesthoehe des Buttons kommt unveraendert aus
hubs.css (.sn__cta .button{min-height:44px}) -- Touch-Ziel-Pflicht aus den Leitplanken geht
vor der 40px aus der Direktion. */
@media (max-width:767px){
.page-id-1660 .sn__cta{display:flex}
.page-id-1660 .sn__trust{display:none}
}
/* Punkt 9b: die Bildspalte des Beratungsformulars stand am Handy UNTER dem Absendebutton,
weil das Theme dort mit column-reverse arbeitet (_contact-form.scss). Bildspalte per
order vor die Feldspalte ziehen, ohne column-reverse selbst anzufassen (theme-weit). */
@media only screen and (max-width:991px){
.page-id-1660 .contact-form-section .container .left-image{order:1}
}
/* Punkt 10b (Runde 1) ist entfallen: LOOP RUNDE 2 10.09.2026, Punkt 2 rendert den zweiten
Hero-CTA jetzt direkt als .tlink (blocks/hero-hub/index.php), die seitenlokale Kopie der
.tlink-Werte ist damit ueberfluessig. Sie verlor am Handy gegen die Theme-Regel
.button{display:flex} (kein !important auf display:inline-flex), auf 1440px stimmte sie,
bei 390px riss der Anker in zwei Zeilen. Mit der echten .tlink-Klasse aus hubs.css gibt es
keine Kopie mehr, die verlieren kann. */
/* Punkt 10c: Blockabstand unter der Vertrauenszeile am Handy verkleinern, damit das
Heromotiv oberhalb von 700px beginnt (zusammen mit dem gekuerzten Untertitel, Punkt 10a). */
@media (max-width:767px){
.page-id-1660 .eh__text{padding-bottom:1rem}
.page-id-1660 .eh__menschen{margin-top:20px}
}
/* Punkt 11: die FAQ-Kopfspalte liess bei 1440px 564px Flaeche leer (Ueberschrift+Link nur
172px hoch neben 736px Akkordeon). Sticky haelt die Spalte gefuellt, keine Bewegung. */
@media (min-width:992px){
.page-id-1660 .faq-mini__content-holder{position:sticky;top:96px;align-self:start}
}
/* Punkt 12: bei 1024px beginnen H1, Eckdaten und Sprungnav bei x=0 -- der Theme-Container
hat in diesem Bereich keinen seitlichen Innenabstand. Ursache liegt im Theme (gemeldet),
nicht auf dieser Seite. Seitenlokaler NOTNAGEL, kein Fix an der Ursache. */
@media (min-width:992px) and (max-width:1199px){
.page-id-1660 .container{padding-left:32px;padding-right:32px}
}
/* =====================================================================================
LOOP RUNDE 2 10.09.2026 -- Review runde1-review.md
===================================================================================== */
/* Punkt 3: die Sticky-Sprungnav zeigte am Handy nur noch "Check", weil der jetzt sichtbare
CTA (Punkt 5 aus Runde 1) und die Markenzeile sich dieselbe Leiste teilen mussten --
gemessen 102px Fenster fuer 281px Inhalt. Vier von sechs Marken waren vor dem Umbau
sichtbar, danach eine von vier. Eine Leiste, die dauerhaft Platz kostet, muss dauerhaft
etwas zeigen: hier gewinnt der CTA, die Markenzeile wird am Handy ausgeblendet statt
halb lesbar seitwaerts zu scrollen. Die vier Anker bleiben ueber Sprungnav-Klicks am
Desktop und ueber die Seite selbst erreichbar. */
@media (max-width:767px){
.page-id-1660 .sn__links{display:none}
.page-id-1660 .sn .container::after{display:none}
.page-id-1660 .sn__cta{flex:1 1 auto;justify-content:center}
}
/* Punkt 6: Sektionsrhythmus vereinheitlichen. Gemessen (oben/unten, 1440px): Spiegel 120/0,
Textstrecke 64/72 (Sektion inzwischen entfallen, Punkt 5), Gehalt 64/64, Ablauf 96/0,
Formular 75/0 -- fuenf verschiedene Werte, 75 nicht auf dem 8-Punkt-Raster. Eine Regel
fuer die ganze Seite statt Einzelfaelle, mit den vier Ausnahmen, die absichtlich anders
atmen: Hero (.eh) und Eckdaten (.ed) haben ihre eigenen, knappen Innenabstaende, die
Videosektion (.video-testimonials-section) haengt bewusst ohne oberen Abstand an den
Rezensionen (Zeile 425) und das Newsletter-Feld (.subscribe-block) wurde in diesem Audit
nicht gemessen. Sprungnav ist ein