/* Header & Navigation
 * #site-header ist nur ein Platzhalter-Div (von components.js gefüllt). Ohne
 * display:contents wäre er der Containing-Block für die sticky .site-header
 * und nur ~64px hoch — sticky würde nach 64px mit weg­scrollen. */
#site-header{display:contents}
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s,background .2s}
.site-header--scrolled{border-bottom-color:var(--color-border);box-shadow:var(--shadow-sm);background:rgba(255,255,255,.98)}
.site-header__inner{display:flex;align-items:center;gap:var(--space-5);padding-block:var(--space-3);min-height:64px}
.site-brand{display:inline-flex;align-items:center;gap:var(--space-2);text-decoration:none;flex-shrink:0}
.site-brand img{height:36px;width:auto}
.site-brand__text{font-weight:700;font-size:1.05rem;color:var(--color-ink);letter-spacing:-0.02em}
.site-brand:hover{text-decoration:none}

.site-nav{margin-left:auto;display:none}
@media (min-width:960px){.site-nav{display:flex;align-items:center;gap:var(--space-2)}}
.site-nav > ul{list-style:none;padding:0;margin:0;display:flex;gap:var(--space-1);align-items:stretch}
.site-nav li+li,.site-mobile-nav li+li,.breadcrumb li+li,.trust-strip li+li,.site-footer li+li{margin-top:0}
.site-nav > ul > li{display:flex;align-items:stretch}
.site-nav a:not(.button){display:inline-flex;align-items:center;padding:.55rem .85rem;border-radius:var(--radius-sm);text-decoration:none;color:var(--color-ink);font-weight:600;font-size:.97rem;line-height:1;min-height:44px;font-family:inherit;box-sizing:border-box}
.site-nav a:not(.button):hover{background:var(--color-primary-soft);color:var(--color-primary-dark)}
.site-nav a:not(.button)[aria-current="page"]{color:var(--color-primary-dark);background:var(--color-primary-soft)}

.site-nav__item--has-sub{position:relative;display:flex;align-items:stretch;gap:0}
.site-nav__item--has-sub > a{padding-right:.4rem;border-top-right-radius:0;border-bottom-right-radius:0}
.site-nav__sub-toggle{all:unset;display:inline-flex;align-items:center;justify-content:center;padding:0 .65rem;border-radius:var(--radius-sm);border-top-left-radius:0;border-bottom-left-radius:0;font-size:.97rem;font-weight:600;line-height:1;min-height:44px;color:var(--color-ink);cursor:pointer;box-sizing:border-box;font-family:inherit}
.site-nav__sub-toggle:hover,.site-nav__sub-toggle[aria-expanded="true"]{background:var(--color-primary-soft);color:var(--color-primary-dark)}
.site-nav__sub-toggle::after{content:"";display:inline-block;width:.55rem;height:.55rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
.site-nav__sub-toggle[aria-expanded="true"]::after{transform:rotate(-135deg) translate(-2px,-2px)}
.site-nav__sub{position:absolute;top:calc(100% + .25rem);left:0;margin:0;min-width:16rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:.4rem;display:flex;flex-direction:column;gap:.1rem;z-index:200}
/* Unsichtbare Brücke über die .25rem-Lücke zum Eltern-<li>, damit die Maus
 * beim Übergang nicht durchs Leere fährt und mouseleave nicht feuert. */
.site-nav__sub::before{content:"";position:absolute;top:-.25rem;left:0;right:0;height:.25rem}
.site-nav__sub a{display:block;padding:.6rem .8rem}
.site-nav__sub[hidden]{display:none}

.mobile-nav-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;width:44px;height:44px;border-radius:var(--radius-sm)}
@media (min-width:960px){.mobile-nav-toggle{display:none}}
.mobile-nav-toggle:hover{background:var(--color-primary-soft)}
.mobile-nav-toggle span,.mobile-nav-toggle span::before,.mobile-nav-toggle span::after{display:block;width:22px;height:2px;background:var(--color-ink);position:relative;transition:transform .2s,top .2s,opacity .15s}
.mobile-nav-toggle span::before,.mobile-nav-toggle span::after{content:"";position:absolute;left:0}
.mobile-nav-toggle span::before{top:-7px}
.mobile-nav-toggle span::after{top:7px}
.mobile-nav-toggle[aria-expanded="true"] span{background:transparent}
.mobile-nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.mobile-nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.site-mobile-nav{display:none;border-top:1px solid var(--color-border);background:var(--color-surface)}
.site-mobile-nav[data-open="true"]{display:block}
.site-mobile-nav ul{list-style:none;margin:0;padding:var(--space-3) 0}
.site-mobile-nav li{padding:0 var(--space-4)}
.site-mobile-nav a:not(.button){display:block;padding:.7rem 0;text-decoration:none;color:var(--color-ink);min-height:44px}
.site-mobile-nav details{padding:.4rem 0}
.site-mobile-nav summary{padding:.5rem 0;font-weight:600;cursor:pointer;list-style:none}
.site-mobile-nav summary::-webkit-details-marker{display:none}
.site-mobile-nav summary::after{content:"+";float:right;font-weight:400;font-size:1.4em;line-height:1}
.site-mobile-nav details[open] summary::after{content:"−"}
.site-mobile-nav details ul{padding:.2rem 0 .4rem var(--space-4)}
.site-mobile-nav .button--primary{margin:var(--space-3) var(--space-4)}

/* Buttons */
.button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.4rem;min-height:48px;border-radius:var(--radius-sm);font-weight:700;font-size:1rem;text-decoration:none;border:1px solid transparent;cursor:pointer;line-height:1.2;transition:transform .12s,box-shadow .15s,background .15s,color .15s,border-color .15s;text-align:center}
.button:hover{text-decoration:none}
.button--primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.button--primary:hover{background:var(--color-primary-dark);border-color:var(--color-primary-dark);box-shadow:var(--shadow-sm)}
.button--secondary{background:var(--color-surface);color:var(--color-primary);border-color:var(--color-primary)}
.button--secondary:hover{background:var(--color-primary-soft)}
.button--ghost{background:transparent;color:var(--color-primary);border-color:transparent}
.button--ghost:hover{background:var(--color-primary-soft)}
.button--accent{background:var(--color-accent);color:var(--color-primary);border-color:var(--color-accent)}
.button--accent:hover{background:var(--color-accent-dark);color:#fff;border-color:var(--color-accent-dark)}
.button--sm{padding:.5rem .9rem;min-height:36px;font-size:.93rem}

/* Hero */
.hero{padding-block:var(--space-8) var(--space-9);background:var(--color-primary);color:#fff}
.hero h1,.hero h2,.hero h3{color:#fff}
.hero__grid{display:grid;gap:var(--space-7);grid-template-columns:1fr;align-items:center}
@media (min-width:880px){.hero__grid{grid-template-columns:1.1fr 1fr}}
.hero h1{margin-bottom:var(--space-4)}
.hero__lede{font-size:clamp(1.05rem,1.7vw,1.22rem);color:rgba(255,255,255,.85);max-width:55ch;margin-bottom:var(--space-5)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.hero__cta .button--primary{background:var(--color-accent);color:var(--color-primary);border-color:var(--color-accent)}
.hero__cta .button--primary:hover{background:#fff;border-color:#fff;color:var(--color-primary)}
.hero__cta .button--secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.hero__cta .button--secondary:hover{background:rgba(255,255,255,.1);border-color:#fff}
.hero__media img{display:block;width:100%;height:auto;border-radius:var(--radius-md);box-shadow:var(--shadow-md);aspect-ratio:4/3;object-fit:cover}
@media (max-width:879px){.hero__media{max-width:80%;margin-inline:auto}}
.hero a:not(.button){color:#fff;text-decoration-color:rgba(255,255,255,.55)}
.hero a:not(.button):hover{color:#fff;text-decoration-color:#fff}

/* Page hero (smaller, for non-home pages) */
.page-hero{padding-block:var(--space-7) var(--space-6);background:var(--color-surface-alt);border-bottom:1px solid var(--color-border)}
.page-hero h1{margin-bottom:var(--space-3)}
.page-hero__lede{color:var(--color-muted);max-width:62ch;font-size:1.1em}
.page-hero__head{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)}
.page-hero__head h1{margin:0}
.page-hero__icon{width:56px;height:56px;background:var(--color-primary-soft);border-radius:var(--radius-sm);padding:.5rem;flex-shrink:0;object-fit:contain}

/* Breadcrumb */
.breadcrumb{padding-block:var(--space-3);font-size:.92rem;color:var(--color-muted)}
.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;align-items:baseline}
.breadcrumb li:not(:last-child)::after{content:"›";margin-left:.4rem;color:var(--color-border)}
.breadcrumb a{color:var(--color-muted);text-decoration:none}
.breadcrumb a:hover{color:var(--color-primary-dark);text-decoration:underline}
.breadcrumb [aria-current]{color:var(--color-ink)}

/* Trust strip */
.trust-strip{background:var(--color-surface-alt);border-block:1px solid var(--color-border);padding-block:var(--space-4)}
.trust-strip ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-6);justify-content:space-between;align-items:center}
.trust-strip li{display:flex;align-items:center;gap:.5rem;color:var(--color-muted);font-size:.95rem}
.trust-strip li::before{content:"✓";color:var(--color-link);font-weight:700}

/* Cards */
.card-grid{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr))}
.card{display:flex;flex-direction:column;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-5);transition:border-color .15s,transform .15s,box-shadow .15s}
.card:hover{border-color:var(--color-primary);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.card h3{margin-top:0;margin-bottom:var(--space-2)}
.card p{flex:1}

.service-card{display:flex;flex-direction:column;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-5);text-decoration:none;color:inherit;transition:border-color .15s,transform .15s,box-shadow .15s;min-height:100%}
.service-card:hover{border-color:var(--color-primary);transform:translateY(-2px);box-shadow:var(--shadow-sm);text-decoration:none}
.service-card__icon{width:64px;height:64px;background:var(--color-primary-soft);border-radius:var(--radius-sm);padding:.7rem;margin-bottom:var(--space-3);display:flex;align-items:center;justify-content:center}
.service-card__icon img{width:100%;height:100%;object-fit:contain}
.service-card h3{margin-block:0 var(--space-2);font-size:1.15rem}
.service-card p{flex:1;margin:0;color:var(--color-muted)}
.service-card__more{margin-top:var(--space-4);color:var(--color-link);font-weight:600;display:inline-flex;align-items:center;gap:.3rem}
.service-card:hover .service-card__more{color:var(--color-link-hover)}

/* Reference card */
.reference-card{display:flex;flex-direction:column;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;transition:border-color .15s,transform .15s,box-shadow .15s}
.reference-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm)}
.reference-card__media{position:relative;background:var(--color-surface-alt);aspect-ratio:4/3;overflow:hidden}
.reference-card__media img{width:100%;height:100%;object-fit:cover}
.reference-card__body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);flex:1}
.reference-card h3{margin:0;font-size:1.2rem}
.reference-card__meta{color:var(--color-muted);font-size:.93rem;margin:0}
.reference-card__kwp{font-weight:700;color:var(--color-primary);font-size:1rem}
.reference-card__kwp--empty{visibility:hidden}
.reference-card ul{margin:0;padding-left:1.1rem;font-size:.95rem}
.reference-card li{margin-top:.2rem}
.reference-card__body .tag-list{margin-top:auto;padding-top:var(--space-3)}
.reference-gallery{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));margin-top:var(--space-3)}
.reference-gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--color-border)}

/* Review cards (Kundenstimmen) */
.reviews-summary{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem;font-size:1.05rem;margin-bottom:var(--space-5)}
.reviews-summary__stars{color:#f5a623;letter-spacing:.05em;font-size:1.15rem}
.reviews-grid{grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr))}
.review-card{display:flex;flex-direction:column;gap:var(--space-2);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-5);transition:border-color .15s,box-shadow .15s}
.review-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm)}
.review-card__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .6rem;margin-bottom:0}
.review-card__author{font-weight:700;color:var(--color-ink)}
.review-card__meta{font-size:.85rem;color:var(--color-muted)}
.review-card__rating{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.review-card__stars{color:#f5a623;letter-spacing:.05em;font-size:1rem}
.review-card__date{color:var(--color-muted);font-size:.88rem}
.review-card__body{margin:0;color:var(--color-ink)}
.review-card__body--empty{color:var(--color-muted);font-style:italic}
.review-card__note{margin:0;font-size:.82rem;color:var(--color-muted)}
.review-card__source{margin-top:auto;padding-top:var(--space-2);font-size:.82rem;color:var(--color-muted);border-top:1px dashed var(--color-border)}
.reviews-foot{margin-top:var(--space-5);color:var(--color-muted);font-size:.93rem}

/* Tag list */
.tag-list{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:var(--space-2)}
.tag{display:inline-block;padding:.18rem .5rem;border-radius:4px;background:var(--color-primary-soft);color:var(--color-primary);font-size:.78rem;font-weight:600;letter-spacing:0.01em}

/* Filter bar — semitransparenter Hintergrund (kein backdrop-filter, da
 * Firefox das je nach Stacking-Kontext nicht rendert). */
.filter-bar{position:sticky;top:64px;z-index:50;background:rgba(255,255,255,.7);padding-block:var(--space-3);margin-bottom:var(--space-5);border-bottom:1px solid var(--color-border);box-shadow:0 1px 0 rgba(14,31,64,.04)}
.filter-bar__inner{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.filter-bar__count{margin-left:auto;color:var(--color-muted);font-size:.92rem}
.filter-button{padding:.45rem .85rem;border-radius:999px;background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-ink);font-size:.9rem;font-weight:500;min-height:40px}
.filter-button:hover{border-color:var(--color-primary)}
.filter-button[aria-pressed="true"]{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}

/* Feature list */
.feature-list{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-3)}
.feature-list li{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) 0}
.feature-list li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--color-primary);margin-top:.55rem;flex-shrink:0}

/* Process */
.process{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));counter-reset:step}
.process-step{position:relative;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-5);counter-increment:step}
.process-step::before{content:counter(step);position:absolute;top:-1rem;left:1.4rem;width:2.4rem;height:2.4rem;background:var(--color-primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.05rem}
.process-step h3{margin-block:.6rem 0;font-size:1.05rem}

/* CTA band */
.cta-band{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:#fff;padding-block:var(--space-8);text-align:center}
.cta-band h2{color:#fff;margin-top:0}
.cta-band p{color:rgba(255,255,255,.9);max-width:50ch;margin-inline:auto}
.cta-band .button--primary{background:var(--color-accent);color:var(--color-primary);border-color:var(--color-accent)}
.cta-band .button--primary:hover{background:#fff;border-color:#fff;color:var(--color-primary)}
.cta-band .button--secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.cta-band .button--secondary:hover{background:rgba(255,255,255,.12);border-color:#fff}
.cta-band__inner{display:flex;flex-direction:column;gap:var(--space-4);align-items:center}
.cta-band__cta{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center}

/* FAQ */
.faq{display:grid;gap:var(--space-3)}
.faq-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden}
.faq-item__q{display:flex;justify-content:space-between;align-items:center;width:100%;padding:var(--space-4);font-weight:600;font-size:1.02rem;text-align:left;color:var(--color-ink);min-height:56px;gap:var(--space-3)}
.faq-item__q:hover{background:var(--color-bg)}
.faq-item__q::after{content:"+";font-size:1.5rem;line-height:1;color:var(--color-link);transition:transform .2s;flex-shrink:0}
.faq-item__q[aria-expanded="true"]::after{content:"−"}
.faq-item__a{padding:0 var(--space-4) var(--space-4);color:var(--color-muted);max-width:none}
.faq-item__a[hidden]{display:none}
.faq-item__a > * {max-width:65ch}
.faq-item__a > * + * {margin-top:var(--space-3)}

/* Alert */
.alert{padding:var(--space-4);border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface)}
.alert--success{background:#eafaf2;border-color:#9bd5b9;color:#0e3f2a}
.alert--error{background:#fdecea;border-color:#f4a8a1;color:#691512}
.alert--info{background:var(--color-primary-soft);border-color:#b8cdec;color:var(--color-primary)}
.alert--warn{background:#fff7d6;border-color:var(--color-accent);color:var(--color-primary)}

/* Badge */
.badge{display:inline-flex;align-items:center;padding:.18rem .55rem;border-radius:999px;background:var(--color-primary-soft);color:var(--color-primary);font-size:.78rem;font-weight:600;letter-spacing:.02em}

/* Legal content */
.legal-content{max-width:var(--container-narrow);margin-inline:auto}
.legal-content h2{margin-top:var(--space-7);font-size:1.35rem}
.legal-content h3{font-size:1.1rem}
.legal-content p,.legal-content ul,.legal-content ol{max-width:none}
.legal-content pre{font-size:.78rem;white-space:pre-wrap;word-break:break-all}

/* Media figure */
.media-figure{margin:var(--space-6) 0}
.media-figure img{border-radius:var(--radius-md);width:100%;height:auto}
.media-figure figcaption{margin-top:var(--space-3);color:var(--color-muted);font-size:.93em;text-align:center}

/* Footer */
.site-footer{background:var(--color-primary-dark);color:#cfd8e8;padding-block:var(--space-7) var(--space-5);margin-top:var(--space-9)}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{text-decoration:underline;text-decoration-color:var(--color-accent)}
.site-footer__grid{display:grid;gap:var(--space-6);grid-template-columns:1fr;margin-bottom:var(--space-6)}
@media (min-width:760px){.site-footer__grid{grid-template-columns:2fr 1fr 1fr}}
.site-footer h2{color:#fff;font-size:1.05rem;margin-block:0 var(--space-3);letter-spacing:.04em;text-transform:uppercase;font-weight:700}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-top:.4rem}
.site-footer__address p{margin:.25rem 0;color:#cfd8e8}
.site-footer__claim{margin-top:var(--space-4);color:rgba(207,216,232,.75);font-size:.95rem;max-width:50ch}
.site-footer__bottom{padding-top:var(--space-5);border-top:1px solid rgba(255,255,255,.15);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-3);font-size:.88rem;color:rgba(207,216,232,.7)}

/* Reference teaser strip */
.references-teaser{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
.reference-teaser{display:block;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
.reference-teaser:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);text-decoration:none}
.reference-teaser__media{aspect-ratio:4/3;overflow:hidden;background:var(--color-surface-alt)}
.reference-teaser__media img{width:100%;height:100%;object-fit:cover}
.reference-teaser__body{padding:var(--space-4)}
.reference-teaser h3{margin:0;font-size:1.05rem}
.reference-teaser__meta{color:var(--color-muted);font-size:.9rem;margin-top:.25rem}