/* RHD Website-Funnel + Kontakt-Button — ausgeliefert vom FactoringCockpit (routes/website.js).
   Erbt die Schrift der Website (Causten Round auf rhd-bremen.de). Farben per CSS-Variablen ueberschreibbar:
   #rhd-funnel, #rhd-kontakt, .rhd-ov { --rhd-primary:#007656; --rhd-accent:#bcad90; } */
.rhd-f, .rhd-k, .rhd-ov { --rhd-primary: #007656; --rhd-primary-dark: #005a42; --rhd-accent: #bcad90; --rhd-accent-soft: #efeae0; --rhd-ink: #3c332d; --rhd-text: #343331; --rhd-line: #e6e2da; --rhd-bg: #ffffff; --rhd-red: #b3261e;
  font-family: inherit; color: var(--rhd-text); line-height: 1.5; box-sizing: border-box; }
.rhd-f *, .rhd-k *, .rhd-ov * { box-sizing: border-box; }
.rhd-f [hidden], .rhd-k [hidden], .rhd-ov [hidden] { display: none !important; }
.rhd-f h2, .rhd-f h3, .rhd-ov h2, .rhd-ov h3 { padding: 0; }   /* Divi setzt padding-bottom auf Ueberschriften */
.rhd-f { max-width: 860px; margin: 0 auto; }
.rhd-f h2, .rhd-ov h2 { font-size: 1.6rem; line-height: 1.2; color: var(--rhd-primary); margin: 0 0 4px; font-weight: 800; }
.rhd-f h3, .rhd-ov h3 { font-size: 1.05rem; color: var(--rhd-ink); margin: 0 0 14px; font-weight: 600; }
.rhd-f p, .rhd-ov p { margin: 0 0 12px; }
.rhd-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
/* Weiche */
.rhd-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 18px 0 6px; }
.rhd-kachel { position: relative; overflow: hidden; text-align: left; background: var(--rhd-bg); border: 2px solid var(--rhd-line); border-radius: 18px; padding: 20px 18px 18px; cursor: pointer; font: inherit; color: var(--rhd-ink); transition: border-color .15s, transform .15s; }
.rhd-kachel::after { content: ""; position: absolute; top: -18px; right: -30px; width: 74px; height: 40px; background: var(--rhd-accent); transform: skewX(-24deg); opacity: .45; transition: opacity .15s; }
.rhd-kachel:hover, .rhd-kachel:focus-visible { border-color: var(--rhd-primary); transform: translateY(-2px); outline: none; }
.rhd-kachel:hover::after { opacity: 1; }
a.rhd-kachel, a.rhd-kachel * { text-decoration: none; }
.rhd-kachel b { display: block; font-size: 1.05rem; color: var(--rhd-primary); margin-bottom: 6px; }
.rhd-kachel span { font-size: .92rem; color: var(--rhd-text); }
/* Formulare */
.rhd-schritte { display: flex; gap: 8px; margin: 0 0 16px; font-size: .8rem; color: #8a837b; }
.rhd-schritte b { color: var(--rhd-primary); }
.rhd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 16px; }
.rhd-feld { display: flex; flex-direction: column; gap: 5px; }
.rhd-feld label { font-size: .85rem; font-weight: 600; color: var(--rhd-ink); }
.rhd-f .rhd-feld input, .rhd-f .rhd-feld select, .rhd-f .rhd-feld textarea, .rhd-ov .rhd-feld input, .rhd-ov .rhd-feld select, .rhd-ov .rhd-feld textarea { font: inherit; color: var(--rhd-text); border: 1.5px solid var(--rhd-line) !important; border-radius: 12px !important; padding: 10px 12px !important; background: #fff !important; width: 100%; margin: 0; }   /* Spezifitaet gegen Divi-Regeln wie body input[type=tel] */
.rhd-f .rhd-feld input:focus, .rhd-f .rhd-feld select:focus, .rhd-f .rhd-feld textarea:focus, .rhd-ov .rhd-feld input:focus, .rhd-ov .rhd-feld select:focus, .rhd-ov .rhd-feld textarea:focus { outline: none; border-color: var(--rhd-primary) !important; box-shadow: 0 0 0 3px rgba(0,118,86,.12); }
.rhd-feld textarea { min-height: 96px; resize: vertical; }
.rhd-radios { display: flex; gap: 8px; flex-wrap: wrap; }
.rhd-radios label { border: 1.5px solid var(--rhd-line); border-radius: 999px; padding: 7px 14px; cursor: pointer; font-size: .9rem; font-weight: 600; }
.rhd-radios input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }   /* Tastatur erreichbar, nicht display:none */
.rhd-radios label { position: relative; }
.rhd-radios label:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(0,118,86,.25); }
.rhd-radios label.an { border-color: var(--rhd-primary); background: var(--rhd-primary); color: #fff; }
.rhd-ds { display: flex; gap: 10px; align-items: flex-start; font-size: .8rem; color: #6b655e; margin-top: 14px; }
.rhd-ds input { margin-top: 4px; }
.rhd-ds a { color: var(--rhd-primary); }
.rhd-hinweis { background: var(--rhd-accent-soft); border-radius: 12px; padding: 10px 14px; font-size: .9rem; margin: 10px 0; }
.rhd-fehler { color: var(--rhd-red); font-size: .9rem; margin: 10px 0 0; font-weight: 600; }
.rhd-aktionen { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 18px; }
.rhd-btn { font: inherit; font-weight: 700; border-radius: 999px; padding: 12px 24px; cursor: pointer; border: 2px solid var(--rhd-primary); background: var(--rhd-primary); color: #fff; text-decoration: none; display: inline-block; line-height: 1.2; }
.rhd-btn:hover { background: var(--rhd-primary-dark); border-color: var(--rhd-primary-dark); }
.rhd-btn.sek { background: transparent; color: var(--rhd-primary); }
.rhd-btn.sek:hover { background: rgba(0,118,86,.08); }
.rhd-btn:disabled { opacity: .55; cursor: wait; }
.rhd-zurueck { font: inherit; background: none; border: none; color: #8a837b; cursor: pointer; padding: 8px 4px; text-decoration: underline; }
.rhd-fertig { text-align: center; padding: 20px 10px; }
.rhd-fertig .rhd-haken { width: 56px; height: 56px; border-radius: 50%; background: var(--rhd-primary); color: #fff; font-size: 30px; line-height: 56px; margin: 0 auto 14px; font-weight: 800; }
.rhd-tel { color: var(--rhd-primary); font-weight: 800; text-decoration: none; font-size: 1.15rem; }
/* Overlay */
.rhd-ov { position: fixed; inset: 0; z-index: 2147483000;   /* ueber Divis fixem Header (99999) */ background: rgba(40,35,30,.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.rhd-ov-box { background: var(--rhd-bg); border-radius: 22px; width: 100%; max-width: 860px; max-height: calc(100vh - 40px); overflow: auto; padding: 26px 28px 28px; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.rhd-ov-x { position: absolute; top: 12px; right: 14px; font: inherit; font-size: 26px; line-height: 1; background: none; border: none; cursor: pointer; color: #8a837b; }
@media (max-width: 640px) { .rhd-ov { padding: 0; } .rhd-ov-box { border-radius: 0; max-height: 100vh; height: 100vh; max-height: 100dvh; height: 100dvh; padding: 22px 16px; } }
/* Schwebender Kontakt-Button */
.rhd-k { position: fixed; right: 18px; bottom: 18px; z-index: 2147482000; }
.rhd-k-btn { font: inherit; font-weight: 800; border-radius: 999px; padding: 13px 20px; border: 2px solid var(--rhd-primary); background: var(--rhd-primary); color: #fff; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.18); display: flex; align-items: center; gap: 9px; }
.rhd-k-btn .rhd-punkt { width: 9px; height: 9px; border-radius: 50%; background: #9CA3AF; }
.rhd-k-btn .rhd-punkt.an { background: #86efac; box-shadow: 0 0 0 3px rgba(134,239,172,.35); }
.rhd-k-panel { position: absolute; right: 0; bottom: 60px; width: 320px; max-width: calc(100vw - 36px); background: var(--rhd-bg); border-radius: 18px; box-shadow: 0 16px 50px rgba(0,0,0,.22); padding: 16px 16px 12px; border: 1px solid var(--rhd-line); }
.rhd-k-panel h4 { margin: 0 0 2px; font-size: 1rem; color: var(--rhd-primary); font-weight: 800; }
.rhd-k-panel .rhd-k-zeit { font-size: .8rem; color: #6b655e; margin-bottom: 10px; }
.rhd-k-panel .rhd-btn { width: 100%; text-align: center; margin: 4px 0 10px; }
.rhd-k-liste { list-style: none; margin: 0; padding: 0; line-height: inherit; }
.rhd-k-liste li { border-top: 1px solid var(--rhd-line); }
.rhd-k-liste a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 2px; text-decoration: none; color: var(--rhd-text); font-size: .9rem; }
.rhd-k-liste a b { color: var(--rhd-primary); white-space: nowrap; }
.rhd-k-liste a:hover { color: var(--rhd-primary); }
@media (max-width: 640px) { .rhd-k { right: 12px; bottom: 12px; } .rhd-k-btn { padding: 12px 16px; } }