/* Swaags Konfigurator – Gestaltung im Stil des Templates SwaagsNOVA (Tokens --sw-* aus dem kritischen CSS).
   Nur auf Seiten mit dem Portlet geladen. Ohne JavaScript (kein .swk--js) sind alle Schritte untereinander sichtbar. */
.swk-wrap { margin: 2rem 0 3rem; }
.swk { --swk-line: var(--sw-line, #dfe3e8); --swk-blue: var(--sw-blue, #004f9f); --swk-navy: var(--sw-navy, #0b1f3a); --swk-muted: var(--sw-muted, #566579); --swk-surface: var(--sw-surface, #f4f6fa); --swk-radius: var(--sw-radius, 1rem); }
.swk__kopf { margin-bottom: 1.5rem; }
.swk__kopf .sw-h2 { margin-bottom: .5rem; }
.swk__fortschritt { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .375rem; counter-reset: swk; }
.swk__fortschritt li { counter-increment: swk; display: inline-flex; align-items: center; gap: .4rem; min-height: 2.25rem; padding: .25rem .75rem .25rem .375rem; border: 1px solid var(--swk-line); border-radius: 50rem; background: #fff; font-size: .8125rem; font-weight: 600; color: var(--swk-muted); cursor: default; }
.swk__fortschritt li::before { content: counter(swk); display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--swk-surface); color: var(--swk-navy); font-size: .75rem; font-weight: 800; }
.swk--js .swk__fortschritt li.ist-erledigt { color: var(--swk-navy); cursor: pointer; }
.swk--js .swk__fortschritt li.ist-erledigt::before { background: var(--swk-blue); color: #fff; content: '✓'; }
.swk--js .swk__fortschritt li.ist-aktiv { border-color: var(--swk-blue); color: var(--swk-blue); background: #e8f1fa; }
.swk--js .swk__fortschritt li.ist-aktiv::before { background: var(--swk-blue); color: #fff; }
.swk--js .swk__fortschritt li.ist-aus { display: none; }

.swk__raster { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 992px) { .swk__raster { grid-template-columns: minmax(0, 1fr) 22rem; gap: 2rem; } .swk__summe { position: sticky; top: 6rem; } }

.swk__schritt { margin-bottom: 2rem; padding: 1.5rem; background: #fff; border: 1px solid var(--swk-line); border-radius: var(--swk-radius); }
.swk--js .swk__schritt { display: none; }
.swk--js .swk__schritt.ist-aktiv { display: block; }
.swk__schritt--fehlt { border-color: #c8402c; }
.swk__frage { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; font-family: var(--sw-font-head, inherit); font-weight: 800; font-size: 1.375rem; color: var(--swk-navy); }
.swk__frage::before { content: ''; flex: none; width: .8em; height: .8em; background: var(--sw-cube-blue) center / contain no-repeat; }

.swk__karten { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 576px) { .swk__karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .swk__karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.swk__karte { position: relative; display: flex; flex-direction: column; gap: .375rem; padding: 1rem 1rem 1rem 2.75rem; margin: 0; border: 1px solid var(--swk-line); border-radius: .875rem; background: #fff; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; }
.swk__karte:hover { border-color: #b9d3ee; box-shadow: var(--sw-shadow, 0 .5rem 1.5rem rgba(11, 31, 58, .08)); }
.swk__karte:focus-within, .swk__karte:focus-visible { outline: 2px solid var(--swk-blue); outline-offset: 2px; }
.swk__karte[hidden] { display: none; }
.swk__wahl { position: absolute; left: 1rem; top: 1.125rem; width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--swk-blue); }
.swk__karte:has(.swk__wahl:checked) { border-color: var(--swk-blue); background: #f2f7fd; box-shadow: inset 0 0 0 1px var(--swk-blue); }
.swk__bild { display: block; width: 100%; max-width: 12rem; height: 7.5rem; object-fit: contain; margin: 0 auto .25rem; mix-blend-mode: multiply; }
.swk__titel { font-family: var(--sw-font-head, inherit); font-weight: 700; font-size: 1.0625rem; line-height: 1.3; color: var(--swk-navy); }
.swk__text { font-size: .875rem; line-height: 1.45; color: var(--swk-muted); }
.swk__preis { font-weight: 700; color: var(--swk-blue); }
.swk__karte--anfrage .swk__preis { color: var(--swk-muted); }
.swk__link { font-size: .8125rem; font-weight: 600; color: var(--swk-blue); text-decoration: none; }
.swk__link:hover { text-decoration: underline; }
.swk__rueckfragen { display: grid; gap: .5rem; margin-top: .375rem; padding-top: .625rem; border-top: 1px dashed var(--swk-line); }
.swk__rueckfrage { display: grid; gap: .25rem; }
.swk__rf-frage { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--swk-muted); }
.swk__rf, .swk__anzahl, .swk__anzahl-wirkung { width: 100%; min-height: 2.75rem; padding: .375rem .75rem; border: 1px solid var(--swk-line); border-radius: .625rem; background: #fff; font: inherit; color: var(--swk-navy); }
.swk__rf:focus, .swk__anzahl:focus, .swk__anzahl-wirkung:focus { outline: 2px solid var(--swk-blue); outline-offset: 1px; }
.swk__menge { display: grid; gap: .25rem; margin-top: .375rem; font-size: .8125rem; font-weight: 600; color: var(--swk-muted); }
.swk__nav { display: flex; justify-content: space-between; gap: .75rem; margin: 1.25rem 0 0; }
.swk__nav .btn { min-height: 2.75rem; }
.swk:not(.swk--js) .swk__nav { display: none; }

.swk__summe { padding: 1.5rem; background: #fff; border: 1px solid var(--swk-line); border-radius: var(--swk-radius); box-shadow: var(--sw-shadow-lg, 0 1.5rem 3rem rgba(11, 31, 58, .1)); }
.swk__summe .sw-h3 { margin-bottom: .75rem; }
.swk__liste { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.swk__zeile { display: flex; justify-content: space-between; gap: .75rem; font-size: .875rem; color: var(--swk-navy); }
.swk__zeile-betrag { flex: none; font-weight: 700; }
.swk__zeile--anfrage .swk__zeile-betrag { color: var(--swk-muted); font-weight: 600; }
.swk__zeile--leer { color: var(--swk-muted); }
.swk__gesamt { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin: 0 0 .75rem; padding-top: .75rem; border-top: 1px solid var(--swk-line); font-size: .875rem; color: var(--swk-muted); }
.swk__betrag { font-family: var(--sw-font-head, inherit); font-size: 1.5rem; font-weight: 800; color: var(--swk-navy); }
.swk__hinweis { font-size: .8125rem; color: var(--swk-muted); }
.swk__aktionen { display: grid; gap: .5rem; margin: 0; }
.swk__aktionen .btn { min-height: 3rem; }
.swk__meldung { min-height: 1.25rem; margin: .75rem 0 0; font-size: .875rem; color: var(--swk-navy); }
.swk__meldung.ist-fehler { color: #c8402c; }

.swk__anfrageformular { margin-top: 1.5rem; padding: 1.5rem; background: var(--swk-surface); border-radius: var(--swk-radius); display: grid; gap: .75rem; }
.swk__anfrageformular[hidden] { display: none; }
.swk__anfrageformular label { display: grid; gap: .25rem; font-size: .875rem; font-weight: 600; color: var(--swk-navy); }
.swk__anfrageformular input:not([type=checkbox]), .swk__anfrageformular textarea { min-height: 2.75rem; padding: .5rem .75rem; border: 1px solid var(--swk-line); border-radius: .625rem; font: inherit; }
.swk__anfrageformular textarea { min-height: 6rem; }
.swk__anfrageformular .swk__ds { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .swk__karte { transition: none; } }