/* =========================================================================
   wupp.it – wupp.iT ® · IT-Dienstleistungen, Serverhosting, Beratung
   Unternehmenshomepage und Mitte des Themen-Portal-Netzwerks.

   Eigenes, dependency-freies Design-System. Alle Ressourcen lokal – einzige
   Ausnahme ist three.js unter assets/js/vendor/, ebenfalls selbst gehostet.
   Erzwungen wird das durch die CSP `default-src 'self'` in .htaccess und
   web.config: eine externe Schrift oder ein CDN-Skript würde schlicht
   blockiert. Basis-Design geteilt mit isb.nrw, dsgvo-datenschutz.com,
   meldeportal-hinweisgeberschutz.de und betriebskosten.app.
   ========================================================================= */

:root {
    /* Marke */
    --brand:        #99C046;   /* wupp.iT Lime-Green */
    --brand-600:    #7fa736;
    --brand-700:    #5f7d24;   /* dunkel genug für Text/Links auf Weiß */
    --brand-050:    #f2f7e8;
    --brand-100:    #e6efd4;

    --ink:          #1e2a1e;   /* dunkles Grün-Anthrazit (Sidebar-Ton) */
    --gray:         #676767;   /* wupp.iT Sekundärfarbe (Grau) */
    --slate-900:    #212423;   /* Überschriften – neutrales Anthrazit */
    --slate-700:    #454747;   /* Fließtext kräftig */
    --slate-600:    #676767;   /* Sekundär-/Fließtext = Markengrau */
    --slate-400:    #9a9a9a;
    --line:         #e5e7e5;
    --surface:      #ffffff;
    --surface-2:    #f6f9f2;
    --surface-3:    #eef4e6;

    --danger:       #d6455a;
    --amber:        #e0a020;
    --info:         #2f7fd6;

    --radius:       14px;
    --radius-lg:    22px;
    --radius-sm:    9px;
    --shadow-sm:    0 1px 2px rgba(30,42,30,.06), 0 1px 3px rgba(30,42,30,.05);
    --shadow:       0 6px 22px -8px rgba(30,42,30,.18);
    --shadow-lg:    0 30px 60px -20px rgba(30,42,30,.32);

    --maxw:         1160px;
    --gap:          clamp(1rem, 3vw, 2rem);

    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
    font-family: var(--font);
    color: var(--slate-700);
    background: var(--surface);
    line-height: 1.65;
    font-size: clamp(1rem, 0.55vw + 0.9rem, 1.075rem);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;   /* lange Komposita nie über den Rand */
}

img { max-width: 100%; display: block; height: auto; }
a { color: var(--brand-700); text-decoration: none; }
a:hover { text-decoration: underline; }

/* hyphenate-limit-chars ist hier kein Feinschliff, sondern eine Reparatur:
   Mit bloßem „hyphens: auto" trennte Chrome „Externer Datenschutz­beauftragter"
   zu „Datenschut-zbeauftragter", also nach einem einzelnen Buchstaben. Die drei
   Werte bedeuten: Wort mindestens 7 Zeichen, mindestens 4 davor, mindestens 3
   danach. Die von Hand gesetzten ­ bleiben davon unberührt. */
h1, h2, h3, h4 { color: var(--slate-900); line-height: 1.12; letter-spacing: -0.02em; font-weight: 800; overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 7 4 3; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.22rem; letter-spacing: -0.01em; }
p { color: var(--slate-600); }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gap); }

/* Sichtbar nur für Screenreader */
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; left: 12px; top: -60px; z-index: 200;
    background: var(--ink); color: #fff; padding: .7rem 1.1rem; border-radius: 8px;
    transition: top .2s ease;
}
.skip-link:focus { top: 12px; text-decoration: none; }

:focus-visible { outline: 3px solid var(--brand-600); outline-offset: 2px; border-radius: 4px; }

/* ---------- Buttons ---------- */
.btn {
    --_bg: var(--brand); --_fg: #14210a;
    display: inline-flex; align-items: center; gap: .55rem;
    font-weight: 700; font-size: 1rem; line-height: 1;
    padding: .95rem 1.5rem; border-radius: 999px; border: 1px solid transparent;
    background: var(--_bg); color: var(--_fg); cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
    box-shadow: var(--shadow-sm); text-align: center; text-decoration: none;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn--primary { --_bg: var(--brand); box-shadow: 0 10px 24px -10px rgba(127,167,54,.85); }
.btn--dark    { --_bg: var(--ink); --_fg: #fff; }
.btn--ghost   { --_bg: transparent; --_fg: var(--slate-900); border-color: var(--line); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--light   { --_bg: #fff; --_fg: var(--slate-900); }
.btn svg { width: 1.1em; height: 1.1em; }

/* ---------- Header / Nav ---------- */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,.82);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: .85rem; height: 72px; }
.nav__brand { display: flex; align-items: center; flex: 0 0 auto; }
/* Das Logo steht allein – ohne Schriftzug daneben darf es größer sein. */
.nav__brand img { height: 42px; width: auto; }
.nav__brand:hover { text-decoration: none; }
@media (max-width: 560px) { .nav__brand img { height: 34px; } }
.nav__links { display: flex; align-items: center; gap: .15rem; list-style: none; }
.nav__links a {
    color: var(--slate-700); font-weight: 600; font-size: .9rem;
    padding: .4rem .46rem; border-radius: 8px; white-space: nowrap;
}
.nav__links a:hover { background: var(--surface-2); color: var(--slate-900); text-decoration: none; }
.nav__cta { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.nav__cta .btn { white-space: nowrap; }
.nav__phone { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--slate-900); padding: .5rem .6rem; border-radius: 8px; white-space: nowrap; }
.nav__phone:hover { background: var(--surface-2); text-decoration: none; }
.nav__phone svg { width: 1.15rem; height: 1.15rem; color: var(--brand-700); flex: none; }
@media (max-width: 560px) { .nav__phone span { display: none; } }
.nav__toggle {
    display: none; background: none; border: 1px solid var(--line);
    border-radius: 9px; padding: .5rem; cursor: pointer; color: var(--slate-900);
}
.nav__toggle svg { width: 22px; height: 22px; display: block; }

@media (max-width: 1180px) {
    .nav__links, .nav__cta .btn--dark { display: none; }
    .nav__toggle { display: inline-flex; }
    .nav--open .nav__links {
        display: flex; position: absolute; left: 0; right: 0; top: 72px;
        flex-direction: column; align-items: stretch; gap: .15rem;
        background: var(--surface); border-bottom: 1px solid var(--line);
        padding: .6rem var(--gap) 1rem; box-shadow: var(--shadow);
    }
    .nav--open .nav__links a { padding: .8rem .6rem; }
}

/* ---------- Sektionen ---------- */
.section { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.section--tint { background: var(--surface-2); }
.section--ink { background: var(--ink); }
.section__head { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section__head.center { margin-inline: auto; text-align: center; }
.eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--brand-700); background: var(--brand-050);
    padding: .4rem .8rem; border-radius: 999px; margin-bottom: 1rem;
}
/* Ohne diese Regel skaliert ein Inline-SVG im Eyebrow auf seine
   Intrinsic-Größe und sprengt die Pille. */
.eyebrow svg { width: 1.05rem; height: 1.05rem; flex: none; }
.section__head p { margin-top: .9rem; font-size: 1.08rem; }
.lead { font-size: 1.12rem; color: var(--slate-600); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 5rem); }
.hero::before {
    content: ""; position: absolute; inset: -30% -10% auto -10%; height: 720px; z-index: -1;
    background:
        radial-gradient(60% 55% at 78% 8%, rgba(153,192,70,.28), transparent 60%),
        radial-gradient(50% 50% at 8% 20%, rgba(153,192,70,.14), transparent 55%),
        linear-gradient(180deg, var(--brand-050), transparent 70%);
}
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); font-weight: 850; }
.hero h1 .hl { color: var(--brand-700); }
.hero__sub { margin-top: 1.25rem; font-size: clamp(1.05rem, 1.4vw, 1.22rem); max-width: 34ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.hero__badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.8rem; }

.badge {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
    padding: .5rem .9rem; font-weight: 650; font-size: .9rem; color: var(--slate-700);
    box-shadow: var(--shadow-sm);
}
.badge svg { width: 1.05rem; height: 1.05rem; color: var(--brand-700); flex: none; }

/* Hero-Panel (Produktvorschau) */
.hero__panel {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-lg); border: 1px solid var(--line);
    transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
    transition: transform .5s ease;
}
.hero__panel:hover { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg); }
.hero__panel img { width: 100%; }
.hero__panel .tag {
    position: absolute; left: 14px; bottom: 14px;
    background: rgba(30,42,30,.86); color: #fff; font-size: .8rem; font-weight: 600;
    padding: .4rem .75rem; border-radius: 999px; backdrop-filter: blur(4px);
}

@media (max-width: 860px) {
    .hero__grid { grid-template-columns: 1fr; }
    .hero__panel { transform: none; order: -1; }
    .hero__sub { max-width: none; }
}

/* Sub-Hero (Unterseiten) */
.hero--sub { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.hero--sub .hero__sub { max-width: 62ch; }
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .9rem; color: var(--slate-600); margin-bottom: 1rem; }
.crumbs a { color: var(--slate-600); font-weight: 600; }
.crumbs a:hover { color: var(--brand-700); }
.crumbs [aria-current] { color: var(--slate-900); font-weight: 700; }

/* Ratgeber / Artikel */
.section--flush-top { padding-top: 0; }
.article { max-width: 780px; }
.article .lead { margin-bottom: 1.6rem; }
.article h2 { font-size: 1.4rem; margin-top: 2.2rem; margin-bottom: .7rem; }
.article p { margin-bottom: 1rem; }
.post-meta { display: flex; gap: .6rem; align-items: center; color: var(--slate-600); font-size: .92rem; margin: .2rem 0 0; }
.post-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--slate-400); flex: none; }
.post-card__meta { color: var(--slate-600); font-size: .85rem; font-weight: 600; margin-bottom: .5rem; }
.post-card h3 { margin-bottom: .5rem; }

/* ---------- Trust-Leiste ---------- */
.trustbar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.trustbar__inner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: clamp(1rem, 4vw, 3rem); padding: 1.1rem 0; text-align: center;
}
.trustbar__item { display: flex; align-items: center; gap: .55rem; color: var(--slate-600); font-weight: 600; font-size: .95rem; }
.trustbar__item svg { width: 1.2rem; height: 1.2rem; color: var(--brand-700); flex: none; }

/* ---------- Karten-Grid ---------- */
.grid { display: grid; gap: 1.2rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.5rem; box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--brand-100); }

/* Das Innenleben reagiert mit, nicht nur der Rahmen.
   Auf der Schwesterseite dsgvo-datenschutz.com wirken die Kacheln lebendiger,
   obwohl .card dort Zeile für Zeile identisch ist. Der Unterschied liegt bei
   .branche: Dort wechseln zusätzlich Symbol und Überschrift die Farbe. Ein
   Hub plus Schatten allein ist zu leise, sobald die Kachel groß ist. */
.card h3          { transition: color .2s ease; }
.card:hover h3    { color: var(--brand-700); }
.card:hover .card__icon { background: var(--brand-100); transform: translateY(-1px); }
.card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 12px; margin-bottom: 1rem;
    background: var(--brand-050); color: var(--brand-700);
    transition: background .25s ease, color .25s ease, transform .2s ease;
}
.card__icon svg { width: 24px; height: 24px; }
.card h3 { margin-bottom: .45rem; }
.card p { font-size: .98rem; }
.card p + p { margin-top: .75rem; }
a.card { text-decoration: none; }
a.card:hover { text-decoration: none; }
.card__more { display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem; font-weight: 700; font-size: .9rem; color: var(--brand-700); }
.card__more svg { width: 1rem; height: 1rem; transition: transform .2s ease; }
a.card:hover .card__more svg { transform: translateX(3px); }

/* ---------- Split (ISB + DSB) ---------- */
/* align-items: start, nicht center.
   Mit center wird die kürzere Spalte vertikal mittig gesetzt: Auf den
   Leistungsseiten steht links ein kurzer Einleitungstext und rechts ein Stapel
   Karten, und der Text rutschte dadurch weit unter den ersten Kartentitel.
   Genau das war auf ki-integration.php und microsoft-365.php zu sehen.
   Mittig gehört nur der Fall Text-neben-Bild, dafür gibt es .split--mitte. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.split--mitte { align-items: center; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
.checklist { list-style: none; display: grid; gap: .8rem; margin-top: 1.3rem; }
.checklist li { display: flex; gap: .7rem; align-items: flex-start; color: var(--slate-700); }
.checklist svg { width: 1.35rem; height: 1.35rem; color: var(--brand-700); flex: none; margin-top: .1rem; }

/* ---------- Zertifikate ---------- */
.certs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; max-width: 760px; margin-inline: auto; }
@media (max-width: 720px) { .certs { grid-template-columns: 1fr; max-width: 420px; } }
.cert {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.6rem; text-align: center; box-shadow: var(--shadow-sm);
}
.cert__seal {
    width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%;
    display: grid; place-items: center; background: var(--brand-050); color: var(--brand-700);
    border: 2px solid var(--brand-100);
}
.cert__seal svg { width: 30px; height: 30px; }
.cert__img {
    height: 130px; width: auto; margin: 0 auto 1rem; display: block;
    filter: drop-shadow(0 6px 14px rgba(30,42,30,.14));
}
.cert strong { display: block; color: var(--slate-900); font-size: 1.05rem; }
.cert span { color: var(--slate-600); font-size: .92rem; }

/* ---------- Utilities ---------- */
.panel--flat { transform: none !important; }
.btn--block { width: 100%; justify-content: center; }
.footer__lead { max-width: 38ch; }
.footer__contact { font-size: .92rem; }
.cta-center { justify-content: center; }
.chips.center { justify-content: center; }
.subhead-center { text-align: center; margin: 2.2rem 0 .9rem; font-weight: 700; color: var(--slate-900); }

/* ---------- Experten-Karte (E-E-A-T) ---------- */
/* min-width: 0 ist hier Pflicht, nicht Geschmack: Ein Grid-Element bekommt
   min-width: auto und schrumpft deshalb nicht unter seinen Inhalt. Mit dem
   langen Wort „Informationssicherheitsbeauftragter" in der Kachelliste sprengte
   die dritte Karte das Raster nach rechts aus dem Container heraus. Das innere
   div braucht es ebenfalls, sonst wandert das Problem nur eine Ebene tiefer. */
.expert { display: flex; gap: 1.3rem; align-items: flex-start; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.7rem; box-shadow: var(--shadow);
    transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease; }
.expert:hover { transform: translateY(-3px); border-color: var(--brand-100); }
.expert > div { min-width: 0; }
/* Zu dritt nebeneinander ist kein Platz für Medaillon UND Text in einer Zeile –
   ab hier steht das Bild über dem Namen. Unter 700 px greift ohnehin dieselbe
   Regel für alle Karten. */
.grid--3 > .expert { flex-direction: column; }
.expert__avatar { width: 88px; height: 88px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.7rem; color: #14210a; background: linear-gradient(135deg, var(--brand), var(--brand-600)); }
.expert__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* Medaillon ohne Foto – für die Kolleginnen und Kollegen, die nicht ins Bild
   möchten. Heller Grund statt Markenverlauf, damit die Karte neben den beiden
   Porträts nicht lauter wirkt als diese. */
.expert__avatar--zahl {
    background: var(--brand-050); border: 1px solid var(--brand-100);
    color: var(--brand-700); font-size: 1.45rem; letter-spacing: -.02em;
}
.expert strong { display: block; font-size: 1.2rem; color: var(--slate-900); }
.expert__role { color: var(--brand-700); font-weight: 650; font-size: .95rem; }
.expert p { margin-top: .6rem; font-size: .97rem; }
.expert__creds { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
/* white-space: nowrap hielte die Kacheln zwar garantiert einzeilig – eine zu
   lange Beschriftung liefe damit aber aus der Karte heraus, sobald die Karte
   schmal wird (zu dritt nebeneinander genau passiert). Deshalb: umbrechen
   erlaubt, Breite gedeckelt. Einzeilig bleiben die Kacheln über kurze Texte,
   nicht über eine Regel, die im Zweifel das Layout zerlegt. */
.expert__creds li { display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; font-size: .82rem; font-weight: 650; line-height: 1.3; background: var(--brand-050); color: var(--brand-700); border: 1px solid var(--brand-100); padding: .32rem .7rem; border-radius: 999px; }
/* Diese Regel fehlte – und ohne sie war der Haken viermal zu groß.
   Ein SVG ohne width/height fällt auf seine Ersatzgröße zurück (300 × 150,
   über das viewBox-Verhältnis auf die Zeilenhöhe gestaucht) und drückte den
   Text der Kachel in den Umbruch. Ergebnis: verschieden hohe Blasen mit
   zweizeiliger Beschriftung. Jedes andere Bauteil setzt die Größe hier
   ausdrücklich – siehe .badge svg, .checklist svg, .card__icon svg.
   white-space: nowrap oben hält die Kacheln zusätzlich einzeilig, damit alle
   in einer Reihe gleich hoch sind. */
.expert__creds svg { width: .95rem; height: .95rem; flex: none; stroke-width: 2.6; }

/* ---------- Referenzen / Testimonials ---------- */
.testimonials { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-top: 2rem; }
@media (max-width: 700px) { .testimonials { grid-template-columns: 1fr; } .expert { flex-direction: column; } }
.testimonial { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease; }
/* Zurückhaltender als bei .card: Diese Kacheln sind nicht anklickbar, der Hub
   ist nur eine Rückmeldung, dass der Zeiger etwas trifft. */
.testimonial:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-100); }
.testimonial p { font-style: italic; color: var(--slate-700); }
.testimonial cite { display: block; margin-top: .8rem; font-style: normal; font-weight: 700; color: var(--slate-900); font-size: .92rem; }
.testimonial cite span { display: block; font-weight: 500; color: var(--slate-600); }

/* ---------- Ungleicher Zweispalter (Text breiter als Bild) ----------------
   Im Geschwisterprojekt hieß das `.isms__intro` und hing am dortigen Produkt.
   Der Aufbau ist generisch, der Name jetzt auch. */

.feature-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1.5rem; margin-top: 1.2rem; }
@media (max-width: 520px) { .feature-list { grid-template-columns: 1fr; } }
.feature-list li { display: flex; gap: .55rem; align-items: flex-start; font-size: .97rem; color: var(--slate-700); }
.feature-list svg { width: 1.15rem; height: 1.15rem; color: var(--brand-700); flex: none; margin-top: .18rem; }

/* Galerie */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 880px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .gallery { grid-template-columns: 1fr; } }
.shot {
    position: relative; border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); cursor: zoom-in;
    transition: transform .2s ease, box-shadow .25s ease;
}
.shot:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.shot img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.shot figcaption {
    padding: .7rem .9rem; font-size: .9rem; font-weight: 600; color: var(--slate-700);
    border-top: 1px solid var(--line); background: var(--surface);
    display: flex; align-items: center; gap: .45rem;
}
.shot figcaption svg { width: 1rem; height: 1rem; color: var(--brand-700); }

/* Normen-Chips */
.chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.6rem; }
.chip {
    background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
    padding: .45rem .9rem; font-weight: 650; font-size: .88rem; color: var(--slate-700);
    box-shadow: var(--shadow-sm);
}
.chip.is-brand { background: var(--brand-050); border-color: var(--brand-100); color: var(--brand-700); }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { text-align: center; padding: 1.2rem; }
.stat b { display: block; font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 850; color: #fff; letter-spacing: -.03em; }
.stat span { color: rgba(255,255,255,.72); font-size: .95rem; font-weight: 600; }
.section--ink h2, .section--ink .eyebrow { color: #fff; }
.section--ink .eyebrow { background: rgba(255,255,255,.1); color: var(--brand); }
.section--ink p { color: rgba(255,255,255,.75); }

/* ---------- Prozess ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; counter-reset: step; }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }
.step {
    position: relative; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.5rem 1.4rem 1.4rem;
}
.step__num {
    display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
    background: var(--ink); color: var(--brand); font-weight: 800; margin-bottom: .9rem; font-size: 1.05rem;
}
.step h3 { font-size: 1.08rem; margin-bottom: .35rem; }
.step p { font-size: .95rem; }

/* ---------- Kontakt ---------- */
.contact { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(1.5rem,4vw,3rem); }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }
.contact__info { display: grid; gap: 1.1rem; align-content: start; }
.contact__row { display: flex; gap: .8rem; align-items: flex-start; }
.contact__row .ic {
    width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center;
    background: var(--brand-050); color: var(--brand-700);
}
.contact__row .ic svg { width: 20px; height: 20px; }
.contact__row b { color: var(--slate-900); display: block; }
.contact__row a { color: var(--slate-700); }

.form {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: var(--shadow);
}
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .form__grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field.col-2 { grid-column: 1 / -1; }
.field label { font-weight: 650; font-size: .92rem; color: var(--slate-900); }
.field .req { color: var(--danger); }
.field input, .field textarea {
    font: inherit; color: var(--slate-900); background: var(--surface-2);
    border: 1px solid var(--line); border-radius: 10px; padding: .8rem .9rem; width: 100%;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field input:focus, .field textarea:focus {
    outline: none; border-color: var(--brand-600); background: var(--surface);
    box-shadow: 0 0 0 3px rgba(153,192,70,.25);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--danger); }
.field .err { color: var(--danger); font-size: .85rem; }

/* Honeypot – für Menschen unsichtbar */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; color: var(--slate-600); }
.consent input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; flex: none; accent-color: var(--brand-600); }

.alert { border-radius: 12px; padding: .9rem 1.1rem; font-weight: 600; margin-bottom: 1.2rem; display: flex; gap: .6rem; align-items: flex-start; }
.alert svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: .1rem; }
.alert--ok { background: var(--brand-050); color: var(--brand-700); border: 1px solid var(--brand-100); }
.alert--err { background: #fdecef; color: #b3253c; border: 1px solid #f6c9d1; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: rgba(255,255,255,.72); padding: clamp(3rem,5vw,4rem) 0 2rem; }
.footer a { color: rgba(255,255,255,.8); }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1.1fr 1fr; gap: 2rem; margin-bottom: 2.5rem; }
@media (max-width: 920px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 1.8rem; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; gap: 1.6rem; } }
.footer ul [aria-current] { color: var(--brand); font-weight: 700; }
.footer__brand { display: flex; align-items: center; margin-bottom: .9rem; }
/* Die Bildmarke ist für helle Flächen gezeichnet. Früher per Filter weiß
   eingefärbt, das verfälschte die Markenfarben. Jetzt in Originalfarben auf
   einem weißen Feld; ohne Feld wäre das graue „iT“ auf dem dunklen Grund
   kaum lesbar (Kontrast unter 3:1). */
.footer__brand img { height: 40px; width: auto; box-sizing: content-box; background: #fff; padding: .45rem .7rem .35rem; border-radius: var(--radius-sm); }
.footer h4 { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .9rem; }
.footer ul { list-style: none; display: grid; gap: .5rem; font-size: .95rem; }
.footer__bottom {
    border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.5rem;
    display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; justify-content: space-between; align-items: center;
    font-size: .88rem;
}
.footer__bottom nav { display: flex; gap: 1.2rem; flex-wrap: wrap; }

/* ---------- Rechtsseiten (Impressum/Datenschutz) ---------- */
.legal { padding: clamp(2.5rem,5vw,4rem) 0; }
.legal .container { max-width: 820px; }
.legal h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: .4rem; }
.legal h2 { font-size: 1.35rem; margin-top: 2.2rem; margin-bottom: .6rem; }
.legal h3 { font-size: 1.08rem; margin-top: 1.4rem; margin-bottom: .3rem; }
.legal p, .legal li { color: var(--slate-700); }
.legal ul { margin: .4rem 0 .4rem 1.2rem; display: grid; gap: .3rem; }
.legal address { font-style: normal; line-height: 1.9; }
.legal .back { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1.5rem; font-weight: 600; }
.note { background: var(--surface-2); border: 1px dashed var(--line); border-radius: 12px; padding: 1rem 1.2rem; margin-top: 1rem; font-size: .95rem; }

/* ---------- Statistik (stats.php) ---------- */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 1.5rem; }
@media (max-width: 700px) { .stats-grid { grid-template-columns: 1fr; } }
.stats-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.stats-table caption { text-align: left; font-weight: 700; color: var(--slate-900); margin-bottom: .5rem; }
.stats-table th, .stats-table td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--line); }
.stats-table td.num, .stats-table th.num { text-align: right; white-space: nowrap; }
.stats-kpis { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.2rem 0; }
.stats-kpi { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.3rem; }
.stats-kpi b { display: block; font-size: 1.6rem; color: var(--slate-900); }
.stats-kpi span { color: var(--slate-600); font-size: .88rem; }

/* ---------- Lightbox ---------- */
.lightbox {
    position: fixed; inset: 0; z-index: 300; display: none;
    background: rgba(16,24,18,.88); backdrop-filter: blur(4px);
    align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem);
}
.lightbox.is-open { display: flex; animation: fade .2s ease; }
.lightbox img { max-width: 100%; max-height: 88vh; border-radius: 12px; box-shadow: var(--shadow-lg); }
.lightbox__close {
    position: absolute; top: 1.2rem; right: 1.4rem; background: rgba(255,255,255,.15);
    color: #fff; border: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
    font-size: 1.5rem; line-height: 1; display: grid; place-items: center;
}
.lightbox__close:hover { background: rgba(255,255,255,.3); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Scroll-Reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }

.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; }
/* =========================================================================
   FAQ (Accordion via <details>)
   ========================================================================= */
.faq { display: grid; gap: .8rem; max-width: 820px; margin-inline: auto; }
.faq details {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 0 1.3rem; box-shadow: var(--shadow-sm);
    transition: border-color .2s ease;
}
.faq details[open] { border-color: var(--brand-100); }
.faq summary {
    list-style: none; cursor: pointer; padding: 1.15rem 0;
    font-weight: 700; color: var(--slate-900); font-size: 1.05rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: ""; width: 12px; height: 12px; flex: none;
    border-right: 2px solid var(--brand-700); border-bottom: 2px solid var(--brand-700);
    transform: rotate(45deg); transition: transform .2s ease; margin-right: .2rem;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > p { padding: 0 0 1.2rem; margin: 0; }

/* =========================================================================
   Feinschliff für sehr schmale Geräte (≤ 480px)
   ========================================================================= */
@media (max-width: 480px) {
    body { font-size: 1rem; hyphens: auto; hyphenate-limit-chars: 7 4 3; }
    .hero h1 { font-size: clamp(1.7rem, 8.5vw, 2.15rem); line-height: 1.14; }
    h1 { font-size: clamp(1.6rem, 7.5vw, 2rem); }
    h2 { font-size: clamp(1.35rem, 6.4vw, 1.75rem); }
    h3 { font-size: 1.12rem; }
    .lead, .hero__sub { font-size: 1.02rem; }
    .section { padding: clamp(2.4rem, 9vw, 3.2rem) 0; }
    .eyebrow { font-size: .72rem; letter-spacing: .06em; }

    /* Buttons: kompakter und volle Breite bei gestapelten CTAs */
    .btn { padding: .82rem 1.15rem; font-size: .96rem; }
    .hero__cta { gap: .6rem; }
    .hero__cta .btn { width: 100%; }

    /* Kartendichte & Abstände */
    .card { padding: 1.3rem; }
    .container { padding-inline: 1.1rem; }
    .expert { padding: 1.3rem; }
    .expert__avatar { width: 72px; height: 72px; font-size: 1.4rem; }
    .check__q { padding: 1rem; }
    .check button { width: 100%; }
    .crumbs { font-size: .82rem; }
}

/* =========================================================================
   Dark Mode – Tokens (automatisch nach Systemeinstellung)
   ========================================================================= */
@media (prefers-color-scheme: dark) {
    :root {
        --brand-700: #b8dd7c;
        --brand-600: #99C046;
        --brand-050: rgba(153,192,70,.13);
        --brand-100: rgba(153,192,70,.28);
        --ink:       #0c110b;
        --slate-900: #f0f1f0;
        --slate-700: #d1d2d1;
        --slate-600: #a6a8a6;
        --slate-400: #7d7f7d;
        --line:      #2f322f;
        --surface:   #10160f;
        --surface-2: #161d15;
        --surface-3: #1b241a;
        --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
        --shadow:    0 8px 24px -10px rgba(0,0,0,.6);
        --shadow-lg: 0 30px 60px -20px rgba(0,0,0,.72);
        color-scheme: dark;
    }
    :root .site-header { background: rgba(16,22,15,.82); }
    :root .hero::before {
        background:
            radial-gradient(60% 55% at 78% 8%, rgba(153,192,70,.16), transparent 60%),
            radial-gradient(50% 50% at 8% 20%, rgba(153,192,70,.10), transparent 55%),
            linear-gradient(180deg, rgba(153,192,70,.08), transparent 70%);
    }
    :root .section--ink,
    :root .footer { background: #080c07; }
    :root .btn--light { --_bg: var(--surface-3); --_fg: var(--slate-900); }
    :root .shot img,
    :root .hero__panel img { opacity: .96; }
}

/* ---------- Preise ---------- */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; align-items: stretch; }
@media (max-width: 900px) { .pricing { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
.price {
    display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 1.8rem 1.6rem; box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .25s ease;
}
.price:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.price--featured { border-color: var(--brand); box-shadow: 0 20px 44px -22px rgba(127,167,54,.8); }
.price__badge { align-self: flex-start; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-700); background: var(--brand-050); border: 1px solid var(--brand-100); border-radius: 999px; padding: .3rem .7rem; margin-bottom: .9rem; }
.price__tier { font-weight: 800; color: var(--slate-900); font-size: 1.15rem; }
.price__scope { color: var(--slate-600); font-size: .9rem; margin-top: .2rem; }
.price__amount { display: flex; align-items: baseline; gap: .3rem; margin: 1.1rem 0 .2rem; }
.price__amount b { font-size: 2.5rem; font-weight: 850; color: var(--slate-900); letter-spacing: -.03em; }
.price__amount span { color: var(--slate-600); font-weight: 600; font-size: .95rem; }
.price__gross { color: var(--slate-600); font-size: .85rem; }
.price__list { list-style: none; display: grid; gap: .6rem; margin: 1.3rem 0 1.6rem; }
.price__list li { display: flex; gap: .55rem; align-items: flex-start; font-size: .95rem; color: var(--slate-700); }
.price__list svg { width: 1.15rem; height: 1.15rem; color: var(--brand-700); flex: none; margin-top: .18rem; }
.price .btn { margin-top: auto; width: 100%; justify-content: center; }
.price__note { text-align: center; color: var(--slate-600); font-size: .9rem; margin-top: 1.6rem; }
.price__custom b { font-size: 1.4rem; }

/* ---------- Preisstaffel (Zeitkonto) -------------------------------------
   Zwei Sätze, die sich nur in einer Bedingung unterscheiden. Deshalb stehen
   sie nebeneinander in einem gemeinsamen Rahmen und nicht als zwei weitere
   Karten im Preisraster: Der Vergleich ist hier die Information.
   Die Zahlen erben .price__amount und .price__gross – ein zweiter Satz
   Typografie für dieselbe Sache wäre eine Quelle künftiger Abweichungen. */
.staffel {
    display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(1.2rem, 3vw, 2.2rem);
    align-items: center;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: clamp(1.4rem, 3vw, 2rem); box-shadow: var(--shadow-sm);
}
.staffel__intro h3 { margin: .5rem 0 .5rem; }
.staffel__intro p  { font-size: .96rem; }
.staffel__stufen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.staffel__stufe {
    background: var(--brand-050); border: 1px solid var(--brand-100);
    border-radius: var(--radius); padding: 1.2rem 1.3rem 1.3rem;
}
.staffel__bedingung {
    display: block; font-size: .84rem; font-weight: 800; color: var(--brand-700);
    line-height: 1.35; min-height: 2.7em;   /* zwei Zeilen, damit beide Beträge auf einer Höhe stehen */
}
.staffel__stufe .price__amount { margin: .5rem 0 .2rem; }
.staffel__stufe .price__amount b { font-size: 2.1rem; }
.staffel__stufe p { font-size: .9rem; margin-top: .8rem; }

/* Beim KI-Band tragen die Kacheln Fließtext statt Beträgen. Nebeneinander
   blieben je rund 240 px Spaltenbreite übrig, und darin zerfällt ein Satz in
   Schnipsel. Deshalb hier untereinander: doppelte Breite, und der Vergleich
   lokal gegen global liest sich von oben nach unten genauso. */
.staffel--ki { grid-template-columns: 1.05fr 1fr; align-items: start; }
.staffel--ki .staffel__stufen { grid-template-columns: 1fr; }
.staffel--ki .staffel__bedingung { min-height: 0; margin-bottom: .4rem; }
.staffel--ki .staffel__stufe p { margin-top: 0; }

/* Haltung: drei Aussagen, bewusst ohne Karten und ohne Symbole. Der Strich
   links führt das Auge, mehr braucht es nicht. Karten würden hier so aussehen
   wie alles andere auf der Seite und die Aussagen zu Werbeflächen machen. */
.haltung { list-style: none; display: grid; gap: 1.1rem; grid-template-columns: repeat(3, 1fr); }
.haltung li {
    border-left: 3px solid var(--brand); padding: .1rem 0 .1rem 1.1rem;
    color: var(--slate-700); font-size: 1rem;
}
.haltung b { display: block; color: var(--slate-900); font-size: 1.05rem; margin-bottom: .3rem; }
@media (max-width: 900px) { .haltung { grid-template-columns: 1fr; gap: 1.3rem; } }

@media (max-width: 900px) {
    .staffel { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 560px) {
    .staffel__stufen { grid-template-columns: 1fr; }
    .staffel__bedingung { min-height: 0; }
}

/* ---------- Hotline-Band ---------- */
.hotline {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2rem;
    text-align: center; background: var(--brand-050); border: 1px solid var(--brand-100);
    border-radius: var(--radius-lg); padding: 1.4rem 1.6rem;
}
.hotline__ic { width: 46px; height: 46px; border-radius: 12px; background: var(--brand); color: #14210a; display: grid; place-items: center; flex: none; }
.hotline__ic svg { width: 24px; height: 24px; }
.hotline b { color: var(--slate-900); font-size: 1.1rem; }
.hotline span { color: var(--slate-700); font-size: .95rem; }
.hotline a { font-weight: 800; color: var(--brand-700); font-size: 1.2rem; }

/* ---------- Bilder / Media & Duotone ---------- */
.media { position: relative; overflow: hidden; border-radius: var(--radius); line-height: 0; background: var(--surface-3); }
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media--round { border-radius: var(--radius-lg); }
.media--shadow { box-shadow: var(--shadow); }

/* Service-Sub-Hero mit Bild */
.subhero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.subhero__media { aspect-ratio: 4 / 3; border: 1px solid var(--line); }
@media (max-width: 820px) {
    .subhero { grid-template-columns: 1fr; }
    .subhero__media { order: -1; aspect-ratio: 16 / 9; }
}

/* Artikel-Kopfbild */
.article-hero { aspect-ratio: 2 / 1; margin: 1.4rem 0 .5rem; border: 1px solid var(--line); }
@media (max-width: 560px) { .article-hero { aspect-ratio: 16 / 10; } }

/* Über-uns-Bild-Band */
.aboutband { aspect-ratio: 3 / 1; margin-bottom: clamp(1.5rem, 3vw, 2.4rem); border: 1px solid var(--line); }
/* Kein Versatz: Die Datei ist bereits auf 3:1 geschnitten, genau das
   Seitenverhältnis der Kachel. Ein object-position würde hier nur die Köpfe
   anschneiden – der Ausschnitt gehört ins Bild, nicht ins Stylesheet. */
.aboutband img { object-position: center center; }
@media (max-width: 700px) { .aboutband { aspect-ratio: 2.2 / 1; } }

/* Blog-Karte mit Vorschaubild */
.post-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.post-card__media { aspect-ratio: 16 / 10; border-radius: 0; }
.post-card__body { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; }
.post-card__body h3 { margin-bottom: .5rem; }
.post-card .card__more { margin-top: auto; }

/* ---------- Netzwerk-Leiste im Footer (Schwesterseiten) ---------- */
.footer__network {
    border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.5rem; margin-bottom: 1.4rem;
    display: flex; flex-wrap: wrap; gap: .6rem .7rem; align-items: center;
}
.footer__network-label { color: rgba(255,255,255,.72); font-weight: 700; font-size: .9rem; margin-right: .3rem; }
.netlink {
    display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 999px;
    padding: .45rem .9rem; color: #fff; font-weight: 700; font-size: .9rem; white-space: nowrap;
}
.netlink span { font-weight: 500; color: rgba(255,255,255,.6); }
.netlink:hover { background: rgba(153,192,70,.16); border-color: var(--brand); text-decoration: none; }
.netlink--active { background: rgba(153,192,70,.14); border-color: var(--brand); cursor: default; }
.netlink--active span { color: var(--brand); }
@media (max-width: 560px) { .netlink span { display: none; } }

/* =========================================================================
   wupp.it – eigene Komponenten
   ========================================================================= */

/* ---------- Bühne: bildschirmfüllender Fotoflug im Hero -------------------
   Der Canvas liegt hinter dem Text und füllt die ganze Sektion. Darüber ein
   Verlauf, damit die Schrift auf jedem Bildinhalt lesbar bleibt.

   Unterschied zum Geschwisterprojekt betriebskosten.app: dort ist das
   Ersatzbild ein flaches SVG, das nicht aufblitzen soll, solange three.js
   lädt. Hier IST das Ersatzbild das Foto der ersten Station – also genau
   das, was die Szene gleich zeigen wird. Es muss deshalb stehen bleiben,
   bis die Szene wirklich läuft (`is-live`); ein Ausblenden bei `is-pending`
   erzeugte ein weißes Loch. Der Canvas blendet im identischen Bildausschnitt
   darüber, die Übergabe ist dadurch unsichtbar.
   ------------------------------------------------------------------------ */
.hero--stage {
    position: relative;
    display: flex;
    align-items: center;
    /* Die Kopfzeile ist 72 px hoch und klebt oben – ohne Abzug ragte der
       Hero unter die Falz. */
    min-height: min(calc(100svh - 72px), 880px);
    padding-block: clamp(2rem, 5vh, 4rem);
    overflow: hidden;
}
.hero--stage::before { content: none; }

.stage { position: absolute; inset: 0; z-index: 0; background: var(--ink); }
.stage canvas,
.stage__fallback {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
    object-fit: cover;
}
.stage canvas    { opacity: 0; transition: opacity 1.1s ease; }
.stage__fallback { opacity: 1; transition: opacity .6s ease; }
.stage.is-live canvas          { opacity: 1; }
.stage.is-live .stage__fallback { opacity: 0; }

/* Lesbarkeitsverlauf: links deckend, nach rechts offen.
   Deutlich dichter als im Geschwisterprojekt betriebskosten.app – dort liegt
   ein helles SVG hinter dem Text, hier ein Foto beliebiger Helligkeit.

   Die Stützstellen sind nicht geschätzt, sondern gemessen: Mit dem Verlauf
   des Geschwisterprojekts (.72 bei 46 %) erreichte der Hero-Fließtext im
   hellen Modus nur 4,45:1 und verfehlte damit AA. Ausschlaggebend ist die
   Stelle bei rund 40 % Breite, wo die letzte Zeile von .hero__sub endet.

   ZWEITE MESSUNG, andere Erkenntnis: Der Verlauf hielt hinter dem Text .985
   und fiel dann so flach ab, dass er bei halber Breite noch mit .82 auf dem
   Foto lag – und ab dort bis 74 % ein milchiger Schleier blieb. Das Foto sah
   dadurch aus wie ein verblasster Abzug, obwohl an der Textur nichts falsch
   war. Der Verlauf ist jetzt hinter dem Text unverändert deckend, fällt aber
   in einem kurzen Fenster (46 → 62 %) auf null. Die Lesbarkeit hängt allein
   an den ersten 44 % – dort steht die Schrift –, die Bildwirkung an den
   letzten 40 %. Beides gleichzeitig geht nur mit einer steilen Kante,
   nicht mit einem breiten Nebel. */
.stage__scrim {
    position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background:
        linear-gradient(100deg,
            var(--surface) 0%,
            rgba(255,255,255,.985) 40%,
            rgba(255,255,255,.94) 46%,
            rgba(255,255,255,.55) 53%,
            rgba(255,255,255,.14) 58%,
            rgba(255,255,255,0) 62%),
        linear-gradient(0deg, var(--surface) 0%, rgba(255,255,255,0) 16%);
}
/* Vignette: kostet im Gegensatz zu einem Postpass im Shader keine Füllrate.
   Von .42 auf .24 zurückgenommen und der klare Kern von 42 auf 55 % erweitert –
   in der alten Stärke lag über den Bildrändern ein grauer Schleier, der die
   Tiefen zumatschte, statt den Blick zu führen. */
.stage__vignette {
    position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: radial-gradient(118% 88% at 50% 45%, transparent 55%, rgba(12,17,11,.24) 100%);
}

/* Beschriftung des angeflogenen Bildpunkts – HTML statt Canvas, damit sie
   scharf bleibt. Die Position setzt scene-flug.js jeden Frame per transform.
   (Im Geschwisterprojekt existiert diese Regel, wird aber von keiner Zeile
   JavaScript benutzt – hier ist sie tatsächlich verdrahtet.) */
.stage__pin {
    position: absolute; left: 0; top: 0; z-index: 2;
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .35rem .8rem .35rem .55rem;
    background: rgba(255,255,255,.94);
    border: 1px solid var(--brand-100);
    border-radius: 999px;
    box-shadow: var(--shadow);
    font-size: .82rem; font-weight: 700; color: var(--slate-900);
    white-space: nowrap; pointer-events: none;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0; transition: opacity .35s ease;
}
.stage__pin.is-in { opacity: 1; }
.stage__pin[hidden] { display: none; }
.stage__pin-dot {
    width: 9px; height: 9px; border-radius: 50%; background: var(--brand);
    box-shadow: 0 0 0 4px rgba(153,192,70,.28);
}

.hero__stagegrid { position: relative; z-index: 2; }
.hero--stage .hero__copy { max-width: 36rem; }
.hero--stage .hero__sub  { max-width: 34ch; }

/* ---------- Themenkarte zur Kamerafahrt ----------------------------------
   Anders als im Geschwisterprojekt wechselt die Karte NICHT zwischen vier
   Ecken. Dort ist jeder angeflogene Raum identisch gerahmt, die Eckwechsel
   erzeugen die fehlende Abwechslung. Hier variiert die Bildgröße ohnehin von
   Station zu Station – eine alle sieben Sekunden umspringende Karte wäre nur
   unruhig. Ein fester Platz wirkt ruhiger und teurer.
   ------------------------------------------------------------------------ */
.topic--anchored {
    position: absolute; margin-top: 0;
    bottom: 6%; right: 2.4rem;
    width: min(23rem, 33vw); z-index: 3;
    transition: opacity .35s ease;
}
/* Beim Themenwechsel blendet nur der Inhalt um – Punkte und Pause-Knopf
   bleiben durchgehend bedienbar. */
.topic__body { transition: opacity .24s ease; }
.topic__body.is-out { opacity: 0; }
.topic--anchored:not(.is-in) { opacity: 0; pointer-events: none; }

.topic {
    margin-top: clamp(1.6rem, 4vh, 2.4rem);
    max-width: 30rem;
    background: rgba(255,255,255,.86);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand);
    border-radius: var(--radius);
    padding: 1rem 1.25rem 1.1rem;
    box-shadow: var(--shadow);
    opacity: 0; transform: translateY(10px);
    transition: opacity .4s ease, transform .4s ease;
}
.topic.is-in { opacity: 1; transform: none; }
.topic__eyebrow {
    display: flex; align-items: center; gap: .5rem;
    font-size: .72rem; font-weight: 800;
    letter-spacing: .09em; text-transform: uppercase; color: var(--brand-700);
    margin-bottom: .3rem;
}
.topic__dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--brand);
    box-shadow: 0 0 0 4px rgba(153,192,70,.22); flex: none;
}
.topic__title { display: block; color: var(--slate-900); font-size: 1.08rem; font-weight: 800; }
.topic__text  { font-size: .95rem; margin-top: .3rem; }
.topic__link  { display: inline-flex; align-items: center; gap: .3rem; margin-top: .6rem; font-weight: 700; font-size: .88rem; }
.topic__link svg { width: 1rem; height: 1rem; }

/* Steuerleiste: Punkte + Pause.
   Sichtbar nur, wenn die Szene wirklich läuft – ohne laufende Kamerafahrt
   steuern die Punkte nichts und dürfen deshalb gar nicht erst erscheinen.
   :has() erledigt das ohne eine Zeile JavaScript und ist in jedem Browser
   verfügbar, der WebGL2 kann. */
.topic__controls { display: none; align-items: center; gap: .6rem; margin-top: .9rem; }
.hero--stage:has(.stage.is-live) .topic__controls { display: flex; }
.topic__dots  { display: flex; gap: .35rem; }
.topic__dots button {
    width: 20px; height: 5px; border: 0; padding: 0; cursor: pointer;
    border-radius: 999px; background: var(--line);
    transition: background .25s ease, width .25s ease;
}
.topic__dots button:hover { background: var(--brand-100); }
.topic__dots button.is-active { background: var(--brand); width: 32px; }
.topic__dots button:focus-visible { outline: 3px solid rgba(153,192,70,.5); outline-offset: 3px; }
/* WCAG 2.2.2 verlangt für alles, was länger als fünf Sekunden automatisch
   läuft, eine Möglichkeit zum Anhalten. Eine Hover-Pause – wie sie das
   Geschwisterprojekt hat – erfüllt das nicht: sie ist weder per Tastatur
   noch per Touch erreichbar. */
.topic__pause {
    margin-left: auto; display: inline-grid; place-items: center;
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--surface);
    color: var(--slate-700); cursor: pointer; flex: none;
    transition: border-color .2s ease, color .2s ease;
}
.topic__pause:hover { border-color: var(--brand-600); color: var(--brand-700); }
.topic__pause svg { width: 15px; height: 15px; }
.topic__pause .ic-play  { display: none; }
.topic__pause[aria-pressed="true"] .ic-play  { display: block; }
.topic__pause[aria-pressed="true"] .ic-pause { display: none; }

@media (max-width: 900px) {
    .hero--stage { min-height: auto; }
    /* Auf schmalen Displays läuft keine Szene – die Karte steht im Fluss */
    .topic--anchored { position: static; width: auto; margin-top: 1.6rem; inset: auto; }
    .stage__scrim {
        background: linear-gradient(180deg,
            rgba(255,255,255,.95) 0%, rgba(255,255,255,.9) 55%, var(--surface) 100%);
    }
    .stage__vignette { display: none; }
    .hero--stage .hero__sub { max-width: none; }
    .topic { max-width: none; }
}

/* ---------- Stationsband „Ein Tag mit wupp.iT" ---------------------------
   Dieselben sechs Stationen wie im Hero, hier als echter, indexierbarer
   Inhalt. Das ist die tragende Entscheidung der ganzen Hero-Konstruktion:
   weil der Inhalt ohnehin unter dem Hero steht, darf die Kamerafahrt reine
   Dekoration sein – kein Verstecken, keine Duplicate-Content-Frage, und
   jede Rückfallstufe ist automatisch vollständig.
   Auf schmalen Displays wird daraus ein Karussell, ganz ohne JavaScript.
   ------------------------------------------------------------------------ */
.stationen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 980px) and (min-width: 601px) { .stationen { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
    .stationen {
        display: flex; overflow-x: auto; gap: 1rem;
        scroll-snap-type: x mandatory; scroll-behavior: smooth;
        padding-bottom: .8rem; margin-inline: calc(var(--gap) * -1);
        padding-inline: var(--gap);
        scrollbar-width: thin;
    }
    .stationen > * { flex: 0 0 86%; scroll-snap-align: center; }
}
@media (prefers-reduced-motion: reduce) { .stationen { scroll-behavior: auto; } }

.station { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.station__media { aspect-ratio: 16 / 10; border-radius: 0; }
.station__body { padding: 1.3rem 1.4rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.station__num {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    color: var(--brand-700); margin-bottom: .4rem;
}
.station__num i {
    font-style: normal; display: grid; place-items: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--brand-050); color: var(--brand-700); font-size: .7rem;
}
.station h3 { margin-bottom: .4rem; }
.station p { font-size: .95rem; }
.station .card__more { margin-top: auto; padding-top: .8rem; }

/* ---------- Netzwerk-Karten (Ausleitung in die Themenseiten) -------------
   Diese vier Themen werden hier bewusst NICHT nachgebaut. Sie laufen als
   eigenständige Seiten – die Karten führen dorthin und nirgends sonst hin. */
.netcard { display: flex; flex-direction: column; }
.netcard__domain {
    font-size: .82rem; font-weight: 700; color: var(--brand-700);
    display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; padding-top: .9rem;
}
.netcard__domain svg { width: .95rem; height: .95rem; }
/* Auch ein interner Verweis soll am Kachelboden sitzen, nicht direkt unter dem
   Text: Sonst stehen in einer Reihe drei Links auf drei Höhen. */
.netcard .card__more { margin-top: auto; padding-top: .9rem; }

/* ---------- Radiospots ----------------------------------------------------
   Der native Audiospieler lässt sich kaum gestalten; Chrome und Safari zeigen
   völlig verschiedene Leisten. Deshalb nur Breite, Höhe und Abstand setzen und
   den Rest dem Browser lassen. Ein nachgebauter Spieler in JavaScript wäre die
   Alternative und würde Tastaturbedienung, Lautstärkeregelung und die
   Wiedergabegeschwindigkeit neu erfinden müssen. Der eingebaute kann das.

   color-scheme sorgt dafür, dass der Spieler im Dunkelmodus dunkel gezeichnet
   wird. Ohne diese Zeile sitzt eine weiße Leiste in einer dunklen Kachel. */
.spot { display: flex; flex-direction: column; }
.spot__player {
    width: 100%; height: 40px; margin-top: auto; padding-top: 1rem;
    color-scheme: light dark;
}
.spot__meta {
    font-size: .8rem; color: var(--slate-600); margin-top: .5rem;
    font-variant-numeric: tabular-nums;
}
.spot__text { margin-top: .7rem; font-size: .9rem; }
.spot__text summary {
    cursor: pointer; font-weight: 700; color: var(--brand-700);
    padding: .2rem 0; border-radius: var(--radius-sm);
}
.spot__text summary:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 3px; }
.spot__text p { margin-top: .5rem; }

/* ---------- Partnerlogos --------------------------------------------------
   Die Logos entsprechen der jeweils erreichten Partnerstufe und liegen lokal.

   Jedes steht auf einer hellen Kachel – auch im Dunkelmodus. Herstellerlogos
   sind für ihren vorgesehenen Untergrund gezeichnet; sie auf Dunkel zu setzen
   oder umzufärben verstößt gegen praktisch jede Markenrichtlinie. Die Kachel
   ist deshalb kein Gestaltungseinfall, sondern die einzige saubere Lösung.

   In Ruhe leicht entsättigt, damit elf bunte Logos die Sektion nicht
   zerreißen; bei Hover und bei Tastaturfokus voll farbig. */
.partner {
    display: grid; gap: .9rem;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    align-items: stretch;
}
.partner__logo {
    display: grid; place-items: center;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1rem; min-height: 118px;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
/* Zwei Grenzen statt einer festen Größe: breite Wortmarken laufen gegen die
   Breite, hohe Badges gegen die Höhe. Beide kommen so auf ähnliches optisches
   Gewicht, ohne dass je Logo etwas eingestellt werden müsste.
   Bewusst KEIN Graustufenfilter: Diese Zeichen sind Partnerstufen-Badges mit
   eigenem Hintergrund und eigener Typografie – entsättigt werden daraus graue
   Klötze, und Markenrichtlinien verbieten das Umfärben ohnehin. */
.partner__logo img { width: auto; max-width: 100%; max-height: 86px; }
.partner__logo:hover,
.partner__logo:focus-within {
    transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-100);
}

@media (max-width: 560px) {
    .partner { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: .7rem; }
    .partner__logo { min-height: 96px; padding: .8rem; }
    .partner__logo img { max-height: 66px; }
}

/* ---------- Referenzprojekte: Block entfernt ------------------------------
   Die Projektkarten (.refs/.ref) sind aus referenzen.php verschwunden, weil
   dort jetzt nur noch Kundenstimmen stehen. Eine Selbstauskunft neben einem
   Zitat wiegt nichts, und beides nebeneinander sagte zum Teil dasselbe.
   Rund 12 Zeilen CSS sind mit ausgezogen; Markup und Datenquelle
   (partials/referenzen-data.php) ebenfalls. Wer die Karten zurückholen will,
   findet sie in der Versionsgeschichte.
   ---------------------------------------------------------------------- */

/* ---------- Öffnungszeiten-Block ---------- */
.hours { list-style: none; display: grid; gap: .4rem; font-size: .95rem; }
.hours li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dotted var(--line); padding-bottom: .35rem; }
.hours b { color: var(--slate-900); font-weight: 650; }

/* ---------- Dark Mode für die eigenen Komponenten ---------- */
@media (prefers-color-scheme: dark) {
    :root .stage__scrim {
        background:
            linear-gradient(100deg,
                var(--surface) 0%,
                rgba(16,22,15,.985) 40%,
                rgba(16,22,15,.94) 46%,
                rgba(16,22,15,.58) 53%,
                rgba(16,22,15,.16) 58%,
                rgba(16,22,15,0) 62%),
            linear-gradient(0deg, var(--surface) 0%, rgba(16,22,15,0) 16%);
    }
    /* Auf dunklem Grund nimmt die Vignette doppelt Zeichnung weg: Das Foto
       steht ohnehin schon gegen ein fast schwarzes Umfeld. */
    :root .stage__vignette {
        background: radial-gradient(118% 88% at 50% 45%, transparent 62%, rgba(12,17,11,.14) 100%);
    }
    :root .topic       { background: rgba(22,29,21,.88); }
    :root .stage__pin  { background: rgba(22,29,21,.94); }
    :root .topic__pause,
    :root .partner span { background: var(--surface-2); }
    @media (max-width: 900px) {
        :root .stage__scrim {
            background: linear-gradient(180deg,
                rgba(16,22,15,.95) 0%, rgba(16,22,15,.9) 55%, var(--surface) 100%);
        }
    }
}

/* ---------- Hinweiskasten -------------------------------------------------
   Für Angaben, die rechtlich stehen müssen und nicht im Fließtext untergehen
   dürfen – etwa der Hinweis nach Preisangabenverordnung. */
.notebox {
    background: var(--surface-2); border: 1px solid var(--line);
    border-left: 3px solid var(--brand);
    border-radius: var(--radius); padding: 1.1rem 1.3rem;
    font-size: .95rem; color: var(--slate-600);
}
.notebox strong { color: var(--slate-900); }

/* Bruttoangabe neben dem Nettopreis in der Hero-Pille. Etwas leiser gesetzt,
   damit die Pille nicht zur Preistabelle wird.
   Sie wird NICHT ausgeblendet – auch nicht auf schmalen Displays. Ein Preis,
   den die Preisangabenverordnung verlangt, darf nicht am Viewport hängen.
   Stattdessen bricht die Pille um. */
.badge__brutto { font-weight: 500; color: var(--slate-600); }
@media (max-width: 420px) {
    .badge { white-space: normal; text-align: left; }
    .badge__brutto { display: block; margin-left: 1.6rem; }
}

/* ---------- Markenhinweis in der Fußzeile ---------- */
/* Pflichtangaben nach Preisangabenverordnung und Markenrecht.
   Über die volle Breite der Fußzeile, kein Textmaß-Limit: Es sind zwei
   abgeschlossene Sätze, die gescannt und nicht gelesen werden – da wiegt die
   klare Abgrenzung als eigenes Band schwerer als die Zeilenlänge.
   Die beiden Sätze stehen im Markup als zwei Absätze, damit sie auf breiten
   Bildschirmen nicht zu einem Block verschmelzen. */
.footer__marke {
    border-top: 1px solid rgba(255,255,255,.12);
    margin-top: 1.2rem; padding-top: 1.1rem;
    font-size: .82rem; line-height: 1.55; color: rgba(255,255,255,.55);
}
.footer__marke p { color: inherit; font-size: inherit; }
.footer__marke p + p { margin-top: .45rem; }

/* ---------- Kundenstimmen ------------------------------------------------
   Die Grundform kommt aus der geteilten Basis. Hier nur die Anpassungen für
   figure/blockquote/figcaption statt div/p/cite, plus das Anführungszeichen
   als Ornament. */
/* Kopfzeile als Aufmacher: erst wer spricht, dann was gesagt wird.
   Das große Anführungszeichen von früher ist entfallen – zwei konkurrierende
   Aufmacher an derselben Ecke sind einer zu viel, und es überlappte in seiner
   ersten Fassung den Text. */
.testimonial { display: flex; flex-direction: column; }
.testimonial__kopf {
    display: flex; align-items: center; gap: .85rem;
    margin-bottom: 1rem;
}
.testimonial__kopf cite {
    font-style: normal; font-weight: 700;
    color: var(--slate-900); font-size: .95rem; line-height: 1.3;
}
.testimonial__kopf cite span {
    display: block; font-weight: 500; font-size: .88rem;
    color: var(--slate-600); margin-top: .1rem;
}

/* Initialen-Medaillon. Gleiche Anmutung wie .expert__avatar auf „Über uns",
   damit Personen auf der Seite überall gleich dargestellt werden. */
/* Gleiche Kantenlänge wie die Logokachel hoch ist – sonst haben Karten mit
   Initialen und Karten mit Logo unterschiedlich hohe Kopfzeilen und stehen im
   Raster nebeneinander versetzt. */
.testimonial__avatar {
    flex: none; width: 72px; height: 72px; border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 800; font-size: 1.25rem; letter-spacing: .02em;
    color: #14210a; background: linear-gradient(135deg, var(--brand), var(--brand-600));
    overflow: hidden;
}
.testimonial__avatar--foto { background: var(--surface-3); }
.testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Kundenlogo: helle rechteckige Kachel, nicht rund beschnitten und nicht auf
   Markengrün. Herstellermarken sind für ihren vorgesehenen Untergrund
   gezeichnet – dieselbe Regel wie bei den Partnerlogos. */
/* Feste Breite wäre hier falsch: Kundenlogos reichen vom quadratischen Signet
   bis zum sehr breiten Schriftzug. Bei fester Breite schrumpft ein
   Querformat-Logo auf unleserliche Höhe. Deshalb feste Höhe, Breite frei
   zwischen min und max – dieselbe Zwei-Grenzen-Logik wie bei den
   Partnerlogos.

   ACHTUNG, hier lag ein Fehler: Das Bild hatte `max-height: 100%`. Ein
   Prozentwert löst sich in einem Grid-Element nicht verlässlich gegen die
   Kachelhöhe auf – Chrome hat ihn ignoriert, das Logo lief 86 px hoch aus der
   56 px hohen Kachel heraus und legte sich über den Zitattext. Deshalb ein
   fester Wert über die Custom Property, und `overflow: hidden` als Netz, damit
   ein künftiges Logo im Fehlerfall beschnitten wird statt den Text zu
   überdecken. */
/* Die Höhe ist so gewählt, dass bei einem breiten Schriftzug die BREITE bindet
   und bei einem quadratischeren Logo die HÖHE. Nur dann bekommen beide
   ähnlich viel Fläche:
       Wirtschaftsförderung 3,10:1 → 174 × 56, begrenzt durch max-width
       Kinderschutzbund     1,77:1 →  99 × 56, begrenzt durch --logo-hoehe
   Mit den vorherigen 44 px band die Höhe für beide, und das quadratischere
   Logo rutschte auf 78 × 44 – halbe Fläche bei gleicher Wichtigkeit. */
.testimonial__logo {
    --logo-hoehe: 56px;              /* sichtbare Logohöhe, siehe img unten */
    flex: none; display: grid; place-items: center; overflow: hidden;
    min-width: 96px; max-width: 176px; height: 72px;
    padding: .4rem .55rem;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.testimonial__logo img {
    max-width: 100%; max-height: var(--logo-hoehe); width: auto; object-fit: contain;
}
@media (max-width: 560px) {
    .testimonial__logo { --logo-hoehe: 42px; max-width: 148px; height: 56px; }
}

.testimonial blockquote { margin: 0; }
.testimonial blockquote p { margin: 0; }

/* Einzelne Stimme auf einer Leistungsseite – dort steht sie allein und darf
   die ganze Breite nutzen. */
.testimonials--einzeln { grid-template-columns: 1fr; max-width: 46rem; }
/* Drei Spalten für die Referenzseite. Unter 980 px greift das Zweispaltige,
   unter 700 px das Einspaltige weiter unten. */
.testimonials--drei { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .testimonials--drei { grid-template-columns: repeat(2, 1fr); } }