/* =========================================================================
   RM EntrümpelProfis · Landingpage v2 (18.10.2026)
   Lädt nach styles.css und ergänzt nur: Rabatt, Vorher/Nachher, Zwischen-CTA,
   Handy-Chat, drei Schritte, Google-Bewertungen, Einsatzgebiet-Karte, WhatsApp-Knopf, Pop-up.
   Bilder immer im Originalformat: Breite setzen, Höhe automatisch, nie zwei feste Maße.
   ========================================================================= */

.aus__bild{position:relative}

/* Rabatt im Formular */
.hf__raster .q-kopf,.unten__karte .q-kopf{position:relative;padding-right:100px}
.q-sticker{position:absolute;right:12px;top:2px;display:grid;place-content:center;width:74px;height:74px;border-radius:var(--r-p);background:var(--or);color:var(--ink);text-align:center;transform:rotate(-8deg);box-shadow:0 6px 16px rgba(232,113,26,.3)}
.q-sticker b{display:block;font:800 1.5rem/1 var(--f-d)}
.q-sticker span{display:block;font:700 .74rem/1.1 var(--f-b);margin-top:3px}
/* Rabattbedingung: wortgleich unter jedem Formular, sichtbar ab Schritt 1 (§ 6 Abs. 1 Nr. 3 DDG) */
.q-bedingung{margin-top:12px;font-size:.78rem;line-height:1.45;color:var(--muted);text-align:left}
.q-bedingung b{color:var(--or-t)}
/* Rabattbedingung im Fuß (Florian 19.10.2026), Sternchen am Sticker verweist hierher */
.fuss__rabatt{margin-top:26px;max-width:62rem;font-size:.82rem;line-height:1.5;color:#B7B4AE}
.fuss__rabatt b{color:var(--or-h)}
.hf__punkte li{text-wrap:pretty}

/* Vorher / Nachher (echte Fotos, 3:4) */
.vn{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:820px;margin-inline:auto}
.vn__bild{position:relative;border-radius:var(--r-c);overflow:hidden;background:var(--paper-2);box-shadow:var(--s-2)}
.vn__bild img{display:block;width:100%;height:auto}
.vn__marke{position:absolute;left:10px;top:10px;padding:4px 12px;border-radius:var(--r-p);background:var(--ink);color:#fff;font:800 1.02rem/1.2 var(--f-d);letter-spacing:.02em}
.vn__marke--nach{background:var(--or);color:var(--ink)}
.vn__pfeil{position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:var(--r-p);background:#fff;color:var(--or-t);box-shadow:0 6px 18px rgba(20,23,27,.2)}
.vn__pfeil .ic{width:22px;height:22px}
.einsatz{max-width:820px;margin:34px auto 0}
.einsatz__titel{font:800 1.4rem/1.1 var(--f-d);color:var(--ink);text-align:center;margin-bottom:14px}
.einsatz__raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:620px;margin-inline:auto}
.einsatz figure img{display:block;width:100%;height:auto;border-radius:var(--r-c)}
.einsatz figcaption{margin-top:6px;font-size:.84rem;line-height:1.35;color:var(--muted);text-align:center;text-wrap:pretty}
.knoepfe--mitte{justify-content:center}
@media (prefers-reduced-motion:no-preference){
  .js .vn.zeig .vn__bild--nach{opacity:0;transform:translateX(12px);transition:opacity .5s ease .25s,transform .5s cubic-bezier(.2,.8,.2,1) .25s}
  .js .vn.zeig.da .vn__bild--nach{opacity:1;transform:none}
  .js .vn.zeig .vn__pfeil{transform:scale(.6);opacity:0;transition:transform .4s cubic-bezier(.3,1.5,.5,1) .5s,opacity .3s ease .5s}
  .js .vn.zeig.da .vn__pfeil{transform:none;opacity:1}
}

/* Zwischen-CTA */
.zcta{background:var(--ink);color:#E9E7E2;padding:36px 0}
.zcta__in{display:grid;gap:18px}
.zcta__titel{font:800 1.8rem/1.05 var(--f-d);color:#fff;margin-bottom:6px}
.zcta__text p:last-child{color:#C9C7C2;max-width:36rem}
.zcta__knoepfe{display:grid;gap:10px}

/* WhatsApp im Handy (Rahmen 9:19,5) */
.handy{width:min(320px,86vw);margin-inline:auto}
.handy__rahmen{position:relative;padding:11px;border-radius:48px;background:linear-gradient(145deg,#2A2F36,#0E1013);box-shadow:0 30px 60px rgba(20,23,27,.28),inset 0 0 0 1.5px rgba(255,255,255,.08)}
.handy__insel{position:absolute;left:50%;top:20px;z-index:3;width:88px;height:24px;margin-left:-44px;border-radius:var(--r-p);background:#0B0C0E}
.handy__bildschirm{position:relative;display:flex;flex-direction:column;aspect-ratio:9 / 19.5;border-radius:38px;overflow:hidden;background:#EDE7DD}
.handy .chat__kopf{padding:48px 14px 9px}
.handy .chat__kopf img{padding:0;background:none}
.handy .chat__lauf{flex:1;justify-content:flex-end;overflow:hidden;padding:8px 9px 12px;gap:6px;-webkit-mask-image:linear-gradient(transparent 0,#000 14px);mask-image:linear-gradient(transparent 0,#000 14px)}
.handy .msg{font-size:.8rem;line-height:1.38;max-width:88%}
.handy .msg--anhang .ic{width:30px;height:30px;padding:6px}
.handy .chat__tag{font-size:.7rem}
@media (prefers-reduced-motion:no-preference){
  .chat__lauf--warte .msg,.chat__lauf--warte .chat__tag{opacity:0;transform:translateY(8px) scale(.98);transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
  .chat__lauf--los .msg,.chat__lauf--los .chat__tag{opacity:1;transform:none}
}

/* Drei Schritte */
.drei__liste{list-style:none;display:grid;gap:30px;max-width:980px;margin:0 auto}
.drei__schritt{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:18px;align-items:start;align-content:start}
.drei__marke{grid-row:1 / span 2;position:relative;display:grid;place-items:center;width:76px;height:76px;border-radius:var(--r-p);background:#fff;border:2px solid var(--or);color:var(--or-t);box-shadow:0 8px 22px rgba(232,113,26,.18)}
.drei__icon .ic{width:30px;height:30px;display:block}
.drei__nr{position:absolute;right:-6px;top:-6px;display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-p);background:var(--ink);color:#fff;font:800 1.02rem/1 var(--f-d)}
.drei__schritt h3{font:800 1.55rem/1.05 var(--f-d);color:var(--ink);margin-top:10px}
.drei__schritt p{margin-top:6px;font-size:.98rem;line-height:1.5;color:var(--muted)}
/* Verbindungslinie: mobil senkrecht von Kreis zu Kreis */
.drei__schritt:not(:last-child)::after{content:'';position:absolute;left:37px;top:84px;bottom:-26px;width:2px;border-radius:2px;background:linear-gradient(var(--or),rgba(232,113,26,.35));transform-origin:top}
@media (prefers-reduced-motion:no-preference){
  .js .drei__liste.zeig .drei__schritt::after{transform:scaleY(0);transition:transform .6s cubic-bezier(.4,0,.2,1)}
  .js .drei__liste.zeig.da .drei__schritt::after{transform:none}
  .js .drei__liste.zeig.da .drei__schritt:nth-child(1)::after{transition-delay:.35s}
  .js .drei__liste.zeig.da .drei__schritt:nth-child(2)::after{transition-delay:.85s}
  .js .drei__liste.zeig .drei__marke{transform:scale(.7);opacity:0;transition:transform .45s cubic-bezier(.3,1.4,.5,1),opacity .3s ease}
  .js .drei__liste.zeig.da .drei__marke{transform:none;opacity:1}
  .js .drei__liste.zeig.da .drei__schritt:nth-child(2) .drei__marke{transition-delay:.55s}
  .js .drei__liste.zeig.da .drei__schritt:nth-child(3) .drei__marke{transition-delay:1.05s}
}
.drei .knoepfe{margin-top:34px}

/* Google-Bewertungen */
.gbew{max-width:1120px;margin-inline:auto}
.gbew__kopf{display:flex;align-items:center;gap:14px;width:max-content;max-width:100%;margin:0 auto 22px;padding:14px 20px;background:#fff;border:1px solid var(--line);border-radius:var(--r-c);box-shadow:var(--s-1)}
.gbew__g{flex:none;width:40px;height:40px;display:block}
.gbew__titel{display:block;font-size:.86rem;font-weight:700;color:var(--muted)}
.gbew__zeile{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;line-height:1.2}
.gbew__zeile b{font:800 1.9rem/1 var(--f-d);color:var(--ink)}
.gbew__zeile > span:last-child{font-size:.92rem;color:var(--muted)}
.sterne{display:inline-flex;gap:1px;color:#F4B400}
.sterne .ic{width:18px;height:18px;stroke:none}
.gbew__liste{list-style:none;display:grid;gap:14px}
.gkarte{display:flex;flex-direction:column;gap:10px;padding:18px 18px 20px;background:#fff;border:1px solid var(--line);border-radius:var(--r-c);box-shadow:var(--s-1)}
.gkarte__kopf{display:flex;align-items:center;gap:10px}
.gkarte__avatar{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-p);background:#5F6B7A;color:#fff;font:700 1.05rem/1 var(--f-b)}
.gkarte:nth-child(2) .gkarte__avatar{background:#2F7D5B}
.gkarte:nth-child(3) .gkarte__avatar{background:#8A4FA0}
.gkarte:nth-child(4) .gkarte__avatar{background:#B4572A}
.gkarte__kopf b{display:block;font-size:.98rem;line-height:1.25;color:var(--ink)}
.gkarte__kopf div span{display:block;font-size:.8rem;color:var(--muted)}
.gkarte__g{flex:none;width:20px;height:20px;margin-left:auto}
.gkarte blockquote{margin:0}
.gkarte p{font-size:.96rem;line-height:1.55;color:var(--txt);text-wrap:pretty}
.gbew__hinweis{max-width:46rem;margin:18px auto 0;text-align:center;font-size:.8rem;line-height:1.5;color:var(--muted)}

/* Einsatzgebiet: Text links, RGN-Standardkarte rechts, Rand blendet in den Hintergrund aus */
.gebiet2{overflow:hidden}
.gebiet2__raster{display:grid;gap:4px;align-items:center}
.gebiet2__text p + p{margin-top:12px;color:var(--muted);line-height:1.6;max-width:42rem}
.gebiet2__karte{position:relative;margin:0 -16px}
.gebiet2__karte img{display:block;width:100%;height:auto}
.gebiet2__osm{position:absolute;right:16px;bottom:6px;font-size:.7rem;line-height:1.3;color:#57534C}  /* ODbL-Namensnennung, ohne Link */

/* Schwebender WhatsApp-Knopf (Handy und PC) */
.wa-knopf{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:90;display:grid;place-items:center;width:60px;height:60px;border-radius:var(--r-p);background:var(--wa);color:var(--ink);text-decoration:none;box-shadow:0 8px 22px rgba(20,23,27,.26);opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;transition:opacity .25s ease,transform .25s ease,background .16s ease}
.wa-knopf__logo{width:30px;height:30px;display:block}
.wa-knopf--da{opacity:1;transform:none;pointer-events:auto}
.wa-knopf:hover{background:var(--wa-h)}
.wa-knopf--weg,.kekse-offen .wa-knopf,.angebot-offen .wa-knopf{opacity:0;transform:translateY(14px) scale(.9);pointer-events:none}

/* Fuß: Platz unten, damit der WhatsApp-Knopf nichts verdeckt */
.fuss{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}

/* Neukunden-Pop-up: über dem Fenster, unter dem Cookie-Hinweis (z-index 200) */
.angebot{position:fixed;inset:0;z-index:160;display:grid;align-items:end;justify-items:center;padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px))}
.angebot__schleier{position:absolute;inset:0;background:rgba(14,16,19,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.angebot__karte{position:relative;width:min(440px,100%);max-height:calc(100dvh - 24px);overflow-y:auto;padding:24px 20px 18px;border-radius:var(--r-f);background:#fff;text-align:center;box-shadow:0 24px 64px rgba(0,0,0,.36)}
.angebot__zu{position:absolute;right:10px;top:10px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:var(--r-p);background:var(--paper-2);color:var(--ink);cursor:pointer}
.angebot__zu:hover{background:var(--line)}
.angebot__logo{display:block;width:156px;height:40px;margin:0 auto 12px}
.angebot__kicker{font-size:.9rem;font-weight:700;color:var(--or-t)}
.angebot__titel{margin-top:2px;font-family:var(--f-d);font-weight:800;line-height:1}
.angebot__titel span{display:block}
.angebot__titel span:first-child{font-size:2.6rem;color:var(--ink)}
.angebot__titel span + span{font-size:1.5rem;color:var(--or-g);margin-top:2px}
.angebot__text{margin:10px auto 0;max-width:22rem;font-size:.96rem;line-height:1.5;color:var(--txt)}
.angebot__knoepfe{display:grid;gap:8px;margin-top:16px}
.angebot__knoepfe .btn{width:100%;min-height:50px}
.angebot__bedingung{margin-top:12px;font-size:.76rem;line-height:1.45;color:var(--muted);text-align:left}
body.angebot-offen{overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  .angebot:not([hidden]) .angebot__karte{animation:angebotHoch .32s cubic-bezier(.22,.61,.36,1) both}
  .angebot:not([hidden]) .angebot__schleier{animation:angebotSchleier .25s ease both}
}
@keyframes angebotHoch{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes angebotSchleier{from{opacity:0}to{opacity:1}}

/* ---------- ab 621 px ---------- */
@media (min-width:621px){
  .vn{gap:18px}
  .einsatz__raster{gap:18px}
  .gbew__liste{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zcta__knoepfe{grid-template-columns:repeat(3,auto);justify-content:start}
  .gebiet2__karte{margin:0 -24px}
}

/* ---------- ab 901 px ---------- */
@media (min-width:901px){
  .hf__raster .q-kopf{padding-right:0}
  .gebiet2__osm{right:24px;bottom:44px}
  .q-sticker{position:relative;right:auto;top:auto;margin-top:14px;width:82px;height:82px}
  .q-sticker b{font-size:1.65rem}
  .unten__karte .q-sticker{position:absolute;right:10px;top:2px;margin-top:0;width:74px;height:74px}
  .unten__karte .q-sticker b{font-size:1.5rem}
  .vn__pfeil{width:52px;height:52px;margin:-26px 0 0 -26px}
  .zcta{padding:44px 0}
  .zcta__in{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px}
  .zcta__titel{font-size:2.1rem}
  .drei__liste{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
  .drei__schritt{grid-template-columns:none;justify-items:center;text-align:center}
  .drei__marke{grid-row:auto;width:84px;height:84px}
  .drei__schritt h3{margin-top:18px}
  .drei__schritt p{max-width:19rem}
  .drei__schritt:not(:last-child)::after{left:calc(50% + 54px);top:41px;bottom:auto;width:calc(100% + 32px - 108px);height:2px;background:linear-gradient(90deg,var(--or),rgba(232,113,26,.35));transform-origin:left}
  .js .drei__liste.zeig .drei__schritt::after{transform:scaleX(0)}
  .js .drei__liste.zeig.da .drei__schritt::after{transform:none}
  .gbew__liste{grid-template-columns:repeat(4,minmax(0,1fr))}
  .gebiet2__raster{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:24px}
  .gebiet2__karte{margin:-40px -24px -40px 0}
  .angebot{align-items:center;padding:20px}
  .angebot__karte{padding:30px 30px 22px}
  .wa-knopf{right:max(24px,env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));width:62px;height:62px}
}
/* Fünf Menüpunkte: zwischen 901 und 1100 px enger setzen */
@media (min-width:901px) and (max-width:1100px){
  .kopf__nav li a{padding:0 7px;font-size:.9rem}
}
/* ab 1101 px: Hero-Kacheln dreispaltig quer, damit die Beschriftung einzeilig bleibt */
@media (min-width:1101px){
  .hf__raster .q-kacheln:not(.q-kacheln--4){grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .hf__raster .q-kacheln:not(.q-kacheln--4) .q-kachel{flex-direction:row;justify-content:flex-start;align-items:center;gap:14px;min-height:78px;padding:10px 16px;text-align:left;font-size:1.14rem}
  .hf__raster .q-kacheln:not(.q-kacheln--4) .q-kachel img{width:54px;height:54px;flex:none}
}
/* schmale Handys: Kacheln und Knöpfe einzeilig */
@media (min-width:360px) and (max-width:389px){.q-kachel{font-size:1.02rem;padding-inline:4px}}
@media (max-width:359px){
  .hf__raster .q-kopf,.unten__karte .q-kopf{padding-right:84px}
  .q-sticker{width:64px;height:64px;right:8px}
  .q-sticker b{font-size:1.3rem}
  .q-kachel{font-size:.92rem;padding-inline:3px}
  .btn{font-size:.94rem;padding-inline:.85rem;gap:.4rem}
  .lst__karte h3{font-size:1.32rem}
}
@media (prefers-reduced-motion:reduce){
  .wa-knopf{transition:none}
}
@media print{
  .wa-knopf,.angebot{display:none!important}
}