/* CARFOIL Farbmuster — eigenes Band in der Kaufspalte.
   Zurueckhaltend: das Muster ist der Nebenweg, die Folie bleibt die Hauptsache.
   Oberflaechenfarbe ist Schieferblau (#333E4D), nicht Gold — Gold ist bei carfoil kein
   Bedienelement (Brand Guidelines v2, Kontrast).

   WO der Block sitzt (02.09.2026 am gerenderten DOM nachgesehen, nicht vermutet —
   Chrome im Hintergrund, danach die Live-CSS gelesen):

     form#add-to-cart-or-refresh          <- Flex-SPALTE, per custom.css sortiert
        div.product-variants              order 4
        div.product-add-to-cart           (Menge, Kaufknopf)
        div.cfcart-cutoff                 ohne order -> 0 -> steht ganz oben
        div.cfm-box                       <- HIER, gleiche Gruppe, direkt darunter
        div.product-additional-info

   'custom.css' setzt '#add-to-cart-or-refresh { display:flex; flex-direction:column }'
   und sortiert die Bereiche: Preis 1, Lager 3, Varianten 4, Sonderfeld 6. Alles ohne
   order zaehlt als 0 und steht damit ganz oben — deshalb sitzt das Lieferzeit-Band dort,
   obwohl es im Quelltext weiter unten steht.

   Der Musterbereich braucht daher order 0, nicht 99. Die 99 war als "unterste Zeile der
   Kaufzeile" gedacht und wirkte als "unterster Bereich der ganzen Kaufspalte" — der
   Block landete ganz am Ende der Seite.

   Das JavaScript haengt ihn im DOM direkt hinter das Band; gleiche order plus
   Quellreihenfolge ergibt genau die gewuenschte Stelle, auf jedem Geraet dieselbe. */
.product-add-to-cart .product-quantity { flex-wrap: wrap; }

.cfm-box {
  flex: 1 1 100%;
  /* Gleiche Gruppe wie das Lieferzeit-Band — Begruendung im Kopf dieser Datei. */
  order: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;      /* sonst sprengen Rahmen und Innenabstand die 100 % */
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid #e3e6ea;
  border-radius: 12px;
  background: #fbfcfd;
}
.cfm-frage {
  font-size: .95rem;
  font-weight: 600;
  color: #333E4D;
  margin: 0 0 10px;
}
.cfm-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.cfm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: #fff;
  color: #333E4D;
  border: 1px solid #333E4D;
  border-radius: 8px;
  padding: 11px 16px;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.cfm-btn:hover, .cfm-btn:focus-visible { background: #333E4D; color: #fff; text-decoration: none; }
.cfm-btn:hover .cfm-ico, .cfm-btn:focus-visible .cfm-ico { background: #fff; }
.cfm-btn[disabled] { opacity: .55; cursor: default; }
/* Das Zeichen ist ein Farbfeld — es IST die Aussage: ein Stueck Farbe. */
.cfm-ico {
  width: 14px; height: 14px; border-radius: 3px;
  background: #333E4D; flex: 0 0 auto;
  transition: background .15s ease;
}
.cfm-preis { font-weight: 700; white-space: nowrap; }
.cfm-preis::before { content: "· "; font-weight: 400; }
.cfm-btn-zweit { border-color: #c3c8cf; color: #4a5561; }
.cfm-btn-zweit:hover, .cfm-btn-zweit:focus-visible { background: #4a5561; border-color: #4a5561; }
.cfm-sub { font-size: .82rem; line-height: 1.45; color: #6b7280; margin-top: 9px; }
.cfm-meldung { font-size: .86rem; margin-top: 6px; }
.cfm-meldung.ok { color: #1f7a3d; font-weight: 600; }
.cfm-meldung.weg { color: #a33; }

@media (max-width: 767px) {
  .cfm-knoepfe { flex-direction: column; }
  .cfm-btn { width: 100%; }
}

/* ---------- Kategorieseite: Band "Zum Folienfinder" (1.7.13) ----------
   Sitzt im Kopf der Produktliste (Hook displayHeaderCategory), volle Breite.
   Gleiche Sprache wie der Musterbereich: helle Flaeche, Schieferblau als Knopf.
   Auf dem Handy bricht der Knopf unter die Frage. */
.cfm-kat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid #e3e6ea;
  border-radius: 12px;
  background: #fbfcfd;
}
.cfm-kat-frage {
  flex: 1 1 260px;
  font-size: 15px;
  font-weight: 600;
  color: #333e4d;
  line-height: 1.35;
}
.cfm-kat-btn,
.cfm-kat-btn:visited {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1px solid #333e4d;
  border-radius: 999px;
  background: #333e4d;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 3px 8px rgba(51,62,77,.2);
  transition: background .12s, transform .12s;
}
.cfm-kat-btn:hover,
.cfm-kat-btn:focus {
  background: #26303c;
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}
.cfm-kat-btn:active { transform: scale(.97); }
@media (max-width: 575px) {
  .cfm-kat-btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cfm-kat-btn { transition: none; }
  .cfm-kat-btn:hover, .cfm-kat-btn:focus, .cfm-kat-btn:active { transform: none; }
}

/* ---------- Paket 2, Kategorieseite (1.8.0) ----------
   Alles, was das Modul fuer Paket 2 zusaetzlich ausgibt (Chips, Muster-Unterzeile,
   MwSt-Zeile, Suchzeile, Kachel-Spans), bleibt OHNE html.cf-k2 unsichtbar — der Shop
   sieht bis zur Freigabe aus wie heute. Gestaltung liegt im Paket-2-Block von
   custom.css; hier nur Sichtbarkeit und ein Grundmass. */
.cfm-chips, .cfm-kat-sub, .cfm-zeile, .cfm-suche,
.cf-k2-lager, .cf-k2-ref, .cf-k2-einheit { display: none; }
html.cf-k2 .cfm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
html.cf-k2 .cfm-kat-sub { display: block; flex: 1 1 100%; font-size: 13px; color: #6b7280; }
html.cf-k2 .cfm-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px;
  font-size: 13px; color: #6b7280; margin: 0 0 10px; }
html.cf-k2 .cfm-suche { display: block; margin: 0 0 14px; font-size: 15px; color: #333e4d; }
html.cf-k2 .cf-k2-lager { display: inline-block; color: #15803d; font-weight: 600; }
html.cf-k2 .cf-k2-ref { display: block; color: #6b7280; font-size: 12px; }
html.cf-k2 .cf-k2-einheit { display: inline; }
html.cf-k2 .cf-k2-grund { display: block; color: #5f6773; font-size: 12px; }
.cfm-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px;
  border: 1px solid #c9cdd2; border-radius: 999px; background: #fff; color: #333e4d;
  font-size: 13px; font-weight: 600; text-decoration: none; }
.cfm-chip:hover, .cfm-chip:focus-visible { border-color: #333e4d; color: #333e4d; text-decoration: none; }
.cfm-chip-aktiv, .cfm-chip-aktiv:hover { background: #333e4d; border-color: #333e4d; color: #fff; }
.cfm-kat-suche { display: flex; flex: 1 1 320px; gap: 8px; }
.cfm-kat-feld { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 6px 12px;
  border: 1px solid #c9cdd2; border-radius: 999px; font-size: 14px; }
.cfm-kat-feld:focus { outline: 2px solid #333e4d; outline-offset: -1px; }

/* ============================================================================
   ÜBERLAUFSCHUTZ — nichts darf breiter sein als die Seite (05.09.2026)

   Auf dem Handy ragten die Bilder der Produktbeschreibung über den rechten
   Rand hinaus und die ganze Seite liess sich seitlich schieben. Ursache: die
   Bilder kommen aus dem Backoffice-Editor ganz ohne Breitenangabe, und das
   Theme begrenzt nur seine eigenen Bilder, nicht die im Beschreibungstext.

   Die Regeln packen die Ursache an (Breite deckeln, Seitenverhältnis halten),
   statt seitliches Scrollen bloss zu verstecken. Kein overflow-x auf body:
   das würde die haftende Kaufleiste auf dem Handy brechen.
   ========================================================================= */
#main img, #main video, #main iframe, #main embed, #main object, #main svg,
#description img, .product-description img, .rte img, .page-content img,
.product-description video, .rte video,
.product-description iframe, .rte iframe {
  max-width: 100%;
  height: auto;
}
/* Breite Tabellen scrollen in sich selbst, nicht die ganze Seite. */
#description table, .product-description table, .rte table, .page-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
/* Lange Artikelnummern und Adressen brechen um, statt den Block zu dehnen. */
#description, .product-description, .rte, .page-content {
  overflow-wrap: break-word;
}
/* Letztes Netz, bewusst NUR um den Textblock: ein Element, das trotz allem
   zu breit ist, wird dort abgeschnitten und reisst nicht die Seite mit. */
#description, .product-description, .rte {
  max-width: 100%;
  overflow-x: clip;
}