@import url('./kontakt.css');
/* KOPF-98 (17.10.2026): Seitenkopf nach Entwurf 9.8 "Mittelgroß mit Orange-Kante", Kundenwahl, mit Logo 05 "Glaskante".
   Vorlage: OUTBOX/TROAS_20261017_KOPF_98/entwurf/stile/gs-8.css. Die Entwurfsklassen sind auf die Bauteile des Shops
   übertragen: .service = .t-top, .haupt = .t-header-inner, .navi = .t-nav, .mega = .t-kat-panel, .logo = .t-brand,
   .cta = .t-cta, .sym = .t-symbol, .zaehler = .t-zaehler, Schublade = details.t-menu.
   Eingebunden von siteHeader() (shell.mjs); ersetzt die Kopfregeln, die bis 17.10. in theme.css standen.
   Regeln aus 9.8: Schräge 18 Grad (Winkel des Logo-Schrägstrichs), Keile höchstens 200 px, Orange als Schrift nur auf
   Nachtblau, "Glas konfigurieren" Leitblau. */
:root{
  --k-tinte:#142a4c;--k-tief:#0d1e38;--k-leise:#5a6678;--k-linie:#dde3ea;--k-flaeche:#eef1f5;
  --k-orange:#f2884b;--k-blau:#154e8a;--k-blau-tief:#0f3c6b;--k-auf-nacht:#b8c4d6;
  --k-rand:64px;--k-breite:1760px;--k-extra:304px;--k-spalt:64px;
  --k-titel:72px;--k-navi:16px;--k-punkt:16px;
  --k-schraeg:.325;--k-service:44px;--k-luft-keil:20px;--k-keil-max:200px;
}
.skip{box-sizing:border-box;display:inline-flex;align-items:center;min-height:44px;position:absolute;left:-9999px;top:0;z-index:200;padding:12px 18px;background:var(--k-tinte);color:#fff;font:800 15px/1 Manrope,Arial,sans-serif;text-decoration:none}
.skip:focus{left:8px;top:8px;outline:2px solid var(--k-orange);outline-offset:2px}
.t-nur-vorlesen,.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Serviceleiste ---------- */
/* Eine Schrift für die ganze Leiste (Rückmeldung 18.10.2026): Kontakt, Beratung, Servicezeiten und Gewährleistungsrechte
   in Manrope 700, gleicher Größe, Zeilenhöhe und Zeichenabstand, normale Schreibweise. Nur die Nummer ist 800 und weiß.
   Größe über --t-top-schrift, am Handy 12px. */
.t-top{--t-top-schrift:13px;position:relative;overflow-x:clip;background:var(--k-tief);color:var(--k-auf-nacht);font:700 var(--t-top-schrift)/1.3 Manrope,Arial,sans-serif;letter-spacing:.01em;text-transform:none;text-align:left;box-shadow:inset 0 -3px 0 var(--k-orange)}
.t-top-zeile{display:flex;align-items:stretch;gap:24px;max-width:var(--k-breite);min-height:var(--k-service);margin:0 auto;padding:0 calc(var(--k-rand) + 220px) 0 var(--k-rand)}
.t-top-kontakt{display:flex;align-items:center;gap:28px;min-width:0}
.t-top-tel,.t-top-wa,.t-top-zeiten{display:inline-flex;align-items:center;gap:9px;min-height:var(--k-service);color:inherit;text-decoration:none;white-space:nowrap}
.t-top-zeichen{width:14px;height:14px;flex:none}
.t-top-tel .t-top-zeichen{color:var(--k-orange)}
/* Karte 63: Chat-Zeichen grün, auf Nachtblau gut lesbar. */
.t-top-wa .t-top-zeichen{color:#4fd186}
.t-top-wort{font-weight:700}
.t-top-wert{font-weight:800;color:#fff}
.t-top-tel:hover .t-top-wert,.t-top-wa:hover .t-top-wert{text-decoration:underline;text-decoration-color:var(--k-orange);text-decoration-thickness:2px;text-underline-offset:5px}
.t-top-tel:focus-visible,.t-top-wa:focus-visible,.t-top .guarantee-notice summary:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Pflichthinweis "Deine Gewährleistungsrechte" (EU, ab 27.09.2026): rechts in der Leiste. */
.t-top .guarantee-notice{margin:0;padding:0;border:0;background:none;letter-spacing:0;text-transform:none;font:400 14px/1.6 Manrope,Arial,sans-serif;color:var(--k-tinte)}
.t-top .guarantee-notice>summary{position:absolute;top:0;right:max(var(--k-rand),calc((100% - var(--k-breite)) / 2 + var(--k-rand)));display:flex;align-items:center;gap:9px;height:var(--k-service);padding:0;list-style:none;cursor:pointer;color:#fff;font:700 var(--t-top-schrift)/1.3 Manrope,Arial,sans-serif;letter-spacing:.01em;text-transform:none}
.t-top .guarantee-notice>summary::-webkit-details-marker{display:none}
.t-top .guarantee-notice>summary::before{content:"";flex:none;width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v5.6c0 4.6-3.2 7.9-7.5 9.4-4.3-1.5-7.5-4.8-7.5-9.4V6z'/%3E%3Cpath d='M9 12l2.2 2.2L15.2 10'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v5.6c0 4.6-3.2 7.9-7.5 9.4-4.3-1.5-7.5-4.8-7.5-9.4V6z'/%3E%3Cpath d='M9 12l2.2 2.2L15.2 10'/%3E%3C/svg%3E") center/contain no-repeat}
.t-top .guarantee-notice>summary{text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-decoration-thickness:1px;text-underline-offset:5px}
.t-top .guarantee-notice>summary:hover{text-decoration-color:var(--k-orange);text-decoration-thickness:2px}
/* Karte 63 (Variante 1): kein oranger Keil mehr hinter dem Hinweis, Orange nur als Linie unter der Leiste (.t-top). */
.t-top .guarantee-notice[open]{display:flow-root;padding:0 0 30px;background:#fff;border-bottom:1px solid var(--k-linie)}
.t-top .guarantee-notice[open]>*:not(summary){max-width:calc(var(--k-breite) - 2 * var(--k-rand));margin-inline:max(var(--k-rand),calc((100% - var(--k-breite)) / 2 + var(--k-rand)))}
.t-top .guarantee-notice[open]>.label-scroll{margin-top:28px}
.t-top .label-scroll{max-width:100%;overflow-x:auto;padding:4px;background:#fff;border:1px solid var(--k-linie)}
.t-top .legal-guarantee-label{display:block;width:min(740px,100%);height:auto}
.t-top .guarantee-notice p{margin:14px 0 0;color:var(--k-tinte)}

/* ---------- Hauptzeile ---------- */
header.t-header{position:relative;z-index:50;background:#fff;color:var(--k-tinte);font-family:Manrope,Arial,sans-serif}
.t-header-inner{display:flex;align-items:center;gap:40px;max-width:var(--k-breite);min-height:100px;margin:0 auto;padding:0 var(--k-rand)}
a.t-brand{flex:none;display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
a.t-brand img{display:block;height:63px;width:auto}
a.t-brand:focus-visible{outline:2px solid var(--k-blau);outline-offset:4px}
.t-suche{position:relative;flex:1 1 auto;min-width:0;margin:0}
.t-suchfeld{display:flex;align-items:center;gap:13px;height:52px;padding:0 18px;background:var(--k-flaeche);border-bottom:2px solid var(--k-tinte);color:var(--k-tinte)}
.t-suchfeld:focus-within{background:#fff;box-shadow:inset 0 0 0 2px var(--k-tinte)}
/* Karte 46 (20.10.2026): Tippfläche 44 px breit statt 24 px; die negativen Ränder halten Lupe und Suchfeld an ihrem Platz. */
.t-suche-los{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin:0 -10px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.t-suche-los .t-zeichen{width:20px;height:20px}
.t-suche-q{flex:1;min-width:0;height:48px;border:0;background:none;outline:none;font:600 17px/1 Manrope,Arial,sans-serif;letter-spacing:-.01em;color:var(--k-tinte)}
.t-suche-q::placeholder{color:var(--k-leise);font-weight:500}
.t-suche-q::-webkit-search-cancel-button{cursor:pointer}
a.t-cta{display:inline-flex;align-items:center;gap:11px;flex:none;min-height:52px;margin-left:auto;padding:0 26px;background:var(--k-blau);color:#fff;font:800 16px/1 Manrope,Arial,sans-serif;letter-spacing:-.005em;text-decoration:none;white-space:nowrap}
a.t-cta:hover{background:var(--k-blau-tief)}
a.t-cta:focus-visible{outline:2px solid var(--k-blau);outline-offset:3px}
a.t-cta .t-zeichen{width:19px;height:19px}
/* nowrap: public/shop/style.css setzt nav{flex-wrap:wrap}; auf den Shopseiten standen Konto und Warenkorb bis 860 px sonst untereinander (18.10.2026). */
.t-symbole{display:flex;align-items:center;gap:8px;flex:none;flex-wrap:nowrap;margin-right:-10px}
a.t-symbol{position:relative;display:inline-flex;align-items:center;gap:9px;min-height:48px;min-width:44px;padding:0 10px;color:var(--k-tinte);text-decoration:none;font:800 15.5px/1 Manrope,Arial,sans-serif;letter-spacing:-.01em}
a.t-symbol .t-zeichen{width:22px;height:22px}
a.t-symbol:hover .t-symbol-text,a.t-symbol[aria-current] .t-symbol-text{text-decoration:underline;text-decoration-color:var(--k-orange);text-decoration-thickness:3px;text-underline-offset:6px}
a.t-symbol:focus-visible{outline:2px solid var(--k-blau);outline-offset:2px}
/* Zähler als kleines oranges Parallelogramm hinter dem Wort, im selben Schnitt wie der Keil */
.t-zaehler{display:inline-block;min-width:30px;height:22px;padding:0 9px;background:var(--k-orange);color:var(--k-tinte);font:800 12.5px/22px Manrope,Arial,sans-serif;text-align:center;font-variant-numeric:tabular-nums;clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%)}
.t-zaehler[hidden]{display:none}

/* Live-Vorschläge der Suche (kopf.mjs) */
.t-vorschlaege{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:70;max-height:min(70vh,560px);overflow-y:auto;padding:8px 0;background:#fff;border:1px solid var(--k-linie);border-top:3px solid var(--k-tinte);box-shadow:0 30px 50px -24px rgba(13,30,56,.35)}
.t-vorschlaege[hidden]{display:none}
.t-vorschlag-gruppe{margin:10px 18px 4px;font:800 11px/1.3 Manrope,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--k-leise)}
.t-vorschlag{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 18px;color:var(--k-tinte);text-decoration:none;font:600 15.5px/1.3 Manrope,Arial,sans-serif}
.t-vorschlag[aria-selected=true],.t-vorschlag:hover{background:var(--k-flaeche)}
.t-vorschlag mark{background:none;color:inherit;font-weight:800;text-decoration:underline;text-decoration-color:var(--k-orange);text-decoration-thickness:2px;text-underline-offset:3px}
.t-vorschlag img{flex:none;width:40px;height:40px;object-fit:cover;background:var(--k-flaeche)}
.t-vorschlag-alle,.t-vorschlag-leer{font-weight:800}

/* ---------- Menüzeile ---------- */
/* display:block gegen nav{display:flex} aus /shop/style.css, sonst schrumpft die Menüzeile auf Shopseiten auf ihren Inhalt. */
.t-nav{display:block;position:relative;background:#fff;border-top:1px solid var(--k-linie);border-bottom:2px solid var(--k-tinte);font-family:Manrope,Arial,sans-serif}
.t-nav-inner{max-width:var(--k-breite);margin:0 auto;padding:0 var(--k-rand)}
.t-kats{display:flex;align-items:stretch;justify-content:space-between;gap:32px}
.t-kats>a{display:inline-flex;align-items:center;min-height:64px;font-size:var(--k-navi);font-weight:800;letter-spacing:-.01em;color:var(--k-tinte);text-decoration:none;white-space:nowrap}
details.t-kat-auf{position:static}
/* details{padding:12px 0} aus /shop/style.css machte die Menüzeile auf Shopseiten 24 px höher. */
:is(.t-top,.t-header,.t-schublade) details{padding:0}
/* header{border-bottom:1px solid #c8ccd2} aus /shop/style.css: auf Shopseiten sonst eine graue Linie unter der Menüzeile. */
header.t-header{border-bottom:0}
details.t-kat-auf>summary{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:64px;list-style:none;cursor:pointer;font-size:var(--k-navi);font-weight:800;letter-spacing:-.01em;color:var(--k-tinte);white-space:nowrap}
details.t-kat-auf>summary::-webkit-details-marker{display:none}
details.t-kat-auf>summary::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:6px;background:var(--k-orange);clip-path:polygon(2px 0,100% 0,calc(100% - 2px) 100%,0 100%);transform:scaleY(0);transform-origin:bottom;transition:transform .16s}
details.t-kat-auf>summary:hover::after,details.t-kat-auf[open]>summary::after{transform:none}
details.t-kat-auf>summary:focus-visible{outline:2px solid var(--k-blau);outline-offset:3px}
.t-kat-pfeil{width:16px;height:16px;color:var(--k-leise);transition:transform .16s}
details.t-kat-auf[open] .t-kat-pfeil{transform:rotate(180deg);color:var(--k-tinte)}
/* G3 mit 9.8 (menue.mjs markiereBereich): Bereich und Link der offenen Seite unterstrichen wie Konto und Warenkorb */
details.t-kat-auf>summary[aria-current]>span,details.t-schub-kat>summary[aria-current] .t-schub-text,.t-kat-liste a[aria-current="page"] .t-kat-text,.t-schub-inhalt li a[aria-current="page"] .t-kat-text,.t-schublade>nav a[aria-current="page"],.t-kats>a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--k-orange);text-decoration-thickness:3px;text-underline-offset:6px}

/* ---------- Großmenü ---------- */
.t-kat-panel{position:absolute;left:0;right:0;top:100%;z-index:60;overflow:hidden;background:#fff;box-shadow:0 40px 60px -30px rgba(13,30,56,.32);text-transform:none;letter-spacing:0}
.t-kat-innen{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:var(--k-spalt);max-width:var(--k-breite);margin:0 auto;padding:0 var(--k-rand)}
.t-kat-innen.t-mit-extra{grid-template-columns:minmax(0,1fr) var(--k-extra)}
.t-kat-kopf{grid-column:1 / -1;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto auto;column-gap:40px;padding:38px 0 30px;border-bottom:1px solid var(--k-linie)}
.t-kat-kopf p{margin:0}
.t-kat-titel{grid-column:1;grid-row:1 / span 3;align-self:last baseline;font-size:var(--k-titel);font-weight:800;line-height:.9;letter-spacing:-.05em;color:var(--k-tinte);white-space:nowrap}
/* Keil links vom Fensterrand bis kurz vor den ersten Buchstaben, Schrägstrich aus dem Logo hinter dem Bereich */
.t-kat-titel::before{content:"";display:inline-block;width:var(--k-keil-max);height:.72em;margin-left:calc(-1 * var(--k-keil-max) - var(--k-luft-keil));margin-right:var(--k-luft-keil);background:var(--k-orange);clip-path:polygon(0 0,100% 0,calc(100% - .72em * var(--k-schraeg)) 100%,0 100%)}
.t-kat-titel::after{content:"";display:inline-block;width:.12em;height:.72em;margin-left:.15em;background:var(--k-orange);transform:skewX(-18deg)}
.t-kat-umfang{grid-column:2;grid-row:2;justify-self:end;margin-bottom:4px!important;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--k-leise)}
a.t-kat-alle{grid-column:2;grid-row:3;justify-self:end;align-self:last baseline;display:inline-flex;align-items:center;gap:9px;min-height:44px;font-size:17px;font-weight:800;letter-spacing:-.015em;color:var(--k-tinte);text-decoration:none}
a.t-kat-alle span{text-decoration:underline;text-decoration-color:var(--k-orange);text-decoration-thickness:3px;text-underline-offset:7px}
.t-kat-weiter{width:20px;height:20px;flex:none}
.t-kat-gruppen{grid-column:1;grid-row:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px 44px;align-content:start;padding:36px 0}
.t-kat-gruppen[data-anzahl="3"]{grid-template-columns:repeat(3,minmax(max-content,1fr))}
/* Variante 6 (19.10.2026): Gruppentitel 20 px in normaler Schreibweise mit feiner Linie, Unterseiten 16 px mittel */
.t-kat-gruppe-titel{position:relative;margin:0 0 6px;padding:20px 0 10px;border-bottom:1px solid var(--k-linie);font-size:20px;font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--k-tinte)}
.t-kat-gruppe-titel::before{content:"";position:absolute;left:0;top:0;width:34px;height:5px;background:var(--k-orange);clip-path:polygon(2px 0,100% 0,calc(100% - 2px) 100%,0 100%)}
.t-kat-gruppe-titel a{color:inherit;text-decoration:none}.t-kat-gruppe-titel a:hover{color:var(--k-blau)}
.t-kat-liste{margin:0;padding:0;list-style:none}
.t-kat-liste a{display:flex;align-items:flex-start;flex-wrap:wrap;gap:4px;min-height:36px;padding:8px 0 6px;font-size:var(--k-punkt);font-weight:500;line-height:1.24;letter-spacing:0;color:var(--k-tinte);text-decoration:none}
.t-kat-liste a:hover .t-kat-text{text-decoration:underline;text-decoration-color:var(--k-orange);text-decoration-thickness:3px;text-underline-offset:6px}
.t-kat-liste a:focus-visible{outline:2px solid var(--k-blau);outline-offset:2px}
/* Artikelzahl hochgestellt wie eine Fußnote */
.t-kat-zahl{flex:none;font-size:11px;font-weight:800;line-height:1;letter-spacing:.02em;color:var(--k-leise);font-variant-numeric:tabular-nums}
.t-kat-nebenbei{grid-column:1;grid-row:3;display:flex;flex-wrap:wrap;gap:6px 24px;margin:-10px 0 0;padding-bottom:36px;font-size:14px;font-weight:600}
.t-kat-nebenbei a{color:var(--k-leise);text-underline-offset:4px}
/* Rechte Spalte: ruhige graue Fläche mit Bild */
.t-kat-extra{grid-column:2;grid-row:2 / span 2;display:flex;flex-direction:column;gap:6px;margin:36px 0;padding:0 0 24px;background:var(--k-flaeche)}
.t-kat-bild{position:relative;display:block;margin:0 0 16px;aspect-ratio:16/11;overflow:hidden;background:var(--k-flaeche)}
.t-kat-bild img{display:block;width:100%;height:100%;object-fit:cover}
.t-kat-extra>:not(.t-kat-bild){margin-left:24px;margin-right:24px}
.t-kat-extra-titel{margin:0;font-size:21px;font-weight:800;line-height:1.15;letter-spacing:-.025em;color:var(--k-tinte)}
.t-kat-extra-text{margin:0;font-size:15px;font-weight:500;color:var(--k-leise)}
a.t-kat-extra-link{align-self:flex-start;display:inline-flex;align-items:center;gap:9px;min-height:44px;margin-top:2px;font-size:16px;font-weight:800;color:var(--k-tinte);text-decoration:none}
a.t-kat-extra-link span{text-decoration:underline;text-decoration-color:var(--k-orange);text-decoration-thickness:3px;text-underline-offset:6px}
.t-kat-extra[data-art=kontakt]{padding-top:26px}
.t-kat-extra-symbol{display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:12px;background:var(--k-tinte);color:var(--k-orange)}
.t-kat-extra-symbol svg{width:24px;height:24px}
.t-kat-extra[data-art=kontakt] a.t-kat-extra-link{font-size:24px;letter-spacing:-.03em}
.t-kat-panel[data-bereich=service]{--k-extra:332px}
/* Ideen: Drinnen und Draußen als zweite Ebene */
.t-kat-bereiche{grid-column:1 / -1;grid-row:2;display:flex;gap:88px;padding:34px 0 38px}
.t-kat-unterbereich{min-width:0}
.t-kat-unter-titel{margin:0 0 20px;font-size:34px;font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--k-tinte)}
.t-kat-unter-titel a{color:inherit;text-decoration:none}.t-kat-unter-titel a:hover{color:var(--k-blau)}
.t-kat-unterbereich .t-kat-gruppen{grid-template-columns:repeat(var(--spalten,3),minmax(max-content,1fr));padding:0;row-gap:26px}
.t-kat-unterbereich[data-anzahl="2"] .t-kat-gruppen{--spalten:2}
.t-kat-unterbereich[data-anzahl="1"] .t-kat-gruppen{--spalten:1}
/* Zubehör: drei Spalten, Möbel und Werkstatt unter Schiebe- und Ganzglas */
.t-kat-panel[data-bereich=zubehoer] .t-kat-gruppen{grid-template-columns:repeat(3,minmax(max-content,1fr))}
.t-kat-panel[data-bereich=zubehoer] .t-kat-gruppe:nth-child(1){grid-column:1;grid-row:1 / span 2}
.t-kat-panel[data-bereich=zubehoer] .t-kat-gruppe:nth-child(2){grid-column:2;grid-row:1}
.t-kat-panel[data-bereich=zubehoer] .t-kat-gruppe:nth-child(3){grid-column:3;grid-row:1 / span 2}
.t-kat-panel[data-bereich=zubehoer] .t-kat-gruppe:nth-child(4){grid-column:2;grid-row:2}
.t-kat-panel[data-bereich=zubehoer] .t-kat-gruppe:nth-child(n+5){grid-column:auto;grid-row:auto}

/* ---------- Klebender und kompakter Kopf (kopf.mjs) ---------- */
html.t-kopf-klebt header.t-header{position:sticky;top:var(--t-top-h,0px);z-index:50}
html.t-kopf-klebt .t-top{position:sticky;top:0;z-index:49}
html.t-kopf-klebt .t-top:has(.guarantee-notice[open]){position:relative}
html.t-kopf-klebt{scroll-padding-top:calc(var(--t-kopf-h,0px) + 12px)}
html.t-kopf-kompakt .t-header-inner{min-height:68px}
html.t-kopf-kompakt a.t-brand img{height:38px}
html.t-kopf-kompakt .t-suchfeld,html.t-kopf-kompakt a.t-cta{height:46px;min-height:46px}
html.t-kopf-kompakt header.t-header{box-shadow:0 10px 24px -18px rgba(13,30,56,.45)}
html.t-kopf-kompakt details.t-kat-auf>summary,html.t-kopf-kompakt .t-kats>a{min-height:52px}
/* Karte 115: am Handy beim Abwärtsscrollen nur die Suchzeile abschneiden (kopf.mjs setzt Klasse und Höhe). */
@media (max-width:860px){
  html.t-kopf-suche-zu header.t-header{clip-path:inset(0 0 var(--t-suche-zu-h,0px) 0)}
  html.t-kopf-suche-zu header.t-header .t-suche{visibility:hidden}
  /* Kompakte Logozeile am Handy: Kontaktleiste und Logozeile zusammen unter 100 px. */
  html.t-kopf-kompakt a.t-brand{min-height:48px}
}

/* ---------- Schublade (Handy und Tablet) ---------- */
details.t-menu{display:none}
details.t-menu>summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;margin-left:-10px;padding:0 10px;list-style:none;cursor:pointer;font:800 14px/1 Manrope,Arial,sans-serif;color:var(--k-tinte)}
details.t-menu>summary::-webkit-details-marker{display:none}
details.t-menu>summary .t-zeichen{width:24px;height:24px}
details.t-menu>summary:focus-visible{outline:2px solid var(--k-blau);outline-offset:2px}
.t-schublade{position:fixed;inset:0 auto 0 0;z-index:91;width:min(400px,90vw);overflow-y:auto;overscroll-behavior:contain;background:#fff;color:var(--k-tinte);box-shadow:12px 0 40px rgba(13,30,56,.22);font-family:Manrope,Arial,sans-serif;text-transform:none;letter-spacing:0}
details.t-menu[open]::before{content:"";position:fixed;inset:0;z-index:90;background:rgba(13,30,56,.5)}
.t-schub-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:8px 8px 8px 20px;border-bottom:2px solid var(--k-tinte)}
.t-schub-kopf img{display:block;height:34px;width:auto}
.t-schub-titel{margin:0;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.t-schub-zu{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;padding:0 12px;border:0;background:none;font:700 14px/1 Manrope,Arial,sans-serif;color:var(--k-tinte);cursor:pointer}
.t-schub-zu[hidden]{display:none}
.t-schub-cta{display:flex;margin:16px 20px 8px}
.t-schub-cta a.t-cta{flex:1;justify-content:center;margin:0}
.t-schub-kats{padding:8px 0}
details.t-schub-kat>summary{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 20px;border-bottom:1px solid var(--k-linie);list-style:none;cursor:pointer;font-size:19px;font-weight:800;letter-spacing:-.025em}
details.t-schub-kat>summary::-webkit-details-marker{display:none}
.t-schub-text{flex:1}
details.t-schub-kat>summary .t-kat-zahl{font-size:12px}
details.t-schub-kat>summary .t-kat-pfeil{width:18px;height:18px}
details.t-schub-kat[open]>summary{box-shadow:inset 5px 0 0 var(--k-orange)}
details.t-schub-kat[open]>summary .t-kat-pfeil{transform:rotate(180deg)}
.t-schub-inhalt{padding:4px 20px 16px;border-bottom:1px solid var(--k-linie)}
.t-schub-gruppe{margin:14px 0 2px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--k-tinte)}
.t-schub-gruppe a{color:inherit;text-decoration:none}
.t-schub-inhalt ul{margin:0;padding:0;list-style:none}
.t-schub-inhalt li a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;font-size:16px;font-weight:700;color:var(--k-tinte);text-decoration:none}
.t-schub-inhalt li a .t-kat-zahl{font-size:12px}
.t-schub-nebenbei{margin:8px 0 0;font-size:14px}
.t-schub-nebenbei a{color:var(--k-leise)}
a.t-schub-alle{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;font-size:16px;font-weight:800;color:var(--k-tinte);text-decoration:underline;text-decoration-color:var(--k-orange);text-decoration-thickness:3px;text-underline-offset:6px}
a.t-schub-alle .t-kat-weiter{width:17px;height:17px}
.t-schublade>nav{display:flex;flex-direction:column;padding:16px 20px 8px}
.t-schublade>nav a{display:flex;align-items:center;min-height:44px;font-size:15px;font-weight:700;color:var(--k-tinte);text-decoration:none}
.t-schub-service{display:flex;flex-direction:column;padding:8px 20px 32px;font-size:14px;color:var(--k-leise)}
.t-schub-service a,.t-schub-service p{display:flex;align-items:center;gap:10px;min-height:44px;margin:0;color:inherit;text-decoration:none}
.t-schub-service a{color:var(--k-tinte);font-weight:800}

/* ---------- Breiten ---------- */
/* Schmalere Computer (1440 px): eine Stufe kleiner, Verhältnis bleibt */
@media (max-width:1700px){
  :root{--k-rand:56px;--k-extra:264px;--k-spalt:44px;--k-titel:64px;--k-navi:16px;--k-luft-keil:14px}
  .t-header-inner{gap:30px;min-height:100px}
  a.t-brand img{height:58px}
  .t-suchfeld{height:50px}.t-suche-q{height:46px;font-size:16px}
  a.t-cta{min-height:50px;padding:0 22px;font-size:15.5px}
  details.t-kat-auf>summary,.t-kats>a{min-height:60px}
  .t-kat-kopf{padding:32px 0 26px}
  .t-kat-gruppen{gap:28px 34px;padding:32px 0 34px}
  .t-kat-extra{margin:32px 0 34px}
  .t-kat-bereiche{gap:60px;padding:30px 0 34px}
  .t-kat-unter-titel{margin-bottom:18px}
  .t-kat-panel[data-bereich=service]{--k-extra:320px}
  .t-kat-extra>:not(.t-kat-bild){margin-left:22px;margin-right:22px}
  .t-kat-extra[data-art=kontakt] a.t-kat-extra-link{font-size:22px}
  .t-kat-extra-titel{font-size:19px}
}
@media (max-width:1279px){
  :root{--k-rand:32px;--k-extra:240px;--k-spalt:32px;--k-titel:56px;--k-navi:16px}
  .t-kats{gap:18px}
  .t-header-inner{gap:22px}
  .t-symbol-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  a.t-brand img{height:50px}
}
/* Ideen: sechs Spalten brauchen am schmalen Desktop kleinere Zwischenräume, ohne Texte abzuschneiden. */
@media (min-width:1100px) and (max-width:1199px){
  .t-kat-bereiche{gap:28px}
  .t-kat-unterbereich .t-kat-gruppen{column-gap:12px}
}
/* Unter 1100 px: Schublade statt Menüzeile */
@media (max-width:1099px){
  :root{--k-rand:24px;--k-service:44px}
  .t-nav{display:none}
  details.t-menu{display:block}
  .t-header-inner{gap:16px;min-height:76px}
  a.t-brand img{height:46px}
  a.t-symbol{justify-content:center;padding:0}
  .t-top-zeiten{display:none}
}
@media (max-width:860px){
  /* Responsive-Abnahme 25.10.2026: Reicht die Zeile nicht (341 bis 351 px, mit Warenkorb-Zähler bis 368 px), gibt das Logo
     den Platz ab und wird anteilig kleiner (minmax(0,1fr), max-width, object-fit). Vorher lief der Kopf über den Rand
     (Seitwärts-Scroll) oder das Warenkorb-Zeichen schrumpfte auf den Shopseiten auf 5 px. */
  .t-header-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"menue logo sym" "suche suche suche";row-gap:0;column-gap:8px;padding-bottom:12px;min-height:0}
  details.t-menu{grid-area:menue}
  details.t-menu>summary>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  a.t-brand{grid-area:logo;min-height:60px;min-width:0}
  a.t-brand img{height:40px;max-width:100%;object-fit:contain;object-position:left center}
  a.t-symbol .t-zeichen{flex:none}
  .t-symbole{grid-area:sym}
  .t-suche{grid-area:suche}
  .t-header-inner>a.t-cta{display:none}
  html.t-kopf-kompakt .t-header-inner{min-height:0}
  html.t-kopf-kompakt a.t-brand img{height:30px}
}
@media (max-width:600px){
  /* Pflichthinweis bleibt auch am Handy als Text sichtbar (EU-Leitlinie), notfalls zweizeilig; der Keil wird schmal. */
  .t-top-zeile{padding-right:calc(var(--k-rand) + 150px)}
  .t-top{--t-top-schrift:12px}
  .t-top .guarantee-notice>summary{max-width:150px;white-space:normal;line-height:1.25}
  /* 25.10.2026: Mit Schild-Zeichen passte "Gewährleistungsrechte" zwischen 401 und 600 px nicht in eine Zeile und brach
     mitten im Wort um (kopfleiste-320, 414 px). Unter 400 px entfiel das Zeichen schon. */
  .t-top .guarantee-notice>summary::before{display:none}
}
@media (max-width:480px){
  :root{--k-rand:16px;--k-luft-keil:10px}
  .t-top-wort{display:none}
  .t-top-kontakt{gap:12px}
}
@media (max-width:400px){
  /* Schmale Handys: Hinweis zweizeilig in derselben Schrift wie die Leiste, Telefonzeichen entfällt, Logo kleiner */
  .t-top-zeile{padding-right:calc(var(--k-rand) + 140px)}
  .t-top .guarantee-notice>summary{max-width:140px}
  .t-top .guarantee-notice>summary::before{display:none}
  .t-top-tel .t-top-zeichen{display:none}
  a.t-brand img{height:36px}
  .t-symbole{gap:0;margin-right:-6px}
}
/* Karte 63: unter 1024 px stehen Chat und Beratung nur mit Zeichen und Nummer, sonst stößt die Leiste an den Hinweis. */
@media (max-width:1023px){
  .t-top-wort{display:none}
}
/* Karte 63: ganz schmale Handys haben neben "Kontakt +", Telefon und Hinweis keinen Platz für das Chat-Zeichen.
   Der Chat bleibt dort über "Kontakt +" erreichbar (Kontakt-Dialog). 25.10.2026: Grenze 380 statt 360 px, zwischen
   361 und 377 px blieben zwischen Telefon und Hinweis weniger als 8 px (bei 370 px unter 1 px, kopfleiste-320). */
@media (max-width:380px){
  .t-top-wa{display:none}
}
@media (max-width:340px){
  a.t-brand img{height:31px}
  .t-header-inner{column-gap:4px}
}
@media (prefers-reduced-motion:reduce){details.t-kat-auf>summary::after,.t-kat-pfeil{transition:none}}

.t-suche-los:focus-visible,.t-kats>a:focus-visible{outline:2px solid var(--k-blau);outline-offset:3px}