/* =============================================================================
   XT-Inhalte: Startseite (Entwuerfe A und B) und Kategorie-Inhalte aus dem OPC
   -----------------------------------------------------------------------------
   Quelle: shops/xt/inhalte/xt-inhalte.css. bau.py kopiert sie nach
   neu/templates/XT5/themes/blackline/xt-inhalte.css. Dort NICHT bearbeiten.

   Alles haengt an der Klasse .xtn. Die HTML-Bloecke stehen als Text-Bausteine
   im OPC, Produkte kommen ueber Produktstroeme mit custom-class "xtn-ps ...".
   Pfade sind relativ zu dieser Datei (themes/blackline/).
   ============================================================================= */

/* Archivo, zugeschnitten auf die benutzten Staerken 300-900 und Breiten
   62-100 % (88,0 -> 57,8 KB, Laufweiten gemessen unveraendert). Neuer
   Dateiname bei jeder Aenderung: Schriften werden ohne ?v= ausgeliefert.
   Quelle: shops/xt/inhalte/fonts/, Zuschnitt siehe protokoll.md.
   Vorgeladen in layout/header.tpl. */
@font-face {
  font-family: 'Archivo XT';
  src: url(fonts/archivo-xt-v2.woff2) format('woff2');
  font-weight: 300 900;
  font-stretch: 62% 100%;
  font-display: swap;
}

/* --- Grundlage ------------------------------------------------------------- */
/* Farben seitenweit: #main-wrapper und die Huelle der Produktstroeme liegen
   ausserhalb von .xtn und brauchen sie auch. */
:root { --nacht:#212121; --tief:#191a1c; --rot:#d93a26; --rot-dunkel:#b83120;
        --gold:#e2a93b; --rauch:#8b8e94; --papier:#f3f3f1; }
.xtn { font-family:'Archivo XT', Roboto, sans-serif; font-stretch:100%; color:var(--nacht); }
.xtn *, .xtn *::before, .xtn *::after { box-sizing:border-box; }
.xtn .xtn-wrap { max-width:1250px; margin:0 auto; padding:0 1.5rem; }
.xtn h1, .xtn h2, .xtn h3 { font-family:inherit; letter-spacing:0; margin:0; }
.xtn .xtn-display { font-stretch:62%; font-weight:850; line-height:.92; text-transform:none;
       letter-spacing:0; word-spacing:.12em; }
.xtn p { line-height:1.6; margin:0; }
.xtn a { text-decoration:none; color:inherit; }
.xtn a:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }

.xtn .xtn-knopf { display:inline-block; font-weight:700; font-size:1.0625rem; padding:.95rem 1.6rem;
       border-radius:0; background:var(--rot); color:#fff; border:2px solid var(--rot); }
.xtn .xtn-knopf:hover { background:var(--rot-dunkel); border-color:var(--rot-dunkel); color:#fff; }
.xtn .xtn-textlink { font-weight:700; border-bottom:2px solid currentColor; padding-bottom:2px; }

/* Sektionskoepfe ueber einem Produktstrom */
.xtn .xtn-kopf { display:flex; justify-content:space-between; align-items:end; gap:2rem; }
.xtn .xtn-kopf h2 { font-size:clamp(2.25rem, 4vw, 3.5rem); }

/* --- Wegweiser F1/F2/F3 ---------------------------------------------------- */
.xtn .xtn-regeln { padding:4.5rem 0; background:var(--papier); color:var(--nacht); }
.xtn .xtn-regeln h2 { font-size:clamp(2rem, 3.4vw, 3rem); margin-bottom:1.5rem; }
.xtn .xtn-wegweiser { display:grid; grid-template-columns:repeat(3,1fr); border-top:3px solid var(--nacht); }
.xtn .xtn-weg { display:flex; flex-direction:column; padding:1.75rem 1.5rem 1.75rem 0; border-right:1px solid #cfcfcb; }
.xtn .xtn-weg + .xtn-weg { padding-left:1.5rem; }
.xtn .xtn-weg:last-child { border-right:0; }
.xtn .xtn-weg-klasse { font-stretch:62%; font-weight:900; font-size:4.5rem; line-height:.9; }
.xtn .xtn-weg-titel { font-weight:700; font-size:1.125rem; margin:.5rem 0 1rem; }
/* Gleiche Beschriftungsbreite in allen drei Spalten, sonst stehen die Werte
   je Spalte an anderer Stelle. Link unten auf einer Linie. */
.xtn .xtn-weg dl { display:grid; grid-template-columns:5.75rem 1fr; gap:.4rem 1rem; margin:0 0 1.5rem; font-size:.95rem; }
.xtn .xtn-weg > .xtn-textlink { margin-top:auto; align-self:flex-start; }
.xtn .xtn-weg dt { color:#5d5f63; font-weight:400; }
.xtn .xtn-weg dd { margin:0; font-weight:600; }

/* --- Beratung -------------------------------------------------------------- */
.xtn .xtn-laden { background:var(--nacht); color:#fff; padding:4.5rem 0; }
.xtn .xtn-laden .xtn-wrap { display:grid; grid-template-columns:1fr auto; gap:3rem; align-items:center; }
.xtn .xtn-laden h2 { font-size:clamp(2rem, 3.4vw, 3rem); color:#fff; }
.xtn .xtn-laden p { color:#c9c9c5; margin-top:.75rem; max-width:38rem; }
.xtn .xtn-telefon { font-stretch:62%; font-weight:850; font-size:clamp(2.25rem, 4vw, 3.25rem); color:var(--gold); white-space:nowrap; }
.xtn .xtn-telefon:hover { color:#fff; }

/* --- Produktstroeme (NOVA-Produktkarten) ------------------------------------
   Der Strom gibt .row.product-list mit .product-wrapper-Spalten aus, in
   container-fluid. Die Klasse xtn-ps kommt ueber custom-class. */
/* Abstand haengt am Strom selbst: ob der Shop eine container-fluid-Huelle
   herumlegt, haengt am Einhaengepunkt (inContainer). Hintergrund kommt vom
   #main-wrapper der Startseite. */
.container-fluid:has(> .xtn-ps) { background:var(--papier); padding-left:0; padding-right:0; }
.row.xtn-ps { max-width:1250px; margin:0 auto !important; padding:2rem 1.5rem 4.5rem; display:grid !important;
       grid-template-columns:repeat(4, 1fr); gap:2rem 1.5rem; }
.row.xtn-ps > .product-wrapper { max-width:none; flex:none; width:auto; padding:0; margin:0 !important; }
/* Karte mit eigenem Grund und Innenabstand: Titel und Preis brauchen Luft zum
   Rand, egal ob das Produktfoto weissen oder schwarzen Hintergrund hat. */
.row.xtn-ps .productbox { box-shadow:none !important; background:#fff; border-radius:0 !important;
       padding:1rem 1rem 1.25rem; height:100%; }
.row.xtn-ps .productbox:hover { box-shadow:0 8px 24px rgba(0,0,0,.10) !important; }
.row.xtn-ps .productbox-image, .row.xtn-ps .productbox-images { border-radius:0; overflow:hidden; }
.row.xtn-ps .productbox-title { font-family:'Archivo XT', Roboto, sans-serif; font-weight:600; }
.row.xtn-ps .price { font-family:'Archivo XT', Roboto, sans-serif; }
/* Regal mit Hauptrolle: erstes Produkt doppelt gross */
.row.xtn-ps-regal > .product-wrapper:first-child { grid-column:span 2; grid-row:span 2; }
.row.xtn-ps-regal > .product-wrapper:first-child .productbox-title { font-size:1.5rem; font-weight:700; }
.row.xtn-ps-regal > .product-wrapper:first-child .price { font-size:1.5rem; }
/* Reihe: sechs nebeneinander, auf schmalen Schirmen seitlich wischen */
.row.xtn-ps-reihe { grid-template-columns:repeat(6, minmax(10.5rem, 1fr)); overflow-x:auto; scroll-snap-type:x mandatory; }
.row.xtn-ps-reihe > .product-wrapper { scroll-snap-align:start; }

/* =============================================================================
   Startseite A "Abholschein"
   ============================================================================= */
#main-wrapper:has(.xtn-a) { background:var(--papier); }
/* NOVA gibt nach opc_before_main noch den normalen Inhaltsbereich aus. Auf
   der Startseite ist er leer, traegt aber 64 px Innenabstand - als heller
   Streifen ueber dem Footer. Nur ausblenden, wenn nichts Sichtbares drin ist
   (Hinweise nach Newsletter-Anmeldung o. ae. bleiben sichtbar). */
#main-wrapper:has(.xtn-held) > #content-wrapper:not(:has(.alert, p, h1, h2, h3, form, img, .product-wrapper, .card, table)) { display:none; }
.xtn-a .xtn-held { position:relative; background:var(--nacht); color:#fff; padding:5rem 0 6rem; overflow:hidden; }
.xtn-a .xtn-held::before { content:''; position:absolute; top:-2rem; right:-2rem; bottom:0; width:58%;
       background:url(img/xt-goldweide.webp) no-repeat center top / cover;
       -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 38%); mask-image:linear-gradient(to right, transparent 0%, #000 38%); }
.xtn-a .xtn-held .xtn-wrap { position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center; }
.xtn-a .xtn-held h1 { font-size:clamp(3.25rem, 7vw, 6.5rem); color:#fff; }
.xtn-a .xtn-held p { font-size:1.1875rem; max-width:34rem; margin:1.75rem 0 2.25rem; color:#e6e6e3; }
.xtn-a .xtn-aktionen { display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap; }

.xtn-a .xtn-schein { background:var(--papier); color:var(--nacht); border-radius:0; display:grid;
       grid-template-columns:1fr auto; transform:rotate(-1.5deg); box-shadow:0 30px 60px -20px rgba(0,0,0,.65); }
.xtn-a .xtn-schein-haupt { padding:1.6rem 1.75rem 1.75rem; }
.xtn-a .xtn-schein-kopf { display:flex; justify-content:space-between; align-items:baseline;
       border-bottom:2px solid var(--nacht); padding-bottom:.75rem; margin-bottom:1rem; }
.xtn-a .xtn-schein-kopf strong { font-stretch:62%; font-weight:900; font-size:1.9rem; }
.xtn-a .xtn-schein-kopf span { color:#5d5f63; font-size:.9rem; }
.xtn-a .xtn-schein dl { display:grid; grid-template-columns:auto 1fr; gap:.55rem 1.25rem; margin:0; align-items:baseline; }
.xtn-a .xtn-schein dt { color:#5d5f63; font-weight:400; }
.xtn-a .xtn-schein dd { margin:0; font-weight:700; }
.xtn-a .xtn-schein dd.xtn-gross { font-stretch:62%; font-weight:900; font-size:2.6rem; line-height:1; }
.xtn-a .xtn-abriss { position:relative; border-left:2px dashed #b9b9b4; padding:1.6rem 1.4rem; display:flex;
       flex-direction:column; justify-content:center; align-items:center; text-align:center; min-width:8.5rem; }
.xtn-a .xtn-abriss::before, .xtn-a .xtn-abriss::after { content:''; position:absolute; left:-13px; width:24px; height:24px;
       border-radius:50%; background:var(--nacht); }
.xtn-a .xtn-abriss::before { top:-12px; }
.xtn-a .xtn-abriss::after { bottom:-12px; }
.xtn-a .xtn-abriss b { font-stretch:62%; font-weight:900; font-size:4.25rem; line-height:.9; color:var(--rot); }
.xtn-a .xtn-abriss small { font-size:.9rem; color:#5d5f63; margin-top:.35rem; }

.xtn-a .xtn-ablauf { background:var(--tief); color:#fff; padding:3.5rem 0; }
.xtn-a .xtn-ablauf ol { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr);
       gap:2.5rem; counter-reset:schritt; }
.xtn-a .xtn-ablauf li { counter-increment:schritt; position:relative; padding-top:2.75rem; }
.xtn-a .xtn-ablauf li::before { content:counter(schritt); position:absolute; top:0; left:0; width:2rem; height:2rem;
       border-radius:50%; background:var(--gold); color:var(--nacht); font-weight:800; display:flex;
       align-items:center; justify-content:center; }
.xtn-a .xtn-ablauf li:not(:last-child)::after { content:''; position:absolute; top:1rem; left:2.75rem; right:-1.75rem;
       border-top:2px solid rgba(226,169,59,.45); }
.xtn-a .xtn-ablauf h3 { font-size:1.25rem; font-weight:700; margin-bottom:.4rem; color:#fff; }
.xtn-a .xtn-ablauf p { color:#c9c9c5; }
.xtn-a.xtn-regal-kopf { background:var(--papier); padding:4.5rem 0 0; }

/* Ganzjahres-Feuerwerk: vier Kategorien */
.xtn-a .xtn-ganzjahr { background:#fff; padding:4.5rem 0; }
.xtn-a .xtn-unterzeile { font-size:1.125rem; color:#4a4c50; margin:.75rem 0 2rem; max-width:44rem; }
.xtn-a .xtn-kacheln { display:grid; grid-template-columns:repeat(4, 1fr); gap:1.25rem; }
.xtn-a .xtn-kachel { display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; padding:1.5rem;
       border:1px solid #dcdcd8; border-radius:0; background:var(--papier); color:var(--nacht); }
.xtn-a .xtn-kachel:hover { border-color:var(--nacht); color:var(--nacht); }
.xtn-a .xtn-kachel h3 { font-stretch:62%; font-weight:850; font-size:1.75rem; line-height:1; margin-top:.5rem; word-spacing:.12em; }
.xtn-a .xtn-kachel p { color:#4a4c50; flex:1 1 auto; }
.xtn-a .xtn-kachel .xtn-textlink { margin-top:.5rem; color:var(--rot); }

/* Vorteile */
.xtn-a .xtn-vorteile { background:var(--nacht); color:#fff; padding:4.5rem 0; }
.xtn-a .xtn-vorteile h2 { font-size:clamp(2.25rem, 4vw, 3.5rem); color:#fff; margin-bottom:2rem; }
.xtn-a .xtn-vorteile ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:2rem; }
.xtn-a .xtn-vorteile img { display:block; background:#fff; border-radius:50%; padding:.6rem; width:3.5rem; height:3.5rem; }
.xtn-a .xtn-vorteile h3 { font-size:1.25rem; font-weight:700; color:#fff; margin:1rem 0 .4rem; }
.xtn-a .xtn-vorteile p { color:#c9c9c5; }
/* Ladenfotos unter den Vorteilen (Paket 22). Eigene Auswahl mit drei Klassen,
   weil ".xtn-vorteile ul" und ".xtn-vorteile img" (runde Symbole) sonst greifen. */
.xtn-a .xtn-vorteile .xtn-ladenbilder { margin-top:3rem; grid-template-columns:repeat(4, 1fr); gap:2rem; }
.xtn-a .xtn-vorteile .xtn-ladenbilder img { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
       padding:0; border-radius:0; background:#2c2c2c; }

/* Fliesstext und FAQ */
.xtn-a .xtn-wissen { background:#fff; padding:4.5rem 0; }
.xtn-a .xtn-wissen .xtn-wrap { display:grid; grid-template-columns:1fr 1.25fr; gap:4rem; align-items:start; }
.xtn-a .xtn-wissen h2 { font-size:clamp(2rem, 3.4vw, 3rem); margin-bottom:1.25rem; }
.xtn-a .xtn-anlass p + p { margin-top:1rem; }
.xtn-a .xtn-faq details { border-top:1px solid #d6d6d2; }
.xtn-a .xtn-faq details:last-of-type { border-bottom:1px solid #d6d6d2; }
.xtn-a .xtn-faq summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem;
       padding:1rem 0; font-weight:700; font-size:1.0625rem; }
.xtn-a .xtn-faq summary::-webkit-details-marker { display:none; }
.xtn-a .xtn-faq summary::after { content:'+'; font-weight:400; font-size:1.5rem; line-height:1; color:var(--rot); }
.xtn-a .xtn-faq details[open] summary::after { content:'\2212'; }
.xtn-a .xtn-faq summary:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.xtn-a .xtn-antwort { padding:0 0 1.25rem; color:#3c3e42; }
.xtn-a .xtn-antwort a { text-decoration:underline; }
.xtn-a .xtn-antwort table { width:100%; border-collapse:collapse; font-size:.95rem; }
.xtn-a .xtn-antwort th, .xtn-a .xtn-antwort td { text-align:left; padding:.45rem .5rem .45rem 0; border-bottom:1px solid #e3e3df; vertical-align:top; }
.xtn-a .xtn-antwort th { font-weight:700; }
.xtn-a .xtn-antwort th:nth-child(-n+2), .xtn-a .xtn-antwort td:nth-child(-n+2) { white-space:nowrap; padding-right:1rem; }

/* Beratung: Text links, Kontaktkarte rechts. Telefon gross in Weiss, die
   Zeiten direkt darunter - die Nummer steht nicht mehr allein am Rand. */
.xtn .xtn-laden .xtn-wrap:has(> .xtn-kontaktkarte) { grid-template-columns:1fr 1fr; gap:4rem; }
.xtn .xtn-kontaktkarte { background:#2b2c2f; border:1px solid #45464a; border-radius:0; padding:2rem; }
.xtn .xtn-anruf { display:flex; align-items:center; gap:1.25rem; padding-bottom:1.5rem; margin-bottom:1.25rem;
       border-bottom:1px solid #45464a; color:#fff; }
.xtn .xtn-anruf img { flex:none; background:#fff; border-radius:50%; padding:.6rem; width:3.5rem; height:3.5rem; }
.xtn .xtn-anruf-nummer { display:block; font-stretch:62%; font-weight:850; font-size:clamp(2rem, 3.2vw, 2.75rem);
       line-height:1; white-space:nowrap; }
.xtn .xtn-anruf-zeiten { display:block; color:#c9c9c5; margin-top:.4rem; }
.xtn .xtn-anruf:hover { color:#fff; }
.xtn .xtn-anruf:hover .xtn-anruf-nummer { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
.xtn .xtn-kontaktkarte .xtn-kontakt { margin:0; }

/* Beratung: Kontaktdaten */
.xtn .xtn-kontakt { display:grid; gap:.6rem; margin:1.5rem 0 0; }
.xtn .xtn-kontakt div { display:grid; grid-template-columns:5.5rem 1fr; gap:1rem; }
.xtn .xtn-kontakt dt { color:#a3a5a9; font-weight:400; }
.xtn .xtn-kontakt dd { margin:0; color:#fff; }
.xtn .xtn-kontakt a { text-decoration:underline; }

/* =============================================================================
   Startseite B "Nachthimmel"
   ============================================================================= */
#main-wrapper:has(.xtn-b) { background:var(--nacht); }
.xtn-b { background:var(--nacht); color:#fff; }
.xtn-b .xtn-held { position:relative; min-height:min(62vh, 600px); display:flex; align-items:flex-end;
       background:#0d1018 url(img/xt-nachthimmel-ansbach.webp) no-repeat center / cover; }
.xtn-b .xtn-held::after { content:''; position:absolute; inset:0;
       background:linear-gradient(to right, rgba(13,16,24,.82) 0%, rgba(13,16,24,.35) 45%, rgba(13,16,24,0) 70%),
                  linear-gradient(to top, var(--nacht) 0%, rgba(33,33,33,0) 38%); }
.xtn-b .xtn-held .xtn-wrap { position:relative; z-index:1; width:100%; padding-bottom:7.5rem; }
.xtn-b .xtn-held h1 { font-size:clamp(3.25rem, 6.4vw, 6.25rem); color:#fff; max-width:14ch; }
.xtn-b .xtn-held p { font-size:1.25rem; max-width:33rem; margin-top:1.5rem; color:#ecebe7; }

.xtn-b .xtn-wege { position:relative; z-index:2; margin-top:-5.5rem; }
.xtn-b .xtn-wege .xtn-wrap { display:grid; grid-template-columns:1.25fr 1fr; gap:1.25rem; }
.xtn-b .xtn-weg-karte { display:grid; grid-template-columns:1fr auto; align-items:center; gap:1.5rem;
       padding:1.75rem 2rem; border-radius:0; color:#fff; }
.xtn-b .xtn-weg-karte h2 { font-size:clamp(1.9rem, 3vw, 2.6rem); color:#fff; }
.xtn-b .xtn-weg-karte p { margin-top:.4rem; color:rgba(255,255,255,.88); }
.xtn-b .xtn-weg-silvester { background:var(--rot); }
.xtn-b .xtn-weg-silvester:hover { background:var(--rot-dunkel); color:#fff; }
.xtn-b .xtn-weg-ganzjahr { background:#2e2f32; border:1px solid #45464a; }
.xtn-b .xtn-weg-ganzjahr:hover { background:#38393d; color:#fff; }
.xtn-b .xtn-tage { text-align:center; border-left:1px solid rgba(255,255,255,.35); padding-left:1.5rem; }
.xtn-b .xtn-tage b { display:block; font-stretch:62%; font-weight:900; font-size:3.5rem; line-height:.9; }
.xtn-b .xtn-tage small { font-size:.85rem; }

.xtn-b .xtn-effekte { padding:5rem 0 4rem; }
.xtn-b .xtn-effekte h2 { font-size:clamp(2.25rem, 4vw, 3.5rem); color:#fff; margin-bottom:2rem; }
.xtn-b .xtn-effekt-raster { display:grid; grid-template-columns:1.35fr 1fr; grid-template-rows:repeat(3, auto); gap:1.25rem; }
.xtn-b .xtn-effekt { display:grid; grid-template-columns:9rem 1fr; gap:1.25rem; align-items:center;
       padding:1rem; border-radius:0; background:#2b2c2f; color:#fff; }
.xtn-b .xtn-effekt:hover { background:#333438; color:#fff; }
.xtn-b .xtn-effekt-bild { aspect-ratio:1/1; border-radius:0; overflow:hidden; background:#fff; }
.xtn-b .xtn-effekt-bild img { display:block; width:100%; height:100%; object-fit:cover; }
.xtn-b .xtn-effekt:first-child { grid-row:span 3; grid-template-columns:1fr; align-content:start; padding:1.25rem; }
.xtn-b .xtn-effekt:first-child .xtn-effekt-bild { aspect-ratio:4/3; }
.xtn-b .xtn-effekt h3 { font-stretch:62%; font-weight:850; font-size:2rem; line-height:1; color:#fff; word-spacing:.12em; }
.xtn-b .xtn-effekt:first-child h3 { font-size:3rem; margin-top:.5rem; }
.xtn-b .xtn-effekt p { color:#cfcfcb; margin-top:.35rem; }
.xtn-b.xtn-top-kopf { background:var(--papier); color:var(--nacht); padding:4.5rem 0 0; }

/* =============================================================================
   Kategorieseiten: Faktenleiste ueber der Ueberschrift (opc_before_heading)
   und Ratgeber unter der Produktliste (opc_after_productlist, XT5/productlist/index.tpl)
   ============================================================================= */
.xtn-kat .xtn-fakten { display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:center;
       border-top:3px solid var(--nacht); border-bottom:1px solid #d6d6d2; padding:1rem 0; margin:0 0 1.5rem; }
.xtn-kat .xtn-fakten-klasse { font-stretch:62%; font-weight:900; font-size:3.25rem; line-height:.9; white-space:nowrap; }
.xtn-kat .xtn-fakten dl { display:flex; flex-wrap:wrap; gap:.5rem 2.5rem; margin:0; }
.xtn-kat .xtn-fakten dl > div { min-width:9rem; }
.xtn-kat .xtn-fakten dt { color:#5d5f63; font-weight:400; font-size:.875rem; }
.xtn-kat .xtn-fakten dd { margin:0; font-weight:600; font-size:.975rem; }
.xtn-kat .xtn-ratgeber { max-width:46rem; padding:2.5rem 0 1rem; }
.xtn-kat .xtn-ratgeber h2 { font-size:clamp(1.75rem, 3vw, 2.4rem); margin:0 0 1rem; }
.xtn-kat .xtn-ratgeber h3 { font-size:1.25rem; font-weight:700; margin:1.75rem 0 .5rem; }
.xtn-kat .xtn-ratgeber p + p { margin-top:.85rem; }

/* =============================================================================
   Feuerwerksklasse auf dem Artikelbild (snippets/xt_klasse.tpl)
   Unten links: oben links sitzt das NOVA-Badge, oben rechts erscheinen
   Merkzettel und Vergleich.
   ============================================================================= */
.productbox-image, #image_wrapper .gallery-with-action-main > .col { position:relative; }
.xt-klasse { position:absolute; left:.5rem; bottom:.5rem; z-index:3; display:inline-flex; align-items:baseline;
       gap:.3rem; padding:.3rem .5rem .25rem; border-radius:0; background:#212121; color:#fff;
       font-family:'Archivo XT', Roboto, sans-serif; line-height:1; pointer-events:none;
       box-shadow:0 0 0 2px #fff; } /* weisser Rand: viele Produktfotos sind schwarz */
.xt-klasse .xt-klasse-name { font-weight:600; font-size:.75rem; }
.xt-klasse .xt-klasse-wert { font-stretch:62%; font-weight:900; font-size:1.25rem; }
.xt-klasse .xt-klasse-alter { border-left:1px solid currentColor; padding-left:.35rem; margin-left:.1rem; }
.xt-klasse .xt-klasse-alter { font-weight:700; font-size:.75rem; }
.xt-klasse-f1 { background:#fff; color:#212121; box-shadow:inset 0 0 0 2px #212121, 0 0 0 2px #fff; }
.xt-klasse-f3 { background:#d93a26; }
.xt-klasse-t1 { background:#e2a93b; color:#212121; }
.xt-klasse-gross { left:1rem; bottom:1rem; padding:.45rem .7rem .35rem; }
.xt-klasse-gross .xt-klasse-wert { font-size:2rem; }
.xt-klasse-gross .xt-klasse-alter { font-size:.95rem; }
.xt-klasse-gross .xt-klasse-name { font-size:.95rem; }

/* =============================================================================
   Schmale Schirme, Bewegung
   ============================================================================= */
@media (max-width: 991px) {
  .xtn-a .xtn-held { padding:3rem 0 3.5rem; }
  .xtn-a .xtn-held::before { width:100%; height:26rem; opacity:.55;
       -webkit-mask-image:linear-gradient(to bottom, #000 55%, transparent); mask-image:linear-gradient(to bottom, #000 55%, transparent); }
  .xtn-a .xtn-held .xtn-wrap, .xtn .xtn-laden .xtn-wrap, .xtn .xtn-laden .xtn-wrap:has(> .xtn-kontaktkarte) { grid-template-columns:1fr; gap:2.5rem; }
  .xtn-a .xtn-ablauf ol { grid-template-columns:1fr; gap:1.75rem; }
  .xtn-a .xtn-ablauf li:not(:last-child)::after { display:none; }
  .xtn .xtn-kopf { flex-direction:column; align-items:start; gap:1rem; }
  .xtn-a .xtn-kacheln, .xtn-a .xtn-vorteile ul { grid-template-columns:repeat(2, 1fr); }
  .xtn-a .xtn-vorteile .xtn-ladenbilder { grid-template-columns:repeat(2, 1fr); gap:.75rem; margin-top:2.5rem; }
  .xtn-a .xtn-wissen .xtn-wrap { grid-template-columns:1fr; gap:3rem; }
  .row.xtn-ps { grid-template-columns:repeat(2, 1fr); }
  .row.xtn-ps-reihe { grid-template-columns:repeat(6, minmax(10.5rem, 1fr)); }

  .xtn-b .xtn-held { min-height:34rem; background-position:65% center; }
  .xtn-b .xtn-held .xtn-wrap { padding-bottom:4rem; }
  .xtn-b .xtn-wege { margin-top:0; padding-top:1rem; }
  .xtn-b .xtn-wege .xtn-wrap { grid-template-columns:1fr; }
  .xtn-b .xtn-effekt-raster { grid-template-columns:1fr; }
  .xtn-b .xtn-effekt:first-child { grid-row:auto; }
}
@media (max-width: 767px) {
  .xtn .xtn-wegweiser { grid-template-columns:1fr; }
  .xtn .xtn-weg, .xtn .xtn-weg + .xtn-weg { padding:1.5rem 0; border-right:0; border-bottom:1px solid #cfcfcb; }
}
@media (max-width: 480px) {
  .xtn-kat .xtn-fakten { grid-template-columns:1fr; gap:.75rem; }
  .xtn-a .xtn-kacheln, .xtn-a .xtn-vorteile ul { grid-template-columns:1fr; }
  .xtn .xtn-kontakt div { grid-template-columns:1fr; gap:.1rem; }
  .xtn-a .xtn-schein { grid-template-columns:1fr; transform:none; }
  .xtn-a .xtn-abriss { border-left:0; border-top:2px dashed #b9b9b4; flex-direction:row; gap:.75rem; }
  .xtn-a .xtn-abriss::before, .xtn-a .xtn-abriss::after { display:none; }
  .xtn-b .xtn-weg-karte { grid-template-columns:1fr; }
  .xtn-b .xtn-tage { border-left:0; border-top:1px solid rgba(255,255,255,.35); padding:1rem 0 0; text-align:left; }
  .xtn-b .xtn-effekt { grid-template-columns:6rem 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .xtn *, .row.xtn-ps * { animation:none !important; transition:none !important; }
}