/* =========================================================================
   magic-orga.de – magiC-orga ® · Bürosoftware der wupp.iT
   Produktseite im Themen-Portal-Netzwerk (Dachseite: wupp.it).

   Eigenes, dependency-freies Design-System, alle Ressourcen lokal. 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 wupp.it, isb.nrw, dsgvo-datenschutz.com,
   meldeportal-hinweisgeberschutz.de und betriebskosten.app.

   Glücklicher Umstand, der hier tragend ist: das Akzentgrün der Software
   (#99C047 in public/css/tokens.css) und das Corporate-Grün des Netzwerks
   (#99C046) sind praktisch dieselbe Farbe. Der Token-Block bleibt deshalb
   unverändert – Produktoberfläche und Website passen ohne Anpassung zusammen.
   ========================================================================= */

:root {
    /* Marke */
    --brand:        #99C046;   /* wupp.iT Lime-Green = Akzent der Software */
    --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; }

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; }
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;
    /* Nur die im Text gesetzten weichen Trennstellen (­) nutzen.
       Mit `hyphens: auto` aus der Basis trennte der Browser in der
       Hauptzeile „vie-ler" statt an der vorgesehenen Stelle. */
    hyphens: manual;
}
.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); }
.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);
}
.card__icon svg { width: 24px; height: 24px; }
.card h3 { margin-bottom: .45rem; }
.card p { font-size: .98rem; }
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) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); 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) ---------- */
.expert { display: flex; gap: 1.3rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.7rem; box-shadow: var(--shadow); }
.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%; }
.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: .5rem; margin-top: .9rem; }
.expert__creds li { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 650; background: var(--brand-050); color: var(--brand-700); padding: .3rem .7rem; border-radius: 999px; }

/* ---------- 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); }
.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. */
.split--wide { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem,4vw,3rem); align-items: center; margin-bottom: 2.5rem; }
@media (max-width: 860px) { .split--wide { grid-template-columns: 1fr; } }

.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 Wortmarke steht hier in Originalfarbe, genau wie im Kopf – KEIN weißes
   Negativ und keine helle Unterlegung: Ein Negativ ist nicht die eingetragene
   Marke. Aus dem wuppit-Projekt war hier `filter: brightness(0) invert(1)`
   übernommen; dort ist die Bildmarke für helle Flächen gezeichnet, unsere
   nicht. Die Datei hat transparente Ecken, der Footer scheint also durch, und
   das Grün trägt auf dem dunklen Grund von selbst. */
.footer__brand img { height: 36px; width: auto; }
.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; }
/* Symbole in den Fußzeilen-Links (die Verweise nach außen tragen ein Pfeil-
   Zeichen). Ohne diese Regel greift keine Größenangabe – icon() gibt bewusst
   kein width/height mit, weil das sonst jede Komponente überschreiben müsste –
   und der Browser stellt das SVG in Standardgröße dar. Im Footer waren die
   beiden Zeichen dadurch mehr als doppelt so hoch wie die Zeile. */
.footer ul a { display: inline-flex; align-items: center; gap: .35rem; }
.footer ul svg { width: .85rem; height: .85rem; flex: none; opacity: .75; }
.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; }
    .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; }

/* ---------- 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; } }

/* 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; } }

/* ---------- Ö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; }


/* ---------- 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; }

/* =========================================================================
   magiC-orga – eigene Komponenten
   ========================================================================= */

/* ---------- Screenshot-Platzhalter ---------------------------------------
   Die Aufnahmen dürfen ausschließlich aus dem neuen System kommen und werden
   nachgeliefert (siehe assets/img/screenshots/PLATZHALTER.md). Solange eine
   Datei fehlt, rendert shot() diesen Kasten statt eines kaputten Bildes –
   gleiche Fläche, gleiche Bildunterschrift, damit das Layout schon jetzt
   beurteilt werden kann. Sobald die PNG-Datei liegt, verschwindet der Kasten
   von selbst; am Markup ändert sich nichts. */
.shot--pending { cursor: default; }
.shot--pending:hover { transform: none; box-shadow: var(--shadow-sm); }
.shot__platz {
    aspect-ratio: 16 / 10; display: grid; place-content: center; gap: .5rem;
    text-align: center; padding: 1.4rem;
    background:
        repeating-linear-gradient(-45deg, var(--surface-2) 0 12px, var(--surface-3) 12px 24px);
    color: var(--slate-600);
}
.shot__platz svg { width: 2rem; height: 2rem; margin-inline: auto; color: var(--brand-700); }
.shot__platz b { color: var(--slate-700); font-size: .95rem; }
.shot__platz code {
    font-size: .8rem; color: var(--slate-600); word-break: break-all;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- Aktionsfluss --------------------------------------------------
   Das Herzstück der Software in einem Bild: links läuft alles herein, in der
   Mitte wird daraus eine Aktion, rechts hängt sie an allem, wozu sie gehört.
   Bewusst aus Text und Rahmen gebaut statt als Grafik – so bleibt es
   durchsuchbar, skaliert mit der Schriftgröße und funktioniert im Dunkelmodus.
   Auf Schmalgeräten kippt die Reihe in eine Spalte, die Pfeile drehen sich. */
.flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 1rem; align-items: center; }
.flow__pfeil { color: var(--brand-700); display: grid; place-items: center; }
.flow__pfeil svg { width: 1.8rem; height: 1.8rem; }
.flow__box {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.2rem 1.1rem; box-shadow: var(--shadow-sm); height: 100%;
}
.flow__box--mitte { border-color: var(--brand); box-shadow: 0 18px 40px -24px rgba(127,167,54,.9); }
.flow__box h3 { font-size: 1rem; margin-bottom: .2rem; }
.flow__box > span { display: block; font-size: .85rem; color: var(--slate-600); margin-bottom: .8rem; }
.flow__liste { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.flow__liste li {
    border: 1px solid var(--line); border-radius: 999px; padding: .3rem .7rem;
    font-size: .85rem; font-weight: 600; color: var(--slate-700); background: var(--surface-2);
}
.flow__box--mitte .flow__liste li { background: var(--brand-050); border-color: var(--brand-100); color: var(--brand-700); }
@media (max-width: 900px) {
    .flow { grid-template-columns: 1fr; }
    .flow__pfeil svg { transform: rotate(90deg); }
}

/* ---------- Preisrechner --------------------------------------------------
   Ein Schieberegler statt drei Tarifkacheln: der Preis hängt allein an der
   Nutzerzahl, und genau die soll man anfassen können. Ohne JavaScript bleibt
   die Staffeltabelle darunter die vollständige Auskunft – der Regler ist
   Zugabe, keine Voraussetzung. */
.rechner {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: var(--shadow-sm);
    display: grid; gap: 1.4rem; max-width: 760px; margin-inline: auto;
}
.rechner__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .6rem; }
.rechner__kopf label { font-weight: 700; color: var(--slate-900); }
.rechner__nutzer { font-weight: 850; font-size: 1.6rem; color: var(--brand-700); letter-spacing: -.02em; }
.rechner input[type="range"] { width: 100%; accent-color: var(--brand-600); height: 1.6rem; }
.rechner__skala { display: flex; justify-content: space-between; font-size: .8rem; color: var(--slate-400); font-weight: 600; }
.rechner__ergebnis { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .rechner__ergebnis { grid-template-columns: 1fr; } }
.rechner__feld { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.rechner__feld span { display: block; font-size: .85rem; color: var(--slate-600); font-weight: 650; }
.rechner__feld b { display: block; font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 850; color: var(--slate-900); letter-spacing: -.03em; margin-top: .2rem; }
.rechner__feld i { font-style: normal; font-size: .85rem; color: var(--slate-600); }

/* ---------- Staffel- und Vergleichstabellen ---------- */
.tabelle { width: 100%; border-collapse: collapse; font-size: .96rem; }
.tabelle caption { text-align: left; color: var(--slate-600); font-size: .9rem; padding-bottom: .7rem; }
.tabelle th, .tabelle td { padding: .8rem .9rem; border-bottom: 1px solid var(--line); text-align: left; }
.tabelle thead th { color: var(--slate-900); font-weight: 750; background: var(--surface-2); white-space: nowrap; }
.tabelle tbody tr:hover { background: var(--surface-2); }
.tabelle td.num, .tabelle th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabelle .ja { color: var(--brand-700); font-weight: 700; }
.tabelle .nein { color: var(--slate-400); }
/* Tabellen laufen auf schmalen Geräten in ihrem eigenen Kasten, nie die Seite */
.tabelle-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.tabelle-wrap .tabelle tbody tr:last-child td { border-bottom: none; }

/* ---------- App-Verweise ---------- */
.appbadges { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.3rem; }
.appbadge {
    display: inline-flex; align-items: center; gap: .5rem;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
    padding: .6rem 1rem; font-weight: 700; font-size: .92rem; color: var(--slate-700);
    box-shadow: var(--shadow-sm);
}
.appbadge:hover { border-color: var(--brand); text-decoration: none; color: var(--brand-700); }
.appbadge svg { width: 1.1rem; height: 1.1rem; color: var(--brand-700); }

/* ---------- Modulkachel mit Stichwortfuß ---------- */
.card__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .9rem; }
.card__tags span {
    font-size: .78rem; font-weight: 650; color: var(--slate-600);
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: 999px; padding: .22rem .6rem;
}

/* ---------- Was heute nicht geht -----------------------------------------
   Übernommen von betriebskosten.app: dieselbe Darstellung für dieselbe Sache,
   nämlich die ehrliche Gegenliste zum Funktionsumfang. */
.roadmap { display: grid; gap: 1rem; }
.roadmap__item {
    display: flex; gap: 1.1rem; align-items: flex-start;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.3rem 1.4rem;
}
.roadmap__state {
    flex: none; font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    border-radius: 999px; padding: .35rem .75rem; margin-top: .15rem; white-space: nowrap;
    background: var(--surface-2); color: var(--slate-600); border: 1px solid var(--line);
}
.roadmap__item--next .roadmap__state { background: var(--brand-050); color: var(--brand-700); border-color: var(--brand-100); }
.roadmap__item h3 { font-size: 1.02rem; margin-bottom: .3rem; }
.roadmap__item p { font-size: .94rem; }
@media (max-width: 560px) { .roadmap__item { flex-direction: column; gap: .7rem; } }
.rechner__hinweis { font-size: .88rem; color: var(--slate-600); margin: 0; }

/* ---------- Sehr schmale Geräte: Kopfzeile ------------------------------
   Bei 360 px lief die Kopfzeile 3 px über die Fensterbreite hinaus – Logo,
   Telefonnummer, Test-Schaltfläche und Menüknopf passen dort nicht mehr in
   der Normalgröße nebeneinander. Gemessen im 360-px-Rahmen, nicht geschätzt:
   headless Chrome legt Fenster erst ab 500 px an, die Messung lief deshalb in
   einem iframe dieser Breite. */
@media (max-width: 400px) {
    .nav { gap: .5rem; }
    .nav__cta { gap: .3rem; }
    .nav__cta .btn { padding: .7rem .85rem; font-size: .88rem; }
    .nav__phone { padding: .45rem .4rem; }
    .nav__brand img { height: 30px; }
}
/* Im gerahmten Rollbereich braucht die Tabellenüberschrift eigenen Abstand –
   ohne ihn klebt der Preisangaben-Hinweis an der Rahmenlinie. */
.tabelle-wrap .tabelle caption { padding: .8rem .9rem .2rem; }

/* ---------- Selbst gehostetes Video ---------------------------------------
   Kein YouTube-Rahmen: Der würde die IP-Adresse an Google übertragen, bevor
   jemand eingewilligt hat, und damit einen Cookie-Banner nach sich ziehen –
   den es auf dieser Seite bewusst nicht gibt. Die Datei liegt auf dem eigenen
   Server, `media-src` fällt in der CSP auf `default-src 'self'` zurück.
   Geladen wird erst beim Klick (preload="none"). */
.film { margin: clamp(1.4rem, 3vw, 2.2rem) 0; }
.film video {
    width: 100%; display: block; border-radius: var(--radius);
    border: 1px solid var(--line); background: #000; box-shadow: var(--shadow-sm);
}
.film figcaption {
    margin-top: .7rem; font-size: .92rem; color: var(--slate-600);
    border-left: 3px solid var(--brand-100); padding-left: .8rem;
}
.film__platz {
    aspect-ratio: 16 / 9; display: grid; place-content: center; gap: .5rem; text-align: center;
    padding: 1.4rem; border-radius: var(--radius); border: 1px solid var(--line);
    background: repeating-linear-gradient(-45deg, var(--surface-2) 0 12px, var(--surface-3) 12px 24px);
    color: var(--slate-600);
}
.film__platz svg { width: 2.4rem; height: 2.4rem; margin-inline: auto; color: var(--brand-700); }
.film__platz b { color: var(--slate-700); }
.film__platz code {
    font-size: .8rem; word-break: break-all;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- Referenzbilder in den Kundenstimmen -------------------------
   Fotos und Logos kommen vom Altauftritt als runde Ausschnitte mit weißer
   Kreisfläche und transparenten Ecken. Deshalb weißer Grund statt des grünen
   Verlaufs, der unter den Initialen liegt: Ein dunkles Logo auf Markengrün
   wäre im Dunkelmodus nicht mehr zu lesen, und Herstellermarken werden nicht
   umgefärbt. Der Behälter beschneidet auf einen exakten Kreis – die Vorlagen
   sind an den Rändern nicht ganz rund. */
.testimonial__avatar--foto,
.testimonial__avatar--logo { background: #fff; }
/* Kein padding und kein `contain`: Die Vorlagen sind bereits kreisrunde
   Medaillons mit eingepasster Marke – der Abstand steckt im Bild, nicht hier.
   `cover` füllt das Rund damit exakt aus. */
.testimonial__avatar--logo img,
.testimonial__avatar--foto img { object-fit: cover; }

/* Die bessere Spalte in der Gegenüberstellung leicht hervorheben – ohne die
   andere schlechtzumachen. Reine Farbe, keine Häkchen und keine Kreuze. */
.tabelle td.gut { color: var(--slate-900); background: var(--brand-050); }

/* ---------- Aufklappbare Staffel im Preisrechner -------------------------
   Die Tabelle stand vorher als eigener Abschnitt unter dem Regler und zeigte
   genau dasselbe. Jetzt liegt sie in derselben Karte und ist einen Klick
   entfernt – über <details>, also auch ohne JavaScript erreichbar. */
.staffel { border-top: 1px solid var(--line); padding-top: 1rem; }
.staffel summary {
    list-style: none; cursor: pointer; font-weight: 700; color: var(--brand-700);
    display: inline-flex; align-items: center; gap: .45rem; font-size: .95rem;
}
.staffel summary::-webkit-details-marker { display: none; }
.staffel summary::after {
    content: ""; width: 9px; height: 9px; flex: none;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform .2s ease;
}
.staffel[open] summary::after { transform: rotate(-135deg); }

/* ---------- Staffel als Band auf der Startseite --------------------------
   Dort genügt der Überblick; die Tabelle mit vier Spalten Zahlen gehört auf
   die Preisseite. Auch eine Frage des Tons: Unter der Überschrift „Ab X €
   pro Kopf. Punkt." wirkt ein Zahlenwerk wie ein Widerspruch. */
.staffelband { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.staffelband div {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: .9rem 1.2rem; text-align: center; box-shadow: var(--shadow-sm); min-width: 9.5rem;
}
.staffelband span { display: block; font-size: .85rem; color: var(--slate-600); font-weight: 650; }
.staffelband b { display: block; font-size: 1.5rem; font-weight: 850; color: var(--slate-900); letter-spacing: -.02em; }
.staffelband i { font-style: normal; font-size: .8rem; color: var(--slate-600); }

/* Symbol im Fließtext einer Kontaktzeile (der Verweis nach außen trägt ein
   Pfeil-Zeichen). Die Regel oben gilt nur für das Symbol in der .ic-Kachel. */
.contact__row a svg { width: .8rem; height: .8rem; opacity: .75; vertical-align: -.05em; }

/* ---------- Erweiterungen im Preisrechner ---------- */
.rechner__module { border: 0; padding: 0; margin: 0; display: grid; gap: .6rem; }
.rechner__module legend { font-weight: 700; color: var(--slate-900); padding: 0; margin-bottom: .2rem; }
.rechner__modul {
    display: flex; gap: .7rem; align-items: flex-start; cursor: pointer;
    border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem;
    background: var(--surface-2); transition: border-color .15s ease, background .15s ease;
}
.rechner__modul:hover { border-color: var(--brand-600); }
.rechner__modul:has(input:checked) { border-color: var(--brand); background: var(--brand-050); }
.rechner__modul input { margin-top: .25rem; accent-color: var(--brand-600); flex: none; }
.rechner__modul b { display: block; color: var(--slate-900); font-size: .98rem; }
.rechner__modul i { font-style: normal; display: block; font-size: .86rem; color: var(--slate-600); }
/* Die Aufstellung erklärt die Summe: 10 × 14,99 € + 34,99 € (office) = 184,89 € netto */
.rechner__aufstellung {
    margin: 0; font-size: .9rem; color: var(--slate-600); font-variant-numeric: tabular-nums;
}

/* Fehlt live die Aufnahme neben einem Text (PLATZHALTER_ZEIGEN = false), bleibt
   nur ein Kind im Raster übrig. Es nimmt dann die volle Breite ein, mit einer
   lesbaren Zeilenlänge statt einer leeren rechten Spalte. */
.hero__grid > :only-child,
.split > :only-child,
.split--wide > :only-child { grid-column: 1 / -1; max-width: 46rem; }

/* Navigationsknopf: auf schmalen Bildschirmen die kurze Fassung, sonst schiebt
   „Beratungstermin“ das Menüsymbol aus dem Bild. */
.nur-schmal { display: none; }
@media (max-width: 480px) { .nur-breit { display: none; } .nur-schmal { display: inline; } }

/* Hero ohne Dashboard-Aufnahme: die Funktionsbereiche als Übersicht. */
.hero__module {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); padding: 1.5rem;
}
.hero__module-kopf {
    font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--brand-700); margin-bottom: 1rem;
}
.hero__module ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.hero__module a {
    display: flex; align-items: center; gap: .75rem; padding: .55rem .6rem; border-radius: 10px;
    color: var(--slate-900); font-weight: 600; font-size: .95rem; line-height: 1.3;
}
.hero__module a:hover { background: var(--surface-2); text-decoration: none; }
.hero__module .card__icon { width: 38px; height: 38px; margin: 0; flex: none; border-radius: 10px; }
.hero__module .card__icon svg { width: 20px; height: 20px; }
@media (max-width: 480px) { .hero__module ul { grid-template-columns: 1fr; } }

/* AGB: Inhaltsübersicht und Absätze mit hängendem Einzug „(1)“, „(2)“ … */
.legal-toc {
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
    padding: 1.1rem 1.4rem; margin: 1.6rem 0 .5rem;
}
.legal-toc h2 { font-size: 1rem; margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .06em; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2rem; }
.legal-toc li { break-inside: avoid; padding: .15rem 0; }
.legal-toc a { color: var(--slate-700); }
.legal-toc a:hover { color: var(--brand-700); }
@media (max-width: 640px) { .legal-toc ol { columns: 1; } }
.legal .paragraf { scroll-margin-top: 90px; }
.legal ol.absaetze { list-style: none; margin: 0; padding: 0; counter-reset: absatz; display: grid; gap: .55rem; }
.legal ol.absaetze > li { counter-increment: absatz; position: relative; padding-left: 2.4rem; }
.legal ol.absaetze > li::before {
    content: "(" counter(absatz) ")"; position: absolute; left: 0; top: 0;
    font-variant-numeric: tabular-nums; color: var(--slate-500, #6b7280);
}

/* Eine einzelne Aufnahme in lesbarer Größe statt als Drittel im Galerieraster. */
.shot-einzeln { max-width: 1100px; margin-left: auto; margin-right: auto; }

/* KI-Band auf der Startseite */
.ki-band { margin-top: 2.5rem; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 2rem;
           align-items: center; background: var(--surface); border: 1px solid var(--brand-100);
           border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.4rem); box-shadow: var(--shadow-sm); }
.ki-band__kopf h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin: .6rem 0 .5rem; }
.ki-band__kopf p { margin-bottom: 1.2rem; }
.ki-band__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.4rem; }
.ki-band__liste li { border-left: 3px solid var(--brand); padding-left: .9rem; font-size: .95rem; }
.ki-band__liste b { display: block; color: var(--slate-900); margin-bottom: .2rem; }
@media (max-width: 860px) { .ki-band { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ki-band__liste { grid-template-columns: 1fr; } }

/* Kasten „Passt auch zu Ihrem Betrieb“ (Startseite, Branchenseiten) */
.weitere { margin-top: 2.5rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem;
           background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg);
           padding: clamp(1.5rem, 3vw, 2.4rem); }
.weitere__kopf h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin-bottom: .6rem; }
.weitere__kopf p { margin-bottom: 1.2rem; }
.weitere__frage { font-weight: 700; color: var(--slate-900); margin-bottom: .6rem; }
.weitere__fuss { margin-top: .9rem; font-weight: 600; color: var(--brand-700); }
.notebox + .weitere { margin-top: 2rem; }
@media (max-width: 860px) { .weitere { grid-template-columns: 1fr; } }