/* Theme Name: Tabula Child Template: tabula */ /* ── Allgemein / Theme ─────────────────────────────────────── */ .tax-product_cat .woocommerce-products-header__title { position: relative; } .tax-product_cat .woocommerce-products-header__title:before, .tax-product_cat .woocommerce-products-header__title:after { content: ''; width: 12px; height: 12px; background: #ffcc00; border-radius: 50%; display: inline-block; margin: 0 8px; } .btPageHeadline h1, .bt_bb_headline h1 { font-size: 36px !important; font-weight: 700 !important; line-height: 1.2 !important; text-transform: none !important; letter-spacing: 0 !important; } .btPageHeadline h1 { color: #003a69 !important; } .btBreadCrumbs { display: none !important; } .btPageHeadline { background: transparent !important; } .btLightSkin .btSubHeader { background-color: #ffffff !important; } .btLightSkin .bt_bb_dash_top.bt_bb_headline .bt_bb_headline_content:before, .btLightSkin .bt_bb_dash_top_bottom.bt_bb_headline .bt_bb_headline_content:before { color: rgba(0,0,0,0.15) !important; } .btPageHeadline .bt_bb_port { padding-top: 4em !important; padding-bottom: 2em !important; } .wpc-filter-title { font-size: 1.2em; color: #d79c62; } .woocommerce-ordering { display: none !important; } .btCartWidgetInnerContent { z-index: 99999 !important; position: absolute !important; top: 100% !important; } /* ── Checkout: Formular-Felder ─────────────────────────────── */ #billing_country_field { display: none !important; } #billing_first_name_field, #billing_last_name_field, #billing_postcode_field, #billing_city_field { width: 48% !important; display: inline-block !important; margin-right: 2% !important; vertical-align: top; } #billing_last_name_field, #billing_city_field { margin-right: 0 !important; } /* ── Checkout: Section-Überschriften ─────────────────────────*/ .woocommerce-billing-fields h3, .woocommerce-additional-fields h3, #order_review h3 { font-size: 18px !important; font-weight: 700 !important; color: #003a69 !important; text-transform: none !important; letter-spacing: normal !important; border-left: 3px solid #d79c62 !important; border-bottom: 1px solid #eee !important; border-top: none !important; padding: 0 0 12px 10px !important; margin: 0 0 16px 0 !important; display: block !important; } .woocommerce-billing-fields h3::before, .woocommerce-additional-fields h3::before, #order_review h3::before { display: none !important; } /* Abstand VOR den Überschriften — höhere Spezifität nötig */ #order_review #order_payment_heading { margin-top: 72px !important; } #order_review #order_review_heading { margin-top: 72px !important; } /* ── Checkout: Bestellübersicht Tabelle ──────────────────────*/ .woocommerce-checkout-review-order-table td.product-name > a, .woocommerce-checkout-review-order-table td.product-name { color: #d79c62 !important; font-weight: 600; } .woocommerce-checkout-review-order-table td.product-name .product-quantity { color: #999; font-weight: normal; font-size: 0.85em; } .woocommerce-checkout-review-order-table dl.variation { margin: 4px 0 0; } .woocommerce-checkout-review-order-table dl.variation dt { display: inline; float: none; font-size: 13px; font-weight: normal; color: #5f7382; margin: 0; padding: 0; width: auto; } .woocommerce-checkout-review-order-table dl.variation dd { display: inline; float: none; margin: 0 8px 0 0 !important; padding: 0; font-size: 13px; color: #17222c; font-weight: 600; } .woocommerce-checkout-review-order-table dl.variation dd p { display: inline; margin: 0; } .woocommerce-checkout-review-order-table tr.cart_item { border-bottom: 1px solid #f0f0f0; } .woocommerce-checkout-review-order-table td { padding: 12px 20px !important; } .woocommerce-checkout-review-order-table tfoot tr td, .woocommerce-checkout-review-order-table tfoot tr th { color: #666; font-size: 13px; border-top: none !important; padding: 5px 20px !important; } .woocommerce-checkout-review-order-table tfoot tr.order-total td, .woocommerce-checkout-review-order-table tfoot tr.order-total th { color: #003a69 !important; font-weight: 700 !important; font-size: 15px !important; border-top: 1px solid #eee !important; padding-top: 10px !important; } /* Abstand zwischen letzter Checkbox und Bestelltabelle */ .wc-gzd-checkbox-placeholder:last-of-type { margin-bottom: 24px !important; } /* ── Checkout: Jetzt-kaufen-Button ──────────────────────────*/ #place_order { background: transparent !important; color: #d79c62 !important; border: 2px solid #d79c62 !important; font-weight: 700 !important; letter-spacing: .03em; transition: background .2s, color .2s; } #place_order:hover { background: #d79c62 !important; color: #fff !important; } /* ── Buttons ─────────────────────────────────────────────── */ #place_order { display: block !important; width: 100% !important; padding: 16px !important; font-size: 16px !important; background: #d79c62 !important; color: #fff !important; border: 2px solid #d79c62 !important; font-weight: 700 !important; letter-spacing: .03em; transition: background .2s, border-color .2s; } #place_order:hover { background: #c4894e !important; border-color: #c4894e !important; color: #fff !important; } #pwgc-redeem-button { padding: 6px 14px !important; font-size: 12px !important; background: #fff !important; color: #d79c62 !important; border: 1px solid #d79c62 !important; box-shadow: none !important; transition: background .2s, color .2s; } #pwgc-redeem-button:hover { background: #d79c62 !important; color: #fff !important; } /* Abstand zwischen Checkboxen und Kaufen-Button */ #place_order { margin-top: 20px !important; } /* Mini-Warenkorb: Options-/Varianten-Details ausblenden (nur Mini-Cart!). Auf Warenkorb-/Checkout-Seite bleiben die Details sichtbar. Nur Bezeichnung, Anzahl × Preis genügen im Hover-Mini-Cart. */ .btCartWidgetInnerContent .variation, .widget_shopping_cart_content .variation, .woocommerce-mini-cart .variation { display: none !important; } /* Mini-Cart Buttons – exakt wie "Ausführung wählen" */ .btCartWidgetInnerContent p.buttons a.button { background: transparent !important; color: #fff !important; box-shadow: #d79c62 0 0 0 3em inset !important; border: none !important; transition: 300ms !important; } .btCartWidgetInnerContent p.buttons a.button:hover, .btCartWidgetInnerContent p.buttons a.button:focus { color: #d79c62 !important; box-shadow: #d79c62 0 0 0 1px inset !important; background: transparent !important; } /* Startseiten Event-Highlights – Bilder einheitlich hoch, gleichmäßig beschnitten */ .tk-event-card .bt_bb_event_image img { width: 100%; height: 350px; object-fit: cover; object-position: center; display: block; } /* Hero: Lesbarkeit, große Headline, Orange-Akzent */ .tk-hero { position: relative; } .tk-hero::before { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(90deg, rgba(0,32,58,1) 0%, rgba(0,32,58,1) 22%, rgba(0,32,58,.80) 33%, rgba(0,32,58,.30) 47%, rgba(0,32,58,0) 60%); } /* === ABSCHNITTS-ABSTÄNDE MOBIL STAUCHEN (19.07.2026) === Befund: Bold setzt die Abstände in `em` auf `.bt_bb_port` – z. B. 8em = 112px bei „large", 16em = 224px bei „extra_large". Für 1500px Bildschirmbreite ist das stimmig, bei 375px ist ein Abstand von 224px mehr als ein halber Bildschirm zwischen zwei Blöcken. Die Startseite war dadurch mobil über 15.000px lang, und zwischen Überschrift und Kacheln klaffte eine Lücke, die wie ein Darstellungsfehler wirkte. 🔑 SPEZIFITÄT: Die Theme-Regel lautet `.bt_bb_section.bt_bb_top_spacing_large > .bt_bb_port` (0,3,0). Eine kürzere Auswahl verliert – gemessen und bestätigt. Deshalb hier dieselbe Form plus `body` davor (0,3,1), statt `!important` zu streuen. */ @media (max-width: 991px) { body .bt_bb_section.bt_bb_top_spacing_extra_large > .bt_bb_port { padding-top: 56px; } body .bt_bb_section.bt_bb_bottom_spacing_extra_large > .bt_bb_port { padding-bottom: 56px; } body .bt_bb_section.bt_bb_top_spacing_large > .bt_bb_port { padding-top: 48px; } body .bt_bb_section.bt_bb_bottom_spacing_large > .bt_bb_port { padding-bottom: 48px; } body .bt_bb_section.bt_bb_top_spacing_medium > .bt_bb_port { padding-top: 36px; } body .bt_bb_section.bt_bb_bottom_spacing_medium > .bt_bb_port { padding-bottom: 36px; } } /* === SPALTEN-INNENABSTÄNDE MOBIL KAPPEN (19.07.2026) === Befund: Bold gibt Spalten feste seitliche Polster (.bt_bb_padding_50, _90, _double …) und nimmt sie erst unter 360px zurück – dort nur halb, und NUR für die äußeren Spalten. `.bt_bb_column_inner` bekommt im 360er-Block denselben Wert nochmal gesetzt, wird also überhaupt nicht reduziert. 360px ist ein Android-Klein-Breakpoint. Aktuelle iPhones sind 375 / 390 / 393 / 414 / 430px breit und erreichen die Regel NIE. Gemessen auf 375px (Startseite, ausgeloggt) blieb von 315px übrig: Hero (padding_90) -> 135px Kundenstimmen (padding_50, innen, 3x) -> 135px „Warum bei uns" (padding_double) -> 215px Die Hero-Überschrift stand dadurch in einer 135px schmalen Säule und war 73px hoch statt 37px. Der seitliche Rand kommt bereits von `.bt_bb_cell` (30px) – diese Polster sind reine Desktop-Deko. Hier waagerecht abgeräumt; oben/unten bleibt unberührt, weil die Klassen ohnehin nur padding-left/right setzen. 🔑 SPEZIFITÄT: Die Theme-Regel ist `.bt_bb_column.bt_bb_padding_90 .bt_bb_column_content` (0,3,0) – gleich stark wie diese hier. Da die Ladereihenfolge der Stylesheets nicht garantiert ist, entscheidet hier ausnahmsweise `!important` statt der Quellreihenfolge. ⚠️ Breakpoint bewusst 767px statt der sonst üblichen 991px: Auf dem Tablet ist der Einzug gewollt und der Container mit ~708px breit genug (708 − 180 = 528px Text). Erst am Handy wird er schädlich. Gegengeprüft: Kursangebot unverändert hoch, Produktseite gar nicht betroffen, scrollWidth bleibt überall 375px. */ @media (max-width: 767px) { .bt_bb_column[class*="bt_bb_padding_"] > .bt_bb_column_content, .bt_bb_column_inner[class*="bt_bb_padding_"] > .bt_bb_column_inner_content { padding-left: 0 !important; padding-right: 0 !important; } } /* === VERANSTALTUNGSKACHELN: ABSTAND BEIM STAPELN (19.07.2026) === Befund: Die Event-Kacheln stoßen gestapelt direkt aneinander – gemessen 0 / −1 / +1 px zwischen 603px hohen Kacheln, sowohl bei 375px als auch bei 768px. Der Abstand kommt auf dem Desktop allein aus dem waagerechten Rinnenabstand (`padding: 0 20px`); sobald die Spalten untereinander rutschen, fehlt der senkrechte Gegenpart. Klassischer Rasterfehler. 🔑 KEIN Breakpoint, mit Absicht: Die Spalten tragen nur `col-xxl-4` (≥1401px) und `col-xl-4` (1201–1400px); darunter kommt die Breite aus der Inline- Variable `--column-width`, der Umbruchpunkt ist also nirgends als Zahl benannt (gemessen: 992px gestapelt, 1100px nebeneinander – 991px wäre falsch gewesen). `row-gap` wirkt bei `flex-wrap: wrap` ausschließlich ZWISCHEN umbrochenen Zeilen: nebeneinander passiert nichts, gestapelt greift es. Damit ist die Regel unabhängig davon, wo das Theme umbricht. Auf die Zeile mit `:has()` eingegrenzt, damit kein anderes Raster mitgenommen wird (`:has()` ist in dieser Datei bereits etabliert). */ .bt_bb_row_holder:has(.tk-event-card) { row-gap: 40px; } /* === BEWERTUNGS-SLIDER MOBIL: oben ausrichten statt mittig (19.07.2026) === Befund: Die Folien sind je nach Zitatlänge 299, 569 oder 677 px hoch – mehr als doppelter Unterschied. Der Slider zieht alle auf die Höhe der größten und zentriert den Inhalt; bei kurzen Zitaten entstehen dadurch oben und unten je rund 190 px Leerfläche. Am Handy liest sich das wie ein Darstellungsfehler („da müsste das Zitaticon sein, stattdessen weiße Fläche"). Lösung: Folien ihre natürliche Höhe behalten lassen und oben ausrichten. `align-items: flex-start` verhindert das Strecken, `height: auto` hebt die von slick per Inline-Stil gesetzte Einheitshöhe auf. Desktop bleibt unberührt – dort ist die mittige Ausrichtung sinnvoll, weil die Zitate nebeneinander stehen. */ @media (max-width: 991px) { .bt_bb_content_slider .slick-track { display: flex; align-items: flex-start; } .bt_bb_content_slider .slick-slide, .bt_bb_content_slider .slick-slide > div { height: auto !important; } /* Höhenwechsel beim Blättern weich statt ruckartig. Die Höhe selbst setzt Slick über `adaptiveHeight` (eingeschaltet in tk_slider_hoehe_mobil, functions.php) — hier wird nur der Übergang gestaltet. */ .bt_bb_content_slider .slick-list { transition: height .25s ease; } } /* === ZITATE MOBIL: Schriftgröße und Seitenabstand (19.07.2026) === Meldung Team: „Seite Über uns ist nicht responsive". Gemessen bei 375 px Viewport im ausgeloggten Browser — zwei Ursachen, beide im Bewertungs-Slider: 1. Das Eltern-Theme setzt in `tabula/style.css` (v7.0.2) blockquote { font-size: 1.8em; line-height: 2em; } OHNE JEDE MEDIA-QUERY. Bei 14 px Grundschrift sind das 25,2 px Schrift auf 50,4 px Zeilenhöhe — auf dem Handy genau wie am Desktop. Ergebnis: pro Zeile passen kaum drei Wörter, das letzte Wort wird am rechten Rand abgeschnitten, und die doppelte Zeilenhöhe zieht das Zitat endlos in die Länge. Das ist der Eindruck „nicht responsive". Dazu `blockquote::before { font-size: 11em }` — das große graue Anführungszeichen, mobil rund 277 px groß. 2. Die Zitat-Absätze sitzen auf links 0 / rechts 375, kleben also auf beiden Bildschirmkanten. Normale Absätze derselben Seite haben 30 px Abstand — der Slider bringt seine eigene volle Breite mit und erbt das Spalten- Padding nicht. Deshalb hier dieselben 30 px nachziehen. Bewusst NUR mobil und NUR im Content-Slider: am Desktop stehen die Zitate nebeneinander, dort ist die große Schrift Absicht und wirkt auch. */ @media (max-width: 767px) { .bt_bb_content_slider blockquote, .bt_bb_content_slider blockquote p { font-size: 1.15em; line-height: 1.55; } /* Das Zitatzeichen mitskalieren, sonst überdeckt es den Text. */ .bt_bb_content_slider blockquote::before { font-size: 4em; } /* Gleicher Seitenabstand wie beim übrigen Fließtext der Seite. */ .bt_bb_content_slider .bt_bb_content_slider_item_content { padding-left: 30px; padding-right: 30px; } } /* === HERO MOBIL: Text nach unten + Verlauf von unten (19.07.2026) === Vorgeschichte: Der Verlauf im Grundzustand läuft waagerecht (90deg) und ist für die Desktop-Aufteilung gedacht (Text links über dunkler Fläche, Foto rechts frei). Gestapelt ergab er nur einen dunklen Balken am linken Rand, deshalb war er mobil abgeschaltet — mit dem hier vorhergesagten Ergebnis, dass die weiße Überschrift direkt auf dem Foto lag. Befund am Gerät (Nutzer-Screenshot): „spielend leicht!" in Orange lag genau auf dem grauen Haar — der schwächste Kontrast im ganzen Bild. Zusätzlich verdeckte der mittig zentrierte Textblock das Gesicht, also das emotional Wertvollste am Foto. Lösung (vom Nutzer aus drei Vorschlägen gewählt): Textblock ins untere Drittel, darüber ein senkrechter Verlauf, der oben klar ausläuft. Die Gesichter bleiben frei, der Knopf landet in Daumennähe. Drei Stellschrauben, alle nötig: 1. `align-items: flex-end` — der Port ist ein Flex-Container und stand auf `center`. Das ist der eigentliche Hebel fürs Verschieben. 2. Der letzte Separator im Hero trägt `margin-bottom: 112px` (8em). Mittig war das unauffällig; unten angeschlagen hätte er den Block um 112px angehoben. Auf 0, der Abstand kommt jetzt allein aus padding-bottom. 3. Der Verlauf. Die Stopps sind an der gemessenen Textlage ausgerichtet: Text liegt zwischen 65 % und 90 % der Hero-Höhe, deshalb bleibt der Verlauf bis 38 % praktisch unsichtbar und trägt erst ab ~66 %. 🔑 SPEZIFITÄT statt `!important`: Die Ausrichtung muss `.bt_bb_section.bt_bb_vertical_align_middle > .bt_bb_port` (0,3,0) schlagen, das padding-bottom zusätzlich unsere eigene Regel `body .bt_bb_section.bt_bb_bottom_spacing_large > .bt_bb_port` (0,3,1) — daher die lange Kette mit `body`. Ohne `!important` gegengeprüft. ⚠️ Zum Nachjustieren nur an den beiden hinteren Stopps drehen (.50 / .86); höhere Werte verdunkeln sonst die Gesichter mit. */ @media (max-width: 991px) { body .tk-hero.bt_bb_section.bt_bb_vertical_align_middle > .bt_bb_port { align-items: flex-end; padding-bottom: 64px; } .tk-hero .bt_bb_separator.bt_bb_bottom_spacing_large { margin-bottom: 0; } .tk-hero::before { display: block; background: linear-gradient(180deg, rgba(0,32,58,0) 0%, rgba(0,32,58,.12) 38%, rgba(0,32,58,.50) 66%, rgba(0,32,58,.86) 100%); } } .tk-hero .bt_bb_wrapper, .tk-hero .bt_bb_row, .tk-hero .bt_bb_column, .tk-hero .bt_bb_cell, .tk-hero .bt_bb_column_inner { position: relative; z-index: 2; } .tk-hero .bt_bb_headline h1 { font-size: clamp(34px, 6vw, 64px) !important; line-height: 1.08 !important; } .tk-hero .bt_bb_headline, .tk-hero .bt_bb_headline h1, .tk-hero .bt_bb_headline_content { color:#fff !important; } .tk-hero .tk-hero-accent h1, .tk-hero .tk-hero-accent .bt_bb_headline_content { color:#e8a04e !important; } @media (min-width: 992px) { .tk-hero .bt_bb_row { transform: translateX(-220px); } } /* === Einheitliche Section-Überschriften (nur Klasse tk-section-title) === */ .tk-section-title h1, .tk-section-title h2, .tk-section-title h3, .tk-section-title h4, .tk-section-title .bt_bb_headline_content, .tk-section-title .bt_bb_headline_content * { color:#003a69 !important; font-weight:700 !important; text-transform:none !important; letter-spacing:0 !important; } .tk-section-title h1, .tk-section-title h2 { font-size: clamp(30px, 3.4vw, 42px) !important; line-height:1.18 !important; } .tk-section-title h1::after, .tk-section-title h2::after, .tk-section-title h3::after, .tk-section-title h4::after { content:""; display:block; width:64px; height:4px; background:#d79c62; border-radius:2px; margin:16px auto 0; } .tk-title-left h1::after, .tk-title-left h2::after, .tk-title-left h3::after, .tk-title-left h4::after { margin-left:0; margin-right:auto; } /* === PDP: Section-Überschriften einheitlich + CI === Beschreibung / Zusätzliche Informationen / Ähnliche Produkte / Bewertungen alle gleich groß, Logo-Blau + oranger Akzent-Strich links. Die Tab-Leiste wird ausgeblendet und beide Panels werden GESTAPELT gezeigt (statt umschaltbar) — sonst wäre der inaktive Tab "Zusätzliche Informationen" ohne Leiste nicht mehr erreichbar (Bold Builder klappt ihn auf height:0). */ .single-product .bt_bb_tabs_header { display: none !important; } .single-product .bt_bb_tabs_tabs .bt_bb_tab_item { height: auto !important; visibility: visible !important; overflow: visible !important; opacity: 1 !important; transition: none !important; } .single-product .bt_bb_tabs_tabs .bt_bb_tab_item + .bt_bb_tab_item { margin-top: 30px !important; } .bt_bb_tab_content > h2, section.related.products > h2, section.upsells.products > h2, .woocommerce-Reviews-title, #reviews .bt-comments-box > h4:first-child { font-size: 24px !important; font-weight: 700 !important; color: #003a69 !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.25 !important; margin: 0 0 22px !important; padding-bottom: 11px !important; position: relative !important; } .bt_bb_tab_content > h2::after, section.related.products > h2::after, section.upsells.products > h2::after, .woocommerce-Reviews-title::after, #reviews .bt-comments-box > h4:first-child::after { content: "" !important; display: block !important; position: absolute !important; left: 0 !important; bottom: 0 !important; width: 48px !important; height: 3px !important; background: #d79c62 !important; border-radius: 2px !important; } /* Einheitlicher Abstand vor allen PDP-Section-Überschriften */ .single-product section.related.products { margin-top: 30px !important; } .single-product section.btComments { margin-top: 30px !important; } /* === Varianten-Auswahl als Klick-Buttons (Swatches) === */ .variations_form .variations td.value > select.tk-hidden-select { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; pointer-events: none !important; margin: 0 !important; } .tk-swatch-group { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 4px; } .tk-swatch { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border: 1px solid rgba(0,58,105,0.22); border-radius: 10px; background: #fff; color: #33424f; font-size: 13px; font-weight: 500; line-height: 1.2; cursor: pointer; transition: border-color .15s, background .15s, color .15s; user-select: none; } .tk-swatch:hover { border-color: #003a69; color: #003a69; } .tk-swatch.tk-active { border-color: #d79c62; background: rgba(215,156,98,0.12); color: #003a69; font-weight: 600; box-shadow: inset 0 0 0 1px #d79c62; } .variations_form .variations th.label label { font-weight: 600; color: #003a69; } /* "Zurücksetzen"-Link dezent unter den Buttons */ .variations_form .reset_variations { display: inline-block; margin-top: 6px; font-size: 12px; color: #888; } .variations_form .reset_variations:hover { color: #d79c62; } /* === Contact Form 7: Radio-Gruppen als Klick-Buttons (wie Produkt-Swatches) === Rein per CSS über :has(input:checked) — keine JS, kein anderer CF7-Feldtyp nötig. Das native [radio] bleibt funktional, nur visuell als Button. */ .wpcf7-radio { display: flex !important; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .wpcf7-radio .wpcf7-list-item { margin: 0 !important; } .wpcf7-radio .wpcf7-list-item label { display: inline-flex; align-items: center; cursor: pointer; margin: 0; padding: 8px 16px; border: 1px solid rgba(0,58,105,0.22); border-radius: 10px; background: #fff; color: #33424f; font-size: 13px; font-weight: 500; line-height: 1.2; transition: border-color .15s, background .15s, color .15s; } .wpcf7-radio .wpcf7-list-item input[type=radio] { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; margin: 0 !important; pointer-events: none; } .wpcf7-radio .wpcf7-list-item label:hover { border-color: #003a69; color: #003a69; } .wpcf7-radio .wpcf7-list-item:has(input:checked) label { border-color: #d79c62; background: rgba(215,156,98,0.12); color: #003a69; font-weight: 600; box-shadow: inset 0 0 0 1px #d79c62; } .wpcf7-radio .wpcf7-list-item-label { margin: 0; padding: 0; } /* CF7-Felder: einheitliche Schriftgröße 15px (vorher tlw. 12px) */ .wpcf7-form input.wpcf7-form-control, .wpcf7-form textarea.wpcf7-form-control, .wpcf7-form input[type=text], .wpcf7-form input[type=email], .wpcf7-form input[type=tel], .wpcf7-form input[type=date], .wpcf7-form textarea { font-size: 15px !important; } /* Form-Überschrift (Bold-Builder-Headline direkt am CF7-Formular) ins CI: Logo-Blau + oranger Akzent-Strich. NUR im Hauptinhalt (.btContentHolder) — sonst würde auch die Newsletter-Überschrift im dunkelblauen Footer blau (= unsichtbar) werden, da sie ebenfalls eine Headline neben einem CF7-Form ist. */ .btContentHolder .bt_bb_column_content_inner:has(.wpcf7) .bt_bb_headline_tag { font-weight: 700 !important; font-size: 30px !important; text-transform: none !important; position: relative !important; padding-bottom: 12px !important; margin-bottom: 22px !important; } .btContentHolder .bt_bb_column_content_inner:has(.wpcf7) .bt_bb_headline_tag, .btContentHolder .bt_bb_column_content_inner:has(.wpcf7) .bt_bb_headline_tag * { color: #003a69 !important; } .btContentHolder .bt_bb_column_content_inner:has(.wpcf7) .bt_bb_headline_tag::after { content: "" !important; display: block !important; position: absolute !important; left: 0 !important; bottom: 0 !important; width: 48px !important; height: 3px !important; background: #d79c62 !important; border-radius: 2px !important; } /* Fette Texte IN CF7-Formularen (Feld-Gruppen-Labels wie "Anlass der Anfrage:" und der Kontakt-Titel) = einheitliche, schlichte Labels in Logo-Blau. KEIN großer Überschriften-Look + KEIN Akzent-Strich — sonst wären die Labels größer als die eigentliche Form-Überschrift. Nur Hauptinhalt (Footer ausgenommen). */ .btContentHolder .wpcf7-form p > b, .btContentHolder .wpcf7-form p > strong { display: inline-block !important; position: static !important; padding: 0 !important; color: #003a69 !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.3 !important; } .btContentHolder .wpcf7-form p > b::after, .btContentHolder .wpcf7-form p > strong::after { content: none !important; display: none !important; } /* Gruppen-Labels (eigener fett-only-Absatz) etwas Abstand nach oben */ .btContentHolder .wpcf7-form p:has(> b:only-child), .btContentHolder .wpcf7-form p:has(> strong:only-child) { margin: 18px 0 6px !important; } /* === Text-Links: Orange, Hover Blau + Unterstrich === */ .bt_bb_text a:not(.bt_bb_button):not(.button):not(.bt_bb_link), .btContentHolder .entry-content a:not(.button) { color:#d79c62; text-decoration:none; transition:color .2s; } .bt_bb_text a:not(.bt_bb_button):not(.button):not(.bt_bb_link):hover, .btContentHolder .entry-content a:not(.button):hover { color:#003a69; text-decoration:underline; text-underline-offset:3px; } /* === Mobil-Fix: Bold-Builder-Spalten ohne responsive Breakpoints === Einzelne Reihen (z.B. die Privatstunden-Promo im Kursangebot) haben nur col-xxl-/col-xl-Klassen OHNE die kleineren Breakpoints (col-xs/sm/md/lg). Dadurch stapeln sie auf Mobil nicht → horizontaler Überlauf → die Seite wirkt auf dem Handy wie eine verkleinerte Desktop-Seite. Fix: solche Spalten unter 992px auf volle Breite zwingen. Selektor trifft NUR die fehlerhaften Spalten (col-xxl vorhanden, col-xs fehlt). */ @media (max-width: 991px) { .bt_bb_column[class*="col-xxl-"]:not([class*="col-xs-"]) { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } } .bt_bb_color_scheme_4 .bt_bb_text a:hover { color:#fff !important; text-decoration:underline; } /* ===== Buttons einheitlich ===== */ .bt_bb_button.bt_bb_style_filled a, body div.woocommerce a.button:not(.added_to_cart), body .woocommerce button.button, .single_add_to_cart_button, #place_order { background:#d79c62 !important; color:#fff !important; box-shadow:none !important; border:2px solid #d79c62 !important; transition:background .2s, border-color .2s !important; } .bt_bb_button.bt_bb_style_filled a:hover, body div.woocommerce a.button:not(.added_to_cart):hover, body .woocommerce button.button:hover, .single_add_to_cart_button:hover, #place_order:hover { background:#c4894e !important; border-color:#c4894e !important; color:#fff !important; } .bt_bb_button.bt_bb_style_outline a { background:transparent !important; color:#003a69 !important; box-shadow:none !important; border:2px solid #003a69 !important; transition:background .2s, color .2s !important; } .bt_bb_button.bt_bb_style_outline a:hover { background:#003a69 !important; color:#fff !important; } /* === Design-System Cleanups === */ .tax-product_cat .woocommerce-products-header__title:before, .tax-product_cat .woocommerce-products-header__title:after { background:#d79c62 !important; } #pwgc-redeem-button { background:#fff !important; color:#003a69 !important; border:2px solid #003a69 !important; box-shadow:none !important; transition:background .2s,color .2s !important; } #pwgc-redeem-button:hover { background:#003a69 !important; color:#fff !important; } div.woocommerce .btCartWidgetInnerContent p.buttons a.button.checkout { background:#d79c62 !important; color:#fff !important; box-shadow:none !important; border:2px solid #d79c62 !important; } div.woocommerce .btCartWidgetInnerContent p.buttons a.button.checkout:hover { background:#c4894e !important; border-color:#c4894e !important; color:#fff !important; } div.woocommerce .btCartWidgetInnerContent p.buttons a.button.wc-forward:not(.checkout) { background:transparent !important; color:#003a69 !important; box-shadow:none !important; border:2px solid #003a69 !important; } div.woocommerce .btCartWidgetInnerContent p.buttons a.button.wc-forward:not(.checkout):hover { background:#003a69 !important; color:#fff !important; border-color:#003a69 !important; } /* === WooCommerce Block-Warenkorb Buttons === */ a.wc-block-cart__submit-button, .wc-block-cart__submit-button.wc-block-components-button { background-color:#d79c62 !important; color:#fff !important; border:2px solid #d79c62 !important; box-shadow:none !important; border-radius:50px !important; transition:background-color .2s, border-color .2s !important; } a.wc-block-cart__submit-button:hover, .wc-block-cart__submit-button.wc-block-components-button:hover { background-color:#c4894e !important; border-color:#c4894e !important; color:#fff !important; } a.wc-block-cart__submit-button .wc-block-components-button__text { color:#fff !important; } .pwgc-apply-gift-card-button.wc-block-components-button { background-color:transparent !important; color:#003a69 !important; border:2px solid #003a69 !important; box-shadow:none !important; transition:background-color .2s, color .2s !important; } .pwgc-apply-gift-card-button.wc-block-components-button:hover { background-color:#003a69 !important; color:#fff !important; border-color:#003a69 !important; } .pwgc-apply-gift-card-button .wc-block-components-button__text { color:inherit !important; } /* ── Mein Konto: Login/Registrieren-Überschriften (wie Checkout-H3) ── */ #customer_login h2 { font-size: 18px !important; font-weight: 700 !important; color: #003a69 !important; text-transform: none !important; letter-spacing: normal !important; border-left: 3px solid #d79c62 !important; border-bottom: 1px solid #eee !important; padding: 0 0 12px 10px !important; margin: 0 0 20px 0 !important; line-height: 1.2 !important; } /* Produktkarten: saubere "In den Warenkorb"-Bestätigung */ .products .product a.add_to_cart_button.added::after, .products .product a.add_to_cart_button.added::before { display:none !important; } .products .product a.add_to_cart_button.added { width:auto !important; min-width:0 !important; white-space:nowrap !important; } .products .product .added_to_cart { display:block !important; width:100% !important; margin:10px 0 0 !important; clear:both !important; color:#003a69 !important; font-weight:600 !important; font-size:13px !important; text-decoration:none !important; background:none !important; border:none !important; box-shadow:none !important; padding:0 !important; } .products .product .added_to_cart::before { content:"\2713 "; font-weight:700; } /* === Produktseiten-Button === */ .single_add_to_cart_button { position:relative !important; overflow:visible !important; background:#d79c62 !important; color:#fff !important; box-shadow:none !important; border:2px solid #d79c62 !important; border-radius:50px !important; padding:12px 24px !important; font-size:12px !important; transition:background .2s, color .2s !important; } .single_add_to_cart_button:hover { background:#fff !important; color:#d79c62 !important; border-color:#d79c62 !important; } .single_add_to_cart_button.loading::after { content:"\e965" !important; font:400 12px/1.9em Dripicons !important; position:absolute !important; z-index:5 !important; right:0 !important; top:0 !important; width:1.8em !important; height:1.8em !important; margin:.5em -.4em 0 0 !important; border-radius:50% !important; background-color:#003a69 !important; color:#fff !important; text-align:center !important; border:0 !important; animation:spin 1s infinite linear !important; } /* "✓ Warenkorb anzeigen" als eigene Zeile unter dem Button */ .tk-added-confirm { display:block !important; margin:14px 0 0 !important; color:#003a69 !important; font-weight:600 !important; font-size:14px !important; text-decoration:none !important; } .tk-added-confirm:hover { color:#d79c62 !important; } /* === Produktdetailseiten === */ .single-product .woocommerce-message { display:none !important; } .single-product .summary > .bt_bb_separator { margin-top:0 !important; margin-bottom:6px !important; height:0 !important; } .single-product .summary p.price { font-size:22px !important; font-weight:700 !important; margin:6px 0 4px !important; } /* ── Produkt-Tiles: Flex-Layout (Titel oben, Preis-Block unten) ── */ .products li.product > div { display: flex !important; flex-direction: column !important; } .products li.product > div > header.bt_bb_headline { flex-grow: 1 !important; padding-bottom: 0.6em !important; } /* ── Loop: Preis → MwSt (dicht) → Button (Abstand) ── */ .products .product .price { margin-bottom: 4px !important; } .products .product .wc-gzd-additional-info.tax-info { margin-top: 0 !important; margin-bottom: 20px !important; font-size: 11px !important; } /* ── Preis-Einheit ("pro Person") klein neben dem Preis ── */ .single-product .summary .price .tk-price-unit { font-size: 12px !important; font-weight: 400 !important; color: #777 !important; margin-left: 7px !important; white-space: nowrap !important; box-shadow: none !important; } /* ── Detail: legal-price-info + MwSt dicht am Preis, Abstand zum Button ── */ .single-product .summary .legal-price-info { font-size: 11px !important; margin-bottom: 16px !important; } .single-product .summary .wc-gzd-additional-info.tax-info { font-size: 11px !important; margin-top: 0 !important; margin-bottom: 0 !important; } .single-product table.variations, .single-product table.variations th, .single-product table.variations td { border:0 !important; background:transparent !important; } .single-product table.variations th.label { padding:10px 0 4px !important; font-weight:600; } .btProductSKU { display:none !important; } /* ── Produkt-Loop: variable Produkt-Buttons = Tabula Pill-Fill (wie simple) ── */ body div.woocommerce a.button.product_type_variable, .btContent a.button.product_type_variable, .btWooCommerce a.button.product_type_variable, body div.woocommerce a.button.product_type_pw-gift-card, .btContent a.button.product_type_pw-gift-card, .btWooCommerce a.button.product_type_pw-gift-card { background: transparent !important; box-shadow: 0 0 0 3em #d79c62 inset !important; border: 0 !important; border-radius: 50px !important; color: #fff !important; transition: box-shadow 300ms, color 300ms !important; } body div.woocommerce a.button.product_type_variable:hover, .btContent a.button.product_type_variable:hover, .btWooCommerce a.button.product_type_variable:hover, body div.woocommerce a.button.product_type_pw-gift-card:hover, .btContent a.button.product_type_pw-gift-card:hover, .btWooCommerce a.button.product_type_pw-gift-card:hover { box-shadow: 0 0 0 1px #d79c62 inset !important; color: #d79c62 !important; background: transparent !important; } /* ── Footer-Newsletter: Abstand unten ── */ .btSiteFooter .bt_bb_section.bt_bb_color_scheme_4 > .bt_bb_port { padding-bottom: 3em !important; } /* ── Mein Konto: Abstand zwischen Content und Footer-Newsletter ── */ .woocommerce-account .btContentHolder .bt_bb_section > .bt_bb_port { padding-bottom: 3em !important; } /* ── Mein Konto / Bestellungen: Tabellenkopf Logo-Blau statt orange ── */ .woocommerce-account table.shop_table thead th, .woocommerce-order table.shop_table thead th { background-color: #003a69 !important; color: #fff !important; } /* ── Produkt-Schlagwörter: dezente Chips statt CTA-Pille ── Theme rendert Tags sonst wie den orangen Warenkorb-Button (box-shadow inset Fill, 50px, uppercase). Aus Usability-Gründen klar als Tag kennzeichnen. Hinweis: background-color lässt sich auf .btTags a theme-seitig NICHT setzen (selbst inline !important wird geblockt) → daher reines Outline-Chip-Design. */ .product-meta .btTags ul { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; padding: 0 !important; margin: 0 !important; list-style: none !important; } .product-meta .btTags ul li { margin: 0 !important; padding: 0 !important; list-style: none !important; } body .product-meta .btTags ul li a { display: inline-flex !important; align-items: center !important; box-shadow: none !important; border: 1px solid currentColor !important; border-radius: 6px !important; color: #4a6275 !important; text-transform: none !important; font-weight: 500 !important; font-size: 12px !important; line-height: 1.3 !important; letter-spacing: 0 !important; padding: 4px 11px !important; opacity: 1 !important; transition: color .2s !important; } body .product-meta .btTags ul li a::before { font-family: FontAwesome5Solid !important; content: "\f02b" !important; /* tag-Icon */ color: #d79c62 !important; margin-right: 7px !important; font-size: 10px !important; font-weight: 900 !important; display: inline-block !important; } body .product-meta .btTags ul li a:hover { color: #003a69 !important; } /* ── Produktattribute: modernes Icon-Layout ── */ table.shop_attributes { border-collapse: collapse !important; border: none !important; width: 100% !important; } table.shop_attributes tr { border: none !important; border-bottom: 1px solid rgba(0,58,105,0.08) !important; background: transparent !important; } table.shop_attributes tr:last-child { border-bottom: none !important; } table.shop_attributes .woocommerce-product-attributes-item__label { background: transparent !important; border: none !important; width: 38% !important; padding: 11px 20px 11px 0 !important; color: #003a69 !important; font-weight: 600 !important; font-size: 14px !important; vertical-align: middle !important; white-space: nowrap !important; } table.shop_attributes .woocommerce-product-attributes-item__label i.tk-attr-ico { display: inline-block !important; color: #d79c62 !important; width: 20px !important; margin-right: 10px !important; text-align: center !important; font-size: 13px !important; font-style: normal !important; } table.shop_attributes .woocommerce-product-attributes-item__value { background: transparent !important; border: none !important; padding: 11px 0 !important; vertical-align: middle !important; color: #444 !important; } table.shop_attributes .woocommerce-product-attributes-item__value p { margin: 0 !important; } table.shop_attributes .woocommerce-product-attributes-item__value a { color: #d79c62 !important; text-decoration: none !important; } table.shop_attributes .woocommerce-product-attributes-item__value a:hover { color: #003a69 !important; } /* ============================================================================ MOBIL-FIX Kursangebot (& andere boxed-Seiten) ---------------------------------------------------------------------------- Ursache: Das Plugin "Filter Everything" (Kursfilter) liefert eine CSS-Regel body .btContent { display: table-footer-group } @media (max-width:768px) Ein Tabellen-Display wächst auf seinen INHALT statt auf die Elternbreite. Auf dem Kursangebot mit den boxed_1200-Sektionen bläht das den kompletten Inhalts-Wrapper auf 1200px auf -> Seite breiter als der Bildschirm, rechts abgeschnitten, Kacheln riesig ("sieht aus wie Desktop"). Das Plugin-CSS lädt NACH unserem Child-Stylesheet -> !important nötig. Getestet bei 375px: btContent 1200->375, Kachel 1168->343, Überlauf weg. ============================================================================ */ @media screen and (max-width: 768px) { body .btContent { display: block !important; } } /* ============================================================================ KURSANGEBOT – dynamische Stufen-Gliederung (Überschriften im Produkt-Grid) Die
  • werden per JS (functions.php: tk_kursangebot_gliederung) in den Produkt-Grid eingefügt. Volle Breite (Flex + Grid), CI-Farben. ============================================================================ */ ul.products li.tk-grp { list-style: none !important; width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; grid-column: 1 / -1 !important; box-shadow: none !important; background: transparent !important; border: 0 !important; padding: 0 !important; } ul.products li.tk-grp::before { display: none !important; } ul.products li.tk-grp .tk-t { display: block; color: #003a69; line-height: 1.2; font-weight: 600; } ul.products li.tk-grp .tk-x { display: block; color: #555; font-size: 15px; line-height: 1.65; max-width: 820px; margin: 10px 0 22px; } /* Hauptbereich (Ebene 1) */ ul.products li.tk-grp.tk-grp-l1 { margin: 34px 0 8px !important; } ul.products li.tk-grp.tk-grp-l1 .tk-t { font-size: 25px; padding-left: 14px; border-left: 4px solid #d79c62; } ul.products li.tk-grp.tk-grp-l1:first-child { margin-top: 0 !important; } /* Unterbereich (Ebene 2, unter Fortgeschritten) */ ul.products li.tk-grp.tk-grp-l2 { margin: 26px 0 6px !important; } ul.products li.tk-grp.tk-grp-l2 .tk-t { font-size: 19px; padding-left: 12px; border-left: 3px solid #d79c62; } /* Container-Überschrift "Fortgeschritten" (große Trennung) */ ul.products li.tk-grp.tk-grp-cont { margin: 46px 0 14px !important; border-top: 1px solid rgba(0,58,105,0.15); padding-top: 24px !important; } ul.products li.tk-grp.tk-grp-cont .tk-t { font-size: 30px; font-weight: 700; } @media (max-width: 767px) { ul.products li.tk-grp.tk-grp-l1 .tk-t { font-size: 22px; } ul.products li.tk-grp.tk-grp-cont .tk-t { font-size: 25px; } ul.products li.tk-grp.tk-grp-l2 .tk-t { font-size: 18px; } ul.products li.tk-grp .tk-x { font-size: 14.5px; } } /* Desktop: mehr Abstand zwischen den Abschnitten (Handy bleibt kompakt) */ @media (min-width: 768px) { ul.products li.tk-grp.tk-grp-l1 { margin-top: 62px !important; } ul.products li.tk-grp.tk-grp-l2 { margin-top: 48px !important; } ul.products li.tk-grp.tk-grp-cont { margin-top: 78px !important; } ul.products li.tk-grp.tk-grp-l1:first-child { margin-top: 0 !important; } } /* ============================================================================ KURSANGEBOT – EINE Produktliste, damit der Filter auf ALLEN Geräten greift Problem: Die Seite hatte 2 Grids (Desktop columns-3 + Mobil columns-2). WPC Smart Filters filtert aber nur EINE Liste (columns-3) -> auf dem Handy war die columns-2-Liste ungefiltert (es kamen immer alle Kurse). Fix: columns-3 auf allen Geräten zeigen, columns-2 ausblenden. Die zwei Filter bleiben unberührt und filtern beide dieselbe columns-3-Liste: - Buttons-Filter (Set 3936) bleibt per eigener Spalten-Regel Desktop-only - Menü-Filter (Set 3962) bleibt Mobil-only ============================================================================ */ .bt_bb_row:has(ul.products.columns-3) { display: block !important; } .bt_bb_column:has(ul.products.columns-2) { display: none !important; } /* Kurs-Unterkategorie-Archive sauber wie normale Seiten: die WooCommerce- Ergebniszahl ("Alle X Ergebnisse werden angezeigt") ausblenden – die Sektionen liefern den Kontext, die Zeile wirkt sonst zusammenhanglos. */ body.tk-kursgliederung .woocommerce-result-count, body.tk-event-archive .woocommerce-result-count { display: none !important; } /* ============================================================================ EVENT-BADGES: Blau = Ort (immer, MHL/EF, größer), Orange = "Early Bird" (wenn Staffel aktiv, einen Hauch kleiner), leicht überlappend, mit Transparenz. (via functions.php: tk_product_badges) – Desktop + Handy geprüft. ============================================================================ */ .tk-badges { position: absolute; top: 4px; right: 8px; left: auto; z-index: 6; width: 104px; height: 104px; pointer-events: none; } .tk-badges .tk-badge { position: absolute; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; font-weight: 700; line-height: 1.05; box-sizing: border-box; box-shadow: 0 2px 6px rgba(0,0,0,0.22); } /* Blau (Ort) sitzt FIX am rechten Rand (immer gleiche Position, ob solo oder mit Orange); Orange (Early Bird) liegt links-UNTEN überlappend an der Blau-Bubble – tiefer & weiter rechts, damit die blaue Schrift (MHL/EF) frei bleibt. */ .tk-badges .tk-badge-loc { width: 66px; height: 66px; top: 2px; right: 0; z-index: 1; background: rgba(0,58,105,0.88); font-size: 22px; letter-spacing: 0.5px; } .tk-badges .tk-badge-eb { width: 54px; height: 54px; top: 48px; right: 28px; z-index: 2; background: rgba(215,156,98,0.94); font-size: 12px; font-weight: 600; letter-spacing: -0.2px; white-space: normal; padding: 4px; } @media (max-width: 767px) { .tk-badges { width: 96px; height: 98px; top: 3px; right: 6px; left: auto; } .tk-badges .tk-badge-loc { width: 60px; height: 60px; top: 2px; right: 0; font-size: 20px; } .tk-badges .tk-badge-eb { width: 50px; height: 50px; top: 46px; right: 22px; font-size: 11px; } } /* Kein Aufblitzen: auf der Einzelseite den Badge erst zeigen, wenn er (per JS, tk_badges_relocate) in der Bildgalerie sitzt – vorher säße er kurz überm Text. */ body.single-product .product > .tk-badges { visibility: hidden; } body.single-product .woocommerce-product-gallery .tk-badges { visibility: visible; } /* ── Checkout Bestellübersicht: Teilnehmer-Box ── */ .tc-attendee-box-row td > div { background: #f5f5f5 !important; border: 1px solid rgba(0,0,0,0.08) !important; border-radius: 6px !important; } /* Cart-Item-Meta einzeilig anzeigen (WooCommerce Blocks) */ .wc-block-components-product-details__name { display: inline !important; } /* ============================================================================ FACEBOOK-FEED (custom, [tk_facebook_feed]) – letzte Beiträge im CI. ============================================================================ */ .tk-fb-heading { text-align: center; color: #003a69; font-size: 2rem; line-height: 1.2; margin: 0 0 1.1em; } .tk-fb-feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .tk-fb-card { display: flex; flex-direction: column; text-decoration: none; background: #fff; border: 1px solid #ece3d7; border-radius: 10px; overflow: hidden; color: inherit; transition: box-shadow .2s ease, transform .2s ease; } .tk-fb-card:hover { box-shadow: 0 6px 22px rgba(0, 58, 105, .13); transform: translateY(-3px); } .tk-fb-img { position: relative; display: block; width: 100%; padding-top: 100%; /* quadratisch – zeigt mehr von hochkantigen Postern */ background-size: cover; background-position: center; background-color: #f2ece3; } .tk-fb-img--none { background: linear-gradient(135deg, #003a69, #d79c62); } /* Video-Beitrag: dezenter Verlauf + Play-Symbol (dunkle Frames wirken so gewollt). */ .tk-fb-img--video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.22)); } .tk-fb-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 12px rgba(0, 0, 0, .28); display: flex; align-items: center; justify-content: center; } .tk-fb-play::before { content: ""; display: block; margin-left: 5px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #003a69; } .tk-fb-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1 1 auto; } .tk-fb-date { font-size: .8rem; color: #d79c62; font-weight: 600; letter-spacing: .3px; } .tk-fb-text { color: #2b2b2b; line-height: 1.45; font-size: .98rem; } .tk-fb-more { margin-top: auto; color: #003a69; font-weight: 700; font-size: .9rem; } .tk-fb-card:hover .tk-fb-more { color: #d79c62; } @media (max-width: 900px) { .tk-fb-feed { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .tk-fb-feed { grid-template-columns: 1fr; } } /* ── Mobiles Burger-Menü: Hierarchie sichtbar machen ─────────────────────── */ /* Greift nur im mobilen Vertikal-Modus (body.btMenuVertical) -> Desktop unberührt. Farbe braucht color UND -webkit-text-fill-color (Theme nutzt letzteres). */ /* Hauptpunkte: linksbündig, CI-Blau, feine Trennlinie dazwischen */ body.btMenuVertical .menuHolder .menuPort nav > ul > li { text-align: left !important; border-top: 1px solid #eef1f4; } body.btMenuVertical .menuHolder .menuPort nav > ul > li:first-child { border-top: 0; } body.btMenuVertical .menuHolder .menuPort nav > ul > li > a { text-align: left !important; padding: 11px 20px !important; color: #003a69 !important; -webkit-text-fill-color: #003a69 !important; font-size: 15px !important; } /* Untermenü: eingerückt + oranger Leitstrich */ body.btMenuVertical .menuHolder .menuPort nav .sub-menu { border-left: 2px solid #d79c62 !important; margin: 2px 0 8px 20px !important; padding-left: 0 !important; } /* Unterpunkte: kleiner, gedämpftes Grau-Blau, linksbündig eingerückt */ body.btMenuVertical .menuHolder .menuPort nav .sub-menu li { text-align: left !important; } body.btMenuVertical .menuHolder .menuPort nav .sub-menu li > a { text-align: left !important; padding: 7px 16px !important; color: #5f7382 !important; -webkit-text-fill-color: #5f7382 !important; font-size: 13px !important; } /* Leerer Warenkorb (Block-Cart): Smiley von Schwarz auf CI-Orange – freundlicher. */ .wc-block-cart__empty-cart__title.with-empty-cart-icon::before { background-color: #d79c62 !important; } /* Button-Text immer zentrieren (Theme-Grid-Buttons „Details"/„Tickets" standen links). */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .btContent a.button, ul.products li.product a.button { text-align: center !important; } /* „Neu bei uns"-Section (leerer Block-Warenkorb): Buttons wie Theme-Buttons (orange Pille) + Überschrift ins CI */ .wp-block-woocommerce-empty-cart-block .wp-block-button__link { background-color: #d79c62 !important; color: #fff !important; border-radius: 50px !important; padding: 12px 24px !important; font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; border: 0 !important; box-shadow: none !important; } .wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover { background-color: #c68a4f !important; color: #fff !important; } .wp-block-woocommerce-empty-cart-block h2.wp-block-heading:not(.wc-block-cart__empty-cart__title) { color: #003a69 !important; font-size: 36px !important; font-weight: 700 !important; } /* Footer: Standort-Überschriften „Tanzkonzept / Erfurt|Mühlhausen" — Zeilen enger. Bold-Zeilenhöhe skaliert responsiv nicht mit der Schrift -> sonst große Lücke zwischen den beiden Zeilen. Relative Zeilenhöhe hält es auf allen Breiten eng. */ .btSiteFooter .bt_bb_subheadline .bt_bb_headline_content { line-height: 1.2 !important; } /* Kein Flackern beim Preis: Der Preis wird per JS über den Button verschoben. In der Ausgangsposition (direktes Kind von .summary) unsichtbar halten – sobald das JS ihn verschiebt, greift die Regel nicht mehr und er erscheint direkt am richtigen Platz. Die Animation ist ein Sicherheitsnetz (blendet nach 1s ein, falls JS ausfällt). visibility statt display -> Platz bleibt reserviert, kein Layout-Sprung. */ .single-product div.summary > p.price { visibility: hidden; animation: tkRevealPrice 0s 1s forwards; } @keyframes tkRevealPrice { to { visibility: visible; } } /* Kein Flackern der Kursangebot-Gliederung: der Produkt-Grid bleibt unsichtbar, bis das JS die Abschnitte gruppiert hat (setzt .tk-grouped). Danach sofort sichtbar. Animation = Sicherheitsnetz (nach 1.5s sichtbar, falls JS ausfällt). visibility -> Platz bleibt reserviert, kein Layout-Sprung. */ body.tk-kursgliederung ul.products { visibility: hidden; animation: tkRevealGrid 0s 1.5s forwards; } body.tk-kursgliederung ul.products.tk-grouped { visibility: visible; animation: none; } @keyframes tkRevealGrid { to { visibility: visible; } } /* Bestellbestätigungs-Seite (order-received): Überschriften ins CI-Blau. */ .woocommerce-order .woocommerce-order-details__title, .woocommerce-order-details__title, .woocommerce-order-details h2, .woocommerce-customer-details h2, .woocommerce-column__title, .woocommerce-order h2 { color: #003a69 !important; } /* „pro Monat"-Zusatz hinter dem Monats-Variantenpreis – klein & gedämpft, sitzt außerhalb des großen .price-Spans, daher feste Größe statt em. */ .tk-price-suffix { font-size: 15px; font-weight: 400; color: #5f7382; margin-left: 4px; white-space: nowrap; } /* Im kleinen Mini-Warenkorb und in der klassischen Kassen-Tabelle den Zusatz entsprechend kleiner halten (dort ist der Preis normal groß, 15px wäre zu viel). */ .widget_shopping_cart .tk-price-suffix, .woocommerce-mini-cart .tk-price-suffix, .woocommerce-checkout-review-order-table .tk-price-suffix { font-size: 11px; margin-left: 3px; } /* „Mein Konto": Die Bold-Überschrift (header.bt_bb_headline, position:relative; z-index:1) reicht mit ihrer Box nach unten über den ersten Navi-Tab „Dashboard" und fängt dessen Klick ab (per elementFromPoint verifiziert). Die Konto-Navi über die Überschrift heben -> alle Tabs zuverlässig klickbar. */ /* NACHGESCHÄRFT (19.07.2026): Auf schmalen Bildschirmen überlappte zusätzlich der INHALTSBEREICH die Navigation. Symptom: „Kontodetails" und „Meine Kurse" landeten beide auf /orders/ — beide Tipps trafen denselben darüberliegenden Link „… letzten Bestellung" aus dem Einleitungstext der Übersichtsseite. Alle anderen Tabs lagen außerhalb dieses Bereichs und funktionierten. Deshalb: Navi deutlich nach oben, Inhalt ausdrücklich darunter. */ .woocommerce-account .woocommerce-MyAccount-content { position: relative; z-index: 1; } .woocommerce-account .woocommerce-MyAccount-navigation { position: relative; z-index: 20; } /* Footer-Fußzeile: Copyright linksbündig, Rechtslinks (Impressum/AGB/Datenschutz) rechtsbündig – beide auf einer Höhe. Problem 1: Das Menü (#menu-links) sitzt in einer 9-spaltigen Spalte, deren Flex-Container linksbündig startete -> die Links klebten mittig statt rechts. Problem 2: Menü-Zeilenhöhe 16px vs. Copyright-Absatz 27px -> Text saß ~7px höher. Die Spalten stehen ab lg (>=992px) nebeneinander (col-lg-3 / col-lg-9) und stapeln darunter (col-md-12) – deshalb dort wieder linksbündig. */ .btSiteFooter .menu-links-container { justify-content: flex-end; } .btSiteFooter #menu-links, .btSiteFooter #menu-links li, .btSiteFooter #menu-links a { line-height: 27px; } @media (max-width: 991px) { .btSiteFooter .menu-links-container { justify-content: flex-start; } } /* Widerrufsbutton (§ Pflicht seit 19.06.2026, EU-RL 2023/2673): Die Schaltfläche muss "hervorgehoben" und "nicht in Linklisten versteckt" sein. Ein schlichter Textlink zwischen Impressum/AGB wäre genau so eine Linkliste -> deshalb heben wir ihn im Footer als echten CI-Button heraus. Beschriftung MUSS "Vertrag widerrufen" bleiben (mehrdeutiges wie "Stornieren" ist unzulässig). Ziel: Seite /vertrag-widerrufen/ (Germanized-Formular mit "Widerruf bestätigen"). */ .btSiteFooter #menu-links a[href*="vertrag-widerrufen"] { display: inline-block; padding: 5px 16px; background: #d79c62; color: #fff !important; -webkit-text-fill-color: #fff; border-radius: 50px; font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; line-height: 18px; } .btSiteFooter #menu-links a[href*="vertrag-widerrufen"]:hover { background: #003a69; } /* === Alten Plugin-Widerrufsbutton ausblenden (23.07.2026) === Team: Auf „Mein Konto" (und Bestellansichten) blendet das Plugin „EU Order Withdraw Button" einen zweiten, schlichten Widerrufsbutton ein (`.eu-owb-order-withdraw-from-contract-button`, alte Optik). Die gesetzliche Widerrufsbutton-Pflicht trägt bereits unser hervorgehobener Footer-Button (oben) → den redundanten Plugin-Button verstecken. ⚠️ RECHTLICH mit dem Anwalt gegenprüfen: danach trägt allein der Footer-Button die Widerrufsbutton-Pflicht. Rückbau: diese Regel entfernen. */ .eu-owb-order-withdraw-from-contract-button { display: none !important; } /* === WooCommerce--Tags entgelben (23.07.2026) === Team: „das sieht ja wie markiert aus". Auf der Bestellansicht (myaccount/view-order.php) wrappt WooCommerce Bestellnummer, Datum und Status in — die haben den Browser-Standard-Gelbton. Hintergrund raus, stattdessen dezent fett in Textfarbe (Hervorhebung bleibt, ohne Textmarker-Optik). */ .woocommerce mark, .woocommerce-account mark, mark.order-number, mark.order-date, mark.order-status { background: transparent; background-color: transparent; color: inherit; font-weight: 700; } /* Footer-Menüs: die dunklen Trennstriche unter den Menüpunkten entfernen. Das Theme setzt border-bottom: 1px solid rgba(0,0,0,.1) auf JEDES
  • . Auf dem dunkelblauen Footer (#003a69) wird dieses „10 % Schwarz" zu einem komischen dunkleren Strich. Betrifft beide Footer-Menüs (Leistungen + Rechtslinks). */ .btSiteFooter .bt_bb_custom_menu li { border-bottom: none; } /* Raumvermietung: die drei Teaser-Bilder (Räumlichkeiten / Ausstattung / Catering) IMMER als sauberen Kreis darstellen – egal welches Bildformat hochgeladen wird. Vorher hatte jedes eine andere Höhe (307 / 358 / 560 px), weil die Seitenverhältnisse variierten; das mittlere wirkte nur rund, weil dafür eigens ein PNG mit rundem Zuschnitt gebaut wurde. aspect-ratio + object-fit:cover erledigen das jetzt im CSS (mittiger Beschnitt, keine Verzerrung) -> niemand muss mehr Bilder vorbereiten. Abgrenzung: nur die drei Teaser-Spalten (col-xl-4). Das Kopfbild der Seite sitzt in col-xl-6 und bleibt unangetastet. */ /* WICHTIG: Der border-radius muss auf den WRAPPER (.bt_bb_image), NICHT aufs . Das Theme zoomt beim Hover das Bild (.bt_bb_image:hover img -> scale3d(1.1,1.1,1.1)). Liegt der Radius auf dem Bild, wächst der Kreis beim Zoom aus dem rechteckigen Wrapper heraus und wird oben/unten FLACH ABGESCHNITTEN. Sitzt der Radius auf dem Wrapper, beschneidet dieser den Zoom sauber kreisförmig. */ /* Es braucht BEIDES: 1) Wrapper = Kreis mit overflow:hidden -> beschneidet den Hover-Zoom kreisförmig. 2) Bild selbst quadratisch per aspect-ratio -> sonst behält es sein natürliches Seitenverhältnis (307 / 358 / 560 px hoch) und füllt den Kreis NICHT aus. Das !important ist nötig, weil das Theme die Bildhöhe selbst setzt und ein schlichtes height:100% überschreibt. */ body.page-id-3418 .bt_bb_column.col-xl-4 .bt_bb_image, body.page-id-3418 .bt_bb_column.col-xl-4 .bt_bb_image > a { display: block; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; } body.page-id-3418 .bt_bb_column.col-xl-4 .bt_bb_image img { width: 100% !important; aspect-ratio: 1 / 1 !important; height: auto !important; object-fit: cover !important; border-radius: 0 !important; display: block; } /* Wiederverwendbar: Diese Klasse im Bold-Builder beim Bild-Element unter „Extra class" eintragen -> rundes Bild, zoom-fest und formatunabhängig. */ .tk-round-img, .tk-round-img > a { display: block; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; } .tk-round-img img { width: 100% !important; aspect-ratio: 1 / 1 !important; height: auto !important; object-fit: cover !important; border-radius: 0 !important; display: block; } /* Hinweis: Die Raumvermietungs-Unterseiten (Räumlichkeiten/Ausstattung/Catering) sind mit echten Bold-Builder-Elementen gebaut (Section > Row > Column > Headline/Text/Button), damit das Team sie im Builder pflegen kann. Buttons und Tabellen stylt dadurch bereits das Theme – hier ist KEIN eigenes CSS nötig. */ /* ══════════════════════════════════════════════════════════════════════════ ÜBERSCHRIFTEN-SYSTEM (zentrale Harmonisierung) ───────────────────────────────────────────────────────────────────────── Vorher war es wild: mal blau, mal orange, mal Strich vorn, mal drunter. Ab jetzt gilt auf der ganzen Seite genau eine Regel: H1 = Seitentitel -> rendert das Theme automatisch, nie im Inhalt setzen (einzige Ausnahme: Startseite, dort IST die Hero-Überschrift die H1) H2 = Abschnitt -> CI-Blau, 30px/700, oranger Strich DARUNTER H3 = Unterpunkt -> CI-Blau, 19px/600, oranger Balken LINKS Neue Abschnittsüberschrift im Bold-Builder: einfach H2 bzw. H3 wählen – Farbe, Größe und Strich kommen von hier. „Dash“ auf „none“ lassen, sonst zeichnet Bold zusätzlich seinen eigenen Strich dazu. ─── WARUM DIE :not()-KETTE? Bitte nicht entfernen. ─── Das Theme benutzt für DESIGN-Elemente exakt dasselbe Markup wie für Textüberschriften –

    bzw.

    : • WooCommerce-Produktkacheln (die Kursnamen im Kursangebot) • die Personenkarten auf /team/ (Name als 47px-Schriftzug) • die Testimonials auf der Startseite Ohne Ausschluss würden die alle blau und bekämen Striche verpasst. Verlässlich unterscheiden lassen sie sich daran, dass sie einen Über- oder Untertitel führen (bt_bb_superheadline / bt_bb_subheadline) – eine echte Abschnittsüberschrift tut das nicht. Braucht eine Überschrift MIT Untertitel trotzdem den Abschnitts-Look, im Builder unter „Extra class“ eintragen: tk-h2 bzw. tk-h3 ══════════════════════════════════════════════════════════════════════════ */ /* ---------- H2: Abschnittsüberschrift ---------- */ .btContent .bt_bb_headline:not(.bt_bb_superheadline):not(.bt_bb_subheadline):not(.tk-h-invers) h2.bt_bb_headline_tag, .btContent .bt_bb_headline:not(.bt_bb_superheadline):not(.bt_bb_subheadline):not(.tk-h-invers) h2.bt_bb_headline_tag strong, .btContent .bt_bb_headline:not(.bt_bb_superheadline):not(.bt_bb_subheadline):not(.tk-h-invers) h2.bt_bb_headline_tag b, .btContent .bt_bb_headline:not(.bt_bb_superheadline):not(.bt_bb_subheadline):not(.tk-h-invers) h2.bt_bb_headline_tag a, .btContent .bt_bb_headline.tk-h2 h2.bt_bb_headline_tag, .btContent .bt_bb_headline.tk-h2 h2.bt_bb_headline_tag strong, .btContent .bt_bb_headline.tk-h2 h2.bt_bb_headline_tag b, .btContent .bt_bb_headline.tk-h2 h2.bt_bb_headline_tag a { color: #003a69 !important; -webkit-text-fill-color: #003a69 !important; } .btContent .bt_bb_headline:not(.bt_bb_superheadline):not(.bt_bb_subheadline):not(.tk-h-invers) h2.bt_bb_headline_tag, .btContent .bt_bb_headline.tk-h2 h2.bt_bb_headline_tag { font-size: 30px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: 0 !important; text-transform: none !important; margin-bottom: 20px; } /* Der orange Strich unter der H2. ACHTUNG – bewusst NICHT position:absolute mit left:0. Das sah bei zentrierten Überschriften falsch aus: Text mittig, Strich ganz links. Und über die Klasse .bt_bb_align_center ließ es sich nicht abfangen, weil die Zentrierung meist gar nicht von Bold kommt, sondern als text-align vom Abschnitt vererbt wird. Stattdessen: den Überschriftentext zu einem eigenen Block machen und den Strich als inline-block dahinter setzen. Der landet dadurch in einer eigenen Zeile und folgt dem text-align von ganz allein – links, mittig oder rechts. */ .btContent .bt_bb_headline:not(.bt_bb_superheadline):not(.bt_bb_subheadline):not(.tk-h-invers) h2.bt_bb_headline_tag .bt_bb_headline_content, .btContent .bt_bb_headline.tk-h2 h2.bt_bb_headline_tag .bt_bb_headline_content { display: block; } .btContent .bt_bb_headline:not(.bt_bb_superheadline):not(.bt_bb_subheadline):not(.tk-h-invers) h2.bt_bb_headline_tag::after, .btContent .bt_bb_headline.tk-h2 h2.bt_bb_headline_tag::after { content: ""; display: inline-block; vertical-align: top; width: 48px; height: 3px; margin-top: 14px; background: #d79c62; } /* ---------- H3: Unterüberschrift ---------- */ .btContent .bt_bb_headline:not(.bt_bb_superheadline):not(.bt_bb_subheadline):not(.tk-h-invers) h3.bt_bb_headline_tag, .btContent .bt_bb_headline:not(.bt_bb_superheadline):not(.bt_bb_subheadline):not(.tk-h-invers) h3.bt_bb_headline_tag strong, .btContent .bt_bb_headline:not(.bt_bb_superheadline):not(.bt_bb_subheadline):not(.tk-h-invers) h3.bt_bb_headline_tag b, .btContent .bt_bb_headline:not(.bt_bb_superheadline):not(.bt_bb_subheadline):not(.tk-h-invers) h3.bt_bb_headline_tag a, .btContent .bt_bb_headline.tk-h3 h3.bt_bb_headline_tag, .btContent .bt_bb_headline.tk-h3 h3.bt_bb_headline_tag strong, .btContent .bt_bb_headline.tk-h3 h3.bt_bb_headline_tag b, .btContent .bt_bb_headline.tk-h3 h3.bt_bb_headline_tag a { color: #003a69 !important; -webkit-text-fill-color: #003a69 !important; } .btContent .bt_bb_headline:not(.bt_bb_superheadline):not(.bt_bb_subheadline):not(.tk-h-invers) h3.bt_bb_headline_tag, .btContent .bt_bb_headline.tk-h3 h3.bt_bb_headline_tag { font-size: 19px !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: 0 !important; text-transform: none !important; border-left: 3px solid #d79c62; padding-left: 12px; margin-bottom: 12px; } /* Bold zeichnet seinen eigenen „Dash“ als ::before/::after am Inhalts-Span. Der würde sich mit unserem Strich beißen – für Abschnittsüberschriften aus. */ .btContent .bt_bb_headline:not(.bt_bb_superheadline):not(.bt_bb_subheadline) h2.bt_bb_headline_tag .bt_bb_headline_content::before, .btContent .bt_bb_headline:not(.bt_bb_superheadline):not(.bt_bb_subheadline) h2.bt_bb_headline_tag .bt_bb_headline_content::after, .btContent .bt_bb_headline:not(.bt_bb_superheadline):not(.bt_bb_subheadline) h3.bt_bb_headline_tag .bt_bb_headline_content::before, .btContent .bt_bb_headline:not(.bt_bb_superheadline):not(.bt_bb_subheadline) h3.bt_bb_headline_tag .bt_bb_headline_content::after { content: none !important; } /* ---------- Sonderfall: Überschrift auf farbigem/dunklem Block ---------- Im Bold-Builder unter „Extra class“ eintragen: tk-h-invers -> gleiche Größe und Form wie eine normale H2, aber weiß, damit sie auf dem farbigen Hintergrund lesbar bleibt (z. B. der CTA-Block auf /konzept/). */ .btContent .bt_bb_headline.tk-h-invers h2.bt_bb_headline_tag, .btContent .bt_bb_headline.tk-h-invers h2.bt_bb_headline_tag strong, .btContent .bt_bb_headline.tk-h-invers h2.bt_bb_headline_tag b { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .btContent .bt_bb_headline.tk-h-invers h2.bt_bb_headline_tag { font-size: 30px !important; font-weight: 700 !important; line-height: 1.25 !important; margin-bottom: 20px; } /* Strich wie oben: inline-block in eigener Zeile, folgt der Textausrichtung. */ .btContent .bt_bb_headline.tk-h-invers h2.bt_bb_headline_tag .bt_bb_headline_content { display: block; } .btContent .bt_bb_headline.tk-h-invers h2.bt_bb_headline_tag::after { content: ""; display: inline-block; vertical-align: top; width: 48px; height: 3px; margin-top: 14px; background: rgba(255,255,255,0.85); } /* ---------- Mobil etwas kompakter ---------- */ @media (max-width: 767px) { .btContent .bt_bb_headline:not(.bt_bb_superheadline):not(.bt_bb_subheadline) h2.bt_bb_headline_tag, .btContent .bt_bb_headline.tk-h2 h2.bt_bb_headline_tag, .btContent .bt_bb_headline.tk-h-invers h2.bt_bb_headline_tag { font-size: 25px !important; } .btContent .bt_bb_headline:not(.bt_bb_superheadline):not(.bt_bb_subheadline) h3.bt_bb_headline_tag, .btContent .bt_bb_headline.tk-h3 h3.bt_bb_headline_tag { font-size: 18px !important; } } /* ══════════════════════════════════════════════════════════════════════════ COOKIE-BANNER (Complianz) – CI-Anpassung ───────────────────────────────────────────────────────────────────────── Complianz erzeugt sein eigenes Banner-CSS (uploads/complianz/css/banner-1-*.css) aus den Backend-Einstellungen. Hier überschreiben wir nur Position, Breite und Farben, damit das Banner ins CI passt – zentral, mit !important und auf die Banner-ID begrenzt (trifft also NUR das Banner, sonst nichts). ACHTUNG: Position und Farben werden hier ERZWUNGEN. Wer sie im Complianz-Backend (Complianz → Einwilligungsbanner) ändert, sieht das wegen dieser Regeln nicht – dann bitte HIER anpassen. Wunsch war: mittig statt Ecke, breiter, kompakter. ══════════════════════════════════════════════════════════════════════════ */ /* Box: horizontal mittig unten, breiter und kompakter statt unten-rechts */ #cmplz-cookiebanner-container .cmplz-cookiebanner { position: fixed !important; left: 50% !important; right: auto !important; bottom: 24px !important; top: auto !important; transform: translateX(-50%) !important; width: min(700px, 94vw) !important; max-width: min(700px, 94vw) !important; margin: 0 !important; padding: 20px 26px !important; border-radius: 14px !important; border-top: 3px solid #d79c62 !important; background: #ffffff !important; box-shadow: 0 14px 44px rgba(0, 58, 105, 0.20) !important; } /* Titel in CI-Blau */ #cmplz-cookiebanner-container .cmplz-title { color: #003a69 !important; font-weight: 700 !important; font-size: 19px !important; } /* Fließtext etwas kompakter */ #cmplz-cookiebanner-container .cmplz-body, #cmplz-cookiebanner-container .cmplz-message { color: #3a4a57 !important; font-size: 14px !important; } #cmplz-cookiebanner-container .cmplz-categories { margin: 8px 0 !important; } #cmplz-cookiebanner-container a { color: #003a69 !important; } /* Button-Reihe */ #cmplz-cookiebanner-container .cmplz-buttons { gap: 10px !important; margin-top: 6px !important; } /* „Akzeptieren" = oranger CI-Pill (Hauptaktion) */ #cmplz-cookiebanner-container .cmplz-btn.cmplz-accept { background: #d79c62 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 0 !important; border-radius: 50px !important; font-weight: 700 !important; padding: 10px 24px !important; } #cmplz-cookiebanner-container .cmplz-btn.cmplz-accept:hover { background: #003a69 !important; } /* „Ablehnen" = blau umrandeter Pill – bewusst gleichwertig sichtbar (gleiche Größe/Fettung wie „Akzeptieren"; ungleiche Gewichtung wäre abmahnbar). */ #cmplz-cookiebanner-container .cmplz-btn.cmplz-deny { background: transparent !important; color: #003a69 !important; -webkit-text-fill-color: #003a69 !important; border: 2px solid #003a69 !important; border-radius: 50px !important; font-weight: 700 !important; padding: 9px 22px !important; } #cmplz-cookiebanner-container .cmplz-btn.cmplz-deny:hover { background: #003a69 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* „Einstellungen ansehen" / „Speichern" = dezent, textartig */ #cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences, #cmplz-cookiebanner-container .cmplz-btn.cmplz-save-preferences { background: transparent !important; color: #5f7382 !important; -webkit-text-fill-color: #5f7382 !important; text-decoration: underline !important; padding: 8px 6px !important; } /* Native Kategorie-Checkboxen (nach „Einstellungen ansehen") im CI-Blau */ #cmplz-cookiebanner-container .cmplz-cookiebanner input[type="checkbox"] { accent-color: #003a69 !important; } /* Mobil: Rand kleiner, damit die volle Breite genutzt wird */ @media (max-width: 600px) { #cmplz-cookiebanner-container .cmplz-cookiebanner { width: 94vw !important; max-width: 94vw !important; bottom: 12px !important; padding: 16px 18px !important; } } /* ══════════════════════════════════════════════════════════════════════════ KURS-STÄDTESEITEN (Kurse in Erfurt 3701 / Mühlhausen 3703): Teaser-Bilder rund + Tiles auf gleicher Höhe ───────────────────────────────────────────────────────────────────────── Wunsch: Alle Teaser-Fotos rund (wie bei /raumvermietung/), egal ob quadratisch oder im Querformat hochgeladen — kein Vorab-Zuschnitt mehr nötig. Und die Kacheln alle auf einer Höhe (das Theme staffelte sie: jede zweite Spalte war per Bold „vertikal unten" ausgerichtet → bt_bb_column mit justify-content:flex-end). Auf diese 2 Seiten begrenzt, damit sonst keine Bilder rund werden. ══════════════════════════════════════════════════════════════════════════ */ /* Teaser-Bilder zu Kreisen machen (Shape-Deko + Guitar-Demo ausgenommen) */ body.page-id-3701 .btContent .bt_bb_image:not(.btGuitarPlayer):not([class*="bt_bb_shape"]), body.page-id-3703 .btContent .bt_bb_image:not(.btGuitarPlayer):not([class*="bt_bb_shape"]) { display: block !important; aspect-ratio: 1 / 1 !important; border-radius: 50% !important; overflow: hidden !important; /* einen Hauch kleiner + zentriert, damit die Kreise sich nicht berühren */ width: 90% !important; margin-left: auto !important; margin-right: auto !important; } body.page-id-3701 .btContent .bt_bb_image:not(.btGuitarPlayer):not([class*="bt_bb_shape"]) img, body.page-id-3703 .btContent .bt_bb_image:not(.btGuitarPlayer):not([class*="bt_bb_shape"]) img { width: 100% !important; aspect-ratio: 1 / 1 !important; height: auto !important; object-fit: cover !important; border-radius: 0 !important; display: block !important; } /* Staffelung raus: alle Kacheln oben ausrichten (statt jede zweite unten) */ body.page-id-3701 .btContent .bt_bb_column.bt_bb_vertical_align_bottom, body.page-id-3703 .btContent .bt_bb_column.bt_bb_vertical_align_bottom { justify-content: flex-start !important; } /* =========================================================================== FOOTER-SPALTEN: weißen Text vereinheitlichen --------------------------------------------------------------------------- Ausgangslage (im Chrome bei 1920px gemessen) – drei Schriftgrößen, drei Zeilenabstände und zwei verschiedene Abstände zur Überschrift: Spalte 1 „Tanzkonzept Erfurt" (Icons) 13,5px / lh 14,85px / 30px Spalte 2 „Tanzkonzept Mühlhausen" (Icons) 13,5px / lh 14,85px / 30px Spalte 3 „Leistungen" (Menü) 13,5px / lh 13,5px / 15px Spalte 4 „Warum bei uns tanzen?" (Text) 15px / lh 27px / 15px Ziel: überall 15px / Zeilenabstand 21px / 30px Abstand zur Überschrift. Zum Zeilenabstand: Erst standen hier 27px (der Fließtext-Standard der Seite, gilt unten in der Fußzeile bei #menu-links). Das war im Footer zu luftig -> 21px (= 1,4). Spalte 4 stand von Haus aus auf 27px und wird ausdrücklich MIT verengt, sonst schert sie als einzige wieder aus. =========================================================================== */ /* Schriftgröße + Zeilenabstand für den weißen Text aller vier Spalten: Icon-Texte (Adresse/Telefon/Mail), die Menülinks und den Fließtext. Das Theme verkleinert die ersten beiden relativ per em, u. a. mit .bt_bb_custom_menu div ul a { font-size: .9em } -> hier überschrieben. Der Selektor „.bt_bb_icon_holder > span" trifft NUR den Textspan: Die Social-Media-Icons haben keinen span (ihre Glyphe steckt im ::before des Holders) und bleiben deshalb unangetastet. Alles ist auf .bt_bb_column_gap_40 (= diese 4-Spalten-Reihe) begrenzt, weil .bt_bb_text auch der Newsletter-Block und die Copyright-Zeile benutzen – die sollen sich nicht mitändern. */ .btSiteFooter .bt_bb_column_gap_40 .bt_bb_icon .bt_bb_icon_holder > span, .btSiteFooter .bt_bb_column_gap_40 #menu-leistungen a, .btSiteFooter .bt_bb_column_gap_40 .bt_bb_text, .btSiteFooter .bt_bb_column_gap_40 .bt_bb_text p { font-size: 15px !important; line-height: 21px !important; } /* Abstand Überschrift -> Inhalt in allen vier Spalten auf 30px. Bold regelt diesen Abstand nicht per margin, sondern über eigene Separator-Elemente, die pro Spalte unterschiedlich eingestellt waren (Sp. 1+2 = 30px unten, Sp. 3 = 15px unten, Sp. 4 = 15px OBEN). Anker .bt_bb_column_gap_40 = die 4-Spalten-Reihe; im Footer trägt nur sie diese Klasse. Damit bleibt der Newsletter-Block (eigene Sektion, eigene Reihe) außen vor. ACHTUNG: Wird im Builder der Spaltenabstand dieser Reihe geändert, ändert sich die Klasse und diese Regel greift nicht mehr. */ .btSiteFooter .bt_bb_column_gap_40 .bt_bb_headline + .bt_bb_separator { margin-top: 0 !important; margin-bottom: 30px !important; } /* =========================================================================== ANFAHRTSKARTE — Ausgabe des Shortcodes [tk_karte] (siehe functions.php) Ersetzt die Google-Maps-Elemente: Kartenbild vom eigenen Server + Adresse + „Route planen“-Button. Kein Drittanbieter beim Seitenaufruf, deshalb auch unabhängig vom Cookie-Banner immer sichtbar. =========================================================================== */ .tk-karte { border-radius: 12px; overflow: hidden; background: #f4f1ec; } .tk-karte .tk-karte-bild { display: block; width: 100%; height: auto; } .tk-karte-fuss { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 16px 22px; background: #003a69; } /* Das Theme färbt Text vielerorts über -webkit-text-fill-color; ohne die zweite Angabe bliebe die Farbe hier wirkungslos. */ .tk-karte-adresse { color: #fff; -webkit-text-fill-color: #fff; font-size: 15px; line-height: 21px; } .tk-karte-btn { flex: none; display: inline-block; padding: 10px 24px; background: #d79c62; color: #fff !important; -webkit-text-fill-color: #fff; border-radius: 50px; font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .04em; text-decoration: none; } .tk-karte-btn:hover, .tk-karte-btn:focus { background: #fff; color: #003a69 !important; -webkit-text-fill-color: #003a69; } @media (max-width: 575px) { .tk-karte-fuss { justify-content: center; text-align: center; } } /* ========================================================================== SPRINGENDES LAYOUT VERHINDERN (CLS) PROBLEM: Mobil sprang die Startseite beim Laden — Messwert CLS 0,23 (orange). Kein Schönheitsfehler: Wer tippt, während die Seite nachrutscht, landet woanders. Kostete außerdem den Punkt „Agentic Browsing“ (mobil 1/2 gegenüber 2/2 am Desktop). URSACHE — von Googles „Layout shift culprits“ benannt und danach im Browser nachgemessen, nicht geraten: Die KOMPLETTEN 0,230 stammen aus EINEM Bild: „Bewertungen.png“. Es sitzt über dem Abschnitt „Unsere nächsten Veranstaltungen“ und schiebt ihn beim Laden weg. DER MECHANISMUS (der eigentliche Trick an der Sache): DIV.bt_bb_image -> float: left <- schrumpft auf seinen Inhalt! SPAN -> 1px IMG -> 1px (Bolds Lazy-Loader startet mit 1x1-blank.gif) Bolds Lazy-Loader setzt keine width/height. Solange das Platzhalter-Pixel drin liegt, ist die GANZE Kette 1 Pixel breit — weil der Wrapper floatet und deshalb auf den Inhalt zusammenfällt. Beim Laden wird daraus schlagartig 580 x 557 px. ⚠️ DESHALB REICHT `aspect-ratio` AUF DEM BILD ALLEIN NICHT. Ohne Breite bleibt das Bild 1px breit -> das Verhältnis ergibt 1px Höhe -> nichts gewonnen. Der floatende Wrapper MUSS zuerst eine Breite bekommen (`width: 100%`), sonst dreht man sich im Kreis: Bild fragt Wrapper, Wrapper fragt Bild. NACHGEMESSEN (Startseite, live im Browser): vor dem Laden: 580 x 557 (Platz reserviert) nach dem Laden: 580 x 557 (identisch) -> null Verschiebung Optisch ändert sich also NICHTS, das Bild erscheint exakt wie bisher. ⚠️ „Warum-bei-uns-tanzen.jpg“ ist bewusst NICHT dabei: Google weist ihm Score 0,000 zu (es lädt früh genug, um nichts zu verschieben). Ein Eingriff dort wäre Risiko ohne Gegenwert. ⚠️ AN DEN DATEINAMEN GEKOPPELT — unvermeidbar: Bolds Lazy-Loader schreibt keine Maße ins und bietet dafür kein Feld; CSS kann ein Seitenverhältnis nicht aus der Bilddatei ableiten. Folge: Wird „Bewertungen.png“ gegen ein Bild mit ANDEREM Format getauscht, stimmt 600/576 nicht mehr und das Springen kommt zurück. Dann hier die neuen Maße eintragen (Mediathek -> Bild -> Maße). ========================================================================== */ .bt_bb_image:has( img.btLazyLoadImage[data-image_src*="Bewertungen"] ) { width: 100%; } img.btLazyLoadImage[data-image_src*="Bewertungen"] { width: 100%; height: auto; aspect-ratio: 600 / 576; /* echte Maße: 600 x 576 */ } /* ========================================================================== KUNDENKONTO IM CI (17.07.2026) Betrifft: Meine Kurse, Kontodetails (Name/E-Mail-Anzeige + Ändern-Knopf), Meine Adressen. Farben: Logo-Blau #003a69, Orange #d79c62 (siehe Memory design-system-farben). Die Adress-Überschriften bekommen den H3-Look der Seite (blau, oranger Balken links). Lieferadresse wird per Filter ausgeblendet (Kurs-Shop, kein Versand) – siehe meine-kurse.php. ========================================================================== */ /* --- Kontodetails: Anzeige von Name/E-Mail als ruhige Karte --- */ .woocommerce-account .tk-konto-daten { width: 100%; max-width: 36em; border: 1px solid #d8dee4; border-radius: 8px; border-collapse: collapse; overflow: hidden; margin: 0 0 1.25rem; } .woocommerce-account .tk-konto-daten th, .woocommerce-account .tk-konto-daten td { border: 0; border-bottom: 1px solid #eceff3; padding: .85rem 1.25rem; } .woocommerce-account .tk-konto-daten tr:last-child th, .woocommerce-account .tk-konto-daten tr:last-child td { border-bottom: 0; } .woocommerce-account .tk-konto-daten th { width: 8em; color: #5f7382; font-weight: 600; background: #f7f9fb; } .woocommerce-account .tk-konto-daten td { color: #17222c; } /* --- EINHEITLICHE Konto-Links: "Daten ändern", "Passwort ändern", "Abbrechen", die Adress-Links (Bearbeiten/hinzufügen) und "Zur Bestellung" sehen ALLE gleich aus – orangefarbener Textlink, kein Knopf, kein Sonderfall. (Nutzerwunsch 17.07.2026: Links nicht unterschiedlich formatieren.) --- */ .woocommerce-account .tk-konto-links a, .woocommerce-account .tk-konto-abbrechen, .woocommerce-account .woocommerce-Address-title a, .woocommerce-account .tk-kurs-link { display: inline-block; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; color: #d79c62 !important; -webkit-text-fill-color: #d79c62; font-weight: 600; text-decoration: none; } .woocommerce-account .tk-konto-links a:hover, .woocommerce-account .tk-konto-abbrechen:hover, .woocommerce-account .woocommerce-Address-title a:hover, .woocommerce-account .tk-kurs-link:hover, .woocommerce-account .tk-konto-links a:focus, .woocommerce-account .tk-konto-abbrechen:focus, .woocommerce-account .woocommerce-Address-title a:focus, .woocommerce-account .tk-kurs-link:focus { text-decoration: underline; } .woocommerce-account .tk-konto-links { display: flex; gap: 1.5rem; margin: 0; } .woocommerce-account .tk-form-aktionen { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; } /* --- Meine Kurse: Karten im CI --- */ .woocommerce-account .tk-meine-kurse { display: flex; flex-direction: column; gap: 1rem; max-width: 44em; } .woocommerce-account .tk-kurs-karte { border: 1px solid #d8dee4; border-left: 3px solid #003a69; border-radius: 0 8px 8px 0; padding: 1rem 1.25rem; background: #fff; } .woocommerce-account .tk-kurs-kopf { font-size: 1.15rem; color: #003a69; margin-bottom: .5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .woocommerce-account .tk-badge span { font-style: normal; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; padding: .18rem .55rem; border-radius: 999px; } .woocommerce-account .tk-kurs-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; } .woocommerce-account .tk-kurs-meta li { margin: 0; } .woocommerce-account .tk-kurs-meta span { color: #5f7382; font-size: .78rem; display: block; } .woocommerce-account .tk-kurs-link { margin-top: .75rem; /* Farbe/Gewicht kommen aus der einheitlichen Konto-Link-Regel weiter unten. */ } /* --- Meine Kurse: Abschnitt „Ältere Kurse" (beendete Verträge, gedämpft) --- */ .woocommerce-account .tk-aeltere-kurse-titel { color: #5f7382; font-size: 1.15rem; margin: 2.25em 0 .75em; } .woocommerce-account .tk-aeltere-kurse .tk-kurs-karte { border-left-color: #b8c2cc; opacity: .72; } .woocommerce-account .tk-aeltere-kurse .tk-kurs-kopf strong { color: #5f7382; } /* --- Meine Adressen: Überschriften in den H3-Look, Adresse als Karte --- */ .woocommerce-account .woocommerce-Address { border: 1px solid #d8dee4; border-radius: 8px; padding: 1.1rem 1.35rem; background: #fff; margin-bottom: 1.25rem; } .woocommerce-account .woocommerce-Address-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; padding-left: .75rem; border-left: 3px solid #d79c62; } .woocommerce-account .woocommerce-Address-title h3 { margin: 0; font-size: 1.15rem; color: #003a69 !important; -webkit-text-fill-color: #003a69; } .woocommerce-account .woocommerce-Address-title a { font-size: .85rem; font-weight: 600; color: #d79c62; -webkit-text-fill-color: #d79c62; } .woocommerce-account .woocommerce-Address address { color: #17222c; font-style: normal; line-height: 1.6; } /* ========================================================================== HEADER: SUCH- UND KONTO-ICON (19.07.2026) Vorbild kneipp.com. Reihenfolge im Header: Suche · Konto · Warenkorb. Serverseitig vor das Warenkorb-Widget gehaengt (konto-icon.php), mobil wandert der ganze Block mit dem Warenkorb in .btVerticalHeaderTop. ========================================================================== */ .tk-headtools { display: flex !important; align-items: center; gap: 0; float: none !important; height: auto !important; } .tk-headtool { position: relative; display: flex; align-items: center; } /* Icon-Flaeche 36px: eng genug, dass die drei als GRUPPE lesbar sind (Nutzer, 19.07.). Mobil bleibt sie bei 40px — dort zaehlt die Fingerflaeche mehr. */ .tk-headtool__knopf { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; line-height: 1; border-radius: 50%; transition: color .15s ease, background-color .15s ease; } .tk-headtool__knopf:hover, .tk-headtool__knopf:focus-visible { color: #d79c62; background: rgba(215, 156, 98, .12); } /* ── Alle drei Icons zu EINEM Satz machen ──────────────────────────────── Ausgangslage: Der Warenkorb ist ein eigenes Theme-Widget NEBEN unserem Block — mit nur 19px Breite, ohne Klickfläche, ohne Hover und optisch 2px zu hoch (die Theme-Zeilenhöhe von 38px zieht das Glyph nach oben). Deshalb reicht es NICHT, nur die Icongröße anzugleichen. */ /* 1) Eine gemeinsame Flex-Zeile -> gleichmäßige Abstände zwischen ALLEN drei (gemessen danach: 46px-Raster, vorher unregelmäßig). */ .topBarInMenuCell { display: flex !important; align-items: center; gap: 0; } /* 2) Gleiche Glyph-Größe: unsere SVGs kamen mit 22px, der Warenkorb mit 11,7px Schrift (≈14px). Treffpunkt bei 19px. */ .tk-headtool .tk-ico { display: block; width: 19px; height: 19px; } .btTopBox.widget_shopping_cart .btCartWidget { font-size: 16px !important; } /* 3) Warenkorb auf dieselbe Bauform: 44er-Fläche + Hover-Kreis wie die anderen. ⚠️ .btCartWidget bleibt Positionsanker fürs Mini-Cart-Dropdown (top:100%), .btCartWidgetIcon bleibt Anker für den Zähler — beide nur umformatiert, nicht aus dem Positionsfluss genommen. */ .btTopBox.woocommerce.widget_shopping_cart, .btTopBox.woocommerce.widget_shopping_cart .widget_shopping_cart_content { display: flex !important; align-items: center; } .btTopBox.woocommerce.widget_shopping_cart .btCartWidget { display: flex !important; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; /* ⚠️ margin:0 ist nötig: Das Theme legt MOBIL 8px links/rechts auf dieses Element (gemessen 19.07. bei 375px: Box 56 statt 40 -> Raster sprang von 40 auf 48px). Der Reset auf .btTopBox greift nur die äußere Box ab. */ margin: 0 !important; transition: color .15s ease, background-color .15s ease; } .btTopBox.woocommerce.widget_shopping_cart .btCartWidget:hover { color: #d79c62; background: rgba(215, 156, 98, .12); } /* 4) Mini-Warenkorb per HOVER öffnen — genau wie das Konto-Menü (Nutzer 19.07.: „sollte nur konsistent sein"). Das Theme versteckt das Panel über opacity:0 + visibility:hidden + translateY(-100%); wir kehren das um. 🔑 KEIN Breakpoint nötig: Mobil liegt der Warenkorb in .tk-mobcart-holder, am Desktop in .topBarInMenuCell. Der Selektor folgt damit dem tatsächlichen Zustand statt einer geratenen Pixelgrenze — und mobil bleibt es beim Tippen. Das Panel ist ein KIND von .btCartWidget, der Hover bleibt also bestehen, während man in die Liste fährt. */ .topBarInMenuCell .btCartWidget:hover .btCartWidgetInnerContent { opacity: 1 !important; visibility: visible !important; transform: none !important; } /* Glyph mittig statt an der 38px-Zeile ausgerichtet -> gleiche Grundlinie. */ .btTopBox.woocommerce.widget_shopping_cart .btCartWidgetIcon { display: flex !important; align-items: center; justify-content: center; line-height: 1 !important; height: auto !important; } /* --- Konto-Menü: klappt am Desktop per Hover/Fokus auf (wie der Mini-Warenkorb) --- */ .tk-konto__menu { position: absolute; top: 100%; right: 0; z-index: 140; min-width: 240px; background: #fff; border: 1px solid #d8dee4; border-radius: 8px; box-shadow: 0 12px 28px rgba(0, 58, 105, .14); padding: .5rem 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .tk-konto:hover .tk-konto__menu, .tk-konto:focus-within .tk-konto__menu, .tk-konto.offen .tk-konto__menu { opacity: 1; visibility: visible; transform: translateY(0); } .tk-konto__gruss { margin: 0; padding: .1rem 1rem .5rem; border-bottom: 1px solid #e8edf2; color: #5f7382; font-size: .75rem; line-height: 1.3 !important; } .tk-konto__gruss strong { color: #003a69; font-size: .9rem; } /* ⚠️ Kompaktheit braucht !important: Das Theme vererbt im Header-Kontext line-height:38px auf die Links und legt 9,4px Innenabstand auf jedes
  • — zusammen 73px pro Zeile. Ohne das Überschreiben wird das Menü riesig. */ .tk-konto__menu ul { list-style: none; margin: .3rem 0 0; padding: 0; } .tk-konto__menu li { margin: 0 !important; padding: 0 !important; line-height: 1.35 !important; } .tk-konto__menu li a { display: block; padding: .4rem 1rem !important; line-height: 1.35 !important; color: #17222c; font-size: .88rem; text-decoration: none; border-left: 2px solid transparent; } .tk-konto__menu li a:hover, .tk-konto__menu li a:focus-visible { background: #f4f6f8; color: #003a69; border-left-color: #d79c62; } /* „Abmelden" optisch absetzen — es ist der einzige Punkt, der etwas beendet. */ /* !important nötig, weil die Kompakt-Regel oben ebenfalls !important setzt. */ .tk-konto__menu li.tk-konto__customer-logout { margin-top: .3rem !important; padding-top: .3rem !important; border-top: 1px solid #e8edf2; } .tk-konto__menu li.tk-konto__customer-logout a { color: #5f7382; } /* --- Suchfeld: klappt per Klick auf --- */ .tk-suche__feld { position: absolute; top: 100%; right: 0; z-index: 140; background: #fff; border: 1px solid #d8dee4; border-radius: 8px; box-shadow: 0 12px 28px rgba(0, 58, 105, .14); padding: .6rem; display: none; } .tk-suche.offen .tk-suche__feld { display: block; } /* Feste Panel-Breite. Vorher ergab sie sich aus dem Inhalt — und weil das Eingabefeld schrumpfen durfte (flex 0 1 auto), kollabierten beide auf 62px. */ .tk-suche__feld { width: 340px; max-width: calc(100vw - 24px); } .tk-suche__feld form { display: flex; align-items: center; gap: .4rem; } .tk-suche__feld input[type="search"] { flex: 1 1 auto; width: auto; min-width: 0; max-width: none; margin: 0; padding: .45rem .7rem; font-size: .92rem; border: 1px solid #d8dee4; border-radius: 6px; } .tk-suche__feld button { background: #003a69; color: #fff; border: 0; border-radius: 6px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .tk-suche__feld button:hover { background: #d79c62; } /* --- Mobil: Menü gibt es auch (Nutzer 19.07., wie bei Kneipp). Da es kein Hover gibt, öffnet ein Tipp aufs Icon per Klasse .offen (Skript in konto-icon.php). Position fest am rechten Rand — sonst läuft es aus dem Viewport, genau wie beim Mini-Warenkorb. --- */ .tk-mobcart-holder .tk-konto__menu { position: fixed !important; top: 54px !important; right: 12px !important; left: auto !important; width: 250px; max-width: calc(100vw - 24px); } /* Mobil NICHT per Hover öffnen — sonst bliebe es nach dem Antippen „kleben". */ .tk-mobcart-holder .tk-konto:hover .tk-konto__menu { opacity: 0; visibility: hidden; transform: translateY(6px); } /* 🔴 KRITISCH (19.07.2026): In `.tk-mobcart-holder` gilt eine Altregel `visibility: visible !important` für ALLE Nachfahren (functions.php, stammt vom Warenkorb-Umzug — sie war nötig, weil das eingeklappte Menü seine Kinder auf hidden setzt). Seit das Konto-Menü dort drinsitzt, traf sie auch dieses: Es war zwar unsichtbar (opacity:0), blieb aber ANKLICKBAR und verschluckte als 250px breite, ~260px hohe Fläche die Taps auf dem Inhalt darunter. Genau daher kamen die „falsch verlinkten" Konto-Tabs — der Tap landete auf dem Menüpunkt, der zufällig an dieser Stelle lag (meist „Bestellungen"). Deshalb hier ausdrücklich zurücknehmen, solange das Menü zu ist. */ .tk-mobcart-holder .tk-konto__menu { visibility: hidden !important; pointer-events: none !important; } .tk-mobcart-holder .tk-konto.offen .tk-konto__menu { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; } /* 🔴 DIESELBE URSACHE, ZWEITER FALL (19.07.2026) — „mobiles Menue reagiert manchmal nicht, wenn man Unterpunkte oeffnen will". Der Mini-Warenkorb bringt sein eigenes Aufklapp-Panel mit (.btCartWidgetInnerContent). Es ist ebenfalls ein Kind des Holders und wird damit ebenfalls von der Altregel auf visibility:visible gezwungen; weiter oben in dieser Datei steht es zusaetzlich auf z-index:99999 + position:absolute. Auf 375px gemessen: 300x98px bei y=74..172, opacity:0 — unsichtbar, aber voll klickbar, und liegt genau ueber den obersten Menuepunkten („Ueber uns", „Kursangebot"). Alle Probepunkte in der Flaeche wurden vom Panel gefangen. Warum erst jetzt: die Theme-Regeln fuer den GESCHLOSSENEN Zustand sind auf `.menuPort` gescopet und greifen nach dem Umzug in den Holder nicht mehr. ⚠️ Geoeffnet wird mobil ueber die Klasse `.on` am `.widget_shopping_cart_content` (framework/js/misc.js, Toggler `.verticalMenuCartToggler` aus mini-cart.php). Dieser Zustand MUSS erhalten bleiben — sonst ist der mobile Warenkorb tot. */ /* Wirksam ist hier `pointer-events` — das Panel ist durch opacity:0 ohnehin unsichtbar, es fing nur die Taps ab. `visibility` steht zusaetzlich drin, schadet nicht, ist aber nicht der Hebel. Verifiziert wurde per Treffertest (elementFromPoint an 4 Punkten der Flaeche), NICHT ueber getComputedStyle. */ .tk-mobcart-holder .widget_shopping_cart_content .btCartWidgetInnerContent { visibility: hidden !important; pointer-events: none !important; } .tk-mobcart-holder .widget_shopping_cart_content.on .btCartWidgetInnerContent { visibility: visible !important; pointer-events: auto !important; } .tk-mobcart-holder .tk-headtools { gap: 0; } .tk-mobcart-holder .tk-headtool__knopf, .tk-mobcart-holder .btTopBox.woocommerce.widget_shopping_cart .btCartWidget { width: 40px; height: 40px; } /* Suchfeld mobil am rechten Rand halten, damit es nicht aus dem Bild läuft */ .tk-mobcart-holder .tk-suche__feld { position: fixed !important; top: 54px !important; right: 12px !important; left: auto !important; } /* ========================================================================== BOLD-BUILDER: FRONTEND-BEARBEITEN-KNÖPFE MOBIL AUSBLENDEN (19.07.2026) ───────────────────────────────────────────────────────────────────────── Problem (Nutzer 19.07.): Auf dem Handy führten die Konto-Tabs woanders hin — „Meine Kurse" landete z. B. beim Kurskalender. Die ZIELE sind korrekt (mehrfach geprüft, auch bei 435px), und dasselbe Menü im Header funktioniert mit exakt denselben Adressen einwandfrei. URSACHE: die Frontend-Bearbeiten-Schicht des Bold Page Builders — zwei Teile, beide müssen weg: a) schwebende Werkzeuge (`position:fixed`, right/left:50px, z-index 100, ohne mobile Anpassung) — u. a. `#bt_bb_fe_dialog_switch`, der 32x128- Streifen am linken Rand. b) 🔑 die GRIFFE AM INHALT (`.bt_bb_fe_edit` & Co.) — eine klickbare Schicht ÜBER den Elementen, auf schmalen Bildschirmen genau über der Konto- Navigation. Ein Tap öffnet dann das Builder-Kontextmenü (Edit/Cut/Copy/ Delete), statt dem Link zu folgen. ⚠️ Betrifft NUR eingeloggte Bearbeiter — normale Kunden sehen davon nichts (ausgeloggt geprüft: im HTML vorhanden, aber unsichtbar). 🔴 PRÜF-FALLE (teuer gelernt): Ein per Skript ausgelöster Klick (`a.click()`) ruft die Aktion des Elements DIREKT auf und umgeht jede darüberliegende Schicht — mein Test sah deshalb sauber aus, obwohl echtes Tippen scheiterte. Für Überlagerungen IMMER `document.elementFromPoint(x,y)` prüfen, nie klicken. ========================================================================== */ @media screen and (max-width: 1024px) { /* a) Die schwebenden Werkzeug-Knöpfe */ #bt_bb_fe_preview_toggler, #bt_bb_fe_add_elements, #bt_bb_fe_undo, #bt_bb_fe_redo, #bt_bb_fe_save, #bt_bb_fe_dialog, #bt_bb_fe_dialog_switch, #bt_bb_fe_add_section, #bt_bb_fe_add_section_dialog, /* b) Die klickbare Bearbeiten-Schicht + das Zähler-Bubble. 🔴 NUR DIESE ausblenden! `.bt_bb_fe_before` ist die absolut positionierte Schicht über jedem Element — genau die blendet das Plugin auch selbst aus, sobald man in den Vorschau-Modus schaltet (siehe `body.bt_bb_fe_preview_toggle .bt_bb_fe_before{display:none}` im Plugin-CSS). ⚠️ NIEMALS `.bt_bb_fe_edit`, `.bt_bb_fe_edit_box` oder `.bt_bb_fe_editing_box` ausblenden: Das sind KEINE Overlays, sondern Markierungsklassen, die der Builder per JS an den ECHTEN Inhalt hängt (sie setzen nur cursor/position). `display:none` darauf löscht die halbe Seite — genau das ist mir am 19.07. passiert („Inhalt kurz da, dann weg"). */ .bt_bb_fe_before, .bt_bb_fe_count, .bt_bb_fe_count_inner { display: none !important; pointer-events: none !important; } } /* ========================================================================== EIGENE KONTO-NAVIGATION FÜR MOBIL (19.07.2026) ───────────────────────────────────────────────────────────────────────── Ersetzt die umbrechenden Standard-Tabs auf schmalen Bildschirmen. Grund: Dort lagen fremde Schichten über den Tabs, Tipps landeten beim falschen Ziel (Kontodetails und Meine Kurse führten beide zu den Bestellungen). Eigene Liste = eigene Ebene, keine Überlagerung, große Tippflächen. Am Desktop bleiben die gewohnten Tabs. ========================================================================== */ .tk-konto-nav { display: none; } @media screen and (max-width: 1024px) { /* Standard-Tabs mobil raus … */ .woocommerce-account .woocommerce-MyAccount-navigation { display: none !important; } /* … und stattdessen die eigene Liste. `isolation` macht einen eigenen Stapelkontext auf, damit sich nichts mehr darüberlegen kann. */ .tk-konto-nav { display: block; position: relative; z-index: 30; isolation: isolate; margin: 0 0 1.75rem; } /* Optik = die Filter-Chips vom Kursangebot (Nutzer-Vorbild): Pillenform, 1px Rahmen, nebeneinander und umbrechend. Innenabstand etwas größer als beim Filter-Plugin (dort nur 1-2px), damit die Tippfläche am Handy taugt. */ .tk-konto-nav ul { list-style: none !important; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } /* !important, weil das Theme auf Listen im Inhalt eigene Abstände legt. */ .tk-konto-nav li { margin: 0 !important; padding: 0 !important; line-height: 1.35 !important; border: 0 !important; list-style: none !important; } .tk-konto-nav a { display: inline-block; padding: .58rem 1.05rem !important; line-height: 1.3 !important; font-size: .92rem; color: #17222c; text-decoration: none; background: #fff; border: 1px solid #d8dee4; border-radius: 50px; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .tk-konto-nav a:hover, .tk-konto-nav a:focus-visible { border-color: #d79c62; color: #003a69; } /* Aktiv = gefüllt, damit man auf einen Blick sieht, wo man ist. */ .tk-konto-nav a.tk-aktiv { background: #003a69; border-color: #003a69; color: #fff; font-weight: 600; } } /* ========================================================================== KURSKALENDER-KASTEN: MOBILE DARSTELLUNG (19.07.2026) Die beiden Knöpfe standen nebeneinander, brachen mitten im Wort um und liefen aus dem Kasten heraus („ALS / PDF"). Jetzt: nebeneinander solange Platz ist, darunter gestapelt und volle Breite. ========================================================================== */ .tk-kurskalender-box .tk-cal-buttons { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 .9rem; } .tk-kurskalender-box .tk-cal-buttons .button { margin: 0 !important; white-space: nowrap; } @media screen and (max-width: 600px) { /* Der Kasten hat inline 1.5em Seitenabstand — mobil zu viel. */ .tk-kurskalender-box { padding: 1.1rem 1rem !important; } .tk-kurskalender-box .tk-cal-buttons { flex-direction: column; } .tk-kurskalender-box .tk-cal-buttons .button { display: block; width: 100%; text-align: center; white-space: normal; /* lieber umbrechen als überlaufen */ } .tk-kurskalender-box h3 { font-size: 1.3rem !important; } } /* ========================================================================== KONTO: BEVORZUGTER STANDORT (19.07.2026) Mehrfachauswahl per Checkbox — „beides" ist einfach beides angehakt. Zweck: intern für die Newsletter-Segmentierung. ========================================================================== */ .tk-standort-wahl { border: 1px solid #d8dee4; border-radius: 8px; padding: 1rem 1.25rem 1.1rem; margin: 0 0 1.25rem; } .tk-standort-wahl legend { padding: 0 .4rem; color: #003a69; font-weight: 600; font-size: .95rem; } .tk-standort-hinweis { margin: 0 0 .7rem; color: #5f7382; font-size: .85rem; max-width: 34em; } .tk-standort-option { display: inline-flex; align-items: center; gap: .45rem; margin: 0 1.5rem .35rem 0; cursor: pointer; color: #17222c; } .tk-standort-option input[type="checkbox"] { width: 1rem; height: 1rem; margin: 0; accent-color: #003a69; } /* ========================================================================== TEILNEHMER-FELDER (17.07.2026) Im Checkout wie der Tickera-Kasten (grau, Überschrift "Teilnehmer"), im Konto die Anzeige "Teilnehmer: … & …" mit verstecktem Ändern-Formular. ========================================================================== */ /* --- Checkout: Kasten je Kurs, als eigene Zeile in der Bestellübersicht --- */ /* Die Zeile spannt über beide Spalten und trägt keinen eigenen Zellenrahmen, damit der graue Kasten direkt am Produkt darüber "klebt" (wie bei Tickera). */ .tk-teilnehmer-review-row > td { padding: 0 20px 1rem !important; /* 20px = gleiche Einrückung wie Produktbild/-text darüber */ border: 0 !important; background: none !important; } .tk-teilnehmer-box { background: #f4f6f8; border: 1px solid #e3d3c0; border-radius: 8px; padding: 1rem 1.25rem 1.25rem; margin-bottom: 1rem; } .tk-teilnehmer-review-row .tk-teilnehmer-box { margin-bottom: 0; } .tk-teilnehmer-kopf { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #5f7382; font-weight: 700; margin-bottom: .25rem; } .tk-teilnehmer-fuer { color: #003a69; font-weight: 600; margin: 0 0 .75rem; } .tk-teilnehmer-box label { display: block; margin-bottom: .2rem; color: #17222c; } .tk-teilnehmer-box input[type="text"] { width: 100%; } /* --- Konto: Teilnehmer-Zeile in der Kurskarte --- */ .woocommerce-account .tk-teilnehmer-zeile { margin-top: .75rem; color: #17222c; } .woocommerce-account .tk-teilnehmer-label { color: #5f7382; font-size: .85rem; } /* Ändern-Formular ist erst verborgen (JS klappt es auf). */ .woocommerce-account .tk-teilnehmer-form { display: none; margin-top: .75rem; max-width: 30em; } .woocommerce-account .tk-teilnehmer-feld { margin: 0 0 .6rem; } .woocommerce-account .tk-teilnehmer-feld label { display: block; color: #5f7382; font-size: .8rem; margin-bottom: .15rem; } .woocommerce-account .tk-teilnehmer-feld input[type="text"] { width: 100%; } /* === ANTRAG AUF VERTRAGSPAUSE (19.07.2026) === Gleiche Bauart wie das Teilnehmer-Formular: erst verborgen, JS klappt auf. */ .woocommerce-account .tk-pause-form { display: none; margin-top: .75rem; max-width: 30em; padding: 16px 18px; background: rgba(0, 58, 105, .04); border: 1px solid rgba(0, 58, 105, .12); border-radius: 10px; } .woocommerce-account .tk-pause-form .tk-teilnehmer-feld input[type="date"], .woocommerce-account .tk-pause-form textarea, .woocommerce-account .tk-pause-form select { width: 100%; font-size: 15px; } /* === STANDORT IN DER KATEGORIEZEILE (19.07.2026) === Der Ort steht vorn in der Kategoriezeile über dem Produkttitel und kommt aus dem Attribut „Standort" (Helfer tk_supertitle_mit_ort in der functions.php). ⚠️ HIER BEWUSST KEINE FARBREGEL: Der Ort wird als ohne href ausgegeben und erbt dadurch die Theme-Regeln `.btArticleCategories a` (Farbe) sowie `a:not(:first-child):before` (Trennpunkt). Eine eigene Farbe würde beim nächsten Theme-Update auseinanderlaufen. Nur der Mauszeiger muss weg — ohne href gäbe es sonst einen Text-Cursor, der eine Klickmöglichkeit vortäuscht. */ .btArticleCategories a.tk-ort { cursor: default; text-decoration: none; } /* Antragsknopf: nur oranger Umriss, in der Pillenform der Konto-Chips. ⚠️ Bewusst DEZENT (Nutzer: „will ja keinen ermutigen") — eine Vertragspause ist ein Notausgang, kein Angebot. Deshalb kein gefüllter Knopf, und deshalb trägt das Element im PHP auch NICHT die Theme-Klasse `button`: die würde es in einen gefüllten orangen Aktionsknopf verwandeln. `display:block` setzt ihn auf eine eigene Zeile, sonst klebt er am „Zur Bestellung"-Link. */ .woocommerce-account .tk-pause-toggle { display: block; width: -moz-fit-content; width: fit-content; margin-top: 1rem; padding: 6px 16px; background: transparent; border: 1px solid #d79c62; border-radius: 50px; color: #b07c40; font-size: .8rem; font-weight: 500; line-height: 1.4; cursor: pointer; transition: background .15s, color .15s; } .woocommerce-account .tk-pause-toggle:hover, .woocommerce-account .tk-pause-toggle:focus-visible { background: rgba(215, 156, 98, .12); color: #8a5a12; } .woocommerce-account .tk-pause-intro { margin: 0 0 .9rem; color: #5f7382; font-size: .88rem; line-height: 1.5; } /* Der Datenschutzhinweis steht bewusst DIREKT am Begründungsfeld – dort wird entschieden, was jemand preisgibt, nicht weiter oben im Fließtext. */ .woocommerce-account .tk-pause-datenschutz { display: block; margin-top: .35rem; color: #5f7382; font-size: .78rem; line-height: 1.45; } .woocommerce-account .tk-pause-hinweis { margin: .75rem 0 0; color: #5f7382; font-size: .85rem; } .woocommerce-account .tk-pause-meldung { margin: 0 0 1.4rem; padding: 13px 17px; border-radius: 10px; border-left: 3px solid; font-size: .95rem; } .woocommerce-account .tk-pause-meldung--ok { background: rgba(31, 107, 70, .08); border-left-color: #1f6b46; color: #17222c; } .woocommerce-account .tk-pause-meldung--fehler { background: rgba(155, 44, 44, .08); border-left-color: #9b2c2c; color: #17222c; } /* === Kontaktformular: Telefonfeld + bevorzugter Kontaktweg (18.07.2026) === Telefonfeld nimmt eine ganze Zeile ein — analog zu .btContactMessage. */ .btContact .btContactRow .btContactPhone { -webkit-flex: 1 0 100%; -ms-flex: 1 0 100%; flex: 1 0 100%; max-width: 100%; position: relative; } /* Das Theme liefert Dripicons-Glyphen nur für Name, E-Mail und Nachricht; einen Telefonhörer gibt es in der Schrift nicht. Deshalb als eingebettetes SVG (kein externer Request) und über mask eingefärbt wie die anderen drei. */ .btContact .btContactRow .icon_phone:before { --tk-tel-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); content: ""; display: block; width: 1em; height: 1em; background-color: #ee5b54; -webkit-mask: var(--tk-tel-icon) center / contain no-repeat; mask: var(--tk-tel-icon) center / contain no-repeat; } /* Kontaktweg: Frage über den Chips. Das > * fängt beides ab — je nachdem, ob CF7 die Zeile in ein

    packt oder Frage und Chips einzeln stehen. */ .btContact .btContactRow.tk-kontaktweg > * { -webkit-flex: 1 0 100%; -ms-flex: 1 0 100%; flex: 1 0 100%; max-width: 100%; } /* Abstand gehoert VOR die Frage, nicht zwischen Frage und Chips — sonst wirkt die Frage wie eine Beschriftung des Telefonfeldes darueber. */ .btContact .btContactRow.tk-kontaktweg { padding-top: 10px; } .btContact .tk-kontaktweg-frage { display: block; margin-bottom: 4px; color: #5f7382; font-size: 14px; font-weight: 500; } /* CF7 setzt per wpautop ein
    hinter die Frage. Zusammen mit display:block waere das ein doppelter Umbruch — daher raus, ebenso der Standardabstand der Radio-Gruppe (nur hier, sonst bleibt er global bestehen). */ .btContact .btContactRow.tk-kontaktweg br { display: none; } .btContact .btContactRow.tk-kontaktweg .wpcf7-radio { margin-top: 0; } /* === WARENKORB (Block-Warenkorb) AUFGERAEUMT (19.07.2026) === Nutzer: „diese Linien um die Tabelle sind ja grausam und dann alles an den Rand geklatscht". Gemessen bei 1280px Fensterbreite: (a) Der Block `.wp-block-woocommerce-cart` sass bei links 0 mit 1265px Breite und brach damit als einziges Element aus dem Seitenraster aus — Ueberschrift und Theme-Zeilen liegen bei links 33 / Breite 1200. (b) WooCommerce-Blocks zeichnet `1px solid rgba(0,0,0,.07)` RUNDUM um die Tabelle UND um jede Kopf- und Inhaltszelle => eingekastelter Eindruck. ⚠️ Das ist der BLOCK-Warenkorb (React). Klassische WooCommerce-Selektoren wie `.shop_table` greifen hier NICHT — nur die `wc-block-*`-Klassen. */ /* (a) An den Rhythmus der Seite angleichen statt eigener Randwerte. min() haelt unter 1240px automatisch 20px Luft zu beiden Seiten (mobil). */ .wp-block-woocommerce-cart { width: min(1200px, 100% - 40px); margin-inline: auto; } /* (b) Kasten weg. Es bleiben nur waagerechte Trennlinien im CI-Blau, die letzte Zeile ohne Linie, damit die Tabelle nach unten offen wirkt. */ .wc-block-cart-items, .wc-block-cart-items__header { border: 0 !important; } /* Kopfzeile OHNE Unterlinie: sie ist bei diesem Theme textlich unauffaellig, ihre Linie stand aber als einziger Strich UEBER dem ersten Produkt und wirkte dadurch wie ein zusammenhangloser Rahmen (Nutzer, 19.07.). */ .wc-block-cart-items th { border: 0 !important; padding-bottom: 10px; } /* Trennlinie gehoert UNTER jedes Produkt — als Abgrenzung zum naechsten. Nach dem letzten Produkt keine Linie, sonst schwebt sie im Nichts. Bei nur EINEM Produkt gibt es damit gar keine Linie, und das ist richtig so. */ .wc-block-cart-items td { border: 0 !important; border-bottom: 1px solid rgba(0, 58, 105, .12) !important; padding-top: 18px; padding-bottom: 18px; } .wc-block-cart-items__row:last-child td { border-bottom: 0 !important; } /* Schriftgroessen: WooCommerce-Blocks setzt hier durchgaengig 13px, waehrend die Seite auf 15px steht — im Vergleich wirkte der Warenkorb geschrumpft. ✅ Preis, Zeilensumme und Variantenangaben nachgemessen: greifen. ⚠️ Der Produktname liess sich in der Vorschau NICHT umstellen (13px blieb bestehen — geprueft mit eigener Regel, WooCommerces eigenem Selektormuster, !important und ueber die Variable --wp--preset--font-size--small; die wirksame Regel war ueber document.styleSheets nicht auffindbar). Die Regel steht trotzdem hier, weil sie korrekt formuliert ist — NACH DEM UPLOAD BITTE VISUELL PRUEFEN, ob der Produktname groesser wurde. */ .wc-block-cart-items .wc-block-cart-item__prices, .wc-block-cart-items .wc-block-cart-item__total { font-size: 15px !important; line-height: 1.5 !important; } .wc-block-cart-items .wc-block-components-product-metadata { font-size: 14px !important; line-height: 1.5 !important; } table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product .wc-block-components-product-name { font-size: 16px !important; line-height: 1.45 !important; } /* Mengenfeld behaelt bewusst seinen Rahmen — es ist ein Bedienelement, keine Tabellenlinie. Nur die Farbe ins CI gezogen. */ .wc-block-components-quantity-selector { border-color: rgba(0, 58, 105, .25) !important; } /* Summenspalte als ruhige Karte statt loser Linien. */ .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block { background: rgba(0, 58, 105, .04); border: 1px solid rgba(0, 58, 105, .12) !important; border-radius: 12px; padding: 22px; } .wc-block-cart__sidebar .wc-block-components-totals-wrapper, .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-coupon-form-block, .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-totals-block { border-top-color: rgba(0, 58, 105, .14) !important; } /* === BESTELLBESTAETIGUNG (order-received) IM CI (19.07.2026) === Die Kopfzeile „Bestellnummer / Datum / E-Mail / Gesamt / Zahlungsart" war eine nackte Aufzaehlungsliste mit Punkten. Jetzt eine ruhige Karte im CI-Ton, die Werte hervorgehoben ueber ihrer Beschriftung. Das Raster passt sich selbst an: auto-fit legt bei schmalen Bildschirmen weniger Spalten an, ohne dass es dafuer eine Medienabfrage braucht. ℹ️ Die frueheren Riesenueberschriften auf dieser Seite („Unsere Bankverbindung" 57px, „Tanzkonzept-Erfurt:" 47px) kamen aus dem BACS-Block und sind nicht per CSS behandelt, sondern in bestellbestaetigung.php ganz von der Seite genommen. */ ul.woocommerce-order-overview { list-style: none !important; margin: 0 0 2rem !important; padding: 20px 24px !important; background: rgba(0, 58, 105, .04); border: 1px solid rgba(0, 58, 105, .12); border-radius: 12px; display: grid; gap: 14px 28px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } ul.woocommerce-order-overview li { list-style: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; float: none !important; /* WooCommerce laesst die Punkte sonst schweben */ width: auto !important; color: #5f7382; font-size: .82rem; line-height: 1.3; text-transform: none; } ul.woocommerce-order-overview li strong { display: block; margin-top: 2px; color: #17222c; font-size: 1rem; font-weight: 600; } /* --- Produktzeilen wie im Warenkorb (Nutzerwunsch 19.07.) --- Markup dafuer kommt aus woocommerce/order/order-details-item.php (Override). Maße NICHT frei gewaehlt, sondern im Warenkorb nachgemessen: Bild dort 72x72 px, Bildzelle 88 px breit => 16 px Abstand zum Text. */ .tk-bestellzeile { display: flex; align-items: flex-start; gap: 16px; } .tk-bestellzeile__bild { flex: 0 0 72px; } .tk-bestellzeile__bild img { display: block; width: 72px; height: 72px; object-fit: cover; } .tk-bestellzeile__text { flex: 1 1 auto; min-width: 0; /* sonst sprengt langer Text die Flex-Spalte */ } /* Merkmale (Kurstag, Anmeldung, Vertragsart, Teilnehmer) waren eine Aufzaehlung mit Punkten, Beschriftung und Wert auf je eigener Zeile. Jetzt kompakt „Beschriftung: Wert" – gleiche Farblogik wie in der Kasse. */ .woocommerce-order-details .wc-item-meta { list-style: none; margin: .5rem 0 0; padding: 0; } .woocommerce-order-details .wc-item-meta li { display: flex; flex-wrap: wrap; gap: .4em; margin: 0 0 .3rem; padding: 0; } .woocommerce-order-details .wc-item-meta .wc-item-meta-label { color: #5f7382; font-weight: 500; } .woocommerce-order-details .wc-item-meta p { margin: 0; color: #17222c; font-weight: 600; } /* Graue Zeilenfuellung raus, feine CI-Trennlinien wie im Warenkorb. Die blaue Kopfzeile bleibt bewusst – sie ist bereits CI und gliedert die Tabelle; im Warenkorb gibt es sie nicht, dort traegt die Summenkarte. */ .woocommerce-order-details table.shop_table td, .woocommerce-order-details table.shop_table tbody th { background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(0, 58, 105, .12) !important; padding: 16px 14px !important; } .woocommerce-order-details table.shop_table tbody tr:last-child td, .woocommerce-order-details table.shop_table tbody tr:last-child th { border-bottom: 0 !important; } /* Etwas Luft zwischen den Abschnitten – vorher klebten sie aneinander. */ .woocommerce-order-details, .woocommerce-customer-details { margin-top: 2.2rem; } .woocommerce-order-details__title, .woocommerce-column__title { margin-bottom: .8rem !important; }