/* ==========================================================================
   RGN Marketing — Angebotsleiste über dem Header (Florian, 27.10.2026)
   Steht als .ab vor <header class="kopf"> auf allen Seiten außer Karriere.
   Frist und Monatswechsel: assets/js/angebot.js. Der Pfeil öffnet das
   Rabatt-Pop-up mit aufgeklapptem Formular (promo.js, #rabatt).
   Farbe: Schwarz wie der Analyse-Knopf im Kopf (Florian, 28.10.2026: „schwarz, das passt besser“).
   Auch auf /angebot-ads/ und /angebot-website/ (dort Kopf .lp-kopf, Pfeil → #lp-anfrage).
   ========================================================================== */
:root{--ab-h:56px;--ab-bg:#16191C;--ab-gelb:#FFE066}
body{padding-top:var(--ab-h)}
.ab{position:fixed;inset:0 0 auto;z-index:90;height:var(--ab-h);overflow:hidden;
  background:var(--ab-bg);transition:height .35s var(--fed-weich,ease)}
/* Die Kopfzeile hängt unter der Leiste; beim Scrollen fährt die Leiste ein
   und die Kopfzeile rutscht nach oben (html.ab-zu aus angebot.js). */
.kopf{top:var(--ab-h);
  transition:top .35s var(--fed-weich,ease),background .35s var(--fed-weich,ease),
    border-color .35s var(--fed-weich,ease),backdrop-filter .35s var(--fed-weich,ease)}
html.ab-zu .ab{height:0}
html.ab-zu .kopf{top:0}
/* Angebotsseiten: Kopf ist dort sticky statt fixiert */
.lp-kopf{top:var(--ab-h);transition:top .35s var(--fed-weich,ease)}
html.ab-zu .lp-kopf{top:0}
@media (max-width:640px){:root{--ab-h:52px}}
@media (prefers-reduced-motion:reduce){.ab,.kopf,.lp-kopf{transition:none}}

/* --- Leiste: Inhalt (gleich auf jeder Seite) ---------------------------- */
.ab__in{display:flex;align-items:center;justify-content:center;gap:14px;
  height:var(--ab-h);padding-inline:16px;color:#fff}
.ab__badge{flex:none;display:inline-block;background:var(--ab-gelb);color:#16191C;
  font-weight:800;font-size:1.0625rem;line-height:1;padding:.42em .62em;border-radius:7px;
  transform:rotate(-3deg);box-shadow:0 2px 0 rgba(0,0,0,.14);white-space:nowrap}
.ab__badge sup{font-size:.55em;margin-left:.1em}
.ab__text{margin:0;font-weight:700;font-size:1rem;line-height:1;white-space:nowrap}
.ab__frist{flex:none;display:inline-flex;align-items:center;gap:.42em;
  background:rgba(255,255,255,.12);border-radius:7px;padding:.48em .7em;
  font-weight:600;font-size:.9375rem;line-height:1;white-space:nowrap}
.ab__frist svg{width:16px;height:16px;flex:none}
.ab__btn{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  background:#fff;color:var(--ab-bg);font-weight:700;font-size:.9375rem;line-height:1;
  border-radius:999px;min-height:44px;padding:0 1.25em;text-decoration:none;white-space:nowrap;
  transition:transform .2s ease,box-shadow .2s ease}
.ab__btn:hover{color:var(--ab-bg);transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.45)}
.ab__btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ab__btn svg{width:17px;height:17px;flex:none;transition:transform .2s ease}
.ab__btn:hover svg{transform:translateX(2px)}

/* Handy: wie im Vorbild — Badge, Text, Frist, runder Pfeil */
@media (max-width:640px){
  .ab__in{gap:10px;padding-inline:12px}
  .ab__badge{font-size:.9375rem}
  .ab__text{font-size:.875rem}
  .ab__frist{font-size:.8125rem;padding:.45em .55em}
  .ab__frist svg{width:14px;height:14px}
  .ab__nur,.ab__btn-t{display:none}
  .ab__btn{width:44px;height:44px;min-height:0;padding:0}
}
@media (max-width:380px){
  .ab__in{gap:8px;padding-inline:10px}
  .ab__badge{font-size:.875rem}
  .ab__text{font-size:.8125rem}
}
@media (max-width:339px){
  .ab__in{gap:6px;padding-inline:8px}
  .ab__text{font-size:.75rem}
  .ab__frist svg{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ab__btn,.ab__btn svg{transition:none}
}

/* Kleingedrucktes im Rabatt-Pop-up (Rechtsprüfung 27.10.2026) */
.pop__txt>p.pop__bedingung{margin:-.6rem 0 1.2rem;font-size:.75rem;line-height:1.5}

/* Fußnote zur Aktion auf den Angebotsseiten */
.lp-fuss__aktion{margin:0;font-size:.75rem;line-height:1.5;opacity:.8}

/* Angebotsseiten: Telefon + Anfrage-Knopf im Kopf, Formular als Pop-up (lp-anfrage-pop.js, 28.10.2026) */
.lp-kopf__rechts{display:flex;align-items:center;gap:10px}
.lp-kopf__cta{display:inline-flex;align-items:center;min-height:44px;padding:0 1.15em;border:0;border-radius:var(--r-btn,10px);
  background:var(--ink,#0E1113);color:#fff;font:inherit;font-weight:700;font-size:.9375rem;line-height:1;white-space:nowrap;cursor:pointer;
  transition:background .2s ease}
.lp-kopf__cta:hover{background:var(--graphit,#2A3033)}
.lp-kopf__cta:focus-visible{outline:2px solid var(--ink,#0E1113);outline-offset:3px}
@media (max-width:520px){
  .lp-kopf__rechts{gap:6px}
  .lp-kopf__cta-lang{display:none}
  .lp-kopf__cta{padding:0 .9em;font-size:.875rem}
}
dialog.lp-pop{width:min(560px,calc(100vw - 20px));max-height:calc(100dvh - 20px);margin:auto;padding:0;border:0;border-radius:20px;
  background:transparent;overflow:auto;overscroll-behavior:contain}
dialog.lp-pop::backdrop{background:rgba(14,17,19,.62)}
.lp-pop .hf__formular{margin:0;max-width:none;width:100%}
.lp-pop .hf__bogen{display:none}
.lp-pop .hf__ftitel{padding-right:48px}
.lp-pop__zu{position:sticky;top:8px;float:right;z-index:5;width:44px;height:44px;margin:8px 8px -52px 0;border:0;border-radius:50%;
  background:#EEF0F2;color:var(--ink,#0E1113);font-size:26px;line-height:1;cursor:pointer;box-shadow:none}
html.lp-pop-auf{overflow:hidden}
/* Pop-up: Siegel klein und unter dem Formular; PC eine Zeile, Handy Trustindex oben, darunter die drei anderen (Florian, 01.11.2026) */
.lp-pop .hf__formular{display:flex;flex-direction:column}
.lp-pop .hf__weiss{order:1}
.lp-pop .lp-siegel{order:2;margin:0;padding:.85rem 0;border-top:1px solid var(--li-soft);border-bottom:0}
.lp-pop .lp-siegel__reihe{flex-wrap:wrap;gap:.6rem .9rem}
dialog.lp-pop .lp-siegel__logo--ti{height:40px}
dialog.lp-pop .lp-siegel__logo--pe{height:44px}
dialog.lp-pop .lp-siegel__logo--ihk{height:36px}
@media (min-width:600px){
  .lp-pop .lp-siegel__reihe{flex-wrap:nowrap;gap:1.1rem}
  .lp-pop .lp-siegel__ti{flex-basis:auto}
}
@media (max-width:360px){ .lp-pop .hf__ftitel{font-size:1.4rem} }