/*  █████  ROS-FRONTEND-WIZARD – GESAMT-STYLES  █████
   Abhängigkeiten: --primary-color (CSS-Var, z. B. per :root setzen)
   -------------------------------------------------------------- */




     @import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;600;700&display=swap');

  :root {
    --font-family-main: 'Bai Jamjuree', Arial, sans-serif;
    /* ...weitere Variablen... */
  }
  
  html, body,
  .ros-frontend-wizard, .ros-modern, #ros-step-4, .ros-card, .ros-form-grid, .repair-card,
  input, select, textarea, button,
  h1, h2, h3, h4, h5, h6,
  .ros-step-content > h2, .ros-step-content > h3, .ros-card legend {
    font-family: var(--font-family-main) !important;
    font-weight: 400;
    letter-spacing: 0;
  }
  
  .ros-more-nums,
.ros-more-nums *,
.ros-model-nums,
.ros-model-nums *,
.ros-popular-model-text,
.ros-popular-model-text *,
.brand-label,
.brand-label * {
  font-family: var(--font-family-main) !important;
}


#ros-device-preview.clickable {
    cursor: pointer;
}




/* ░░░ Suchfeld / Live-Suche ░░░ */
/* ░░░ Suchfeld / Live-Suche ░░░ */
.gsma-search-wrapper{
    position:relative;
    display:flex !important;
    align-items:center !important;
    gap:8px;
    max-width:500px;
    margin:25px auto 12px
}
#ros_device_search{
    flex:1;
    padding:13px 16px;
    border:2px solid #ccc;
    border-radius:9px;
    font-size:17px;
    transition:.2s
}
#ros_device_search:focus{border-color:var(--primary-color)}
#ros_search_done_btn{
    width:120px;
    background:var(--primary-color);
    border:none;
    color:#fff;
    font-weight:600;
    border-radius:7px;
    cursor:pointer
}
.gsma-suggest{
    position:absolute;
    left:0;
    right:0;
    top:calc(100% - 1px);   /* schließt bündig an das Suchfeld an */
    background:#fff;
    z-index:999;
    border:1px solid #ccc;border-top:none;max-height:260px;overflow-y:auto;
    font-size: 17px;
}
.gsma-suggest li{
    padding:9px 11px;
    cursor:pointer;
    font-size: 17px;
}
.gsma-suggest li:hover{background:#f2f2f2}

/* ░░░ Preview-Card (ab Step 3) ░░░ */
.ros-preview-card{
    display:flex;align-items:center;gap:18px;margin:20px 0 25px;
    padding:14px 18px;background:#fafafa;border:1px solid #ddd;border-radius:8px;
    box-shadow:0 1px 4px rgba(0,0,0,.05)
}
.ros-preview-card img{
    width:80px;height:80px;object-fit:contain;border:1px solid #ccc;
    border-radius:6px;background:#fff
}
.ros-preview-text{font-size:1.05rem;line-height:1.3}

/* ░░░ Step-Leiste ░░░ */
/* ───────── Modern Stepper ───────── */
.ros-stepper{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:0;                         /* Kreise liegen dichter beieinander */
    margin:40px 0 50px;
    position:relative;
}
.ros-stepper::before{             /* Grundlinie */
    content:"";
    position:absolute;
    top:24px;                     /* Hälfte der Bullet-Höhe */
    left:calc(60px / -2);         /* halbe Bullet-Breite nach links */
    right:calc(60px / -2);
    height:3px;
    background:#e5e5e5;
    z-index:0;
}
.ros-step{
    position:relative;
    z-index:1;                    /* über der Linie */
    width:60px;
    height:60px;
    border-radius:50%;
    background:#f5f5f5;
    color:#9b9b9b;
    font-weight:600;
    font-size:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.25s;
}
.ros-step small{display:none;}    /* ⟵ altes <small> ausblenden */
.ros-step::after{                 /* neues Label */
    content:attr(data-label);
    position:absolute;
    top:calc(100% + 8px);
    left:50%;
    transform:translateX(-50%);
    font-size:.75rem;
    color:#666;
    letter-spacing:.02em;
    white-space:nowrap;
}
.ros-step:not(:last-child)::before{   /* Teil-Linie pro Abschnitt */
    content:"";
    position:absolute;
    top:28px;
    right:-50%;
    width:100%;
    height:3px;
    background:#e5e5e5;
    z-index:-1;
}
.ros-step.completed,
.ros-step.active{
    background:var(--primary-color,#4A90E2);
    color:#fff;
    box-shadow:0 4px 12px rgba(0,0,0,.12);
    transform:translateY(-2px);
}
.ros-step.completed::before,
.ros-step.active::before{
    background:var(--primary-color,#4A90E2);
}

/* ───────── Headings mittig ───────── */
.ros-step-content > h2{
    text-align:center;
    font-size:2.4rem;
    line-height:1.25;
    margin-bottom:26px;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ░░░ Navigations-Buttons ░░░ */
.ros-wizard-nav{text-align:center;margin:30px 0}
.ros-wizard-nav .button{min-width:140px;margin:0 6px}

/* ░░░ Overlay ░░░ */
#ros-lookup-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.55);
    display:none;z-index:9990
}

/* ░░░ Popup ░░░ */
#ros-lookup-popup{
    position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
    width:340px;max-width:90%;background:#fff;padding:24px 26px;border-radius:8px;
    box-shadow:0 8px 28px rgba(0,0,0,.25);display:none;z-index:9991
}
#ros-lookup-popup label{display:block;margin-bottom:12px;font-weight:600;font-size:.95rem}
#ros-lookup-popup input{width:100%;padding:6px 8px;margin-top:4px}
#ros-lookup-popup .lookup-buttons{
    display:flex;justify-content:flex-end;gap:8px;margin-top:12px
}

/* ░░░ Popular‑models grid ░░░ */
.ros-popular-models{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:14px;
    margin-top:20px
}

/* Imported models grid – gleiche Darstellung wie Popular‑Models */
#ros-imported-models{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:14px;
    margin-top:20px;
}
.ros-popular-model-card{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 12px;
    background:#fafafa;
    border:1px solid #ddd;
    border-radius:8px;
    cursor:pointer;
    transition:.15s
}
.ros-popular-model-card:hover{
    box-shadow:0 1px 4px rgba(0,0,0,.1);
    transform:translateY(-2px)
}
.ros-popular-model-card img{
    width:60px;
    height:60px;
    object-fit:contain;
    border:1px solid #ccc;
    border-radius:6px;
    background:#fff
}
.ros-popular-model-card .ros-popular-model-text{
    font-size:.95rem;
    line-height:1.3
}

.ros-popular-nav .button{
    min-width:120px;
    padding:10px 18px;
    border:none;
    border-radius:6px;
    background:var(--primary-color,#4A90E2);
    color:#fff;
    font-weight:600;
    box-shadow:0 2px 4px rgba(0,0,0,.1);
    cursor:pointer;
    transition:.15s
}
.ros-popular-nav .button:not(:disabled):hover{
    transform:translateY(-1px);
    box-shadow:0 3px 6px rgba(0,0,0,.15)
}
.ros-popular-nav .button:disabled{
    background:#ccc;
    box-shadow:none;
    cursor:not-allowed;
    transform:none
}


/*  █████  ROS-FRONTEND-WIZARD – GESAMT-STYLES  █████
   Abhängigkeiten: --primary-color (CSS-Var, z. B. per :root setzen)
   -------------------------------------------------------------- */

/* ░░░ Suchfeld / Live-Suche ░░░ */
/* ░░░ Suchfeld / Live-Suche ░░░ */
.gsma-search-wrapper{
    position:relative;
    display:flex !important;
    align-items:center !important;
    gap:8px;
    max-width:500px;
    margin:25px auto 12px
}
#ros_device_search{
    flex:1;
    padding:13px 16px;
    border:2px solid #ccc;
    border-radius:9px;
    font-size:17px;
    transition:.2s
}
#ros_device_search:focus{border-color:var(--primary-color)}
#ros_search_done_btn{
    width:120px;
    background:var(--primary-color);
    border:none;
    color:#fff;
    font-weight:600;
    border-radius:7px;
    cursor:pointer
}
.gsma-suggest{
    position:absolute;
    left:0;
    right:0;
    top:calc(100% - 1px);   /* schließt bündig an das Suchfeld an */
    background:#fff;
    z-index:999;
    border:1px solid #ccc;border-top:none;max-height:260px;overflow-y:auto
}
.gsma-suggest li{padding:9px 11px;cursor:pointer}
.gsma-suggest li:hover{background:#f2f2f2}

/* ░░░ Preview-Card (ab Step 3) ░░░ */
.ros-preview-card{
    display:flex;align-items:center;gap:18px;margin:20px 0 25px;
    padding:14px 18px;background:#fafafa;border:1px solid #ddd;border-radius:8px;
    box-shadow:0 1px 4px rgba(0,0,0,.05)
}
.ros-preview-card img{
    width:80px;height:80px;object-fit:contain;border:1px solid #ccc;
    border-radius:6px;background:#fff
}
.ros-preview-text{font-size:1.05rem;line-height:1.3}

/* ░░░ Step-Leiste ░░░ */
.ros-stepper{
    display:flex;justify-content:center;gap:38px;margin:30px 0 40px
}
.ros-step{
    width:60px;height:60px;border-radius:50%;background:#eee;color:#888;
    text-align:center;line-height:24px;font-weight:600;font-size:18px;
    display:flex;flex-direction:column;justify-content:center;cursor:pointer;
    transition:.2s
}
.ros-step small{font-size:10px;font-weight:400}
.ros-step.active{
    background:var(--primary-color,#4A90E2);color:#fff;transform:scale(1.05)
}

/* ░░░ Sections ░░░ */
.ros-step-content{
    display:none;animation:fadeIn .25s ease
}
.ros-step-content.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ░░░ Navigations-Buttons ░░░ */
.ros-wizard-nav{text-align:center;margin:30px 0}
.ros-wizard-nav .button{min-width:140px;margin:0 6px}

/* ░░░ Overlay ░░░ */
#ros-lookup-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.55);
    display:none;z-index:9990
}

/* ░░░ Popup ░░░ */
#ros-lookup-popup{
    position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
    width:340px;max-width:90%;background:#fff;padding:24px 26px;border-radius:8px;
    box-shadow:0 8px 28px rgba(0,0,0,.25);display:none;z-index:9991
}
#ros-lookup-popup label{display:block;margin-bottom:12px;font-weight:600;font-size:.95rem}
#ros-lookup-popup input{width:100%;padding:6px 8px;margin-top:4px}
#ros-lookup-popup .lookup-buttons{
    display:flex;justify-content:flex-end;gap:8px;margin-top:12px
}

/* ░░░ Popular‑models grid ░░░ */
.ros-popular-models{
    display:grid;
    justify-content:center;          /* Grid zentrieren */
    margin-left:auto;
    margin-right:auto;
    grid-template-columns:repeat(5,180px); /* feste Kartenbreite */
    gap:14px;
    margin-top:20px
}
.ros-popular-model-card{
    flex-direction:column;
    justify-content:center;
    width:180px;
    min-height:180px;
    text-align:center;
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    background:#fafafa;
    border:1px solid #ddd;
    border-radius:8px;
    cursor:pointer;
    transition:.15s
}
.ros-popular-model-card:hover{
    box-shadow:0 1px 4px rgba(0,0,0,.1);
    transform:translateY(-2px)
}
.ros-popular-model-card img{
    width:70px;
    height:75px;
    object-fit:contain;
    border:1px solid #ccc;
    border-radius:6px;
    background:#fff
}
.ros-popular-model-card .ros-popular-model-text{
    font-size:.95rem;
    line-height:1.3
}



/* ░░░ Popular-Models Navigation ░░░ */
.ros-popular-nav .button{
    min-width:120px;
    padding:10px 18px;
    border:none;
    border-radius:6px;
    background:var(--primary-color,#4A90E2);
    color:#fff;
    font-weight:600;
    box-shadow:0 2px 4px rgba(0,0,0,.1);
    cursor:pointer;
    transition:.15s
}
.ros-popular-nav .button:not(:disabled):hover{
    transform:translateY(-1px);
    box-shadow:0 3px 6px rgba(0,0,0,.15)
}
.ros-popular-nav .button:disabled{
    background:#ccc;
    box-shadow:none;
    cursor:not-allowed;
    transform:none
}

/*  █████  ROS-FRONTEND-WIZARD – GESAMT-STYLES  █████
   Abhängigkeiten: --primary-color (CSS-Var, z. B. per :root setzen)
   -------------------------------------------------------------- */

/* ░░░ Suchfeld / Live-Suche ░░░ */
/* ░░░ Suchfeld / Live-Suche ░░░ */
.gsma-search-wrapper{
    position:relative;
    display:flex !important;
    align-items:center !important;
    gap:8px;
    max-width:500px;
    margin:25px auto 12px
}
#ros_device_search{
    flex:1;
    padding:13px 16px;
    border:2px solid #ccc;
    border-radius:9px;
    font-size:17px;
    transition:.2s
}
#ros_device_search:focus{border-color:var(--primary-color)}
#ros_search_done_btn{
    width:120px;
    background:var(--primary-color);
    border:none;
    color:#fff;
    font-weight:600;
    border-radius:7px;
    cursor:pointer
}
.gsma-suggest{
    position:absolute;
    left:0;
    right:0;
    top:calc(100% - 1px);   /* schließt bündig an das Suchfeld an */
    background:#fff;
    z-index:999;
    border:1px solid #ccc;border-top:none;max-height:260px;overflow-y:auto
}
.gsma-suggest li{padding:9px 11px;cursor:pointer}
.gsma-suggest li:hover{background:#f2f2f2}

/* ░░░ Preview-Card (ab Step 3) ░░░ */
.ros-preview-card{
    display:flex;align-items:center;gap:18px;margin:20px 0 25px;
    padding:14px 18px;background:#fafafa;border:1px solid #ddd;border-radius:8px;
    box-shadow:0 1px 4px rgba(0,0,0,.05)
}
.ros-preview-card img{
    width:80px;height:80px;object-fit:contain;border:1px solid #ccc;
    border-radius:6px;background:#fff
}
.ros-preview-text{font-size:1.05rem;line-height:1.3}

/* ░░░ Step-Leiste ░░░ */
.ros-stepper{
    display:flex;justify-content:center;gap:38px;margin:30px 0 40px
}
.ros-step{
    width:60px;height:60px;border-radius:50%;background:#eee;color:#888;
    text-align:center;line-height:24px;font-weight:600;font-size:18px;
    display:flex;flex-direction:column;justify-content:center;cursor:pointer;
    transition:.2s
}
.ros-step small{font-size:10px;font-weight:400}
.ros-step.active{
    background:var(--primary-color,#4A90E2);color:#fff;transform:scale(1.05)
}

/* ░░░ Sections ░░░ */
.ros-step-content{
    display:none;animation:fadeIn .25s ease
}
.ros-step-content.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ░░░ Navigations-Buttons ░░░ */
.ros-wizard-nav{text-align:center;margin:30px 0}
.ros-wizard-nav .button{min-width:140px;margin:0 6px}

/* ░░░ Overlay ░░░ */
#ros-lookup-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.55);
    display:none;z-index:9990
}

/* ░░░ Popup ░░░ */
#ros-lookup-popup{
    position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
    width:340px;max-width:90%;background:#fff;padding:24px 26px;border-radius:8px;
    box-shadow:0 8px 28px rgba(0,0,0,.25);display:none;z-index:9991
}
#ros-lookup-popup label{display:block;margin-bottom:12px;font-weight:600;font-size:.95rem}
#ros-lookup-popup input{width:100%;padding:6px 8px;margin-top:4px}
#ros-lookup-popup .lookup-buttons{
    display:flex;justify-content:flex-end;gap:8px;margin-top:12px
}

/* ░░░ Popular‑models grid ░░░ */
.ros-popular-models{
    display:grid;
    grid-template-columns:repeat(4,240px);  /* 4 Cards pro Zeile, etwas breiter */
    gap:10px 30px;            /* gleicher Abstand vertikal & horizontal */
    justify-content:center;                  /* mittig unter Suchfeld */
    margin:24px auto 0;
}
.ros-popular-model-card{
    width:240px;
    min-height:90px;            /* so kompakt wie möglich */
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:16px;
    padding:8px 10px;
    background:#fafafa;
    border:1px solid #ddd;
    border-radius:8px;
    cursor:pointer;
    transition:.15s;
}
.ros-popular-model-card:hover{
    box-shadow:0 1px 4px rgba(0,0,0,.1);
    transform:translateY(-2px);
}
.ros-popular-model-card img{
    width:70px;
    height:75px;
    object-fit:contain;
    border:1px solid #ccc;
    border-radius:6px;
    background:#fff;
}
.ros-popular-model-card .ros-popular-model-text{
    font-size:.9rem;
    line-height:1.25;
    overflow:hidden;
    text-overflow:ellipsis;
}



/* ░░░ Popular-Models Navigation ░░░ */
.ros-popular-nav .button{
    min-width:120px;
    padding:10px 18px;
    border:none;
    border-radius:6px;
    background:var(--primary-color,#4A90E2);
    color:#fff;
    font-weight:600;
    box-shadow:0 2px 4px rgba(0,0,0,.1);
    cursor:pointer;
    transition:.15s
}
.ros-popular-nav .button:not(:disabled):hover{
    transform:translateY(-1px);
    box-shadow:0 3px 6px rgba(0,0,0,.15)
}
.ros-popular-nav .button:disabled{
    background:#ccc;
    box-shadow:none;
    cursor:not-allowed;
    transform:none
}

.ros-brand-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
    gap:22px 28px;                /* Zeilen / Spalten-Abstand */
    margin:16px 0 32px;
  }
  .brand-card{
    display:flex;
    align-items:center;
    justify-content:center;
    height:90px;
    border:1px solid #eee;
    border-radius:12px;
    cursor:pointer;
    transition:.15s;
  }
  .brand-card:hover{
    box-shadow:0 2px 6px rgba(0,0,0,.08);
    transform:translateY(-2px);
  }
  .brand-card img{max-height:40px;max-width:90px;}

  .ros-spinner-small{
    width:42px;height:42px;margin:30px auto;
    border:4px solid #ddd;border-top-color:var(--ros-primary-color);
    border-radius:50%;animation:rosSpin 0.7s linear infinite
  }
  @keyframes rosSpin{
      0% { transform: translateY(-50%) rotate(0deg); }
      100% { transform: translateY(-50%) rotate(360deg); }
  }










  .brand-card{
    position: relative;
    height: 120px;
    min-height: 130px;
    max-height: 130px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    cursor: pointer;
    transition: .15s;
    background-image: var(--logo);
    background-repeat: no-repeat;
    background-position: center 20%;
    background-size: 46% auto;

}

.brand-label{
    position:absolute;
    bottom:8px;
    left:0; right:0;
    text-align:center;
    font-weight:100;                         /* dünn */
    color:#ababab;                              /* hellgrau */
    font-size:14px;
    pointer-events:none;
}



/* ─ Brand-Grid: 4 Karten – jetzt breiter ─ */
.ros-brand-grid{
    display:grid;
    grid-template-columns:repeat(4,220px);   /* statt 160px z. B. 220px */
    gap:17px 14px;                           /* unverändert */
    justify-content:center;                  /* unverändert */
    margin:16px 0 32px;                      /* unverändert */
}

/* Fallback-Breite für sehr alte Browser (optional) */
.brand-card{
    width:190px;             /* gleiches Maß wie oben */
}











/* ───────── Modal – Grundlayout ───────── */
.ros-modal-overlay{
    position:fixed; inset:0;
    background:rgba(0,0,0,.55);
    display:none; z-index:9990;
}
.ros-modal{
    position:fixed; left:50%; top:50%;
    transform:translate(-50%,-50%) scale(.95);
    opacity:0; pointer-events:none;
    transition:.25s;
    z-index:9991;
}
.ros-modal.open{opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto;}
.ros-modal-box{
    width:min(680px,90vw);
    background:#fff; border-radius:14px;
    padding:26px 30px 32px;
    box-shadow:0 8px 28px rgba(0,0,0,.3);
}

/* === Stabilität beim Öffnen/Schließen der Pop‑ups (Mobile Fix) === */
.ros-modal-overlay{
    /* Verhindert iOS‑“Gummiband” und seitliches Wegspringen */
    overscroll-behavior: contain;
    touch-action: none;              /* blockiert Gesten, die den Viewport verschieben */
}

.ros-modal{
    /* GPU‑Compositing erzwingen, dadurch kein Re‑Layout beim Fade/Scale */
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Farbkacheln – kein Doppeltipp‑Zoom oder Scroll‑Jitter */
.ros-color-item{
    touch-action: manipulation;
}

/* ───────── Farbkachel-Grid ───────── */
.ros-color-grid{
    display:flex; flex-wrap:wrap;
    gap:20px 32px;           /* vertikal / horizontal */
    margin:24px 0 30px;
}
.ros-color-item{
    display:flex; align-items:center; gap:14px;
    cursor:pointer; user-select:none;
}
.ros-color-item.disabled{opacity:.45; pointer-events:none;}
.ros-color-swatch{
    width:54px; height:54px;
    border-radius:12px; border:1px solid #d8d8d8;
    box-shadow:inset 0 0 0 2px rgba(0,0,0,.06);
}
.ros-color-name{
    font-weight:600; line-height:1.15; text-transform:uppercase;
    font-size:14px; letter-spacing:.03em; color:#444;
}
.ros-color-item.selected .ros-color-swatch{
    outline:3px solid var(--primary-color,#4A90E2);
    outline-offset:2px;
}

/* Overlay wirklich bildschirmfüllend */
.ros-modal-overlay{
    position:fixed;
    inset:0;
    width:100vw;              /* Fallback für alte Browser */
    height:100vh;
    background:rgba(0,0,0,.55);
    z-index:9990;
}

/* Swatch sichtbar machen */
.ros-color-swatch{display:inline-block;}

.ros-preview-color{
    font-size:.95rem;
    color:#555;
}


.ros-modal-overlay{
    position:fixed;
    inset:0;                 /* spannt sich über den kompletten Viewport */
    background:rgba(0,0,0,.55);
    z-index:9990;
}


.ros-extra-nums { display:none; }   /* ist schon so bei dir */
.ros-more-nums  { text-decoration:underline; cursor:pointer; }






/* ════════════════════════════════════════════════════════════════
   GLASS LIST ²  –  Extra-Effekte & Hover-Animationen
   (unterhalb der Variante-F-Styles einfügen)
   ════════════════════════════════════════════════════════════════ */

/* ---------- Zeilen-Hover: Lift + Outline-Glow ----------------- */
.gsma-suggest li{
    position:relative;
    transition:
        background .06s linear,
        transform  .12s ease,
        box-shadow .12s ease;
}
.gsma-suggest li:hover{
    transform:translateY(-1px) scale(1.015);
    box-shadow:0 4px 10px rgba(0,0,0,.12);
}
.gsma-suggest li:hover::before{
    content:"";
    position:absolute; inset:0;
    border-radius:12px;
    pointer-events:none;
    box-shadow:0 0 0 2px var(--gl-accent);
    opacity:.25;          /* feiner Glow */
    animation:pulse .9s ease-out;
}
@keyframes pulse{0%{opacity:.35} 100%{opacity:.05}}

/* ---------- „Highlight-Bar“ links, füllt sich beim Hover ------ */
.gsma-suggest li::after{
    content:"";
    position:absolute; left:0; top:0; bottom:0;
    width:0px;
    background:var(--gl-accent);
    border-radius:0 4px 4px 0;
    transition:width .18s cubic-bezier(.4,0,.2,1);
}
.gsma-suggest li:hover::after{width:4px;}

/* ---------- Thumbnail: leichtes Zoomen beim Hover ------------- */
.gsma-suggest li img{
    transition:transform .18s cubic-bezier(.4,0,.2,1);
}
.gsma-suggest li:hover img{transform:scale(1.08);}

/* ---------- INFO-Button mit Ink-Ripple / Lichtreflex ---------- */
.gsma-suggest li .info-btn{
    position:relative; overflow:hidden;
}
.gsma-suggest li .info-btn::after{
    content:"";
    position:absolute; inset:-120%;
    background:currentColor;
    opacity:.0;
    transform:scale(.2);
    transition:opacity .35s, transform .35s;
    border-radius:50%;
}
.gsma-suggest li .info-btn:active::after{
    opacity:.14;
    transform:scale(1.4);
    transition:none;           /* sofort, ohne Verzögerung        */
}

/* ---------- Scrollbar dezent, nur Desktop --------------------- */
@media (pointer:fine){
  .gsma-suggest{
      scrollbar-width:thin;
      scrollbar-color:var(--gl-border) transparent;
  }
  .gsma-suggest::-webkit-scrollbar{
      width:6px;
  }
  .gsma-suggest::-webkit-scrollbar-track{
      background:transparent;
  }
  .gsma-suggest::-webkit-scrollbar-thumb{
      background:var(--gl-border);
      border-radius:4px;
  }
}

/* ---------- Mobile „Tap Flash“ (kurzer Highlight) ------------- */
@media (hover:none){
  .gsma-suggest li:active{
      background:var(--gl-active);
  }
}


/* ═════════════  Glass List ² · Soft Corners  ═════════════ */

/* Gesamter Drop-Down-Block bekommt weichere Ecken */
.gsma-suggest{
    border-radius:14px;                /* vorher: 10 px           */
    overflow:hidden;                   /* damit die Li-Rundungen nicht überstehen */
}

/* Einzelne Zeile im Drop-Down */
.gsma-suggest li{
    border-radius:12px;                /* neu – wirkt moderner    */
}

/* Info-Button noch einen Tick runder                */
.gsma-suggest li .info-btn{
    border-radius:10px;                /* vorher evtl. 8 px       */
}

/* Hover-Outline folgt natürlich den neuen Radien    */
.gsma-suggest li:hover::before{
    border-radius:12px;
}

/* Linker „Accent-Bar“ braucht nur runde Innenkante  */
.gsma-suggest li::after{
    border-radius:0 4px 4px 0;
}

/* Tipp: Falls der Drop-Down-Schatten schon sichtbar ist,
   ein ganz leichtes Blur (filter:blur(0.5px)) sieht schick aus. */


/* kleines Inline-Spinnerchen rechts im Suchfeld */
.ros-search-spinner{
    position:absolute;
    right:138px;                 /* 120 px Button + 8 px Gap + 10 px Puffer */
    top:50%;                     /* exakt zentrieren */
    transform:translateY(-50%);
    width:20px; height:20px;
    border:3px solid #d3d3d3;
    border-top-color:var(--primary-color,#4A90E2);
    border-radius:50%;
    animation:rosSpin .7s linear infinite;
    display:none;                /* nur beim Laden sichtbar */
    align-self: center !important;
    margin: 0 8px !important;
    flex-shrink: 0 !important;
}
.gsma-search-wrapper.loading .ros-search-spinner{display:block;}


/* direkt hinter .ros-search-spinner{} einfügen */

/* Grund­stil des Textes (anfangs unsichtbar) */
.ros-search-wait{
    display:none;               /* wird per CSS-State aktiviert      */
    position:absolute;
    font-size:.9rem;
    color:#666;
    white-space:nowrap;
    pointer-events:none;
    animation:waitPulse 1.4s ease-in-out infinite;
}

/* Nur wenn das Wrapper-DIV bereits die Spinner-Klasse hat */
.gsma-search-wrapper.loading .ros-search-wait{
    display:block;
}

@keyframes waitPulse{
    0%,100%{opacity:.35;}  50%{opacity:.95;}
}


/* ─── “MEHR”-Button in den Popular-Cards ─── */
.ros-more-nums{
    display:block;        /* bricht in neue Zeile um */
    margin-top:6px;       /* Abstand zu den Nummern */
   padding:3px 9px;
    margin-left:2px;                 /* dezent Abstand vor dem Komma */
    background:#f1f2f4;              /* hell-grau */
    border-radius:5px;               /* leicht abgerundet */
    font-size:.8rem;
    font-weight:540;
    text-transform:uppercase;        /* MEHR statt mehr */
    color:inherit;                   /* übernimmt die Textfarbe */
    text-decoration:none;            /* Unterstreichung weg */
    transition:.15s;
}
.ros-more-nums:hover{
    background:#e6e6e6;
}

/* ─── GSM-Arena-Popover (detail-row) kompakter ─── */
.gsma-suggest .detail-row{
    font-size:.78rem;          /* ≈ 12 - 13 px */
    line-height:1.35;
    font-weight:400;           /* dünner */
    padding:8px 10px !important;   /* kleiner Innenabstand */
}

/* Überschrift (erste Zeile) trotzdem hervorheben */
.gsma-suggest .detail-row strong{
    display:block;
    font-size:.85rem;
    font-weight:600;
    margin-bottom:4px;
}


/* — Scrollbar im Vorschlags-Drop-down erzwingen — */
.gsma-suggest{
    max-height:260px !important;    /* feste Höhe */
    overflow-y:auto   !important;   /* vertikales Scrollen einschalten */
    overscroll-behavior:contain;    /* verhindert, dass das Seiten-Scroll greift */
}

/* feine Scrollbar, nur Desktop-Pointer */
@media (pointer:fine){
    .gsma-suggest{
        scrollbar-width:thin;
        scrollbar-color:#c7c7c7 transparent;
    }
    .gsma-suggest::-webkit-scrollbar{
        width:6px;
    }
    .gsma-suggest::-webkit-scrollbar-thumb{
        background:#c7c7c7; border-radius:3px;
    }
  }



  /* Default ≥ 1080 px → 4 Spalten */
#ros-imported-models{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px 15px;
}

/* < 1080 px → 3 Spalten */
@media (max-width:1079px){
  #ros-imported-models{grid-template-columns:repeat(3,1fr);}
}

/* < 800 px → 2 Spalten */
@media (max-width:799px){
  #ros-imported-models{grid-template-columns:repeat(2,1fr);}
}

/* < 520 px → 1 Spalte */
@media (max-width:519px){
  #ros-imported-models{grid-template-columns:1fr;}
}

#ros-imported-models{
    display:grid;
    grid-template-columns:repeat(4,240px);   /* 4 Karten zu je 220 px */
    gap:13px 35px;                           /* exakt wie „Meistgesucht“ */

    max-width:934px;     /* 4 × 220 px + 3 × 18 px  →  linker Rand = rechter Rand */
    margin:0 auto;       /* zentriert den ganzen Block */
    justify-content:center;  /* kleine Sicherheit bei manchen Browsern */
}


/* Headlines im Wizard zentrieren  */
#ros-imported-headline,
#ros-popular-headline{
    text-align:center;   /* ⚑  NEU  */
}
#ros-step-2 h3{          /* der H3-Tag über den beiden Grids */
    text-align:center;
}


/* nur die Import-Navigation anpassen */
.ros-imported-nav{
    margin-bottom:100px;   /* ← Abstand in Pixeln – Wert nach Geschmack ändern */
}


/* mehr Abstand unter der Stepper-Leiste */
.ros-stepper{
    margin-bottom:80px;   /* Wert nach Wunsch anpassen (z. B. 32 px, 48 px …) */
}


/* ░░░ Karten-Hintergrund leicht abdunkeln ░░░ */
.ros-popular-model-card{
    background:#f7f8fa;            /* hellgrau statt reinweiß   */
    border:1px solid #e2e2e2;      /* ganz dezenter Rand        */
    transition:background .15s;    /* sanfter Hover-Effekt      */
}

/* ░░░ Hover wieder strahlend weiß ░░░ */
.ros-popular-model-card:hover{
    background:#ffffff;
}

/* ░░░ Modell-Nummern / „MEHR…“ dezenter ░░░ */
.ros-popular-model-card .ros-model-nums{
    color:#555;          /* dunkles Grau (statt Schwarz)      */
    opacity:0.6;         /* zusätzlich leicht transparent     */
    font-weight:320;     /* normaler Schriftschnitt genügt     */
}



/* kleiner Farbbalken in der Preview-Card */
.ros-color-swatch-preview{
    display:inline-block;
    width:22px; height:22px;
    border:1px solid #b5b5b5;
    border-radius:6px;
    margin-left:8px;
    vertical-align:middle;
}


/* Step 3 – Reparaturkarten: Bildgröße begrenzen */
.ros-repair-grid .repair-card img{
    width:50px;       /* maximale Breite          */
    height:auto;      /* Seitenverhältnis wahren  */
    object-fit:contain;
    flex-shrink:0;    /* verhindert Aufblasen     */
}
















/* ░░░ Drei Karten pro Reihe ░░░ */
.ros-repair-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(260px,1fr)); /* exakt 3  */
    gap:22px 26px;
}

/* Breakpoints */
@media(max-width:960px){ .ros-repair-grid{ grid-template-columns:repeat(2,minmax(260px,1fr)); } }
@media(max-width:540px){ .ros-repair-grid{ grid-template-columns:1fr; } }

/* ░░░ Karte ░░░ */
.repair-card{ cursor:pointer; }

.repair-inner{
    position:relative;
    padding:26px 28px 24px 100px;      /* links Platz fürs Icon */
    background:#fff;
    border:1px solid #e4e4e4;
    border-radius:16px;
    box-shadow:0 2px 6px rgba(0,0,0,.06);
    transition:box-shadow .18s, transform .18s;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;       /* Inhalt am Kopf bündig   */
}

.repair-card:hover .repair-inner{
    transform:translateY(-4px);
    box-shadow:0 6px 18px rgba(0,0,0,.10);
}

/* ░░░ Icon links ░░░ */
.repair-icon{
    position:absolute; left:26px; top:50%;
    transform:translateY(-50%);
    width:52px; height:52px;
}
.repair-icon img{ width:100%; height:100%; object-fit:contain; }

/* ░░░ Texte ░░░ */
.repair-title{
    margin:0 0 6px;
    font-size:1.15rem;         /* etwas kleiner */
    font-weight:700;
    line-height:1.25;
}
.repair-duration{
    font-size:.85rem;
    font-weight:600;
    color:#3aaa35;
    text-transform:uppercase;
    letter-spacing:.03em;
    margin-bottom:8px;
}
.repair-desc{
    margin:0;
    font-size:.9rem;
    line-height:1.4;
    color:#555;
}

/* ░░░ Preis-Badge ░░░ */
.repair-price-badge{
    position:absolute; top:0; right:0;
    padding:8px 14px 9px;
    background:#39b54a;
    color:#fff;
    border-radius:0 15px 0 15px;
    text-align:center;
}
.badge-label{
    display:block;
    font-size:.7rem;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.badge-price{
    display:block;
    font-size:1.1rem;       /* vorher 1.4 – jetzt kleiner */
    font-weight:700;
    line-height:1.15;
}

/* ░░░ Zustand „selected“ ░░░ */
.repair-card.selected .repair-inner{
    border-color:var(--repair-card-selected-bg, var(--primary-color,#4A90E2));
    box-shadow:0 0 0 3px rgba(74,144,226,.25);
}


/* ░░░ Breitere Karten – 3 Stück pro Zeile ░░░ */
.ros-repair-grid{
    grid-template-columns:repeat(3,minmax(320px,1fr));  /* vorher 260-px-Min-Breite */
    gap:26px 32px;                                      /* etwas mehr Luft        */
}

/* Breakpoints anpassen */
@media(max-width:1040px){ .ros-repair-grid{ grid-template-columns:repeat(2,minmax(320px,1fr)); } }
@media(max-width:580px) { .ros-repair-grid{ grid-template-columns:1fr; } }

/* ░░░ Karte ░░░ */
.repair-inner{ padding:30px 34px 28px 116px; }

/* ░░░ Icon ░░░ */
.repair-icon{ width:60px; height:60px; left:34px; }

/* ░░░ Titel → kleiner & gleiche Typo wie die Modellkarten ░░░ */
.repair-title{
    font-size:1.05rem;          /* vorher 1.15 */
    font-weight:700;
    line-height:1.3;
}

/* ░░░ Dauer ░░░ */
.repair-duration{
    font-size:.9rem;
    font-weight:600;
    color:#28a745;              /* kräftiges Grün (falls du eine Var hast, nutze die) */
    margin-bottom:10px;
}

/* ░░░ Beschreibung – Grau & kleiner wie Modellnummern ░░░ */
.repair-desc{
    font-size:.85rem;
    line-height:1.45;
    color:#6c6c6c;              /* identisch zu deinen Modell-Nummern */
    font-weight:400;
}

/* ░░░ Preis-Badge jetzt schlanker ░░░ */
.repair-price-badge{
    padding:6px 12px 7px;       /* weniger Innenabstand */
    border-radius:0 13px 0 13px;
}
.badge-label{
    font-size:.6rem;            /* kleiner   */
    letter-spacing:.05em;
}
.badge-price{
    font-size:.95rem;           /* kleiner   */
    font-weight:700;
}

/* ░░░ Hover-Effekt unverändert ░░░ */

/* ═══ Karte allgemein ════════════════════════════════════ */
.repair-card{
    position:relative;
    background:#fff;
    border:1px solid #e4e4e4;
    border-radius:10px;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
    padding:32px 36px 34px 36px;          /* außen */
    display:flex;
    flex-direction:column;
    gap:24px;                            /* Abstand Icon-Zeile ↔ Beschreibung */
}

/* ═══ Badge oben rechts ═══════════════════════════════════ */
.repair-badge{
    position:absolute; top:0; right:0;
    padding:10px 18px 12px;
    background:#7bc448;
    color:#fff;
    border-radius:0 18px 0 18px;
    text-align:center;
}
.badge-label{
    display:block;
    font-size:.75rem;
    letter-spacing:.05em;
    text-transform:uppercase;
}
.badge-price{
    display:block;
    font-size:1.35rem;
    font-weight:700;
    line-height:1.1;
}

/* ═══ Body-Zeile  (Icon + Titel/Dauer) ═══════════════════ */
.repair-body{
    display:flex;
    align-items:flex-start;
    gap:28px;
}
.repair-icon{
    flex:0 0 64px;                       /* feste Icon-Breite */
}
.repair-icon img{
    width:64px; height:64px; object-fit:contain;
}

/* Titel & Dauer */
.repair-title{
    margin:0 0 6px;
    font-size:1.35rem;                   /* exakt Screenshot-Größe */
    font-weight:700;
    line-height:1.25;
}
.repair-duration{
    display:block;
    font-size:1rem;
    font-weight:600;
    color:#39b54a;
    text-transform:uppercase;
    letter-spacing:.02em;
}

/* Beschreibung */
.repair-desc{
    margin:0;
    font-size:1.05rem;
    line-height:1.45;
    color:#444;
}

/* ═══ Optional – Hover-Effekt wie gehabt ═════════════════ */
.repair-card:hover{
    box-shadow:0 6px 18px rgba(0,0,0,.11);
    transform:translateY(-3px);
}

/* Step-3-Grid mittig unter der Preview-Card platzieren */
.ros-repair-grid{
    /* Abstand nach oben, damit nichts mehr in die Preview-Card hineinragt */
    margin:48px auto 0;          /* 48 px kannst du beliebig anpassen */

    /* Grid bleibt – drei Spalten ≥ 1040 px */
    display:grid;
    grid-template-columns:repeat(3,minmax(320px,1fr));
    gap:26px 32px;

    /* Horizontal zentrieren */
    justify-content:center;      /* → leere Fläche links/rechts wird gleich verteilt */
    max-width:1100px;            /* Gesamtbreite begrenzen, sonst klebt es am Rand */
}

@media(max-width:1040px){
  .ros-repair-grid{ grid-template-columns:repeat(2,minmax(320px,1fr)); }
}
@media(max-width:580px){
  .ros-repair-grid{ grid-template-columns:1fr; }
}

/* Karte – etwas schmalerer Innenabstand */
.repair-card{ padding:26px 30px 28px; }

/* Icon kleiner, nicht mehr riesig */
.repair-icon{ flex:0 0 52px; }       /* vorher 64 px */
.repair-icon img{ width:52px;height:52px; }

/* Titel ≈ Modell-Karten */
.repair-title{
    font-size:1.1rem;                /* vorher 1.35 rem */
    line-height:1.25;
}

/* Dauer kleiner */
.repair-duration{ font-size:.9rem; }

/* Beschreibung kleiner & grau – identisch zu Modell-Nummern */
.repair-desc{
    font-size:.9rem;
    line-height:1.5;
    color:#6c6c6c;
    font-weight:400;
}

/* Badge schmaler */
.repair-badge{
    padding:6px 12px 7px;
    border-radius:0 14px 0 14px;
}
.badge-label{ font-size:.6rem; }
.badge-price{ font-size:1.05rem; }


.repair-icon{ position:static !important; transform:none !important; }


/* Kopf-Zeile bleibt wie gehabt */
.repair-body{
    display:flex;
    align-items:flex-start;
    gap:30px;
}

/* Beschreibung jetzt volle Breite */
.repair-desc{
    margin:18px 0 0;          /* Abstand zur Kopfzeile */
    font-size:.9rem;
    line-height:1.45;
    color:#6c6c6c;
    font-weight:400;
}

/* Optional: Karte darf nun etwas niedriger padding haben */
.repair-card{ padding:26px 30px 28px; }


/* ░░░ Karten-Padding etwas ausgewogener ░░░ */
.repair-card{ padding:24px 34px 28px; }

/* ░░░ Kopf-Zeile: Icon + Texte ░░░ */
.repair-body{
    display:flex;
    align-items:center;         /* Icon & Text vertikal zentriert */
    gap:24px;
    padding-right:130px;        /* Platz für das Badge ↠ kein Überlappen */
}

/* ░░░ Badge leicht nach unten – schneidet Überschrift nicht mehr ░░░ */
.repair-badge{
    top:14px;                   /* statt 0 */
    right:0;
    padding:3px 14px 3px;
    border-radius:0 10px 0 10px;
}
.badge-label{ font-size:.58rem; }
.badge-price{ font-size:1rem; }

/* ░░░ Titel & Dauer kleiner ░░░ */
.repair-title{
    margin:0 0 4px;             /* minimaler Abstand */
    font-size:1rem;             /* vorher 1.1–1.35 rem */
    font-weight:700;
    line-height:1.25;
}
.repair-duration{
    font-size:.78rem;           /* vorher .9–1.0 rem */
    font-weight:600;
    color:#28a745;
    margin-bottom:0;
}

/* ░░░ Beschreibung kleiner & näher an der Kopf-Zeile ░░░ */
.repair-desc{
    margin:12px 0 0;            /* höher rücken (vorher 16–18 px) */
    font-size:.83rem;           /* etwas kleiner */
    line-height:1.45;
    color:#6c6c6c;
}
/* ░░░ Badge wieder bündig an den Kartenrand ░░░ */
.repair-badge{
    top:0;                         /* bündig */
    right:-1px;
    transform:translateY(-1px);    /* 1 px optischer Ausgleich für Rand-Radius */
}

/* ░░░ Kopf-Zeile behält ihren Platz rechts ░░░ */
.repair-body{ padding-right:150px; }   /* +20 px → Badge ragt nicht mehr hinein */

/* ░░░ Beschreibung näher an die Kopf-Zeile + linksbündig + volle Breite ░░░ */
.repair-desc{
    margin:8px 0 0;                /* höher als vorher */
    text-align:left;               /* nicht mehr zentriert */
    font-size:.83rem;              /* bleibt */
    line-height:1.45;
    color:#6c6c6c;
}

/* ░░░ Optisch mit Icon & Titel einrücken (Start bei Textblock) ░░░ */
@media (min-width:580px){
  .repair-desc{ padding-left: calc(52px + 24px); }  /* 52 Icon + 24 gap */
}

/* Beschreibung soll bei der linken Karten-Innenkante starten */
.repair-desc{
    padding-left:0 !important;   /* Extraraum aus der letzten Anpassung killen */
    margin-left:0  !important;
}


/* ░░░ Karten-Padding enger ░░░ */
.repair-card{ padding:18px 22px 22px; }   /* oben | seitlich | unten */

/* ░░░ Kopfzeile: Icon + Texte ░░░ */
.repair-body{
    gap:18px;                 /* kleinerer Abstand Icon ↔︎ Text */
    padding-right:140px;      /* Platz für Badge bleibt erhalten */
}
.repair-icon img{ width:48px;height:48px; }  /* Icon etwas kleiner */

/* ░░░ Titel weniger „laut“ ░░░ */
.repair-title{
    font-size:.95rem;         /* kleiner */
    font-weight:600;          /* nicht mehr fett (700) */
    margin:0 0 2px;
}

/* ░░░ Dauer deutlich dezenter ░░░ */
.repair-duration{
    font-size:.72rem;
    font-weight:500;
    letter-spacing:.3px;
    margin:0;
}

/* ░░░ Beschreibung geringerer Rand, etwas kleiner ░░░ */
.repair-desc{
    margin:-6px 0 0;
    font-size:.8rem;
    line-height:1.45;
    color:#6c6c6c;
    text-align:left;
    padding-left:0;           /* gewährleistet: beginnt dicht am Kartenrand */
}


/* Wizard-Navigation nur in Step 4 */
#ros-step-4 .ros-wizard-nav{
    text-align:center;
    margin:32px 0 10px;
}
#ros-step-4 .ros-wizard-nav .button{
    min-width:160px;
    font-size:16px;
}




/* Reparatur-Preview exakt wie Geräte-Preview, nur kleineres Icon */
#ros-repair-preview img{width:64px;height:64px}
#ros-repair-preview .ros-preview-text{font-size:1rem}

/* Reparatur-Preview: Dauer grün hervorheben */
#ros-repair-preview-duration{
    color:#28a745;         /* kräftiges Grün – identisch zu Step-3-Karten */
    font-weight:600;       /* etwas fetter, damit es auffällt              */
}












/* █████  RESPONSIVE-FIX (≤ 1024 px) – Desktop-Look beibehalten  █████ */
@media (max-width:1024px){

  /* ─── 1. Alle vier Grids: immer 4 gleich breite Spalten ─── */
  .ros-brand-grid,
  #ros-imported-models,
  .ros-popular-models,
  .ros-repair-grid{
      display:grid !important;
      grid-template-columns:repeat(4,minmax(0,1fr)) !important;
      gap:14px 18px;
  }
  /* ===== Smartphone-Layout: nur 2 Brand-Kacheln pro Zeile ===== */
@media (max-width: 600px){                /* Breakpoint nach Wunsch */
    .ros-brand-grid{
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 18px 18px;                     /* etwas Luft lassen      */
    }
  }

  /* ─── 2. Karten passen sich der Spalte an (kein Überlappen) ─── */
  .brand-card,
  .ros-popular-model-card,
  #ros-imported-models .ros-popular-model-card,
  .repair-card{
      width:100%   !important;   /* feste 180/240 px entfernen              */
      min-width:0  !important;   /* verhindert, dass Inhalt die Spalte sprengt */
      box-sizing:border-box;     /* Padding zählt mit                        */
  }

  /* ─── 3. Bilder & Texte schrumpfen leicht, um Platz zu halten ─── */
  .brand-card img{max-width:65%;height:auto}

  .ros-popular-model-card,
  #ros-imported-models .ros-popular-model-card{
      flex-direction:column;align-items:center;text-align:center;
  }
  .ros-popular-model-card img,
  #ros-imported-models .ros-popular-model-card img{
      width:48px;height:48px;object-fit:contain;
  }
  .ros-popular-model-card .ros-popular-model-text,
  #ros-imported-models .ros-popular-model-card .ros-popular-model-text{
      font-size:.82rem;line-height:1.25;word-break:break-word;
  }

  /* Reparatur-Kacheln */
  .repair-card .repair-icon img{width:52px;height:52px}
  .repair-title  {font-size:clamp(.9rem,2.7vw,1rem)}
  .repair-desc   {font-size:.8rem;line-height:1.4}

  /* ─── 4. Sehr schmale Phones (< 480 px) – trotzdem 4 Spalten ─── */
  @media (max-width:479px){

    .brand-card{height:110px}
    .brand-label{font-size:.66rem}

    .ros-popular-model-card img,
    #ros-imported-models .ros-popular-model-card img{
        width:56px;height:70px
    }
    .ros-popular-model-card .ros-popular-model-text,
    #ros-imported-models .ros-popular-model-card .ros-popular-model-text{
        font-size:.74rem
    }

    .repair-card{padding:14px}
    .repair-desc{display:none}          /* Platz sparen */
  }
}


/* █████  STEP-3 · REPARATUR-GRID  –  Tablet & Phone  (≤ 1024 px)  █████ */
@media (max-width:1024px){

    /* ─── 1. Grid immer 4 Spalten ─────────────────────────────────── */
    .ros-repair-grid{
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:14px 20px;
    }

    /* ─── 2. Karte darf schrumpfen & richtet sich mittig aus ─────── */
    .repair-card{
        width:100% !important;      /* feste Breite raus                 */
        min-width:0  !important;
        padding:16px 12px;
        box-sizing:border-box;
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    /* ─── 3. Icon & Texte untereinander ───────────────────────────── */
    .repair-body{
        flex-direction:column;
        align-items:center;
        gap:10px;
        padding-right:0;           /* alten Badge-Freiraum entfernen     */
    }
    .repair-icon{
        position:static !important;
        transform:none !important;
        flex:0 0 48px;
    }
    .repair-icon img{width:48px;height:48px;object-fit:contain}

    .repair-title{font-size:.85rem;margin:0 0 4px;font-weight:700}
    .repair-duration{
        font-size:.72rem;font-weight:600;color:#28a745;margin:0
    }

    /* ─── 4. Beschreibung ausblenden (Platz) ──────────────────────── */
    .repair-desc{display:none}

    /* ─── 5. Badge kleiner & unaufdringlich ───────────────────────── */
    .repair-badge{
        top:6px;right:6px;
        padding:4px 8px 5px;
        border-radius:8px;
    }
    .badge-label{font-size:.58rem}
    .badge-price{font-size:.82rem}

    /* ─── 6. Sehr schmale Phones (< 480 px): Text noch kompakter ──── */
    @media (max-width:479px){
        .repair-card{padding:12px 10px}
        .repair-icon img{width:42px;height:42px}
        .repair-title{font-size:.78rem}
        .repair-duration{font-size:.66rem}
        .repair-badge{padding:3px 6px 4px}
    }
}



/* ███  STEP-3  –  Feinschliff für Tablets & Phones (≤ 1024 px)  ███ */
@media (max-width:1024px){

    /* ── 1. Beschreibung wieder sichtbar, kompakt ────────────────── */
    .repair-desc{
        display:block          !important;   /* war ausgeblendet        */
        font-size:.75rem;
        line-height:1.4;
        color:#6c6c6c;
        margin:10px 0 0;
        text-align:center;
        word-break:break-word;               /* lange Wörter umbrechen  */
    }

    /* ── 2. Preis-Badge kleiner & bündig am Karten­rand ───────────── */
    .repair-badge{
        top:0; right:0;                      /* bündig                  */
        transform:translateY(-1px);          /* 1 px optischer Ausgleich*/
        padding:0px 7px 4px;                /* kompakter               */
        border-radius:0 10px 0 10px;         /* kleiner Radius          */
        min-width:42px;                      /* verhindert Umbruch      */
        box-sizing:border-box;
    }
    .badge-label { font-size:.55rem; letter-spacing:.04em; }
    .badge-price{ font-size:.78rem; font-weight:700; }

    /* ── 3. Titel, Dauer & Icon ganz leicht kleiner ───────────────── */
    .repair-icon img{ width:46px;height:46px }
    .repair-title   { font-size:.80rem; margin:0 0 2px }
    .repair-duration{ font-size:.68rem }

    /* ── 4. Extra-kleine Phones (< 480 px) – noch kompakter ───────── */
    @media (max-width:479px){
        .repair-desc { font-size:.7rem; }
        .repair-badge{
            padding:2px 8px 3px; min-width:80px;
            border-radius:0 8px 0 8px;
        }
        .badge-price{ font-size:.72rem; }
        .repair-icon img{ width:40px;height:40px }
    }
}


  /* ─── Reparatur-Beschreibung dichter unter den Titel rücken ─── */
@media (max-width:1024px){
    .repair-desc{
        margin:-10px 0 0 !important;   /* vorher z. B. 10 px */
    }
}



/* ═══════════════════════════════════════════════════════
   STEP 4 · Karten-Layout (Frontend-Wizard)
   ═══════════════════════════════════════════════════════*/
   .ros-form-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap:32px 38px;                /* Zeilen- / Spaltenabstand  */
    margin:40px 0 60px;
}
@media(max-width:620px){
    .ros-form-grid{grid-template-columns:1fr;}
}

/* Karte (= jedes Fieldset) */
.ros-card{
    background:#fff;
    border:1px solid #e5e5e5;
    border-radius:16px;
    padding:26px 28px 30px;
    box-shadow:0 4px 14px rgba(0,0,0,.06);
    transition:box-shadow .18s,transform .18s;
}
.ros-card:hover{
    box-shadow:0 6px 22px rgba(0,0,0,.12);
    transform:translateY(-3px);
}

/* Legende = Kartentitel */
.ros-card > legend{
    border:none;
    margin:0 0 18px;
    padding:0;
    font-size:1.15rem;
    font-weight:700;
    color:#333;
}

/* Label + Eingabefeld */
.ros-card label{
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:.9rem;
    font-weight:600;
    margin-bottom:18px;
}
.ros-card input,
.ros-card select,
.ros-card textarea{
    padding:11px 14px;
    border:2px solid #d3d3d3;
    border-radius:9px;
    font-size:1rem;
    transition:border-color .2s;
}
.ros-card input:focus,
.ros-card select:focus,
.ros-card textarea:focus{
    border-color:var(--primary-color,#4A90E2);
    outline:0;
}

/* Checkbox in AGB-Karte optisch angleichen */
.ros-card input[type=checkbox]{
    width:auto;height:auto;margin:0 6px 0 0;
}

/* kleine optische Angleichung: Vorschau-Boxen nicht „kleben“ */
.ros-preview-card{margin-bottom:34px;}
/* Wizard-Navigation dichter ran */
#ros-step-4 .ros-wizard-nav{margin-top:14px;}



/* ──────────────────────────────────────────────────────────────
   Auftrags-Button: Spinner + pulsierende Animation beim Senden
   ──────────────────────────────────────────────────────────── */
   .ros-btn-busy{
    position:relative;
    opacity:.75;                 /* leicht ausgegraut */
    pointer-events:none;         /* weitere Klicks blocken */
    animation:pulse 1s ease-in-out infinite;
}
.ros-btn-busy::after{            /* Spinner-Icon */
    content:'';
    position:absolute;
    top:50%;left:50%;
    width:18px;height:18px;
    margin:-9px 0 0 -9px;
    border:2px solid currentColor;
    border-top-color:transparent;
    border-radius:50%;
    animation:spin .6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}


/* ──────────────────────────────────────────────────────────────
   Universelle Button-Baseline für den Wizard
   ──────────────────────────────────────────────────────────── */
   .ros-btn{
    --ros-bg       : #218cff;   /* Primärfarbe */
    --ros-bg-dark  : #0f6fe2;
    --ros-bg-light : #4da2ff;
    --ros-text     : #fff;
    --ros-radius   : 6px;
    --ros-shadow   : 0 4px 8px rgba(0,0,0,.15);

    font-family: inherit;
    font-weight: 600;
    line-height: 1.15;
    padding: 12px 22px;
    border: none;
    border-radius: var(--ros-radius);
    cursor: pointer;
    transition: background .2s ease, transform .1s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ─── Primärer Button (Auftrag hinzufügen) ─── */
.ros-btn-primary{
    color: var(--ros-text);
    background: linear-gradient(180deg,
                 var(--ros-bg) 0%, var(--ros-bg-dark) 100%);
    box-shadow: var(--ros-shadow);
}
.ros-btn-primary:hover{
    background: linear-gradient(180deg,
                 var(--ros-bg-light) 0%, var(--ros-bg) 100%);
}
.ros-btn-primary:active{
    transform: scale(.97);
}

/* ─── Sekundärer Button (Zurück) ─── */
.ros-btn-back{
    color: #374151;
    background: #f3f4f6;
}
.ros-btn-back:hover{
    background: #e5e7eb;
}
.ros-btn-back:active{
    transform: scale(.97);
}

/* ─── Disabled- & Busy-State (greift auch bei Spinner) ─── */
.ros-btn[disabled],
.ros-btn-busy{
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
}

/* ─── Dark-Mode (optional) ─── */
@media (prefers-color-scheme: dark){
    .ros-btn-back{
        color:#e5e7eb;
        background:#374151;
    }
    .ros-btn-back:hover{
        background:#4b5563;
    }
}

.ros-btn-busy{
    pointer-events:none;   /* reicht völlig */
    /* … Spinner + Pulse aus vorheriger Antwort … */
}







/* ──────────────────────────────────────────────────────────────
   STEP-4  ·  Modern Form  ·  Farben original
   scope  : .ros-modern  ODER  #ros-step-4
   last   : 2025-05-26
   ──────────────────────────────────────────────────────────── */

/* ---------- Card-Layout ---------- */
.ros-modern .form-section,
#ros-step-4 .form-section{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:30px 34px;
    margin-bottom:34px;
    box-shadow:0 4px 16px rgba(0,0,0,.08);
    transition:transform .25s;
}
.signature-section{transform:none!important;}           /* Canvas fix */
.ros-modern .form-section:hover:not(.signature-section),
#ros-step-4 .form-section:hover:not(.signature-section){
    transform:translateY(-4px);
}

/* ---------- Legenden ---------- */
.ros-modern legend,
#ros-step-4 legend{
    font-size:1.08rem;
    font-weight:700;
    padding:0 8px;
    color:#111827;
}

/* ---------- Labels ---------- */
.ros-modern label,
#ros-step-4 label{
    display:block;
    margin-bottom:6px;
    font-weight:600;
    color:#374151;
    font-size:.94rem;
}

/* ---------- Inputs / Textarea / Select ---------- */
.ros-modern input:not([type=file]):not([type=checkbox]):not([type=radio]),
#ros-step-4  input:not([type=file]):not([type=checkbox]):not([type=radio]),
.ros-modern select,
#ros-step-4  select,
.ros-modern textarea,
#ros-step-4  textarea{
    width:100%;
    padding:14px 16px;
    font-family:inherit;
    font-size:1rem;
    line-height:1.45;
    color:#111827;
    background:#f9fafb;
    border:1px solid #d1d5db;
    border-radius:10px;
    transition:border .2s, box-shadow .2s, background .2s;
    outline:none;
}
.ros-modern input:focus,
#ros-step-4  input:focus,
.ros-modern select:focus,
#ros-step-4  select:focus,
.ros-modern textarea:focus,
#ros-step-4  textarea:focus{
    background:#ffffff;
    border-color:#007cba;
    box-shadow:0 0 0 2px rgba(0,124,186,.30);
}
.ros-modern ::placeholder,
#ros-step-4 ::placeholder{color:#9ca3af}

/* ---------- Select: dezente Farbe & Custom Arrow ---------- */
.ros-modern select,
#ros-step-4  select{
    appearance:none;
    background:#eef2ff;                               /* Pastell-Indigo */
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%234b5563' viewBox='0 0 20 20'%3E%3Cpath d='M5.23 7.21a.75.75 0 011.06.02L10 10.585l3.71-3.356a.75.75 0 111.06 1.06l-4.24 3.84a.75.75 0 01-1.06 0l-4.24-3.84a.75.75 0 01.02-1.06z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 18px center;
    background-size:16px;
    padding-right:48px;
}
.ros-modern select:hover,
#ros-step-4  select:hover{background:#ffffff;}

/* ---------- Datei-Upload ---------- */
.ros-modern input[type=file],
#ros-step-4 input[type=file]{
    padding:12px;
    background:#ffffff;
    border-radius:10px;
}

/* ---------- Checkbox (Standard) ---------- */
.ros-modern .checkbox-group label,
#ros-step-4 .checkbox-group label{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-weight:500;
}
.ros-modern .checkbox-group input:not(.ros-toggle),
#ros-step-4 .checkbox-group input:not(.ros-toggle){
    transform:scale(1.1);
    margin-top:2px;
}

/* ---------- Toggle-Switch ---------- */
.ros-modern input[type=checkbox].ros-toggle,
#ros-step-4 input[type=checkbox].ros-toggle{
    appearance:none;
    width:40px;height:24px;
    border-radius:999px;
    background:#d1d5db;
    border:2px solid #d1d5db;
    position:relative;
    cursor:pointer;
    transition:background .25s, border .25s;
}
.ros-modern input.ros-toggle::after,
#ros-step-4 input.ros-toggle::after{
    content:'';
    position:absolute;
    top:3px;left:3px;
    width:16px;height:16px;
    border-radius:50%;
    background:#ffffff;
    box-shadow:0 1px 3px rgba(0,0,0,.15);
    transition:transform .25s;
}
.ros-modern input.ros-toggle:checked,
#ros-step-4 input.ros-toggle:checked{
    background:#007cba;
    border-color:#007cba;
}
.ros-modern input.ros-toggle:checked::after,
#ros-step-4 input.ros-toggle:checked::after{
    transform:translateX(16px);
}
.ros-modern input.ros-toggle:focus,
#ros-step-4 input.ros-toggle:focus{
    outline:2px solid #007cba;
    outline-offset:2px;
}

/* ---------- Radio-Buttons ---------- */
.ros-modern .radio-group label,
#ros-step-4 .radio-group label{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:500;
    cursor:pointer;
}
.ros-modern input[type=radio],
#ros-step-4  input[type=radio]{
    appearance:none;
    width:20px;height:20px;
    border-radius:50%;
    border:2px solid #d1d5db;
    background:#ffffff;
    flex:0 0 20px;
    transition:border .2s, box-shadow .2s;
    position:relative;
}
.ros-modern input[type=radio]:hover,
#ros-step-4  input[type=radio]:hover{
    box-shadow:0 0 0 4px rgba(0,0,0,.05);
}
.ros-modern input[type=radio]:checked,
#ros-step-4  input[type=radio]:checked{
    border-color:#007cba;
    background:#007cba;
}
.ros-modern input[type=radio]:checked::after,
#ros-step-4  input[type=radio]:checked::after{
    content:'';
    position:absolute;inset:5px;
    border-radius:50%;
    background:#ffffff;
}
.ros-modern input[type=radio]:focus,
#ros-step-4  input[type=radio]:focus{
    outline:none;
    box-shadow:0 0 0 3px rgba(0,124,186,.30);
}

/* ---------- Grid Utilities ---------- */
@media (min-width:720px){
    .ros-modern .duo,
    #ros-step-4   .duo{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
    .ros-modern .form-inline,
    #ros-step-4   .form-inline{
        display:grid;
        grid-template-columns:210px 1fr;
        gap:26px;
        align-items:center;
    }
    .ros-modern .form-inline label,
    #ros-step-4   .form-inline label{margin-bottom:0;}
}

/* ---------- Description ---------- */
.ros-modern .description,
#ros-step-4 .description{display:block;margin-top:6px;font-size:.8rem;color:#6b7280}

/* ---------- Required-Stern ---------- */
.ros-modern input:required + span::after,
#ros-step-4  input:required + span::after,
.ros-modern select:required + span::after,
#ros-step-4  select:required + span::after,
.ros-modern textarea:required + span::after,
#ros-step-4  textarea:required + span::after{
    content:'*';
    margin-left:4px;
    color:#ef4444;
}




/* AGB-Checkbox – nur jene OHNE .ros-toggle */
#ros-step-4 .agb-box input[type=checkbox]{
    appearance: radio;
    width:24px;height:24px;
    border:2px solid #cbd5e0;
    border-radius:6px;
    background:#ffffff;
    flex:0 0 24px;
    cursor:pointer;
    position:relative;
    transition:border .2s, box-shadow .2s;
}
#ros-step-4 .agb-box input[type=checkbox]:hover{
    box-shadow:0 0 0 4px rgba(0,0,0,.04);
}
#ros-step-4 .agb-box input[type=checkbox]:checked{
    background:#007cba;
    border-color:#007cba;
}
#ros-step-4 .agb-box input[type=checkbox]:checked::after{
    content:'';
    position:absolute;left:5px;top:1px;
    width:12px;height:18px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none' viewBox='0 0 14 20'%3E%3Cpolyline points='1 11 6 16 13 4'/%3E%3C/svg%3E") center/contain no-repeat;
}


.ros-modern ::placeholder,
#ros-step-4    ::placeholder{
    color:#ccccccc2 !important;        /* einheitlich hellgrau */
}



/* === Choices.js Theme für dein Wizard ==================================== */
#ros-step-4 .choices__inner{
    background:#eef2ff;
    border:1px solid #cfd6e3;
    border-radius:10px;
    padding:12px 14px;
    min-height:auto;                         /* kompakt */
}
#ros-step-4 .choices[data-type*=select-one]::after{       /* Pfeil */
    border-color:#4b5563 transparent transparent;
    border-width:6px;
    margin-top:-4px;
}
#ros-step-4 .choices[data-type*=select-one].is-open::after{
    border-color:transparent transparent #4b5563;
}
#ros-step-4 .choices__list--dropdown{
    border-radius:12px;
    border:1px solid #cfd6e3;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
}
#ros-step-4 .choices__item--selectable.is-highlighted{
    background:#007cba;
    color:#fff;
}

/* === Choices · Rundung ohne „Abschnüren“ ========================= */
#ros-step-4 .choices{                     /* nur der Außen-Wrapper */
    border-radius:10px !important;
    overflow:visible !important;          /* Menü darf herausragen */
}
#ros-step-4 .choices__inner{              /* sichtbares Eingabefeld */
    border-radius:10px !important;
    overflow:hidden;                      /* Pfeil + Text sauber   */
}

/* ==== Choices – 100 % bündig ========================================= */
#ros-step-4 .choices,
#ros-step-4 .choices__inner,
#ros-step-4 .choices__list--dropdown{
    width:100%;                 /* exakt wie Text-Inputs            */
    box-sizing:border-box;      /* Padding + Border in die Breite   */
}

/* sichtbares Feld – Radius & Innenabstand */
#ros-step-4 .choices__inner{
    border-radius:10px;
    padding:12px 16px;
}

/* Dropdown-Liste – folgt exakt dem Feld */
#ros-step-4 .choices__list--dropdown{
    border-radius:0 0 10px 10px;
    margin-top:-1px;            /* verbindet sich ohne Lücke         */
}




/* Button mittig & dezentes Styling */
#sperrmuster-reset{
    background:#444;
    color:#fff;
    border:none;
    padding:6px 22px;
    border-radius:4px;
    cursor:pointer;
}
#sperrmuster-reset:hover{opacity:.9}

/* Wrapper erzwingt gemeinsame Breite für Grid + Button + Tabelle */
.sperrmuster-wrapper{display:flex;flex-direction:column;align-items:center}

/* ► Quadratische Radio-Buttons (Kästchen) */
.ros-modern input[type="radio"]{
    appearance:none;
    width:18px;height:18px;
    border:2px solid #007cba;
    border-radius:4px;
    margin-right:8px;
    vertical-align:middle;
    cursor:pointer;
}
.ros-modern input[type="radio"]:hover{
    box-shadow:0 0 3px rgba(0,124,186,.4);
}
.ros-modern input[type="radio"]:checked{
    background:#007cba;
}
.ros-modern input[type="radio"]:checked::after{
    content:'';
    position:absolute;
    inset:2px;
    background:#fff;
    border-radius:2px;
}


/* ► Button perfekt zentriert */
.ros-reset-btn{
    background:#444;color:#fff;border:none;
    padding:6px 26px;border-radius:4px;cursor:pointer;
    display:inline-block;margin:0 auto;
}
.ros-reset-btn:hover{opacity:.9}

/* ► Optionen-Box */
.sperrmuster-options{
    margin:28px auto 0;
    border:1px solid #ccc;border-radius:4px;
    background:#f9f9f9;padding:14px 18px;
    max-width:480px;
    box-shadow:0 0 8px 2px rgba(255,0,0,.25);
}
.sperrmuster-table{border-collapse:collapse;width:100%}
.sperrmuster-table .cb{width:42px;padding:6px 4px 6px 0}
.sperrmuster-table label{cursor:pointer}
.cond-text{padding:8px 4px;color:red;font-weight:600}

/* ► Quadratische Radio-Buttons */
.ros-modern input[type="radio"]{
    appearance:none;position:relative;
    width:18px;height:18px;
    border:2px solid #007cba;border-radius:4px;
    margin-right:8px;vertical-align:middle;cursor:pointer;
}
.ros-modern input[type="radio"]:hover{
    box-shadow:0 0 3px rgba(0,124,186,.45)
}
.ros-modern input[type="radio"]:checked{
    background:#007cba;
}
.ros-modern input[type="radio"]:checked::after{
    content:'';position:absolute;inset:2px;
    background:#fff;border-radius:2px;
}


/* ──────────────────────────────
   mehr Abstand unter dem Raster
   ──────────────────────────────*/
   #ros-step-4 .sperrmuster-reset-wrap{
    /* Abstand vom Raster (STANDARD: 18 px → jetzt z. B. 36 px) */
    margin-top:36px;      /* Wert nach Geschmack anpassen */
}




/* ───────── Fake-Radio-Kästchen im Wizard ───────── */
#ros-step-4 input[type=radio]{
    position:absolute;        /* echten Button verstecken   */
    opacity:0;                /* aber fokussierbar lassen   */
    margin:0;
}

#ros-step-4 .ros-fake-radio{
    display:inline-block;
    width:28px;height:28px;          /* ► Größe anpassbar         */
    border:2px solid #808080;
    border-radius:6px;              /* leichte Rundung           */
    background:#fff;
    box-sizing:border-box;
    margin-right:10px;
    vertical-align:middle;
    cursor:pointer;
}

/* aktiv → blau + Häkchen per Data-URI-SVG */
#ros-step-4 input[type=radio]:checked + .ros-fake-radio{
    border-color:#007cba;
    background:
        #007cba
        url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSI+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0xIDQuNSBMNCA4IDExIDEiLz48L3N2Zz4=")
        center / 10px 8px no-repeat;
}

/* Tastatur-Focus – äußerer Ring */
#ros-step-4 input[type=radio]:focus + .ros-fake-radio{
    outline:2px solid #007cba;
    outline-offset:3px;
}


/*  nur im Wizard – betrifft ausschliesslich das blaue Kästchen */
#ros-step-4 .ros-fake-radio{
    /* verhindert, dass ein Textzeichen (Stern) gerendert wird        */
    font-size:0;          /* Inhalt auf 0 px verkleinern               */
    line-height:0;
    color:transparent;    /* falls das Theme die Farbe überschreiben will */
}


.ros-pay-icon{
    width:3em;
    height:3em;
    margin-right:6px;
    vertical-align:middle;
}


/* TOC horizontal scrollbar verhindern */
.ros-seo-toc ul{
    display:flex;
    flex-wrap:wrap;
    gap:6px 12px;
    margin:0 0 1rem 0;
    padding:0;
    list-style:none;
}
.ros-seo-toc li a{ text-decoration:none;border-bottom:1px dotted }
.ros-seo-price{ white-space:nowrap }


/* ───────── Overlay ───────── */
#ros-price-overlay{
    position:fixed;
    inset:0;
    display:none;
    background:rgba(0,0,0,.55);
    z-index:9998;

    /* ▼ neu: Flex-Zentrierung für beliebige Viewport-Breite  */
    display:flex;
    align-items:center;     /* vertikal mittig  */
    justify-content:center; /* horizontal mittig */
}

/* ───────── Pop-up ───────── */
#ros-price-popup{
    max-width:420px; width:92%;
    background:#fff;
    border-radius:12px;
    box-shadow:0 10px 40px rgba(0,0,0,.25);

    /* Übergang */
    opacity:0; transform:scale(.85);
    visibility:hidden;
    transition:all .25s ease;
    z-index:9999;
}
#ros-price-popup.open{
    opacity:1; visibility:visible;
    transform:scale(1);
}

/* ───────── Innenbox ───────── */
#ros-price-popup .price-box{padding:28px 26px 32px;}

/* Titel & Untertitel */
#ros-price-popup h3{margin:0 0 6px;font-size:1.75rem;line-height:1.25;}
#ros-price-popup .hint{margin:0 0 24px;color:#2da52d;font-weight:500;font-size: 17px;}

/* ───────── Formular ───────── */
#ros-price-form{display:flex;flex-direction:column;gap:14px;}
#ros-price-form input,
#ros-price-form textarea{
    width:100%;padding:12px 14px;border:2px solid #e3e3e3;border-radius:8px;
    font-size:1rem;outline:none;transition:border .2s;text-transform:capitalize;
}
#ros-price-form textarea{
   resize:vertical;          /* Größe anpassbar, aber nur vertikal */
    min-height:90px;          /* Start-Höhe wie drei Input-Zeilen   */
}
#ros-price-form input:focus,
#ros-price-form textarea:focus{
    border-color:#2da52d;
}
#ros-price-form button{
    width:100%;background:#2da52d;color:#fff;border:0;border-radius:8px;
    padding:14px 0;font-size:1.2rem;font-weight:700;cursor:pointer;transition:opacity .2s;
}
#ros-price-form button:hover{opacity:.9;}

/* Erfolgs-Box im Pop-up */
.ros-success{
    background:#e7f8e7;border:1px solid #2da52d;padding:18px 14px;border-radius:8px;
    text-align:center;font-weight:600;color:#166c16;
}

/* ───────── Neues X-Schließen ───────── */
.ros-price-close{
    position:absolute;top:10px;right:14px;
    font-size:28px;line-height:24px;font-weight:400;
    cursor:pointer;color:#999;user-select:none;
}
.ros-price-close:hover{color:#111;}

/* altes Pseudo-X unsichtbar machen */
#ros-price-popup::after{display:none!important;}

#ros-price-popup .close{display:none!important;}



/* ▼▼  ZUSATZ GANZ UNTEN EINFÜGEN  ▼▼ */
/* erzwingt zentrierte Position unabhängig von vorherigen Regeln */
#ros-price-popup{
    position:fixed !important;
    top:50%!important;
    left:50%!important;
    transform:translate(-50%,-50%) !important;
    margin:0!important;           /* evtl. Reste aus Theme neutralisieren */
}



/* ros-frontend-wizard.css – GANZ am Schluss einfügen */
#ros-price-popup,
#ros-price-popup.open{
    position:fixed !important;
    top:50% !important;
    left:50% !important;
    transform:translate(-50%,-50%) !important;
    max-width:420px;
    width:92vw;
    z-index:9999;
}

/* ===== Overlay als Flex-Container ===== */
.ros-price-ov{
    position:fixed; inset:0;
    background:rgba(0,0,0,.55);
    z-index:9998;
    display:flex;                 /* Flex-Box! */
    align-items:center;           /* vertikal mittig */
    justify-content:center;       /* horizontal */
}

/* ===== Pop-up-Box ===== */
.ros-price-box{
    max-width:420px; width:92vw;
    background:#fff;
    border-radius:12px;
    box-shadow:0 10px 40px rgba(0,0,0,.25);
    padding:28px 26px 32px;
    position:relative;
}

/* Close-Icon */
.ros-price-close{
    position:absolute; top:10px; right:14px;
    font-size:28px; line-height:24px;
    cursor:pointer;
}



/* =========================================================
   Preis-auf-Anfrage · 20% kleiner, responsive, theme-resistent
   -> Nur innerhalb des Overlays, kein Einfluss auf andere UI
   ========================================================= */

/* Grundbox 20% schmaler */
#ros-price-overlay #ros-price-popup,
#ros-price-overlay .ros-price-box{
  max-width:336px !important;                     /* 420 * 0.8 */
  width:min(92vw, 336px) !important;
  box-sizing:border-box !important;
  background:#fff !important;
  border-radius:12px !important;
  box-shadow:0 10px 40px rgba(0,0,0,.25) !important;
  z-index:9999 !important;                        /* aber OHNE position/transform */
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
}

/* Innenabstände kompakter (~20%) */
#ros-price-overlay #ros-price-popup .price-box,
#ros-price-overlay .ros-price-box{
  padding:22px 20px 26px !important;
}

/* Typo kompakter */
#ros-price-overlay #ros-price-popup h3,
#ros-price-overlay .ros-price-box h3{
  margin:0 0 6px !important;
  font-weight:800 !important;
  font-size:1.40rem !important;                   /* vorher 1.75rem */
  line-height:1.25 !important;
}
#ros-price-overlay #ros-price-popup .hint,
#ros-price-overlay .ros-price-box .hint{
  margin:0 0 16px !important;
  color:#2da52d !important;
  font-weight:600 !important;
  font-size:.95rem !important;
}

/* Formular kompakter */
#ros-price-overlay #ros-price-form{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
}
#ros-price-overlay #ros-price-form input,
#ros-price-overlay #ros-price-form textarea{
  width:100% !important;
  padding:10px 12px !important;
  border:2px solid #e3e3e3 !important;
  border-radius:7px !important;
  font-size:.95rem !important;
  outline:none !important;
  transition:border .2s !important;
  background:#fff !important;
  text-transform:capitalize;
}
#ros-price-overlay #ros-price-form textarea{
  resize:vertical !important;
  min-height:80px !important;
}
#ros-price-overlay #ros-price-form input:focus,
#ros-price-overlay #ros-price-form textarea:focus{
  border-color:#2da52d !important;
}
#ros-price-overlay #ros-price-form button{
  width:100% !important;
  background:#2da52d !important;
  color:#fff !important;
  border:0 !important;
  border-radius:7px !important;
  padding:12px 0 !important;
  font-size:1.05rem !important;
  font-weight:800 !important;
  cursor:pointer !important;
  transition:opacity .2s ease !important;
}
#ros-price-overlay #ros-price-form button:hover{ opacity:.9 !important; }

/* Erfolgsmeldung kompakter */
#ros-price-overlay .ros-success{
  background:#e7f8e7 !important;
  border:1px solid #2da52d !important;
  padding:14px 12px !important;
  border-radius:8px !important;
  text-align:center !important;
  font-weight:700 !important;
  color:#166c16 !important;
}

/* Close-Icon minimal kleiner/enger */
#ros-price-overlay .ros-price-close{
  position:absolute !important;
  top:6px !important; right:10px !important;
  font-size:24px !important; line-height:22px !important;
  font-weight:500 !important; color:#999 !important;
  cursor:pointer !important; user-select:none !important;
}
#ros-price-overlay .ros-price-close:hover{ color:#111 !important; }

/* Alte Theme-Xs sicher neutralisieren – NUR im Overlay */
#ros-price-overlay #ros-price-popup::after{ display:none !important; }
#ros-price-overlay #ros-price-popup .close{ display:none !important; }

/* =================== Responsive Feinschliff =================== */

/* Very small phones: etwas mehr Breite, gute Lesbarkeit */
@media (max-width: 380px){
  #ros-price-overlay #ros-price-popup,
  #ros-price-overlay .ros-price-box{
    max-width: 94vw !important;           /* nutzt Breite, bleibt kompakt */
    width:94vw !important;
  }
  #ros-price-overlay #ros-price-popup h3{ font-size:1.32rem !important; }
  #ros-price-overlay #ros-price-form button{ font-size:1.0rem !important; }
}

/* Tablets: 20% kleiner beibehalten, aber leicht mehr Innenluft */
@media (min-width: 481px) and (max-width: 1024px){
  #ros-price-overlay #ros-price-popup,
  #ros-price-overlay .ros-price-box{
    max-width:336px !important;
    width:min(92vw,336px) !important;
  }
  #ros-price-overlay #ros-price-popup .price-box,
  #ros-price-overlay .ros-price-box{ padding:24px 22px 28px !important; }
}

/* Motion reduziert: keine aggressiven Transitions nötig (falls zuvor gesetzt) */
@media (prefers-reduced-motion: reduce){
  #ros-price-overlay #ros-price-popup,
  #ros-price-overlay .ros-price-box{
    transition:none !important;
  }
}









/* =========================================================
   ROS Preis-Popup – theme-sicher (nur im Overlay)
   ========================================================= */

/* DESKTOP: ~30% breiter, ~80vh hoch, kein internes Scrollen */
@media (min-width: 1025px){
  #ros-price-overlay > #ros-price-popup,
  #ros-price-overlay > .ros-price-box{
    width: min(92vw, 546px) !important;   /* 420px * 1.3 */
    max-width: 546px !important;
    max-height: 80vh !important;          /* ~10% höher als 70vh */
    overflow: visible !important;         /* keine innere Scrollbar */
  }

  /* Inhalt leicht straffen, ohne Theme zu stören */
  #ros-price-overlay > #ros-price-popup .price-box,
  #ros-price-overlay > .ros-price-box{ padding: 24px 22px 28px !important; }
  #ros-price-overlay > #ros-price-popup h3,
  #ros-price-overlay > .ros-price-box h3{
    font-size: 1.55rem !important; line-height: 1.22 !important; margin: 0 0 6px !important;
  }
  #ros-price-overlay > #ros-price-popup .hint,
  #ros-price-overlay > .ros-price-box .hint{
    font-size: 1rem !important; margin-bottom: 14px !important; line-height: 1.35 !important;
  }
  #ros-price-overlay > #ros-price-popup #ros-price-form{ gap: 12px !important; }
  #ros-price-overlay > #ros-price-popup #ros-price-form input,
  #ros-price-overlay > #ros-price-popup #ros-price-form textarea{
    padding: 11px 13px !important; font-size: .98rem !important; border-radius: 8px !important;
  }
  #ros-price-overlay > #ros-price-popup #ros-price-form textarea{ min-height: 84px !important; }
  #ros-price-overlay > #ros-price-popup #ros-price-form button{
    padding: 12px 0 !important; font-size: 1.05rem !important; font-weight: 800 !important;
  }
}

/* TABLET: moderat (etwas breiter als Phone, begrenzt in der Höhe) */
@media (min-width: 481px) and (max-width: 1024px){
  #ros-price-overlay > #ros-price-popup,
  #ros-price-overlay > .ros-price-box{
    width: min(92vw, 480px) !important;
    max-width: 480px !important;
    max-height: 78vh !important;
    overflow: visible !important;
  }
  #ros-price-overlay > #ros-price-popup .price-box,
  #ros-price-overlay > .ros-price-box{ padding: 22px 20px 26px !important; }
}

/* SMARTPHONES: ~40% kleiner, dynamische Höhe, kein Scrollen im Popup */
@media (max-width: 480px){
  #ros-price-overlay > #ros-price-popup,
  #ros-price-overlay > .ros-price-box{
    width: 55vw !important;               /* ~40% kleiner als ~92vw */
    max-width: 55vw !important;
    max-height: none !important;          /* dynamisch – kein internes Scrollen */
    overflow: visible !important;
  }
  #ros-price-overlay > #ros-price-popup .price-box,
  #ros-price-overlay > .ros-price-box{ padding: 14px 12px 18px !important; }

  #ros-price-overlay > #ros-price-popup h3,
  #ros-price-overlay > .ros-price-box h3{
    font-size: 1.00rem !important; line-height: 1.25 !important; margin: 0 0 6px !important;
  }
  #ros-price-overlay > #ros-price-popup .hint,
  #ros-price-overlay > .ros-price-box .hint{
    font-size: .85rem !important; line-height: 1.35 !important; margin-bottom: 12px !important;
  }

  #ros-price-overlay > #ros-price-popup #ros-price-form{ gap: 8px !important; }
  #ros-price-overlay > #ros-price-popup #ros-price-form input,
  #ros-price-overlay > #ros-price-popup #ros-price-form textarea{
    padding: 8px 10px !important; font-size: .85rem !important; border-radius: 7px !important;
  }
  #ros-price-overlay > #ros-price-popup #ros-price-form textarea{ min-height: 60px !important; }
  #ros-price-overlay > #ros-price-popup #ros-price-form button{
    padding: 9px 0 !important; font-size: .90rem !important; font-weight: 800 !important;
  }

  #ros-price-overlay > #ros-price-popup .ros-price-close{
    top: 6px !important; right: 8px !important; font-size: 20px !important; line-height: 20px !important;
  }
}







/* Smartphones: ~40% kleiner, ohne internes Scrollen, dynamisch anpassend */
@media (max-width: 480px){
  #ros-price-overlay #ros-price-popup,
  #ros-price-overlay .ros-price-box{
    width:75vw !important;          /* ~40% kleiner als ~92vw */
    max-width:75vw !important;
    max-height:none !important;      /* keine feste Höhe */
  }

  #ros-price-overlay #ros-price-popup .price-box,
  #ros-price-overlay .ros-price-box{
    padding:14px 12px 18px !important;
    overflow:visible !important;     /* kein internes Scrollen */
  }

  #ros-price-overlay #ros-price-popup h3,
  #ros-price-overlay .ros-price-box h3{
    font-size:1.00rem !important;
    line-height:1.25 !important;
    margin:0 0 6px !important;
  }

  #ros-price-overlay #ros-price-popup .hint,
  #ros-price-overlay .ros-price-box .hint{
    font-size:.85rem !important;
    line-height:1.35 !important;
    margin-bottom:12px !important;
    word-break:break-word !important;
    hyphens:auto !important;
  }

  #ros-price-overlay #ros-price-form{
    gap:8px !important;
  }

  #ros-price-overlay #ros-price-form input,
  #ros-price-overlay #ros-price-form textarea{
    padding:8px 10px !important;
    font-size:.85rem !important;
  }

  #ros-price-overlay #ros-price-form textarea{
    min-height:60px !important;      /* kompakter, bleibt ohne Scroll */
  }

  #ros-price-overlay #ros-price-form button{
    padding:9px 0 !important;
    font-size:.90rem !important;
    font-weight:800 !important;
  }

  #ros-price-overlay .ros-price-close{
    top:6px !important; right:8px !important;
    font-size:20px !important; line-height:20px !important;
  }
}








/* ===== ROS Preis-Popup · Flatsome-safe: nie abgeschnitten ===== */

/* Overlay standardmäßig unsichtbar */
#ros-price-overlay{ display:none !important; }

/* Wenn via JS gezeigt (block/flex/open), nimmt das Overlay den ganzen Viewport
   und DARF vertikal scrollen. Dadurch bleibt der Button immer im Popup. */
#ros-price-overlay.open,
#ros-price-overlay[style*="display:block"],
#ros-price-overlay[style*="display: block"],
#ros-price-overlay[style*="display:flex"],
#ros-price-overlay[style*="display: flex"]{
  display:block !important;
  position:fixed !important;
  top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
  width:100vw !important; height:100dvh !important;           /* dyn. Mobile-Viewport */
  background:rgba(0,0,0,.55) !important;
  z-index:120000 !important;                                   /* über Flatsome-Layern */
  overflow-y:auto !important; overflow-x:hidden !important;    /* <- Overlay scrollt */
  -webkit-overflow-scrolling:touch !important;
  padding: clamp(12px, 4dvh, 32px) 16px;                       /* Luft oben/unten */
}

/* Im Overlay: altes "fixed + translate" am Popup neutralisieren */
#ros-price-overlay > #ros-price-popup,
#ros-price-overlay > .ros-price-box{
  position:relative !important;
  top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
  transform:none !important;
  margin: 0 auto !important;                                    /* horizontal zentriert */
  overflow:visible !important;                                  /* keine innere Scrollbar */
  height:auto !important; max-height:none !important;
  /* Breiten je nach Gerät (nur hier gescoped → Theme bleibt intakt) */
  width:min(92vw, 546px) !important;                            /* Desktop: 420→546 */
  max-width:546px !important;
  background:#fff; border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.25);
}

/* Tablet */
@media (min-width:481px) and (max-width:1024px){
  #ros-price-overlay > #ros-price-popup,
  #ros-price-overlay > .ros-price-box{
    width:min(92vw, 480px) !important;
    max-width:480px !important;
  }
}

/* Smartphone (~40% schmaler, Höhe passt sich dynamisch an) */
@media (max-width:480px){
  #ros-price-overlay > #ros-price-popup,
  #ros-price-overlay > .ros-price-box{
    width:55vw !important; max-width:55vw !important;
  }
}

/* Optional: etwas Innenabstand – sicher nur im Overlay-Context */
#ros-price-overlay > #ros-price-popup .price-box,
#ros-price-overlay > .ros-price-box{ padding:24px 22px 28px; }

/* ============================================================
   ▼▼ 10% niedriger in ALLEN Varianten – Breite bleibt gleich ▼▼
   (visuelle Skalierung, Breite kompensiert)
   ============================================================ */
#ros-price-overlay > #ros-price-popup,
#ros-price-overlay > .ros-price-box{
  --rosScale: .9;                                   /* 10% kleiner */
  transform: scale(var(--rosScale)) !important;     /* visuell kleiner */
  transform-origin: top center !important;
}

/* Desktop: Breite vor der Skalierung größer rechnen, damit sie nach scale(.9)
   genau so breit wirkt wie vorher */
@media (min-width:1025px){
  #ros-price-overlay > #ros-price-popup,
  #ros-price-overlay > .ros-price-box{
    width: calc(min(92vw, 546px) / var(--rosScale)) !important;
    max-width: calc(546px / var(--rosScale)) !important;
  }
}

/* Tablet */
@media (min-width:481px) and (max-width:1024px){
  #ros-price-overlay > #ros-price-popup,
  #ros-price-overlay > .ros-price-box{
    width: calc(min(92vw, 480px) / var(--rosScale)) !important;
    max-width: calc(480px / var(--rosScale)) !important;
  }
}

/* Smartphone */
@media (max-width:480px){
  #ros-price-overlay > #ros-price-popup,
  #ros-price-overlay > .ros-price-box{
    width: calc(65vw / var(--rosScale)) !important; /* wirkt weiter wie 55vw */
    max-width: none !important;
  }
}





/***FIXXXXXX**/












.repair-card{
    position:relative;              /*  NEU  ▸ Referenz für den Button  */
}

/* WhatsApp-Button */
.ros-whatsapp-btn{
    position:absolute;
    right:12px;                     /* Abstand zum Rand */
    bottom:12px;
    width:36px;
    height:36px;
    border-radius:50%;
    background:#25D366;
    display:flex;                   /* Icon zentrieren */
    align-items:center;
    justify-content:center;
    box-shadow:0 2px 4px rgba(0,0,0,.2);
    transition:transform .15s ease-in-out;
}
.ros-whatsapp-btn:hover{transform:scale(1.1);}
.ros-whatsapp-btn .dashicons{
    color:#fff;
    font-size:18px;
    line-height:1;
}






.repair-card .ros-whatsapp-btn{
    position:absolute;
    right:10px; bottom:10px;
    width:34px; height:34px;
    border-radius:50%;
    background:#25D366;
    display:flex; align-items:center; justify-content:center;
    transition:opacity .2s;
  }
  .repair-card .ros-whatsapp-btn .dashicons{
    color:#fff; font-size:20px; line-height:1;
  }
  .repair-card:hover .ros-whatsapp-btn{ opacity:.85 }
  


/* ░░ WhatsApp-Button: Rahmen klein lassen – SVG per transform vergrößern ░░ */
.repair-card .ros-whatsapp-btn{
    width:26px;
    height:26px;
    bottom:10px;
    right:10px;
    border-radius:6px;
    padding:0;                  /* kein Innenabstand → Icon darf „randlos“ wachsen */
    overflow:visible;           /* wichtig: Icon darf über seine Box ragen        */
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Icon 30 % größer als die Button-Box */
.repair-card .ros-whatsapp-btn img{
    width:26px;                 /* gleiche Grundfläche wie Button …       */
    height:26px;
    transform:scale(1.3);       /* … aber 1.3 × gerendert ⇒ ≈ 34 px optisch */
    transform-origin:center;
    pointer-events:none;        /* kein Einfluss auf Klick-Hitbox         */
}

/* Eventuelle Dashicons-Fallbacks ausblenden */
.repair-card .ros-whatsapp-btn .dashicons{display:none;}

.repair-card .ros-whatsapp-btn{
    width:26px;
    height:26px;
    bottom:10px;
    right:10px;
    border-radius:6px;        /* Form bleibt wie bisher                */
    background:#25D366;
    overflow:hidden;          /* Icon nur innerhalb dieser Rundung     */
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
}

.repair-card .ros-whatsapp-btn img{
    width:30px;               /* grösser als der Button → füllt ihn    */
    height:30px;
    object-fit:contain;
}


/* ░░ Badge nur für „Preis auf Anfrage“ etwas schlanker ░░ */
.repair-badge.price-request{
    padding:3px 10px 3px;        /* weniger innen */
}

.repair-badge.price-request .badge-label{
    font-size:.55rem;            /* ↓ */
    letter-spacing:.04em;
}

.repair-badge.price-request .badge-price{
    font-size:.8rem;             /* ↓ */
    font-weight:600;
}









/* █████  REPARATUR-KOPFZEILE (Icon + Titel + Dauer)  █████ */

/* 1) Kopfzeile als 2-Spalten-Grid:
      ┌──64 px──┬───────────── rest = 1fr ─────────────┐             */
      .repair-body{
        display:grid !important;          /* überschreibt altes flex     */
        grid-template-columns:64px 1fr;   /* Icon | Text-Spalte          */
        column-gap:24px;                  /* Abstand Icon ↔ Text         */
        align-items:center;               /* vertikale Mitte             */
    
        /* nur so viel Rechts­abstand, wie das Badge wirklich braucht    */
        padding-right:110px;              /* ← falls Badge breiter ist,
                                             Wert einfach leicht erhöhen */
    }
    
    /* 2) Text-Container darf schrumpfen & wachsen */
    .repair-text{
        flex:0 1 auto;     /* falls noch alte flex-Regel greift          */
        min-width:0;       /* verhindert Eigen-Einengung                 */
        overflow:hidden;   /* lange Geräte­namen clippen statt umbrechen  */
    }
    
    /* 3) Headline typografisch entzerren */
    .repair-title{
        font-size:1rem;      /* kleiner als bisher (≈ 16 px)             */
        line-height:1.25;
        font-weight:700;
        margin:0 0 4px;
        text-align:left;     /* statt zentriert                           */
        text-wrap:balance;   /* moderne Browser: harmonischer Umbruch     */
        hyphens:auto;        /* Silbentrennung DE/EN, wo erlaubt          */
        word-break:normal;   /* „break-all“ sicher ausschalten            */
    }
    
    /* 4) Dauer direkt darunter – linksbündig lassen                    */
    .repair-duration{
        text-align:left;
    }
    
    /* 5) Icon bleibt 64 × 64 px                                         */
    .repair-icon{
        flex:0 0 50px !important;
        width:50px;
        height:50px;
    }


    /* ░░ STEP-3 · Reparaturkarte ░░ */

/* Kopfzeile: Icon | Text – nur so viel rechter Puffer,
   wie das Badge WIRKLICH benötigt (≈ 60-70 px)   */
.repair-body{
    display:grid !important;          /* eindeutiges 2-Spalten-Layout  */
    grid-template-columns:50px 1fr;   /* 64 px Icon | Rest = Text      */
    column-gap:20px;                  /* etwas kompakter als 24 px     */

    padding-right:72px;               /* << vorher 140-150 px          */
    align-items:center;
}

/* Texthülle darf schrumpfen & wachsen */
.repair-text{
    min-width:0;      /* verhindert Eigen-Einengung               */
    overflow:hidden;  /* schützt vor sehr langen Worten           */
}

/* Headline typografisch optimieren */
.repair-title{
    font-size:.95rem;     /* kleiner = weniger Zeilen              */
    line-height:1.28;
    font-weight:650;
    margin:0 0 4px;
    text-align:left;

    hyphens:auto;         /* weiche Silbentrennung DE/EN           */
    word-break:normal;    /* KEIN break-all                        */
    text-wrap:balance;    /* harmonischer Umbruch (moderne Browser)*/
}

/* Dauer einheitlich linksbündig */
.repair-duration{text-align:left}

/* Badge braucht jetzt nicht mehr „freizu­halten“ – alles bleibt sauber */

/* ███ STEP-3 – Headline kompakter + näher an den rechten Rand ███ */

/* 1) Kopfzeile: nur 48 px Reserve fürs Preis-Badge  */
.repair-body{
    padding-right:48px;          /* vorher 72 px – jetzt schlanker  */
}

/* 2) Headline & Dauer noch einen Tick kleiner */
.repair-title{
    font-size:.80rem;            /* ≈ 14 px – war .95 rem           */
    line-height:1.25;
}

.repair-duration{
    font-size:.75rem;            /* vorher ~.78-.8 rem              */
}

/* 3) ggf. altes flex-Layout in Mobile-Breakpoints überschreiben
      (damit die neuen Größen dort ebenfalls gelten)                */
@media(max-width:1024px){
    .repair-title  {font-size:.82rem;}
    .repair-duration{font-size:.68rem;}
}










/* ════════════════════════════════════════════════════════════════
   MODERN STEPLEISTE  ·  Bullet-Glow + Inside-Track Wave
   last: 2025-06-15
   ════════════════════════════════════════════════════════════════ */
   :root{
    /* ───────── Bullet / Farben ───────── */
    --step-size      : 60px;                           /* Ø Desktop  */
    --step-size-sm   : 44px;                           /* Ø Mobile   */
    --done-clr       : var(--primary-color,#218cff);   /* erledigt   */
    --active-clr     : var(--primary-color,#218cff);   /* aktiv      */

    /* ───────── Basis-Track ───────────── */
    --track-h        : 3px;          /* Höhe Desktop */
    --track-h-xs     : 2px;          /* Höhe Mobile  */
    --track-bg       : #dfe3e9;      /* grauer Grund */

    /* ───────── Wave-Effekt ───────────── */
    --wave-width     : 40%;          /* Breite Lichtband    */
    --wave-speed     : 3s;           /* Dauer 1 Durchlauf   */
    --wave-blur      : 1px;          /* Weichzeichner       */
    --wave-color     : color-mix(in srgb,
                          var(--primary-color,#218cff) 65%, #ffffff);
}

/* ░░░ Stepper-Container ░░░ */
.ros-stepper{
    position:relative;
    display:flex!important;
    justify-content:center;
    gap:calc(var(--step-size) * .9);
    margin:48px 0 64px;

    overflow:visible !important;                         /* nichts clippen   */
    min-height:calc(var(--step-size) + 12px) !important;  /* Platz für Glow   */
}

/* ░░░ Grauer Grundstrich ░░░ */
.ros-stepper::after{
    content:"";
    position:absolute; top:50%; left:0; right:0;
    height:var(--track-h);
    transform:translateY(-50%);
    background:var(--track-bg);
    z-index:0;
}

/* ░░░ Inside-Track Wave ░░░ */
.ros-stepper::before{
    content:"";
    position:absolute; top:50%; left:0;
    width:var(--wave-width); height:var(--track-h);
    transform:translateY(-50%);
    background:
        linear-gradient(90deg,
            transparent 0%,
            var(--wave-color) 38%,
            var(--wave-color) 62%,
            transparent 100%);
    filter:blur(var(--wave-blur));
    opacity:0;
    animation:waveSlide var(--wave-speed) cubic-bezier(.4,0,.2,1) infinite;
    z-index:1;
}

@keyframes waveSlide{
    0%   {transform:translate(  0%, -50%); opacity:0;}
    10%  {opacity:.9;}
    50%  {transform:translate(100%, -50%); opacity:1;}
    90%  {opacity:.9;}
    100% {transform:translate(200%, -50%); opacity:0;}
}

/* ░░░ Bullet-Grundstil ░░░ */
.ros-step{
    position:relative; z-index:2;                /* über der Wave */
    width:var(--step-size); height:var(--step-size);
    border-radius:50%;
    background:#fff;
    border:4px solid var(--track-bg);
    display:flex; align-items:center; justify-content:center;

    font:700 1.05rem/1 var(--font-family,inherit);
    color:#333;                                   /* Standard-Ziffer */
    transition:.25s;
}

/* alte nummer-Duplikate sicher deaktivieren */
.ros-step::before{content:none!important;}

/* Label unterhalb aus data-label */
.ros-step small{display:none;}
.ros-step::after{
    content:attr(data-label);
    position:absolute; top:calc(100% + 8px); left:50%;
    transform:translateX(-50%);
    font-size:.8rem; font-weight:600; letter-spacing:.02em;
    color:#50545c; white-space:nowrap;
}

/* ░░░ States ░░░ */
.ros-step.completed{
    background:#fff;
    border-color:var(--done-clr);
    box-shadow:0 0 0 4px color-mix(in srgb,var(--done-clr) 25%,transparent);
}
.ros-step.active{
    background:var(--active-clr);
    border-color:var(--active-clr);
    color:#fff;
    animation:pulseGlow 2.4s ease-out infinite;
}

@keyframes pulseGlow{
  0%  {box-shadow:0 0 0 0   color-mix(in srgb,var(--active-clr) 55%,transparent);}
  70% {box-shadow:0 0 0 14px color-mix(in srgb,var(--active-clr) 0%, transparent);}
  100%{box-shadow:0 0 0 0   color-mix(in srgb,var(--active-clr) 0%, transparent);}
}

/* ░░░ Responsive ≤520 px ░░░ */
@media(max-width:519px){
  .ros-stepper{
      gap:calc(var(--step-size-sm) * .8);
      margin:36px 0 48px;
  }
  .ros-stepper::after,
  .ros-stepper::before{
      height:var(--track-h-xs);
  }
  .ros-step{
      width:var(--step-size-sm); height:var(--step-size-sm);
      font-size:.9rem;
  }
}



/* ░░░ Alt-Keyframes neutrale Dummy-Versionen ░░░ */
@keyframes flowDots{}
@keyframes pulseStream{}
@keyframes breathingDots{}
@keyframes pspWave{}
@keyframes pulseTrack{}





/* ───────── Feintuning für Step 3 – Icon + Titel weiter nach links ───────── */

/* 1 |  Karten-Padding verkleinert das Icon schon – s. vorige Antwort */
.repair-card{
    padding-left:15px;              /* Icon & Inhalt 6-10 px weiter links */
    padding-top: 15px;
}

/* 2 |  Abstand Icon ↔ Text reduzieren  */
.repair-body{
    column-gap:0px;                /* vorher 20-30 px – nach Geschmack anpassen */
}

/* 3 |  Textblock noch einen Hauch nach links rücken (Feinschliff) */
.repair-text{
    margin-left:-2px;               /* 0 – -4 px, je nachdem wie’s aussehen soll */
}

/* 4 |  (falls nötig) Icon nicht mehr mittig, sondern am oberen Rand ausrichten */
@media (min-width:1025px){          /* nur Desktop-Layout betroffen */
  .repair-body{
      align-items:flex-start;
  }
}


/* ─── Step-3-Kachel: Platz fürs Preis-Badge freihalten ─── */
.repair-body{
    /* Icon-Spalte | Text-Spalte bleiben wie gehabt */
    grid-template-columns:64px 1fr;

    /* >>> Hier den Abstand einstellen  <<<              *
     *  Wert = reale Badge-Breite + 10 px Sicherheitsabstand
     *  120 – 140 px funktioniert in der Regel gut        */
    padding-right:74px;                /* vorher 48 / 72 … */
}

/* Mobile Layout hat ein viel kleineres Badge – dort
   brauchst du den Freiraum nicht, also wieder auf 0 setzen */
@media(max-width:1024px){
  .repair-body{ padding-right:0; }
}







/* ─── Step-3 · Typo-Feinschliff ─── */

/* 1 | Titel: leicht mehr Laufweite */
.repair-title{
    letter-spacing: .15px;   /* ≈ 0.02 em – nach Geschmack 0.2-0.4 px */
    
}

/* 2 | Beschreibung: helleres Grau & etwas transparenter */
.repair-desc{
    color: rgba(0,0,0,.47);  /* 55 % Schwarz  → luftig & dezent      */
    /* alternativ festes Grau:  #7a7a7a;  */
    font-weight: 400;        /* falls sie kräftiger war, etwas dünner */
}








.repair-badge{
    background:#39b54a!important;
}
.repair-badge.price-request{
    background:#28a745!important;
}
/* ───────── Hover-Farbe für Badges (überschreibt die Defaults) ───────── */

/* Badge mit festem Preis */
.repair-card:hover .repair-badge:not(.price-request){
    background:#5695ee !important;   /* dein Wunsch-Grün */
}

/* ─── Hover-Farbe NUR für „Preis auf Anfrage“ ─── */
.repair-card:hover .repair-badge.price-request{
    /* Wunschfarbton */
    background:#5695ee !important;      /* z. B. etwas dunkleres Grün */
    /* optional zusätzlicher Effekt */
    /* filter:brightness(1.08); */
}
.repair-card:hover .repair-badge{
    filter:brightness(1.15) !important;
}





/* Suchfeld Reparaturen */
.ros-repair-search{
    margin:0 0 18px;
    text-align:center;
}
.ros-repair-search input{
    width:100%;
    max-width:420px;
    padding:8px 10px;
    border:1px solid #ccc;
    border-radius:6px;
    font-size:1rem;
}





/* ===== Smartphone-Ansicht: 2 Modell-Karten pro Zeile ===== */
@media (max-width: 600px){                       /* Breakpoint nach Wunsch */
  
    /* 1) Grid auf 2 Spalten zwingen */
    #ros-imported-models,
    .ros-popular-models{
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 18px 18px !important;                 /* gleichmäßiger Abstand */
    }
  
    /* 2) Karten dürfen frei schrumpfen */
    #ros-imported-models .ros-popular-model-card,
    .ros-popular-models  .ros-popular-model-card{
        width: 100%  !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }
  
    /* 3) Bild & Text etwas kleiner, damit es sauber passt (optional) */
    .ros-popular-model-card img{ width:48px; height:48px; }
    .ros-popular-model-card .ros-popular-model-text{
        font-size: .82rem; line-height: 1.25;
    }
  }





  /* ===== Desktop-Ansicht: Vorschau-Karte zentrieren ===== */
@media (min-width: 768px){               /* nur Tablet / Desktop */
    #ros-device-preview{                   /*   = die ganze Karte   */
        flex: 0 0 auto !important;         /* nicht auf 100 % wachsen */
        max-width: 460px;                  /* Wunschbreite           */
        width: 100%;                       /* darf aber schrumpfen   */
        margin: 20px auto 32px;            /* zentriert unterm Suchfeld */
    }
  }


  /* ========= Desktop-Ansicht ========= */
@media (min-width: 768px){
    #ros-repair-preview{             /* Reparatur-Karte */
        flex: 0 0 auto !important;   /* nicht 100 % breit wachsen */
        max-width: 460px;            /* fixe Obergrenze, anpassen nach Wunsch */
        width: 100%;                 /* darf schrumpfen */
        margin: 20px auto 32px;      /* zentriert unter dem Feld */
    }
  }



  /* =================  MOBIL (bis 767 px)  ================= */
@media (max-width: 767px){

    /* --- Wrapper auf 2-Spalten umstellen --- */
    .ros-repair-grid{
        /* Nimm grid oder flex, beides geht */
        display: flex !important;      /* überschreibt evtl. “grid”   */
        flex-wrap: wrap;
        justify-content: center;       /* mittig ausrichten           */
        gap: 12px;                     /* Abstand zwischen den Karten */
    }
  
    /* --- Jede Reparatur-Karte bekommt 50 % Breite --- */
    .ros-repair-grid .repair-card{
        flex: 0 0 calc(50% - 12px) !important;   /* 2 Karten pro Zeile     */
        max-width: calc(50% - 12px) !important;
        /* Falls in Deinem Theme noch fixe Höhen/Breiten drinstecken: */
        width: 100%;
        height: auto;
    }
  }




  .ros-repair-search {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 32px auto 28px auto !important;
    width: 100% !important;
    padding: 0 !important;
  }
  
  .ros-repair-search input {
    width: 100%;
    max-width: 420px;
    margin: 0 auto !important;
    display: block;
    padding: 14px 16px;
    border: 2px solid #c7c7c7;
    border-radius: 9px;
    font-size: 1.11rem;
    background: #fff;
    box-sizing: border-box;
    font-family: var(--font-family-main), Arial, sans-serif !important;
  }

  #ros-step-3 .ros-repair-search {
    width: 100vw !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  
  @media (max-width: 600px) {
    .ros-repair-search input {
      max-width: 98vw !important;
      font-size: 1rem !important;
    }
  }




  










/* gemeinsamer Namespace */
.ros-frontend-wizard input[type="radio"],
.ros-frontend-wizard input[type="checkbox"]{
    /* Reset – alles auf Browser-Default zurücksetzen,
       damit Theme-Dekos zuerst verschwinden              */
    all: unset;

    /* Dein tatsächliches Design */
    appearance:none;
    width:18px; height:18px;
    border:2px solid #007cba;
    border-radius:4px;
    cursor:pointer;
    /* … */
}

/* Checked-State */
.ros-frontend-wizard input[type="radio"]:checked{
    background:#007cba;
}

.ros-frontend-wizard input[type="radio"]:checked::after{
    content:'';
    position:absolute; inset:2px;
    background:#fff;
    border-radius:2px;
}




/* Basis: auf 16 px verankern, dann in rem arbeiten */
.ros-frontend-wizard,
.ros-frontend-wizard *{
    font-family: 'Bai Jamjuree', Arial, sans-serif !important;
    /* Basisgröße – das Theme hat hier nichts verloren */
    font-size:100% !important;      /* 16 px im Normalfall */
    line-height:1.4;
}


/* Popular-Kartentext fixieren */
.ros-popular-model-card .ros-popular-model-text,
.ros-popular-model-card .ros-popular-model-text *{
    font-family:'Bai Jamjuree',Arial,sans-serif !important;
    font-size:.9rem !important;        /* 0.9 × 16 px = 14.4 px */
    line-height:1.25 !important;
}

/* „MEHR…“ niemals unterstrichen – auch nicht beim Hover oder Fokus */
.ros-more-nums,
.ros-more-nums:hover,
.ros-more-nums:focus{
    text-decoration:none !important;
}





html.ros-has-wizard body #ros_device_search{
    font-size:17px   !important;   /* px schert sich nicht um Root‐Größe   */
    font-family:'Bai Jamjuree',Arial,sans-serif !important;
}




/* Vorschlagsliste:
   – NUR die Summary-Zeile bleibt einzeilig
   – Die Detail-Box darf normal umbrechen */
#ros-step-2 .gsma-suggest .summary-row,
#ros-step-2 .gsma-suggest .summary-row *{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
#ros-step-2 .gsma-suggest .detail-row,
#ros-step-2 .gsma-suggest .detail-row *{
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}


  /* █ Pulse-Effekt + weißer Innen-Dot für ALLE Auswahlfelder (Radio + Checkbox) */
@keyframes rosPulseSel{
    0%   { box-shadow:0 0 0 0   rgba(0,124,186,.45); }
    70%  { box-shadow:0 0 0 10px rgba(0,124,186,0);  }
    100% { box-shadow:0 0 0 0   rgba(0,124,186,0);  }
  }
  
  /* Grund-Kästchen (für alles, was der Wizard per JS erzeugt) */
  #ros-step-4 .ros-fake-radio{
      position:relative;                /* nötig für den Innen-Dot           */
      display:inline-block;
      width:20px; height:20px;
      border:2px solid #007cba;
      border-radius:4px;                /* eckig – wird für Radios gleich rund */
      background:#fff;
      vertical-align:middle;
      box-sizing:border-box;
      transition:background .18s, border-color .18s;
  }
  
  /* Runde Variante nur für Radios */
  #ros-step-4 input[type="radio"] + .ros-fake-radio{ border-radius:50%; }
  
  /* ░░ SELECTED ░░ – blau + Puls   */
  #ros-step-4 input[type="radio"]:checked + .ros-fake-radio,
  #ros-step-4 input[type="checkbox"]:checked + .ros-fake-radio{
      background:#007cba;
      animation:rosPulseSel 1.8s ease-out infinite;
  }
  
  /* Weißer Innen-Kreis / Dot */
  #ros-step-4 input[type="radio"]:checked + .ros-fake-radio::after,
  #ros-step-4 input[type="checkbox"]:checked + .ros-fake-radio::after{
      content:"";
      position:absolute;
      top:50%; left:50%;
      width:8px; height:8px;            /* Dot-Durchmesser                  */
      transform:translate(-50%,-50%);
      background:#fff;
      border-radius:50%;
      pointer-events:none;
  }


  /* ░░ zentrale Variablen ░░ */
:root{
    /* Größe skaliert zwischen 22 – 32 px, passt sich Viewport an */
    --ros-sel-size  : clamp(22px, 4.5vw, 32px);
    --ros-sel-radius: 6px;                        /* sanft abgerundet */
}

/* ── Grund-Kästchen ───────────────────────────────────────── */
#ros-step-4 .ros-fake-radio{
    width:  var(--ros-sel-size);
    height: var(--ros-sel-size);
    border: 3px solid #007cba;
    border-radius: var(--ros-sel-radius);        /* immer eckig ⤴︎ */
}

/* Radio-Buttons NICHT mehr rund machen */
#ros-step-4 input[type="radio"] + .ros-fake-radio{
    border-radius: var(--ros-sel-radius);
}

/* ── Checked-State mit Puls & Dot ──────────────────────────── */
@keyframes rosPulseSel{
  0%,100%{box-shadow:0 0 0 0 rgba(0,124,186,.35)}
  50%    {box-shadow:0 0 0 8px rgba(0,124,186,0)}
}

#ros-step-4 input:checked + .ros-fake-radio{
    background:#007cba;
    animation:rosPulseSel 1.8s ease-out infinite;
}

#ros-step-4 input:checked + .ros-fake-radio::after{
    content:"";
    position:absolute;
    top:50%; left:50%;
    width:  calc(var(--ros-sel-size) * .45);     /* 45 % vom Kasten */
    height: calc(var(--ros-sel-size) * .45);
    transform:translate(-50%,-50%);
    background:#fff;
    border-radius:50%;                           /* immer ein Kreis */
    pointer-events:none;
}

/* ────────────────────────────────────────────────────────────
 *  Reparatur-Zusammenfassung (Step 4)
 * ──────────────────────────────────────────────────────────── */
 .ros-summary-box{max-width:420px;margin:0 auto 32px;padding:26px 28px;background:#fff;border:1px solid #e5e5e5;border-radius:18px;box-shadow:0 10px 35px rgba(0,0,0,.06);font-family:inherit}
 .ros-summary-box h3{font-size:1.75rem;font-weight:700;color:#39a035;margin:0 0 18px}
 .ros-summary-device{font-size:1rem;font-weight:600;margin-bottom:18px;text-transform:uppercase;letter-spacing:.02em;color:#444}
 .ros-summary-list{list-style:none;margin:0;padding:0}
 .ros-summary-item{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin:12px 0 0}
 .ros-summary-name{font-size:1.05rem;line-height:1.35}
 .ros-summary-price{font-weight:700;font-size:1.1rem;background:#39a035;color:#fff;padding:6px 18px;border-radius:8px;min-width:80px;text-align:center}
 .ros-summary-discount{font-size:.75rem;font-weight:700;color:#39a035;padding:2px 8px;border:2px solid #39a035;border-radius:6px;display:inline-block;margin-left:6px}
 .ros-summary-math{display:flex;justify-content:space-between;font-weight:600;margin:16px 0 0}
 .ros-summary-total{font-size:2.2rem}
 
 /* ░░ Auswahl-Feedback ░░ */
 .repair-card.selected{
    background: var(--repair-card-selected-bg, var(--primary-color,#4A90E2));
    color: var(--repair-card-selected-text,#fff);
    border-color: var(--repair-card-selected-bg, var(--primary-color,#4A90E2));
} 


/* Alle Textelemente der ausgewählten Reparatur-Kachel einfärben */
.repair-card.selected               ,
.repair-card.selected .repair-inner ,
.repair-card.selected .repair-title ,
.repair-card.selected .repair-duration,
.repair-card.selected .repair-desc  ,
.repair-card.selected .repair-text  ,
.repair-card.selected .repair-icon  {
    color: var(--repair-card-selected-text,#fff) !important;
}


 /* ─ Floating „Nächster Schritt“-Button ─ */
 #ros-next-floating{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);z-index:9980;background:linear-gradient(180deg,#64c33c 0%,#3fa72d 100%);color:#fff;border:none;border-radius:14px;padding:14px 40px;font-size:1.32rem;font-weight:700;box-shadow:0 8px 20px rgba(0,0,0,.18);cursor:pointer;transition:.15s}
 #ros-next-floating small{display:block;font-size:.85rem;font-weight:400;margin-top:4px}
 #ros-next-floating:active{transform:translate(-50%,2px)}

 /* ─ Floating Summary (Step 4) ─ */
 #ros-step-4 .ros-summary-box{
    position:sticky;      /* läuft mit dem Formular hoch/runter   */
    float:right;          /* klebt rechts am Formular             */
    top:110px;
    margin-left:40px;     /* etwas Abstand                        */
    width:385px;          /* 50 % der alten 420 px                */
    z-index:9999;
    font-size:.88rem;     /* alles ca. 12 % kleiner               */
}


.ros-summary-box h3{font-size:1.5rem;}
.ros-summary-price{font-size:1rem;}
.ros-summary-total{font-size:1.9rem;}

/* Farbe-Anzeige in der Summary */
.ros-summary-color{
    font-size:.9rem;
    color:#666;
    margin:8px 0 12px;
    display:flex;
    align-items:center;
    gap:6px;
}
.ros-summary-swatch{
    width:18px;height:18px;
    border:1px solid #ccc;
    border-radius:4px;
    display:inline-block;
}

/* ===== Summary-Bereich außen rechts fixieren ===== */
@media (min-width: 1025px){            /* nur Desktop */
    #ros-repairs-summary{                /* ID der Box  */
        position: fixed !important;      /* statt sticky */
        right:   61px !important;        /* Abstand Fensterkante */
        top:    333px !important;        /* Höhe nach Wunsch     */
  
        /* alte Vorgaben neutralisieren */
        left:  auto !important;
        margin: 0   !important;
        float: none !important;
        width: 300px;                    /* oder was dir passt  */
        z-index: 9999;
    }
  }






/* ─── Mobile/Tablet: skalierte Floating-Zusammenfassung ─── */
@media (max-width: 1024px) {
    #ros-repairs-summary {
      position: fixed !important;
      bottom: 0 !important;
      left: 0 !important;
      width: 100vw !important;
      max-width: 100% !important;
      margin: 0 !important;
      padding: 12px 16px !important;
      box-sizing: border-box;
      transform-origin: bottom center !important;
      transform: scale(0.6) translateY(0) !important;
      transition: transform 0.3s ease-out !important;
      z-index: 9999 !important;
      /* kein display:none mehr! */
    }
  }


  @media (max-width: 1024px) {
    #ros-repairs-summary.floating-center {
      /* Animiert nach oben, zentriert, etwas kleiner */
      left: 0% !important;
      right: auto !important;
      bottom: 50vh !important;
      top: auto !important;
      transform: translate(-50%, 50%) scale(0.92);
      transition: all 0.45s cubic-bezier(.75,0,.25,1);
      z-index: 9999;
    }
    #ros-repairs-summary {
      transition: all 0.45s cubic-bezier(.75,0,.25,1);
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      top: auto !important;
      transform: none;
      z-index: 9999;
    }
  }


  /* ───────── Mobile/Tablets ≤1024px: Floating-Summary und Blur Overlay ───────── */
@media (max-width: 1024px) {
    /* Overlay, zunächst unsichtbar */
    #ros-blur-overlay {
      display: none;
      position: fixed;
      inset: 0;
      backdrop-filter: blur(8px);
      background: rgba(255,255,255,0.15);
      pointer-events: none;      /* Maus-Events passieren durch */
      z-index: 9997;             /* unter Summary (9999) und Buttons (10000) */
      transition: opacity 0.4s ease-out;
      opacity: 0;
    }
    /* Overlay sichtbar */
    #ros-blur-overlay.active {
      display: block;
      opacity: 1;
    }
  
    /* Summary-Box */
    #ros-repairs-summary {
      transition: transform 0.5s ease-out, opacity 0.4s ease-out;
      transform-origin: bottom center;
    }
    /* Wenn die Summary nach oben fährt */
    #ros-repairs-summary.floating-center {
      transform: translate(-50%, -40vh) scale(0.92);
      opacity: 1;
      z-index: 9999;               /* über dem Overlay */
    }
  
    /* Sicherstellen, dass die Sendebuttons immer oben bleiben */
    #ros-step-4 .ros-wizard-nav {
      position: relative;
      z-index: 10000;
    }
  }

  /* ===== Frosted-Glass für die Floating-Summary ===== */
@media (max-width: 1024px) {
    #ros-repairs-summary {
      /* Transparenter Weißton, damit der Inhalt dahinter durchscheint */
      background: rgba(255, 255, 255, 0.75) !important;
      /* Unscharf-Effekt */
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
      /* sanfte Kontur und Schatten beibehalten */
      border: 1px solid rgba(255, 255, 255, 0.4) !important;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    }
  
    /* Optionale Anpassung, wenn die Box in „floating-center“ ist */
    #ros-repairs-summary.floating-center {
      background: rgba(255, 255, 255, 0.85) !important;
      backdrop-filter: blur(12px) !important;
      -webkit-backdrop-filter: blur(12px) !important;
    }
  }

  /* Kleinere Schrift nur für „Gesamt inkl. Gebühr“ ---------------- */
#ros-repairs-summary .ros-summary-grandtotal span {
    font-size: 1.45rem;   /* etwas kleiner als das Haupt-Gesamt */
    font-weight: 700;
}
/* --------------------------------------------------------------- */


/* Pastellrotes „X“ vor jeder Reparatur in der Zusammenfassung */
.ros-summary-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
}
.ros-remove-repair{
    display:inline-block;
    width:18px;
    height:18px;
    line-height:18px;
    text-align:center;
    font-size:13px;
    font-weight:700;
    color:#d34f4f;
    background:rgba(211,79,79,0.15);   /* pastelliges Rot */
    border-radius:50%;
    cursor:pointer;
    flex-shrink:0;
    transition:background .2s;
}
.ros-remove-repair:hover{
    background:rgba(211,79,79,0.3);
}
/* ───── Symmetrische Ausrichtung der Reparatur-Liste ───── */
#ros-repairs-summary .ros-summary-item{
    justify-content:flex-start;   /* statt space‑between */
}
#ros-repairs-summary .ros-summary-name{
    flex:1;                       /* füllt den Zwischenraum */
}
#ros-repairs-summary .ros-summary-price{
    margin-left:auto;             /* Preis immer ganz rechts */
}
/* ───────────────────────────────────────────────────────── */


@media (min-width: 1025px) {
    #ros-repairs-summary {
      position: fixed !important;
      right: 61px !important;
      top: 110px !important; /* PASST DEN WERT AN, je nach Header */
      width: 340px !important; /* Deine Wunschbreite */
      max-height: 80vh !important; /* Maximale Höhe, dann Scrollbar */
      overflow-y: auto !important;
      overscroll-behavior: contain !important;
      z-index: 9999 !important;
    }
  }

/* Mini‑Icons in der Reparaturliste */
.ros-summary-icon{
    width:24px;
    height:24px;
    object-fit:contain;
    margin-right:6px;
    vertical-align:middle;
    border:1px solid #ccc;
    border-radius:4px;
}


.repair-card.selected .repair-inner{
    border-color: var(--repair-card-selected-border, var(--repair-card-selected-bg, var(--primary-color,#4A90E2)));
    box-shadow: 0 0 0 3px rgba(74,144,226,.25);
}

/* Selected / aktive Reparatur-Kachel */
.repair-card.selected,
.repair-card.active{
    border-color: var(--repair-card-selected-border, var(--primary-color,#4A90E2)) !important;
}

/* ═══════════════════════════════════════════════════════════════
   COLOR PICKER – Card UI (matches Apple-like chips)
   ─ Applies to the popup "Wählen Sie eine Farbe"
   ═══════════════════════════════════════════════════════════════ */
:root{
  --ros-color-chip-border: #e7eaef;          /* idle border */
  --ros-color-chip-hover:  #cfd6e1;          /* hover border */
  --ros-color-chip-bg:     #ffffff;          /* chip background */
  --ros-color-chip-bg-h:   #fbfbfc;          /* hover background */
  --ros-color-selected:    #61b636;          /* selected (green) */
  --ros-color-selected-h:  #4aa12a;          /* selected hover (darker) */
}

#ros-color-popup .ros-modal-box h3{
  text-align:center;
  margin-bottom: 16px;
}

/* Grid layout for the chips */
#ros-color-grid.ros-color-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:14px 18px;
  margin:20px 0 6px;
}

/* Turn each item into a pill/card */
#ros-color-grid .ros-color-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  background:var(--ros-color-chip-bg);
  border:2px solid var(--ros-color-chip-border);
  border-radius:14px;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
  cursor:pointer;
  user-select:none;
  transition:
    border-color .15s ease,
    background   .15s ease,
    box-shadow   .15s ease,
    transform    .12s ease;
}

#ros-color-grid .ros-color-item:hover{
  background:var(--ros-color-chip-bg-h);
  border-color:var(--ros-color-chip-hover);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  transform:translateY(-1px);
}

/* Color square */
#ros-color-grid .ros-color-swatch{
  width:40px;
  height:40px;
  border-radius:9px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
  flex:0 0 40px;
}

/* Name */
#ros-color-grid .ros-color-name{
  font-weight:600;
  letter-spacing:.02em;
  color:#555;
  text-transform:uppercase;
}

/* Disabled state (if used) */
#ros-color-grid .ros-color-item.disabled{
  opacity:.45;
  pointer-events:none;
}

/* Selected state – green border like in the screenshot */
#ros-color-grid .ros-color-item.selected{
  border-color:var(--ros-color-selected);
  box-shadow:0 0 0 2px rgba(97,182,54,.18) inset;
  background:#fff;
}
#ros-color-grid .ros-color-item.selected:hover{
  border-color:var(--ros-color-selected-h);
}

/* Keyboard focus */
#ros-color-grid .ros-color-item:focus-visible{
  outline:3px solid rgba(0,0,0,.2);
  outline-offset:2px;
}

/* ═══════════════════════════════════════════════════════════════
   COLOR PICKER – Responsive tweaks (Tablets & Phones)
   ═══════════════════════════════════════════════════════════════ */

/* Größe/Abstände skalieren mit der Viewport-Breite */
#ros-color-grid .ros-color-swatch{
  width:  clamp(32px, 6.5vw, 40px);
  height: clamp(32px, 6.5vw, 40px);
  border-radius: clamp(8px, 2vw, 9px);
}
#ros-color-grid .ros-color-item{
  gap:        clamp(10px, 2.6vw, 14px);
  padding:    clamp(10px, 2.4vw, 12px) clamp(12px, 2.8vw, 14px);
  min-height: clamp(48px, 9.5vw, 56px);      /* gute Touch-Ziele */
  touch-action: manipulation;                 /* schneller Tap */
}
/* Body-Scroll sperren, solange ein Modal offen ist */
body.ros-modal-open{
    overflow: hidden !important;
    overscroll-behavior: contain;
}
#ros-color-grid .ros-color-name{
  font-size: clamp(12px, 2.8vw, 14px);
}

/* Grid-Spalten anpassen */
@media (max-width: 1019px){
  #ros-color-grid.ros-color-grid{
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}
@media (max-width: 680px){
  #ros-color-grid.ros-color-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
  }
  #ros-color-popup .ros-modal-box{
    width: min(560px, 94vw);
    padding: 22px;
  }
}
@media (max-width: 420px){
  #ros-color-grid.ros-color-grid{
    grid-template-columns: 1fr;    /* sehr kleine Phones: 1 Spalte */
    gap: 10px 12px;
  }
  #ros-color-popup .ros-modal-box{
    width: 94vw;
    padding: 18px 16px 22px;
  }
}

/* Touch-Feedback, wenn kein Hover vorhanden ist */
@media (hover:none){
  #ros-color-grid .ros-color-item:active{
    transform: scale(.98);
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
  }
}


/* ═══════════════════════════════════════════════════════════════
   STEP 1 – Floating Steps Banner
   ═══════════════════════════════════════════════════════════════ */
.ros-steps-banner{
  position:fixed;
  left:50%;
  bottom:20px;
  transform:translateX(-50%) translateY(12px);
  width:min(1100px,92vw);
  background:rgba(255,255,255,.65);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
          backdrop-filter: blur(14px) saturate(115%);
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  opacity:0;
  pointer-events:none;
  z-index:7000;
  transition:opacity .22s ease, transform .22s ease;
}
.ros-steps-banner.visible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}
.ros-steps-inner{ padding:14px 18px; }
.ros-steps-title{
  font-weight:700; letter-spacing:.01em; margin:0 0 8px; color:#2b2b2b;
}
.ros-steps-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center;
}
.ros-step-item{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; background:rgba(255,255,255,.6);
  border:1px solid rgba(0,0,0,.06); border-radius:10px;
}
.ros-step-item .dashicons{ font-size:20px; width:20px; height:20px; line-height:20px; }
.ros-step-icon-img{ width:20px; height:20px; object-fit:contain; }
.ros-step-copy{ font-weight:600; font-size:.95rem; color:#333; }
@media (max-width:680px){
  .ros-steps-inner{ padding:12px 14px; }
  .ros-steps-list{ flex-direction:column; align-items:flex-start; gap:8px; }
  .ros-step-copy{ font-size:.92rem; }
}

/* ═══════════════════════════════════════════════════════════════
   STEP 1 – Floating Steps Banner · Progress look with connectors
   ═══════════════════════════════════════════════════════════════ */
.ros-steps-banner .ros-steps-progress{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  position:relative;
  padding:6px 8px 12px;
}
.ros-steps-banner .ros-steps-progress::before{
  content:"";
  position:absolute;
  top:40px;
  left:6%;
  right:6%;
  height:4px;
  background:rgba(0,0,0,.10);
  border-radius:4px;
}
.ros-step-node{
  flex:1 1 0;
  text-align:center;
  position:relative;
  z-index:1; /* über der Linie */
}
.ros-step-circle{
  width:68px; height:68px;
  margin:0 auto;
  border-radius:50%;
  border:4px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.9);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  color:#333;
  font-weight:700; font-size:1.25rem;
}
.ros-step-node.active .ros-step-circle{
  background:var(--primary-color,#4e6fe7);
  border-color:rgba(17,88,255,.22);
  color:#fff;
}
.ros-step-label{
  margin-top:10px;
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-weight:600; color:#2f2f2f;
}
.ros-step-label .dashicons{ font-size:18px; width:18px; height:18px; }
.ros-step-label img{ width:18px; height:18px; object-fit:contain; }

@media (max-width:680px){
  .ros-steps-banner .ros-steps-progress::before{ top:34px; }
  .ros-step-circle{ width:56px; height:56px; font-size:1.05rem; }
}

/* ==== Step-Banner compact sizing + icon-in-circle overrides ==== */
.ros-steps-banner .ros-steps-progress{ padding:4px 6px 10px; }
.ros-steps-banner .ros-steps-progress::before{ top:28px; height:3px; }

/* ~35% kleiner */
.ros-step-circle{ width:44px; height:44px; border-width:3px; }

/* Active optisch neutralisieren (kein Blau für Step 1) */
.ros-step-node.active .ros-step-circle{
  background:rgba(255,255,255,.9);
  border-color:rgba(0,0,0,.12);
  color:#333;
}

/* Icon-Größen im Kreis */
.ros-step-circle .dashicons{ font-size:22px; width:22px; height:22px; line-height:1; }
.ros-step-circle img{ width:22px; height:22px; object-fit:contain; }

/* Label etwas kleiner */
.ros-step-label{ margin-top:8px; font-size:.95rem; }

@media (max-width:680px){
  .ros-steps-banner .ros-steps-progress::before{ top:24px; }
  .ros-step-circle{ width:38px; height:38px; }
  .ros-step-label{ font-size:.9rem; }
}

/* ===== Step-Banner: schmalere Step-Felder + kleinere Schrift ===== */
.ros-steps-banner .ros-steps-progress{ 
  gap: 0 22px;                 /* zusätzlicher Abstand zwischen Steps */
}

/* etwas Innenabstand pro Step, damit Labels nicht aneinanderstoßen */
.ros-step-node{ 
  padding-inline: 8px; 
}

/* Label schmaler + Schrift kleiner */
.ros-step-label{
  max-width: 18ch;             /* begrenzt die Breite unter jedem Kreis */
  margin-left: auto;
  margin-right: auto;
  font-size: .86rem;           /* kleiner als zuvor */
  line-height: 1.25;
  text-align: center;
  word-wrap: break-word;
}

/* große Desktops: minimal breiter */
@media (min-width: 1200px){
  .ros-step-label{ max-width: 20ch; }
}

/* Tablets */
@media (max-width: 1019px){
  .ros-step-label{ max-width: 16ch; font-size: .84rem; }
}

/* Phones */
@media (max-width: 680px){
  .ros-step-label{ max-width: 15ch; font-size: .80rem; }
}

/* === Stronger glass/blur + more transparency for Steps Banner === */
#ros-steps-banner, .ros-steps-banner{
  background: rgba(255, 255, 255, 0.425) !important;            /* more see-through */
  -webkit-backdrop-filter: blur(8px) saturate(125%);
  backdrop-filter: blur(15px) saturate(125%);               /* stronger blur */
  border: 1px solid rgba(255,255,255,.55);                  /* subtle glass border */
  box-shadow: 0 12px 26px rgba(0,0,0,.14);                  /* slightly deeper shadow */
}

/* circles also a bit more translucent so background shines through */
#ros-steps-banner .ros-step-circle,
.ros-steps-banner .ros-step-circle{
  background: rgba(255,255,255,.82) !important;
}
/* ░░ Reparaturbilder in Step 3 leicht ausgrauen ░░ */
#ros-step-3 .ros-repair-grid .repair-card img {
  /* dezenter „Grauschleier“ */
  filter: grayscale(25%) brightness(0.96) contrast(0.95) saturate(0.85);
  opacity: 0.72;                         /* optional leichter Schleier */
  transition: filter .2s ease, opacity .2s ease;
}

/* Hover / ausgewählt: wieder volle Farbe */
#ros-step-3 .ros-repair-grid .repair-card:hover img,
#ros-step-3 .ros-repair-grid .repair-card.selected img {
  filter: none;
  opacity: 1;
}

/* ────────────────────────────────────────────────────────────────
   Responsive floating Steps‑Banner (ros‑steps‑banner)
   ----------------------------------------------------------------
   Ensures the banner adapts to any viewport width – on mobiles it
   shrinks and wraps automatically instead of being cut off.
   ---------------------------------------------------------------- */
#ros-steps-banner{
    position:fixed;                     /* floating overlay */
    left:50%;
    bottom:10px;
    transform:translateX(-50%);
    z-index:9999;
    background:#fff;
    border-radius:14px;
    box-shadow:0 4px 20px rgba(0,0,0,.18);
    padding:18px 24px;
    max-width:calc(100vw - 32px);       /* always stay inside viewport */
    width:max-content;
    box-sizing:border-box;
    display:none;                       /* toggled by JS (.visible)   */
    overflow:hidden;
}
#ros-steps-banner.visible{display:block;}

#ros-steps-banner .ros-steps-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
}

#ros-steps-banner .ros-steps-title{
    font-size:clamp(1rem,4vw,1.25rem);
    font-weight:600;
    text-align:center;
    line-height:1.25;
}

#ros-steps-banner .ros-steps-progress{
    display:flex;
    align-items:center;
    gap:28px;
    flex-wrap:wrap;                     /* allow wrapping on small screens */
    justify-content:center;
}

#ros-steps-banner .ros-step-node{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    min-width:68px;                     /* keeps label readable        */
}

#ros-steps-banner .ros-step-circle{
    width:48px;
    height:48px;
    border:2px solid var(--primary-color,#4A90E2);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}

#ros-steps-banner .ros-step-icon,
#ros-steps-banner .ros-step-circle .dashicons{
    width:22px;
    height:22px;
    font-size:22px;
    object-fit:contain;
}

#ros-steps-banner .ros-step-label{
    font-size:0.8rem;
    text-align:center;
    line-height:1.2;
}

/* ---------------- Smartphones ≤480 px --------------------------- */
@media (max-width:480px){
    #ros-steps-banner{padding:12px 16px;}
    #ros-steps-banner .ros-steps-title{font-size:clamp(0.9rem,4vw,1.1rem);}
    #ros-steps-banner .ros-step-circle{width:38px;height:38px;}
    #ros-steps-banner .ros-step-icon,
    #ros-steps-banner .ros-step-circle .dashicons{
        width:18px;height:18px;font-size:18px;
    }
    #ros-steps-banner .ros-step-label{font-size:0.70rem;}
    #ros-steps-banner .ros-steps-progress{gap:18px;}
}

/* ---------------- Tablets 481‑768 px ---------------------------- */
@media (min-width:481px) and (max-width:768px){
    #ros-steps-banner .ros-steps-progress{gap:24px;}
}

/* Kreise immer bündig ausrichten – egal wie viele Textzeilen darunter stehen */
#ros-steps-banner .ros-steps-progress{
    align-items:flex-start;   /* statt center */
}
/* ---------------- Smartphones & Tablets ≤768 px  (–40 % scale) ---- */
@media (max-width:768px){
    #ros-steps-banner      { padding:10px 12px; }
    #ros-steps-banner .ros-steps-title{
        font-size:clamp(0.8rem,3.5vw,1rem);   /* kleiner          */
    }
    #ros-steps-banner .ros-steps-progress{ gap:14px; }

    /* 30 px Kreis = 60 % von 48 px  → ≈ 40 % kleiner            */
    #ros-steps-banner .ros-step-circle{
        width:30px;
        height:30px;
    }

    /* 14 px Icon = 60 % von 22 px  → ≈ 40 % kleiner              */
    #ros-steps-banner .ros-step-icon,
    #ros-steps-banner .ros-step-circle .dashicons{
        width:14px;
        height:14px;
        font-size:14px;
    }

    /* Label & Abstand ebenfalls verkleinern                      */
    #ros-steps-banner .ros-step-label{ font-size:0.6rem; }
}


/* ---------------- Smartphones & Tablets ≤768 px – Color‑Popup 30 % kleiner ---- */
@media (max-width:768px){
    #ros-color-popup{
        /* bisher: transform:translate(-50%,-50%);
           → neue Skalierung um 70 % (= 30 % kleiner) */
        transform:translate(-50%, -50%) scale(0.7);
    }
}

/* =====================================================================
   RESPONSIVE REPARATUR-KARTEN
   =====================================================================*/
/* ---------- Phones ≤ 480 px – 1 Karte pro Zeile ---------------------- */
@media (max-width:480px){
  #ros-step-3 .ros-repair-grid{
      display:grid !important;
      grid-template-columns:1fr !important;    /* eine Spalte            */
      gap:18px !important;                     /* gleichmäßiger Abstand  */
  }
  #ros-step-3 .ros-repair-grid .repair-card{
      width:100% !important;                   /* volle Breite           */
      max-width:100% !important;
      padding:14px 16px !important;            /* etwas mehr Luft        */
      zoom:1 !important;                       /* frühere Skalierungen neutralisieren */
      transform:none !important;
  }
  /* Inhalt NICHT mehr skalieren                                         */
  #ros-step-3 .ros-repair-grid .repair-card > *{
      zoom:1 !important;
      transform:none !important;
  }
}

/* ---------- Tablets 481-768 px – 2 Karten pro Zeile ------------------ */
@media (min-width:481px) and (max-width:768px){
  #ros-step-3 .ros-repair-grid{
      display:grid !important;
      grid-template-columns:repeat(2,minmax(0,1fr)) !important;
      gap:18px 16px !important;
  }
  #ros-step-3 .ros-repair-grid .repair-card{
      width:100% !important;
      max-width:100% !important;
      padding:14px 16px !important;
      zoom:1 !important;
      transform:none !important;
  }
  #ros-step-3 .ros-repair-grid .repair-card > *{
      zoom:1 !important;
      transform:none !important;
  }
}
/* =====================================================================
   Reparatur‑Karte – Flex‑Layout (Icon links, Text rechts) 
   → Titel wird nicht mehr senkrecht umgebrochen
   =====================================================================*/
#ros-step-3 .ros-repair-grid .repair-card{
    position:relative;                     /* für Banner & WA-Button */
    display:flex !important;               /* statt Grid → Flexbox   */
    align-items:flex-start;
    gap:18px;                              /* Abstand Icon ↔ Text    */
    padding:16px 18px !important;          /* etwas mehr Luft        */
}

#ros-step-3 .ros-repair-grid .repair-card img{
    flex:0 0 48px;                         /* feste Icon-Breite       */
    width:48px;height:48px;
    object-fit:contain;margin:0;
}

/* Preis-Banner absolut oben rechts, stört Layout nicht mehr */
#ros-step-3 .ros-repair-grid .repair-card .repair-price-banner{
    position:absolute;top:0;right:0;
    transform:none !important;             /* evtl. alte Scales raus  */
}

/* WhatsApp-Button unten rechts */
#ros-step-3 .ros-repair-grid .repair-card .wa-btn,
#ros-step-3 .ros-repair-grid .repair-card .whatsapp-btn{
    position:absolute;bottom:12px;right:12px;
}

/* Texte linksbündig & volle Breite */
#ros-step-3 .ros-repair-grid .repair-name,
#ros-step-3 .ros-repair-grid .repair-duration,
#ros-step-3 .ros-repair-grid .repair-desc{
    text-align:left;
    width:100%;
    margin:0;
}

/* Reparatur-Karte – Flex-Layout */
#ros-step-3 .ros-repair-grid .repair-card{
    /* … andere Eigenschaften … */

    gap:9px;              /* Abstand Icon ↔ Texte  (vorher 18px) */
    padding:16px 11px !important;   /* links/rechts 24 px statt 18 px */
}

/* =====================================================================
   Reparatur-Body: volle Breite – Titel stößt an Preis-Badge
   =====================================================================*/
#ros-step-3 .ros-repair-grid .repair-card .repair-body{
    /* Body wird zweites Flex-Kind nach dem Icon und darf aufziehen    */
    flex: 1 1 auto;                /* wächst, schrumpft, Basis = auto   */
    display: flex;                 /* ersetzt evtl. altes Grid           */
    flex-direction: column;
    min-width: 0;                  /* verhindert erzwungene Mindestbreite*/
}

#ros-step-3 .ros-repair-grid .repair-card .repair-title{
    margin-right: 30px;           /* Platz für „PREIS …“- bzw. „auf Anfrage“-Badge */
    white-space: normal;           /* Zeilenumbruch erlauben             */
    word-break: break-word;        /* lange Wörter umbrechen             */
}

/* ════════════════════════════════════════════════════════════════
   Responsive columns for Step‑3 Repair‑Cards
   One card per row  ≤ 609 px, two cards per row 610‑1023 px,
   existing desktop layout (≥ 1024 px) remains untouched
   ════════════════════════════════════════════════════════════════ */

/* 1 × 1 layout up to 609 px */
@media (max-width: 609px) {
  #ros-step-3 .ros-repair-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;   /* exactly one column */
    gap: 16px;                               /* same gap as desktop */
  }
  #ros-step-3 .ros-repair-grid .repair-card {
    width: auto !important;                  /* cancel older fixed widths */
  }
}

/* 2 × 1 layout from 610 px to 1023 px */
@media (min-width: 610px) and (max-width: 1023px) {
  #ros-step-3 .ros-repair-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;  /* two equal columns */
    gap: 20px 24px;                       /* horizontal & vertical spacing */
  }
  #ros-step-3 .ros-repair-grid .repair-card {
    width: auto !important;
  }
}

/* No rules here for ≥ 1024 px – existing desktop CSS continues to apply */

/* WhatsApp-Button in den Repair-Cards wieder auf Normalgröße bringen */
#ros-step-3 .ros-repair-grid .repair-card .ros-whatsapp-btn{
  width:24px;              /* Originalgröße */
  height:24px;
  transform:none !important;   /* geerbtes Scale/Zoom neutralisieren */
}

/* WhatsApp-Icon auf echte 26 × 26 px begrenzen */
.repair-card .ros-whatsapp-btn img{
    width:100%   !important;   /* exakt so breit wie der Button */
    height:100%  !important;   /* exakt so hoch  wie der Button */
    transform:none !important; /* Zoom-Effekt ausschalten       */
    object-fit:contain;        /* Bild wird nicht verzerrt      */
}


/* Icon sauber einpassen – egal ob <img> oder <svg> */
#ros-step-3 .ros-repair-grid .repair-card .ros-whatsapp-btn img,
#ros-step-3 .ros-repair-grid .repair-card .ros-whatsapp-btn svg{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* ═══ Auto-positioning for Steps-Banner (Step 1) ═══ */
#ros-steps-banner{
  position:fixed;
  left:50%;
  transform:translate(-50%,0);
  bottom:0;
  z-index:9998;
  width:max-content;      /* hält den Banner kompakt */
  max-width:100%;
  transition:top .35s ease, bottom .35s ease, transform .35s ease;
}
#ros-steps-banner.at-top{
  top:0;
  bottom:auto;
}
#ros-steps-banner.at-bottom{
  bottom:0;
  top:auto;
}

/* Center the floating steps banner */
#ros-steps-banner{
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    z-index:9999;         /* stay on top */
    transition:transform .22s cubic-bezier(.4,0,.2,1); /* smooth glide */
}



@media (max-width: 519px){
  #ros-next-floating{
    width: 90%;          /* schmäler als Standard */
    max-width: 260px;    /* absolute Obergrenze */
    font-size: 1rem;     /* Text etwas kompakter */
    padding: 12px 14px;  /* gleichmäßiger Innenabstand */
  }
  #ros-next-floating small{
    font-size: 0.8rem;   /* Unterzeile proportional verkleinern */
  }
}






/* #ros-next-floating – universelles Pulsieren (max. Kompatibilität) */
:root{
  /* Farbe anpassen: einfach RGBA ändern */
  --ros-btn-glow: rgba(74, 144, 226, 0.55);     /* kräftiger Glow */
  --ros-btn-glow-soft: rgba(74, 144, 226, 0.18);/* weiche Aura   */
}

#ros-next-floating{
  /* keine Positions-/Layout-Eigenschaften -> Button bleibt wo er ist */
  animation: rosPulseCompat 2.4s ease-in-out infinite;
  will-change: box-shadow; /* optional: smooth auf schwächeren Geräten */
}

@keyframes rosPulseCompat{
  0%,100%{
    box-shadow:
      0 0 0 0 var(--ros-btn-glow-soft),
      0 0 10px var(--ros-btn-glow);
  }
  50%{
    box-shadow:
      0 0 0 8px var(--ros-btn-glow-soft),
      0 0 22px var(--ros-btn-glow);
  }
}

/* Bewegungswunsch der Nutzer respektieren (unterstützte Browser) */
@media (prefers-reduced-motion: reduce){
  #ros-next-floating{ animation-duration: 6s; }
}

#ros-step-3 .repair-card[hidden] { display:none !important; }



.ros-clear-btn{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    padding:2px 8px;               /* etwas Innenabstand */
    background:#e8e8e8;            /* pastell-grau */
    border:1px solid #d0d0d0;
    border-radius:6px;             /* leicht abgerundet */
    font-size:12px;
    line-height:1.2;
    color:#555;
    cursor:pointer;
    display:none;                  /* JS/CSS blendet ein-/aus */
    z-index:2;
    white-space:nowrap;
}
.ros-clear-btn:hover{
    background:#dcdcdc;
    color:#333;
}.ros-clear-btn{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    padding:2px 8px;               /* etwas Innenabstand */
    background:#e8e8e8;            /* pastell-grau */
    border:1px solid #d0d0d0;
    border-radius:6px;             /* leicht abgerundet */
    font-size:12px;
    line-height:1.2;
    color:#555;
    cursor:pointer;
    display:none;                  /* JS/CSS blendet ein-/aus */
    z-index:2;
    white-space:nowrap;
}
.ros-clear-btn:hover{
    background:#dcdcdc;
    color:#333;
}
#ros_repair_search{ padding-right:80px; }  /* Platz für den Text-Button */
/* === FINAL override: Repair search clear button inside field === */
.ros-repair-search{
    position:relative !important;          /* Anker für den Button */
}
.ros-repair-search .ros-clear-btn{
    position:absolute !important;
    top:50%;
    right:14px;                            /* sitzt nun im Feld */
    transform:translateY(-50%);
    padding:2px 8px;
    background:#e8e8e8;                    /* pastell-grau */
    border:1px solid #d0d0d0;
    border-radius:3px;
    font-size:12px;
    line-height:1.2;
    color:#555;
    cursor:pointer;
    white-space:nowrap;
}
.ros-repair-search .ros-clear-btn:hover{
    background:#dcdcdc;
    color:#333;
}
/* Input bekommt rechts ausreichend Platz für den Button */
#ros_repair_search{
    padding-right:84px !important;         /* Text läuft nicht unter den Button */
}


/* Body-Scroll sperren, solange ein Modal offen ist */
body.ros-modal-open{
    overflow: hidden !important;
    overscroll-behavior: contain;
}










/* ──────────────────────────────────────────────────────────────
   Smartphone / Tablet (≤ 1024 px):  2 mm seitlicher Freiraum
   ────────────────────────────────────────────────────────────── */
@media (max-width:1024px){

  /* 2 mm definieren (≈ 8 px @ 96 dpi)                             */
  :root{ --ros-side-gap:2mm; }

  /* 1) Gesamte Wizard-Leiste & Banner */
  .ros-stepper,
  #ros-steps-banner           {padding-left:var(--ros-side-gap);padding-right:var(--ros-side-gap);}

  /* 2) Alle vier Step-Sections */
  #ros-step-1,
  #ros-step-2,
  #ros-step-3,
  #ros-step-4                 {padding-left:var(--ros-side-gap)!important;padding-right:var(--ros-side-gap)!important;}

  /* 3) Vorschauboxen, Reparatur-/Modell-Grids & Navigations-Buttons */
  .ros-preview-card,
  .ros-brand-grid,
  .ros-popular-models,
  .ros-repair-grid,
  .ros-imported-models,
  .ros-popular-nav,
  .ros-repair-nav,
  .ros-imported-nav,
  .ros-wizard-nav             {padding-left:var(--ros-side-gap);padding-right:var(--ros-side-gap);}

  /* 4) Floating-Summary (mobiles Overlay unten) */
  #ros-repairs-summary.is-mobile{
    left:var(--ros-side-gap)!important;
    width:calc(100% - (var(--ros-side-gap)*2))!important;
  }
}










/* Fix summary box on mobile/tablet */
@media (max-width: 1024px) {
  #ros-repairs-summary {
    position: fixed !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 auto !important;
    transition: none !important;
  }
}

/* Mobile Summary-Fix: immer mittig und 80px über dem unteren Rand */
@media (max-width: 1024px) {
  #ros-repairs-summary {
    position: fixed !important;
    bottom: 80px !important;          /* Abstand über Buttons */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;           /* Behält natürliche Breite */
    max-width: 90% !important;        /* passt sich an */
    margin: 0 !important;
  }
}

/* Always dock summary fixed bottom-center on mobile/tablet */
@media (max-width: 1024px) {
  #ros-repairs-summary {
    position: fixed !important;
    bottom: 100px !important;   /* hier anpassen, bis es über den Buttons klebt */
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 1000 !important;
  }
}
/* Override animate-center / floating-center for summary box on mobile */
@media (max-width: 1024px) {
  #ros-repairs-summary.animate-center,
  #ros-repairs-summary.floating-center,
  .ros-summary-box.is-mobile.animate-center,
  .ros-summary-box.is-mobile.floating-center {
    transform: translateX(-50%) !important;
    left: 50% !important;
    top: auto !important;
    bottom: 100px !important; /* adjust if needed to sit above buttons */
  }
}
/* === Extra bottom space for Step 2 and Step 3 ===================== */
#ros-step-2,
#ros-step-3 {
    padding-bottom: 3cm !important;   /* 3 cm ≈ 113 px */
}










/*  █  Smartphone / Tablet  –  Reparatur-Summary   █ */
@media (max-width:1024px){
  #ros-repairs-summary.is-mobile{
    /* --- Position --- */
    position:fixed !important;
    bottom:0 !important;
    left:50% !important;                      /* in die Mitte */

    /* --- Breite berechnen ---
       100 %      = sichtbare Viewport-Breite
       - 16 px    = 8 px Rand links + rechts
       ÷ 0.6      = Vorvergrößerung, weil wir gleich auf 0.6 skalieren   */
    width:calc((100% - 16px)/0.6) !important;
    max-width:none !important;                /* frühere Grenzen killen */

    /* --- Skalierung + Zentrierung gleichzeitig --- */
    transform:translateX(-50%) scale(.6) !important;
    transform-origin:bottom center !important;

    /* --- Optik --- */
    padding:8px !important;
    border-radius:8px 8px 0 0 !important;
    box-shadow:0 -2px 16px rgba(0,0,0,.15) !important;
    box-sizing:border-box !important;
    z-index:2000 !important;
    overflow-y:auto !important;               /* scrollbarer Inhalt */
  }
}











/*  █  Reparatur-Preview deaktivieren  █ */
#ros-repair-preview{
  display:none !important;   /* bleibt im DOM, ist aber unsichtbar */
}





/*  █  Smartphone – fieldset.form-section niemals breiter als Parent  █ */
@media (max-width: 600px){
  #ros-step-4 fieldset.form-section{
    /* Inline-Width ist jetzt leer → diese Regeln greifen zuverlässig */
    width:auto !important;           /* Browser berechnet Breite neu   */
    max-width:100% !important;       /* harter Deckel                  */
    min-width:0 !important;          /* Untergrenze: darf schrumpfen   */

    box-sizing:border-box !important;
    margin:0 8px !important;         /* gleicher Rand links/rechts     */
    padding:16px !important;         /* Innen-Abstand wie üblich       */
  }
}

/*  █  Step-4 – Zahlungsarten   █ */
#ros-step-4 fieldset.form-section label.radio-group{
  /* ─ 1) Grid statt Flex, damit Spalten definiert sind ─ */
  display:grid !important;
  grid-template-columns: auto auto 1fr;   /* ☐ | Logo | Text       */
  align-items:center;
  column-gap:12px;                       /* Abstand zwischen Spalten */

  /* ─ 2) Textspalte darf schrumpfen und umbrochen werden ─ */
  min-width:0 !important;                /* verhindert Overflow     */
  word-break: break-word;                /* bricht lange Wörter     */
  white-space: normal !important;        /* kein nowrap mehr        */
}

/* Square & Logo bleiben fix – verhindern, dass sie ebenfalls schrumpfen */
#ros-step-4 fieldset.form-section label.radio-group .ros-fake-radio,
#ros-step-4 fieldset.form-section label.radio-group img{
  flex:0 0 auto;         /* falls einzelne Browser flex für grid ignorieren */
}






/*  █  Desktop (>1024 px) – Reparaturliste rechts bündig, Inhalt 20 % kleiner  █ */
@media (min-width:1025px){
  #ros-repairs-summary.is-desktop{
    --scale:.8;                 /* Inhalt 20 % kleiner */

    /* --- Breite --- */
    width:auto !important;      /* keine feste 100 % mehr           */
    max-width:700px !important; /* Deckel (technische Breite)       */

    /* --- Position --- */
    margin-left:auto !important;  /* flexibler linker Rand → schiebt nach rechts */
    margin-right:40px !important; /* fixer Abstand zum rechten Seitenrand        */

    /* --- Skalierung --- */
    transform:scale(var(--scale)) !important;
    transform-origin:top right !important;   /* schrumpft zum rechten Rand hin    */

    box-sizing:border-box !important;
  }
}






/*  █  Desktop (>1024 px) – Reparaturliste rechts bündig, Inhalt 20 % kleiner  █ */
@media (min-width:1025px){
  #ros-repairs-summary.is-desktop{
    --scale:.8;                 /* Inhalt 20 % kleiner */

    /* --- Breite --- */
    width:auto !important;      /* keine feste 100 % mehr           */
    max-width:700px !important; /* Deckel (technische Breite)       */

    /* --- Position --- */
    margin-left:auto !important;  /* flexibler linker Rand → schiebt nach rechts */
    margin-right:40px !important; /* fixer Abstand zum rechten Seitenrand        */

    /* --- Skalierung --- */
    transform:scale(var(--scale)) !important;
    transform-origin:top right !important;   /* schrumpft zum rechten Rand hin    */

    box-sizing:border-box !important;
  }
}




/* ──────────────────────────────────────────────────────────────
   Smartphone / Tablet (≤ 1024 px): 3 cm Freiraum am unteren Rand
   ────────────────────────────────────────────────────────────── */
@media (max-width:1024px){

  /* 3 cm ≈ 113 px (96 dpi) – als Variable, falls du später nachjustierst */
  :root{ --ros-bottom-gap:4cm; }

  /* Nur Step 3 bekommt das Extra-Padding */
  #ros-step-3{
      padding-bottom:var(--ros-bottom-gap)!important;
  }

  /* Falls du die Seitennavigation (Zurück / Weiter) noch
     etwas abheben willst, kannst du optional auch:        */
  /* .ros-repair-nav{ margin-bottom:var(--ros-bottom-gap); } */
}

@media (min-width:1025px){
  #ros-repairs-summary.is-desktop{
    border-left:1px solid #ddd;   /* dezente Trennung, optional */
    background:#fff;              /* gleicht Theme-Hintergründe aus */
  }
}


/* Desktop ≥1025 px – Reparaturliste soll den kompletten Spalt einnehmen */
@media (min-width:1025px){
  #ros-repairs-summary{
    width:auto !important;     /* 340 px/385 px aushebeln   */
    max-width:none !important; /* Deckel weg               */
    right:12px  !important;    /* identisch zum GAP im JS  */
    transform:none !important; /* Scale(.8) beseitigen     */
  }
}

/* Desktop ≥ 1025 px – Reparaturliste soll endlich bis fast an den Rand */
@media (min-width:1025px){
  #ros-repairs-summary.is-desktop{
    /* 1) Verkleinerung abschalten */
    --scale: 1 !important;          /* Variable neutralisieren          */
    transform: none !important;     /* scale(.8) überschreiben          */

    /* 2) Abstand zum Fensterrand festlegen (z. B. 12 px) */
    margin-right: 12px !important;  /* statt 40 px                       */

    /* 3) Keine künstliche Deckelung mehr */
    max-width: none !important;     /* 700 px entfernen                  */

    /* Breite darf der Browser selbst berechnen */
    width: auto !important;
  }
}

/* ░░ Mobile + Tablet  bis 1680 px ░░ */
@media (max-width:1680px){
  #ros-repairs-summary.is-mobile{
    /* bisherige mobile Styles (unten andocken, scale(.6) …) */
    position:fixed !important;
    bottom:0 !important;
    left:0 !important;
    width:100vw !important;
    transform:scale(.6) translateY(0) !important;
    /* … */
  }
}

/* Mobile / Tablet bis 1680 px – Box unten zentrieren */
@media (max-width:1680px){
  #ros-repairs-summary.is-mobile{
    left:50% !important;
    transform:translateX(-50%) scale(.6) !important; /* gleicher SCALE wie in JS */
    width:calc(100vw / .6) !important;               /* passt zur Skalierung     */
  }
}

/* ░░ Mobile + Tablet bis 1680 px ░░ */
@media (max-width: 1680px){

  /* Reparaturliste unten, zentriert, 2 mm Rand */
  #ros-repairs-summary.is-mobile{
    position: fixed !important;
    bottom  : 0 !important;

    /* ➊ horizontales Zentrieren */
    left    : 50% !important;
    transform-origin: bottom center !important;

    /* ➋ gewünschter Scale */
    transform: translateX(-50%) scale(.7) !important;

    /* ➌ Breite so groß, dass NACH dem scale(.7)
          exakt 2 mm pro Seite übrig bleiben      */
    width: calc( (100vw - 4mm) / .7 ) !important;

    /* Sicherheit: keine max-width-Deckelungen mehr */
    max-width : none !important;
    min-width : 0    !important;

    /* Box bleibt scrollbar, aber nicht höher als Viewport */
    max-height: 80vh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    z-index   : 2000 !important;
  }
}




/*  Tablet + Smartphone  ────────────────────────────────────────── */
/*  gilt von 1024 px bis maximal 1680 px  (darunter sowieso Mobile) */
@media (min-width:1024px) and (max-width:1680px) {

  /*  Nur die schwebende Zusammenfassung ansprechen  */
  #ros-repairs-summary.is-mobile {
    max-height : 50vh !important;   /* höchstens 60 % Fensterhöhe sichtbar  */
    overflow-y : auto   !important; /* falls mehr Inhalt → eigener Scroll  */
  }
}


/* 1024 px – 1680 px  ⇒  Box immer unten anpinnen */
@media (min-width:1024px) and (max-width:1680px){
  #ros-repairs-summary{
    position:fixed !important;
    left:50%       !important;
    bottom:0       !important;              /* direkt an den Browser-Rand */
    transform:translateX(-50%) scale(.7) !important;
    transform-origin:bottom center !important;
    width:calc(100vw / .7) !important;      /* volle Breite (vor Skalierung) */
    max-height:65vh !important;             /* Höhe begrenzen */
    overflow-y:auto !important;
    z-index:2000 !important;
  }

  /* den künstlichen Abstand, den dein JS an #ros-step-4 anhängt, neutralisieren */
  #ros-step-4{ padding-bottom:0 !important; }
}


/* Step-4-Summary: Tablets & kleine Desktops (1024–1679 px)  */
@media (min-width: 1024px) and (max-width: 1679px){
  #ros-repairs-summary{
    position: fixed !important;
    inset: auto 0 0 0 !important;   /* bottom 0, links/rechts 0 */
    width: 100vw !important;
    max-width: 100vw !important;
    transform: none !important;     /* keine Skalierung          */
    box-sizing: border-box !important;
    z-index: 2000 !important;
  }
}

@media (min-width: 1025px) {
  #ros-repairs-summary.is-desktop {
    /* damit unten kein Scroll- oder Leerraum entsteht */
    overflow: hidden;
  }

  #ros-repairs-summary.is-desktop .ros-summary-inner {
    transform: scale(0.8);
    transform-origin: top left;
    width:  calc(100% / 0.8);
    height: calc(100% / 0.8);
  }
}

/* ═════════ Step 4 · Mobile bottom-sheet (Summary) – Handle + Collapse ═════════ */
#ros-repairs-summary{
  --ros-peek: 54px;            /* mehr Fläche für Griff + Klick */
  --ros-summary-scale: .7;
}

@media (max-width: 1680px){
  #ros-repairs-summary.is-mobile{
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 -6px 20px rgba(0,0,0,.12);
    transition: transform .25s ease;
    will-change: transform;
    -webkit-tap-highlight-color: transparent;
  }

  /* Platz für den Griff oberhalb des Inhalts */
  #ros-repairs-summary.is-mobile .ros-summary-inner{
    padding-top: 22px;
  }

  /* Griff standardmäßig ausblenden, nur Mobile zeigen */
  #ros-repairs-summary .ros-summary-handle{ display: none; }

  /* Sichtbarer Griff: mittig oben im Fenster */
  #ros-repairs-summary.is-mobile .ros-summary-handle{
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 24px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: ns-resize;
    touch-action: pan-y;     /* vertikales Wischen auf dem Griff */
    user-select: none;
    z-index: 3;
  }
  #ros-repairs-summary.is-mobile .ros-summary-handle:focus-visible{
    outline: 2px solid var(--primary-color, #4A90E2);
    border-radius: 999px;
  }
  #ros-repairs-summary.is-mobile .ros-summary-handle .ros-grabber{
    width: 46px;
    height: 5px;
    border-radius: 999px;
    background: rgba(0,0,0,.22);
    box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
  }

#ros-repairs-summary.is-mobile.is-collapsed{
  transform: scale(var(--ros-summary-scale, .7)) translateX(-50%) translateY(calc(100% - var(--ros-peek))) !important;
  pointer-events: auto;
}
}


/* === Step 4 – Mobile/Tablet: Summary bottom-center fix === */
@media (max-width: 1680px){
  #ros-repairs-summary.is-mobile{
    --ros-summary-scale: .7;
    --ros-handle-stub: 64px;            /* sichtbarer Rand im eingeklappten Zustand */
    --ros-collapse-lift: 16px;          /* extra Anhebung */
    position: fixed;
    bottom: 0 !important;
    left:50% !important;
    right:auto !important;
    transform:translate(-50%, 0) scale(var(--ros-summary-scale)) !important;
    transform-origin:bottom center !important;
    padding-bottom: env(safe-area-inset-bottom, 0px); /* iOS Homebar-Zone */
  }
  #ros-repairs-summary.is-mobile.is-collapsed{
    transform:translate(
      -50%,
      calc(100% - (var(--ros-handle-stub) + env(safe-area-inset-bottom, 0px)) - var(--ros-collapse-lift))
    ) scale(var(--ros-summary-scale)) !important;
  }
  /* Handle mittig */
  #ros-repairs-summary .ros-summary-handle{ display:flex; justify-content:center; }
  #ros-repairs-summary .ros-summary-handle .ros-grabber{ margin:6px auto; }
}


/* Summary: inner wrapper spacing unter dem Griff */
#ros-repairs-summary .ros-summary-inner{ padding-top: 8px; }


/* Spacer unter den Buttons für das mobile Bottom-Sheet (>=1024px inklusive) */
#ros-summary-spacer {
  display:block;
  width:100%;
  height:0;
  pointer-events:none; /* klicks nicht abfangen */
}



/* ░░  FINAL override — Tablets 1024 – 1679 px  ░░ */
@media (min-width:1024px) and (max-width:1679px){

  /* ➤ die Box selbst … */
  #ros-repairs-summary,
  #ros-repairs-summary.is-mobile{
      max-height : none      !important;
      overflow-y : visible   !important;
  }

  /* ➤ und ihr innerer Wrapper (falls der Scroll hat) */
  #ros-repairs-summary .ros-summary-inner{
      max-height : none      !important;
      overflow-y : visible   !important;
  }
}


/* ░░ Rabatt-Badge – altes Preis-Tag durchstreichen ░░ */
.repair-badge.discounted .badge-old{
  text-decoration: line-through;
  opacity: .55;
  margin-right: 4px;
}
.repair-badge.discounted .badge-new{
  font-weight: 700;
}

/* etwas Luft zwischen alt + neu */
.repair-badge.discounted .badge-price{
  white-space: nowrap;
}



/* ─────────────────────────────────────────────────────────────
   Prevent horizontal scrolling on mobile/tablet (≤1024px)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  html, body {
    overflow-x: hidden !important;
  }
  /* Falls dein Wizard in einem Container mit Klasse .ros-frontend-form liegt: */
  .ros-frontend-form,
  .ros-step-content {
    overflow-x: hidden !important;
  }
}




/* --- Badge für lokale Treffer ------------------------------------ */
.gsma-badge-local{
  display:inline-block;
  margin-left:6px;           /* etwas Abstand zum Titel */
  padding:2px 6px;
  font-size:9px;            /* schön klein */
  line-height:1;
  background:#d8d8d8;        /* dezentes Grau */
  border-radius:4px;        /* leicht abgerundet */
  color:#444;                /* Textfarbe */
}


/* Gemeinsames Badge-Layout */
.gsma-badge{
  display:inline-block; margin-left:6px; padding:2px 6px;
  font-size:11px; line-height:1; border-radius:10px;
}

/* Lokale DB             */  .gsma-badge-local  {background:#d8d8d8; color:#444;}
/* GSMchoice-Treffer     */  .gsma-badge-choice {background:#e8d4ff; color:#4c2b7b;}
/* GSMArena-Treffer      */  .gsma-badge-gsma   {background:#cfe6ff; color:#064f8b;}


#ros-price-table td.note{white-space:normal;word-break:break-word;max-width:260px;}










/* ─────────────────────────────────────────────────────────────
   Fix: Reparatur‑Summary auch ≥1681px als Bottom‑Floating
   (gleiches Verhalten wie unter 1681px; keine Logik geändert)
   ───────────────────────────────────────────────────────────── */
@media (min-width:1681px){
  /* ID hart ansprechen, damit wir gegen Inline-Styles gewinnen */
  #ros-repairs-summary{
    /* Inline-Position (inset/top/left/…) überstimmen */
    inset: auto 12px 12px 12px !important; /* top:auto; right:12; bottom:12; left:12 */
    top:auto !important;
    right:12px !important;
    bottom:12px !important;
    left:12px !important;

    position:fixed !important;
    width:auto !important;
    max-width:none !important;
    /* Höhe wie bisher, aber unten platzieren */
    max-height:80vh !important;
    margin:0 !important;
    z-index:2000 !important; /* gleich wie im Snippet */
  }

  /* Optional: Innenleben leicht andocken – keine Pflicht */
  #ros-repairs-summary .ros-summary-inner{
    /* sorgt dafür, dass der Inhalt als „Leiste“ sauber wirkt */
    padding:14px 16px;
  }
}



/* ─────────────────────────────────────────────────────────────
   Desktop ≥1681px: immer mittig, 30% schmaler (+ sichtbarer Grabber)
   ───────────────────────────────────────────────────────────── */
@media (min-width:1681px){
  /* Summary unten, zentriert und ~70% der Viewportbreite */
  #ros-repairs-summary.is-desktop,
  #ros-repairs-summary{
    position: fixed !important;
    /* alle Inline-Offsets killen und unten verankern */
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important; /* exakt mittig */

    /* 30% schmaler als volle Breite (dynamisch begrenzt) */
    width: clamp(420px, 80vw, 1400px) !important;
    max-width: none !important;
    box-sizing: border-box !important;

    

    /* Höhe & Layer */
    max-height: 80vh !important;
    margin: 0 !important;
    z-index: 2000 !important;
  }

  /* Oben Platz für den Grabber – verhindert Überdeckung */
  #ros-repairs-summary .ros-summary-inner{
    padding-top: 32px !important;
  }

/* Sichtbarer, mittiger Grabber – slim & clean */
#ros-repairs-summary .ros-summary-handle{
  position: absolute !important;
  top: 6px;                       /* etwas näher an den Rand */
  left: 50% !important;
  transform: translateX(-50%);
  width: 44px;                    /* schmaler */
  height: 4px;                    /* dünner */
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: ns-resize;
  z-index: 3;                     /* über dem Inhalt */
  display: block !important;
}

#ros-repairs-summary .ros-summary-handle .ros-grabber{
  display: block;
  width: 60px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(167, 16, 16, 0.22), rgba(0,0,0,.18)); /* dezenter Micro-Gradient */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),  /* feiner Licht-Kick oben */
    0 .5px 0 rgba(0,0,0,.06);              /* hauchzarte Kante */
  opacity: .82;
  transition: opacity .15s ease, transform .15s ease;
}

#ros-repairs-summary .ros-summary-handle:hover .ros-grabber{
  opacity: 1;
  transform: translateY(-.5px);
}

#ros-repairs-summary .ros-summary-handle:active .ros-grabber{
  transform: translateY(.5px);
}

#ros-repairs-summary .ros-summary-handle:focus-visible .ros-grabber{
  outline: 2px solid rgba(74,144,226,.42);
  outline-offset: 3px;
}

/* Falls mal kein .ros-summary-handle im Markup ist → Fallback dünn halten */
#ros-repairs-summary::before{
  width: 44px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45) !important;
}


}

/* ── Desktop (≥1681px): Handle-Klapp-Animation + Peek ───────────────── */
@media (min-width:1681px){
  /* Standard: mittig unten, Y=0 */
  #ros-repairs-summary,
  #ros-repairs-summary.is-desktop{
    /* weicher Übergang für Klappen */
    transition: transform .25s ease !important;
    /* X mittig, Y = 0 (überschreibt translateX) */
    transform: translate(-50%, 0) !important;
  }

  /* Eingeklappt: nur noch der Griff/Peek sichtbar */
  #ros-repairs-summary.is-collapsed,
  #ros-repairs-summary.is-desktop.is-collapsed{
    /* 100% der Boxhöhe nach unten, minus sichtbarer Peek */
    transform: translate(-50%, calc(100% - var(--ros-peek, 54px))) !important;
  }


}

/* Frosted-Glass – Mobile/Tablet */
@media (max-width:1680px){
  #ros-repairs-summary.is-mobile{
    background: rgba(255,255,255,.72) !important;
    backdrop-filter: blur(14px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
    border: 1px solid rgba(255,255,255,.38) !important;
    box-shadow: 0 -8px 28px rgba(0,0,0,.16) !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
  }
}

/* Frosted-Glass – Desktop */
@media (min-width:1681px){
  #ros-repairs-summary,
  #ros-repairs-summary.is-desktop{
    background: rgba(255,255,255,.72) !important;
    backdrop-filter: blur(16px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
    border: 1px solid rgba(255,255,255,.38) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.18) !important;
    border-radius: 14px !important;
  }
}


/* etwas Luft unter dem Griff, beide Welten */
#ros-repairs-summary .ros-summary-inner{
  padding-top: 26px !important;
}



/* ░ Fix: Desktop-Innenleben nicht künstlich vergrößern ░ */
@media (min-width:1025px){
  #ros-repairs-summary.is-desktop{ 
    overflow: visible !important;                 /* nicht abschneiden */
  }
  #ros-repairs-summary.is-desktop .ros-summary-inner{
    transform: none !important;                   /* Scale raus */
    width: auto !important;
    height: auto !important;                      /* echte Inhaltshöhe */
    padding-bottom: 14px !important;              /* kompakt unten */
  }

  /* Listen/Abstände straffen, damit nichts "zieht" */
  #ros-repairs-summary .ros-summary-list{ 
    margin: 10px 0 8px !important; 
    padding: 0 !important; 
    list-style: none !important;
  }
  #ros-repairs-summary .ros-summary-math:last-child{ 
    margin-bottom: 0 !important; 
  }
}








/* Step-4 Navigationsleiste sicher über der Summary halten */
#ros-step-4 .ros-wizard-nav{
  position: relative;
  z-index: 10001;        /* Summary liegt bei dir bei 2000 */
}

#ros-repairs-summary .ros-summary-inner{
  padding-top: 26px !important;   /* Platz für den Griff */
}



/* ░░ Desktop ≥1681 px: Floating-Summary ~40% kleiner (Scale 0.6) ░░ */
@media (min-width:1681px){
  /* Basiszustand: mittig unten, verkleinert */
  #ros-repairs-summary,
  #ros-repairs-summary.is-desktop{
    --ros-summary-scale: .6;                            /* ← 40% kleiner */
    left: 50% !important;
    bottom: 12px !important;
    top: auto !important; right: auto !important;
    transform-origin: bottom center !important;
    transform: translate(-50%, 0) scale(var(--ros-summary-scale)) !important;

    /* gleiche logische Breite wie zuvor – durch Scale wird's sichtbar kleiner */
    width: clamp(420px, 80vw, 1400px) !important;
  }

  /* Eingeklappt-Zustand: auch mit Scale rendern */
  #ros-repairs-summary.is-collapsed,
  #ros-repairs-summary.is-desktop.is-collapsed{
    transform: translate(
                 -50%,
                 calc(100% - var(--ros-peek, 54px))
               ) scale(var(--ros-summary-scale)) !important;
  }

  /* etwas Luft für den (schmalen) Grabber */
  #ros-repairs-summary .ros-summary-inner{
    padding-top: 22px !important;
  }
}


/* Mehr Radius + konsistente Rundung */
@media (min-width:1681px){
  #ros-repairs-summary,
  #ros-repairs-summary.is-desktop{
    border-radius: 24px !important;     /* ← mehr Rundung */
    background-clip: padding-box !important; /* saubere Kante beim Blur */
  }
}

@media (max-width:1680px){
  #ros-repairs-summary.is-mobile{
    border-top-left-radius: 24px !important;
    border-top-right-radius: 24px !important;
    background-clip: padding-box !important;
  }
}

#ros-repairs-summary{ --ros-peek: 44px; }



/* Desktop-Handle: große unsichtbare Klickfläche, aber dünner Balken */
@media (min-width:1681px){
  #ros-repairs-summary .ros-summary-handle{
    position:absolute !important;
    top: 6px !important; left:50% !important; transform:translateX(-50%);
    width:88px !important;               /* → größere Klickfläche */
    height:26px !important;              /* → größere Klickfläche */
    padding:0 !important; border:0 !important; background:transparent !important;
    cursor: ns-resize !important;
    z-index:10002 !important;            /* über evtl. Leisten/Overlays */
    pointer-events:auto !important;
  }
  #ros-repairs-summary .ros-summary-handle .ros-grabber{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:44px; height:4px; border-radius:999px;
    background: rgba(0,0,0,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
    opacity:.85; transition:opacity .15s ease, transform .12s ease;
  }
  #ros-repairs-summary .ros-summary-handle:hover .ros-grabber{ opacity:1; }
  #ros-repairs-summary .ros-summary-handle:active .ros-grabber{ transform:translate(-50%,-50%) translateY(.5px); }
}



/* ── Puls-Effekt für "Auftrag hinzufügen" (dezent + cool) ───────── */
#ros-step-4.active #ros-submit-btn{
  position: relative;                /* für das Ring-Pseudo-Element */
  isolation: isolate;                /* eigener Stacking-Context */
  z-index: 1;
  will-change: box-shadow, transform;
  /* sanfter Glow-Puls */
  animation: rosPulseGlow 2.6s ease-in-out infinite !important;
}

/* sichtbarer Ring, der langsam größer wird und ausfadet */
#ros-step-4.active #ros-submit-btn::after{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%) scale(.86);
  width: 120%; height: 120%;
  border-radius: 999px;
  border: 2px solid var(--ros-pulse, rgba(63,167,45,.55));      /* Grün */
  opacity: .22;
  pointer-events: none;
  animation: rosPulseRing 2.6s ease-out infinite !important;
}

/* Markenfarbe einstellbar (fällt zurück auf dein Grün) */
#ros-submit-btn{
  --ros-pulse: rgba(63,167,45,.55);
  --ros-pulse-soft: rgba(63,167,45,.18);
}

/* Busy/Disabled: keine Animation */
#ros-submit-btn.ros-btn-busy,
#ros-submit-btn[disabled]{
  animation: none !important;
}
#ros-submit-btn.ros-btn-busy::after,
#ros-submit-btn[disabled]::after{
  content: none !important;
}

/* Hover/Active minimal lebendiger, ohne „hüpfen“ */
#ros-submit-btn:hover{ transform: translateZ(0) scale(1.012); }
#ros-submit-btn:active{ transform: translateZ(0) scale(.992); }

/* Keyframes */
@keyframes rosPulseGlow{
  0%,100%{
    box-shadow:
      0 8px 20px rgba(0,0,0,.18),
      0 0 0 0 var(--ros-pulse-soft);
  }
  50%{
    box-shadow:
      0 10px 24px rgba(0,0,0,.22),
      0 0 0 10px var(--ros-pulse-soft);
  }
}
@keyframes rosPulseRing{
  0%  { transform: translate(-50%,-50%) scale(.86); opacity:.22; }
  70% { opacity: 0; }
  100%{ transform: translate(-50%,-50%) scale(1.25); opacity:0; }
}

/* Barrierefrei: Bewegung reduzieren */
@media (prefers-reduced-motion: reduce){
  #ros-step-4.active #ros-submit-btn{ animation: none !important; }
  #ros-step-4.active #ros-submit-btn::after{ content: none !important; }
}






/* Desktop: Inhalt 20% größer "nach innen", ohne herauszuragen */
@media (min-width:1681px){
  #ros-repairs-summary.is-desktop{
    overflow: hidden !important;
  }
  #ros-repairs-summary.is-desktop .ros-summary-inner{
    --ros-inner-scale: 1.20; /* 20% größer */
    transform: scale(var(--ros-inner-scale)) !important;
    transform-origin: bottom center !important;
    width: calc(100% / var(--ros-inner-scale)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}




/* HARD: Step 1 – Brand-Grid immer mittig (failsafe) */
#ros-step-1 .ros-brand-grid{
  display:grid !important;
  justify-content:center !important;
  justify-items:stretch !important;
  align-items:stretch !important;
  width:fit-content !important;
  max-width:100% !important;
  margin:16px auto 32px !important;
  gap:17px 14px !important;
  box-sizing:border-box !important;
}
#ros-step-1 .ros-brand-grid > .brand-card{
  width:auto !important;
  min-width:120px !important;
  max-width:220px !important;
  margin:0 !important;
}
@media (min-width:1025px){
  #ros-step-1 .ros-brand-grid{
    grid-template-columns: repeat(4, 220px) !important;
  }
}
@media (max-width:1024px){
  #ros-step-1 .ros-brand-grid{
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    width:100% !important;
  }
}
@media (max-width:600px){
  #ros-step-1 .ros-brand-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

/* ——— Combo‑Rabatt Badge (nur Kennzeichnung, Preis bleibt original) ——— */
#ros-repairs-summary .ros-summary-item[data-discount-target="1"] .ros-summary-name .ros-discount-chip,
#ros-repairs-summary .ros-summary-item[data-discount-target="1"] [data-field="name"] .ros-discount-chip{
  display:inline-block;
  margin-left:.5em;
  padding:2px 6px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  background:rgba(78,111,231,.10); /* helles Blau, passend zu --primary-color */
  color:var(--primary-color, #4e6fe7);
}

/* ——— Step 3: Rabatt-Badge auf Reparatur-Karten ——— */
#ros-step-3 .repair-card[data-discount-target="1"] .ros-discount-chip{
  display:inline-block;
  margin-left:.5em;
  padding:2px 6px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  background:rgba(78,111,231,.10);
  color:var(--primary-color, #4e6fe7);
}