/* wt-home.css - Startseite. Scope .wt-home, nur auf frontend.home.page. */

/* --- 0. Tokens ---------------------------------------------------------- */

.wt-home {
    /* Design-System, siehe docs/DESIGN_CONCEPTS.md */
    --ua-primary: #30427d;
    --ua-border-radius: 16px;
    --ua-text-muted: #495057;
    --ua-border-color: #dee2e6;
    --ua-card-border: #e9ecef;
    --ua-bg-light: #f8f9fa;
    --ua-bg-hover: #f8f9fc;
    --ua-heading: #212529;

    /* Startseiten-Palette. */
    --wt-primary: #30427d;
    --wt-primary-dark: #26345f;
    --wt-primary-deep: #1e3252;
    --wt-primary-tint: #eaeef7;
    --wt-ground: #f4f6f9;
    --wt-surface: #ffffff;
    --wt-surface-2: #eaeef5;
    --wt-ink: #111726;
    --wt-ink-2: #4a5468;
    --wt-ink-3: #7d879b;
    --wt-line: #dde2ec;
    --wt-line-2: #c5cddc;
    --wt-night: #131a2b;

    /* Kategoriefarben (bestehendes System). */
    --wt-alarm: #bc4448;
    --wt-fire: #4d4d4d;
    --wt-video: #294580;

    /* Maße. */
    --wt-content: 1600px;
    --wt-gutter: clamp(1.25rem, 4vw, 2.5rem);
    --wt-band: clamp(3.5rem, 7vw, 6rem);
    --wt-card-gap: 1.5rem;
    --wt-radius-in: 12px;

    --wt-shadow-subtle: 0 0.125rem 0.25rem rgba(17, 23, 38, 0.075);
    --wt-shadow-minimal: 0 1px 3px rgba(17, 23, 38, 0.05);
    --wt-shadow-elevated: 0 0.5rem 1.5rem rgba(17, 23, 38, 0.12);
    --wt-shadow-lift: 0 1.5rem 3rem rgba(17, 23, 38, 0.18);
    --wt-transition: 0.25s ease;

    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

/* Grund und Schriftfarbe auf den neuen Bloecken, nicht auf dem Wrapper: sonst
   erben alte Bloecke, die waehrend der Umstellung noch auf der Seite stehen,
   beides mit. :where() haelt die Spezifitaet bei 0,1,0 — jede Abschnittsregel
   wie `.wt-home .wt-s-usp { background }` gewinnt weiterhin. */
.wt-home :where(.cms-block[class*="wt-s-"]) {
    background: var(--wt-ground);
    color: var(--wt-ink);
}

/* --- 1. Abschnittsrhythmus ---------------------------------------------- */

/* Randlos; Breite je Band. :has() bindet die Regel an den Wrapper. */
.wt-home,
:is(.container, .container-main, .container-fluid):has(> .wt-home) {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.wt-home .cms-section,
.wt-home .cms-section .boxed {
    max-width: none;
    padding: 0;
    margin: 0;
}

/* Bootstrap-Grid im Block stilllegen. Nur in den neuen wt-s-*-Bloecken:
   solange alte Bloecke mit auf der Seite stehen, brauchen die ihr Grid. */
.wt-home .cms-block[class*="wt-s-"] .cms-block-container-row {
    --bs-gutter-x: 0;
    margin: 0;
}

.wt-home .cms-block[class*="wt-s-"] .cms-block-container-row > [class*="col-"],
.wt-home .cms-block[class*="wt-s-"] .cms-block-container > [class*="col-"] {
    padding: 0;
    width: 100%;
    max-width: none;
    flex: 0 0 100%;
}

/* Band auf .cms-block - .cms-block-container hat ein Inline-padding. */
.wt-home .cms-block[class*="wt-s-"] {
    padding-block: var(--wt-band);
    padding-inline: var(--wt-gutter);
}

.wt-home .cms-block[class*="wt-s-"] > .cms-block-container {
    max-width: var(--wt-content);
    margin-inline: auto;
}

/* Hero randlos. */
.wt-home .cms-block.wt-s-hero {
    padding: 0;
}

.wt-home .cms-block.wt-s-hero > .cms-block-container {
    max-width: none;
}

/* Kuerzere Abschnitte, engeres Band. */
.wt-home .cms-block.wt-s-brands,
.wt-home .cms-block.wt-s-associations {
    padding-block: calc(var(--wt-band) * 0.62);
}

/* Saeulen ueberlappen den Hero; greift nur direkt hinter dem Hero. */
.wt-home .cms-block.wt-s-hero + .cms-block.wt-s-pillars {
    padding-top: 0;
    margin-top: calc((var(--wt-band) + 3.5rem) * -1);
    position: relative;
    z-index: 2;
}

/* Abwechselnder Grund. */
.wt-home .wt-s-usp,
.wt-home .wt-s-pillars {
    background: var(--wt-surface-2);
}

/* Direkt hinter dem Hero geht das nicht als Blockhintergrund: der Block zieht
   sich per negativem margin in den Hero und wuerde dessen Bild unten
   ueberdecken. Die Faerbung uebernimmt ein ::before, das erst an der
   Hero-Unterkante beginnt — genau um den Betrag versetzt, um den der Block
   hochgezogen ist. Beide Werte muessen zusammen bleiben. */
.wt-home .cms-block.wt-s-hero + .cms-block.wt-s-pillars {
    background: transparent;
}

.wt-home .cms-block.wt-s-hero + .cms-block.wt-s-pillars::before {
    content: "";
    position: absolute;
    inset: calc(var(--wt-band) + 3.5rem) 0 0;
    background-color: var(--wt-surface-2);
    z-index: -1;
}

/* Saeulen und Hersteller teilen sich EIN Hintergrundbild — zwischen Hero und
   „EPS Premium Hersteller" stand vorher ein leerer Streifen --wt-surface-2 mit
   sichtbarer Kante.

   Der Trick ist `background-attachment: fixed`: beide Flaechen rechnen ihren
   Ausschnitt gegen den Viewport statt gegen die eigene Box, zeigen also
   denselben Bildausschnitt und gehen nahtlos ineinander ueber. Mit `scroll`
   legt `cover` das Bild in jede Box einzeln — die Massstaebe fallen
   auseinander und die Kante ist wieder da.

   Warum nicht mit einem negativen Versatz nach oben gezogen: die Hoehe des
   Saeulen-Abschnitts haengt am Umbruch der fuenf Karten und reicht von 234px
   (>=1500px, eine Reihe) bis 1621px (Mobil, alle gestapelt). Ein fester Wert
   passt genau bei einer Breite.

   --wt-surface-2 bleibt als background-color darunter stehen: faellt das Bild
   aus, sieht die Flaeche aus wie vorher. */
.wt-home .cms-block.wt-s-hero + .cms-block.wt-s-pillars::before,
.wt-home .cms-block.wt-s-brands {
    background-image: url('/bundles/wttemplate/home/manufacturers-background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* --- 2. Typografie ------------------------------------------------------ */

/* Keine eigene Schrift auf der Startseite. Alles erbt Roboto aus
   --bs-body-font-family; Ueberschriften tragen wie vorher font-weight: 700.
   Der Redesign-Stand setzte hier 'Russo One' in 400 ein - das war die einzige
   Stelle im Shop, an der die Startseite eine andere Schrift fuehrte als der
   Rest, und ist bewusst zurueckgenommen. Roboto liegt nur als
   Roboto-Regular.ttf vor, 700 wird also vom Browser synthetisiert - genau wie
   auf allen uebrigen Seiten. */

.wt-home .wt-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.wt-home .wt-display {
    font-weight: 700;
    font-size: clamp(1.75rem, 3.2vw, 2.6rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--wt-ink);
    margin: 0.45rem 0 0;
}

.wt-home .wt-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wt-primary);
    margin: 0;
}

.wt-home .wt-lede {
    color: var(--wt-ink-2);
    max-width: 62ch;
    margin: 0;
}

.wt-home .wt-sect-head {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2.75rem;
}

.wt-home .wt-sect-head.wt-center {
    align-items: center;
    text-align: center;
}

.wt-home .wt-sect-head.wt-center .wt-lede {
    text-align: center;
}

/* Eine Zeile statt drei. Der Herstellerabschnitt soll frueh im Bild stehen —
   dort zaehlt jede Zeile ueber den Logos. Der Abstand zum Reiterband ist
   ebenfalls kleiner, weil die kurze Zeile weniger Luft braucht. */
.wt-home .wt-lede-tight {
    max-width: 46ch;
}

.wt-home .wt-sect-head:has(.wt-lede-tight) {
    gap: 0.5rem;
    margin-bottom: 1.75rem;
}

.wt-home .wt-center-row {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

/* --- 3. Buttons --------------------------------------------------------- */

/* Nur eigene wt-btn-*: .wt-home .btn traf auch .btn-minus/.btn-plus der Karten. */
.wt-home .wt-btn-primary,
.wt-home .wt-btn-ghost,
.wt-home .wt-btn-on-night,
.wt-home .wt-btn-outline-night {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid transparent;
    border-radius: 50px;
    padding: 0.8rem 1.6rem;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--wt-transition), color var(--wt-transition),
        border-color var(--wt-transition), transform var(--wt-transition);
}

.wt-home .wt-btn-primary:hover,
.wt-home .wt-btn-ghost:hover,
.wt-home .wt-btn-on-night:hover,
.wt-home .wt-btn-outline-night:hover {
    transform: translateY(-1px);
}

.wt-home .wt-btn-primary {
    background: var(--wt-primary);
    color: #fff;
}

.wt-home .wt-btn-primary:hover {
    background: var(--wt-primary-dark);
    color: #fff;
}

.wt-home .wt-btn-ghost {
    border-color: var(--wt-line-2);
    color: var(--wt-ink);
    background: transparent;
}

.wt-home .wt-btn-ghost:hover {
    border-color: var(--wt-primary);
    color: var(--wt-primary);
}

.wt-home .wt-btn-on-night {
    background: #fff;
    color: var(--wt-primary-deep);
}

.wt-home .wt-btn-on-night:hover {
    background: #e2e8f6;
    color: var(--wt-primary-deep);
}

.wt-home .wt-btn-outline-night {
    border-color: rgba(255, 255, 255, 0.38);
    color: #fff;
    background: transparent;
}

.wt-home .wt-btn-outline-night:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Groesse traegt die Hierarchie im Hero: der eine dominante Button ist auch
   der groesste. Ohne das konkurriert er mit dem gleich grossen Suchen-Button. */
.wt-home .wt-btn-lg {
    padding: 1rem 2.1rem;
    font-size: 1.05rem;
    box-shadow: var(--wt-shadow-elevated);
}

.wt-home a:focus-visible,
.wt-home button:focus-visible,
.wt-home input:focus-visible {
    outline: 3px solid var(--wt-primary);
    outline-offset: 3px;
}

/* --- 4. Hero ------------------------------------------------------------ */

.wt-home .wt-hero {
    position: relative;
    background: var(--wt-night);
    color: #fff;
    isolation: isolate;
    overflow: hidden;
}

.wt-home .wt-hero-media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.wt-home .wt-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 80%;
}

/* Scrim: links fuer den Text, unten fuer die Saeulenkarten. */
.wt-home .wt-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(100deg, rgba(19, 26, 43, 0.96) 0%, rgba(19, 26, 43, 0.88) 34%,
            rgba(19, 26, 43, 0.4) 68%, rgba(19, 26, 43, 0.6) 100%),
        linear-gradient(to top, rgba(19, 26, 43, 0.92) 0%, transparent 45%);
}

.wt-home .wt-hero-inner {
    display: grid;
    gap: 2rem;
    max-width: min(78ch, var(--wt-content));
    margin-inline: auto;
    /* Buendig mit der linken Kante aller uebrigen Abschnitte. Deren Kante liegt
       bei (100vw - content) / 2; die eigene Innenkante ergibt sich aus
       margin-left + padding-left, deshalb hier ein Gutter abgezogen. Vorher
       stand der Text zwei Gutter weiter rechts als alles darunter.
       max(0px, ...) faengt schmale Schirme ab — dort traegt das padding allein. */
    margin-left: max(0px, calc((100vw - var(--wt-content)) / 2 - var(--wt-gutter)));
    padding-block: clamp(3.5rem, 8vw, 7rem) calc(var(--wt-band) + 4.5rem);
    padding-inline: var(--wt-gutter) var(--wt-gutter);
}

.wt-home .wt-hero h1 {
    font-weight: 700;
    font-size: clamp(2.1rem, 5.1vw, 4rem);
    line-height: 1.06;
    letter-spacing: -0.015em;
    color: #fff;
    margin: 0;
    text-wrap: balance;
}

.wt-home .wt-hero h1 em {
    font-style: normal;
    color: #9fb2e8;
    display: block;
}

.wt-home .wt-hero-sub {
    color: #c3cbdd;
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    /* Etwas schmaler als der Container: die Ueberschrift darf die volle Breite
       nehmen, der Fliesstext bleibt in der lesbaren Zeilenlaenge. */
    max-width: 66ch;
    margin: 0;
}

.wt-home .wt-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #9fb2e8;
}

.wt-home .wt-hero-eyebrow::before {
    content: "";
    width: 2.25rem;
    height: 2px;
    background: #9fb2e8;
}

.wt-home .wt-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

/* Schnellzugriffe: angemeldet per ajax-div.js gefuellt, als Gast statisch. */
.wt-home .wt-quicklinks:empty {
    display: none;
}

.wt-home .wt-quicklinks .banner-navigation {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 1rem;
}

.wt-home .wt-quicklinks .nav-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: 1.75rem 1.35rem 1.5rem;
    background: var(--wt-surface);
    border: 1px solid var(--wt-line);
    border-radius: var(--ua-border-radius);
    text-decoration: none;
    color: var(--wt-ink);
    transition: border-color var(--wt-transition), box-shadow var(--wt-transition),
        transform var(--wt-transition);
}

.wt-home .wt-quicklinks .nav-card:hover {
    border-color: var(--wt-primary);
    box-shadow: var(--wt-shadow-elevated);
    transform: translateY(-3px);
}

.wt-home .wt-quicklinks .nav-card h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.35rem;
    color: var(--wt-ink);
}

/* Das Symbol stand frueher klein vor der Ueberschrift und war dort eher
   Dekoration. Auf eigener Zeile und in dieser Groesse traegt es die Kachel:
   man erkennt sie am Zeichen, bevor man die Zeile liest. */
.wt-home .wt-quicklinks .wt-quicklink-icon {
    display: block;
    font-size: 1.9rem;
    line-height: 1;
    color: var(--wt-primary);
    margin-bottom: 0.15rem;
}

/* Font Awesome ersetzt das <i> per JavaScript durch ein <svg>. Dessen Hoehe
   deckelt `base.scss` shopweit mit `.svg-inline--fa { height: 1rem !important }`
   — ohne Gegenwehr bliebe das Zeichen bei 16px, egal welche Schriftgroesse die
   Kachel setzt. Das !important hier ist die Antwort darauf und gilt nur fuer
   diese vier Kacheln; die shopweite Regel bleibt unangetastet.

   Faellt das JavaScript aus, steht dort das Webfont-<i> — das folgt der
   font-size des Elternelements und braucht diese Regel nicht. */
.wt-home .wt-quicklinks .wt-quicklink-icon .svg-inline--fa {
    height: 1.9rem !important;
    width: auto;
}

.wt-home .wt-quicklinks .nav-card p {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--wt-ink-2);
    margin: 0;
}

.wt-home .wt-quicklinks .card-content {
    flex: 1 1 auto;
}

/* Die Kachel endet mit einer benannten Handlung statt mit einem stummen
   Klickziel — man sieht vor dem Klick, wohin es geht. Der Pfeil rueckt beim
   Ueberfahren nach, die Farbe traegt die Aussage schon vorher. */
.wt-home .wt-quicklink-action {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wt-primary);
}

.wt-home .wt-quicklink-action i,
.wt-home .wt-quicklink-action .svg-inline--fa {
    font-size: 0.62rem;
    transition: transform var(--wt-transition);
}

.wt-home .wt-quicklinks .nav-card:hover .wt-quicklink-action i,
.wt-home .wt-quicklinks .nav-card:hover .wt-quicklink-action .svg-inline--fa {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .wt-home .wt-quicklink-action i,
    .wt-home .wt-quicklink-action .svg-inline--fa {
        transition: none;
    }
}

/* --- 5. Sortimentssäulen ------------------------------------------------ */

.wt-home .wt-pillar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 1.25rem;
}

.wt-home .wt-pillar {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--ua-border-radius);
    padding: 2rem 1.75rem;
    min-height: 290px;
    box-shadow: var(--wt-shadow-lift);
    text-decoration: none;
    overflow: hidden;
    transition: transform var(--wt-transition), box-shadow var(--wt-transition), border-color var(--wt-transition);
}

.wt-home .wt-pillar-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.wt-home .wt-pillar-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
    filter: brightness(0.6) saturate(0.9);
}

.wt-home .wt-pillar-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(15, 23, 42, 0.72) 0%,
        rgba(15, 23, 42, 0.84) 55%,
        rgba(15, 23, 42, 0.96) 100%
    );
    transition: background 0.4s ease;
}

.wt-home .wt-pillar:hover {
    transform: translateY(-4px);
    box-shadow: var(--wt-shadow-lift), 0 0 0 1px var(--rail), 0 16px 32px -8px rgba(0, 0, 0, 0.5);
    border-color: var(--rail);
}

.wt-home .wt-pillar:hover .wt-pillar-bg img {
    transform: scale(1.08);
    filter: brightness(0.38) saturate(1.15);
}

.wt-home .wt-pillar:hover .wt-pillar-bg::after {
    background: linear-gradient(
        180deg,
        rgba(10, 15, 30, 0.85) 0%,
        rgba(10, 15, 30, 0.92) 50%,
        rgba(10, 15, 30, 0.98) 100%
    );
}

.wt-home .wt-pillar-count {
    position: relative;
    z-index: 1;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    transition: color var(--wt-transition);
}

.wt-home .wt-pillar:hover .wt-pillar-count {
    color: #ffffff;
}

.wt-home .wt-pillar-title {
    position: relative;
    z-index: 1;
    font-weight: 700;
    font-size: 1.45rem;
    letter-spacing: 0.01em;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    transition: color var(--wt-transition), text-shadow var(--wt-transition);
}

.wt-home .wt-pillar:hover .wt-pillar-title {
    color: #ffffff;
    text-shadow: 0 0 16px var(--rail), 0 2px 8px rgba(0, 0, 0, 0.9);
}

.wt-home .wt-pillar p {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.95rem;
    line-height: 1.5;
    flex: 1 1 auto;
    margin: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    transition: color var(--wt-transition), text-shadow var(--wt-transition);
}

.wt-home .wt-pillar:hover p {
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.wt-home .wt-pillar-go {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 0.5rem;
    transition: color var(--wt-transition);
}

.wt-home .wt-pillar-go svg {
    transition: transform var(--wt-transition);
}

.wt-home .wt-pillar:hover .wt-pillar-go {
    color: #ffffff;
}

.wt-home .wt-pillar:hover .wt-pillar-go svg {
    transform: translateX(5px);
}

/* --- 6. Leistungen ------------------------------------------------------ */

.wt-home .wt-usp-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

/* 1px gap auf gefaerbtem Grund erzeugt die Trennlinien.

   Alle sechs Leistungen in einer Zeile. Mit auto-fit standen vorher fuenf in
   der ersten Reihe und eine allein in der zweiten. Eine Zeile heisst schmale
   Spalten, deshalb hat die Kachel darunter weniger Polster und etwas kleinere
   Schrift — ab 1400px wird umgebrochen. */
.wt-home .wt-usp-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1px;
    background: var(--wt-line);
    border: 1px solid var(--wt-line);
    border-radius: var(--ua-border-radius);
    overflow: hidden;
}

.wt-home .wt-usp-item {
    background: var(--wt-surface);
    padding: 2rem 0.95rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    transition: background var(--wt-transition);
}

.wt-home .wt-usp-item:hover {
    background: var(--wt-primary-tint);
}

/* Wie in den Schnellzugriffen: das Zeichen steht mittig ueber der Ueberschrift
   und traegt die Kachel, statt klein davor zu stehen. Etwas groesser als dort
   (1.9rem), weil dies gezeichnete Konturen sind und keine gefuellten Glyphen —
   bei gleicher Hoehe wirken sie sonst leichter. */
.wt-home .wt-usp-item svg {
    width: 2.1rem;
    height: 2.1rem;
    color: var(--wt-primary);
    margin-bottom: 0.35rem;
}

.wt-home .wt-usp-item h3 {
    font-size: 0.94rem;
    font-weight: 600;
    margin: 0;
    color: var(--wt-ink);
    text-wrap: balance;
}

.wt-home .wt-usp-item p {
    color: var(--wt-ink-2);
    font-size: 0.82rem;
    line-height: 1.5;
    margin: 0;
}

/* --- 8. Über EPS -------------------------------------------------------- */

.wt-home .wt-about {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.wt-home .wt-about-copy {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    align-items: flex-start;
}

/* Bei drei Kennzahlen genuegte eine Flex-Zeile. Bei sechs braucht es ein
   Raster: sonst richtet sich die zweite Reihe an der Textbreite der ersten aus
   und die Zahlen stehen versetzt untereinander. .wt-about-copy setzt
   align-items: flex-start, deshalb muss das Raster die Breite ausdruecklich
   einfordern. */
.wt-home .wt-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem 2.5rem;
    padding-top: 0.5rem;
    align-self: stretch;
}

/* Das Plus soll neben der Zahl stehen, nicht darueber. Es ist kleiner gesetzt
   und sitzt damit auf der Grundlinie zu tief — die Verschiebung hebt es auf die
   optische Mitte der Ziffern. */
.wt-home .wt-stat-plus {
    font-size: 0.62em;
    vertical-align: 0.14em;
    margin-left: 0.04em;
}

.wt-home .wt-stat-n {
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--wt-primary);
    font-variant-numeric: tabular-nums;
}

.wt-home .wt-stat-l {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wt-ink-3);
    margin-top: 0.35rem;
}

.wt-home .wt-about-media {
    margin: 0;
    border-radius: var(--ua-border-radius);
    overflow: hidden;
    box-shadow: var(--wt-shadow-elevated);
    border: 1px solid var(--wt-line);
}

.wt-home .wt-about-media img {
    width: 100%;
    height: auto;
    display: block;
}

.wt-home .wt-apps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.25rem;
}

.wt-home .wt-apps figure {
    margin: 0;
    background: var(--wt-surface);
    border: 1px solid var(--wt-line);
    border-radius: var(--wt-radius-in);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.wt-home .wt-apps img {
    width: 100%;
    height: auto;
    display: block;
}

.wt-home .wt-apps figcaption {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wt-ink-3);
    text-align: center;
}

/* --- 9. Hersteller ------------------------------------------------------ */

/* Hintergrundbild siehe Abschnitt 1 — geteilt mit dem Saeulen-::before. */
.wt-home .cms-block.wt-s-brands {
    position: relative;
}

.wt-home .wt-logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 1px;
    background: var(--wt-line);
    border: 1px solid var(--wt-line);
    border-radius: var(--ua-border-radius);
    overflow: hidden;
}

.wt-home .wt-logo {
    background: var(--wt-surface);
    min-height: 11rem;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.65rem;
    text-decoration: none;
    padding: 1.5rem 1rem;
    transition: background var(--wt-transition);
}

.wt-home .wt-logo:hover {
    background: var(--wt-primary-tint);
}

/* Entsaettigt als ein Raster; Farbe beim Hover.
   Eine Marke wird am Zeichen erkannt, nicht gelesen — die Logos stehen deshalb
   gross. max-width begrenzt zusaetzlich, weil die Logos sehr unterschiedlich
   proportioniert sind und ein breiter Schriftzug die Kachel sonst allein
   fuellt. */
.wt-home .wt-logo img {
    max-height: 4.5rem;
    max-width: 82%;
    width: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.72;
    transition: filter var(--wt-transition), opacity var(--wt-transition),
        transform var(--wt-transition);
}

.wt-home .wt-logo:hover img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.04);
}

/* Rueckfallebene, wenn kein Logo hinterlegt ist oder die Datei fehlt. */
.wt-home .wt-logo-mark {
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.1;
    text-align: center;
    color: var(--wt-ink-3);
    transition: color var(--wt-transition);
}

.wt-home .wt-logo:hover .wt-logo-mark {
    color: var(--wt-primary);
}

.wt-home .wt-logo-cat {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wt-ink-3);
}

/* --- 9b. Hersteller-Reiter ----------------------------------------------- */

/* Reine CSS-Reiter: die Radios stehen als erste Kinder, die Panels dahinter,
   verbunden ueber den Geschwister-Selektor. Kein :has() — faellt das aus,
   waere sonst gar kein Panel sichtbar. */
.wt-home .wt-brand-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.wt-home .wt-brand-panel {
    display: none;
}

.wt-home #wt-brand-0:checked ~ .wt-brand-panels > .wt-brand-panel:nth-child(1) {
    display: block;
}

.wt-home #wt-brand-0:checked ~ .wt-logos > .wt-logo:nth-child(1) {
    background: var(--wt-surface);
    box-shadow: inset 0 -3px 0 var(--wt-primary);
}

.wt-home #wt-brand-0:checked ~ .wt-logos > .wt-logo:nth-child(1) img {
    filter: grayscale(0);
    opacity: 1;
}

.wt-home #wt-brand-0:checked ~ .wt-logos > .wt-logo:nth-child(1) .wt-logo-cat {
    color: var(--wt-primary);
}

.wt-home #wt-brand-0:focus-visible ~ .wt-logos > .wt-logo:nth-child(1) {
    outline: 3px solid var(--wt-primary);
    outline-offset: -3px;
}

.wt-home #wt-brand-1:checked ~ .wt-brand-panels > .wt-brand-panel:nth-child(2) {
    display: block;
}

.wt-home #wt-brand-1:checked ~ .wt-logos > .wt-logo:nth-child(2) {
    background: var(--wt-surface);
    box-shadow: inset 0 -3px 0 var(--wt-primary);
}

.wt-home #wt-brand-1:checked ~ .wt-logos > .wt-logo:nth-child(2) img {
    filter: grayscale(0);
    opacity: 1;
}

.wt-home #wt-brand-1:checked ~ .wt-logos > .wt-logo:nth-child(2) .wt-logo-cat {
    color: var(--wt-primary);
}

.wt-home #wt-brand-1:focus-visible ~ .wt-logos > .wt-logo:nth-child(2) {
    outline: 3px solid var(--wt-primary);
    outline-offset: -3px;
}

.wt-home #wt-brand-2:checked ~ .wt-brand-panels > .wt-brand-panel:nth-child(3) {
    display: block;
}

.wt-home #wt-brand-2:checked ~ .wt-logos > .wt-logo:nth-child(3) {
    background: var(--wt-surface);
    box-shadow: inset 0 -3px 0 var(--wt-primary);
}

.wt-home #wt-brand-2:checked ~ .wt-logos > .wt-logo:nth-child(3) img {
    filter: grayscale(0);
    opacity: 1;
}

.wt-home #wt-brand-2:checked ~ .wt-logos > .wt-logo:nth-child(3) .wt-logo-cat {
    color: var(--wt-primary);
}

.wt-home #wt-brand-2:focus-visible ~ .wt-logos > .wt-logo:nth-child(3) {
    outline: 3px solid var(--wt-primary);
    outline-offset: -3px;
}

.wt-home #wt-brand-3:checked ~ .wt-brand-panels > .wt-brand-panel:nth-child(4) {
    display: block;
}

.wt-home #wt-brand-3:checked ~ .wt-logos > .wt-logo:nth-child(4) {
    background: var(--wt-surface);
    box-shadow: inset 0 -3px 0 var(--wt-primary);
}

.wt-home #wt-brand-3:checked ~ .wt-logos > .wt-logo:nth-child(4) img {
    filter: grayscale(0);
    opacity: 1;
}

.wt-home #wt-brand-3:checked ~ .wt-logos > .wt-logo:nth-child(4) .wt-logo-cat {
    color: var(--wt-primary);
}

.wt-home #wt-brand-3:focus-visible ~ .wt-logos > .wt-logo:nth-child(4) {
    outline: 3px solid var(--wt-primary);
    outline-offset: -3px;
}

.wt-home #wt-brand-4:checked ~ .wt-brand-panels > .wt-brand-panel:nth-child(5) {
    display: block;
}

.wt-home #wt-brand-4:checked ~ .wt-logos > .wt-logo:nth-child(5) {
    background: var(--wt-surface);
    box-shadow: inset 0 -3px 0 var(--wt-primary);
}

.wt-home #wt-brand-4:checked ~ .wt-logos > .wt-logo:nth-child(5) img {
    filter: grayscale(0);
    opacity: 1;
}

.wt-home #wt-brand-4:checked ~ .wt-logos > .wt-logo:nth-child(5) .wt-logo-cat {
    color: var(--wt-primary);
}

.wt-home #wt-brand-4:focus-visible ~ .wt-logos > .wt-logo:nth-child(5) {
    outline: 3px solid var(--wt-primary);
    outline-offset: -3px;
}

.wt-home #wt-brand-5:checked ~ .wt-brand-panels > .wt-brand-panel:nth-child(6) {
    display: block;
}

.wt-home #wt-brand-5:checked ~ .wt-logos > .wt-logo:nth-child(6) {
    background: var(--wt-surface);
    box-shadow: inset 0 -3px 0 var(--wt-primary);
}

.wt-home #wt-brand-5:checked ~ .wt-logos > .wt-logo:nth-child(6) img {
    filter: grayscale(0);
    opacity: 1;
}

.wt-home #wt-brand-5:checked ~ .wt-logos > .wt-logo:nth-child(6) .wt-logo-cat {
    color: var(--wt-primary);
}

.wt-home #wt-brand-5:focus-visible ~ .wt-logos > .wt-logo:nth-child(6) {
    outline: 3px solid var(--wt-primary);
    outline-offset: -3px;
}

/* Logos sind jetzt Reiter, keine Links — der Zeiger muss das zeigen. */
.wt-home .wt-logos label.wt-logo {
    cursor: pointer;
}

/* Chip-Zeile: innerhalb der gewaehlten Marke weiter eingrenzen.
   Auf Rueckmeldung des Inhabers (August 2026) — erst die Marke, dann das
   System. Welche Eigenschaftsgruppe je Marke greift, steht im Block. */
.wt-home .wt-brand-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 1.5rem 0 0.25rem;
}

.wt-home .wt-brand-filter-label {
    margin-right: 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wt-ink-3);
}

.wt-home .wt-chip {
    border: 1px solid var(--wt-line);
    background: var(--wt-surface);
    color: var(--wt-ink-2);
    border-radius: 50px;
    padding: 0.42rem 0.95rem;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background var(--wt-transition), border-color var(--wt-transition),
                color var(--wt-transition);
}

.wt-home .wt-chip:hover {
    border-color: var(--wt-line-2);
    background: var(--wt-bg-hover, #f8f9fc);
    color: var(--wt-ink);
}

.wt-home .wt-chip:focus-visible {
    outline: 3px solid var(--wt-primary);
    outline-offset: 2px;
}

/* Aktiv nach der Klasse, nicht nach :focus — die Auswahl bleibt stehen,
   auch wenn der Fokus weiterwandert. */
.wt-home .wt-chip.is-active {
    border-color: var(--wt-primary);
    background: var(--wt-primary);
    color: #fff;
    font-weight: 600;
}

/* --- Bestseller-Kacheln --------------------------------------------------- */

/* Bewusst leicht: Bild, Name, Artikelnummer. Kein Preis und kein Warenkorb —
   Begruendung im Block. */
.wt-home .wt-bs-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.wt-home .wt-bs-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: var(--wt-surface);
    border: 1px solid var(--wt-line);
    border-radius: var(--ua-border-radius);
    padding: 1rem;
    text-decoration: none;
    transition: border-color var(--wt-transition), box-shadow var(--wt-transition),
        transform var(--wt-transition);
}

.wt-home .wt-bs-card:hover {
    border-color: var(--wt-primary);
    box-shadow: var(--wt-shadow-minimal), 0 0 0 1px var(--wt-primary);
    transform: translateY(-2px);
}

/* Feste Hoehe, damit die Kacheln trotz unterschiedlicher Bildformate in einer
   Reihe stehen.

   Flex, nicht Grid: bei display: grid loest max-height: 100% am Bild gegen die
   automatisch hohe Zeile auf, nicht gegen diese 9rem — hohe Bilder liefen
   dadurch aus der Kachel heraus. overflow: hidden faengt Restfaelle ab. */
.wt-home .wt-bs-img {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 9rem;
    overflow: hidden;
}

.wt-home .wt-bs-img img {
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    width: auto;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* Ladezustand: gleiche Masse wie eine Kachel, damit das Panel beim Eintreffen
   der Antwort nicht springt. */
.wt-home .wt-bs-skeleton {
    height: 15.5rem;
    background: linear-gradient(90deg, var(--wt-surface) 0%, var(--wt-surface-2) 50%, var(--wt-surface) 100%);
    background-size: 200% 100%;
    animation: wt-bs-shimmer 1.2s ease-in-out infinite;
    border-color: var(--wt-line);
    pointer-events: none;
}

@keyframes wt-bs-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .wt-home .wt-bs-skeleton {
        animation: none;
    }
}

.wt-home .wt-bs-error {
    margin: 2rem 0 0;
    text-align: center;
    color: var(--wt-ink-2);
    font-size: 0.9rem;
}

/* Platzhalter statt kaputtem Bildsymbol, wenn die Mediendatei fehlt. */
.wt-home .wt-bs-noimg {
    width: 100%;
    height: 100%;
    border-radius: var(--wt-radius-in);
    background:
        repeating-linear-gradient(45deg, var(--wt-surface-2) 0 8px, transparent 8px 16px),
        var(--wt-ground);
}

/* Drei Zeilen Name, dann Ellipse — sonst wachsen die Kacheln auseinander. */
.wt-home .wt-bs-name {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--wt-ink);
}

/* Preisschild oben im Bild. Sitzt in .wt-bs-img (position: relative) und wird
   von dessen overflow: hidden mitgeschnitten — die Ecken bleiben sauber. */
.wt-home .wt-bs-price {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: inline-flex;
    align-items: baseline;
    gap: 0.28rem;
    max-width: calc(100% - 1rem);
    padding: 0.3rem 0.6rem;
    border-radius: 50px;
    background: var(--wt-primary);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: var(--wt-shadow-subtle);
}

.wt-home .wt-bs-price-from {
    font-size: 0.64rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
}

/* Der Nettohinweis ist auf ein Sternchen zusammengezogen. Es haengt am Betrag
   statt als eigenes Wort daneben zu stehen, deshalb nimmt margin-left die
   0.28rem der Zeile wieder zurueck. Die Groesse bleibt beim Preis: ein
   Sternchen fuellt ohnehin nur den oberen Teil der Zeile, bei den 0.64rem des
   "ab" waere es auf dem Schild kaum zu sehen. */
.wt-home .wt-bs-price-note {
    margin-left: -0.28rem;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, 0.85);
}

/* Nummer schiebt sich nach unten, damit sie ueber alle Kacheln hinweg auf
   gleicher Hoehe sitzt, auch bei kurzen Namen. */
.wt-home .wt-bs-nr {
    margin-top: auto;
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    color: var(--wt-ink-3);
}
/* --- 10. Fachinformationen ---------------------------------------------- */

/* Das Lagerfoto ist hell und unruhig — Deckenleuchten, helle Kartons, weisse
   Regalboeden. Weisse Schrift stand darauf stellenweise auf reinem Weiss
   (gemessen: Kontrast 1,00:1 hinter der H2). Der Verlauf daempft oben stark,
   wo Eyebrow und Ueberschrift liegen, und laesst das Foto unten stehen —
   dort tragen die Glasflaechen die Lesbarkeit selbst.

   Gemessen nach dem Einbau: H2 6,30:1, Fliesstext 9,50:1. */
.wt-home .cms-block.wt-s-seo {
    position: relative;
    background-image:
        linear-gradient(to bottom,
            rgba(11, 17, 32, 0.78) 0%,
            rgba(11, 17, 32, 0.62) 18%,
            rgba(11, 17, 32, 0.34) 42%,
            rgba(11, 17, 32, 0.34) 100%),
        url('/bundles/wttemplate/home/section-background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #ffffff;
}

.wt-home .cms-block.wt-s-seo .wt-eyebrow {
    color: var(--wt-primary-bright, #60a5fa);
}

.wt-home .cms-block.wt-s-seo .wt-display {
    color: #ffffff;
}

.wt-home .wt-prose {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: clamp(2rem, 5vw, 4rem);
}

/* Gleiche Glasflaeche wie .wt-prose-aside — der Fliesstext stand vorher ohne
   jede Unterlage auf dem Foto. Faellt `backdrop-filter` aus, bleibt die
   Grundfarbe stehen; lesbar ist es auch dann.

   max-width traegt weiter die Zeilenlaenge: 68ch bleibt der Text, die 4rem
   sind das Polster links und rechts. */
.wt-home .wt-prose-body {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    max-width: calc(68ch + 4rem);
    padding: 2rem;
    background: rgba(15, 23, 42, 0.72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--ua-border-radius);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.wt-home .wt-prose-body h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: #ffffff;
}

.wt-home .wt-prose-body p {
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    line-height: 1.65;
}

.wt-home .wt-prose-aside {
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--ua-border-radius);
    padding: 2rem;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.wt-home .wt-prose-aside .wt-eyebrow {
    color: #ffffff;
}

.wt-home .wt-prose-aside ul {
    margin: 0;
    padding-left: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
}

.wt-home .wt-prose-aside li {
    margin-bottom: 0.6rem;
    line-height: 1.45;
}

.wt-home .wt-prose-aside .wt-btn-ghost {
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.wt-home .wt-prose-aside .wt-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #ffffff;
    color: #ffffff;
}

/* --- 11. Mitgliedschaften ----------------------------------------------- */

/* Feste drei Spalten statt auto-fit: bei sechs Karten haette auto-fit auf
   breiten Schirmen vier gesetzt und zwei allein in die zweite Reihe geschoben.
   Drei und drei halten die beiden Arten von Partnerschaft zusammen. */
.wt-home .wt-assoc {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.wt-home .wt-assoc-card {
    background: var(--wt-surface);
    border: 1px solid var(--wt-line);
    border-radius: var(--ua-border-radius);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
    text-decoration: none;
    transition: border-color var(--wt-transition);
}

.wt-home .wt-assoc-card:hover {
    border-color: var(--wt-primary);
}

/* Feste Hoehe statt max-height: die Logos sind sehr unterschiedlich
   proportioniert, und ohne gemeinsame Hoehe stehen die Namen einer Reihe
   versetzt. object-position haelt sie am linken Rand wie den Text darunter. */
.wt-home .wt-assoc-logo {
    height: 2.75rem;
    max-width: 65%;
    width: auto;
    object-fit: contain;
    object-position: left center;
    margin-bottom: 0.25rem;
}

.wt-home .wt-assoc-kind {
    margin: 0;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wt-ink-3);
}

.wt-home .wt-assoc-card h3 {
    font-weight: 700;
    font-size: 1.1rem;
    margin: -0.4rem 0 0;
    color: var(--wt-ink);
}

.wt-home .wt-assoc-card p {
    color: var(--wt-ink-2);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

/* --- 11b. Zusagen-Leiste ueber dem Kopf ---------------------------------
   Der einzige Teil dieser Datei ausserhalb von `.wt-home`: die Leiste steht im
   Kopfbereich und damit ausserhalb des CMS-Inhalts. Das geht auf, weil
   wt-home.css nur auf `frontend.home.page` geladen wird (`layout/meta.html.twig`)
   — und genau dort steht auch die Leiste. Ausserhalb der Startseite existiert
   weder das Markup noch diese Regel. */

.wt-top-bar-usp .row {
    align-items: center;
}

/* Breite und Sichtbarkeit der mittleren Spalte stehen hier und nicht als
   `col-lg-6 d-none d-lg-block` im Markup: dieses Theme baut die responsiven
   Display-Utilities von Bootstrap nicht mit, `d-none` bliebe auf jeder Breite
   stehen. Unter 1024px ist die Leiste aus: darunter braucht die linke
   Linkspalte mehr Platz, als ihr bleibt, und „Schulungskalender" bricht um. */
.wt-usp-col {
    display: none;
}

@media screen and (min-width: 1024px) {
    .wt-usp-col {
        display: block;
        flex: 0 0 auto;
        width: 50%;
    }

    .wt-top-bar-usp .row > .col-6 {
        width: 25%;
    }
}

.wt-usp-strip {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.35rem 1.6rem;
}

.wt-usp-strip li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    /* Der Balken ist dunkel; die Schrift der Links daneben liegt bei ~0.8rem. */
    font-size: 0.78rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.78);
    white-space: nowrap;
}

.wt-usp-strip li b {
    font-weight: 600;
    color: #ffffff;
}

/* Der Haken traegt die Aussage mit, deshalb etwas Farbe statt Weiss auf Weiss. */
.wt-usp-strip svg {
    width: 0.95rem;
    height: 0.95rem;
    flex: none;
    color: #7ea2ff;
}

/* Unter 1400px reicht die halbe Leiste fuer drei Zusagen nicht mehr. Der Mitte
   mehr Breite zu geben half nicht: dann brachen stattdessen die Links daneben
   um, und der Balken wurde so oder so 20px hoeher. Deshalb steht hier die
   dritte Zusage nicht — „45 Jahre" steht ohnehin noch einmal gross im
   Unternehmensabschnitt, „nur an Errichter" und die Verfuegbarkeit nirgends
   sonst so weit oben. */
@media screen and (min-width: 1024px) and (max-width: 1399.98px) {
    /* Zwischen den beiden Links stehen shopweit 50px. In der schmaleren
       Linkspalte brach „Schulungskalender" damit um und machte den Balken
       20px hoeher als die Zusagen daneben. Nur auf der Startseite enger.

       `.header-main` gehoert dazu: die shopweite Regel steht als
       `.header-main .wt-top-bar .link-items-container` in der Theme-Datei und
       waere sonst spezifischer als diese hier. */
    .header-main .wt-top-bar-usp .link-items-container {
        gap: 22px;
        font-size: 13px;
    }

    .wt-usp-strip {
        gap: 0.3rem 1.1rem;
    }

    .wt-usp-strip li {
        font-size: 0.72rem;
    }

    .wt-usp-strip li:nth-child(3) {
        display: none;
    }

    .wt-usp-strip svg {
        width: 0.85rem;
        height: 0.85rem;
    }
}

/* --- 12. Newsletter / Kontakt ------------------------------------------- */

.wt-home .wt-close {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 1.25rem;
}

.wt-home .wt-close-card {
    border-radius: var(--ua-border-radius);
    padding: clamp(1.75rem, 3.5vw, 2.75rem);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    align-items: flex-start;
}

.wt-home .wt-close-brand {
    background: var(--wt-primary);
    color: #fff;
}

.wt-home .wt-close-brand .wt-display,
.wt-home .wt-close-brand .wt-eyebrow {
    color: #fff;
}

.wt-home .wt-close-brand .wt-eyebrow {
    opacity: 0.75;
}

.wt-home .wt-close-brand .wt-lede {
    color: rgba(255, 255, 255, 0.82);
}

.wt-home .wt-close-card .wt-display {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.wt-home .wt-close-plain {
    background: var(--wt-surface);
    border: 1px solid var(--wt-line);
}

.wt-home .wt-nl-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    width: 100%;
}

.wt-home .wt-nl-form input {
    flex: 1 1 12rem;
    min-width: 0;
    border: 1px solid transparent;
    background: #fff;
    color: var(--wt-ink);
    border-radius: 50px;
    padding: 0.8rem 1.25rem;
    font: inherit;
    font-size: 0.95rem;
}

.wt-home .wt-nl-form input:focus {
    outline: none;
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}

.wt-home .wt-contact-rows {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    width: 100%;
}

.wt-home .wt-contact-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.95rem;
    color: var(--wt-ink-2);
}

.wt-home .wt-contact-row svg {
    color: var(--wt-primary);
    flex: none;
}

.wt-home .wt-contact-row a {
    color: inherit;
    text-decoration: none;
}

.wt-home .wt-contact-row a:hover {
    color: var(--wt-primary);
    text-decoration: underline;
}

/* Durchwahl-Kennzeichnung. */
.wt-home .wt-contact-tag {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wt-ink-3);
    background: var(--wt-surface-2);
    border-radius: 50px;
    padding: 0.15rem 0.6rem;
    white-space: nowrap;
}

.wt-home .wt-contact-row a[href^="tel:"] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--wt-ink);
}

/* Kundenbereich-Widget entfernt: der wt-s-customer-Block ist nicht mehr Teil der Seite. */

/* --- 13. Ansprechpartner-Karte ------------------------------------------ */

/* PLZ-Leitzonen, aus der EPS-Referenzkarte nachgezeichnet (echte Grenzen,
   siehe docs/homepage/trace-plz-map.py). Die Interaktion ist reines CSS:
   :has() prueft, ob eine Zone ueberfahren oder fokussiert ist, und daempft
   alle Karten ausser den Betreuern dieser Zone. Kein JavaScript, also auch
   kein Storefront-Build noetig. */
.wt-home .wt-map-sec {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.wt-home .wt-map {
    width: 100%;
    height: auto;
    display: block;
}

.wt-home .wt-map-zone path {
    fill: #ccd5e8;
    stroke: var(--wt-surface);
    stroke-width: 2.5;
    stroke-linejoin: round;
    transition: fill var(--wt-transition);
}

/* Groessen in viewBox-Einheiten (591x800), nicht in px der Seite. */
.wt-home .wt-map-zone text {
    font-size: 40px;
    font-weight: 700;
    fill: var(--wt-primary);
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
    user-select: none;
}

/* tabindex macht die Gruppe fokussierbar — ohne das waere die Karte auf
   Touch und per Tastatur wirkungslos. */
.wt-home .wt-map-zone {
    cursor: pointer;
    outline: none;
}

.wt-home .wt-map-zone:hover path,
.wt-home .wt-map-zone:focus-visible path {
    fill: var(--wt-primary);
}

.wt-home .wt-map-zone:hover text,
.wt-home .wt-map-zone:focus-visible text {
    fill: #fff;
}

.wt-home .wt-map-zone:focus-visible path {
    stroke: var(--wt-ink);
}

.wt-home .wt-map-hint {
    margin: 1rem 0 0;
    font-size: 0.8rem;
    color: var(--wt-ink-3);
}

/* --- Betreuer als Karten -------------------------------------------------- */

/* Feste Dreierreihe. Vorher auto-fit — da haing die Anzahl an der Fensterbreite
   und sprang je nach Schirm zwischen zwei und vier. */
.wt-home .wt-mgr-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.wt-home .wt-mgr {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    background: var(--wt-surface);
    border: 1px solid var(--wt-line);
    border-radius: var(--ua-border-radius);
    padding: 1.25rem;
    transition: opacity var(--wt-transition), box-shadow var(--wt-transition),
        border-color var(--wt-transition), transform var(--wt-transition);
}

.wt-home .wt-mgr-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

/* Ohne min-width: 0 sprengt ein langer Name die Spalte, statt umzubrechen. */
.wt-home .wt-mgr-head > div {
    min-width: 0;
}

.wt-home .wt-mgr-photo {
    flex: none;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    background: var(--wt-surface-2);
}

/* Rueckfallebene ohne Foto: Kuerzel im Kreis. */
.wt-home .wt-mgr-initials {
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--wt-primary);
}

.wt-home .wt-mgr h3 {
    font-size: 1.02rem;
    font-weight: 700;
    margin: 0;
    color: var(--wt-ink);
}

.wt-home .wt-mgr-area {
    margin: 0.15rem 0 0;
    font-size: 0.82rem;
    color: var(--wt-ink-2);
}

.wt-home .wt-mgr-zones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0;
}

.wt-home .wt-mgr-chip {
    display: inline-grid;
    place-items: center;
    min-width: 1.65rem;
    height: 1.65rem;
    padding-inline: 0.4rem;
    border-radius: 50px;
    background: var(--wt-surface-2);
    color: var(--wt-primary);
    font-size: 0.78rem;
    font-weight: 700;
}

.wt-home .wt-mgr-chip-wide {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}

/* margin-top: auto haelt die Kontaktzeilen auf gleicher Hoehe, auch wenn ein
   Name ueber zwei Zeilen laeuft. */
.wt-home .wt-mgr-links {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: auto;
}

.wt-home .wt-mgr-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: var(--wt-ink-2);
    text-decoration: none;
    word-break: break-word;
}

.wt-home .wt-mgr-links a:hover {
    color: var(--wt-primary);
}

.wt-home .wt-mgr-links svg {
    flex: none;
    opacity: 0.55;
}

/* Karte ueberfahren -> dieselbe Hervorhebung, die auch das Ueberfahren der
   passenden Zone ausloest. Bisher reagierte in dieser Richtung nur die
   Landkarte: die Zonen faerbten sich ein, die Karte unter dem Zeiger blieb
   unveraendert und wirkte tot.

   `:focus-within` deckt die Tastatur ab — in jeder Karte stehen Telefon- und
   Mail-Links, der Fokus landet also ohnehin darin. Dieselbe Doppelung wie bei
   den Zonen (`:hover` und `:focus-visible`).

   Die Deckkraft bleibt bewusst unberuehrt: eine per PLZ oder Zone gedaempfte
   Karte soll gedaempft bleiben — beide Regeln sind spezifischer und gewinnen
   ohnehin. Hier steht nur "der Zeiger ist hier". */
.wt-home .wt-mgr:hover,
.wt-home .wt-mgr:focus-within {
    border-color: var(--wt-primary);
    box-shadow: var(--wt-shadow-minimal), 0 0 0 1px var(--wt-primary);
    transform: translateY(-2px);
}

/* --- PLZ-Feld: dieselbe Hervorhebung wie Hover, aber bleibend -------------- */

.wt-home .wt-plz {
    margin-bottom: 1.25rem;
}

.wt-home .wt-plz-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wt-ink-3);
    margin-bottom: 0.4rem;
}

.wt-home .wt-plz-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--wt-surface);
    border: 1px solid var(--wt-line);
    border-radius: 50px;
    padding: 0.25rem 0.4rem 0.25rem 1rem;
    transition: border-color var(--wt-transition), box-shadow var(--wt-transition);
}

.wt-home .wt-plz-row:focus-within {
    border-color: var(--wt-primary);
    box-shadow: 0 0 0 3px rgba(48, 66, 125, 0.1);
}

.wt-home .wt-plz-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.95rem;
    padding-block: 0.5rem;
    color: var(--wt-ink);
}

.wt-home .wt-plz-input:focus {
    outline: none;
}

.wt-home .wt-plz-clear {
    flex: none;
    width: 1.9rem;
    height: 1.9rem;
    border: 0;
    border-radius: 50%;
    background: var(--wt-surface-2);
    color: var(--wt-ink-2);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.wt-home .wt-plz-clear:hover {
    background: var(--wt-primary);
    color: #fff;
}

.wt-home .wt-plz-result:empty {
    display: none;
}

.wt-home .wt-plz-result {
    margin: 0.6rem 0 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--wt-primary);
}

/* Ausgewaehlte Zone. Bewusst vor den Hover-Regeln: beide sind gleich
   spezifisch, es entscheidet die Reihenfolge — wer gerade eine andere Zone
   ueberfaehrt, sieht diese, die Auswahl kommt danach zurueck. */
.wt-home .wt-map-sec[data-active-zone="0"] .wt-mgr:not([data-z~="0"]) {
    opacity: 0.32;
}

.wt-home .wt-map-sec[data-active-zone="0"] .wt-mgr[data-z~="0"] {
    border-color: var(--wt-primary);
    box-shadow: var(--wt-shadow-minimal), 0 0 0 1px var(--wt-primary);
}

.wt-home .wt-map-sec[data-active-zone="0"] #wt-z0 path {
    fill: var(--wt-primary);
}

.wt-home .wt-map-sec[data-active-zone="0"] #wt-z0 text {
    fill: #fff;
}

.wt-home .wt-map-sec[data-active-zone="1"] .wt-mgr:not([data-z~="1"]) {
    opacity: 0.32;
}

.wt-home .wt-map-sec[data-active-zone="1"] .wt-mgr[data-z~="1"] {
    border-color: var(--wt-primary);
    box-shadow: var(--wt-shadow-minimal), 0 0 0 1px var(--wt-primary);
}

.wt-home .wt-map-sec[data-active-zone="1"] #wt-z1 path {
    fill: var(--wt-primary);
}

.wt-home .wt-map-sec[data-active-zone="1"] #wt-z1 text {
    fill: #fff;
}

.wt-home .wt-map-sec[data-active-zone="2"] .wt-mgr:not([data-z~="2"]) {
    opacity: 0.32;
}

.wt-home .wt-map-sec[data-active-zone="2"] .wt-mgr[data-z~="2"] {
    border-color: var(--wt-primary);
    box-shadow: var(--wt-shadow-minimal), 0 0 0 1px var(--wt-primary);
}

.wt-home .wt-map-sec[data-active-zone="2"] #wt-z2 path {
    fill: var(--wt-primary);
}

.wt-home .wt-map-sec[data-active-zone="2"] #wt-z2 text {
    fill: #fff;
}

.wt-home .wt-map-sec[data-active-zone="3"] .wt-mgr:not([data-z~="3"]) {
    opacity: 0.32;
}

.wt-home .wt-map-sec[data-active-zone="3"] .wt-mgr[data-z~="3"] {
    border-color: var(--wt-primary);
    box-shadow: var(--wt-shadow-minimal), 0 0 0 1px var(--wt-primary);
}

.wt-home .wt-map-sec[data-active-zone="3"] #wt-z3 path {
    fill: var(--wt-primary);
}

.wt-home .wt-map-sec[data-active-zone="3"] #wt-z3 text {
    fill: #fff;
}

.wt-home .wt-map-sec[data-active-zone="4"] .wt-mgr:not([data-z~="4"]) {
    opacity: 0.32;
}

.wt-home .wt-map-sec[data-active-zone="4"] .wt-mgr[data-z~="4"] {
    border-color: var(--wt-primary);
    box-shadow: var(--wt-shadow-minimal), 0 0 0 1px var(--wt-primary);
}

.wt-home .wt-map-sec[data-active-zone="4"] #wt-z4 path {
    fill: var(--wt-primary);
}

.wt-home .wt-map-sec[data-active-zone="4"] #wt-z4 text {
    fill: #fff;
}

.wt-home .wt-map-sec[data-active-zone="5"] .wt-mgr:not([data-z~="5"]) {
    opacity: 0.32;
}

.wt-home .wt-map-sec[data-active-zone="5"] .wt-mgr[data-z~="5"] {
    border-color: var(--wt-primary);
    box-shadow: var(--wt-shadow-minimal), 0 0 0 1px var(--wt-primary);
}

.wt-home .wt-map-sec[data-active-zone="5"] #wt-z5 path {
    fill: var(--wt-primary);
}

.wt-home .wt-map-sec[data-active-zone="5"] #wt-z5 text {
    fill: #fff;
}

.wt-home .wt-map-sec[data-active-zone="6"] .wt-mgr:not([data-z~="6"]) {
    opacity: 0.32;
}

.wt-home .wt-map-sec[data-active-zone="6"] .wt-mgr[data-z~="6"] {
    border-color: var(--wt-primary);
    box-shadow: var(--wt-shadow-minimal), 0 0 0 1px var(--wt-primary);
}

.wt-home .wt-map-sec[data-active-zone="6"] #wt-z6 path {
    fill: var(--wt-primary);
}

.wt-home .wt-map-sec[data-active-zone="6"] #wt-z6 text {
    fill: #fff;
}

.wt-home .wt-map-sec[data-active-zone="7"] .wt-mgr:not([data-z~="7"]) {
    opacity: 0.32;
}

.wt-home .wt-map-sec[data-active-zone="7"] .wt-mgr[data-z~="7"] {
    border-color: var(--wt-primary);
    box-shadow: var(--wt-shadow-minimal), 0 0 0 1px var(--wt-primary);
}

.wt-home .wt-map-sec[data-active-zone="7"] #wt-z7 path {
    fill: var(--wt-primary);
}

.wt-home .wt-map-sec[data-active-zone="7"] #wt-z7 text {
    fill: #fff;
}

.wt-home .wt-map-sec[data-active-zone="8"] .wt-mgr:not([data-z~="8"]) {
    opacity: 0.32;
}

.wt-home .wt-map-sec[data-active-zone="8"] .wt-mgr[data-z~="8"] {
    border-color: var(--wt-primary);
    box-shadow: var(--wt-shadow-minimal), 0 0 0 1px var(--wt-primary);
}

.wt-home .wt-map-sec[data-active-zone="8"] #wt-z8 path {
    fill: var(--wt-primary);
}

.wt-home .wt-map-sec[data-active-zone="8"] #wt-z8 text {
    fill: #fff;
}

.wt-home .wt-map-sec[data-active-zone="9"] .wt-mgr:not([data-z~="9"]) {
    opacity: 0.32;
}

.wt-home .wt-map-sec[data-active-zone="9"] .wt-mgr[data-z~="9"] {
    border-color: var(--wt-primary);
    box-shadow: var(--wt-shadow-minimal), 0 0 0 1px var(--wt-primary);
}

.wt-home .wt-map-sec[data-active-zone="9"] #wt-z9 path {
    fill: var(--wt-primary);
}

.wt-home .wt-map-sec[data-active-zone="9"] #wt-z9 text {
    fill: #fff;
}

/* --- Zone ueberfahren -> Betreuer dieser Zone hervorheben ---------------- */

/* Alle Karten daempfen, sobald irgendeine Zone aktiv ist. Die Regel steht
   zuerst, die Treffer weiter unten heben sie wieder auf. */
.wt-home .wt-map-sec:has(.wt-map-zone:hover) .wt-mgr,
.wt-home .wt-map-sec:has(.wt-map-zone:focus-visible) .wt-mgr {
    opacity: 0.32;
}

.wt-home .wt-map-sec:has(#wt-z0:hover) .wt-mgr[data-z~="0"],
.wt-home .wt-map-sec:has(#wt-z0:focus-visible) .wt-mgr[data-z~="0"] {
    opacity: 1;
    border-color: var(--wt-primary);
    box-shadow: var(--wt-shadow-minimal), 0 0 0 1px var(--wt-primary);
    transform: translateY(-2px);
}

.wt-home .wt-map-sec:has(#wt-z1:hover) .wt-mgr[data-z~="1"],
.wt-home .wt-map-sec:has(#wt-z1:focus-visible) .wt-mgr[data-z~="1"] {
    opacity: 1;
    border-color: var(--wt-primary);
    box-shadow: var(--wt-shadow-minimal), 0 0 0 1px var(--wt-primary);
    transform: translateY(-2px);
}

.wt-home .wt-map-sec:has(#wt-z2:hover) .wt-mgr[data-z~="2"],
.wt-home .wt-map-sec:has(#wt-z2:focus-visible) .wt-mgr[data-z~="2"] {
    opacity: 1;
    border-color: var(--wt-primary);
    box-shadow: var(--wt-shadow-minimal), 0 0 0 1px var(--wt-primary);
    transform: translateY(-2px);
}

.wt-home .wt-map-sec:has(#wt-z3:hover) .wt-mgr[data-z~="3"],
.wt-home .wt-map-sec:has(#wt-z3:focus-visible) .wt-mgr[data-z~="3"] {
    opacity: 1;
    border-color: var(--wt-primary);
    box-shadow: var(--wt-shadow-minimal), 0 0 0 1px var(--wt-primary);
    transform: translateY(-2px);
}

.wt-home .wt-map-sec:has(#wt-z4:hover) .wt-mgr[data-z~="4"],
.wt-home .wt-map-sec:has(#wt-z4:focus-visible) .wt-mgr[data-z~="4"] {
    opacity: 1;
    border-color: var(--wt-primary);
    box-shadow: var(--wt-shadow-minimal), 0 0 0 1px var(--wt-primary);
    transform: translateY(-2px);
}

.wt-home .wt-map-sec:has(#wt-z5:hover) .wt-mgr[data-z~="5"],
.wt-home .wt-map-sec:has(#wt-z5:focus-visible) .wt-mgr[data-z~="5"] {
    opacity: 1;
    border-color: var(--wt-primary);
    box-shadow: var(--wt-shadow-minimal), 0 0 0 1px var(--wt-primary);
    transform: translateY(-2px);
}

.wt-home .wt-map-sec:has(#wt-z6:hover) .wt-mgr[data-z~="6"],
.wt-home .wt-map-sec:has(#wt-z6:focus-visible) .wt-mgr[data-z~="6"] {
    opacity: 1;
    border-color: var(--wt-primary);
    box-shadow: var(--wt-shadow-minimal), 0 0 0 1px var(--wt-primary);
    transform: translateY(-2px);
}

.wt-home .wt-map-sec:has(#wt-z7:hover) .wt-mgr[data-z~="7"],
.wt-home .wt-map-sec:has(#wt-z7:focus-visible) .wt-mgr[data-z~="7"] {
    opacity: 1;
    border-color: var(--wt-primary);
    box-shadow: var(--wt-shadow-minimal), 0 0 0 1px var(--wt-primary);
    transform: translateY(-2px);
}

.wt-home .wt-map-sec:has(#wt-z8:hover) .wt-mgr[data-z~="8"],
.wt-home .wt-map-sec:has(#wt-z8:focus-visible) .wt-mgr[data-z~="8"] {
    opacity: 1;
    border-color: var(--wt-primary);
    box-shadow: var(--wt-shadow-minimal), 0 0 0 1px var(--wt-primary);
    transform: translateY(-2px);
}

.wt-home .wt-map-sec:has(#wt-z9:hover) .wt-mgr[data-z~="9"],
.wt-home .wt-map-sec:has(#wt-z9:focus-visible) .wt-mgr[data-z~="9"] {
    opacity: 1;
    border-color: var(--wt-primary);
    box-shadow: var(--wt-shadow-minimal), 0 0 0 1px var(--wt-primary);
    transform: translateY(-2px);
}

/* --- Zeile ueberfahren -> zugehoerige Zonen einfaerben ------------------- */

.wt-home .wt-map-sec:has(.wt-mgr[data-z="1 2 3"]:hover) #wt-z1 path, .wt-home .wt-map-sec:has(.wt-mgr[data-z="1 2 3"]:hover) #wt-z2 path, .wt-home .wt-map-sec:has(.wt-mgr[data-z="1 2 3"]:hover) #wt-z3 path {
    fill: var(--wt-primary);
}

.wt-home .wt-map-sec:has(.wt-mgr[data-z="1 2 3"]:hover) #wt-z1 text, .wt-home .wt-map-sec:has(.wt-mgr[data-z="1 2 3"]:hover) #wt-z2 text, .wt-home .wt-map-sec:has(.wt-mgr[data-z="1 2 3"]:hover) #wt-z3 text {
    fill: #fff;
}

.wt-home .wt-map-sec:has(.wt-mgr[data-z="3 4 5"]:hover) #wt-z3 path, .wt-home .wt-map-sec:has(.wt-mgr[data-z="3 4 5"]:hover) #wt-z4 path, .wt-home .wt-map-sec:has(.wt-mgr[data-z="3 4 5"]:hover) #wt-z5 path {
    fill: var(--wt-primary);
}

.wt-home .wt-map-sec:has(.wt-mgr[data-z="3 4 5"]:hover) #wt-z3 text, .wt-home .wt-map-sec:has(.wt-mgr[data-z="3 4 5"]:hover) #wt-z4 text, .wt-home .wt-map-sec:has(.wt-mgr[data-z="3 4 5"]:hover) #wt-z5 text {
    fill: #fff;
}

.wt-home .wt-map-sec:has(.wt-mgr[data-z="3 5 6 7 9"]:hover) #wt-z3 path, .wt-home .wt-map-sec:has(.wt-mgr[data-z="3 5 6 7 9"]:hover) #wt-z5 path, .wt-home .wt-map-sec:has(.wt-mgr[data-z="3 5 6 7 9"]:hover) #wt-z6 path, .wt-home .wt-map-sec:has(.wt-mgr[data-z="3 5 6 7 9"]:hover) #wt-z7 path, .wt-home .wt-map-sec:has(.wt-mgr[data-z="3 5 6 7 9"]:hover) #wt-z9 path {
    fill: var(--wt-primary);
}

.wt-home .wt-map-sec:has(.wt-mgr[data-z="3 5 6 7 9"]:hover) #wt-z3 text, .wt-home .wt-map-sec:has(.wt-mgr[data-z="3 5 6 7 9"]:hover) #wt-z5 text, .wt-home .wt-map-sec:has(.wt-mgr[data-z="3 5 6 7 9"]:hover) #wt-z6 text, .wt-home .wt-map-sec:has(.wt-mgr[data-z="3 5 6 7 9"]:hover) #wt-z7 text, .wt-home .wt-map-sec:has(.wt-mgr[data-z="3 5 6 7 9"]:hover) #wt-z9 text {
    fill: #fff;
}

.wt-home .wt-map-sec:has(.wt-mgr[data-z="0 1 3 9"]:hover) #wt-z0 path, .wt-home .wt-map-sec:has(.wt-mgr[data-z="0 1 3 9"]:hover) #wt-z1 path, .wt-home .wt-map-sec:has(.wt-mgr[data-z="0 1 3 9"]:hover) #wt-z3 path, .wt-home .wt-map-sec:has(.wt-mgr[data-z="0 1 3 9"]:hover) #wt-z9 path {
    fill: var(--wt-primary);
}

.wt-home .wt-map-sec:has(.wt-mgr[data-z="0 1 3 9"]:hover) #wt-z0 text, .wt-home .wt-map-sec:has(.wt-mgr[data-z="0 1 3 9"]:hover) #wt-z1 text, .wt-home .wt-map-sec:has(.wt-mgr[data-z="0 1 3 9"]:hover) #wt-z3 text, .wt-home .wt-map-sec:has(.wt-mgr[data-z="0 1 3 9"]:hover) #wt-z9 text {
    fill: #fff;
}

.wt-home .wt-map-sec:has(.wt-mgr[data-z="7 8 9"]:hover) #wt-z7 path, .wt-home .wt-map-sec:has(.wt-mgr[data-z="7 8 9"]:hover) #wt-z8 path, .wt-home .wt-map-sec:has(.wt-mgr[data-z="7 8 9"]:hover) #wt-z9 path {
    fill: var(--wt-primary);
}

.wt-home .wt-map-sec:has(.wt-mgr[data-z="7 8 9"]:hover) #wt-z7 text, .wt-home .wt-map-sec:has(.wt-mgr[data-z="7 8 9"]:hover) #wt-z8 text, .wt-home .wt-map-sec:has(.wt-mgr[data-z="7 8 9"]:hover) #wt-z9 text {
    fill: #fff;
}

.wt-home .wt-map-sec:has(.wt-mgr[data-z="8"]:hover) #wt-z8 path {
    fill: var(--wt-primary);
}

.wt-home .wt-map-sec:has(.wt-mgr[data-z="8"]:hover) #wt-z8 text {
    fill: #fff;
}
/* --- 13b. Und dahinter das Haus ------------------------------------------

   Vier Abteilungskacheln unter den Betreuerkarten, im selben Abschnitt und
   deshalb ohne eigenen Grund — nur eine Trennlinie setzt sie ab.

   Feste vier Spalten ab 1400px. Mit `auto-fit` setzte der Browser drei in die
   erste Reihe und liess die vierte allein stehen — derselbe Fehler wie bei den
   Leistungen (Abschnitt 6) und den Partnern (Abschnitt 11), beide Male aus
   demselben Grund auf feste Spalten umgestellt. */
.wt-home .wt-teams {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: clamp(2.5rem, 5vw, 4rem);
    border-top: 1px solid var(--wt-line);
}

.wt-home .wt-teams-eyebrow {
    margin-bottom: 1.5rem;
}

.wt-home .wt-teams-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.wt-home .wt-team {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    background: var(--wt-surface);
    border: 1px solid var(--wt-line);
    border-radius: var(--ua-border-radius);
    padding: 1.5rem;
}

/* Grid-Elemente werden in Dokumentreihenfolge gemalt — ohne das Anheben legt
   sich die Namenskarte unter die Kachel rechts daneben. */
.wt-home .wt-team:hover,
.wt-home .wt-team:focus-within {
    z-index: 2;
}

.wt-home .wt-team-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.wt-home .wt-team-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--wt-radius-in);
    background: var(--wt-primary-tint);
    color: var(--wt-primary);
    font-size: 1.1rem;
}

/* Font Awesome ersetzt das <i> per JavaScript durch ein <svg>, und base.scss
   deckelt das shopweit mit `.svg-inline--fa { height: 1rem !important }`.
   Ohne Gegenwehr bliebe das Zeichen bei 16px, gleich welche Schriftgroesse die
   Kachel setzt. Dieselbe Ausnahme wie bei den Schnellzugriffen — die shopweite
   Regel bleibt stehen. */
.wt-home .wt-team-icon .svg-inline--fa {
    height: 1.1rem !important;
}

.wt-home .wt-team h3 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--wt-ink);
    text-wrap: balance;
}

.wt-home .wt-team-text {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--wt-ink-2);
}

/* --- Wer in der Abteilung sitzt ------------------------------------------

   Kuerzel-Kreise mit einer Karte darueber. Reines CSS, kein Storefront-Build:
   :hover fuer die Maus, :focus-within fuer Tastatur und Touch — ohne den
   zweiten Zweig waeren die Namen ohne Maus nicht zu bekommen. */
.wt-home .wt-team-people {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.wt-home .wt-person {
    display: inline-grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    background: var(--wt-primary-tint);
    color: var(--wt-primary);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background var(--wt-transition), color var(--wt-transition);
}

.wt-home .wt-person:hover,
.wt-home .wt-person:focus-visible {
    background: var(--wt-primary);
    color: #fff;
}

/* Die Karte loest gegen .wt-team-people auf, nicht gegen das Kuerzel — das
   ist bewusst nicht positioniert. Sonst stuende sie mittig ueber einem
   einzelnen Kreis und liefe in der rechten Spalte aus dem Bild.

   Sie klappt nach UNTEN auf. Oberhalb der Kuerzelzeile steht der Titel der
   Abteilung, und wer den beim Nachschlagen verdeckt, nimmt dem Namen gerade
   den Zusammenhang. Unten liegen die Kanal-Chips, die sich leichter
   entbehren lassen. */
.wt-home .wt-person-card {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    background: var(--wt-surface);
    border: 1px solid var(--wt-line);
    border-radius: var(--wt-radius-in);
    box-shadow: var(--wt-shadow-elevated);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.25rem);
    transition: opacity var(--wt-transition), transform var(--wt-transition),
        visibility var(--wt-transition);
}

.wt-home .wt-person:hover .wt-person-card,
.wt-home .wt-person:focus-visible .wt-person-card {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Portrait. Der Kreis steht sofort als getoente Flaeche da, das Bild kommt
   nach — die URL steht als --wt-avatar am Element, geholt wird sie aber erst
   von der :hover/:focus-Regel weiter unten. Ein Hintergrundbild laedt der
   Browser genau dann, wenn eine Regel mit dem Bild auf ein gemaltes Element
   passt; solange nur die Custom Property gesetzt ist, passiert nichts.

   Ohne Initialen im Kreis: die stehen im Kuerzel direkt darueber schon, und
   Text im Kreis stuende nach dem Laden ueber dem Gesicht. */
/* Die Portraits auf ueber-uns sind keine Passbilder: EPS-Logo oben, Person
   ganz darunter, alles auf Weiss. Bei `cover` sitzt in einem 3rem-Kreis
   deshalb vor allem das Logo, und das Gesicht ist ein Punkt. 145 % zoomt so
   weit heran, dass der Kopf traegt, ohne ihn oben abzuschneiden — die Bilder
   sind gleich aufgebaut, sonst waere das je Person zu setzen. */
.wt-home .wt-person-avatar {
    flex: none;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background-color: var(--wt-primary-tint);
    background-size: 145%;
    background-position: 50% 28%;
    background-repeat: no-repeat;
}

/* Hier — und nur hier — wird das Portrait tatsaechlich angefordert. */
.wt-home .wt-person:hover .wt-person-avatar,
.wt-home .wt-person:focus-visible .wt-person-avatar {
    background-image: var(--wt-avatar);
}

/* min-width: 0 laesst eine lange Adresse umbrechen, statt die Karte zu
   sprengen. */
.wt-home .wt-person-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.wt-home .wt-person-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--wt-ink);
}

/* Zwei Zeilen, zwei Zeichen: Hoerer fuer die Durchwahl, Umschlag fuer die
   Adresse. `align-items: start` haelt das Zeichen an der ersten Zeile, wenn
   eine lange Adresse in der schmalen Spalte umbricht. */
.wt-home .wt-person-line {
    display: flex;
    align-items: start;
    gap: 0.45rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--wt-ink-2);
    word-break: break-word;
}

/* Wie ueberall in diesem Abschnitt gegen die shopweite Deckelung in
   base.scss (`.svg-inline--fa { height: 1rem !important }`). */
.wt-home .wt-person-line .svg-inline--fa {
    flex: none;
    height: 0.72rem !important;
    margin-top: 0.15rem;
    color: var(--wt-ink-3);
}

.wt-home .wt-team-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0;
}

.wt-home .wt-team-channels:empty {
    display: none;
}

.wt-home .wt-team-channel {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--wt-ink-3);
    background: var(--wt-surface-2);
    border-radius: 50px;
    padding: 0.2rem 0.65rem;
    white-space: nowrap;
}

.wt-home .wt-team-note {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--wt-ink-3);
}

/* margin-top: auto haelt die Aktionen aller vier Kacheln auf einer Linie, auch
   wenn ein Titel umbricht oder die Chipzeile zwei Reihen braucht. */
.wt-home .wt-team-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.35rem;
}

/* Bewusst NICHT wt-btn-primary: das ist auf drei Ziele rationiert (Hersteller,
   Kontoeroeffnung, Support — siehe docs/homepage/README.md, „Handlungs-
   aufforderungen"). Eine Durchwahl ist keine vierte Kampagne, sondern der
   Kanal genau dieses Abschnitts; deshalb eine eigene Klasse, die gefuellt
   aussieht, aber nicht im selben Topf liegt. */
.wt-home .wt-team-tel,
.wt-home .wt-team-mail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid transparent;
    border-radius: 50px;
    padding: 0.6rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--wt-transition), color var(--wt-transition),
        border-color var(--wt-transition);
}

.wt-home .wt-team-tel {
    background: var(--wt-primary);
    border-color: var(--wt-primary);
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.wt-home .wt-team-tel:hover {
    background: var(--wt-primary-dark);
    border-color: var(--wt-primary-dark);
    color: #fff;
}

.wt-home .wt-team-mail {
    background: transparent;
    border-color: var(--wt-line-2);
    color: var(--wt-ink-2);
}

.wt-home .wt-team-mail:hover {
    border-color: var(--wt-primary);
    color: var(--wt-primary);
}

.wt-home .wt-team-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wt-primary);
    text-decoration: none;
}

.wt-home .wt-team-link:hover {
    color: var(--wt-primary-dark);
}

.wt-home .wt-team-tel .svg-inline--fa,
.wt-home .wt-team-mail .svg-inline--fa,
.wt-home .wt-team-link .svg-inline--fa {
    height: 0.85rem !important;
}

/* --- 14. Responsive ----------------------------------------------------- */

/* Zwischen 992 und 1400px steht die Landkarte noch daneben, die drei Spalten
   werden also schmal. Foto und Innenabstand geben dort etwas nach, damit die
   Dreierreihe bestehen bleibt. */
@media screen and (max-width: 1399.98px) {
    /* Zwei mal zwei — der Stand aus der Vorlage des Inhabers. Vier Spalten
       brauchen die Breite, die es hier nicht mehr gibt. */
    .wt-home .wt-teams-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Sechs Spalten brauchen Breite. Darunter drei und drei, mit dem Polster
       und der Schriftgroesse, die dort wieder hineinpassen. */
    .wt-home .wt-usp-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .wt-home .wt-usp-item {
        padding: 2.1rem 1.6rem;
    }

    .wt-home .wt-usp-item h3 {
        font-size: 1rem;
    }

    .wt-home .wt-usp-item p {
        font-size: 0.88rem;
        line-height: 1.55;
    }
}

@media screen and (min-width: 992px) and (max-width: 1399.98px) {
    /* Schmalere Kartenspalte und engerer Abstand — das gewonnene Stueck geht
       an die drei Kacheln, sonst brechen dort die Namen um. */
    .wt-home .wt-map-sec {
        grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
        gap: 2rem;
    }

    .wt-home .wt-mgr {
        padding: 1rem;
        gap: 0.7rem;
    }

    .wt-home .wt-mgr-photo {
        width: 56px;
        height: 56px;
    }

    .wt-home .wt-mgr h3 {
        font-size: 0.95rem;
    }

    .wt-home .wt-mgr-links a {
        font-size: 0.8rem;
    }
}

@media screen and (max-width: 991px) {
    /* Auf Touch-Geraeten kostet ein fixierter Hintergrund bei jedem Scrollen
       einen Repaint der ganzen Flaeche, und iOS Safari ignoriert `fixed`
       ohnehin. Hier legt `cover` das Bild wieder je Box — die Kante zwischen
       den beiden Abschnitten kommt zurueck, faellt aber kaum auf, weil auf
       dieser Breite nie beide gleichzeitig im Bild sind. */
    .wt-home .cms-block.wt-s-hero + .cms-block.wt-s-pillars::before,
    .wt-home .cms-block.wt-s-brands {
        background-attachment: scroll;
    }

    .wt-home .wt-bs-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Karte ueber die Betreuer statt daneben. */
    .wt-home .wt-map-sec {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
    }

    .wt-home .wt-map-figure {
        max-width: 320px;
        text-align: center;
    }

    .wt-home .wt-apps {
        gap: 0.65rem;
    }

    .wt-home .wt-assoc,
    .wt-home .wt-usp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wt-home .wt-stats {
        gap: 1.5rem 1.75rem;
    }
}

@media screen and (max-width: 767.98px) {
    /* Untereinander: zwei Spalten lassen von der Durchwahl-Schaltflaeche nur
       noch einen Umbruch uebrig. */
    .wt-home .wt-teams-grid {
        grid-template-columns: minmax(0, 1fr);
    }


    /* Sieben Chips brechen auf dieser Breite in drei Reihen um und schieben die
       Kacheln aus dem Bild. Eine Zeile zum Wischen ist ruhiger — der Rand
       rechts zeigt an, dass es weitergeht. */
    .wt-home .wt-brand-filter {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        padding-inline: var(--wt-gutter);
        margin-inline: calc(var(--wt-gutter) * -1);
        scroll-padding-inline: var(--wt-gutter);
    }

    .wt-home .wt-brand-filter::-webkit-scrollbar {
        display: none;
    }

    .wt-home .wt-brand-filter > * {
        flex: none;
    }

    /* Die Beschriftung wandert ueber die Zeile: nebenan frisst sie die halbe
       Breite, und der erste Chip stuende schon halb ausserhalb. */
    .wt-home .wt-brand-filter-label {
        display: none;
    }
    .wt-home .wt-bs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wt-home .wt-bs-img {
        height: 7rem;
    }

    .wt-home .wt-mgr-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Keine Hero-Ueberlappung auf schmalen Schirmen. */
    .wt-home .cms-block.wt-s-hero + .cms-block.wt-s-pillars {
        margin-top: 0;
        padding-top: calc(var(--wt-band) * 0.62);
    }

    /* Ohne Ueberlappung faengt der Grund oben am Block an. */
    .wt-home .cms-block.wt-s-hero + .cms-block.wt-s-pillars::before {
        inset: 0;
    }

    /* Der grosse Hero-CTA faellt auf schmalen Schirmen auf Normalmass zurueck -
       volle Breite traegt die Hierarchie dort schon. */
    .wt-home .wt-btn-lg {
        padding: 0.85rem 1.6rem;
        font-size: 0.98rem;
    }

    .wt-home .wt-hero-inner {
        margin-left: 0;
        padding-block: 3rem 3.5rem;
    }

    .wt-home .wt-hero-actions .btn {
        flex: 1 1 100%;
        justify-content: center;
    }

    .wt-home .wt-usp-head,
    .wt-home .wt-close-card {
        gap: 1rem;
    }

    .wt-home .wt-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem 1.5rem;
    }

    .wt-home .wt-assoc,
    .wt-home .wt-usp-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .wt-home .wt-apps {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Feste zwei Spalten statt `auto-fit`. Die Grundregel verlangt pro Spalte
       12rem, zwei Spalten brauchen damit 385px Inhaltsbreite — ein 390er
       Telefon hat nach dem Gutter 350px. Auf jedem gaengigen Telefon fiel das
       Raster deshalb auf **eine** Spalte zurueck, und die sechs Reiter wurden
       823px hoch: ein ganzer Bildschirm, bevor der erste Artikel kommt.

       Gemessen im Headless-Chrome (iPhone-Viewport 390x844):

       | Breite | vorher | jetzt |
       |---|---|---|
       | 360px | 1 Spalte, 823px | 2 Spalten, 314px |
       | 390px | 1 Spalte, 823px | 2 Spalten, 314px |

       Zwei Spalten und nicht eine Wischzeile: der Abschnitt beantwortet
       "fuehrt EPS meine Marke?" — dafuer muessen alle sechs Zeichen
       gleichzeitig im Bild stehen. Die Chip-Zeile darunter wischt, weil dort
       nur eine Auswahl innerhalb einer schon gewaehlten Marke steht. */
    .wt-home .wt-logos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wt-home .wt-logo {
        min-height: 6.5rem;
        gap: 0.4rem;
        padding: 1rem 0.75rem;
    }

    /* In einer Spalte fuellte das Logo 82% von 348px und stand mit 259px Breite
       groesser da als auf dem Desktop. In zwei Spalten begrenzt die Breite,
       nicht die Hoehe — deshalb hier 88%: bei 82% blieben von einem breiten
       Schriftzug nur noch rund 26px Hoehe uebrig. */
    .wt-home .wt-logo img {
        max-height: 2.6rem;
        max-width: 88%;
    }

    /* "ALARMTECHNIK" ist das laengste Wort und muss in eine Zeile passen. */
    .wt-home .wt-logo-cat {
        font-size: 0.6rem;
        letter-spacing: 0.07em;
    }

    .wt-home .wt-logo-mark {
        font-size: 1rem;
    }
}

/* --- 15. */

@media (prefers-reduced-motion: reduce) {
    /* AOS hat keine Reduced-Motion-Behandlung. */
    .wt-home [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        pointer-events: auto !important;
    }

    .wt-home .wt-btn-primary:hover,
    .wt-home .wt-btn-ghost:hover,
    .wt-home .wt-btn-on-night:hover,
    .wt-home .wt-btn-outline-night:hover,
    .wt-home .wt-pillar:hover,
    .wt-home .wt-pillar:hover .wt-pillar-go svg {
        transform: none;
    }
}

@media screen and (max-width: 575.98px) {
    /* Drei- und Zweierreihe werden hier zu schmal fuer Foto plus Name. */
    .wt-home .wt-mgr-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}