/* ===========================================================================
   Angebotegruppe.de – Stylesheet
   Farbwelt aus dem Logo: Orange, Navy, Signalgrün.
   =========================================================================== */

:root {
  /* Primaerfarbe ist das Orange aus dem Logo, Navy traegt Flaechen und Text.
     Gruen bleibt den Pruef- und Sparsignalen vorbehalten (siehe Blockende). */
  --primaer: #e2620f;
  --primaer-hell: #f6851f;
  --primaer-tief: #b64a08;
  --primaer-flaeche: #fdf1e4;

  --navy: #10294a;
  --navy-hell: #1b3d69;
  --navy-flaeche: #eef2f7;

  --gruen: #1e9d4d;
  --gruen-hell: #43bf1b;
  --gruen-tief: #15532c;
  --gruen-flaeche: #eef7ea;
  --orange: #e2620f;
  --orange-hell: #f6851f;
  --orange-flaeche: #fdf1e4;
  --rot: #cf2a1b;
  --rot-flaeche: #fdecea;

  --text: #16202c;
  --text-leise: #5a6775;
  --text-sehr-leise: #869099;
  --linie: #e2e6ea;
  --linie-stark: #c8cfd6;
  --flaeche: #ffffff;
  --flaeche-grau: #f5f7f9;

  --radius: 12px;
  --radius-klein: 8px;
  --schatten: 0 1px 2px rgba(16, 41, 74, .06), 0 2px 8px rgba(16, 41, 74, .05);
  --schatten-hoch: 0 4px 16px rgba(16, 41, 74, .11);

  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --breite: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Klassen wie .knopf setzen display und wuerden das hidden-Attribut sonst
   ueberschreiben – deshalb hier ausdruecklich. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 150px; }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--flaeche);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a, button { -webkit-tap-highlight-color: rgba(31, 122, 63, .12); }
button, select, input { touch-action: manipulation; }
a { color: var(--primaer); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.22; letter-spacing: -.011em; font-weight: 700; }
h1 { font-size: clamp(27px, 3.4vw, 40px); }
h2 { font-size: clamp(21px, 2.3vw, 28px); }
h3 { font-size: 17px; }
p { margin: 0 0 1em; }

.schale { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: 16px; }

.nur-screenreader {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sprungmarke {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--primaer); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--radius-klein) 0;
}
.sprungmarke:focus { left: 0; }

/* ------------------------------------------------------------- Kopfzeile - */
.kopf { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid var(--linie); }

.kopf__band {
  background: var(--primaer-tief); color: #d9ecd6; font-size: 12.5px;
}
.kopf__band .schale { display: flex; gap: 20px; align-items: center; min-height: 32px; }
.kopf__band a { color: #d9ecd6; }
.kopf__band strong { color: #fff; font-weight: 600; }
.kopf__band .rechts { margin-left: auto; display: flex; gap: 18px; }

.kopf__haupt .schale {
  display: grid; grid-template-columns: auto minmax(180px, 560px) auto;
  gap: 18px; align-items: center; min-height: 74px;
}

.marke { display: inline-flex; align-items: center; flex: 0 0 auto; }
.marke img { height: 52px; width: auto; max-width: 250px; display: block; }

.suchleiste { position: relative; display: flex; }
.suchleiste input {
  width: 100%; height: 44px; padding: 0 16px 0 42px;
  border: 1.5px solid var(--linie-stark); border-radius: 22px;
  font: inherit; font-size: 16px; color: var(--text); background: var(--flaeche-grau);
  transition: border-color .15s, background .15s;
}
.suchleiste input:focus {
  outline: none; border-color: var(--primaer); background: #fff;
  box-shadow: 0 0 0 3px rgba(31, 122, 63, .12);
}
.suchleiste__symbol {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; fill: none; stroke: var(--text-leise); stroke-width: 2;
}

.kopf__aktionen { display: flex; align-items: center; gap: 6px; }

.kopf-knopf {
  display: inline-flex; align-items: center; gap: 7px; position: relative;
  height: 40px; padding: 0 12px; border: 0; border-radius: var(--radius-klein);
  background: transparent; color: var(--text); font: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer;
}
.kopf-knopf:hover { background: var(--flaeche-grau); text-decoration: none; }
.kopf-knopf img { width: 22px; height: 22px; }
.kopf-knopf span[data-merkzahl] {
  position: absolute; top: 3px; right: 4px; min-width: 18px; height: 18px;
  padding: 0 4px; border-radius: 9px; background: var(--orange); color: #fff;
  font-size: 11.5px; font-weight: 700; line-height: 18px; text-align: center;
}

#menueKnopf { display: none; }

/* --------------------------------------------------------- Kategorie-Nav - */
.katnav { border-top: 1px solid var(--linie); background: #fff; }
.katnav__liste {
  display: flex; gap: 2px; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scrollbar-width: none;
}
.katnav__liste::-webkit-scrollbar { display: none; }
.katnav a {
  display: inline-flex; align-items: center; height: 44px; padding: 0 13px;
  color: var(--text); font-size: 14px; font-weight: 600; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.katnav a:hover { color: var(--primaer); text-decoration: none; background: var(--primaer-flaeche); }
.katnav a[aria-current="page"] { color: var(--primaer); border-bottom-color: var(--primaer-hell); }
.katnav a.ist-signal { color: var(--rot); }
.katnav a.ist-signal[aria-current="page"] { border-bottom-color: var(--rot); }

/* -------------------------------------------------------------- Banner --- */
.banner { margin-top: 18px; }
.banner img {
  display: block; width: 100%; border-radius: var(--radius); border: 1px solid var(--linie);
}

/* ------------------------------------------------------------ Seitenkopf - */
.seitenkopf { padding: 26px 0 8px; }
.seitenkopf--mit-bild { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: start; }
.seitenkopf__bild { width: 96px; height: auto; }
.seitenkopf p.einleitung { max-width: 74ch; color: var(--text-leise); font-size: 16px; margin-bottom: .8em; }

.brotkrumen {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 14px 0 0; font-size: 13px; color: var(--text-sehr-leise);
}
.brotkrumen a {
  color: var(--text-leise);
  display: inline-flex; align-items: center; min-height: 24px;
}
.brotkrumen span[aria-current] { color: var(--text-sehr-leise); }

/* ------------------------------------------------------ Kategorie-Kacheln */
.kacheln {
  display: grid; gap: 10px; margin: 22px 0 8px; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
}
.kachel {
  display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%;
  padding: 12px 8px 12px; border: 1px solid var(--linie); border-radius: var(--radius);
  background: #fff; color: var(--text); font-size: 13.5px; font-weight: 650; text-align: center;
  line-height: 1.25; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.kachel > span:last-child { display: flex; align-items: center; min-height: 2.5em; }
.kachel:hover {
  text-decoration: none; border-color: var(--primaer-hell);
  box-shadow: var(--schatten-hoch); transform: translateY(-2px);
}
.kachel img { width: 84px; height: 72px; object-fit: contain; flex: 0 0 auto; }
.kachel__glyphe {
  width: 72px; height: 72px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 18px; background: linear-gradient(150deg, var(--primaer-flaeche), var(--orange-flaeche));
}
.kachel__glyphe svg { width: 38px; height: 38px; fill: none; stroke: var(--primaer); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.kachel--signal .kachel__glyphe { background: var(--rot-flaeche); }
.kachel--signal .kachel__glyphe svg { stroke: var(--rot); }

/* ---------------------------------------------------------- Werkzeugleiste */
.werkzeugleiste {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 16px 0 14px; border-bottom: 1px solid var(--linie); margin-bottom: 18px;
}
.werkzeugleiste__zahl { font-size: 14px; color: var(--text-leise); margin-right: auto; }
.werkzeugleiste__zahl b { color: var(--text); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px;
  border: 1.5px solid var(--linie-stark); border-radius: 17px; background: #fff;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-leise); cursor: pointer;
}
.chip:hover { border-color: var(--primaer); color: var(--primaer); }
.chip.ist-aktiv { background: var(--primaer); border-color: var(--primaer); color: #fff; }

select.chip { padding-right: 30px; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235a6a61' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 10px;
}

/* --------------------------------------------------------------- Karten -- */
.deal-raster {
  display: grid; gap: 14px; padding: 0; margin: 0 0 28px; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}

.deal {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--linie); border-radius: var(--radius); background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.deal:hover { border-color: var(--linie-stark); box-shadow: var(--schatten-hoch); }

.deal--platzhalter { min-height: 372px; background: var(--flaeche-grau); border-style: dashed; }

.deal__bild {
  position: relative; display: block; aspect-ratio: 1 / 1;
  background: #fff; border-bottom: 1px solid var(--linie);
  /* Die Karte ist ein Spalten-Flexbereich. Ohne diese beiden Angaben wächst
     das Bildfeld mit einem hochformatigen Produktbild mit und sprengt die
     Kachelhöhe – genau das passierte bei schmalen, hohen Bildern. */
  flex: 0 0 auto; min-height: 0; overflow: hidden;
}
.deal__bild img {
  /* Absolut gesetzt statt height:100% – eine Prozenthöhe löst sich gegen eine
     aus aspect-ratio abgeleitete Höhe nicht zuverlässig auf und fällt dann
     auf die Originalgröße des Bildes zurück. */
  position: absolute; inset: 12px;
  width: calc(100% - 24px); height: calc(100% - 24px);
  object-fit: contain; object-position: center;
}

.deal-marke {
  position: absolute; top: 8px; left: 8px; padding: 3px 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: #fff;
  background: var(--primaer); text-transform: uppercase;
}
.deal-marke--preisfehler { background: var(--rot); }
.deal-marke--top { background: var(--orange); }
.deal-marke--tief { background: var(--primaer); }
.deal-marke--neu { background: var(--primaer-tief); }

.deal__inhalt { display: flex; flex-direction: column; flex: 1; padding: 12px 13px 13px; }

.deal__meta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 12px; color: var(--text-sehr-leise); margin-bottom: 6px;
}
.deal__shop { font-weight: 700; color: var(--text-leise); }
.deal__kat {
  color: var(--text-sehr-leise);
  /* Mindestens 24px Trefferfläche (WCAG 2.2), ohne die Zeile höher zu machen */
  display: inline-flex; align-items: center; min-height: 24px; margin-block: -3px;
}

.deal__titel { font-size: 14.5px; font-weight: 650; line-height: 1.34; margin: 0 0 10px; }
.deal__titel a {
  color: var(--text); display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
  /* Einzeilige Titel sonst nur 18px hoch – zu klein zum Antippen */
  min-height: 24px;
}
.deal__titel a:hover { color: var(--primaer); text-decoration: none; }

.deal__preis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.preis-jetzt { font-size: 21px; font-weight: 750; color: var(--text); letter-spacing: -.02em; }
.preis-alt { font-size: 13px; color: var(--text-sehr-leise); text-decoration: line-through; }
.preis-rabatt {
  padding: 2px 7px; border-radius: 5px; background: var(--orange-flaeche);
  color: #b64a06; font-size: 12.5px; font-weight: 750;
}

.deal__sparen { font-size: 12.5px; color: var(--primaer); font-weight: 650; margin: 0 0 8px; }
.deal__sparen--hinweis { color: var(--text-sehr-leise); font-weight: 500; }

.verlauf { width: 76px; height: 24px; display: block; }
.verlauf path { fill: none; stroke: var(--primaer-hell); stroke-width: 1.8; stroke-linejoin: round; }
.verlauf__text { display: block; font-size: 11.5px; color: var(--text-sehr-leise); margin: 2px 0 8px; }

.deal__code {
  font-size: 12.5px; margin: 0 0 8px; padding: 5px 8px; border-radius: 6px;
  background: var(--primaer-flaeche); color: var(--primaer-tief);
}
.deal__code b { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .04em; }

/* Vier Knöpfe passen in einer schmalen Karte nicht nebeneinander. Statt sie
   umbrechen zu lassen (wobei einer allein in der zweiten Zeile landet), bekommt
   der Hauptknopf feste erste Zeile, die drei Symbolknöpfe teilen sich die
   zweite – bei jeder Kartenbreite gleich. */
.deal__aktionen {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-top: auto;
}
.deal__aktionen .knopf--haupt { grid-column: 1 / -1; }
.deal__aktionen .knopf--icon { width: auto; }

/* --------------------------------------------------------------- Knöpfe -- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border: 1.5px solid transparent; border-radius: var(--radius-klein);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-align: center;
}
.knopf:hover { text-decoration: none; }
.knopf--haupt { flex: 1; background: var(--orange); color: #fff; }
.knopf--haupt:hover { background: #c95409; }
.knopf--gross { height: 50px; font-size: 16px; padding: 0 28px; flex: 0 0 auto; }
.knopf--rand { background: #fff; border-color: var(--linie-stark); color: var(--text); }
.knopf--rand:hover { border-color: var(--primaer); color: var(--primaer); }
.knopf--icon { width: 40px; padding: 0; background: #fff; border-color: var(--linie-stark); }
.knopf--icon svg { width: 19px; height: 19px; fill: none; stroke: var(--text-leise); stroke-width: 1.8; }
.knopf--icon:hover { border-color: var(--rot); }
.knopf--icon:hover svg { stroke: var(--rot); }
.knopf--icon.ist-aktiv { border-color: var(--rot); background: var(--rot-flaeche); }
.knopf--icon.ist-aktiv svg { fill: var(--rot); stroke: var(--rot); }

/* Auffälliger Ladeknopf – er ist die einzige Fortsetzung der Liste und darf
   deshalb deutlich hervorstechen. */
.knopf--mehr {
  height: 52px; padding: 0 40px; font-size: 16px; font-weight: 750;
  color: #fff; border: 0; border-radius: 26px;
  background: linear-gradient(180deg, var(--primaer-hell) 0%, var(--primaer) 100%);
  box-shadow: 0 4px 14px rgba(31, 122, 63, .32);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.knopf--mehr::after {
  content: ""; width: 9px; height: 9px; margin-left: 4px;
  border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.knopf--mehr:hover { filter: brightness(1.06); box-shadow: 0 6px 20px rgba(31, 122, 63, .4); transform: translateY(-1px); }
.knopf--mehr:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(31, 122, 63, .3); }

.deal__fund { margin: 0 0 6px; font-size: 12px; color: var(--text-sehr-leise); }
.deal__fund time { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- Hinweisboxen - */
.hinweisbox {
  grid-column: 1 / -1; padding: 28px; border: 1px solid var(--linie);
  border-radius: var(--radius); background: var(--flaeche-grau); text-align: center;
}
.hinweisbox--fehler { background: var(--rot-flaeche); border-color: #f3c8c3; }
.hinweisbox h1 { font-size: 24px; }

.mehr-zeile { display: flex; justify-content: center; margin-bottom: 36px; }

/* ------------------------------------------------------------- Textblock - */
.textblock { max-width: 74ch; margin: 34px 0; }
.textblock h2 { margin-top: 1.4em; }
.textblock p { color: var(--text-leise); font-size: 15.5px; }

/* Verwandte Kategorien: eigenständige Ziele, keine Fließtext-Links –
   deshalb mit voller Trefferfläche statt als Aufzählung im Satz. */
.verwandt {
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 14px 0 0;
}
.verwandt a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border: 1.5px solid var(--linie-stark); border-radius: 18px;
  color: var(--text-leise); font-size: 13.5px; font-weight: 600;
}
.verwandt a:hover { border-color: var(--primaer); color: var(--primaer); text-decoration: none; }

.faq { max-width: 74ch; margin: 34px 0 44px; }
.faq details {
  border-bottom: 1px solid var(--linie); padding: 14px 0;
}
.faq summary {
  cursor: pointer; font-weight: 650; font-size: 15.5px; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 auto; width: 11px; height: 11px;
  border-right: 2px solid var(--text-leise); border-bottom: 2px solid var(--text-leise);
  transform: rotate(45deg); transition: transform .18s;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p { margin: 10px 0 0; color: var(--text-leise); }

/* ------------------------------------------------------------- Vertrauen - */
.vertrauen {
  display: grid; gap: 14px; margin: 30px 0; padding: 22px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  background: var(--flaeche-grau); border: 1px solid var(--linie); border-radius: var(--radius);
}
.vertrauen__punkt { display: flex; gap: 12px; align-items: flex-start; }
.vertrauen__punkt img { width: 34px; height: 34px; flex: 0 0 auto; }
.vertrauen__punkt h3 { font-size: 14.5px; margin: 0 0 2px; }
.vertrauen__punkt p { font-size: 13.5px; color: var(--text-leise); margin: 0; }

/* ------------------------------------------------------------ Deal-Alarm - */
.pushbox {
  display: grid; gap: 18px; margin: 8px 0 34px; padding: 24px;
  border: 1px solid var(--linie); border-left: 4px solid var(--orange);
  border-radius: var(--radius); background: var(--flaeche-grau);
}
.pushbox__kopf { display: flex; gap: 14px; align-items: flex-start; }
.pushbox__kopf img { width: 40px; height: 40px; flex: 0 0 auto; }
.pushbox__kopf h2 { font-size: 20px; margin: 0 0 4px; }
.pushbox__kopf p { margin: 0; color: var(--text-leise); font-size: 14.5px; max-width: 68ch; }

.pushbox__themen { border: 0; padding: 0; margin: 0; min-width: 0; }
.pushbox__themen legend {
  padding: 0; margin-bottom: 9px; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-sehr-leise);
}
#pushThemen { display: flex; flex-wrap: wrap; gap: 8px; }

.pushthema {
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px;
  padding: 0 14px 0 11px; border: 1.5px solid var(--linie-stark); border-radius: 19px;
  background: #fff; font-size: 13.5px; font-weight: 600; color: var(--text-leise);
  cursor: pointer; transition: border-color .15s, color .15s;
}
.pushthema:hover { border-color: var(--primaer); color: var(--primaer); }
.pushthema input { width: 17px; height: 17px; margin: 0; accent-color: var(--primaer); cursor: pointer; }
.pushthema:has(input:checked) {
  border-color: var(--primaer); background: var(--primaer-flaeche); color: var(--primaer-tief);
}

.pushbox__fuss { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; }
.pushbox__fuss .knopf { flex: 0 0 auto; }
.pushbox__hinweis {
  flex: 1 1 280px; margin: 0; font-size: 12.5px; color: var(--text-sehr-leise); max-width: 60ch;
}

#pushKnopf.ist-aktiv { background: var(--primaer-flaeche); color: var(--primaer-tief); }

@media (max-width: 760px) {
  .pushbox { padding: 18px 16px; gap: 14px; }
  .pushbox__kopf img { width: 32px; height: 32px; }
  .pushbox__kopf h2 { font-size: 18px; }
  .pushbox__fuss .knopf { width: 100%; }
}

/* -------------------------------------------------------------- Detail --- */
.detail { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 34px; margin: 18px 0 40px; }
.detail__bild {
  margin: 0; padding: 22px; border: 1px solid var(--linie); border-radius: var(--radius); background: #fff;
}
.detail__bild img {
  display: block; width: 100%; height: auto;
  max-height: 420px; object-fit: contain;   /* auch hier Hochformate begrenzen */
}
.detail__shop { font-size: 13.5px; color: var(--text-leise); font-weight: 650; margin-bottom: 4px; }
.detail h1 { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 14px; }
.detail__preis { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.detail__preis .preis-jetzt { font-size: 34px; }
.detail__sparen { font-size: 15px; }
.detail__hinweis { font-size: 12.5px; color: var(--text-sehr-leise); margin-top: 12px; }
.detail__verlauf, .detail__einordnung { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--linie); }
.detail__verlauf h2, .detail__einordnung h2 { font-size: 18px; }
.detail__verlauf svg { width: 100%; max-width: 420px; height: auto; }
.detail__verlauf path { fill: none; stroke: var(--primaer); stroke-width: 2; }

/* --------------------------------------------------------------- Fußzeile */
.fuss { margin-top: 48px; border-top: 1px solid var(--linie); background: var(--flaeche-grau); }
.fuss__raster {
  display: grid; gap: 28px; padding: 36px 0 28px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.fuss h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-sehr-leise); }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 2px; }
.fuss a {
  color: var(--text-leise); font-size: 14px;
  display: inline-flex; align-items: center; min-height: 26px;
}
.fuss a:hover { color: var(--primaer); }
.fuss__marke img { height: 52px; margin-bottom: 10px; }
.fuss__marke p { font-size: 13.5px; color: var(--text-leise); max-width: 34ch; }
.fuss__unten a { display: inline-flex; align-items: center; min-height: 26px; }
.fuss__unten {
  display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center;
  padding: 16px 0 26px; border-top: 1px solid var(--linie);
  font-size: 12.5px; color: var(--text-sehr-leise);
}

/* ---------------------------------------------------------- Ladeanzeige -- */
.ladeanzeige {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .82); backdrop-filter: blur(2px);
}
.ladeanzeige__karte {
  position: relative; display: grid; place-items: center; gap: 14px;
  padding: 30px 38px; border-radius: 18px; background: #fff;
  box-shadow: 0 8px 34px rgba(21, 33, 26, .16); text-align: center;
}
.ladeanzeige__karte img { width: 132px; height: auto; }
.ladeanzeige__karte p { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--text-leise); }

.ladeanzeige__ring {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--primaer-flaeche); border-top-color: var(--orange);
  animation: rg-dreht .8s linear infinite;
}
@keyframes rg-dreht { to { transform: rotate(360deg); } }

/* Ohne Animation bleibt die Aussage erhalten, nur eben ohne Bewegung. */
@media (prefers-reduced-motion: reduce) {
  .ladeanzeige__ring { animation: none; border-top-color: var(--primaer); }
}

@media (max-width: 480px) {
  .ladeanzeige__karte { padding: 24px 28px; }
  .ladeanzeige__karte img { width: 104px; }
}

/* ------------------------------------------------------ Angebot einreichen */
.einreich {
  display: grid; gap: 18px; margin: 8px 0 34px; padding: 24px;
  border: 1px solid var(--linie); border-left: 4px solid var(--primaer);
  border-radius: var(--radius); background: var(--flaeche-grau);
}
.einreich__kopf { display: flex; gap: 14px; align-items: flex-start; }
.einreich__kopf img { width: 40px; height: 40px; flex: 0 0 auto; }
.einreich__kopf h2 { font-size: 20px; margin: 0 0 4px; }
.einreich__kopf p { margin: 0; color: var(--text-leise); font-size: 14.5px; max-width: 68ch; }

.einreich__raster { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.einreich__zeile { display: grid; gap: 6px; }
.einreich__zeile label { font-size: 13px; font-weight: 700; color: var(--text-leise); }
.einreich__zeile input, .einreich__zeile select {
  height: 46px; padding: 0 13px; border: 1.5px solid var(--linie-stark);
  border-radius: var(--radius-klein); background: #fff;
  font: inherit; font-size: 16px; color: var(--text); width: 100%;
}
.einreich__zeile input:focus, .einreich__zeile select:focus {
  outline: none; border-color: var(--primaer); box-shadow: 0 0 0 3px rgba(31, 122, 63, .12);
}
.einreich__fuss { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
/* .knopf--haupt bringt flex:1 aus der Kartenansicht mit – hier soll der
   Knopf aber nur so breit sein wie seine Beschriftung. */
.einreich__fuss .knopf--haupt, .pushbox__fuss .knopf--haupt { flex: 0 0 auto; }
.einreich__status { margin: 0; font-size: 14px; font-weight: 600; min-height: 1.2em; }
.einreich__status.ist-erfolg { color: var(--primaer); }
.einreich__status.ist-fehler { color: var(--rot); }
.einreich__status.ist-hinweis { color: #b64a06; }
.einreich__hinweis { margin: 0; font-size: 12.5px; color: var(--text-sehr-leise); max-width: 68ch; }

.knopf--teilen:hover { border-color: var(--primaer); }
.knopf--teilen:hover svg { stroke: var(--primaer); }
.knopf--teilen.ist-aktiv { border-color: var(--primaer); background: var(--primaer-flaeche); }
.knopf--teilen.ist-aktiv svg { stroke: var(--primaer); }
.detail__melden { display: flex; flex-wrap: wrap; gap: 10px; }

.knopf--melden:hover { border-color: var(--orange); }
.knopf--melden:hover svg { stroke: var(--orange); }
.knopf--melden[disabled] { opacity: .5; cursor: default; }
.detail__melden { margin-top: 16px; }

@media (max-width: 760px) {
  .knopf--mehr { width: 100%; padding: 0 20px; }
  .einreich { padding: 18px 16px; }
  .einreich__kopf img { width: 32px; height: 32px; }
  .einreich__kopf h2 { font-size: 18px; }
  .einreich__fuss .knopf { width: 100%; }
  .deal__aktionen { gap: 6px; }
  .deal__aktionen .knopf--icon { height: 38px; }
}

/* ------------------------------------------------------ App installieren - */
.installfrage {
  position: fixed; left: 50%; bottom: 18px; z-index: 65;
  width: min(560px, calc(100vw - 24px)); transform: translate(-50%, 24px);
  opacity: 0; transition: opacity .24s ease, transform .24s ease;
  pointer-events: none;
}
.installfrage.ist-sichtbar { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

.installfrage__inhalt {
  position: relative; display: grid; gap: 14px 16px; align-items: center;
  grid-template-columns: auto 1fr; padding: 18px 44px 18px 18px;
  border: 1px solid var(--linie); border-radius: 16px; background: #fff;
  box-shadow: 0 10px 40px rgba(21, 33, 26, .22);
}
.installfrage__inhalt > img { width: 56px; height: 56px; }
.installfrage__text h2 { font-size: 17px; margin: 0 0 3px; }
.installfrage__text p { margin: 0; font-size: 14px; color: var(--text-leise); }
.installfrage__knoepfe {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px;
}
.installfrage__knoepfe .knopf { flex: 1 1 auto; min-width: 130px; }

.installfrage__zu {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px;
  display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
}
.installfrage__zu:hover { background: var(--flaeche-grau); }
.installfrage__zu svg {
  width: 15px; height: 15px; fill: none;
  stroke: var(--text-leise); stroke-width: 2; stroke-linecap: round;
}

@media (max-width: 480px) {
  .installfrage { bottom: 10px; }
  .installfrage__inhalt { padding: 16px 40px 16px 16px; gap: 12px; }
  .installfrage__inhalt > img { width: 46px; height: 46px; }
  .installfrage__knoepfe .knopf { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .installfrage { transition: none; }
}

/* -------------------------------------------------------------- Meldung -- */
#meldung {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px);
  z-index: 60; padding: 11px 20px; border-radius: 22px;
  background: var(--text); color: #fff; font-size: 14px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
#meldung.ist-sichtbar { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------- Mobil ----- */
@media (max-width: 900px) {
  .detail { grid-template-columns: 1fr; gap: 22px; }
  .kopf__band { display: none; }
}

@media (max-width: 760px) {
  .kopf__haupt .schale {
    grid-template-columns: auto 1fr auto; grid-template-rows: auto auto;
    gap: 8px 10px; padding-block: 7px; min-height: 0;
  }
  .suchleiste { grid-column: 1 / -1; grid-row: 2; }
  .suchleiste input { height: 42px; }
  .marke img { height: 34px; }
  .katnav a { height: 42px; padding: 0 11px; }
  .kopf-knopf { height: 38px; padding: 0 9px; }
  html { scroll-padding-top: 130px; }
  #menueKnopf { display: inline-flex; }
  .kopf__aktionen .nur-mobil-aus { display: none; }
  .deal-raster { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; }
  .deal__inhalt { padding: 10px; }
  .preis-jetzt { font-size: 18px; }
  .deal__titel { font-size: 13.5px; }
  .kacheln { grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); }
  .kachel img, .kachel__glyphe { width: 58px; height: 58px; }
  .kachel { font-size: 12.5px; }
  .seitenkopf--mit-bild { grid-template-columns: 64px 1fr; gap: 14px; }
  .seitenkopf__bild { width: 64px; }
  .knopf--gross { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}

@media print {
  .kopf, .katnav, .werkzeugleiste, .fuss, #meldung, .deal__aktionen { display: none; }
}


/* =========================================================== Markenprofil ==
   Angebotegruppe.de: Orange fuehrt, Navy traegt die Flaechen, Gruen steht
   ausschliesslich fuer geprueft und gespart.
   ========================================================================= */

.deal__sparen { color: var(--gruen); }
.deal-marke--tief { background: var(--gruen); }
.deal-marke--geprueft { background: var(--gruen); }

/* Kopfband in Navy statt Weiss – greift die Hero-Flaeche auf. */
.kopf__band {
  background: var(--navy);
  color: #dfe7f0;
  border-bottom: 0;
}
.kopf__band a { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
.kopf__band a:hover { color: var(--primaer-hell); }
.kopf__band strong { color: #ffffff; }

/* Kategorienavigation: aktive Marke in Orange, Grundlinie in Navy. */
.katnav a[aria-current="page"] { color: var(--primaer); border-bottom-color: var(--primaer); }

/* Hauptknopf mit dem Verlauf aus dem Logo. */
.knopf--haupt {
  background: linear-gradient(180deg, var(--primaer-hell) 0%, var(--primaer) 100%);
  border-color: var(--primaer-tief);
}

/* Fussbereich in Navy. */
.fuss { background: var(--navy-flaeche); border-top-color: var(--linie); }

/* Banner: feste Hoehe ueber das Seitenverhaeltnis, damit beim Laden nichts
   springt (Cumulative Layout Shift). */
.banner img { aspect-ratio: 1920 / 793; object-fit: cover; }