@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,400;6..12,700;6..12,800;6..12,900&display=swap');

.ssi-wrap {
    --red:    #CC242C;
    --rdark:  #961018;
    --rlight: #FDF2F2;
    --ink:    #2C2530;
    --soft:   #6D6675;
    --bg:     #F8F8F8;
    --card:   #fff;
    --border: #DDD8E0;
    --font:   'Nunito Sans', -apple-system, Arial, sans-serif;
    --radius: 12px;
    font-family: var(--font);
    color: var(--ink);
    max-width: 760px;
    margin: 0 auto;
}

/* Header */
.ssi-header {
    background: #fff;
    border-top: 5px solid var(--red);
    border-bottom: 1px solid var(--border);
    padding: 20px 28px 16px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.ssi-header-content { flex: 1 1 auto; }
.ssi-header-hexagons {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    opacity: 0.85;
}
.ssi-header-logo {
    flex: 0 0 auto;
}
.ssi-header-logo img {
    width: 80px;
    height: auto;
    display: block;
}
.ssi-title {
    font-size: 1.45rem;
    font-weight: 900;
    color: var(--ink);
    margin: 0 0 6px;
    line-height: 1.25;
}
.ssi-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background: var(--red);
    margin-top: 8px;
}
.ssi-subtitle {
    font-size: 0.88rem;
    color: var(--soft);
    margin: 8px 0 0;
}

/* Fortschrittsbalken */
.ssi-progress-wrap { margin-bottom: 24px; }
.ssi-progress-bar  { background: var(--border); border-radius: 99px; height: 6px; overflow: hidden; margin-bottom: 8px; }
.ssi-progress-fill { background: var(--red); height: 100%; transition: width .35s ease; }
.ssi-steps-labels  { display: flex; gap: 2px; }
.ssi-step-label    { flex:1; font-size:0.7rem; font-weight:700; color:var(--soft); text-align:center; padding:3px 2px; border-radius:5px; }
.ssi-step-label.is-active { background:var(--red); color:#fff; }

/* Schritte */
.ssi-step          { display: none; }
.ssi-step.is-active{ display: block; animation: ssiFade .2s ease; }
@keyframes ssiFade { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
.ssi-step h3       { font-size:1.15rem; font-weight:900; color:var(--red); margin:0 0 18px; padding-bottom:7px; border-bottom:2px solid var(--red); }

/* Felder */
.ssi-field { margin-bottom: 14px; }
.ssi-field label { display:block; font-weight:800; font-size:0.9rem; margin-bottom:5px; color:var(--ink); }
.ssi-field input[type=text],
.ssi-field input[type=email],
.ssi-field input[type=tel],
.ssi-field textarea {
    width:100%; padding:11px 13px; border:1.5px solid var(--border); border-radius:10px;
    font-size:1rem; font-family:var(--font); color:var(--ink); background:#fff;
    transition:border-color .15s; box-sizing:border-box;
}
.ssi-field input:focus, .ssi-field textarea:focus { outline:none; border-color:var(--red); }
.ssi-field textarea { resize:vertical; min-height:80px; }

/* Zwei / Drei Spalten */
.ssi-row { display:flex; gap:14px; }
.ssi-col { flex:1 1 0; }
.ssi-three .ssi-col { flex:1 1 0; }

/* Radio */
.ssi-radio-group { display:flex; flex-direction:column; gap:8px; }
.ssi-radio-group label { display:flex; align-items:center; gap:8px; font-weight:600; font-size:0.9rem; cursor:pointer; }
.ssi-radio-group input[type=radio] { accent-color:var(--red); width:17px; height:17px; }

/* Info-Box */
.ssi-info-box {
    background:var(--rlight); border-left:4px solid var(--red);
    border-radius:8px; padding:14px 16px;
    font-size:0.88rem; line-height:1.6; color:var(--ink);
    margin-bottom:16px;
}

/* Einwilligung */
.ssi-consent { display:flex; gap:9px; align-items:flex-start; font-size:0.87rem; color:var(--soft); margin:10px 0; line-height:1.45; cursor:pointer; }
.ssi-consent input { margin-top:3px; flex:0 0 auto; width:18px; height:18px; accent-color:var(--red); }
.ssi-sub    { display:block; font-size:0.8rem; color:var(--soft); margin-top:2px; }
.ssi-optional { font-weight:400; color:var(--red); }

/* Übersicht */
.ssi-uebersicht { background:var(--bg); border-radius:var(--radius); padding:18px; font-size:0.9rem; }
.ssi-uebersicht h4 { font-size:0.82rem; font-weight:900; color:var(--red); margin:12px 0 4px; text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--border); padding-bottom:2px; }
.ssi-ov-row { display:flex; gap:8px; margin-bottom:3px; }
.ssi-ov-label { color:var(--soft); flex:0 0 150px; }

/* Hint */
.ssi-hint { font-size:0.83rem; color:var(--soft); margin:4px 0 12px; line-height:1.5; font-style:italic; }

/* Fehler */
.ssi-alert { background:#fdeaea; color:#c0392b; border-left:4px solid #c0392b; border-radius:10px; padding:12px 16px; margin-bottom:16px; font-weight:700; }

/* Navigation */
.ssi-nav { display:flex; gap:12px; margin-top:22px; padding-top:16px; border-top:1px solid var(--border); }
.ssi-btn { border:0; border-radius:10px; font-family:var(--font); font-weight:800; font-size:1rem; padding:12px 22px; cursor:pointer; transition:background .15s; }
.ssi-btn-back   { background:var(--bg); color:var(--ink); border:1.5px solid var(--border); }
.ssi-btn-back:hover { border-color:var(--red); color:var(--red); }
.ssi-btn-next   { background:var(--red); color:#fff; box-shadow:0 4px 14px rgba(196,43,46,.25); }
.ssi-btn-next:hover { background:var(--rdark); }
.ssi-btn-submit { background:var(--red); color:#fff; box-shadow:0 4px 14px rgba(196,43,46,.25); }
.ssi-btn-submit:hover { background:var(--rdark); }

/* Erfolg */
.ssi-success { text-align:center; padding:48px 24px; }
.ssi-success-icon { width:56px; height:56px; background:var(--red); color:#fff; border-radius:50%; font-size:1.8rem; line-height:56px; margin:0 auto 18px; font-weight:900; }
.ssi-success h2 { font-size:1.6rem; font-weight:900; color:var(--red); margin:0 0 12px; }
.ssi-success p  { font-size:1rem; line-height:1.65; color:var(--soft); }
.ssi-success-contact { margin-top:14px; font-size:0.9rem; }
.ssi-success-contact a { color:var(--red); }

/* CAPTCHA */
.captcha-field { margin-top:14px; }
.captcha-label { display:block; font-weight:800; font-size:0.9rem; margin-bottom:5px; color:var(--ink); }
.captcha-input { width:130px !important; padding:10px 12px; border:1.5px solid var(--border); border-radius:10px; font-size:1rem; font-family:var(--font); }
.captcha-input:focus { outline:none; border-color:var(--red); }

@media(max-width:540px) {
    .ssi-row { flex-direction:column; }
    .ssi-three { flex-direction:column; }
}