.sic2026 {
--sic-navy: #1B3565;
--sic-navy-dark: #12244a;
--sic-sky: #5FA8D8;
--sic-sky-light: #EAF3FA;
--sic-ink: #22304a;
--sic-grey: #5d6b83;
--sic-line: #dde5ef;
--sic-bg-soft: #E3E3E3;
--sic-radius: 10px;
--sic-shadow: 0 10px 30px rgba(27, 53, 101, 0.10);
--sic-font-display: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
--sic-font-body: "Inter", "Segoe UI", Arial, sans-serif;
font-family: var(--sic-font-body);
color: var(--sic-ink);
line-height: 1.65;
}
.sic2026 *, .sic2026 *::before, .sic2026 *::after { box-sizing: border-box; }
.sic2026 .sic-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.sic2026 h1, .sic2026 h2, .sic2026 h3 {
font-family: var(--sic-font-display);
color: var(--sic-navy);
line-height: 1.15;
margin: 0 0 0.5em;
text-transform: none;
letter-spacing: -0.01em;
}
.sic2026 h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 700; }
.sic2026 h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 700; }
.sic2026 h3 { font-size: 1.25rem; font-weight: 600; }
.sic2026 p { margin: 0 0 1em; }
.sic2026 .sic-eyebrow {
display: inline-block;
font-family: var(--sic-font-display);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sic-sky);
margin-bottom: 0.6em;
}
.sic2026 .sic-btn {
display: inline-block;
font-family: var(--sic-font-display);
font-weight: 600;
font-size: 1.05rem;
text-decoration: none;
border-radius: 8px;
padding: 14px 26px;
border: 2px solid transparent;
cursor: pointer;
line-height: 1.3;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sic2026 .sic-btn-primary { background: var(--sic-sky); color: #ffffff; }
.sic2026 .sic-btn-primary:hover { background: #7cbbe3; color: #ffffff; }
.sic2026 .sic-btn-outline { border-color: rgba(255,255,255,0.55); color: #fff; background: transparent; }
.sic2026 .sic-btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.08); color: #fff; }
.sic2026 .sic-btn-navy { background: var(--sic-navy); color: #fff; }
.sic2026 .sic-btn-navy:hover { background: var(--sic-navy-dark); color: #fff; }
.sic2026 .sic-btn-outline-navy { border-color: var(--sic-navy); color: var(--sic-navy); background: transparent; }
.sic2026 .sic-btn-outline-navy:hover { background: var(--sic-navy); color: #fff; }
.sic2026 .sic-btn[disabled] { opacity: 0.4; cursor: not-allowed; } .sic2026 .sic-konfigurator { max-width: 1100px; margin: 0 auto; padding: 56px 0 80px; } .sic2026 .konf-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: 36px;
align-items: start;
}
.sic2026 .konf-preview {
position: sticky;
top: 100px;
background: var(--sic-bg-soft);
border: 1px solid var(--sic-line);
border-radius: var(--sic-radius);
padding: 22px;
}
.sic2026 .konf-preview h3 { margin: 12px 0 4px; font-size: 1.1rem; }
.sic2026 .konf-preview ul { margin: 8px 0 0; padding-left: 20px; }
.sic2026 .konf-preview li { margin-bottom: 5px; color: var(--sic-ink); font-size: 0.93rem; }
.sic2026 .sic-breadcrumbs { font-size: 0.88rem; color: var(--sic-grey); margin-bottom: 18px; }
.sic2026 .sic-breadcrumbs a { color: var(--sic-grey); }
.sic2026 .konf-progress { display: flex; gap: 6px; margin: 26px 0 34px; }
.sic2026 .konf-progress .step-dot { flex: 1; height: 6px; border-radius: 3px; background: var(--sic-line); }
.sic2026 .konf-progress .step-dot.active { background: var(--sic-sky); }
.sic2026 .konf-progress .step-dot.done { background: var(--sic-navy); }
.sic2026 .konf-step { display: none; }
.sic2026 .konf-step.active { display: block; animation: sicFadeIn 0.25s ease; }
@keyframes sicFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.sic2026 .konf-step.active { animation: none; }
.sic2026 .sic-card-img img, .sic2026 .sic-card:hover .sic-card-img img { transition: none; transform: none; }
}
.sic2026 .konf-step h2 { margin-bottom: 6px; }
.sic2026 .konf-step .step-label { color: var(--sic-grey); font-size: 0.9rem; margin-bottom: 22px; } .sic2026 .option-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.sic2026 .option-card {
border: 2px solid var(--sic-line);
border-radius: var(--sic-radius);
padding: 20px;
cursor: pointer;
background: #fff;
text-align: left;
font-family: var(--sic-font-body);
font-size: 1rem;
width: 100%;
transition: border-color 0.15s, box-shadow 0.15s;
}
.sic2026 .option-card:hover { border-color: var(--sic-sky); background: #fff; }
.sic2026 .option-card.selected { border-color: var(--sic-navy); background: var(--sic-sky-light); box-shadow: var(--sic-shadow); }
.sic2026 .option-card strong { display: block; font-family: var(--sic-font-display); font-size: 1.1rem; color: var(--sic-navy); margin-bottom: 4px; }
.sic2026 .option-card span { color: var(--sic-grey); font-size: 0.92rem; }
.sic2026 .konf-nav { display: flex; justify-content: space-between; margin-top: 34px; gap: 12px; } .sic2026 .option-card.is-hidden { display: none; }
.sic2026 .konf-result-visual { position: relative; }
.sic2026 .konf-sketch-badge {
position: absolute;
top: 8px;
left: 8px;
z-index: 1;
background: var(--sic-navy);
color: #fff;
font-family: var(--sic-font-display);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 9px;
border-radius: 5px;
}
.sic2026 .konf-result-visual-inner {
background: #fff;
border: 1px solid var(--sic-line);
border-radius: 8px;
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.sic2026 .konf-result-visual svg { width: 100%; height: auto; display: block; }
.sic2026 .konf-result-label {
font-family: var(--sic-font-display);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sic-sky);
display: block;
margin-bottom: 10px;
}
.sic2026 .konf-result-note { font-size: 0.85rem; color: var(--sic-grey); margin: 12px 0 0; }
.sic2026 .konf-summary {
background: #fff;
border: 1px solid var(--sic-line);
border-radius: var(--sic-radius);
padding: 22px;
margin-bottom: 26px;
}
.sic2026 .konf-summary dl { display: grid; grid-template-columns: 200px 1fr; gap: 8px 16px; margin: 0; }
.sic2026 .konf-summary dt { color: var(--sic-grey); }
.sic2026 .konf-summary dd { margin: 0; font-weight: 600; color: var(--sic-navy); }
.sic2026 .konf-form label { display: block; font-weight: 600; margin: 16px 0 6px; color: var(--sic-navy); }
.sic2026 .konf-form input[type="text"],
.sic2026 .konf-form input[type="email"],
.sic2026 .konf-form input[type="tel"],
.sic2026 .konf-form textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--sic-line);
border-radius: 8px;
font-family: var(--sic-font-body);
font-size: 1rem;
background: #fff;
box-shadow: none;
}
.sic2026 .konf-form input:focus, .sic2026 .konf-form textarea:focus {
border-color: var(--sic-sky);
outline: none;
box-shadow: 0 0 0 3px rgba(95,168,216,0.25);
}
.sic2026 .notice-success {
background: #e8f6ec;
border: 1px solid #9fd6ae;
color: #1d5a2f;
border-radius: var(--sic-radius);
padding: 18px 22px;
margin-bottom: 26px;
}
@media (max-width: 980px) {
.sic2026 .konf-layout { grid-template-columns: 1fr; }
.sic2026 .konf-preview { position: static; order: -1; }
}
@media (max-width: 620px) {
.sic2026 .option-grid { grid-template-columns: 1fr; }
.sic2026 .konf-summary dl { grid-template-columns: 1fr; }
}
.sic2026 .konf-steplabels {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
margin: -26px 0 30px;
font-size: 0.78rem;
color: var(--sic-grey);
}
.sic2026 .konf-steplabels span { text-align: center; }
.sic2026 .konf-steplabels span.active { color: var(--sic-navy); font-weight: 600; }
.sic2026 .konf-edit {
background: none;
border: none;
padding: 0;
margin-left: 8px;
font-family: var(--sic-font-body);
font-size: 0.8rem;
color: var(--sic-sky);
cursor: pointer;
text-decoration: underline;
}
.sic2026 .konf-edit:hover { color: var(--sic-navy); }
.sic2026 .konf-trust { font-size: 0.9rem; color: var(--sic-grey); margin: 18px 0 6px; }
.sic2026 .sic-cta-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.sic2026 .konf-note {
background: var(--sic-sky-light, #eef6fc);
border-left: 4px solid var(--sic-sky);
border-radius: 8px;
padding: 12px 16px;
font-size: 0.92rem;
line-height: 1.5;
color: var(--sic-ink);
margin: 18px 0 20px;
}
.sic2026 .konf-note strong { color: var(--sic-navy); } .sic2026 .konf-trail {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 0;
margin: 0 0 26px;
}
.sic2026 .konf-trail li { display: flex; align-items: center; }
.sic2026 .konf-trail li + li::before { content: ""; width: 14px; height: 2px; background: var(--sic-line); margin: 0 6px 0 2px; }
.sic2026 .konf-trail button {
-webkit-appearance: none;
appearance: none;
border: 1px solid var(--sic-line);
background: #fff;
border-radius: 999px;
padding: 6px 12px;
font-family: var(--sic-font-body);
font-size: 0.8rem;
line-height: 1.2;
color: var(--sic-navy);
cursor: pointer;
display: flex;
gap: 6px;
align-items: baseline;
min-height: 0;
margin: 0;
box-shadow: none;
text-transform: none;
letter-spacing: 0;
}
.sic2026 .konf-trail button:hover { border-color: var(--sic-sky); background: #fff; color: var(--sic-navy); }
.sic2026 .konf-trail button em { font-style: normal; color: var(--sic-grey); max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sic2026 .konf-trail li.current span {
background: var(--sic-navy);
color: #fff;
border-radius: 999px;
padding: 7px 14px;
font-family: var(--sic-font-display);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.04em;
}
.sic2026 .konf-hint { color: var(--sic-grey); font-size: 0.92rem; margin: -10px 0 18px; }
.sic2026 .konf-group {
font-family: var(--sic-font-display);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--sic-grey);
margin: 20px 0 8px;
}
.sic2026 .konf-group:first-of-type { margin-top: 0; }
.sic2026 .option-grid + .konf-group { margin-top: 22px; }
.sic2026 .option-card.selected strong::before { content: "\2713\00a0"; color: var(--sic-navy); }
.sic2026 .konf-nav-hint { align-self: center; color: var(--sic-grey); font-size: 0.85rem; } .sic2026 .konf-preview .konf-parts { list-style: none; padding: 0; margin: 8px 0 0; border-top: 1px solid var(--sic-line); }
.sic2026 .konf-preview .konf-parts li {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 8px 0;
border-bottom: 1px solid var(--sic-line);
font-size: 0.88rem;
margin: 0;
color: var(--sic-ink);
}
.sic2026 .konf-preview .konf-parts code {
font-size: 0.72rem;
color: var(--sic-grey);
background: #fff;
border: 1px solid var(--sic-line);
padding: 2px 6px;
border-radius: 4px;
white-space: normal;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.sic2026 .konf-preview .konf-parts .konf-parts-empty { color: var(--sic-grey); font-style: italic; border-bottom: 0; } .sic2026 .konf-final h2 { margin-bottom: 6px; }
.sic2026 .konf-final .konf-lead { color: var(--sic-grey); margin: 0 0 6px; }
.sic2026 .konf-final .konf-lead strong { color: var(--sic-navy); }
.sic2026 .konf-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400 !important; font-size: 0.88rem; color: var(--sic-ink); margin-top: 18px !important; }
.sic2026 .konf-check input { width: auto; margin-top: 4px; }
.sic2026 .konf-final .konf-nav { margin-top: 26px; } .sic2026 .konf-result-visual.has-photo .konf-result-visual-inner { padding: 6px; }
.sic2026 .konf-result-visual img { width: 100%; height: auto; max-height: 340px; object-fit: contain; display: block; }
.sic2026 .konf-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0 4px; }
.sic2026 .konf-thumbs figure { margin: 0; background: #fff; border: 1px solid var(--sic-line); border-radius: 6px; padding: 4px; text-align: center; }
.sic2026 .konf-thumbs img { width: 100%; height: 56px; object-fit: contain; display: block; }
.sic2026 .konf-thumbs figcaption { font-size: 0.6rem; color: var(--sic-grey); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, Menlo, Consolas, monospace; } .sic2026 .option-card.has-img { display: flex; flex-direction: column; align-items: flex-start; }
.sic2026 .option-card.has-img img { width: 100%; height: 110px; object-fit: contain; display: block; margin: -4px 0 8px; background: #fff; border-radius: 6px; }
.sic2026 .konf-result-visual .konf-placeholder { opacity: .9; }
.sic2026 .konf-sketch-badge { display: none; }
@media (max-width: 640px) { .sic2026 .option-card.has-img img { height: 84px; } } .sic2026 .konf-result-visual { position: relative; }
.sic2026 .konf-missing { position: absolute; left: 12px; bottom: 12px; background: #fff3cd; color: #7a5a00; border: 1px solid #ffe08a; border-radius: 6px; padding: 4px 8px; font-size: 0.72rem; font-family: var(--sic-font-display); letter-spacing: .04em; text-transform: uppercase; }
.sic2026 .konf-thumbs figure.is-missing { border-style: dashed; } .sic2026 .konf-form input[type="number"] { width: 100%; padding: 12px 14px; border: 1px solid var(--sic-line); border-radius: 8px; font: inherit; font-size: 1rem; color: var(--sic-ink); background: #fff; }
.sic2026 .konf-form input[type="number"]:focus { outline: none; border-color: var(--sic-sky); box-shadow: 0 0 0 3px rgba(95,168,216,0.2); }  .menu-item.sic-konf-menu-item > a.sic-konf-menu-btn,
.sic-konf-menu-btn { display: inline-block !important; background: #1B3565; color: #fff !important; border-radius: 8px; padding: 8px 16px !important; line-height: 1.3 !important; font-weight: 600; text-transform: none; }
.menu-item.sic-konf-menu-item > a.sic-konf-menu-btn:hover, .sic-konf-menu-btn:hover { background: #12244a; color: #ffffff !important; }
.mobile-sidebar .sic-konf-menu-btn { margin: 8px 20px; } .sic-konf-float { position: fixed; right: 20px; bottom: 20px; z-index: 9990; display: inline-flex; align-items: center; gap: 9px; background: #1B3565; color: #fff !important; text-decoration: none !important; font-family: "Barlow Semi Condensed", "Arial Narrow", sans-serif; font-weight: 600; font-size: 1rem; padding: 12px 18px; border-radius: 999px; box-shadow: 0 8px 24px rgba(27,53,101,0.28); transition: background .15s, transform .15s; }
.sic-konf-float:hover { background: #12244a; color: #ffffff !important; transform: translateY(-1px); }
@media (max-width: 640px) { .sic-konf-float { right: 12px; bottom: 12px; padding: 11px 14px; font-size: .95rem; } } .header-nav li.html .header-cta, .header-nav li.html .header-cta-en { white-space: nowrap; }
.header-nav li.html a.button.sic-hdr-btn { margin-bottom: 0; } .sic2026 .konf-lang-note { margin: 0 0 22px; padding: 12px 16px; border: 1px solid #cfdbe8; border-left: 4px solid #2068a0; border-radius: 8px; background: #eef3f8; color: #3c4a63; max-width: 680px; font-size: .95rem; line-height: 1.5; }
.sic2026 .konf-lang-note a { color: #2068a0; font-weight: 600; text-decoration: underline; } .sic-konf-front-row { margin-top: -14px; margin-bottom: 36px; }  .sic-konf-front-row .col-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.sic-konf-front-row .sic-konf-front-btn { margin: 0; }
.sic2026 .konf-missing.konf-note { background: #eef3f8; color: #3c4a63; border-color: #cfdbe8; }
.sic2026 .konf-beratung { margin-top: 6px; }