/* =============================================================
   Theme "themedruck" – Druck- und Gravurartikel
   Themefarbe #385676 (tiefes Schieferblau) + Messing-Akzent.

   AUFBAU
     1  Farben & Tokens
     2  Grundlagen / Rahmen
     3  Kopfzeile, Suche, Aktionen
     4  Megamenü (Desktop)
     5  Seitenmenü mit Ebenen-Blättern (mobil/Tablet)
     6  Bausteine: Buttons, Karten, Formulare, Meldungen
     7  Seiten: Kategorie, Artikel, Warenkorb, Konto, Checkout
     8  Fußzeile & Warenkorb-Drawer
     9  Responsive: Breakpoints, Querformat, Feinheiten

   HINWEIS ZUM BASIS-CSS: assets/css/style.css wird VOR dieser Datei
   geladen und bleibt für Formularelemente, Drawer-Mechanik usw.
   zuständig. Alle neuen Bausteine tragen deshalb den Präfix "td-" –
   so kann keine Basisregel (z. B. nav.hauptnav, .card, .btn) per
   Spezifität in dieses Theme hineinregieren, und umgekehrt bleiben
   die anderen Themes unberührt.
   ============================================================= */

/* --- 1  Farben & Tokens ------------------------------------- */
:root {
  --td-blau: #A81212;
  --td-blau-dunkel: #2a4159;
  --td-blau-tief: #000000;
  --td-blau-hell: #4d6f92;
  --td-blau-rgb: 56, 86, 118;
  --td-blau-tint: #eef2f7;
  --td-blau-tint-2: #dfe7ef;

  --td-messing: #b7822f;
  --td-messing-hell: #d9a94e;
  --td-messing-tint: #fbf3e4;

  --td-tinte: #16212c;
  --td-tinte-70: #4d5a67;
  --td-tinte-45: #7d8894;
  --td-linie: #dde3ea;
  --td-linie-stark: #c3ced9;
  --td-flaeche: #ffffff;
  /* Seitenhintergrund. Auf Wunsch weiß statt des vorherigen hellen Grau
     (#f5f7fa): Karten und Kacheln sind selbst weiß und grenzen sich
     seither allein über ihre Linie ab – dort, wo die Abgrenzung tragen
     muss, steht deshalb --td-grund-ton (siehe unten). */
  --td-grund: #ffffff;
  /* Der frühere Grundton, weiterhin für Flächen, die sich vom Weiß
     absetzen müssen: Tabellenköpfe, gefüllte Knöpfe, abgesetzte
     Leisten. Ohne ihn verschwänden sie auf dem weißen Untergrund. */
  --td-grund-ton: #f5f7fa;

  --td-ok: #1e7a52;
  --td-ok-tint: #e6f4ed;
  --td-warn: #9a5b12;
  --td-warn-tint: #fdf3e2;
  --td-fehler: #b3261e;
  --td-fehler-tint: #fbeceb;

  --td-r-s: 6px;
  --td-r-m: 10px;
  --td-r-l: 16px;
  --td-schatten: 0 2px 6px rgba(22, 33, 44, .06), 0 12px 28px rgba(22, 33, 44, .07);
  --td-schatten-klein: 0 1px 3px rgba(22, 33, 44, .08);
  --td-kopf-h: 68px;
  --td-wrap: 96vw;
}

/* --- 2  Grundlagen ----------------------------------------- */
body.td-body {
  background: var(--td-grund);
  color: var(--td-tinte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  /* NICHT durch reines "overflow-x: hidden" ersetzen: Das legt body als
     Scroll-Container fest (Browser setzen overflow-y dann intern auf
     "auto") und genau das bricht "position: sticky" auf .td-header
     (#tdHeader) – der Kopf scrollte dadurch mit weg statt oben kleben zu
     bleiben. "overflow-x: clip" verhindert horizontales Scrollen
     (u. a. wegen .td-mob-nav, das geschlossen per transform:
     translateX(-102%) links außerhalb steht) OHNE einen Scroll-Container
     zu erzeugen. "hidden" bleibt als Fallback für Browser ohne
     "overflow: clip" (u. a. ältere iOS-Safari-Versionen) stehen, wird von
     "clip" in allen aktuellen Browsern aber überschrieben. */
  overflow-x: hidden;
  overflow-x: clip;
}

body.td-body.td-nav-offen {
  overflow: hidden;
}

.td-wrap {
  width: 100%;
  max-width: var(--td-wrap);
  margin: 0 auto;
  padding: 0 clamp(14px, 3vw, 32px);
}

/* Impressum, AGB, Datenschutz, Widerruf, Kontakt und die Infoseiten liefen
   in einer schmalen Spalte von 700 bis 760 px, während "Versand & Zahlung"
   die volle Breite des Shops nutzt – mitten in einer 1440 px breiten Seite
   sah das aus wie ein vergessener Rest. Hier gilt für sie dasselbe Maß wie
   für alles andere, Innenabstand inbegriffen (siehe .wrap-text und
   .wrap-formular in assets/css/style.css). */
.wrap-text,
.wrap-formular {
  max-width: var(--td-wrap);
  padding: 0 clamp(14px, 3vw, 32px);
}

.td-main {
  display: block;
  min-height: 46vh;
  padding-bottom: clamp(40px, 6vw, 80px);
}

.td-body h1,
.td-body h2,
.td-body h3,
.td-body h4 {
  color: var(--td-tinte);
  line-height: 1.22;
  margin: 0;
}

/* KEINE pauschale Linkfarbe auf .td-body a: dieser Selektor (0,1,1) schlägt
   jede einklassige Komponentenregel wie .td-mega-link (0,1,0) – die
   Navigationslinks wurden dadurch blau auf blauem Grund, also unsichtbar.
   Die Basis (assets/css/style.css) setzt a{color:inherit}, Farbe bestimmt
   daher der jeweilige Baustein; Fließtext-Links werden hier gezielt
   eingefärbt. */
.td-body .td-tab-inhalt a,
.td-body .td-pdp-lead a,
.td-body .td-hinweis a,
.td-body .td-warnung a,
.td-body .td-konto-fuss a,
.td-body .td-wk-meta a {
  color: var(--td-blau);
}

.td-seitenkopf {
  padding: clamp(18px, 3vw, 30px) 0 clamp(12px, 2vw, 18px);
}

.td-seitenkopf h1 {
  font-size: clamp(1.35rem, 1rem + 1.6vw, 2rem);
  letter-spacing: -.01em;
}

.td-seitenkopf p {
  margin: 8px 0 0;
  color: var(--td-tinte-70);
  max-width: 70ch;
  font-size: .96rem;
}

.td-brotkrumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: var(--td-tinte-45);
  padding: 14px 0 0;
}

.td-brotkrumen a {
  color: var(--td-tinte-45);
  text-decoration: none;
}

.td-brotkrumen a:hover {
  color: var(--td-blau);
  text-decoration: underline;
}

.td-brotkrumen span.trenner {
  opacity: .5;
}

/* --- 3  Kopfzeile ------------------------------------------ */
.td-servicebar {
  background: var(--td-blau-tief);
  color: rgba(255, 255, 255, .82);
  font-size: .78rem;
  line-height: 1;
}

.td-servicebar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 34px;
}

/* Ohne overflow: hidden – der Claim soll ganz dastehen und nicht mit
   drei Pünktchen enden. Unterhalb von 999 px wird er ohnehin
   ausgeblendet (siehe unten), dort wo der Platz wirklich knapp wird.
   text-overflow ist damit gegenstandslos und steht deshalb nicht mehr
   da: Es wirkt nur zusammen mit overflow: hidden. */
.td-servicebar-claim {
  white-space: nowrap;
}

.td-servicebar-links {
  display: flex;
  gap: 18px;
  white-space: nowrap;
}

.td-servicebar-links a {
  color: inherit;
  text-decoration: none;
}

.td-servicebar-links a:hover {
  color: #fff;
  text-decoration: underline;
}

.td-header {
  /* Auf dem PC bewusst NICHT sticky: Logo, Suche und Aktionen sollen ganz
     normal wegscrollen, nur die Nav-Leiste darunter (.td-mega) bleibt
     stehen. Auf schmalen Bildschirmen (Umschaltpunkt Desktop → Seitenmenü,
     siehe @media max-width:999px weiter unten) gibt es keine .td-mega,
     dort bleibt stattdessen der ganze Kopf mit Burger-Knopf sticky. */
  background: #fff;
  box-shadow: 0 1px 0 var(--td-linie);
}

.td-header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(10px, 2vw, 26px);
  min-height: var(--td-kopf-h);
  padding-top: 8px;
  padding-bottom: 8px;
  transition: min-height .18s ease;
}

.td-header-kompakt .td-header-inner {
  min-height: 56px;
}

.td-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--td-blau);
  min-width: 0;
}

.td-logo img {
  max-height: 46px;
  max-width: 190px;
  width: auto;
  object-fit: contain;
  display: block;
}

.td-header-kompakt .td-logo img {
  max-height: 38px;
}

.td-logo-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: var(--td-r-s);
  background: var(--td-blau);
  color: #fff;
  display: grid;
  place-items: center;
}

.td-logo-mark svg {
  width: 21px;
  height: 21px;
}

.td-logo-text {
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: -.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.td-suche {
  position: relative;
  display: flex;
  margin: 0;
  min-width: 0;
}

.td-suche input[type="search"] {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 1.5px solid var(--td-linie-stark);
  border-right: 0;
  border-radius: var(--td-r-s) 0 0 var(--td-r-s);
  padding: 0 14px;
  font-size: .93rem;
  background: #fff;
  color: var(--td-tinte);
  -webkit-appearance: none;
  appearance: none;
}

.td-suche input[type="search"]:focus {
  outline: none;
  border-color: var(--td-blau);
  box-shadow: 0 0 0 3px rgba(var(--td-blau-rgb), .13);
}

.td-suche button {
  height: 44px;
  width: 52px;
  flex: 0 0 52px;
  border: 0;
  cursor: pointer;
  border-radius: 0 var(--td-r-s) var(--td-r-s) 0;
  background: var(--td-blau);
  color: #fff;
  display: grid;
  place-items: center;
}

.td-suche button:hover {
  background: var(--td-blau-dunkel);
}

.td-suche button svg {
  width: 19px;
  height: 19px;
}

.td-aktionen {
  display: flex;
  align-items: center;
  gap: clamp(2px, 1vw, 10px);
}

.td-akt-wrap {
  position: relative;
}

.td-akt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: var(--td-r-s);
  color: var(--td-tinte);
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  position: relative;
}

.td-akt:hover {
  background: var(--td-blau-tint);
  color: var(--td-blau);
}

.td-akt svg {
  width: 22px;
  height: 22px;
}

.td-akt-text {
  white-space: nowrap;
}

.td-akt-suche {
  display: none;
}

.td-korb-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--td-messing);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.td-konto-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 290px;
  background: #fff;
  border: 1px solid var(--td-linie);
  border-radius: var(--td-r-m);
  box-shadow: var(--td-schatten);
  padding: 16px;
  display: none;
  z-index: 70;
}

.td-konto-panel.offen {
  display: block;
}

.td-konto-hallo {
  margin: 0 0 10px;
  font-size: .9rem;
  color: var(--td-tinte-70);
}

.td-konto-panel>a {
  display: block;
  padding: 9px 10px;
  border-radius: var(--td-r-s);
  color: var(--td-tinte);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
}

.td-konto-panel>a:hover {
  background: var(--td-blau-tint);
  color: var(--td-blau);
}

.td-konto-logout {
  color: var(--td-fehler) !important;
}

.td-konto-form label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--td-tinte-70);
  margin: 8px 0 4px;
}

.td-konto-form input {
  width: 100%;
  height: 40px;
  border: 1.5px solid var(--td-linie-stark);
  border-radius: var(--td-r-s);
  padding: 0 11px;
  font-size: .9rem;
  background: #fff;
}

.td-konto-form input:focus {
  outline: none;
  border-color: var(--td-blau);
  box-shadow: 0 0 0 3px rgba(var(--td-blau-rgb), .13);
}

.td-konto-form button {
  margin-top: 12px;
}

.td-konto-fuss {
  margin: 12px 0 0;
  font-size: .82rem;
  text-align: center;
  color: var(--td-tinte-70);
}

/* Login-Modal (ausgeloggter Zustand von #tdKontoBtn) – bewusst kein
   Dropdown wie das Konto-Menü, sondern ein zentrierter Dialog samt
   Abdunklung: ein Anmeldeformular verdient volle Aufmerksamkeit. */
.td-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.td-modal.offen {
  display: flex;
}

.td-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 24, 33, .48);
  backdrop-filter: blur(1px);
}

.td-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 380px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #fff;
  border-radius: var(--td-r-m);
  box-shadow: 0 20px 60px rgba(15, 24, 33, .3);
  padding: 24px;
}

.td-modal-schliessen {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  border-radius: var(--td-r-s);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--td-tinte-70);
  cursor: pointer;
}

.td-modal-schliessen:hover {
  background: var(--td-blau-tint);
  color: var(--td-blau);
}

body.td-modal-sperrt-scroll {
  overflow: hidden;
}

/* Login-Modal größer (Kundenwunsch): breiter, mehr Luft, größere Felder
   und Schrift. Nur #tdLoginModal – das Konto-Menü benutzt dieselben
   Formularklassen und bleibt kompakt. */
#tdLoginModal .td-modal-dialog {
  max-width: 480px;
  padding: 40px 40px 32px;
}

#tdLoginModal .td-modal-schliessen {
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  font-size: 1.7rem;
}

#tdLoginModal .td-konto-hallo {
  margin: 0 0 18px;
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--td-tinte);
}

#tdLoginModal .td-konto-form label {
  font-size: .95rem;
  margin: 16px 0 6px;
}

#tdLoginModal .td-konto-form input {
  height: 52px;
  padding: 0 14px;
  font-size: 1.05rem;
  border-radius: var(--td-r-m);
}

#tdLoginModal .td-konto-form button {
  margin-top: 24px;
  min-height: 54px;
  font-size: 1.05rem;
}

#tdLoginModal .td-konto-fuss {
  margin-top: 20px;
  font-size: 1rem;
}

@media (max-width: 575px) {
  #tdLoginModal .td-modal-dialog {
    padding: 32px 22px 24px;
  }
}

.td-burger {
  display: none;
  width: 42px;
  height: 42px;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--td-r-s);
  padding: 10px 9px;
  flex-direction: column;
  justify-content: space-between;
}

.td-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--td-blau);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}

.td-burger:hover {
  background: var(--td-blau-tint);
}

/* --- 4  Megamenü ------------------------------------------- */
.td-mega {
  /* Nur diese Leiste bleibt beim Scrollen oben kleben (siehe Kommentar bei
     .td-header). Unterhalb von 1000px ist sie ohnehin ausgeblendet
     (@media max-width:999px), die sticky-Positionierung ist dort also
     wirkungslos statt widersprüchlich. */
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--td-blau);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.td-mega-leiste {
  display: flex;
  align-items: stretch;
  gap: 2px;
  /* UMBRUCH STATT ABSCHNEIDEN: Die Leiste stand auf nowrap ohne jeden
     Überlauf-Umgang. Passten die Einträge nicht, lagen die letzten
     einfach außerhalb des Rahmens – unsichtbar UND unerreichbar, ohne
     jeden Hinweis. Nachgemessen bei 1024 px: Bedarf 1374 px, Rahmen
     983 px; "Spezialstempel", "Prägepressen" und "Zubehör" fielen
     heraus. Auch ein 1366-px-Laptop war betroffen (63 px zu wenig).

     Umbruch statt eines neuen Grenzwerts: Wie breit die Leiste sein
     muss, hängt davon ab, WIE VIELE Hauptkategorien es gibt – und die
     können jederzeit dazukommen. Eine feste Zahl wäre beim nächsten
     neuen Menüpunkt wieder falsch. So ordnet sich die Leiste selbst:
     eine Zeile, solange es passt, sonst zwei.

     Im Bereich 1000–1400 px soll es dazu gar nicht erst kommen: Dort
     sorgen fließende Schrift und Polster dafür, dass alles in EINE
     Zeile passt (siehe @media weiter unten, Kundenwunsch). Der Umbruch
     bleibt als Netz für den Fall, dass eine Hauptkategorie dazukommt –
     dann lieber zwei Zeilen als verschwundene Einträge. */
  flex-wrap: wrap;
}

.td-mega-item {
  position: static;
}

/* Home-Knopf ganz links: quadratisch. */
.td-mega-home {
  flex: 0 0 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin-right: 6px;
  color: #fff;
  border-bottom: 3px solid transparent;
  transition: background .15s ease;
}

.td-mega-home svg {
  width: 21px;
  height: 21px;
  margin-top: 3px;
}

.td-mega-home:hover,
.td-mega-home.aktiv {
  background: rgba(255, 255, 255, .1);
  border-bottom-color: var(--td-messing-hell);
}

.td-mega-home:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

.td-mega-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 46px;
  padding: 0 14px;
  color: rgba(255, 255, 255, .93);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 650;
  border-bottom: 3px solid transparent;
}

.td-mega-link:hover,
.td-mega-item.offen>.td-mega-link,
.td-mega-link.aktiv {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border-bottom-color: var(--td-messing-hell);
}

.td-mega-chevron {
  width: 11px;
  height: 11px;
  transition: transform .18s ease;
}

.td-mega-item.offen .td-mega-chevron {
  transform: rotate(180deg);
}

.td-mega-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  /* Nie höher als gut die Hälfte des Fensters: Vorher füllte das Panel mit
     dem quadratischen Kategoriebild fast den ganzen Bildschirm. Was darüber
     hinausgeht, scrollt im Panel. */
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  color: var(--td-tinte);
  border-top: 1px solid var(--td-linie);
  box-shadow: 0 18px 34px rgba(22, 33, 44, .16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 65;
}

.td-mega-item.offen .td-mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.td-mega-panel-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: clamp(18px, 2.4vw, 36px);
  padding: 16px 0 18px;
}

/* Spalten des Megamenüs.

   FLEX STATT GITTER, seit die Menüpunkte nicht mehr umbrechen dürfen
   (Kundenwunsch, siehe white-space: nowrap am Ende der Datei): Ein Gitter
   mit gleich breiten Spalten (vorher minmax(190px, 1fr)) zwingt jede
   Spalte auf dasselbe Maß. Ein langer Kategoriename – im Bestand etwa
   "Holzstempel rechteckig (ungerade Höhe)" mit 383 px – ragte damit in die
   Nachbarspalte, weil er nicht mehr umbrechen darf.

   Mit flex-wrap ist jede Spalte so breit wie ihr längster Eintrag und
   nicht breiter; passt eine Spalte nicht mehr in die Zeile, rutscht sie
   komplett in die nächste. Die Spalten sind dadurch unterschiedlich
   breit – das ist der Preis dafür, dass nichts umbricht und nichts
   überlappt. */
.td-mega-spalten {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 12px 28px;
}

.td-mega-spalte {
  /* Grundbreite = Inhalt, darf schrumpfen, aber nicht unter ein Maß, bei
     dem die Spalte als Spalte nicht mehr lesbar wäre. */
  flex: 0 1 auto;
  min-width: 165px;
  max-width: 100%;
}

/* Überschrift der Spalte = erste Unterkategorie. Seit dem Kundenwunsch
   "nicht mehr klickbar" ein <span> (siehe partials/kopf.php), deshalb kein
   Hover-Farbwechsel und ausdrücklich der normale Mauszeiger: Beides würde
   eine Klickmöglichkeit versprechen, die es nicht mehr gibt. */
.td-mega-titel {
  display: block;
  font-weight: 800;
  font-size: .93rem;
  color: var(--td-blau);
  cursor: default;
  padding-bottom: 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--td-linie);
}

.td-mega-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

/* Menüpunkte im Megamenü. Beim Überfahren KEINE Unterstreichung mehr,
   sondern eine graue Hinterlegung (Kundenwunsch).

   Damit die Fläche nicht bündig am Text klebt, bekommt jeder Eintrag
   etwas Innenabstand; der gleich große negative Außenabstand nimmt ihn
   im Layout wieder zurück, sodass die Einträge weiterhin bündig unter
   der Spaltenüberschrift stehen. */
.td-mega-liste a {
  display: block;
  padding: 3px 7px;
  margin: 0 -7px;
  border-radius: var(--td-r-s);
  font-size: .87rem;
  color: var(--td-tinte-70);
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
}

.td-mega-liste a:hover {
  color: var(--td-blau);
  background: var(--td-blau-tint);
  text-decoration: none;
}

/* 3. Unterebene: eingerückt unter ihrem Eintrag, etwas kleiner. */
.td-mega-liste-3 {
  list-style: none;
  margin: 1px 0 4px 2px;
  padding: 0 0 0 10px;
  border-left: 2px solid var(--td-linie);
  display: grid;
  gap: 0;
}

/* Dritte Ebene: links KEIN negativer Außenabstand – dort läuft die
   senkrechte Trennlinie der Liste, die graue Fläche würde sonst darüber
   hinausragen. */
.td-mega-liste .td-mega-liste-3 a {
  padding: 2px 7px;
  margin-left: 0;
  font-size: .8rem;
  color: var(--td-tinte-45, var(--td-tinte-70));
}

.td-mega-teaser {
  border-left: 1px solid var(--td-linie);
  padding-left: clamp(14px, 1.6vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Feste, quadratische Bildfläche: Ohne sie würde das Panel beim
   Bildwechsel (Hover über eine Unterkategorie) in der Höhe springen –
   und bei Kategorien ohne Bild klappte der Platz ganz zusammen. */
.td-mega-teaser-bild {
  width: 100%;
  /* Querformat statt Quadrat – das Bild bestimmte bisher die Panelhöhe. */
  aspect-ratio: 4 / 3;
  max-height: 150px;
  background: var(--td-blau-tint);
  border-radius: var(--td-r-m);
  overflow: hidden;
}

.td-mega-teaser-bild img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  display: block;
}

.td-mega-teaser-text strong {
  display: block;
  font-size: .98rem;
  margin-bottom: 4px;
}

.td-mega-teaser-text p {
  margin: 0 0 10px;
  font-size: .84rem;
  color: var(--td-tinte-70);
  line-height: 1.5;
}

.td-mega-teaser-btn {
  font-size: .86rem;
  font-weight: 700;
  color: var(--td-blau);
  text-decoration: none;
}

.td-mega-teaser-btn:hover {
  text-decoration: underline;
}

/* --- 5  Seitenmenü (Ebenen-Blättern) ----------------------- */
.td-mob-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 24, 33, .48);
  z-index: 90;
  backdrop-filter: blur(1px);
}

.td-mob-nav {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(400px, 88vw);
  background: #fff;
  z-index: 95;
  display: flex;
  flex-direction: column;
  transform: translateX(-102%);
  transition: transform .26s cubic-bezier(.32, .72, 0, 1);
  box-shadow: 0 0 40px rgba(15, 24, 33, .25);
  /* iOS: Notch/Home-Indikator aussparen */
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.td-mob-nav.offen {
  transform: translateX(0);
}

.td-mob-kopf {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 58px;
  flex: 0 0 58px;
  padding: 0 8px 0 6px;
  background: var(--td-blau);
  color: #fff;
}

.td-mob-zurueck,
.td-mob-schliessen {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 0;
  background: none;
  cursor: pointer;
  color: #fff;
  display: grid;
  place-items: center;
  border-radius: var(--td-r-s);
}

.td-mob-zurueck:hover,
.td-mob-schliessen:hover {
  background: rgba(255, 255, 255, .14);
}

/* display:grid oben würde das hidden-Attribut aushebeln (gleiche
   Spezifität, aber später notiert) – deshalb hier ausdrücklich: */
.td-mob-zurueck[hidden] {
  display: none;
}

.td-mob-zurueck svg,
.td-mob-schliessen svg {
  width: 22px;
  height: 22px;
}

.td-mob-titel {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 4px;
}

.td-mob-viewport {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.td-mob-pane {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .26s cubic-bezier(.32, .72, 0, 1), visibility .26s;
  padding-bottom: 20px;
}

/* Wurzelebene ist von Beginn an sichtbar */
.td-mob-pane:first-of-type {
  transform: translateX(0);
  visibility: visible;
}

.td-mob-pane.td-mob-pane-aktiv {
  transform: translateX(0);
  visibility: visible;
}

.td-mob-pane.td-mob-pane-weg {
  transform: translateX(-28%);
  visibility: visible;
}

.td-mob-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--td-linie);
  background: none;
  font: inherit;
  font-size: .96rem;
  font-weight: 600;
  color: var(--td-tinte);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.td-mob-zeile:active {
  background: var(--td-blau-tint);
}

.td-mob-zeile svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  color: var(--td-tinte-45);
}

.td-mob-fuss {
  flex: 0 0 auto;
  border-top: 1px solid var(--td-linie);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 12px;
  background: var(--td-blau-tint);
}

.td-mob-fuss-link {
  flex: 1 1 auto;
  text-align: center;
  padding: 10px 12px;
  border-radius: var(--td-r-s);
  background: #fff;
  border: 1px solid var(--td-linie);
  font-size: .84rem;
  font-weight: 700;
  color: var(--td-blau);
  text-decoration: none;
}

/* --- 6  Bausteine ------------------------------------------ */
.td-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border: 1.5px solid transparent;
  border-radius: var(--td-r-s);
  background: var(--td-blau);
  color: #fff;
  font: inherit;
  font-size: .94rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.td-btn:hover {
  background: var(--td-blau-dunkel);
  color: #fff;
}

.td-btn-voll {
  width: 100%;
}

.td-btn-gross {
  min-height: 54px;
  font-size: 1rem;
  padding: 0 28px;
}

.td-btn-klein {
  min-height: 38px;
  padding: 0 14px;
  font-size: .85rem;
}

.td-btn-rand {
  background: #fff;
  color: var(--td-blau);
  border-color: var(--td-linie-stark);
}

.td-btn-rand:hover {
  background: var(--td-blau-tint);
  color: var(--td-blau-dunkel);
  border-color: var(--td-blau);
}

.td-btn-hell {
  background: #fff;
  color: var(--td-blau);
}

.td-btn-hell:hover {
  background: var(--td-blau-tint);
  color: var(--td-blau-dunkel);
}

.td-btn-messing {
  background: var(--td-messing);
}

.td-btn-messing:hover {
  background: #9d6f27;
}

/* Roter Knopf, farbig ausgefüllt (Kundenwunsch: Startseiten-Slider-Knopf,
   siehe seiten/startseite/standard.php, .ts-folie-knopf). */
.td-btn-rot {
  background: rgb(170, 0, 0);
  color: #fff;
  border-color: rgb(170, 0, 0);
}

.td-btn-rot:hover {
  background: rgb(140, 0, 0);
  color: #fff;
}

.td-btn[disabled],
.td-btn[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
}

.td-karte {
  background: var(--td-flaeche);
  border: 1px solid var(--td-linie);
  border-radius: var(--td-r-m);
  box-shadow: var(--td-schatten-klein);
}

.td-karte-innen {
  padding: clamp(16px, 2.4vw, 26px);
}

.td-karte-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px clamp(16px, 2.4vw, 26px);
  border-bottom: 1px solid var(--td-linie);
}

.td-karte-kopf h2,
.td-karte-kopf h3 {
  font-size: 1.02rem;
}

.td-feld {
  display: block;
  margin-bottom: 14px;
}

.td-feld>label,
.td-label {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  color: var(--td-tinte-70);
  margin-bottom: 5px;
}

.td-body .td-feld input[type="text"],
.td-body .td-feld input[type="email"],
.td-body .td-feld input[type="tel"],
.td-body .td-feld input[type="password"],
.td-body .td-feld input[type="number"],
.td-body .td-feld input[type="search"],
.td-body .td-feld select,
.td-body .td-feld textarea {
  width: 100%;
  min-height: 46px;
  border: 1.5px solid var(--td-linie-stark);
  border-radius: var(--td-r-s);
  padding: 10px 12px;
  font: inherit;
  font-size: .94rem;
  background: #fff;
  color: var(--td-tinte);
}

.td-body .td-feld textarea {
  min-height: 110px;
  resize: vertical;
}

.td-body .td-feld input:focus,
.td-body .td-feld select:focus,
.td-body .td-feld textarea:focus {
  outline: none;
  border-color: var(--td-blau);
  box-shadow: 0 0 0 3px rgba(var(--td-blau-rgb), .13);
}

.td-feld-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0 14px;
}

.td-flash {
  margin: 16px 0 0;
  padding: 13px 16px;
  border-radius: var(--td-r-s);
  font-size: .92rem;
  font-weight: 600;
  border-left: 4px solid;
}

.td-flash-ok {
  background: var(--td-ok-tint);
  border-color: var(--td-ok);
  color: #12523a;
}

.td-flash-fehler {
  background: var(--td-fehler-tint);
  border-color: var(--td-fehler);
  color: #7d1a15;
}

.td-hinweis {
  background: var(--td-blau-tint);
  border-radius: var(--td-r-s);
  padding: 12px 14px;
  font-size: .88rem;
  color: var(--td-tinte-70);
}

.td-warnung {
  background: var(--td-warn-tint);
  border-left: 4px solid var(--td-warn);
  border-radius: var(--td-r-s);
  padding: 12px 14px;
  font-size: .88rem;
  color: #5c380a;
}

.td-leer {
  text-align: center;
  padding: clamp(34px, 6vw, 70px) 20px;
}

.td-leer h3 {
  font-size: 1.25rem;
  margin-bottom: 8px;
}

.td-leer p {
  color: var(--td-tinte-70);
  margin: 0 0 20px;
}

.td-schritte {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: clamp(16px, 3vw, 26px) 0;
}

.td-schritt {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--td-tinte-45);
  font-size: .88rem;
  font-weight: 700;
}

.td-schritt-num {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--td-linie);
  color: var(--td-tinte-70);
  font-size: .82rem;
}

.td-schritt.aktiv {
  color: var(--td-blau);
}

.td-schritt.aktiv .td-schritt-num {
  background: var(--td-blau);
  color: #fff;
}

.td-schritt.fertig .td-schritt-num {
  background: var(--td-ok);
  color: #fff;
}

.td-schritt-linie {
  flex: 1;
  height: 2px;
  background: var(--td-linie);
  border-radius: 2px;
}

/* --- 7a  Kategorie ----------------------------------------- */
.td-kat-kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--td-linie);
  margin-bottom: 18px;
}

.td-kat-anzahl {
  font-size: .86rem;
  color: var(--td-tinte-45);
  font-weight: 600;
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   Kategoriekacheln
   ------------------------------------------------------------------
   Dieselbe Optik wie der Block "Produktkategorien" auf der Startseite
   (dort .ts-katwahl-kachel, siehe seiten/startseite/standard.php):
   randloses Bild im Seitenverhältnis 4:3, darunter ein abgesetzter
   Namensbalken, der beim Überfahren blau wird.

   Die Kacheln werden an beiden Stellen aus demselben Markup gebaut –
   Kategorieseite (seiten/kategorie.php) und die Markenreihen der
   Startseite. Deshalb steht die Optik hier einmal und nicht zweimal.

   Flex statt Grid wegen der festen Spaltenzahl (--spalten) – linksbündig
   angeschlagen, damit die erste Kachel unter der Überschrift und dem
   Kurztext beginnt und nicht eingerückt danebensteht.

   Die Markenreihen der Startseite setzen das für sich auf "center"
   zurück (.ts-marke .td-unterkats in seiten/startseite/standard.php);
   dort stehen die Kacheln frei im Abschnitt statt an einer Textkante.
   ------------------------------------------------------------------ */
.td-unterkats {
  --spalten: 5;
  --abstand: clamp(12px, 1.6vw, 22px);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--abstand);
  margin-bottom: 26px;
}

.td-unterkats > .td-unterkat {
  flex: 0 0 calc((100% - (var(--spalten) - 1) * var(--abstand)) / var(--spalten));
  min-width: 0;
}

.td-unterkat {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--td-linie);
  border-radius: var(--td-r-m);
  text-decoration: none;
  color: var(--td-tinte);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.td-unterkat:hover {
  border-color: var(--td-blau);
  box-shadow: var(--td-schatten);
  transform: translateY(-3px);
}

.td-unterkat:hover .td-unterkat-name {
  background: var(--td-blau);
  color: #fff;
}

.td-unterkat-bild {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: clamp(10px, 1.4vw, 18px);
  color: var(--td-linie-stark);
}

.td-unterkat-bild img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.td-unterkat-platzhalter {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.td-unterkat-platzhalter svg {
  width: 34%;
  height: 34%;
}

/* margin-top: auto schiebt den Balken an den unteren Rand – sonst säße
   er bei einem zweizeiligen Namen woanders als bei einem einzeiligen,
   und die Balken einer Reihe stünden auf verschiedenen Höhen. */
.td-unterkat-name {
  margin-top: auto;
  padding: 11px 12px;
  text-align: center;
  font-weight: 650;
  font-size: .95rem;
  line-height: 1.3;
  background: var(--td-grund);
  border-top: 1px solid var(--td-linie);
  transition: background .15s ease, color .15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .td-unterkat { transition: none; }
  .td-unterkat:hover { transform: none; }
}

/* Spaltenzahl wie im Startseitenblock. Bewusst hier direkt und nicht
   unten im Sammelbereich für Bildschirmbreiten: Diese beiden Stufen
   gehören zur Kachel und wären dort drei Bildschirme weiter von ihr
   entfernt. Die engeren Stufen (640 px, 339 px) stehen dort. */
@media (max-width: 1200px) { .td-unterkats { --spalten: 4; } }
@media (max-width: 980px)  { .td-unterkats { --spalten: 3; } }

.td-werkzeugleiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--td-linie);
  border-radius: var(--td-r-m);
  padding: 10px 12px;
  margin-bottom: 18px;
}

/* flex:1 – ohne das behält das Formular seine schmale Inhaltsbreite und
   die beiden Auswahlfelder brechen um, obwohl daneben Platz frei ist
   (fällt vor allem im Querformat auf). */
.td-werkzeugleiste form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  flex: 1 1 auto;
}

.td-body .td-werkzeugleiste select {
  min-height: 40px;
  border: 1.5px solid var(--td-linie-stark);
  border-radius: var(--td-r-s);
  padding: 0 34px 0 12px;
  font: inherit;
  font-size: .88rem;
  background: #fff;
  color: var(--td-tinte);
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d5a67' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 15px;
}

.td-ansicht {
  display: flex;
  gap: 4px;
}

.td-ansicht-btn {
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--td-linie);
  border-radius: var(--td-r-s);
  background: #fff;
  color: var(--td-tinte-45);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.td-ansicht-btn svg {
  width: 17px;
  height: 17px;
}

.td-ansicht-btn.aktiv {
  border-color: var(--td-blau);
  background: var(--td-blau-tint);
  color: var(--td-blau);
}

.td-produkte {
  display: grid;
  gap: clamp(12px, 1.6vw, 20px);
}

.td-produkte[data-ansicht="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.td-produkte[data-ansicht="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.td-produkte[data-ansicht="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.td-produkte[data-ansicht="liste"] {
  grid-template-columns: minmax(0, 1fr);
}

.td-produkt {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--td-linie);
  border-radius: var(--td-r-m);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.td-produkt:hover {
  border-color: var(--td-blau-hell);
  box-shadow: var(--td-schatten);
  transform: translateY(-2px);
}

/* BILDFORMAT: Die Artikelbilder dieses Shops sind durchgehend QUADRATISCH.
   Alle Bildflächen im Theme sind deshalb 1:1, und die Bilder werden mit
   "contain" eingepasst statt mit "cover" beschnitten – bei quadratischer
   Quelle in quadratischem Rahmen ist beides deckungsgleich, aber ein
   ausnahmsweise doch abweichendes Bild wird so vollständig gezeigt statt
   angeschnitten. */
.td-produkt-bild {
  aspect-ratio: 1 / 1;
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.td-produkt-bild img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.td-produkt-platzhalter {
  font-size: .74rem;
  color: var(--td-tinte-45);
  padding: 10px;
  text-align: center;
}

.td-produkt-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.td-produkt-kat {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--td-tinte-45);
  font-weight: 700;
}

.td-produkt-name {
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.35;
}

.td-produkt-meta {
  font-size: .82rem;
  color: var(--td-tinte-70);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.td-produkt-preis-zeile {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.td-preis {
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--td-blau);
}

.td-preis-alt {
  font-size: .84rem;
  color: var(--td-tinte-45);
  text-decoration: line-through;
}

.td-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: var(--td-messing);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 40px;
  letter-spacing: .02em;
}

/* Listenansicht: Bild links, Text rechts */
.td-produkte[data-ansicht="liste"] .td-produkt {
  flex-direction: row;
}

/* auch in der Listenansicht quadratisch (nicht auf Zeilenhöhe gestreckt) */
.td-produkte[data-ansicht="liste"] .td-produkt-bild {
  width: 190px;
  flex: 0 0 190px;
  aspect-ratio: 1 / 1;
  align-self: flex-start;
}

.td-produkte[data-ansicht="liste"] .td-produkt-body {
  padding: 16px 18px;
}

.td-produkte[data-ansicht="liste"] .td-produkt-meta {
  -webkit-line-clamp: 3;
}

.td-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  padding: 28px 0 0;
}

.td-pager a {
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border-radius: var(--td-r-s);
  border: 1px solid var(--td-linie);
  background: #fff;
  color: var(--td-tinte);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 700;
  font-size: .9rem;
}

.td-pager a:hover {
  border-color: var(--td-blau);
  color: var(--td-blau);
}

.td-pager a.aktiv {
  background: var(--td-blau);
  border-color: var(--td-blau);
  color: #fff;
}

/* --- 7b  Artikeldetail ------------------------------------- */
.td-pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(20px, 3.4vw, 52px);
  align-items: start;
  padding-top: 14px;
}

.td-pdp-galerie {
  position: sticky;
  top: calc(var(--td-kopf-h) + 60px);
}

.td-pdp-hauptbild {
  background: #fff;
  border: 1px solid var(--td-linie);
  border-radius: var(--td-r-l);
  aspect-ratio: 1 / 1;
  /* quadratische Artikelbilder, siehe Hinweis oben */
  display: grid;
  place-items: center;
  overflow: hidden;
}

.td-pdp-hauptbild img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
  display: block;
}

.td-pdp-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.td-pdp-thumb {
  width: 78px;
  height: 78px;
  flex: 0 0 78px;
  border: 1.5px solid var(--td-linie);
  border-radius: var(--td-r-s);
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
}

.td-pdp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
}

.td-pdp-thumb.aktiv {
  border-color: var(--td-blau);
  box-shadow: 0 0 0 2px rgba(var(--td-blau-rgb), .16);
}

.td-pdp-kopf h1 {
  font-size: clamp(1.35rem, 1rem + 1.5vw, 2rem);
  margin-bottom: 8px;
}

.td-pdp-eyebrow {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 800;
  color: var(--td-messing);
}

.td-pdp-lead {
  color: var(--td-tinte-70);
  font-size: .95rem;
  line-height: 1.6;
  margin: 10px 0 16px;
}

.td-pdp-lead p {
  margin: 0 0 8px;
}

.td-pdp-preisblock {
  background: #fff;
  border: 1px solid var(--td-linie);
  border-radius: var(--td-r-m);
  padding: 16px 18px;
  margin-bottom: 16px;
}

.td-pdp-preis-zeile {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.td-pdp-preis {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 850;
  color: var(--td-blau);
  letter-spacing: -.02em;
}

.td-pdp-preis-note {
  font-size: .8rem;
  color: var(--td-tinte-45);
}

.td-pdp-lager {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--td-ok);
}

.td-pdp-lager.knapp {
  color: var(--td-warn);
}

.td-pdp-lager::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.td-staffel {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 14px;
  font-size: .87rem;
}

.td-staffel th,
.td-staffel td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--td-linie);
}

.td-staffel th {
  background: var(--td-blau-tint);
  font-weight: 700;
  color: var(--td-tinte-70);
}

.td-optionen {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.td-kaufleiste {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: stretch;
}

.td-menge {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid var(--td-linie-stark);
  border-radius: var(--td-r-s);
  overflow: hidden;
  background: #fff;
}

.td-menge button {
  width: 42px;
  border: 0;
  background: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--td-tinte-70);
}

.td-menge button:hover {
  background: var(--td-blau-tint);
  color: var(--td-blau);
}

.td-body .td-menge input {
  width: 54px;
  border: 0;
  text-align: center;
  font: inherit;
  font-weight: 700;
  min-height: 46px;
}

.td-body .td-menge input:focus {
  outline: none;
}

.td-pdp-usp {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.td-pdp-usp div {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: .87rem;
  color: var(--td-tinte-70);
}

.td-pdp-usp svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  color: var(--td-blau);
  margin-top: 1px;
}

.td-tabs {
  margin-top: clamp(28px, 4vw, 52px);
}

.td-tab-leiste {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 2px solid var(--td-linie);
}

.td-tab-btn {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 12px 16px;
  white-space: nowrap;
  font: inherit;
  font-size: .92rem;
  font-weight: 700;
  color: var(--td-tinte-45);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}

.td-tab-btn.aktiv {
  color: var(--td-blau);
  border-bottom-color: var(--td-blau);
}

.td-tab-inhalt {
  display: none;
  padding: 20px 0;
  font-size: .94rem;
  line-height: 1.65;
  color: var(--td-tinte-70);
}

.td-tab-inhalt.aktiv {
  display: block;
}

.td-tab-inhalt table {
  width: 100%;
  border-collapse: collapse;
}

.td-tab-inhalt th,
.td-tab-inhalt td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--td-linie);
}

/* --- 7c  Warenkorb ----------------------------------------- */
.td-wk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(16px, 2.4vw, 28px);
  align-items: start;
}

.td-wk-pos {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 16px clamp(14px, 2vw, 22px);
  border-bottom: 1px solid var(--td-linie);
}

.td-wk-pos:last-child {
  border-bottom: 0;
}

.td-wk-bild {
  width: 92px;
  height: 92px;
  border-radius: var(--td-r-s);
  background: var(--td-blau-tint);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.td-wk-bild img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.td-wk-titel {
  font-weight: 700;
  font-size: .96rem;
  color: var(--td-tinte);
  text-decoration: none;
  display: block;
  margin-bottom: 4px;
}

.td-wk-titel:hover {
  color: var(--td-blau);
}

.td-wk-meta {
  font-size: .82rem;
  color: var(--td-tinte-70);
  line-height: 1.55;
}

.td-wk-meta a {
  font-weight: 700;
}

.td-wk-rechts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.td-wk-summe {
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--td-blau);
  white-space: nowrap;
}

.td-wk-einzel {
  font-size: .78rem;
  color: var(--td-tinte-45);
  white-space: nowrap;
}

.td-wk-loeschen {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--td-tinte-45);
  padding: 4px;
  border-radius: var(--td-r-s);
}

.td-wk-loeschen:hover {
  color: var(--td-fehler);
  background: var(--td-fehler-tint);
}

.td-wk-loeschen svg {
  width: 18px;
  height: 18px;
}

.td-summe-karte {
  position: sticky;
  top: calc(var(--td-kopf-h) + 16px);
}

.td-summe-zeile {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: .92rem;
  color: var(--td-tinte-70);
}

.td-summe-gesamt {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 2px solid var(--td-linie);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--td-tinte);
}

.td-summe-gesamt span:last-child {
  font-size: 1.32rem;
  color: var(--td-blau);
}

.td-xsell {
  margin-top: clamp(28px, 4vw, 48px);
}

.td-xsell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}

/* --- 7d  Konto --------------------------------------------- */
.td-konto {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 30px);
  align-items: start;
}

.td-konto-menu {
  display: grid;
  gap: 3px;
  background: #fff;
  border: 1px solid var(--td-linie);
  border-radius: var(--td-r-m);
  padding: 8px;
}

.td-konto-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: var(--td-r-s);
  color: var(--td-tinte);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 650;
}

.td-konto-menu a:hover {
  background: var(--td-blau-tint);
  color: var(--td-blau);
}

.td-konto-menu a.aktiv {
  background: var(--td-blau);
  color: #fff;
}

.td-konto-menu svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

/* Downloadbereich (Migration 171): je Zeile eine Datei, die ganze Zeile ist
   der Link – auf dem Telefon trifft man sonst nur den Titel. */
.td-downloads {
  list-style: none;
  margin: 0;
  padding: 0;
}

.td-downloads li + li {
  border-top: 1px solid var(--td-linie);
}

.td-downloads a {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  color: var(--td-tinte);
  text-decoration: none;
}

.td-downloads a:hover {
  background: var(--td-blau-tint);
}

.td-downloads svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin-top: 2px;
  color: var(--td-blau);
}

.td-downloads strong {
  display: block;
  font-weight: 700;
}

.td-downloads em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: .82rem;
  color: var(--td-tinte-schwach, #6b7785);
}

.td-downloads-text {
  display: block;
  margin-top: 6px;
  font-size: .9rem;
  color: var(--td-tinte-schwach, #6b7785);
}

.td-bestellung {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 14px clamp(14px, 2vw, 20px);
  border-bottom: 1px solid var(--td-linie);
}

.td-bestellung:last-child {
  border-bottom: 0;
}

.td-bestellung-nr {
  font-weight: 800;
  font-size: .95rem;
}

.td-bestellung-meta {
  font-size: .82rem;
  color: var(--td-tinte-45);
  margin-top: 2px;
}

.td-status {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 40px;
  font-size: .76rem;
  font-weight: 800;
  white-space: nowrap;
}

.td-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.td-kachel {
  background: #fff;
  border: 1px solid var(--td-linie);
  border-radius: var(--td-r-m);
  padding: 16px;
}

.td-kachel strong {
  display: block;
  font-size: 1.5rem;
  color: var(--td-blau);
}

.td-kachel span {
  font-size: .82rem;
  color: var(--td-tinte-45);
  font-weight: 600;
}

/* --- 7e  Checkout ------------------------------------------ */
.td-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(16px, 2.4vw, 28px);
  align-items: start;
}

.td-co-block {
  background: #fff;
  border: 1px solid var(--td-linie);
  border-radius: var(--td-r-m);
  margin-bottom: 16px;
  overflow: hidden;
}

.td-co-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px clamp(14px, 2vw, 22px);
  border-bottom: 1px solid var(--td-linie);
}

.td-co-nr {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  background: var(--td-blau);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .84rem;
  font-weight: 800;
}

.td-co-kopf h3 {
  font-size: 1rem;
  flex: 1;
}

.td-co-body {
  padding: clamp(14px, 2vw, 22px);
}

.td-co-adresse {
  font-size: .93rem;
  line-height: 1.6;
  color: var(--td-tinte-70);
}

.td-co-adresse strong {
  color: var(--td-tinte);
}

.td-wahl {
  display: grid;
  gap: 10px;
}

.td-wahl-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 15px;
  cursor: pointer;
  border: 1.5px solid var(--td-linie);
  border-radius: var(--td-r-s);
  background: #fff;
}

.td-wahl-option:hover {
  border-color: var(--td-blau-hell);
}

.td-wahl-option input {
  margin-top: 3px;
  accent-color: var(--td-blau);
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.td-wahl-option.gewaehlt {
  border-color: var(--td-blau);
  background: var(--td-blau-tint);
  box-shadow: 0 0 0 1px var(--td-blau);
}

.td-wahl-titel {
  font-weight: 700;
  font-size: .93rem;
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}

.td-wahl-text {
  font-size: .82rem;
  color: var(--td-tinte-70);
  margin-top: 3px;
  line-height: 1.5;
}

.td-wahl-preis {
  margin-left: auto;
  font-weight: 800;
  color: var(--td-blau);
  white-space: nowrap;
}

.td-wahl-bild {
  max-height: 26px;
  max-width: 62px;
  object-fit: contain;
}

.td-co-mini {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.td-co-mini-pos {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  font-size: .86rem;
}

.td-co-mini-bild {
  width: 46px;
  height: 46px;
  border-radius: var(--td-r-s);
  background: var(--td-blau-tint);
  overflow: hidden;
}

.td-co-mini-bild img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.td-co-mini-name {
  font-weight: 650;
  line-height: 1.35;
}

.td-co-mini-menge {
  color: var(--td-tinte-45);
  font-size: .78rem;
}

/* --- 8  Fußzeile & Drawer ---------------------------------- */
.td-footer {
  background: var(--td-blau-tief);
  color: rgba(255, 255, 255, .78);
  margin-top: clamp(36px, 6vw, 76px);
}

.td-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(30px, 4vw, 54px) clamp(14px, 3vw, 32px);
}

.td-footer-marke strong {
  color: #fff;
  font-size: 1.1rem;
  display: block;
  margin-bottom: 8px;
}

.td-footer-marke p {
  margin: 0 0 14px;
  font-size: .88rem;
  line-height: 1.6;
}

.td-footer-spalte h4 {
  color: #fff;
  font-size: .92rem;
  margin-bottom: 12px;
}

.td-footer-spalte ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.td-footer-spalte a {
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  font-size: .87rem;
}

.td-footer-spalte a:hover {
  color: #fff;
  text-decoration: underline;
}

.td-footer-widerruf {
  background: rgba(255, 255, 255, .07);
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.td-footer-widerruf-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px clamp(14px, 3vw, 32px);
  text-align: center;
}

.td-footer-widerruf-inner span {
  font-size: .88rem;
}

.td-footer-unten {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 14px 0;
  font-size: .8rem;
  text-align: center;
  color: rgba(255, 255, 255, .55);
}

/* Warenkorb-Drawer (Mechanik aus assets/js/shop.js, Optik hier) */
.td-body .cart-drawer.td-drawer {
  background: #fff;
}

.td-body .td-drawer-kopf {
  background: var(--td-blau);
  color: #fff;
  border-bottom: 0;
}

.td-body .td-drawer-kopf h3 {
  color: #fff;
}

.td-body .td-drawer-close {
  color: #fff;
}

/* --- 9  Responsive ------------------------------------------ */

/* Große Desktops: mehr Luft, Megamenü-Teaser breiter */
@media (min-width: 1500px) {
  .td-mega-panel-inner {
    grid-template-columns: minmax(0, 1fr) 260px;
  }
}

/* Kompakter Desktop: Suche schmaler, Aktionstexte weg */
@media (max-width: 1200px) {
  .td-akt-text {
    display: none;
  }

  .td-akt {
    padding: 8px;
  }
}

/* ---- Umschaltpunkt Desktop → Seitenmenü ---- */
@media (max-width: 999px) {
  .td-mega {
    display: none;
  }

  /* Hier gibt es keine separate Nav-Leiste zum Ankleben (die steckt im
     Seitenmenü hinter dem Burger-Knopf) – deshalb bleibt hier der ganze
     Kopf mit Logo, Suche und Aktionen sticky, statt (wie beim PC) nur die
     Nav-Leiste. */
  .td-header {
    position: sticky;
    top: 0;
    z-index: 60;
  }

  /* Logo beim Scrollen nicht verkleinern (anders als am PC, siehe
     .td-header-kompakt .td-logo img weiter oben). */
  .td-header-kompakt .td-logo img {
    max-height: 46px;
  }

  .td-burger {
    display: flex;
  }

  .td-servicebar-claim {
    display: none;
  }

  .td-servicebar-links {
    margin: 0 auto;
    gap: 14px;
  }

  /* ZWEI ZEILEN statt einer (wie im Standard-Theme, siehe Stempel-Ecke).
     Vorher standen Burger, Logo und vier Aktionsknöpfe nebeneinander. Für
     das Logo blieb dabei nur die Restbreite – bei 375 px Breite rund
     107 px. Da .td-logo img aber bis 190 px breit werden darf und mittig
     sitzt, ragte das Bild auf BEIDEN Seiten aus seiner Spalte heraus und
     lag über dem Burger-Knopf und dem Lupensymbol. Aufgefallen bei
     Stempel-Partner, das dasselbe Theme fährt.

     Jetzt bekommt das Logo die erste Zeile für sich (nur die Aktionen
     daneben) und Burger + Suchfeld rücken in die zweite. Das Logo hat
     damit rund die doppelte Breite, und die Suche steht dauerhaft da,
     statt erst über die Lupe aufzufahren. */
  .td-header-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "logo   logo  aktionen"
      "burger suche suche";
    row-gap: 8px;
  }

  .td-burger {
    grid-area: burger;
  }

  .td-logo {
    grid-area: logo;
    justify-content: flex-start;
  }

  /* Deckel gegen genau den Überstand von oben: nie breiter als die eigene
     Spalte, auch auf sehr schmalen Geräten (320 px), wo die 190 px aus der
     Grundregel wieder nicht hineinpassen würden. */
  .td-logo img {
    max-width: min(190px, 100%);
  }

  .td-aktionen {
    grid-area: aktionen;
  }

  /* Die Lupe hat ausgedient: Das Suchfeld steht jetzt dauerhaft in der
     zweiten Zeile. Der Knopf bleibt im Markup (siehe partials/kopf.php,
     #tdSucheBtn) – sein Umschalter in assets/js/theme.js läuft damit ins
     Leere, was nichts kaputt macht. Ohne ihn gewinnt die erste Zeile
     zusätzlich die Breite eines Knopfes fürs Logo. */
  .td-akt-suche {
    display: none;
  }

  .td-suche {
    grid-area: suche;
    display: flex;
  }

  .td-produkte[data-ansicht="4"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .td-pdp {
    grid-template-columns: minmax(0, 1fr);
  }

  .td-pdp-galerie {
    position: static;
  }

  .td-wk,
  .td-checkout {
    grid-template-columns: minmax(0, 1fr);
  }

  .td-summe-karte {
    position: static;
  }

  .td-konto {
    grid-template-columns: minmax(0, 1fr);
  }

  .td-konto-menu {
    display: flex;
    flex-wrap: wrap;
  }

  .td-konto-menu a {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* Tablet hoch / große Handys quer */
@media (max-width: 820px) {

  .td-produkte[data-ansicht="4"],
  .td-produkte[data-ansicht="3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .td-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .td-wk-pos {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .td-wk-bild {
    width: 72px;
    height: 72px;
  }

  .td-wk-rechts {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .td-bestellung {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .td-bestellung .td-btn {
    grid-column: 1 / -1;
  }
}

/* Handy hoch */
@media (max-width: 640px) {
  :root {
    --td-kopf-h: 58px;
  }

  .td-servicebar {
    display: none;
  }

  .td-produkte[data-ansicht="4"],
  .td-produkte[data-ansicht="3"],
  .td-produkte[data-ansicht="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .td-produkte[data-ansicht="liste"] .td-produkt-bild {
    width: 108px;
    flex: 0 0 108px;
  }

  .td-produkt-body {
    padding: 10px 11px 12px;
  }

  .td-produkt-name {
    font-size: .89rem;
  }

  .td-produkt-meta {
    display: none;
  }

  .td-preis {
    font-size: 1rem;
  }

  .td-unterkats {
    --spalten: 2;
  }

  .td-footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .td-werkzeugleiste {
    padding: 8px;
  }

  .td-werkzeugleiste form {
    flex: 1;
  }

  .td-body .td-werkzeugleiste select {
    flex: 1 1 140px;
  }

  .td-ansicht {
    display: none;
  }

  /* auf dem Handy entscheidet die Breite */
  .td-schritt-label {
    display: none;
  }

  .td-schritt {
    gap: 0;
  }

  .td-tab-btn {
    padding: 11px 12px;
    font-size: .87rem;
  }

  .td-karte-innen {
    padding: 14px;
  }

  .td-co-body {
    padding: 14px;
  }
}

/* Sehr schmale Geräte. Bewusst erst ab 340 px und nicht schon bei 380:
   Ein iPhone SE/13 mini (375 px) bekäme sonst eine einspaltige Liste mit
   sehr großen Kacheln – zwei Spalten sind dort noch gut lesbar und
   entsprechen dem, was Kunden von Shops kennen. */
@media (max-width: 339px) {

  .td-produkte[data-ansicht="4"],
  .td-produkte[data-ansicht="3"],
  .td-produkte[data-ansicht="2"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .td-unterkats {
    /* Zwei statt eine Spalte: eine einzelne Kachel über die ganze
       Breite wirkt auf sehr schmalen Geräten überdimensioniert. */
    --spalten: 2;
  }

  .td-logo-text {
    font-size: .96rem;
  }

  .td-kaufleiste {
    flex-direction: column;
    align-items: stretch;
  }

  .td-menge {
    align-self: flex-start;
  }
}

/* ---- QUERFORMAT ----
   Handys im Querformat haben oft nur 320–420 px HÖHE. Dort kostet jede
   feste Höhe echten Inhalt: Kopfzeile, Menükopf und Abstände schrumpfen,
   das Seitenmenü wird breiter (die Breite ist im Querformat reichlich
   vorhanden) und bleibt in sich scrollbar. */
@media (orientation: landscape) and (max-height: 520px) {
  :root {
    --td-kopf-h: 50px;
  }

  .td-servicebar {
    display: none;
  }

  .td-header-inner {
    min-height: 50px;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .td-logo img {
    max-height: 34px;
  }

  .td-logo-mark {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .td-suche input[type="search"],
  .td-suche button {
    height: 38px;
  }

  .td-akt {
    padding: 6px 8px;
  }

  .td-akt svg {
    width: 20px;
    height: 20px;
  }

  .td-mob-nav {
    width: min(460px, 62vw);
  }

  .td-mob-kopf {
    height: 46px;
    flex-basis: 46px;
  }

  .td-mob-zeile {
    min-height: 42px;
    padding: 8px 14px;
    font-size: .9rem;
  }

  .td-mob-fuss {
    padding: 6px 8px;
  }

  .td-mob-fuss-link {
    padding: 7px 10px;
    font-size: .8rem;
  }

  .td-seitenkopf {
    padding: 12px 0 8px;
  }

  .td-schritte {
    padding: 10px 0;
  }

  .td-pdp {
    gap: 20px;
  }

  /* Das Artikelbild bleibt quadratisch – im Querformat wird stattdessen
     die Galeriespalte über die Bildschirmhöhe begrenzt, sonst füllte ein
     volles Quadrat bei 375 px Höhe die ganze Ansicht. */
  .td-pdp-galerie {
    max-width: 62vh;
    margin-inline: auto;
  }

  .td-pdp-thumb {
    width: 60px;
    height: 60px;
    flex-basis: 60px;
  }

  .td-main {
    padding-bottom: 28px;
  }
}

/* Tablet quer: Megamenü bleibt, aber kompakter (kein Hover auf Touch –
   das JS öffnet dort per Tipp, siehe assets/js/theme.js) */
/* Schmalere Menüpunkte, solange die Leiste knapp wird.

   BIS 1400 STATT BIS 1200, UND OHNE "landscape": Die Leiste braucht mit
   neun Hauptkategorien rund 1375 px. Erst ab etwa 1400 px Fensterbreite
   ist der Rahmen groß genug – die alte Grenze bei 1200 ließ also genau
   die Breiten dazwischen (1366-px-Laptops, Tablets quer) im zu weiten
   Zustand und damit im Überlauf. Die Einschränkung auf "landscape" hat
   Tablets im Hochformat zusätzlich ausgenommen, obwohl es dort noch
   enger ist.

   Mit diesen Werten passt ein 1366-px-Laptop wieder in EINE Zeile; wo es
   trotzdem nicht reicht (Tablet quer), bricht die Leiste um, statt
   Einträge abzuschneiden (siehe flex-wrap bei .td-mega-leiste). */
@media (min-width: 1000px) and (max-width: 1400px) {
  /* EINE ZEILE BIS GANZ HINUNTER (Kundenwunsch: zweizeilig gefällt
     nicht). Die Werte sind nicht geschätzt, sondern an der echten Leiste
     mit ihren zehn Einträgen gemessen; bei 1000 px Fensterbreite braucht
     sie exakt die verfügbaren 960 px.

     Fließend statt in Stufen: So wächst die Schrift von 11,2 px bei
     1000 px Fensterbreite auf 14 px ab 1400 px, ohne dass es irgendwo
     springt. Eine feste Stufe hätte je nach Breite entweder zu viel
     Platz verschenkt oder nicht gereicht. */
  .td-mega-leiste {
    /* Abstand und Rahmenpolster gehören hier zu den Stellschrauben: Die
       2 px zwischen zehn Einträgen und das breite Außenpolster waren
       zusammen rund 80 px – mehr als die Schrift an dieser Stelle
       überhaupt hergibt. */
    gap: 0;
    padding-left: clamp(10px, 1.2vw, 31px);
    padding-right: clamp(10px, 1.2vw, 31px);
  }

  /* ZWEI KLASSEN, NICHT EINE: Weiter unten in dieser Datei steht im
     Typografie-Block noch einmal ".td-mega-link" mit fester Größe
     (.85rem) und Polster. Diese Regel steht SPÄTER und hätte bei
     gleicher Spezifität gewonnen – die Leiste blieb dann trotz
     @media zweizeilig. Mit ".td-mega-leiste .td-mega-link" (0,2,0)
     greift hier die engere Regel. */
  .td-mega-leiste .td-mega-link {
    padding: 0 clamp(4px, .7vw, 11px);
    font-size: clamp(.70rem, .92vw, .88rem);
    /* Versalien mit Sperrung bauen breit; etwas weniger Laufweite
       bringt auf zehn Einträge noch einmal gut 20 px. */
    letter-spacing: .03em;
  }

  /* Die Pfeile waren der größte einzelne Hebel: 11 px Symbol plus 6 px
     Abstand an jedem Eintrag mit Untermenü, zusammen rund 136 px. Ohne
     sie passt die Leiste in eine Zeile, mit ihnen nicht. Die Untermenüs
     öffnen unverändert beim Überfahren; ab 1400 px sind die Pfeile
     wieder da. */
  .td-mega-chevron {
    display: none;
  }

  .td-mega-home {
    flex: 0 0 36px;
    margin-right: 2px;
  }

  .td-mega-panel-inner {
    padding: 14px 0 16px;
  }

  .td-mega-spalten {
    gap: 10px 22px;
  }

  .td-mega-spalte {
    min-width: 145px;
  }
}

/* Zeigegerät ohne Hover (Touch): größere Trefferflächen */
@media (hover: none) {
  .td-mega-link {
    padding: 0 16px;
  }

  .td-mob-zeile {
    min-height: 54px;
  }

  .td-pager a {
    min-width: 46px;
    height: 46px;
  }
}

/* Weniger Bewegung, wenn das System es wünscht */
@media (prefers-reduced-motion: reduce) {

  .td-mob-nav,
  .td-mob-pane,
  .td-mega-panel,
  .td-produkt {
    transition: none !important;
  }
}

/* Druckansicht: Navigation, Fußzeile und Drawer raus */
@media print {

  .td-servicebar,
  .td-header,
  .td-mob-nav,
  .td-mob-backdrop,
  .td-footer,
  .td-drawer,
  .td-drawer-overlay {
    display: none !important;
  }

  .td-body {
    background: #fff;
  }
}

/* Kaufwege (seiten/artikel.php): zwei oder drei gleich breite Knöpfe in
   einer Reihe – Datei hochladen, Vorlage wählen, Online gestalten. Ohne
   "oder" dazwischen, damit auch drei in die Artikelspalte passen. */
.kaufwege.kaufwege-2,
.kaufwege.kaufwege-3 {
  flex-wrap: nowrap;
  gap: 10px;
}

.kaufwege-2 > .kaufweg,
.kaufwege-3 > .kaufweg {
  flex: 1 1 0;
}

.kaufwege-3 > .kaufweg > a {
  padding-left: 8px;
  padding-right: 8px;
  gap: 6px;
  white-space: nowrap;
}

/* Handy: untereinander. */
@media (max-width: 560px) {
  .kaufwege.kaufwege-3 {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Enge Artikelspalte (kleine Laptops): Die drei Beschriftungen passen nur
   ohne Symbol – sonst drückt der Text das Symbol auf null Breite zusammen. */
@media (min-width: 1000px) and (max-width: 1260px) {
  .kaufwege-3 > .kaufweg > a svg {
    display: none;
  }
}

/* Gehäuse- und Abdruckfarbe als Bildkacheln (seiten/artikel.php). Die
   zugehörige Auswahlliste bleibt als Wertträger unsichtbar im Formular. */
.td-kachel-liste {
  /* !important: Die allgemeinen Formularregeln geben Listen volle Breite –
     unsichtbar, aber 375 px breit, schob sie die Seite am Handy seitlich. */
  position: absolute !important;
  left: 0;
  width: 1px !important;
  min-width: 0 !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.td-feld:has(> .td-kachel-liste) {
  position: relative;
}

.td-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
  padding: 2px;
  border-radius: var(--td-r-m);
}

.td-kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  font: inherit;
  color: var(--td-tinte-70);
  background: none;
  border: 0;
  cursor: pointer;
}

.td-kachel-bild {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 8%;
  background: #fff;
  border: 1.5px solid var(--td-linie-stark);
  border-radius: var(--td-r-s);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.td-kachel-bild img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.td-kachel-bild svg {
  width: 88%;
  height: auto;
}

.td-kachel-farbe {
  width: 70%;
  height: 70%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

.td-kachel-name {
  font-size: .8rem;
  line-height: 1.25;
  text-align: center;
}

.td-kachel-aufpreis {
  font-size: .72rem;
  color: var(--td-tinte-45);
}

.td-kachel:hover .td-kachel-bild {
  border-color: var(--td-blau);
}

.td-kachel:focus-visible {
  outline: none;
}

.td-kachel:focus-visible .td-kachel-bild {
  box-shadow: 0 0 0 3px rgba(168, 18, 18, .25);
}

.td-kachel.aktiv .td-kachel-bild {
  border: 3px solid var(--td-blau);
  padding: calc(8% - 1.5px);
}

.td-kachel.aktiv .td-kachel-name {
  color: var(--td-tinte);
  font-weight: 700;
}

.td-kachel:disabled {
  cursor: not-allowed;
  opacity: .4;
}

.td-kachel:disabled .td-kachel-name {
  text-decoration: line-through;
}

/* Beim Öffnen des Gestalters ohne Auswahl */
.td-kacheln.fehlt {
  box-shadow: 0 0 0 2px var(--td-fehler);
}

.td-kacheln.fehlt::after {
  content: "Bitte wählen";
  grid-column: 1 / -1;
  font-size: .8rem;
  font-weight: 700;
  color: var(--td-fehler);
}

@media (max-width: 560px) {
  .td-kacheln {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
  }
}

/* Kaufweg "Datei hochladen" (seiten/artikel.php): blau mit weißer Schrift. */
.td-btn-upload {
  background: #385676;
  border-color: #385676;
  color: #fff;
}

.td-btn-upload:hover,
.td-btn-upload:focus-visible {
  background: #2a4159;
  border-color: #2a4159;
  color: #fff;
}

/* Kurzbeschreibung: Aus Word o. Ä. eingefügte Texte bringen weiße
   Hintergründe an <span> mit – auf dem grauen Seitengrund sahen sie aus wie
   aufgeklebte Zettel. Hintergrund dort grundsätzlich weg. */
.td-pdp-lead span,
.td-pdp-lead p {
  background: none !important;
}

/* Herstellerlogo im Artikelkopf (seiten/artikel.php), an der Stelle der
   früheren Kategorie-Zeile. */
.td-pdp-hersteller {
  display: block;
  width: 200px;
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}

@media (max-width: 999px) {
  .td-pdp-hersteller {
    width: 140px;
  }
}

/* "zzgl. Versand" neben dem Preis verlinkt auf Versand & Zahlung. */
.td-pdp-versand-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.td-pdp-versand-link:hover {
  color: var(--td-blau);
}

/* Infofenster (z. B. Versand & Zahlung auf der Artikelseite). Der Klick-
   bereich des <dialog> ist der Rahmen selbst – der Inhalt liegt in einer
   inneren Fläche, damit ein Klick daneben (Hintergrund) schließen kann. */
.td-infofenster {
  width: min(720px, calc(100vw - 32px));
  max-height: min(80vh, 760px);
  padding: 0;
  border: 0;
  border-radius: var(--td-r-l);
  background: #fff;
  color: var(--td-tinte);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  overflow: hidden;
}

.td-infofenster[open] {
  display: flex;
  flex-direction: column;
}

.td-infofenster::backdrop {
  background: rgba(22, 33, 44, .55);
}

.td-infofenster-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--td-linie);
}

.td-infofenster-kopf h2 {
  margin: 0;
  font-size: 1.2rem;
}

.td-infofenster-zu {
  flex: 0 0 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  /* Grundton, nicht --td-grund: Der Knopf sitzt auf der weißen Fläche des
     Fensters und wäre in Weiß unsichtbar. */
  background: var(--td-grund-ton);
  color: var(--td-tinte);
  cursor: pointer;
}

.td-infofenster-zu:hover {
  background: var(--td-blau-tint);
  color: var(--td-blau);
}

.td-infofenster-zu svg {
  width: 18px;
  height: 18px;
}

.td-infofenster-inhalt {
  padding: 8px 20px 20px;
  overflow-y: auto;
  line-height: 1.6;
  font-size: .95rem;
}

.td-infofenster-inhalt h3 {
  margin: 18px 0 6px;
  font-size: 1.02rem;
}

.td-infofenster-inhalt span,
.td-infofenster-inhalt p {
  background: none !important;
}

/* Im Editor gepflegte Rechtstexte bestehen oft aus Absätzen mit
   Leerabsätzen (<p><br></p>) dazwischen – im Fenster ergäbe das riesige
   Lücken. Leerabsätze ausblenden, Absätze enger setzen. */
.td-infofenster-inhalt p {
  margin: 0 0 .7em;
}

.td-infofenster-inhalt p:has(> br:only-child) {
  display: none;
}

.td-infofenster-inhalt strong,
.td-infofenster-inhalt u {
  background: none !important;
}

/* ===================================================================
   Schriftbild der Navigation
   ===================================================================
   Kundenwunsch, in drei Schritten gewachsen: Großbuchstaben auf allen
   Ebenen, dann eine etwas größere Schrift im Megamenü, dann keine
   Zeilenumbrüche mehr in den Menüpunkten.

   Bewusst als EIN Block am Ende der Datei statt verteilt in die
   Komponentenregeln: So steht das gesamte Schriftbild der Navigation an
   einer Stelle und lässt sich in einem Stück ändern oder zurücknehmen.

   Versalien brauchen mehr Laufweite als Gemischtschreibung, sonst kleben
   die Buchstaben aneinander – deshalb je Ebene ein kleiner
   Buchstabenabstand. In der blauen Leiste dafür etwas weniger
   Innenabstand je Punkt, weil Großbuchstaben spürbar breiter bauen und
   die Leiste bei sechs Hauptkategorien sonst überliefe.
   =================================================================== */

/* Hauptleiste (Desktop ab 1000 px) */
.td-mega-link {
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .85rem;
  padding: 0 11px;
  white-space: nowrap;
}

/* Megamenü: Spaltenüberschriften und ihre Linklisten.

   white-space: nowrap – jeder Menüpunkt bleibt auf einer Zeile
   (Kundenwunsch). Damit das trägt, sind die Spalten unten breiter
   gestellt; ein Kategoriename, der auch dafür zu lang ist, ragt sonst in
   die Nachbarspalte. */
/* Zeilenhöhe 1,125rem = 18px bei Standardeinstellung.
   ------------------------------------------------------------------
   WOHER DER WERT KOMMT: Ausgangspunkt war die Zeilenhöhe von
   easystempel.de (25 px) – deren Menü wirkt großzügiger, obwohl die
   Buchstaben dort KLEINER sind als unsere (Versalhöhe 9 gegen 10-11 px);
   den Eindruck macht allein die Luft zwischen den Zeilen. 25 px waren
   dem Kunden zu viel, 22 px immer noch – daher jetzt 18 px. Das liegt
   unter den 19-20 px, die sich vorher allein aus der Schriftgröße
   ergaben, und ist bewusst knapp: Weil im Megamenü nichts umbricht
   (white-space: nowrap weiter unten), wirkt die enge Zeile nur auf den
   Abstand ZWISCHEN den Punkten, nicht auf die Lesbarkeit einer Zeile.

   WARUM rem UND NICHT px: Wer im Browser eine größere Standardschrift
   einstellt, bekommt bei uns größere Menüschrift – unsere Größen stehen
   in rem. Eine feste Pixelzeile würde dabei nicht mitwachsen, und der
   Text käme in einer zu engen Zeile zu stehen. rem hängt an derselben
   Wurzelgröße wie die Schrift und wächst deshalb mit.

   WARUM EIN GEMEINSAMER WERT UND KEIN FAKTOR JE EBENE: So sitzen alle
   drei Ebenen trotz unterschiedlicher Schriftgrößen auf einem Raster. */
.td-mega-titel {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .95rem;
  line-height: 1.125rem;
  white-space: nowrap;
}

.td-mega-liste a {
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: .88rem;
  line-height: 1.125rem;
  white-space: nowrap;
}

.td-mega-liste .td-mega-liste-3 a {
  font-size: .82rem;
  line-height: 1.125rem;
}

/* Seitenmenü (unter 1000 px) */
.td-mob-zeile,
.td-mob-titel,
.td-mob-fuss-link {
  text-transform: uppercase;
  letter-spacing: .04em;
}