.twt-k {
--twt-navy: var(--wp--preset--color--navy, #0F172A);
--twt-blau: var(--wp--preset--color--blau, #0369A1);
--twt-grau: var(--wp--preset--color--text-grau, #475569);
--twt-linie: var(--wp--preset--color--linie, #CBD5E1);
display: flex; flex-direction: column; gap: 1rem;
margin-block: 1.5rem;
color: var(--twt-navy);
}
.twt-k * { box-sizing: border-box; }
.twt-k :is(button, input, select, [tabindex]):focus-visible { outline: 3px solid var(--twt-blau); outline-offset: 2px; }
.twt-k button, .twt-k-auswahl, .twt-k input {
min-height: 44px; font: inherit; font-size: .9375rem; color: var(--twt-navy);
background: #fff; border: 1px solid var(--twt-linie); border-radius: 8px;
}
.twt-k button { padding: 0 1rem; font-weight: 600; cursor: pointer; }
.twt-k button:hover { border-color: var(--twt-navy); }
.twt-k-auswahl { padding: 0 .6rem; cursor: pointer; }
.twt-k input { padding: 0 .75rem; width: 100%; font-weight: 700; font-variant-numeric: tabular-nums; }
.twt-k input[aria-invalid="true"] { border-color: #B91C1C; } .twt-k-leiste { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; }
.twt-k-gruppe { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.twt-k-gruppe label { font-weight: 700; }
.twt-k .twt-k-haupt { background: var(--twt-blau); border-color: var(--twt-blau); color: #fff; }
.twt-k .twt-k-haupt:hover { background: var(--wp--preset--color--blau-dunkel, #075985); }
.twt-k-status { margin: 0; font-size: .9375rem; color: var(--twt-grau); max-width: 46ch; } .twt-k { container-type: inline-size; container-name: twt-k; }
.twt-k-haupt-bereich { display: grid; grid-template-columns: 210px minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
@container twt-k (max-width: 1080px) { .twt-k-haupt-bereich { grid-template-columns: 180px minmax(0, 1fr); } .twt-k-inspektor { grid-column: 1 / -1; } }
@container twt-k (max-width: 680px) {
.twt-k-haupt-bereich { grid-template-columns: 1fr; }
.twt-k-palette ul { flex-direction: row; flex-wrap: wrap; }
.twt-k-palette button { width: auto; }
} .twt-k-palette { background: #fff; border: 1px solid var(--twt-linie); border-radius: 12px; padding: 1rem; }
.twt-k-palette h3 { margin: .75rem 0 .4rem; font-size: .875rem; font-weight: 700; color: var(--twt-grau); }
.twt-k-palette h3:first-child { margin-top: 0; }
.twt-k-palette ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.twt-k-palette button { width: 100%; text-align: left; font-weight: 500; border-color: #E2E8F0; } .twt-k-mitte { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.twt-k-flaeche {
position: relative; overflow: auto; height: max(480px, calc(100vh - 260px));
background-color: #F1F5F9;
background-image: radial-gradient(#CBD5E1 1px, transparent 1px);
background-size: 20px 20px;
border: 1px solid var(--twt-linie); border-radius: 12px;
}
.twt-k-innen { position: relative; min-width: 100%; min-height: 100%; }
.twt-k-linien { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.twt-k-linien path { fill: none; stroke-width: 3; }
.twt-k-linien .twt-k-entwurf { stroke-dasharray: 6 5; }
.twt-k-knoten {
position: absolute; width: 230px;
background: #fff; border: 1px solid #B8C4CE; border-radius: 10px;
font-size: .875rem; box-shadow: 0 1px 0 #CBD5E1;
}
.twt-k-knoten.ist-gewaehlt { border: 2px solid var(--twt-navy); margin: -1px 0 0 -1px; }
.twt-k-knoten--ergebnis { width: 200px; background: #F0F9FF; }
.twt-k-kopf {
display: flex; justify-content: space-between; align-items: center; gap: .5rem;
min-height: 40px; padding: 0 .75rem;
font-weight: 700; font-size: .9375rem;
border-bottom: 1px solid #E2E8F0;
cursor: grab; touch-action: none; user-select: none;
}
.twt-k-kopf:active { cursor: grabbing; }
.twt-k-art { font-weight: 500; font-size: .75rem; color: var(--twt-grau); }
.twt-k-zeile { position: relative; display: flex; justify-content: space-between; align-items: center; gap: .5rem; min-height: 36px; padding: 0 .75rem; }
.twt-k-zeile--aus { background: #F8FAFC; border-top: 1px solid #E2E8F0; }
.twt-k-zeile--aus:last-child { border-radius: 0 0 10px 10px; }
.twt-k-zeile--ergebnis { min-height: 56px; }
.twt-k-label { color: var(--twt-grau); }
.twt-k-wert { font-variant-numeric: tabular-nums; text-align: right; }
.twt-k-gross { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.twt-k-port {
position: absolute; top: 50%; width: 16px; height: 16px; margin-top: -8px;
border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #94A3B8;
cursor: crosshair; touch-action: none;
}
.twt-k-port::after { content: ""; position: absolute; inset: -12px; } .twt-k-port--ein { left: -9px; cursor: pointer; }
.twt-k-port--aus { right: -9px; }
.twt-k.ist-verbindend .twt-k-port--ein { box-shadow: 0 0 0 3px var(--twt-blau); }
.twt-k-leerhinweis { position: absolute; left: 24px; top: 24px; width: auto; max-width: 360px; padding: 1rem; margin: 0; }
.twt-k-legende { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .8125rem; color: var(--twt-grau); }
.twt-k-legende > span { display: inline-flex; align-items: center; gap: .35rem; }
.twt-k-punkt { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .twt-k-inspektor { background: #fff; border: 1px solid var(--twt-linie); border-radius: 12px; padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.twt-k-inspektor h2 { margin: 0; font-size: 1.25rem; }
.twt-k-inspektor p { margin: 0; color: var(--twt-grau); font-size: .9375rem; }
.twt-k-feld { display: flex; flex-direction: column; gap: .3rem; }
.twt-k-feld label { font-weight: 600; font-size: .875rem; }
.twt-k-wert-zeile { display: flex; gap: .4rem; }
.twt-k-wert-zeile input { flex: 1; min-width: 0; }
.twt-k-einheit { align-self: center; color: var(--twt-grau); font-weight: 600; }
.twt-k-eingang { margin: 0; padding: .75rem; border: 1px solid #E2E8F0; border-radius: 10px; display: flex; flex-direction: column; gap: .6rem; }
.twt-k-eingang legend { padding: 0 .3rem; font-weight: 700; font-size: .9375rem; }
.twt-k-ergebnisse { margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.twt-k-ergebnisse > div { padding: .75rem; background: #F0F9FF; border-radius: 10px; }
.twt-k-ergebnisse dt { font-size: .8125rem; font-weight: 600; color: var(--twt-grau); }
.twt-k-ergebnisse dd { margin: .2rem 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.twt-k-ergebnisse strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.twt-k .twt-k-loeschen { align-self: flex-start; color: #991B1B; border-color: #FCA5A5; }
.twt-k .twt-k-loeschen:hover { border-color: #991B1B; }
@media print {
.twt-k-palette, .twt-k-leiste, .twt-k-loeschen { display: none; }
.twt-k-flaeche { height: auto; overflow: visible; }
} .twt-generator { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 2rem; margin-block: 1.5rem; }
.twt-gen-form { display: flex; flex-direction: column; gap: 1rem; }
.twt-gen-form label { font-weight: 700; display: block; margin-bottom: .3rem; }
.twt-gen-form :is(input, select, textarea) {
width: 100%; min-height: 48px; padding: .5rem .75rem;
font: inherit; color: #0F172A; background: #fff;
border: 2px solid #CBD5E1; border-radius: 10px;
}
.twt-gen-form input[type="color"] { width: 96px; padding: 4px; cursor: pointer; }
.twt-gen-form textarea { min-height: 120px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .875rem; }
.twt-gen-form :is(input, select, textarea):focus-visible, .twt-gen-kopieren:focus-visible { outline: 3px solid #0369A1; outline-offset: 2px; }
.twt-gen-kopieren { align-self: flex-start; min-height: 48px; padding: 0 1.4rem; font: inherit; font-weight: 700; color: #fff; background: #0369A1; border: none; border-radius: 8px; cursor: pointer; }
.twt-gen-kopieren:hover { background: #075985; }
.twt-gen-status { margin: 0; color: #475569; }
.twt-gen-hinweis { margin: 0; font-size: .9375rem; color: #475569; }
.twt-gen-vorschau-bereich h3 { margin: 0 0 .5rem; font-size: 1rem; }
.twt-k-datei { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.twt-k > .twt-k-status { margin-top: -.25rem; }
@media print {
.twt-k-status, .twt-k-legende { display: none; }
.twt-k-haupt-bereich { grid-template-columns: 1fr; }
} .is-layout-constrained > :is(.twt-ketten-editor, .twt-generator) { max-width: var(--wp--style--global--wide-size, 1280px) !important; } .twt-k:fullscreen { background: #F8FAFC; padding: 1rem 1.25rem; overflow: auto; margin: 0; }
.twt-k:fullscreen .twt-k-flaeche { height: calc(100vh - 150px); }
.twt-k:fullscreen .twt-k-inspektor { max-height: calc(100vh - 130px); overflow: auto; }
.twt-k-inspektor { max-height: max(480px, calc(100vh - 220px)); overflow: auto; } .twt-datenschutz { margin-block: 1rem 1.5rem; padding: 1rem 1.25rem; background: #F0F9FF; border: 1px solid #BAE6FD; border-radius: 12px; color: #0F172A; font-size: .9375rem; line-height: 1.55; }
.twt-datenschutz strong { display: block; margin-bottom: .25rem; }
.twt-datenschutz p { margin: 0; }
.is-layout-constrained > .twt-datenschutz { max-width: var(--wp--style--global--wide-size, 1280px) !important; } .twt-k-filter { display: flex; align-items: center; gap: .5rem; min-height: 44px; font-size: .875rem; font-weight: 600; cursor: pointer; }
.twt-k-filter input { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--twt-blau); cursor: pointer; }
.twt-k-palette-hinweis { margin: 0 0 .75rem; font-size: .8125rem; line-height: 1.45; color: var(--twt-grau); }
.twt-k .twt-k-palette button:disabled { opacity: .4; cursor: not-allowed; border-style: dashed; }
.twt-k .twt-k-palette button:disabled:hover { border-color: #E2E8F0; }
.twt-k .twt-k-palette button.ist-passend { border-color: var(--twt-blau); background: #F0F9FF; font-weight: 600; }
.twt-k-inspektor .twt-k-info { margin-top: -.5rem; font-size: .875rem; line-height: 1.5; }
.twt-rechtshinweis { margin: 0 0 1.5rem; font-size: .875rem; color: var(--twt-grau, #475569); }
.is-layout-constrained > .twt-rechtshinweis { max-width: var(--wp--style--global--wide-size, 1280px) !important; }
.twt-gen-form .twt-zustimmung { display: grid; grid-template-columns: 18px 1fr; align-items: start; border-radius: 10px; gap: .6rem; padding: .7rem .85rem; background: #FFF7ED; border: 1px solid #FDBA74; color: #334155; margin: 0; font-size: .8125rem; line-height: 1.45; transition: background-color .2s ease, border-color .2s ease; }
.twt-gen-form .twt-zustimmung input { width: 18px; min-height: 0; height: 18px; padding: 0; margin-top: .1rem; }
.twt-gen-form .twt-zustimmung.ist-bestaetigt,
.twt-gen-form .twt-zustimmung:has(input:checked) { background: #F0FDF4; border-color: #86EFAC; }
.twt-gen-form .twt-zustimmung.ist-bestaetigt input,
.twt-gen-form .twt-zustimmung:has(input:checked) input { accent-color: #15803D; }
@media (prefers-reduced-motion: reduce) { .twt-gen-form .twt-zustimmung { transition: none; } }
.twt-gen-form textarea:disabled { color: #64748B; background: #F1F5F9; }
.twt-gen-kopieren:disabled { opacity: .45; cursor: not-allowed; }
.twt-gen-form .twt-zustimmung label { font-weight: 400; font-size: inherit; margin: 0; display: block; } .twt-generator, .twt-generator *, .twt-generator *::before, .twt-generator *::after { box-sizing: border-box; }
.twt-gen-form > * { min-width: 0; }
.twt-gen-form .twt-zustimmung input { cursor: pointer; }
.twt-gen-form .twt-zustimmung label { cursor: pointer; } .twt-k { --twt-k-hoehe: max(520px, calc(100vh - 190px)); }
.twt-k-haupt-bereich { grid-template-columns: 176px minmax(0, 1fr) 290px; gap: .75rem; }
.twt-k.ist-leiste-zu .twt-k-haupt-bereich { grid-template-columns: 176px minmax(0, 1fr); }
.twt-k.ist-leiste-zu .twt-k-inspektor { display: none; }
.twt-k-flaeche { height: var(--twt-k-hoehe); }
.twt-k-palette { position: sticky; top: .5rem; max-height: var(--twt-k-hoehe); overflow-y: auto; padding: .75rem; overscroll-behavior: contain; }
.twt-k-palette h3 { font-size: .75rem; letter-spacing: .02em; margin: .6rem 0 .3rem; }
.twt-k-palette ul { gap: .25rem; }
.twt-k .twt-k-palette button { padding: 0 .6rem; font-size: .875rem; }
.twt-k-palette-hinweis { font-size: .75rem; }
.twt-k-filter { font-size: .8125rem; }
.twt-k-inspektor { position: sticky; top: .5rem; max-height: var(--twt-k-hoehe); padding: 1rem; }
@container twt-k (max-width: 1080px) {
.twt-k.ist-leiste-zu .twt-k-haupt-bereich, .twt-k-haupt-bereich { grid-template-columns: 160px minmax(0, 1fr); }
.twt-k-inspektor { position: static; max-height: none; }
}
@container twt-k (max-width: 680px) {
.twt-k.ist-leiste-zu .twt-k-haupt-bereich, .twt-k-haupt-bereich { grid-template-columns: 1fr; }
.twt-k-palette { position: static; max-height: 40vh; }
}
.twt-k:fullscreen { --twt-k-hoehe: calc(100vh - 110px); } .twt-k-beschriftungen { border: 1px solid #E2E8F0; border-radius: 10px; padding: .5rem .75rem; }
.twt-k-beschriftungen summary { cursor: pointer; font-weight: 700; font-size: .9375rem; min-height: 36px; display: flex; align-items: center; }
.twt-k-beschriftungen[open] { display: flex; flex-direction: column; gap: .6rem; padding-bottom: .75rem; }
.twt-k-ergebnis-block { display: flex; flex-direction: column; gap: .1rem; }
.twt-k-ergebnis-block .twt-k-label { font-size: .75rem; }
.twt-k-kopf span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :root[data-theme="dark"] .twt-k { --twt-navy: #E2E8F0; --twt-blau: #38BDF8; --twt-grau: #94A3B8; --twt-linie: #334155; }
:root[data-theme="dark"] .twt-k button, :root[data-theme="dark"] .twt-k-auswahl, :root[data-theme="dark"] .twt-k input { background: #111A2E; color: #E2E8F0; border-color: #334155; }
:root[data-theme="dark"] .twt-k button:hover { border-color: #94A3B8; }
:root[data-theme="dark"] .twt-k .twt-k-haupt { background: #38BDF8; border-color: #38BDF8; color: #0B1220; }
:root[data-theme="dark"] .twt-k .twt-k-haupt:hover { background: #7DD3FC; }
:root[data-theme="dark"] .twt-k-palette, :root[data-theme="dark"] .twt-k-inspektor { background: #111A2E; border-color: #1E293B; }
:root[data-theme="dark"] .twt-k .twt-k-palette button { border-color: #1E293B; }
:root[data-theme="dark"] .twt-k .twt-k-palette button.ist-passend { background: #0C2A3E; border-color: #38BDF8; }
:root[data-theme="dark"] .twt-k-flaeche { background-color: #0B1220; background-image: radial-gradient(#1E293B 1px, transparent 1px); border-color: #1E293B; }
:root[data-theme="dark"] .twt-k-knoten { background: #111A2E; border-color: #334155; box-shadow: 0 1px 0 #020617; }
:root[data-theme="dark"] .twt-k-knoten.ist-gewaehlt { border-color: #38BDF8; }
:root[data-theme="dark"] .twt-k-knoten--ergebnis { background: #0C2A3E; }
:root[data-theme="dark"] .twt-k-kopf, :root[data-theme="dark"] .twt-k-zeile--aus { border-color: #1E293B; }
:root[data-theme="dark"] .twt-k-zeile--aus { background: #0F172A; }
:root[data-theme="dark"] .twt-k-port { border-color: #111A2E; box-shadow: 0 0 0 1px #475569; }
:root[data-theme="dark"] .twt-k-eingang, :root[data-theme="dark"] .twt-k-beschriftungen { border-color: #1E293B; }
:root[data-theme="dark"] .twt-k-ergebnisse > div { background: #0C2A3E; }
:root[data-theme="dark"] .twt-k .twt-k-loeschen { color: #FCA5A5; border-color: #7F1D1D; }
:root[data-theme="dark"] .twt-k:fullscreen { background: #0B1220; }
:root[data-theme="dark"] .twt-datenschutz { background: #0C2A3E; border-color: #1E3A5F; color: #E2E8F0; }
:root[data-theme="dark"] .twt-gen-form :is(input, select, textarea) { background: #111A2E; color: #E2E8F0; border-color: #334155; }
:root[data-theme="dark"] .twt-gen-form textarea:disabled { background: #0F172A; color: #94A3B8; }
:root[data-theme="dark"] .twt-gen-form .twt-zustimmung { background: #2A1A0A; border-color: #9A5B13; color: #FDE68A; }
:root[data-theme="dark"] .twt-gen-form .twt-zustimmung.ist-bestaetigt, :root[data-theme="dark"] .twt-gen-form .twt-zustimmung:has(input:checked) { background: #0F2E1D; border-color: #166534; color: #BBF7D0; }
:root[data-theme="dark"] .twt-gen-kopieren { background: #38BDF8; color: #0B1220; }
:root[data-theme="dark"] .twt-gen-kopieren:hover { background: #7DD3FC; }
:root[data-theme="dark"] .twt-gen-status, :root[data-theme="dark"] .twt-gen-hinweis { color: #94A3B8; } .twt-ketten-editor:empty, .twt-ketten-editor:has(> noscript:only-child) { min-height: max(620px, calc(100vh - 110px)); }
.twt-gen-vorschau { min-height: 420px; } .twt-k, .twt-ketten-editor { max-width: 100%; min-width: 0; }
.twt-k-haupt-bereich > * { min-width: 0; }
.twt-k-leiste, .twt-k-gruppe { min-width: 0; max-width: 100%; }
.twt-k-auswahl { max-width: 100%; }
.twt-k-status .twt-k-meldung-knopf { min-height: 36px; margin-left: .25rem; padding: 0 .8rem; font-size: .875rem; }
.twt-k-status:has(.twt-k-meldung-knopf) { max-width: none; } .twt-k .twt-k-status--erfolg, .twt-k .twt-k-status--fehler {
display: flex; align-items: flex-start; gap: .8rem;
max-width: 820px; padding: .9rem 1rem; border-radius: 12px; border: 1px solid;
font-size: .9688rem; line-height: 1.5;
}
.twt-k .twt-k-status--erfolg { background: #F0FDF4; border-color: #86EFAC; color: #14532D; }
.twt-k .twt-k-status--fehler { background: #FEF2F2; border-color: #FCA5A5; color: #7F1D1D; }
.twt-k-status-symbol { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-weight: 800; color: #fff; }
.twt-k-status--erfolg .twt-k-status-symbol { background: #16A34A; }
.twt-k-status--fehler .twt-k-status-symbol { background: #DC2626; }
.twt-k-status-inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .6rem; }
.twt-k-status-inhalt p { margin: 0; }
.twt-k-status-link { display: flex; gap: .5rem; flex-wrap: wrap; }
.twt-k .twt-k-status-link input { flex: 1 1 260px; min-width: 0; padding: 0 .75rem; font-size: .875rem; color: #14532D; background: #fff; border-color: #86EFAC; }
.twt-k .twt-k-status-link .twt-k-haupt { white-space: nowrap; }
.twt-k .twt-k-status-zu { flex-shrink: 0; min-height: 32px; width: 32px; padding: 0; font-size: 1.25rem; line-height: 1; color: inherit; background: transparent; border: none; }
.twt-k .twt-k-status-zu:hover { background: rgba(0, 0, 0, .06); }
.twt-k .twt-k-meldung-knopf { align-self: flex-start; }
:root[data-theme="dark"] .twt-k .twt-k-status--erfolg { background: #0F2E1D; border-color: #166534; color: #BBF7D0; }
:root[data-theme="dark"] .twt-k .twt-k-status--fehler { background: #3B1219; border-color: #7F1D1D; color: #FCA5A5; }
:root[data-theme="dark"] .twt-k .twt-k-status-link input { color: #E2E8F0; background: #0B1220; border-color: #166534; }
:root[data-theme="dark"] .twt-k .twt-k-status-zu:hover { background: rgba(255, 255, 255, .08); }
@media print { .twt-k .twt-k-status--erfolg, .twt-k .twt-k-status--fehler { display: none; } } .twt-k .twt-k-status--erfolg, .twt-k .twt-k-status--fehler { max-width: none; width: 100%; box-sizing: border-box; }
.twt-k .twt-k-status-link input { flex: 1 1 auto; }
.twt-k .twt-k-kopieren { display: inline-flex; align-items: center; gap: .5rem; }
.twt-k .twt-k-kopieren svg { flex-shrink: 0; } @keyframes twtLinkNeu { from { box-shadow: 0 0 0 4px rgba(34, 197, 94, .45); } to { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.twt-k .twt-k-status-link input.ist-neu { animation: twtLinkNeu 1.2s ease-out; }
@media (prefers-reduced-motion: reduce) { .twt-k .twt-k-status-link input.ist-neu { animation: none; } } .twt-k .twt-k-status--erfolg:has(.twt-k-status-link) { align-items: center; }
.twt-k .twt-k-status-inhalt:has(.twt-k-status-link) {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
align-items: center;
gap: .75rem 1.5rem;
}
.twt-k .twt-k-status-inhalt:has(.twt-k-status-link) > .twt-k-meldung-knopf { grid-column: 1 / -1; }
.twt-k .twt-k-status-link { flex-wrap: nowrap; align-items: center; }
.twt-k .twt-k-status-link input { flex: 1 1 auto; min-width: 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.twt-k .twt-k-status-link .twt-k-kopieren { flex-shrink: 0; }
@container twt-k (max-width: 900px) {
.twt-k .twt-k-status-inhalt:has(.twt-k-status-link) { grid-template-columns: 1fr; }
}
@container twt-k (max-width: 480px) {
.twt-k .twt-k-status-link { flex-wrap: wrap; }
.twt-k .twt-k-status-link .twt-k-kopieren { flex: 1 1 100%; justify-content: center; }
} .twt-k-neben { margin: -.5rem 0 0; font-size: .875rem; color: var(--twt-grau); }
.twt-k-neben:empty { display: none; }
@media print { .twt-k-neben { display: none; } } .twt-k-flaeche { background-attachment: local; background-position: -10px -10px; }
.twt-k.ist-raster .twt-k-flaeche { background-image: radial-gradient(#94A3B8 1.5px, transparent 1.5px); }
:root[data-theme="dark"] .twt-k.ist-raster .twt-k-flaeche { background-image: radial-gradient(#475569 1.5px, transparent 1.5px); }
.twt-k .twt-k-raster { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 .4rem; font-size: .9375rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.twt-k .twt-k-raster input { width: 18px; min-height: 0; height: 18px; margin: 0; accent-color: var(--twt-blau); cursor: pointer; } .twt-k-flaeche-rahmen { position: relative; }
.twt-k .twt-k-flaeche-rahmen > .twt-k-raster {
position: absolute; top: .6rem; right: 1.4rem; z-index: 4;
min-height: 36px; padding: 0 .7rem; font-size: .875rem;
background: #FFFFFF; border: 1px solid var(--twt-linie); border-radius: 8px;
box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}
:root[data-theme="dark"] .twt-k .twt-k-flaeche-rahmen > .twt-k-raster { background: #111A2E; border-color: #334155; color: #E2E8F0; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.twt-k:fullscreen .twt-k-flaeche-rahmen > .twt-k-raster { top: .8rem; }
@media print { .twt-k .twt-k-raster { display: none; } } .twt-k { --art-eingabe: #0284C7; --art-rechner: #D97706; --art-ausgabe: #16A34A; }
:root[data-theme="dark"] .twt-k { --art-eingabe: #38BDF8; --art-rechner: #FBBF24; --art-ausgabe: #4ADE80; }
.twt-k-art--eingabe { --art: var(--art-eingabe); }
.twt-k-art--rechner { --art: var(--art-rechner); }
.twt-k-art--ausgabe { --art: var(--art-ausgabe); }
.twt-k .twt-k-palette {
overflow-x: hidden; overflow-y: auto;
scrollbar-width: thin; scrollbar-color: var(--twt-linie) transparent; scrollbar-gutter: stable;
}
.twt-k .twt-k-palette::-webkit-scrollbar { width: 8px; }
.twt-k .twt-k-palette::-webkit-scrollbar-thumb { background: var(--twt-linie); border-radius: 8px; }
.twt-k .twt-k-palette::-webkit-scrollbar-track { background: transparent; }
.twt-k-pgruppe { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--twt-linie); }
.twt-k-pgruppe:first-of-type { margin-top: .5rem; }
.twt-k .twt-k-pgruppe h3 {
display: flex; align-items: center; gap: .45rem; margin: 0 0 .5rem;
font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--art);
}
.twt-k .twt-k-pgruppe h3::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--art); flex-shrink: 0; }
.twt-k .twt-k-palette button {
display: block; width: 100%; min-width: 0; min-height: 40px;
padding: .45rem .6rem .45rem .7rem; line-height: 1.25;
white-space: normal; overflow-wrap: anywhere; hyphens: auto;
border-left: 4px solid var(--art);
}
.twt-k .twt-k-palette button.ist-passend { border-color: var(--art); background: color-mix(in srgb, var(--art) 12%, #FFFFFF); }
:root[data-theme="dark"] .twt-k .twt-k-palette button.ist-passend { background: color-mix(in srgb, var(--art) 16%, #111A2E); border-color: var(--art); }
.twt-k .twt-k-palette button:disabled { border-left-color: var(--art); border-left-style: solid; } .twt-k .twt-k-knoten.twt-k-art--eingabe, .twt-k .twt-k-knoten.twt-k-art--rechner, .twt-k .twt-k-knoten.twt-k-art--ausgabe { border-top: 3px solid var(--art); }
.twt-k .twt-k-knoten .twt-k-art { color: var(--art); font-weight: 700; } .twt-k-haupt-bereich { transition: grid-template-columns .28s ease; }
.twt-k.ist-leiste-zu .twt-k-haupt-bereich { grid-template-columns: 176px minmax(0, 1fr) 44px; }
.twt-k-seite { position: sticky; top: .5rem; align-self: start; min-width: 0; }
.twt-k-seite > .twt-k-inspektor { position: static; max-height: var(--twt-k-hoehe); overflow-y: auto; } .twt-k .twt-k-seite-knopf {
position: absolute; left: -16px; top: 14px; z-index: 5;
display: inline-flex; align-items: center; justify-content: center;
width: 32px; min-height: 32px; height: 32px; padding: 0;
color: var(--twt-navy); background: #FFFFFF; border: 1px solid var(--twt-linie); border-radius: 50%;
box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
}
.twt-k .twt-k-seite-knopf:hover { border-color: var(--twt-blau); color: var(--twt-blau); } .twt-k.ist-leiste-zu .twt-k-seite-knopf {
position: static; flex-direction: column; gap: .6rem;
width: 44px; height: auto; min-height: 180px; padding: .8rem 0;
border-radius: 12px; box-shadow: none;
}
.twt-k-seite-text { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .8125rem; font-weight: 700; letter-spacing: .03em; }
.twt-k.ist-leiste-zu .twt-k-inspektor { display: none; }
:root[data-theme="dark"] .twt-k .twt-k-seite-knopf { color: #E2E8F0; background: #111A2E; border-color: #334155; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
:root[data-theme="dark"] .twt-k .twt-k-seite-knopf:hover { border-color: #38BDF8; color: #38BDF8; }
@media (prefers-reduced-motion: reduce) { .twt-k-haupt-bereich { transition: none; } } @container twt-k (max-width: 1080px) {
.twt-k.ist-leiste-zu .twt-k-haupt-bereich { grid-template-columns: 160px minmax(0, 1fr); }
.twt-k-seite { grid-column: 1 / -1; position: static; }
.twt-k .twt-k-seite-knopf { left: auto; right: 12px; top: 12px; }
.twt-k.ist-leiste-zu .twt-k-seite-knopf { flex-direction: row; width: 100%; min-height: 44px; padding: 0 1rem; justify-content: flex-start; }
.twt-k.ist-leiste-zu .twt-k-seite-text { writing-mode: horizontal-tb; transform: none; }
}
@container twt-k (max-width: 680px) {
.twt-k.ist-leiste-zu .twt-k-haupt-bereich { grid-template-columns: 1fr; }
}
@media print { .twt-k-seite-knopf { display: none !important; } } .twt-datenschutz, .twt-rechtshinweis { box-sizing: border-box; max-width: 100%; }
.is-layout-constrained > :is(.twt-datenschutz, .twt-rechtshinweis) { box-sizing: border-box; } .twt-k .twt-k-status--hinweis {
display: flex; align-items: flex-start; gap: .8rem; width: 100%; box-sizing: border-box;
padding: .9rem 1rem; border-radius: 12px; border: 1px solid #FCD34D; background: #FFFBEB; color: #78350F;
font-size: .9688rem; line-height: 1.5;
}
.twt-k-status--hinweis .twt-k-status-symbol { background: #D97706; font-style: italic; font-family: Georgia, serif; }
:root[data-theme="dark"] .twt-k .twt-k-status--hinweis { background: #2A1F07; border-color: #92400E; color: #FDE68A; }
.twt-k-vorschlaege { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; }
.twt-k-vorschlaege-titel { flex: 0 0 100%; font-size: .8125rem; font-weight: 700; opacity: .85; }
.twt-k .twt-k-vorschlag { min-height: 36px; padding: 0 .8rem; font-size: .875rem; font-weight: 600; border-radius: 18px; }
.twt-k .twt-k-vorschlag--neu { border-style: dashed; } .twt-k-flaeche-rahmen > .twt-k-schalter { position: absolute; top: .6rem; right: 1.4rem; z-index: 4; display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
.twt-k .twt-k-schalter > .twt-k-raster {
min-height: 36px; padding: 0 .7rem; font-size: .875rem;
background: #FFFFFF; border: 1px solid var(--twt-linie); border-radius: 8px;
box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}
:root[data-theme="dark"] .twt-k .twt-k-schalter > .twt-k-raster { background: #111A2E; border-color: #334155; color: #E2E8F0; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
@media print { .twt-k-schalter { display: none !important; } } .twt-k-flaeche-rahmen > .twt-k-schalter { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; max-width: calc(100% - 2.8rem); }
@container twt-k (max-width: 560px) {
.twt-k-flaeche-rahmen > .twt-k-schalter { flex-direction: column; align-items: flex-end; }
} .twt-k-optionen { display: flex; flex-direction: column; gap: .25rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--twt-linie); }
.twt-k-optionen-titel { margin: 0 0 .25rem !important; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--twt-grau); }
.twt-k .twt-k-option { display: flex; align-items: center; gap: .55rem; min-height: 40px; font-size: .9375rem; font-weight: 600; cursor: pointer; }
.twt-k .twt-k-option input { flex-shrink: 0; width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--twt-blau); cursor: pointer; }
@media print { .twt-k-optionen { display: none !important; } } .twt-k .twt-k-status--hinweis { max-width: none; width: 100%; }
.twt-k .twt-k-status--hinweis .twt-k-status-inhalt > p { max-width: 90ch; } .twt-generator { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); width: 100%; }
.is-layout-constrained > .twt-generator { margin-left: auto !important; margin-right: auto !important; }
.twt-gen-vorschau-bereich { min-width: 0; }
@media (max-width: 960px) { .twt-generator { grid-template-columns: 1fr; } }.twt-rechner, .twt-liste, .twt-suche, .twt-anzeige, .twt-karussell, .twt-box, .twt-brotkrumen {
--twt-navy: var(--wp--preset--color--navy, #0F172A);
--twt-blau: var(--wp--preset--color--blau, #0369A1);
--twt-blau-dunkel: var(--wp--preset--color--blau-dunkel, #075985);
--twt-grau: var(--wp--preset--color--text-grau, #475569);
--twt-linie: var(--wp--preset--color--linie, #CBD5E1);
--twt-flaeche: var(--wp--preset--color--flaeche, #F1F5F9);
--twt-weiss: #FFFFFF;
box-sizing: border-box;
}
.twt-rechner *, .twt-liste *, .twt-suche *, .twt-anzeige *, .twt-karussell * { box-sizing: border-box; }
:where(.twt-rechner, .twt-liste, .twt-suche, .twt-karussell) :is(button, input, select, a, summary):focus-visible {
outline: 3px solid var(--twt-blau);
outline-offset: 2px;
}
.twt-hinweis { padding: 1rem; background: #FEF3C7; border-radius: 8px; } .twt-rechner {
background: var(--twt-weiss);
border: 1px solid var(--twt-linie);
border-radius: 14px;
padding: clamp(1.25rem, 3vw, 1.75rem);
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-block: 1.5rem;
}
.twt-rechner-form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem 1.25rem;
margin: 0;
}
.twt-feld { display: flex; flex-direction: column; gap: .4rem; }
.twt-feld--auswahl { grid-column: span 2; }
@media (max-width: 480px) { .twt-feld--auswahl { grid-column: auto; } }
.twt-feld label { font-weight: 700; font-size: 1rem; }
.twt-eingabe { position: relative; display: flex; align-items: center; }
.twt-eingabe input, .twt-eingabe select {
width: 100%;
min-height: 52px;
padding: 0 .9rem;
font: inherit;
font-size: 1.25rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--twt-navy);
background: var(--twt-weiss);
border: 2px solid #94A3B8;
border-radius: 10px;
}
.twt-eingabe select { font-size: 1rem; cursor: pointer; }
.twt-eingabe input:hover, .twt-eingabe select:hover { border-color: var(--twt-grau); }
.twt-einheit {
position: absolute; right: .9rem;
color: var(--twt-grau); font-weight: 600; pointer-events: none;
}
.twt-eingabe:has(.twt-einheit) input { padding-right: 3.8rem; }
.twt-werte {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
margin: 0;
border: 1px solid #E2E8F0;
border-radius: 12px;
overflow: hidden;
}
.twt-wert { padding: 1rem 1.1rem; border-right: 1px solid #E2E8F0; border-bottom: 1px solid #E2E8F0; margin-right: -1px; margin-bottom: -1px; }
.twt-wert--hervor { background: #F0F9FF; }
.twt-wert dt { font-size: .875rem; font-weight: 600; color: var(--twt-grau); }
.twt-wert dd { margin: .2rem 0 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.twt-text { margin: 1rem 0 0; padding: 1rem 1.1rem; background: var(--twt-flaeche); border-radius: 10px; }
.twt-fehler { margin: 0; padding: 1rem 1.1rem; background: #FEF2F2; color: #991B1B; border-radius: 10px; font-weight: 600; }
.twt-skala { margin-top: 1.25rem; }
.twt-skala-balken { position: relative; display: flex; height: 14px; }
.twt-skala-teil--0 { background: #BAE6FD; border-radius: 7px 0 0 7px; }
.twt-skala-teil--1 { background: #38BDF8; }
.twt-skala-teil--2 { background: var(--twt-blau); border-radius: 0 7px 7px 0; }
.twt-skala-marke { position: absolute; top: -7px; bottom: -7px; width: 4px; margin-left: -2px; background: var(--twt-navy); border-radius: 2px; }
.twt-skala-text { display: flex; margin-top: .5rem; font-size: .875rem; color: var(--twt-grau); }
.twt-skala-text span:last-child { text-align: right; }
.twt-formel { border-top: 1px solid #E2E8F0; padding-top: 1rem; color: var(--twt-grau); }
.twt-formel summary { cursor: pointer; font-weight: 700; color: var(--twt-navy); min-height: 44px; display: flex; align-items: center; }
.twt-formel p { margin: .5rem 0 0; } .twt-suche { display: flex; flex-direction: column; gap: .6rem; max-width: 920px; margin-block: 1.5rem; }
.twt-suche label { font-weight: 700; }
.twt-suche-zeile { display: flex; gap: .6rem; }
.twt-suche-input {
flex: 1; min-width: 0; min-height: 60px;
padding: 0 1.1rem;
font: inherit; font-size: 1.125rem;
color: var(--twt-navy);
background: var(--twt-weiss);
border: 2px solid var(--twt-linie);
border-radius: 10px;
}
.twt-suche-zeile button {
min-height: 60px; padding: 0 1.6rem;
font: inherit; font-weight: 700; font-size: 1.0625rem;
color: var(--twt-weiss); background: var(--twt-blau);
border: none; border-radius: 10px; cursor: pointer;
}
.twt-suche-zeile button:hover { background: var(--twt-blau-dunkel); }
.twt-suchbegriffe { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding-top: .3rem; }
.twt-suchbegriffe span { font-size: .9375rem; opacity: .85; margin-right: .2rem; }
.twt-suchbegriffe button {
min-height: 44px; padding: 0 1rem;
font: inherit; font-size: .9375rem; font-weight: 600;
color: inherit; background: transparent;
border: 1px solid #64748B; border-radius: 22px; cursor: pointer;
}
.twt-suchbegriffe button:hover { border-color: currentColor; } .tw-hero .twt-suche-input { border-color: var(--twt-weiss); }
.tw-hero .twt-suche :focus-visible { outline-color: #38BDF8; } .twt-liste { display: flex; flex-direction: column; gap: 1.25rem; }
.twt-liste .twt-suche { margin-block: 0 .5rem; }
.twt-liste .twt-suche label { color: var(--twt-navy); }
.twt-liste-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.twt-filter { display: flex; flex-wrap: wrap; gap: .5rem; }
.twt-filter button {
min-height: 44px; padding: 0 1.1rem;
font: inherit; font-size: .9375rem; font-weight: 600;
color: var(--twt-navy); background: var(--twt-weiss);
border: 1px solid var(--twt-linie); border-radius: 22px; cursor: pointer;
}
.twt-filter button:hover { border-color: var(--twt-navy); }
.twt-filter button[aria-pressed="true"] { background: var(--twt-navy); color: var(--twt-weiss); border-color: var(--twt-navy); }
.twt-anzahl { margin: 0; color: var(--twt-grau); }
.twt-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.25rem; }
.twt-karte {
position: relative;
display: flex; flex-direction: column; gap: .5rem;
min-height: 190px;
padding: 1.5rem;
background: var(--twt-weiss);
border: 1px solid var(--twt-linie);
border-radius: 12px;
transition: border-color .15s ease, box-shadow .15s ease;
}
.twt-karte[hidden] { display: none; }
.twt-karte:hover { border-color: var(--twt-blau); box-shadow: 0 2px 0 var(--twt-blau); }
.twt-karte p { margin: 0; }
.twt-karte-bereich { font-size: .875rem; font-weight: 600; color: var(--twt-grau); }
.twt-karte-titel { margin: 0; font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.twt-karte-titel a { color: var(--twt-navy); text-decoration: none; }
.twt-karte-titel a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.twt-karte-titel a:focus-visible { outline: none; }
.twt-karte:has(.twt-karte-titel a:focus-visible) { outline: 3px solid var(--twt-blau); outline-offset: 2px; }
.twt-karte-text { color: var(--twt-grau); flex-grow: 1; }
.twt-karte-marken { display: flex; flex-wrap: wrap; gap: .5rem; }
.twt-marke {
display: inline-flex; align-items: center; min-height: 28px; padding: 0 .6rem;
font-size: .8125rem; font-weight: 600;
color: var(--twt-navy); background: #E8ECF1; border-radius: 6px;
}
.twt-marke--verfuegbar { color: var(--twt-blau-dunkel); background: #E0F2FE; }
.twt-marke--in_arbeit { color: var(--twt-grau); background: var(--twt-weiss); border: 1px dashed #94A3B8; }
.twt-karte-anzeige { background: var(--twt-flaeche); border: 2px dashed #94A3B8; }
.twt-karte-anzeige:hover { box-shadow: none; }
.twt-leer { padding: 2rem; background: var(--twt-weiss); border: 1px dashed #94A3B8; border-radius: 12px; }
.twt-leer p { margin: 0 0 .5rem; }
.twt-zuruecksetzen {
min-height: 44px; margin-top: .5rem; padding: 0 1.1rem;
font: inherit; font-weight: 600; color: var(--twt-navy);
background: var(--twt-weiss); border: 1px solid var(--twt-navy); border-radius: 8px; cursor: pointer;
} .twt-anzeige, .twt-karussell { margin-block: 1.5rem 2.5rem; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.twt-anzeige-label {
margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .02em; color: var(--twt-grau);
align-self: flex-start;
}
.twt-anzeige .twt-anzeige-label, .twt-karussell-kopf { width: min(100%, var(--twt-breite, 100%)); }
.twt-anzeige { --twt-breite: 970px; }
.twt-anzeige--seitenleiste { --twt-breite: 300px; }
.twt-anzeige--beitrag { --twt-breite: 728px; }
.twt-anzeige .twt-anzeige-label { align-self: center; }
.twt-anzeige-flaeche {
width: min(100%, var(--twt-breite, 970px));
display: flex; align-items: center; justify-content: center;
overflow: hidden; border-radius: 8px;
}
.twt-anzeige-flaeche a { display: block; width: 100%; height: 100%; }
.twt-anzeige-bild { width: 100%; height: 100%; object-fit: cover; display: block; }
.twt-anzeige-text { font-weight: 700; }
.twt-platzhalter {
flex-direction: column; gap: .2rem; padding: .5rem;
background: var(--twt-weiss); border: 2px dashed #94A3B8;
color: var(--twt-grau); font-size: .9375rem; text-align: center;
}
.twt-platzhalter strong { color: #334155; } .twt-anzeige--banner-oben .twt-anzeige-flaeche { aspect-ratio: 970 / 90; }
.twt-anzeige--karussell .twt-anzeige-flaeche { aspect-ratio: 970 / 250; }
.twt-anzeige--seitenleiste .twt-anzeige-flaeche { aspect-ratio: 300 / 250; }
.twt-anzeige--beitrag .twt-anzeige-flaeche { aspect-ratio: 728 / 90; }
@media (max-width: 600px) {
.twt-anzeige--banner-oben .twt-anzeige-flaeche.twt-platzhalter,
.twt-anzeige--beitrag .twt-anzeige-flaeche.twt-platzhalter { aspect-ratio: auto; min-height: 90px; }
}
.twt-karussell { --twt-breite: 970px; }
.twt-karussell-kopf { display: flex; justify-content: space-between; font-size: .75rem; color: var(--twt-grau); }
.twt-karussell-kopf p { margin: 0; }
.twt-karussell-folien { width: min(100%, 970px); }
.twt-folie[hidden] { display: none; }
.twt-karussell-steuerung { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.twt-karussell-steuerung button {
min-width: 44px; min-height: 44px;
display: inline-flex; align-items: center; justify-content: center;
font: inherit; font-size: .875rem; font-weight: 600; color: var(--twt-navy);
background: var(--twt-weiss); border: 1px solid var(--twt-linie); border-radius: 22px; cursor: pointer;
}
.twt-karussell-steuerung .twt-pause { padding: 0 1rem; margin-left: .5rem; }
.twt-karussell-steuerung .twt-punkt { border: none; background: transparent; }
.twt-punkt span { display: block; width: 12px; height: 12px; border-radius: 6px; border: 2px solid #64748B; background: var(--twt-weiss); transition: width .15s ease; }
.twt-punkt[aria-current="true"] span { width: 28px; background: var(--twt-navy); border-color: var(--twt-navy); } .twt-brotkrumen { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .9375rem; color: var(--twt-grau); }
.twt-box { background: var(--twt-weiss); border: 1px solid var(--twt-linie); border-radius: 14px; padding: 1.5rem; }
.twt-box h2 { margin: 0 0 .75rem; font-size: 1.25rem; }
.twt-box ul { margin: 0; padding: 0; list-style: none; }
.twt-box li { border-top: 1px solid #E2E8F0; }
.twt-box li a { display: flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; }
.twt-box--dunkel { background: var(--twt-navy); color: var(--twt-weiss); border: none; }
.twt-box--dunkel p { margin: 0; color: #CBD5E1; }
.twt-box-link { margin: 0; font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
.twt-karte, .twt-punkt span { transition: none; }
}
.twt-weiter-link { margin: 0; font-weight: 600; }
.twt-rechner-gruppe > h3 { margin: 2rem 0 0; }
.twt-box--dunkel p + p { margin-top: 1rem; }
.twt-box-knopf { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; font-weight: 700; color: #0F172A; background: #fff; border-radius: 8px; text-decoration: none; }
.twt-box-knopf:hover { background: #E2E8F0; color: #0F172A; }
.is-layout-constrained > :is(.twt-liste, .twt-rechner-gruppe, .twt-anzeige--banner-oben, .twt-karussell) { max-width: var(--wp--style--global--wide-size, 1280px) !important; }
.twt-rechtshinweis { margin: 0; font-size: .8125rem; color: var(--twt-grau); }
.twt-rechtshinweis a { color: inherit; } .twt-zustimmung { display: grid; grid-template-columns: 24px 1fr; gap: .6rem; align-items: start; margin: .75rem 0; padding: .9rem 1rem; border-radius: 10px; font-size: .9375rem; line-height: 1.5; }
.twt-zustimmung input { width: 22px; height: 22px; margin: .15rem 0 0; cursor: pointer; accent-color: #0369A1; }
.twt-zustimmung label { cursor: pointer; }
.twt-box--dunkel .twt-zustimmung { background: #1E293B; color: #E2E8F0; }
.twt-box--dunkel .twt-zustimmung a { color: #7DD3FC; }
.twt-box--dunkel .twt-zustimmung input { accent-color: #7DD3FC; }
.twt-box-knopf { border: none; font: inherit; cursor: pointer; }
.twt-box-knopf:disabled { opacity: .45; cursor: not-allowed; }
.twt-box-knopf:focus-visible { outline: 3px solid #7DD3FC; outline-offset: 2px; }
.twt-zustimmung-hinweis { margin: .25rem 0 0; font-size: .875rem; color: #CBD5E1; min-height: 1.3em; } :root[data-theme="dark"] .twt-rechner, .twt-w.ist-dunkel .twt-rechner, :root[data-theme="dark"] .twt-liste, .twt-w.ist-dunkel .twt-liste, :root[data-theme="dark"] .twt-suche, .twt-w.ist-dunkel .twt-suche, :root[data-theme="dark"] .twt-anzeige, .twt-w.ist-dunkel .twt-anzeige, :root[data-theme="dark"] .twt-karussell, .twt-w.ist-dunkel .twt-karussell, :root[data-theme="dark"] .twt-box, .twt-w.ist-dunkel .twt-box, :root[data-theme="dark"] .twt-brotkrumen, .twt-w.ist-dunkel .twt-brotkrumen {
--twt-navy: #E2E8F0; --twt-blau: #38BDF8; --twt-blau-dunkel: #7DD3FC; --twt-grau: #94A3B8;
--twt-linie: #334155; --twt-flaeche: #1E293B; --twt-weiss: #111A2E;
}
:root[data-theme="dark"] .twt-werte, .twt-w.ist-dunkel .twt-werte, :root[data-theme="dark"] .twt-wert, .twt-w.ist-dunkel .twt-wert, :root[data-theme="dark"] .twt-formel, .twt-w.ist-dunkel .twt-formel, :root[data-theme="dark"] .twt-box li, .twt-w.ist-dunkel .twt-box li { border-color: #334155; }
:root[data-theme="dark"] .twt-wert--hervor, .twt-w.ist-dunkel .twt-wert--hervor { background: #0C2A3E; }
:root[data-theme="dark"] .twt-fehler, .twt-w.ist-dunkel .twt-fehler { background: #3B1219; color: #FCA5A5; }
:root[data-theme="dark"] .twt-marke, .twt-w.ist-dunkel .twt-marke { background: #1E293B; color: #E2E8F0; }
:root[data-theme="dark"] .twt-marke--verfuegbar, .twt-w.ist-dunkel .twt-marke--verfuegbar { background: #0C2A3E; color: #7DD3FC; }
:root[data-theme="dark"] .twt-platzhalter strong, .twt-w.ist-dunkel .twt-platzhalter strong { color: #CBD5E1; }
:root[data-theme="dark"] .twt-box--dunkel, .twt-w.ist-dunkel .twt-box--dunkel { background: #020617; color: #E2E8F0; border: 1px solid #1E293B; }
:root[data-theme="dark"] .twt-karte:hover, .twt-w.ist-dunkel .twt-karte:hover { box-shadow: 0 2px 0 #38BDF8; }
:root[data-theme="dark"] .twt-skala-teil--0, .twt-w.ist-dunkel .twt-skala-teil--0 { background: #0E4A6B; }
:root[data-theme="dark"] .twt-skala-teil--1, .twt-w.ist-dunkel .twt-skala-teil--1 { background: #1D7FB0; }
:root[data-theme="dark"] .twt-skala-teil--2, .twt-w.ist-dunkel .twt-skala-teil--2 { background: #38BDF8; }
.twt-hinweis { color: #0F172A; } .twt-glossar { display: flex; flex-direction: column; gap: 1.5rem; --twt-navy: var(--wp--preset--color--navy, #0F172A); --twt-blau: var(--wp--preset--color--blau, #0369A1); --twt-grau: var(--wp--preset--color--text-grau, #475569); --twt-linie: var(--wp--preset--color--linie, #CBD5E1); --twt-weiss: var(--wp--preset--color--weiss, #FFFFFF); }
.twt-glossar-kopf { display: flex; flex-direction: column; gap: .4rem; }
.twt-glossar-kopf label { font-weight: 700; }
.twt-glossar-filter { min-height: 52px; padding: 0 1rem; font: inherit; font-size: 1.0625rem; color: var(--twt-navy); background: var(--twt-weiss); border: 2px solid var(--twt-linie); border-radius: 10px; max-width: 520px; }
.twt-glossar-filter:focus-visible { outline: 3px solid var(--twt-blau); outline-offset: 2px; }
.twt-glossar-abc { display: flex; flex-wrap: wrap; gap: .3rem; position: sticky; top: 0; z-index: 2; padding: .5rem 0; background: var(--wp--preset--color--hell, #F8FAFC); }
.twt-glossar-abc a, .twt-glossar-abc span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; border-radius: 8px; font-weight: 700; }
.twt-glossar-abc a { text-decoration: none; background: var(--twt-weiss); border: 1px solid var(--twt-linie); color: var(--twt-navy); }
.twt-glossar-abc a:hover { border-color: var(--twt-blau); color: var(--twt-blau); }
.twt-glossar-abc span { color: var(--twt-linie); }
.twt-glossar-gruppe { scroll-margin-top: 4rem; }
.twt-glossar-gruppe[hidden], .twt-glossar-eintrag[hidden] { display: none; }
.twt-glossar-gruppe h2 { margin: 0 0 .5rem; font-size: 1.5rem; color: var(--twt-blau); }
.twt-glossar-gruppe dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: .75rem; }
.twt-glossar-eintrag { padding: 1rem 1.1rem; background: var(--twt-weiss); border: 1px solid var(--twt-linie); border-radius: 12px; }
.twt-glossar-eintrag dt { font-weight: 700; font-size: 1.0625rem; }
.twt-glossar-eintrag dt a { text-decoration: none; }
.twt-glossar-eintrag dd { margin: .3rem 0 0; color: var(--twt-grau); font-size: .9375rem; line-height: 1.5; }
.is-layout-constrained > .twt-glossar { max-width: var(--wp--style--global--wide-size, 1280px) !important; }
.twt-begriff-info { display: flex; flex-direction: column; gap: 1rem; margin-block: 2rem 1rem; }
.twt-begriff-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.twt-begriff-chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .9rem; border: 1px solid var(--twt-linie, #CBD5E1); border-radius: 20px; text-decoration: none; font-weight: 600; font-size: .9375rem; }
.twt-begriff-chips a:hover { border-color: currentColor; }
.twt-box--dunkel .twt-begriff-chips a { border-color: #334155; }
a.twt-glossar-link { text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a.twt-glossar-link:hover { text-decoration-style: solid; } .twt-erklaerung { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--wp--preset--color--linie, #CBD5E1); }
.twt-erklaerung h2 { margin: 1.75rem 0 .75rem; }
.twt-erklaerung h2:first-child { margin-top: 0; }
.twt-beispiel { margin: 1.25rem 0; padding: 1.1rem 1.25rem; border-left: 4px solid var(--wp--preset--color--blau, #0369A1); background: var(--wp--preset--color--flaeche, #F1F5F9); border-radius: 0 12px 12px 0; }
.twt-beispiel h3 { margin: 0 0 .35rem; font-size: 1rem; text-transform: none; }
.twt-beispiel p { margin: 0; }
.twt-faq { display: flex; flex-direction: column; gap: .75rem; }
.twt-faq-eintrag { padding: 1rem 1.25rem; background: var(--wp--preset--color--weiss, #FFFFFF); border: 1px solid var(--wp--preset--color--linie, #CBD5E1); border-radius: 12px; }
.twt-faq-eintrag h3 { margin: 0 0 .35rem; font-size: 1.0625rem; }
.twt-faq-eintrag p { margin: 0; color: var(--wp--preset--color--text-grau, #475569); } .twt-kontakt, .twt-kontakt-erfolg {
--k-text: var(--wp--preset--color--navy, #0F172A); --k-grau: var(--wp--preset--color--text-grau, #475569);
--k-linie: var(--wp--preset--color--linie, #CBD5E1); --k-feld: var(--wp--preset--color--weiss, #FFFFFF); --k-blau: var(--wp--preset--color--blau, #0369A1);
display: flex; flex-direction: column; gap: 1.1rem; max-width: 760px; margin-block: 1.5rem;
}
.twt-kontakt * { box-sizing: border-box; }
.twt-kontakt-zeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1.1rem; }
.twt-kontakt-feld { display: flex; flex-direction: column; gap: .4rem; }
.twt-kontakt-feld label { font-weight: 700; }
.twt-kontakt :is(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], input[type="url"], select, textarea) {
width: 100%; min-height: 50px; padding: .65rem .85rem; font: inherit; color: var(--k-text);
background: var(--k-feld); border: 2px solid var(--k-linie); border-radius: 10px;
}
.twt-kontakt textarea { min-height: 170px; resize: vertical; line-height: 1.5; }
.twt-kontakt :is(input, select, textarea, button, a):focus-visible { outline: 3px solid var(--k-blau); outline-offset: 2px; }
.twt-kontakt [aria-invalid="true"] { border-color: #DC2626; }
.twt-kontakt-fehlertext { margin: 0; color: #B91C1C; font-size: .9375rem; font-weight: 600; }
.twt-kontakt-fehler { padding: 1rem 1.2rem; background: #FEF2F2; color: #7F1D1D; border: 1px solid #FCA5A5; border-radius: 10px; }
.twt-kontakt-fehler p { margin: .3rem 0 0; }
.twt-kontakt-zustimmung { display: grid; grid-template-columns: 22px 1fr; gap: .7rem; align-items: start; padding: .9rem 1rem; border: 1px solid var(--k-linie); border-radius: 10px; font-size: .9375rem; line-height: 1.5; }
.twt-kontakt-zustimmung.ist-fehler { border-color: #DC2626; }
.twt-kontakt-zustimmung input { width: 20px; height: 20px; margin: .15rem 0 0; accent-color: var(--k-blau); cursor: pointer; }
.twt-kontakt-zustimmung label { cursor: pointer; }
.twt-kontakt-hinweis { margin: 0; font-size: .875rem; color: var(--k-grau); }
.twt-kontakt-senden { align-self: flex-start; min-height: 50px; padding: 0 1.6rem; font: inherit; font-weight: 700; color: #fff; background: var(--k-blau); border: none; border-radius: 10px; cursor: pointer; }
.twt-kontakt-senden:hover { background: var(--wp--preset--color--blau-dunkel, #075985); }
.twt-kontakt-lockfeld { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.twt-kontakt-erfolg { padding: 1.4rem 1.5rem; background: #F0FDF4; border: 1px solid #86EFAC; border-radius: 12px; color: #14532D; }
.twt-kontakt-erfolg h2 { margin: 0; font-size: 1.4rem; }
.twt-kontakt-erfolg p { margin: 0; }
:root[data-theme="dark"] .twt-kontakt-senden { color: #0B1220; }
:root[data-theme="dark"] .twt-kontakt-fehler { background: #3B1219; color: #FCA5A5; border-color: #7F1D1D; }
:root[data-theme="dark"] .twt-kontakt-fehlertext { color: #FCA5A5; }
:root[data-theme="dark"] .twt-kontakt-erfolg { background: #0F2E1D; border-color: #166534; color: #BBF7D0; } .twt-suche-zufall {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem; flex-shrink: 0;
min-height: 60px; padding: 0 1.2rem;
font-weight: 700; font-size: 1.0625rem; text-decoration: none; white-space: nowrap;
color: var(--twt-navy); background: transparent;
border: 2px solid var(--twt-linie); border-radius: 10px;
}
.twt-suche-zufall:hover { border-color: currentColor; text-decoration: none; }
.tw-hero .twt-suche-zufall { color: #F8FAFC; border-color: rgba(248, 250, 252, .45); }
.tw-hero .twt-suche-zufall:hover { color: #F8FAFC; border-color: #F8FAFC; }
@media (prefers-reduced-motion: no-preference) {
.twt-wuerfel { transition: transform .35s ease; }
.twt-suche-zufall:hover .twt-wuerfel, .twt-suche-zufall:focus-visible .twt-wuerfel { transform: rotate(90deg); }
}
@media (max-width: 640px) {
.twt-suche-zeile { flex-wrap: wrap; }
.twt-suche-input { flex-basis: 100%; }
.twt-suche-zeile > button, .twt-suche-zufall { flex: 1 1 0; }
} .twt-platzhalter-gif { display: block; }
.twt-platzhalter-gif picture, .twt-platzhalter-gif img { display: block; width: 100%; height: 100%; object-fit: cover; }
.twt-platzhalter-gif:focus-visible { outline: 3px solid var(--twt-blau); outline-offset: 3px; } .twt-karussell { --twt-breite: 100%; }
.twt-anzeige--banner-oben { --twt-breite: 970px; }
.twt-karussell-folien { width: 100%; } .twt-karte-anzeige-rahmen { display: contents; }
.twt-karte-anzeige[hidden], .twt-anzeige-variante[hidden] { display: none !important; }
.twt-karte-logo { height: 44px; display: flex; align-items: center; }
.twt-karte-logo img { max-height: 44px; width: auto; max-width: 70%; object-fit: contain; }
.twt-karte-cta { margin-top: auto !important; }
.twt-karte-cta a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem; font-weight: 700; text-decoration: none; color: var(--twt-weiss); background: var(--twt-blau); border-radius: 8px; }
.twt-karte-cta a:hover { background: var(--twt-blau-dunkel); color: var(--twt-weiss); }
.twt-karte-anzeige-rahmen[hidden] { display: none !important; } .twt-karte-anzeige.twt-anzeige-variante { background: var(--twt-weiss); border: 1px solid var(--twt-linie); border-top: 4px solid #F59E0B; }
.twt-karte-anzeige.twt-anzeige-variante .twt-anzeige-label { display: inline-block; align-self: flex-start; padding: .15rem .5rem; font-size: .75rem; font-weight: 700; color: #78350F; background: #FEF3C7; border-radius: 6px; } .twt-preise { display: flex; flex-direction: column; gap: 1rem; margin-block: 1.5rem; }
.twt-tabelle-rahmen { overflow-x: auto; }
.twt-preistabelle { width: 100%; border-collapse: collapse; font-size: .9688rem; min-width: 640px; }
.twt-preistabelle :is(th, td) { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--wp--preset--color--linie, #CBD5E1); vertical-align: top; }
.twt-preistabelle thead th { font-size: .8125rem; color: var(--wp--preset--color--text-grau, #475569); }
.twt-preistabelle tbody th { font-weight: 700; }
.twt-preistabelle .twt-preis { white-space: nowrap; }
.twt-preistabelle .twt-preis strong { font-size: 1.125rem; }
.twt-frei { color: #15803D; font-weight: 600; }
.twt-voll { color: #B91C1C; font-weight: 600; }
:root[data-theme="dark"] .twt-frei { color: #86EFAC; }
:root[data-theme="dark"] .twt-voll { color: #FCA5A5; }
.twt-preise-hinweis { margin: 0; font-size: .875rem; color: var(--wp--preset--color--text-grau, #475569); }
.twt-rabatte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.twt-rabatte li { display: flex; flex-direction: column; gap: .2rem; padding: 1rem; background: var(--wp--preset--color--weiss, #fff); border: 1px solid var(--wp--preset--color--linie, #CBD5E1); border-radius: 12px; }
.twt-rabatte span { color: var(--wp--preset--color--blau, #0369A1); font-weight: 700; }
.twt-preisvorschau { padding: 1rem 1.2rem; background: var(--wp--preset--color--flaeche, #F1F5F9); border-left: 4px solid var(--wp--preset--color--blau, #0369A1); border-radius: 0 12px 12px 0; display: flex; flex-direction: column; gap: .35rem; }
.twt-preisvorschau[hidden] { display: none; }
.twt-preisvorschau p { margin: 0; display: flex; justify-content: space-between; gap: 1rem; }
.twt-preisvorschau .twt-pv-kopf { font-weight: 700; }
.twt-preisvorschau .twt-pv-summe { font-weight: 800; font-size: 1.125rem; border-top: 1px solid var(--wp--preset--color--linie, #CBD5E1); padding-top: .35rem; }
.twt-preisvorschau .twt-pv-hinweis { font-size: .8125rem; color: var(--wp--preset--color--text-grau, #475569); }
.twt-kontakt input[type="date"] { appearance: none; -webkit-appearance: none; line-height: 1.2; }
.twt-kontakt input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .75; }
:root[data-theme="dark"] .twt-kontakt input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
.twt-kontakt :is(input, select, textarea)::placeholder { color: var(--k-grau); opacity: .8; } .twt-laufzeit-tabelle td { white-space: nowrap; }
.twt-laufzeit-tabelle td strong { display: block; font-size: 1.0625rem; }
.twt-laufzeit-tabelle td small { display: block; font-size: .8125rem; color: var(--wp--preset--color--text-grau, #475569); }
.twt-laufzeit-tabelle thead th span { display: block; font-weight: 700; color: var(--wp--preset--color--blau, #0369A1); }
.twt-laufzeit-tabelle .twt-empfohlen { background: var(--wp--preset--color--flaeche, #F1F5F9); }
.twt-b2b-hinweis { margin: 0; padding: .8rem 1rem; font-size: .9375rem; background: var(--wp--preset--color--flaeche, #F1F5F9); border-radius: 10px; } .twt-kontakt input[type="file"] { width: 100%; padding: .9rem; font: inherit; color: var(--k-text); background: var(--k-feld); border: 2px dashed var(--k-linie); border-radius: 10px; cursor: pointer; }
.twt-kontakt input[type="file"]:hover { border-color: var(--k-blau); }
.twt-kontakt input[type="file"]::file-selector-button { margin-right: .9rem; padding: .55rem 1rem; font: inherit; font-weight: 700; color: #fff; background: var(--k-blau); border: none; border-radius: 8px; cursor: pointer; }
:root[data-theme="dark"] .twt-kontakt input[type="file"]::file-selector-button { color: #0B1220; }
.twt-kontakt input[type="file"][aria-invalid="true"] { border-color: #DC2626; }
.twt-dateiliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; font-size: .9375rem; }
.twt-dateiliste:empty { display: none; } .twt-formel summary {
list-style: none;
display: inline-flex; align-items: center; gap: .6rem;
min-height: 44px; padding: .5rem 1.1rem;
color: var(--twt-blau); background: var(--twt-flaeche);
border: 1px solid var(--twt-linie); border-radius: 999px;
cursor: pointer; user-select: none;
}
.twt-formel summary::-webkit-details-marker { display: none; }
.twt-formel summary::marker { content: ""; }
.twt-formel summary::before {
content: ""; flex-shrink: 0; width: .5em; height: .5em;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: translateX(-1px) rotate(-45deg);
}
.twt-formel summary::after { content: "einblenden"; font-weight: 500; font-size: .875em; color: var(--twt-grau); }
.twt-formel[open] summary::before { transform: translateY(-2px) rotate(45deg); }
.twt-formel[open] summary::after { content: "ausblenden"; }
.twt-formel summary:hover { border-color: currentColor; }
.twt-formel summary:focus-visible { outline: 3px solid var(--twt-blau); outline-offset: 2px; }
.twt-formel[open] p { margin-top: .9rem; }
@media (prefers-reduced-motion: no-preference) { .twt-formel summary::before { transition: transform .15s ease; } } form:tool-form-active { outline: 2px dashed var(--wp--preset--color--blau, #0369A1); outline-offset: 6px; border-radius: 12px; }
button:tool-submit-active { outline: 2px dashed #F59E0B; outline-offset: 3px; } .twt-rechner { min-height: var(--twt-hm, 0); box-sizing: border-box; }
@media (min-width: 782px) { .twt-rechner { min-height: var(--twt-h, 0); } } .twt-hp { --hp-grau: var(--wp--preset--color--text-grau, #475569); --hp-linie: var(--wp--preset--color--linie, #CBD5E1); }
.twt-hp-innen { box-sizing: border-box; width: 100%; max-width: var(--wp--style--global--wide-size, 1440px); margin: 0 auto; padding-inline: var(--wp--style--root--padding-left, 1.5rem) var(--wp--style--root--padding-right, 1.5rem); display: flex; align-items: center; gap: .75rem 1.25rem; flex-wrap: wrap; }
.twt-hp p { margin: 0; }
.twt-hp-marke { display: inline-flex; align-items: center; justify-content: center; background: #FFFFFF; border-radius: 8px; text-decoration: none; }
.twt-hp-logo { display: block; width: auto; object-fit: contain; }
.twt-hp-name { font-weight: 800; color: #0F172A; } .twt-hp--oben { background: var(--wp--preset--color--flaeche, #F1F5F9); border-bottom: 1px solid var(--hp-linie); }
.twt-hp--oben .twt-hp-innen { min-height: 48px; padding-block: .35rem; justify-content: flex-end; }
.twt-hp--oben .twt-hp-label { font-size: .8125rem; font-weight: 600; color: var(--hp-grau); }
.twt-hp--oben .twt-hp-marke { padding: .25rem .6rem; min-height: 36px; }
.twt-hp--oben .twt-hp-logo { height: 26px; max-width: 160px; } .twt-hp--unten { border-top: 1px solid var(--hp-linie); padding-block: 2rem; }
.twt-hp--unten .twt-hp-marke { padding: .8rem 1.2rem; }
.twt-hp--unten .twt-hp-logo { height: 52px; max-width: 220px; }
.twt-hp-text { flex: 1 1 320px; display: flex; flex-direction: column; gap: .25rem; }
.twt-hp--unten .twt-hp-label { font-size: .8125rem; font-weight: 700; letter-spacing: .02em; color: var(--hp-grau); text-transform: uppercase; }
.twt-hp-hinweis { font-size: .8125rem; color: var(--hp-grau); }
.twt-hp-knopf { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; font-weight: 700; text-decoration: none; border: 2px solid currentColor; border-radius: 10px; }
.twt-hp--frei { padding-block: 1rem; }
.twt-hp--frei .twt-hp-innen { font-size: .9375rem; color: var(--hp-grau); }
.twt-hp :is(a):focus-visible { outline: 3px solid var(--wp--preset--color--blau, #0369A1); outline-offset: 3px; }
:root[data-theme="dark"] .twt-hp--oben { background: #0B1220; border-color: #1E293B; }
:root[data-theme="dark"] .twt-hp--unten { border-color: #1E293B; }
@media (max-width: 600px) {
.twt-hp--oben .twt-hp-innen { justify-content: center; min-height: 44px; }
.twt-hp--oben .twt-hp-logo { height: 22px; }
} .twt-datenschutz, .twt-rechtshinweis, .twt-hinweis, .twt-leer { box-sizing: border-box; } .twt-ab-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 1rem 0 1.5rem; padding: .9rem 1.1rem; border: 1px dashed var(--wp--preset--color--linie, #CBD5E1); border-radius: 12px; }
.twt-ab-leiste p { flex: 1 1 280px; margin: 0; font-size: .9375rem; color: var(--wp--preset--color--text-grau, #475569); }
.twt-ab-knopf { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1.1rem; font-weight: 700; color: #fff; background: var(--wp--preset--color--blau, #0369A1); border-radius: 10px; text-decoration: none; }
.twt-ab-knopf:hover { color: #fff; background: var(--wp--preset--color--blau-dunkel, #075985); }
.twt-ab-knopf--klein { min-height: 38px; padding: 0 .85rem; font-size: .9375rem; }
:root[data-theme="dark"] .twt-ab-knopf, :root[data-theme="dark"] .twt-ab-knopf:hover { color: #0B1220; }
.twt-ab-box .twt-ab-vorschau img { display: block; width: 100%; max-width: 160px; height: auto; margin: 0 auto .6rem; border: 1px solid var(--wp--preset--color--linie, #CBD5E1); border-radius: 6px; box-shadow: 0 4px 14px rgba(15, 23, 42, .12); }
.twt-ab-uebersicht { display: flex; flex-direction: column; gap: 2rem; margin-block: 1.5rem; }
.is-layout-constrained > .twt-ab-uebersicht { max-width: var(--wp--style--global--wide-size, 1440px) !important; }
.twt-ab-mappe { display: grid; grid-template-columns: 170px 1fr; gap: 1.5rem; align-items: center; padding: 1.5rem; background: var(--wp--preset--color--flaeche, #F1F5F9); border-radius: 16px; }
.twt-ab-mappe img, .twt-ab-karte img { display: block; width: 100%; height: auto; border: 1px solid var(--wp--preset--color--linie, #CBD5E1); border-radius: 6px; background: #fff; box-shadow: 0 6px 18px rgba(15, 23, 42, .14); }
.twt-ab-mappe h2 { margin: .2rem 0 .5rem; }
.twt-ab-mappe p { margin: 0 0 .8rem; }
.twt-ab-marke { display: inline-block; padding: .15rem .6rem; font-size: .8125rem; font-weight: 700; color: #fff; background: var(--wp--preset--color--blau, #0369A1); border-radius: 6px; }
:root[data-theme="dark"] .twt-ab-marke { color: #0B1220; }
.twt-ab-meta { font-size: .875rem; color: var(--wp--preset--color--text-grau, #475569); }
.twt-ab-gruppe h2 { margin: 0 0 1rem; }
.twt-ab-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1rem; }
.twt-ab-karte { display: grid; grid-template-columns: 92px 1fr; gap: 1rem; padding: 1rem; background: var(--wp--preset--color--weiss, #fff); border: 1px solid var(--wp--preset--color--linie, #CBD5E1); border-radius: 12px; }
.twt-ab-inhalt h3 { margin: 0 0 .3rem; font-size: 1.1rem; }
.twt-ab-inhalt p { margin: 0 0 .5rem; font-size: .9375rem; }
.twt-ab-links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .6rem !important; }
.twt-ab-hinweis { margin: 0; font-size: .875rem; color: var(--wp--preset--color--text-grau, #475569); }
@media (max-width: 600px) { .twt-ab-mappe { grid-template-columns: 1fr; } .twt-ab-mappe-bild { max-width: 170px; } } .twt-marke--pdf { background: #FEF3C7; color: #78350F; }
:root[data-theme="dark"] .twt-marke--pdf { background: #3A2A0A; color: #FDE68A; } .twt-karte-marken:empty { display: none; } .twt-ab-logo { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; padding: 1.5rem; border: 2px dashed var(--wp--preset--color--linie, #CBD5E1); border-radius: 16px; }
.twt-ab-logo h2 { margin: .2rem 0 .5rem; }
.twt-ab-logo p { margin: 0 0 .6rem; }
.twt-ab-logo-feld { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.twt-ab-logo-feld input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.twt-ab-logo-feld input[type="file"]:focus-visible + .twt-ab-meta, .twt-ab-logo-feld label:focus-within { outline: 3px solid var(--wp--preset--color--blau, #0369A1); outline-offset: 3px; }
.twt-ab-knopf--hell { cursor: pointer; color: var(--wp--preset--color--blau, #0369A1); background: transparent; border: 2px solid currentColor; }
.twt-ab-knopf--hell:hover { color: #fff; background: var(--wp--preset--color--blau, #0369A1); }
:root[data-theme="dark"] .twt-ab-knopf--hell { color: #7DD3FC; background: transparent; }
:root[data-theme="dark"] .twt-ab-knopf--hell:hover { color: #0B1220; background: #7DD3FC; }
.twt-logo-status:empty { display: none; }
.twt-logo-status { font-weight: 600; color: #15803D; }
:root[data-theme="dark"] .twt-logo-status { color: #86EFAC; }
.twt-logo-vorschau { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1rem; background: #fff; border: 1px solid var(--wp--preset--color--linie, #CBD5E1); border-radius: 12px; }
.twt-logo-vorschau[hidden] { display: none; }
.twt-logo-vorschau img { display: block; max-width: 220px; max-height: 70px; width: auto; height: auto; }
.twt-logo-weg { min-height: 36px; padding: 0 .8rem; font: inherit; font-size: .875rem; color: #B91C1C; background: transparent; border: 1px solid #FCA5A5; border-radius: 8px; cursor: pointer; }
.twt-ab-logo-hinweis { font-weight: 700; color: #15803D; }
:root[data-theme="dark"] .twt-ab-logo-hinweis { color: #86EFAC; }
a[data-twt-pdf][aria-busy="true"] { opacity: .7; cursor: progress; }
@media (max-width: 700px) { .twt-ab-logo { grid-template-columns: 1fr; } } .twt-ab-datenschutz { box-sizing: border-box; margin: .4rem 0 0; padding: .9rem 1.1rem; background: #F0F9FF; border: 1px solid #BAE6FD; border-radius: 12px; color: #0F172A; font-size: .9375rem; line-height: 1.55; }
.twt-ab-datenschutz strong { display: block; margin-bottom: .2rem; }
.twt-ab-datenschutz p { margin: 0 !important; }
:root[data-theme="dark"] .twt-ab-datenschutz { background: #0C2A3E; border-color: #1E3A5F; color: #E2E8F0; } .twt-ab-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2rem; align-items: start; }
.twt-ab-haupt { display: flex; flex-direction: column; gap: 2rem; min-width: 0; }
.twt-ab-seite { position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow-y: auto; }
body.admin-bar .twt-ab-seite { top: calc(32px + 1.5rem); }
.twt-ab-seite .twt-ab-logo { grid-template-columns: 1fr; gap: 1rem; padding: 1.25rem; }
.twt-ab-seite .twt-ab-logo h2 { font-size: 1.35rem; }
.twt-ab-seite .twt-logo-vorschau { order: -1; }
.twt-ab-seite .twt-ab-logo > div:first-child { display: flex; flex-direction: column; }
@media (max-width: 1000px) {
.twt-ab-layout { grid-template-columns: 1fr; }
.twt-ab-seite { position: static; max-height: none; overflow: visible; order: -1; }
} .twt-ab-marke { align-self: flex-start; width: fit-content; }
.twt-logo-merken { margin: 0 0 .4rem; }
.twt-logo-merken label { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; font-weight: 600; cursor: pointer; }
.twt-logo-merken input { width: 18px; height: 18px; margin: 0; accent-color: var(--wp--preset--color--blau, #0369A1); } .twt-blase {
position: fixed; right: 1.25rem; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); z-index: 9000;
display: flex; align-items: flex-start; gap: .25rem; max-width: min(360px, calc(100vw - 2.5rem));
background: #FFFFFF; color: #0F172A; border: 1px solid #CBD5E1; border-radius: 14px;
box-shadow: 0 10px 30px rgba(15, 23, 42, .18); opacity: 0; transform: translateY(12px);
transition: opacity .25s ease, transform .25s ease;
}
.twt-blase[hidden] { display: none; }
.twt-blase.ist-sichtbar { opacity: 1; transform: none; }
.twt-blase-inhalt { display: flex; flex-direction: column; gap: .2rem; padding: .85rem .25rem .85rem 1rem; color: inherit; text-decoration: none; font-size: .9375rem; line-height: 1.45; }
a.twt-blase-inhalt:hover .twt-blase-text { text-decoration: underline; }
.twt-blase-marke { font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #0369A1; }
.twt-blase-zu { flex-shrink: 0; width: 36px; height: 36px; margin: .35rem .35rem 0 0; font-size: 1.25rem; line-height: 1; color: #475569; background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
.twt-blase-zu:hover { background: #F1F5F9; }
.twt-blase :focus-visible { outline: 3px solid #0369A1; outline-offset: 2px; border-radius: 8px; }
:root[data-theme="dark"] .twt-blase { background: #111A2E; color: #E2E8F0; border-color: #334155; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .twt-blase-marke { color: #7DD3FC; }
:root[data-theme="dark"] .twt-blase-zu { color: #CBD5E1; }
:root[data-theme="dark"] .twt-blase-zu:hover { background: #1E293B; }
@media (max-width: 600px) { .twt-blase { right: .75rem; left: .75rem; max-width: none; bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) { .twt-blase { transition: none; transform: none; } }
@media print { .twt-blase { display: none !important; } } .twt-blase { right: calc(1rem + 48px + .75rem); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 600px) {
.twt-blase { left: .75rem; right: calc(.75rem + 44px + .5rem); bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); }
} .twt-blase.ist-vorschau { outline: 2px dashed #F59E0B; outline-offset: 3px; }
.twt-blase-weiter { align-self: flex-start; margin-top: .4rem; min-height: 34px; padding: 0 .75rem; font: inherit; font-size: .8125rem; font-weight: 700; color: #0369A1; background: transparent; border: 1px solid currentColor; border-radius: 8px; cursor: pointer; }
:root[data-theme="dark"] .twt-blase-weiter { color: #7DD3FC; }
.twt-blase-vorschau-zeile { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.twt-blase-vorschau-zeile a { font-size: .8125rem; font-weight: 600; } .twt-ntab-bereich { display: flex; flex-direction: column; gap: 1rem; margin-block: 1rem 2rem; }
.twt-ntab-bereich h2 { margin: 1rem 0 0; }
.twt-ntab { width: 100%; border-collapse: collapse; font-size: .9688rem; font-variant-numeric: tabular-nums; }
.twt-ntab :is(th, td) { padding: .55rem .9rem; text-align: right; border-bottom: 1px solid var(--wp--preset--color--linie, #CBD5E1); white-space: nowrap; }
.twt-ntab thead th { position: sticky; top: 0; z-index: 1; font-size: .8125rem; color: var(--wp--preset--color--text-grau, #475569); background: var(--wp--preset--color--hell, #F8FAFC); }
.twt-ntab tbody th { text-align: left; font-weight: 700; }
.twt-ntab thead th:first-child { text-align: left; }
.twt-ntab tbody tr:nth-child(even) { background: var(--wp--preset--color--flaeche, #F1F5F9); }
.twt-ntab tbody tr:hover { background: color-mix(in srgb, var(--wp--preset--color--blau, #0369A1) 10%, transparent); }
:root[data-theme="dark"] .twt-ntab thead th { background: #0B1220; }
.twt-ntab-hinweis { margin: 0; font-size: .9375rem; color: var(--wp--preset--color--text-grau, #475569); }
.twt-ntab-links { display: flex; flex-wrap: wrap; gap: .75rem; margin: .5rem 0 0; }
.twt-ntab-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1rem; margin-block: 1.5rem; }
.is-layout-constrained > :is(.twt-ntab-bereich, .twt-ntab-liste) { max-width: var(--wp--style--global--wide-size, 1440px) !important; }
@media print { .twt-ntab-links { display: none; } .twt-ntab tbody tr:nth-child(even) { background: #F1F5F9; } } .twt-ntab-liste, .twt-ntab-bereich {
--twt-navy: var(--wp--preset--color--navy, #0F172A);
--twt-blau: var(--wp--preset--color--blau, #0369A1);
--twt-blau-dunkel: var(--wp--preset--color--blau-dunkel, #075985);
--twt-grau: var(--wp--preset--color--text-grau, #475569);
--twt-linie: var(--wp--preset--color--linie, #CBD5E1);
--twt-flaeche: var(--wp--preset--color--flaeche, #F1F5F9);
--twt-weiss: #FFFFFF;
}
:root[data-theme="dark"] .twt-ntab-liste, :root[data-theme="dark"] .twt-ntab-bereich {
--twt-navy: #E2E8F0; --twt-blau: #38BDF8; --twt-blau-dunkel: #7DD3FC; --twt-grau: #94A3B8;
--twt-linie: #334155; --twt-flaeche: #1E293B; --twt-weiss: #111A2E;
}
.twt-ntab-liste .twt-karte { min-height: 0; }
.twt-ntab-liste .twt-karte-titel a { color: var(--twt-navy); text-decoration: none; }
.twt-ntab-liste .twt-karte-titel a::after { content: ""; position: absolute; inset: 0; } .twt-ntab-liste .twt-karte-text { color: var(--twt-grau); margin: 0; } .twt-ntab-bereich .twt-tabelle-rahmen { border: 1px solid var(--twt-linie); border-radius: 10px; }
.twt-ntab { color: var(--twt-navy); }
.twt-ntab :is(th, td) { border-bottom-color: var(--twt-linie); }
.twt-ntab :is(th, td) + :is(th, td) { border-left: 1px solid var(--twt-linie); }
.twt-ntab tbody tr:last-child :is(th, td) { border-bottom: 0; }
.twt-ntab tbody tr:nth-child(even) { background: var(--twt-flaeche); } .twt-rechner-form { align-items: end; }
.twt-feld[hidden] { display: none; } .twt-box .twt-box-link { margin-top: 1.25rem; } .twt-werte { align-items: stretch; }
.twt-wert { display: flex; flex-direction: column; justify-content: space-between; gap: .35rem; }
.twt-wert dd { margin-top: auto; } .twt-laufzeit-tabelle td small.twt-ersparnis { color: #15803D; font-weight: 700; }
:root[data-theme="dark"] .twt-laufzeit-tabelle td small.twt-ersparnis { color: #86EFAC; } .twt-regler { display: block; width: 100%; height: 28px; margin: .35rem 0 0; accent-color: var(--twt-blau); cursor: pointer; }
.twt-hat-regler .twt-feld:not(:has(.twt-regler))::after { content: ""; display: block; height: 28px; margin-top: .35rem; } .twt-wz-leiste { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 .25rem; }
.twt-wz-knopf { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: 0 .9rem; font: inherit; font-size: .9375rem; font-weight: 700; color: var(--twt-blau); background: transparent; border: 1px solid var(--twt-linie); border-radius: 10px; cursor: pointer; }
.twt-wz-knopf:hover, .twt-wz-knopf[aria-pressed="true"] { border-color: var(--twt-blau); background: color-mix(in srgb, var(--twt-blau) 8%, transparent); }
.twt-wz-knopf:disabled { opacity: .6; cursor: progress; }
.twt-wz-knopf--klein { min-height: 36px; font-size: .875rem; }
.twt-wz-meldung:empty { display: none; }
.twt-wz-meldung { display: flex; flex-direction: column; gap: .5rem; margin: .5rem 0; padding: .75rem 1rem; border-radius: 10px; font-size: .9375rem; }
.twt-wz-meldung--erfolg { color: #14532D; background: #F0FDF4; border: 1px solid #BBF7D0; }
.twt-wz-meldung--hinweis { color: #713F12; background: #FEFCE8; border: 1px solid #FDE68A; }
.twt-wz-meldung--fehler { color: #7F1D1D; background: #FEF2F2; border: 1px solid #FECACA; }
:root[data-theme="dark"] .twt-wz-meldung--erfolg { color: #BBF7D0; background: #052E16; border-color: #166534; }
:root[data-theme="dark"] .twt-wz-meldung--hinweis { color: #FDE68A; background: #2A1F05; border-color: #854D0E; }
:root[data-theme="dark"] .twt-wz-meldung--fehler { color: #FECACA; background: #2A0A0A; border-color: #991B1B; }
.twt-wz-linkfeld { width: 100%; min-height: 40px; padding: 0 .75rem; font: inherit; font-size: .875rem; color: inherit; background: var(--twt-weiss); border: 1px solid var(--twt-linie); border-radius: 8px; }
.twt-wz-vergleich { margin: 1rem 0; padding: 1rem 1.1rem; border: 1px solid var(--twt-linie); border-radius: 12px; }
.twt-wz-vergleich h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.twt-wz-geaendert { margin: 0 0 .75rem; font-size: .9375rem; color: var(--twt-grau); }
.twt-wz-tabelle { width: 100%; border-collapse: collapse; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.twt-wz-tabelle :is(th, td) { padding: .5rem .7rem; text-align: right; border-bottom: 1px solid var(--twt-linie); white-space: nowrap; }
.twt-wz-tabelle :is(thead th, tbody th) { text-align: left; }
.twt-wz-tabelle thead th { font-size: .8125rem; color: var(--twt-grau); }
.twt-wz-tabelle tr.ist-hervor th, .twt-wz-tabelle tr.ist-hervor td { font-weight: 800; }
.twt-wz-tabelle td.ist-mehr, .twt-wz-tabelle td.ist-weniger { color: var(--twt-blau); font-weight: 700; }
.twt-wz-zeile { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 0; }
.twt-wz-diagramm { margin: 1rem 0 0; padding: .9rem 1rem .5rem; border: 1px solid var(--twt-linie); border-radius: 12px; }
.twt-wz-diagramm figcaption { display: flex; flex-direction: column; gap: .1rem; margin-bottom: .4rem; }
.twt-wz-diagramm figcaption span { font-size: .875rem; color: var(--twt-grau); }
.twt-wz-diagramm svg { display: block; width: 100%; height: auto; overflow: visible; }
.twt-wz-gitter { stroke: var(--twt-linie); stroke-width: 1; }
.twt-wz-achse, .twt-wz-titel-achse { fill: var(--twt-grau); font-size: 12px; font-family: inherit; }
.twt-wz-titel-achse { font-weight: 700; }
.twt-wz-kurve { fill: none; stroke: var(--twt-blau); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.twt-wz-hilfe { stroke: var(--twt-blau); stroke-width: 1; stroke-dasharray: 4 4; opacity: .6; }
.twt-wz-punkt { fill: var(--twt-weiss); stroke: var(--twt-blau); stroke-width: 3; }
.twt-wz-wert { fill: var(--twt-navy); font-size: 13px; font-weight: 800; font-family: inherit; }
@media print { .twt-wz-leiste, .twt-wz-meldung { display: none !important; } } .twt-marke--diagramm { display: inline-flex; align-items: center; gap: .3rem; background: #EDE9FE; color: #5B21B6; }
.twt-marke--diagramm svg { flex-shrink: 0; }
:root[data-theme="dark"] .twt-marke--diagramm { background: #2E1A5E; color: #DDD6FE; }
.twt-marke--zeichnung { display: inline-flex; align-items: center; gap: .3rem; background: #CCFBF1; color: #115E59; }
.twt-marke--zeichnung svg { flex-shrink: 0; }
:root[data-theme="dark"] .twt-marke--zeichnung { background: #0F3D3A; color: #99F6E4; } .twt-begriff-blase {
--pfeil: 50%;
position: absolute; z-index: 9500; display: flex; flex-direction: column; gap: .3rem;
width: max-content; max-width: min(280px, calc(100vw - 16px)); padding: .65rem .8rem .7rem;
font-size: .8125rem; line-height: 1.45; color: #0F172A; background: #FFFFFF;
border: 1px solid rgba(15, 23, 42, .1); border-radius: 10px;
box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .14);
pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .14s ease, transform .14s ease;
}
.twt-begriff-blase.ist-unten { transform: translateY(-4px); }
.twt-begriff-blase.ist-sichtbar { opacity: 1; transform: none; }
.twt-begriff-blase.ist-interaktiv { pointer-events: auto; }
.twt-begriff-blase[hidden] { display: none; }
.twt-begriff-blase::after { content: ""; position: absolute; left: var(--pfeil); bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background: inherit; border-right: 1px solid rgba(15, 23, 42, .1); border-bottom: 1px solid rgba(15, 23, 42, .1); transform: rotate(45deg); }
.twt-begriff-blase.ist-unten::after { bottom: auto; top: -6px; transform: rotate(225deg); }
.twt-begriff-blase-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.twt-begriff-blase strong { font-size: .875rem; }
.twt-begriff-blase p { margin: 0; color: #334155; }
.twt-begriff-blase-hinweis { font-size: .75rem; color: #64748B; }
.twt-begriff-blase-mehr { align-self: flex-start; font-weight: 700; color: var(--wp--preset--color--blau, #0369A1); }
.twt-begriff-blase-zu { flex-shrink: 0; width: 28px; height: 28px; margin: -.3rem -.4rem 0 0; font: inherit; font-size: 1.1rem; line-height: 1; color: #475569; background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.twt-begriff-blase-zu:hover { background: #F1F5F9; }
.twt-begriff-blase-zu:focus-visible { outline: 2px solid var(--wp--preset--color--blau, #0369A1); outline-offset: 1px; }
:root[data-theme="dark"] .twt-begriff-blase { color: #E2E8F0; background: #1E293B; border-color: rgba(255, 255, 255, .08); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .twt-begriff-blase::after { border-color: rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .twt-begriff-blase p { color: #CBD5E1; }
:root[data-theme="dark"] .twt-begriff-blase-hinweis { color: #94A3B8; }
:root[data-theme="dark"] .twt-begriff-blase-zu { color: #CBD5E1; }
:root[data-theme="dark"] .twt-begriff-blase-zu:hover { background: #334155; }
@media (prefers-reduced-motion: reduce) { .twt-begriff-blase { transition: none; transform: none; } }
a.twt-glossar-link[data-twt-kurz] { cursor: help; } .twt-nb { --nb-boden: #E7DCC8; --nb-gw: #93C5FD; --nb-himmel: #F0F9FF; --nb-bau: #FFFFFF; --nb-dach: #475569; --nb-linie: #334155; --nb-rohr: #0369A1; --nb-wasser: #38BDF8; --nb-gruen: #4D7C0F; --nb-text: #0F172A; --nb-text-hell: #1E3A5F; --nb-rot: #DC2626; --nb-punkt: #0369A1; display: flex; flex-direction: column; gap: 2rem; margin-block: 1rem 2rem; }
:root[data-theme="dark"] .twt-nb { --nb-boden: #3B3226; --nb-gw: #1E3A5F; --nb-himmel: #0F1B2E; --nb-bau: #1E293B; --nb-dach: #94A3B8; --nb-linie: #CBD5E1; --nb-rohr: #38BDF8; --nb-wasser: #0EA5E9; --nb-gruen: #65A30D; --nb-text: #E2E8F0; --nb-text-hell: #BFDBFE; --nb-rot: #F87171; --nb-punkt: #38BDF8; }
.is-layout-constrained > .twt-nb { max-width: var(--wp--style--global--wide-size, 1440px) !important; }
.twt-nb-rahmen { overflow-x: auto; border: 1px solid var(--wp--preset--color--linie, #CBD5E1); border-radius: 16px; background: var(--nb-himmel); }
.twt-nb-bild { position: relative; min-width: 860px; }
.twt-nb-svg { display: block; width: 100%; height: auto; }
.nb-himmel { fill: var(--nb-himmel); }
.nb-boden { fill: var(--nb-boden); }
.nb-gw { fill: var(--nb-gw); opacity: .8; }
.nb-oberflaeche { fill: none; stroke: var(--nb-gruen); stroke-width: 6; }
.nb-zone { fill: none; stroke: var(--nb-gruen); stroke-width: 2; stroke-dasharray: 8 6; }
.nb-baum { fill: var(--nb-gruen); }
.nb-bau, .nb-haus { fill: var(--nb-bau); stroke: var(--nb-linie); stroke-width: 2; }
.nb-keller, .nb-schacht { fill: var(--nb-bau); stroke: var(--nb-linie); stroke-width: 1.5; opacity: .85; }
.nb-dach { fill: var(--nb-dach); }
.nb-fenster, .nb-fenster rect { fill: var(--nb-wasser); opacity: .5; }
.nb-tuer { fill: var(--nb-dach); }
.nb-tank, .nb-behaelter { fill: var(--nb-bau); stroke: var(--nb-linie); stroke-width: 2; }
.nb-huegel { fill: var(--nb-gruen); opacity: .7; }
.nb-wasser { fill: var(--nb-wasser); }
.nb-rohr, .nb-rohr-fein { fill: none; stroke: var(--nb-rohr); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.nb-rohr-fein { stroke-width: 4; }
.nb-rohr--dick { stroke-width: 10; }
.nb-rohr--roh { stroke: #78716C; }
.nb-pumpe { fill: var(--nb-dach); }
.nb-pumpe-symbol, .nb-zaehler, .nb-armatur-kreis { fill: var(--nb-bau); stroke: var(--nb-linie); stroke-width: 2.5; }
.nb-symbol, .nb-symbol circle, .nb-symbol path, .nb-signal { fill: none; stroke: var(--nb-linie); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.nb-symbol-fill { fill: var(--nb-linie); }
.nb-armatur { fill: var(--nb-linie); }
.nb-gestaenge { stroke: var(--nb-linie); stroke-width: 2.5; }
.nb-deckel { fill: var(--nb-linie); }
.nb-boiler { fill: #FCA5A5; stroke: var(--nb-linie); stroke-width: 2; }
.nb-tropfen { fill: var(--nb-wasser); }
.nb-hydrant { fill: var(--nb-rot); }
.nb-entluefter { fill: var(--nb-dach); }
.nb-text { fill: var(--nb-text); font-size: 17px; font-weight: 700; font-family: inherit; }
.nb-text--hell { fill: var(--nb-text-hell); font-size: 15px; }
.twt-nb-punkt { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: -15px 0 0 -15px; font-size: .8125rem; font-weight: 800; line-height: 1; color: #FFFFFF; text-decoration: none; background: var(--nb-punkt); border: 2px solid #FFFFFF; border-radius: 50%; box-shadow: 0 2px 8px rgba(15, 23, 42, .35); transition: transform .15s ease; }
:root[data-theme="dark"] .twt-nb-punkt { color: #0B1220; border-color: #0B1220; }
.twt-nb-punkt:hover, .twt-nb-punkt:focus-visible { transform: scale(1.15); }
.twt-nb-punkt.ist-aktiv { background: #F59E0B; color: #0B1220; transform: scale(1.25); z-index: 2; }
.twt-nb-punkt:focus-visible { outline: 3px solid #F59E0B; outline-offset: 2px; }
.twt-nb-panel { position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; min-height: 280px; padding: 1.25rem; background: var(--wp--preset--color--weiss, #FFFFFF); border: 1px solid var(--wp--preset--color--linie, #CBD5E1); border-radius: 16px; }
.twt-nb-panel-inhalt h3 { display: flex; align-items: center; gap: .6rem; margin: 0 0 .6rem; font-size: 1.25rem; }
.twt-nb-panel-inhalt p { margin: 0 0 .7rem; }
.twt-nb-start-titel { font-size: 1.2rem; font-weight: 800; }
.twt-nb-steuerung { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.twt-nb-nr { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.8rem; height: 1.8rem; font-size: .875rem; font-weight: 800; color: #FFFFFF; background: var(--nb-punkt); border-radius: 50%; }
:root[data-theme="dark"] .twt-nb-nr { color: #0B1220; }
.twt-nb-links { display: flex; flex-wrap: wrap; gap: .35rem .6rem; font-size: .9375rem; }
.twt-nb-links span { font-weight: 700; color: var(--wp--preset--color--text-grau, #475569); }
.twt-nb-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 1.5rem 2rem; }
.twt-nb-abschnitt h2 { margin: 0 0 .75rem; font-size: 1.35rem; }
.twt-nb-station { margin: 0 0 1.25rem; scroll-margin-top: 6rem; }
.twt-nb-station h3 { display: flex; align-items: center; gap: .6rem; margin: 0 0 .4rem; font-size: 1.1rem; }
.twt-nb-station p { margin: 0 0 .4rem; }
@media (max-width: 1000px) { .twt-nb-oben { grid-template-columns: 1fr; } .twt-nb-panel { position: static; min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .twt-nb-punkt { transition: none; } }
@media print { .twt-nb-punkt, .twt-nb-panel { display: none; } } .twt-finder { margin-block: 1rem 2rem; }
.twt-finder h2 { margin: 0 0 1rem; }
.twt-finder-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .75rem; }
.twt-finder-aufgabe { background: var(--wp--preset--color--weiss, #FFFFFF); border: 1px solid var(--wp--preset--color--linie, #CBD5E1); border-radius: 12px; }
.twt-finder-aufgabe[open] { grid-column: 1 / -1; border-color: var(--wp--preset--color--blau, #0369A1); box-shadow: 0 0 0 1px var(--wp--preset--color--blau, #0369A1); }
.twt-finder-aufgabe summary { display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.1rem; cursor: pointer; list-style: none; }
.twt-finder-aufgabe summary::-webkit-details-marker { display: none; }
.twt-finder-aufgabe summary strong { display: flex; justify-content: space-between; gap: .5rem; font-size: 1.05rem; }
.twt-finder-aufgabe summary strong::after { content: "+"; font-size: 1.2rem; line-height: 1; color: var(--wp--preset--color--blau, #0369A1); }
.twt-finder-aufgabe[open] summary strong::after { content: "−"; }
.twt-finder-aufgabe summary span { font-size: .9375rem; color: var(--wp--preset--color--text-grau, #475569); }
.twt-finder-aufgabe summary:focus-visible { outline: 3px solid var(--wp--preset--color--blau, #0369A1); outline-offset: 2px; border-radius: 12px; }
.twt-finder-rechner { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: .6rem; margin: 0; padding: 0 1.1rem 1rem; list-style: none; }
.twt-finder-rechner a { display: flex; flex-direction: column; gap: .2rem; height: 100%; padding: .8rem .9rem; color: inherit; text-decoration: none; background: var(--wp--preset--color--flaeche, #F1F5F9); border-radius: 10px; }
.twt-finder-rechner a:hover strong { text-decoration: underline; }
.twt-finder-rechner strong { color: var(--wp--preset--color--blau, #0369A1); }
.twt-finder-rechner span { font-size: .875rem; color: var(--wp--preset--color--text-grau, #475569); }
.twt-finder-extra { margin: 0; padding: 0 1.1rem 1rem; font-size: .9375rem; }
.twt-finder-extra span { font-weight: 700; } .twt-nb-panel { height: clamp(360px, 32vw, 480px); min-height: 0; overflow: hidden; }
.twt-nb-steuerung { flex: 0 0 auto; justify-content: space-between; padding-top: .75rem; border-top: 1px solid var(--wp--preset--color--linie, #CBD5E1); }
.twt-nb-steuerung .twt-ab-knopf { min-width: 11.5rem; justify-content: center; }
.twt-nb-steuerung .twt-wz-knopf { min-width: 6.5rem; justify-content: center; }
@media (max-width: 1000px) {
.twt-nb-panel { height: auto; overflow: visible; }
.twt-nb-panel-inhalt { overflow: visible; min-height: 12rem; }
.twt-nb-steuerung { order: -1; padding: 0 0 .75rem; border-top: 0; border-bottom: 1px solid var(--wp--preset--color--linie, #CBD5E1); }
} .twt-finder-raster { align-items: start; }
.twt-finder-aufgabe { display: block; height: auto; overflow: hidden; }
.twt-finder-inhalt { display: flow-root; padding: 0 1.1rem 1.1rem; }
.twt-finder .twt-finder-rechner { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); align-items: stretch; gap: .6rem; margin: 0 !important; padding: 0 !important; list-style: none; }
.twt-finder .twt-finder-rechner li { display: flex; margin: 0 !important; padding: 0; }
.twt-finder .twt-finder-rechner a { flex: 1; height: auto; min-width: 0; }
.twt-finder .twt-finder-extra { margin: .9rem 0 0 !important; padding: 0; }
.twt-finder-aufgabe:not([open]) { height: 100%; } .twt-nb-buehne { position: relative; min-width: 0; }
.twt-nb-rahmen { overflow: hidden; max-height: min(78vh, 720px); scrollbar-width: thin; }
.twt-nb-rahmen.ist-gezoomt { overflow: auto; cursor: grab; }
.twt-nb-rahmen.ist-ziehen { cursor: grabbing; user-select: none; }
.twt-nb-bild { min-width: 0; width: 100%; overflow: clip; }
@media (max-width: 760px) { .twt-nb-rahmen { overflow: auto; } }
.twt-nb-zoom { position: absolute; top: .6rem; right: .6rem; z-index: 3; display: flex; align-items: center; gap: .25rem; padding: .25rem; background: var(--wp--preset--color--weiss, #FFFFFF); border: 1px solid var(--wp--preset--color--linie, #CBD5E1); border-radius: 10px; box-shadow: 0 4px 14px rgba(15, 23, 42, .15); }
.twt-nb-zoom[hidden] { display: none; }
.twt-nb-zoom button { min-width: 36px; height: 36px; padding: 0 .5rem; font: inherit; font-size: 1.15rem; font-weight: 800; line-height: 1; color: var(--wp--preset--color--blau, #0369A1); background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
.twt-nb-zoom button:hover:not(:disabled) { background: var(--wp--preset--color--flaeche, #F1F5F9); }
.twt-nb-zoom button:disabled { opacity: .35; cursor: default; }
.twt-nb-zoom button:focus-visible { outline: 3px solid var(--wp--preset--color--blau, #0369A1); outline-offset: 1px; }
.twt-nb-zoom .twt-nb-zoom-ganz { font-size: .8125rem; }
.twt-nb-zoom output { min-width: 3.4rem; font-size: .8125rem; font-weight: 700; text-align: center; color: var(--wp--preset--color--text-grau, #475569); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .twt-nb-zoom .twt-nb-zoom-ganz { display: none; } } .twt-nb-liste { display: flex; flex-direction: column; gap: 2.5rem; }
.twt-nb-abschnitt { margin: 0; }
.twt-nb-abschnitt h2 { display: flex; align-items: center; gap: .7rem; margin: 0 0 1rem; font-size: 1.4rem; }
.twt-nb-abschnitt-nr { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; font-size: 1rem; font-weight: 800; color: var(--wp--preset--color--blau, #0369A1); border: 2px solid currentColor; border-radius: 8px; }
.twt-nb-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1rem; align-items: stretch; }
.twt-nb-station { display: flex; flex-direction: column; gap: .5rem; margin: 0; padding: 1.15rem 1.2rem; background: var(--wp--preset--color--weiss, #FFFFFF); border: 1px solid var(--wp--preset--color--linie, #CBD5E1); border-radius: 12px; }
.twt-nb-station:target { border-color: var(--wp--preset--color--blau, #0369A1); box-shadow: 0 0 0 2px var(--wp--preset--color--blau, #0369A1); }
.twt-nb-station h3 { margin: 0; font-size: 1.1rem; line-height: 1.3; }
.twt-nb-station > p { margin: 0; }
.twt-nb-fuss { display: flex; flex-direction: column; gap: .55rem; margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--wp--preset--color--linie, #CBD5E1); }
.twt-nb .twt-nb-links { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0; font-size: .875rem; }
.twt-nb .twt-nb-links span { flex-basis: 100%; font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--wp--preset--color--text-grau, #475569); }
.twt-nb .twt-nb-links a { display: inline-flex; align-items: center; min-height: 30px; padding: .15rem .65rem; font-weight: 600; text-decoration: none; border-radius: 999px; }
.twt-nb .twt-nb-links--begriffe a { color: var(--wp--preset--color--navy, #0F172A); background: var(--wp--preset--color--flaeche, #F1F5F9); }
.twt-nb .twt-nb-links--rechner a { color: var(--wp--preset--color--blau, #0369A1); border: 1px solid currentColor; }
.twt-nb .twt-nb-links a:hover { text-decoration: underline; } .twt-nb-panel-inhalt .twt-nb-fuss { margin-top: .9rem; } :is(.twt-btn, .twt-ab-knopf, .twt-kontakt-senden) {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
min-height: 44px; padding: .8rem 1.4rem; box-sizing: border-box;
font-family: inherit; font-size: var(--wp--preset--font-size--normal, 1rem); font-weight: 700; line-height: 1.2;
color: var(--wp--preset--color--weiss, #FFFFFF); background: var(--wp--preset--color--blau, #0369A1);
border: 0; border-radius: 8px; text-decoration: none; cursor: pointer;
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
:is(.twt-btn, .twt-ab-knopf, .twt-kontakt-senden):hover { color: var(--wp--preset--color--weiss, #FFFFFF); background: var(--wp--preset--color--blau-dunkel, #075985); }
:root[data-theme="dark"] :is(.twt-btn, .twt-ab-knopf, .twt-kontakt-senden),
:root[data-theme="dark"] :is(.twt-btn, .twt-ab-knopf, .twt-kontakt-senden):hover { color: var(--wp--preset--color--weiss, #111A2E); }
:is(.twt-btn--zweit, .twt-ab-knopf--hell, .twt-wz-knopf) {
color: var(--wp--preset--color--blau, #0369A1); background: transparent;
border: 2px solid currentColor; padding: calc(.8rem - 2px) calc(1.4rem - 2px);
}
:is(.twt-btn--zweit, .twt-ab-knopf--hell, .twt-wz-knopf):hover,
.twt-wz-knopf[aria-pressed="true"] { color: var(--wp--preset--color--blau, #0369A1); background: rgba(3, 105, 161, .08); border-color: currentColor; }
:root[data-theme="dark"] :is(.twt-btn--zweit, .twt-ab-knopf--hell, .twt-wz-knopf),
:root[data-theme="dark"] :is(.twt-btn--zweit, .twt-ab-knopf--hell, .twt-wz-knopf):hover { color: var(--wp--preset--color--blau, #38BDF8); }
:root[data-theme="dark"] :is(.twt-btn--zweit, .twt-ab-knopf--hell, .twt-wz-knopf):hover,
:root[data-theme="dark"] .twt-wz-knopf[aria-pressed="true"] { background: rgba(56, 189, 248, .12); }
:is(.twt-btn--klein, .twt-ab-knopf--klein, .twt-wz-knopf--klein) { min-height: 38px; padding: .5rem 1rem; font-size: .9375rem; }
:is(.twt-btn--zweit, .twt-ab-knopf--hell, .twt-wz-knopf):is(.twt-btn--klein, .twt-ab-knopf--klein, .twt-wz-knopf--klein) { padding: calc(.5rem - 2px) calc(1rem - 2px); }
:is(.twt-btn, .twt-ab-knopf, .twt-wz-knopf, .twt-kontakt-senden):disabled { opacity: .55; cursor: not-allowed; }
:is(.twt-btn, .twt-ab-knopf, .twt-wz-knopf, .twt-kontakt-senden):focus-visible { outline: 3px solid var(--wp--preset--color--blau, #0369A1); outline-offset: 2px; } .twt-wz-leiste .twt-wz-knopf { min-height: 40px; padding: calc(.55rem - 2px) calc(1.1rem - 2px); font-size: .9375rem; } .twt-nb-steuerung .twt-btn { min-width: 11.5rem; }
.twt-nb-steuerung .twt-btn--zweit { min-width: 7rem; } .twt-nb-oben { display: flex; flex-direction: column; gap: 0; }
.twt-nb-buehne .twt-nb-rahmen { border-radius: 16px 16px 0 0; }
.twt-nb-svg { user-select: none; }
.twt-nb-panel { position: static; display: flex; flex-direction: column; gap: 1rem; height: auto; min-height: 0; overflow: visible; padding: 1rem 1.5rem 1.5rem; border-top: 0; border-radius: 0 0 16px 16px; }
.twt-nb-steuerung { order: -1; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; padding: 0 0 1rem; border-top: 0; border-bottom: 1px solid var(--wp--preset--color--linie, #CBD5E1); }
.twt-nb-steuerung .twt-btn, .twt-nb-steuerung .twt-btn--zweit { min-width: 0; flex: 0 0 auto; white-space: nowrap; }
.twt-nb-steuerung .twt-btn:not(.twt-btn--zweit) { min-width: 12rem; }
.twt-nb-stand { flex: 1 1 auto; text-align: center; font-size: .9375rem; font-weight: 700; color: var(--wp--preset--color--text-grau, #475569); font-variant-numeric: tabular-nums; }
.twt-nb-panel-inhalt { flex: none; overflow: visible; min-height: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: .25rem 2.5rem; align-items: start; }
.twt-nb-panel-inhalt > * { grid-column: 1; }
.twt-nb-panel-inhalt > .twt-nb-fuss { grid-column: 2; grid-row: 1 / span 3; margin: 0; padding: 0 0 0 1.5rem; border-top: 0; border-left: 1px solid var(--wp--preset--color--linie, #CBD5E1); }
.twt-nb-panel-inhalt h3 { margin-bottom: .3rem; }
.twt-nb-panel-inhalt p { max-width: 70ch; }
@media (max-width: 1000px) {
.twt-nb-panel { padding: 1rem 1.1rem 1.25rem; }
.twt-nb-steuerung { padding: 0 0 1rem; border-bottom: 1px solid var(--wp--preset--color--linie, #CBD5E1); }
.twt-nb-panel-inhalt { min-height: 0; }
}
@media (max-width: 760px) {
.twt-nb-panel-inhalt { grid-template-columns: 1fr; }
.twt-nb-panel-inhalt > .twt-nb-fuss { grid-column: 1; grid-row: auto; padding: .8rem 0 0; border-left: 0; border-top: 1px solid var(--wp--preset--color--linie, #CBD5E1); }
.twt-nb-stand { font-size: .8125rem; }
.twt-nb-steuerung .twt-btn:not(.twt-btn--zweit) { min-width: 0; }
.twt-nb-steuerung :is(.twt-btn, .twt-btn--zweit) { padding-inline: 1rem; }
} .twt-nb-oben { align-items: stretch; width: 100%; }
.twt-nb-buehne, .twt-nb-panel { width: 100%; box-sizing: border-box; align-self: stretch; }
.twt-nb-rahmen { width: 100%; box-sizing: border-box; } .twt-glossar { --twt-grau: var(--wp--preset--color--text-grau, #475569); }
.twt-glossar-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; }
.twt-glossar-zeile .twt-glossar-filter { flex: 1 1 320px; max-width: 520px; }
.twt-glossar-zeile .twt-anzahl { flex: 0 0 auto; } .tw-ueber-mich-intro { gap: 2.5rem; margin-block: 1rem 2.5rem; }
.tw-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 20px; box-shadow: 0 12px 32px rgba(15, 23, 42, .18); }
:root[data-theme="dark"] .tw-portrait img { box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
.tw-ueber-mich-lead { font-size: 1.35rem; font-weight: 700; line-height: 1.45; }
@media (max-width: 781px) { .tw-ueber-mich-intro .tw-portrait { max-width: 320px; } } .twt-nb-ausschnitt { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; background: var(--nb-himmel); border: 1px solid var(--wp--preset--color--linie, #CBD5E1); border-radius: 10px; }
.twt-nb-station .twt-nb-ausschnitt { margin-bottom: .35rem; } .twt-nb-panel-inhalt:has(> .twt-nb-ausschnitt) { grid-template-columns: 220px minmax(0, 1.5fr) minmax(0, 1fr); }
.twt-nb-panel-inhalt > .twt-nb-ausschnitt { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
.twt-nb-panel-inhalt:has(> .twt-nb-ausschnitt) > :not(.twt-nb-ausschnitt):not(.twt-nb-fuss) { grid-column: 2; }
.twt-nb-panel-inhalt:has(> .twt-nb-ausschnitt) > .twt-nb-fuss { grid-column: 3; grid-row: 1 / span 3; }
@media (max-width: 1000px) {
.twt-nb-panel-inhalt:has(> .twt-nb-ausschnitt) { grid-template-columns: 180px minmax(0, 1fr); }
.twt-nb-panel-inhalt:has(> .twt-nb-ausschnitt) > .twt-nb-fuss { grid-column: 2; grid-row: auto; padding: .8rem 0 0; border-left: 0; border-top: 1px solid var(--wp--preset--color--linie, #CBD5E1); }
}
@media (max-width: 760px) {
.twt-nb-panel-inhalt:has(> .twt-nb-ausschnitt) { grid-template-columns: 1fr; }
.twt-nb-panel-inhalt > .twt-nb-ausschnitt { grid-column: 1; grid-row: auto; max-width: 320px; }
.twt-nb-panel-inhalt:has(> .twt-nb-ausschnitt) > * { grid-column: 1 !important; }
} .twt-nb-panel-inhalt { align-content: start; grid-auto-rows: min-content; } .twt-feld-hilfe { display: block; margin: -.15rem 0 .1rem; font-size: .8125rem; line-height: 1.35; color: var(--twt-grau); } .twt-begriff-auch { margin: -.25rem 0 1rem; font-size: .9375rem; color: var(--wp--preset--color--text-grau, #475569); } .twt-glossar-abc { top: var(--wp-admin--admin-bar--height, 0px); padding: .6rem 0; border-bottom: 1px solid transparent; transition: border-color .15s ease, box-shadow .15s ease; }
.twt-glossar-abc.ist-angeheftet { border-bottom-color: var(--twt-linie); box-shadow: 0 8px 16px -12px rgba(15, 23, 42, .35); }
.twt-glossar-gruppe { scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--twt-abc-hoehe, 4rem) + 1rem); }
.twt-glossar-abc a[aria-current="true"] { color: #FFFFFF; background: var(--twt-blau); border-color: var(--twt-blau); }
:root[data-theme="dark"] .twt-glossar-abc a[aria-current="true"] { color: #0B1220; }
@media (prefers-reduced-motion: reduce) { .twt-glossar-abc { transition: none; } } .twt-platzhalter, .twt-platzhalter-karte { position: relative; border-color: transparent !important; }
.twt-laufrahmen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; border-radius: inherit; }
.twt-laufrahmen rect { fill: none; stroke: #94A3B8; stroke-width: 4; stroke-dasharray: 8 6; animation: twt-lauf 1.4s linear infinite; }
:root[data-theme="dark"] .twt-laufrahmen rect { stroke: #64748B; }
.twt-platzhalter-karte:hover .twt-laufrahmen rect, .twt-platzhalter:hover .twt-laufrahmen rect { stroke: var(--twt-blau); }
@keyframes twt-lauf { to { stroke-dashoffset: -28; } }
@media (prefers-reduced-motion: reduce) { .twt-laufrahmen rect { animation: none; } } .twt-zeichnung {
--z-linie: #334155; --z-wand: #94A3B8; --z-wand2: #CBD5E1; --z-wasser: #BAE6FD; --z-wasser0: #E0F2FE; --z-akzent: #0369A1; --z-fluss: #0284C7;
--z-warn: #D97706; --z-text: #0F172A; --z-grau: #475569; --z-boden: #E7DCC8; --z-boden2: #F1E9DA; --z-sand: #FDE68A; --z-gruen: #65A30D;
--z-flaeche: #FFFFFF; --z-raum: #F1F5F9; --z-verlust: #FDE7C7;
margin: 1.5rem 0; padding: 1rem 1rem .75rem; background: var(--z-flaeche); border: 1px solid var(--wp--preset--color--linie, #CBD5E1); border-radius: 12px;
}
:root[data-theme="dark"] .twt-zeichnung {
--z-linie: #CBD5E1; --z-wand: #64748B; --z-wand2: #475569; --z-wasser: #0C4A6E; --z-wasser0: #0B2A40; --z-akzent: #38BDF8; --z-fluss: #7DD3FC;
--z-warn: #F59E0B; --z-text: #E2E8F0; --z-grau: #94A3B8; --z-boden: #3B3226; --z-boden2: #4A3F30; --z-sand: #5B4A26; --z-gruen: #84CC16;
--z-flaeche: #111A2E; --z-raum: #1E293B; --z-verlust: #4A3414;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .twt-zeichnung {
--z-linie: #CBD5E1; --z-wand: #64748B; --z-wand2: #475569; --z-wasser: #0C4A6E; --z-wasser0: #0B2A40; --z-akzent: #38BDF8; --z-fluss: #7DD3FC;
--z-warn: #F59E0B; --z-text: #E2E8F0; --z-grau: #94A3B8; --z-boden: #3B3226; --z-boden2: #4A3F30; --z-sand: #5B4A26; --z-gruen: #84CC16;
--z-flaeche: #111A2E; --z-raum: #1E293B; --z-verlust: #4A3414;
}
}
.twt-zeichnung-svg { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto; font-family: inherit; }
.twt-zeichnung figcaption { margin-top: .6rem; font-size: .875rem; text-align: center; color: var(--z-grau); }
.twt-zeichnung .zl { fill: none; stroke: var(--z-linie); stroke-width: 2; stroke-linejoin: round; }
.twt-zeichnung .zk { fill: none; stroke: var(--z-grau); stroke-width: 1; }
.twt-zeichnung .za { stroke: var(--z-akzent); stroke-width: 1.6; }
.twt-zeichnung .zfa { fill: var(--z-akzent); }
.twt-zeichnung .zff { fill: var(--z-fluss); }
.twt-zeichnung .zfl { stroke: var(--z-fluss); stroke-width: 2.5; stroke-linecap: round; }
.twt-zeichnung .zfl0 { fill: var(--z-flaeche); }
.twt-zeichnung .zw { fill: var(--z-wand); stroke: var(--z-linie); stroke-width: 1.5; }
.twt-zeichnung .zw2 { fill: var(--z-wand2); stroke: var(--z-linie); stroke-width: 2; }
.twt-zeichnung .zwa { fill: var(--z-wasser); }
.twt-zeichnung .zwa.zl { fill: var(--z-wasser); }
.twt-zeichnung .zwa0 { fill: var(--z-wasser0); }
.twt-zeichnung .zgestr { fill: none; stroke: var(--z-akzent); stroke-width: 1.6; stroke-dasharray: 6 5; }
.twt-zeichnung .zwarnl { fill: none; stroke: var(--z-warn); stroke-width: 3; stroke-linejoin: round; }
.twt-zeichnung .zwarnf { fill: var(--z-warn); }
.twt-zeichnung .zwarngestr { stroke: var(--z-warn); stroke-width: 1.6; stroke-dasharray: 6 5; }
.twt-zeichnung .zakzentl { fill: none; stroke: var(--z-akzent); stroke-width: 3; }
.twt-zeichnung .zpunkt { fill: var(--z-flaeche); stroke: var(--z-text); stroke-width: 3; }
.twt-zeichnung .zrohr { stroke: var(--z-wasser); stroke-width: 14; stroke-linecap: round; }
.twt-zeichnung .zrohrd { fill: none; stroke: var(--z-akzent); stroke-width: 6; stroke-linejoin: round; }
.twt-zeichnung .zarm { fill: var(--z-linie); }
.twt-zeichnung .zring { fill: var(--z-text); }
.twt-zeichnung .zb { fill: var(--z-boden); }
.twt-zeichnung .zb2 { fill: var(--z-boden2); }
.twt-zeichnung .zsand { fill: var(--z-sand); }
.twt-zeichnung .zgruen { stroke: var(--z-gruen); stroke-width: 4; }
.twt-zeichnung .zraum { fill: var(--z-raum); }
.twt-zeichnung .zwand { fill: var(--z-wand); }
.twt-zeichnung .zbs { fill: var(--z-wand2); stroke: var(--z-linie); stroke-width: 1; }
.twt-zeichnung .zbv { fill: var(--z-wasser); stroke: var(--z-linie); stroke-width: 1; }
.twt-zeichnung .zbx { fill: var(--z-verlust); stroke: var(--z-linie); stroke-width: 1; }
.twt-zeichnung .zt { fill: var(--z-text); }
.twt-zeichnung .zta { fill: var(--z-akzent); }
.twt-zeichnung .zgr { fill: var(--z-grau); }
.twt-zeichnung .zwarnt { fill: var(--z-warn); }
.twt-zeichnung .zfett { font-weight: 700; }
@media print { .twt-zeichnung { break-inside: avoid; } } .twt-such-hinweis { flex-basis: 100%; margin: 0; font-size: .92rem; color: var(--twt-grau); }
.twt-such-hinweis[hidden] { display: none; }
.twt-such-hinweis a, .twt-such-vorschlag a { font-weight: 600; color: var(--twt-blau); }
.twt-such-mehr { margin: 0 0 1.25rem; display: grid; gap: .5rem; }
.twt-such-mehr[hidden] { display: none; }
.twt-such-mehr-zeile { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; }
.twt-such-mehr-zeile span { font-weight: 700; margin-right: .25rem; }
.twt-such-mehr-zeile a { display: inline-flex; align-items: center; padding: .3rem .8rem; border: 1px solid var(--twt-linie, #CBD5E1); border-radius: 999px; font-size: .92rem; font-weight: 600; text-decoration: none; color: var(--twt-blau); background: var(--twt-weiss); }
.twt-such-mehr-zeile a:hover, .twt-such-mehr-zeile a:focus-visible { border-color: var(--twt-blau); } .twt-anteile { margin: 1.25rem 0 0; }
.twt-anteile figcaption { margin-bottom: .5rem; font-size: .9rem; font-weight: 700; color: var(--twt-navy); }
.twt-anteile-balken { display: flex; height: 18px; overflow: hidden; border-radius: 9px; background: var(--twt-linie); }
.twt-anteil { display: block; min-width: 2px; }
.twt-anteile-liste { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .35rem; font-size: .9rem; }
.twt-anteile-liste li { display: flex; align-items: center; gap: .5rem; }
.twt-anteil-punkt { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 3px; }
.twt-anteil-name { flex: 1 1 auto; }
.twt-anteil-wert { flex: 0 0 auto; color: var(--twt-grau); font-variant-numeric: tabular-nums; }
.twt-anteil--a { background: #0369A1; }
.twt-anteil--b { background: #7DD3FC; }
.twt-anteil--c { background: #FBBF24; }
.twt-anteil--d { background: #EA580C; }
:root[data-theme="dark"] .twt-anteil--a, .twt-w.ist-dunkel .twt-anteil--a { background: #38BDF8; }
:root[data-theme="dark"] .twt-anteil--b, .twt-w.ist-dunkel .twt-anteil--b { background: #BAE6FD; }
:root[data-theme="dark"] .twt-anteil--c, .twt-w.ist-dunkel .twt-anteil--c { background: #F59E0B; }
:root[data-theme="dark"] .twt-anteil--d, .twt-w.ist-dunkel .twt-anteil--d { background: #F97316; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .twt-anteil--a { background: #38BDF8; }
:root:not([data-theme="light"]) .twt-anteil--b { background: #BAE6FD; }
:root:not([data-theme="light"]) .twt-anteil--c { background: #F59E0B; }
:root:not([data-theme="light"]) .twt-anteil--d { background: #F97316; }
} .twt-zurueck { margin: 0 0 .4rem; font-size: .9375rem; }
.twt-zurueck[hidden] { display: none; }
.twt-zurueck a { display: inline-flex; align-items: center; gap: .35rem; min-height: 32px; font-weight: 700; color: var(--wp--preset--color--blau, #0369A1); text-decoration: none; }
.twt-zurueck a:hover { text-decoration: underline; }
.twt-karte.ist-zuletzt { outline: 3px solid var(--twt-blau); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .twt-karte { transition: outline-color .4s ease; } } .twt-wz-weiter { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .9rem 0 0; }
.twt-wz-weiter-titel { flex-basis: 100%; font-size: .875rem; font-weight: 700; color: var(--twt-grau); }.twt-ss {
--ss-flaeche: #FFFFFF; --ss-text: #0F172A; --ss-grau: #475569; --ss-linie: #E2E8F0; --ss-feld: #F8FAFC;
--ss-aktiv: #E0F2FE; --ss-akzent: #0369A1; --ss-mark: #BAE6FD; --ss-schatten: 0 24px 64px rgba(2, 6, 23, .28);
position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0;
border: 0; background: transparent; color: var(--ss-text); overflow: hidden;
}
:root[data-theme="dark"] .twt-ss {
--ss-flaeche: #111A2E; --ss-text: #E2E8F0; --ss-grau: #94A3B8; --ss-linie: #1E293B; --ss-feld: #0B1220;
--ss-aktiv: rgba(56, 189, 248, .14); --ss-akzent: #38BDF8; --ss-mark: rgba(56, 189, 248, .35); --ss-schatten: 0 24px 64px rgba(0, 0, 0, .6);
}
.twt-ss::backdrop { background: rgba(2, 6, 23, .55); backdrop-filter: blur(2px); }
html.twt-ss-offen { overflow: hidden; }
.twt-ss-box {
display: flex; flex-direction: column; box-sizing: border-box;
width: min(640px, calc(100% - 32px)); max-height: min(640px, calc(100% - 12vh - 32px)); margin: 10vh auto 0;
background: var(--ss-flaeche); border: 1px solid var(--ss-linie); border-radius: 14px; box-shadow: var(--ss-schatten);
font-family: inherit; overflow: hidden;
}
.twt-ss-kopf { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem .7rem 1rem; border-bottom: 1px solid var(--ss-linie); }
.twt-ss-lupe { display: inline-flex; color: var(--ss-grau); flex: 0 0 auto; }
.twt-ss-feld {
flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0; border: 0; outline: 0; background: transparent;
font: inherit; font-size: 1.125rem; color: var(--ss-text);
}
.twt-ss-feld::placeholder { color: var(--ss-grau); opacity: 1; }
.twt-ss-feld::-webkit-search-cancel-button { display: none; }
.twt-ss-zu {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: .2rem .55rem;
font: inherit; font-size: .75rem; font-weight: 700; color: var(--ss-grau); background: var(--ss-feld);
border: 1px solid var(--ss-linie); border-radius: 6px; cursor: pointer;
}
.twt-ss-zu:hover { color: var(--ss-text); }
.twt-ss-zu:focus-visible, .twt-ss-treffer:focus-visible, .twt-ss-alle:focus-visible { outline: 3px solid var(--ss-akzent); outline-offset: 2px; }
.twt-ss-zu-text { display: none; }
.twt-ss-liste { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: .35rem .5rem .6rem; }
.twt-ss-gruppe { margin: .7rem .6rem .3rem; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ss-grau); }
.twt-ss-treffer {
display: flex; flex-direction: column; gap: .1rem; padding: .6rem .75rem; border-radius: 8px;
color: var(--ss-text); text-decoration: none; scroll-margin: 8px;
}
.twt-ss-treffer[aria-selected="true"] { background: var(--ss-aktiv); }
.twt-ss-titel { font-weight: 700; line-height: 1.3; }
.twt-ss-titel mark { background: var(--ss-mark); color: inherit; border-radius: 3px; padding: 0 1px; }
.twt-ss-info { font-size: .85rem; line-height: 1.35; color: var(--ss-grau); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.twt-ss-umrechnung { border: 1px solid var(--ss-linie); }
.twt-ss-umrechnung[aria-selected="true"] { border-color: var(--ss-akzent); }
.twt-ss-antwort { font-size: 1.25rem; font-weight: 800; color: var(--ss-akzent); font-variant-numeric: tabular-nums; }
.twt-ss-bereiche { display: flex; flex-wrap: wrap; gap: .4rem; padding: .2rem .4rem .4rem; }
.twt-ss-treffer.twt-ss-chip { display: inline-flex; flex-direction: row; padding: .4rem .8rem; font-size: .9rem; font-weight: 600; border: 1px solid var(--ss-linie); border-radius: 999px; }
.twt-ss-treffer.twt-ss-chip[aria-selected="true"] { border-color: var(--ss-akzent); }
.twt-ss-leer { margin: 1rem .75rem; color: var(--ss-grau); }
.twt-ss-leer a { color: var(--ss-akzent); font-weight: 600; }
.twt-ss-fuss {
display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
padding: .6rem 1rem; border-top: 1px solid var(--ss-linie); font-size: .8rem; color: var(--ss-grau);
}
.twt-ss-tasten { white-space: pre; }
.twt-ss-fuss kbd {
display: inline-block; min-width: 1.2em; padding: 0 .3em; margin-right: .15em; font: inherit; font-size: .75rem; font-weight: 700; text-align: center;
background: var(--ss-feld); border: 1px solid var(--ss-linie); border-radius: 4px;
}
.twt-ss-alle { margin-left: auto; font-weight: 700; color: var(--ss-akzent); text-decoration: none; }
.twt-ss-alle:hover { text-decoration: underline; }
.twt-ss-alle[hidden] { display: none; }
.twt-ss-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; } @media (max-width: 599px) {
.twt-ss-box { width: 100%; max-height: none; height: 100%; margin: 0; border: 0; border-radius: 0; }
.twt-ss-kopf { padding-top: calc(.7rem + env(safe-area-inset-top, 0px)); }
.twt-ss-zu { min-height: 44px; padding: .2rem .4rem; font-size: .95rem; font-weight: 600; color: var(--ss-akzent); background: transparent; border: 0; }
.twt-ss-zu-esc { display: none; }
.twt-ss-zu-text { display: inline; }
.twt-ss-tasten { display: none; }
.twt-ss-fuss:has(.twt-ss-alle[hidden]) { display: none; }
.twt-ss-fuss { padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px)); }
.twt-ss-treffer { padding: .75rem; }
}
@media (prefers-reduced-motion: no-preference) {
.twt-ss[open] .twt-ss-box { animation: twt-ss-ein .14s ease-out; }
@keyframes twt-ss-ein { from { opacity: 0; transform: translateY(-6px) scale(.99); } to { opacity: 1; transform: none; } }
}