/* =========================================================
   bausteine.css – alle Bausteine des Template-Baukastens
   Gliederung nach Bausteinliste A–L. Für ein Kundenprojekt nur
   die benötigten Abschnitte übernehmen (Kommentarköpfe „A1 …“).
   ========================================================= */

/* =========================================================
   A  GRUNDGERÜST
   ========================================================= */

/* ---------- A10 Ankündigungsleiste ---------- */
.announce{background:var(--color-accent-dark);color:var(--color-white);font-size:var(--fs-small);position:relative;z-index:31}
.announce .container{display:flex;align-items:center;justify-content:center;gap:16px;padding-block:9px;text-align:center}
.announce a{color:var(--color-white);font-weight:600}
.announce__close{background:none;border:0;color:var(--color-white);padding:4px;cursor:pointer;opacity:.85;flex:none;margin-left:auto}
.announce__close:hover{opacity:1}
.announce__close svg{width:18px;height:18px}
.announce p{flex:1}

/* ---------- A1 Kontaktleiste (Topbar) ---------- */
.topbar{font-size:.78125rem;color:var(--color-muted)}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:7px}
.topbar__contact{display:flex;gap:6px 20px;align-items:center;flex-wrap:wrap}
.topbar a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.topbar a:hover{color:var(--color-ink)}
.topbar svg{color:var(--color-accent);width:14px;height:14px}
.topbar__right{display:flex;align-items:center;gap:18px}
.topbar--line{border-bottom:1px solid var(--color-line)}
.topbar--dark{background:var(--color-ink);color:#cfc9c4}
.topbar--dark a:hover{color:var(--color-white)}
@media (max-width:768px){.topbar__mail,.topbar .social{display:none}}

/* ---------- A8 Sprachumschalter ---------- */
.lang{display:flex;gap:9px;font:600 .75rem/1 var(--font-body);letter-spacing:.06em;list-style:none;padding:0;margin:0}
.lang a{color:var(--color-muted);text-decoration:none}
.lang a:hover{color:var(--color-ink)}
.lang a[aria-current]{color:var(--color-ink)}
.topbar--dark .lang a[aria-current]{color:var(--color-white)}

/* ---------- Logo-Platzhalter „Ihr Logo“ (Guideline §7) ---------- */
.logo{display:inline-grid;justify-items:center;gap:5px;text-decoration:none;color:var(--color-ink);line-height:1}
.logo__name{font:400 1.875rem/1 var(--font-body);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.logo__tag{display:block;width:100%;background:var(--color-accent);color:var(--color-white);font:500 .5625rem/1 var(--font-head);text-transform:uppercase;letter-spacing:.2em;padding:5px 8px 4px;text-align:center;white-space:nowrap}
.logo--light{color:var(--color-white)}
.logo--small .logo__name{font-size:1.375rem}
.logo--small .logo__tag{font-size:.5rem;padding:4px 6px 3px}
@media (max-width:1024px){.logo__name{font-size:1.4375rem}.logo__tag{font-size:.5rem;padding:4px 6px 3px}}

/* ---------- A2 Header ---------- */
.site-header{position:sticky;top:0;z-index:30;background:var(--color-white);border-bottom:1px solid var(--color-line);transition:transform .3s ease,background .3s ease,box-shadow .3s ease}
.site-header__bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:14px}
.site-header__brand{flex:none}
.site-header__cta{flex:none}
.site-header__actions{display:flex;align-items:center;gap:14px}

/* Variante 1: Logo mittig, Menü darunter (ulf-meyer.com) */
.site-header--center .site-header__bar{flex-direction:column;gap:6px;padding-block:4px 0}
.site-header--center .main-nav__list{justify-content:center}
.site-header--center .site-header__cta{display:none}
/* Variante 2: Logo links, Menü rechts */
.site-header--split .main-nav{margin-left:auto}
.site-header--split .site-header__cta{display:none}
/* Variante 5: Logo links, Menü mittig, Button rechts */
.site-header--cta .main-nav{margin-inline:auto}
/* Variante 3: Menü-Button immer sichtbar */
.site-header--burger .site-header__cta{display:none}
/* Variante 4: transparent über dem Hero */
.site-header--overlay{position:fixed;left:0;right:0;background:transparent;border-bottom-color:transparent;color:var(--color-white)}
.site-header--overlay .site-header__cta{display:none}
.site-header--overlay:not(.is-scrolled) :is(.main-nav__link,.main-nav__toggle,.logo,.topbar,.topbar a,.lang a,.nav-toggle){color:var(--color-white)}
.site-header--overlay:not(.is-scrolled) .nav-toggle{border-color:rgba(255,255,255,.6)}
.site-header--overlay:not(.is-scrolled) .main-nav__link[aria-current]{color:var(--color-white);text-decoration:underline;text-underline-offset:6px}
.site-header--overlay.is-scrolled{background:var(--color-white);border-bottom-color:var(--color-line)}
.site-header--overlay .main-nav{margin-left:auto}
.has-overlay-header main>:first-child{margin-top:0}

/* A2a Verhalten beim Scrollen */
.site-header[data-behavior="shrink"].is-scrolled .site-header__bar{padding-block:6px}
.site-header[data-behavior="shrink"].is-scrolled .topbar{display:none}
.site-header[data-behavior="shrink"].is-scrolled .logo{transform:scale(.82)}
.site-header[data-behavior="shrink"].is-scrolled.site-header--center .site-header__bar{padding-block:2px 0}
.site-header .logo{transition:transform .3s ease;transform-origin:left center}
.site-header--center .logo{transform-origin:center top}
.site-header.is-hidden{transform:translateY(-100%)}
.site-header.is-scrolled{box-shadow:0 1px 0 var(--color-line)}

/* ---------- A3 Menü ---------- */
.main-nav__list{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:0 clamp(18px,3vw,44px);flex-wrap:nowrap}
.main-nav__item{position:relative;display:flex;align-items:center}
.main-nav__link{display:block;font:400 clamp(.8125rem,.73rem + .3vw,.9375rem)/1 var(--font-body);text-transform:uppercase;text-decoration:none;color:var(--color-ink);padding:12px 0 14px;white-space:nowrap}
.main-nav__link:hover,.main-nav__link[aria-current]{color:var(--color-accent)}
.main-nav__toggle{background:none;border:0;padding:6px 0 6px 5px;cursor:pointer;color:var(--color-ink);display:inline-flex}
.main-nav__toggle svg{width:12px;height:12px;transition:transform var(--ease)}
.main-nav__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.site-header--split .main-nav__link,.site-header--cta .main-nav__link,.site-header--overlay .main-nav__link{padding-block:14px}

/* Untermenü 1 Ebene */
.submenu{position:absolute;top:100%;left:-18px;min-width:230px;list-style:none;margin:0;padding:8px 0;background:var(--color-white);border:1px solid var(--color-line);box-shadow:var(--shadow);display:none;z-index:5}
.submenu a{display:block;padding:9px 18px;font-size:.875rem;text-decoration:none;color:var(--color-ink)}
.submenu a:hover,.submenu a[aria-current]{color:var(--color-accent);background:var(--color-accent-light)}
.main-nav__item.is-open>.submenu{display:block}
.submenu__group{position:relative}
.submenu__group>a{display:flex!important;justify-content:space-between;align-items:center;gap:12px}
.submenu__group>a::after{content:"";width:6px;height:6px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);flex:none}
.submenu--nested{top:-9px;left:100%;display:none}
.submenu__group:is(:hover,:focus-within)>.submenu--nested{display:block}

/* A3a Mega-Menü: Panel über die volle Inhaltsbreite unter dem Header */
.main-nav__item--mega{position:static}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--color-white);border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line);box-shadow:0 18px 30px rgba(40,30,20,.08);display:none;z-index:5;text-align:left}
.main-nav__item.is-open>.mega{display:block}
.mega__cols{display:grid;grid-template-columns:repeat(var(--mega-cols,5),minmax(0,1fr));gap:24px clamp(20px,3vw,44px);padding-block:34px 40px}
.mega__col{display:flex;flex-direction:column;gap:14px;min-width:0}
.mega__title{font:500 .9375rem/1.25 var(--font-head);text-transform:uppercase;letter-spacing:.06em;color:var(--color-accent)}
.mega__title a{text-decoration:none;color:inherit}
.mega__img{text-decoration:none;aspect-ratio:16/10;overflow:hidden;background:var(--color-accent-light);display:block}
.mega__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.mega__img:hover img{transform:scale(1.03)}
.mega__links{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mega__links a{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:.9375rem;text-decoration:none;color:var(--color-ink);line-height:1.35}
.mega__links a:hover,.mega__links a[aria-current]{color:var(--color-accent)}
.mega__links svg{width:22px;height:22px;color:var(--color-accent);flex:none}
.mega__teaser{background:var(--color-accent-light);padding:28px 28px 30px;display:grid;gap:14px;align-content:start;min-width:0}
.mega__teaser p{font-size:.9375rem}
/* Teaser-Spalte etwas breiter, damit Text und Button Luft haben */
.mega__cols:has(> .mega__teaser){grid-template-columns:repeat(calc(var(--mega-cols,5) - 1),minmax(0,1fr)) minmax(0,1.25fr)}
.mega__teaser .btn{justify-self:stretch;max-width:100%;white-space:normal;padding:13px 14px;letter-spacing:.08em}

/* A2b Vollbild-Menü */
.fullmenu{position:fixed;inset:0;z-index:60;background:var(--color-accent);color:var(--color-white);display:flex;flex-direction:column;overflow:auto;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.fullmenu.is-open{opacity:1;visibility:visible}
.fullmenu--demo{position:relative;inset:auto;z-index:auto;min-height:440px}
.fullmenu--demo .fullmenu__close{display:inline-flex;gap:8px;align-items:center}
.mega__box{display:flex;align-items:flex-end;aspect-ratio:16/10;background:var(--color-accent);color:var(--color-white);padding:14px 16px;font:500 .75rem/1.2 var(--font-head);letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.mega__col:nth-child(4) .mega__box{background:var(--color-accent-dark)}
.mega__col:nth-child(5) .mega__box{background:var(--color-ink)}
.fullmenu__top{display:flex;justify-content:space-between;align-items:center;padding-block:20px}
.fullmenu__close{background:none;border:1px solid rgba(255,255,255,.6);color:var(--color-white);padding:10px 14px;font:600 .75rem/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.fullmenu__list{list-style:none;margin:auto 0;padding:40px 0;display:grid;gap:6px}
.fullmenu__list a{font:var(--fw-light) clamp(1.75rem,1.2rem + 2.5vw,3.25rem)/1.25 var(--font-head);text-transform:uppercase;letter-spacing:.04em;color:var(--color-white);text-decoration:none}
.fullmenu__list a:hover,.fullmenu__list a:focus-visible{color:var(--color-ink)}
.fullmenu__foot{padding-block:24px 34px;border-top:1px solid rgba(255,255,255,.35);display:flex;gap:10px 30px;flex-wrap:wrap;font-size:.9375rem}
.fullmenu__foot a{color:var(--color-white);text-decoration:none}

/* Menü-Button */
.nav-toggle{display:none;align-items:center;gap:10px;background:none;border:1px solid var(--color-line);font:600 .75rem/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;padding:10px 12px;color:var(--color-ink);cursor:pointer}
.nav-toggle__bars{width:18px;height:12px;position:relative;display:inline-block}
.nav-toggle__bars::before,.nav-toggle__bars::after,.nav-toggle__bars span{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform var(--ease),opacity var(--ease)}
.nav-toggle__bars::before{top:0}.nav-toggle__bars span{top:5px}.nav-toggle__bars::after{top:10px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span{opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{transform:translateY(-5px) rotate(-45deg)}

/* Mobilmenü (≤ 1024 px) und Variante 3 (immer) */
@media (max-width:1024px){
  .site-header .site-header__bar,.site-header--center .site-header__bar{flex-direction:row;padding-block:10px}
  .site-header--center .logo{transform-origin:left center}
  .nav-toggle{display:inline-flex}
  .site-header__cta{display:none}
}
@media (max-width:1024px){
  .main-nav{position:absolute;left:0;right:0;top:100%;background:var(--color-white);border-bottom:1px solid var(--color-line);max-height:calc(100vh - var(--header-h));overflow:auto;display:none;margin:0!important}
  .main-nav.is-open{display:block}
  .main-nav__list{flex-direction:column;align-items:stretch;gap:0;width:min(var(--container),100% - 2 * var(--gutter));margin-inline:auto;padding-block:6px 16px}
  .main-nav__item{flex-wrap:wrap;border-bottom:1px solid var(--color-line);position:relative}
  .main-nav__link{flex:1;padding:14px 0;font-size:.9375rem}
  .main-nav__toggle{padding:12px 4px 12px 16px}
  .main-nav__toggle svg{width:14px;height:14px}
  .submenu,.mega{position:static;flex-basis:100%;box-shadow:none;border:0;min-width:0;padding:0 0 12px 14px}
  .submenu--nested{display:block;padding:0 0 4px 14px}
  .submenu__group>a::after{display:none}
  .mega .container{width:auto}
  .mega__cols{grid-template-columns:1fr;padding-block:4px 6px;gap:16px}
  .mega__img,.mega__box,.mega__teaser p{display:none}
  .mega__teaser{padding:14px}
  .site-header--overlay:not(.is-scrolled) .main-nav :is(.main-nav__link,.main-nav__toggle){color:var(--color-ink)}
}
.site-header--burger .nav-toggle{display:inline-flex}
.site-header--burger .main-nav{position:absolute;left:0;right:0;top:100%;background:var(--color-white);border-bottom:1px solid var(--color-line);display:none;margin:0}
.site-header--burger .main-nav.is-open{display:block}
.site-header--burger .main-nav__list{flex-direction:column;align-items:stretch;gap:0;width:min(var(--container),100% - 2 * var(--gutter));margin-inline:auto;padding-block:6px 16px}
.site-header--burger .main-nav__item{border-bottom:1px solid var(--color-line);flex-wrap:wrap}
.site-header--burger .main-nav__link{flex:1;padding:14px 0}
.site-header--burger :is(.submenu,.mega){position:static;flex-basis:100%;box-shadow:none;border:0;padding:0 0 12px 14px}
.site-header--burger .submenu--nested{display:block;padding:0 0 4px 14px}
.site-header--burger .submenu__group>a::after{display:none}
.site-header--burger .mega__cols{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));padding-block:4px 10px}
.site-header--burger .mega .container{width:auto}

/* ---------- A4 Ankerleiste ---------- */
.anchor-nav{position:sticky;top:var(--header-h);z-index:20;background:var(--color-white);border-bottom:1px solid var(--color-line)}
.anchor-nav .container{display:flex;align-items:center;gap:20px;min-height:52px}
.anchor-nav__links{display:flex;gap:28px;overflow-x:auto;scrollbar-width:none;flex:1;list-style:none;margin:0;padding:0}
.anchor-nav__links::-webkit-scrollbar{display:none}
.anchor-nav__links a{display:block;padding:14px 0;font:500 .75rem/1 var(--font-head);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--color-ink);white-space:nowrap;border-bottom:2px solid transparent}
.anchor-nav__links a:hover,.anchor-nav__links a[aria-current="true"]{color:var(--color-accent);border-bottom-color:var(--color-accent)}
.anchor-nav--center .anchor-nav__links{justify-content:center}
.anchor-nav .btn{flex:none}
@media (max-width:768px){.anchor-nav__links{gap:20px}.anchor-nav .btn{padding:9px 12px;font-size:.6875rem}}

/* ---------- A11 Breadcrumb ---------- */
.breadcrumb{font-size:.8125rem;color:var(--color-muted)}
.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px}
.breadcrumb li+li::before{content:"/";margin-right:8px;opacity:.6}
.breadcrumb a{color:inherit}
.breadcrumb [aria-current]{color:var(--color-ink)}
.breadcrumb--bar{border-bottom:1px solid var(--color-line)}
.breadcrumb--bar .container{padding-block:12px}
.page-head .breadcrumb,.page-head .breadcrumb [aria-current]{color:inherit;opacity:.92}

/* ---------- A9 Social-Media-Icons ---------- */
.social{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.social a{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;color:var(--color-accent);border:1px solid var(--color-line);transition:color var(--ease),background var(--ease),border-color var(--ease)}
.social a:hover{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-white)}
.social svg{width:16px;height:16px}
.social--plain a{border:0;width:28px;height:28px}
.social--plain a:hover{background:none;color:var(--color-ink)}
.social--labels a{width:auto;padding:0 12px;gap:8px;font:500 .6875rem/1 var(--font-head);letter-spacing:.1em;text-transform:uppercase;color:var(--color-ink);height:34px}
.social--labels svg{width:14px;height:14px}
.social--dark a{border-color:rgba(255,255,255,.2);color:var(--color-footer-link)}
.social--dark a:hover{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-white)}
.social--center{justify-content:center}

/* ---------- A6 Kontaktblock vor dem Footer ---------- */
.contact-block{text-align:center;padding-block:80px;border-top:1px solid var(--color-line)}
.contact-block .container{display:grid;gap:14px;justify-items:center}
.contact-block h2{font-size:clamp(1.75rem,1.505rem + 1.087vw,2.375rem)}
.contact-block__roles{color:var(--color-accent);text-transform:uppercase;font:400 clamp(.875rem,.7772rem + .4348vw,1.125rem)/1.5 var(--font-head);letter-spacing:.04em}
.contact-block__text{max-width:60ch;color:var(--color-muted);margin-top:-4px}
.contact-lines{display:flex;gap:8px 30px;flex-wrap:wrap;justify-content:center;list-style:none;margin:0;padding:0}
.contact-lines a,.contact-lines span{text-decoration:none;color:var(--color-ink);display:inline-flex;align-items:center;gap:8px}
.contact-lines a:hover{color:var(--color-accent)}
.contact-lines svg{color:var(--color-accent);width:16px;height:16px;flex:none}
.contact-block .btn-row{justify-content:center;margin-top:8px}
.contact-block--portrait .container{grid-template-columns:minmax(0,320px) minmax(0,1fr);text-align:left;justify-items:start;align-items:center;gap:20px 56px}
.contact-block--portrait .contact-block__body{display:grid;gap:14px;justify-items:start}
.contact-block--portrait .contact-lines,.contact-block--portrait .btn-row{justify-content:flex-start}
.contact-block--qr .container{grid-template-columns:minmax(0,1fr) auto;text-align:left;justify-items:start;align-items:center;gap:20px 56px}
.contact-block--qr .contact-block__body{display:grid;gap:14px;justify-items:start}
.contact-block--qr .contact-lines,.contact-block--qr .btn-row{justify-content:flex-start}
.qr{display:grid;gap:8px;justify-items:center;font-size:.8125rem;color:var(--color-muted)}
.qr svg{width:168px;height:168px;background:var(--color-white);padding:12px;box-shadow:0 0 0 1px var(--color-line),0 12px 28px -14px rgba(0,0,0,.25)}
.qr__dots{fill:var(--color-ink)}.qr__eye{stroke:var(--btn-bg,var(--color-accent))}.qr__pupil{fill:var(--btn-bg,var(--color-accent))}
@media (max-width:768px){
  .contact-block--portrait .container,.contact-block--qr .container{grid-template-columns:1fr}
  .contact-block--portrait figure{max-width:280px}
}

/* ---------- A5 Footer ---------- */
.footer{background:var(--footer-bg,var(--color-black));color:var(--color-footer-text);font-size:.8125rem}
.footer a{color:var(--color-footer-link);text-decoration:none}
.footer a:hover{color:var(--color-white)}
.footer__nav{display:flex;gap:6px 18px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
/* Variante 1: einzeilig */
.footer--simple .container{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:center;padding-block:22px}
/* Variante 2: dreispaltig */
.footer--columns{font-size:.875rem}
.footer__grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;padding-block:56px 40px}
.footer__title{font:500 .75rem/1.3 var(--font-head);letter-spacing:.14em;text-transform:uppercase;color:var(--color-white);margin-bottom:14px}
.footer__list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.footer__bottom{border-top:1px solid rgba(255,255,255,.12)}
.footer__bottom .container{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;padding-block:18px;font-size:.8125rem}
.footer address{font-style:normal;line-height:1.7}
.footer .logo{margin-bottom:16px}
.footer .logo__name{color:var(--color-white)}
.footer .logo__tag{background:var(--footer-logo-bg,var(--color-accent));color:var(--footer-logo-fg,var(--color-white))}
.footer__contact{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:6px}
.footer__contact a{display:inline-flex;gap:8px;align-items:center}
.footer__contact svg{width:14px;height:14px;color:var(--footer-icon,var(--color-accent))}
/* Variante 3: gestapelt zentriert */
.footer--stacked{text-align:center}
.footer--stacked .container{display:grid;gap:18px;justify-items:center;padding-block:48px 30px}
.footer--stacked .footer__nav{justify-content:center}
/* Variante 4: Sitemap-Footer */
.footer--sitemap .footer__grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:32px}
.footer__seals{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.footer__seals{margin-top:16px}
.footer__seals .seal{width:66px;height:66px;font-size:.5rem;color:var(--color-footer-link);border-color:rgba(255,255,255,.3)}
.footer__seals .seal b{font-size:.6875rem}
@media (max-width:1024px){
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer--sitemap .footer__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:768px){
  .footer__grid,.footer--sitemap .footer__grid{grid-template-columns:1fr 1fr;gap:28px}
  .footer__grid>:first-child{grid-column:1/-1}
}
@media (max-width:560px){.footer__grid,.footer--sitemap .footer__grid{grid-template-columns:1fr}}

/* ---------- A7 Nach-oben-Button ---------- */
.to-top{position:fixed;right:20px;bottom:20px;z-index:25;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:var(--color-ink);color:var(--color-white);border:0;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s,visibility .3s,transform .3s,background var(--ease)}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--color-accent)}
.to-top svg{width:18px;height:18px}
@media (max-width:768px){.has-quickbar .to-top{bottom:76px}}

/* ---------- A12 Mobile Schnellkontakt-Leiste ---------- */
.quickbar{display:none}
@media (max-width:768px){
  .quickbar{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:26;background:var(--color-ink);padding-bottom:env(safe-area-inset-bottom,0px)}
  .quickbar a{display:grid;justify-items:center;gap:3px;padding:10px 6px 9px;color:var(--color-white);text-decoration:none;font:500 .6875rem/1 var(--font-head);letter-spacing:.08em;text-transform:uppercase;border-left:1px solid rgba(255,255,255,.15)}
  .quickbar a:first-child{border-left:0;background:var(--color-accent)}
  .quickbar svg{width:20px;height:20px}
  .has-quickbar{padding-bottom:58px}
}
.quickbar--demo{display:grid;grid-template-columns:repeat(3,1fr);position:static;max-width:390px;background:var(--color-ink)}
.quickbar--demo a{display:grid;justify-items:center;gap:3px;padding:10px 6px 9px;color:var(--color-white);text-decoration:none;font:500 .6875rem/1 var(--font-head);letter-spacing:.08em;text-transform:uppercase;border-left:1px solid rgba(255,255,255,.15)}
.quickbar--demo a:first-child{border-left:0;background:var(--color-accent)}
.quickbar--demo svg{width:20px;height:20px}
@media (max-width:560px){
  .site-header__brand{min-width:0}
  .logo__tag{letter-spacing:.1em;font-size:.4375rem}
  .nav-toggle{padding:10px}
}
@media (max-width:400px){.nav-toggle{font-size:0;gap:0}}
/* Logo im Footer: kleiner, darf die erste Spalte nicht überragen */
.footer .logo .logo__name{font-size:1.125rem}
.footer .logo .logo__tag{font-size:.4375rem;letter-spacing:.14em;padding:4px 6px 3px}
.footer .logo{max-width:100%}
.footer--sitemap .footer__grid{grid-template-columns:minmax(0,1.35fr) repeat(4,minmax(0,1fr))}
@media (max-width:1024px){.footer--sitemap .footer__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:768px){.footer--sitemap .footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer--sitemap .footer__grid{grid-template-columns:1fr}}
.contact-block__brand{margin:0;line-height:0}.contact-block__brand img{width:min(300px,70vw);height:auto}

/* =========================================================
   B  SEITENKÖPFE UND HERO
   ========================================================= */

/* ---------- B1 Hero mit Vollbild ---------- */
.hero{position:relative;display:grid;min-height:clamp(460px,78vh,820px);color:var(--color-white);background:var(--color-accent);overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img,.hero__media video,.hero__media .ph{width:100%;height:100%;object-fit:cover}
.hero__overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(20,16,12,.62),rgba(20,16,12,.18))}
.hero.hero--tint .hero__overlay{background:var(--color-accent-dark);opacity:.86}
.hero--center .hero__overlay{background:rgba(20,16,12,.45)}
.hero__content{align-self:center;padding-block:80px;display:grid;gap:18px;justify-items:start}
.hero--center .hero__content{justify-items:center;text-align:center}
.hero :is(h1,h2){color:var(--color-white);font-weight:var(--fw-light);font-size:var(--fs-h1);max-width:20ch}
.hero--center :is(h1,h2){max-width:30ch}
.hero .eyebrow{color:var(--color-white);opacity:.9}
.hero__text{font-size:var(--fs-lead);max-width:56ch;opacity:.95}
.hero--center .hero__text{max-width:80ch}
.hero__line{width:64px;height:2px;background:var(--color-white);opacity:.85}
.hero__features{list-style:none;margin:4px 0 6px;padding:0;display:grid;gap:8px}
.hero__features li{display:flex;gap:10px;align-items:center;font-size:var(--fs-lead)}
.hero__features svg{width:20px;height:20px;flex:none}
.hero__features--row{display:flex;flex-wrap:wrap;gap:8px 26px}

/* B6 Hero mit Video-Hintergrund */
.hero__pause{position:absolute;right:var(--gutter);bottom:20px;z-index:2;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.6);color:var(--color-white);width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.hero__pause svg{width:16px;height:16px}

/* ---------- B2/B8 Slider (STANDARD §5, erweitert um Effekte) ---------- */
.slider{position:relative;overflow:hidden;background:var(--color-accent-light)}
.slider:focus-visible{outline-offset:-3px}
.slider__track{position:relative;aspect-ratio:var(--slider-ratio,1920/820)}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility .9s,transform .8s ease}
.slide.is-active{opacity:1;visibility:visible;z-index:1}
.slide img,.slide>.ph{width:100%;height:100%;object-fit:cover}
/* Effekt Schieben */
.slider[data-effect="slide"] .slide{opacity:1;transform:translateX(100%);transition:transform .8s cubic-bezier(.6,0,.2,1),visibility .8s}
.slider[data-effect="slide"] .slide.is-active{transform:none}
.slider[data-effect="slide"] .slide.is-prev{transform:translateX(-100%);visibility:visible}
.slider[data-effect="slide"].is-back .slide:not(.is-active):not(.is-prev){transform:translateX(-100%)}
.slider[data-effect="slide"].is-back .slide.is-prev{transform:translateX(100%)}
/* Ken Burns */
.slider[data-kenburns] .slide img{transform:scale(1);transition:transform 7s linear}
.slider[data-kenburns] .slide.is-active img{transform:scale(1.15)}
/* Höhe wählbar */
.slider--full .slider__track{aspect-ratio:auto;height:calc(100vh - var(--header-h))}
.slider--medium{--slider-ratio:16/7}
.slider--small{--slider-ratio:16/5}
@media (max-width:768px){.slider--hero{--slider-ratio:1000/1216}.slider--medium{--slider-ratio:4/3}.slider--small{--slider-ratio:16/9}}
/* Text auf der Folie */
.slide__content{position:absolute;inset:0;display:flex;align-items:center;background:linear-gradient(90deg,rgba(20,16,12,.55),rgba(20,16,12,0) 70%);color:var(--color-white)}
.slide__content--center{justify-content:center;text-align:center;background:rgba(20,16,12,.38)}
.slide__content .container{display:grid;gap:16px;justify-items:start;padding-bottom:40px}
.slide__content--center .container{justify-items:center}
.slide__content :is(h1,h2){color:var(--color-white);font-weight:var(--fw-light);font-size:var(--fs-h1);max-width:20ch}
.slide__content p{font-size:var(--fs-lead);max-width:52ch}
.slide__content .eyebrow{color:var(--color-white)}
/* Text-Einblendung je Folie */
.slider[data-text-anim] .slide__content .container>*{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.slider[data-text-anim] .slide.is-active .slide__content .container>*{opacity:1;transform:none}
.slider[data-text-anim] .slide.is-active .slide__content .container>:nth-child(2){transition-delay:.25s}
.slider[data-text-anim] .slide.is-active .slide__content .container>:nth-child(3){transition-delay:.45s}
.slider[data-text-anim] .slide.is-active .slide__content .container>:nth-child(4){transition-delay:.65s}
/* Steuerleiste unten: Pfeile, Punkte, Pause */
.slider__bar{position:absolute;left:0;right:0;bottom:14px;z-index:3;display:flex;align-items:center;justify-content:center;gap:12px}
.slider__dots{display:flex;gap:10px;align-items:center}
.slider__dot{width:11px;height:11px;border-radius:50%;border:2px solid #fff;background:transparent;padding:0;cursor:pointer;opacity:.85}
.slider__dot[aria-current="true"]{background:#fff;opacity:1}
.slider__btn{background:none;border:0;color:#fff;cursor:pointer;padding:4px;display:inline-flex;opacity:.85}
.slider__btn:hover{opacity:1}
.slider__btn svg{width:22px;height:22px}
.slider__pause svg{width:15px;height:15px}
/* Galerie-Variante: Leiste unter dem Bild, graue Punkte */
.slider--gallery{background:none}
.slider--gallery .slider__track{background:var(--color-accent-light)}
.slider--gallery .slider__bar{position:static;padding-top:14px}
.slider--gallery .slider__dot{width:9px;height:9px;border:0;background:#d6d1cc}
.slider--gallery .slider__dot[aria-current="true"]{background:var(--color-muted)}
.slider--gallery .slider__btn{color:var(--color-muted)}
.slider--gallery .slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;background:rgba(255,255,255,.88);font-size:.8125rem;color:var(--color-ink)}
.slider__caption{text-align:center;font-size:.8125rem;color:var(--color-muted);margin-top:8px;min-height:1.5em}
.slider__caption b{color:var(--color-ink);font-weight:600}
@media (max-width:768px){.slider__prev,.slider__next{display:none}}

/* ---------- B3 Hero geteilt ---------- */
.hero-split .container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center;padding-block:56px}
.hero-split__text{display:grid;gap:16px;align-content:center;justify-items:start}
.hero-split :is(h1,h2){font-size:clamp(2rem,1.663rem + 1.5vw,2.875rem);font-weight:var(--fw-light);text-transform:none;letter-spacing:0}
.hero-split__price{font-size:1rem}
.hero-split__price b{font:500 1.75rem/1 var(--font-head);color:var(--color-ink)}
.hero-split__price small{color:var(--color-muted)}
.hero-split__media img,.hero-split__media .ph{aspect-ratio:3/2;width:100%;object-fit:cover}
.hero-split__media img[src*="mock-"],.hero-split__media img[src*="hero-split-website"]{aspect-ratio:1920/1111;object-fit:contain}
.hero-split__media .slider__track{aspect-ratio:3/2}.hero-split__media .slider img{aspect-ratio:3/2;object-fit:cover;width:100%;height:100%}
.hero-split__media .slider__track{background:transparent}
.hero-split--reverse .hero-split__media{order:-1}
.hero-split--tint{background:var(--color-accent-light)}
@media (max-width:768px){.hero-split .container{grid-template-columns:1fr;gap:28px;padding-block:36px}.hero-split--reverse .hero-split__media{order:0}}

/* ---------- B4 Hero nur Text ---------- */
.hero-text .container{padding-block:clamp(56px,8vw,110px);display:grid;gap:18px;justify-items:center;text-align:center}
.hero-text :is(h1,h2){font-weight:var(--fw-light);font-size:var(--fs-h1);max-width:30ch}
.hero-text__quotes{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px;justify-items:center}
.hero-text__quotes li{font:italic 400 var(--fs-quote)/1.5 var(--font-body);color:var(--color-ink)}
.hero-text__lead{font-size:var(--fs-lead);max-width:80ch;color:var(--color-ink)}
.hero-text--accent{background:var(--color-accent);color:var(--color-white)}
.hero-text--accent .container{justify-items:center;text-align:center}
.hero-text--accent :is(h1,h2){color:var(--color-white);max-width:30ch}
.hero-text--accent .eyebrow{color:var(--color-white);opacity:.88}
.hero-text--accent .hero-text__lead{color:var(--color-white);opacity:.95}

/* ---------- B5 Seitenkopf Unterseite ---------- */
.page-head{background:var(--color-accent);color:var(--color-white);position:relative;isolation:isolate;overflow:hidden}
.page-head .container{padding-block:40px 46px;display:grid;gap:10px;justify-items:start}
.page-head :is(h1,h2){color:var(--color-white);font-weight:var(--fw-light);font-size:var(--fs-h1-page)}
.page-head .eyebrow{color:var(--color-white);opacity:.85}
.page-head p{max-width:none;opacity:.95}
.page-head .btn-row{margin-top:8px}
.page-head--compact .container{padding-block:26px 28px;gap:4px}
.page-head--compact :is(h1,h2){font-size:clamp(1.625rem,1.38rem + 1.087vw,2.25rem)}
.page-head--light{background:var(--color-accent-light);color:var(--color-text)}
.page-head--light :is(h1,h2){color:var(--color-ink)}
.page-head--light .eyebrow{color:var(--color-accent);opacity:1}
.page-head--image .container{padding-block:clamp(70px,10vw,140px)}
.page-head__media{position:absolute;inset:0;z-index:-2}
.page-head__media img,.page-head__media .ph{width:100%;height:100%;object-fit:cover}
.page-head--image::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(20,16,12,.48)}
.page-head--split .container{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;padding-block:48px}
.page-head--split .page-head__text{display:grid;gap:14px;justify-items:start}
.page-head--split .page-head__pic img,.page-head--split .page-head__pic .ph{width:100%;aspect-ratio:3/2;object-fit:cover}
.page-head--split .page-head__pic .slider{--slider-ratio:3/2}
.page-head--map .page-head__pic{border:1px solid rgba(255,255,255,.3)}
@media (max-width:768px){.page-head--split .container{grid-template-columns:1fr;gap:26px}}

/* ---------- B7 Parallax-Bildband (STANDARD §6) ---------- */
.parallax{height:clamp(280px,40vw,520px);background-image:var(--bg-sm,var(--bg));background-size:cover;background-position:center;background-color:var(--color-accent);position:relative;display:grid;align-items:center}
@media (min-width:1025px) and (hover:hover) and (prefers-reduced-motion:no-preference){
  .parallax{background-image:var(--bg);background-attachment:fixed}
}
.parallax--text::before{content:"";position:absolute;inset:0;background:rgba(20,16,12,.42)}
.parallax__content{position:relative;color:var(--color-white);text-align:center;display:grid;gap:14px;justify-items:center}
.parallax__content :is(h2,p){color:var(--color-white)}
.parallax__content p{font-size:var(--fs-lead);max-width:56ch}

/* Platzhalter hinter Text: Beschriftung klein in die Ecke */
:is(.hero__media,.page-head__media,.quote-band__media,.slider--hero .slide,.slider--medium .slide,.slider--full .slide,.slider--small .slide) .ph{align-items:flex-end;justify-content:flex-end;font-size:.75rem;padding:16px 20px;text-align:right}
.page-head--split .container{justify-items:stretch}
.page-head :is(.page-head__pic,.page-head__media) img:is([src*="portraet"],[src*="team-"],[src*="avatar"]){object-position:50% 12%}

/* =========================================================
   C  TEXT UND INHALT
   ========================================================= */

/* ---------- C1 Sektionskopf ---------- */
.sec-head{text-align:center;display:grid;gap:12px;justify-items:center;margin-bottom:50px}
.sec-head h2{font-size:var(--fs-h2)}
.sec-head p{max-width:none}
.sec-head--left{text-align:left;justify-items:start}
.sec-head--link{grid-template-columns:minmax(0,1fr) auto;text-align:left;justify-items:start;align-items:end;border-bottom:1px solid var(--color-line);padding-bottom:16px;margin-bottom:34px}
.sec-head--link h2{font-size:var(--fs-h2-sub)}
.sec-head--link>*{grid-column:1}
.sec-head--link .link-arrow{grid-column:2;grid-row:1/span 3;align-self:end}
.sec-head--on-dark :is(h2,p){color:var(--color-white)}
.sec-head--on-dark .eyebrow{color:var(--color-white);opacity:.85}
@media (max-width:560px){.sec-head--link{grid-template-columns:1fr}.sec-head--link .link-arrow{grid-column:1;grid-row:auto}}

/* ---------- C2 Intro-/Lead-Text ---------- */
.intro{text-align:center;display:grid;gap:14px;justify-items:center}
.intro p{font-size:var(--fs-lead);color:var(--color-ink)}
.intro--narrow p{max-width:62ch}
.intro--left{text-align:left;justify-items:start}

/* ---------- C3 Text zweispaltig ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.two-col--center{align-items:center}
.two-col--wide{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.two-col--portrait{grid-template-columns:minmax(0,320px) minmax(0,1fr);align-items:center}
.two-col__text{display:grid;gap:14px;align-content:start;justify-items:start}
.two-col__text h2{font-size:var(--fs-h2-sub)}
.two-col__text p+p{margin-top:0}
.two-col__media img,.two-col__media .ph{width:100%;aspect-ratio:3/2;object-fit:cover}
.two-col--portrait .two-col__media img,.two-col--portrait .two-col__media .ph{aspect-ratio:4/5}
.two-col--reverse .two-col__media{order:-1}
.img-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-bottom:40px}
.img-pair img,.img-pair .ph{width:100%;aspect-ratio:3/2;object-fit:cover}
figcaption{font-size:.8125rem;color:var(--color-muted);margin-top:8px}
@media (max-width:768px){
  .two-col,.two-col--wide,.two-col--portrait{grid-template-columns:1fr;gap:32px}
  .two-col--portrait .two-col__media{max-width:300px}
  .two-col--reverse .two-col__media{order:0}
}
@media (max-width:560px){.img-pair{grid-template-columns:1fr}}

/* ---------- C4 Fließtext mit Seitenleiste ---------- */
.text-aside{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:56px;align-items:start}
.aside{display:grid;gap:26px;background:var(--color-accent-light);padding:28px}
.aside h3{font-size:.9375rem;letter-spacing:.1em;margin-bottom:10px}
.aside p{font-size:.9375rem}
.facts{margin:0;display:grid;gap:14px}
.facts dt{font:500 .75rem/1.3 var(--font-head);color:var(--color-accent);letter-spacing:.1em;text-transform:uppercase}
.facts dd{margin:2px 0 0;font-size:.9375rem;color:var(--color-ink)}
@media (max-width:768px){.text-aside{grid-template-columns:1fr;gap:32px}}

/* ---------- C5 Gruppierte Listen ---------- */
.grouped{display:grid;gap:34px}
.grouped__group h3{font-size:var(--fs-h3);padding-bottom:10px;border-bottom:1px solid var(--color-line);margin-bottom:14px}
.grouped--cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
@media (max-width:1024px){.grouped--cols{grid-template-columns:1fr 1fr}}
@media (max-width:768px){.grouped--cols{grid-template-columns:1fr}}

/* ---------- C6 Listenstile ---------- */
.list-dots{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.list-dots li{position:relative;padding-left:20px;font-size:.9375rem;line-height:1.55}
.list-dots li::before{content:"";position:absolute;left:2px;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--color-accent)}
.list-checks{list-style:none;margin:4px 0 8px;padding:0;display:grid}
.list-checks li{position:relative;padding:9px 0 9px 26px;border-top:1px solid var(--color-line);font-size:.90625rem}
.list-checks li::before{content:"";position:absolute;left:4px;top:15px;width:9px;height:5px;border-left:1.6px solid var(--color-accent);border-bottom:1.6px solid var(--color-accent);transform:rotate(-45deg)}
.list-numbered{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:n}
.list-numbered li{counter-increment:n;display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:baseline}
.list-numbered li::before{content:counter(n,decimal-leading-zero);font:500 .875rem/1 var(--font-head);color:var(--color-accent);letter-spacing:.06em}
.list-icons{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.list-icons li{display:flex;gap:12px;align-items:center}
.list-icons svg{width:24px;height:24px;color:var(--color-accent);flex:none}

/* ---------- C7 Hinweisbox ---------- */
.note-box{padding:22px 26px;border-left:3px solid var(--color-accent);background:var(--color-white);display:grid;grid-template-columns:40px 1fr;gap:18px;align-items:start;font-size:.9375rem}
.note-box svg{width:40px;height:40px;color:var(--color-accent)}
.note-box b{display:block;font:500 .9375rem/1.3 var(--font-head);text-transform:uppercase;letter-spacing:.05em;color:var(--color-ink);margin-bottom:6px}
.note-box--tint{background:var(--color-accent-light);border-left:0}
.section--tint .note-box--tint{background:var(--color-white)}
.note-box--plain{grid-template-columns:1fr}

/* ---------- C8 Zitat-Band ---------- */
.quote-band{background:var(--color-accent);color:var(--color-white);position:relative;isolation:isolate;overflow:hidden}
.quote-band .container{padding-block:52px;display:grid;gap:18px;justify-items:center;text-align:center}
.quote-band blockquote{font:italic 400 var(--fs-quote)/1.6 var(--font-body);max-width:1080px}
.quote-band cite,.testimonial cite{font:400 1rem/1.3 var(--font-head);font-style:normal;text-transform:uppercase;letter-spacing:.06em}
.quote-band cite small,.testimonial cite small{display:block;font:400 .75rem/1.4 var(--font-body);text-transform:none;letter-spacing:0;opacity:.85;margin-top:4px}
.quote-band--image .container{padding-block:clamp(80px,10vw,150px)}
.quote-band--image blockquote{font-size:clamp(1.25rem,1rem + 1vw,1.75rem)}
.quote-band__media{position:absolute;inset:0;z-index:-2}
.quote-band__media img,.quote-band__media .ph{width:100%;height:100%;object-fit:cover}
.quote-band--image::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(20,16,12,.55)}

/* ---------- C9 Chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips--center{justify-content:center}
.chip{font:500 .75rem/1 var(--font-head);letter-spacing:.06em;text-transform:uppercase;padding:9px 13px;background:var(--color-accent-light);color:var(--color-ink)}
.section--tint .chip{background:var(--color-white)}
.chip--outline{background:none;border:1px solid var(--color-line)}

/* ---------- C10 Tabs ---------- */
.tabs__list{display:flex;justify-content:center;gap:10px;margin-bottom:30px;flex-wrap:wrap}
.tabs__tab{display:grid;gap:2px;min-width:170px;padding:12px 18px;border:1px solid var(--color-line);background:var(--color-white);cursor:pointer;font:500 .875rem/1.3 var(--font-head);color:var(--color-ink)}
.tabs__tab small{font:400 .75rem/1.3 var(--font-body);color:var(--color-muted)}
.tabs__tab[aria-selected="true"]{border:2px solid var(--color-accent);background:var(--color-accent-light);padding:11px 17px}
.tabs--left .tabs__list{justify-content:flex-start}
.tabs__panel:focus-visible{outline-offset:6px}
@media (max-width:560px){.tabs__tab{min-width:0;flex:1}}

/* ---------- C11 Akkordeon / F7 FAQ ---------- */
.accordion{display:grid;gap:10px}
.accordion details{border:1px solid var(--color-line);background:var(--color-white)}
.accordion summary{cursor:pointer;list-style:none;padding:16px 52px 16px 20px;font:500 1rem/1.4 var(--font-head);color:var(--color-ink);position:relative}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::before,.accordion summary::after{content:"";position:absolute;right:22px;top:50%;width:13px;height:1.5px;background:var(--color-accent);transition:transform var(--ease)}
.accordion summary::after{transform:rotate(90deg)}
.accordion details[open] summary::after{transform:rotate(0)}
.accordion summary:hover{color:var(--color-accent)}
.accordion__body{padding:0 20px 18px;display:grid;gap:10px}
.accordion--flush details{border:0;border-bottom:1px solid var(--color-line);background:none}
.accordion--flush summary{padding-left:0}
.accordion--flush .accordion__body{padding-left:0}
.faq-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:56px;align-items:start}
.faq-split .sec-head{position:sticky;top:calc(var(--header-h) + 30px);margin-bottom:0}
.faq-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;align-items:start}
.faq-cols>.accordion{gap:10px}
@media (max-width:768px){.faq-split,.faq-cols{grid-template-columns:1fr;gap:28px}.faq-split .sec-head{position:static}}

/* ---------- C12 Tabelle ---------- */
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:.9375rem;background:var(--color-white)}
.table caption{text-align:left;font:500 .75rem/1.3 var(--font-head);letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent);padding-bottom:12px}
.table th,.table td{padding:12px 16px;border-bottom:1px solid var(--color-line);text-align:left;vertical-align:top}
.table thead th{font:500 .75rem/1.3 var(--font-head);letter-spacing:.1em;text-transform:uppercase;color:var(--color-ink);border-bottom:2px solid var(--color-accent)}
.table td.num,.table th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--color-ink);font-weight:600}
.table--striped tbody tr:nth-child(odd){background:var(--color-accent-light)}

/* ---------- C13 Text im Rahmen ---------- */
.frame{position:relative;border:1px solid var(--color-accent);padding:40px 34px 34px;display:grid;gap:12px}
.frame__tag{position:absolute;top:-10px;left:24px;background:var(--color-accent);color:var(--color-white);font:500 .625rem/1 var(--font-head);letter-spacing:.12em;text-transform:uppercase;padding:5px 8px}
.frame--ink .frame__tag{background:var(--color-ink)}
.frame--ink{border:2px solid var(--color-ink)}
@media (max-width:560px){.frame{padding:34px 18px 22px}.frame__tag{left:14px}}

/* ---------- C14 Bild-Trenner / Slogan-Band ---------- */
.divider-img{height:clamp(200px,28vw,380px);overflow:hidden}
.divider-img img,.divider-img .ph{width:100%;height:100%;object-fit:cover}
.slogan-band{background:var(--color-accent-light);text-align:center}
.slogan-band .container{padding-block:46px}
.slogan-band p{font:var(--fw-light) clamp(1.5rem,1.1rem + 1.8vw,2.5rem)/1.25 var(--font-head);text-transform:uppercase;letter-spacing:.06em;color:var(--color-accent)}
.slogan-band--accent{background:var(--color-accent)}
.slogan-band--accent p{color:var(--color-white)}

/* =========================================================
   D  RASTER UND KARTEN
   ========================================================= */

/* ---------- D1 Icon-Raster ---------- */
.icon-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:40px 34px;text-align:center}
.icon-grid--4{--cols:4}
.icon-grid--6{--cols:6;gap:30px 20px}
.icon-grid__item{display:grid;gap:10px;justify-items:center;align-content:start}
.icon-grid__item h3{font-size:var(--fs-h3);letter-spacing:.02em}
.icon-grid__item p{font-size:var(--fs-item-text);max-width:34ch}
.icon-grid--6 .icon{--icon:46px}
.icon-grid--6 .icon-grid__item h3{font-size:1rem}
.icon-grid--6 .icon-grid__item p{font-size:.875rem}
.icon-grid--left{text-align:left}
.icon-grid--left .icon-grid__item{grid-template-columns:auto 1fr;justify-items:start;column-gap:18px}
.icon-grid--left .icon-grid__item .icon{grid-row:span 3;--icon:48px}
/* kompakte 5er-Leiste */
.icon-strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-block:1px solid var(--color-line)}
.icon-strip li{display:grid;gap:4px;justify-items:center;text-align:center;padding:24px 12px;border-left:1px solid var(--color-line)}
.icon-strip li:first-child{border-left:0}
.icon-strip .icon{--icon:34px}
.icon-strip b{font:500 .875rem/1.3 var(--font-head);text-transform:uppercase;letter-spacing:.04em;color:var(--color-ink)}
.icon-strip span{font-size:.8125rem;color:var(--color-muted)}
/* vertikale Icon-Liste */
.icon-stack{list-style:none;margin:0;padding:0;display:grid;gap:30px}
.icon-stack li{display:grid;grid-template-columns:auto 1fr;gap:4px 20px}
.icon-stack .icon{grid-row:span 3;--icon:48px}
.icon-stack h3{font-size:var(--fs-h3)}
.icon-stack .label{display:block}
@media (max-width:1024px){
  .icon-grid--4,.icon-grid--6{--cols:2}
  .icon-strip{grid-template-columns:repeat(3,1fr)}
  .icon-strip li:nth-child(4){border-left:0}
}
@media (max-width:768px){.icon-grid{--cols:1}.icon-grid--6{--cols:2}.icon-strip{grid-template-columns:1fr 1fr}.icon-strip li{border-left:0;border-top:1px solid var(--color-line)}}
@media (max-width:560px){.icon-grid--6{--cols:1}}

/* ---------- D2 Leistungsblöcke ---------- */
.blocks{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
.block{border:1px solid var(--color-line);padding:30px 30px 32px;display:grid;gap:10px;align-content:start;background:var(--color-white)}
.block .icon{--icon:54px}
.block h3{font-size:var(--fs-h3);margin-bottom:6px}
@media (max-width:768px){.blocks{grid-template-columns:1fr}.block{padding:24px 20px}}

/* ---------- D3 Einstiegskarten ---------- */
.paths{display:grid;grid-template-columns:1fr 1fr;box-shadow:var(--shadow)}
.path{background:var(--color-white);padding:40px 40px 44px;display:flex;flex-direction:column;gap:14px;border:1px solid var(--color-line)}
.path h2{font-size:clamp(1.5rem,1.353rem + .6522vw,1.875rem)}
.path .btn-row{margin-top:auto;padding-top:8px}
.path__note{font:500 .75rem/1.3 var(--font-head);letter-spacing:.08em;text-transform:uppercase;color:var(--color-ink)}
.teasers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.teaser{display:grid;gap:14px;align-content:start;justify-items:start;text-decoration:none;color:inherit}
.teaser__img{text-decoration:none;width:100%;aspect-ratio:16/10;overflow:hidden;background:var(--color-accent-light)}
.teaser__img img,.teaser__img .ph{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.teaser:hover .teaser__img img{transform:scale(1.03)}
.teaser h3{font-size:var(--fs-h3-lg)}
@media (max-width:768px){.paths,.teasers{grid-template-columns:1fr}.path{padding:30px 24px}}

/* ---------- D4 Karten mit Bild ---------- */
.cards{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:var(--gap)}
.cards--2{--cols:2}
.cards--4{--cols:4;gap:18px}
.card{display:flex;flex-direction:column;text-decoration:none;color:inherit;min-width:0}
.card__img{aspect-ratio:8/5;background:var(--color-accent-light);overflow:hidden;position:relative;outline:1px solid var(--color-line);outline-offset:-1px}
.card__img img,.card__img .ph{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .card__img img{transform:scale(1.03)}
.card__badge{position:absolute;top:12px;right:12px;background:var(--color-ink);color:var(--color-white);font:600 .625rem/1 var(--font-head);letter-spacing:.12em;text-transform:uppercase;padding:6px 8px;z-index:1}
.card__meta{padding-top:10px;display:grid;gap:2px;min-width:0}
.card__title{font-size:.875rem;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--ease)}
.card:hover .card__title{color:var(--color-accent)}
.card__year{font:500 1em var(--font-head);color:var(--color-accent);font-variant-numeric:tabular-nums;margin-right:.6em}
.card__what{font-size:.78125rem;color:var(--color-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cards--text .card__title{white-space:normal;font-size:var(--fs-h3)}
.cards--text .card__meta{gap:8px;padding-top:14px}
.cards--text .card__what{white-space:normal;font-size:.9375rem;color:var(--color-text)}
@media (max-width:1024px){.cards,.cards--4{--cols:2}}
@media (max-width:560px){.cards,.cards--2,.cards--4{--cols:1}}

/* ---------- D5 Kartenliste mit „Mehr anzeigen“ ---------- */
.more-list__group+.more-list__group{margin-top:44px}
.more-list__group h3{font-size:var(--fs-h3);margin-bottom:18px}
.more-list__items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.more-list__item{border:1px solid var(--color-line);padding:20px 22px;display:grid;gap:6px;align-content:start;background:var(--color-white)}
.more-list__item b{font:500 1rem/1.3 var(--font-head);color:var(--color-ink);text-transform:uppercase;letter-spacing:.03em}
.more-list__item span{font-size:.875rem;color:var(--color-muted)}
.more-list__more{margin-top:18px}
.more-list:not(.is-expanded) [data-more-hidden]{display:none}
@media (max-width:1024px){.more-list__items{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.more-list__items{grid-template-columns:1fr}}

/* ---------- D6 Werte-/Merkmale-Raster ---------- */
.values{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 40px}
.values li{border-top:2px solid var(--color-accent);padding-top:18px;display:grid;gap:8px;align-content:start}
.values h3{font-size:var(--fs-h3)}
.values p{font-size:var(--fs-item-text)}
@media (max-width:1024px){.values{grid-template-columns:1fr 1fr}}
@media (max-width:768px){.values{grid-template-columns:1fr}}

/* ---------- D7 Zertifikate / Qualifikationen ---------- */
.certs{display:grid;gap:18px}
.cert{border:1px solid var(--color-line);padding:24px 26px;display:grid;grid-template-columns:auto 1fr;gap:6px 22px;background:var(--color-white)}
.cert .icon{--icon:46px;grid-row:span 3}
.cert h3{font-size:var(--fs-h3)}
.cert .label{display:block}
.cert-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.cert-grid li{border:1px solid var(--color-line);padding:22px 18px;display:grid;gap:10px;justify-items:center;text-align:center;background:var(--color-white)}
.cert-grid b{font:500 .875rem/1.3 var(--font-head);text-transform:uppercase;letter-spacing:.04em;color:var(--color-ink)}
.cert-grid span{font-size:.8125rem;color:var(--color-muted)}
@media (max-width:1024px){.cert-grid{grid-template-columns:1fr 1fr}}

/* ---------- D8 Team ---------- */
.team{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:var(--gap)}
.team--3{--cols:3}
.team--2{--cols:2;max-width:720px}
.person{display:grid;gap:6px;align-content:start}
.person__img{aspect-ratio:4/5;overflow:hidden;background:var(--color-accent-light);margin-bottom:8px}
.person__img img,.person__img .ph{width:100%;height:100%;object-fit:cover}
.person h3{font-size:var(--fs-h3)}
.person__role{font:500 .75rem/1.4 var(--font-head);letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent)}
.person p{font-size:.9375rem}
.person__contact{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px;font-size:.875rem}
.person__contact a{color:var(--color-ink);text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.person__contact svg{width:14px;height:14px;color:var(--color-accent)}
@media (max-width:1024px){.team{--cols:2}}
@media (max-width:560px){.team,.team--3,.team--2{--cols:1}}

/* =========================================================
   E  VERTRAUEN
   ========================================================= */

/* ---------- E1 Kennzahlen ---------- */
.stats{background:var(--color-accent);color:var(--color-white)}
.stats__list{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(var(--cols,5),minmax(0,1fr))}
.stat{text-align:center;padding:34px 10px;border-left:1px solid rgba(255,255,255,.35);display:flex;flex-direction:column;gap:4px}
.stat:first-child{border-left:0}
.stat b{font:500 var(--fs-stat)/1 var(--font-head);font-variant-numeric:tabular-nums}
.stat span{font:400 .9375rem/1.2 var(--font-head);text-transform:uppercase;letter-spacing:.04em}
.stat small{font-size:.6875rem;text-transform:uppercase;letter-spacing:.08em;opacity:.85}
.stats--flat{background:var(--color-accent-dark)}
.stats--3 .stats__list{--cols:3}
.stats--4 .stats__list{--cols:4}
.stats--6 .stats__list{--cols:6}
@media (max-width:768px){
  .stats__list,.stats--3 .stats__list,.stats--4 .stats__list,.stats--6 .stats__list{--cols:2}
  .stat{border-left:0;border-top:1px solid rgba(255,255,255,.35)}
  .stat:nth-child(-n+2){border-top:0}
  .stat:last-child:nth-child(odd){grid-column:1/-1}
}
/* Kacheln mit Icon */
.stat-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:18px}
.stat-tile{border:1px solid var(--color-line);background:var(--color-white);padding:26px 20px;display:grid;gap:6px;justify-items:center;text-align:center}
.stat-tile .icon{--icon:40px;margin-bottom:6px}
.stat-tile b{font:500 var(--fs-stat)/1 var(--font-head);color:var(--color-ink);font-variant-numeric:tabular-nums}
.stat-tile span{font:500 .75rem/1.3 var(--font-head);letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted)}
@media (max-width:1024px){.stat-tiles{--cols:2}}
.sample-note{font-size:.75rem;color:var(--color-muted);text-align:center;margin-top:12px;font-style:italic}
.stats .sample-note{color:var(--color-white);opacity:.8;margin:0;padding-bottom:12px}

/* ---------- E2 Kundenstimmen ---------- */
/* Zitat-Slider (Markenfläche, Pfeile seitlich in der Leiste unten) */
.quote-slider{background:var(--color-accent);color:var(--color-white)}
.quote-slider .container{padding-block:52px 40px}
.quote-slider .slider{background:none}
.quote-slider .slider__track{aspect-ratio:auto;display:grid}
.quote-slider .slide{position:relative;grid-area:1/1;display:grid;gap:18px;justify-items:center;align-content:center;text-align:center;transition:opacity .5s,visibility .5s}
.quote-slider cite{font:400 1rem/1.3 var(--font-head);font-style:normal;text-transform:uppercase;letter-spacing:.06em}
.quote-slider cite small{display:block;font:400 .75rem/1.4 var(--font-body);text-transform:none;letter-spacing:0;opacity:.85;margin-top:4px}
.quote-slider blockquote{font:italic 400 var(--fs-quote)/1.6 var(--font-body);max-width:1080px}
.quote-slider .slider__bar{position:static;padding-top:24px}
.quote-slider .slider__dot{width:8px;height:8px;border:0;background:rgba(255,255,255,.45)}
.quote-slider .slider__dot[aria-current="true"]{background:var(--color-white)}
.testimonials{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.testimonial{background:var(--color-white);border:1px solid var(--color-line);padding:30px 28px;display:grid;gap:16px;align-content:start}
.testimonial blockquote{font:italic 400 1rem/1.65 var(--font-body);color:var(--color-ink)}
.testimonial blockquote::before{content:"„";display:block;font:400 3rem/.6 var(--font-head);color:var(--color-accent);margin-bottom:6px;font-style:normal}
.testimonial cite{color:var(--color-ink)}
.testimonial__person{display:flex;gap:14px;align-items:center}
.testimonial__person .avatar{width:48px;height:48px;border-radius:50%;overflow:hidden;flex:none;background:var(--color-accent-light)}
.testimonial__person .avatar img{width:100%;height:100%;object-fit:cover}
.testimonials--stacked{grid-template-columns:1fr;gap:0}
.testimonials--stacked .testimonial{border:0;border-bottom:1px solid var(--color-line);grid-template-columns:minmax(0,1fr) minmax(0,260px);gap:28px;padding:30px 0;background:none}
@media (max-width:1024px){.testimonials{grid-template-columns:1fr 1fr}}
@media (max-width:768px){.testimonials{grid-template-columns:1fr}.testimonials--stacked .testimonial{grid-template-columns:1fr;gap:14px}}

/* ---------- E3 Logo-Wand ---------- */
.logo-wall{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--cols,6),minmax(0,1fr));gap:14px 20px;align-items:center}
.logo-wall li{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;border:1px solid var(--color-line);background:var(--color-white);padding:12px}
.logo-wall svg{width:auto;height:30px;max-width:100%;color:var(--color-muted)}
.logo-wall--plain li{border:0;background:none}
.logos-band{background:var(--color-accent-dark)}
.logos-band .slider{background:none}
.logos-band .slider__track{aspect-ratio:auto;display:grid}
.logos-band .slide{position:relative;grid-area:1/1;transition:opacity .6s,visibility .6s}
.logos-band .logo-wall li{border:0;background:rgba(255,255,255,.08)}
.logos-band .logo-wall svg{color:var(--color-white);opacity:.92}
.logos-band .slider__bar{position:static;padding-top:24px}
.logos-band .slider__dot{width:8px;height:8px;border:0;background:rgba(255,255,255,.45)}
.logos-band .slider__dot[aria-current="true"]{background:var(--color-white)}
@media (max-width:768px){.logo-wall{--cols:3}}

/* ---------- E4 Referenzen / Fallstudien ---------- */
.cases{display:grid;gap:34px}
.case{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:36px;align-items:start;border-bottom:1px solid var(--color-line);padding-bottom:34px}
.case__img{aspect-ratio:8/5;background:var(--color-accent-light);overflow:hidden}
.case__img img,.case__img .ph{width:100%;height:100%;object-fit:cover}
.case__body{display:grid;gap:10px;justify-items:start}
.case h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem)}
.case__meta{font:500 .75rem/1.3 var(--font-head);letter-spacing:.08em;color:var(--color-accent);text-transform:uppercase}
.case__role{color:var(--color-ink);font-weight:600}
.case-steps{list-style:none;margin:0;padding:0;counter-reset:c;display:grid;gap:0}
.case-steps>li{counter-increment:c;display:grid;grid-template-columns:80px minmax(0,1fr) minmax(0,220px);gap:28px;padding:30px 0;border-top:1px solid var(--color-line)}
.case-steps>li::before{content:counter(c,decimal-leading-zero);font:var(--fw-light) 2.5rem/1 var(--font-head);color:var(--color-accent)}
.case-steps h3{margin-bottom:8px}
.case-steps__kpi{display:grid;gap:12px;align-content:start}
.case-steps__kpi div{border-left:2px solid var(--color-accent);padding-left:14px}
.case-steps__kpi b{display:block;font:500 1.75rem/1.1 var(--font-head);color:var(--color-ink)}
.case-steps__kpi span{font-size:.8125rem;color:var(--color-muted)}
@media (max-width:768px){.case{grid-template-columns:1fr;gap:18px}.case-steps>li{grid-template-columns:1fr;gap:12px}}

/* ---------- E5 Zeitleiste ---------- */
.timeline{list-style:none;margin:0;padding:0;display:grid}
.timeline li{display:grid;grid-template-columns:130px 1fr;gap:24px;padding:16px 0;border-bottom:1px solid var(--color-line)}
.timeline__when{font:500 .875rem/1.5 var(--font-head);color:var(--color-accent);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.timeline b{display:block;color:var(--color-ink);font-weight:600}
.timeline span{font-size:.875rem;color:var(--color-muted)}
@media (max-width:560px){.timeline li{grid-template-columns:1fr;gap:4px}}

/* ---------- E6 Portfolio-Raster mit Filter ---------- */
.filterbar{position:sticky;top:var(--header-h);z-index:15;background:var(--color-white);border-bottom:1px solid var(--color-line)}
.filterbar .container{display:flex;align-items:center;gap:16px;padding-block:12px}
.filters{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.filters button{font:500 .6875rem/1 var(--font-head);letter-spacing:.07em;text-transform:uppercase;padding:9px 11px;background:var(--color-white);color:var(--color-ink);border:1px solid var(--color-line);cursor:pointer}
.filters button:hover{border-color:var(--color-accent)}
.filters button[aria-pressed="true"]{background:var(--color-accent);color:var(--color-white);border-color:var(--color-accent)}
.filters__count{margin-left:auto;font-size:.8125rem;color:var(--color-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.portfolio{padding-block:28px 80px}
.portfolio .cards{gap:14px}
.portfolio [data-item][hidden]{display:none}
.masonry{columns:3 280px;column-gap:14px}
.masonry .card{break-inside:avoid;margin-bottom:14px}
.masonry .card__img{aspect-ratio:auto}
.masonry .card__img img,.masonry .card__img .ph{height:auto}
@media (max-width:768px){.filterbar .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.filters button{flex:0 0 auto}.filters__count{display:none}}

/* ---------- E7 Projekt-Detailseite ---------- */
.project{padding-block:20px 80px}
.project__top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8125rem;color:var(--color-muted);margin-bottom:18px}
.project__top a{color:var(--color-muted)}
.project .slider{--slider-ratio:16/9;background:var(--color-white)}
.project .slide img,.project .slide .ph{object-fit:contain}
.project__head{margin-top:40px;padding-bottom:18px;border-bottom:2px solid var(--color-accent);display:grid;gap:6px}
.project__head :is(h1,h2,h3){font-size:clamp(1.625rem,1.332rem + 1.304vw,2.375rem)}
.project__cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr);gap:40px;padding-top:24px;align-items:start}
.project__cols h2{font-size:.9375rem;letter-spacing:.1em;margin-bottom:12px}
.project__side{display:grid;gap:14px;justify-items:start}
.pager{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--color-line);margin-top:70px;padding-top:24px;flex-wrap:wrap}
.pager a{text-decoration:none;font:500 .8125rem/1.3 var(--font-head);letter-spacing:.08em;text-transform:uppercase;color:var(--color-ink)}
.pager a:hover{color:var(--color-accent)}
@media (max-width:1024px){.project__cols{grid-template-columns:1fr 1fr}}
@media (max-width:768px){.project__cols{grid-template-columns:1fr;gap:24px}}

/* ---------- E8 Bewertungen ---------- */
.ratings{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.rating{border:1px solid var(--color-line);padding:24px;display:grid;gap:10px;background:var(--color-white)}
.stars{display:flex;gap:3px;color:var(--color-accent)}
.stars svg{width:18px;height:18px}
.rating__sum{display:flex;align-items:center;gap:14px;justify-content:center;margin-bottom:30px;flex-wrap:wrap}
.rating__sum b{font:500 2.25rem/1 var(--font-head);color:var(--color-ink)}
.rating p{font-size:.9375rem}
.rating cite{font:500 .75rem/1.3 var(--font-head);letter-spacing:.08em;text-transform:uppercase;font-style:normal;color:var(--color-muted)}
@media (max-width:1024px){.ratings{grid-template-columns:1fr 1fr}}
@media (max-width:768px){.ratings{grid-template-columns:1fr}}

/* ---------- E9 Siegel-/Zertifikatsleiste ---------- */
.seals{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center}
.seal{width:96px;height:96px;border:1.5px solid var(--color-accent);border-radius:50%;display:grid;place-content:center;text-align:center;font:500 .625rem/1.25 var(--font-head);letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent);padding:8px}
.seal b{display:block;font-size:.875rem;letter-spacing:.04em}
.seal-strip{background:var(--color-accent-light)}
.seal-strip .container{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:30px;align-items:center;padding-block:34px}
.seal-strip .seals{justify-content:flex-start;gap:10px}
.seal-strip .seal{width:76px;height:76px;font-size:.5rem;padding:4px}
.seal-strip .seal b{font-size:.625rem}
.seal-strip h3{margin-bottom:6px}
@media (max-width:768px){.seal-strip .container{grid-template-columns:1fr;gap:18px}}

/* =========================================================
   F  ANGEBOT UND ABLAUF
   ========================================================= */

/* ---------- F1 Pakete/Preise ---------- */
.packages{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px;align-items:stretch}
.pkg{grid-column:span 2;position:relative;background:var(--color-white);border:1px solid var(--color-line);padding:28px 24px;display:flex;flex-direction:column;gap:12px}
.packages--5 .pkg:nth-child(4),.packages--5 .pkg:nth-child(5){grid-column:span 3}
.packages--2 .pkg{grid-column:span 3}
.pkg--rec{border:2px solid var(--color-ink)}
.pkg__tag{position:absolute;top:-11px;left:20px;background:var(--color-ink);color:var(--color-white);font:600 .625rem/1 var(--font-head);letter-spacing:.12em;text-transform:uppercase;padding:6px 8px}
.pkg h3{font-size:1.125rem}
.pkg .pkg__price{font:500 1.875rem/1.1 var(--font-head);color:var(--color-ink);font-variant-numeric:tabular-nums}
.pkg__price small{font:400 .8125rem var(--font-body);color:var(--color-muted)}
.pkg p{font-size:.90625rem}
.pkg .list-checks{flex:1}
.pkg .btn{background:var(--color-accent);border-color:var(--color-accent)}
.pkg .btn:hover{background:var(--color-accent-dark);border-color:var(--color-accent-dark)}
.pkg--rec .btn{background:var(--color-ink);border-color:var(--color-ink)}
@media (max-width:1024px){.packages{grid-template-columns:1fr 1fr}.pkg,.packages--5 .pkg:nth-child(4),.packages--5 .pkg:nth-child(5),.packages--2 .pkg{grid-column:span 1}}
@media (max-width:768px){.packages{grid-template-columns:1fr}}

/* ---------- F2 Zusatzoptionen ---------- */
.addons{background:var(--color-white);border:1px solid var(--color-line)}
.addons summary{cursor:pointer;padding:16px 20px;font:500 .875rem/1.3 var(--font-head);letter-spacing:.08em;text-transform:uppercase;color:var(--color-ink);text-align:center}
.addons summary:hover{color:var(--color-accent)}
.addons table{width:100%;border-collapse:collapse}
.addons th,.addons td{padding:12px 20px;border-top:1px solid var(--color-line);text-align:left;font-size:.9375rem;font-weight:400}
.addons td{text-align:right;white-space:nowrap;color:var(--color-ink);font-weight:600;font-variant-numeric:tabular-nums}
@media (max-width:560px){.addons td{white-space:normal}}

/* ---------- F3 Vergleich zwei Optionen ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.compare__opt{background:var(--color-white);border:1px solid var(--color-line);padding:32px;display:grid;gap:10px;justify-items:center;text-align:center;align-content:start}
.compare__opt:first-child{border:2px solid var(--color-accent)}
.compare__quote{font-style:italic;color:var(--color-accent);font-size:1.0625rem}
.compare__opt .icon{--icon:46px}
.compare h3{font-size:1.1875rem}
.compare p{font-size:.9375rem}
.compare .btn{margin-top:8px}
@media (max-width:768px){.compare{grid-template-columns:1fr}}

/* ---------- F4 Ablauf in Schritten ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--cols,5),minmax(0,1fr));gap:14px 18px;counter-reset:s}
.steps--3{--cols:3;max-width:860px;margin-inline:auto}.steps--4{--cols:4}.steps--6{--cols:6}.steps--7{--cols:7}
.steps li{counter-increment:s;display:grid;gap:6px;align-content:start;border-top:2px solid var(--color-accent);padding-top:14px}
.steps li::before{content:counter(s,decimal-leading-zero);font:500 .8125rem/1 var(--font-head);color:var(--color-accent);letter-spacing:.08em}
.steps b{font:500 1.0625rem/1.25 var(--font-head);text-transform:uppercase;color:var(--color-ink);letter-spacing:.03em}
.steps span{font-size:.875rem}
.steps--icons li{border-top:0;padding-top:0;text-align:center;justify-items:center}
.steps--icons li::before{display:none}
.steps--icons .icon{--icon:46px;margin-bottom:6px;order:1}
.steps--icons b{order:3}.steps--icons span{order:4}
@media (max-width:1024px){.steps{--cols:3}.steps--4{--cols:2}}
@media (max-width:768px){.steps,.steps--4{--cols:2}}
@media (max-width:560px){.steps,.steps--4{--cols:1}}

/* ---------- F5 Vorteile (Icon-Raster 3 × 2): siehe D1 .icon-grid ---------- */

/* ---------- F6 Faktenzeile ---------- */
.facts-line{list-style:none;margin:0;padding:22px 0 0;border-top:1px solid var(--color-line);display:flex;justify-content:center;flex-wrap:wrap;gap:8px 0}
.facts-line li{padding:0 26px;font-size:.875rem;border-left:1px solid var(--color-line)}
.facts-line li:first-child{border-left:0}
.facts-line b{color:var(--color-accent);font-weight:600}
@media (max-width:768px){.facts-line li{padding:0 12px}}

/* ---------- F8 CTA-Band ---------- */
.cta-band{background:var(--color-accent-dark);color:var(--color-white)}
.cta-band .container{display:flex;justify-content:space-between;align-items:center;gap:24px 40px;flex-wrap:wrap;padding-block:56px}
.cta-band h2{color:var(--color-white);font-size:clamp(1.5rem,1.255rem + 1.087vw,2.125rem);margin-bottom:8px}
.cta-band p{max-width:56ch;opacity:.95}
.cta-band--center .container{flex-direction:column;text-align:center}

/* ---------- F9 Empfehlungsbox ---------- */
.recommend{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;max-width:980px;margin:0 auto}
.recommend__box{border:1px solid var(--color-line);border-top:3px solid var(--color-accent);padding:28px 30px;display:grid;gap:10px;background:var(--color-white)}
.recommend__name{font:500 .9375rem/1.3 var(--font-head);text-transform:uppercase;letter-spacing:.06em;color:var(--color-ink)}
.recommend__price{font:500 2.125rem/1.1 var(--font-head);color:var(--color-ink)}
.recommend__price small{font-size:.875rem;color:var(--color-muted)}
.recommend__promo{color:var(--color-accent);font-weight:600}
.recommend__box .btn{justify-self:start;margin-top:6px}
.recommend__disc{font-size:.78125rem;color:var(--color-muted)}
.recommend__why{display:grid;gap:14px;justify-items:start}
.recommend__why .icon{--icon:46px}
@media (max-width:768px){.recommend{grid-template-columns:1fr}}

/* ---------- F10 Speise-/Preiskarte ---------- */
.menu-card{display:grid;grid-template-columns:1fr 1fr;gap:20px 56px}
.menu-card__cat h3{font-size:var(--fs-h3);color:var(--color-accent);margin-bottom:10px}
.menu-card__items{list-style:none;margin:0;padding:0}
.menu-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;padding:12px 0;border-bottom:1px dotted var(--color-line)}
.menu-item b{color:var(--color-ink);font-weight:600}
.menu-item__price{font:500 1rem/1.4 var(--font-head);color:var(--color-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.menu-item__desc{grid-column:1;font-size:.875rem;color:var(--color-muted)}
.marks{display:inline-flex;gap:4px;margin-left:6px;vertical-align:middle}
.mark{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 4px;border:1px solid var(--color-accent);color:var(--color-accent);font:600 .625rem/1 var(--font-head);letter-spacing:.04em}
.mark--fill{background:var(--color-accent);color:var(--color-white)}
@media (max-width:768px){.menu-card{grid-template-columns:1fr}}

/* ---------- F11 Kennzeichnungs-Legende ---------- */
.legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px 24px;list-style:none;margin:0;padding:0;font-size:.875rem}
.legend li{display:flex;gap:10px;align-items:center}
.stats--gap{margin-top:64px}

/* =========================================================
   G  MEDIEN
   ========================================================= */

/* ---------- G2 Bildraster mit Lightbox ---------- */
.gallery{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:10px}
.gallery--2{--cols:2}.gallery--4{--cols:4}
.gallery a{text-decoration:none;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--color-accent-light);position:relative}
.gallery img,.gallery .ph{width:100%;height:100%;object-fit:cover;transition:transform .5s,opacity .3s}
.gallery a:hover img{transform:scale(1.04)}
.gallery a::after{content:"+";position:absolute;right:10px;bottom:8px;color:var(--color-white);font:300 1.75rem/1 var(--font-head);opacity:0;transition:opacity .3s;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.gallery a:hover::after,.gallery a:focus-visible::after{opacity:1}
@media (max-width:768px){.gallery,.gallery--4{--cols:2}}
.lightbox{border:0;padding:0;max-width:none;max-height:none;width:100%;height:100%;background:rgba(17,17,17,.94);color:var(--color-white)}
.lightbox::backdrop{background:rgba(17,17,17,.94)}
.lightbox__inner{position:relative;width:100%;height:100%;display:grid;grid-template-rows:1fr auto;padding:56px 70px 20px}
.lightbox__fig{display:grid;place-items:center;min-height:0}
.lightbox__fig img,.lightbox__fig .ph{max-width:100%;max-height:calc(100vh - 140px);width:auto;height:auto;object-fit:contain}
.lightbox__fig .ph{width:min(900px,80vw);aspect-ratio:4/3;height:auto}
.lightbox__cap{text-align:center;font-size:.875rem;opacity:.85;padding-top:10px}
.lightbox__btn{position:absolute;background:none;border:0;color:var(--color-white);cursor:pointer;padding:12px;opacity:.85}
.lightbox__btn:hover{opacity:1}
.lightbox__btn svg{width:28px;height:28px}
.lightbox__close{top:10px;right:12px}
.lightbox__prev{left:10px;top:50%;transform:translateY(-50%)}
.lightbox__next{right:10px;top:50%;transform:translateY(-50%)}
@media (max-width:768px){.lightbox__inner{padding:56px 10px 20px}.lightbox__prev,.lightbox__next{top:auto;bottom:6px;transform:none}}

/* ---------- G3 Video lokal ---------- */
.video{position:relative;background:var(--color-black);aspect-ratio:16/9}
.video video{width:100%;height:100%;object-fit:cover}

/* ---------- G4 Karte als statisches Bild ---------- */
.map-static{position:relative;display:block;overflow:hidden;border:1px solid var(--color-line);background:var(--color-accent-light)}
.map-static svg{width:100%;height:auto;display:block}
.map-static__btn{position:absolute;left:16px;bottom:16px}
.map-static__note{font-size:.75rem;color:var(--color-muted);margin-top:8px}

/* ---------- G5 Vorher/Nachher ---------- */
.before-after{position:relative;overflow:hidden;aspect-ratio:3/2;--pos:50%;user-select:none;background:var(--color-accent-light)}
.before-after img,.before-after .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.before-after__after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos))}
.before-after__line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--color-white);transform:translateX(-1px);pointer-events:none}
.before-after__line::after{content:"";position:absolute;top:50%;left:50%;width:42px;height:42px;transform:translate(-50%,-50%);background:var(--color-white);border-radius:50%;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.before-after__handle{position:absolute;top:50%;left:var(--pos);transform:translate(-50%,-50%);z-index:2;color:var(--color-ink);pointer-events:none;display:flex}
.before-after__handle svg{width:22px;height:22px}
.before-after__range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:3}
.before-after__range:focus-visible+.before-after__line{outline:2px solid var(--color-accent)}
.before-after__label{position:absolute;top:14px;z-index:1;background:rgba(17,17,17,.7);color:var(--color-white);font:500 .6875rem/1 var(--font-head);letter-spacing:.12em;text-transform:uppercase;padding:6px 8px}
.before-after__label--before{left:14px}
.before-after__label--after{right:14px}

/* =========================================================
   H  KONTAKT UND FORMULARE
   ========================================================= */

/* ---------- H1 Kontaktformular ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:56px;align-items:start}
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form label,.form .form__label{display:grid;gap:6px;font:500 .75rem/1.3 var(--font-head);letter-spacing:.08em;text-transform:uppercase;color:var(--color-ink)}
.form__full{grid-column:1/-1}
.form input,.form select,.form textarea{font:400 1rem/1.5 var(--font-body);text-transform:none;letter-spacing:0;padding:12px 14px;border:1px solid var(--color-line);background:var(--color-white);color:var(--color-ink);width:100%;border-radius:0}
.form textarea{min-height:150px;resize:vertical}
.form :is(input,select,textarea):focus{outline:2px solid var(--color-accent);outline-offset:0;border-color:var(--color-accent)}
.form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--color-muted) 50%),linear-gradient(135deg,var(--color-muted) 50%,transparent 50%);background-position:calc(100% - 20px) 52%,calc(100% - 15px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
.form .form__check{display:flex;gap:10px;align-items:flex-start;text-transform:none;letter-spacing:0;font:400 .875rem/1.5 var(--font-body);color:var(--color-text)}
.form .form__check input{width:auto;margin-top:4px;accent-color:var(--color-accent)}
.form__actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.form__status{font-size:.9375rem;color:var(--color-ink)}
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__req{font-size:.8125rem;color:var(--color-muted)}
.form__err{color:#b3261e;font:400 .8125rem/1.4 var(--font-body);text-transform:none;letter-spacing:0}
.form [aria-invalid="true"]{border-color:#b3261e}
.form--compact{grid-template-columns:1fr;max-width:560px}
.form--compact.form--center{margin-inline:auto}
.form-sent{border:1px solid var(--color-line);border-top:3px solid var(--color-accent);padding:40px;text-align:center;display:grid;gap:12px;justify-items:center}
.form-sent svg{width:34px;height:34px;color:var(--color-accent)}
.contact-info{background:var(--color-accent-light);padding:30px;display:grid;gap:16px;align-content:start}
.contact-info h3{font-size:var(--fs-h3)}
.contact-info .ph,.contact-info img{aspect-ratio:16/9;width:100%;object-fit:cover}
.contact-info a{color:var(--color-ink);text-decoration:none}
.contact-info a:hover{color:var(--color-accent)}
.demo-form-note{grid-column:1/-1;font-size:.8125rem;background:var(--color-accent-light);padding:10px 14px;color:var(--color-ink)}
@media (max-width:768px){.contact-grid{grid-template-columns:1fr;gap:36px}}
@media (max-width:560px){.form{grid-template-columns:1fr}}

/* ---------- H2 Kontakt-Schnellbuttons ---------- */
.quick-buttons{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:10px}
.quick-buttons a{display:grid;gap:4px;justify-items:center;text-align:center;text-decoration:none;background:var(--color-accent);color:var(--color-white);padding:16px 10px;font-size:.875rem;transition:background var(--ease)}
.quick-buttons a:hover{background:var(--color-accent-dark)}
.quick-buttons b{font:600 .875rem/1.3 var(--font-body)}
.quick-buttons svg{width:24px;height:24px;margin-bottom:4px}
.quick-buttons--tiles a{padding:28px 14px;background:var(--color-white);color:var(--color-ink);border:1px solid var(--color-line)}
.quick-buttons--tiles a:hover{background:var(--color-accent-light)}
.quick-buttons--tiles svg{width:34px;height:34px;color:var(--color-accent)}
@media (max-width:768px){.quick-buttons{--cols:1}}

/* ---------- H3 Öffnungszeiten ---------- */
.hours{width:100%;border-collapse:collapse;font-size:.9375rem}
.hours th,.hours td{padding:9px 0;border-bottom:1px solid var(--color-line);text-align:left;vertical-align:top;font-weight:400}
.hours th{color:var(--color-ink);font-weight:600;padding-right:20px;white-space:nowrap}
.hours td{font-variant-numeric:tabular-nums}
.hours tr.is-today th,.hours tr.is-today td{color:var(--color-accent)}
.hours-status{display:inline-flex;align-items:center;gap:8px;font:500 .75rem/1 var(--font-head);letter-spacing:.1em;text-transform:uppercase;color:var(--color-ink);margin-bottom:12px}
.hours-status::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--color-muted)}
.hours-status.is-open::before{background:#3f9a5b}

/* ---------- H5 Newsletter ---------- */
.newsletter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center}
.newsletter__form{display:flex;gap:0;flex-wrap:wrap}
.newsletter__form input{flex:1;min-width:200px;padding:13px 14px;border:1px solid var(--color-line);border-right:0;font:inherit}
.newsletter__note{font-size:.78125rem;color:var(--color-muted);margin-top:10px;flex-basis:100%}
@media (max-width:768px){.newsletter{grid-template-columns:1fr}.newsletter__form input{border-right:1px solid var(--color-line)}.newsletter__form .btn{width:100%}}

/* ---------- H6 Download-Liste ---------- */
.downloads{list-style:none;margin:0;padding:0;border-top:1px solid var(--color-line)}
.download a{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 4px;border-bottom:1px solid var(--color-line);text-decoration:none;color:inherit}
.download a:hover{background:var(--color-accent-light)}
.download__type{width:44px;height:52px;border:1px solid var(--color-accent);color:var(--color-accent);display:grid;place-items:center;font:600 .625rem/1 var(--font-head);letter-spacing:.06em;position:relative}
.download__name{font-weight:600;color:var(--color-ink);display:block}
.download__meta{font-size:.8125rem;color:var(--color-muted)}
.download__icon svg{width:22px;height:22px;color:var(--color-accent)}
.downloads-group+.downloads-group{margin-top:34px}
.downloads-group h3{font-size:var(--fs-h3);margin-bottom:12px;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.downloads-group h3 small{font:400 .8125rem var(--font-body);text-transform:none;letter-spacing:0;color:var(--color-muted)}

/* ---------- H7 Liefer-/Einzugsgebiet ---------- */
.area{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center}
.area__list{columns:2;column-gap:28px;padding:0;margin:0;list-style:none}
.area__list li{padding:6px 0;border-bottom:1px solid var(--color-line);break-inside:avoid}
@media (max-width:768px){.area{grid-template-columns:1fr}}

/* ---------- H8 Bestell-/Buchungs-Button prominent ---------- */
.order-cta{display:grid;justify-items:center;text-align:center;gap:14px;padding:44px 24px;border:2px solid var(--color-accent);background:var(--color-white)}
.order-cta .btn{font-size:.9375rem;padding:20px 38px}
.order-cta__note{font-size:.8125rem;color:var(--color-muted)}

/* ---------- H9 Standort-Block ---------- */
.location{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px;align-items:center}
.location__info{display:grid;gap:18px;justify-items:start}
.location address{font-style:normal}
.location--center{grid-template-columns:1fr;text-align:center;justify-items:center}
.location--center .location__info{justify-items:center}
@media (max-width:768px){.location{grid-template-columns:1fr}}

/* ---------- H10 Anleitung externes System ---------- */
.howto{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;align-items:start}
.howto__aside{display:grid;gap:16px}
@media (max-width:768px){.howto{grid-template-columns:1fr}}

/* =========================================================
   I  SONDERSEITEN
   ========================================================= */
.special{min-height:60vh;display:grid;place-items:center;text-align:center}
.special .container{display:grid;gap:18px;justify-items:center;padding-block:80px}
.special__code{font:var(--fw-light) clamp(4rem,3rem + 6vw,8rem)/1 var(--font-head);color:var(--color-accent)}
.special .icon{--icon:56px}
.coming{min-height:100vh;background:var(--color-accent);color:var(--color-white);display:grid;place-items:center;text-align:center}
.coming .container{display:grid;gap:22px;justify-items:center;padding-block:60px}
.coming h1{color:var(--color-white);font-weight:var(--fw-light)}
.coming .logo__tag{background:var(--color-white);color:var(--color-accent)}
.coming .contact-lines a{color:var(--color-white)}
.coming .contact-lines svg{color:var(--color-white)}
.legal h2{font-size:var(--fs-h2-sub);margin:44px 0 14px}
.legal h3{font-size:1.0625rem;margin:24px 0 8px}
.legal p,.legal ul{margin-bottom:12px}
.todo{background:#fff6d6;border:1px dashed #c9a227;padding:2px 6px;font-size:.875rem;color:#5c4a00}

/* =========================================================
   K  LAYOUT-OPTIONEN
   ========================================================= */
/* K1 schmale Inhaltsbreite: .container--text (base.css) */
/* K2 gerahmt („boxed“) */
:root[data-width="narrow"]{--container:960px}
.is-boxed body{background:var(--color-accent-light)}
.is-boxed .page-box{max-width:calc(var(--container) + 2 * 60px);margin:0 auto;background:var(--color-white);box-shadow:0 0 0 1px var(--color-line)}
/* K3 Seitenleiste */
.with-sidebar{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
.with-sidebar--left{grid-template-columns:300px minmax(0,1fr)}
.with-sidebar--left .sidebar{order:-1}
.sidebar{display:grid;gap:24px}
.sidebar--sticky{position:sticky;top:calc(var(--header-h) + 24px)}
.sidebar__box{border:1px solid var(--color-line);padding:22px;display:grid;gap:12px}
.sidebar__box h3{font-size:.9375rem;letter-spacing:.1em}
.sidebar-nav{list-style:none;margin:0;padding:0}
.sidebar-nav a{display:block;padding:9px 0;border-bottom:1px solid var(--color-line);text-decoration:none;color:var(--color-ink);font-size:.9375rem}
.sidebar-nav a:hover,.sidebar-nav a[aria-current]{color:var(--color-accent)}
@media (max-width:1024px){.with-sidebar,.with-sidebar--left{grid-template-columns:1fr}.with-sidebar--left .sidebar{order:0}.sidebar--sticky{position:static}}

/* =========================================================
   L  EINBINDUNGEN MIT EINWILLIGUNG (optional je Kundenseite)
   ========================================================= */

/* ---------- L2/L3/L4 Eingebettete Dienste (Zwei-Klick bzw. nach Banner) ---------- */
.embed{position:relative;aspect-ratio:16/9;background:var(--color-ink);overflow:hidden;color:var(--color-white)}
.embed--map{aspect-ratio:16/10;background:var(--color-accent-light);color:var(--color-ink)}
.embed--widget{aspect-ratio:auto;min-height:320px;background:var(--color-accent-light);color:var(--color-ink)}
.embed__preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.embed__preview.ph{background:#3a3633}
.embed--map .embed__preview{opacity:.55}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed__consent{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;text-align:center;padding:24px;background:rgba(17,17,17,.55)}
.embed--map .embed__consent,.embed--widget .embed__consent{background:rgba(255,255,255,.7)}
.embed__play{width:68px;height:68px;border-radius:50%;background:var(--color-accent);display:grid;place-items:center;color:var(--color-white)}
.embed__play svg{width:26px;height:26px;margin-left:4px}
.embed__text{max-width:52ch;font-size:.875rem;line-height:1.55}
.embed__text a{color:inherit}
.embed__remember{display:flex;gap:8px;align-items:center;font-size:.8125rem}
.embed__remember input{accent-color:var(--color-accent)}
.embed.is-loaded .embed__consent,.embed.is-loaded .embed__preview{display:none}

/* ---------- L1 Einwilligungs-Banner ---------- */
.consent{position:fixed;z-index:80;background:var(--color-white);color:var(--color-text);box-shadow:0 -6px 30px rgba(0,0,0,.14);font-size:.875rem}
.consent--bar{left:0;right:0;bottom:0;border-top:3px solid var(--color-accent)}
.consent--bar .consent__inner{width:min(var(--container),100% - 2 * var(--gutter));margin:0 auto;padding-block:20px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 34px;align-items:center}
.consent--box{left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,100% - 2 * var(--gutter));max-height:90vh;overflow:auto;border-top:3px solid var(--color-accent)}
.consent--box .consent__inner{padding:28px;display:grid;gap:18px}
.consent__backdrop{position:fixed;inset:0;z-index:79;background:rgba(17,17,17,.45)}
.consent h2{font-size:1.125rem;margin-bottom:6px}
.consent__btns{display:flex;flex-wrap:wrap;gap:8px}
.consent__btns .btn{flex:1 1 auto;padding:13px 18px}
.consent__btns .btn--light{background:var(--color-accent-light);border-color:var(--color-line);color:var(--color-ink)}
.consent__btns .btn--light:hover{background:var(--color-line);color:var(--color-ink)}
.consent__settings{grid-column:1/-1;display:grid;gap:10px;border-top:1px solid var(--color-line);padding-top:16px}
.consent__cat{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:start}
.consent__cat input{margin-top:5px;accent-color:var(--color-accent);width:18px;height:18px}
.consent__cat b{color:var(--color-ink)}
.consent__cat span{grid-column:2;font-size:.8125rem;color:var(--color-muted)}
.consent a{color:var(--color-ink)}
@media (max-width:768px){.consent--bar .consent__inner{grid-template-columns:1fr}.consent__btns .btn{width:100%}}

/* =========================================================
   J4.3–J4.14 Portfolio Layouts, J6.2/J6.3 Detailseiten
   ========================================================= */
.masonry--shadow .card{background:var(--color-white);box-shadow:0 10px 30px -14px rgba(0,0,0,.25);transition:box-shadow var(--ease),transform var(--ease)}
.masonry--shadow .card:hover{box-shadow:0 18px 40px -16px rgba(0,0,0,.35);transform:translateY(-2px)}
.masonry--shadow .card__img{outline:0}
.masonry--shadow .card__meta{padding:14px 16px 16px}
/* Trendy */
.pf-trends{display:grid;gap:clamp(48px,7vw,96px)}
.pf-trend{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.pf-trend--rev .pf-trend__img{order:2}
.pf-trend__img{display:block;background:var(--color-accent-light);padding:clamp(16px,3vw,36px)}
.pf-trend__img img{width:100%;height:auto;display:block}
.pf-trend__text{position:relative}
.pf-trend__nr{font:300 clamp(3rem,2rem + 4vw,5.5rem)/1 var(--font-head);color:var(--color-accent-light);display:block;margin-bottom:-.2em}
.pf-trend__text h2{margin:.2em 0 .4em}
.pf-trend__text p:not(.eyebrow){color:var(--color-muted);margin-bottom:22px}
@media (max-width:768px){.pf-trend{grid-template-columns:1fr}.pf-trend--rev .pf-trend__img{order:0}}
/* Galerie */
.pf-gallery img{aspect-ratio:8/5;object-fit:cover}
/* Overlays */
.pf-ov-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pf-ov{position:relative;display:block;overflow:hidden;aspect-ratio:8/5;background:var(--color-accent-light);color:var(--color-white);text-decoration:none}
.pf-ov img,.pf-ov .ph{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.pf-ov::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(17,17,17,.78),rgba(17,17,17,0) 60%);transition:opacity var(--ease)}
.pf-ov__text{position:absolute;left:20px;right:20px;bottom:18px;z-index:1;display:grid;gap:4px;transition:transform var(--ease),opacity var(--ease)}
.pf-ov__cat{font:500 .6875rem/1.2 var(--font-head);letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.pf-ov__title{font:400 1.125rem/1.25 var(--font-head);letter-spacing:.04em;text-transform:var(--head-case)}
.pf-ov:hover img{transform:scale(1.04)}
.pf-ov-grid--hover .pf-ov::after{opacity:0;background:rgba(17,17,17,.6)}
.pf-ov-grid--hover .pf-ov__text{opacity:0;transform:translateY(8px)}
.pf-ov-grid--hover .pf-ov:is(:hover,:focus-visible)::after{opacity:1}
.pf-ov-grid--hover .pf-ov:is(:hover,:focus-visible) .pf-ov__text{opacity:1;transform:none}
@media (hover:none){.pf-ov-grid--hover .pf-ov::after{opacity:1;background:linear-gradient(to top,rgba(17,17,17,.7),rgba(17,17,17,0) 60%)}.pf-ov-grid--hover .pf-ov__text{opacity:1;transform:none}}
.pf-flush{gap:0;grid-template-columns:repeat(4,minmax(0,1fr))}
.pf-flush .pf-ov{aspect-ratio:1/1}
@media (max-width:1024px){.pf-ov-grid,.pf-flush{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pf-ov-grid{grid-template-columns:1fr}}
/* Minimalistisch */
.pf-mins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,6vw,80px) clamp(24px,5vw,72px)}
.pf-min{display:grid;grid-template-columns:1fr auto;gap:14px 16px;text-decoration:none;color:var(--color-ink)}
.pf-min__img{grid-column:1/-1;display:block;overflow:hidden;aspect-ratio:8/5;background:var(--color-accent-light)}
.pf-min__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.pf-min:hover img{transform:scale(1.03)}
.pf-min__title{font:400 1rem/1.3 var(--font-head);letter-spacing:.06em;text-transform:var(--head-case)}
.pf-min__year{font-size:.8125rem;color:var(--color-muted)}
.pf-min:hover .pf-min__title{color:var(--color-accent)}
@media (max-width:768px){.pf-mins{grid-template-columns:1fr}}
/* Seitenleiste */
.pf-with-side{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.pf-with-side--rev{grid-template-columns:minmax(0,1fr) 240px}
.pf-with-side--rev .pf-side{order:2}
.pf-side{display:grid;gap:28px;position:sticky;top:calc(var(--header-h) + 24px)}
.pf-side__h{font-size:.8125rem;letter-spacing:.14em;margin-bottom:12px}
.filters--vertical{display:grid;gap:0;justify-items:stretch}
.filters--vertical button{text-align:left;border:0;border-bottom:1px solid var(--color-line);padding:11px 0;background:none}
.filters--vertical button[aria-pressed="true"]{color:var(--color-accent);background:none;box-shadow:none}
.pf-side__filter .filters__count{display:block;margin-top:10px;font-size:.8125rem;color:var(--color-muted)}
.pf-side__box{background:var(--color-accent-light);padding:22px}
.pf-side__box p{font-size:.875rem;margin-bottom:14px}
@media (max-width:1024px){.pf-with-side,.pf-with-side--rev{grid-template-columns:1fr}.pf-side{position:static;order:0!important}.filters--vertical{display:flex;flex-wrap:wrap;gap:6px}.filters--vertical button{border:1px solid var(--color-line);padding:7px 12px}.pf-side__box{display:none}}
/* Volle Breite */
.container--fluid{width:calc(100% - 2 * var(--gutter));max-width:none}
/* Seitenzahlen */
.pagination{display:flex;justify-content:center;gap:6px;margin-top:clamp(28px,4vw,48px);flex-wrap:wrap}
.pagination button{min-width:42px;height:42px;border:1px solid var(--color-line);background:var(--color-white);color:var(--color-ink);font:500 .875rem/1 var(--font-head);cursor:pointer;padding:0 12px}
.pagination button[aria-current="page"]{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-white)}
.pagination button:disabled{opacity:.35;cursor:default}
.pagination button:not(:disabled):not([aria-current]):hover{border-color:var(--color-accent);color:var(--color-accent)}
/* Detailseite Bildstrecke und Video */
.pf-strip{display:grid;gap:clamp(16px,2.5vw,28px);margin-top:clamp(32px,5vw,56px)}
.pf-strip__item img{width:100%;height:auto;display:block}
.pf-strip__item figcaption{font-size:.8125rem;color:var(--color-muted);padding-top:8px}
.pf-video{margin-bottom:clamp(28px,4vw,48px)}
.project__head h1{margin-bottom:.3em}

/* =========================================================
   Branchen-Beispiel Zahnarzt
   ========================================================= */
.za-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.za-tile{display:grid;gap:8px;align-content:start;background:var(--color-white);border:1px solid var(--color-line);padding:28px 24px;text-decoration:none;color:var(--color-text);transition:border-color var(--ease),box-shadow var(--ease),transform var(--ease)}
.za-tile .icon{width:44px;height:44px;color:var(--color-accent)}
.za-tile h3{color:var(--color-ink);margin-top:6px}
.za-tile p{font-size:.9375rem;margin:0}
.za-tile:hover{border-color:var(--color-accent);box-shadow:0 14px 30px -18px rgba(0,0,0,.3);transform:translateY(-2px)}
@media (max-width:1024px){.za-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.za-tiles{grid-template-columns:1fr}}
.za-jump{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding-block:clamp(24px,3vw,36px) 0}
.za-jump a{border:1px solid var(--color-line);padding:9px 14px;font-size:.8125rem;text-decoration:none;color:var(--color-ink);text-transform:uppercase;letter-spacing:.08em}
.za-jump a:hover{border-color:var(--color-accent);color:var(--color-accent)}
.team--5{--cols:5}
@media (max-width:1024px){.team--5{--cols:3}}
@media (max-width:768px){.team--5{--cols:2}}
.za-tiles--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1024px){.za-tiles--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.za-tiles--4{grid-template-columns:1fr}}
/* Kanzlei-Profile */
.ra-profiles{display:grid;gap:clamp(40px,6vw,72px)}
.ra-profile{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.ra-profile__img img{width:100%;height:auto;display:block}
.ra-profile__fa{color:var(--color-accent);margin:.2em 0 1em}
.ra-profile .btn-row{margin-top:20px}
.ra-profile .btn .icon{width:16px;height:16px;vertical-align:-3px}
@media (max-width:768px){.ra-profile{grid-template-columns:1fr}.ra-profile__img{max-width:320px}}

/* Icon-Leiste als Band direkt unter dem Hero (volle Breite) */
.icon-strip--band{border-top:0;background:var(--color-white);box-shadow:0 1px 0 var(--color-line)}
.icon-strip--band li{padding-block:26px}
.icon-strip--band li:first-child{border-left:0}
/* Schnellkontakt-Buttons: gleich hoch, Icons sichtbar */
.quick-buttons li{display:flex}
.quick-buttons a{flex:1;align-content:center}
.quick-buttons :is(.js-tel,.js-mail)>svg{width:24px;height:24px;color:currentColor;margin:0 0 4px}
.quick-buttons--tiles :is(.js-tel,.js-mail)>svg{width:34px;height:34px;color:var(--color-accent)}
.quick-buttons a[aria-disabled],.social a[aria-disabled]{cursor:default}
/* Hero geteilt mit dezentem Slider: nur Punkte, größeres Bild */
.slider--dots-only :is(.slider__prev,.slider__next,.slider__pause,.slider__btn){display:none!important}
.slider--dots-only .slider__bar{position:static!important;display:flex!important;justify-content:center;background:none!important;padding:14px 0 0!important;inset:auto!important;transform:none!important}
.hero-split__media .slider--dots-only .slider__track{aspect-ratio:3/2}
.hero-split__media .slider--dots-only img{aspect-ratio:3/2;object-fit:cover;width:100%;height:100%}
.slider--dots-only .slider__dots{position:static;justify-content:center;margin-top:14px;gap:8px;background:none;padding:0}
.slider--dots-only .slider__dot{width:8px;height:8px;border-radius:50%;background:var(--color-line);border:0;padding:0;opacity:1}
.slider--dots-only .slider__dot[aria-current="true"]{background:var(--btn-bg,var(--color-accent))}
@media (min-width:1025px){.hero-split--wide .container{grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr);gap:48px}}
.form-section{max-width:820px;margin-inline:auto}
.quick-buttons:not(.quick-buttons--tiles) :is(.js-tel,.js-mail)>svg{width:28px;height:28px;margin-bottom:2px}.quick-buttons:not(.quick-buttons--tiles) :is(.js-tel,.js-mail)>svg g{stroke-width:1.15}
.footer .footer__contact :is(.js-tel,.js-mail)>svg{color:#fff;opacity:.9;width:15px;height:15px;margin-right:0}
.two-col img{width:100%;height:auto}
.two-col p + ul{margin-top:16px}

/* =========================================================
   Ergänzungen: Karte, Raster-Hilfen, Bildband-Motive
   ========================================================= */
.mega__cols--2{--mega-cols:2}.mega__cols--3{--mega-cols:3}.mega__cols--4{--mega-cols:4}.mega__cols--5{--mega-cols:5}
/* Stilisierte Karte (G4/H7/H9) – Farben folgen dem Farbschema */
.map-svg__bg{fill:var(--color-accent-light)}
.map-svg__park{fill:var(--color-line)}
.map-svg__water{fill:var(--color-accent);opacity:.28}
.map-svg__street{fill:none;stroke:var(--color-white);stroke-width:5}
.map-svg__road{fill:none;stroke:var(--color-white);stroke-width:13}
.map-svg__pin path{fill:var(--color-ink)}
.map-svg__dot{fill:var(--color-white)}
.map-svg__label{font:600 20px var(--font-body);fill:var(--color-ink)}
/* Masonry: Platzhalter in unterschiedlichen Höhen */
.masonry-4-3{aspect-ratio:4/3}.masonry-3-4{aspect-ratio:3/4}.masonry-1-1{aspect-ratio:1/1}.masonry-2-3{aspect-ratio:2/3}.masonry-16-10{aspect-ratio:16/10}
/* Parallax-Motive (STANDARD §6: Bildpfade nur hier, nicht im HTML) */
.parallax--arbeitsplatz{--bg:url("../img/parallax-arbeitsplatz-1920.webp");--bg-sm:url("../img/parallax-arbeitsplatz-960.webp")}
.parallax--werkstatt{--bg:url("../img/parallax-werkstatt-1920.webp");--bg-sm:url("../img/parallax-werkstatt-960.webp")}
.parallax--za{--bg:url("../img/parallax-za-1920.webp");--bg-sm:url("../img/parallax-za-960.webp")}
.parallax--nh{--bg:url("../img/parallax-nh-1920.webp");--bg-sm:url("../img/parallax-nh-960.webp")}
.parallax--natur{--bg:url("../img/parallax-natur-1920.webp");--bg-sm:url("../img/parallax-natur-960.webp")}
.teasers--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.teaser h2{font-size:var(--fs-h3-lg)}
@media (max-width:768px){.teasers--2{grid-template-columns:1fr}}
/* Platzhalter auf getönten Flächen sichtbar halten */
:is(.section--tint,.el__stage--tint,.hero-split--tint,.page-head--light,.contact-info,.aside) .ph:not(.ph--accent){background:var(--color-white)}
/* Telefon/E-Mail-Links mit Icon: Grundgröße überall */
:is(.js-tel,.js-mail)>svg{width:14px;height:14px;color:var(--color-accent);display:inline-block;vertical-align:-2px;margin-right:7px;flex:none}
.sidebar__box :is(.js-tel,.js-mail){display:block;color:var(--color-ink);text-decoration:none;padding:3px 0}