/*
Theme Name: Aging in Balance
Theme URI: https://aging-in-balance.de
Author: Aging in Balance
Author URI: https://aging-in-balance.de
Description: Custom block theme for Aging in Balance – WooCommerce ready.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aging-in-balance
Tags: full-site-editing, block-patterns, wide-blocks, custom-colors, custom-logo, editor-style, woocommerce
*/
/* ── Tokens ── */
:root {
--c-primary: #d1043c;
--c-rose: #e8979c;
--c-rose-hover: #e0838a;
--c-rose-light: #eeacb0;
--c-rose-bg: #fcf0f1;
--c-dark: #3a4a60;
--c-body: #506682;
--c-muted: #5d718a;
--c-subtle: #6b7e96;
--c-label: #8e9db1;
--c-meta: #a7b3c2;
--c-border: #cfd6e0; /* Trennlinien ueber Sektionsbeschriftungen, sichtbar */
--c-border-light: #e9ecf1; /* Umrandungen und Kanten, bewusst sehr unauffaellig */
--c-surface: #f1f3f6;
--c-input: #f5f6f8;
--c-white: #ffffff;
--ff: "Poppins", "Helvetica Neue", Arial, sans-serif;
--pad-x: clamp(24px, 5vw, 84px);
--max-narrow: 1192px; /* schmalere Inhaltsbreite fuer Termine- und Tutorial-Seiten */
--max-wide: 1760px; /* Deckel der Inhaltsbreite auf sehr grossen Bildschirmen */
/* Seitliche Polsterung fuer alles, was direkt in einer randlosen Sektion sitzt:
normalerweise --pad-x, ab --max-wide waechst sie mit und zentriert den Inhalt.
Das 100% loest sich erst beim Benutzen auf — deshalb nur in Elementen
verwenden, deren Elternbox die volle Seitenbreite hat. */
--gutter: max(var(--pad-x), (100% - var(--max-wide)) / 2);
--header-h: 79px; /* tatsaechliche Hoehe von .aib-header auf Desktop */
}
/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--ff); color: var(--c-body); background: var(--c-white); -webkit-font-smoothing: antialiased; line-height: 1.75; font-weight: 300; font-size: 16px; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font-family: inherit; }
.aib-site { overflow-x: hidden; }
/* Inhaltsbreite wie im Header. Sektionen, Hintergrundfarben und Hero-Bilder
laufen weiter randlos — begrenzt wird nur der Inhalt darin, siehe --gutter. */
.aib-container { padding-inline: var(--gutter); }
/* Diese Bereiche laufen schmaler und mittig: Termine, Tutorial, Suche, die
Kursliste einer Themenbereichsseite, die Buchungsstrecke (Warenkorb, Kasse,
Bestellbestaetigung) und die Formatauswahl einer Kursseite. Die
Maximalbreite schliesst die seitliche Polsterung ein, damit der Inhalt genau
--max-narrow breit wird. Warenkorb und Kasse sind ueber die Body-Klasse
adressiert, nicht ueber page.php — sonst laufen kuenftige Standardseiten
ungewollt mit. */
.aib-termine-hero .aib-container,
.aib-termine-filters__inner,
.aib-termine-list .aib-container,
.aib-suche-hero .aib-container,
.aib-suche-bar__inner,
.aib-suche-list .aib-container,
.aib-404-wege .aib-container,
.aib-recht .aib-container,
.aib-thema-kurse .aib-container,
.aib-prod-book .aib-container,
.woocommerce-cart .aib-page-hero .aib-container,
.woocommerce-cart .aib-page-main .aib-container,
.woocommerce-checkout .aib-page-hero .aib-container,
.woocommerce-checkout .aib-page-main .aib-container,
.aib-tutorial__inner { max-width: calc(var(--max-narrow) + 2 * var(--pad-x)); margin-inline: auto; }
/* Alle bis auf .aib-tutorial__inner sind .aib-container und wuerden sonst
zusaetzlich die breite Zentrier-Polsterung erben — sie zentrieren aber
schon ueber max-width. */
.aib-termine-hero .aib-container,
.aib-termine-filters__inner,
.aib-termine-list .aib-container,
.aib-suche-hero .aib-container,
.aib-suche-bar__inner,
.aib-suche-list .aib-container,
.aib-404-wege .aib-container,
.aib-recht .aib-container,
.aib-thema-kurse .aib-container,
.aib-prod-book .aib-container,
.woocommerce-cart .aib-page-hero .aib-container,
.woocommerce-cart .aib-page-main .aib-container,
.woocommerce-checkout .aib-page-hero .aib-container,
.woocommerce-checkout .aib-page-main .aib-container { padding-inline: var(--pad-x); }
.aib-accent { color: var(--c-rose); }
/* ── HEADER ── */
.aib-header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--c-border-light); }
.aib-header__inner { padding: 16px var(--gutter); display: flex; align-items: center; gap: 22px; }
.aib-logo { display: flex; align-items: center; gap: 13px; text-decoration: none; flex: none; }
.aib-logo__mark { height: 40px; width: auto; max-height: 40px; object-fit: contain; }
.aib-logo__text { display: flex; flex-direction: column; line-height: 1; }
.aib-logo__name { font-weight: 500; font-size: 15px; letter-spacing: .16em; color: var(--c-primary); }
.aib-logo__sub { font-weight: 300; font-size: 9px; letter-spacing: .4em; color: var(--c-rose-hover); margin-top: 4px; }
.aib-nav { flex: 1; display: flex; align-items: center; justify-content: center; gap: 20px; }
.aib-nav__link { text-decoration: none; font-size: 13.5px; font-weight: 300; color: var(--c-body); transition: color .2s; }
.aib-nav__link:hover { color: var(--c-dark); }
.aib-nav__link--active { font-weight: 500; color: var(--c-dark); }
.aib-header__actions { display: flex; align-items: center; gap: 12px; flex: none; }
.aib-header__bookings { text-decoration: none; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--c-dark); white-space: nowrap; }
.aib-header__bookings:hover { color: var(--c-primary); }
.aib-header__icon { background: none; border: none; cursor: pointer; padding: 0; color: var(--c-body); display: flex; }
/* margin-right gleicht den Überstand der Zählblase (right: -8px) aus,
sonst bleiben zum "Kurs buchen"-Button nur 4px statt der 12px gap */
.aib-header__cart { position: relative; margin-right: 8px; }
.aib-header__cart-count { position: absolute; top: -6px; right: -8px; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: var(--c-primary); color: #fff; font-size: 10px; font-weight: 600; line-height: 17px; text-align: center; }
.aib-burger { display: none; background: none; border: none; cursor: pointer; color: var(--c-dark); padding: 4px; }
.aib-burger__close { display: none; }
.aib-burger[aria-expanded="true"] .aib-burger__open { display: none; }
.aib-burger[aria-expanded="true"] .aib-burger__close { display: block; }
/* ── MOBILMENÜ ── */
/* Liegt im sticky Header und fuellt darunter die gesamte Flaeche. Das 100% in
der Hoehenrechnung ist die Hoehe des Headers — er ist als positioniertes
Elternelement der Bezug. dvh statt vh, weil die Adresszeile mobiler Browser
die Viewporthoehe waehrend des Scrollens veraendert; vh bleibt als Rueckfall
fuer aeltere Browser darueber stehen.
Ohne JS bleibt das Panel via [hidden] geschlossen — der Header funktioniert
dann wie vorher, nur ohne Menue. */
.aib-mobile-nav { position: absolute; top: 100%; left: 0; right: 0;
height: calc(100vh - 100%);
height: calc(100dvh - 100%);
background: #fff; overflow-y: auto;
display: flex; flex-direction: column;
padding: 8px var(--pad-x) 26px;
padding-bottom: max(26px, env(safe-area-inset-bottom, 0px)); }
.aib-mobile-nav[hidden] { display: none; }
.aib-menu-offen, .aib-menu-offen body { overflow: hidden; }
.aib-mobile-nav__links { display: flex; flex-direction: column; }
.aib-mobile-nav__links a { padding: 15px 0; border-bottom: 1px solid var(--c-border-light);
font-size: 18px; font-weight: 300; color: var(--c-dark); text-decoration: none; }
.aib-mobile-nav__links a[aria-current="page"] { font-weight: 500; color: var(--c-primary); }
.aib-mobile-nav__meta { display: flex; flex-direction: column; padding: 14px 0 4px; }
.aib-mobile-nav__meta a { display: flex; align-items: center; gap: 12px; padding: 13px 0;
font-size: 14.5px; font-weight: 400; color: var(--c-muted); text-decoration: none; }
.aib-mobile-nav__count { display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
background: var(--c-primary); color: #fff; font-size: 11px; font-weight: 500; }
.aib-mobile-nav__cta { width: 100%; justify-content: center; margin-top: 10px; flex: none; }
/* ── BUTTONS ── */
.aib-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ff); font-weight: 500; font-size: 15px; padding: 15px 30px; border-radius: 999px; text-decoration: none; border: none; cursor: pointer; transition: background .2s, border-color .2s, color .2s; white-space: nowrap; }
.aib-btn--primary { background: var(--c-rose); color: #fff; }
.aib-btn--primary:hover { background: var(--c-rose-hover); }
.aib-btn--outline { background: transparent; border: 1px solid var(--c-border); color: var(--c-body); }
.aib-btn--outline:hover { border-color: var(--c-body); }
.aib-btn--sm { font-size: 13.5px; padding: 11px 22px; }
/* ── HERO ── */
/* minmax(0,…) wie bei den Unterseiten-Heroes: sonst kann ein langes Wort links
die Spalte aufdruecken und das 50/50 verschieben. */
.aib-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); min-height: calc(100vh - var(--header-h));
box-shadow: inset 0 -1px 0 var(--c-border-light); }
/* Linke Polsterung folgt dem Deckel, damit der Hero-Text auf einer Linie mit
den Sektionen darunter steht. 100% ist hier die halbe Seitenbreite (50/50-
Raster), deshalb 100% - --max-wide/2 statt (100% - --max-wide)/2.
Das Bild rechts bleibt davon unberuehrt und laeuft weiter bis zum Rand. */
.aib-hero__text { padding: clamp(48px,7vw,104px) var(--pad-x) clamp(48px,7vw,104px) max(var(--pad-x), 100% - var(--max-wide) / 2);
display: flex; flex-direction: column; justify-content: center; }
.aib-overline { display: flex; align-items: center; gap: 12px; color: #c97076; font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 30px; }
.aib-overline__dash { width: 30px; height: 1px; background: var(--c-rose); display: inline-block; }
.aib-hero__h1 { font-weight: 300; font-size: clamp(38px,5.6vw,86px); line-height: 1.02; letter-spacing: -.025em; color: var(--c-dark); }
.aib-hero__sub { margin-top: 34px; max-width: 430px; font-weight: 300; font-size: 17px; line-height: 1.75; color: var(--c-muted); }
.aib-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 42px; }
.aib-hero__image { position: relative; overflow: hidden; background: #eadfe0; min-height: 360px; }
.aib-hero__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* ── STATS STRIP ── */
.aib-stats-strip { border-bottom: 1px solid var(--c-border-light); }
.aib-stats-strip__inner { padding: clamp(26px,3vw,38px) var(--gutter); display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(18px,2.5vw,44px); }
.aib-stat { display: flex; align-items: baseline; gap: 12px; }
.aib-stat__val { font-weight: 300; font-size: clamp(28px,2.6vw,40px); color: var(--c-primary); letter-spacing: -.02em; line-height: 1; }
.aib-stat__label { font-weight: 300; font-size: 13.5px; color: var(--c-subtle); line-height: 1.3; }
/* ── SECTIONS ── */
.aib-section { padding: clamp(80px,9vw,120px) 0; }
.aib-section--surface { background: var(--c-surface); border-top: 1px solid var(--c-border-light); }
.aib-section--themen { background: var(--c-surface); border-top: 1px solid var(--c-border-light); }
.aib-section--akademie { padding: clamp(80px,10vw,140px) 0 clamp(64px,7vw,96px); }
.aib-section-label { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--c-border); padding-top: 22px; margin-bottom: clamp(40px,5vw,64px); font-size: 12px; font-weight: 500; letter-spacing: .14em; color: var(--c-meta); text-transform: uppercase; }
.aib-section-label--dark { border-top-color: rgba(255,255,255,.18); color: rgba(255,255,255,.5); }
.aib-section-label__right { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 300; font-size: 13px; color: var(--c-subtle); }
.aib-num { color: var(--c-primary); text-transform: none; letter-spacing: 0; }
.aib-num--light { color: var(--c-rose-light); }
/* ── HEADINGS ── */
.aib-h2 { font-weight: 300; font-size: clamp(32px,4.2vw,56px); line-height: 1.08; letter-spacing: -.025em; color: var(--c-dark); margin-bottom: 22px; }
.aib-h2--lg { font-size: clamp(30px,4.2vw,60px); line-height: 1.12; letter-spacing: -.02em; }
.aib-h2--xl { font-size: clamp(34px,5vw,68px); line-height: 1.02; margin-bottom: 0; }
.aib-h2--white { color: #fff; margin-bottom: 26px; }
.aib-h2--sm { font-size: clamp(22px,2.2vw,30px); line-height: 1.15; letter-spacing: -.015em; margin-bottom: 0; }
.aib-body { font-weight: 300; font-size: 16px; line-height: 1.8; color: var(--c-muted); }
.aib-body--sm { font-size: 15px; line-height: 1.75; color: var(--c-subtle); max-width: 360px; }
.aib-muted-sm { font-weight: 300; font-size: 12.5px; color: var(--c-label); }
/* ── SPLITS (2-col layouts) ── */
.aib-split { display: grid; gap: clamp(36px,6vw,90px); }
.aib-split--akademie { grid-template-columns: 1.25fr 1fr; align-items: last baseline; }
.aib-split--themen-header { grid-template-columns: 1fr 1fr; align-items: last baseline; margin-bottom: 48px; }
.aib-split--formate { grid-template-columns: 0.9fr 1.5fr; align-items: start; }
.aib-split--online { grid-template-columns: 1.3fr 1fr; align-items: center; gap: clamp(36px,5vw,64px); }
.aib-split--testimonials { grid-template-columns: 1.4fr 1fr; align-items: start; gap: clamp(40px,6vw,90px); }
.aib-split--newsletter { grid-template-columns: 1.2fr 1fr; align-items: end; gap: clamp(36px,6vw,80px); }
.aib-split__side .aib-body { margin-bottom: 26px; }
/* ── LINK ARROW ── */
.aib-link-arrow { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 500; color: var(--c-primary); text-decoration: none; border-bottom: 1px solid #f3c5c8; padding-bottom: 6px; transition: color .2s; }
.aib-link-arrow:hover { color: #a8082f; }
/* ── TOPICS GRID ── */
/* Themen-Raster: zusammenhaengendes Feld aus Bildkacheln, nur durch 1px-Fugen
getrennt (die Fugen zeigen den Rasterhintergrund). Keine Rundungen, kein
Textkasten — Nummer oben links, Kurszaehler oben rechts, Titel unten links. */
/* Kacheln durch Abstand getrennt statt durch Linien. Aussen buendig, damit das
Feld die volle Breite der Sektion behaelt. */
.aib-topics { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px, 1.6vw, 26px); }
/* Quadratische Kacheln — das gesamte 3x3-Feld wird dadurch selbst ein Quadrat. */
.aib-topic { position: relative; display: block; aspect-ratio: 1; overflow: hidden;
text-decoration: none; background: #2e3c50; }
.aib-topic--leer { background: none; }
.aib-topic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
transition: transform .6s cubic-bezier(.22,.61,.24,1); }
.aib-topic:hover img { transform: scale(1.07); }
/* Verlauf nur unten, damit der weisse Titel auf jedem Foto lesbar bleibt. */
.aib-topic__overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top,
rgba(20,28,40,.88) 0,
rgba(20,28,40,.80) 14%,
rgba(20,28,40,.58) 30%,
rgba(20,28,40,.32) 46%,
rgba(20,28,40,.14) 62%,
rgba(20,28,40,.04) 80%,
rgba(20,28,40,0) 100%); }
.aib-topic__badge { position: absolute; top: 18px; z-index: 2; font-size: 11px; font-weight: 500;
letter-spacing: .14em; text-transform: uppercase; }
.aib-topic__badge--num { left: 22px; color: #fff; text-shadow: 0 1px 6px rgba(20,28,40,.7); }
.aib-topic__badge--count { right: 16px; top: 16px; letter-spacing: .08em; color: #b45560;
background: var(--c-rose-bg); padding: 5px 12px; border-radius: 999px; }
.aib-topic__title { position: absolute; left: 26px; right: 26px; bottom: 30px; z-index: 2; margin: 0;
display: flex; align-items: center; gap: 12px; color: #fff; font-weight: 500;
font-size: clamp(22px, 1.9vw, 29px); line-height: 1.15; letter-spacing: -.015em;
text-shadow: 0 1px 10px rgba(20,28,40,.5); }
.aib-topic__arrow { flex: none; opacity: 0; transform: translateX(-8px);
transition: opacity .3s ease, transform .3s cubic-bezier(.22,.61,.24,1); }
.aib-topic:hover .aib-topic__arrow,
.aib-topic:focus-visible .aib-topic__arrow { opacity: 1; transform: translateX(0); }
.aib-topic:focus-visible { outline: 2px solid var(--c-rose); outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) {
.aib-topic img, .aib-topic__arrow { transition: none; }
.aib-topic:hover img { transform: none; }
}
.aib-badge { font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.aib-badge--light { color: #c97076; background: var(--c-rose-bg); }
.aib-badge--glass { color: #fff; background: rgba(255,255,255,.2); backdrop-filter: blur(4px); }
/* ── FORMATS ── */
.aib-formats { display: flex; flex-direction: column; }
.aib-format { display: flex; gap: 28px; padding: 28px 4px; border-top: 1px solid var(--c-border); transition: padding-left .2s; }
.aib-format--last { border-bottom: 1px solid var(--c-border); }
.aib-format:hover { padding-left: 14px; }
.aib-format__num { font-size: 13px; font-weight: 500; color: var(--c-primary); width: 30px; flex: none; padding-top: 4px; }
.aib-format__title { margin: 0 0 5px; font-weight: 500; font-size: 21px; color: var(--c-dark); }
.aib-format__desc { margin: 0; font-weight: 300; font-size: 14.5px; line-height: 1.65; color: var(--c-subtle); }
/* ── ABOUT (dark) ── */
.aib-about { background: var(--c-dark); color: #fff; display: grid; grid-template-columns: 1fr 1.1fr; }
.aib-about__image { position: relative; min-height: 520px; overflow: hidden; background: #2e3c50; }
.aib-about__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Rechte Polsterung folgt dem Deckel, damit Label und Kennzahlen rechts auf
einer Linie mit den uebrigen Sektionen enden. Der Faktor haengt am Raster
oben: bei 1fr/1.1fr ist die Seite 2,1/1,1 mal so breit wie diese Spalte,
also (100% x 2,1/1,1 - --max-wide) / 2 = 95,4545% - --max-wide/2.
Wird das Raster geaendert, muss der Faktor mit. */
.aib-about__content { padding: clamp(56px,6vw,92px) max(var(--pad-x), 95.4545% - var(--max-wide) / 2) clamp(56px,6vw,92px) clamp(40px,5vw,76px);
display: flex; flex-direction: column; justify-content: center; }
.aib-about__text { margin: 0 0 36px; font-weight: 300; font-size: 16px; line-height: 1.85; color: rgba(255,255,255,.82); max-width: 520px; }
.aib-about__stats { display: flex; gap: clamp(32px,5vw,64px); flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.16); padding-top: 30px; }
.aib-about__val { display: block; font-weight: 300; font-size: clamp(36px,4vw,52px); color: #fff; letter-spacing: -.02em; line-height: 1; }
.aib-about__label { display: block; font-weight: 300; font-size: 13px; color: rgba(255,255,255,.6); margin-top: 8px; }
/* ── ONLINE FEATURES ── */
.aib-online-features { display: flex; flex-direction: column; }
.aib-online-feat { display: flex; gap: 24px; align-items: center; padding: 24px 0; border-top: 1px solid var(--c-border); }
.aib-online-feat--last { border-bottom: 1px solid var(--c-border); }
.aib-online-feat__val { font-weight: 300; font-size: clamp(34px,3.4vw,46px); color: var(--c-primary); letter-spacing: -.02em; line-height: 1; width: 116px; flex: none; }
.aib-online-feat__icon { width: 116px; flex: none; display: flex; }
.aib-online-feat__title { margin: 0 0 4px; font-weight: 500; font-size: 17px; color: var(--c-dark); }
.aib-online-feat__desc { margin: 0; font-weight: 300; font-size: 13.5px; line-height: 1.55; color: var(--c-subtle); }
/* ── TESTIMONIALS ── */
.aib-testimonial-main__quote { font-weight: 300; font-size: 64px; line-height: 1; color: var(--c-rose); margin-bottom: 8px; }
.aib-testimonial-main__text { margin: 0; font-weight: 300; font-size: clamp(24px,3vw,38px); line-height: 1.32; letter-spacing: -.015em; color: var(--c-dark); border: none; padding: 0; }
.aib-testimonial-main__author { margin-top: 30px; display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--c-dark); }
.aib-testimonial-main__author strong { font-weight: 500; }
.aib-testimonial-main__dash { width: 42px; height: 1px; background: var(--c-border); display: block; }
.aib-testimonial-card { padding: 26px 0; border-top: 1px solid var(--c-border); }
.aib-testimonial-card--last { border-bottom: 1px solid var(--c-border); }
.aib-testimonial-card p { margin: 0 0 14px; font-weight: 300; font-size: 15px; line-height: 1.7; color: var(--c-body); }
.aib-testimonial-card strong { font-weight: 500; font-size: 14px; color: var(--c-dark); }
.aib-stars { color: var(--c-rose); font-size: 13px; letter-spacing: 1px; margin-bottom: 12px; }
/* ── NEWSLETTER ── */
.aib-newsletter__right .aib-body { margin-bottom: 24px; }
.aib-newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; }
.aib-newsletter-form__input { flex: 1; min-width: 220px; background: var(--c-input); border: 1px solid var(--c-border); border-radius: 999px; padding: 15px 24px; font-family: var(--ff); font-size: 15px; font-weight: 300; color: var(--c-dark); outline: none; transition: border-color .2s; }
.aib-newsletter-form__input:focus { border-color: var(--c-rose); }
/* ── FOOTER ── */
.aib-footer { background: var(--c-dark); color: #fff; border-top: 1px solid rgba(255,255,255,.12); }
.aib-footer .aib-container { padding-top: 72px; padding-bottom: 36px; }
.aib-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 54px; border-bottom: 1px solid rgba(255,255,255,.12); }
.aib-footer__brand { display: flex; flex-direction: column; }
.aib-footer__name { font-weight: 500; font-size: 18px; letter-spacing: .16em; color: #fff; margin-bottom: 6px; }
.aib-footer__sub { font-weight: 300; font-size: 10px; letter-spacing: .4em; color: var(--c-rose-light); margin-bottom: 18px; }
.aib-footer__desc { max-width: 300px; font-weight: 300; font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.62); }
.aib-footer__col { display: flex; flex-direction: column; gap: 11px; }
.aib-footer__heading { font-weight: 500; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 7px; }
.aib-footer__col a { text-decoration: none; color: rgba(255,255,255,.82); font-size: 14px; font-weight: 300; transition: color .2s; }
.aib-footer__col a:hover { color: #fff; }
.aib-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; padding-top: 24px; font-size: 12.5px; font-weight: 300; color: rgba(255,255,255,.5); }
.aib-footer__legal { display: flex; gap: 26px; }
.aib-footer__legal a { text-decoration: none; color: rgba(255,255,255,.5); transition: color .2s; }
.aib-footer__legal a:hover { color: #fff; }
/* ── PILLS (meta badges) ── */
.aib-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--c-body); border: 1px solid #d4dae2; padding: 8px 15px; border-radius: 999px; white-space: nowrap; }
.aib-pill--link { text-decoration: none; transition: border-color .2s, color .2s; }
.aib-pill--link:hover { border-color: var(--c-rose); color: var(--c-primary); }
.aib-pill--success { color: #3f8f63; background: #eef6f0; border-color: #cfe6d8; }
.aib-pill--cta { text-decoration: none; background: var(--c-rose); color: #fff; border-color: var(--c-rose); transition: background .2s; }
.aib-pill--cta:hover { background: var(--c-rose-hover); border-color: var(--c-rose-hover); }
/* ── TUTORIAL ── */
.aib-tutorial { border-bottom: 1px solid var(--c-border-light); }
.aib-tutorial__inner { padding: clamp(40px,5vw,72px) var(--pad-x) clamp(56px,7vw,96px); }
.aib-tutorial__h1 { margin: 0 0 22px; font-weight: 300; font-size: clamp(34px,4.6vw,62px); line-height: 1.04; letter-spacing: -.03em; color: var(--c-dark); max-width: 840px; }
.aib-tutorial__excerpt { margin: 0 0 28px; max-width: 680px; font-weight: 300; font-size: 17px; line-height: 1.75; color: var(--c-muted); }
.aib-tutorial__meta { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: clamp(32px,4vw,48px); }
.aib-tutorial__video { border-radius: 16px; overflow: hidden; background: #2e3c50; border: 1px solid var(--c-border-light); }
.aib-tutorial__thumbnail { border-radius: 16px; overflow: hidden; }
.aib-tutorial__thumbnail img { display: block; width: 100%; height: auto; }
/* Feste Spaltenbreiten statt fr-Anteilen und mittig gesetzt: mit anteiligen
Spalten waere die linke breiter als die 680px Lesebreite des Textes, und
zwischen Textende und Seitenspalte klaffte eine Luecke. */
.aib-tutorial__body { margin-top: clamp(48px,6vw,80px); display: grid;
grid-template-columns: minmax(0,680px) minmax(0,440px); gap: clamp(48px,5vw,72px);
justify-content: center; align-items: start; }
.aib-tutorial__desc { max-width: 680px; }
.aib-tutorial__desc .aib-section-label { margin-bottom: 26px; }
/* Redaktioneller Inhalt aus dem WordPress-Editor. Bisher war nur gestylt,
Ueberschriften und Listen liefen auf Browser-Standard. Abstaende bewusst oben
groesser als unten, damit Ueberschriften zum folgenden Absatz gehoeren. */
.aib-tutorial__content > *:first-child { margin-top: 0; }
.aib-tutorial__content > *:last-child { margin-bottom: 0; }
.aib-tutorial__content p { margin: 0 0 20px; font-weight: 300; font-size: 16px; line-height: 1.85; color: var(--c-muted); }
.aib-tutorial__content h2,
.aib-tutorial__content h3,
.aib-tutorial__content h4 { color: var(--c-dark); letter-spacing: -.015em; }
.aib-tutorial__content h2 { margin: 52px 0 18px; font-weight: 300; font-size: 30px; line-height: 1.2; }
.aib-tutorial__content h3 { margin: 44px 0 16px; font-weight: 400; font-size: 23px; line-height: 1.25; }
.aib-tutorial__content h4 { margin: 34px 0 12px; font-weight: 500; font-size: 17px; line-height: 1.35; }
.aib-tutorial__content ul,
.aib-tutorial__content ol { margin: 0 0 22px; padding-left: 0; list-style: none; }
.aib-tutorial__content li { position: relative; padding-left: 26px; margin-bottom: 9px;
font-weight: 300; font-size: 16px; line-height: 1.7; color: var(--c-muted); }
.aib-tutorial__content li:last-child { margin-bottom: 0; }
.aib-tutorial__content ul > li::before { content: ""; position: absolute; left: 4px; top: .62em;
width: 6px; height: 6px; border-radius: 50%; background: var(--c-rose); }
.aib-tutorial__content ol { counter-reset: aib-li; }
.aib-tutorial__content ol > li { counter-increment: aib-li; }
.aib-tutorial__content ol > li::before { content: counter(aib-li) "."; position: absolute; left: 0; top: 0;
font-weight: 500; font-size: 14px; line-height: 1.95; color: var(--c-rose); }
.aib-tutorial__content strong { font-weight: 500; color: var(--c-dark); }
.aib-tutorial__content a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.aib-tutorial__content a:hover { text-decoration-thickness: 2px; }
.aib-tutorial__content img { max-width: 100%; height: auto; border-radius: 12px; }
.aib-tutorial__content hr { margin: 40px 0; border: 0; border-top: 1px solid var(--c-border-light); }
/* tutorial aside (booking card) */
.aib-tutorial__aside { border: 1px solid var(--c-border-light); border-radius: 16px; padding: clamp(26px,2.6vw,34px); background: var(--c-surface); position: sticky; top: 96px; }
.aib-tutorial__aside-label { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--c-meta); margin-bottom: 12px; }
.aib-tutorial__aside-title { margin: 0 0 18px; font-weight: 300; font-size: 24px; line-height: 1.15; letter-spacing: -.02em; color: var(--c-dark); }
.aib-tutorial__aside-checks { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.aib-tutorial__check { display: flex; align-items: center; gap: 11px; font-weight: 300; font-size: 14px; color: var(--c-muted); }
.aib-tutorial__aside-btn { width: 100%; justify-content: center; }
.aib-tutorial__aside-all { display: block; text-align: center; margin-top: 18px; font-size: 13.5px; font-weight: 500; color: var(--c-body); text-decoration: none; transition: color .2s; }
.aib-tutorial__aside-all:hover { color: var(--c-primary); }
.aib-tutorial__aside--related { background: none; border: none; padding: 0; }
.aib-tutorial__aside--related .aib-section-label { margin-bottom: 31px; }
.aib-tutorial__related { display: flex; flex-direction: column; gap: 16px; }
.aib-tutorial__related-card { text-decoration: none; display: block; border: 1px solid var(--c-border-light); border-radius: 16px; overflow: hidden; background: #fff; transition: border-color .2s; }
.aib-tutorial__related-card:hover { border-color: var(--c-rose); }
.aib-tutorial__related-img { aspect-ratio: 16/10; overflow: hidden; background: #2e3c50; position: relative; }
.aib-tutorial__related-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aib-tutorial__related-body { padding: 18px 20px 20px; }
.aib-tutorial__related-title { margin: 0 0 14px; font-weight: 500; font-size: 17px; line-height: 1.2; letter-spacing: -.01em; color: var(--c-dark); }
.aib-tutorial__related-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--c-primary); }
/* ── PRODUCT HERO ── */
/* Unterseiten-Hero: Sektion ist selbst das Raster, damit die Bildspalte wie auf
der Startseite randlos nach rechts laeuft und die volle Sektionshoehe einnimmt.
Aufteilung und Hoehe wie beim Startseiten-Hero: 50/50 und volle Bildschirmhoehe
abzueglich Header. Auf Mobil wird das unten wieder aufgehoben. */
.aib-prod-hero,
.aib-thema-hero,
.aib-tb-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: stretch;
min-height: calc(100vh - var(--header-h));
/* Trennlinie als inset-Schatten statt border-bottom: bei box-sizing:border-box
zaehlt eine Umrandung zur Hoehe und nimmt dem Bild genau diesen einen Pixel. */
box-shadow: inset 0 -1px 0 var(--c-border-light); }
/* min-width:0 zusaetzlich zum minmax: Flex-Kinder duerfen sonst ebenfalls
nicht unter ihre Inhaltsbreite schrumpfen. */
.aib-prod-hero__text > *,
.aib-thema-hero__text > *,
.aib-tb-hero__text > * { min-width: 0; }
.aib-prod-hero__text,
.aib-thema-hero__text,
.aib-tb-hero__text { padding: clamp(40px,5vw,72px) clamp(36px,5vw,76px) clamp(48px,6vw,84px) max(var(--pad-x), 100% - var(--max-wide) / 2);
display: flex; flex-direction: column; justify-content: center; }
.aib-prod-hero__image,
.aib-thema-hero__image,
.aib-tb-hero__image { position: relative; overflow: hidden; background: #eadfe0; min-height: 340px; }
.aib-prod-hero__image img,
.aib-thema-hero__image img,
.aib-tb-hero__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.aib-prod-hero__h1 { margin: 0 0 22px; font-weight: 300; font-size: clamp(38px,4.8vw,72px); line-height: 1.0; letter-spacing: -.03em; color: var(--c-dark); overflow-wrap: break-word; }
.aib-prod-hero__desc { margin: 0 0 30px; max-width: 480px; }
.aib-prod-hero__desc p { margin: 0; font-weight: 300; font-size: 16.5px; line-height: 1.8; color: var(--c-muted); }
.aib-prod-hero__pills { display: flex; flex-wrap: wrap; gap: 9px; }
/* ── PRODUCT BOOKING SECTION ── */
.aib-prod-book { background: var(--c-surface); border-top: 1px solid var(--c-border-light); border-bottom: 1px solid var(--c-border-light); padding: clamp(64px,7vw,104px) 0; }
.aib-prod-book__header { display: flex; flex-wrap: wrap; align-items: last baseline; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px,4vw,48px); }
.aib-prod-book__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(28px,4vw,48px); align-items: start; }
/* option cards */
.aib-prod-opts { display: flex; flex-direction: column; gap: 12px; }
.aib-opt { display: flex; width: 100%; text-align: left; background: #fff; border: 1px solid var(--c-border-light); border-radius: 14px; padding: 18px 22px; cursor: pointer; font-family: var(--ff); transition: border-color .2s; align-items: center; gap: 18px; }
.aib-opt:hover { border-color: var(--c-rose); }
.aib-opt--selected { background: #fdf6f6; border-color: var(--c-rose); border-width: 1.5px; }
.aib-opt--tutorial { border-radius: 16px; padding: 24px 26px; flex-direction: column; }
.aib-opt--tutorial.aib-opt--selected { border-color: var(--c-rose); }
.aib-opt--unlocked { cursor: default; border-color: var(--c-border); opacity: .75; }
.aib-opt__unlocked-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: #5a9a6e; background: #eef7f0; padding: 6px 14px; border-radius: 999px; white-space: nowrap; }
.aib-opt__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; width: 100%; }
.aib-opt__overline { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #c97076; margin-bottom: 6px; }
.aib-opt__title { display: block; font-weight: 500; font-size: 16px; color: var(--c-dark); }
.aib-opt--tutorial .aib-opt__title { font-size: 21px; letter-spacing: -.01em; }
.aib-opt__sub { display: block; font-weight: 300; font-size: 13.5px; line-height: 1.55; color: var(--c-label); margin-top: 4px; }
.aib-opt__info { display: flex; flex-direction: column; }
/* Reisekosten stehen in der Summe wie eine Betragszeile, tragen aber statt einer
Zahl "nach Absprache" — kursiv und gedaempft, damit es nicht als Wert gelesen wird. */
.aib-cart-summary__na,
.aib-review__na { font-style: italic; font-weight: 300; color: var(--c-label); }
.aib-opt__price-col { text-align: right; flex: none; }
.aib-opt__price { font-weight: 300; font-size: 24px; letter-spacing: -.02em; color: var(--c-primary); }
.aib-opt__price-strike { font-weight: 300; font-size: 14px; color: var(--c-meta); text-decoration: line-through; margin-right: 8px; }
.aib-opt__price-val { display: block; font-weight: 500; font-size: 16px; color: var(--c-dark); }
.aib-opt__status { display: inline-block; font-size: 11.5px; font-weight: 500; color: #c97076; background: var(--c-rose-bg); padding: 4px 11px; border-radius: 999px; white-space: nowrap; margin-top: 8px; }
.aib-opt__date-col { width: 64px; flex: none; text-align: center; }
.aib-opt__date-big { display: block; font-weight: 300; font-size: 28px; letter-spacing: -.02em; color: var(--c-dark); line-height: 1; }
.aib-opt__date-month { display: block; font-weight: 500; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #c97076; margin-top: 5px; }
.aib-opt__fmt-tag { font-weight: 500; color: #c97076; }
.aib-opt-divider { display: flex; align-items: center; gap: 12px; margin: 18px 2px 4px; }
.aib-opt-divider span:first-child, .aib-opt-divider span:last-child { height: 1px; flex: 1; background: var(--c-border); }
.aib-opt-divider span:nth-child(2) { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--c-meta); white-space: nowrap; }
.aib-prod-opts__legal { margin: 14px 4px 0; font-size: 12px; font-weight: 300; line-height: 1.6; color: var(--c-meta); }
/* sidebar */
.aib-prod-sidebar { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 96px; }
.aib-prod-sidebar__card { border: 1px solid var(--c-border-light); border-radius: 16px; padding: clamp(26px,2.6vw,34px); background: #fff; }
.aib-prod-sidebar__label { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--c-meta); margin-bottom: 14px; }
.aib-prod-sidebar__empty p { margin: 0 0 20px; font-weight: 300; font-size: 14.5px; line-height: 1.7; color: var(--c-label); }
.aib-btn--disabled { width: 100%; background: #eef1f5; color: #aab4c2; font-size: 15px; font-weight: 500; padding: 15px 26px; border-radius: 999px; text-align: center; }
.aib-prod-sidebar__items { border: 1px solid var(--c-border-light); border-radius: 12px; padding: 4px 18px 18px; margin-bottom: 20px; }
.aib-prod-sidebar__item { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px 0; }
.aib-prod-sidebar__item--extra { border-top: 1px solid var(--c-border-light); }
.aib-prod-sidebar__item-format { font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #c97076; margin-bottom: 5px; }
.aib-prod-sidebar__item-title { font-weight: 500; font-size: 15px; color: var(--c-dark); }
.aib-prod-sidebar__item-sub { font-weight: 300; font-size: 13px; line-height: 1.45; color: var(--c-label); margin-top: 2px; }
.aib-prod-sidebar__item-right { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.aib-prod-sidebar__item-price { font-weight: 500; font-size: 15px; color: var(--c-dark); }
.aib-prod-sidebar__gift { display: inline-block; font-size: 10.5px; font-weight: 500; color: #c97076; background: var(--c-rose-bg); padding: 3px 9px; border-radius: 999px; }
.aib-prod-sidebar__unlocked { font-size: 11px; font-weight: 500; color: #5a9a6e; background: #eef7f0; padding: 4px 10px; border-radius: 999px; }
.aib-prod-sidebar__strike { font-size: 12px; color: var(--c-meta); text-decoration: line-through; }
.aib-prod-sidebar__remove { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 0; font-family: var(--ff); font-size: 11.5px; font-weight: 500; color: var(--c-meta); transition: color .2s; }
.aib-prod-sidebar__remove:hover { color: var(--c-primary); }
.aib-prod-sidebar__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 2px; padding-top: 16px; border-top: 1px solid #d4dae2; }
.aib-prod-sidebar__total span:first-child { font-size: 13px; font-weight: 500; color: var(--c-muted); }
.aib-prod-sidebar__total-price { font-weight: 300; font-size: 22px; letter-spacing: -.02em; color: var(--c-primary); }
.aib-prod-sidebar__tax { margin: 2px 0 0; font-size: 11.5px; font-weight: 300; line-height: 1.55; color: var(--c-meta); }
.aib-prod-sidebar__book-btn { width: 100%; justify-content: center; margin-top: 20px; }
.aib-prod-sidebar__stats { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; padding: 0 clamp(26px,2.6vw,34px); }
.aib-prod-sidebar__stat { padding: 16px 0; border-top: 1px solid #dce1e8; }
.aib-prod-sidebar__stat-val { font-weight: 300; font-size: 24px; color: var(--c-primary); letter-spacing: -.02em; line-height: 1; }
.aib-prod-sidebar__stat-lbl { display: block; font-weight: 300; font-size: 11.5px; color: var(--c-subtle); margin-top: 6px; line-height: 1.3; }
/* product description 2-col */
.aib-prod-desc { padding: clamp(64px,7vw,104px) 0; }
.aib-prod-desc__cols { column-count: 2; column-gap: clamp(32px,5vw,72px); }
.aib-prod-desc__cols p { margin: 0 0 20px; font-weight: 300; font-size: 16px; line-height: 1.85; color: var(--c-muted); break-inside: avoid; }
/* ── BREADCRUMB ── */
/* Der Breadcrumb ersetzt auf den Unterseiten den frueheren Overline-Kicker und
traegt deshalb dessen Rose. #b45560 statt des helleren #c97076: bei 12,5px
braucht Text 4,5:1 Kontrast, der Overline-Ton kam nur auf 3,46:1. */
.aib-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 12.5px; font-weight: 400; color: #b45560; margin-bottom: 28px; }
.aib-breadcrumb a { text-decoration: none; color: #b45560; transition: color .2s; }
.aib-breadcrumb a:hover { color: var(--c-primary); }
.aib-breadcrumb__sep { color: var(--c-rose-light); }
.aib-breadcrumb__current { color: #b45560; font-weight: 500; }
/* ── THEMA HERO ── */
.aib-thema-hero__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.aib-thema-hero__label { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--c-meta); }
/* break-word als Sicherung: lange Komposita bekommen über aib_title_shy() einen
festen Trennpunkt, ohne den würde ein Titel sonst aus der Spalte laufen. */
.aib-thema-hero__h1 { margin: 0 0 24px; font-weight: 300; font-size: clamp(38px,4.8vw,72px); line-height: 1.0; letter-spacing: -.03em; color: var(--c-dark); overflow-wrap: break-word; }
.aib-thema-hero__lead { margin: 0; max-width: 480px; font-weight: 300; font-size: 16.5px; line-height: 1.8; color: var(--c-muted); }
.aib-thema-hero__lead p { margin: 0 0 12px; }
.aib-thema-hero__lead p:last-child { margin-bottom: 0; }
/* ── THEMA KURSE (section A header) ── */
.aib-thema-kurse { padding: clamp(64px,7vw,104px) 0 clamp(40px,4vw,52px); }
.aib-thema-kurse__header { display: flex; flex-wrap: wrap; align-items: last baseline; justify-content: space-between; gap: 24px; margin-bottom: clamp(36px,4vw,52px); }
/* Wie auf der Startseite: Nummer links ohne Box (Schlagschatten fuer Lesbarkeit
auf hellen Fotos), Lernformat-Zaehler rechts als Pille im Rose-Ton. */
/* ── THEMA FORMATE (section B) ── */
.aib-thema-formate { background: var(--c-surface); border-top: 1px solid var(--c-border-light); border-bottom: 1px solid var(--c-border-light); padding: clamp(72px,8vw,116px) 0; }
.aib-thema-formate__header { display: flex; flex-wrap: wrap; align-items: last baseline; justify-content: space-between; gap: 24px; margin-bottom: clamp(36px,4vw,52px); }
.aib-thema-formate__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2.4vw,28px); }
.aib-thema-formate__grid--4 { grid-template-columns: repeat(4,1fr); }
.aib-thema-format-card { background: #fff; border: 1px solid var(--c-border-light); border-radius: 16px; padding: clamp(26px,2.6vw,36px); display: flex; flex-direction: column; min-height: 220px; }
.aib-thema-format-card__num { font-size: 13px; font-weight: 500; color: var(--c-primary); letter-spacing: .08em; margin-bottom: 18px; }
.aib-thema-format-card__title { margin: 0 0 12px; font-weight: 500; font-size: 22px; line-height: 1.15; color: var(--c-dark); }
.aib-thema-format-card__desc { margin: 0; font-weight: 300; font-size: 14.5px; line-height: 1.7; color: var(--c-subtle); }
/* ── THEMA CTA BAND ── */
.aib-thema-cta { background: var(--c-dark); color: #fff; }
.aib-thema-cta .aib-container { padding-top: clamp(60px,7vw,100px); padding-bottom: clamp(60px,7vw,100px); }
.aib-thema-cta__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(34px,5vw,72px); align-items: center; }
.aib-thema-cta__text { margin: 0 0 28px; font-weight: 300; font-size: 16px; line-height: 1.8; color: rgba(255,255,255,.82); max-width: 460px; }
.aib-btn--outline-white { border-color: rgba(255,255,255,.3); color: #fff; }
.aib-btn--outline-white:hover { border-color: #fff; }
/* ══════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 1100px) {
.aib-thema-formate__grid--4 { grid-template-columns: repeat(2,1fr); }
.aib-nav { display: none; }
.aib-header__bookings { display: none; }
.aib-burger { display: flex; margin-left: auto; }
.aib-topics { grid-template-columns: repeat(2,1fr); }
/* Die Leerzellen fuellen die letzte Reihe des 3x3-Feldes auf. Sobald das
Raster weniger Spalten hat, ergeben sie keine Reihe mehr, sondern nur noch
leeren Platz am Ende — deshalb hier ganz raus. */
.aib-topic--leer { display: none; }
}
@media (max-width: 900px) {
.aib-container { padding-left: 24px; padding-right: 24px; }
.aib-hero { grid-template-columns: 1fr; min-height: auto; }
.aib-hero__text { padding: 48px 24px; }
.aib-hero__image { min-height: clamp(260px, 72vw, 460px); position: relative; }
.aib-hero__h1 { font-size: clamp(40px,10.5vw,64px); }
.aib-stats-strip__inner { grid-template-columns: repeat(2,1fr); gap: 20px; padding: 30px 24px; }
.aib-split--akademie,
.aib-split--formate,
.aib-split--online,
.aib-split--testimonials,
.aib-split--newsletter,
.aib-split--themen-header { grid-template-columns: 1fr; gap: 32px; }
.aib-about { grid-template-columns: 1fr; }
.aib-about__image { min-height: clamp(280px, 76vw, 500px); }
.aib-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
.aib-topics { grid-template-columns: 1fr; }
/* Einspaltig: die Sektion darf mit dem Inhalt wachsen. 100vh waere hier falsch —
die Adresszeile mobiler Browser macht vh unzuverlaessig und der Inhalt stuende
unter zwei uebereinander liegenden vollflaechigen Bloecken. */
.aib-prod-hero,
.aib-thema-hero,
.aib-tb-hero { grid-template-columns: 1fr; min-height: 0; }
.aib-thema-hero__image,
.aib-tb-hero__image { min-height: clamp(260px, 72vw, 460px); }
.aib-thema-formate__grid,
.aib-thema-formate__grid--4 { grid-template-columns: 1fr; }
.aib-thema-cta__grid { grid-template-columns: 1fr; gap: 32px; }
.aib-thema-kurse__header { flex-direction: column; align-items: flex-start; }
.aib-thema-formate__header { flex-direction: column; align-items: flex-start; }
.aib-tutorial__inner { padding-left: 24px; padding-right: 24px; }
.aib-tutorial__body { grid-template-columns: 1fr; }
.aib-tutorial__aside { position: static; }
.aib-prod-hero__image { min-height: clamp(260px, 72vw, 460px); }
.aib-prod-book__grid { grid-template-columns: 1fr; }
.aib-prod-sidebar { position: static; }
.aib-prod-desc__cols { column-count: 1; }
}
@media (max-width: 600px) {
/* Der Kicker passt mit Jahreszahl nicht in eine Zeile — die Zeile umbrechen
zu lassen sieht schlechter aus, als die Ergaenzung wegzulassen. */
.aib-overline__extra { display: none; }
.aib-overline { letter-spacing: .16em; margin-bottom: 22px; }
.aib-overline__dash { width: 20px; }
/* Die Bewertungsangabe rechts im Sektionslabel bekommt eine eigene Zeile. */
.aib-section-label { flex-wrap: wrap; }
.aib-section-label__right { margin-left: 0; flex-basis: 100%; }
/* Strich ueber den Namen statt davor — nebeneinander wird die Zeile zu eng. */
.aib-testimonial-main__author { flex-direction: column; align-items: flex-start; gap: 12px; }
.aib-header__inner { padding: 12px 16px; gap: 12px; }
.aib-header__actions { gap: 8px; }
.aib-header__icon { display: none; }
/* Logo bleibt vollstaendig, nur kompakter gesetzt. Der Platz dafuer kommt aus
dem "Kurs buchen"-Button, der stattdessen im Mobilmenue steht. */
.aib-header__actions .aib-btn { display: none; }
.aib-logo { gap: 10px; }
.aib-logo__mark { height: 34px; max-height: 34px; }
.aib-logo__name { font-size: 12.5px; letter-spacing: .12em; }
.aib-logo__sub { font-size: 7.5px; letter-spacing: .3em; margin-top: 3px; }
.aib-hero__text { padding: 32px 16px; }
.aib-hero__sub { font-size: 15px; }
.aib-hero__ctas { flex-direction: column; }
.aib-btn { font-size: 14px; padding: 13px 24px; justify-content: center; }
.aib-stats-strip__inner { grid-template-columns: 1fr 1fr; gap: 16px; padding: 24px 16px; }
.aib-stat { flex-direction: column; gap: 4px; }
.aib-container { padding-left: 16px; padding-right: 16px; }
.aib-section { padding: 56px 0; }
.aib-h2 { font-size: clamp(26px,7vw,38px); }
.aib-h2--xl { font-size: clamp(28px,8vw,42px); }
.aib-about__content { padding: 40px 24px; }
.aib-footer__grid { grid-template-columns: 1fr; gap: 28px; }
.aib-footer .aib-container { padding-top: 48px; }
.aib-newsletter-form { flex-direction: column; }
.aib-newsletter-form__input { min-width: 0; }
.aib-split--testimonials { gap: 24px; }
.aib-testimonial-main__text { font-size: clamp(20px,5vw,28px); }
.aib-tutorial__inner { padding-left: 16px; padding-right: 16px; }
}
/* ── Screen-reader only ── */
.aib-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
/* ── Page Hero (Cart / Checkout) ── */
.aib-page-hero { padding: clamp(40px,5vw,72px) 0 clamp(28px,3vw,40px); }
.aib-page-hero__h1 { font-weight: 300; font-size: clamp(40px,5.4vw,76px); line-height: 1.02; letter-spacing: -.03em; color: var(--c-dark); margin: 0; }
.aib-page-main { padding-bottom: clamp(72px,8vw,108px); flex: 1; }
/* ── KPI Strip ── */
.aib-kpi-strip { border-top: 1px solid var(--c-border-light); border-bottom: 1px solid var(--c-border-light); padding: clamp(26px,3vw,40px) var(--gutter); }
.aib-kpi-strip__inner { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(18px,2.5vw,44px); }
.aib-kpi { display: flex; align-items: baseline; gap: 12px; }
.aib-kpi__num { font-weight: 300; font-size: clamp(28px,2.6vw,40px); color: var(--c-primary); letter-spacing: -.02em; line-height: 1; }
.aib-kpi__star { color: var(--c-rose); }
.aib-kpi__label { font-weight: 300; font-size: 13.5px; color: var(--c-subtle); line-height: 1.3; }
.woocommerce-cart .aib-kpi-strip,
.woocommerce-checkout .aib-kpi-strip { padding-left: 0; padding-right: 0; }
.woocommerce-cart .aib-kpi-strip__inner,
.woocommerce-checkout .aib-kpi-strip__inner { padding-inline: var(--gutter); }
.woocommerce-cart .aib-kpi,
.woocommerce-checkout .aib-kpi { flex-direction: column; gap: 6px; }
.woocommerce-cart .aib-kpi__num,
.woocommerce-checkout .aib-kpi__num { font-size: clamp(24px,2.2vw,32px); }
/* ── Cart Empty ── */
.aib-cart-empty { border: 1px solid #eef0f3; border-radius: 16px; background: #f1f3f6; padding: clamp(40px,5vw,64px) clamp(28px,4vw,52px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.aib-cart-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 50%; background: #fff; border: 1px solid #e2e6eb; margin-bottom: 22px; }
.aib-cart-empty__title { font-weight: 300; font-size: clamp(22px,2.6vw,30px); line-height: 1.2; letter-spacing: -.02em; color: var(--c-dark); margin: 0 0 10px; }
.aib-cart-empty__text { max-width: 460px; font-weight: 300; font-size: 15px; line-height: 1.75; color: #6b7e96; margin: 0 0 26px; }
/* ── Cart Grid ── */
.aib-cart-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(28px,4vw,56px); align-items: start; }
/* ── Cart Group ── */
.aib-cart-group { margin-bottom: clamp(28px,3.5vw,44px); }
.aib-cart-group__header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-top: 1px solid var(--c-border); padding-top: 20px; margin-bottom: 16px; }
.aib-cart-group__info { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.aib-cart-group__overline { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--c-rose); }
/* Zeilenhoehe explizit: ohne sie erbt die Ueberschrift die 1,75 des Fliesstextes
und lange Kursnamen stehen mit Absatzabstand untereinander. */
.aib-cart-group__name { font-weight: 500; font-size: clamp(23px,2.4vw,27px); line-height: 1.2; letter-spacing: -.015em; color: var(--c-dark); }
a.aib-cart-group__info:hover .aib-cart-group__name { color: var(--c-primary); }
/* nowrap, damit "1 Position" nicht zwischen Zahl und Wort umbricht. */
.aib-cart-group__count { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--c-meta); white-space: nowrap; }
.aib-cart-group__rows { display: flex; flex-direction: column; gap: 12px; }
/* ── Cart Row ── */
.aib-cart-row { display: flex; align-items: center; gap: 18px; border: 1px solid var(--c-border-light); border-radius: 14px; padding: 18px 22px; }
.aib-cart-row__tile { width: 64px; flex: none; text-align: center; }
.aib-cart-row__tile-main { display: block; font-weight: 300; font-size: 26px; letter-spacing: -.01em; color: var(--c-dark); line-height: 1; }
.aib-cart-row__tile-sub { display: block; font-weight: 500; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-rose); margin-top: 5px; }
.aib-cart-row__info { flex: 1; }
.aib-cart-row__line1 { display: block; font-weight: 500; font-size: 16px; color: var(--c-dark); }
.aib-cart-row__meta { display: block; font-weight: 300; font-size: 13.5px; color: var(--c-label); margin-top: 5px; }
.aib-cart-row__format { font-weight: 500; color: var(--c-rose); }
.aib-cart-row__tile--tutorial { color: var(--c-rose); }
.aib-cart-row__tile--tutorial .aib-cart-row__tile-main { display: flex; align-items: center; justify-content: center; }
.aib-cart-row__remove { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; font-weight: 500; color: var(--c-meta); text-decoration: none; background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; }
.aib-cart-row__remove:hover { color: var(--c-primary); }
.aib-cart-row__price { flex: none; display: flex; align-items: center; gap: 10px; }
.aib-cart-row__gift { display: inline-block; font-size: 10.5px; font-weight: 500; color: var(--c-rose); background: var(--c-rose-bg); padding: 3px 9px; border-radius: 999px; }
.aib-cart-row__old-price { font-size: 12px; color: var(--c-meta); text-decoration: line-through; }
.aib-cart-row__stepper { display: flex; align-items: center; gap: 0; border: 1px solid var(--c-border-light); border-radius: 8px; flex: none; }
.aib-cart-row__step { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; font-size: 16px; font-weight: 300; color: var(--c-muted); font-family: inherit; padding: 0; }
.aib-cart-row__step:hover { color: var(--c-dark); }
.aib-cart-row__qty-input { width: 32px; height: 32px; text-align: center; border: none; border-left: 1px solid var(--c-border-light); border-right: 1px solid var(--c-border-light); font-size: 13px; font-weight: 500; color: var(--c-dark); font-family: inherit; padding: 0; background: none; -moz-appearance: textfield; }
.aib-cart-row__qty-input::-webkit-outer-spin-button,
.aib-cart-row__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.aib-cart-row__current-price { font-weight: 500; font-size: 16px; color: var(--c-dark); }
/* ── Cart Continue ── */
.aib-cart-continue { border-top: 1px solid var(--c-border-light); padding-top: 24px; margin-top: 4px; }
.aib-cart-continue__link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 13.5px; font-weight: 500; color: var(--c-body); }
.aib-cart-continue__link:hover { color: var(--c-primary); }
/* ── Cart Summary ── */
.aib-cart-summary { position: sticky; top: 96px; border: 1px solid var(--c-border-light); border-radius: 16px; padding: clamp(26px,2.6vw,34px); background: var(--c-white); }
.aib-cart-summary__label { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--c-meta); margin-bottom: 20px; }
.aib-cart-summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.aib-cart-summary__row span:first-child { font-weight: 300; font-size: 14.5px; color: var(--c-muted); }
.aib-cart-summary__row span:last-child { font-weight: 500; font-size: 14.5px; color: var(--c-dark); }
.aib-cart-summary__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid #d4dae2; margin-bottom: 0; }
.aib-cart-summary__total span:first-child { font-size: 14px; font-weight: 500; color: var(--c-dark); }
.aib-cart-summary__total-price { font-weight: 300; font-size: 26px; letter-spacing: -.02em; color: var(--c-primary); }
.aib-cart-summary__note { margin: 8px 0 22px; font-size: 11.5px; font-weight: 300; line-height: 1.55; color: var(--c-meta); }
.aib-cart-summary__checkout { width: 100%; justify-content: center; }
.aib-cart-summary__secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; font-size: 12px; font-weight: 300; color: var(--c-label); }
/* ── Checkout Grid ── */
.aib-co-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(28px,4vw,56px); align-items: start; }
.aib-co-form { display: flex; flex-direction: column; gap: clamp(34px,4vw,48px); }
/* ── Checkout Sections ── */
.aib-co-section { }
.aib-co-section__header { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--c-border); padding-top: 20px; margin-bottom: 24px; }
.aib-co-num { width: 26px; height: 26px; border-radius: 999px; background: var(--c-rose-bg); color: var(--c-primary); font-size: 13px; font-weight: 500; display: flex; align-items: center; justify-content: center; flex: none; }
.aib-co-section__title { font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--c-dark); }
.aib-co-section__hint { margin: -4px 0 18px; font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--c-subtle); }
/* ── Checkout Form Fields ── */
.aib-co-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.aib-co-fields .form-row { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.aib-co-fields .form-row label { font-size: 12.5px; font-weight: 500; color: var(--c-subtle); }
.aib-co-fields .form-row label .optional { font-weight: 300; color: var(--c-meta); }
.aib-co-fields .form-row label .required { text-decoration: none; font-weight: 400; color: var(--c-rose); }
.aib-co-fields .form-row select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a8599' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.aib-co-fields .form-row .select2-container { width: 100% !important; }
.aib-co-fields .form-row .select2-container .select2-selection { height: auto; min-height: 46px; display: flex; align-items: center; }
.aib-co-fields .form-row .select2-container .select2-selection__rendered { padding: 0; line-height: 1.4; color: var(--c-dark); }
.aib-co-fields .form-row .select2-container .select2-selection__arrow { top: 50%; transform: translateY(-50%); right: 10px; }
.aib-co-fields .form-row input[type="text"],
.aib-co-fields .form-row input[type="email"],
.aib-co-fields .form-row input[type="tel"],
.aib-co-fields .form-row input[type="number"],
.aib-co-fields .form-row input[type="url"],
.aib-co-fields .form-row input[type="password"],
.aib-co-fields .form-row textarea,
.aib-co-fields .form-row select,
.aib-co-fields .form-row .select2-container .select2-selection { border: 1px solid #d4dae2; border-radius: 10px; padding: 13px 15px; font-size: 14.5px; color: var(--c-dark); background: var(--c-white); font-family: inherit; width: 100%; }
.aib-co-fields .form-row input:focus,
.aib-co-fields .form-row select:focus { outline: none; border-color: var(--c-rose) !important; }
.aib-co-fields .form-row-wide { grid-column: 1 / -1; }
.aib-co-fields #billing_company_field { grid-column: 1 / -1; }
.aib-co-fields #billing_address_1_field { grid-column: 1 / -1; }
.aib-co-fields #billing_address_2_field { grid-column: 1 / -1; }
.aib-co-fields #billing_country_field { grid-column: 1 / -1; }
.aib-co-fields #billing_state_field { grid-column: 1 / -1; }
/* Zweiter Weg auf der Tutorialseite: wer schon gebucht hat, meldet sich an. */
.aib-tutorial__aside-login { margin: 14px 0 0; text-align: center; font-size: 13.5px; font-weight: 300; color: var(--c-subtle); }
.aib-tutorial__aside-login a { color: var(--c-primary); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.aib-tutorial__aside-login a:hover { color: var(--c-rose-hover); }
/* ── Kontrollkaestchen ────────────────────────────────────────────────────
Ein Aussehen fuer die ganze Seite, nach dem Vorbild der Kontaktseite:
weisses Feld, im gewaehlten Zustand rosa mit weissem Haken. */
.aib-site input[type="checkbox"] {
appearance: none; -webkit-appearance: none;
width: 20px; height: 20px; flex: none; margin: 0;
background: var(--c-white); border: 1px solid #d4dae2; border-radius: 6px;
cursor: pointer; position: relative; display: inline-block; vertical-align: top;
transition: background .15s, border-color .15s;
}
.aib-site input[type="checkbox"]:hover { border-color: var(--c-rose); }
.aib-site input[type="checkbox"]:focus-visible { outline: 2px solid var(--c-rose); outline-offset: 2px; }
.aib-site input[type="checkbox"]:checked { background-color: var(--c-rose); border-color: var(--c-rose); }
.aib-site input[type="checkbox"]:checked::after {
content: ""; position: absolute; inset: 3px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* ── Rechtstexte (Impressum, Datenschutz, AGB, Widerruf) ── */
.aib-recht { padding: clamp(40px,5vw,72px) 0 clamp(64px,7vw,104px); }
.aib-recht__h1 { margin: 6px 0 clamp(26px,3vw,40px); font-weight: 300; font-size: clamp(32px,4.4vw,52px); line-height: 1.08; letter-spacing: -.025em; color: var(--c-dark); }
.aib-recht__text { max-width: 68ch; font-weight: 300; font-size: 16px; line-height: 1.85; color: var(--c-body); }
.aib-recht__text h2 { margin: clamp(34px,3.6vw,52px) 0 12px; font-weight: 500; font-size: clamp(20px,2.2vw,25px); line-height: 1.25; letter-spacing: -.015em; color: var(--c-dark); }
.aib-recht__text h3 { margin: clamp(26px,2.8vw,38px) 0 10px; font-weight: 500; font-size: 17px; line-height: 1.35; color: var(--c-dark); }
.aib-recht__text h2:first-child, .aib-recht__text h3:first-child { margin-top: 0; }
.aib-recht__text p { margin: 0 0 15px; }
.aib-recht__text ul, .aib-recht__text ol { margin: 0 0 18px; padding-left: 22px; }
.aib-recht__text li { margin-bottom: 7px; }
.aib-recht__text a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.aib-recht__text strong { font-weight: 500; color: var(--c-dark); }
.aib-recht__text table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 15px; }
.aib-recht__text th, .aib-recht__text td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--c-border-light); }
.aib-recht__stand { max-width: 68ch; margin: clamp(36px,4vw,56px) 0 0; padding-top: 18px; border-top: 1px solid var(--c-border-light); font-size: 13.5px; font-weight: 300; color: var(--c-label); }
/* ── 404 ── */
.aib-404__code { display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--c-rose); margin-bottom: 12px; }
.aib-404-wege { padding-top: clamp(30px,3.6vw,52px); padding-bottom: clamp(64px,7vw,104px); }
.aib-404-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 12px; }
.aib-404-link { display: flex; flex-direction: column; gap: 5px; padding: 20px 22px; border: 1px solid var(--c-border-light); border-radius: 14px; text-decoration: none; background: var(--c-white); position: relative; transition: border-color .15s, background .15s; }
.aib-404-link:hover { border-color: var(--c-rose); background: var(--c-rose-bg); }
.aib-404-link__title { font-weight: 500; font-size: 16px; color: var(--c-dark); }
.aib-404-link__text { font-weight: 300; font-size: 13.5px; color: var(--c-subtle); line-height: 1.55; }
.aib-404-link__pfeil { color: var(--c-rose); margin-top: 8px; display: inline-flex; transition: transform .15s; }
.aib-404-link:hover .aib-404-link__pfeil { transform: translateX(4px); }
/* ── Hinweis "Bereits ein Kundenkonto?" ueber der Kasse ── */
.woocommerce-form-login-toggle .woocommerce-info { background: var(--c-rose-bg); border: 1px solid #f5dcde; border-radius: 12px; padding: 14px 18px; margin: 0 0 22px; font-size: 14.5px; font-weight: 300; color: var(--c-muted); }
/* Der Link steht auch in der Fehlermeldung "Konto bereits registriert",
deshalb nicht auf den Hinweiskasten eingeschraenkt. */
.showlogin { color: var(--c-primary); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .15s; }
.showlogin:hover { color: var(--c-rose-hover); }
/* Das Anmeldeformular, das sich darunter aufklappt (eigene Vorlage in
woocommerce/global/form-login.php — schmal, einspaltig, Titel ueber dem Feld). */
.aib-inline-login { max-width: 420px; border: 1px solid var(--c-border-light); border-radius: 12px; padding: 22px; margin: 0 0 22px; }
.aib-inline-login .form-row { margin: 0 0 14px; display: flex; flex-direction: column; gap: 7px; }
.aib-inline-login label[for] { font-size: 12.5px; font-weight: 500; color: var(--c-subtle); }
.aib-inline-login input[type="text"],
.aib-inline-login input[type="password"] { border: 1px solid #d4dae2; border-radius: 10px; padding: 13px 15px; font-size: 14.5px; color: var(--c-dark); background: var(--c-white); font-family: inherit; width: 100%; }
.aib-inline-login input[type="text"]:focus,
.aib-inline-login input[type="password"]:focus { outline: none; border-color: var(--c-rose); }
.aib-inline-login__actions { gap: 14px; margin-bottom: 10px; }
.aib-inline-login .woocommerce-form-login__submit { align-self: flex-start; }
.aib-inline-login .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 300; color: var(--c-subtle); margin: 0; cursor: pointer; }
.aib-inline-login .woocommerce-form-login__rememberme input { margin: 0; }
.aib-inline-login .lost_password { margin: 0; }
.aib-inline-login .lost_password a { font-size: 13.5px; color: var(--c-subtle); text-decoration: underline; text-underline-offset: 3px; }
.aib-inline-login .lost_password a:hover { color: var(--c-primary); }
/* ── Checkout Payment Options ── */
.aib-co-payment__list { list-style: none; display: flex; flex-direction: column; gap: 12px; padding: 0; margin: 0; }
/* Die Karte ist das
, damit das Eingabefeld des Zahlungsanbieters mit
drinsteckt statt darunter zu haengen. */
.aib-co-payment__list > li { background: var(--c-white); border: 1px solid var(--c-border-light); border-radius: 12px; overflow: hidden; transition: border-color .15s, background .15s; }
/* Hervorhebung nur, wenn es wirklich etwas zu waehlen gibt. */
.aib-co-payment__list > li:not(:only-child):hover { border-color: var(--c-rose); }
.aib-co-payment__list > li:not(:only-child):has(input.input-radio:checked) { border-color: var(--c-rose); background: #fdf6f6; }
.aib-co-payment__option { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; padding: 16px 18px; cursor: pointer; font-family: inherit; }
.aib-co-payment__radio { width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid #d4dae2; flex: none; display: flex; align-items: center; justify-content: center; position: relative; }
.aib-co-payment__radio input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.aib-co-payment__dot { width: 11px; height: 11px; border-radius: 999px; background: transparent; display: block; transition: background .15s; }
.aib-co-payment__radio input:checked ~ .aib-co-payment__dot { background: var(--c-rose); }
.aib-co-payment__label { flex: 1; font-weight: 500; font-size: 15px; color: var(--c-dark); }
.aib-co-payment__note { font-weight: 300; font-size: 13px; color: var(--c-label); }
/* Leere Beschreibung wuerde sonst eine Luecke von 16px erzeugen. */
.aib-co-payment__note:empty { display: none; }
/* Bei nur einer Zahlungsart gibt es nichts zu waehlen: kein Auswahlpunkt und
keine Markierung des "gewaehlten" Eintrags. */
.aib-co-payment__list > li:only-child .aib-co-payment__radio { display: none; }
/* Eingabefeld des Zahlungsanbieters (WooPayments/Stripe rendert hier ein iframe). */
.aib-co-payment .payment_box { margin: 0; padding: 16px 18px 18px; border-top: 1px solid var(--c-border-light); background: var(--c-white); font-weight: 300; font-size: 14px; color: var(--c-label); }
.aib-co-payment .payment_box > p:first-child { margin-top: 0; }
.aib-co-payment .payment_box > p:last-child { margin-bottom: 0; }
/* Stripe setzt padding per style-Attribut, deshalb hier mit Nachdruck. */
.aib-co-payment .payment_box fieldset,
.aib-co-payment .payment_box .wc-payment-form { padding: 0 !important; margin: 0; border: 0; }
.aib-co-payment .payment_box .wcpay-upe-element,
.aib-co-payment .payment_box .wcpay-upe-form { width: 100%; }
.aib-co-payment .payment_box iframe { display: block; width: 100%; }
/* Testhinweis von WooPayments im Testmodus lesbar halten. */
.aib-co-payment .payment_box .woocommerce-info,
.aib-co-payment .payment_box .wc-test-mode { font-size: 13px; line-height: 1.6; }
@media (max-width: 600px) {
/* Die Beschreibung rutscht unter den Titel statt daneben zu quetschen. */
.aib-co-payment__option { flex-wrap: wrap; row-gap: 4px; }
.aib-co-payment__label { flex: 1 1 auto; }
.aib-co-payment__note { flex: 1 1 100%; }
.aib-co-payment__list > li:not(:only-child) .aib-co-payment__note { padding-left: 36px; }
.aib-co-payment__option { padding: 14px 15px; }
.aib-co-payment .payment_box { padding: 14px 15px 16px; }
}
/* ── Checkout Sidebar ── */
.aib-co-sidebar { position: sticky; top: 96px; border: 1px solid var(--c-border-light); border-radius: 16px; padding: clamp(26px,2.6vw,34px); background: var(--c-white); }
.aib-co-sidebar__label { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--c-meta); margin-bottom: 16px; }
.aib-co-sidebar__terms { margin: 20px 0 18px; }
/* Der Umschlag enthaelt seit Hinterlegen der AGB-Seite drei Kinder: Datenschutztext,
den ausgeblendeten AGB-Auszug und die Zeile mit dem Kaestchen. Als Reihe gesetzt
quetschten sich Text und Kaestchen nebeneinander in die schmale Spalte. */
.aib-co-sidebar__terms .woocommerce-terms-and-conditions-wrapper { display: block; }
.aib-co-sidebar__terms .woocommerce-privacy-policy-text { margin: 0 0 12px; }
.aib-co-sidebar__terms .woocommerce-privacy-policy-text p { margin: 0; }
.aib-co-sidebar__terms .form-row { display: flex; align-items: flex-start; gap: 10px; margin: 0; width: 100%; }
.aib-co-sidebar__terms .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] { margin-top: 1px; }
/* Datenschutzhinweis und AGB-Zustimmung sind derselbe rechtliche Hinweis —
also auch dieselbe Schrift, statt 16px neben 12,5px. */
.aib-co-sidebar__terms,
.aib-co-sidebar__terms p,
.aib-co-sidebar__terms label,
.aib-co-sidebar__terms .woocommerce-terms-and-conditions-checkbox-text { font-weight: 300; font-size: 12.5px; line-height: 1.6; color: var(--c-subtle); }
.aib-co-sidebar__terms .woocommerce-form__label-for-checkbox { display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer; }
.aib-co-sidebar__terms .required { color: var(--c-rose); text-decoration: none; }
.aib-co-sidebar__terms a { color: var(--c-label); text-decoration: underline; text-underline-offset: 2px; }
.aib-co-sidebar__submit { width: 100%; justify-content: center; }
.aib-co-sidebar__secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; font-size: 12px; font-weight: 300; color: var(--c-label); }
/* ── Review Order ── */
.aib-review__group { margin-bottom: 16px; }
.aib-review__group-header { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; text-decoration: none; }
a.aib-review__group-header:hover .aib-review__group-name { color: var(--c-primary); }
.aib-review__group-overline { font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--c-rose); }
.aib-review__group-name { font-weight: 500; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; color: var(--c-dark); }
.aib-review__items-card { border: 1px solid var(--c-border-light); border-radius: 12px; padding: 2px 18px; }
.aib-review__item { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.aib-review__item--border { border-top: 1px solid var(--c-border-light); }
.aib-review__tile { width: 46px; flex: none; text-align: center; }
.aib-review__tile-main { display: block; font-weight: 300; font-size: 20px; letter-spacing: -.01em; color: var(--c-dark); line-height: 1; }
.aib-review__tile-sub { display: block; font-weight: 500; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-rose); margin-top: 4px; }
.aib-review__tile--tutorial { color: var(--c-rose); }
.aib-review__tile--tutorial .aib-review__tile-main { display: flex; align-items: center; justify-content: center; }
.aib-review__info { flex: 1; }
.aib-review__line1 { font-weight: 500; font-size: 14px; line-height: 1.3; color: var(--c-dark); }
.aib-review__meta { font-weight: 300; font-size: 12px; color: var(--c-label); margin-top: 3px; }
.aib-review__format { font-weight: 500; color: var(--c-rose); }
.aib-review__price-col { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: none; }
.aib-review__gift { display: inline-block; font-size: 10px; font-weight: 500; color: var(--c-rose); background: var(--c-rose-bg); padding: 2px 8px; border-radius: 999px; }
.aib-review__qty { font-weight: 500; font-size: 12px; color: var(--c-muted); }
.aib-review__price { font-weight: 500; font-size: 14px; color: var(--c-dark); }
.aib-review__totals { margin-top: 14px; }
.aib-review__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 8px; }
.aib-review__row span:first-child { font-weight: 300; font-size: 13.5px; color: var(--c-muted); }
.aib-review__row span:last-child { font-weight: 500; font-size: 13.5px; color: var(--c-dark); }
.aib-review__row--first { margin-top: 0; padding-top: 16px; border-top: 1px solid var(--c-border-light); }
.aib-review__row--total { margin-top: 16px; padding-top: 16px; border-top: 1px solid #d4dae2; }
.aib-review__row--total span:first-child { font-size: 14px; font-weight: 500; color: var(--c-dark); }
.aib-review__total-price { font-weight: 300 !important; font-size: 24px !important; letter-spacing: -.02em; color: var(--c-primary) !important; }
/* ── Thank You ── */
.aib-thankyou { max-width: 760px; margin: 0 auto; padding: clamp(64px,8vw,120px) 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.aib-thankyou__icon { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 999px; background: var(--c-rose-bg); }
.aib-thankyou__overline { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--c-rose); }
.aib-thankyou__title { font-weight: 300; font-size: clamp(34px,4.6vw,60px); line-height: 1.05; letter-spacing: -.03em; color: var(--c-dark); margin: 0; }
.aib-thankyou__text { max-width: 520px; font-weight: 300; font-size: 16px; line-height: 1.8; color: var(--c-muted); }
.aib-thankyou__text strong { color: var(--c-dark); font-weight: 500; }
.aib-thankyou__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 8px; }
.aib-thankyou__details { width: 100%; text-align: left; margin-top: clamp(40px,6vw,72px); }
.aib-thankyou__table { margin-bottom: 0; }
.aib-thankyou__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--c-surface); }
.aib-thankyou__row--head { padding-bottom: 12px; border-bottom: 1px solid var(--c-border); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--c-label); }
.aib-thankyou__row span:first-child { font-weight: 300; font-size: 14px; color: var(--c-muted); line-height: 1.5; }
.aib-thankyou__row--sub span { font-weight: 300; font-size: 13.5px; color: var(--c-label); }
.aib-thankyou__row--sub span:last-child { color: var(--c-muted); }
.aib-thankyou__row--total { border-bottom: none; padding-top: 14px; }
.aib-thankyou__row--total span { font-weight: 500; font-size: 14px; color: var(--c-dark); }
.aib-thankyou__qty { color: var(--c-meta); }
.aib-thankyou__price { font-weight: 500; font-size: 14px; color: var(--c-dark); white-space: nowrap; }
.aib-thankyou__addresses { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,2.5vw,40px); margin-top: clamp(28px,4vw,40px); }
.aib-thankyou__addr-label { font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #c97076; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--c-border); }
.aib-thankyou__addr { font-weight: 300; font-size: 13.5px; line-height: 1.75; color: var(--c-muted); }
/* ── WooCommerce notices ── */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info { border-radius: 12px; padding: 14px 18px; margin-bottom: 20px; font-size: 14px; font-weight: 400; }
.woocommerce-notices-wrapper .woocommerce-message { background: #f0faf0; border: 1px solid #b8e6b8; color: #2d6a2d; }
.woocommerce-notices-wrapper .woocommerce-error { background: var(--c-rose-bg); border: 1px solid var(--c-rose-light); color: var(--c-primary); list-style: none; padding-left: 18px; }
.woocommerce-notices-wrapper .woocommerce-info { background: #f0f4fa; border: 1px solid #b8cce6; color: #2d4a6a; }
/* WooCommerce setzt auf den ersten Hinweis tabindex="-1" und fokussiert ihn per
JS, damit Screenreader ihn vorlesen (woocommerce.js). Der Browser zeichnet
daraufhin seinen blauen Fokusring um die ganze Box. Nur diesen programmatisch
gesetzten Fokus ausblenden — :focus-visible bleibt unberuehrt, Tastatur-
nutzer sehen den Ring also weiterhin. */
[role="alert"][tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
/* ── Cart/Checkout responsive ── */
@media (max-width: 900px) {
.aib-cart-grid { grid-template-columns: 1fr; }
.aib-cart-summary { position: static; }
.aib-co-grid { grid-template-columns: 1fr; }
.aib-co-sidebar { position: static; }
.aib-kpi-strip__inner { grid-template-columns: 1fr 1fr; row-gap: 22px; }
}
@media (max-width: 600px) {
.aib-co-fields { grid-template-columns: 1fr; }
.aib-co-fields .form-row-wide,
.aib-co-fields #billing_company_field,
.aib-co-fields #billing_address_1_field,
.aib-co-fields #billing_country_field { grid-column: auto; }
/* Kachel oben, Texte darunter, Preis rechts daneben. Nebeneinander bleibt der
Textspalte auf schmalen Geraeten zu wenig Platz. Gilt gleich fuer die
Optionen auf der Produktseite, den Warenkorb und die Kasse. */
.aib-opt:not(.aib-opt--tutorial),
.aib-cart-row,
.aib-review__item { flex-wrap: wrap; align-items: flex-start; row-gap: 10px; column-gap: 14px; }
.aib-cart-row { padding: 16px; }
/* Titel und Positionszahl untereinander — nebeneinander bleibt dem langen
Kursnamen zu wenig Breite. */
.aib-cart-group__header { flex-direction: column; align-items: flex-start; gap: 8px; }
.aib-opt__date-col,
.aib-cart-row__tile,
.aib-review__tile { flex: 0 0 100%; width: 100%; text-align: left;
display: flex; align-items: baseline; gap: 9px; }
.aib-cart-row__tile--tutorial,
.aib-review__tile--tutorial { align-items: center; }
/* Das Label stand unter der Zahl — nebeneinander spart eine Zeile. */
.aib-opt__date-month,
.aib-cart-row__tile-sub,
.aib-review__tile-sub { margin-top: 0; }
/* Basis 0 statt auto: sonst beansprucht der Text die volle Zeile und draengt
den Preis in die naechste. So teilen sich beide eine Zeile. */
.aib-opt__info,
.aib-cart-row__info,
.aib-review__info { flex: 1 1 0; min-width: 0; }
.aib-opt__price-col,
.aib-review__price-col,
.aib-cart-row__price { width: auto; margin-left: auto; flex: none; justify-content: flex-end; }
/* Im Warenkorb steht der Mengenwaehler im Markup zwischen Text und Preis.
Per order rutscht er hinter den Preis auf eine eigene Zeile. */
.aib-cart-row__price { order: 2; }
.aib-cart-row__stepper { order: 3; flex: 0 0 100%; justify-content: flex-end; }
.aib-kpi-strip__inner { grid-template-columns: 1fr; }
.aib-thankyou__actions { flex-direction: column; }
.aib-thankyou__addresses { grid-template-columns: 1fr; }
}
/* ── Termine page ── */
.aib-termine-hero { padding-top: clamp(48px,6vw,90px); padding-bottom: clamp(36px,4vw,52px); border-bottom: 1px solid var(--c-border); }
.aib-termine-hero__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px,6vw,80px); align-items: end; }
.aib-termine-hero__h1 { margin: 0; font-weight: 300; font-size: clamp(38px,5.2vw,72px); line-height: 1.02; letter-spacing: -.03em; color: var(--c-dark); }
.aib-termine-hero__intro { margin: 0 0 6px; max-width: 440px; font-weight: 300; font-size: 16px; line-height: 1.8; color: var(--c-muted); }
.aib-termine-filters { background: #fff; border-bottom: 1px solid var(--c-border); }
.aib-termine-filters__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding-top: 22px; padding-bottom: 22px; }
.aib-termine-filters__selects { display: flex; flex-wrap: wrap; gap: 12px; flex: 1; }
.aib-termine-select { appearance: none; -webkit-appearance: none; background-color: #fff; border: 1px solid #d4dae2; border-radius: 999px; padding: 12px 44px 12px 22px; font-family: inherit; font-size: 14.5px; font-weight: 500; color: var(--c-body); cursor: pointer; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: right 15px center; }
.aib-termine-select:focus { outline: none; border-color: var(--c-rose); }
.aib-termine-count { font-size: 13px; font-weight: 300; color: #9aa7b6; white-space: nowrap; flex: none; }
.aib-termine-list .aib-container { padding-top: clamp(40px,5vw,60px); padding-bottom: clamp(72px,8vw,108px); }
.aib-termine-month { margin-bottom: clamp(28px,3.5vw,48px); }
.aib-termine-month__label { font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--c-dark); margin-bottom: 14px; }
.aib-termine-row { display: flex; align-items: center; gap: 24px; padding: 24px 4px; border-top: 1px solid #eef0f3; }
.aib-termine-row--first { border-top-color: #e2e6eb; }
.aib-termine-row--soldout { opacity: .6; }
.aib-termine-row__day { width: 80px; flex: none; text-align: center; }
.aib-termine-row__day-num { display: block; font-weight: 300; font-size: 30px; letter-spacing: -.02em; color: var(--c-dark); line-height: 1; }
.aib-termine-row__day-wd { display: block; font-weight: 500; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #c97076; margin-top: 6px; }
.aib-termine-row__main { flex: 1; min-width: 220px; }
.aib-termine-row__title { font-weight: 500; font-size: 17.5px; color: var(--c-dark); letter-spacing: -.01em; }
.aib-termine-row__format-tag { font-weight: 300; color: #a7b3c2; }
.aib-termine-row__meta { font-weight: 300; font-size: 13.5px; color: #8e9db1; margin-top: 5px; }
.aib-termine-row__action { margin-top: 5px; }
.aib-termine-row__form { display: inline; }
.aib-termine-row__select { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; font-family: inherit; font-size: 13.5px; font-weight: 500; color: var(--c-rose); cursor: pointer; white-space: nowrap; transition: color .2s; }
.aib-termine-row__select:hover { color: #a8082f; }
.aib-termine-row__waitlist { font-size: 13.5px; font-weight: 500; color: #9aa7b6; }
.aib-termine-row__price-col { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 110px; }
.aib-termine-row__price { font-weight: 500; font-size: 16px; color: var(--c-dark); }
.aib-termine-row__status { display: inline-block; font-size: 11.5px; font-weight: 500; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.aib-termine-row__status--avail { color: #c97076; background: #fcf0f1; }
.aib-termine-row__status--soldout { color: #9aa7b6; background: #eef0f3; }
.aib-termine-empty { border-top: 1px solid #e2e6eb; padding: clamp(40px,5vw,64px) 4px; text-align: center; }
.aib-termine-empty__title { margin: 0 0 6px; font-weight: 300; font-size: 19px; color: var(--c-dark); }
.aib-termine-empty__text { margin: 0; font-weight: 300; font-size: 14.5px; color: #8e9db1; }
.aib-termine-cta { border-top: 1px solid #e2e6eb; padding-top: clamp(32px,4vw,48px); margin-top: 8px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.aib-termine-cta__text { margin: 0; max-width: 560px; font-weight: 300; font-size: 15px; line-height: 1.75; color: #6b7e96; }
@media (max-width: 820px) {
.aib-termine-filters__inner { flex-direction: column; align-items: stretch; }
.aib-termine-filters__selects { width: 100%; }
.aib-termine-count { align-self: flex-start; }
.aib-suche-bar__inner { flex-direction: column; align-items: stretch; }
.aib-suche-count { align-self: flex-start; }
}
@media (max-width: 700px) {
.aib-termine-hero__grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 600px) {
.aib-termine-row { flex-wrap: wrap; gap: 4px 18px; }
.aib-termine-row__main { flex-basis: auto; min-width: 0; }
.aib-termine-row__price-col { order: 5; flex-basis: 100%; text-align: left; align-items: center; flex-direction: row; gap: 12px; margin: 6px 0 0 100px; }
.aib-termine-filters__selects { flex-direction: column; }
.aib-termine-select { width: 100%; }
.aib-termine-cta { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.aib-termine-row__day { width: 64px; }
.aib-termine-row__price-col { margin-left: 84px; }
}
@media (max-width: 380px) {
.aib-termine-row__price-col { margin-left: 0; }
}
/* ── Contact page ── */
.aib-contact-hero { padding-top: clamp(48px,6vw,90px); padding-bottom: clamp(36px,4vw,52px); }
.aib-contact-hero__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(36px,6vw,90px); align-items: end; }
.aib-contact-hero__h1 { margin: 0; font-weight: 300; font-size: clamp(44px,6vw,88px); line-height: 1.0; letter-spacing: -.03em; color: var(--c-dark); }
.aib-contact-hero__intro { margin: 0 0 8px; max-width: 440px; font-weight: 300; font-size: 16.5px; line-height: 1.8; color: var(--c-muted); }
.aib-contact { padding-top: clamp(20px,3vw,40px); padding-bottom: clamp(72px,8vw,116px); }
.aib-contact__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(40px,6vw,88px); align-items: start; }
.aib-contact__form-card { background: #f1f3f6; border: 1px solid var(--c-border-light); border-radius: 18px; padding: clamp(28px,3.5vw,48px); }
.aib-contact__form { display: flex; flex-direction: column; gap: 18px; }
.aib-contact__2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.aib-contact__label { display: flex; flex-direction: column; gap: 9px; }
.aib-contact__label-text { font-size: 12.5px; font-weight: 500; letter-spacing: .04em; color: var(--c-body); }
.aib-contact__input,
.aib-contact__textarea { background: #fff; border: 1px solid var(--c-border); border-radius: 12px; padding: 14px 16px; font-family: inherit; font-size: 15px; font-weight: 300; color: var(--c-dark); outline: none; transition: border-color .2s; }
.aib-contact__input:focus,
.aib-contact__textarea:focus { border-color: var(--c-rose); }
.aib-contact__textarea { resize: vertical; min-height: 130px; }
.aib-contact__consent { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.aib-contact__checkbox { width: 20px; height: 20px; margin-top: 1px; flex: none; background: #fff; border: 1px solid #d4dae2; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s; }
.aib-contact__checkbox-check { opacity: 0; transition: opacity .15s; }
.aib-contact__checkbox--checked { background: var(--c-rose); border-color: var(--c-rose); }
.aib-contact__checkbox--checked .aib-contact__checkbox-check { opacity: 1; }
.aib-contact__consent-text { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--c-muted); }
.aib-contact__consent-text a { color: var(--c-primary); text-decoration: none; }
.aib-contact__form .aib-btn { align-self: flex-start; }
.aib-contact__success { flex-direction: column; align-items: flex-start; gap: 18px; padding: clamp(20px,3vw,44px) 0; display: none; }
.aib-contact__success--visible { display: flex; }
.aib-contact__success-icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 999px; background: var(--c-rose-bg); }
.aib-contact__success-title { margin: 0; font-weight: 300; font-size: clamp(24px,2.8vw,34px); line-height: 1.1; letter-spacing: -.02em; color: var(--c-dark); }
.aib-contact__success-text { margin: 0; font-weight: 300; font-size: 15.5px; line-height: 1.75; color: var(--c-muted); max-width: 420px; }
.aib-contact__info { display: flex; flex-direction: column; }
.aib-contact__info-block { border-top: 1px solid var(--c-border); padding: 26px 0 30px; }
.aib-contact__info-label { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--c-meta); margin-bottom: 16px; }
.aib-contact__info-name { font-weight: 500; font-size: 16px; color: var(--c-dark); margin-bottom: 2px; }
.aib-contact__info-text { font-weight: 300; font-size: 15px; line-height: 1.85; color: var(--c-muted); }
.aib-contact__info-lines { display: flex; flex-direction: column; gap: 11px; font-weight: 300; font-size: 15px; line-height: 1.5; color: var(--c-muted); }
.aib-contact__info-meta { color: var(--c-label); font-size: 12.5px; }
.aib-contact__info-email { text-decoration: none; color: var(--c-primary); border-bottom: 1px solid #f3c5c8; padding-bottom: 3px; align-self: flex-start; margin-top: 4px; transition: color .2s; }
.aib-contact__info-email:hover { color: #a8082f; }
@media (max-width: 920px) {
.aib-contact-hero__grid { grid-template-columns: 1fr; }
.aib-contact__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.aib-contact__2col { grid-template-columns: 1fr; }
}
/* ── About page ── */
.aib-about-hero { padding-top: clamp(48px,6vw,90px); padding-bottom: clamp(36px,4vw,52px); }
.aib-about-hero__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(36px,6vw,90px); align-items: end; }
.aib-about-hero__h1 { margin: 0; font-weight: 300; font-size: clamp(44px,6vw,88px); line-height: 1.0; letter-spacing: -.03em; color: var(--c-dark); }
.aib-about-hero__intro { margin: 0 0 8px; max-width: 440px; font-weight: 300; font-size: 16.5px; line-height: 1.8; color: var(--c-muted); }
.aib-about-founder { background: #f1f3f6; border-top: 1px solid var(--c-border-light); border-bottom: 1px solid var(--c-border-light); }
.aib-about-founder .aib-container { padding-top: clamp(64px,7vw,108px); padding-bottom: clamp(64px,7vw,108px); }
.aib-about-founder__grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(40px,6vw,88px); align-items: start; }
.aib-about-founder__portrait { position: relative; border-radius: 16px; overflow: hidden; background: #e6e9ee; aspect-ratio: 4/5; }
.aib-about-founder__portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Portrait Astrid Tomczak: ein gemeinsamer Bildfokus, damit der Ausschnitt in
allen Slots gleich sitzt — die Slots haben sehr unterschiedliche Seitenverhältnisse. */
.aib-about__image img,
.aib-about-founder__portrait img { object-position: 50% 25%; }
.aib-about-founder__name { margin: 0 0 28px; font-weight: 300; font-size: clamp(28px,3.6vw,50px); line-height: 1.08; letter-spacing: -.025em; color: var(--c-dark); }
.aib-about-founder__text { max-width: 620px; }
.aib-about-founder__text p { margin: 0 0 22px; font-weight: 300; font-size: 16px; line-height: 1.85; color: var(--c-muted); }
.aib-about-founder__text p:last-child { margin-bottom: 0; }
.aib-about-promise { padding-top: clamp(72px,8vw,116px); padding-bottom: clamp(72px,8vw,116px); }
.aib-about-promise__grid { display: grid; grid-template-columns: 0.9fr 1.5fr; gap: clamp(36px,6vw,80px); align-items: start; }
.aib-about-promise__h2 { margin: 0 0 22px; font-weight: 300; font-size: clamp(30px,4.2vw,54px); line-height: 1.04; letter-spacing: -.025em; color: var(--c-dark); }
.aib-about-promise__intro { margin: 0; font-weight: 300; font-size: 16px; line-height: 1.8; color: var(--c-muted); max-width: 360px; }
.aib-about-principles { display: flex; flex-direction: column; }
.aib-about-principle { display: flex; gap: 28px; padding: 28px 4px; border-top: 1px solid var(--c-border); }
.aib-about-principle:last-child { border-bottom: 1px solid var(--c-border); }
.aib-about-principle__num { font-size: 13px; font-weight: 500; color: var(--c-primary); width: 30px; flex: none; }
.aib-about-principle__title { margin: 0 0 5px; font-weight: 500; font-size: 21px; color: var(--c-dark); }
.aib-about-principle__text { margin: 0; font-weight: 300; font-size: 14.5px; line-height: 1.65; color: var(--c-subtle); }
.aib-about-team { background: #f1f3f6; border-top: 1px solid var(--c-border-light); }
.aib-about-team .aib-container { padding-top: clamp(72px,8vw,116px); padding-bottom: clamp(72px,8vw,116px); }
.aib-about-team__header { display: flex; flex-wrap: wrap; align-items: last baseline; justify-content: space-between; gap: 24px; margin-bottom: clamp(40px,5vw,60px); }
.aib-about-team__h2 { margin: 0; font-weight: 300; font-size: clamp(32px,4.6vw,62px); line-height: 1.02; letter-spacing: -.025em; color: var(--c-dark); }
.aib-about-team__sub { margin: 0 0 8px; max-width: 400px; font-weight: 300; font-size: 15px; line-height: 1.75; color: var(--c-subtle); }
.aib-about-team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px,2.4vw,30px); }
.aib-about-card { background: #fff; border: 1px solid var(--c-border-light); border-radius: 14px; overflow: hidden; }
.aib-about-card__img { aspect-ratio: 4/5; background: #e6e9ee; }
.aib-about-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.aib-about-card__body { padding: 22px 24px 26px; }
.aib-about-card__title { font-weight: 500; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: #c97076; margin-bottom: 7px; }
.aib-about-card__name { margin: 0 0 9px; font-weight: 500; font-size: 18px; line-height: 1.25; color: var(--c-dark); }
.aib-about-card__location { display: flex; align-items: center; gap: 8px; font-weight: 300; font-size: 13.5px; color: var(--c-label); }
/* Getoent, damit die Seite ihren Wechsel weiss/grau behaelt: seit dem Wegfall
der Referenten-Sektion grenzt sie sonst uebergangslos an "Unser Versprechen". */
.aib-about-locations { background: #f1f3f6; border-top: 1px solid var(--c-border-light);
padding-top: clamp(72px,8vw,116px); padding-bottom: clamp(72px,8vw,116px); }
.aib-about-locations__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px,4vw,56px); }
.aib-about-loc { border-top: 1px solid var(--c-border); padding-top: 26px; }
.aib-about-loc__label { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--c-meta); margin-bottom: 18px; }
.aib-about-loc__name { font-weight: 500; font-size: 16px; color: var(--c-dark); margin-bottom: 2px; }
.aib-about-loc__text { font-weight: 300; font-size: 15px; line-height: 1.85; color: var(--c-muted); }
.aib-about-loc__lines { display: flex; flex-direction: column; gap: 9px; font-weight: 300; font-size: 15px; line-height: 1.5; color: var(--c-muted); }
.aib-about-loc__meta { color: var(--c-label); font-size: 12.5px; }
.aib-about-loc__email { text-decoration: none; color: var(--c-primary); border-bottom: 1px solid #f3c5c8; padding-bottom: 3px; align-self: flex-start; margin-top: 4px; transition: color .2s; }
.aib-about-loc__email:hover { color: #a8082f; }
@media (max-width: 1100px) {
.aib-about-team__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
.aib-about-hero__grid { grid-template-columns: 1fr; }
.aib-about-founder__grid { grid-template-columns: 1fr; }
.aib-about-promise__grid { grid-template-columns: 1fr; }
.aib-about-locations__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
.aib-about-team__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.aib-about-locations__grid { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
.aib-about-team__grid { grid-template-columns: 1fr; }
}
/* ── Bookings page ── */
.aib-bookings-hero { padding-top: clamp(48px,6vw,90px); padding-bottom: clamp(36px,4vw,52px); }
.aib-bookings-hero__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(36px,6vw,90px); align-items: end; }
.aib-bookings-hero__h1 { margin: 0; font-weight: 300; font-size: clamp(44px,6vw,88px); line-height: 1.0; letter-spacing: -.03em; color: var(--c-dark); }
.aib-bookings-hero__intro { margin: 0 0 8px; max-width: 440px; font-weight: 300; font-size: 16.5px; line-height: 1.8; color: var(--c-muted); }
.aib-bookings-tutorials { padding-top: clamp(40px,5vw,64px); padding-bottom: clamp(20px,3vw,40px); }
.aib-bookings-tut__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2vw,24px); }
.aib-bookings-tut__card { text-decoration: none; background: #fff; border: 1px solid var(--c-border-light); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s; }
.aib-bookings-tut__card:hover { border-color: var(--c-rose); }
.aib-bookings-tut__img { position: relative; aspect-ratio: 16/10; background: #e6e9ee; overflow: hidden; }
.aib-bookings-tut__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aib-bookings-tut__badge { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; letter-spacing: .04em; color: #3f8f63; background: rgba(238,246,240,.92); padding: 5px 12px; border-radius: 999px; backdrop-filter: blur(4px); }
.aib-bookings-tut__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.aib-bookings-tut__format { font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #c97076; margin-bottom: 8px; }
.aib-bookings-tut__title { margin: 0 0 8px; font-weight: 500; font-size: 18px; line-height: 1.25; color: var(--c-dark); }
.aib-bookings-tut__excerpt { margin: 0 0 20px; font-weight: 300; font-size: 13.5px; line-height: 1.6; color: var(--c-label); flex: 1; }
.aib-bookings-tut__cta { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--c-primary); align-self: flex-start; }
.aib-bookings-empty { border: 1px solid #eef0f3; border-radius: 16px; background: #f1f3f6; padding: clamp(40px,5vw,64px) clamp(28px,4vw,52px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.aib-bookings-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 50%; background: #fff; border: 1px solid #e2e6eb; margin-bottom: 22px; }
.aib-bookings-empty__title { font-weight: 300; font-size: clamp(22px,2.6vw,30px); line-height: 1.2; letter-spacing: -.02em; color: var(--c-dark); margin: 0 0 10px; }
.aib-bookings-empty__text { max-width: 460px; font-weight: 300; font-size: 15px; line-height: 1.75; color: #6b7e96; margin: 0 0 26px; }
.aib-bookings-schulungen { padding-top: clamp(40px,5vw,72px); padding-bottom: clamp(72px,8vw,108px); }
/* Buchungsliste unten schliessen — auf der Termine-Seite bleibt sie bewusst offen. */
.aib-bookings-schulungen .aib-termine-row:last-child { border-bottom: 1px solid #e2e6eb; }
.aib-btn--outline-muted { background: none; border: 1px solid #d4dae2; color: var(--c-dark); }
.aib-btn--outline-muted:hover { border-color: #c97076; color: #c97076; }
/* Hero user row */
.aib-bookings-hero__user { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding-top: 4px; }
.aib-bookings-hero__avatar { width: 32px; height: 32px; border-radius: 999px; background: var(--c-rose-bg); color: #c97076; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.aib-bookings-hero__name { font-weight: 500; font-size: 13.5px; color: var(--c-dark); }
.aib-btn--xs { font-size: 13px; padding: 9px 18px; }
@media (max-width: 1100px) {
.aib-bookings-tut__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
.aib-bookings-hero__grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
.aib-bookings-tut__grid { grid-template-columns: 1fr; }
}
/* ── Mein Konto ── */
.aib-account { background: var(--c-surface); border-top: 1px solid var(--c-border); }
.aib-account .aib-container { padding-top: clamp(40px,5vw,64px); padding-bottom: clamp(48px,6vw,84px); }
.aib-account__tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--c-border); margin-bottom: 28px; }
.aib-account__tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 12px 20px; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--c-meta); cursor: pointer; transition: color .2s, border-color .2s; }
.aib-account__tab:hover { color: var(--c-body); }
.aib-account__tab--active { color: var(--c-dark); border-bottom-color: var(--c-primary); }
.aib-account__panel { display: none; }
.aib-account__panel--active { display: block; }
.aib-account__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; align-items: stretch; }
.aib-account__card { background: #fff; border: 1px solid var(--c-border-light); border-radius: 16px; padding: clamp(22px,2.4vw,30px); display: flex; flex-direction: column; }
.aib-account__card-label { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #c97076; margin-bottom: 18px; }
.aib-account__view, .aib-account__edit { display: flex; flex-direction: column; flex: 1; }
.aib-account__fields { display: flex; flex-direction: column; gap: 14px; }
.aib-account__field-label { font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--c-meta); margin-bottom: 4px; }
.aib-account__field-value { font-size: 14.5px; font-weight: 300; color: var(--c-dark); }
.aib-account__address { flex: 1; font-weight: 300; font-size: 14.5px; line-height: 1.85; color: var(--c-muted); }
.aib-account__actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: auto; padding-top: 24px; }
.aib-account__cancel { background: none; border: none; color: var(--c-label); font-family: inherit; font-size: 12.5px; font-weight: 500; padding: 9px 8px; border-radius: 999px; cursor: pointer; }
.aib-account__cancel:hover { color: var(--c-dark); }
.aib-account__input-group { display: flex; flex-direction: column; gap: 7px; }
.aib-account__input { font-family: inherit; font-size: 14px; font-weight: 300; color: var(--c-dark); padding: 11px 13px; border: 1px solid #d4dae2; border-radius: 10px; background: #fff; outline: none; transition: border-color .2s; }
.aib-account__input:focus { border-color: var(--c-rose); }
.aib-account__row { display: grid; grid-template-columns: 90px 1fr; gap: 10px; }
.aib-account__copy-link { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; background: none; border: none; color: var(--c-primary); font-family: inherit; font-size: 12px; font-weight: 500; padding: 4px 0; cursor: pointer; margin-top: 2px; }
.aib-account__copy-link:hover { color: #a8082f; }
.aib-account__input-group--plz { width: 90px; }
/* Orders */
.aib-account__orders-card { background: #fff; border: 1px solid var(--c-border-light); border-radius: 16px; overflow: hidden; }
.aib-account__orders-head { display: flex; align-items: center; gap: 20px; padding: 16px 28px; background: #fafbfc; border-bottom: 1px solid var(--c-border-light); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--c-meta); }
.aib-account__order-row { display: flex; align-items: center; gap: 20px; padding: 20px 28px; border-top: 1px solid var(--c-surface); }
.aib-account__orders-col--id { flex: none; width: 140px; }
.aib-account__orders-col--items { flex: 1; font-weight: 300; font-size: 14px; color: var(--c-muted); }
.aib-account__orders-col--total { flex: none; width: 120px; text-align: right; font-weight: 500; font-size: 14px; color: var(--c-dark); white-space: nowrap; }
.aib-account__orders-col--status { flex: none; width: 150px; text-align: right; }
.aib-account__order-id { display: block; font-weight: 500; font-size: 14px; color: var(--c-dark); }
.aib-account__order-date { display: block; font-weight: 300; font-size: 12.5px; color: var(--c-label); margin-top: 3px; }
.aib-account__order-badge { display: inline-block; font-size: 11.5px; font-weight: 500; padding: 5px 13px; border-radius: 999px; white-space: nowrap; }
.aib-account__orders-empty { padding: 40px 28px; text-align: center; font-weight: 300; font-size: 15px; color: var(--c-label); }
@media (max-width: 1100px) {
.aib-account__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
.aib-account__grid { grid-template-columns: 1fr; }
.aib-account__orders-head { display: none; }
.aib-account__order-row { flex-wrap: wrap; gap: 10px; }
.aib-account__orders-col--id { width: auto; }
.aib-account__orders-col--items { width: 100%; order: 3; }
.aib-account__orders-col--total { width: auto; text-align: left; }
.aib-account__orders-col--status { width: auto; text-align: left; }
}
/* ── Login page ── */
.aib-login-page { margin: 0; }
.aib-login { display: grid; grid-template-columns: 1fr 1fr; min-height: 70vh; background: #fff; }
.aib-login--fullscreen { min-height: 100vh; }
.aib-login__panel { position: relative; padding: clamp(36px,5vw,72px) clamp(28px,6vw,90px); display: flex; flex-direction: column; justify-content: center; }
.aib-login--fullscreen .aib-login__panel { min-height: 100vh; }
.aib-login__logo { position: absolute; top: clamp(28px,4vw,48px); left: clamp(28px,6vw,90px); display: flex; align-items: center; gap: 12px; text-decoration: none; }
.aib-login__form-wrap { width: 100%; max-width: 400px; margin: 0 auto; }
.aib-login__h1 { margin: 0 0 10px; font-weight: 300; font-size: clamp(28px,3.4vw,38px); line-height: 1.08; letter-spacing: -.025em; color: var(--c-dark); }
.aib-login__sub { margin: 0 0 30px; font-weight: 300; font-size: 14.5px; line-height: 1.7; color: var(--c-subtle); }
.aib-login__label { display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; }
.aib-login__label-text { font-size: 12.5px; font-weight: 500; letter-spacing: .04em; color: var(--c-body); }
.aib-login__input { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 12px; padding: 14px 16px; font-family: inherit; font-size: 15px; font-weight: 300; color: var(--c-dark); outline: none; transition: border-color .2s, background .2s; }
.aib-login__input:focus { border-color: var(--c-rose); background: #fff; }
.aib-login__2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.aib-login__remember { display: flex; align-items: center; gap: 11px; margin-bottom: 26px; cursor: pointer; font-size: 13.5px; font-weight: 300; color: var(--c-muted); }
.aib-login__remember input { margin: 0; }
.aib-login__submit { width: 100%; justify-content: center; }
.aib-login__switch { margin: 26px 0 0; text-align: center; font-size: 14px; font-weight: 300; color: var(--c-subtle); }
.aib-login__switch a { font-weight: 500; color: var(--c-primary); text-decoration: none; }
.aib-login__switch a:hover { color: #a8082f; }
.aib-login__back { display: inline-flex; align-items: center; gap: 7px; }
.aib-login__error { background: var(--c-rose-bg); border: 1px solid var(--c-rose-light); color: var(--c-primary); border-radius: 12px; padding: 14px 18px; margin-bottom: 24px; font-size: 14px; font-weight: 400; }
.aib-login__sent-center { text-align: center; }
.aib-login__sent-icon { display: inline-flex; align-items: center; justify-content: center; width: 66px; height: 66px; border-radius: 50%; background: #eef6f0; border: 1px solid #cfe6d8; margin-bottom: 24px; }
.aib-login__aside { position: relative; overflow: hidden; background: var(--c-dark); }
/* Die Spalte ist hochformatig, das Motiv querformatig — object-position haelt
Behandlerin und Laptop im Bild, statt mittig auf den Bildschirm zu schneiden. */
.aib-login__aside > img { position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: 38% 50%; }
.aib-login__aside-overlay { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(58,74,96,.06) 0%,rgba(58,74,96,.18) 55%,rgba(58,74,96,.62) 100%); }
.aib-login__aside-text { position: absolute; left: clamp(36px,4vw,56px); right: clamp(36px,4vw,56px); bottom: clamp(40px,5vw,60px); }
.aib-login__aside-quote { margin: 0; max-width: 420px; font-weight: 300; font-size: clamp(20px,2vw,26px); line-height: 1.4; letter-spacing: -.01em; color: #fff; }
@media (max-width: 900px) {
.aib-login__aside { display: none; }
.aib-login { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.aib-login__panel { padding: 32px 24px; }
.aib-login__2col { grid-template-columns: 1fr; }
.aib-login__logo { left: 24px; }
}
/* ── SUCHE ── */
/* Nutzt die Kurszeilen der Themenbereichsseite fuer die Treffer; eigenes CSS
braucht nur der Kopfbereich mit dem Suchfeld. Breite wie Termine/Tutorial. */
/* Kopf und Suchleiste sind bewusst wie Hero und Filterleiste der Termineseite
aufgebaut: Titel links, Text rechts, darunter zwischen zwei Linien die Suche. */
/* Ohne Linie unter dem Kopf: die Linie unter der Suchleiste trennt bereits
Bedienung von Ergebnissen, eine zweite daruber waere doppelt. */
.aib-suche-hero { padding-top: clamp(48px,6vw,90px); padding-bottom: clamp(30px,3.4vw,42px); }
.aib-suche-hero__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px,6vw,80px); align-items: end; }
.aib-suche-hero__h1 { margin: 0; font-weight: 300; font-size: clamp(38px,5.2vw,72px); line-height: 1.02; letter-spacing: -.03em; color: var(--c-dark); }
.aib-suche-hero__intro { margin: 0 0 6px; max-width: 440px; font-weight: 300; font-size: 16px; line-height: 1.8; color: var(--c-muted); }
/* Muss hinter der Definition stehen — weiter oben im Stylesheet verpuffte die Regel. */
@media (max-width: 700px) {
.aib-suche-hero__grid { grid-template-columns: 1fr; gap: 22px; align-items: start; }
}
.aib-suche-bar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding-top: 22px; padding-bottom: 22px; }
.aib-suche-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.aib-suche-form__field { position: relative; display: flex; align-items: center; flex: 1 1 260px; min-width: 0; }
.aib-suche-form__icon { position: absolute; left: 22px; color: var(--c-meta); pointer-events: none; }
/* Feld und Button teilen Innenabstand, Schriftgroesse, Zeilenhoehe und
Rahmenstaerke — nur so werden sie exakt gleich hoch. Der Button bekommt
dafuer einen transparenten Rahmen; ohne ihn waere er zwei Pixel niedriger.
Rahmen statt Fuellung wie bei den Filtern der Termineseite. */
.aib-suche-form__input,
.aib-suche-form__submit { padding-block: 16px; font-size: 15px; line-height: 1.2;
border: 1px solid transparent; border-radius: 999px; }
.aib-suche-form__input { width: 100%; background-color: #fff; border-color: #d4dae2;
padding-inline: 52px 24px; font-family: inherit; font-weight: 500; color: var(--c-body);
outline: none; transition: border-color .2s; }
.aib-suche-form__input::placeholder { font-weight: 400; color: var(--c-label); }
.aib-suche-form__input:focus { border-color: var(--c-rose); }
/* Das "x" von type=search entfernen — der Rundung wegen sitzt es sonst schief. */
.aib-suche-form__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.aib-suche-form__submit { flex: none; padding-inline: 30px; }
.aib-suche-form__reset { flex: none; font-size: 13px; font-weight: 500; color: var(--c-meta); text-decoration: none; transition: color .2s; }
.aib-suche-form__reset:hover { color: var(--c-primary); }
.aib-suche-count { font-size: 13px; font-weight: 300; color: #9aa7b6; white-space: nowrap; flex: none; }
.aib-suche-list .aib-container { padding-top: clamp(40px,5vw,60px); padding-bottom: clamp(72px,8vw,108px); }
.aib-suche-leer { padding: clamp(48px,6vw,84px) 0; text-align: center; }
.aib-suche-leer__text { margin: 0 auto 28px; max-width: 480px; font-weight: 300; font-size: 16px; line-height: 1.8; color: var(--c-muted); }
.aib-suche-leer .aib-hero__ctas { justify-content: center; }
/* Die Treffer bekommen zusaetzlich den Themenbereich als Badge — zwei passen in eine Zeile. */
.aib-suche-list .aib-tb-block__meta { flex-wrap: wrap; }
/* ── Themenbereiche page ── */
.aib-tb-hero__h1 { margin: 0 0 26px; font-weight: 300; font-size: clamp(42px,5vw,76px); line-height: 1.0; letter-spacing: -.03em; color: var(--c-dark); overflow-wrap: break-word; }
.aib-tb-hero__intro { margin: 0; max-width: 460px; font-weight: 300; font-size: 16.5px; line-height: 1.8; color: #5d718a; }
.aib-tb-legend { background: #f1f3f6; border-top: 1px solid #eef0f3; border-bottom: 1px solid #eef0f3; }
.aib-tb-legend__inner { padding: clamp(48px,5vw,72px) var(--gutter); }
.aib-tb-legend__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(20px,3vw,48px); }
.aib-tb-legend__item { border-top: 1px solid #e2e6eb; padding-top: 20px; }
.aib-tb-legend__item h3 { margin: 0 0 7px; font-weight: 500; font-size: 17px; color: var(--c-dark); }
.aib-tb-legend__item p { margin: 0; font-weight: 300; font-size: 13.5px; line-height: 1.6; color: #6b7e96; }
.aib-tb-index { padding: clamp(56px,6vw,84px) 0 clamp(8px,1vw,16px); }
.aib-tb-index__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.aib-tb-index__card { display: flex; align-items: center; justify-content: space-between; gap: 14px; text-decoration: none; background: #f1f3f6; border: 1px solid #eef0f3; border-radius: 12px; padding: 18px 22px; transition: background .2s, border-color .2s; }
.aib-tb-index__card:hover { background: #fff; border-color: #e8979c; }
.aib-tb-index__left { display: flex; align-items: baseline; gap: 14px; }
.aib-tb-index__num { font-size: 12.5px; font-weight: 500; color: var(--c-primary); width: 22px; flex: none; }
.aib-tb-index__title { font-size: 15.5px; font-weight: 300; color: var(--c-dark); letter-spacing: -.01em; }
.aib-tb-index__count { font-size: 12px; font-weight: 300; color: #9aa7b6; white-space: nowrap; }
.aib-tb-blocks { padding: clamp(40px,5vw,72px) 0 clamp(64px,7vw,100px); }
.aib-tb-block { border-top: 1px solid var(--c-border); padding: clamp(48px,5.5vw,80px) 0; scroll-margin-top: 96px; }
.aib-tb-block:first-child { border-top: 0; padding-top: clamp(20px,2.5vw,36px); }
.aib-tb-block__grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(34px,6vw,84px); align-items: start; }
.aib-tb-block__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.aib-tb-block__num { font-size: 13px; font-weight: 500; letter-spacing: .12em; color: var(--c-primary); }
.aib-tb-block__badge { font-size: 12px; font-weight: 500; color: #b45560; background: var(--c-rose-bg); padding: 5px 13px; border-radius: 999px; white-space: nowrap; }
.aib-tb-block__title { margin: 0 0 18px; font-weight: 300; font-size: clamp(28px,3.4vw,46px); line-height: 1.05; letter-spacing: -.025em; color: var(--c-dark); }
.aib-tb-block__intro { margin: 0 0 30px; font-weight: 300; font-size: 15.5px; line-height: 1.78; color: var(--c-muted); max-width: 440px; }
.aib-tb-block__intro p { margin: 0 0 16px; }
.aib-tb-block__intro p:last-child { margin-bottom: 0; }
.aib-tb-block__cta { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 14px; font-weight: 500; color: var(--c-primary); }
.aib-tb-block__cta:hover { color: #a8082f; }
/* Kurszeilen auf den Themenbereich-Seiten. Sie bleiben in der Inhaltsbreite —
innerhalb dieser Breite reicht das Bild bis an die rechte Kante. Senkrecht hat
es Abstand zu den Trennlinien, waagerecht nicht. */
.aib-kurszeilen { border-top: 1px solid var(--c-border); }
.aib-kurszeile { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
align-items: stretch; min-height: clamp(300px, 26vw, 420px);
border-bottom: 1px solid var(--c-border); }
.aib-kurszeile:last-child { border-bottom: 0; }
.aib-kurszeile__text { display: flex; flex-direction: column; justify-content: center;
padding: clamp(36px,4vw,60px) clamp(32px,4vw,64px) clamp(36px,4vw,60px) 0; }
.aib-kurszeile__text > * { min-width: 0; }
.aib-kurszeile__media { position: relative; overflow: hidden; background: #eadfe0;
margin: clamp(28px,3vw,48px) 0; }
.aib-kurszeile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Ganze Zeile anklickbar: der bestehende Link wird per ::after ueber die Zeile
gespannt. Verschachtelte waeren ungueltiges HTML — so bleibt es ein
einziger, ganz normal fokussierbarer Link. */
.aib-kurszeile { position: relative; }
.aib-kurszeile .aib-tb-block__cta::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.aib-kurszeile .aib-tb-block__cta svg { transition: transform .3s cubic-bezier(.22,.61,.24,1); }
.aib-kurszeile:hover .aib-tb-block__cta { color: #a8082f; }
.aib-kurszeile:hover .aib-tb-block__cta svg { transform: translateX(6px); }
.aib-kurszeile:focus-within .aib-tb-block__cta svg { transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) {
.aib-kurszeile .aib-tb-block__cta svg { transition: none; }
.aib-kurszeile:hover .aib-tb-block__cta svg { transform: none; }
}
@media (max-width: 900px) {
.aib-kurszeile { grid-template-columns: 1fr; min-height: 0; }
.aib-kurszeile__text { padding-right: 0; padding-bottom: 0; }
.aib-kurszeile__media { min-height: 55vw; margin: clamp(24px,4vw,36px) 0; }
}
.aib-tb-block__products-label { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #a7b3c2; margin-bottom: 4px; }
/* Bundles stehen als eigene Gruppe unter den Kursen — gleiches Styling, nur
durch Abstand abgesetzt, damit die Trennung ohne zusaetzliche Linie auskommt. */
.aib-tb-block__products-group--bundles { margin-top: clamp(46px,4.6vw,68px); }
.aib-tb-block__products { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px,3vw,48px); }
.aib-tb-block__product { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--c-border-light); padding: 15px 0; font-size: 17px; font-weight: 300; color: var(--c-dark); line-height: 1.35; text-decoration: none; transition: color .15s; }
.aib-tb-block__product:hover { color: var(--c-primary); }
.aib-tb-block__dot { width: 4px; height: 4px; border-radius: 50%; background: #e8979c; flex: none; }
@media (max-width: 1080px) {
.aib-tb-legend__grid { grid-template-columns: 1fr 1fr; }
.aib-tb-index__grid { grid-template-columns: 1fr 1fr; }
.aib-tb-block__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.aib-tb-legend__grid { grid-template-columns: 1fr; }
.aib-tb-index__grid { grid-template-columns: 1fr; }
.aib-tb-block__products { grid-template-columns: 1fr; }
}