/* ============================================================
   Müroll — portiert aus Layout-Variante 12 (Content Upgrade)
   Inter selbst gehostet (Variable woff2), keine externen Calls.
   ============================================================ */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/fonts/inter-variable.woff2') format('woff2-variations');
}

:root{--red:#D90024;--red-h:#B0001D;--navy:#141417;--navy7:#2B2B30;--navy9:#000000;--green:#1E7A48;--green-d:#143D2A;--green-tint:#E8F4EC;--blue-tint:#F1F1F2;--sand-tint:#F7F1E8;--ink:#13161B;--g6:#5E6470;--g4:#9AA0AC;--g2:#E7E7E9;--g1:#F4F4F5;--w:#fff;--max:1440px;--hero-tint:#F1F1F2;--od-accent:#9c9c9c;--od-dim:#9c9c9c;--od-text:#cfcfcf}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* Sprungmarken müssen unter dem gestickten Header landen — der ist im
   Corporate-Look dreizeilig (~157 px), nicht 96 px. */
[id]{scroll-margin-top:11.5rem}
@media(max-width:820px){[id]{scroll-margin-top:7rem}}
body{font-family:"Inter",sans-serif;color:var(--ink);line-height:1.6;background:var(--w);-webkit-font-smoothing:antialiased}
html{-webkit-tap-highlight-color:rgba(217,0,36,.18)}
body{overflow-x:hidden}
.htext h1,.page-hero h1{overflow-wrap:break-word}
button,a{touch-action:manipulation}
/* sichtbarer Fokus (Tastatur) */
:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:3px}
:focus:not(:focus-visible){outline:none}
/* Skip-Link */
.skip{position:absolute;left:16px;top:-60px;z-index:200;background:var(--navy);color:#fff;padding:0.75rem 1.125rem;border-radius:8px;font-weight:600;transition:top .15s}
.skip:focus{top:12px}
/* Frontend-Edit-Button (nur eingeloggte CP-User) */
.cp-edit{position:fixed;right:calc(1.25rem + env(safe-area-inset-right));bottom:calc(1.25rem + env(safe-area-inset-bottom));z-index:120;display:inline-flex;align-items:center;gap:.5rem;background:var(--navy);color:#fff;font-weight:600;font-size:.9rem;padding:.65rem 1.1rem;border-radius:999px;box-shadow:0 10px 30px -8px rgba(0,0,0,.5)}
.cp-edit:hover{background:var(--navy9);color:#fff}
.cp-edit svg{width:18px;height:18px}
@media print{.cp-edit{display:none}}
main:focus{outline:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
.wrap{max-width:var(--max);margin:0 auto;padding:0 2.5rem}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
h1,h2,h3{line-height:1.12}
ul[class],ol[class]{list-style:none}
.btn{font-family:inherit;font-weight:600;font-size:0.9375rem;padding:0.875rem 1.625rem;border-radius:4px;display:inline-flex;align-items:center;gap:0.625rem;cursor:pointer;transition:.15s;border:2px solid transparent}
.btn svg{width:18px;height:18px}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:var(--red-h)}
.btn-out{border-color:var(--navy);color:var(--navy)}.btn-out:hover{background:var(--navy);color:#fff}
.btn-green{background:var(--green);color:#fff}.btn-green:hover{background:var(--green-d)}
.btn-wout{border-color:rgba(255,255,255,.6);color:#fff}.btn-wout:hover{background:#fff;color:var(--navy)}
/* header */
header{position:relative;z-index:50}
/* nur der Hauptkopf bleibt sticky — die Meta-Leiste scrollt weg */
.header-main{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--g2);--header-h:106px;--logo-h:52px}
.header-main.is-stuck{--header-h:70px;--logo-h:34px}
/* meta-/servicenavigation (obere leiste, NICHT sticky) */
.metabar{background:var(--navy);border-bottom:1px solid rgba(255,255,255,.1)}
.metabar .wrap{display:flex;justify-content:flex-end;align-items:center;gap:1.625rem;height:42px}
.meta{display:flex;gap:1.5rem;font-size:0.84375rem;font-weight:600}
.meta a{color:#fff;font-weight:600;padding:0.3125rem 0;border-bottom:2px solid transparent}
.meta a:hover,.meta a[aria-current]{color:var(--red)}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);gap:1.5rem;transition:height .28s ease}
.nav>a.logo{display:flex;align-items:center}
.nav>a.logo svg{height:var(--logo-h);width:auto;display:block;transition:height .28s ease}
.nav>a.logo .logo-simple{display:none}
.header-main.is-stuck .logo .logo-full{display:none}
.header-main.is-stuck .logo .logo-simple{display:block}
.menu{font-size:1rem;font-weight:600;color:var(--navy)}
.menu>ul{display:flex;gap:1.75rem;list-style:none}
.menu>ul>li{position:relative}
.menu>ul>li>a{display:inline-flex;align-items:center;padding:0.5rem 0;border-bottom:2px solid transparent}
.menu>ul>li>a[aria-current],.menu>ul>li>a:hover{border-color:var(--red);color:var(--red)}
.menu .sub{position:absolute;top:calc(100% + 6px);left:-14px;min-width:240px;background:#fff;border:1px solid var(--g2);border-radius:12px;padding:0.5rem;box-shadow:0 18px 44px rgba(0,0,0,.14);list-style:none;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s ease,transform .16s ease,visibility 0s linear .25s;z-index:60}
/* Unsichtbare Hover-Brücke über der 6px-Lücke zwischen Menüpunkt und Submenü —
   sonst verliert langsames Herunterfahren mit der Maus den :hover (Submenü klappt zu).
   Die visibility-Verzögerung (.25s) verzeiht zusätzlich kurze Hover-Aussetzer. */
.menu>ul>li:hover .sub,.menu>ul>li:focus-within .sub{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.menu .sub a{display:block;padding:0.625rem 0.875rem;border-radius:8px;font-weight:600;color:var(--navy);white-space:nowrap}
.menu .sub a:hover,.menu .sub a[aria-current]{background:var(--g1);color:var(--red)}
.nav-r{display:flex;gap:0.875rem;align-items:center}
.lang{display:flex;gap:0.375rem;font-size:0.8125rem;font-weight:700;color:var(--g4)}
.lang a{padding:0.25rem 0.375rem;border-radius:5px}.lang a.on{color:var(--navy);background:var(--g1)}
.lang-soon{padding:0.25rem 0.375rem;color:var(--g4);cursor:default;user-select:none}
.iconbtn{width:44px;height:44px;border:1px solid var(--g2);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--navy);cursor:pointer;background:none}.iconbtn:hover{border-color:var(--navy)}.iconbtn svg{width:20px;height:20px}
/* burger + mobile-panel */
.burger{display:none;width:46px;height:44px;border:1px solid var(--g2);border-radius:8px;background:none;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:0.3125rem;padding:0}
.burger span{width:22px;height:2px;background:var(--navy);border-radius:2px;display:block;transition:transform .26s cubic-bezier(.4,.1,.2,1),opacity .18s}
.burger.is-open{border-color:var(--navy)}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobnav{display:none}
[x-cloak]{display:none!important}
/* AJAX-Suche */
.searchbar{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--g2);box-shadow:0 22px 44px rgba(0,0,0,.12);z-index:55}
.searchbar .wrap{padding-top:1.125rem;padding-bottom:1.125rem}
.searchbar-form{display:flex;align-items:center;gap:0.75rem;border:2px solid var(--g2);border-radius:10px;padding:0.375rem 0.75rem;transition:.15s}
.searchbar-form:focus-within{border-color:var(--navy)}
.searchbar-ic{color:var(--g4);display:flex}.searchbar-ic svg{width:22px;height:22px}
.searchbar-form input{flex:1;border:none;outline:none;background:none;font-family:inherit;font-size:1.1rem;color:var(--ink);padding:0.5rem 0}
.searchbar-close{width:36px;height:36px;border:none;background:var(--g1);border-radius:8px;color:var(--navy);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none}
.searchbar-close:hover{background:var(--g2)}.searchbar-close svg{width:18px;height:18px}
.search-results{list-style:none;margin-top:0.625rem;max-height:60vh;max-height:60dvh;overflow-y:auto}
.search-results li{border-radius:10px}
.search-results a{display:block;padding:0.75rem 0.875rem;border-radius:10px}
.search-results a.is-active,.search-results a:hover{background:var(--g1)}
.sr-type{display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--red)}
.sr-title{display:block;font-weight:700;color:var(--navy);margin:0.0625rem 0 0.125rem}
.sr-ex{display:block;color:var(--g6);font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-hint{color:var(--g6);margin-top:0.875rem;padding:0 0.25rem;font-size:.95rem}
/* hero */
.htext{padding:4.25rem 0 2.5rem}
.htext h1{font-size:clamp(2.3rem,4.4vw,3.9rem);font-weight:800;color:var(--navy);max-width:30ch}
mark{background:none;color:var(--red)}
.htext h1 mark{background:none;color:var(--red)}
.htext p{font-size:1.25rem;color:var(--g6);margin:1.375rem 0 1.875rem;max-width:75ch}
.htext .cta{display:flex;gap:0.875rem;flex-wrap:wrap}
.hbanner{background:var(--hero-tint)}
.hbanner .wrap{padding:2.5rem clamp(1.5rem,5vw,5.625rem)}
.hbanner img{width:100%;height:auto;display:block;margin-inline:auto}
/* Split-Hero (Inhaltsseiten, Text links + Titelbild rechts) */
.hero-c{padding:2.125rem 0 2.25rem;text-align:center}
/* Solo-Hero: wenn KEIN Bild direkt folgt — hebt sich per Schatten vom Content ab */
.hero-c--solo{position:relative;z-index:1;padding-bottom:2.625rem;box-shadow:0 10px 18px -14px rgba(0,0,0,.1)}
.hero-c--solo + section,.hero-c--solo + div{padding-top:3rem}
.hero-c .crumb{font-size:.85rem;color:var(--g4);font-weight:500;display:flex;gap:0.5rem;flex-wrap:wrap;justify-content:center}
.hero-c .crumb a:hover{color:var(--red)}
/* Versalien wirken deutlich wuchtiger — Grad etwas zurückgenommen. Vor allem aber
   war die Breite auf 20ch gedeckelt, sodass lange Komposita wie
   „Papierselbstklebebänder“ mitten im Wort getrennt wurden, obwohl Platz da war. */
.hero-c h1{font-size:clamp(2.1rem,3.8vw,3.1rem);font-weight:800;color:var(--navy);margin:0.875rem auto 1rem;max-width:26ch;overflow-wrap:break-word;hyphens:manual}
.hero-c p{font-size:1.18rem;color:var(--g6);max-width:62ch;margin:0 auto}
.hero-c .cta-row{display:flex;gap:0.875rem;margin-top:1.625rem;flex-wrap:wrap;justify-content:center}
.hero-banner{height:50vh;height:50dvh;overflow:hidden;position:relative;background:var(--g1)}
/* 180 % Bildhöhe = 40 % Spielraum je Seite, davon werden 32 % genutzt. */
.hero-banner img{position:absolute;left:0;top:-40%;width:100%;height:180%;object-fit:cover;display:block;will-change:transform}

/* Parallax bevorzugt über eine scrollgesteuerte Animation: Die läuft auf dem
   Compositor und bleibt dadurch flüssig. Das JavaScript in site.js aktualisiert
   transform dagegen aus dem Main-Thread heraus und hinkt dem Scrollen um einen
   Frame hinterher — das ist die Ursache des Ruckelns. site.js überspringt seine
   Berechnung, sobald der Browser animation-timeline beherrscht. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Die Timeline muss der Container liefern: view() auf dem Bild selbst bleibt
       inaktiv, weil es absolut in einem overflow:hidden-Container liegt. */
    .hero-banner[data-parallax],
    .parallax-divider[data-parallax] {
      view-timeline: --parallax-flaeche block;
    }
    .hero-banner[data-parallax] img,
    .parallax-divider[data-parallax] img {
      animation: parallax-schub linear both;
      animation-timeline: --parallax-flaeche;
      animation-range: cover 0% cover 100%;
    }
    /* Prozente beziehen sich hier auf die BILDhöhe (180 % des Banners), nicht auf
       den Banner selbst: 32 % Bannerhöhe entsprechen 17.8 % Bildhöhe. Der
       Überhang von 22,2 % je Seite lässt damit 4,4 % Reserve. */
    @keyframes parallax-schub {
      from { transform: translate3d(0, -17.8%, 0); }
      to   { transform: translate3d(0,  17.8%, 0); }
    }
  }
}
.verteiler-sec{background:var(--g1)}
/* Parallax-Trenner */
.parallax-divider{position:relative;height:var(--pd-h,42vh);height:var(--pd-h,42dvh);overflow:hidden;background:var(--navy)}
.parallax-divider img{position:absolute;top:-40%;left:0;width:100%;height:180%;object-fit:cover;will-change:transform}
.parallax-divider .pd-overlay{position:absolute;inset:0;display:flex;align-items:center;background:linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,.4));color:#fff}
.parallax-divider .pd-overlay h2{font-size:clamp(1.8rem,3.4vw,2.8rem);font-weight:800;max-width:20ch}
.parallax-divider .pd-overlay h2 mark{background:none;color:#fff}
.parallax-divider .pd-overlay p{font-size:1.15rem;color:#dbe3ee;max-width:54ch;margin-top:.75rem}
.parallax-divider .pd-overlay .btn{margin-top:1.25rem}
/* Block-Hintergrund (Fieldset block_bg → Wrapper im builder.antlers.html).
   Vollbreites Farbband; das innere section behält sein 4.5rem-Padding.
   Nahtloses Verschmelzen gleicher Folgefarben via :has-Geschwisterregel. */
.pbbg--grau{background:var(--g1)}
.pbbg--gruen{background:var(--green-tint)}
.pbbg--blau{background:var(--blue-tint)}
.pbbg--sand{background:var(--sand-tint)}
.pbbg--grau + .pbbg--grau > section,.pbbg--gruen + .pbbg--gruen > section,.pbbg--blau + .pbbg--blau > section,.pbbg--sand + .pbbg--sand > section{padding-top:0}
/* Bild/Text-Spalten (media_text) */
.mt-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.mt--rev .mt-im{order:2}
.mt-im{border-radius:16px;overflow:hidden;background:var(--g1)}
.mt-im img{width:100%;height:100%;max-height:30rem;object-fit:cover;display:block}
.mt-eyebrow{display:inline-block;color:var(--red);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.6rem}
.mt-body h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;color:var(--navy);margin-bottom:1rem}
.mt-body .prose{color:var(--g6)}
.mt-body .btn{margin-top:1.5rem}
@media(max-width:820px){.mt-grid{grid-template-columns:1fr;gap:1.75rem}.mt--rev .mt-im{order:0}}
@media(max-width:820px){.hero-c{padding:1.375rem 0 1.625rem}.hero-banner{height:40vh;height:40dvh}}
/* counter */
.counter{background:var(--navy);color:#fff;border-top:1px solid rgba(255,255,255,.11)}
.counter .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0.0625rem;padding:0}
.cell{padding:3rem 1.75rem;border-left:1px solid rgba(255,255,255,.1)}.cell:first-child{border-left:0}
.cell b{display:block;font-size:clamp(2.6rem,4vw,3.6rem);font-weight:800;letter-spacing:-.02em;line-height:1;color:#fff}
.cell .bar{width:44px;height:4px;background:var(--red);border-radius:2px;margin:1rem 0 0.75rem}
.cell small{display:block;color:#aeb6c4;font-size:1rem}
/* generic section heads */
section{padding:4.5rem 0}
/* Überschrift und Fließtext brauchen unterschiedliche Zeilenlängen: 62ch sind für
   Lesetext richtig, zwangen die Versalien-Überschrift aber in drei Zeilen. */
.sh{max-width:none;margin-bottom:2.875rem}
.sh.ctr{margin-inline:auto;text-align:center}
.sh.ctr h2,.sh.ctr p{margin-inline:auto}
.sh h2{font-size:clamp(2rem,3.6vw,2.9rem);font-weight:800;color:var(--navy);max-width:30ch;overflow-wrap:break-word;hyphens:manual}
.sh h2 mark{background:none;color:var(--red)}
.sh p{color:var(--g6);font-size:1.15rem;margin-top:0.875rem;max-width:62ch}
.dark .sh h2{color:#fff}.dark .sh p{color:var(--od-text)}
/* sortiment teasers */
.grid4{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.625rem;list-style:none}
.grid2>li{display:flex}.grid2>li>.tile{flex:1}
.grid2 .tile .im{height:240px}
.grid4>li{display:flex}.grid4>li>.tile{flex:1}
.tile{border:1px solid var(--g2);border-radius:12px;overflow:hidden;background:#fff;transition:.2s;display:flex;flex-direction:column}
.tile:hover{box-shadow:0 16px 44px rgba(0,0,0,.16);transform:translateY(-5px);border-color:transparent}
.tile .im{height:190px;overflow:hidden;background:var(--g1);flex:none}
.tile .im img{width:100%;height:100%;object-fit:cover;transition:.4s;display:block}.tile:hover .im img{transform:scale(1.05)}
.tile .b{padding:1.625rem 1.5rem 1.5rem;flex:1;display:flex;flex-direction:column}
.tile .ic{width:56px;height:56px;border-radius:13px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:1.125rem;flex:none}.tile .ic svg{width:32px;height:32px}
.tile h3{font-size:1.4rem;font-weight:700;color:var(--navy);margin-bottom:0.5rem}
.tile p{color:var(--g6);font-size:.96rem;margin-bottom:1.125rem;flex:1}
.tile .more{color:var(--red);font-weight:600;display:inline-flex;align-items:center;gap:0.4375rem}.tile .more svg{width:16px;height:16px}
/* apps / icon cards */
.apps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.375rem}
.app{display:flex;gap:1.125rem;align-items:flex-start;background:#fff;border:1px solid var(--g2);border-radius:14px;padding:1.625rem;transition:.2s}
/* .app:hover entfernt (Feintuning F7, 21.10.2026): Icon-Karten haben keinen Link — Hover wirkte wie ein kaputter Button */
.app .ic{width:54px;height:54px;border-radius:12px;background:#FFF0F2;color:var(--red);display:flex;align-items:center;justify-content:center;flex:none}.app .ic svg{width:30px;height:30px}
.app h3{font-size:1.18rem;font-weight:700;color:var(--navy);margin-bottom:0.3125rem}
.app p{color:var(--g6);font-size:.95rem}
/* split feature */
.print{display:grid;grid-template-columns:1fr 1.18fr;gap:3rem;align-items:center}
.print.rev{grid-template-columns:1.18fr 1fr}
.print.rev .im{order:2}
.print .im img{width:100%;height:430px;object-fit:cover;border-radius:16px}
.print h2{font-size:clamp(1.9rem,3.2vw,2.6rem);font-weight:800;color:var(--navy)}
.print p{color:var(--g6);font-size:1.1rem;margin:1rem 0 1.375rem}
.print .usp{display:inline-flex;gap:0.625rem;align-items:center;background:#FFF0F2;color:var(--red);font-weight:700;font-size:.92rem;padding:0.5rem 1rem;border-radius:100px;margin-bottom:1.125rem}
.print .usp svg{width:18px;height:18px}
.brands{margin-top:1.75rem}
.brands small{color:var(--g4);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:0.75rem}
.chips{display:flex;flex-wrap:wrap;gap:0.625rem;margin-top:0.875rem}
.chip{border:1px solid var(--g2);border-radius:8px;padding:0.5625rem 1rem;color:var(--g6);font-weight:600;font-size:.9rem}
.chip.hl{border-color:var(--red);color:var(--red);border-style:dashed}
.chip-checks{list-style:none;margin-top:0.875rem;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem 1.5rem}
.chip-checks li{display:flex;align-items:center;gap:0.5rem;color:var(--navy);font-weight:600;font-size:.95rem}
.chip-checks li svg{width:18px;height:18px;color:var(--red);flex:none}
@media(max-width:560px){.chip-checks{grid-template-columns:1fr}}
/* liefersicherheit (navy) */
.deliver{background:var(--navy);color:#fff;border-top:1px solid rgba(255,255,255,.11)}
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.375rem}
.dcard{background:var(--navy7);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:1.875rem}
.dcard .ic{width:54px;height:54px;border-radius:12px;background:rgba(255,255,255,.1);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:1.125rem}.dcard .ic svg{width:30px;height:30px}
.dcard h3{font-size:1.2rem;font-weight:700;margin-bottom:0.4375rem}
.dcard p{color:var(--od-text);font-size:.96rem}
/* qualität & zertifikate */
.qual{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.qual h2{font-size:clamp(1.9rem,3.2vw,2.6rem);font-weight:800;color:var(--navy)}
.qual p{color:var(--g6);font-size:1.08rem;margin:1rem 0 1.375rem}
.qual ul{list-style:none;display:grid;gap:0.75rem}
.qual li{display:flex;gap:0.8125rem;align-items:flex-start;font-weight:500}.qual li svg{width:22px;height:22px;color:var(--red);flex:none;margin-top:0.1875rem}
.badges{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.badge{border:1px solid var(--g2);border-radius:14px;padding:1.5rem;text-align:center;background:#fff}
.badge .b{font-size:1.25rem;font-weight:800;color:var(--navy);letter-spacing:-.01em}
.badge small{color:var(--g6);font-size:.85rem;display:block;margin-top:0.25rem}
/* beratung / prozess */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.375rem}
.step{position:relative}
.step .no{width:48px;height:48px;border-radius:50%;background:var(--red);color:#fff;font-weight:800;font-size:1.15rem;display:flex;align-items:center;justify-content:center;margin-bottom:1.125rem}
.step h3{font-size:1.15rem;font-weight:700;color:var(--navy);margin-bottom:0.375rem}
.step p{color:var(--g6);font-size:.95rem}
.advisor{display:flex;gap:1.125rem;align-items:center;background:#fff;border:1px solid var(--g2);border-radius:14px;padding:1.375rem 1.625rem;margin-top:2.75rem;flex-wrap:wrap}
.advisor .av{width:56px;height:56px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}.advisor .av svg{width:30px;height:30px}
.advisor b{color:var(--navy)}.advisor span{color:var(--g6)}
/* USP grid */
.usp-sec{background:var(--g1)}
.uspgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.625rem}
.up .big{width:62px;height:62px;color:var(--navy);margin-bottom:1.125rem}.up .big svg{width:62px;height:62px;stroke-width:1.7}
.up h3{font-size:1.1rem;font-weight:700;color:var(--navy);margin-bottom:0.375rem}
.up p{color:var(--g6);font-size:.94rem}
/* müroll group */
.group{background:var(--navy9);color:#fff;border-top:1px solid rgba(255,255,255,.11)}
.ggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.375rem;margin-bottom:1.875rem}
.gcard{background:var(--navy7);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:2rem}
.gcard .nm{font-size:1.5rem;font-weight:800;letter-spacing:-.01em}
.gcard .nm i{color:var(--red);font-style:normal}
.gcard .claim{color:var(--od-accent);font-size:.9rem;margin:0.25rem 0 0.875rem}
.gcard p{color:var(--od-text);font-size:.96rem}
.group .line{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;color:var(--od-text)}
/* eco */
.eco{background:var(--green-tint)}
.eco .top{margin-bottom:2.875rem}
.eco h2{font-size:clamp(2.1rem,3.8vw,3rem);font-weight:800;color:var(--green-d)}
.eco h2 mark{background:none;color:var(--green)}
.eco .lead{color:#356049;font-size:1.15rem;margin-top:.875rem;max-width:62ch}
.eco .ecards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.375rem}
.ecard{background:#fff;border:1px solid #d3e6da;border-radius:16px;padding:1.875rem 1.625rem;transition:.2s}
.ecard:hover{box-shadow:0 16px 40px rgba(20,61,42,.12);transform:translateY(-4px)}
.ecard .ic{width:60px;height:60px;border-radius:14px;background:var(--green-tint);color:var(--green);display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}.ecard .ic svg{width:34px;height:34px;stroke-width:1.8}
.ecard b{display:block;font-size:2.3rem;font-weight:800;color:var(--green-d);letter-spacing:-.02em;line-height:1}
.ecard h3{font-size:1.05rem;font-weight:700;color:var(--navy);margin:0.5rem 0 0.375rem}
.ecard p{color:var(--g6);font-size:.93rem}
.eco .foot{display:flex;gap:1rem;align-items:center;margin-top:2.5rem;flex-wrap:wrap}
.eco .foot span{color:#356049;font-weight:500}
/* brand band */
.cta-neutral{background:var(--navy);color:#fff;border-top:1px solid rgba(255,255,255,.11)}
.cta-neutral .inner{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;padding-block:4.5rem}
.cta-neutral h2{font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800;}
.cta-neutral h2 mark{background:none;color:#fff}
.cta-neutral .sub{color:var(--od-text);margin-top:0.875rem;font-size:1.12rem;max-width:46ch}
.contacts{display:flex;flex-direction:column;gap:0.875rem}
.contacts a{display:flex;align-items:center;gap:1rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:1rem 1.25rem;font-weight:600;font-size:1.05rem;transition:.15s;color:#fff}
.contacts a:hover{background:rgba(255,255,255,.14)}
.contacts .ico{width:44px;height:44px;background:var(--red);border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none}.contacts .ico svg{width:22px;height:22px;color:#fff}
.contacts .ctx{display:flex;flex-direction:column}
.contacts small{color:var(--od-dim);font-weight:500;font-size:.78rem;letter-spacing:.02em}
/* footer */
footer{background:var(--navy9);color:var(--od-text);padding:4rem 0 2.25rem;font-size:0.9375rem;border-top:1px solid rgba(255,255,255,.08)}
.fg>div>p{line-height:1.95}
.fg{display:grid;grid-template-columns:1.1fr 1fr 1fr 1.35fr;gap:2.5rem}
footer .flogo{display:inline-block;margin-bottom:3rem}
footer .flogo svg{height:30px;width:auto;display:block}
.fg h2{color:#fff;font-size:0.8125rem;text-transform:uppercase;margin-bottom:1.25rem}
.fg a{display:block;padding:0.3125rem 0}.fg a:hover{color:#fff}
.fbot{border-top:1px solid rgba(255,255,255,.12);margin-top:2.5rem;padding-top:1.375rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:0.625rem}

/* ============================================================
   Ergänzungen: Innenseiten (Sortiment / Gruppe / Produkt / Filter)
   ============================================================ */
.page-hero{background:var(--navy);color:#fff;padding:3.375rem 0 3.75rem}
.page-hero .crumb{font-size:.85rem;color:var(--od-dim);margin-bottom:1rem;display:flex;gap:0.5rem;flex-wrap:wrap}
.page-hero .crumb a:hover{color:#fff}
.page-hero h1{font-size:clamp(2.1rem,4vw,3.2rem);font-weight:800;max-width:22ch}
.page-hero p{color:var(--od-text);font-size:1.15rem;margin-top:1rem;max-width:60ch}
/* product grid + filter */
.layout-filter{display:grid;grid-template-columns:340px 1fr;gap:2.75rem;align-items:start}
.layout-filter.ohne-filter{grid-template-columns:1fr}
.filterbar{position:sticky;top:104px;border:1px solid var(--g2);border-radius:14px;padding:1.375rem;background:#fff}
.filterbar h4{font-size:0.8125rem;text-transform:uppercase;letter-spacing:.04em;color:var(--g4);margin:0 0 0.625rem}
.fgroup{margin-bottom:1.375rem}
.fchips{display:flex;flex-wrap:wrap;gap:0.5rem}
.fchip{border:1px solid var(--g2);border-radius:100px;padding:0.4375rem 0.875rem;font-size:.85rem;font-weight:600;color:var(--g6);cursor:pointer;transition:.15s;background:#fff;font-family:inherit}
.fchip:hover{border-color:var(--navy);color:var(--navy)}
.fchip.on{background:var(--red);border-color:var(--red);color:#fff}
/* Schieberegler „Trägerstärke“ — zwei überlagerte Range-Inputs (von/bis) */
.frange-out{display:block;font-size:.95rem;font-weight:700;color:var(--navy);margin-bottom:0.5rem;letter-spacing:-.01em}
.frange-track{position:relative;height:26px;display:flex;align-items:center}
.frange-rail{position:absolute;left:0;right:0;height:4px;background:var(--g2);border-radius:2px}
.frange-fill{position:absolute;height:4px;background:var(--red);border-radius:2px}
.frange-in{position:absolute;left:0;width:100%;height:26px;margin:0;padding:0;background:none;border:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.frange-in:focus{outline:none}
.frange-in::-webkit-slider-runnable-track{background:none;border:none}
.frange-in::-moz-range-track{background:none;border:none}
.frange-in::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:0;background:#fff;border:2px solid var(--red);cursor:pointer;pointer-events:auto}
.frange-in::-moz-range-thumb{width:18px;height:18px;border-radius:0;background:#fff;border:2px solid var(--red);cursor:pointer;pointer-events:auto}
.frange-in:focus-visible::-webkit-slider-thumb{outline:2px solid var(--navy);outline-offset:2px}
.frange-in:focus-visible::-moz-range-thumb{outline:2px solid var(--navy);outline-offset:2px}
.filter-reset{margin-top:1.375rem;font-size:.85rem;color:var(--red);font-weight:600;cursor:pointer;background:none;border:none;font-family:inherit;padding:0}
/* Mobile-Filter (Off-Canvas) — Desktop ausgeblendet */
.filter-toggle,.filterbar-head,.filter-apply,.filter-backdrop{display:none}
.filter-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 0.375rem;border-radius:10px;background:var(--red);color:#fff;font-size:.72rem;font-weight:700}
.filter-count{font-size:.9rem;color:var(--g6);margin-bottom:1.125rem}
.prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.375rem}
.prod-card{border:1px solid var(--g2);border-radius:14px;overflow:hidden;background:#fff;transition:.2s;display:flex;flex-direction:column}
.prod-card:hover{box-shadow:0 14px 36px rgba(0,0,0,.13);transform:translateY(-4px);border-color:transparent}
.prod-card .im{aspect-ratio:16/10;position:relative;background:var(--g1);display:flex;align-items:center;justify-content:center;overflow:hidden}
.prod-card .im img{width:100%;height:100%;object-fit:cover}
.prod-card .export{position:absolute;top:12px;right:12px;background:var(--red);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.02em;padding:0.3125rem 0.625rem;border-radius:20px;z-index:1}
.prod-card .pb{padding:1.375rem;flex:1;display:flex;flex-direction:column}
.prod-card .tag{font-size:0.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--red)}
.prod-card h3{font-size:1.25rem;font-weight:700;color:var(--navy);margin:0.375rem 0 0.375rem}
.prod-card p{color:var(--g6);font-size:1rem;line-height:1.5;flex:1}
.prod-card .prod-tags{list-style:none;display:flex;flex-wrap:wrap;gap:0.375rem;margin:0.75rem 0 0.25rem}
.prod-card .prod-tags li{font-size:.72rem;font-weight:600;color:var(--g6);background:var(--g1);border:1px solid var(--g2);border-radius:20px;padding:0.25rem 0.625rem;line-height:1.25}
.prod-card .prod-tags:empty{display:none}
.prod-card .specs{display:flex;gap:0.625rem;margin:0.875rem 0 1rem;flex-wrap:wrap}
.prod-card .spec{background:var(--g1);border-radius:9px;padding:0.5625rem 0.8125rem;flex:1;min-width:0}
.prod-card .spec:last-child{flex:2}
.prod-card .spec .lbl{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--g6);font-weight:700}
.prod-card .spec .val{font-size:1.02rem;font-weight:700;color:var(--navy);letter-spacing:-.02em}
/* Vier Kennwert-Blöcke (Trägermaterial · Kleber · Trägerstärke · Gesamtstärke) — festes 2×2-Raster */
.prod-card .specs-4{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}
.prod-card .specs-4 .spec,.prod-card .specs-4 .spec:last-child{flex:none;min-width:0}
.prod-card .specs-4 .spec .lbl{font-size:.66rem;letter-spacing:.03em;overflow-wrap:anywhere;margin-bottom:0.125rem}
.prod-card .specs-4 .spec .val{font-size:.92rem;line-height:1.3;display:block;overflow-wrap:anywhere;letter-spacing:-.01em}
.prod-card .more{color:var(--red);font-weight:600;font-size:.9rem;display:inline-flex;gap:0.375rem;align-items:center}.prod-card .more svg{width:16px;height:16px}
.empty{padding:3rem;text-align:center;color:var(--g6);border:1px dashed var(--g2);border-radius:14px}
/* produkt detail */
.pd{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
.pd-intro{margin-bottom:1.375rem}
.pd-intro,.pd-intro p{font-size:1.1rem;color:var(--g6)}
.pd-intro p{margin-bottom:0.75rem}.pd-intro p:last-child{margin-bottom:0}
.pd .im{background:var(--g1);border-radius:18px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pd .im img{width:100%;height:100%;object-fit:cover}
.pd .im a.lbx{display:block;width:100%;height:100%;cursor:zoom-in}
/* Produktgalerie: Hauptbild-Stage + Thumbnails */
.pd .im.pd-gallery{background:none;border-radius:0;aspect-ratio:auto;display:flex;flex-direction:column;gap:0.875rem;overflow:visible;align-items:stretch}
.pd-stage{position:relative;background:var(--g1);border-radius:18px;aspect-ratio:1/1;overflow:hidden}
.pd-stage a.lbx{position:absolute;inset:0;width:100%;height:100%;cursor:zoom-in}
.pd-stage img{width:100%;height:100%;object-fit:cover}
.pd-thumbs{list-style:none;display:flex;flex-wrap:wrap;gap:0.625rem;margin:0}
.pd-thumbs button{width:72px;height:72px;border:2px solid var(--g2);border-radius:10px;overflow:hidden;background:var(--g1);cursor:pointer;padding:0;display:block;transition:border-color .15s}
.pd-thumbs button:hover{border-color:var(--g4)}
.pd-thumbs button.on{border-color:var(--red)}
.pd-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.pd-h{font-size:1.3rem;font-weight:700;color:var(--navy);line-height:1.25;margin:2.75rem 0 1.25rem}
.pd .checklist{margin-bottom:0}
.spec-table{width:100%;border-collapse:collapse;margin:0.5rem 0 1.625rem}
.spec-table th,.spec-table td{text-align:left;padding:0.8125rem 0;border-bottom:1px solid var(--g2);font-size:.95rem;vertical-align:top}
.spec-table th{color:var(--g6);font-weight:500;width:48%}
.pd-disclaimer{font-size:.85rem;color:var(--g4);margin:0.75rem 0 1.5rem}
.spec-table td{color:var(--navy);font-weight:600}
.disclaimer{display:flex;gap:0.75rem;align-items:flex-start;background:#FFF0F2;border:1px solid #f6c9d1;color:#8a1227;border-radius:12px;padding:1rem 1.125rem;font-size:.92rem;font-weight:500;margin:0.5rem 0 1.5rem}
.disclaimer svg{width:20px;height:20px;flex:none;margin-top:0.0625rem}
.prose{color:var(--g6);font-size:1.02rem}.prose h2{color:var(--navy);font-size:1.5rem;margin:1.5rem 0 0.625rem}.prose ul{margin:0.625rem 0 0.625rem 1.25rem}.prose p{margin-bottom:0.75rem}

@media(max-width:1000px){.apps,.dgrid,.ggrid,.steps,.uspgrid,.prod-grid{grid-template-columns:repeat(2,1fr)}.grid4,.eco .ecards{grid-template-columns:1fr 1fr}.counter .wrap{grid-template-columns:1fr 1fr}.cell:nth-child(odd){border-left:0}.layout-filter{grid-template-columns:1fr}
section.cta-neutral .inner,section.fakt .inner{grid-template-columns:1fr}
.filter-toggle{display:inline-flex;align-items:center;gap:0.5rem;font-family:inherit;font-weight:600;font-size:.95rem;color:var(--navy);background:#fff;border:1px solid var(--g2);border-radius:8px;padding:0.6875rem 1.125rem;cursor:pointer;margin-bottom:1.25rem}
.filter-toggle svg{width:18px;height:18px;color:var(--red)}
.filter-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:90}
.filterbar{position:fixed;top:0;left:0;height:100dvh;width:min(360px,88vw);max-width:none;z-index:95;transform:translateX(-100%);transition:transform .28s ease;border:0;border-right:1px solid var(--g2);border-radius:0;overflow-y:auto;padding:1.25rem 1.375rem calc(1.75rem + env(safe-area-inset-bottom)) calc(1.375rem + env(safe-area-inset-left))}
.filterbar.is-open{transform:translateX(0)}
.filterbar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;padding-bottom:0.875rem;border-bottom:1px solid var(--g2)}
.filterbar-title{font-size:1.1rem;font-weight:700;color:var(--navy)}
.filter-close{background:none;border:0;cursor:pointer;color:var(--g6);padding:0.25rem;display:flex;line-height:0}.filter-close svg{width:24px;height:24px}
.filter-apply{display:block;width:100%;margin-top:1.5rem;background:var(--red);color:#fff;border:0;border-radius:8px;padding:0.875rem;font-family:inherit;font-weight:600;font-size:1rem;cursor:pointer}
body.filter-open{overflow:hidden}}
@media(max-width:820px){.apps,.dgrid,.ggrid,.steps,.uspgrid,.print,.qual,.eco .top,.eco .ecards,.cta-neutral .inner,.fakt .inner,.fg,.badges,.pd,.prod-grid,.grid4,.grid2{grid-template-columns:1fr}.cta-neutral .inner,.fakt .inner{padding-block:3.25rem}.print.rev .im{order:0}
.wrap{padding:0 1.25rem}
.header-main{--header-h:72px;--logo-h:32px}
.header-main.is-stuck{--header-h:58px;--logo-h:28px}
.menu,.nav-r .desktop-only,.metabar{display:none}
.burger{display:flex}
.mobnav{display:block;position:fixed;top:var(--header-h);left:0;right:0;height:calc(100dvh - var(--header-h));z-index:45;background:#fff;padding:1.375rem calc(1.5rem + env(safe-area-inset-right)) calc(2.5rem + env(safe-area-inset-bottom)) calc(1.5rem + env(safe-area-inset-left));overflow-y:auto;overscroll-behavior:contain}
.mobnav nav ul{list-style:none}
.mobnav>nav>ul>li{border-bottom:1px solid var(--g2)}
.mobnav>nav>ul>li>a,.mob-row>a{display:block;padding:1rem 0;font-size:1.15rem;font-weight:700;color:var(--navy)}
.mobnav>nav>ul>li>a[aria-current],.mob-row>a[aria-current]{color:var(--red)}
.mob-row{display:flex;align-items:center;justify-content:space-between;gap:0.5rem}
.mob-row>a{flex:1 1 auto}
.mob-toggle{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-0.625rem;border:0;background:none;color:var(--navy);cursor:pointer;-webkit-tap-highlight-color:transparent}
.mob-toggle svg{width:22px;height:22px;transition:transform .28s ease}
.mob-toggle.is-open svg{transform:rotate(180deg)}
.mob-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.mob-sub.is-open{grid-template-rows:1fr}
.mob-sub>ul{overflow:hidden;list-style:none;padding-left:1rem}
.mob-sub.is-open>ul{padding-bottom:0.875rem}
.mobnav nav ul ul a{display:flex;align-items:center;min-height:44px;padding:0.5625rem 0;color:var(--g6);font-weight:600}
.mobnav nav ul ul a[aria-current]{color:var(--red)}
.mob-meta ul{list-style:none;margin-top:0.625rem;padding-top:0.5rem;border-top:2px solid var(--g2)}
.mob-meta a{display:flex;align-items:center;min-height:44px;padding:0.6875rem 0;color:var(--g6);font-weight:600;font-size:1.02rem}
.mob-meta a[aria-current]{color:var(--red)}
.mobnav>.btn{width:100%;justify-content:center;margin-top:1.5rem}
.mobnav>.lang{margin-top:1.5rem;justify-content:center;font-size:1.05rem;gap:0.625rem}
.mobnav>.lang a{padding:0.5rem 0.875rem;border:1px solid var(--g2)}}

/* ============================================================
   Content-Blöcke (Seiten-Baukasten / Demo)
   ============================================================ */
.sh .kicker{display:inline-block;color:var(--red);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:0.625rem}
/* Fließtext / Prosa */
.richtext{max-width:760px}
.richtext h2{font-size:1.7rem;color:var(--navy);font-weight:800;margin:1.875rem 0 0.75rem}
.richtext h3{font-size:1.3rem;color:var(--navy);font-weight:700;margin:1.375rem 0 0.625rem}
.richtext p{margin-bottom:0.875rem}
.richtext ul,.richtext ol{margin:0.75rem 0 1rem 1.375rem;display:grid;gap:0.4375rem}
.richtext ul{list-style:disc}.richtext ol{list-style:decimal}
.richtext blockquote{border-left:3px solid var(--red);padding-left:1.125rem;color:var(--navy);font-style:italic;margin:1.125rem 0}
.richtext a{color:var(--red);font-weight:600;text-decoration:underline}
.richtext strong{color:var(--navy)}
/* Lead */
.lead-sec{padding-block:3rem}
.lead-text{font-size:clamp(1.3rem,2.4vw,1.65rem);line-height:1.5;color:var(--navy);font-weight:500;max-width:54ch}
/* Einzelbild */
figure.figimg{margin:0}
.figimg img{width:100%;height:auto;display:block;border-radius:10px}
.figimg figcaption{color:var(--g6);font-size:.9rem;margin-top:0.625rem}
.figimg--content{max-width:760px;margin-inline:auto}
.figimg--full img{border-radius:0}
.fullwidth{width:100%}
/* Galerie */
.gallery{display:grid;gap:0.875rem}
.gallery--2{grid-template-columns:repeat(2,1fr)}
.gallery--3{grid-template-columns:repeat(3,1fr)}
.gallery--4{grid-template-columns:repeat(4,1fr)}
.galitem{display:block;border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:var(--g1)}
.galitem img{width:100%;height:100%;object-fit:cover;transition:.3s}
.galitem:hover img{transform:scale(1.05)}
/* Zwei Spalten */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
/* Zitat */
.pullquote{max-width:820px;margin-inline:auto;text-align:center}
.pullquote .qmark{color:var(--red);display:inline-flex;margin-bottom:0.375rem}.pullquote .qmark svg{width:40px;height:40px}
.pullquote blockquote{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:600;color:var(--navy);line-height:1.4;letter-spacing:-.01em}
.pullquote figcaption{color:var(--g6);margin-top:1.125rem}.pullquote figcaption strong{color:var(--navy)}
/* Callout */
.callout-sec{padding-block:1.25rem}
.callout{display:flex;gap:0.875rem;align-items:flex-start;border-radius:12px;padding:1.125rem 1.25rem;border:1px solid}
.callout strong{display:block;margin-bottom:0.1875rem;color:var(--navy)}
.callout p{color:var(--g6);font-size:.96rem}
.callout-ic{flex:none}.callout-ic svg{width:24px;height:24px}
.callout--info{background:#EEF4FB;border-color:#cfe0f2}.callout--info .callout-ic{color:#1a6fc4}
.callout--success{background:var(--green-tint);border-color:#cfe7d8}.callout--success .callout-ic{color:var(--green)}
.callout--warning{background:#FFF0F2;border-color:#f6c9d1}.callout--warning .callout-ic{color:var(--red)}
/* Buttons */
.btnrow-sec{padding-block:1.5rem}.btnrow{display:flex;gap:0.875rem;flex-wrap:wrap}
/* Checkliste */
.fakt{background:var(--green-tint)}
.fakt .inner{display:grid;grid-template-columns:1fr 1.1fr;gap:3rem;align-items:center;padding-block:4.5rem}
.fakt h2{font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800;color:var(--green-d);max-width:16ch}
.fakt h2 mark{background:none;color:var(--green)}
.checklist{list-style:none;display:grid;gap:0.875rem}
.checklist li{display:flex;gap:0.875rem;align-items:flex-start;font-weight:600;color:var(--ink);font-size:1.06rem}
.checklist svg{width:26px;height:26px;color:var(--red);flex:none;margin-top:0.0625rem}
/* Downloads */
.downloads{list-style:none;display:grid;gap:0.625rem}
.downloads li{display:flex;align-items:center;gap:0.875rem;border:1px solid var(--g2);border-radius:12px;padding:0.875rem 1rem;background:#fff}
.dl-ic{width:40px;height:40px;border-radius:9px;background:var(--g1);color:var(--navy);display:flex;align-items:center;justify-content:center;flex:none}.dl-ic svg{width:20px;height:20px}
.dl-meta{flex:1}.dl-meta strong{color:var(--navy);display:block}.dl-meta small{color:var(--g6)}
/* Download-Seite: je Kategorie ein Block mit Zwischenueberschrift */
.dl-gruppe{padding-block:0 3rem}
.ts-hero + .dl-gruppe{padding-top:4.5rem}
.dl-gruppe:last-of-type{padding-bottom:4.5rem}
.dl-kat{font-size:1.05rem;letter-spacing:.04em;color:var(--navy);margin:0 0 1rem;padding-bottom:.6rem;border-bottom:2px solid var(--red)}
.dl-meta .dl-desc{display:block;margin-top:2px}
.dl-meta .dl-file{display:block;margin-top:3px}
.dl-btn{width:42px;height:42px;border-radius:9px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}.dl-btn:hover{background:var(--red-h)}.dl-btn svg{width:20px;height:20px}
/* Video */
.videowrap{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--navy)}
.videowrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.figcap{color:var(--g6);font-size:.9rem;margin-top:0.625rem;text-align:center}
/* Team */
.team{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center}
.member .avatar{width:110px;height:110px;border-radius:50%;overflow:hidden;margin:0 auto 0.875rem;background:var(--g1);display:flex;align-items:center;justify-content:center;color:var(--g4)}
.member .avatar img{width:100%;height:100%;object-fit:cover}.member .avatar svg{width:46px;height:46px}
.member strong{display:block;color:var(--navy);font-size:1.1rem}.member span{color:var(--g6);font-size:.92rem}
/* Logo-Leiste */
.logostrip-sec{background:var(--g1)}
.logostrip-h{text-align:center;color:var(--g4);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:.8rem;margin-bottom:1.25rem}
.logostrip{list-style:none;display:flex;flex-wrap:wrap;gap:2.5rem;align-items:center;justify-content:center}
.logostrip img{height:48px;width:auto;opacity:.7}
/* Icon-Übersicht */
.iconlist{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:0.875rem}
.iconlist li{display:flex;flex-direction:column;align-items:center;gap:0.625rem;border:1px solid var(--g2);border-radius:12px;padding:1.25rem 0.75rem}
.iconlist .ic{color:var(--navy)}.iconlist .ic svg{width:34px;height:34px}
.iconlist code{font-size:.8rem;color:var(--g6);background:var(--g1);padding:0.1875rem 0.5rem;border-radius:5px;font-family:ui-monospace,SFMono-Regular,monospace}
/* FAQ */
.faq{border-top:1px solid var(--g2)}
.faq h3{margin:0}
.faq-item{border-bottom:1px solid var(--g2)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.125rem 0.25rem;background:none;border:none;cursor:pointer;font-family:inherit;font-size:1.1rem;font-weight:700;color:var(--navy);text-align:left}
.faq-q:hover{color:var(--red)}
.faq-pm{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--red);color:var(--red);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.3rem;line-height:1;transition:transform .2s ease,background .2s ease,color .2s ease}
.faq-item.is-open .faq-pm{background:var(--red);color:#fff;transform:rotate(45deg)}
/* Akkordeon-Öffnen via grid-template-rows (GPU-freundlich, kein height-Reflow-Ruckeln) */
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.faq-item.is-open .faq-a{grid-template-rows:1fr}
.faq-a-in{overflow:hidden;visibility:hidden;transition:visibility .28s linear}
.faq-item.is-open .faq-a-in{visibility:visible}
.faq-a-c{padding:0 0.25rem 1.125rem;color:var(--g6);font-size:1rem;max-width:64ch}
@media(prefers-reduced-motion:reduce){.faq-a,.faq-a-in,.faq-pm{transition:none}}
/* Downloads-Liste (Pool) */
.dl-list{list-style:none;display:grid;gap:0.75rem}
.dl-link{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;border:1px solid var(--g2);border-radius:12px;background:#fff;transition:.15s}
.dl-link:hover{border-color:var(--navy);box-shadow:0 10px 26px -16px rgba(0,0,0,.25)}
.dl-ic{width:44px;height:44px;border-radius:10px;background:var(--g1);color:var(--red);display:flex;align-items:center;justify-content:center;flex:none}.dl-ic svg{width:22px;height:22px}
.dl-meta{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.dl-title{font-weight:700;color:var(--navy)}
.dl-desc{color:var(--g6);font-size:.9rem}
.dl-file{color:var(--g4);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin-top:2px}
.dl-arrow{color:var(--red);flex:none;display:flex}.dl-arrow svg{width:18px;height:18px}
@media(max-width:820px){.twocol,.team,.gallery--3,.gallery--4{grid-template-columns:1fr 1fr}.lead-text{font-size:1.3rem}}
@media(max-width:560px){.team,.gallery--2,.gallery--3,.gallery--4{grid-template-columns:1fr}}
/* Suche-Ergebnisseite */
.suche-form{display:flex;align-items:center;gap:0.75rem;border:2px solid var(--g2);border-radius:12px;padding:0.5rem 1rem;margin-bottom:1.5rem}
.suche-form:focus-within{border-color:var(--navy)}
.suche-form input{flex:1;border:none;outline:none;background:none;font-family:inherit;font-size:1.2rem;padding:0.5rem 0;color:var(--ink)}
.suche-results{list-style:none;display:grid;gap:0.375rem}
.suche-results a{display:block;padding:1rem;border:1px solid var(--g2);border-radius:12px}
.suche-results a:hover{border-color:var(--navy);background:var(--g1)}

/* News-Teaser */
.news-sec{background:#fff}
.news-feature{box-shadow:none}
.news-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;margin-bottom:2.5rem;flex-wrap:wrap}
.news-allbtn{flex:none}
.news-grid{display:grid;gap:1.5rem}
.news-grid--1{grid-template-columns:1fr;max-width:760px}
.news-grid--2{grid-template-columns:repeat(2,1fr)}
.news-grid--3{grid-template-columns:repeat(3,1fr)}
.news-card{background:#fff;border:1px solid var(--g2);border-radius:14px;overflow:hidden;transition:.2s}
.news-card:hover{box-shadow:0 16px 40px rgba(0,0,0,.13);transform:translateY(-4px);border-color:transparent}
.news-card a{display:flex;flex-direction:column;height:100%}
.news-im{display:block;aspect-ratio:16/10;background:var(--g1);overflow:hidden}
.news-im img{width:100%;height:100%;object-fit:cover;transition:.4s}
.news-card:hover .news-im img{transform:scale(1.05)}
.news-body{padding:1.375rem 1.375rem 1.5rem;display:flex;flex-direction:column;flex:1}
.news-meta{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--red)}
.news-title{font-size:1.3rem;font-weight:700;color:var(--navy);margin:0.5rem 0 0.5rem;line-height:1.25}
.news-teaser{color:var(--g6);font-size:.95rem;flex:1}
.news-card .more{color:var(--red);font-weight:600;display:inline-flex;align-items:center;gap:0.4375rem;margin-top:1rem}.news-card .more svg{width:16px;height:16px}
@media(max-width:820px){.news-grid--2,.news-grid--3{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.news-grid--2,.news-grid--3{grid-template-columns:1fr}}

/* News-Teaser: einzelner Beitrag (Bild links / Text rechts) */
.news-feature{display:grid;grid-template-columns:1.05fr 1fr;background:#fff;border:1px solid var(--g2);border-radius:16px;overflow:hidden}
.news-feature-im{display:block;min-height:340px;background:var(--g1)}
.news-feature-im img{width:100%;height:100%;object-fit:cover;display:block}
.news-feature-body{padding:2.75rem 3rem;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.news-feature-body h3{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;color:var(--navy);margin:0.5rem 0 0.875rem;line-height:1.2}
.news-feature-body p{color:var(--g6);font-size:1.08rem;margin-bottom:1.5rem;max-width:48ch}
@media(max-width:820px){.news-feature{grid-template-columns:1fr}.news-feature-im{min-height:240px}.news-feature-body{padding:1.75rem 1.625rem}}

/* Anfrageformular */
.anfrage-sec{background:var(--g1)}
.anfrage-form .formgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.125rem}
.anfrage-form .form-row{display:flex;flex-direction:column;gap:0.375rem;grid-column:1 / -1}
.anfrage-form .form-row--half{grid-column:span 1}
.anfrage-form label{font-weight:600;color:var(--navy);font-size:.92rem}
.anfrage-form label span{color:var(--red)}
.anfrage-form input[type=text],.anfrage-form input[type=email],.anfrage-form input[type=tel],.anfrage-form input:not([type]),.anfrage-form select,.anfrage-form textarea{width:100%;border:1px solid var(--g2);border-radius:8px;padding:0.75rem 0.875rem;font-family:inherit;font-size:1rem;background:#fff;color:var(--ink);transition:.15s}
.anfrage-form select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235E6470' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.anfrage-form input:focus,.anfrage-form select:focus,.anfrage-form textarea:focus{border-color:var(--navy);outline:none;box-shadow:0 0 0 3px rgba(0,0,0,.08)}
.anfrage-form textarea{min-height:120px;resize:vertical}
.anfrage-form .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.anfrage-form .form-error{color:var(--red);font-size:.85rem}
.anfrage-form button[type=submit]{margin-top:1.375rem}
.anfrage-form .form-note{font-size:.8rem;color:var(--g4);margin-top:0.875rem}
.anfrage-form .callout{margin-bottom:1.375rem}
@media(max-width:560px){.anfrage-form .formgrid{grid-template-columns:1fr}.anfrage-form .form-row--half{grid-column:1 / -1}}
/* DSGVO-Consent-Checkbox */
.form-consent{grid-column:1 / -1;margin-top:0.25rem}
.consent{display:flex;align-items:flex-start;gap:0.75rem;cursor:pointer;font-weight:400;color:var(--g6);font-size:.95rem}
.consent input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin-top:0.0625rem;border:2px solid var(--g2);border-radius:6px;background:#fff;cursor:pointer;position:relative;transition:.15s}
.consent input[type=checkbox]:checked{background:var(--red);border-color:var(--red)}
.consent input[type=checkbox]:checked::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.consent input[type=checkbox]:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.consent a{color:var(--red);font-weight:600;text-decoration:underline}
/* Kontaktseite */
/* Formular zwei Drittel, Kontaktdaten ein Drittel */
.kontakt-grid{display:grid;grid-template-columns:2fr 1fr;gap:3rem;align-items:start}
.kontakt-info{background:var(--g1);border-radius:16px;padding:1.875rem 1.75rem;display:grid;gap:1.375rem}
.info-block{display:flex;gap:1rem;align-items:flex-start}
.info-ic{width:44px;height:44px;border-radius:11px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}.info-ic svg{width:22px;height:22px}
.info-block h3{font-size:.78rem;text-transform:uppercase;color:var(--g4);font-weight:700;margin-bottom:0.25rem}
.info-block address{font-style:normal;color:var(--navy);font-weight:600;line-height:1.5}
.info-block a,.info-block p{color:var(--navy);font-weight:600}
.info-block a:hover{color:var(--red)}
.info-linkedin{display:inline-flex;align-items:center;gap:0.4375rem;color:var(--red);font-weight:600;margin-top:0.25rem}.info-linkedin svg{width:16px;height:16px}
.kontakt-form h2{font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:800;color:var(--navy)}
.kontakt-form-intro{color:var(--g6);margin:0.625rem 0 1.5rem;max-width:60ch}
/* Wiederverwendbares Consent-Embed (Maps, YouTube, …) */
.consent-embed{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--g2);background:var(--g1)}
.consent-gate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem 1.5rem;gap:0.375rem}
.consent-gate-ic{width:54px;height:54px;border-radius:14px;background:#fff;border:1px solid var(--g2);color:var(--red);display:flex;align-items:center;justify-content:center;margin-bottom:0.5rem}.consent-gate-ic svg{width:28px;height:28px}
.consent-gate h3{font-size:1.2rem;font-weight:700;color:var(--navy)}
.consent-gate-note{color:var(--g6);font-size:.88rem;max-width:50ch}.consent-gate-note a{color:var(--red);font-weight:600;text-decoration:underline}
.consent-remember{display:inline-flex;gap:0.5rem;align-items:center;font-size:.85rem;color:var(--g6);margin:0.5rem 0;cursor:pointer}
.consent-remember input{flex:none;width:18px;height:18px;accent-color:var(--red);cursor:pointer}
.map-route-row{margin-top:1rem;text-align:center}
@media(max-width:900px){.kontakt-grid{grid-template-columns:1fr;gap:2rem}}
@media(max-width:640px){.consent-embed{aspect-ratio:4 / 3!important}}

/* Lightbox (Bild-Großansicht, JS in site.js) */
.lbx [class^=galitem],.galitem{cursor:zoom-in}
.lbx-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:calc(env(safe-area-inset-top) + 1rem) calc(env(safe-area-inset-right) + 1rem) calc(env(safe-area-inset-bottom) + 1rem) calc(env(safe-area-inset-left) + 1rem);
  background:rgba(10,20,32,.93);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .18s ease}
.lbx-overlay.is-open{opacity:1}
.lbx-overlay[hidden]{display:none}
.lbx-stage{margin:0;display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:100%}
.lbx-img{max-width:92vw;max-height:82dvh;width:auto;height:auto;object-fit:contain;border-radius:10px;box-shadow:0 24px 60px rgba(0,0,0,.5);background:var(--g1)}
.lbx-cap{color:#eaf0f7;font-size:.95rem;text-align:center;max-width:70ch;line-height:1.5}
.lbx-cap[hidden]{display:none}
.lbx-btn{position:absolute;width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.lbx-btn:hover{background:rgba(255,255,255,.24)}
.lbx-btn svg{width:22px;height:22px}
.lbx-close{top:calc(env(safe-area-inset-top) + 1rem);right:calc(env(safe-area-inset-right) + 1rem)}
.lbx-prev{left:calc(env(safe-area-inset-left) + 1rem);top:50%;transform:translateY(-50%) scaleX(-1)}
.lbx-next{right:calc(env(safe-area-inset-right) + 1rem);top:50%;transform:translateY(-50%)}
.lbx-btn[hidden]{display:none}
.lbx-count{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 1rem);left:50%;transform:translateX(-50%);color:var(--od-text);font-size:.85rem;font-weight:600;letter-spacing:.03em}
.lbx-count[hidden]{display:none}
@media(max-width:640px){.lbx-prev{left:.5rem}.lbx-next{right:.5rem}.lbx-btn{width:44px;height:44px}.lbx-img{max-width:96vw}}
@media(prefers-reduced-motion:reduce){.lbx-overlay{transition:none}}

/* Sanfte Seitenübergänge — Cross-Document View Transitions (progressive enhancement, Browser ohne Support ignorieren) */
@view-transition{navigation:auto}

/* Scroll-Reveal — Sektionen blenden beim Reinscrollen ein. .reveal-on wird per JS gesetzt
   (ohne JS bleiben alle Inhalte normal sichtbar → kein FOUC/A11y-Problem). */
@media(prefers-reduced-motion:no-preference){
  .reveal-on [data-reveal]{opacity:0;transform:translateY(1.25rem);transition:opacity .6s ease,transform .6s ease}
  .reveal-on [data-reveal].is-in{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}

/* Such-Skeleton (Ladezustand statt leerer Liste) */
.search-skeleton{padding:0.75rem 0.25rem;display:flex;flex-direction:column;gap:0.75rem}
.skel-row{height:2.5rem;border-radius:8px;background:linear-gradient(90deg,var(--g1) 25%,var(--g2) 37%,var(--g1) 63%);background-size:400% 100%;animation:skel 1.4s ease infinite}
.skel-row:nth-child(2){width:85%}.skel-row:nth-child(3){width:70%}
@keyframes skel{0%{background-position:100% 0}100%{background-position:0 0}}
@media(prefers-reduced-motion:reduce){.skel-row{animation:none}}

/* Hero mit Hintergrund-Video + weißer Text-Box */
.hero-video{position:relative;min-height:78vh;min-height:78dvh;display:flex;align-items:center;overflow:hidden;background:var(--navy);padding:0}
.hero-video-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-video-bg--mobile{display:none}
.hero-video::after{content:"";position:absolute;inset:0;background:none;z-index:1;pointer-events:none}
.hero-video-inner{position:relative;z-index:2;width:100%;padding-bottom:3.5rem}
.hero-video{align-items:flex-end}
.hero-video-box{background:rgba(16,16,19,.86);-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:2.75rem 3rem;max-width:min(600px,92%);box-shadow:0 22px 54px -26px rgba(0,0,0,.75)}
.hero-video-box h1{font-size:clamp(2rem,3.5vw,3rem);font-weight:800;color:#fff;line-height:1.08;margin-bottom:1rem;overflow-wrap:break-word;hyphens:auto}
.hero-video-box h1 mark{background:none;color:var(--red)}
.hero-video-box p{color:rgba(255,255,255,.90);font-size:1.08rem;line-height:1.6;max-width:52ch}
.hero-video-cta{display:flex;gap:0.875rem;flex-wrap:wrap;margin-top:1.75rem}
@media(max-width:820px){
  
  .hero-video{min-height:60vh;min-height:60dvh}
  .hero-video-box{padding:1.75rem 1.625rem;max-width:100%}
  /* Mobil-Variante mit Hochformat-Video: Video oben (full-bleed, 3:4), Text darunter */
  .hero-video.has-mobile{display:block;min-height:0;background:#fff}
  .hero-video.has-mobile::after{display:none}
  .hero-video.has-mobile .hero-video-bg--desktop{display:none}
  .hero-video.has-mobile .hero-video-bg--mobile{display:block;position:relative;inset:auto;width:100%;height:auto;aspect-ratio:3 / 4;z-index:0}
  .hero-video.has-mobile .hero-video-inner{position:static;padding-top:0}
  .hero-video.has-mobile .hero-video-box{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;box-shadow:none;border-radius:0;padding:1.75rem 0 2.75rem}
  .hero-video.has-mobile .hero-video-box h1{color:var(--navy)}
  .hero-video.has-mobile .hero-video-box p{color:var(--g6)}
  .hero-video.has-mobile .hero-video-inner{padding-bottom:0}
}



/* === Corporate-Look (fest aktiv via html[data-look="corporate"]): dunkler Header mit Rollen-Motiv, Navi-Zeile mit Blur === */
html[data-look="corporate"] .header-main{-webkit-backdrop-filter:none;backdrop-filter:none;background:radial-gradient(130% 260% at 16% -30%,#323236 0%,#232326 32%,#141416 62%,#0a0a0b 100%);border-bottom:1px solid rgba(255,255,255,.14)}
html[data-look="corporate"] .header-main .nav{position:relative}
html[data-look="corporate"] .header-main::before{content:"";position:absolute;inset:0;background:url('/img/tape-roll-de.webp') 43% 40%/auto 240% no-repeat;filter:brightness(.72);pointer-events:none}
/* Logo: Schwarz-Anteile → Weiß (Trademark + vereinfachtes Logo), Rot bleibt */
html[data-look="corporate"] .logo path[fill="#1e1e1c"],html[data-look="corporate"] .logo path[fill="#1b1c20"],html[data-look="corporate"] .logo polygon[fill="#1b1c20"],html[data-look="corporate"] .logo polygon[fill="#1e1e1c"]{fill:#fff}
/* Bedienelemente hell */
html[data-look="corporate"] .iconbtn{color:#fff;border-color:rgba(255,255,255,.28)}
html[data-look="corporate"] .iconbtn:hover{border-color:#fff}
html[data-look="corporate"] .burger span{background:#fff}
html[data-look="corporate"] .menu>ul>li>a{color:#fff}
/* Aktiver Menüpunkt im Logo-Rot statt in einer aufgehellten Variante */
html[data-look="corporate"] .menu>ul>li>a[aria-current],html[data-look="corporate"] .menu>ul>li>a:hover{color:var(--red);border-color:var(--red)}
/* Drei Zeilen (Desktop): Logo+Aktionen oben, Navi als eigene Zeile mit Full-Bleed-Blur-Band */
@media(min-width:821px){
  html[data-look="corporate"] .nav{flex-wrap:wrap;height:auto;row-gap:0;padding-top:1.5rem}
  html[data-look="corporate"] .nav>a.logo{order:1;padding-bottom:1.5rem}
  html[data-look="corporate"] .nav-r{order:2;margin-left:auto;padding-bottom:1.5rem}
  html[data-look="corporate"] .menu{order:3;flex-basis:100%;position:relative;z-index:0;padding:0.25rem 0}
  html[data-look="corporate"] .menu::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100vw;background:rgba(10,10,11,.2);-webkit-backdrop-filter:blur(.7em);backdrop-filter:blur(.7em);border-top:1px solid rgba(255,255,255,.22);z-index:-1}
}
/* Corporate-Look-Ergänzung: dunklerer Hero-Overlay + harte Kanten (Radius 0), echte Kreise bleiben */
html[data-look="corporate"] .hero-video::after{background:none}
html[data-look="corporate"] *{border-radius:0!important}
html[data-look="corporate"] :is(.step .no,.advisor .av,.member .avatar,.faq-pm,.lbx-btn){border-radius:50%!important}

/* Bild+Text (Split) — Dunkel/Corporate-Variante (Set-Option "dark") */
.splitdark{position:relative;overflow:hidden;background:radial-gradient(120% 220% at 18% -40%,#323236 0%,#232326 34%,#141416 66%,#0a0a0b 100%);border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.splitdark::before{content:"";position:absolute;inset:0;background:url('/img/tape-roll-de.webp') -5% 55%/auto 195% no-repeat;filter:brightness(.5);pointer-events:none}
.splitdark>.wrap{position:relative}
.splitdark .print h2,.splitdark h2{color:#fff}
.splitdark .print p,.splitdark p{color:#cfcfcf}
.splitdark .im img{box-shadow:0 30px 80px -22px rgba(0,0,0,.85)}
.splitdark .usp{background:rgba(255,255,255,.1);color:#ff4d67}
.splitdark .chip-checks li{color:#e6e6e6}

/* Bild+Text (Split) — Rote Tafel (Set-Stil "rot"): eingefasst, nicht vollbreit */
.splitred .print{background:#db0a20;border-radius:18px;padding:clamp(2rem,4vw,3.5rem);gap:clamp(2rem,3vw,3rem)}
.splitred .print h2{color:#fff}
.splitred .print h2 mark{background:none;color:#fff}
.splitred .print p{color:rgba(255,255,255,.92)}
.splitred .im img{box-shadow:0 26px 60px -18px rgba(122,0,20,.55)}
.splitred .btn-red{background:#fff;color:#db0a20}
.splitred .btn-red:hover{background:#ffe3e8;color:#a10019}
.splitred .usp{background:rgba(255,255,255,.16);color:#fff}
.splitred .chip-checks li{color:#fff}
@media(max-width:820px){.splitred .print{padding:1.5rem}}
/* Corporate-Modus: Markenkarten-Typo für alle H1/H2 (Versalien, 600, Spacing, keine roten Akzente) */
html[data-look="corporate"] :is(h1,h2){font-weight:650;text-transform:uppercase;}
html[data-look="corporate"] :is(h1,h2) mark{background:none;color:inherit}
html[data-look="corporate"] :is(h3,h4,h5,h6){font-weight:650}
html[data-look="corporate"] .h3{font-weight:650}

/* Werte-Spalten (Markenkarte): 2–3 Spalten, Stile hell/rot/dunkel, Icon-Punkte, Bogen-Badge */
.wgrid{list-style:none;display:grid;gap:0;border-radius:18px;overflow:hidden}
.wgrid--2{grid-template-columns:1fr 1fr}
.wgrid--3{grid-template-columns:repeat(3,1fr)}
.wcol{padding:clamp(1.75rem,3vw,2.75rem);display:flex;flex-direction:column;min-height:420px}
.wcol--hell{background:#F6F5F2;color:var(--ink)}
.wcol--rot{background:#db0a20;color:#fff}
.wcol--dunkel{background:radial-gradient(140% 160% at 20% -20%,#2c2c30 0%,#1a1a1d 45%,#0a0a0b 100%);color:#fff}
.weyebrow{font-weight:600;font-size:.95rem;margin-bottom:.375rem}
.whead{font-size:clamp(1.6rem,2.6vw,2.3rem);font-weight:700;text-transform:uppercase;line-height:1.08;color:inherit}
.wtext{margin-top:.75rem;font-size:1rem;line-height:1.55;opacity:.88;max-width:44ch}
.wbottom{margin-top:auto;padding-top:2rem;display:flex;gap:1.25rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.wpunkte{display:flex;gap:1rem;align-items:flex-start}
.wplabel{font-weight:700;font-size:.9rem;white-space:nowrap;padding:.25rem .875rem .25rem 0;border-right:1px solid rgba(127,127,127,.45)}
.wcol--rot .wplabel,.wcol--dunkel .wplabel{border-right-color:rgba(255,255,255,.4)}
.wpunkte ul{list-style:none;display:flex;flex-direction:column;gap:.625rem}
.wpunkte li{display:flex;gap:.625rem;align-items:center;font-size:.92rem;line-height:1.3}
.wpicon{flex:none;display:flex}
.wpicon svg{width:22px;height:22px}
.wbadge{flex:none;width:180px}
.wbadge img{display:block;width:100%;height:auto}
@media(max-width:1000px){.wgrid--3{grid-template-columns:1fr}}
@media(max-width:820px){.wgrid--2{grid-template-columns:1fr}.wcol{min-height:0}}


/* Kachel-Überschrift (ehem. Inline-Style) */
.tile .h3{display:block;font-size:1.4rem;font-weight:700;color:var(--navy);margin-bottom:8px}
/* Corporate-Modus: breitere Hero-Box (Versalien-Headline bricht sonst hässlich) */
html[data-look="corporate"] .hero-video-box{max-width:min(780px,94%)}

/* Footer: LinkedIn-Icon unter der Adresse, Öffnungszeiten in der Direktanfrage-Spalte */
.fg .social{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;margin-top:0.875rem;border:1px solid rgba(255,255,255,.24);color:var(--od-text);transition:.15s;padding:0}
.fg .social:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.08)}
.fg .social svg{width:18px;height:18px;display:block}
.fg .fhours{margin-top:0.75rem;line-height:1.7;opacity:.85}
/* Produktbezug über dem zentralen Anfrageformular (von der Produktseite per ?produkt=) */
.kontakt-form-bezug{margin:-0.25rem 0 1.25rem;padding:0.75rem 1rem;background:var(--g1);border-left:3px solid var(--red);font-size:.95rem;color:var(--g6)}
.kontakt-form-bezug b{color:var(--navy);font-weight:700}
/* Produktauswahl im Anfrageformular — Mehrfachauswahl aus dem Produktbestand */
.form-produkte{grid-column:1/-1}
.form-produkte .form-hint{font-size:.85rem;color:var(--g6);margin:0.125rem 0 0.5rem}
/* type=search wird von der allgemeinen Feldregel nicht erfasst — hier gleichziehen */
.anfrage-form .produktwahl-suche{width:100%;margin-bottom:0.625rem;border:1px solid var(--g2);border-radius:8px;padding:0.75rem 0.875rem;font-family:inherit;font-size:1rem;background:#fff;color:var(--ink);transition:.15s;-webkit-appearance:none;appearance:none}
.anfrage-form .produktwahl-suche:focus{border-color:var(--navy);outline:none;box-shadow:0 0 0 3px rgba(0,0,0,.08)}
.anfrage-form .produktwahl-suche::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
/* Gewählte Produkte: sichtbare Liste, einzeln entfernbar */
.produktwahl-chips{list-style:none;display:flex;flex-wrap:wrap;gap:0.375rem;margin:0 0 0.625rem;padding:0}
.produktwahl-chip{display:inline-flex;align-items:center;gap:0.375rem;background:var(--navy);color:#fff;font-size:.85rem;font-weight:600;padding:0.3125rem 0.375rem 0.3125rem 0.6875rem;line-height:1.3}
.produktwahl-chip button{border:0;background:rgba(255,255,255,.16);color:#fff;width:20px;height:20px;line-height:1;font-size:1.05rem;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;flex:none;transition:.15s}
.produktwahl-chip button:hover{background:var(--red)}
.produktwahl{max-height:16rem;overflow-y:auto;border:1px solid var(--g2);background:#fff;padding:0.75rem 0.875rem}
.produktwahl-gruppe{border:0;margin:0 0 0.875rem;padding:0}
.produktwahl-gruppe:last-child{margin-bottom:0}
.produktwahl-gruppe legend{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--g4);font-weight:700;padding:0;margin-bottom:0.375rem}
.produktwahl-item{display:flex;align-items:center;gap:0.5rem;padding:0.25rem 0;font-size:.92rem;cursor:pointer}
.produktwahl-item:hover{color:var(--navy)}
.produktwahl-item input{flex:none;margin:0}
.produktwahl-zahl{margin-top:0.5rem;font-size:.9rem;color:var(--g6)}
.produktwahl-zahl b{color:var(--red)}
/* Die Regel .anfrage-form label span (Pflichtfeld-Sternchen) färbte auch Fließtext
   in Labels rot — Produktnamen und Einwilligungstext. Hier zurückgenommen; rot
   bleibt nur das als dekorativ ausgezeichnete Sternchen. */
.anfrage-form .produktwahl-item span{color:var(--g6)}
.anfrage-form .produktwahl-item:hover span{color:var(--navy)}
.anfrage-form .consent>span{color:var(--g6)}
.anfrage-form label span[aria-hidden="true"]{color:var(--red)}
/* Karte über die volle Breite */
.kontakt-map{padding:0}
/* Ansprechpartner */
/* Kein eigener Hintergrund — die Karte darüber trennt den Abschnitt bereits ab. */
.ap-sec{padding:4rem 0;background:var(--g1)}
.ap-filter{display:flex;flex-wrap:wrap;gap:1.75rem;margin-bottom:2rem}
.ap-filtergruppe{display:flex;flex-direction:column;gap:0.5rem}
.ap-filterlabel{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--g4);font-weight:700}
.ap-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;padding:0;margin:0}
@media (max-width:1000px){.ap-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.ap-grid{grid-template-columns:1fr}}
.ap-karte{background:#fff;border:1px solid var(--g2);padding:1.375rem 1.5rem;display:flex;flex-direction:column;gap:0.375rem}
.ap-position{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--red);font-weight:700;margin:.9rem 0 0;padding-top:.75rem;border-top:1px solid var(--g2)}
.ap-name span{display:block}
.ap-karte h3{font-size:1.15rem;font-weight:700;color:var(--navy);margin:0}
.ap-zust{list-style:none;display:flex;flex-wrap:wrap;gap:0.3125rem;padding:0;margin:0.25rem 0 0}
.ap-zust li{font-size:.72rem;font-weight:600;color:var(--g6);background:var(--g1);border:1px solid var(--g2);padding:0.1875rem 0.5rem}
.ap-kontakt{display:flex;flex-direction:column;gap:0.3125rem;margin-top:0.5rem}
.ap-kontakt a{display:inline-flex;align-items:center;gap:0.4375rem;color:var(--navy);font-weight:600;font-size:.92rem}
.ap-kontakt a:hover{color:var(--red)}
.ap-kontakt svg{width:16px;height:16px;color:var(--g4);flex:none}
@media(max-width:820px){.kontakt-grid{grid-template-columns:1fr}}

/* Ansprechpartner: Porträt neben Name */
.ap-kopf{display:flex;gap:0.875rem;align-items:center;margin-bottom:0.25rem}
.ap-foto{width:88px;height:88px;object-fit:cover;flex:none;background:var(--g1)}
.ap-foto--leer{display:flex;align-items:center;justify-content:center;color:var(--g4)}
.ap-foto--leer svg{width:40px;height:40px}
/* Länderfilter als Auswahlliste — 48 Chips wären unübersichtlich */
.ap-select{border:1px solid var(--g2);background:#fff;color:var(--ink);font-family:inherit;font-size:.85rem;font-weight:600;line-height:1.3;padding:0.4375rem 2.25rem 0.4375rem 0.875rem;min-width:14rem;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235E6470' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.ap-select:focus{border-color:var(--navy);outline:none;box-shadow:0 0 0 3px rgba(0,0,0,.08)}

/* Chips und Auswahllisten der Ansprechpartner-Filter auf eine Linie bringen */
.ap-filter .fchip,.ap-select{height:2.375rem;display:inline-flex;align-items:center;box-sizing:border-box}
.ap-filtergruppe{justify-content:flex-end}
/* Überschriften: Zeilen gleichmäßig umbrechen statt lang/kurz.
   Ältere Browser ignorieren die Eigenschaft folgenlos. */
h1,h2,h3,h4,h5,h6,.sh h2,.hero-c h1{text-wrap:balance}
/* Einwilligungshinweis mit unscharfem Vorschaubild (z. B. Kartenausschnitt).
   Der Text sitzt in einer eigenen weißen Fläche, damit er scharf und lesbar bleibt. */
/* Positionierung (absolute/inset:0) kommt aus .consent-gate — hier nur der Innenabstand,
   sonst verliert der Block seine Höhe und Bild wie Box hängen am oberen Rand. */
.consent-gate--bild{padding:1.5rem;gap:0}
.consent-gate-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(.5em);transform:scale(1.08);z-index:0}
/* Die Box ist ein eigener Container — Icon und Inhalte hier selbst zentrieren,
   die Flex-Ausrichtung von .consent-gate greift darin nicht mehr. */
.consent-gate--bild .consent-gate-box{position:relative;z-index:1;background:#fff;padding:2rem 2.25rem;max-width:34rem;display:flex;flex-direction:column;align-items:center;text-align:center;gap:0.375rem;box-shadow:0 10px 40px rgba(0,0,0,.16)}
.consent-gate--bild .consent-gate-box h3{margin-top:0.5rem}

/* news-detail */
.news-lead{font-size:1.125rem;font-weight:600;line-height:1.55;max-width:760px;margin:0 auto 1.5rem}
.news-backrow{max-width:760px;margin:2.5rem auto 0;padding-top:1.5rem;border-top:1px solid var(--g2)}

/* === Themenseite (Produktion, Über uns) — „Fertigungsstraßen"-Layout, Entscheid 12.08.2026 ===
   Dunkler Hero mit Faktenspalte · Stationen an roter Linie (Marker = Rollenquerschnitt,
   scrollgesteuerte Füllung wie Parallax) · USP-Zeile · Einblicke-Slider (Alpine). */
.ts-hero{background:radial-gradient(130% 260% at 16% -30%,#323236 0%,#232326 32%,#141416 62%,#0a0a0b 100%);color:#fff;padding:4rem 0 4.5rem}
.ts-hero .wrap{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:4rem;align-items:end}
.ts-hero .crumb{margin-bottom:1.75rem}
.ts-hero .crumb a{color:rgba(255,255,255,.65)}
.ts-hero .crumb a:hover{color:#fff}
.ts-hero .crumb span{color:rgba(255,255,255,.45)}
.ts-kicker{display:inline-block;color:var(--red);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.09em}
.ts-hero h1{font-size:clamp(2.6rem,5vw,4.3rem);font-weight:800;color:#fff;margin:.6rem 0 1.1rem;line-height:1.02;max-width:none}
.ts-lead{color:rgba(255,255,255,.82);font-size:1.12rem;max-width:56ch}
.ts-fakten{border-left:1px solid rgba(255,255,255,.2)}
.ts-fakten div{padding:.85rem 0 .85rem 1.6rem;border-bottom:1px solid rgba(255,255,255,.13)}
.ts-fakten div:last-child{border-bottom:0}
.ts-fakten b{display:block;font-size:1.55rem;font-weight:800;line-height:1.15;font-feature-settings:"tnum"}
.ts-fakten span{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.55);font-weight:600}
.ts-usp{padding:3.25rem 0;border-bottom:1px solid var(--g2)}
.ts-usp p{font-size:clamp(1.35rem,2.5vw,1.8rem);font-weight:600;line-height:1.4;color:var(--navy);max-width:34ch}
.ts-usp mark{background:none;color:var(--red)}
.ts-proz{padding:1rem 0 3.5rem;view-timeline:--ts-proz}
.ts-proz .wrap{position:relative;padding-left:7rem}
.ts-rail{position:absolute;left:3.4rem;top:2rem;bottom:2rem;width:2px;background:var(--g2)}
.ts-rail i{position:absolute;inset:0;background:var(--red);transform-origin:top}
.ts-station{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:3.5rem;align-items:center;padding:3.25rem 0}
.ts-station + .ts-station{border-top:1px solid var(--g2)}
.ts-station.ohne-bild{grid-template-columns:1fr}
.ts-marker{position:absolute;left:calc(3.4rem - 7rem - 12px);top:calc(50% - 13px);width:26px;height:26px;background:var(--red);border:7px solid #fff;box-shadow:0 0 0 2px var(--g2)}
html[data-look="corporate"] .ts-marker{border-radius:50%!important}
.ts-station h2{font-size:clamp(1.7rem,2.7vw,2.35rem);font-weight:800;color:var(--navy);margin:.35rem 0 .9rem;max-width:none}
.ts-station h2 mark{background:none;color:var(--red)}
.ts-stext{color:var(--g6);max-width:52ch}
.ts-stext p + p{margin-top:1rem}
.ts-station.ohne-bild .ts-stext{max-width:62ch}
.ts-station figure{margin:0}
.ts-station figure img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .ts-rail i{animation:ts-railfuellung linear both;animation-timeline:--ts-proz}
  }
}
@keyframes ts-railfuellung{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* Einblicke-Slider (Alpine, Autoplay bis Interaktion — Logik im themenseite-Template) */
.ps-sec{padding:4rem 0 4.5rem;background:var(--g1)}
.ps-sec h2{font-size:clamp(1.9rem,3vw,2.5rem);font-weight:800;color:var(--navy);margin-bottom:1.75rem;max-width:none}
.ps-fenster{overflow:hidden}
.ps-track{display:flex;gap:1rem;transition:transform .45s ease;will-change:transform}
.ps-track li{flex:0 0 calc((100% - 2rem) / 3);list-style:none}
.ps-track figure{margin:0}
.ps-track img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.ps-track figcaption{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--g6);margin-top:.6rem}
.ps-nav{display:flex;align-items:center;gap:1.25rem;margin-top:1.5rem}
.ps-btn{width:44px;height:44px;border:2px solid var(--navy);background:none;color:var(--navy);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.15s}
.ps-btn:hover:not(:disabled){background:var(--navy);color:#fff}
.ps-btn:disabled{opacity:.3;cursor:default}
.ps-btn svg{width:18px;height:18px}
.ps-zurueck svg{transform:rotate(180deg)}
.ps-dots{display:flex;gap:.5rem}
.ps-dots button{width:26px;height:4px;border:0;background:var(--g2);cursor:pointer;padding:0;transition:background .15s}
.ps-dots button.on{background:var(--red)}
@media (prefers-reduced-motion: reduce){
  .ps-track{transition:none}
}
@media (max-width: 1000px){
  .ps-track li{flex-basis:calc((100% - 1rem) / 2)}
}
@media (max-width: 980px){
  .ts-hero .wrap{grid-template-columns:1fr;gap:2.5rem}
  .ts-fakten{display:grid;grid-template-columns:1fr 1fr;border-left:0;border-top:1px solid rgba(255,255,255,.2)}
  .ts-fakten div{border-bottom:0;padding:1.1rem 0 0 0}
  .ts-proz .wrap{padding-left:4.25rem}
  .ts-rail{left:1.6rem}
  .ts-marker{left:calc(1.6rem - 4.25rem - 12px)}
  .ts-station{grid-template-columns:1fr;gap:1.5rem}
}
@media (max-width: 640px){
  .ps-track li{flex-basis:100%}
}

/* Varianten-Karten (Einzelprodukt-Gruppen, z. B. Thermorollen): Techniktabellen als
   Boxen im Raster statt gestapelter Tabellen. Optik an .prod-card angelehnt. */
.var-sec{padding-top:0}
/* Ohne pd-Block davor (z. B. Blue4est: kein Fließtext) braucht die Varianten-Sektion
   ihren Abstand zum Titelbild bzw. Hero selbst */
.hero-banner + .var-sec,.ts-hero + .var-sec{padding-top:4.5rem}
.var-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;list-style:none;margin:0;padding:0}
.var-card{border:1px solid var(--g2);background:#fff;padding:1.5rem 1.625rem;display:flex;flex-direction:column;transition:.2s}
.var-card:hover{border-color:var(--g4)}
.var-titel{margin:0;max-width:none;font-size:1.2rem;line-height:1.4}
/* Produktnamen (KT 48 FA …) bleiben gemischt geschrieben — Ausnahme von den Corporate-Versalien */
html[data-look="corporate"] .var-titel{text-transform:none}
.var-kopf{width:100%;background:none;border:0;padding:0 0 .75rem;margin:0 0 .9rem;font-family:inherit;font-size:inherit;text-align:left;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-weight:700;color:var(--navy);border-bottom:2px solid var(--red);cursor:default}
.var-pm{display:none;flex:none;color:var(--red);font-weight:800;font-size:1.35rem;line-height:1}
@media (min-width: 641px){
  .var-card .var-kopf{pointer-events:none}
  .var-card .spec-table{display:table!important}
}
@media (max-width: 640px){
  .var-card{padding:1.15rem 1.25rem}
  .var-pm{display:block}
  .var-kopf{cursor:pointer;margin-bottom:0;padding-bottom:0;border-bottom:0}
  .var-kopf[aria-expanded="true"]{margin-bottom:.9rem;padding-bottom:.75rem;border-bottom:2px solid var(--red)}
}
/* Tab-Umschalter Übersicht/Vergleich */
.vgl-tabs{display:flex;gap:1.9rem;border-bottom:1px solid var(--g2);margin-bottom:1.75rem}
.vgl-tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:.6rem 0;margin-bottom:-1px;font-family:inherit;font-size:1rem;font-weight:700;color:var(--g6);cursor:pointer;transition:.15s}
.vgl-tabs button:hover{color:var(--navy)}
.vgl-tabs button.on{color:var(--navy);border-color:var(--red)}
.var-card .spec-table{width:100%}
@media (max-width: 640px){
  .var-grid{grid-template-columns:1fr}
}

/* Dunkler Hero ohne Faktenspalte (Sortiment-Übersichten): einspaltig, H1 begrenzt */
.ts-hero--solo .wrap{display:block}
.ts-hero--solo h1{max-width:22ch}
.ts-hero--solo .cta-row{margin-top:1.75rem}

/* === Anfrageformular: Abschnitts-Trenner + Spalte „Ihre Auswahl" (12.08.2026) ===
   Tester-Feedback: gewählte Produkte waren als solche nicht erkennbar. Links der
   schmalere Wähler, rechts Zähler + Chips in eigener, klar beschrifteter Spalte. */
.form-abschnitt{grid-column:1/-1;font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--red);font-weight:700;margin:1.75rem 0 0;padding-top:1.5rem;border-top:1px solid var(--g2)}
.form-abschnitt--erste{margin-top:0;padding-top:0;border-top:0}
.form-produkte > label{font-size:1.15rem;font-weight:700;color:var(--navy);line-height:1.35;display:block}
.produktwahl-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:1.25rem;align-items:start;margin-top:.75rem}
.produktwahl-auswahl{border:1px solid var(--g2);background:var(--g1);padding:1rem 1.125rem;min-height:8rem}
.produktwahl-auswahl h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--g6);font-weight:700;margin:0 0 .4rem}
.produktwahl-auswahl .produktwahl-zahl{margin:0 0 .75rem}
.produktwahl-auswahl .produktwahl-chips{margin:0;flex-direction:column;gap:.4rem}
.produktwahl-auswahl .produktwahl-chip{width:100%;justify-content:space-between;padding:.5rem .5rem .5rem .75rem}
.produktwahl-auswahl .produktwahl-chip > span{flex:1;min-width:0}
@media (max-width: 820px){
  .produktwahl-layout{grid-template-columns:1fr}
  .produktwahl-auswahl{order:-1}
}

/* === Varianten-Vergleichsmatrix (Thermorollen u. Ä., Toggle varianten_vergleich) ===
   Varianten als Spalten — eine Tabelle statt Karten, damit alle Kennwerte auf
   gleicher Höhe stehen. Chips schalten Spalten ab, „Nur Unterschiede" filtert Zeilen. */
.vgl-kopf{display:flex;justify-content:space-between;align-items:center;gap:1rem 2rem;flex-wrap:wrap;margin-bottom:1.25rem}
.vgl-diff{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;font-size:.92rem;color:var(--navy);cursor:pointer;white-space:nowrap}
.vgl-diff input{width:17px;height:17px;accent-color:var(--red);margin:0}
.vgl-scroll{overflow-x:auto;border:1px solid var(--g2);background:#fff}
.vgl-tab{width:100%;border-collapse:collapse;min-width:680px}
.vgl-tab th,.vgl-tab td{padding:.7rem 1rem;text-align:left;border-bottom:1px solid var(--g2);vertical-align:top;font-size:.92rem;line-height:1.45}
.vgl-tab thead th{font-size:.98rem;font-weight:700;color:var(--navy);border-bottom:2px solid var(--red);white-space:nowrap}
.vgl-tab .vgl-lbl{color:var(--g6);font-weight:600;position:sticky;left:0;background:#fff;min-width:175px;max-width:230px}
.vgl-tab td{font-weight:600;color:var(--ink);min-width:170px}
.vgl-tab tbody tr:last-child th,.vgl-tab tbody tr:last-child td{border-bottom:0}
.vgl-tab tr.vgl-anders td{background:#FCF4F5}
.vgl-tab tr.vgl-anders .vgl-lbl{background:#FCF4F5;box-shadow:inset 3px 0 0 var(--red)}

/* === CTA-Band-Stile (Feld „stil" am cta_band-Set): dunkel, rot, hell zentriert === */
.cta--dunkel{background:radial-gradient(130% 260% at 16% -30%,#323236 0%,#232326 32%,#141416 62%,#0a0a0b 100%)}
.cta--rot{background:var(--red);border-top:0}
.cta--rot .sub{color:rgba(255,255,255,.88)}
.cta--rot .contacts a{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)}
.cta--rot .contacts a:hover{background:rgba(255,255,255,.22)}
.cta--rot .contacts .ico{background:#fff}
.cta--rot .contacts .ico svg{color:var(--red)}
.cta--rot .contacts small{color:rgba(255,255,255,.75)}
.cta--zentriert{background:var(--g1);color:var(--navy);border-top:1px solid var(--g2)}
.cta--zentriert .inner{grid-template-columns:1fr;text-align:center;justify-items:center;gap:2rem}
.cta--zentriert h2{color:var(--navy)}
.cta--zentriert h2 mark{color:var(--red)}
.cta--zentriert .sub{color:var(--g6);margin-inline:auto}
.cta--zentriert .contacts{flex-direction:row;flex-wrap:wrap;justify-content:center}
.cta--zentriert .contacts a{background:#fff;border-color:var(--g2);color:var(--navy)}
.cta--zentriert .contacts a:hover{background:var(--g2)}
.cta--zentriert .contacts small{color:var(--g6)}
@media (max-width: 820px){
  .cta--zentriert .contacts{flex-direction:column;width:100%}
}

/* Pep 22.09. */
/* 1. Einblenden beim Scrollen etwas spuerbarer: mehr Versatz, leichte Skalierung */
.reveal-on [data-reveal]{transform:translateY(2rem) scale(.995)}
.reveal-on [data-reveal].is-in{transform:none}
/* 2. Rote Akzentlinie ueber Sektionsueberschriften */
.sh:not(.ctr) h2::before{content:"";display:block;width:2.75rem;height:3px;background:var(--red);margin-bottom:1rem;border-radius:2px}
.sh.ctr h2::before{content:"";display:block;width:2.75rem;height:3px;background:var(--red);margin:0 auto 1rem;border-radius:2px}
/* 3. Kacheln reagieren deutlicher auf Mouseover */
.prod-card{transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s ease,border-color .28s ease}
.prod-card:hover{box-shadow:0 20px 44px rgba(0,0,0,.17);transform:translateY(-7px)}
.prod-card img{transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.prod-card:hover img{transform:scale(1.04)}
.gcard,.icard{transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s ease}
.gcard:hover,.icard:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(0,0,0,.13)}
/* 4. Kennzahlen: der rote Balken faehrt beim Einblenden auf */
.counter .cell .bar{transform-origin:left center;transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.7,.3,1) .15s}
[data-reveal].is-in .counter .cell .bar,.counter.is-in .cell .bar{transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal-on [data-reveal],.prod-card,.prod-card img,.gcard,.icard,.counter .cell .bar{transition:none!important;transform:none!important}
}
/* Download-Zeile 22.09. — ein Muster fuer Download-Seite, Download-Block und Baukasten-Set.
   Die ganze Box ist ein Link; Tastaturfokus liegt sichtbar auf der Box. */
.dl-list{list-style:none;display:grid;gap:0.75rem;margin:0;padding:0}
.dl-item{margin:0}
.dl-link{
  display:flex;align-items:center;gap:1rem;
  border:1px solid var(--g2);background:#fff;padding:0.875rem 1rem;
  text-decoration:none;color:inherit;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s cubic-bezier(.2,.7,.3,1);
}
.dl-link:hover{border-color:var(--red);box-shadow:0 10px 26px -18px rgba(0,0,0,.45);transform:translateY(-2px)}
.dl-link:focus-visible{outline:3px solid var(--red);outline-offset:2px}
/* Icon und Vorschaubild teilen sich eine feste Spaltenbreite — nur so bleibt die Textkante buendig. */
.dl-link .dl-ic,.dl-thumb{width:56px;height:56px;flex:none;display:flex;align-items:center;justify-content:center}
.dl-link .dl-ic{background:var(--g1);color:var(--navy)}
.dl-link .dl-ic svg{width:24px;height:24px}
.dl-thumb{background:#fff}
.dl-thumb img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
.dl-link .dl-meta{flex:1;min-width:0;display:block}
.dl-link .dl-title{display:block;font-weight:700;color:var(--navy)}
.dl-link:hover .dl-title{color:var(--red)}
.dl-link .dl-desc{display:block;color:var(--g6);font-size:.9rem;margin-top:2px}
.dl-link .dl-file{display:block;color:var(--g4);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin-top:4px}
.dl-arrow{width:42px;height:42px;flex:none;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center}
.dl-arrow svg{width:20px;height:20px}
.dl-link:hover .dl-arrow{background:var(--red-h)}
/* Nur fuer Screenreader */
.nur-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:560px){
  .dl-link{gap:.75rem;padding:.75rem}
  .dl-arrow{width:36px;height:36px}
}
@media (prefers-reduced-motion:reduce){ .dl-link{transition:none} .dl-link:hover{transform:none} }

/* Zweispaltiges Untermenue 22.09. */
/* Lange Sortimente (ab 9 Gruppen) laufen sonst unter den Bildschirmrand: Etiketten
   war 656 px hoch, unter dem klebenden Kopf bleiben bei 700 px Fensterhoehe nur 500.
   columns statt grid, damit die Liste spaltenweise gelesen wird (1-7 links, 8-14
   rechts) und die Sortierung aus dem Control Panel erhalten bleibt.
   Erst ab 1000 px: darunter reicht der Platz rechts neben dem Menuepunkt nicht,
   das Dropdown liegt auch zugeklappt im Layout und wuerde die Seite waagrecht
   scrollen lassen. */
@media(min-width:1000px){
    .menu .sub-2{columns:2;column-gap:0.75rem;max-width:calc(100vw - 3rem)}
    .menu .sub-2 li{break-inside:avoid}
}
/* Zwischen 1000 und 1150 px ist es knapp — feste Breite, lange Namen brechen um. */
@media(min-width:1000px) and (max-width:1150px){
    .menu .sub-2{width:32rem}
    .menu .sub-2 a{white-space:normal}
}
/* Sicherheitsnetz fuer flache Fenster: lieber im Menue scrollen als abgeschnitten. */
.menu .sub{max-height:calc(100vh - 15rem);overflow-y:auto;overscroll-behavior:contain}

/* FAQ-Uebersicht 22.09. */
/* Themenleiste ueber den Fragen: bei 122 Eintraegen braucht die Seite einen
   Einstieg. Die Zahl neben dem Thema sagt, wie viele Fragen dort liegen. */
.faq-sprung{padding:1.5rem 0 0}
.faq-sprung .wrap{display:flex;flex-wrap:wrap;gap:0.5rem}
.faq-sprung a{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 0.875rem;
    border:1px solid var(--g2);background:#fff;font-weight:600;font-size:0.94rem;color:var(--navy);
    transition:border-color .15s ease,color .15s ease}
.faq-sprung a:hover,.faq-sprung a:focus-visible{border-color:var(--red);color:var(--red)}
.faq-sprung a span{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;
    height:1.5rem;padding:0 0.375rem;background:var(--g1);color:var(--g6);font-size:0.82rem;
    font-variant-numeric:tabular-nums}
.faq-sprung a:hover span{background:var(--red);color:#fff}
/* Sprungziel nicht unter die klebende Kopfzeile schieben */
.faq-gruppe{scroll-margin-top:7rem}

/* Untermenue buendig 23.09. */
/* Das Untermenue sass 1px unter der Kopfleiste (sichtbarer Spalt) und 6px unter
   dem Menuepunkt (tote Zone: Maus faehrt langsam runter -> Menue beginnt zu
   schliessen). Die unsichtbare Bruecke hing am Untermenue selbst und wurde vom
   overflow-y:auto des Sicherheitsnetzes abgeschnitten. Jetzt:
   1. Untermenue beginnt genau an der Unterkante der Kopfleiste
      (Menue-Innenabstand .25rem + 1px Trennlinie, siehe corporate .menu).
   2. Bruecke haengt am Menuepunkt - dort schneidet nichts ab. */
html[data-look="corporate"] .menu .sub{top:calc(100% + .25rem + 1px)}
.menu>ul>li:has(> .sub)::after{content:"";position:absolute;left:-10px;right:-10px;top:100%;height:calc(.25rem + 4px)}

/* Gruppen-Galerie 23.09. */
/* Bildreihe direkt unter dem grossen Hauptbild der Gruppenseite. */
/* Bildreihe direkt unter dem grossen Hauptbild der Gruppenseite.
   Einpassen statt zuschneiden: Die Motive sind gemischt (Fotos, fast quadratische
   Druckvorlagen) - ein 4:3-Zuschnitt schnitt bei den Warnetiketten Text ab.
   Der Rand nimmt das Hellgrau der Studiofotos auf. */
.gruppen-galerie{padding-block:1.25rem 2.5rem}
.gruppen-galerie .galitem img{object-fit:contain}

/* Produktgruppen: unter dem dunklen Hero Bild links (4:3) + Einleitung und
   Haekchen-Liste rechts (28.09.2026) — ersetzt Querbanner und gruenes Band. */
.gi{padding:4.5rem 0}
/* Folgt ein weisser Abschnitt direkt, keinen doppelten Abstand */
.gi + #produkte{padding-top:0}
.gi-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3.5rem;align-items:start}
.gi-grid--solo{grid-template-columns:minmax(0,760px)}
.gi-bild{margin:0}
.gi-bild img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.gi-text .prose p:first-child{margin-top:0}
.gi-liste{margin-top:2rem}
.gi-text > .gi-liste:first-child,.pd > div > .gi-liste:first-child{margin-top:0}
.gi-liste-titel{font-size:clamp(1.25rem,2vw,1.55rem);font-weight:800;color:var(--navy);margin:0 0 1.1rem;max-width:none;line-height:1.25}
.gi-liste-titel mark{background:none;color:var(--red)}
@media (max-width: 980px){
  .gi-grid{grid-template-columns:1fr;gap:2rem}
  .gi{padding-top:3rem}
}

/* Bild-Slider im Gruppenkopf (28.09.2026): ein Bildplatz 4:3, weitere Motive
   eingepasst statt beschnitten (gemischte Formate, z. B. Druckvorlagen). */
.gi-bild a.lbx{display:block;cursor:zoom-in}
.gi-stage{position:relative;aspect-ratio:4/3;background:var(--g1);overflow:hidden}
.gi-stage a.lbx{position:absolute;inset:0}
.gi-stage img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.gi-stage img.fit{object-fit:contain}
.gi-pfeil{position:absolute;top:50%;z-index:2;width:38px;height:38px;margin-top:-19px;border:0;padding:0;background:rgba(255,255,255,.55);color:var(--navy);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.7;transition:opacity .15s,background .15s}
.gi-pfeil:hover,.gi-pfeil:focus-visible{opacity:1;background:rgba(255,255,255,.9)}
.gi-pfeil svg{width:18px;height:18px}
.gi-pfeil--zurueck{left:.75rem}
.gi-pfeil--vor{right:.75rem}
.gi-pfeil--zurueck svg{transform:rotate(90deg)}
.gi-pfeil--vor svg{transform:rotate(-90deg)}

/* Produktgruppen-Kacheln auf Sortimentseiten: Bild 5:3 statt feste 190 px (Mike 28.09.2026) */
.verteiler-sec .tile .im{height:auto;aspect-ratio:5/3}

/* Produkt- und Einzelprodukt-Galerie als Slider (28.09.2026): Vorschaubilder entfallen,
   Pfeile .gi-pfeil wie im Gruppenkopf direkt auf dem Bild. */
.pd-stage .gi-pfeil{z-index:2}

/* Kontakt: Standorte untereinander in der Seitenleiste (28.09.2026, Vorbild Flatz) */
.kontakt-standorte{display:grid;gap:1.5rem}
/* Je Standort eine hellgraue Box wie die fruehere Kontakt-Box (Mike 28.09.) */
.standort{background:var(--g1);border-radius:16px;padding:1.875rem 1.75rem}
.standort > :last-child{margin-bottom:0}
.standort-titel{font-size:1.5rem;font-weight:300;color:var(--red);margin:0 0 1rem;max-width:none;text-transform:none!important;letter-spacing:0}
.standort-bild{margin:0 0 1.25rem}
.standort-bild img{width:100%;height:auto;aspect-ratio:5/3;object-fit:cover;display:block}
.standort-adr{font-style:normal;color:var(--navy);line-height:1.55;margin-bottom:.9rem}
.standort-adr strong{font-weight:700}
.standort-kontakt{display:grid;gap:.15rem;color:var(--navy);margin:0 0 .9rem}
.standort-kontakt a{color:var(--navy);text-decoration:none} /* rote Unterstreichung raus (Mike 12.10.2026) */
.standort-kontakt a:hover{color:var(--red)}
.standort-zeiten{color:var(--g6);font-size:.92rem;margin:0 0 1rem}
.standort-zeiten span{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--g4);margin-bottom:.2rem}
.standort-karte{margin-top:1rem}
.standort-karte .consent-gate-box{padding:1rem}
.standort-karte .consent-gate-box h3{font-size:1rem}
.standort-karte .consent-gate-note{font-size:.8rem}
.standort-karte iframe{width:100%;height:100%;border:0;display:block}
.standort-maps{display:inline-flex;align-items:center;gap:.45rem;color:var(--red);font-weight:600}
.standort-maps svg{width:18px;height:18px;flex:none}
.standort-maps:hover{text-decoration:underline;text-underline-offset:3px}

/* Startseiten-Hero ohne Box (Mike 28.09.2026): weiße Überschrift, Video von links unten
   nach rechts oben abgedunkelt. Einleitung wandert ins Kennzahlen-Band. */
.hero-video::after,html[data-look="corporate"] .hero-video::after{background:linear-gradient(to top right,rgba(8,8,10,.9) 0%,rgba(8,8,10,.7) 22%,rgba(8,8,10,.32) 42%,rgba(8,8,10,.06) 58%,rgba(8,8,10,0) 68%)}
.hero-video-titel{max-width:min(860px,100%)}
.hero-video-titel h1{font-size:clamp(2rem,3.4vw,3.25rem);font-weight:800;color:#fff;line-height:1.05;margin:0;max-width:20ch;overflow-wrap:break-word;hyphens:auto}
.hero-video-titel h1 mark{background:none;color:#fff}
.hero-video .hero-video-inner{padding-bottom:4rem}

/* Kennzahlen-Band mit Introtext: links Text (2 Spalten), rechts Zahlen 2×2 */
.counter--intro .wrap{grid-template-columns:repeat(4,1fr);gap:0;align-items:center}
.counter-intro{grid-column:span 2;padding:3.25rem 3.5rem 3.25rem 1.75rem;font-size:clamp(1.15rem,1.55vw,1.4rem);line-height:1.6;color:rgba(255,255,255,.92)}
.counter-intro p + p{margin-top:.9rem}
.counter-zahlen{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;align-self:stretch;border-left:1px solid rgba(255,255,255,.1)}
.counter-zahlen .cell{padding:2.5rem 1.75rem;border-left:0}
.counter-zahlen .cell:nth-child(even){border-left:1px solid rgba(255,255,255,.1)}
.counter-zahlen .cell:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1)}
@media (max-width: 1000px){
  .counter--intro .wrap{grid-template-columns:1fr}
  .counter-intro,.counter-zahlen{grid-column:auto}
  .counter-intro{padding:2.75rem 1.75rem 2rem}
  .counter-zahlen{border-left:0;border-top:1px solid rgba(255,255,255,.1)}
}
@media (max-width: 820px){
  .hero-video.has-mobile .hero-video-titel{padding:1.75rem 0 2.25rem}
  .hero-video.has-mobile .hero-video-titel h1{color:var(--navy);font-size:clamp(1.9rem,7vw,2.4rem)}
  .hero-video.has-mobile .hero-video-titel h1 mark{color:var(--red)}
}

/* Produktgruppen-Hero mit Einleitung + Häkchen-Liste (28.09.2026, 2. Runde) */
.ts-hero--gruppe .wrap{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:start;gap:4.5rem}
.ts-hero--gruppe h1{max-width:none;font-size:clamp(2.2rem,3.9vw,3.6rem);overflow-wrap:break-word;hyphens:manual}
.ts-hero--gruppe .ts-hero-text{min-width:0}
.ts-hero--gruppe .cta-row{margin-top:1.75rem}
.ts-lead--intro p{margin:0}
.ts-lead--intro p + p{margin-top:.8rem}
.ts-lead--intro a{color:#fff;text-decoration:underline}
.ts-hero-liste{padding-top:3.1rem}
.ts-hero-liste .gi-liste{margin:0;border-left:1px solid rgba(255,255,255,.2);padding-left:2rem}
.ts-hero-liste .gi-liste-titel{color:#fff;font-size:1.2rem}
.ts-hero-liste .gi-liste-titel mark{color:var(--red)}
.ts-hero-liste .checklist li{color:rgba(255,255,255,.92);font-size:1rem;font-weight:500}
.ts-hero-liste .checklist svg{color:#fff}
@media (max-width: 980px){
  .ts-hero--gruppe .wrap{grid-template-columns:1fr;gap:2.5rem}
  .ts-hero-liste{padding-top:0}
  .ts-hero-liste .gi-liste{border-left:0;border-top:1px solid rgba(255,255,255,.2);padding:2rem 0 0}
}
.ts-liste-toggle{display:none}
@media (max-width: 980px){
  .ts-hero-liste .checklist{display:none}
  .ts-hero-liste.auf .checklist{display:grid}
  .ts-liste-toggle{display:inline-flex;align-items:center;gap:.5rem;margin-top:.25rem;padding:.55rem 0;background:none;border:0;color:#fff;font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--red)}
  .ts-liste-toggle svg{width:16px;height:16px;transition:transform .2s}
  .ts-hero-liste.auf .ts-liste-toggle{margin-top:1rem}
  .ts-hero-liste.auf .ts-liste-toggle svg{transform:rotate(180deg)}
  .ts-hero-liste .gi-liste-titel{margin-bottom:.5rem}
}

/* Download ohne Vorschaubild: Logo-Rolle als Platzhalter (28.09.2026) */
.dl-thumb--rolle{background:var(--g1)}
.dl-thumb--rolle svg{width:30px;height:30px;display:block}

/* Baustein „Text mit Häkchen-Liste" (28.09.2026) */
.tl-wrap{max-width:860px}
.tl-titel,.chr-titel{font-size:clamp(1.7rem,2.7vw,2.35rem);font-weight:800;color:var(--navy);margin:.35rem 0 1rem;max-width:none}
.tl-titel mark,.chr-titel mark{background:none;color:var(--red)}
.tl-text,.chr-text{font-size:1.06rem;line-height:1.65}
.tl-liste{margin-top:1.5rem}

/* Baustein „Chronik" (28.09.2026): kompakter Zeitstrahl, Optik wie Über-uns-Stationen */
.chr-wrap{max-width:860px}
.chr-liste{list-style:none;margin:2rem 0 0;padding:0 0 0 2.25rem;position:relative}
.chr-liste::before{content:"";position:absolute;left:.55rem;top:.6rem;bottom:.6rem;width:2px;background:var(--red)}
.chr-eintrag{position:relative;display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--g2);align-items:baseline}
.chr-eintrag:last-child{border-bottom:0}
.chr-punkt{position:absolute;left:calc(-2.25rem + .55rem - 6px);top:1.15rem;width:14px;height:14px;border-radius:50%;background:var(--red);border:3px solid #fff;box-shadow:0 0 0 1px var(--g2)}
.chr-jahr{font-weight:800;color:var(--navy);font-feature-settings:"tnum"}
.chr-inhalt{color:var(--g6)}
@media (max-width: 640px){
  .chr-eintrag{grid-template-columns:1fr;gap:.2rem}
}

/* === Newsletter (Clemens 12.10.2026): Störer auf News & Wissen, Paginierung, Anmeldeseite === */
.ts-hero-stoerer-wrap{display:flex;justify-content:space-between;align-items:center;gap:2rem}
.stoerer{flex:none;width:9.5rem;height:9.5rem;background:var(--red);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:rotate(-8deg);text-decoration:none;box-shadow:0 12px 32px rgba(0,0,0,.4);transition:transform .2s,background-color .2s}
html[data-look="corporate"] .stoerer{border-radius:50%!important}
.stoerer:hover,.stoerer:focus-visible{background:var(--red-h);transform:rotate(-4deg) scale(1.04)}
.stoerer-klein{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;font-weight:600;opacity:.9}
.stoerer-gross{font-size:1.05rem;font-weight:800;line-height:1.15;margin-top:.2rem;max-width:8ch}
.stoerer svg{width:18px;height:18px;margin-top:.45rem}
@media(max-width:640px){.ts-hero-stoerer-wrap{flex-direction:column;align-items:flex-start;gap:1.5rem}.stoerer{width:7.75rem;height:7.75rem}.stoerer-gross{font-size:.95rem}}
@media(prefers-reduced-motion:reduce){.stoerer{transition:none}}
.pager{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem;margin-top:2.75rem}
.pager-nr,.pager-pfeil{min-width:2.75rem;height:2.75rem;padding:0 .5rem;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--g2);color:var(--ink);font-weight:600;text-decoration:none;background:#fff}
a.pager-nr:hover,.pager-pfeil:hover{border-color:var(--red);color:var(--red)}
.pager-nr[aria-current]{background:var(--red);border-color:var(--red);color:#fff}
.pager-pfeil svg{width:18px;height:18px}
.pager-zurueck svg{transform:rotate(180deg)}
.nl-box{max-width:760px}
.nl-titel{margin-bottom:1.25rem}

/* Aufeinanderfolgende Fließtext-Blöcke (rich_text, z. B. Impressum/Datenschutz/AGB je Abschnitt ein Block,
   12.10.2026) laufen wie ein Text durch — ohne die volle Abschnittsluft dazwischen. */
section:has(> .wrap > .richtext):has(+ section > .wrap > .richtext){padding-bottom:0}
section:has(> .wrap > .richtext) + section:has(> .wrap > .richtext){padding-top:0}

/* === Startseite lockerer (Mike 12.10.2026): H1 in alter Größe + kleine Unterzeile, Introtext in Absätzen === */
.hero-video-sub{display:block;margin-top:.85rem;font-size:clamp(1.05rem,1.5vw,1.4rem);font-weight:500;line-height:1.4;letter-spacing:0;text-transform:none!important;max-width:34ch;color:rgba(255,255,255,.9)}
.counter-intro{font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.7;color:rgba(255,255,255,.78)}
.counter-intro p + p{margin-top:1.1rem}
.counter-intro p:first-child{font-size:1.3em;line-height:1.45;font-weight:600;color:#fff}
@media(max-width:820px){.hero-video.has-mobile .hero-video-sub{color:var(--g6)}}

/* Kontakt-Standorte (Clemens 13.10.2026): Firma als H3, Öffnungszeiten als H4 in normaler Größe, alles schwarz */
.standort-firma{font-size:1rem;font-weight:700;line-height:1.55;color:var(--ink);margin:0;text-transform:none!important;letter-spacing:0}
.standort-adr,.standort-kontakt,.standort-kontakt a{color:var(--ink)}
.standort-zeiten{color:var(--ink);font-size:1rem;margin:0 0 1rem}
.standort-zeiten h4{font-size:1rem;font-weight:700;line-height:1.55;color:var(--ink);margin:0;text-transform:none;letter-spacing:0}
.standort-zeiten p{margin:0;line-height:1.55}

/* Kennzahlen: weniger Abstand Wert ↔ Text (Mike 13.10.2026). Der rote Strich (.bar) wurde auf der Startseite
   nie eingeblendet (kein Reveal-Auslöser) und belegte nur 32 px Leerraum → ausgeblendet. */
.counter .cell .bar{display:none}
.counter .cell small{margin-top:.6rem}

/* Listen aus dem Bard-Editor (13.10.2026): Bard speichert Listenpunkte immer als <li><p>…</p></li>.
   Der Absatzabstand darf im Listenpunkt nicht greifen, sonst wirkt die Liste auseinandergerissen. */
:is(.prose,.richtext) li > p{margin:0}
:is(.prose,.richtext) li > p + p{margin-top:.4rem}

/* Mobil-Korrekturen 16.10.2026 (Befunde A2/A3, siehe pruefung-mobil-2026-10-16/BERICHT.md) */
html,body{overflow-x:clip} /* beide clip, nicht hidden: body mit overflow hidden wird sonst eigener Scroll-Container und der sticky Header loest sich (Fund 16.10.) */
.ts-hero h1,.cta-neutral h2,.ts-fakten b{overflow-wrap:anywhere}
.cta-neutral .ct,.ts-fakten div,.suche-results li{min-width:0}
@media(max-width:820px){.print.rev{grid-template-columns:1fr}.print .im img{height:auto;aspect-ratio:3/2}}
@media(max-width:560px){.ts-fakten{grid-template-columns:1fr}.ts-fakten div{padding-top:.9rem}}
@media(max-width:480px){.ts-hero h1{font-size:2.2rem}}

/* Mobil-Korrekturen 16.10.2026 B (B1 Tipp-Ziele, B2 Schrift >= 12 px; Bericht pruefung-mobil-2026-10-16) */
.ap-position,.ap-zust li,.dl-file,.dl-link .dl-file,.filter-badge,.prod-card .export,.prod-card .prod-tags li,.prod-card .spec .lbl,.prod-card .specs-4 .spec .lbl,.prod-card .tag,.produktwahl-auswahl h4,.produktwahl-gruppe legend,.ps-track figcaption,.sr-type,.standort-zeiten span,.stoerer-klein,.ts-fakten span{font-size:.75rem}
.produktwahl-item{padding:.375rem 0;min-height:2rem}
.produktwahl-item input{width:24px;height:24px;accent-color:var(--red)}
.prod-card .more,.crumb a{display:inline-block;padding:.25rem 0;margin:-.25rem 0}
.ps-dots button{position:relative;height:24px;background:transparent}
.ps-dots button::before{content:"";position:absolute;left:0;right:0;top:10px;height:4px;background:var(--g2);transition:background .15s}
.ps-dots button.on{background:transparent}
.ps-dots button.on::before{background:var(--red)}
.fbot a{display:inline-block;padding:.3rem .125rem;margin:-.3rem 0}
@media(max-width:820px){.fbot a{padding:.5rem .25rem;margin:-.5rem 0}.fbot span:last-child{display:flex;flex-wrap:wrap;gap:.25rem .5rem;align-items:center}}
/* FAQ Plus-Icon exakt zentriert (Mike 16.10.2026): zwei Balken statt Textzeichen; Hover-Rot nicht auf Touchgeraeten haengen lassen */
.faq-pm{position:relative;font-size:0;color:var(--red)}
.faq-pm::before,.faq-pm::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transform:translate(-50%,-50%);border-radius:1px}
.faq-pm::before{width:12px;height:2px}
.faq-pm::after{width:2px;height:12px}
.faq-item.is-open .faq-pm{color:#fff}
@media(hover:none){.faq-q:hover{color:var(--navy)}}
/* Button-Reihen 16.10.2026 (Mike): Abstand auch beim Umbruch, bisher nur im Hero definiert */
.cta-row{display:flex;flex-wrap:wrap;gap:.875rem}
.cta-row.ctr{justify-content:center}

/* ============================================================
   Feintuning 21.10.2026 (Mail Clemens 20.10.)
   F2 Home-Symbol in der Hauptnavigation · F3 Weltkugel/Sprachwahl
   ============================================================ */
.menu .menu-home svg{width:1.2rem;height:1.2rem;display:block}
.menu .menu-home>a{padding-block:calc(.5rem + .15rem)}
.lang{align-items:center}
.lang-ic{display:flex;margin-right:.25rem;color:inherit}
.lang-ic svg{width:1.05rem;height:1.05rem}
.lang-mob{display:none;position:relative}
@media(max-width:820px){
  .lang-mob{display:block}
  .lang-mob-btn{width:auto;padding:0 .625rem;gap:.375rem;font-weight:700;font-size:.8125rem;letter-spacing:.02em}
  .lang-mob-btn svg{width:20px;height:20px}
  .lang-mob-list{position:absolute;top:calc(100% + 8px);right:0;min-width:10.5rem;list-style:none;background:#fff;border:1px solid var(--g2);box-shadow:0 18px 44px rgba(0,0,0,.18);padding:.375rem;z-index:70}
  .lang-mob-list a{display:flex;align-items:center;gap:.625rem;min-height:44px;padding:0 .875rem;font-weight:600;color:var(--navy)}
  .lang-mob-list a b{min-width:1.5rem}
  .lang-mob-list a.on{color:var(--red);background:var(--g1)}
}


/* ============================================================
   F4 Sticky-Kopf, Variante B (Feintuning 21.10.2026, Freigabe Mike)
   Ab 1101 px: Suche + Direktanfrage rechts in der Menüzeile; beim Scrollen
   (.is-stuck) eine einzige Zeile Logo | Menü | Aktionen, 69 px statt 157 px.
   821–1100 px: Aufteilung wie bisher, nur Logozeile beim Scrollen schlanker.
   ============================================================ */
@media(min-width:821px){
 html[data-look="corporate"] .nav{padding-top:1.25rem}
 html[data-look="corporate"] .nav>a.logo, html[data-look="corporate"] .nav-r{padding-bottom:1.25rem}
 html[data-look="corporate"] .header-main.is-stuck .nav{padding-top:.5rem}
 html[data-look="corporate"] .header-main.is-stuck .nav>a.logo, html[data-look="corporate"] .header-main.is-stuck .nav-r{padding-bottom:.5rem}
 html[data-look="corporate"] .header-main.is-stuck{--logo-h:30px}
 .header-main .nav, .header-main .nav>a.logo, .header-main .nav-r{transition:padding .28s ease}
}
@media(min-width:1101px){
 html[data-look="corporate"] .nav{padding-top:1.25rem}
 html[data-look="corporate"] .nav>a.logo{padding-bottom:1.25rem}
 html[data-look="corporate"] .nav-r{position:absolute;right:40px;bottom:.4375rem;z-index:2;padding:0;margin:0;gap:.625rem}
 html[data-look="corporate"] .nav-r .iconbtn{width:44px;height:44px}
 html[data-look="corporate"] .nav-r .btn{min-height:44px;padding-block:0;display:inline-flex;align-items:center}
 html[data-look="corporate"] .menu>ul{gap:1.5rem}
 .header-main .nav, .header-main .nav>a.logo{transition:padding .28s ease}
}
@media(min-width:1101px) and (max-width:1180px){ html[data-look="corporate"] .menu>ul{gap:1rem} html[data-look="corporate"] .menu{font-size:.9375rem} }
@media(min-width:1101px){
 html[data-look="corporate"] .header-main.is-stuck .nav{flex-wrap:nowrap;padding-top:0;gap:2rem}
 html[data-look="corporate"] .header-main.is-stuck .nav>a.logo{padding-bottom:0}
 html[data-look="corporate"] .header-main.is-stuck{--logo-h:34px}
 html[data-look="corporate"] .header-main.is-stuck .menu{order:2;flex:1 1 auto;flex-basis:auto;padding:0}
 html[data-look="corporate"] .header-main.is-stuck .menu::before{display:none}
 html[data-look="corporate"] .header-main.is-stuck .nav-r{position:static;order:3;padding:0}
 html[data-look="corporate"] .header-main.is-stuck .nav{min-height:68px}
}
/* 821–1100 px: Menü einzeilig halten (mit Home-Symbol brachen lange FR/HU-Punkte sonst um) */
@media(min-width:821px) and (max-width:1100px){html[data-look="corporate"] .menu>ul{gap:.875rem} html[data-look="corporate"] .menu{font-size:.875rem} .menu>ul>li>a{white-space:nowrap}}
@media(min-width:821px) and (max-width:960px){html[data-look="corporate"] .menu>ul{gap:.625rem} html[data-look="corporate"] .menu{font-size:.8125rem}}
/* Kennzahlen-Band: Introtext an der Seitenkante ausrichten (Hinweis Mike 21.10.2026 — stand 12 px links davon,
   weil .counter .wrap kein Seiten-Padding hat) */
.counter-intro{padding-left:2.5rem}
@media(min-width:821px) and (max-width:1000px){.counter-zahlen .cell{padding-left:2.5rem}}
@media(max-width:820px){.counter-intro{padding-left:1.25rem;padding-right:1.25rem}.counter-zahlen .cell{padding-left:1.25rem}}
/* Sticky-Kopf ab 821 px: nur das Klebeband-Symbol des Logos (Mike 21.10.2026) */
.nav>a.logo .logo-rolle{display:none}
@media(min-width:821px){
 .header-main.is-stuck .logo .logo-simple{display:none}
 .header-main.is-stuck .logo .logo-rolle{display:block}
 html[data-look="corporate"] .header-main.is-stuck{--logo-h:36px}
}
/* F4 Ende */

/* ============================================================
   F5 Startseiten-Hero (Feintuning 21.10.2026): breiter, damit die DE-H1
   zweizeilig und die Unterzeile einzeilig wird; Buttons auf dem Video
   ============================================================ */
@media(min-width:821px){
 .hero-video-titel{max-width:min(1180px,100%)}
 .hero-video-titel h1{max-width:none;text-wrap:balance}
 .hero-video-sub{max-width:none;text-wrap:wrap}
}
.hero-video-titel .hero-video-cta{margin-top:2rem}
@media(max-width:820px){
 .hero-video.has-mobile .hero-video-cta{margin-top:1.5rem}
 .hero-video.has-mobile .hero-btn-2{border-color:var(--navy);color:var(--navy)}
 .hero-video.has-mobile .hero-btn-2:hover{background:var(--navy);color:#fff}
 .hero-video.has-mobile .hero-video-cta{flex-direction:column;gap:.625rem}
 .hero-video.has-mobile .hero-video-cta .btn{width:100%;justify-content:center}
}

/* ============================================================
   F8 H1 kleiner (Feintuning 21.10.2026, Mike: „H1 auf allen Seiten außer Home darf kleiner werden")
   Gleiche Größe wie die Startseiten-H1 (max. 3.25rem statt 4.3rem); Breite in ch angehoben,
   damit die Zeile in Pixeln etwa gleich breit bleibt; balance verteilt die Zeilen gleichmäßig.
   Startseite (.hero-video-titel) ist nicht betroffen.
   ============================================================ */
.ts-hero h1,.ts-hero--gruppe h1{font-size:clamp(2rem,3.4vw,3.25rem);text-wrap:balance}
.ts-hero--solo h1{max-width:36ch}
@media(max-width:480px){.ts-hero h1,.ts-hero--gruppe h1{font-size:1.85rem}}

/* ============================================================
   F9 Sortiment-Kopf mit Hintergrundbild (Feintuning 21.10.2026, Variante Mike)
   Desktop: intro_bild rechts oben (60 %), Maske läuft nach links + unten in den dunklen Kopf aus.
   Handy: Bild oben 4:3 in voller Breite, unten ausgeblendet, darunter Text.
   ============================================================ */
.ts-hero.ts-hero--bild{position:relative;overflow:hidden}
.ts-hero--bild>.wrap{position:relative;z-index:1}
.ts-hero-bg{position:absolute;top:0;right:0;bottom:0;width:60%;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 22%,#000 55%),linear-gradient(to top,transparent 0%,#000 30%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 22%,#000 55%),linear-gradient(to top,transparent 0%,#000 30%);
  mask-composite:intersect}
.ts-hero-bg img{width:100%;height:100%;object-fit:cover;display:block}
@media(min-width:821px){.ts-hero--bild .ts-lead{max-width:44ch}.ts-hero--bild h1{max-width:20ch}}
@media(max-width:820px){
  .ts-hero-bg{position:relative;width:auto;height:auto;aspect-ratio:4/3;margin:0 calc(-1 * var(--hero-pad,0px));
    -webkit-mask-image:linear-gradient(to top,transparent 0%,#000 35%);mask-image:linear-gradient(to top,transparent 0%,#000 35%);-webkit-mask-composite:source-over;mask-composite:add}
  .ts-hero.ts-hero--bild{padding-top:0}
  .ts-hero--bild>.wrap{margin-top:-.75rem}
}

/* Kopf ab 1101 px, nicht gescrollt: Suche + Direktanfrage vertikal mittig in der Menüzeile
   (Hinweis Mike 21.10.2026 — saßen 3–4 px zu hoch an der oberen Linie) */
@media(min-width:1101px){html[data-look="corporate"] .header-main:not(.is-stuck) .nav-r{bottom:0;height:var(--menuzeile,3.25rem);align-items:center}}
@media(min-width:1101px) and (max-width:1180px){html[data-look="corporate"] .header-main{--menuzeile:3.125rem}}

/* Kachel-Raster immer gleich breite Spalten (Hinweis Mike 21.10.2026): „1fr" heißt „mindestens so breit
   wie der Inhalt" — der Titel „Duct Tape (Gewebeband/Betonband/Panzerband)" machte Spalte 3 auf
   Klebebänder 478 px breit. minmax(0,1fr) erzwingt gleiche Spalten; Umbruch nach „/" per <wbr> in der Vorlage. */
.grid4{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1000px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.grid4{grid-template-columns:minmax(0,1fr)}}
.grid4 .tile .h3{overflow-wrap:break-word}

/* G1 Footer-Semantik (Feintuning 2, 22.10.2026): Spaltentitel als <p class="ftitel"> statt <h2>
   (gleiche Optik wie zuvor gemessen: 13px/650/uppercase, Zeilenhöhe 14.56px, 20px Abstand), Links in <ul class="flist"> */
.fg>div>p.ftitel{color:#fff;font-size:.8125rem;font-weight:650;line-height:1.12;text-transform:uppercase;letter-spacing:normal;margin:0 0 1.25rem}
.fg .flist{list-style:none;margin:0;padding:0}
.fg .flist li{margin:0;padding:0}

/* ============================================================
   G6 Produktkacheln „zueinander bündig" (Feintuning 2, 22.10.2026, Clemens):
   Subgrid — jede Kachel belegt 6 gemeinsame Zeilen der Reihe (Bild, Titel, Text, Chips,
   Kennwerte, Link). Vorher schob p{flex:1} die Chips je nach Höhe der Kennwerte.
   ============================================================ */
/* G6: Produktkacheln mit Subgrid — Titel, Text, Chips, Kennwerte, Link je Reihe auf gemeinsamen Linien */
.prod-card{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0}
.prod-card .im{grid-row:1}
.prod-card .pb{grid-row:2 / span 5;display:grid;grid-template-rows:subgrid;row-gap:0}
.prod-card .pb>h3{grid-row:1;align-self:start}
.prod-card .pb>p{grid-row:2;flex:none;align-self:start}
.prod-card .pb>.prod-tags{grid-row:3;align-self:start}
.prod-card .pb>.specs{grid-row:4;align-self:start}
.prod-card .pb>.more{grid-row:5;align-self:end;justify-self:start}

/* G4 Pfeil bei „Details" auf den Produktkacheln vertikal mittig (Clemens 22.10.2026): die Tippflächen-Regel
   vom 16.10. (.prod-card .more{display:inline-block}) hatte inline-flex + align-items:center überschrieben (2,5 px zu hoch).
   Polster/Rand der Tippfläche bleiben. */
.prod-card .more{display:inline-flex;align-items:center}

/* Claim-Abschnitt (Mike 29.10.2026): Leitsatz statt Zitat. Heller Grund (darf nicht wie das Seitenende wirken),
   Klebeband-Rolle aus dem Kopf als blasses Motiv rechts angeschnitten. Set „Claim" bzw. Themenseite › Zitat-Feld. */
section.claim{position:relative;overflow:hidden;padding:0;background:radial-gradient(120% 200% at 80% 0%,#fff 0%,var(--g1) 55%,#ececee 100%);border-block:1px solid var(--g2)}
section.claim::before{content:"";position:absolute;right:-4%;top:50%;width:min(520px,44vw);aspect-ratio:966/1000;transform:translateY(-50%) rotate(-10deg);background:url('/img/tape-roll-de.webp') center/contain no-repeat;opacity:.13;pointer-events:none}
section.claim .wrap{position:relative;padding-block:clamp(3.5rem,7vw,6rem)}
.claim-zusatz{display:flex;align-items:center;gap:.75rem;margin:0 0 1.1rem;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.claim-zusatz::before{content:"";width:32px;height:3px;background:var(--red)}
.claim-text{margin:0;max-width:24ch;font-size:clamp(1.9rem,4.2vw,3.4rem);font-weight:800;line-height:1.08;letter-spacing:-.02em;color:var(--navy)}
@media (max-width:820px){section.claim::before{right:-22%;width:62vw;opacity:.1}}

/* H1: echte Silbentrennung statt Umbruch mitten im Wort (29.10.2026) */
h1,.htext h1,.page-hero h1,.hero-c h1,.ts-hero h1,.ts-hero--gruppe h1,.hero-video-box h1,.hero-video-titel h1{-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:10 4 4;overflow-wrap:break-word}

/* Querverweis-Kachel unter dem Text (Produkt/Gruppe → Zubehör, 29.10.2026) */
.querverweis{display:flex;align-items:center;gap:18px;margin:28px 0 0;padding:14px 18px 14px 14px;background:var(--g1);border:1px solid var(--g2);color:var(--ink);text-decoration:none;max-width:560px;transition:border-color .2s,background .2s}
.querverweis:hover,.querverweis:focus-visible{border-color:var(--red);background:#fff}
.querverweis img{flex:none;width:96px;height:96px;object-fit:cover}
.querverweis-text{display:flex;flex-direction:column;gap:6px;min-width:0}
.querverweis-satz{font-size:.95rem;line-height:1.45;color:var(--g6)}
.querverweis b{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--navy)}
.querverweis b svg{width:1em;height:1em;color:var(--red);transition:transform .2s}
.querverweis:hover b svg{transform:translateX(3px)}
@media(max-width:480px){.querverweis{gap:14px}.querverweis img{width:76px;height:76px}}
.querverweis + .btn{margin-top:24px}

/* Globale Hinweisleiste unter der Navigation (29.10.2026) */
.hinweisleiste{background:var(--red);color:#fff;font-size:.95rem;line-height:1.45}
.hinweisleiste .wrap{display:flex;align-items:center;gap:14px;padding-top:12px;padding-bottom:12px}
.hinweisleiste p{margin:0;flex:1;min-width:0}
.hinweisleiste a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.hinweisleiste-ic{flex:none;display:flex}.hinweisleiste-ic svg{width:22px;height:22px}
.hinweisleiste-zu{flex:none;display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin:-6px -8px -6px 0;padding:0;border:0;background:none;color:inherit;cursor:pointer;opacity:.85}
.hinweisleiste-zu:hover,.hinweisleiste-zu:focus-visible{opacity:1}
.hinweisleiste-zu svg{width:18px;height:18px}
.hinweisleiste--hinweis{background:#FFD24A;color:var(--ink)}
.hinweisleiste--erfolg{background:var(--green)}
@media(max-width:600px){.hinweisleiste{font-size:.9rem}.hinweisleiste .wrap{align-items:flex-start;gap:10px}.hinweisleiste-ic svg{width:20px;height:20px}}