/* Reifenretter – Auftragsformular ("Panne melden")
   Eigenstaendiges Modul-Stylesheet. ALLES unter .rrd-af gescoped,
   damit das uebrige Theme/Website unberuehrt bleibt.
   Auto-generiert aus der abgenommenen Demo v5 (Design 1:1). */

.rrd-af{
  --rrd-primary:#405FF2;
  
    --rrd-primary-dark:#2a40c9;
  
    --rrd-navy:#050B20;
  
    --rrd-tint:#eef1fe;
  
    --rrd-ink:#0c101e;
  
    --rrd-muted:#7a8194;
  
    --rrd-bg:#eef1f8;
  
    --rrd-card:#ffffff;
  
    --rrd-border:#e6e9f2;
  
    --rrd-ok:#16a34a;
  
    --rrd-ok-tint:#e7f6ec;
  
    --rrd-err:#e23b3b;
  
    --rrd-err-tint:#fdeced;
  
    --rrd-font:'DM Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  
    --rrd-shadow:0 2px 4px rgba(5,11,32,.03),0 18px 50px rgba(5,11,32,.07);
  
  font-family:var(--rrd-font);color:var(--rrd-ink);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
.rrd-af *{box-sizing:border-box}
.rrd-af .stage{margin-left:auto;margin-right:auto}

.rrd-af .stage{width:100%;max-width:720px;padding:30px 20px 70px}
.rrd-af .partner-pill{
    display:flex;align-items:center;justify-content:center;gap:9px;
    margin:0 auto 18px;width:max-content;max-width:100%;
    background:#fff;border:1px solid var(--rrd-border);border-radius:999px;
    padding:8px 16px;font-size:13.5px;font-weight:600;color:var(--rrd-navy);
    box-shadow:0 1px 2px rgba(5,11,32,.04);
  }
.rrd-af .partner-pill .live{width:8px;height:8px;border-radius:50%;background:var(--rrd-ok);position:relative;flex:0 0 8px}
.rrd-af .partner-pill .live::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--rrd-ok);opacity:.5;animation:rrdaf-lp 1.8s infinite}
@keyframes rrdaf-lp{to{transform:scale(2);opacity:0}}
.rrd-af .partner-pill .sep{color:var(--rrd-border)}
.rrd-af .partner-pill .muted{color:var(--rrd-muted);font-weight:500}
.rrd-af .card{
    background:var(--rrd-card);border:1px solid var(--rrd-border);
    border-radius:22px;box-shadow:var(--rrd-shadow);padding:38px 44px 30px;
  }
/* Stepper */
.rrd-af .stepper{display:flex;align-items:center;justify-content:center;gap:0;margin:0 auto 30px;max-width:240px}
.rrd-af .stepper .st{flex:0 0 auto;display:flex;align-items:center}
.rrd-af .stepper .bub{
    width:34px;height:34px;border-radius:50%;flex:0 0 34px;
    display:flex;align-items:center;justify-content:center;
    background:#fff;border:2px solid var(--rrd-border);color:#b3bacb;
    font-weight:700;font-size:14px;transition:.25s;
  }
.rrd-af .stepper .line{width:52px;height:2px;background:var(--rrd-border);transition:.25s;margin:0 2px}
.rrd-af .stepper .st.active .bub{background:var(--rrd-primary);border-color:var(--rrd-primary);color:#fff;box-shadow:0 0 0 5px var(--rrd-tint)}
.rrd-af .stepper .st.done .bub{background:var(--rrd-primary);border-color:var(--rrd-primary);color:#fff}
.rrd-af .stepper .line.fill{background:var(--rrd-primary)}
.rrd-af .step{display:none;animation:rrdaf-fade .35s ease}
.rrd-af .step.show{display:block}
@keyframes rrdaf-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rrd-af .q{text-align:center;margin:0 0 6px;font-size:29px;line-height:1.15;font-weight:800;letter-spacing:-.025em}
.rrd-af .q-sub{text-align:center;color:var(--rrd-muted);font-size:15.5px;max-width:42ch;margin:0 auto 30px}
/* Felder */
.rrd-af .fields{max-width:560px;margin:0 auto}
.rrd-af .row{display:flex;gap:14px;flex-wrap:wrap}
.rrd-af .f{margin-bottom:18px;flex:1;min-width:0}
.rrd-af .f.full{flex-basis:100%}
.rrd-af .f label{display:block;font-size:14px;font-weight:600;margin-bottom:8px;color:var(--rrd-navy)}
.rrd-af .f label .req{color:var(--rrd-err)}
.rrd-af .f label .opt{color:#9aa1b2;font-weight:400;font-size:11.5px;letter-spacing:.01em}
.rrd-af .f .hint{font-size:12.5px;color:var(--rrd-muted);margin-top:7px}
.rrd-af .f input, .rrd-af .f textarea, .rrd-af .f select{
    width:100%;font-family:var(--rrd-font);font-size:15.5px;color:var(--rrd-ink);
    background:#fbfcfe;border:1.5px solid var(--rrd-border);border-radius:12px;
    padding:14px 15px;transition:.18s;outline:none;
  }
.rrd-af .f textarea{resize:vertical;min-height:100px}
.rrd-af .f input::placeholder, .rrd-af .f textarea::placeholder{color:#aab1c2}
.rrd-af .f input:focus, .rrd-af .f textarea:focus, .rrd-af .f select:focus{border-color:var(--rrd-primary);background:#fff;box-shadow:0 0 0 4px var(--rrd-tint)}
.rrd-af .f.invalid input, .rrd-af .f.invalid textarea, .rrd-af .f.invalid select{border-color:var(--rrd-err);background:#fff;box-shadow:0 0 0 4px var(--rrd-err-tint)}
.rrd-af .f .errmsg{display:none;color:var(--rrd-err);font-size:12.5px;margin-top:7px;font-weight:500}
.rrd-af .f.invalid .errmsg{display:block}
.rrd-af .tele{display:flex;gap:10px}
.rrd-af .tele .vorwahl{max-width:92px;flex:0 0 92px}
.rrd-af .block-h{max-width:560px;margin:30px auto 16px;font-size:13px;font-weight:700;color:var(--rrd-primary);text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:10px}
.rrd-af .block-h::after{content:"";flex:1;height:1px;background:var(--rrd-border)}
/* Reifenart inline */
.rrd-af .opt-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rrd-af .opt-cards .opt{border:1.5px solid var(--rrd-border);border-radius:12px;padding:15px 10px;text-align:center;cursor:pointer;transition:.18s;background:#fff;user-select:none}
.rrd-af .opt-cards .opt:hover{border-color:#c4ccf7;background:#fafbff}
.rrd-af .opt-cards .opt.sel{border-color:var(--rrd-primary);background:var(--rrd-tint);box-shadow:0 0 0 1px var(--rrd-primary) inset}
.rrd-af .opt-cards .opt .ic{width:26px;height:26px;margin:0 auto 8px;color:var(--rrd-primary)}
.rrd-af .opt-cards .opt .nm{font-weight:600;font-size:13.5px;color:var(--rrd-navy)}
/* Upload */
.rrd-af .drop{border:2px dashed #c7cee0;border-radius:14px;background:#fbfcfe;padding:28px 20px;text-align:center;cursor:pointer;transition:.18s}
.rrd-af .drop:hover, .rrd-af .drop.drag{border-color:var(--rrd-primary);background:var(--rrd-tint)}
.rrd-af .drop .ic{width:38px;height:38px;color:var(--rrd-primary);margin:0 auto 9px}
.rrd-af .drop .ic svg{width:100%;height:100%;display:block}
.rrd-af .drop b{display:block;font-size:15px;color:var(--rrd-navy);margin-bottom:3px}
.rrd-af .drop small{color:var(--rrd-muted);font-size:13px}
.rrd-af .thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.rrd-af .thumb{position:relative;width:76px;height:76px;border-radius:10px;overflow:hidden;border:1px solid var(--rrd-border);background:#f1f3f9}
.rrd-af .thumb img{width:100%;height:100%;object-fit:cover}
.rrd-af .thumb .file-ic{display:flex;align-items:center;justify-content:center;height:100%;color:var(--rrd-muted);font-size:11px;padding:6px;text-align:center;word-break:break-word}
.rrd-af .thumb .x{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:rgba(5,11,32,.78);color:#fff;border:0;cursor:pointer;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center}
/* Standort */
.rrd-af .geo-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;border:1.5px solid var(--rrd-primary);background:#fff;color:var(--rrd-primary);font-family:var(--rrd-font);font-weight:600;font-size:15.5px;padding:16px;border-radius:13px;cursor:pointer;transition:.18s;white-space:normal;line-height:1.3;text-align:center}
.rrd-af .geo-btn svg{flex:0 0 19px}
.rrd-af .geo-btn:hover{background:var(--rrd-tint)}
.rrd-af .geo-btn svg{width:19px;height:19px}
.rrd-af .geo-ok{display:none;align-items:center;gap:12px;margin-top:12px;background:var(--rrd-ok-tint);border:1px solid #bfe3cb;border-radius:13px;padding:14px 16px}
.rrd-af .geo-ok.show{display:flex}
.rrd-af .geo-ok .ico{width:32px;height:32px;border-radius:50%;background:var(--rrd-ok);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 32px}
.rrd-af .geo-ok .txt{font-size:13.5px;line-height:1.45}
.rrd-af .geo-ok .txt b{color:var(--rrd-navy)}
.rrd-af .geo-ok .txt a{color:var(--rrd-primary);font-weight:600;text-decoration:none}
.rrd-af .terms-box{max-width:560px;margin:0 auto 18px;background:#f7f9fc;border:1px solid var(--rrd-border);border-radius:13px;padding:16px 18px;font-size:13.5px;color:#46506a;line-height:1.6}
.rrd-af .terms-box p{margin:0 0 8px}
.rrd-af .terms-box p:last-child{margin:0}
.rrd-af .chk{display:flex;align-items:flex-start;gap:11px;max-width:560px;margin:0 auto 22px;cursor:pointer}
.rrd-af .chk input{appearance:none;-webkit-appearance:none;flex:0 0 22px;width:22px;height:22px;border:1.5px solid #c7cee0;border-radius:6px;margin:0;cursor:pointer;transition:.15s;position:relative;background:#fff}
.rrd-af .chk input:checked{background:var(--rrd-primary);border-color:var(--rrd-primary)}
.rrd-af .chk input:checked::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.rrd-af .chk span{font-size:14.5px;color:var(--rrd-navy);padding-top:1px}
.rrd-af .chk a{color:var(--rrd-primary);font-weight:600;text-decoration:none}
.rrd-af .chk.invalid input{border-color:var(--rrd-err);box-shadow:0 0 0 4px var(--rrd-err-tint)}
.rrd-af .sig-wrap{position:relative;border:1.5px solid var(--rrd-border);border-radius:13px;background:#fff;overflow:hidden}
.rrd-af .sig-wrap.invalid{border-color:var(--rrd-err);box-shadow:0 0 0 4px var(--rrd-err-tint)}
.rrd-af canvas#sig{display:block;width:100%;height:160px;touch-action:none;cursor:crosshair}
.rrd-af .sig-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#c0c6d4;font-size:14px;pointer-events:none;transition:.2s}
.rrd-af .sig-ph.hide{opacity:0}
.rrd-af .sig-clear{position:absolute;right:10px;bottom:8px;background:none;border:0;color:var(--rrd-muted);font-family:var(--rrd-font);font-size:13px;font-weight:600;cursor:pointer}
.rrd-af .sig-clear:hover{color:var(--rrd-primary)}
.rrd-af .privacy-note{display:flex;gap:9px;align-items:flex-start;max-width:560px;margin:20px auto 0;font-size:12.5px;color:var(--rrd-muted);line-height:1.5}
.rrd-af .privacy-note svg{width:15px;height:15px;flex:0 0 15px;color:var(--rrd-primary);margin-top:1px}
/* Navigation */
.rrd-af .nav{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:30px;padding-top:24px;border-top:1px solid var(--rrd-border)}
.rrd-af .btn{font-family:var(--rrd-font);font-weight:600;font-size:15.5px;padding:14px 30px;border-radius:12px;cursor:pointer;border:1.5px solid transparent;transition:.18s}
.rrd-af .btn-primary{background:var(--rrd-primary);color:#fff;display:inline-flex;align-items:center;gap:9px}
.rrd-af .btn-primary:hover{background:var(--rrd-primary-dark)}
.rrd-af .btn-primary svg{width:17px;height:17px}
.rrd-af .btn-back{background:none;color:var(--rrd-muted);border:0;font-weight:600;padding:14px 6px;display:inline-flex;align-items:center;gap:7px}
.rrd-af .btn-back:hover{color:var(--rrd-navy)}
.rrd-af .btn-back svg{width:16px;height:16px}
.rrd-af .btn-back.hidden{visibility:hidden}
/* Erfolg */
.rrd-af .done-screen{display:none;text-align:center;padding:20px 10px}
.rrd-af .done-screen.show{display:block;animation:rrdaf-fade .4s ease}
.rrd-af .done-ic{width:80px;height:80px;border-radius:50%;background:var(--rrd-ok-tint);display:flex;align-items:center;justify-content:center;margin:6px auto 24px}
.rrd-af .done-ic svg{width:42px;height:42px;color:var(--rrd-ok);stroke-dasharray:48;stroke-dashoffset:48;animation:rrdaf-draw .6s .2s ease forwards}
@keyframes rrdaf-draw{to{stroke-dashoffset:0}}
.rrd-af .done-screen h2{font-size:27px;font-weight:800;margin:0 0 12px;letter-spacing:-.02em}
.rrd-af .done-screen p{color:var(--rrd-muted);max-width:46ch;margin:0 auto 6px;font-size:15.5px}
.rrd-af .done-screen .partner-name{color:var(--rrd-primary);font-weight:700}
.rrd-af .done-card{background:var(--rrd-tint);border-radius:13px;padding:16px 20px;margin:26px auto 0;max-width:340px;display:flex;align-items:center;gap:13px;text-align:left}
.rrd-af .done-card .pulse{width:11px;height:11px;border-radius:50%;background:var(--rrd-primary);flex:0 0 11px;position:relative}
.rrd-af .done-card .pulse::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--rrd-primary);opacity:.5;animation:rrdaf-pulse 1.6s infinite}
@keyframes rrdaf-pulse{to{transform:scale(2);opacity:0}}
.rrd-af .done-card div{font-size:13.5px;color:var(--rrd-navy);line-height:1.45}
.rrd-af .done-card b{font-weight:700}
@media(max-width:600px){
  .rrd-af .card{padding:26px 20px}
  .rrd-af .q{font-size:24px}
  .rrd-af .opt-cards{grid-template-columns:1fr}
  .rrd-af .stepper .line{width:36px}

  /* Eingaben mind. 16px -> verhindert ungewolltes Zoomen beim Fokus (iOS) */
  .rrd-af .f input, .rrd-af .f textarea, .rrd-af .f select{font-size:16px}

  /* Zwei-Spalten-Reihen untereinander, damit nichts gequetscht/abgeschnitten wird */
  .rrd-af .row{flex-direction:column;gap:0}

  /* Navigation: volle Breite, gestapelt (Absenden oben, Zurück darunter) */
  .rrd-af .nav{flex-direction:column-reverse;align-items:stretch;gap:10px}
  .rrd-af .nav .btn{width:100%;padding:15px 20px;font-size:15.5px}
  .rrd-af .nav .btn-primary{justify-content:center}
  .rrd-af .nav .btn-back{justify-content:center;padding:12px}
  .rrd-af .nav .btn-back.hidden{display:none}

  /* Kopfzeile: Partner-Pille und Sprachumschalter zentriert untereinander */
  .rrd-af .demo-top{flex-direction:column;align-items:center;gap:12px}
  .rrd-af .partner-pill{max-width:100%}

  /* Standort-Button: etwas kompakter (Text umbricht jetzt sauber) */
  .rrd-af .geo-btn{font-size:14.5px;padding:14px}
}
@media(max-width:380px){
  .rrd-af .stage{padding-left:12px;padding-right:12px}
  .rrd-af .card{padding:22px 16px}
  .rrd-af .q{font-size:22px}
  .rrd-af .stepper .line{width:26px}
  .rrd-af .partner-pill{font-size:13.5px}

  /* Sehr schmal: Name und Status untereinander statt nebeneinander.
     Verhindert hässlichen Umbruch bei langen Partnernamen auf 320px. */
  .rrd-af .partner-pill{
    flex-wrap:wrap;justify-content:center;gap:4px 8px;
    border-radius:18px;padding:10px 18px;line-height:1.35;text-align:center;
  }
  /* Trenner ausblenden und per Umbruch erzwingen, dass der Status
     in eine eigene Zeile unter den Namen rutscht. */
  .rrd-af .partner-pill .sep{flex-basis:100%;height:0;visibility:hidden;margin:0}
}
/* Sprachumschalter / language switch */
.rrd-af .demo-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-bottom:18px}
.rrd-af .demo-top .partner-pill{margin:0}
.rrd-af .lang-switch{display:inline-flex;align-items:center;gap:2px;background:#fff;border:1px solid var(--rrd-border);border-radius:999px;padding:4px;box-shadow:0 1px 2px rgba(5,11,32,.04)}
.rrd-af .lang-switch .globe{width:16px;height:16px;color:var(--rrd-muted);margin:0 3px 0 7px;flex:0 0 16px}
.rrd-af .lang-switch button{appearance:none;-webkit-appearance:none;border:0;background:none;font-family:var(--rrd-font);font-weight:700;font-size:12.5px;color:var(--rrd-muted);padding:6px 12px;border-radius:999px;cursor:pointer;transition:.15s;letter-spacing:.04em}
.rrd-af .lang-switch button.on{background:var(--rrd-primary);color:#fff}
.rrd-af .lang-switch button:not(.on):hover{color:var(--rrd-navy)}

.rrd-af .privacy-note a{color:var(--rrd-primary);font-weight:600;text-decoration:none}

/* Solo-Modus (chrome="off"): luftigere, zentrierte Darstellung auf einer schlichten Seite */
.rrd-af.rrd-af-solo .stage{padding-top:48px;padding-bottom:64px}
.rrd-af-gate{text-align:center;padding:40px 30px}

/* Standort-Hilfe-Panel (zugeschnittene Anleitung bei blockiertem Standort) */
.rrd-af .geo-help[hidden]{display:none}
.rrd-af .geo-help{margin-top:12px;background:#fff7ed;border:1px solid #fed7aa;border-radius:12px;padding:14px 16px}
.rrd-af .geo-help b{display:block;color:#9a3412;font-size:14px;margin-bottom:5px}
.rrd-af .geo-help p{margin:0 0 11px;font-size:13.5px;color:#7c2d12;line-height:1.5}
.rrd-af .geo-help-retry{appearance:none;-webkit-appearance:none;border:0;background:var(--rrd-primary);color:#fff;font-family:var(--rrd-font);font-weight:700;font-size:13.5px;padding:10px 16px;border-radius:9px;cursor:pointer;white-space:normal}

/* Bot-Schutz: Steuerfelder unsichtbar (off-screen, nicht display:none) */
.rrd-af .rrd-af-control{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.rrd-af .btn:disabled{opacity:.6;cursor:default}
.rrd-af .btn.is-loading{pointer-events:none}

/* ===================================================================
   AGB-Lightbox (Partner-AGB im Auftragsformular)
   =================================================================== */
.rrd-af .rrd-agb-open { color: var(--rrd-primary, #2f5fff); font-weight: 600; text-decoration: underline; cursor: pointer; }
.rrd-af .rrd-agb-hint { font-weight: 600; }
.rrd-af .rrd-agb-note { display: block; margin-top: 4px; font-size: 12px; color: var(--rrd-muted, #6b7280); }

.rrd-af .rrd-agb-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; }
/* WICHTIG: Das hidden-Attribut muss das display:flex oben überstimmen, sonst
   ist die Lightbox schon beim Laden sichtbar statt erst beim Klick auf die AGB. */
.rrd-af .rrd-agb-modal[hidden] { display: none; }
.rrd-af .rrd-agb-overlay { position: absolute; inset: 0; background: rgba(5, 11, 32, .55); }
.rrd-af .rrd-agb-dialog {
    position: relative; z-index: 1; width: 100%; max-width: 560px; max-height: 82vh;
    display: flex; flex-direction: column;
    background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(5, 11, 32, .3);
    overflow: hidden;
}
.rrd-af .rrd-agb-dialog-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 20px; border-bottom: 1px solid #e6e8ee; flex: 0 0 auto;
}
.rrd-af .rrd-agb-dialog-head strong { font-size: 16px; color: #0b1733; }
.rrd-af .rrd-agb-close {
    border: 0; background: #f3f4f6; width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; line-height: 1; color: #6b7280; cursor: pointer;
    padding: 0; flex: 0 0 auto;
}
.rrd-af .rrd-agb-close:hover { background: #e5e7eb; color: #0b1733; }
.rrd-af .rrd-agb-dialog-body { padding: 20px; overflow-y: auto; font-size: 14px; line-height: 1.6; color: #1f2937; }
.rrd-af .rrd-agb-dialog-body p { margin: 0 0 12px; }
.rrd-af .rrd-agb-dialog-body p:last-child { margin-bottom: 0; }