/* ============================================================
   Kaam-in — Werbebanner im Blog (.adb, festes Bauteil 640 x 213)
   Struktur 1:1 aus dem SEOGEO-Baustein (Website/css/ad-banner.css,
   Stand 11.09.2026) uebernommen. Umgestellt sind NUR Farben und
   Schriften: alles kommt aus den Kaam-in-Tokens in css/style.css.
   Keine eigenen Markenfarben in dieser Datei.

   Farbrollen (Kaam-in-Regel "auf HELL gruen, auf DUNKELGRUEN orange"):
     Headline      --ink-900       Akzentwort  --green-700 + oranger Marker
     Subline       --ink-500       Bullets     --ink-900, gruener Haken-Kreis
     CTA           --green-700 mit weisser Schrift (5,3:1)
     Eckbadge      --orange-500 mit --text-on-accent (6,8:1)

   Tablet und Mobil (bis 900 px Viewport) weicht der Baustein bewusst
   vom SEOGEO-Verhalten ab: statt das 640-px-Bauteil zu verkleinern
   (auf 390 px waeren die Bullets 5,9 px, der CTA 17 px hoch), wird
   er zur fluessigen Karte in Lesegroesse. Siehe Block am Ende.
   Aenderung nur mit ?v=-Hochzaehlen in allen HTML-Dateien, die diese
   Datei laden.
   ============================================================ */

.adb {
  --adb-dark:   var(--ink-900, #212121);
  --adb-deep:   var(--footer-bg, #1e4a1a);
  --adb-accent: var(--green-700, #367a30);
  --adb-check:  var(--green-600, #43963c);
  --adb-mark:   var(--orange-500, #f7a824);
  --adb-badge-text: var(--text-on-accent, #3c2c07);
  --adb-light:  var(--green-50, #f3f9f2);
  --adb-line:   var(--green-100, #e0efdd);
  --adb-muted:  var(--ink-500, #646464);
  --adb-head:   var(--font-display, "Josefin Sans", system-ui, sans-serif);
  --adb-body:   var(--font-body, "Montserrat", system-ui, sans-serif);

  box-sizing: border-box;
  position: relative;
  width: 640px;
  height: 213px;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  background-image: radial-gradient(circle, rgba(30, 74, 26, .07) 1px, transparent 1px);
  background-size: 18px 18px;
  font-family: var(--adb-body);
  display: flex;
  box-shadow: var(--shadow-card, 0 2px 10px rgba(43, 42, 38, .06));
  border: 1px solid var(--adb-line);
}
.adb *, .adb *::before, .adb *::after { box-sizing: border-box; }

/* ---- Textspalte (links) ---- */
.adb__text {
  position: relative; z-index: 3;
  flex: 1 1 auto;
  padding: 10px 12px 11px 20px;
  display: flex; flex-direction: column;
  min-width: 0;
}
.adb__eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--adb-head); font-weight: 700;
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--adb-accent); margin-bottom: 4px;
}
.adb__eyebrow img { height: 14px; width: auto; display: block; }

.adb__headline {
  font-family: var(--adb-head); font-weight: 800;
  font-size: 22px; line-height: 1.08; letter-spacing: -.01em;
  color: var(--adb-dark); margin: 0 0 3px; max-width: 23ch;
}
.adb__headline .hl {
  color: var(--adb-accent); white-space: nowrap;
  box-shadow: inset 0 -.24em 0 var(--adb-mark);   /* oranger Marker unter dem Akzentwort */
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 .02em;
}
.adb__sub {
  font-family: var(--adb-body); font-weight: 600;
  font-size: 11px; line-height: 1.2; color: var(--adb-muted);
  margin: 0 0 5px; max-width: none;
}

/* ---- Bullets ---- */
.adb__list { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 3px; }
.adb__list li {
  position: relative; padding-left: 20px;
  font-size: 10.8px; font-weight: 600; line-height: 1.25; color: var(--adb-dark);
}
.adb__list li::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; border-radius: 50%;
  background-color: var(--adb-check);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 13 10 18 19 7'/></svg>");
  background-position: center; background-repeat: no-repeat; background-size: 64%;
  border: 1.5px solid var(--adb-accent);
}

/* ---- CTA-Pill ---- */
.adb__cta {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-family: var(--adb-head); font-weight: 700; font-size: 11.5px; letter-spacing: .005em;
  color: #fff; background: var(--adb-accent);
  padding: 8px 14px; border-radius: 999px;
  border: 2px solid var(--adb-deep);
  box-shadow: 0 3px 0 var(--adb-deep);
  text-decoration: none; line-height: 1;
  transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease;
}
.adb__cta svg { width: 14px; height: 14px; }

/* ---- Fotospalte (rechts) mit Bogen-Trennung ---- */
.adb__media {
  position: relative; flex: 0 0 228px; width: 228px;
  /* weiss statt hellgruen: beim Skalieren blitzte der Hintergrund als
     1-px-Naht an der linken Kante zwischen Bogen und Text durch */
  background: #fff;
  overflow: hidden;
}
.adb__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* weisser Bogen, der ins Foto schneidet */
.adb__media::before {
  content: ""; position: absolute; top: -20%; left: -64px; z-index: 2;
  width: 120px; height: 140%;
  background: #fff;
  border-radius: 0 100% 100% 0 / 0 50% 50% 0;
}
/* Deko-Kreis hinter dem Foto */
.adb__media::after {
  content: ""; position: absolute; z-index: 1; bottom: -46px; right: -46px;
  width: 150px; height: 150px; border-radius: 50%;
  background: var(--adb-mark); opacity: .16;
}

/* ---- Eckbadge (zweizeilig) ---- */
.adb__badge {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--adb-mark); color: var(--adb-badge-text);
  border: 2px solid var(--adb-deep);
  box-shadow: 0 3px 0 var(--adb-deep);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; transform: rotate(8deg);
}
.adb__badge b { font-family: var(--adb-head); font-weight: 800; font-size: 15px; line-height: 1; }
.adb__badge span { font-family: var(--adb-body); font-weight: 700; font-size: 7.5px; letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; }

/* ---- Dunkle Banner-Variante ---- */
.adb--dark {
  background: var(--adb-deep);
  background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
  border-color: var(--adb-deep);
}
.adb--dark .adb__eyebrow { color: var(--adb-mark); }
.adb--dark .adb__headline { color: #fff; }
.adb--dark .adb__headline .hl { color: var(--adb-mark); box-shadow: none; }
.adb--dark .adb__sub { color: rgba(255, 255, 255, .86); }
.adb--dark .adb__list li { color: #fff; }
.adb--dark .adb__list li::before { border-color: #fff; }
.adb--dark .adb__cta { background: var(--adb-mark); color: var(--adb-badge-text); border-color: #fff; box-shadow: 0 3px 0 #fff; }
.adb--dark .adb__media { background: #16361a; }
.adb--dark .adb__media::before { background: var(--adb-deep); }

/* ============================================================
   SCHUTZ-REGELN — verhindern, dass Artikel-CSS (.article__body p,
   .article__body a, .article__body ul) ins Banner durchschlaegt.
   Hoehere Spezifitaet gewinnt. NICHT entfernen.
   ============================================================ */
.adb .adb__headline {
  font-family: var(--adb-head); font-weight: 800;
  font-size: 22px; line-height: 1.08; letter-spacing: -.01em;
  margin: 0 0 3px; color: var(--adb-dark);
}
.adb--dark .adb__headline { color: #fff; }
.adb .adb__sub { font-size: 11px; line-height: 1.2; margin: 0 0 5px; }
.adb ul.adb__list { margin: 0 0 4px; padding: 0; }
.adb .adb__list li { margin: 0; }
.adb a.adb__cta,
.adb a.adb__cta:hover,
.adb a.adb__cta:visited {
  text-decoration: none; color: #fff; font-weight: 700;
}
.adb--dark a.adb__cta,
.adb--dark a.adb__cta:visited { color: var(--adb-badge-text); }
.adb img { margin: 0; border-radius: 0; }

/* Die ganze Banner-Flaeche ist klickbar: der CTA-Link spannt eine
   unsichtbare Flaeche ueber das Bauteil. Tap-Ziel = ganzer Banner,
   auch wenn der CTA selbst klein skaliert ist. */
.adb { isolation: isolate; }
.adb__text { position: static; }
.adb__text > * { position: relative; z-index: 3; }
.adb__text > .adb__cta { position: static; }
.adb__cta::after { content: ""; position: absolute; inset: 0; z-index: 6; border-radius: 14px; }
/* Kein transform am CTA: ein transform macht den Link zum Bezugsrahmen der
   aufgespannten Flaeche, die dann beim Hover auf Knopfgroesse schrumpft
   (Flackern). Der Hover-Hinweis kommt deshalb ueber Farbe und Schatten. */
.adb__cta:hover,
.adb:hover .adb__cta { transform: none; background: var(--adb-deep); color: #fff; box-shadow: 0 4px 0 var(--adb-deep); }
.adb--dark:hover .adb__cta,
.adb--dark .adb__cta:hover { background: var(--orange-600, #db9210); box-shadow: 0 4px 0 #fff; }
.adb--dark a.adb__cta:hover { color: var(--adb-badge-text); }
.adb:has(.adb__cta:focus-visible) { outline: 3px solid var(--focus-ring, rgba(67,150,60,.45)); outline-offset: 3px; }
.adb__cta:focus-visible { outline: none; }

/* ============================================================
   EMBED-WRAPPER — skaliert das feste 640x213-Banner proportional
   in die Artikelspalte. Hoehe + Skalierung setzt js/ad-banner.js
   per ResizeObserver (--adb-scale).
   Im Artikel: <div class="adb-embed"> <aside class="adb"> ... </div>
   ============================================================ */
.adb-embed {
  width: 100%;
  max-width: 760px;
  margin: 2.5rem auto;
  overflow: hidden;           /* Sicherheitsnetz, falls JS fehlt */
}
.adb-embed .adb {
  transform-origin: top left;
  transform: scale(var(--adb-scale, 1));
}

/* ============================================================
   NO-LOGO-VARIANTE — ohne Logo-Zeile, etwas groessere Schrift,
   damit der Inhalt die feste Hoehe ausbalanciert fuellt.
   ============================================================ */
.adb--nologo .adb__text { padding-top: 12px; padding-bottom: 12px; justify-content: center; }
.adb--nologo .adb__headline,
.adb.adb--nologo .adb__headline { font-size: 23px; margin-bottom: 4px; }
.adb--nologo .adb__sub,
.adb.adb--nologo .adb__sub { font-size: 12px; line-height: 1.3; margin-bottom: 6px; }
.adb--nologo .adb__list { gap: 4px; margin-bottom: 6px; }
.adb--nologo .adb__list li { font-size: 12px; line-height: 1.25; padding-left: 23px; }
.adb--nologo .adb__list li::before { width: 17px; height: 17px; }

/* ============================================================
   TABLET + MOBIL — fluessig statt verkleinert (Kaam-in-Abweichung)
   Bis 900 px Viewport gilt auf der Kaam-in-Site die Mobil-Lesenorm
   (style.css, "Mobil-Durchgang 17.08.2026"): Fliesstext >= 16 px,
   Bedienelemente >= 14 px, Tap-Ziele >= 44 px. Das auf die Spalte
   skalierte 640-px-Bauteil haelt das nicht (390 px: Bullets 5,9 px,
   CTA 17 px hoch). Deshalb wird das Banner hier zur fluessigen Karte:
     601-900 px  Text links, Foto rechts (38 %), Lesegroesse
     bis 600 px  Foto-Band oben, Text darunter
   js/ad-banner.js skaliert in diesem Bereich nicht (gleicher Breakpoint).
   ============================================================ */
@media (max-width: 900px) {
  .adb-embed { overflow: visible; height: auto !important; margin: 2.25rem 0; }
  .adb-embed .adb,
  .adb-embed .adb.adb--nologo {
    transform: none;
    width: 100%; height: auto;
    border-radius: var(--radius-md, 14px);
  }
  .adb-embed .adb__media { flex: 0 0 38%; width: 38%; min-height: 250px; }
  .adb-embed .adb__media::before { left: -28%; width: 53%; }
  .adb-embed .adb__media img { object-position: var(--adb-mobile-pos, center 30%) !important; }
  .adb-embed .adb__text,
  .adb-embed .adb--nologo .adb__text { padding: 22px 16px 24px 26px; justify-content: flex-start; }
  .adb-embed .adb__eyebrow { font-size: 12px; margin-bottom: 10px; }
  .adb-embed .adb__eyebrow img { height: 20px; }
  .adb-embed .adb .adb__headline,
  .adb-embed .adb.adb--nologo .adb__headline { font-size: 25px; line-height: 1.16; max-width: none; margin: 0 0 8px; text-wrap: balance; }
  .adb-embed .adb .adb__sub,
  .adb-embed .adb.adb--nologo .adb__sub { font-size: 16px; line-height: 1.45; margin: 0 0 14px; white-space: normal !important; }
  .adb-embed .adb ul.adb__list { gap: 8px; margin: 0 0 18px; }
  .adb-embed .adb__list li,
  .adb-embed .adb--nologo .adb__list li { font-size: 16px !important; line-height: 1.4; padding-left: 30px; }
  .adb-embed .adb__list li::before { width: 20px; height: 20px; top: .7em; }
  .adb-embed .adb__cta {
    font-size: 16px; padding: 13px 20px; min-height: 48px;
  }
  .adb-embed .adb__cta svg { width: 18px; height: 18px; }
  .adb-embed .adb__badge,
  .adb-embed .adb__badge[style] { top: 14px; right: 14px; width: 80px !important; height: 80px !important; }
  .adb-embed .adb__badge b { font-size: 15px !important; white-space: nowrap; }
  .adb-embed .adb__badge span { font-size: 9.5px !important; letter-spacing: .03em; }
}
@media (max-width: 600px) {
  .adb-embed { margin: 2rem 0; }
  .adb-embed .adb,
  .adb-embed .adb.adb--nologo { flex-direction: column; }
  .adb-embed .adb__media {
    order: -1;
    flex: 0 0 auto; width: 100%; min-height: 0; height: 200px;
  }
  /* Bogen wird zur weissen Welle am unteren Bandrand */
  .adb-embed .adb__media::before {
    top: auto; left: -10%; bottom: -48px;
    width: 120%; height: 62px;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  }
  .adb-embed .adb__media::after { display: none; }
  .adb-embed .adb__text,
  .adb-embed .adb--nologo .adb__text { padding: 4px 20px 22px; }
  .adb-embed .adb .adb__headline,
  .adb-embed .adb.adb--nologo .adb__headline { font-size: 23px; }
  .adb-embed .adb__cta { align-self: stretch; justify-content: center; }
  .adb-embed .adb__badge,
  .adb-embed .adb__badge[style] { width: 78px !important; height: 78px !important; top: 12px; right: 12px; }
  .adb-embed .adb__badge b { font-size: 14px !important; }
  .adb-embed .adb__badge span { font-size: 9px !important; letter-spacing: .02em; }
}

/* ---- Badge unten rechts (wenn oben rechts ein Gesicht sitzt) ---- */
@media (min-width: 901px) {
  .adb-embed .adb__badge.adb__badge--unten,
  .adb-embed .adb__badge.adb__badge--unten[style] { top: auto; bottom: 12px; }
}

/* Badge mit vollem Namen: „Baicy Terbrüggen" braucht zwei Zeilen und darf
   nicht an den Kreisrand stoßen — gilt über alle Breakpoints. */
.adb__badge--name b,
.adb-embed .adb__badge--name b {
  font-size: 11px !important;
  line-height: 1.14 !important;
  white-space: normal !important;
}
.adb__badge--name span,
.adb-embed .adb__badge--name span { font-size: 7.5px !important; letter-spacing: .05em; }
@media (max-width: 900px) {
  .adb-embed .adb__badge--name,
  .adb-embed .adb__badge--name[style] { width: 88px !important; height: 88px !important; }
}