/* ============================================================
   tassen-bedrucken24.de · Refresh-Layer V2
   Abgeglichen mit dem Claude-Design-Canvas "Startseite Refresh"
   (Referenzkopie: site/_analyse/design-canvas-startseite.html).
   Wird nach den bestehenden Stylesheets geladen und ueberschreibt
   diese gezielt. Rueckbau: Datei aus dem Seitenlayout entfernen.
   ============================================================ */

/* --- Schriften (lokal gehostet, kein Google-Fonts-CDN) ----- */

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/archivo-v25-latin-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/archivo-v25-latin-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/archivo-v25-latin-800.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/source-sans-3-v19-latin-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/source-sans-3-v19-latin-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/source-sans-3-v19-latin-700.woff2') format('woff2');
}

/* --- Tokens (aus dem Canvas) ------------------------------- */

:root {
    --tb-accent: #005CA9;
    --tb-accent-dark: #00457E;
    --tb-accent-soft: #E7F0F8;
    --tb-accent-num: #5FA8E0;
    --tb-dark: #14181C;
    --tb-ink: #14181C;
    --tb-body: #4E5A66;
    --tb-muted: #7A8794;
    --tb-line: #DDE3E9;
    --tb-bg-soft: #F4F7FA;
    --tb-yellow: #F4B400;
    --tb-star: #F4B400;
    --tb-radius: 14px;
    --tb-radius-lg: 20px;
    --tb-radius-sm: 8px;
    --tb-shadow: 0 18px 38px rgba(20, 24, 28, .14);
    --tb-shadow-sm: 0 2px 8px rgba(20, 24, 28, .06);
    --tb-font: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --tb-font-head: 'Archivo', 'Source Sans 3', sans-serif;
    --tb-section: 72px;
    --tb-bleed-l: calc(50% - 50vw);
}

/* Gemeinsame Fluchtlinie: alle Bootstrap-Container auf 1280 px.
   Verschachtelte Container (Sektionen bauen eigene .container in den
   Artikel-Container) verlieren ihr Seiten-Padding, sonst wandert der
   Inhalt je Sektion um 15 px nach innen. */
.container { max-width: 1280px; }
.mod_article .container { padding-left: 0; padding-right: 0; }

/* Vollbreite Baender aus dem gemeinsamen Container ausbrechen.
   Innen-Padding = Flucht des 1280er-Containers inkl. 15 px Col-Padding */
.tb-bleed {
    margin-left: var(--tb-bleed-l);
    margin-right: var(--tb-bleed-l);
    padding-left: max(15px, calc(50vw - 625px));
    padding-right: max(15px, calc(50vw - 625px));
}

/* clip statt hidden, damit position:sticky in der Kopfzeile weiter greift */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* --- Grundtypografie --------------------------------------- */

html, body {
    font-family: var(--tb-font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--tb-ink);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--tb-font-head);
    color: var(--tb-dark);
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.12;
    text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.35rem); line-height: 1.05; margin-bottom: .35em; }
h2 { font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.25rem); margin-bottom: .55em; }
h3 { font-size: 1.375rem; font-weight: 700; }

p { color: var(--tb-body); text-wrap: pretty; }

a, .page-link { color: var(--tb-accent); }
a:hover { color: var(--tb-accent-dark); }

.tb-kicker {
    display: block;
    margin-bottom: .7em;
    color: var(--tb-muted);
    font-family: var(--tb-font);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* --- Buttons (Pillen wie im Canvas) ------------------------ */

.button-blau a,
.heroimage-button-box a,
.ce_heroimage .heroimage-button-box .btn,
button.button-blau,
.btn-lp,
.btn-primary,
.tb-btn {
    display: inline-block;
    padding: .9em 1.7em;
    border: 0;
    border-radius: 999px;
    background-color: var(--tb-accent);
    color: #fff;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .15s ease;
}

/* Verweis-Links in button-blau-Containern: als Button ausspielen und links
   ausrichten. Das !important hebelt das inline gesetzte text-align aus, das
   aus dem Redakteursinhalt kommt. */
.container.button-blau .rte p { text-align: left !important; }

.container.button-blau .rte a {
    display: inline-block;
    padding: .9em 1.7em;
    border-radius: 999px;
    background-color: var(--tb-accent);
    color: #fff;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

.container.button-blau .rte a:hover { background-color: var(--tb-dark); color: #fff; }

.button-blau a:hover,
.heroimage-button-box a:hover,
.btn-lp:hover,
.btn-primary:hover,
.tb-btn:hover {
    background-color: var(--tb-accent-dark);
    color: #fff;
    text-decoration: none;
}

a.tb-btn, a.tb-btn:visited { background-color: var(--tb-accent); color: #fff; text-decoration: none; }
a.tb-btn:hover { background-color: var(--tb-accent-dark); color: #fff; }

.tb-btn--dark, a.tb-btn--dark, a.tb-btn--dark:visited { background-color: var(--tb-dark); color: #fff; }
.tb-btn--dark:hover, a.tb-btn--dark:hover { background-color: #2C3540; color: #fff; }

.tb-btn--ghost, a.tb-btn--ghost, a.tb-btn--ghost:visited {
    padding: 0 0 3px;
    background: transparent;
    border-radius: 0;
    border-bottom: 2px solid var(--tb-line);
    color: var(--tb-dark);
    font-weight: 700;
}

.tb-btn--ghost:hover, a.tb-btn--ghost:hover { background: transparent; border-color: var(--tb-accent); color: var(--tb-dark); }

/* --- Betriebsferien-Band ----------------------------------- */

.urlaubshinweis {
    padding: 13px 24px;
    background-color: var(--tb-yellow);
    color: #231A00;
    text-align: center;
}

.urlaubshinweis p.tb-ferien {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    color: #231A00;
    font-size: .9375rem;
    font-weight: 600;
}

.tb-ferien__badge {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 4px;
    background-color: #231A00;
    color: var(--tb-yellow);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* --- Trust-Zeile ------------------------------------------- */

#header { background-color: #fff; }

.usps {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: var(--tb-bg-soft);
    border-bottom: 1px solid var(--tb-line);
    font-size: .84rem;
    line-height: 1.35;
    color: var(--tb-body);
}

/* Trust-Band ueber die ganze Breite, Inhalt bleibt auf der Fluchtlinie */
.usps.container {
    max-width: none;
    padding-left: max(15px, calc(50vw - 625px));
    padding-right: max(15px, calc(50vw - 625px));
}
.usps p { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--tb-body); }
.usps p > span:not(.s1) { display: inline-block; }
.usps p br { display: none; }
.usps strong { display: block; color: var(--tb-dark); font-weight: 700; }
.usps a, .usps a:visited { color: var(--tb-accent) !important; font-weight: 400; }
.usps .fa { color: var(--tb-accent); font-size: 1.15em; flex: 0 0 auto; float: none; margin: 0; }
.usps .s1 { display: inline; font-weight: inherit; color: inherit; }

/* Der USPS-Balken liegt im grauen Band, das Band selbst vollbreit */
#header .usps { position: relative; }
#header > .inside > .usps::before { content: none; }

/* --- Kopfzeile: sticky, Logo, Navigation, Suche, CTA ------- */

.headerw {
    padding: .55rem 0;
    background-color: rgba(255, 255, 255, .97);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--tb-line);
}

/* Nur die Kopfzeile bleibt haften: der Rest von #header scrollt per
   negativem Versatz aus dem Bild (Ferienband + Trust-Zeile ~ 89 px) */
@media (min-width: 992px) {
    #header { position: sticky; top: -111px; z-index: 1020; }
}

/* Formulare tragen einen Anker, damit der Seitenaufbau nach dem Absenden bei
   ihnen landet. Der Versatz haelt sie unter der klebenden Kopfzeile frei. */
form[id^="auto_form_"] { scroll-margin-top: 24px; }

@media (min-width: 992px) {
    form[id^="auto_form_"] { scroll-margin-top: 140px; }
}

.headerw .ce_image img, .headerw .content-image img { max-width: 205px; height: auto; }

.headerw nav a,
.headerw .nav-link,
.headerw .dropdown-toggle {
    color: var(--tb-dark) !important;
    font-weight: 600;
}

.headerw nav a:hover, .headerw .nav-link:hover { color: var(--tb-accent) !important; }

.headerw .nav-link.active,
.headerw .nav-item.active > .nav-link {
    color: var(--tb-dark) !important;
    box-shadow: inset 0 -2px 0 var(--tb-accent);
}

.headerw .nav-link { padding: .4rem .5rem !important; font-size: .9375rem; white-space: nowrap; }
.headerw .navbar-nav, .headerw nav > ul { display: flex; flex-wrap: nowrap; }
.headerw nav > ul > li { white-space: nowrap; }

/* Contao-5/Bootstrap-5-Markup der Navigation: Skiplink verstecken,
   Dropdowns per Hover (kein Bootstrap-JS noetig) */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

.headerw .nav-item { position: relative; }

.headerw .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: -10px;
    z-index: 1050;
    min-width: 260px;
    background: #fff;
}

.headerw .nav-item:hover > .dropdown-menu,
.headerw .dropdown-menu.show { display: block; }

.headerw .dropdown-item { display: block; padding: 9px 12px; font-size: .9rem; text-decoration: none; }

.headerw .dropdown-menu {
    border: 1px solid var(--tb-line);
    border-radius: 12px;
    box-shadow: 0 22px 44px rgba(20, 24, 28, .14);
    padding: 10px;
}

.headerw .dropdown-item { border-radius: 8px; font-weight: 600; color: #2C3540; }
.headerw .dropdown-item:hover { background-color: var(--tb-bg-soft); color: var(--tb-accent); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--tb-bg-soft); color: var(--tb-accent); }

/* Suche als Pille */
#header form { display: flex; align-items: center; gap: .4rem; flex-wrap: nowrap; width: 100%; max-width: 150px; margin-left: auto; }
#header .formbody { width: 100%; }
#header .input-group { display: flex; flex-wrap: nowrap; align-items: center; gap: .4rem; }
#header .input-group .form-control { flex: 1 1 auto; width: auto; min-width: 0; }

#header input[type="text"],
#header input[type="search"] {
    height: 46px;
    padding: 0 1em 0 2.5em;
    border: 1px solid var(--tb-line);
    border-radius: 999px;
    background-color: #F9FBFD;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B99A6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.8-3.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
    font-size: .875rem;
}

/* Der Absende-Knopf entfaellt wie im Canvas, gesucht wird per Eingabetaste */
#header input[type="submit"],
#header button[type="submit"],
#header .input-group-append { display: none; }

/* Angebots-CTA in der Kopfzeile */
.tb-header-cta {
    display: inline-block;
    margin-left: .75rem;
    padding: .8em 1.4em;
    border-radius: 999px;
    background-color: var(--tb-accent);
    color: #fff !important;
    font-size: .9375rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}

.tb-header-cta:hover { background-color: var(--tb-accent-dark); color: #fff !important; text-decoration: none; }

.headerw .row { align-items: center; flex-wrap: nowrap; }

/* Burger nur mobil */
.shownavi { display: none; }

/* Unterhalb der Desktop-Breite: Desktop-Navigation und Suche weg,
   der Angebots-CTA wandert ins Offcanvas-Menue */
@media (max-width: 991px) {
    #header form, #header .mod_search { display: none; }
    .hidden-xs, .headerw .mod_navigation { display: none !important; }
    .headerw .tb-header-cta { display: none; }

    .shownavi { display: inline-flex; align-items: center; margin-left: auto; padding: .5rem .75rem; color: var(--tb-dark); font-size: 1.4rem; }

    /* Trust-Zeile: ein Punkt, mittig, die uebrigen faden durch */
    .usps .row { position: relative; height: 1.7em; margin-left: 0; margin-right: 0; }
    .usps .row > [class*="col-"] {
        position: absolute;
        inset: 0;
        width: 100%;
        max-width: 100%;
        display: flex;
        justify-content: center;
        opacity: 0;
        transition: opacity .5s ease;
        pointer-events: none;
    }
    .usps .row > .tb-usp-aktiv { opacity: 1; pointer-events: auto; }
    .usps p { width: 100%; justify-content: center; white-space: nowrap; overflow: hidden; }
    .usps strong { display: inline; margin-right: .35em; }
}

/* Angebots-CTA im Offcanvas-Menue */
.mm-listview .tb-mmenu-cta { margin: 14px 16px; }
.mm-listview .tb-mmenu-cta a,
.mm-listview .tb-mmenu-cta a.mm-listitem__text {
    display: block;
    padding: .85em 1.2em;
    background-color: var(--tb-accent);
    color: #fff !important;
    border-radius: 999px;
    font-weight: 700;
    text-align: center;
}

.mm-listview .tb-mmenu-cta::after { content: none; }

/* Direktkontakt unter dem CTA im Offcanvas */
.mm-listview .tb-mmenu-kontakt { margin: 4px 16px 14px; }
.mm-listview .tb-mmenu-kontakt::after { content: none; }

.mm-listview .tb-mmenu-kontakt a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: .55em 0;
    color: var(--tb-dark) !important;
    font-weight: 600;
    font-size: .9375rem;
}

.mm-listview .tb-mmenu-kontakt .fa { color: var(--tb-accent); width: 1.1em; text-align: center; }

/* Offcanvas und Klick-Blocker ueber Sticky-Kopfzeile und Kontaktleiste heben */
.mm-wrapper__blocker { z-index: 1040 !important; }
.mm-menu--offcanvas, nav[id^="mmenu"].mm-menu { z-index: 1045 !important; }

/* Schliessen-Knopf in der Menue-Leiste */
.mm-navbar { position: relative; }

.tb-mmenu-close {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--tb-dark) !important;
    font-size: 26px;
    line-height: 1;
    text-decoration: none;
}

.tb-mmenu-close:hover { color: var(--tb-accent) !important; }
.headerw .row > [class*="col-"] { flex: 0 0 auto; width: auto; max-width: none; }
.headerw .row > [class*="col-"]:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.headerw .row > [class*="col-"]:last-child { display: flex; align-items: center; justify-content: flex-end; }

/* --- Breadcrumb -------------------------------------------- */

.breadcrumb { margin: 18px 0 26px; padding: 0; background: none; font-size: .8125rem; color: var(--tb-muted); }
.breadcrumb a { color: var(--tb-accent); }

/* Gemeinsamer Artikel-Container: die grossen Abstaende macht jede Sektion
   selbst, oben bleibt etwas Luft, damit Textbloecke nicht an der Kante des
   vorhergehenden Bandes kleben */
#main .container.abstand { max-width: 1280px; padding-top: 40px; padding-bottom: 0; }
/* Direkt nach der Brotkrume nicht doppelt: die bringt ihren eigenen
   Abstand mit, der Zuschlag gilt den Bloecken weiter unten. */
.mod_breadcrumb + .container.abstand { padding-top: 0; }
#subheader { background-color: #fff; padding: 0; }
#subheader:empty { display: none; }

/* --- Hero -------------------------------------------------- */

.tb-hero { padding-top: 30px; padding-bottom: 60px; text-align: left; }

.tb-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
    padding: 7px 15px;
    border: 0;
    border-radius: 999px;
    background-color: var(--tb-accent-soft);
    color: #004E8F;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.tb-hero__badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--tb-accent);
}

.tb-hero h1 { margin: 0 0 18px; }

.tb-hero__lead { max-width: 530px; margin-bottom: 26px; font-size: 1.1875rem; line-height: 1.6; color: var(--tb-body); }

.tb-hero__facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 32px; padding: 0; list-style: none; max-width: 560px; }

.tb-hero__facts li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius-sm);
    background-color: #fff;
    font-size: .875rem;
    font-weight: 600;
    color: #2C3540;
}

.tb-hero__facts li::before { content: "\2713"; color: var(--tb-accent); font-weight: 700; }

.tb-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-bottom: 28px; }
.tb-hero__actions .tb-btn { font-size: 1.0625rem; padding: 1em 1.75em; }
.tb-hero__actions .tb-btn--ghost { padding: 0 0 3px; font-size: 1.0625rem; }

/* Google-Bewertungs-Badge im Hero */
.tb-rating {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border: 1px solid var(--tb-line);
    border-radius: 12px;
    background-color: #fff;
    color: var(--tb-dark);
    text-decoration: none;
}

a.tb-rating:hover { border-color: var(--tb-accent); color: var(--tb-dark); text-decoration: none; }
.tb-rating svg { flex: 0 0 auto; }
.tb-rating__row { display: flex; align-items: center; gap: 8px; }
.tb-rating__stars { color: var(--tb-star); letter-spacing: .08em; font-size: .95rem; line-height: 1; }
.tb-rating__row b { font-size: .9375rem; color: var(--tb-dark); }
.tb-rating__text { display: block; font-size: .8125rem; color: var(--tb-body); }

.tb-hero__media { position: relative; }

.tb-hero__media img {
    width: 100%;
    /* Flacher als 3:2: so stehen die Tassen in voller Breite und gross im
       Bild, ohne dass oben viel Hintergrund mitlaeuft. */
    aspect-ratio: 16 / 10;
    height: auto;
    object-fit: cover;
    border-radius: var(--tb-radius-lg);
}

.tb-hero__card {
    position: absolute;
    left: -22px;
    bottom: -22px;
    right: auto;
    top: auto;
    padding: 16px 20px;
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius);
    background-color: #fff;
    box-shadow: var(--tb-shadow);
}

.tb-hero__card .tb-kicker { margin-bottom: 0; font-size: .71875rem; letter-spacing: .1em; }
.tb-hero__card strong { display: block; margin-top: 4px; font-family: var(--tb-font-head); font-size: 1.75rem; font-weight: 800; color: var(--tb-dark); line-height: 1.1; }
.tb-hero__card span:not(.tb-kicker) { font-size: .875rem; color: var(--tb-body); }

@media (max-width: 991px) {
    .tb-hero__media { margin-top: 2rem; }
    .tb-hero__card { left: 12px; bottom: 12px; }
}

/* --- Sortiment --------------------------------------------- */

.tb-sortiment { position: relative; padding-top: 36px; }

.tb-sortiment h2 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem); margin-bottom: 30px; }

.tb-sortiment h2::before {
    content: "Sortiment";
    display: block;
    margin-bottom: 10px;
    color: var(--tb-muted);
    font-family: var(--tb-font);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.tb-sortiment__all {
    position: absolute;
    top: 56px;
    right: 15px;
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .tb-sortiment__all { position: static; display: inline-block; margin-bottom: 1rem; }
}

/* Karten */
.rahmen {
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius);
    background-color: #fff;
    transition: box-shadow .18s ease, border-color .18s ease;
}

.minhoehe .rahmen:hover, .rahmen.button-blau:hover { border-color: var(--tb-accent); box-shadow: 0 14px 30px rgba(0, 92, 169, .12); }

.rahmen.button-blau {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 0 20px;
    overflow: hidden;
}

.rahmen.button-blau > * { padding-left: 18px; padding-right: 18px; }
.rahmen.button-blau figure { margin: 0 0 0; padding: 0; }
/* Quadratisch statt 4:3: die Produktfotos sind selbst quadratisch, im
   4:3-Ausschnitt wurde der Tassenfuss unten abgeschnitten. */
.rahmen.button-blau figure img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; padding: 0; margin: 0; max-height: none; border-radius: 13px 13px 0 0; }
.rahmen.button-blau .p1:first-child, .rahmen.button-blau p { font-size: .84375rem; line-height: 1.45; color: var(--tb-body); }
.rahmen.button-blau .blau, .rahmen.button-blau strong { color: var(--tb-dark); }

/* Erster Absatz nach dem Bild ist der Kartentitel */
.rahmen.button-blau figure + p .s1,
.rahmen.button-blau figure + p .blau,
.rahmen.button-blau figure + p strong,
.rahmen.button-blau .rte > p:first-child .s1,
.rahmen.button-blau .rte > p:first-child .blau,
.rahmen.button-blau .rte > p:first-child strong { font-family: var(--tb-font-head); font-size: 1.1875rem; font-weight: 700; color: var(--tb-dark); }
.rahmen.button-blau figure + p,
.rahmen.button-blau .rte > p:first-child { margin-top: 16px; margin-bottom: 8px; }

/* Der rte-Wrapper uebernimmt Innenabstand und Fusszeilen-Verhalten der Karte */
.rahmen.button-blau > .rte { display: flex; flex-direction: column; flex: 1; padding-left: 18px; padding-right: 18px; }
.rahmen.button-blau > .rte > p:last-child { margin-top: auto; margin-bottom: 0; padding-top: 14px; }

.rahmen.button-blau p:last-child { margin-top: auto; margin-bottom: 0; padding-top: 14px; }

.rahmen.button-blau a,
.ce_text.button-blau a:not(.btn),
.content-text.button-blau a:not(.btn) {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--tb-accent);
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
}

.rahmen.button-blau a:hover { background: none; color: var(--tb-accent-dark); text-decoration: underline; }

/* Rasterabstaende wie im Canvas */
.tb-sortiment .row [class*="col-"] { margin-bottom: 18px; }

/* --- Einblick (weiss, wie im Canvas) ----------------------- */

.tb-section { padding-top: var(--tb-section); padding-bottom: var(--tb-section); }

/* Einblick liegt auf Weiss; die frueherer Grau-Variante entfaellt */
.tb-section--soft { background: none; }

.tb-list { margin: 22px 0 24px; padding: 0; list-style: none; display: grid; gap: 10px; }
.tb-list li { display: flex; align-items: center; gap: 10px; padding: 0; font-size: 1rem; font-weight: 600; color: #2C3540; }
.tb-list li::before { content: "\2713"; color: var(--tb-accent); font-weight: 700; }

.tb-einblick__video { position: relative; padding-top: 56.25%; border-radius: 18px; overflow: hidden; box-shadow: var(--tb-shadow-sm); background-color: var(--tb-dark); }
.tb-einblick__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 18px; }

/* --- FAQ (graues Band ueber die volle Breite) -------------- */

.tb-faq {
    margin-top: var(--tb-section);
    margin-left: var(--tb-bleed-l);
    margin-right: var(--tb-bleed-l);
    padding: var(--tb-section) max(15px, calc(50vw - 625px)) var(--tb-section);
    background-color: var(--tb-bg-soft);
    border-top: 1px solid var(--tb-line);
    border-bottom: 1px solid var(--tb-line);
    text-align: left;
}

.tb-faq .ui-accordion-header, .tb-faq .ui-accordion-content { text-align: left; }

@media (min-width: 992px) {
    .tb-faq {
        display: grid;
        grid-template-columns: minmax(300px, .78fr) 1.22fr;
        column-gap: 60px;
        align-items: start;
    }

    .tb-faq > * { grid-column: 2; justify-self: stretch; width: 100%; max-width: none; }
    .tb-faq > .tb-faq__aside { grid-column: 1; grid-row: 1 / span 99; align-self: start; }
}

.tb-faq__aside h2 { text-align: left; }
.tb-faq__aside > p { margin: 14px 0 0; color: var(--tb-body); }

/* Akkordeon ueberall im Canvas-Stil: Linien statt Boxen (gilt auch
   fuer die FAQ-Bloecke der Unterseiten) */
.ce_accordion {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--tb-line);
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.ce_accordion:first-of-type { border-top: 1px solid var(--tb-line); }
/* Luft nach dem letzten Eintrag, sonst stoesst der naechste Block direkt an */
.ce_accordion:last-of-type { margin-bottom: 40px; }

/* jQuery UI schreibt nach der Animation eine feste Hoehe in das
   Antwort-Element und laesst so Leerraum stehen */
.ui-accordion-content { height: auto !important; }
.ui-accordion-content > *:last-child { margin-bottom: 0; }

.ui-accordion-header {
    position: relative;
    padding: 28px 44px 28px 4px;
    background: none;
    color: var(--tb-dark);
    font-family: var(--tb-font-head);
    font-size: 1.15rem;
    font-weight: 700;
}

.ui-accordion-header:hover { background: none; color: var(--tb-accent); }
.ui-accordion-header::before { content: ""; }
.ui-accordion-header-collapsed::before { content: ""; transform: none; float: none; }

.ui-accordion-header::after {
    content: "\2212";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tb-accent);
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 1;
}

.ui-accordion-header-collapsed::after { content: "+"; }

.ui-accordion-content { padding: 4px 56px 32px 4px; border: 0; background: none; }
.ui-accordion-content p { font-size: 1rem; line-height: 1.7; color: var(--tb-body); }

/* Ansprechpartner-Karte */
.tb-contact-card {
    margin-top: 22px;
    padding: 20px;
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius);
    background-color: #fff;
    box-shadow: none;
}

.tb-contact-card .tb-kicker { margin-bottom: 14px; font-size: .75rem; }
.tb-contact-card__head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.tb-contact-card__head img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; }
.tb-contact-card__name { font-family: var(--tb-font-head); font-size: 1.1875rem; font-weight: 700; color: var(--tb-dark); }
.tb-contact-card__role { font-size: .90625rem; color: var(--tb-body); line-height: 1.5; }

.tb-contact-card__phone {
    display: block;
    margin: 0 0 2px;
    font-family: var(--tb-font-head);
    font-size: 1.625rem;
    font-weight: 800;
    color: var(--tb-dark);
    text-decoration: none;
}

.tb-contact-card__phone:hover { color: var(--tb-accent); }
.tb-contact-card__hint { margin-bottom: 14px; font-size: .90625rem; color: var(--tb-body); }
.tb-contact-card .tb-btn { padding: .75em 1.4em; font-size: .9375rem; }

/* --- SEO-Block: Text links, Infokarte rechts --------------- */

.tb-check2 { margin: 18px 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.tb-check2 li { font-size: .96875rem; color: #2C3540; }
.tb-check2 li::before { content: "\2713"; margin-right: .5em; color: var(--tb-accent); font-weight: 700; }

@media (max-width: 575px) {
    .tb-check2 { grid-template-columns: 1fr; }
}

.tb-infokarte {
    padding: 28px;
    border: 1px solid var(--tb-line);
    border-radius: 16px;
    background-color: var(--tb-bg-soft);
}

.tb-infokarte h3 { margin-bottom: 12px; }
.tb-infokarte p { font-size: 1rem; line-height: 1.7; }

.tb-infokarte ul { margin: 16px 0 0; padding: 0; list-style: none; }
.tb-infokarte ul li { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid #EDF1F5; font-size: 1rem; font-weight: 600; color: var(--tb-dark); }
.tb-infokarte ul li:last-child { border-bottom: 0; }
.tb-infokarte ul li::before { content: "\2713"; color: var(--tb-accent); font-weight: 700; }

/* Bild unter dem SEO-Text im 16/7-Beschnitt */
.tb-seo-bild figure { margin: 26px 0 0; }
.tb-seo-bild img { width: 100%; aspect-ratio: 16 / 7; height: auto; object-fit: cover; border-radius: 16px; }

/* --- Prozessblock (weisse Karte) --------------------------- */

.tb-process {
    margin-top: var(--tb-section);
    margin-bottom: var(--tb-section);
    padding: 52px 52px 44px;
    /* Weiss im Rahmen, damit die blauen Icon-Chips klar abgesetzt stehen */
    background-color: #fff;
    border: 1px solid var(--tb-line);
    color: var(--tb-body);
    border-radius: var(--tb-radius-lg);
}

.tb-process .container { padding: 0; max-width: none; }
.tb-process h2 { color: var(--tb-dark); max-width: 520px; }
.tb-process .row { margin-bottom: 36px; align-items: flex-end; }
.tb-process .row p { color: var(--tb-body); font-size: 1.03rem; line-height: 1.6; max-width: 430px; }

.tb-process__steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 0;
    border-top: 1px solid var(--tb-line);
}

.tb-process__step { padding: 26px 26px 4px 0; border-left: 0; border-right: 1px solid var(--tb-line); }
.tb-process__step:last-child { border-right: 0; }
.tb-process__step:not(:first-child) { padding-left: 26px; }

.tb-process__head { display: flex; align-items: center; gap: 12px; }

.tb-process__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0;
    border-radius: 10px;
    background-color: var(--tb-accent-soft);
    color: var(--tb-accent);
    font-size: 1.1rem;
}

.tb-process__icon .fa { color: var(--tb-accent); }
.tb-process__num { color: var(--tb-accent); font-family: var(--tb-font-head); font-size: .9375rem; font-weight: 700; letter-spacing: .02em; }
.tb-process__step h3 { margin: 14px 0 8px; color: var(--tb-dark); font-size: 1.375rem; font-weight: 700; }
.tb-process__step p { margin: 0; padding-right: 22px; color: var(--tb-body); font-size: .9375rem; line-height: 1.6; }

@media (max-width: 991px) {
    .tb-process { padding: 32px 24px; }
    .tb-process__steps { grid-template-columns: 1fr 1fr; }
    .tb-process__step { border-right: 0; }
}

@media (max-width: 575px) {
    .tb-process__steps { grid-template-columns: 1fr; }
}

/* --- Nachhaltigkeit: Text links, Zahlen rechts ------------- */

.tb-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 0; }

.tb-stat { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 22px; border-radius: var(--tb-radius); background-color: var(--tb-bg-soft); }
.tb-stat b { display: block; font-family: var(--tb-font-head); font-size: 2.25rem; font-weight: 800; line-height: 1; color: var(--tb-accent); white-space: nowrap; }
.tb-stat span { font-size: .875rem; line-height: 1.5; color: var(--tb-body); }

@media (max-width: 575px) {
    .tb-stats { grid-template-columns: 1fr; }
}

/* --- Einsatzmoeglichkeiten (graues Band) ------------------- */

.tb-einsatz {
    margin-top: var(--tb-section);
    margin-left: var(--tb-bleed-l);
    margin-right: var(--tb-bleed-l);
    padding: var(--tb-section) max(15px, calc(50vw - 625px));
    background-color: var(--tb-bg-soft);
}

.tb-einsatz h2 { font-size: 2rem; }
.tb-einsatz .row { align-items: flex-start !important; }
.tb-einsatz .row > [class*="col-"]:first-child { padding-right: 40px; }

.tb-link { font-weight: 700; color: var(--tb-accent); text-decoration: none; }
.tb-link:hover { color: var(--tb-accent-dark); text-decoration: none; }
.tb-einsatz .ce_image figure, .tb-einsatz .content-image figure { margin: 24px 0 0; }
.tb-einsatz .ce_image img, .tb-einsatz .content-image img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: 16px; }

/* Service-Liste in der rechten Spalte */
.tb-einsatz ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tb-einsatz ul li { font-size: .96875rem; color: #2C3540; }
.tb-einsatz ul li::before { content: "\2713"; margin-right: .5em; color: var(--tb-accent); font-weight: 700; }

/* --- Bewertungen ------------------------------------------- */

.tb-reviews { padding: var(--tb-section) 0 0; background: none; }
.tb-reviews .container { padding: 0; max-width: none; }

.tb-reviews__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 28px; flex-wrap: wrap; }
.tb-reviews__brand { display: flex; align-items: center; gap: 10px; }
.tb-reviews__head h2 { margin: 12px 0 0; }

.tb-reviews__score { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.tb-reviews__score b { font-family: var(--tb-font-head); font-size: 2.625rem; font-weight: 800; line-height: 1; color: var(--tb-dark); }
.tb-reviews__stars { display: block; color: var(--tb-star); letter-spacing: .08em; font-size: 1rem; line-height: 1; }
.tb-reviews__score a { display: block; margin-top: 4px; font-size: .875rem; }

.tb-review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

@media (max-width: 991px) {
    .tb-review-grid { grid-template-columns: 1fr; }
}

.tb-review {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius);
    background-color: #fff;
}

.tb-review__stars { color: var(--tb-star); letter-spacing: .08em; font-size: .95rem; line-height: 1; }
.tb-review p { flex: 1; margin: 0; font-size: 1rem; line-height: 1.65; color: #2C3540; }
.tb-review__meta { font-size: .875rem; color: var(--tb-muted); }

/* --- Abschluss-CTA (blaue Karte auf Weiss) ----------------- */

#footer { padding-top: 0; border-top: 0; background-color: var(--tb-dark); color: rgba(242, 245, 248, .72); }

.kontaktleiste {
    margin: 0;
    padding: var(--tb-section) 15px;
    background-color: #fff;
    border-bottom: 0;
    text-align: left;
}

.kontaktleiste > .container {
    /* Kartenkante buendig mit der Text-Fluchtlinie (Container minus Col-Padding) */
    max-width: 1250px;
    padding: 52px !important;
    border-radius: var(--tb-radius-lg);
    background-color: var(--tb-accent);
    color: #fff;
}

.kontaktleiste .ce_text,
.kontaktleiste .content-text > .rte {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    width: 100%;
}

.kontaktleiste h2, .kontaktleiste h3, .kontaktleiste strong, .kontaktleiste p { color: #fff; }
.kontaktleiste h2 { max-width: 640px; margin-bottom: 0; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem); }
.kontaktleiste p { margin: 14px 0 0; max-width: 560px; font-size: 1.125rem; color: rgba(255, 255, 255, .85); }

.tb-cta__actions { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }

.tb-cta__actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 30px;
    border-radius: 999px;
    background-color: #fff;
    color: var(--tb-accent) !important;
    font-size: 1.0625rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.tb-cta__actions a:hover { background-color: #EDF1F5; color: var(--tb-accent-dark) !important; text-decoration: none; }
.tb-cta__actions a .fa { color: inherit; }

.tb-cta__actions a.tb-cta--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .55);
    color: #fff !important;
}

.tb-cta__actions a.tb-cta--ghost:hover { background: transparent; border-color: #fff; color: #fff !important; }

@media (max-width: 991px) {
    .kontaktleiste > .container { flex-direction: column; align-items: flex-start; padding: 32px 24px; }
}

/* --- Footer ------------------------------------------------ */

.footerleiste { padding-top: 60px; }

#footer h3 {
    margin-bottom: 16px;
    padding-bottom: 0;
    border-bottom: 0;
    color: #fff;
    font-family: var(--tb-font);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

#footer p, #footer li, #footer span, #footer div, #footer td { color: rgba(242, 245, 248, .72); font-size: .9375rem; line-height: 1.75; }
#footer strong { color: #fff; }
#footer a, #footer a:visited { color: rgba(242, 245, 248, .72); text-decoration: none; }
#footer a:hover { color: #fff; text-decoration: none; }
#footer a[href^="tel"] { color: #7FB8E4; }
#footer li { padding: .22em 0; }
#footer ul { margin: 0; padding: 0; list-style: none; }

/* Versand- und Zahlungslogos auf weissen Kacheln */
.tb-dpd { display: inline-block; margin: 0 0 22px; padding: 10px 14px; border-radius: 8px; background-color: #fff; }
.tb-dpd img { display: block; height: 30px; width: auto; }

.tb-pay { display: grid; grid-template-columns: repeat(3, minmax(0, 72px)); gap: 8px; }
.tb-pay span { display: grid; place-items: center; height: 42px; border-radius: 6px; background-color: #fff; overflow: hidden; }
.tb-pay img { max-width: 85%; max-height: 34px; width: auto; height: auto; }

/* Social-Kachel */
.tb-social { display: flex; gap: 10px; margin-top: 18px; }
.tb-social a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background-color: rgba(242, 245, 248, .1);
}
.tb-social a:hover { background-color: var(--tb-accent); }
.tb-social .fa { font-size: 1.1rem; color: #fff; }

.copyright {
    margin-top: 40px;
    padding: 20px 0 26px;
    border-top: 1px solid rgba(242, 245, 248, .14);
    background: none;
    color: rgba(242, 245, 248, .5);
}

.copyright p, .copyright span { color: rgba(242, 245, 248, .5); font-size: .875rem; }

/* --- Sticky Kontaktleiste rechts --------------------------- */

.tb-sticky {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    transform: translateY(-50%);
}

.tb-sticky a {
    display: flex;
    align-items: center;
    gap: .6em;
    max-width: 3.4rem;
    padding: .9rem 1.05rem;
    background-color: var(--tb-accent);
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    transition: max-width .25s ease, background-color .15s ease;
}

.tb-sticky a:first-child { border-top-left-radius: var(--tb-radius-sm); }
.tb-sticky a:last-child { border-bottom-left-radius: var(--tb-radius-sm); }
.tb-sticky a:hover { max-width: 16rem; background-color: var(--tb-accent-dark); color: #fff; }

/* Eingeklappt nur das Symbol zeigen, der Text blendet beim Ausfahren ein */
.tb-sticky a span:not(.fa):not([class*="fa-"]) { opacity: 0; transition: opacity .2s ease .05s; }
.tb-sticky a:hover span:not(.fa):not([class*="fa-"]) { opacity: 1; }
.tb-sticky a .fa { font-size: 1.25rem; flex: 0 0 1.25rem; text-align: center; }
.tb-sticky .tb-sticky--whatsapp { background-color: #25d366; color: #05341a; }
.tb-sticky .tb-sticky--whatsapp:hover { background-color: #1eb455; color: #fff; }

@media (max-width: 767px) {
    .tb-sticky {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        flex-direction: row;
        transform: none;
        border-top: 1px solid rgba(255, 255, 255, .2);
        border-radius: 0;
    }

    .tb-sticky a {
        flex: 1 1 0;
        max-width: none;
        justify-content: center;
        border-radius: 0 !important;
        padding: .85rem 0;
        font-size: 0;
    }

    .tb-sticky a .fa, .tb-sticky a i { font-size: 1.25rem; margin: 0; }

    body { padding-bottom: 3.25rem; }
}

/* --- Vertikaler Rhythmus der weissen Sektionen ------------- */

/* SEO-Block: Luft nach dem FAQ-Band und vor dem Prozessblock */
.mod_article:has(.tb-seo-bild) { padding-top: var(--tb-section); padding-bottom: 32px; }

/* Nachhaltigkeit: Luft zum Prozessblock und zum Einsatz-Band */
.mod_article:has(.tb-stats) { padding-top: 32px; padding-bottom: 32px; }

/* --- Produkt-Detailseite (catalog-manager) ----------------- */

/* Kein eigener Vorlauf: den Abstand zur Brotkrume setzt bereits
   .breadcrumb, sonst steht die Produktueberschrift zu tief. */
.mod_catalogMasterView { margin-top: 0; }
/* Produkttitel laeuft ueber die volle Breite, damit die Vorteile rechts auf
   Hoehe der Bildoberkante links beginnen. */
.ctlg_master h1, .ctlg_master__title { margin-bottom: 28px; }

/* Produktbild in heller Flaeche statt 550-px-Zwangshoehe */
.ctlg_master .hauptbild {
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    padding: 40px;
    background-color: var(--tb-bg-soft);
    border-radius: 16px;
}

.ctlg_master .hauptbild img { max-height: 400px; width: auto; mix-blend-mode: multiply; }

/* Leerraum zwischen Kopfblock und Druckoptionen einfangen */
.ctlg_master > br { display: none; }
.ctlg_master .row.marguxl { margin-bottom: 10px; }
.ctlg_master .row.margoxl { margin-top: 24px; }

.technische-daten .row { padding: 10px 0; }

/* --- Bestandspflege / Feinschliff -------------------------- */

.hintergrund-grau, .grauerhg { background-color: var(--tb-bg-soft); }

.blaubox { padding: 1.75em; border-radius: var(--tb-radius); background-color: var(--tb-accent-soft); color: var(--tb-ink); }
.blaubox a, .blaubox a:active, .blaubox a:visited { color: var(--tb-accent); }

.layout_latest { border: 1px solid var(--tb-line); border-radius: var(--tb-radius); overflow: hidden; }
.layout_latest figure { border-bottom: 0; }
.layout_latest p a { display: inline-block; padding: .85em 1.6em; border-radius: 999px; background-color: var(--tb-accent); color: #fff; font-weight: 700; text-decoration: none; }

/* Ratgeber-Liste: gleich hohe Kacheln, Bilder auf volle Breite und gleiche Hoehe */
.mod_newslist > .row { align-items: stretch; }
.mod_newslist > .row > [class*="col-"] { display: flex; }
.mod_newslist .layout_latest { display: flex; flex-direction: column; width: 100%; }
.mod_newslist .layout_latest .image_container { margin: 0 0 14px; }
.mod_newslist .layout_latest .image_container img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; }
.mod_newslist .layout_latest p.more { margin-top: auto; }

.batch { background-color: var(--tb-accent); border-radius: 0; }
.farbselect .checked label, .image_picker_selector .selected { border-color: var(--tb-accent); }

/* Lesebreite und Rhythmus im Fliesstext */
.mod_article > .ce_text p, .mod_article > .content-text p,
.mod_article > .ce_text ul, .mod_article > .content-text ul,
.mod_article > .ce_text ol, .mod_article > .content-text ol { max-width: 72ch; }

.mod_article .ce_text p, .mod_article .content-text p { margin-bottom: 1.05em; font-size: 1.0625rem; line-height: 1.75; }
.mod_article .ce_text ul li, .mod_article .ce_text ol li,
.mod_article .content-text ul li, .mod_article .content-text ol li { margin-bottom: .35em; }
.mod_article .ce_text strong, .mod_article .content-text strong { color: var(--tb-dark); }

/* Textlinks klar erkennbar */
.ce_text:not(.button-blau) a:not(.btn):not([class*="button"]):not(.tb-btn),
.content-text:not(.button-blau) a:not(.btn):not([class*="button"]):not(.tb-btn) {
    color: var(--tb-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}

.ce_text:not(.button-blau) a:not(.btn):not([class*="button"]):not(.tb-btn):hover,
.content-text:not(.button-blau) a:not(.btn):not([class*="button"]):not(.tb-btn):hover { color: var(--tb-accent-dark); }

/* Tastaturbedienung sichtbar machen */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 3px solid rgba(0, 92, 169, .45);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Tabellen im Inhalt (breite Tabellen scrollen, aus dem alten col-xs.css) */
.ce_table, .content-table { overflow-x: auto; }

.ce_table table, .content-table table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.ce_table th, .ce_table td,
.content-table th, .content-table td { padding: .7em .9em; border-bottom: 1px solid var(--tb-line); text-align: left; }
.ce_table thead th, .content-table thead th { background-color: var(--tb-bg-soft); font-weight: 700; color: var(--tb-dark); }
.ce_table tbody tr:hover, .content-table tbody tr:hover { background-color: var(--tb-bg-soft); }

/* Bilder im Fliesstext */
.ce_text figure img, .ce_image figure img,
.content-text figure img, .content-image figure img { border-radius: var(--tb-radius-sm); }
.usps img, .headerw img, #footer img { border-radius: 0; }

/* Leere Rasterspalten neutralisieren */
.mod_article .row > [class*="col-"]:empty { display: none; }

/* Buttontexte erben immer die Buttonfarbe */
a.btn span, a.btn .s1, .btn span, .btn .s1 { color: inherit; }
.btn-primary, .btn-primary span, .btn-primary .s1 { color: #fff; }

/* Alter Support-Kasten (falls auf Unterseiten noch aktiv) */
.ce_sHtml5Start.rahmen { overflow: hidden; }
.ce_sHtml5Start.rahmen img { max-width: 100%; height: auto; }

.abstand { padding-top: 0; padding-bottom: 0; }

/* --- Formulare: einheitliche Felder, Buttons und Dateiwahl ---
   Die Formulare erbten bisher nur von Bootstrap und dem Alt-Theme. Dadurch
   waren Selects unterschiedlich breit, die Upload-Schaltflaechen kaum lesbar
   und die Beschriftungen uneinheitlich. */

.ce_form .widget,
.formbody .widget { margin-bottom: 22px; }

.ce_form label,
.formbody label {
    display: block;
    margin-bottom: 7px;
    color: var(--tb-dark);
    font-weight: 600;
    line-height: 1.35;
}

/* Ankreuzfelder und Auswahlknoepfe behalten die Beschriftung daneben */
.ce_form .checkbox_container label,
.ce_form .radio_container label,
.formbody .checkbox_container label,
.formbody .radio_container label {
    display: inline;
    margin-bottom: 0;
    font-weight: 400;
}

.ce_form input[type="text"],
.ce_form input[type="email"],
.ce_form input[type="tel"],
.ce_form input[type="number"],
.ce_form input[type="password"],
.ce_form select,
.ce_form textarea,
.formbody input[type="text"],
.formbody input[type="email"],
.formbody input[type="tel"],
.formbody input[type="number"],
.formbody select,
.formbody textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 12px 14px;
    background-color: #fff;
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius-sm);
    color: var(--tb-ink);
    font-family: var(--tb-font);
    font-size: 1rem;
    line-height: 1.4;
}

.ce_form select,
.formbody select { height: auto; appearance: auto; }

.ce_form textarea,
.formbody textarea { min-height: 140px; resize: vertical; }

.ce_form input:focus,
.ce_form select:focus,
.ce_form textarea:focus,
.formbody input:focus,
.formbody select:focus,
.formbody textarea:focus {
    outline: 0;
    border-color: var(--tb-accent);
    box-shadow: 0 0 0 3px var(--tb-accent-soft);
}

/* Absendeknoepfe wie die uebrigen Schaltflaechen der Seite */
.ce_form input[type="submit"],
.ce_form button[type="submit"],
.formbody input[type="submit"],
.formbody button[type="submit"] {
    display: inline-block;
    width: auto;
    padding: .9em 1.9em;
    border: 0;
    border-radius: 999px;
    background-color: var(--tb-accent);
    color: #fff;
    font-family: var(--tb-font);
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .15s ease;
}

.ce_form input[type="submit"]:hover,
.ce_form button[type="submit"]:hover,
.formbody input[type="submit"]:hover,
.formbody button[type="submit"]:hover { background-color: var(--tb-accent-dark); }

/* Dateiwahl: Der Alt-Stil setzte nur die Flaeche, nicht die Schriftfarbe,
   dadurch stand heller Text auf blauem Grund. */
.qq-upload-button,
.qq-upload-button-selector {
    display: inline-block;
    padding: .8em 1.5em !important;
    background-color: var(--tb-accent) !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-family: var(--tb-font);
    font-weight: 700 !important;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}

.qq-upload-button:hover,
.qq-upload-button-selector:hover { background-color: var(--tb-accent-dark) !important; }

.qq-uploader {
    padding: 20px;
    background-color: #fff;
    border: 1px dashed var(--tb-line);
    border-radius: var(--tb-radius-sm);
}

.qq-upload-drop-area, .qq-upload-drop-area-selector { border-radius: var(--tb-radius-sm); }
.qq-upload-list { margin-top: 12px; font-size: .9375rem; }
.qq-upload-file, .qq-upload-file-selector { color: var(--tb-ink); word-break: break-all; }
.qq-upload-size, .qq-upload-size-selector { color: var(--tb-muted); }

/* Fehlermeldungen sichtbar, aber nicht schreiend */
.ce_form p.error,
.formbody p.error {
    margin: 6px 0 0;
    color: #C0392B;
    font-size: .9375rem;
    font-weight: 600;
}

.ce_form .widget.error input,
.ce_form .widget.error select,
.ce_form .widget.error textarea,
.formbody .widget.error input,
.formbody .widget.error select,
.formbody .widget.error textarea { border-color: #C0392B; }

.ce_form .explanation,
.formbody .explanation { color: var(--tb-body); }

/* --- Kontaktseite: Text links, Formular rechts ---------------
   Der Artikel enthaelt Anschreiben und Formular untereinander. Ab 992 px
   stehen sie nebeneinander, das Formular in einer ruhigen grauen Flaeche. */

@media (min-width: 992px) {
    #article-19 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* Zeilenabstand halbiert: die Ansprechpartner-Karte faellt sonst mit
           56 px oben und unten zu weit aus dem Textfluss. Der Abstand zur
           Formularspalte bleibt bei 56 px. */
        column-gap: 56px;
        row-gap: 28px;
        align-items: start;
    }

    #article-19 > .content-text,
    #article-19 > .content-headline { grid-column: 1; }
    /* Das Formular laeuft neben der linken Spalte her. Die Spanne entspricht
       der Zahl der Elemente links (Überschrift, Karte, Text). Bewusst nicht
       "span 99" wie zuvor: Jede leere Rasterzeile hat ihren Abstand von 56 px
       mitgebracht, zusammen rund 5.500 px Leerraum unter der Seite. */
    #article-19 > .ce_form { grid-column: 2; grid-row: 1 / span 3; }
    #article-19 > .tb-contact-card { grid-column: 1; }
}

#article-19 > .ce_form {
    padding: 32px;
    background-color: var(--tb-bg-soft);
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius-lg);
}

#article-19 > .ce_form input[type="text"],
#article-19 > .ce_form input[type="email"],
#article-19 > .ce_form select,
#article-19 > .ce_form textarea { background-color: #fff; }

/* --- Wizard-Schaltflaechen ------------------------------------
   Contao rendert erst "Weiter", dann "Zurueck". Erwartet wird die
   umgekehrte Leserichtung: zurueck links, weiter rechts. Deshalb die
   Reihenfolge in der Anzeige drehen, statt am Markup zu ruehren. */

.widget-pagebreak {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
}

/* Der weiterfuehrende Schritt ist die Hauptaktion und darf auffallen. */
.widget-pagebreak button[value="continue"],
.ce_form button[type="submit"].tb-haupt,
.formbody button[type="submit"].tb-haupt {
    padding: 1.05em 2.4em;
    background-color: var(--tb-accent);
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(0, 92, 169, .22);
}

.widget-pagebreak button[value="continue"]:hover { background-color: var(--tb-accent-dark); }

/* Zurueck bleibt bewusst zurueckhaltend. */
.widget-pagebreak button[value="back"] {
    padding: .85em 1.6em;
    background-color: transparent;
    border: 1px solid var(--tb-line);
    color: var(--tb-body);
    font-weight: 600;
    box-shadow: none;
}

.widget-pagebreak button[value="back"]:hover {
    background-color: var(--tb-bg-soft);
    border-color: var(--tb-muted);
    color: var(--tb-dark);
}

@media (max-width: 575px) {
    .widget-pagebreak { flex-direction: column-reverse; align-items: stretch; }
    .widget-pagebreak button { width: 100%; }
}

/* --- Kopfzeile: Suche und Schaltflaeche auf die Fluchtlinie ---
   Die Spalte fuer Suchfeld und "Angebot anfragen" ist im Raster nur zwei von
   zwoelf Einheiten breit, rund 213 px. Beide Elemente zusammen brauchen mehr
   und liefen deshalb ueber den rechten Rand des Containers hinaus. Die Gruppe
   bekommt jetzt ihre natuerliche Breite, die Navigation daneben den Rest. */

@media (min-width: 992px) {
    .headerw .row { flex-wrap: nowrap; }

    .headerw [class*="col-lg-7"] {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    #header .headerw [class*="col-lg-2"] {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 16px;
    }

    /* Beide Kinder behalten ihre eigene Breite, damit sie nicht ineinander
       laufen. Ohne das schob sich das Suchfeld unter die Schaltflaeche. */
    #header .headerw [class*="col-lg-2"] > * {
        flex: 0 0 auto;
        min-width: 0;
    }

    /* Die Spalte selbst mittig in der Zeile halten, sonst sitzt die Gruppe
       hoeher oder tiefer als Logo und Navigation. */
    .headerw [class*="col-lg-2"] { align-self: center; }
    /* Mit #header qualifiziert, weil die allgemeinen Kopfzeilen-Regeln
       dieselbe Kennung tragen und sonst gewinnen (dort steht width: 100%,
       wodurch sich das Suchfeld unter die Schaltflaeche schob). */
    #header .headerw [class*="col-lg-2"] .mod_search {
        margin: 0;
        display: flex;
        align-items: center;
        width: auto;
        flex: 0 0 auto;
    }

    /* Das allgemeine "#header form { max-width: 150px }" weiter oben klemmt
       das Suchformular auf 150 px. Das Feld darin ist 12 rem breit und lief
       deshalb rechts aus dem Formularkasten heraus, unter die Schaltflaeche.
       Hier bekommt das Formular seine natuerliche Breite zurueck. */
    #header .headerw [class*="col-lg-2"] form {
        width: auto;
        max-width: none;
        margin-left: 0;
        gap: 0;
    }

    #header .headerw [class*="col-lg-2"] .formbody,
    #header .headerw [class*="col-lg-2"] .widget {
        margin: 0;
        display: flex;
        align-items: center;
        width: auto;
    }

    /* Suchfeld und Schaltflaeche auf dieselbe Hoehe, damit sie eine
       gemeinsame Grundlinie mit der Navigation bilden. */
    #header .headerw [class*="col-lg-2"] .input-group { align-items: stretch; flex-wrap: nowrap; width: auto; }
    #header .headerw [class*="col-lg-2"] .input-group .form-control {
        flex: 0 0 auto;
        width: 12rem;
        height: 2.75rem;
        padding-top: 0;
        padding-bottom: 0;
        line-height: 2.75rem;
    }

    .headerw .tb-header-cta {
        /* Der Abstand zum Suchfeld kommt aus der Luecke der Flex-Zeile. */
        margin-left: 0;
        display: inline-flex;
        align-items: center;
        height: 2.75rem;
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1;
    }
}

/* --- Druckoptionen ueber die volle Formularbreite ---
   Das Auswahlfeld sitzt im Formular in einer Spalte von sechs von zwoelf
   Einheiten. Die Kacheln des Bildwaehlers passten dadurch nur zwei nebeneinander,
   rechts daneben blieb die halbe Zeile leer. Die Spalte bekommt jetzt die volle
   Breite, die Kacheln verteilen sich darin. */
[class*="col-"]:has(> .widget.druckoptionenselector) {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

.image_picker_selector {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.image_picker_selector > li {
    float: none;
    margin: 0;
    width: auto;
}

/* Gleich breite Kacheln, damit die Zeile ruhig wirkt.
   Vier je Zeile ab Tablet, zwei darunter. */
.image_picker_selector > li > .thumbnail {
    width: 100%;
    height: 100%;
    margin: 0;
    box-sizing: border-box;
}

/* Vier je Zeile erst ab 992 px. Dazwischen drei, sonst bricht die laengste
   Beschriftung ("unschluessig - Bitte um Unterstuetzung ...") auf sechs Zeilen
   und die Kachel wird doppelt so hoch wie ihre Nachbarn. */
@media (min-width: 992px) {
    .image_picker_selector > li { width: calc((100% - 36px) / 4); }
}

@media (min-width: 768px) and (max-width: 991px) {
    .image_picker_selector > li { width: calc((100% - 24px) / 3); }
}

@media (max-width: 767px) {
    .image_picker_selector > li { width: calc((100% - 12px) / 2); }
}

/* --- Anzahl Farben vor die Druckoptionen ---
   Gewuenschte Reihenfolge: Anzahl, Druckart, Anzahl Farben, Druckoptionen.
   Ausgeliefert wird der Druckoptionen-Waehler vor dem Farbfeld.

   Ueber tl_form_field.sorting laesst sich das nicht steuern: das Farbfeld hat
   den kleineren Sortierwert (624 gegen 4288) und wird trotzdem spaeter
   ausgegeben, ein Testwert von 626 aenderte nichts. Die Felder liegen aber als
   Geschwister in derselben Flex-Zeile, deshalb hier ueber "order".

   Alle uebrigen Spalten der Zeile behalten order 0 und bleiben davor. Die
   dazwischenliegenden versteckten Felder (Produkttyp, Drucktechniken und so
   weiter) nehmen keinen Platz ein. */
.ce_form .row > [class*="col-"]:has(> .widget.farben) { order: 1; }
.ce_form .row > [class*="col-"]:has(> .widget.druckoptionenselector) { order: 2; }

/* --- Seitenkacheln (Produktuebersicht, Themen) ---------------------- */
.tb-kacheln { margin: 8px 0 28px; }
.tb-kacheln__raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (min-width: 1200px) { .tb-kacheln__raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 991.98px) { .tb-kacheln__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (max-width: 575.98px) { .tb-kacheln__raster { grid-template-columns: 1fr; } }
.tb-kachel { margin: 0; padding: 0; }
.tb-kachel__link {
    display: flex; flex-direction: column; height: 100%;
    border: 1px solid var(--tb-line); border-radius: var(--tb-radius); background: #fff; overflow: hidden;
    color: var(--tb-body); text-decoration: none;
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.tb-kachel__link:hover, .tb-kachel__link:focus-visible { border-color: var(--tb-accent); box-shadow: 0 14px 30px rgba(0, 92, 169, .12); transform: translateY(-2px); text-decoration: none; }
.tb-kachel__bild { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tb-bg-soft); }
.tb-kachel__bild img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .35s ease; }
.tb-kachel__link:hover .tb-kachel__bild img { transform: scale(1.04); }
.tb-kachel__platzhalter { display: block; height: 100%; background: linear-gradient(135deg, var(--tb-bg-soft), #E3EAF1); }
.tb-kachel__body { display: flex; flex-direction: column; flex: 1; padding: 18px 18px 20px; }
.tb-kachel__titel { display: block; font-family: var(--tb-font-head); font-size: 1.1875rem; font-weight: 700; line-height: 1.3; color: var(--tb-dark); margin-bottom: 8px; }
.tb-kachel__text { display: block; font-size: .875rem; line-height: 1.5; color: var(--tb-body); }
.tb-kachel__mehr { display: block; margin-top: auto; padding-top: 14px; font-size: .875rem; font-weight: 700; color: var(--tb-accent); }
.tb-kachel__mehr::after { content: " \2192"; }
.tb-kachel__link:hover .tb-kachel__mehr { color: var(--tb-accent-dark); text-decoration: underline; }

/* --- Formulare zweispaltig (Klasse tb-form-grid am Formular) -------- */
.tb-form-grid .formbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.tb-form-grid .formbody > .tb-full,
.tb-form-grid .formbody > .widget-explanation,
.tb-form-grid .formbody > .widget-rocksolid_antispam { grid-column: 1 / -1; }
.tb-form-grid .formbody select { height: 48px; padding-top: 0; padding-bottom: 0; }
@media (max-width: 575.98px) { .tb-form-grid .formbody { grid-template-columns: 1fr; } }

/* --- Mobilmenue: aktiver Eintrag hell hinterlegt, Akzentschrift ------ */
.mod_mmenu li.active > .mm-listitem__text,
.mod_mmenu .mm-listitem_selected > .mm-listitem__text { background: var(--tb-bg-soft); color: var(--tb-accent); font-weight: 700; }

/* --- Gutscheinfeld im Bestellformular (16.09.2026) --- */
.ce_form .widget:has(input.gutscheincode) {
  max-width: 28rem;
  margin: 1rem 0 1.5rem;
}
input.gutscheincode {
  text-transform: uppercase;
}
.gutschein-meldung:empty {
  display: none;
}
.gutschein-meldung {
  margin-top: .5rem;
  padding: .5rem .75rem;
  border-radius: .375rem;
  font-size: .9375rem;
  line-height: 1.4;
}
.gutschein-meldung.gutschein-ok {
  background: #e8f5ec;
  color: #14652f;
  border: 1px solid #b6e0c4;
}
.gutschein-meldung.gutschein-fehler {
  background: #fdf0f0;
  color: #8a1f1f;
  border: 1px solid #f1c4c4;
}

/* --- Portrait im blauen Kontaktblock, erst ab Desktop (17.09.2026) --- */
/* Die Leiste steht im Footer, dort setzt "#footer img" den Radius auf 0.
   Diese Regel muss deshalb ebenfalls ueber die id gehen, sonst gewinnt sie nicht. */
#footer .tb-cta__portrait,
.kontaktleiste .tb-cta__portrait,
.tb-cta__portrait {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(255, 255, 255, .9);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

/* --- Portrait in der Telefonsupport-Box (17.09.2026) --- */
.tb-support-portrait {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(20, 24, 28, .12);
}

/* --- Portrait in der blauen Kontaktleiste, erst ab Desktop (17.09.2026) --- */
.tb-cta__portrait-wrap { display: none; }
@media (min-width: 992px) {
  .tb-cta__portrait-wrap { display: block; flex-shrink: 0; line-height: 0; }
}

/* --- Kontaktseite: Reihenfolge Überschrift, Karte, Text (17.09.2026) ---
   Die Karte steht jetzt direkt unter der Überschrift, der Begrüssungstext
   darunter. Die Rasterzeilen bringen bereits 56 px Abstand mit, deshalb hier
   nur die Feinabstimmung. */
#article-19 > .content-headline { margin-bottom: 0; }
#article-19 > .tb-contact-card { margin-top: 0; }

/* --- Team auf der Seite Über uns (18.09.2026) --- */
.tb-team { margin: 40px 0 8px; }
.tb-team h2 { margin-bottom: 24px; }
.tb-team__raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 24px;
}
.tb-team__person { margin: 0; text-align: center; }
.tb-team__foto,
.tb-team__platzhalter {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  margin: 0 auto 14px;
  display: block;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(20, 24, 28, .12);
}
/* Platzhalter, solange ein Foto fehlt: Initialen auf ruhigem Grund */
.tb-team__platzhalter {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tb-bg-soft);
  border: 1px solid var(--tb-line);
  box-shadow: none;
  color: var(--tb-muted);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: 1px;
}
.tb-team__person figcaption strong { display: block; color: var(--tb-dark); font-size: 1.0625rem; }
.tb-team__person figcaption span { display: block; margin-top: 2px; color: var(--tb-body); font-size: .9375rem; line-height: 1.35; }

@media (max-width: 991.98px) { .tb-team__raster { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767.98px) {
  .tb-team__raster { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
  .tb-team__foto, .tb-team__platzhalter { width: 128px; height: 128px; font-size: 36px; }
}

/* --- Über uns und Grafikarbeiten: zweispaltig (18.09.2026) ---
   Text links, daneben rechts das Team beziehungsweise das Foto. Die
   nachfolgenden Abschnitte laufen wieder ueber die volle Breite. */
.tb-team { margin-bottom: 8px; }

@media (min-width: 992px) {
    #article-295,
    #article-296 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 56px;
        row-gap: 40px;
        align-items: start;
    }

    /* Standard: ueber beide Spalten, damit spaetere Abschnitte ganz breit stehen */
    #article-295 > *,
    #article-296 > * { grid-column: 1 / -1; }

    /* Alle Textabschnitte stapeln links untereinander, das Team laeuft rechts
       daneben durch. Die Spanne entspricht der Zahl der Textbloecke; bewusst
       keine grosse Reservezahl, sonst entstehen leere Rasterzeilen, die ihren
       Abstand mitbringen. */
    #article-295 > .content-text { grid-column: 1; }
    #article-295 > .tb-team { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }

    #article-296 > .content-text:first-of-type { grid-column: 1; grid-row: 1; }
    #article-296 > .content-image { grid-column: 2; grid-row: 1; }

    /* In der halben Spalte ist Platz fuer drei Personen je Zeile */
    #article-295 > .tb-team .tb-team__raster { grid-template-columns: repeat(3, 1fr); gap: 24px 18px; }
    #article-295 > .tb-team .tb-team__foto,
    #article-295 > .tb-team .tb-team__platzhalter { width: 128px; height: 128px; font-size: 36px; }
}

/* --- Galerie als Slider (18.09.2026) ---
   Das Standard-Element Galerie bleibt, die Bilderliste wird zur wischbaren
   Leiste mit Einrastpunkten. Die Pfeile setzt slider.js. */
.tb-slider { position: relative; }
.tb-slider ul {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.tb-slider ul > li {
  flex: 0 0 min(360px, 78%);
  scroll-snap-align: start;
  margin: 0;
}
.tb-slider figure { margin: 0; }
.tb-slider figure img,
.tb-slider figure a { display: block; width: 100%; }
.tb-slider figure img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--tb-bg-soft);
  border: 1px solid var(--tb-line);
  border-radius: var(--tb-radius-lg);
}
.tb-slider__knopf {
  position: absolute;
  top: calc(50% - 10px);
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 1px solid var(--tb-line);
  border-radius: 50%;
  background: #fff;
  color: var(--tb-accent);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(20, 24, 28, .14);
}
.tb-slider__knopf:disabled { opacity: .35; cursor: default; }
.tb-slider__knopf--zurueck { left: -10px; }
.tb-slider__knopf--vor { right: -10px; }
@media (max-width: 767.98px) { .tb-slider__knopf { display: none; } }

/* 21.09.2026: Startseiten-Bloecke auf native Elemente umgebaut.
   Die Kontaktkarte ist jetzt ein Text-Element mit Bildfeld, das Bild sitzt
   in einer figure statt im frueheren __head-Container. */
.tb-contact-card > figure { margin: 0 16px 8px 0; }
.tb-contact-card > figure img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; }
.tb-contact-card .tb-contact-card__name { margin-bottom: 0; }
.tb-contact-card .tb-contact-card__role { margin-bottom: 16px; }
.tb-contact-card .tb-kicker { margin-bottom: 14px; }
@media (min-width: 992px) {
    .tb-faq > .tb-contact-card { grid-column: 1; grid-row: 2; align-self: start; }
    .tb-faq > .tb-faq__aside { grid-row: 1; }
}
/* Hero als native Elemente: die Karte liegt jetzt neben dem Bild in derselben
   Spalte, deshalb positioniert sie sich zur Spalte statt zum Bildcontainer. */
.tb-hero .ce_bs_gridSeparator { position: relative; }
.tb-hero .tb-hero__badge { display: inline-flex; }
.tb-hero .tb-hero__card p { margin: 0; }
.tb-hero .tb-hero__card strong { display: block; margin-top: 4px; }
.tb-hero .tb-hero__card span:not(.tb-kicker) { display: block; font-size: .875rem; color: var(--tb-body); }
.tb-rating img { flex: 0 0 auto; }