/* YOUR CUSTOM STYLES HERE */ /** * Accordion "Str. Daten" (FAQ) — Custom-Element, nicht über YOOtheme-Stylebar * Neutral/themen-agnostisch: keine Markenfarben hartcodiert (inherit + subtile Linie), * damit es jeder Brand-Baseline folgt. */ [uk-accordion] .el-item { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } [uk-accordion] .el-item:first-child { border-top: 1px solid rgba(0, 0, 0, 0.1); } [uk-accordion] .uk-accordion-title { font-size: 1.05rem; font-weight: 600; padding: 0.85em 0; color: inherit; } [uk-accordion] .uk-accordion-content { margin-top: 0; padding-bottom: 1.1em; } [uk-accordion] .uk-accordion-title { position: relative; padding-right: 1.5em; } [uk-accordion] .uk-accordion-title::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(0deg); transform-origin: center; transition: transform 0.25s ease; font-size: 1.6em; font-weight: 400; line-height: 1; color: inherit; } [uk-accordion] .el-item.uk-open .uk-accordion-title::after { transform: translateY(-50%) rotate(45deg); } /** * @end Accordion "Str. Daten" */ /** * CF7-Grundlagen * * Der frühere Block an dieser Stelle (Label-Abstand über `uk-form-label`, Optionen als * Flex-Zeile, `inline-flex`-Labels, Kästchen-Versatz für `uk-checkbox`) ist am * 2026-08-12 entfallen. Er stammte aus der Phase, in der die Formulare noch UIkits * Formular-System nutzten, und stand dem portierten Bedien-Element aus ac.kd.design * direkt im Weg: `.wpcf7-form .wpcf7-checkbox label` (0,3,0) schlug die portierte * `.ac-kursgrid label` (0,1,1), die Kurskarten bekamen dadurch zwar Rahmen und * Polsterung, aber `display: inline-flex` und `align-items: center` von hier — sie * sahen deshalb weiter anders aus als im Vorbild. Genau das war Matthias' „sieht * immer noch stark anders aus". * * Übrig bleiben die zwei Regeln, die ac.kd.design an derselben Stelle ebenfalls führt. */ /* Ohne das hat der Wrapper Breite 0 — das Eltern-span ist inline. */ .wpcf7-form .wpcf7-form-control-wrap { display: block; } /* Einwilligungen: langer Text, Kästchen bündig zur ersten Zeile. */ .wpcf7-form .wpcf7-acceptance label { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-weight: 400; cursor: pointer; } /* --------------------------------------------------------------------------- * Hero-Glaspanel — bewusste Custom-CSS-Ausnahme * Entschieden: Matthias Hellmann, 2026-08-04. * Grund: Milchglas (backdrop-filter) kennt YOOtheme nativ nicht. * * Umfang bewusst MINIMAL — nur was YOOtheme nicht nativ kann: * 1. der Glaseffekt selbst, * 2. der Gitter-Versatz (uk-grid zieht die Spalte um den Gutter nach links; da die * Klasse AUF der Spalte sitzt, wandert sonst der Panel-Hintergrund mit hinaus), * 3. die Lesbarkeit des Breadcrumbs auf dem Panel. * Schriftgroessen, Farben und Abstaende kommen NICHT von hier, sondern aus den * Element-Props und dem Styler. Der Bestand ac.kd.design hatte unter derselben Klasse * zusaetzlich font-size/font-weight/color mit !important und zwei sich widersprechende * Basis-Definitionen — bewusst nicht uebernommen. * Breakpoint 959px wie im Bestand. * ------------------------------------------------------------------------- */ .ac-hero-glass { max-width: 680px; padding: 32px 48px; background: rgba(17, 17, 17, .34); backdrop-filter: blur(16px) saturate(125%); -webkit-backdrop-filter: blur(16px) saturate(125%); border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, .25); } /* Ohne das startet der Panel-Hintergrund links ausserhalb des Containers. */ .uk-grid:has(> .ac-hero-glass) { margin-left: 0; } /* Barrierefreiheit: uk-light rendert den Breadcrumb mit rgba(255,255,255,.4). Auf einem halbtransparenten Panel ueber einem Foto ist das zu schwach. */ .ac-hero-glass .uk-breadcrumb > * > *, .ac-hero-glass .uk-breadcrumb > :last-child > * { color: #fff; } .ac-hero-glass .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before { color: rgba(255, 255, 255, .6); } @media (max-width: 959px) { .ac-hero-glass { width: 100%; max-width: 100%; padding: 24px 22px; } } /* --------------------------------------------------------------------------- * Graues Panel hinter der Sidebar-Sektion * 1:1 aus ac.kd.design (.uk-section-default:has(.ac-sidebar) > .uk-container), * dort ebenfalls CSS — nur ohne dessen !important, wir haben keine Gegenregeln. * * Der native Weg wurde am 2026-08-04 an hot-stone GETESTET und verworfen: eine * aeussere einspaltige Row mit style=tile-muted erzeugte die Flaeche zwar korrekt * (uk-tile-muted = #f5f5f5, Frontend und kd/page-get-Round-Trip sauber), **der * YOOtheme-Builder konnte die Seite danach aber nicht mehr oeffnen**. Verschachtelte * Rows sind auf diesem Stack nicht benutzbar — keine verifizierte Referenz nutzt sie. * Nicht erneut versuchen, ohne dass sich die Builder-Version geaendert hat. * * Die Breiten (calc(100% - 48px) / max-width 1500px) stammen aus dem Bestand und * bestimmen die wirksame Inhaltsbreite dieser Sektion. * ------------------------------------------------------------------------- */ .uk-section-default:has(.ac-sidebar) { padding-top: 16px; } .uk-section-default:has(.ac-sidebar) > .uk-container { box-sizing: border-box; width: calc(100% - 48px); max-width: 1500px; margin: 24px auto 64px; padding: 48px 56px 56px; background: #f5f5f5; border-radius: 16px; } @media (max-width: 959px) { .uk-section-default:has(.ac-sidebar) > .uk-container { width: 100%; margin: 24px 0; padding: 32px 20px; border-radius: 0; } } /* --------------------------------------------------------------------------- * Eckdaten-Kachel: Textstile und Symbole * Aus ac.kd.design uebernommen (.ac-eckdaten …), ohne dessen !important. * * Warum CSS: Die Symbole sind SVG-Data-URIs — YOOtheme kann pro Listeneintrag kein * eigenes Icon vergeben. Auch 13px-Grossbuchstaben fuer den Kachel-Kopf gibt es als * Stufe nicht. Flaeche, Rahmen und Rundung der Kachel kommen NICHT von hier, sondern * nativ aus card-default; die Trennlinie ist ein natives divider-Element. * * Symbole existieren fuer 12 Labels (Preis, Abschluss, Dauer, Ort, Beginn, Termine, * Lernformat, Voraussetzung, Foerderung, Probestudium, Praxis, Info). Fuer alle anderen * setzt bau.py bewusst KEINE Klasse — sonst entstuende Einzug ohne Symbol. * ------------------------------------------------------------------------- */ /* Kachel-Kopf: kleine graue Grossbuchstaben (Bestand: .ac-sidebar>.uk-tile .uk-h4) */ .ac-sidebar .uk-card-body > .uk-h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: #616161; font-weight: 600; margin: 0 0 16px; } .ac-eckdaten>.el-item { margin:0 0 14px;padding:0 } .ac-eckdaten .el-title { font-size:13px;color:#616161;font-weight:400;margin:0 0 2px } .ac-eckdaten .el-content { font-size:16px;color:#333 } .ac-eckdaten .el-item>[class*=ac-ic-] { position:relative;padding-left:30px } .ac-eckdaten .el-item>[class*=ac-ic-]::before { content:'';display:block;position:absolute;left:0;top:2px;width:19px;height:19px;background:center/contain no-repeat } .ac-eckdaten .el-item>.ac-ic-lernformat::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3' y='3.5' width='14' height='9.5' rx='1' stroke='%23e2007a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1.5 16.5h17' stroke='%23e2007a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") } .ac-eckdaten .el-item>.ac-ic-dauer::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7.5' stroke='%23e2007a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 5.8V10l3 2' stroke='%23e2007a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") } .ac-eckdaten .el-item>.ac-ic-beginn::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='4' width='15' height='13.5' rx='1.5' stroke='%23e2007a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2.5 8.5h15M6.5 2v4M13.5 2v4' stroke='%23e2007a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") } .ac-eckdaten .el-item>.ac-ic-preis::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2.2 2.2h6.4l9 9-6.4 6.4-9-9z' stroke='%23e2007a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='6.4' cy='6.4' r='1.2' fill='%23e2007a' stroke='none'/%3E%3C/svg%3E") } .ac-eckdaten .el-item>.ac-ic-abschluss::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 1.5h7.5L16 5v13.5H5z' stroke='%23e2007a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.5 1.5V5H16M7.5 9.5h5M7.5 12.5h5' stroke='%23e2007a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") } .ac-eckdaten .el-item>.ac-ic-foerderung::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 10.5l4.5 4.5 8.5-9.5' stroke='%23e2007a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") } .ac-eckdaten .el-item>.ac-ic-probestudium::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.8l6.8 2.7v4.8c0 4.3-2.9 7.1-6.8 9.2-3.9-2.1-6.8-4.9-6.8-9.2V4.5z' stroke='%23e2007a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 9.5l2 2 4-4' stroke='%23e2007a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") } .ac-eckdaten .el-item>.ac-ic-voraussetzung::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7.5' stroke='%23e2007a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 9.2v4.3' stroke='%23e2007a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='10' cy='6.3' r='0.9' fill='%23e2007a' stroke='none'/%3E%3C/svg%3E") } .ac-eckdaten .el-item>.ac-ic-praxis::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='7' cy='6.5' r='3' stroke='%23e2007a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1.8 17a5.2 5.2 0 0 1 10.4 0' stroke='%23e2007a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.6 9.3a2.9 2.9 0 1 0-1.2-5.5' stroke='%23e2007a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 12.8a4.6 4.6 0 0 1 4.2 4.2' stroke='%23e2007a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") } .ac-eckdaten .el-item>.ac-ic-ort::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.8a6 6 0 0 1 6 6c0 4.2-6 10.4-6 10.4S4 12 4 7.8a6 6 0 0 1 6-6z' stroke='%23e2007a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='10' cy='7.8' r='2.2' stroke='%23e2007a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") } .ac-eckdaten .el-item>.ac-ic-termine::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='4' width='15' height='13.5' rx='1.5' stroke='%23e2007a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2.5 8.5h15M6.5 2v4M13.5 2v4' stroke='%23e2007a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='10' cy='13' r='1.1' fill='%23e2007a' stroke='none'/%3E%3C/svg%3E") } .ac-eckdaten .el-item>.ac-ic-info::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7.5' stroke='%23e2007a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 9.2v4.3' stroke='%23e2007a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='10' cy='6.3' r='0.9' fill='%23e2007a' stroke='none'/%3E%3C/svg%3E") } /* ========================================================================== AUSNAHME 2026-08-05 — Mega-Dropdown seitenmittig bei fester Breite Entscheid Matthias Hellmann: "CSS-Ausnahme, feste 1080px seitenmittig" Warum nicht nativ: YOOtheme positioniert Dropdowns ueber `config.menu.items..dropdown.align` immer RELATIV ZUM MENUEPUNKT (left|center|right|justify -> pos="bottom-"). Seitenmittig gibt es nur ueber `stretch: "navbar"` — das erzwingt aber die volle Header-Breite und schliesst eine feste Breite aus (die Kombination width+stretch toetet das Dropdown, siehe Binkert-Regel). Feste Breite UND Seitenmitte ist nativ nicht erreichbar; der Bestand loest es mit derselben Technik. Die Regel greift nur im Desktop-Header und nur an den beiden breiten Panels. Die schmalen (280px, Produkte/Ueber uns) bleiben unter ihrem Menuepunkt — dort waere Seitenmitte falsch. `!important` ist noetig, weil UIkit `left`/`width` beim Oeffnen inline setzt. ========================================================================== */ @media (min-width: 960px) { .tm-header .uk-navbar-dropdown[style*="1080px"] { left: calc(50% - min(540px, 46vw)) !important; width: min(1080px, 92vw) !important } .tm-header .uk-navbar-dropdown[style*="960px"] { left: calc(50% - min(480px, 46vw)) !important; width: min(960px, 92vw) !important } } /* -------------------------------------------------------------------------- AUSNAHME 2026-08-05 (Nachtrag) — Dropdown-Ecken unten gerundet Entscheid Matthias: "Ecken links unten und rechts unten abrunden". Warum nicht nativ: Der Styler kennt fuer das Navbar-Dropdown keine Radius-Variable (weder theme.less noch die UIkit-Quellen fuehren eine), und selbst eine solche wuerde alle vier Ecken runden. Das Panel haengt aber unter der Leiste — oben muss es buendig bleiben. Wert 10px = @base-border-radius / @card-border-radius des Projekts. -------------------------------------------------------------------------- */ .tm-header .uk-navbar-dropdown { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px } /* -------------------------------------------------------------------------- AUSNAHME 2026-08-05 (Nachtrag) — Toolbar-Links in Textfarbe Entscheid Matthias: "Bei der Toolbar tele und email selbe Farbe wie die Adresse". Warum nicht nativ: Die Toolbar-Links ziehen ihre Farbe aus @global-link-color (#e2007a) — die gilt site-weit; theme.less kennt keine eigene Toolbar-Link-Variable (nur -background, -color-mode, -font-size, -padding, -border). Der Adresstext laeuft auf der Grundfarbe #616161. Hover bleibt magenta, damit die Links als solche erkennbar bleiben (WCAG 1.4.1: Farbe allein darf nicht das einzige Erkennungsmerkmal sein — deshalb zusaetzlich Unterstreichung beim Hover). -------------------------------------------------------------------------- */ .tm-toolbar a:not(.uk-button) { color: #616161 } .tm-toolbar a:not(.uk-button):hover, .tm-toolbar a:not(.uk-button):focus-visible { color: #e2007a; text-decoration: underline } /* -------------------------------------------------------------------------- AUSNAHME 2026-08-05 — Studiengang-Slider: Button als Pille auf dem Bild Entscheid Matthias: "Der Button soll ja auf dem Bild erscheinen, nicht eigenstaendig untendrunter." (Korrektur meiner ersten Fassung, die ihn lediglich unter dem Bild zentriert hatte.) Warum nicht nativ: `panel-slider` legt das Link-Element immer als eigenen Block UNTER das Medium; einen Prop fuer eine Overlay-Position gibt es nicht. Der Styler kennt fuer Buttons ausserdem nur globale Variablen — eine Regel nur fuer diesen Slider geht deshalb allein ueber den `class`-Prop des Elements (nativ gesetzt: `ac-studiengang-slider`). Aufbau der Kachel: a.uk-card > div.uk-card-media-top(uk-flex-1) + div > div.el-link.uk-button `.uk-card` bringt `position: relative` bereits mit (UIkit) — es genuegt, das letzte Kind aus dem Fluss zu nehmen. Dadurch waechst das Medium ueber die volle Kartenhoehe und der Button liegt darueber. -------------------------------------------------------------------------- */ /* Die Karte traegt `border-radius: 10px` (@card-border-radius), aber kein `overflow` — das formatfuellende Bild laeuft deshalb ueber die gerundeten Ecken hinaus und die Kachel wirkt unten gerade abgeschnitten. Der Bestand setzt an derselben Stelle `overflow: hidden` (.ac-sg-slider .el-item). Ein Prop dafuer hat `panel-slider` nicht. */ .ac-studiengang-slider .uk-card { overflow: hidden } .ac-studiengang-slider .uk-card > :last-child { position: absolute; inset: auto 0 20px; margin: 0; text-align: center; z-index: 1 } /* ========================================================================== Mobile-Dialog: Hauptmenuepunkte hervorheben (Ausnahme 5, 2026-08-12) ========================================================================== Wunsch (Matthias): Ebene 1 groesser und kraeftiger, Trennlinien dazwischen, mehr Abstand. Die Farbe bleibt ausdruecklich, wie sie ist. Warum nicht nativ — belegt, nicht vermutet: YOOtheme hat fuer genau das drei Regler (`menu_style`, `menu_size`, `menu_divider`). Sie erreichen unser Menue aber nicht: Durchgereicht werden sie allein vom Hook `widget_nav_menu_args`, und der feuert laut packages/theme-wordpress-menus/bootstrap.php:18 nur beim WordPress- Navigations-WIDGET. Unser Mobilmenue haengt an der Theme-POSITION `dialog-mobile` und hat damit gar keine Einstellungsflaeche — zwei Config-Schreibversuche (`modules.nav_menu-2.*` und `…._theme.*`) wurden mit `ok: true` quittiert und aenderten am Markup nichts. Der Umweg ueber ein echtes `nav_menu`-Widget rendert isoliert korrekt (`uk-nav-primary uk-nav-divider uk-nav-accordion`), legt die Seite im Bereich `dialog-mobile` aber auf HTTP 500 — zweimal reproduziert, auch nachdem die Theme-Position abgeloest war, die ID-Kollision also ausschied. Ursache nicht feststellbar, auf der Instanz laeuft kein Fehlerlog. Ueber den Styler waere es nur global gegangen (`@nav-default-*`) — das trifft die vier Mega-Menue-Spalten am Desktop, die dieselbe Klasse tragen. Deshalb hier, streng an `#tm-dialog-mobile` gebunden. Die Werte stammen aus dem Theme selbst: Linie und Abstaende sind zeichengleich zu dessen eigener `.uk-nav-divider`-Regel (`margin-top:10px; padding-top:10px; border-top:1px solid #e5e5e7`). Der Kindselektor ist die Absicherung: `.uk-nav > li > a` trifft nur Ebene 1. Die Unterpunkte haengen in `ul.uk-nav-sub`, die selbst kein `.uk-nav` ist — sie und die Gruppen-Beschriftungen (`.uk-nav-header`) bleiben unberuehrt. -------------------------------------------------------------------------- */ #tm-dialog-mobile .uk-nav > li > a { font-size: 20px; font-weight: 600; padding-top: 10px; padding-bottom: 10px } #tm-dialog-mobile .uk-nav > li + li { margin-top: 10px; padding-top: 10px; border-top: 1px solid #e5e5e7 } /* ========================================================================== Startseiten-Hero auf dem Handy: Bild vollflaechig (Erweiterung, 2026-08-12) ========================================================================== Matthias: „Ich moechte vollflaechig das bild unten drunter Text und buttons." Nativ erledigt sind schon die beiden Sichtbarkeiten (hero-mobil.py): Das Hintergrundfoto der Section laeuft ab 640px (`media_visibility: s` -> `uk-background-image@s`), das Bild im Fluss nur darunter (`visibility: hidden-s` -> `uk-hidden@s`). Was nativ NICHT geht, und darum steht das hier: Das Bild-Element haengt vier Ebenen tief — .uk-section > .uk-width-1-1 > .uk-container > .uk-container > .uk-grid > .ac-hero-glass > .uk-margin.uk-hidden@s Weder `section` noch `row` haben einen `visibility`-Prop (0 Vorkommen in ihren element.php) — eine eigene, randlose Handy-Section ist damit unmoeglich. Und die Container-Abstaende lassen sich nicht breakpoint-abhaengig abschalten: `width: ""` entfernt den Container auf ALLEN Breiten und schoebe das Glas-Panel am Desktop an den linken Rand. Drei Dinge, alle unter 640px: 1. Mindesthoehe und oberer Innenabstand der Section weg. `min-height: 64vh` setzt YOOtheme inline (`style="min-height: 64vh"`), deshalb hier `!important` — die einzige Stelle dieser Regel, die eines braucht. Ohne das schoebe `uk-flex-bottom` bei kurzem Inhalt eine magentafarbene Luecke UEBER das Foto. 2. Glas-Panel aufloesen. Ohne Foto dahinter traegt es nichts und wuerde das vollflaechige Bild nur einrahmen — genau das war der Einwand. 3. Bild aus allen Containern herausloesen. `100vw` + `translateX(-50%)` ist unabhaengig von der Verschachtelungstiefe; auf dem Handy sind Scrollbalken Overlays, ein Ueberlauf entsteht dadurch nicht. Die 640px-Grenze ist dieselbe wie bei den beiden nativen Props — nicht die 959px des Blocks weiter oben. Dieser Block steht danach und gewinnt bei gleicher Spezifitaet. -------------------------------------------------------------------------- */ @media (max-width: 639px) { .uk-section:has(.ac-hero-glass) { min-height: 0 !important; padding-top: 0; } .ac-hero-glass { padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; box-shadow: none } .ac-hero-glass > .uk-hidden\@s { width: 100vw; margin-left: 50%; transform: translateX(-50%) } /* Die zwei Hero-Buttons untereinander und ueber die volle Breite. Zwei lange Beschriftungen („Zu den Fernstudiengaengen") brechen auf einem Telefon sonst ungleich um. Der native Weg scheidet aus, nicht aus Bequemlichkeit: Das Button-Element HAT einen `fullwidth`-Prop (elements/button/templates/template.php:12 — `'uk-child-width-{0}' => $props['fullwidth'] ? '1-1' : 'auto'`), er kennt aber keinen Breakpoint und wuerde die Buttons auch am Desktop stapeln. Zwei Regeln, weil zwei Ebenen die Breite bestimmen: `.el-item` ist im Flex-Grid auf Inhaltsbreite (`uk-child-width-auto`), der Button selbst ist inline-block. */ .ac-hero-glass .uk-child-width-auto > .el-item { width: 100% } .ac-hero-glass .el-item > .uk-button { display: block; width: 100% } } /* ========================================================================== Anmeldeformular: vier Schritte (Erweiterung, 2026-08-12) ========================================================================== Gehoert zum Skript in der Seite `/anmeldung/` (html-Element hinter dem CF7-Shortcode). **Die Reihenfolge der beiden ersten Regeln ist der Sicherheitsgurt:** Verborgen wird nur unterhalb von `.ac-mehrstufig`, und diese Klasse setzt das Skript selbst. Faellt das Skript aus — Fehler, blockiertes JS, alter Browser —, bleiben alle vier Schritte sichtbar und das Formular ist eine lange, vollstaendig bedienbare Seite. Andersherum (Schritte per CSS verbergen, JS zeigt sie) waere das Formular ohne JS unbenutzbar. -------------------------------------------------------------------------- */ .ac-mehrstufig .ac-step { display: none } .ac-mehrstufig .ac-step.ac-step-aktiv { display: block } /* ========================================================================== Contact Form 7 an das Theme angleichen (Erweiterung, 2026-08-12) ========================================================================== Der grosse Teil des Stylings ist NICHT hier, sondern nativ: Die Feld-Klassen (`uk-input`, `uk-select`, `uk-textarea`, `uk-checkbox`, `uk-radio`, `uk-form-label`) setzt CF7 selbst ueber seine Option `class:` in den Formular-Vorlagen — siehe `converter/formulare.py`. Damit greifen die Formular-Stile des Themes unveraendert. Hier stehen nur die Bausteine, die CF7 selbst erzeugt und die kein Prop erreicht: die Optionslisten (`wpcf7-list-item`), die Fehlermeldungen und die Ausgabezeile. Farben stammen aus dem Theme (`#b03030` = `@form-danger-border`/`uk-text-danger`, `#e5e5e7` = Rahmenfarbe, `#6b6b6b` = Muted-Text) — nicht erfunden. -------------------------------------------------------------------------- */ /* Je Option eine Zeile; Kaestchen und Text auf einer Grundlinie statt CF7s Inline-Fluss mit `margin-left: 1em`. */ .wpcf7 .wpcf7-list-item { display: block; margin: 0 0 8px } .wpcf7 .wpcf7-list-item > label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer } /* Native Kaestchen statt UIkits Eigenbau. ------------------------------------------------------------------------- UIkits `.uk-checkbox` ist ein Eigenbau fuer EINZEILIGE Beschriftungen: 16px, `appearance: none`, grauer Grund, Haekchen als Hintergrundbild, `margin-top: -4px`, `vertical-align: middle`. Neben mehrzeiligen Kursbezeichnungen sitzt es schief und wirkt grob. ac.kd.design nutzt an derselben Stelle **native** Kaestchen, nur eingefaerbt (`accent-color: #e2007a`, 18px) — das ist die Fassung, die Matthias vorgezogen hat. Die Klasse aus der CF7-Vorlage zu nehmen genuegt NICHT: Das K&D-Basis-Child-Theme haengt sie per Filter an **jede** CF7-Checkbox und -Radio — `themes/yootheme-k8d/functions.php`, Block „KD-CF7-UIKIT", `wpcf7_form_elements`, Prioritaet 20 — und zwar bedingungslos, obwohl sein Kommentar sagt, er reiche die Klasse nur vom Wrapper ans Input durch. Ein Eingriff dort waere eine Aenderung am Basispaket und damit nicht projektlokal; deshalb hier neutralisiert. `appearance: auto` stellt das Systemsteuerelement wieder her, die drei Reset-Zeilen raeumen UIkits Grund und Haekchen-Bild weg. Die Vorlagen setzen die Klasse trotzdem nicht mehr — faellt der Filter im Paket irgendwann weg, stimmt es ohne Nacharbeit. */ .wpcf7 .uk-checkbox, .wpcf7 .uk-radio, .wpcf7 .wpcf7-list-item input[type="checkbox"], .wpcf7 .wpcf7-list-item input[type="radio"] { -webkit-appearance: auto; appearance: auto; flex: none; width: 18px; height: 18px; margin: 1px 0 0; background-color: initial; background-image: none; border-radius: initial; vertical-align: baseline; accent-color: #e2007a } /* Optionstext kleiner und ruhiger als die Beschriftung darueber — sonst konkurrieren 17 Kurszeilen mit ihrer eigenen Ueberschrift. */ .wpcf7 .wpcf7-list-item-label { font-size: 13px; color: #616161; line-height: 1.5; letter-spacing: 0 } /* Zustimmungen stehen einzeln, brauchen also keinen Listenabstand. */ .ac-form-zustimmung .wpcf7-list-item { margin-bottom: 0 } .ac-form-hinweis { margin: 0 0 12px; color: #6b6b6b; font-size: 14px } /* Fehlerhinweis am Feld — CF7 liefert ihn ohne Bezug zur Theme-Typografie. */ .wpcf7 .wpcf7-not-valid-tip { margin-top: 6px; color: #b03030; font-size: 14px } .ac-field .wpcf7-not-valid { border-color: #b33a3a } /* Ausgabezeile — Farben wie im alten Staging (Harvest), dort mit hinterlegter Flaeche: gruen fuer gesendet, rot fuer Fehler. Deutlicher als ein blosser Rahmen. */ .wpcf7 form .wpcf7-response-output { margin: 22px 0 0; padding: 12px 16px; border: 1px solid #e5e5e7; border-radius: 8px; background: #fff; color: #616161; font-size: 14px; line-height: 1.5 } .wpcf7 form.sent .wpcf7-response-output { border-color: #0e7c66; background: #e9f8f3; color: #0e7c66 } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { border-color: #b33a3a; background: #fdecec; color: #b33a3a } /* ── Vier Dinge ohne Styler-Variable (alles Uebrige steht als @form-* im Customizer) ── Werte aus dem Harvest des alten Stagings. */ /* Weicher Fokus-Schein zusaetzlich zum magentafarbenen Rand (@form-focus-border). */ .ac-field input:focus, .ac-field select:focus, .ac-field textarea:focus { box-shadow: 0 0 0 3px rgba(226, 0, 122, .12) } /* Kursraster: siehe Abschnitt „Bedien-Element aus ac.kd.design" weiter unten. */ /* ── Felder: das System von ac.kd.design ───────────────────────────────────── Der erste Anlauf mischte UIkits Formular-System (`uk-form-label`, `uk-input`) mit dem Port — ein Zwitter, der keines von beiden traf. Das alte Formular nutzt UIkit dort gar nicht; das Label umschliesst das Feld, gestaltet wird ueber `.ac-field`. Die CF7-Vorlagen erzeugen jetzt genau dieses Markup (converter/formulare.py). Die `@form-*`-Styler-Variablen bleiben gesetzt — sie gelten weiter fuer Formularelemente ausserhalb von CF7 (Suchfeld u.a.) und sind auf dieselben Werte abgestimmt. */ .ac-field { margin: 0 0 12px } /* ── Ueberschriften in mehrspaltigem Text ─────────────────────────────────── Der `column`-Prop des Text-Elements setzt CSS-Mehrspalten (`uk-column-1-2` → `column-count: 2`). Der Umbruch faellt dort, wo der Browser die Spalten ausbalanciert — auch mitten zwischen einer Ueberschrift und ihrem ersten Absatz. Dann steht „Ruecktritt" als letzte Zeile links und der zugehoerige Text oben rechts. `break-after: avoid` bindet die Ueberschrift an das Folgende. Es gibt dafuer keinen nativen Prop — die Mehrspaltigkeit selbst ist nativ, ihr Randfall nicht. Die Regel gilt absichtlich fuer JEDEN mehrspaltigen Text, nicht nur die Teilnahmebedingungen: Eine verwaiste Ueberschrift am Spaltenfuss ist nirgends gewollt. **Das reichte nicht** (Matthias, 2026-08-14): Sie schuetzt nur die Naht zwischen Ueberschrift und erstem Absatz. Der Ausgleichspunkt lag aber MITTEN im Abschnitt „Verbraucherwiderrufsrecht" — nachgerechnet: 4242 Zeichen gesamt, Spaltenmitte bei 2121, der Abschnitt laeuft von 1205 bis 2416. Sein letzter Absatz („Erfolgt die Anmeldung innerhalb 14 Tagen …") begann damit oben in der rechten Spalte und stand dort ohne seine Ueberschrift — bei einem Rechtstext ist das nicht nur haesslich, sondern irrefuehrend. `.ac-abschnitt` kapselt deshalb jeden Abschnitt und haelt ihn zusammen. Der Browser gleicht dann an den ABSCHNITTSGRENZEN aus statt irgendwo. Ist ein Abschnitt einmal hoeher als eine Spalte, greift `break-inside` nicht mehr — dann bricht er wie vorher; das ist der akzeptierte Restfall, kein stiller Fehler. */ [class*="uk-column-"] h1, [class*="uk-column-"] h2, [class*="uk-column-"] h3, [class*="uk-column-"] h4, [class*="uk-column-"] h5, [class*="uk-column-"] h6 { break-after: avoid; -webkit-column-break-after: avoid } .ac-abschnitt { break-inside: avoid; -webkit-column-break-inside: avoid } /* Bloecke, die einen neuen Gedanken anfangen, aber keine Ueberschrift tragen, setzen ihren Abstand selbst (Matthias, 2026-08-14: „… hat zuwenig abstand"). Die 40px sind nicht geschaetzt, sondern der Wert, den UIkit jeder Ueberschrift gibt — `*+h1,*+h2,*+h3,*+h4,*+h5,*+h6{margin-top:40px}`, in der kompilierten `theme.1.css` nachgesehen. Deshalb wirken die Bloecke mit Ueberschrift („Wozu moechten Sie Unterlagen?", „Rueckruf gewuenscht?") sauber abgesetzt, waehrend „Wie sind Sie auf uns aufmerksam geworden?" und „Ihre Nachricht" mit den 12px Feldabstand direkt am Vorgaenger klebten. Mit demselben Wert stehen jetzt alle Bloecke im selben Rhythmus. */ .ac-block { margin-top: 40px } /* Feldbeschriftungen schwarz (Matthias, 2026-08-14). Vorher #616161 aus dem Harvest des alten Stagings — auf der grauen Formularflaeche #f5f5f5 sind das rund 5,4:1 Kontrast, also gerade AA fuer Normaltext; #000 bringt 19,3:1. Gilt fuer Einzelfeld-Beschriftungen und Gruppen-Ueberschriften gleichermassen, damit „Vorname" und „Fernlehrgaenge" nicht verschieden dunkel sind. Die Optionstexte der Kaestchen bleiben #616161: Sie sind Auswahlwerte, keine Beschriftungen — waeren sie gleich schwarz, verloere die Gliederung ihre Stufen. */ .ac-field label, .ac-field-caption { display: block; font-size: 13px; color: #000 } .ac-field input, .ac-field select, .ac-field textarea { box-sizing: border-box; width: 100%; margin-top: 4px; padding: 10px 14px; border: 1px solid #d5d5d5; border-radius: 8px; background: #fff; font-family: inherit; font-size: 15px; line-height: 1.4 } .ac-field input:focus, .ac-field select:focus, .ac-field textarea:focus { border-color: #e2007a; outline: 0 } .ac-field textarea { min-height: 150px; resize: vertical; display: block } .ac-field-hint { display: block; margin-top: 4px; font-size: 13px; color: #8a8a8a } /* ========================================================================== Anmeldeformular — Bedien-Element aus ac.kd.design (Portierung, 2026-08-12) ========================================================================== Matthias, nach drei Runden Formular-Optik: „Schau mal hier das Formular sieht echt gut aus" (ac.kd.design/anmeldung/?kurs=Visagist%2Fin). Der Unterschied war nicht Feinabstimmung, sondern Bauart: Kurs- und Zahlungsoptionen sind dort **anklickbare Karten**, die bei Auswahl magenta aufleuchten; Personendaten stehen zweispaltig; eine Fortschrittsleiste mit nummerierten Kreisen fuehrt durch die Schritte. **Das hier ist bewusst eine Portierung und keine Ableitung aus dem Styler.** Fuer ein solches Bedien-Element gibt es keine Theme-Variable — UIkit kennt weder Options-Karten noch eine Schritt-Leiste. Die 55 Regeln stammen aus dem Stylesheet von ac.kd.design, ausgelesen am 2026-08-12; Werte unveraendert, nur die Reihenfolge ist gruppiert und die Kommentare sind ergaenzt. Die Feld-Grundformen (Radius, Rahmen, Fokus) kommen weiterhin aus den `@form-*`-Styler-Variablen — die Regeln hier setzen nur, was darueber hinausgeht. -------------------------------------------------------------------------- */ .ac-anm { max-width: 820px; margin: 0 auto } /* ── Fortschrittsleiste ─────────────────────────────────────────────────── */ .ac-anm-progress { /* Der Abstand steht als Variable, weil die Verbindungslinie ihn kennen muss: Sie laeuft vom eigenen Kreis bis zum naechsten und muss die Luecke ueberbruecken, sonst endet sie kurz davor. */ --ac-step-gap: 22px; display: flex; gap: var(--ac-step-gap); margin: 0 0 40px; padding: 0; list-style: none; counter-reset: step } .ac-anm-progress li { position: relative; flex: 1; counter-increment: step; padding-top: 40px; text-align: center; font-size: 13px; color: #616161; cursor: default } .ac-anm-progress li::before { content: counter(step); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; line-height: 26px; border: 2px solid #e0e0e0; border-radius: 50%; background: #fff } /* Verbindungslinie zum naechsten Schritt — beim letzten weggelassen. */ .ac-anm-progress li::after { content: ''; position: absolute; top: 13px; left: calc(50% + 18px); right: calc(-50% - var(--ac-step-gap) + 18px); height: 2px; background: #e0e0e0 } .ac-anm-progress li:last-child::after { display: none } .ac-anm-progress li.is-active { color: #1a1a1a; font-weight: 600 } .ac-anm-progress li.is-active::before { border-color: #e2007a; color: #e2007a } .ac-anm-progress li.is-done { cursor: pointer } .ac-anm-progress li.is-done::before { content: '✓'; background: #e2007a; border-color: #e2007a; color: #fff } /* Auf schmalen Schirmen traegt nur der aktive Schritt seine Beschriftung — vier Titel nebeneinander waeren dort unleserlich. */ @media (max-width: 639px) { .ac-anm-progress li { font-size: 0 } .ac-anm-progress li.is-active { font-size: 12px } } /* ── Schritte ──────────────────────────────────────────────────────────── */ .ac-step-title { margin: 0 0 20px; font-size: 22px } .ac-step-hint, .ac-lernform-hint { margin-top: 12px; font-size: 14px; color: #616161 } /* ── Kursauswahl als Karten ────────────────────────────────────────────── */ .ac-kursgroup-title { margin: 26px 0 10px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #616161 } /* Die Kursauswahl steht **einspaltig** — bewusst, siehe die ausfuehrliche Begruendung weiter unten beim Block „Kursauswahl lesbar machen" (drei Zeilen Fliesstext je Eintrag vertragen keine zweite Spalte). Bis zum 2026-08-14 stand hier zusaetzlich ein `@media (min-width: 768px) { columns: 2 }`. Das war **tot**: Die spaetere Regel `.ac-kursgrid .wpcf7-checkbox { columns: 1 }` steht ohne Media-Query weiter unten in derselben Datei, hat dieselbe Spezifitaet und gewinnt deshalb auf **jeder** Breite — Media-Queries erhoehen die Spezifitaet nicht. Beim Nachruesten der Infomaterial-Listen hatte ich diese tote Regel als Beleg dafuer genommen, dass „die Kursauswahl das laengst macht". Sie machte es nie. Entfernt, statt sie als Beleg stehen zu lassen. */ .ac-kursgrid .wpcf7-checkbox { display: block; columns: 1 } /* `.ac-spalten3` — Optionsliste in bis zu drei Spalten (Matthias, 2026-08-14). Genutzt im Infomaterial-Formular fuer „Fernlehrgaenge" (11 Eintraege) und „Wie sind Sie auf uns aufmerksam geworden?" (7). Die kurzen Gruppen (Hobby & Freizeit, Seminare) bleiben einspaltig — bei zwei Eintraegen bringt es nichts, und die Seminarzeilen sind 98 Zeichen lang. **Bewusst eine eigene Regel, nicht die von `.ac-kursgrid` mitbenutzt.** Bis eben teilten sich beide den Selektor; ein `columns: 3` dort haette die Kursauswahl in den beiden Anmeldeformularen mitgedreht — dort sind es Karten mit Rahmen, die bei drei Spalten deutlich zu schmal werden. Geteilte Regeln sind sparsam, bis sich eine Seite anders entwickelt; dann ist Trennen richtig. **Drei Stufen statt eines Sprungs auf drei.** Die laengste Beschriftung hat 41 Zeichen, bei 13px also rund 265px. Ab 960px liegt das Formular in der 2-3-Spalte (rund 900px nutzbar) — drei Spalten zu je etwa 280px gehen auf. Darunter laeuft es voll breit, aber schmaler; dort sind zwei Spalten die ehrlichere Aufteilung, sonst brechen die langen Bezeichnungen durchweg zweizeilig um. `columns` und nicht Grid: Mehrspalten fuellen **spaltenweise**, die Liste liest sich also von oben nach unten und dann rechts weiter — wie eine Liste. Ein Grid fuellt zeilenweise, dort staende Eintrag 2 rechts neben Eintrag 1 und das Auge springt bei jedem Haekchen. `break-inside: avoid` haelt mehrzeilige Eintraege zusammen. */ .ac-spalten3 .wpcf7-checkbox { display: block; columns: 1 } @media (min-width: 640px) { .ac-spalten3 .wpcf7-checkbox { columns: 2; column-gap: 28px } } @media (min-width: 960px) { .ac-spalten3 .wpcf7-checkbox { columns: 3 } } .ac-kursgrid .wpcf7-list-item, .ac-spalten3 .wpcf7-list-item { display: block; margin: 0 0 8px; break-inside: avoid } .ac-kursgrid label { display: flex; align-items: flex-start; gap: 9px; padding: 9px 12px; border: 1px solid #e0e0e0; border-radius: 8px; background: #fff; font-size: 14px; cursor: pointer } .ac-kursgrid input { flex-shrink: 0; margin-top: 2px; accent-color: #e2007a } /* Ausgewaehlt und vorbelegt sehen gleich aus — beides ist „diese Karte gilt". */ .ac-kursgrid label:has(input:checked), .ac-kursgrid label.ac-preselected { border-color: #e2007a; box-shadow: 0 0 0 1px #e2007a inset } /* ── Personendaten zweispaltig ─────────────────────────────────────────── */ .ac-grid2 { display: grid; grid-template-columns: 1fr; gap: 6px 20px } @media (min-width: 640px) { .ac-grid2 { grid-template-columns: 1fr 1fr } } .ac-field-full { grid-column: 1 / -1 } /* ── Zahlung ───────────────────────────────────────────────────────────── */ .ac-payweise .wpcf7-list-item { display: block; margin: 0 0 10px } .ac-payweise label { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border: 1px solid #d5d5d5; border-radius: 10px; background: #fff; font-size: 15px; cursor: pointer } .ac-payweise input { margin-top: 3px; accent-color: #e2007a } .ac-payweise label:has(input:checked) { border-color: #e2007a; box-shadow: 0 0 0 1px #e2007a inset } .ac-paynote { padding: 12px 16px; border-left: 4px solid #e2007a; border-radius: 0 8px 8px 0; background: #f5f5f5; font-size: 14px; color: #616161 } /* ── Zustimmungen und Fehlerzustaende ──────────────────────────────────── */ .ac-accept { margin: 0 0 10px; font-size: 14px } .ac-invalid.ac-kursgrid label, .ac-invalid.ac-payweise label { border-color: #c14a3a } .ac-invalid.ac-accept, .ac-kurs-error, .ac-lf-error { color: #c14a3a } /* Auch die Beschriftung der Gruppe faerben — bei „Zahlungsweise" oder „Lernformat" sagen zwei rote Kartenrahmen allein noch nicht, WAS fehlt. */ .ac-invalid .ac-field-caption { color: #c14a3a } /* ── Navigation ────────────────────────────────────────────────────────── */ .ac-anm-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px } .ac-anm-nav .ac-btn-next, .ac-anm-nav .ac-submit-wrap { margin-left: auto } /* ── Kurskarten aufgeraeumt ────────────────────────────────────────────────── Matthias: „Momentan sind die Kurse sehr durcheinander." Ursache: Jede Variante trug Name, Dauer, Monats- und Gesamtpreis und ZFU-Nummer in EINEM Fluss und brach in zwei Spalten ueber drei Zeilen um; die Familiennamen standen in derselben kleinen, gedaempften Schrift wie alles andere. Der Inhalt bleibt vollstaendig (Entscheid Matthias) — nur die Hierarchie ist jetzt sichtbar: ac-kursgroup-intro Bereichszeile („Fernstudiengaenge / e-Learning") ac-kursgroup-title Kursfamilie („Kosmetiker/in a+c") — Versalien, Unterstrich ac-kurs-name Variantenname, normal gross ac-kurs-meta Dauer · Preise · ZFU, gedaempft eine Zeile darunter Und: **eine** Spalte statt zwei. Zwei Spalten funktionieren fuer kurze Namen wie im Vorbild; drei Zeilen Fliesstext nebeneinander erzeugen genau das Durcheinander. -------------------------------------------------------------------------- */ .ac-kursgroup-intro { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: #1a1a1a } .ac-kursgroup { margin: 0 } .ac-kursgrid .wpcf7-checkbox { columns: 1 } .ac-kursgrid label { align-items: flex-start; padding: 11px 14px } .ac-kurs-name { display: block; font-size: 14px; color: #333 } .ac-kurs-meta { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: #8a8a8a } /* Hinweis, wenn die vorbelegte Kursfamilie mehrere Varianten hat — die Karten sind dann hervorgehoben, aber bewusst nicht angekreuzt (die Variante entscheidet ueber Laufzeit und Preis). Setzt das Skript. */ .ac-kurs-wahl-hinweis { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: #e2007a } /* Kurze Ja/Nein-Optionen nebeneinander statt untereinander. Modifikator zu `.ac-payweise`, deshalb mit dessen Klasse zusammen im Selektor — sonst entschiede die Reihenfolge in der Datei, und das ist kein verlaesslicher Halt. */ .ac-payweise.ac-radio-inline .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 10px } .ac-payweise.ac-radio-inline .wpcf7-list-item { margin: 0 } .ac-payweise.ac-radio-inline .wpcf7-list-item > label { min-width: 120px } /* ── Absende-Button ────────────────────────────────────────────────────────── Die Gestalt kommt aus dem Theme: Der Knopf traegt `uk-button uk-button-primary` und sieht damit aus wie jeder andere Button der Seite. Das ist Absicht — ac.kd.design machte per CSS eine Pille nur aus dem Submit, womit er sich von allen uebrigen Buttons unterschieden haette. Sollen es Pillen sein, ist das `@button-border-radius` im Styler und gilt site-weit; das waere eine eigene Entscheidung. Hier nur zwei Ergaenzungen, die das Theme nicht abdeckt. */ /* Auf dem Handy ueber die volle Breite — ein 34px breiter Knopf am Ende eines langen Formulars ist mit dem Daumen schlecht zu treffen. Wert aus ac.kd.design. */ @media (max-width: 639px) { .wpcf7-form input.wpcf7-submit { display: block; width: 100% } } /* CF7s Ladeanzeige neben dem Knopf ist standardmaessig grau. */ .wpcf7-form .wpcf7-spinner { background-color: #e2007a } /* Und sie steht dem rechtsbuendigen Knopf im Weg: CF7 gibt ihr `visibility: hidden`, aber `display: inline-block; width: 24px; margin: 0 24px` (includes/css/styles.css:82) — unsichtbar, aber 72px breit. In einem `justify-content: flex-end`-Container endet der Knopf dadurch 72px vor der Kante. Genau das hat Matthias gesehen. `order: -1` stellt sie vor den Knopf; der Platz liegt dann links davon, der Knopf sitzt buendig. Beim Absenden erscheint sie an dieser Stelle — ohne dass das Layout springt, was ein `display: none` im Ruhezustand verursacht haette. */ .ac-submit-wrap .wpcf7-spinner { order: -1; margin: 0 12px 0 0 } /* Absende-Feld rechtsbuendig. Gilt auch fuer die Formulare ohne Schritt-Navigation (Kontakt, Infomaterial) — in `.ac-anm-nav` schiebt es zusaetzlich `margin-left: auto` an den rechten Rand, hier sorgt die Ausrichtung im Wrapper selbst dafuer. */ .ac-submit-wrap { display: flex; justify-content: flex-end; margin-top: 22px } /* In der Schritt-Navigation bringt die Zeile ihren Abstand schon mit. */ .ac-anm-nav .ac-submit-wrap { margin-top: 0 } /* Auf dem Handy fuellt der Knopf die Breite — dann ist Rechtsbuendigkeit gegenstandslos. */ @media (max-width: 639px) { .ac-submit-wrap { display: block } } /* ── Verborgene Schaltflaechen wirklich verbergen ──────────────────────────── Das Skript setzt `hidden` auf „Zurueck", „Weiter" und dem Absende-Feld, je nach Schritt. Das blieb wirkungslos: `[hidden] { display: none }` steht im Standard- Stylesheet des Browsers, `.uk-button { display: inline-block }` dagegen im Theme — und eine Autoren-Regel schlaegt die Browser-Regel unabhaengig von der Spezifitaet. Beim Absende-Feld kam meine eigene Regel `.ac-submit-wrap { display: flex }` dazu. Folge: Auf dem letzten Schritt standen „Zurueck", „Weiter" UND der Absende-Knopf nebeneinander — deshalb wirkte er nicht rechtsbuendig, sondern als dritter Knopf in der Reihe (gemeldet von Matthias, 2026-08-12). Kein `!important` noetig: Die Selektoren hier sind spezifischer als die Regeln, die sie ueberschreiben muessen. -------------------------------------------------------------------------- */ .ac-anm-nav [hidden], .ac-submit-wrap[hidden] { display: none } /* ── Formular auf einer eigenen Flaeche ────────────────────────────────────── Matthias, 2026-08-12: „grauer Hintergrund mit abgerundeten Ecken um das Formular". Beide Werte stammen aus dem Theme, nicht aus der Fantasie: `#f5f5f5` ist dessen gedaempfte Flaeche (`uk-section-muted`, `uk-tile-muted`, `uk-background-muted`), `10px` der Karten-Radius (`uk-card`). Damit fuegt sich das Panel in die Formensprache der Seite ein, statt eine eigene aufzumachen. Gilt fuer alle vier Formulare (`.wpcf7-form`), nicht nur die Anmeldung — sonst saehen Kontakt und Infomaterial anders aus als der Rest. Am 2026-08-14 stand hier kurz eine CF7-freie Zweitfassung `.ac-formflaeche` fuer die Newsletter-Anmeldung (kein CF7-Formular, postet direkt an Campaign Monitor). Zwei Stunden spaeter ist sie wieder raus: Beim Aufraeumen der Seite ist das Formular in das Sidebar-Layout von `/kontakt/` gezogen, und dort faerbt bereits `.uk-section-default:has(.ac-sidebar) > .uk-container` die ganze Flaeche mit **derselben** #f5f5f5 ein. Die Klasse haette Grau auf Grau gelegt — unsichtbar und damit tote Zeile. Geprueft: sie steht auf keiner der 71 Seiten mehr im Markup. -------------------------------------------------------------------------- */ .wpcf7 .wpcf7-form { padding: 32px; border-radius: 10px; background: #f5f5f5 } @media (max-width: 639px) { .wpcf7 .wpcf7-form { padding: 20px } } /* Ausnahme: in einer Sidebar-Sektion traegt der Container die Flaeche schon (`.uk-section-default:has(.ac-sidebar) > .uk-container`, dieselbe #f5f5f5). Das Panel faerbte dort Grau auf Grau — unsichtbar — schoebe die Felder aber trotzdem 32px nach innen, waehrend Ueberschrift und Einleitungstext an der Containerkante stehen. Genau dieser Versatz war auf /kontakt/ zu sehen (2026-08-14). Betrifft nur diese eine Seite; /kontakt/infomaterial/ und die beiden Anmeldeseiten stehen frei auf Weiss und behalten ihr Panel. Kein !important noetig: `.uk-section-default:has(.ac-sidebar) .wpcf7 .wpcf7-form` traegt vier Klassen gegen zwei. */ .uk-section-default:has(.ac-sidebar) .wpcf7 .wpcf7-form { padding: 0; border-radius: 0; background: none } /* Der Hinweiskasten trug bisher dieselbe Flaeche wie das Panel und wuerde darin verschwinden — auf Weiss bleibt er als Kasten erkennbar, die magentafarbene Kante traegt weiterhin die Betonung. */ .ac-paynote { background: #fff } /* ── Auswahlfelder: eigener Pfeil mit Abstand ──────────────────────────────── Matthias, 2026-08-12: „Dropdown Arrow Abstand nach rechts setzen." Unsere Selects zeigten den System-Pfeil, der buendig an der Kante klebt und dessen Abstand sich nicht setzen laesst — `padding-right` schiebt bei nativen Selects nur den Text, nicht den Pfeil. Loesbar nur, indem man den Pfeil selbst zeichnet: `appearance: none` schaltet den System-Pfeil ab, ein Chevron als Hintergrundbild tritt an seine Stelle, und dessen Position ist frei bestimmbar. Fassung und Werte aus ac.kd.design (Harvest, Block „Select: Magenta-Chevron statt System-Pfeil"): Pfeil 14px vom rechten Rand, 42px Innenabstand rechts, damit lange Optionstexte nicht darunterlaufen. Farbe ist die Markenfarbe — im Theme steht dafuer `@form-select-icon-color: #e2007a`, das aber nur fuer `uk-select` greift, und diese Klasse tragen unsere Felder seit der Umstellung auf das ac-field-System nicht mehr. -------------------------------------------------------------------------- */ .ac-field select { -webkit-appearance: none; appearance: none; padding-right: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e2007a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer } /* Markierte Pflichtfelder der Schritt-Pruefung. Wert aus ac.kd.design (`.ac-invalid input, .ac-invalid select, .ac-invalid textarea`), Selektor hier eine Stufe spezifischer als `.ac-field input`, damit die Reihenfolge in der Datei nicht entscheidet. */ .ac-field.ac-invalid input, .ac-field.ac-invalid select, .ac-field.ac-invalid textarea { border-color: #c14a3a }