/* Tools im hellen Sting-Grey-Stil. Nutzt die Farben des Themes. */
.swat { padding: 40px 0 80px; }
.swat-kopf p { max-width: 640px; color: var(--grau, #5b616a); margin-top: 12px; font-size: 16.5px; line-height: 1.6; }
.swat-kopf .wrap { max-width: 1100px; }
.swat-raster { display: grid; grid-template-columns: 260px 1fr; gap: 36px; align-items: start; }

/* Seitenleiste */
.swat-leiste { position: sticky; top: 92px; max-height: calc(100vh - 110px); overflow-y: auto; padding-right: 6px; }
.swat-leiste-kopf { display: block; font-size: 12px; font-weight: 800; letter-spacing: .2em; color: var(--ak, #53565a); text-decoration: none; padding: 4px 10px 12px; border-bottom: 2px solid var(--linie, #e6e6e4); margin-bottom: 8px; }
.swat-gruppe summary { list-style: none; cursor: pointer; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--grau, #5b616a); padding: 12px 10px 6px; display: flex; justify-content: space-between; }
.swat-gruppe summary::-webkit-details-marker { display: none; }
.swat-gruppe summary::after { content: "▾"; transition: transform .15s; }
.swat-gruppe:not([open]) summary::after { transform: rotate(-90deg); }
.swat-gruppe ul { list-style: none; margin: 0 0 6px; padding: 0; }
.swat-gruppe a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--tint, #1c1e21); text-decoration: none; font-size: 14px; font-weight: 550; }
.swat-gruppe a:hover { background: var(--hell, #f6f6f5); }
.swat-gruppe a.aktiv { background: var(--ak, #53565a); color: #fff; }
.swat-gruppe a em, .swat-kachel em { margin-left: auto; font-style: normal; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--grau, #5b616a); border: 1px solid var(--linie, #e6e6e4); border-radius: 5px; padding: 1px 5px; }
.swat-gruppe a.aktiv em { color: #fff; border-color: rgba(255,255,255,.4); }
.swat-leiste-knopf { display: none; }
/* Bereichsumschalter oben in der Seitenleiste */
.swat-bereiche { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-bottom: 14px; background: var(--hell, #f6f6f5); border: 1px solid var(--linie, #e6e6e4); border-radius: 10px; }
.swat-bereiche a { flex: 1 1 auto; text-align: center; padding: 7px 10px; border-radius: 7px; font-size: 13px; font-weight: 650; color: var(--tint, #1c1e21); text-decoration: none; }
.swat-bereiche a:hover { background: #fff; }
.swat-bereiche a.aktiv { background: var(--ak, #53565a); color: #fff; }

/* Icons */
.swat-icon { border-radius: 22%; flex-shrink: 0; display: inline-block; object-fit: cover; }
/* Stealth-Icons: Licht laeuft nur beim Darueberfahren durch die Konturen */
.swat-st { position: relative; overflow: hidden; width: var(--g); height: var(--g); background: #26282b; }
.swat-st img { display: block; width: 100%; height: 100%; }
.swat-st .welle { position: absolute; inset: 0; opacity: 0; transition: opacity .25s; -webkit-mask: var(--lin) center/cover no-repeat; mask: var(--lin) center/cover no-repeat; background: linear-gradient(115deg, transparent 38%, rgba(200,228,255,.7) 45%, #fff 50%, rgba(200,228,255,.7) 55%, transparent 62%) 100% 0/300% 100% no-repeat; filter: drop-shadow(0 0 2px rgba(150,200,255,.95)); }
.swat-gruppe a:hover .swat-st .welle, .swat-kachel:hover .swat-st .welle, .swat-kachel:focus-visible .swat-st .welle, .swat-tool-kopf .swat-st:hover .welle { opacity: 1; animation: swat-welle 1.4s cubic-bezier(.5,0,.3,1) infinite; }
@keyframes swat-welle { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .swat-st .welle { display: none; } }
.swat-icon-leer { background: linear-gradient(145deg, #2a2d31, #1c1e21); color: #9cc4ff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; box-shadow: inset 0 0 0 1px rgba(120,170,255,.35); }

/* Kacheln */
.swat-gruppe-titel { font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ak, #53565a); margin: 8px 0 14px; }
.swat-gruppe-titel:not(:first-child) { margin-top: 36px; }
.swat-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.swat-kachel { display: flex; gap: 14px; align-items: flex-start; padding: 16px; background: #fff; border: 1px solid var(--linie, #e6e6e4); border-radius: 12px; text-decoration: none; color: var(--tint, #1c1e21); transition: transform .15s, box-shadow .15s, border-color .15s; position: relative; }
.swat-kachel:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(20,24,34,.08); border-color: #d6d8db; }
.swat-kachel.bald { opacity: .72; }
.swat-kachel .swat-icon { width: 56px; height: 56px; }
.swat-kachel-text b { display: block; font-size: 15.5px; margin-bottom: 4px; }
.swat-kachel-text small { display: block; font-size: 13.5px; line-height: 1.45; color: var(--grau, #5b616a); }
.swat-kachel em { position: absolute; top: 10px; right: 10px; }

/* Tool-Seite */
.swat-tool-kopf { display: flex; gap: 20px; align-items: center; margin-bottom: 24px; }
.swat-tool-kopf h1 { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.swat-tool-kopf p { color: var(--grau, #5b616a); margin-top: 6px; font-size: 16px; }
.swat-karte { background: #fff; border: 1px solid var(--linie, #e6e6e4); border-radius: 14px; padding: 24px; box-shadow: 0 6px 24px rgba(20,24,34,.05); }
.swat-form label { font-weight: 650; display: block; margin-bottom: 8px; }
.swat-zeile { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.swat-zeile input { flex: 1 1 260px; border: 1px solid var(--linie, #e6e6e4); border-radius: 8px; padding: 12px 14px; font-size: 16px; font-family: inherit; }
.swat-zeile input:focus { outline: 2px solid var(--ak, #53565a); outline-offset: 1px; }
.swat-zeile .btn { border: 0; cursor: pointer; font-family: inherit; }
.swat-zeile .btn[disabled] { opacity: .6; cursor: wait; }
.swat-fehler { color: #b3372d; min-height: 1.2em; margin-top: 8px; font-size: 14px; }
.swat-klein { color: var(--grau, #5b616a); font-size: 13px; margin-top: 4px; }

/* Ergebnis */
.swat-ergebnis { margin-top: 22px; border-top: 1px solid var(--linie, #e6e6e4); padding-top: 22px; --ton: #6f7379; }
.swat-ergebnis[data-bewertung="gut"] { --ton: #2f9e6f; }
.swat-ergebnis[data-bewertung="achtung"] { --ton: #b7893a; }
.swat-ergebnis[data-bewertung="schlecht"] { --ton: #b3372d; }
.swat-urteil { border-left: 4px solid var(--ton); padding-left: 14px; margin-bottom: 18px; }
.swat-urteil h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.swat-urteil p { color: #30343c; margin-top: 6px; line-height: 1.6; }
.swat-tabelle-titel { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grau, #5b616a); margin: 18px 0 8px; }
.swat-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.swat-tabelle th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--grau, #5b616a); border-bottom: 2px solid var(--linie, #e6e6e4); padding: 8px 10px; }
.swat-tabelle td { border-bottom: 1px solid var(--linie, #e6e6e4); padding: 8px 10px; vertical-align: top; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; word-break: break-all; }
.swat-tabelle td:first-child { font-weight: 700; white-space: nowrap; word-break: normal; font-family: inherit; }
.swat-hinweise { list-style: none; padding: 0; margin: 18px 0 0; }
.swat-hinweise li { display: flex; gap: 10px; padding: 8px 0; line-height: 1.5; font-size: 14.5px; }
.swat-hinweise li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; background: #6f7379; }
.swat-hinweise li.gut::before { background: #2f9e6f; }
.swat-hinweise li.achtung::before { background: #b7893a; }
.swat-hinweise li.schlecht::before { background: #b3372d; }
.swat-schritte { background: var(--hell, #f6f6f5); border-radius: 10px; padding: 14px 18px; margin-top: 18px; }
.swat-schritte h3 { font-size: 15px; margin-bottom: 6px; }
.swat-schritte ol { margin-left: 18px; }
.swat-schritte li { margin: 4px 0; line-height: 1.5; }
.swat-bald h2 { font-size: 20px; margin-bottom: 8px; }

@media (max-width: 900px) {
    .swat-raster { grid-template-columns: 1fr; gap: 16px; }
    .swat-leiste-knopf { display: inline-block; justify-self: start; background: var(--ak, #53565a); color: #fff; border: 0; border-radius: 8px; padding: 10px 16px; font-weight: 650; font-family: inherit; cursor: pointer; }
    .swat-leiste { display: none; position: static; max-height: none; border: 1px solid var(--linie, #e6e6e4); border-radius: 12px; padding: 8px; }
    .swat-leiste.offen { display: block; }
    .swat-tool-kopf { align-items: flex-start; }
    .swat-tool-kopf .swat-icon { width: 64px; height: 64px; }
    .swat-tool-kopf h1 { font-size: 26px; }
}

.swat-tabelle td:last-child:not(:first-child) { white-space: normal; word-break: normal; overflow-wrap: break-word; font-family: inherit; }

/* Subnetz-Rechner */
.swat-auswahl { border: 1px solid var(--linie, #e6e6e4); border-radius: 8px; padding: 10px 12px; font-size: 15px; font-family: inherit; background: #fff; margin-bottom: 6px; }
.swat-bild { margin: 8px 0 10px; }
.swat-balken, .swat-topologie { width: 100%; height: auto; display: block; }
.swat-balken .seg { stroke: #fff; }
.swat-balken .seg-a, .swat-balken .seg-hosts { fill: var(--ak, #53565a); }
.swat-balken .seg-b { fill: #8a8e94; }
.swat-balken .seg-netz, .swat-balken .seg-bc { fill: #c9cbce; }
.swat-balken .seg-text { font-size: 12px; font-weight: 650; fill: var(--tint, #1c1e21); font-family: var(--ff, sans-serif); }
.swat-balken .seg-text.hell { fill: #fff; }
.swat-balken .achse { font-size: 11px; fill: var(--grau, #5b616a); font-family: ui-monospace, Menlo, monospace; }
.swat-topologie { background: var(--hell, #f6f6f5); border: 1px solid var(--linie, #e6e6e4); border-radius: 12px; }
.swat-topologie .sym { fill: #fff; stroke: var(--ak, #53565a); stroke-width: 2; }
.swat-topologie .sym-linie { fill: none; stroke: var(--ak, #53565a); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.swat-topologie .sym-port { fill: var(--ak, #53565a); }
.swat-topologie .sym-led { fill: #4a8bdc; }
.swat-topologie .wolke { fill: #fff; stroke: #4a8bdc; }
.swat-topologie .kante { fill: none; stroke: #4a8bdc; stroke-width: 2; }
.swat-topologie .gestrichelt { stroke-dasharray: 5 4; }
.swat-topologie .knoten-titel { font-size: 13px; font-weight: 700; fill: var(--tint, #1c1e21); font-family: var(--ff, sans-serif); }
.swat-topologie .knoten-text { font-size: 11.5px; fill: var(--grau, #5b616a); font-family: ui-monospace, Menlo, monospace; }
.swat-binaer-zeile { display: flex; gap: 12px; align-items: baseline; margin: 4px 0; flex-wrap: wrap; }
.swat-binaer-name { width: 54px; font-size: 13px; color: var(--grau, #5b616a); font-weight: 650; }
.swat-binaer code { font-size: 13px; letter-spacing: .5px; }
.swat-binaer .netzbit { color: #fff; background: var(--ak, #53565a); }
.swat-binaer .hostbit { color: var(--tint, #1c1e21); background: #e3e4e6; }
.swat-tabelle-kv td:first-child { width: 38%; }

/* Werkzeugkasten */
.swat-feld { margin-bottom: 14px; }
.swat-feld label { font-weight: 650; display: block; margin-bottom: 6px; }
.swat-text { width: 100%; border: 1px solid var(--linie, #e6e6e4); border-radius: 8px; padding: 11px 13px; font-size: 15px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.swat-text:focus { outline: 2px solid var(--ak, #53565a); outline-offset: 1px; }
.swat-zeile .swat-text { flex: 1 1 260px; width: auto; }
.swat-regler { width: 100%; accent-color: var(--ak, #53565a); }
.swat-optionen { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 16px; margin: 4px 0 16px; }
.swat-haken { font-size: 14.5px; cursor: pointer; display: flex; gap: 8px; align-items: center; }
.swat-haken input { accent-color: var(--ak, #53565a); width: 17px; height: 17px; }
.btn.swat-btn-zweit { background: #fff; color: var(--ak, #53565a); border: 1px solid var(--linie, #e6e6e4); }
.btn.swat-btn-zweit:hover { background: var(--hell, #f6f6f5); }
button.btn { border: 0; cursor: pointer; font-family: inherit; }
button.btn.swat-btn-zweit { border: 1px solid var(--linie, #e6e6e4); padding: 8px 14px; font-size: 14px; }
.swat-staerke { height: 8px; border-radius: 4px; background: #e3e4e6; margin: 18px 0 6px; position: relative; overflow: hidden; }
.swat-staerke::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 20%; background: #b3372d; transition: width .2s, background .2s; }
.swat-staerke[data-stufe="1"]::after { width: 40%; background: #c9772f; }
.swat-staerke[data-stufe="2"]::after { width: 60%; background: #b7893a; }
.swat-staerke[data-stufe="3"]::after { width: 80%; background: #4f9a6c; }
.swat-staerke[data-stufe="4"]::after { width: 100%; background: #2f9e6f; }
.swat-pw-liste { margin-top: 10px; }
.swat-pw-zeile { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--linie, #e6e6e4); }
.swat-pw-zeile code { font-size: 15.5px; word-break: break-all; }
.swat-hash-tabelle td code { font-size: 12.5px; word-break: break-all; }
.swat-hash-tabelle tr.treffer td { background: #e6f4ec; }
.swat-hash-tabelle td:last-child { width: 1%; white-space: nowrap; }
.swat-reiter, .swat-knopfreihe { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.swat-ausgabe { background: var(--hell, #f6f6f5); border: 1px solid var(--linie, #e6e6e4); border-radius: 10px; padding: 12px 14px; font-size: 13px; white-space: pre-wrap; word-break: break-all; min-height: 2.6em; }

/* Bereiche auf /tools/ */
.swat-bereich-kacheln { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.swat-anzahl { margin-top: 8px; font-weight: 650; color: var(--ak, #53565a) !important; }

/* Futterrechner */
.swat-hinweis-box { background: #fbf6ec; border: 1px solid #ead9b5; border-left: 4px solid #b7893a; border-radius: 10px; padding: 12px 14px; margin-bottom: 18px; font-size: 14.5px; line-height: 1.5; }
.swat-futter-form .swat-knopfreihe { align-items: center; }
.swat-gruppe-felder { border: 0; margin: 0 0 8px; padding: 0; min-width: 0; }
.swat-gruppe-felder legend { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ak, #53565a); margin-bottom: 10px; }
.swat-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 16px; }
.swat-futter-form .swat-auswahl, .swat-futter-form .swat-zahl { width: 100%; max-width: 100%; }
.swat-futter-form .swat-zahl { font-family: inherit; }
.swat-futter-form .swat-feld .swat-klein { margin-top: 6px; }
.swat-futter-tabelle td { word-break: normal; white-space: nowrap; font-family: inherit; }
.swat-futter-tabelle td:first-child { white-space: normal; }
.swat-futter-tabelle th { padding: 8px 6px; }
.swat-futter-tabelle td { padding: 8px 6px; }
.swat-methode { margin-top: 22px; border-top: 1px solid var(--linie, #e6e6e4); padding-top: 14px; }
.swat-methode summary { cursor: pointer; font-weight: 700; }
.swat-methode p, .swat-quellen { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: #30343c; }
.swat-quellen { padding-left: 18px; color: var(--grau, #5b616a); font-size: 13.5px; }
@media (max-width: 600px) {
    .swat-futter-tabelle { display: block; overflow-x: auto; }
    .swat-karte { padding: 18px; }
}

/* Kurzvideos (F09): Knopf an Kachel und Ueberschrift, ein Dialog je Seite */
.swat-kachel-rahmen { position: relative; display: flex; }
.swat-kachel-rahmen > .swat-kachel { flex: 1; padding-right: 74px; }
.swat-kachel-rahmen:hover > .swat-kachel { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(20,24,34,.08); border-color: #d6d8db; }
.swat-kachel-rahmen:hover > .swat-video-knopf { transform: translateY(-3px); }
.swat-kachel-rahmen:hover > .swat-kachel .swat-st .welle { opacity: 1; animation: swat-welle 1.4s cubic-bezier(.5,0,.3,1) infinite; }
.swat-video-knopf { position: relative; flex-shrink: 0; width: 48px; height: 48px; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--linie, #e6e6e4); border-radius: 12px; overflow: hidden; background: #26282b; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.swat-kachel-rahmen > .swat-video-knopf { position: absolute; top: 12px; right: 12px; }
.swat-video-knopf img, .swat-video-vorschau { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.swat-video-vorschau:not([src]) { visibility: hidden; }
.swat-video-symbol { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: rgba(20,22,25,.72); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px rgba(255,255,255,.5); }
.swat-video-symbol svg { margin-left: 2px; }
.swat-video-knopf:hover { box-shadow: 0 6px 16px rgba(20,24,34,.18); }
.swat-video-knopf:focus-visible, .swat-video-zu:focus-visible, .swat-video-gross:focus-visible { outline: 3px solid #4a8bdc; outline-offset: 2px; }
.swat-h1-zeile { display: flex; align-items: center; gap: 12px; }
.swat-video-dialog { margin: auto; padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; overflow: visible; }
.swat-video-dialog::backdrop { background: rgba(12,13,15,.86); }
.swat-video-huelle { position: relative; }
.swat-video-gross { display: block; width: auto; height: min(90vh, calc(92vw * 16 / 9)); height: min(90dvh, calc(92vw * 16 / 9)); aspect-ratio: 9 / 16; background: #000; border-radius: 14px; }
.swat-video-zu { position: absolute; top: -14px; right: -14px; z-index: 1; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: #1c1e21; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
@media (max-width: 600px) {
    .swat-video-gross { height: min(86vh, calc(100vw * 16 / 9)); height: min(86dvh, calc(100vw * 16 / 9)); border-radius: 10px; }
    .swat-video-zu { top: 6px; right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .swat-kachel-rahmen:hover > .swat-kachel, .swat-kachel-rahmen:hover > .swat-video-knopf { transform: none; }
}

/* Ergebnistabellen schmal: jede Zeile wird ein Block, nichts laeuft ueber den Rand */
@media (max-width: 600px) {
    .swat-tabelle, .swat-tabelle tbody, .swat-tabelle tr, .swat-tabelle td { display: block; width: 100%; }
    .swat-tabelle thead { display: none; }
    .swat-tabelle tr { border-bottom: 1px solid var(--linie, #e6e6e4); padding: 10px 0; }
    .swat-tabelle td,
    .swat-tabelle td:first-child,
    .swat-tabelle td:last-child:not(:first-child) { border: 0; padding: 2px 0; white-space: normal; word-break: normal; overflow-wrap: anywhere; }
    .swat-tabelle td:first-child { font-size: 14px; }
    .swat-tabelle td:last-child:not(:first-child) { color: var(--grau, #5b616a); }
}