/* Design „refresh“ — Startseite Desktop (Übergabe 03.10.2026, ~/Projects/tintenalarm-startseite-refresh/).
   Farben nur über die Tokens aus tokens.css; Regeln der Übergabe:
   Rot = Marke/Aktion, Grün nur „In den Warenkorb“ (+ Rand der Refill-Kachel), Anthrazit nur Bürobedarf,
   Absperrband = einziges gestreiftes Element.
   Schriften selbst gehostet (DSGVO, kein Google-Server): Manrope und Source Sans 3, SIL Open Font License 1.1,
   variable WOFF2, nur Teilmenge „latin“ (Umlaute, ß, €, „“ enthalten). Herkunft: fonts.gstatic.com v20, 03.10.2026. */
@font-face { font-family: Manrope; font-style: normal; font-weight: 700 800; font-display: swap; src: url(../schriften/manrope-latin.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../schriften/source-sans-3-latin.woff2) format("woff2"); }
:root {
  --ta-rot: #E2001A;
  --ta-rot-hover: #C4001A;
  --ta-anthrazit: #1B1B1F;
  --ta-anthrazit-hell: #34343A;
  --ta-auf-dunkel: #FFFFFF;
  --ta-auf-dunkel-gedaempft: #D9D6CF;
  --ta-auf-dunkel-label: #C9C5BD;
  --ta-gruen-auf-dunkel: #7DCB93;
  --ta-weiss: #FFFFFF;
  --ta-text: #1B1B1F;
  --ta-text-sekundaer: #3A3935;
  --ta-text-gedaempft: #5C5A55;
  --ta-footer-bg: #E9E7E2;
  --ta-footer-linie: #D3CFC7;
  --ta-gruen-text: #1F7A3E;
  --ta-gruen-kaufen: #1E8A3C;
  --ta-badge-bg: #F0EEE9;
  --ta-flaeche: #F6F5F2;
  --ta-linie: #E6E3DD;
  --ta-feldrand: #C9C5BD;
  --ta-stern: #F0A500;
  --ta-schrift-titel: Manrope, "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --ta-schrift: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, sans-serif;
}

/* Grundlagen */
body.rf { margin: 0; background: var(--ta-flaeche); color: var(--ta-text); font-family: var(--ta-schrift); font-size: 16px; line-height: 1.5; }
.rf a { color: var(--ta-text); text-decoration: none; }
.rf a:hover { color: var(--ta-rot-hover); }
.rf select, .rf input, .rf button { font-family: inherit; }
.rf h1, .rf h2 { font-family: var(--ta-schrift-titel); font-weight: 800; margin: 0; }
.rf svg { flex-shrink: 0; }
.rf-seite { min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; }
.rf-breite { width: min(1240px, 100% - 32px); margin: 0 auto; }
.rf-abschnitt { width: min(1240px, 100% - 32px); margin: 56px auto 0; display: flex; flex-direction: column; gap: 20px; }
.rf-nur-leser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rf-karte { background: var(--ta-weiss); border: 1px solid var(--ta-linie); border-radius: 16px; box-sizing: border-box; }
.rf-dachzeile { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ta-text-gedaempft); }
.rf-dachzeile--rot { color: var(--ta-rot); }
.rf-titel { font-size: 28px; }
.rf-mehr { font-weight: 700; color: var(--ta-rot) !important; display: inline-flex; align-items: center; gap: 6px; }
.rf-mehr:hover { color: var(--ta-rot-hover) !important; }
.rf-kopfzeile { display: flex; align-items: baseline; justify-content: space-between; }
.rf-unterstrichen { color: inherit !important; text-decoration: underline !important; text-decoration-color: var(--ta-feldrand) !important; text-underline-offset: 3px; }

/* Topbar */
.rf-topbar { background: var(--ta-weiss); border-bottom: 1px solid var(--ta-linie); }
.rf-topbar .rf-breite { height: 40px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--ta-text-gedaempft); }
.rf-topbar-gruppe { display: flex; gap: 24px; align-items: center; }
.rf-topbar-gruppe > a, .rf-topbar-gruppe > span { display: flex; align-items: center; gap: 8px; color: var(--ta-text-gedaempft); white-space: nowrap; }
.rf-topbar b { color: var(--ta-text); }
@media (max-width: 1099px) { .rf-topbar-gruppe { gap: 16px; } }  /* 1024–1099 px (iPad quer): einzeilig, gemessen 12.10.2026 bei 1024 px 987 von 992 px */
.rf-flagge { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }

/* Kopf */
.rf-kopf { background: var(--ta-weiss); }
.rf-kopf-zeile { height: 108px; display: flex; align-items: center; gap: 48px; }
.rf-logo img { display: block; width: 260px; height: 64px; object-fit: contain; }
.rf-suche { position: relative; flex-grow: 1; display: flex; height: 56px; border: 2px solid var(--ta-text); border-radius: 12px; background: var(--ta-weiss); }
.rf-suche-lupe { display: flex; align-items: center; padding-left: 18px; color: var(--ta-text-gedaempft); }
.rf-suche input { flex-grow: 1; border: 0; padding: 0 14px; font-size: 17px; color: var(--ta-text); background: transparent; outline: none; }
.rf-suche button { width: 132px; border: 0; border-radius: 0 10px 10px 0; background: var(--ta-rot); color: var(--ta-weiss); font-weight: 700; font-size: 17px; cursor: pointer; }
.rf-suche button:hover { background: var(--ta-rot-hover); }
.rf-suche:focus-within { box-shadow: 0 0 0 3px rgba(226, 0, 26, .2); }
.rf-korb { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border: 1px solid var(--ta-linie); border-radius: 12px; flex-shrink: 0; }
.rf-korb-symbol { position: relative; display: flex; }
.rf-korb-zahl { position: absolute; top: -8px; right: -10px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--ta-rot); color: var(--ta-weiss); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 5px; box-sizing: border-box; }
.rf-korb-text { display: flex; flex-direction: column; line-height: 1.2; }
.rf-korb-text small { font-size: 13px; color: var(--ta-text-gedaempft); }
.rf-korb-text strong { font-size: 16px; }

/* Suchvorschläge (suchvorschlag.tpl.php): Drucker | Produkte mit Bild und Preis, darunter „Alle Ergebnisse“ */
.rf-suche-feld { flex-grow: 1; display: flex; min-width: 0; }
#rf-vorschlaege { display: none; position: absolute; top: calc(100% + 6px); left: -2px; right: -2px; z-index: 50; background: var(--ta-weiss); border: 1px solid var(--ta-linie); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .12); max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); overflow: auto; font-size: 15px; }
@media (min-width: 1024px) { #rf-vorschlaege { min-width: 680px; } }  /* schmales Suchfeld: Fenster wächst nach rechts */
/* Finder im Suchfeld (12.10.2026): dasselbe Fenster wie die Vorschläge, solange das Feld leer ist */
.rf-suchfinder { position: absolute; top: calc(100% + 6px); left: -2px; right: -2px; z-index: 50; background: var(--ta-weiss); border: 1px solid var(--ta-linie); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .12); padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.rf-suchfinder[hidden] { display: none; }
.rf-suchfinder-titel { margin: 0; font-weight: 700; }
.rf-suchfinder .rf-knopf { align-self: flex-start; width: auto; padding: 0 24px; border-radius: 10px; }  /* .rf-suche button gilt dem Suchen-Knopf */
@media (min-width: 1024px) { .rf-suchfinder { min-width: 680px; } }
@media (max-width: 767px) {
  .rf-suchfinder .rf-finder-felder { grid-template-columns: minmax(0, 1fr); }
  .rf-suchfinder .rf-feld:has(select:disabled) { display: none; }  /* mobil nur die nächste Stufe */
}
.rf-sv { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.rf-sv section { padding: 16px 18px 10px; }
.rf-sv h2 { font-family: var(--ta-schrift); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ta-text-gedaempft); margin: 0 0 6px; padding-bottom: 8px; border-bottom: 1px solid var(--ta-linie); }
.rf-sv ul { list-style: none; margin: 0; padding: 0; }
.rf-sv-drucker a { display: block; padding: 7px 8px; margin: 0 -8px; border-radius: 8px; }
.rf-sv-produkte a { display: flex; gap: 14px; align-items: center; padding: 8px; margin: 0 -8px; border-radius: 8px; }
.rf-sv a:hover, .rf-sv a:focus { background: var(--ta-flaeche); }
.rf-sv-bild { flex: none; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ta-linie); border-radius: 8px; background: var(--ta-weiss); color: var(--ta-text-gedaempft); }
.rf-sv-bild img { max-width: 56px; max-height: 56px; width: auto; height: auto; }
.rf-sv-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rf-sv-text > small { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ta-text-gedaempft); }
.rf-sv-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.4; }
.rf-sv-preis { font-size: 12px; color: var(--ta-text-gedaempft); }
.rf-sv-preis strong { font-family: var(--ta-schrift-titel); font-size: 16px; font-weight: 800; color: var(--ta-text); }
.rf-sv-alle { grid-column: 1 / -1; position: sticky; bottom: 0; background: var(--ta-weiss); display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-top: 1px solid var(--ta-linie); color: var(--ta-text-sekundaer) !important; font-weight: 600; }
.rf-sv-alle:hover, .rf-sv-alle:focus { background: var(--ta-flaeche); }

/* Navigation */
.rf-nav { border-top: 1px solid var(--ta-linie); border-bottom: 1px solid var(--ta-linie); }
.rf-nav .rf-breite { height: 56px; display: flex; align-items: stretch; justify-content: space-between; }
.rf-nav-haupt, .rf-nav-neben { display: flex; gap: 4px; align-items: stretch; }
.rf-nav-haupt > a, .rf-nav-haupt > .rf-menue > a { display: flex; align-items: center; gap: 6px; padding: 0 16px; font-weight: 600; height: 100%; box-sizing: border-box; }
.rf-nav-haupt > a.rf-aktiv { border-bottom: 3px solid var(--ta-rot); margin-bottom: -1px; }
.rf-nav-neben a { display: flex; align-items: center; padding: 0 12px; font-size: 14px; color: var(--ta-text-gedaempft) !important; }
.rf-menue { position: relative; display: flex; }
.rf-menue-liste { display: none; position: absolute; top: 100%; left: 0; z-index: 40; min-width: 260px; max-height: 70vh; overflow: auto; background: var(--ta-weiss); border: 1px solid var(--ta-linie); border-radius: 0 0 12px 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .12); padding: 8px 0; columns: 2; column-gap: 0; width: 520px; }
.rf-menue:hover .rf-menue-liste, .rf-menue:focus-within .rf-menue-liste { display: block; }
.rf-menue:hover > a, .rf-menue:focus-within > a { border-bottom: 3px solid var(--ta-rot); margin-bottom: -1px; }
.rf-menue-liste a { display: block; padding: 6px 18px; font-size: 15px; break-inside: avoid; }
.rf-menue-liste a:hover { background: var(--ta-flaeche); }

/* Hero */
.rf-hero { width: min(1240px, 100% - 32px); margin: 40px auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.rf-hero > .rf-karte { padding: 40px; height: 490px; display: flex; }
.rf-finder { flex-direction: column; gap: 24px; }
.rf-finder-kopf { display: flex; flex-direction: column; gap: 8px; }
.rf-finder h2 { font-size: 32px; line-height: 1.15; letter-spacing: -.01em; }
.rf-finder-kopf p { margin: 0; color: var(--ta-text-gedaempft); font-size: 17px; }
.rf-finder-form { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.rf-finder-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rf-feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rf-feld[hidden] { display: none; }
.rf-feld label { font-size: 14px; font-weight: 600; }
.rf-feld select { height: 48px; border: 1px solid var(--ta-feldrand); border-radius: 10px; padding: 0 14px; font-size: 16px; background: var(--ta-weiss); color: var(--ta-text); width: 100%; box-sizing: border-box; }
.rf-feld select:disabled { background: var(--ta-flaeche); color: var(--ta-text-gedaempft); }
.rf-feld--breit { grid-column: 1 / -1; }
/* 4. Feld: erscheint nur bei Bedarf und teilt dann die untere Zeile (Drucker | 4. Feld); Kartenhöhe bleibt */
.rf-finder-felder.rf-vier .rf-feld--breit { grid-column: auto; }
.rf-knopf { height: 52px; border: 0; border-radius: 10px; background: var(--ta-rot); color: var(--ta-weiss); font-size: 17px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; }
.rf-knopf:hover { background: var(--ta-rot-hover); }
.rf-knopf:disabled { opacity: .5; cursor: default; }

.rf-service { position: relative; overflow: hidden; }
.rf-service-hund { position: absolute; right: -2px; bottom: 88px; width: 689px; height: 325px; max-width: none; object-fit: cover; object-position: 100% 0; }
.rf-service-text { position: relative; width: 300px; display: flex; flex-direction: column; gap: 22px; }
.rf-service h2 { font-size: 30px; line-height: 1.15; }
.rf-vorteile { display: flex; flex-direction: column; gap: 18px; }
.rf-vorteil { display: flex; gap: 14px; align-items: flex-start; }
.rf-vorteil strong { display: block; font-size: 17px; }
.rf-vorteil span { display: block; color: var(--ta-text-gedaempft); font-size: 15px; }
.rf-symbolfeld { width: 40px; height: 40px; border-radius: 10px; background: var(--ta-flaeche); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rf-service .rf-mehr { margin-top: auto; }

/* Trust-Leiste */
.rf-trust { width: min(1240px, 100% - 32px); margin: 24px auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rf-trust > * { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--ta-weiss); border: 1px solid var(--ta-linie); border-radius: 12px; line-height: 1.25; }
.rf-trust strong { display: block; font-size: 15px; }
.rf-trust small { display: block; font-size: 13px; color: var(--ta-text-gedaempft); }
.rf-trust .rf-symbol { color: var(--ta-rot); }
.rf-sterne { display: flex; gap: 2px; }

/* Sortiment */
.rf-raster6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.rf-kachel { background: var(--ta-weiss); border: 1px solid var(--ta-linie); border-radius: 14px; padding: 22px 18px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; font-weight: 700; line-height: 1.3; }
.rf-kachel:hover { border-color: var(--ta-feldrand); }
.rf-kachel .rf-symbolfeld { width: 44px; height: 44px; border-radius: 12px; }
.rf-kachel--dunkel { background: var(--ta-anthrazit); border: 2px solid var(--ta-anthrazit); padding: 21px 17px; color: var(--ta-auf-dunkel) !important; }
.rf-kachel--dunkel:hover { color: var(--ta-auf-dunkel) !important; border-color: var(--ta-anthrazit-hell); }
.rf-kachel--dunkel .rf-symbolfeld { background: var(--ta-anthrazit-hell); }

/* Angebote */
.rf-raster4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.rf-produkt { padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.rf-produkt-bild { height: 220px; border-radius: 12px; display: flex; align-items: center; justify-content: center; position: relative; }
.rf-produkt-bild img { width: 200px; height: 200px; object-fit: contain; }
.rf-badge { position: absolute; top: 0; left: 0; padding: 4px 10px; border-radius: 8px; background: var(--ta-badge-bg); color: var(--ta-text-sekundaer); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.rf-produkt-info { display: flex; flex-direction: column; gap: 6px; flex-grow: 1; }
.rf-produkt-info a { font-weight: 600; line-height: 1.35; }
.rf-produkt-info span { font-size: 14px; color: var(--ta-text-gedaempft); }
.rf-produkt-fuss { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid var(--ta-linie); }
.rf-preis { line-height: 1.1; }
.rf-preis strong { display: block; font-family: var(--ta-schrift-titel); font-size: 26px; font-weight: 800; }
.rf-preis .product-info-grundpreis { font-size: 13px; color: var(--ta-text-sekundaer); margin-top: 4px; }
.rf-preis small { display: block; font-size: 12px; color: var(--ta-text-gedaempft); margin-top: 4px; }
.rf-preis small a { color: inherit; text-decoration: underline; }
.rf-kaufen { margin: 0; }
.rf-kaufen button { width: 48px; height: 48px; border-radius: 12px; border: 0; background: var(--ta-gruen-kaufen); color: var(--ta-weiss); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.rf-kaufen button:hover { filter: brightness(.9); }
.rf-refill { border: 2px solid var(--ta-gruen-kaufen); border-radius: 16px; background: var(--ta-weiss); padding: 26px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.rf-refill-titel { font-family: var(--ta-schrift-titel); font-size: 22px; font-weight: 800; line-height: 1.2; }
.rf-refill-text { font-size: 15px; line-height: 1.45; color: var(--ta-text-sekundaer); margin-top: 8px; }
.rf-refill-mehr { font-weight: 700; display: flex; align-items: center; gap: 6px; }
/* Startseite: vier Angebotskarten in einer Reihe, Refill-Hinweis darunter über die volle Breite (startseite-karten 12.10.2026); mobil bleibt er die letzte Wischkarte */
@media (min-width: 768px) { .rf-angebote .rf-refill { grid-column: 1 / -1; flex-direction: row; align-items: center; } .rf-angebote .rf-refill > div { flex: 1; } }

/* Bürobedarf */
.rf-buero { width: min(1240px, 100% - 32px); margin: 56px auto 0; display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 24px; }
.rf-buero-intro { background: var(--ta-anthrazit); color: var(--ta-auf-dunkel); border-radius: 16px; padding: 40px; display: flex; flex-direction: column; gap: 20px; }
.rf-buero-intro .rf-dachzeile { color: var(--ta-auf-dunkel-label); }
.rf-buero-intro h2 { font-size: 30px; line-height: 1.15; }
.rf-buero-intro p { margin: 0; color: var(--ta-auf-dunkel-gedaempft); }
.rf-haken { display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--ta-auf-dunkel-gedaempft); }
.rf-haken span { display: flex; gap: 8px; align-items: center; }
.rf-knopf-hell { margin-top: auto; align-self: flex-start; padding: 14px 22px; border-radius: 10px; background: var(--ta-weiss); color: var(--ta-text) !important; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.rf-buero-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rf-buero-raster a { background: var(--ta-weiss); border: 1px solid var(--ta-linie); border-radius: 14px; padding: 20px 18px; display: flex; flex-direction: column; gap: 12px; font-weight: 700; font-size: 15px; line-height: 1.3; }
.rf-buero-raster a:hover { border-color: var(--ta-feldrand); }
.rf-buero-raster a.rf-alle { background: var(--ta-flaeche); border: 1px dashed var(--ta-feldrand); justify-content: center; gap: 6px; }
.rf-alle small { font-size: 13px; font-weight: 400; color: var(--ta-text-gedaempft); }

/* Hersteller */
.rf-hersteller { align-items: center; }
.rf-hersteller img { display: block; }
.rf-hersteller-liste { display: none; }

/* Bewertungen */
.rf-kopfzeile--unten { align-items: flex-end; }
.rf-bew-links { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.rf-bew-links a + a { font-size: 13px; color: var(--ta-text-gedaempft); text-decoration: underline; }
.rf-raster3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.rf-bewertung { padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.rf-bewertung p { margin: 0; line-height: 1.55; flex-grow: 1; }
.rf-bewertung-fuss { font-size: 14px; color: var(--ta-text-gedaempft); line-height: 1.4; }
.rf-bewertung-fuss b { color: var(--ta-text); }
.rf-bewertung-fuss a { color: var(--ta-text-gedaempft); text-decoration: underline; }
.rf-stern-aus { fill: var(--ta-auf-dunkel-gedaempft); }

/* SEO-Text: voller Text bleibt im HTML, nur optisch eingeklappt */
.rf-seo { padding: 36px 40px 28px; display: flex; flex-direction: column; gap: 14px; }
.rf-seo h1 { font-size: 22px; line-height: 1.25; }
.rf-seo h3 { font-family: var(--ta-schrift-titel); font-size: 18px; margin: 8px 0 0; }
.rf-seo p { margin: 0; color: var(--ta-text-sekundaer); font-size: 15px; line-height: 1.6; max-width: 900px; }
.rf-seo a { text-decoration: underline; text-decoration-color: var(--ta-feldrand); }
.rf-seo-rest { display: flex; flex-direction: column; gap: 14px; }
.rf-seo.rf-zu .rf-seo-rest { max-height: 3.2em; overflow: hidden; opacity: .45; }
.rf-seo-knopf { align-self: flex-start; display: flex; align-items: center; gap: 6px; padding: 10px 16px; border: 1px solid var(--ta-feldrand); border-radius: 10px; background: var(--ta-weiss); color: var(--ta-text); font-weight: 700; font-size: 15px; cursor: pointer; }
.rf-seo:not(.rf-zu) .rf-seo-knopf svg { transform: rotate(180deg); }

/* Fuß */
.rf-fuss { margin-top: 56px; background: var(--ta-footer-bg); color: var(--ta-text-sekundaer); border-top: 1px solid var(--ta-footer-linie); }
.rf-fuss-raster { padding: 56px 0 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; font-size: 15px; }
.rf-fuss-spalte { display: flex; flex-direction: column; gap: 14px; }
.rf-fuss-titel { font-family: var(--ta-schrift-titel); font-size: 18px; font-weight: 700; color: var(--ta-text); }
.rf-fuss p { margin: 0; }
.rf-newsletter { display: flex; height: 48px; border-radius: 10px; overflow: hidden; background: var(--ta-weiss); }
.rf-newsletter input { flex-grow: 1; min-width: 0; border: 1px solid var(--ta-footer-linie); border-right: 0; border-radius: 10px 0 0 10px; padding: 0 14px; font-size: 15px; outline: none; color: var(--ta-text); }
.rf-newsletter button { border: 0; background: var(--ta-rot); color: var(--ta-weiss); font-weight: 700; padding: 0 18px; cursor: pointer; }
#rf-newsletter-meldung { font-size: 14px; }
.rf-fuss-haken { display: flex; flex-direction: column; gap: 8px; line-height: 1.4; }
.rf-fuss-haken > span { display: flex; gap: 8px; align-items: flex-start; }
.rf-fuss-haken svg { margin-top: 3px; }
.rf-fuss-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; line-height: 1.4; }
.rf-fuss-links a { color: var(--ta-text-sekundaer); hyphens: auto; overflow-wrap: break-word; }
.rf-widerruf { align-self: flex-start; margin-top: 6px; padding: 10px 16px; border: 1px solid var(--ta-footer-linie); border-radius: 8px; font-size: 14px; }
.rf-fuss-unten { padding: 18px 0 28px; font-size: 13px; color: var(--ta-text-gedaempft); display: flex; justify-content: space-between; gap: 24px; }
.rf-fuss-unten span:last-child { flex-shrink: 0; }
.rf-absperrband { height: 40px; background: repeating-linear-gradient(-45deg, var(--ta-rot) 0 28px, var(--ta-weiss) 28px 56px); }

/* ================================================================ Kategorieseite */
.rf-brotkrume { margin-top: 20px; font-size: 14px; color: var(--ta-text-gedaempft); }
.rf-brotkrume a { color: var(--ta-text-gedaempft) !important; }
.rf-brotkrume a:hover { color: var(--ta-rot-hover) !important; }
.rf-brotkrume span { padding: 0 4px; }
.rf-kat-kopf { margin-top: 16px; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 24px; }
.rf-kat-titel h1 { font-size: 30px; line-height: 1.2; }
.rf-kat-titel p { margin: 6px 0 0; color: var(--ta-text-gedaempft); }

.rf-kat-extra { padding: 24px 28px; }
.rf-kat-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rf-kat-kachel { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--ta-weiss); border: 1px solid var(--ta-linie); border-radius: 12px; }
.rf-kat-kachel:hover { border-color: var(--ta-feldrand); }
.rf-kat-kachel img { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; }
.rf-kat-kachel strong { display: block; line-height: 1.3; }
.rf-kat-kachel small { display: block; font-size: 13px; color: var(--ta-text-gedaempft); }
.rf-kat-weitere summary { list-style: none; }
.rf-kat-weitere summary::-webkit-details-marker { display: none; }
.rf-kat-weitere[open] summary svg { transform: rotate(180deg); }
.rf-knopf-zweit { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border: 1px solid var(--ta-feldrand); border-radius: 10px; background: var(--ta-weiss); font-weight: 700; font-size: 15px; cursor: pointer; }
.rf-kat-leer { padding: 28px; }

.rf-gruppe { gap: 12px; margin-top: 40px; }
.rf-gruppe-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 2px solid var(--ta-text); }
.rf-gruppe-kopf h2 { font-size: 22px; line-height: 1.25; }
.rf-gruppe-marken { display: flex; gap: 8px; flex-wrap: wrap; }
.rf-badge-inline { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; background: var(--ta-badge-bg); color: var(--ta-text-sekundaer); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.rf-vorteil-leiste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 14px; color: var(--ta-text-sekundaer); }
.rf-vorteil-leiste li { display: flex; align-items: center; gap: 6px; }
.rf-vorteil-leiste svg { color: var(--ta-gruen-text); }
.rf-vorteil-knopf { border: 0; background: none; padding: 0; font: inherit; color: inherit; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-align: left; }
.rf-vorteil-knopf:hover { color: var(--ta-text); text-decoration: underline; text-underline-offset: 3px; }
.rf-vorteil-knopf:focus-visible { outline: 2px solid var(--ta-rot); outline-offset: 2px; border-radius: 4px; }
.rf-vorteil-i { flex-shrink: 0; width: 15px; height: 15px; border: 1.5px solid currentColor; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; line-height: 1; color: var(--ta-text-gedaempft); }
/* Erklärtext der Vorteile (Popover, 12.10.2026) — im Standarddesign das Popup #warranty1–4 */
.rf-vorteil-popover { max-width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 64px); overflow: auto; border: 1px solid var(--ta-linie); border-radius: 12px; padding: 24px; background: var(--ta-weiss); color: var(--ta-text); font-size: 15px; line-height: 1.55; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
.rf-vorteil-popover::backdrop { background: rgba(0, 0, 0, .35); }
.rf-vorteil-popover h2 { font-size: 20px; margin: 0 0 12px; }
.rf-vorteil-text a { color: var(--ta-rot); text-decoration: underline; text-underline-offset: 3px; }
.rf-vorteil-popover .rf-knopf-zweit { margin-top: 18px; }

.rf-zeilen { display: flex; flex-direction: column; gap: 12px; }
.rf-zeile { display: grid; grid-template-columns: 112px minmax(0, 1fr) 140px 200px 250px; grid-template-areas: "bild info kennzahl preis kaufen"; gap: 20px; align-items: center; padding: 16px 20px; }
.rf-zeile-bild { grid-area: bild; display: flex; align-items: center; justify-content: center; width: 112px; height: 100px; }
.rf-zeile-bild img { max-width: 112px; max-height: 100px; width: auto; height: auto; object-fit: contain; }
.rf-zeile-info { grid-area: info; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rf-zeile-info h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; }
.rf-zeile-sterne { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ta-text-gedaempft) !important; }
.rf-zeile-hinweis { align-self: flex-start; font-size: 14px; line-height: 1.4; color: var(--ta-text-sekundaer); padding: 6px 10px; background: var(--ta-flaeche); border-radius: 8px; }
.rf-zeile-hinweis p { margin: 0; }
.rf-lieferung { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ta-text-sekundaer); }
.rf-lieferung--ja svg { color: var(--ta-gruen-text); }
.rf-lieferung--bald svg { color: var(--ta-stern); }
.rf-lieferung--nein { color: var(--ta-rot); font-weight: 600; }
.rf-zeile-kennzahl { grid-area: kennzahl; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ta-text-gedaempft); }
.rf-seitenpreis strong { font-size: 15px; color: var(--ta-text); }
.rf-reichweite { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rf-reichweite img { width: 12px; height: 15px; }
.rf-zeile-preis { grid-area: preis; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; line-height: 1.2; }
.rf-zeile-preis s { font-size: 14px; color: var(--ta-text-gedaempft); }
.rf-zeile-preis strong { font-family: var(--ta-schrift-titel); font-size: 24px; font-weight: 800; }
.rf-zeile-preis .shopping-cart-mwst, .rf-zeile-preis .product-info-grundpreis { font-size: 12px !important; color: var(--ta-text-sekundaer); text-align: right !important; }
.rf-zeile-preis small { font-size: 12px; color: var(--ta-text-gedaempft); margin-top: 2px; }
.rf-zeile-preis small a { color: inherit !important; text-decoration: underline; }
.rf-zeile-kaufen { grid-area: kaufen; margin: 0; display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 8px; }
.rf-zeile-kaufen select { height: 44px; border: 1px solid var(--ta-feldrand); border-radius: 10px; padding: 0 8px; font-size: 16px; background: var(--ta-weiss); }
.rf-zeile-kaufen button { height: 44px; border: 0; border-radius: 10px; padding: 0 14px; background: var(--ta-gruen-kaufen); color: var(--ta-weiss); font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.rf-zeile-kaufen button:hover { filter: brightness(.9); }
.rf-zeile-kaufen button:disabled { background: var(--ta-badge-bg); color: var(--ta-text-gedaempft); cursor: default; filter: none; }
.rf-zeile-kaufen:has(.rf-im-korb) { flex-wrap: wrap; }
.rf-im-korb { flex-basis: 100%; text-align: right; font-size: 13px; color: var(--ta-gruen-text); display: inline-flex; justify-content: flex-end; align-items: center; gap: 4px; }
.rf-fussnote { margin-top: 16px; font-size: 13px; color: var(--ta-text-gedaempft); }
.rf-fussnote a { color: inherit; text-decoration: underline; text-decoration-color: var(--ta-feldrand); text-underline-offset: 3px; }   /* Link aus TEXT_COLOR_PRICE_HINT */
.rf-kat-seo { color: var(--ta-text-sekundaer); font-size: 15px; line-height: 1.6; max-width: 900px; }
.rf-kat-seo h2, .rf-kat-seo h3 { font-family: var(--ta-schrift-titel); font-size: 20px; margin: 12px 0 4px; color: var(--ta-text); }
.rf-kat-seo img { max-width: 100%; height: auto; }
.rf-seo.rf-zu .rf-kat-seo { max-height: 9em; }

/* ================================================================ Produktseite */
.rf-pi-oben { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.rf-pi-galerie { padding: 24px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.rf-pi-hauptbild { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 12px; }
.rf-pi-hauptbild img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.rf-pi-ohne-bild, .rf-pi-platzhalter { background: var(--ta-flaeche); color: var(--ta-feldrand); }
.rf-pi-platzhalter { padding: 40px; border-radius: 12px; }
.rf-pi-text details summary { font-weight: 600; color: var(--ta-text); padding: 12px 0; }
.rf-pi-daumen { display: flex; flex-wrap: wrap; gap: 10px; }
.rf-pi-daumen a { width: 72px; height: 72px; padding: 4px; box-sizing: border-box; border: 1px solid var(--ta-linie); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.rf-pi-daumen a:hover, .rf-pi-daumen a.rf-aktiv { border-color: var(--ta-text); }
.rf-pi-daumen img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.rf-pi-kauf { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rf-pi-kauf h1 { font-size: 28px; line-height: 1.25; overflow-wrap: anywhere; }
.rf-pi-bewertet .rf-zeile-sterne { font-size: 15px; }
.rf-pi-hinweis { align-self: stretch; background: var(--ta-weiss); border: 1px solid var(--ta-linie); padding: 10px 14px; }
.rf-pi-kennzahlen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-size: 14px; color: var(--ta-text-gedaempft); }
.rf-pi-kaufbox { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.rf-pi-preis { display: flex; flex-direction: column; gap: 4px; line-height: 1.2; }
.rf-pi-preis s { font-size: 16px; color: var(--ta-text-gedaempft); }
.rf-pi-preis strong { font-family: var(--ta-schrift-titel); font-size: 36px; font-weight: 800; }
.rf-pi-preis .shopping-cart-mwst, .rf-pi-preis .product-info-grundpreis { font-size: 14px !important; color: var(--ta-text-sekundaer); text-align: left !important; }
.rf-pi-preis small { font-size: 14px; color: var(--ta-text-gedaempft); }
.rf-pi-preis small a { color: inherit !important; text-decoration: underline; }
.rf-pi-kaufbox .rf-lieferung { font-size: 15px; }
.rf-pi-kaufbox .rf-lieferung a { color: inherit; text-decoration: underline; }
.rf-pi-kaufen { margin: 0; display: flex; gap: 10px; }
.rf-pi-kaufen select { height: 52px; border: 1px solid var(--ta-feldrand); border-radius: 10px; padding: 0 12px; font-size: 17px; background: var(--ta-weiss); }
.rf-pi-kaufen button { flex: 1; height: 52px; border: 0; border-radius: 10px; background: var(--ta-gruen-kaufen); color: var(--ta-weiss); font-size: 17px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; }
.rf-pi-kaufen button:hover { filter: brightness(.9); }
.rf-pi-kaufen button:disabled { background: var(--ta-badge-bg); color: var(--ta-text-gedaempft); cursor: default; filter: none; }
.rf-pi-im-korb { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ta-gruen-text); }
.rf-pi-sparen { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--ta-feldrand); border-radius: 10px; font-size: 15px; }
.rf-pi-sparen a { color: inherit; }
.rf-pi-sparen-name:hover { text-decoration: underline; }
.rf-pi-sparen-wege { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; }
.rf-pi-sparen-kaufen { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--ta-gruen-kaufen); border-radius: 10px; color: var(--ta-gruen-text) !important; font-weight: 700; }
.rf-pi-sparen-kaufen:hover { background: var(--ta-gruen-kaufen); color: var(--ta-weiss) !important; }
.rf-pi-sparen-ansehen { display: inline-flex; align-items: center; gap: 6px; text-decoration: underline; }
.rf-pi-sparen-bild img { display: block; width: 64px; height: auto; }
.rf-pi-sparen-text { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rf-pi-sparen-kopf { display: inline-flex; align-items: center; gap: 6px; color: var(--ta-gruen-text); font-weight: 700; }
.rf-pi-sparen-name { overflow-wrap: anywhere; }
.rf-pi-sparen-text small { font-size: 14px; color: var(--ta-text-gedaempft); }
.rf-pi-sparen-betrag { align-self: flex-start; margin-top: 6px; padding: 4px 10px; border-radius: 6px; background: var(--ta-gruen-kaufen); color: var(--ta-weiss); font-size: 14px; }
.rf-pi-wahl { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.rf-pi-wahl > span { font-weight: 700; }
.rf-pi-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rf-pi-chips a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--ta-linie); border-radius: 999px; background: var(--ta-weiss); }
.rf-pi-chips a:hover { border-color: var(--ta-feldrand); }
.rf-pi-chips img { width: 12px; height: 15px; }
.rf-pi-chip-mehr { font-weight: 700; }

.rf-pi-sprung { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.rf-pi-sprung a { padding: 10px 16px; border: 1px solid var(--ta-linie); border-radius: 999px; background: var(--ta-weiss); font-weight: 600; font-size: 15px; white-space: nowrap; }
.rf-pi-sprung a:hover { border-color: var(--ta-feldrand); }
.rf-pi-zweier { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; align-items: start; }
.rf-pi-block { padding: 28px 32px; display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 16px; }
.rf-produktseite .rf-abschnitt.rf-pi-block { margin-top: 20px; }
.rf-pi-block h2 { font-size: 22px; line-height: 1.25; }
.rf-pi-merkmale { margin: 0; display: flex; flex-direction: column; }
.rf-pi-merkmale > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--ta-linie); }
.rf-pi-merkmale > div:last-child { border-bottom: 0; }
.rf-pi-merkmale dt { color: var(--ta-text-gedaempft); }
.rf-pi-merkmale dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.rf-pi-gruende { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rf-pi-gruende li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.rf-pi-gruende svg { color: var(--ta-gruen-text); margin-top: 2px; }
.rf-pi-gruende a { text-decoration: underline; text-decoration-color: var(--ta-feldrand); text-underline-offset: 3px; }
/* Beschreibung und Pflichtblöcke: gepflegtes HTML und die Render-Helfer des Shops (products_description, sans_semibold) */
.rf-pi-text { gap: 12px; color: var(--ta-text-sekundaer); line-height: 1.6; }
.rf-pi-beschreibung { overflow-wrap: anywhere; }
.rf-pi-text h2:not(:first-child), .rf-pi-beschreibung h2, .rf-pi-beschreibung h3, .rf-pi-text .sans_semibold { font-family: var(--ta-schrift-titel); font-size: 18px !important; font-weight: 700; color: var(--ta-text); margin: 12px 0 4px; }
.rf-pi-text img { max-width: 100%; height: auto; }
.rf-pi-text table { max-width: 100%; border-collapse: collapse; }
.rf-pi-text a { text-decoration: underline; text-decoration-color: var(--ta-feldrand); text-underline-offset: 3px; }
.rf-pi-einleitung { margin: 0; color: var(--ta-text-sekundaer); }
.rf-pi-druckerliste { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 24px; font-size: 15px; }
.rf-pi-druckerliste li { padding: 4px 0; break-inside: avoid; }
.rf-pi-druckerliste a { text-decoration: underline; text-decoration-color: var(--ta-feldrand); text-underline-offset: 3px; }
.rf-pi-bew { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: start; }
.rf-pi-bew-summe { display: flex; flex-direction: column; gap: 12px; }
.rf-pi-bew-note { font-size: 15px; color: var(--ta-text-gedaempft); }
.rf-pi-bew-note strong { font-family: var(--ta-schrift-titel); font-size: 36px; font-weight: 800; color: var(--ta-text); margin-right: 4px; }
.rf-pi-verteilung { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.rf-pi-verteilung li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 52px; align-items: center; gap: 10px; }
.rf-pi-balken { height: 8px; border-radius: 4px; background: var(--ta-badge-bg); overflow: hidden; }
.rf-pi-balken span { display: block; height: 100%; background: var(--ta-stern); }
.rf-pi-bew-regeln { margin: 0; font-size: 13px; color: var(--ta-text-gedaempft); }
.rf-pi-bew-liste { display: flex; flex-direction: column; }
.rf-pi-bewertung { padding: 16px 0; border-bottom: 1px solid var(--ta-linie); display: flex; flex-direction: column; gap: 6px; }
.rf-pi-bewertung:first-child { padding-top: 0; }
.rf-pi-bew-kopf { font-size: 14px; font-weight: 600; }
.rf-pi-bewertung p { margin: 0; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.rf-pi-bew-liste .rf-mehr { margin-top: 16px; }
.rf-pi-leiste { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 60px) / 4); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.rf-pi-leiste > * { scroll-snap-align: start; }

/* ================================================================ Suchergebnisse */
.rf-suche-kachel { justify-content: space-between; }
.rf-suche-kachel svg { color: var(--ta-text-gedaempft); }
.rf-suche-kachel b, .rf-produkt-info b, .rf-sv b { font-weight: 800; background: var(--ta-badge-bg); border-radius: 3px; }  /* Fundstelle, neutral: Rot bleibt Marke/Aktion */
.rf-suche-druckergruppe .rf-raster4 { padding-left: 20px; }  /* Druckergruppe eingerückt (suche-verbessern, Toms Wunsch 11.10.) */
.rf-preis s { display: block; font-size: 14px; color: var(--ta-text-gedaempft); margin-bottom: 2px; }
.rf-preis .shopping-cart-mwst { font-size: 12px !important; color: var(--ta-text-sekundaer); text-align: left !important; margin-top: 4px; }
.rf-kaufen button:disabled { background: var(--ta-badge-bg); color: var(--ta-text-gedaempft); cursor: default; filter: none; }
.rf-produkt .rf-lieferung { font-size: 13px; }
.rf-produkt .rf-reichweite img { width: 12px; height: 15px; }
.rf-suche-im-korb { display: inline-flex !important; align-items: center; gap: 4px; color: var(--ta-gruen-text) !important; }
.rf-suche-leer { padding: 32px 36px; display: flex; flex-direction: column; gap: 14px; }
.rf-suche-leer h2 { font-size: 24px; }
.rf-suche-leer h3 { font-family: var(--ta-schrift-titel); font-size: 18px; margin: 8px 0 0; }
.rf-suche-leer p, .rf-suche-leer ul { margin: 0; color: var(--ta-text-sekundaer); }
.rf-suche-leer ul { padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }

/* ================================================================ Warenkorb */
.rf-wk-meldung { padding: 16px 20px; border-left: 4px solid var(--ta-stern); }
.rf-wk-raster { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.rf-wk-liste { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.rf-wk-position { display: grid; grid-template-columns: 90px minmax(0, 1fr) 130px 140px; grid-template-areas: "bild info menge preise"; gap: 20px; align-items: center; padding: 16px 20px; }
.rf-wk-bild { grid-area: bild; width: 90px; height: 90px; display: flex; align-items: center; justify-content: center; }
.rf-wk-bild img { max-width: 90px; max-height: 90px; width: auto; height: auto; }
.rf-wk-bild .rf-pi-platzhalter { width: 100%; height: 100%; padding: 16px; box-sizing: border-box; }
.rf-wk-info { grid-area: info; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rf-wk-info h2 { font-family: var(--ta-schrift); font-size: 16px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.rf-wk-nummer { margin: 0; font-size: 13px; color: var(--ta-text-gedaempft); }
.rf-wk-info .shopping-cart-mwst { font-size: 12px !important; color: var(--ta-text-sekundaer); text-align: left !important; }
.rf-wk-menge { grid-area: menge; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.rf-wk-menge label { font-size: 13px; color: var(--ta-text-gedaempft); }
.rf-wk-menge select { height: 40px; min-width: 72px; border: 1px solid var(--ta-feldrand); border-radius: 10px; padding: 0 10px; font-size: 16px; background: var(--ta-weiss); }
.rf-wk-entfernen { font-size: 13px; color: var(--ta-text-gedaempft) !important; text-decoration: underline; text-underline-offset: 3px; }
.rf-wk-preise { grid-area: preise; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.rf-wk-preise small { font-size: 12px; color: var(--ta-text-gedaempft); }
.rf-wk-preise strong { font-family: var(--ta-schrift-titel); font-size: 20px; font-weight: 800; white-space: nowrap; }
.rf-wk-summe { padding: 24px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; }
.rf-wk-summe h2 { font-size: 20px; }
.rf-wk-summe dl { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.rf-wk-summe dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rf-wk-summe dt { color: var(--ta-text-sekundaer); }
.rf-wk-summe dd { margin: 0; font-weight: 600; white-space: nowrap; }
.rf-wk-gesamt { padding-top: 10px; border-top: 2px solid var(--ta-text); }
.rf-wk-gesamt dt, .rf-wk-gesamt dd { font-family: var(--ta-schrift-titel); font-weight: 800; font-size: 18px; color: var(--ta-text); }
.rf-wk-versandfrei { margin: 0; font-size: 14px; color: var(--ta-gruen-text); }
.rf-wk-versandfrei a { color: inherit !important; text-decoration: underline; }
.rf-wk-kasse { color: var(--ta-weiss) !important; }
.rf-wk-express { display: flex; justify-content: center; }
.rf-wk-express img { max-width: 100%; height: auto; }
.rf-wk-hinweis { margin: 0; display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ta-text-gedaempft); }
.rf-wk-hinweis svg { margin-top: 2px; }
.rf-wk-weiter { margin-top: 24px; }

/* ================================================================ Tablet (bis 1023 px)
   Gleiche Grenzen wie der übrige Shop (Feature 150: Tablet 768–1024, Mobil bis 767). Auf Touch-Geräten gibt es
   kein Hover — die Ausklappmenüs entfallen, die Hauptpunkte verlinken direkt. */
@media (max-width: 1023px) {
  .rf-gross { display: none !important; }
  .rf-kopf-zeile { gap: 24px; }
  /* Suche darf schrumpfen (mobil-2): bei 768–786 px passte die Zeile nicht, der Warenkorb-Knopf ragte bis 18,5 px
     hinaus und wurde am Rand abgeschnitten. Greift nur, wo die Zeile zu schmal ist. Wächter: MobilUeberlaufTest. */
  .rf-suche, .rf-suche input { min-width: 0; }
  /* Bilder im gepflegten Text auch dann maßstabsgetreu, wenn Breite und Höhe im style-Attribut stehen
     (style="width: 530px; height: 343px" — schlägt height: auto unten): sonst gestaucht, gemessen 250×343 statt
     250×162. Über die Höhe bemessene (style="height: 80px; width: auto", IT-Recht-Texte) bleiben (mobil-2). */
  .rf-inhalt-text img[style*="width"][style*="height"]:not([style*="width: auto"]):not([style*="width:auto"]) { height: auto !important; }
  .rf-logo img { width: 200px; height: 50px; }
  .rf-nav .rf-breite { justify-content: flex-start; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .rf-nav .rf-breite::-webkit-scrollbar { display: none; }
  .rf-nav-haupt > a, .rf-nav-haupt > .rf-menue > a, .rf-nav-neben a { white-space: nowrap; }
  .rf-menue-liste { display: none !important; }
  .rf-menue svg { display: none; }
  .rf-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .rf-hero > .rf-karte { height: auto; }
  .rf-finder-form { margin-top: 8px; }
  .rf-service { min-height: 400px; }
  .rf-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rf-raster6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rf-raster4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rf-buero { grid-template-columns: minmax(0, 1fr); }
  .rf-buero-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rf-hersteller img, .rf-hersteller map { display: none; }
  .rf-hersteller-liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .rf-hersteller-liste a { padding: 8px 14px; border: 1px solid var(--ta-linie); border-radius: 999px; background: var(--ta-weiss); font-weight: 600; font-size: 15px; }
  .rf-raster3 { grid-template-columns: minmax(0, 1fr); }
  .rf-fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rf-kat-kopf { flex-direction: column; }
  .rf-kat-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rf-zeile { grid-template-columns: 96px minmax(0, 1fr) 190px; grid-template-areas: "bild info preis" "bild kennzahl kaufen"; row-gap: 12px; }
  .rf-zeile-bild { width: 96px; }
  .rf-zeile-bild img { max-width: 96px; }
  .rf-pi-oben { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .rf-pi-galerie { position: static; }
  .rf-pi-hauptbild { width: 100%; max-width: 420px; margin: 0 auto; }
  .rf-pi-daumen { justify-content: center; }
  .rf-pi-zweier, .rf-pi-bew { grid-template-columns: minmax(0, 1fr); }
  .rf-pi-bew { gap: 24px; }
  .rf-pi-druckerliste { columns: 2; }
  .rf-pi-leiste { grid-auto-columns: calc((100% - 40px) / 3); }
  .rf-wk-raster { grid-template-columns: minmax(0, 1fr); }
  .rf-wk-summe { position: static; }
}

/* ================================================================ Handy (bis 767 px) */
@media (max-width: 767px) {
  .rf-suche-druckergruppe .rf-raster4 { padding-left: 0; }
  .rf-topbar .rf-breite { height: 36px; font-size: 13px; }
  .rf-topbar-gruppe { gap: 16px; }

  /* Kopf: Logo | Warenkorb, darunter die Suche über die volle Breite */
  .rf-kopf-zeile { height: auto; flex-wrap: wrap; gap: 12px; padding: 12px 0 14px; }
  .rf-logo { flex: 1; }
  .rf-logo img { width: 168px; height: 42px; object-position: left center; }
  .rf-korb { padding: 8px 12px; gap: 10px; }
  .rf-korb-text small { display: none; }
  .rf-suche { order: 3; flex-basis: 100%; height: 50px; }
  .rf-suche-lupe { padding-left: 14px; }
  .rf-suche input { font-size: 16px; padding: 0 10px; } /* 16 px: iOS zoomt sonst beim Antippen */
  .rf-suche button { width: 84px; font-size: 16px; }
  .rf-sv { grid-template-columns: minmax(0, 1fr); }
  .rf-sv section + section { padding-top: 4px; }
  .rf-nav .rf-breite { height: 48px; }
  .rf-nav-haupt > a, .rf-nav-haupt > .rf-menue > a { padding: 0 12px; font-size: 15px; }

  /* Hero */
  .rf-hero { margin-top: 20px; gap: 16px; }
  .rf-hero > .rf-karte { padding: 24px 20px; }
  .rf-finder { gap: 16px; }
  .rf-finder h2 { font-size: 26px; }
  .rf-finder-kopf p { font-size: 16px; }
  .rf-finder-felder, .rf-finder-felder.rf-vier { grid-template-columns: minmax(0, 1fr); }
  .rf-dachzeile { font-size: 12px; }
  .rf-service { min-height: 0; padding-bottom: 0 !important; display: block; }
  .rf-service-text { width: auto; gap: 18px; padding-bottom: 120px; }
  .rf-service h2 { font-size: 24px; }
  .rf-service-hund { right: -12px; bottom: 0; width: auto; height: 170px; object-fit: contain; object-position: right bottom; }
  .rf-service .rf-mehr { position: relative; z-index: 1; }

  .rf-trust { margin-top: 16px; gap: 10px; }
  .rf-trust > * { padding: 12px; gap: 10px; align-items: flex-start; }
  .rf-trust strong { font-size: 14px; }
  .rf-trust small { font-size: 12px; }
  .rf-trust .rf-sterne svg { width: 12px; height: 12px; }
  .rf-trust > :last-child { flex-direction: column; gap: 4px; }

  .rf-abschnitt, .rf-buero { margin-top: 40px; }
  .rf-abschnitt { gap: 16px; }
  .rf-titel { font-size: 22px; }
  .rf-raster6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rf-kachel { flex-direction: row; align-items: center; gap: 10px; padding: 12px; font-size: 15px; }
  .rf-kachel--dunkel { padding: 11px; }
  .rf-kachel .rf-symbolfeld { width: 36px; height: 36px; border-radius: 10px; }

  /* Wischreihen: Angebote und Bewertungen seitlich, die nächste Karte lugt hervor */
  .rf-wisch { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -16px; padding: 0 16px 6px; scroll-padding: 0 16px; scrollbar-width: none; }
  .rf-wisch::-webkit-scrollbar { display: none; }
  .rf-wisch > * { flex: 0 0 82%; scroll-snap-align: start; }
  .rf-produkt-bild { height: 180px; }
  .rf-produkt-bild img { width: 170px; height: 170px; }

  .rf-buero { gap: 12px; }
  .rf-buero-intro { padding: 28px 22px; gap: 16px; }
  .rf-buero-intro h2 { font-size: 24px; }
  .rf-buero-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rf-buero-raster a { flex-direction: row; align-items: center; padding: 12px; gap: 10px; font-size: 14px; }
  .rf-buero-raster a svg { width: 22px; height: 22px; }
  .rf-buero-raster a.rf-alle { grid-column: 1 / -1; flex-direction: column; align-items: flex-start; gap: 2px; }

  .rf-hersteller .rf-dachzeile { text-align: center; }
  .rf-kopfzeile { flex-direction: column; align-items: flex-start; gap: 6px; }
  .rf-bew-links { align-items: flex-start; }
  .rf-bewertung { padding: 22px; }

  .rf-seo { padding: 24px 20px 20px; }
  .rf-seo h1 { font-size: 20px; }

  .rf-fuss { margin-top: 40px; }
  .rf-fuss-raster { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 40px 0 28px; }
  .rf-fuss-unten { flex-direction: column; gap: 8px; }
  .rf-absperrband { height: 32px; }

  .rf-brotkrume { margin-top: 12px; font-size: 13px; }
  .rf-kat-titel h1 { font-size: 24px; }
  .rf-kat-kacheln { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rf-gruppe { margin-top: 32px; }
  .rf-gruppe-kopf h2 { font-size: 19px; }
  .rf-zeile { grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "bild info" "kennzahl preis" "kaufen kaufen"; gap: 12px; padding: 14px; }
  .rf-zeile-bild { width: 76px; height: 76px; align-self: start; }
  .rf-zeile-bild img { max-width: 76px; max-height: 76px; }
  .rf-zeile-info h3 { font-size: 15px; }
  .rf-zeile-preis strong { font-size: 22px; }
  .rf-zeile-kaufen { justify-content: stretch; }
  .rf-zeile-kaufen button { flex: 1; justify-content: center; }
  .rf-im-korb { justify-content: flex-start; }
  .rf-pi-oben { margin-top: 12px; gap: 16px; }
  .rf-pi-galerie { padding: 16px; }
  .rf-pi-hauptbild { max-width: 280px; }
  .rf-pi-daumen a { width: 60px; height: 60px; }
  .rf-pi-kauf h1 { font-size: 22px; }
  .rf-pi-kaufbox { padding: 18px; }
  .rf-pi-preis strong { font-size: 30px; }
  .rf-pi-sprung { flex-wrap: nowrap; overflow-x: auto; margin: 32px -16px 0; padding: 0 16px; width: auto; scrollbar-width: none; }
  .rf-pi-sprung::-webkit-scrollbar { display: none; }
  .rf-pi-block { padding: 22px 20px; }
  .rf-pi-merkmale > div { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
  .rf-pi-druckerliste { columns: 1; }
  .rf-pi-leiste { grid-auto-columns: 78%; gap: 12px; margin: 0 -16px; padding: 0 16px 6px; scroll-padding: 0 16px; scrollbar-width: none; }
  .rf-pi-leiste::-webkit-scrollbar { display: none; }
  /* Suchergebnisse als Liste: Bild links, Text rechts, Preis und Korb darunter */
  .rf-suchseite .rf-raster4 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .rf-suchseite .rf-produkt { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-areas: "bild info" "fuss fuss"; gap: 10px 14px; padding: 14px; }
  .rf-suchseite .rf-produkt-bild { grid-area: bild; height: 88px; align-self: start; }
  .rf-suchseite .rf-produkt-bild img { width: 88px; height: 88px; }
  .rf-suchseite .rf-produkt-bild .rf-pi-platzhalter { padding: 16px; }
  .rf-suchseite .rf-badge { position: static; display: none; }
  .rf-suchseite .rf-produkt-info { grid-area: info; }
  .rf-suchseite .rf-produkt-fuss { grid-area: fuss; padding-top: 10px; }
  /* Warenkorb: Bild | Name, darunter Menge | Preis */
  .rf-wk-position { grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "bild info" "menge preise"; gap: 12px 14px; padding: 14px; }
  .rf-wk-bild { width: 72px; height: 72px; align-self: start; }
  .rf-wk-bild img { max-width: 72px; max-height: 72px; }
  .rf-wk-menge { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
  .rf-wk-menge label { width: 100%; }
  .rf-wk-summe { padding: 20px; }
}

/* ================================================================ Kasse (checkout.php, kasse.tpl.php)
   Das Markup der Felder, Zahlarten, Positionen und Summen kommt unverändert aus includes/checkout/ (auch per AJAX
   neu geladen) — die Regeln hier gestalten deshalb die Altklassen, eng unter .rf-kasse. style.css und
   css/checkout_style.css lädt das Design nicht. Bestellknopf rot (Aktion), Grün bleibt „In den Warenkorb“. */
.rf-kasse-kopf { background: var(--ta-weiss); border-bottom: 1px solid var(--ta-linie); }
.rf-kasse-kopf-zeile { height: 88px; display: flex; align-items: center; gap: 32px; }
.rf-kasse-kopf .rf-logo img { width: 210px; height: 52px; }
.rf-kasse-sicher { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ta-text-sekundaer); }
.rf-kasse-telefon { margin-left: auto; display: flex; align-items: center; gap: 10px; font-weight: 700; }
.rf-kasse-telefon span { display: flex; flex-direction: column; line-height: 1.25; }
.rf-kasse-telefon small { font-size: 12px; font-weight: 400; color: var(--ta-text-gedaempft); }
.rf-kasse { padding-bottom: 64px; font-size: 15px; }
.rf-kasse-titel { margin-top: 24px; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 16px; }
.rf-kasse-titel h1 { font-size: 30px; line-height: 1.2; }
.rf-kasse-titel p { margin: 6px 0 0; color: var(--ta-text-gedaempft); }
.rf-kasse-meldungen { margin-top: 20px; gap: 12px; }
.rf-kasse .co-err-box { padding: 16px 20px; background: var(--ta-weiss); border: 1px solid var(--ta-linie); border-left: 4px solid var(--ta-rot); border-radius: 12px; line-height: 1.5; }
.rf-kasse form { margin: 0; }
.rf-kasse-raster { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: start; }
.rf-kasse-spalte { display: flex; flex-direction: column; gap: 24px; }
.rf-kasse-schritt { padding: 24px 28px; }
.rf-kasse-schritt > h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 20px; margin-bottom: 18px; }
.rf-kasse-schritt > h2 small { font-family: var(--ta-schrift); font-weight: 400; font-size: 14px; color: var(--ta-text-gedaempft); }
.rf-kasse-nr { width: 30px; height: 30px; border-radius: 50%; background: var(--ta-text); color: var(--ta-weiss); font-size: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rf-kasse-pruefen { margin-top: 24px; gap: 0; }

/* Felder (billing_address.php, shipping_address.php) */
.rf-kasse .checkout_address_line { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; position: relative; }
.rf-kasse .checkout_address_label { flex: 0 0 140px; font-size: 14px; color: var(--ta-text-sekundaer); }
.rf-kasse .checkout_address_input { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px; }
.rf-kasse .checkout_address_input.zip_code_input { flex: 0 0 110px; }
.rf-kasse .street_nr_label { flex: 0 0 auto; font-size: 14px; color: var(--ta-text-sekundaer); }
.rf-kasse .checkout_address_input.street_nr_input { flex: 0 0 90px; }
.rf-kasse .checkout_address_input input, .rf-kasse .checkout_address_input select, .rf-kasse textarea, .rf-kasse .coupon_input, .rf-kasse-dialogzeile input {
  width: 100%; height: 44px; box-sizing: border-box; border: 1px solid var(--ta-feldrand); border-radius: 10px; padding: 0 12px; font-size: 16px; background: var(--ta-weiss); color: var(--ta-text);
}
.rf-kasse textarea { height: 96px; padding: 10px 12px; resize: vertical; }
.rf-kasse input:focus, .rf-kasse select:focus, .rf-kasse textarea:focus { outline: none; border-color: var(--ta-text); box-shadow: 0 0 0 3px rgba(226, 0, 26, .15); }
.rf-kasse .error_custom, .rf-kasse .fieldRed { border-color: var(--ta-rot) !important; }
.rf-kasse .fieldRed { border: 1px solid; border-radius: 8px; padding: 4px 6px; }
.rf-kasse .required_icon_custom { display: none !important; }
.rf-kasse .success_icon_custom { flex: 0 0 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F7A3E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / 14px; }
.rf-kasse .co-gender-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.rf-kasse input[type="radio"], .rf-kasse input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--ta-text); flex-shrink: 0; }
.rf-kasse .co-spacer20 { height: 4px; }
.rf-kasse .legal-note { font-size: 13px; line-height: 1.5; color: var(--ta-text-gedaempft); margin: -2px 0 12px 150px; }
.rf-kasse .label_checkbox_checkout { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 10px; margin: 16px 0 6px; font-weight: 600; }
.rf-kasse .co-alert { color: var(--ta-rot); font-weight: 700; }
.rf-kasse .co-login-row { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; background: var(--ta-flaeche); font-size: 14px; }
.rf-kasse .co-login-link { color: var(--ta-rot) !important; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rf-kasse-liefern { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--ta-linie); display: flex; flex-direction: column; gap: 10px; }
.rf-kasse-liefern > label { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.rf-kasse #changeShippingAddressTable { position: static !important; margin: 0 0 12px !important; }
.rf-kasse .redSmallButton { display: inline-flex; padding: 8px 14px; border: 1px solid var(--ta-feldrand); border-radius: 10px; font-weight: 700; font-size: 14px; }
.rf-kasse .ui-button { display: none; }

/* Zahl- und Versandarten (payment_method.php, shipping_method.php) */
.rf-kasse .checkout_payment_line { position: relative; display: flex; align-items: center; gap: 8px; padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--ta-linie); border-radius: 12px; }
.rf-kasse .checkout_payment_line:has(input[name="payment"]:checked) { border-color: var(--ta-text); box-shadow: inset 0 0 0 1px var(--ta-text); }
.rf-kasse .checkout_payment_method { flex: 1 1 auto; min-width: 0; }
.rf-kasse .checkout_payment_method table, .rf-kasse .sm-table, .rf-kasse #shippingMethods table { width: 100%; border-collapse: collapse; }
.rf-kasse .checkout_payment_method td { padding: 2px 0; vertical-align: middle !important; }
.rf-kasse .pm-vtop input { display: block; }
.rf-kasse .checkout_payment_method td.payment_methods_text { padding-left: 12px; font-weight: 600; cursor: pointer; }
.rf-kasse .pm-info-icon { flex: 0 0 auto; cursor: pointer; display: flex; padding: 4px; border-radius: 6px; }
.rf-kasse .pm-info-icon img { width: 18px; height: 18px; }
.rf-kasse .pm-info-icon:focus-visible { outline: 2px solid var(--ta-text); }
.rf-kasse .tooltip1 { right: 0; top: calc(100% + 6px); z-index: 20; width: min(400px, 100%); }
.rf-kasse .tooltip2 { background: var(--ta-weiss); border: 1px solid var(--ta-linie); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); overflow: hidden; }
.rf-kasse .pm-tip-box { font-size: 14px; line-height: 1.5; }
.rf-kasse .pm-tip-box .checkout_box_heading { padding: 10px 16px; background: var(--ta-flaeche); font-weight: 700; }
.rf-kasse .pm-tip-pad { padding: 12px 16px 14px; }
.rf-kasse .co-clear { clear: both; }
.rf-kasse .checkout_payment_line > .co-clear { display: none; }
.rf-kasse .sm-head10 { padding-top: 10px; }

/* Positionen, Lieferinfo, Summen (cart.php, deliveryinfo.php, totals.php) */
.rf-kasse #shoppingCart { display: flex; flex-direction: column; }
.rf-kasse .cart_content_heading { display: grid; grid-template-columns: minmax(0, 1fr) 130px 120px 120px; gap: 16px; padding: 0 0 10px; border-bottom: 1px solid var(--ta-linie); font-size: 13px; color: var(--ta-text-gedaempft); }
.rf-kasse .cart_content_heading > div:not(:first-child) { text-align: right; }
.rf-kasse .cart_content_heading_product { text-align: left; }
.rf-kasse .cart_content_products { display: grid; grid-template-columns: minmax(0, 1fr) 130px 120px 120px; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--ta-linie); }
.rf-kasse .cart_content_products > .co-clear { display: none; }
.rf-kasse .cart_content_products_product { display: flex; align-items: center; gap: 16px; min-width: 0; }
.rf-kasse .cart_content_products_product_image { flex: 0 0 72px; font-size: 0; }
.rf-kasse .cart_content_products_product_image img { max-width: 72px; max-height: 72px; width: auto; height: auto; }
.rf-kasse .cart_content_products_product_name { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rf-kasse .shopping_cart_link { font-weight: 600; overflow-wrap: anywhere; }
.rf-kasse .ct-status-wrap { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ta-text-sekundaer); }
.rf-kasse .ct-status-wrap a { display: flex; align-items: center; gap: 8px; }
.rf-kasse .ct-status-icon img, .rf-kasse .ct-status-red-icon img { display: block; width: 16px; height: auto; }
.rf-kasse .cart_content_products_product_qty { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.rf-kasse .cart_content_products_product_qty select { height: 40px; min-width: 72px; border: 1px solid var(--ta-feldrand); border-radius: 10px; padding: 0 10px; font-size: 16px; background: var(--ta-weiss); }
.rf-kasse .ct-gap10 { display: none; }
.rf-kasse .ct-remove { font-size: 13px; color: var(--ta-text-gedaempft) !important; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rf-kasse .ct-remove-x { display: none; }
.rf-kasse .cart_content_products_product_price { text-align: right; white-space: nowrap; }
.rf-kasse .cart_content_products_product_price:last-of-type { font-weight: 700; }
.rf-kasse .cart_labels_extra { display: none; }
.rf-kasse .attributes_text { font-size: 13px; color: var(--ta-text-gedaempft); }
.rf-kasse-summenzeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 32px; padding: 20px 0; border-bottom: 1px solid var(--ta-linie); }
.rf-kasse-lieferinfo { font-size: 14px; color: var(--ta-text-sekundaer); }
.rf-kasse-lieferinfo .di-block, .rf-kasse-lieferinfo .di-block-pb { display: block; }
.rf-kasse-lieferinfo .sans_semibold { font-weight: 700; color: var(--ta-text); }
.rf-kasse-lieferinfo .di-gap55 { height: 14px; }
.rf-kasse-lieferinfo .img_shipping { display: inline-flex; align-items: center; height: 36px; margin: 6px 12px 0 0; }
.rf-kasse-lieferinfo .img_shipping img { height: 28px; width: auto; max-width: 120px; }
.rf-kasse .tt-table { width: 100%; border-collapse: collapse; }
.rf-kasse .tt-table td { padding: 4px 0; }
.rf-kasse .tt-table td b { font-weight: 600; }
.rf-kasse .tt-table hr { border: 0; border-top: 2px solid var(--ta-text); margin: 6px 0; }
.rf-kasse .tt-table tr:last-child td, .rf-kasse .tt-table tr:last-child td b { font-family: var(--ta-schrift-titel); font-weight: 800; font-size: 18px !important; }
.rf-kasse .tt-table td[align="right"] { width: auto !important; white-space: nowrap; }
.rf-kasse .tt-foot { margin-top: 8px; font-size: 14px; color: var(--ta-gruen-text); }
.rf-kasse .tt-free a { color: inherit !important; text-decoration: underline; }

/* Gutschein, Zustimmung, Bestellknopf */
.rf-kasse-gutschein { padding: 20px 24px; font-size: 14px; }
.rf-kasse-gutschein summary { cursor: pointer; font-weight: 600; }
.rf-kasse-gutschein-feld { margin-top: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rf-kasse-gutschein #coupon_message { margin-top: 10px; }
.rf-kasse-gutschein-feld .coupon_input { width: 240px; }
.rf-kasse-gutschein-feld .rf-knopf-zweit { align-self: auto; }
#coupon_message:empty { display: none; }
.rf-kasse-zustimmung { margin-top: 20px; padding: 16px 18px; border: 1px solid var(--ta-linie); border-radius: 12px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 1.5; }
.rf-kasse-zustimmung > label, .rf-kasse-newsletter { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.rf-kasse-zustimmung input, .rf-kasse-newsletter input { margin-top: 2px !important; }
.rf-kasse-zustimmung summary { cursor: pointer; font-weight: 600; }
.rf-kasse-zustimmung details { padding-left: 30px; }
.rf-kasse-newsletter { margin-top: 14px; padding: 0 18px; font-size: 14px; line-height: 1.5; color: var(--ta-text-sekundaer); }
.rf-kasse-abschluss { margin-top: 24px; display: flex; justify-content: flex-end; }
.rf-kasse .checkoutSubmitButton, .rf-pp-bestellen { min-width: 340px; height: 56px; padding: 0 28px; box-sizing: border-box; border-radius: 10px; background: var(--ta-rot); color: var(--ta-weiss); font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.rf-kasse .checkoutSubmitButton:hover, .rf-pp-bestellen:hover:not(:disabled) { background: var(--ta-rot-hover); }
.rf-kasse-hilfe { padding: 20px 24px; display: flex; gap: 14px; align-items: flex-start; font-size: 14px; color: var(--ta-text-sekundaer); }
.rf-kasse-hilfe p { margin: 4px 0 0; }
.rf-kasse-hilfe strong { color: var(--ta-text); }
/* Anmelde-Dialog (jQuery UI 1.8.5, Thema „redmond“) */
.rf-kasse-dialogzeile { margin: 0 0 8px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.rf-kasse-dialogzeile input { height: 34px; font-size: 14px; }
#loginBox { font-size: 13px; }
#loginBox p { margin: 0 0 8px; }
#loginWindowSubmit { height: 36px; font-size: 15px; }
.ui-dialog .rf-knopf { color: var(--ta-weiss); }

@media (max-width: 1023px) {
  .rf-kasse-raster { grid-template-columns: minmax(0, 1fr); }
  .rf-kasse-summenzeile { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 767px) {
  .rf-kasse-kopf-zeile { height: 64px; gap: 12px; }
  .rf-kasse-kopf .rf-logo img { width: 150px; height: 38px; }
  .rf-kasse-sicher { font-size: 14px; white-space: nowrap; }
  .rf-kasse-telefon span { display: none; }
  .rf-kasse-titel { flex-direction: column; align-items: flex-start; }
  .rf-kasse-titel h1 { font-size: 26px; }
  .rf-kasse-schritt { padding: 18px 16px; }
  .rf-kasse .checkout_address_line { flex-wrap: wrap; gap: 4px 8px; }
  .rf-kasse .checkout_address_label { flex: 0 0 100%; }
  .rf-kasse .legal-note { margin-left: 0; }
  .rf-kasse .cart_content_heading { display: none; }
  .rf-kasse .cart_content_products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .rf-kasse .cart_content_products_product { grid-column: 1 / -1; align-items: flex-start; }
  .rf-kasse .cart_content_products_product_qty, .rf-kasse .cart_content_products_product_price { align-items: flex-start; text-align: left; }
  .rf-kasse .cart_labels_extra { display: block; font-size: 12px; font-weight: 400; color: var(--ta-text-gedaempft); }
  .rf-kasse .tooltip1 { left: 0; right: auto; width: 100%; }
  .rf-kasse-abschluss { justify-content: stretch; }
  .rf-kasse-abschluss > div:first-child, .rf-kasse .checkoutSubmitButton, .rf-pp-bestellen { width: 100%; min-width: 0; }
  .rf-kasse-newsletter { padding: 0; }
}

/* ================================================================ Inhaltsseiten (content.php, gewaehrleistung.php, faq.php, 404.php)
   Der Text kommt gepflegt aus wysiwyg_pages bzw. includes/faq_inhalt.php (Absätze, Listen, Bilder, Tabellen, Iframes,
   Inline-Stile) — die Regeln geben ihm Lesbreite und Typografie, eng unter .rf-inhalt. */
.rf-inhaltsseite { padding-bottom: 64px; }
.rf-inhalt { margin-top: 16px; padding: 36px 44px; display: block; }
.rf-inhalt h1 { font-size: 30px; line-height: 1.2; margin: 0 0 20px; }
.rf-inhalt h2 { font-size: 22px; line-height: 1.3; margin: 32px 0 12px; }
.rf-inhalt h3, .rf-inhalt h4 { font-family: var(--ta-schrift-titel); font-weight: 800; font-size: 18px; line-height: 1.35; margin: 24px 0 8px; }
.rf-inhalt-text { max-width: 860px; overflow-wrap: break-word; }
.rf-inhalt-text p, .rf-inhalt-text ul, .rf-inhalt-text ol, .rf-inhalt-text table, .rf-inhalt-text details { margin: 0 0 14px; }
.rf-inhalt-text ul, .rf-inhalt-text ol { padding-left: 22px; }
.rf-inhalt-text li { margin-bottom: 4px; }
.rf-inhalt-text a { color: var(--ta-rot); text-decoration: underline; text-underline-offset: 3px; }
.rf-inhalt-text a:hover { color: var(--ta-rot-hover); }
.rf-inhalt-text img, .rf-inhalt-text video { max-width: 100%; height: auto; }
/* shipping: Inline max-width (497/340px) schlägt max-width:100% — ohne width liefen Zahlarten- und Versand-Bild bis 540
   bzw. 400px über den Rand. Keine refresh-Vorlage trägt image_full_size (Wächter MobilUeberlaufTest), live nur Seite 79. */
.rf-inhalt-text img.image_full_size { width: 100%; }
.rf-inhalt-text iframe { max-width: 100%; }
/* Blöcke mit fester Breite im gepflegten Text (style="width: 820px" an einer Überschrift, Seite 73) wurden am Rand
   abgeschnitten (mobil-2). Greift nur, wo die Breite den Inhalt übersteigt. Wächter: MobilUeberlaufTest. */
.rf-inhalt-text [style*="width"] { max-width: 100%; }
/* Kleine Inline-Schriften aus dem Altbestand (12–14px, nur Seite 79 shipping: Zahlungsarten, Auslandsliste) wirkten neben
   den 16px des Designs winzig (Tom 12.10.2026) — auf die Textgröße heben. em-Angaben (Überschriften) bleiben. */
.rf-inhalt-text :is([style*="font-size:12px"], [style*="font-size: 12px"], [style*="font-size:13px"], [style*="font-size: 13px"],
  [style*="font-size:14px"], [style*="font-size: 14px"]) { font-size: inherit !important; }
.rf-inhalt-text table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.rf-inhalt-text th, .rf-inhalt-text td { padding: 6px 10px; border: 1px solid var(--ta-linie); vertical-align: top; text-align: left; }
.rf-inhalt-text summary { cursor: pointer; font-weight: 600; }
.rf-inhalt-text .sans_bold, .rf-inhalt-text .sans_semibold { font-weight: 700; }
.rf-inhalt-text .contact_heading { font-family: var(--ta-schrift-titel); font-size: 22px; }
/* shipping: Überschriften 2–6 sind H2 (eine H1 je Seite) und behalten Abstand und Zeilenhöhe der H1 (.rf-inhalt h1). */
.rf-inhalt-text h2.contact_heading { line-height: 1.2; margin: 0 0 20px; }
.rf-inhalt-drucken { float: right; margin: 0 0 12px 16px; }
/* FAQ: Sprungliste, Themenzeilen, Fragen mit Auf- und Zuklappen (refresh.js) */
html:has(.rf-inhalt--faq) { scroll-behavior: smooth; }
.rf-inhalt--faq .rf-inhalt-text { max-width: none; }
.rf-inhalt--faq .headFAQ { display: block; }
.rf-inhalt--faq span.headFAQ { margin-bottom: 16px; color: var(--ta-text-gedaempft); }
.rf-inhalt--faq .faqBox { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.rf-inhalt--faq .faq_main_links { float: none !important; width: auto !important; padding: 0 !important; display: contents; }
.rf-inhalt--faq .faq_main_links > div { padding: 0 !important; }
.rf-inhalt--faq .pagefaqlink { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--ta-feldrand); border-radius: 999px; color: var(--ta-text) !important; text-decoration: none; font-weight: 600; }
.rf-inhalt--faq .pagefaqlink:hover { border-color: var(--ta-text); }
.rf-inhalt--faq .pagefaqlink img { width: 14px; height: auto; }
.rf-inhalt--faq .desktop_version { display: none !important; }
.rf-inhalt--faq .headingLineFaq { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 32px 0 8px; padding-bottom: 8px; border-bottom: 2px solid var(--ta-text); font-family: var(--ta-schrift-titel); font-weight: 800; font-size: 20px; scroll-margin-top: 16px; }
.rf-inhalt--faq .headingLineFaq > div { float: none !important; margin: 0 !important; }
.rf-inhalt--faq .pagetoplink { display: flex; align-items: center; gap: 4px; font-family: var(--ta-schrift); font-weight: 400; font-size: 13px; color: var(--ta-text-gedaempft) !important; text-decoration: none; }
.rf-inhalt--faq .pagetoplink div { float: none !important; margin: 0 !important; }
.rf-inhalt--faq .pagetoplink img { width: 14px; height: auto; }
.rf-inhalt--faq .question { position: relative; padding: 14px 36px 14px 0; border-bottom: 1px solid var(--ta-linie); font-weight: 600; cursor: pointer; }
.rf-inhalt--faq .question::after { content: ""; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.rf-inhalt--faq .question[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: -2px; }
.rf-inhalt--faq .question:focus-visible { outline: 2px solid var(--ta-text); outline-offset: 2px; }
.rf-inhalt--faq .answer { padding: 12px 0 4px; }
/* 404 */
.rf-fehlerseite { max-width: 860px; }
.rf-fehlerseite p { margin: 0 0 14px; }
.rf-fehlerseite-knopf { display: inline-flex; padding: 0 24px; color: var(--ta-weiss) !important; }

@media (max-width: 767px) {
  .rf-inhalt { padding: 22px 18px; }
  .rf-inhalt h1 { font-size: 26px; }
  .rf-inhalt h2 { font-size: 20px; }
  .rf-inhalt-drucken { display: none; }
  .rf-inhalt--faq .headingLineFaq { font-size: 18px; }
}
@media print {
  .rf-topbar, .rf-kopf, .rf-fuss, .rf-brotkrume, .rf-inhalt-drucken { display: none !important; }
  body.rf { background: #fff; }
  .rf-inhalt { border: 0; padding: 0; }
}

/* ================================================================ Anmeldung und Konto (login.php, create_account.php,
   password_forgotten.php, password_reset.php, logoff.php, Bestätigungsseiten). Felder aus den tep_draw_*-Helfern. */
.rf-konto { padding-bottom: 64px; }
.rf-konto-titel { margin-top: 16px; gap: 6px; }
.rf-konto-titel h1 { font-size: 30px; line-height: 1.2; }
.rf-konto-titel p { margin: 0; color: var(--ta-text-gedaempft); }
.rf-konto-karte { padding: 28px 32px; display: flex; flex-direction: column; gap: 16px; }
.rf-konto-karte h1 { font-size: 26px; line-height: 1.25; }
.rf-konto-karte h2 { font-size: 20px; }
.rf-konto-karte p { margin: 0; }
.rf-konto-schmal { max-width: 640px; margin-top: 16px; }
.rf-anmelden-raster { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.rf-formular { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.rf-formular-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.rf-formular-raster .rf-feld--gruppe, .rf-formular-raster .rf-feld--email_address { grid-column: 1 / -1; }
.rf-feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.rf-feld label, .rf-feld legend { font-size: 14px; font-weight: 600; color: var(--ta-text-sekundaer); padding: 0; }
.rf-pflicht { color: var(--ta-rot); margin-left: 2px; }
.rf-feld input[type="text"], .rf-feld input[type="email"], .rf-feld input[type="password"], .rf-feld input:not([type]), .rf-feld select {
  width: 100%; height: 46px; box-sizing: border-box; border: 1px solid var(--ta-feldrand); border-radius: 10px; padding: 0 12px; font-size: 16px; background: var(--ta-weiss); color: var(--ta-text);
}
.rf-feld input:focus, .rf-feld select:focus { outline: none; border-color: var(--ta-text); box-shadow: 0 0 0 3px rgba(226, 0, 26, .15); }
.rf-feld-hinweis { margin: 2px 0 0 !important; font-size: 13px; line-height: 1.5; color: var(--ta-text-gedaempft); }
.rf-feld-hinweis a { color: inherit; text-decoration: underline; }
.rf-optionen { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.rf-optionen label { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; font-size: 16px; color: var(--ta-text); cursor: pointer; }
.rf-konto input[type="radio"], .rf-konto input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--ta-text); flex-shrink: 0; }
.rf-formular-haken { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.5; color: var(--ta-text-sekundaer); cursor: pointer; }
.rf-formular-haken input { margin-top: 2px !important; }
.rf-formular .rf-knopf { align-self: flex-start; padding: 0 28px; }
.rf-formular-link { font-size: 14px; }
.rf-konto .rf-knopf { color: var(--ta-weiss) !important; display: inline-flex; padding: 0 24px; }
.rf-meldung { padding: 12px 16px; border-radius: 10px; border: 1px solid var(--ta-linie); border-left-width: 4px; font-size: 15px; line-height: 1.5; background: var(--ta-weiss); }
.rf-meldung--fehler { border-left-color: var(--ta-rot); }
.rf-meldung--hinweis { border-left-color: var(--ta-stern); }
.rf-meldung--erfolg { border-left-color: var(--ta-gruen-text); }
.rf-meldung ul { margin: 0; padding-left: 20px; }
.rf-konto-vorteile { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rf-konto-vorteile li { display: flex; align-items: center; gap: 10px; }
.rf-konto-vorteile svg { color: var(--ta-gruen-text); }
.rf-konto-randnotiz { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ta-text-gedaempft); }
.rf-konto-hinweis { padding: 12px 16px; border-radius: 10px; background: var(--ta-flaeche); font-size: 14px; line-height: 1.5; }
.rf-konto-erfolg { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: var(--ta-gruen-text); }
.rf-konto-kontakt { font-weight: 600; }
.rf-konto-social { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-weight: 600; }
.rf-konto-social img { height: 28px; width: auto; }
@media (max-width: 767px) {
  .rf-anmelden-raster, .rf-formular-raster { grid-template-columns: minmax(0, 1fr); }
  .rf-konto-karte { padding: 20px 18px; }
  .rf-konto-titel h1 { font-size: 26px; }
  .rf-formular .rf-knopf { align-self: stretch; justify-content: center; }
}

/* ================================================================ Bestellbestätigung (checkout_success.php, bestaetigung.tpl.php)
   Karten aus dem Konto-Abschnitt, Hilfe-Kästchen aus der Kasse (teile/hilfe.tpl.php). */
.rf-bestaetigung-karte { max-width: 760px; margin-top: 24px; padding: 40px 36px; align-items: center; text-align: center; }
.rf-bestaetigung-karte h1 { font-size: 30px; }
.rf-bestaetigung-zeichen { width: 64px; height: 64px; border-radius: 50%; background: var(--ta-gruen-text); color: var(--ta-weiss); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rf-bestaetigung-schritte { align-self: stretch; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.rf-bestaetigung-schritte li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-radius: 10px; background: var(--ta-flaeche); line-height: 1.5; }
.rf-bestaetigung-schritte svg { flex-shrink: 0; color: var(--ta-gruen-text); }
.rf-bestaetigung-raster { max-width: 760px; margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.rf-bestaetigung-empfehlen { padding: 20px 24px; font-size: 14px; line-height: 1.5; color: var(--ta-text-sekundaer); }
.rf-bestaetigung-empfehlen .rf-konto-social > span { flex-basis: 100%; }   /* social_icons.php trennt mit   */
@media (max-width: 767px) {
  .rf-bestaetigung-karte { padding: 28px 18px; }
  .rf-bestaetigung-karte h1 { font-size: 24px; }
  .rf-bestaetigung-karte .rf-knopf { align-self: stretch; justify-content: center; }
  .rf-bestaetigung-raster { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================================ PayPal Express: Bestellung prüfen (checkout_paypal_express.php,
   paypal_pruefen.tpl.php). Kopf, Karten, Summen, Lieferinfo, Zustimmung, Newsletter und Bestellknopf aus der Kasse (.rf-kasse). */
.rf-pp-schritte { margin-top: 16px; padding: 0; list-style: none; gap: 8px; }
.rf-pp-schritte li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.rf-pp-schritte svg { flex-shrink: 0; margin-top: 2px; }
.rf-pp-erledigt svg { color: var(--ta-gruen-text); }
.rf-pp-titel { flex: 1 1 0; min-width: 0; }   /* lange Überschrift bricht neben der Nummer um, nicht darunter */
.rf-pp-adressen { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 24px; }
.rf-pp-adressen h3 { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--ta-text-sekundaer); }
.rf-pp-adresse { margin: 0; line-height: 1.5; }
.rf-pp-zahlart { margin: 0; padding: 12px 14px; border-radius: 12px; box-shadow: inset 0 0 0 2px var(--ta-text); }
.rf-pp-zahlart img { display: block; width: 120px; height: auto; }
.rf-pp-tabelle { width: 100%; border-collapse: collapse; }
.rf-pp-tabelle th { padding: 0 0 10px 16px; border-bottom: 1px solid var(--ta-linie); font-size: 13px; font-weight: 400; color: var(--ta-text-gedaempft); text-align: right; white-space: nowrap; }
.rf-pp-tabelle th:first-child { padding-left: 0; text-align: left; }
.rf-pp-tabelle td { padding: 16px 0; border-bottom: 1px solid var(--ta-linie); vertical-align: middle; }
.rf-pp-artikel { display: flex; align-items: center; gap: 16px; min-width: 0; }
.rf-pp-bild { flex: 0 0 72px; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }
.rf-pp-bild img { max-width: 72px; max-height: 72px; width: auto; height: auto; }
.rf-pp-bild .rf-pi-platzhalter { width: 100%; height: 100%; padding: 14px; box-sizing: border-box; }
.rf-pp-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rf-pp-name { font-weight: 600; overflow-wrap: anywhere; }
.rf-pp-info .shopping-cart-mwst { font-size: 12px !important; color: var(--ta-text-sekundaer); text-align: left !important; }
.rf-pp-tabelle .rf-pp-zahl { width: 120px; padding-left: 16px; text-align: right; white-space: nowrap; }
.rf-pp-summe { font-weight: 700; }
.rf-pp-fussnote { margin: 4px 0 0; font-size: 12px; }
.rf-kasse-zustimmung.rf-pp-fehlt { border-color: var(--ta-rot); }
.rf-pp-agb-hinweis { margin: 10px 0 0; font-size: 14px; font-weight: 600; color: var(--ta-rot); }
.rf-pp-bestellen { border: 0; font-family: inherit; }
.rf-pp-bestellen:disabled { opacity: .6; cursor: wait; }
.rf-pp-warten { margin: 10px 0 0; font-size: 14px; color: var(--ta-text-sekundaer); text-align: center; }
@media (max-width: 767px) {
  /* Positionen: Artikel über die volle Breite, darunter Anzahl | Einzelpreis | Summe mit Beschriftung */
  .rf-pp-tabelle thead { display: none; }
  .rf-pp-tabelle, .rf-pp-tabelle tbody { display: block; }
  .rf-pp-tabelle tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--ta-linie); }
  .rf-pp-tabelle td, .rf-pp-tabelle .rf-pp-zahl { display: block; width: auto; padding: 0; border: 0; text-align: left; }
  .rf-pp-tabelle td:first-child { grid-column: 1 / -1; }
  .rf-pp-zahl::before { content: attr(data-titel); display: block; font-size: 12px; font-weight: 400; color: var(--ta-text-gedaempft); }
}

/* ================================================================ Kontobereich (account.php, account_history.php,
   account_history_info.php — Paket B). Karten und Titel aus dem Konto-Abschnitt. */
.rf-konto-kacheln { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.rf-konto-kachel h2 { display: flex; align-items: center; gap: 10px; font-size: 19px; }
.rf-konto-kachel h2 svg { flex-shrink: 0; color: var(--ta-rot); }
.rf-konto-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rf-konto-links li + li { border-top: 1px solid var(--ta-linie); }
.rf-konto-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; font-weight: 600; }
.rf-konto-links a svg { flex-shrink: 0; color: var(--ta-rot); }
.rf-konto-tabelle { width: 100%; border-collapse: collapse; font-size: 15px; }
.rf-konto-tabelle th { padding: 0 12px 10px 0; border-bottom: 1px solid var(--ta-linie); text-align: left; font-size: 13px; font-weight: 400; color: var(--ta-text-gedaempft); }
.rf-konto-tabelle td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--ta-linie); vertical-align: middle; }
.rf-konto-aktion { text-align: right; white-space: nowrap; padding-right: 0 !important; }
.rf-konto-aktion .rf-mehr { margin-left: 12px; }
.rf-konto-fehlgeschlagen td:not(.rf-konto-aktion) { opacity: .55; }
.rf-konto-status { color: var(--ta-rot); }
.rf-konto-zurueck { margin-top: 20px; }
.rf-konto-bestellkopf { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.rf-konto-bestellkopf h3 { margin: 4px 0 0; font-family: var(--ta-schrift-titel); font-size: 16px; font-weight: 800; }
.rf-konto-angaben { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.rf-konto-angaben > div { display: flex; gap: 12px; }
.rf-konto-angaben dt { flex: 0 0 120px; color: var(--ta-text-gedaempft); }
.rf-konto-angaben dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.rf-konto-sendungen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rf-konto-sendungen li { display: flex; align-items: center; gap: 8px; }
.rf-konto-adresse { line-height: 1.5; }
.rf-konto-positionen td:nth-child(2), .rf-konto-positionen th:nth-child(2) { width: 80px; text-align: center; }
.rf-konto-positionen td:last-child, .rf-konto-positionen th:last-child, .rf-konto-positionen tfoot td { text-align: right; white-space: nowrap; padding-right: 0; }
.rf-konto-positionen tfoot th { padding: 12px 12px 12px 0; border-bottom: 0; text-align: left; font-size: 15px; font-weight: 600; color: var(--ta-text-sekundaer); }
.rf-konto-positionen tfoot td { border-bottom: 0; }
.rf-konto-gesamt th, .rf-konto-gesamt td { border-top: 2px solid var(--ta-text); font-family: var(--ta-schrift-titel); font-weight: 800 !important; font-size: 18px !important; color: var(--ta-text) !important; }
.rf-konto-nicht-verfuegbar { color: var(--ta-rot); white-space: nowrap; font-size: 14px; }
.rf-konto-aktionen { margin-top: 20px; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.rf-konto-aktionen form { margin: 0; }
.rf-konto-aktionen .rf-knopf { padding: 0 24px; color: var(--ta-weiss); }
@media (max-width: 1023px) {
  .rf-konto-kacheln { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .rf-konto-bestellkopf { grid-template-columns: minmax(0, 1fr); }
  /* Bestellliste: je Bestellung ein Block mit Beschriftung, Details rechts unten */
  .rf-konto-bestellungen thead { display: none; }
  .rf-konto-bestellungen, .rf-konto-bestellungen tbody { display: block; }
  .rf-konto-bestellungen tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--ta-linie); }
  .rf-konto-bestellungen td { display: block; padding: 0; border: 0; }
  .rf-konto-bestellungen td[data-titel]::before { content: attr(data-titel); display: block; font-size: 12px; color: var(--ta-text-gedaempft); }
  .rf-konto-bestellungen .rf-konto-aktion { grid-column: 1 / -1; text-align: left; white-space: normal; }
  .rf-konto-bestellungen .rf-konto-aktion .rf-mehr { margin-left: 0; }
  .rf-konto-bestellungen .rf-konto-status { display: block; margin-bottom: 4px; }
  .rf-konto-angaben dt { flex-basis: 100px; }
  .rf-konto-aktionen .rf-knopf { width: 100%; justify-content: center; }
  .rf-konto-aktionen form { width: 100%; }
}

/* Kontobereich Teil 2: Adressbuch, Formulare (Adresse, persönliche Daten, Passwort, Newsletter), Löschbestätigung */
.rf-konto-adressen { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.rf-konto-adresskarte h2 { font-size: 19px; }
.rf-konto-adressaktionen { margin: auto 0 0; display: flex; align-items: center; gap: 18px; }
.rf-konto-adressaktionen .rf-knopf-zweit { align-self: auto; }
.rf-konto-formularknoepfe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; }
.rf-konto-formular .rf-formular-raster .rf-feld--gender { grid-column: 1 / -1; }
.rf-feld--verborgen { display: none !important; }
@media (max-width: 767px) {
  .rf-konto-adressen { grid-template-columns: minmax(0, 1fr); }
  .rf-konto-formularknoepfe { flex-direction: column-reverse; align-items: stretch; }
  .rf-konto-formularknoepfe .rf-knopf { width: 100%; justify-content: center; }
}

/* ================================================================ Newsletter: Archiv und Ausgaben (/newsletter/), An- und
   Abmeldung (konto_formular.tpl.php), Bestätigungen (hinweis.tpl.php). Karten und Titel aus dem Konto-Abschnitt. */
.rf-konto-text p { margin: 0 0 10px; }
.rf-konto-text p:last-child { margin-bottom: 0; }
.rf-konto-formular .rf-formular-raster .rf-feld--email { grid-column: 1 / -1; }
.rf-newsletter-filter { margin-top: 16px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
.rf-newsletter-filter a { padding: 8px 16px; border: 1px solid var(--ta-feldrand); border-radius: 999px; background: var(--ta-weiss); font-weight: 600; }
.rf-newsletter-filter a[aria-current] { border-color: var(--ta-text); background: var(--ta-text); color: var(--ta-weiss); }
.rf-newsletter-jahr { margin-top: 20px; }
.rf-newsletter-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rf-newsletter-liste li { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; }
.rf-newsletter-liste li + li { border-top: 1px solid var(--ta-linie); }
.rf-newsletter-liste a { font-weight: 700; font-size: 17px; }
.rf-newsletter-liste span { font-size: 14px; color: var(--ta-text-gedaempft); }
.rf-newsletter-kw { margin: -12px 0 20px; color: var(--ta-text-gedaempft); }
/* Mail-HTML mit festen Breiten: im Kasten scrollen statt die Seite zu verbreitern */
.rf-newsletter-inhalt { overflow-x: auto; }
.rf-newsletter-inhalt img { max-width: 100%; height: auto; }
.rf-newsletter-zurueck { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--ta-linie); }

/* ================================================================ Neuheiten und Angebote (products_new.php, specials.php,
   produktliste.tpl.php). Kopf und Zeilen aus der Kategorieseite; Blätterleiste aus splitPageResults::display_links(). */
.rf-blaettern { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 24px; }
.rf-blaettern > span { font-weight: 600; margin-right: 4px; }
.rf-blaettern a, .rf-blaettern b { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; box-sizing: border-box; border: 1px solid var(--ta-feldrand); border-radius: 10px; background: var(--ta-weiss); font-weight: 600; }
.rf-blaettern b { border-color: var(--ta-text); background: var(--ta-text); color: var(--ta-weiss); }
.rf-blaettern u { text-decoration: none; }

/* ================================================================ Bewertung schreiben (product_reviews_write.php, bewertung.tpl.php)
   Karten und Formular aus dem Konto-Abschnitt; Sterne als Auswahlfelder (rechts nach links im DOM, damit „~“ die
   kleineren Werte mitfärbt), Note per :checked ohne Skript. */
.rf-bewerten-raster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 16px; }
.rf-bewerten-produkt { display: flex; align-items: center; gap: 16px; font-weight: 700; font-size: 17px; line-height: 1.35; }
.rf-bewerten-produkt img { width: 96px; height: 96px; object-fit: contain; flex-shrink: 0; }
.rf-wertung-sterne { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 2px; }
.rf-wertung-sterne label { cursor: pointer; line-height: 0; fill: var(--ta-linie); }
.rf-wertung-sterne input:checked ~ label { fill: var(--ta-stern); }
.rf-wertung-sterne:hover label { fill: var(--ta-linie); }
.rf-wertung-sterne label:hover, .rf-wertung-sterne label:hover ~ label { fill: var(--ta-stern); }
.rf-wertung-sterne input:focus-visible + label { outline: 2px solid var(--ta-text); outline-offset: 2px; border-radius: 4px; }
.rf-wertung-note { order: -1; margin-left: 12px; font-size: 15px; color: var(--ta-text-sekundaer); }
.rf-wertung-note span { display: none; }
.rf-wertung-sterne input[value="1"]:checked ~ .rf-wertung-note [data-note="1"], .rf-wertung-sterne input[value="2"]:checked ~ .rf-wertung-note [data-note="2"],
.rf-wertung-sterne input[value="3"]:checked ~ .rf-wertung-note [data-note="3"], .rf-wertung-sterne input[value="4"]:checked ~ .rf-wertung-note [data-note="4"],
.rf-wertung-sterne input[value="5"]:checked ~ .rf-wertung-note [data-note="5"] { display: inline; }
.rf-feld textarea { width: 100%; min-height: 160px; box-sizing: border-box; border: 1px solid var(--ta-feldrand); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 16px; resize: vertical; background: var(--ta-weiss); color: var(--ta-text); }
.rf-feld textarea:focus { outline: none; border-color: var(--ta-text); box-shadow: 0 0 0 3px rgba(226, 0, 26, .15); }
.rf-falle { position: absolute; left: -9999px; top: -9999px; }
.rf-bewerten-hilfe ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 14px; line-height: 1.55; font-size: 15px; }
.rf-bewerten-hilfe strong { display: block; }
@media (max-width: 767px) {
  .rf-bewerten-raster { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================================ Kundenbewertungen (reviews.php, bewertungen.tpl.php)
   Karten wie der Bewertungsabschnitt der Startseite; Texte unterschiedlich lang, deshalb oben bündig. */
.rf-bewertungen-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; align-items: start; margin-top: 24px; }
.rf-bewertungen-liste .rf-bewertung p { overflow-wrap: anywhere; }
.rf-bewertung-produkt { display: flex; align-items: center; gap: 12px; font-weight: 700; line-height: 1.35; }
.rf-bewertung-produkt img { width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; }
@media (max-width: 767px) {
  .rf-bewertungen-liste { grid-template-columns: minmax(0, 1fr); }
}