/* T-000 (04.11.2026): Stile der Website-Bausteine. Jede Regel unter html[data-ux-web~="<kurz>"], nie im Hero. */
/* T-024 Startseite „So läuft es in drei Schritten“ (ux_w_07, Kürzel w07): drei Schritte nebeneinander nach „How It Works
   Timeline“, je Schritt der Bildschirmausschnitt darunter, keine Scroll-Bindung mehr (halbe Höhe). Hero unberührt. */
html[data-ux-web~="w07"] .lauf[data-lauf] { min-height: 0 !important; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 32px);
  row-gap: 18px; align-items: stretch; }
html[data-ux-web~="w07"] .lauf[data-lauf] > .lauf__liste, html[data-ux-web~="w07"] .lauf[data-lauf] > .lauf__buehne { display: contents; }
html[data-ux-web~="w07"] .lauf[data-lauf] .lauf__punkt { position: relative; grid-row: 1; border: 0; padding-top: 52px; counter-increment: ux-w07; }
html[data-ux-web~="w07"] .lauf[data-lauf] { counter-reset: ux-w07; }
html[data-ux-web~="w07"] .lauf[data-lauf] .lauf__punkt:nth-child(1), html[data-ux-web~="w07"] .lauf[data-lauf] .lauf__ansicht:nth-child(1) { grid-column: 1; }
html[data-ux-web~="w07"] .lauf[data-lauf] .lauf__punkt:nth-child(2), html[data-ux-web~="w07"] .lauf[data-lauf] .lauf__ansicht:nth-child(2) { grid-column: 2; }
html[data-ux-web~="w07"] .lauf[data-lauf] .lauf__punkt:nth-child(3), html[data-ux-web~="w07"] .lauf[data-lauf] .lauf__ansicht:nth-child(3) { grid-column: 3; }
html[data-ux-web~="w07"] .lauf[data-lauf] .lauf__punkt::before { content: counter(ux-w07); position: absolute; top: 0; left: 0; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%; font: 600 1rem/1 var(--f); color: #fff; background: var(--tinte, #17171F); z-index: 1; }
html[data-ux-web~="w07"] .lauf[data-lauf] .lauf__punkt:not(:last-child)::after { content: ''; position: absolute; top: 18px; left: 50px;
  right: calc(-1 * clamp(16px, 2.4vw, 32px) + 12px); height: 2px; background: linear-gradient(90deg, var(--tinte-3, #9A9AAE), var(--linie, #E6E6EE)); }
html[data-ux-web~="w07"] .lauf[data-lauf] .lauf__punkt button { padding: 0 0 8px; font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; color: var(--tinte, #17171F);
  cursor: default; }
html[data-ux-web~="w07"] .lauf[data-lauf] .lauf__punkt.ist-aktiv button { font-size: 1.25rem; padding-bottom: 8px; }
html[data-ux-web~="w07"] .lauf[data-lauf] .lauf__text { display: block; padding-bottom: 0; }
html[data-ux-web~="w07"] .lauf[data-lauf] .lauf__ansicht { display: block; grid-row: 2; position: static; animation: none; }
html[data-ux-web~="w07"] .lauf[data-lauf] .lauf__ansicht .fenster { min-height: 0; height: 100%; }
html[data-ux-web~="w07"] .lauf[data-lauf] .lauf__ansicht .ansicht { padding: 16px 18px; }
html[data-ux-web~="w07"] .lauf[data-lauf] .lauf__ansicht .ansicht__zeile { padding: 8px 0; font-size: .86rem; }
html[data-ux-web~="w07"] .lauf[data-lauf] .lauf__ansicht .ansicht__kopf { margin-bottom: 8px; }
html[data-ux-web~="w07"] .lauf[data-lauf] .lauf__ansicht .fenster__fuss { padding: 8px 18px 10px; }
/* dezent beim Erscheinen (ohne Scroll-Bindung); ohne Skript steht alles sofort da */
html[data-ux-web~="w07"] .lauf[data-lauf].ux-w07-ein .lauf__punkt, html[data-ux-web~="w07"] .lauf[data-lauf].ux-w07-ein .lauf__ansicht {
  animation: ux-w07-ein .55s cubic-bezier(.2, .7, .2, 1) both; }
html[data-ux-web~="w07"] .lauf[data-lauf].ux-w07-ein :is(.lauf__punkt, .lauf__ansicht):nth-child(2) { animation-delay: .12s; }
html[data-ux-web~="w07"] .lauf[data-lauf].ux-w07-ein :is(.lauf__punkt, .lauf__ansicht):nth-child(3) { animation-delay: .24s; }
@keyframes ux-w07-ein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html[data-ux-web~="w07"] .lauf[data-lauf].ux-w07-ein :is(.lauf__punkt, .lauf__ansicht) { animation: none; } }
@media (max-width: 860px) {
  html[data-ux-web~="w07"] .lauf[data-lauf] { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  html[data-ux-web~="w07"] .lauf[data-lauf] :is(.lauf__punkt, .lauf__ansicht) { grid-column: 1 !important; grid-row: auto; }
  html[data-ux-web~="w07"] .lauf[data-lauf] .lauf__punkt:nth-child(1) { order: 1; } html[data-ux-web~="w07"] .lauf[data-lauf] .lauf__ansicht:nth-child(1) { order: 2; }
  html[data-ux-web~="w07"] .lauf[data-lauf] .lauf__punkt:nth-child(2) { order: 3; } html[data-ux-web~="w07"] .lauf[data-lauf] .lauf__ansicht:nth-child(2) { order: 4; }
  html[data-ux-web~="w07"] .lauf[data-lauf] .lauf__punkt:nth-child(3) { order: 5; } html[data-ux-web~="w07"] .lauf[data-lauf] .lauf__ansicht:nth-child(3) { order: 6; }
  html[data-ux-web~="w07"] .lauf[data-lauf] .lauf__punkt { padding-top: 0; padding-left: 52px; min-height: 38px; }
  html[data-ux-web~="w07"] .lauf[data-lauf] .lauf__punkt::after { display: none; }
  html[data-ux-web~="w07"] .lauf[data-lauf] .lauf__punkt button { padding-top: 6px; }
}

/* T-025 Preise: Tarifvergleich (ux_w_09, Kürzel w09): klebende Kopfzeile unter der Kopfleiste, Gruppen aufklappbar,
   „Nur Unterschiede zeigen“, Spalte unter der Maus hervorgehoben. Tabelle und Knöpfe unverändert. */
html[data-ux-web~="w09"] .vergleich thead th, html[data-ux-web~="w09"] .vergleich thead td { top: var(--ux-w09-oben, 64px); z-index: 6; }
html[data-ux-web~="w09"] .vergleich.ux-w09-klebt thead th, html[data-ux-web~="w09"] .vergleich.ux-w09-klebt thead td {
  box-shadow: 0 8px 12px -10px rgba(23, 23, 31, .35); }
html[data-ux-web~="w09"] .ux-w09-werkzeug { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px;
  max-width: 820px; margin: 22px auto -14px; }
html[data-ux-web~="w09"] .ux-w09-schalter { display: inline-flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--tinte, #17171F); cursor: pointer; }
html[data-ux-web~="w09"] .ux-w09-schalter input { appearance: none; -webkit-appearance: none; position: relative; width: 38px; height: 22px; margin: 0;
  border-radius: 11px; background: var(--linie, #E6E6EE); cursor: pointer; transition: background .15s ease; }
html[data-ux-web~="w09"] .ux-w09-schalter input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s ease; }
html[data-ux-web~="w09"] .ux-w09-schalter input:checked { background: var(--tinte, #17171F); }
html[data-ux-web~="w09"] .ux-w09-schalter input:checked::after { transform: translateX(16px); }
html[data-ux-web~="w09"] .ux-w09-schalter input:focus-visible { outline: 2px solid var(--tinte, #17171F); outline-offset: 2px; }
html[data-ux-web~="w09"] .ux-w09-alle { padding: 6px 12px; font: 500 .85rem/1.2 var(--f); color: var(--tinte, #17171F); background: none;
  border: 1px solid var(--linie, #E6E6EE); border-radius: 999px; cursor: pointer; }
html[data-ux-web~="w09"] .ux-w09-alle:focus-visible, html[data-ux-web~="w09"] .ux-w09-gruppe:focus-visible { outline: 2px solid var(--tinte, #17171F); outline-offset: 2px; }
html[data-ux-web~="w09"] .ux-w09-gruppe { display: inline-flex; align-items: center; gap: 10px; padding: 0; font: inherit; letter-spacing: inherit; color: inherit;
  background: none; border: 0; cursor: pointer; text-align: left; }
html[data-ux-web~="w09"] .ux-w09-pfeil { transition: transform .15s ease; color: var(--tinte-2, #55556A); }
html[data-ux-web~="w09"] .ux-w09-gruppe[aria-expanded="false"] .ux-w09-pfeil { transform: rotate(-90deg); }
html[data-ux-web~="w09"] .vergleich tr.ux-w09-zu, html[data-ux-web~="w09"] .vergleich.ux-w09-diff tr.ux-w09-gleich,
html[data-ux-web~="w09"] .vergleich tr.ux-w09-leer { display: none; }
html[data-ux-web~="w09"] .vergleich .ux-w09-spot { background: rgba(23, 23, 31, .035); }
html[data-ux-web~="w09"] .vergleich thead .ux-w09-spot { background: var(--grund, #FCFCFC); box-shadow: inset 0 -2px 0 var(--tinte, #17171F); }
@media (prefers-reduced-motion: reduce) {
  html[data-ux-web~="w09"] .ux-w09-schalter input, html[data-ux-web~="w09"] .ux-w09-schalter input::after, html[data-ux-web~="w09"] .ux-w09-pfeil { transition: none; }
}

/* T-026 Ablauf in Schritten (ux_web_steps, Kürzel steps): Standard „How It Works Timeline“ für die Ablauf-Abschnitte.
   Nummerierte Kreise, verbunden durch eine Linie, je Schritt der vorhandene Text (und das vorhandene Bild klein); auf dem
   Handy senkrecht. Drei Bauformen im Bestand: ol.schritte, ol.af-schritte und die Gruppen auf /umstieg (vom Skript
   markiert). Texte, Links und Bilder unverändert; Hero und Hero-Animation unberührt. */
/* Bauform 1: ol.schritte (Karten mit Zähler) */
html[data-ux-web~="steps"] ol.schritte { gap: 30px 20px; }
html[data-ux-web~="steps"] ol.schritte li { position: relative; padding: 54px 6px 0 0; background: none; box-shadow: none; border-radius: 0; }
html[data-ux-web~="steps"] ol.schritte li::before { position: absolute; top: 0; left: 0; width: 40px; height: 40px; margin: 0; font-size: .9375rem;
  box-shadow: 0 0 0 6px var(--grund, #FCFCFC); z-index: 1; }
html[data-ux-web~="steps"] ol.schritte li::after { content: ''; position: absolute; top: 19px; left: 52px; right: -14px; height: 2px;
  background: linear-gradient(90deg, var(--tinte-3, #9A9AAE), var(--linie, #E6E6EE)); }
html[data-ux-web~="steps"] ol.schritte li:last-child::after, html[data-ux-web~="steps"] ol.schritte li:nth-child(4n)::after { display: none; }
@media (max-width: 1100px) {
  html[data-ux-web~="steps"] ol.schritte li:nth-child(4n)::after { display: block; }
  html[data-ux-web~="steps"] ol.schritte li:nth-child(2n)::after { display: none; }
}
@media (max-width: 640px) {
  html[data-ux-web~="steps"] ol.schritte { gap: 22px; }
  html[data-ux-web~="steps"] ol.schritte li { padding: 4px 0 0 56px; min-height: 40px; }
  html[data-ux-web~="steps"] ol.schritte li::after, html[data-ux-web~="steps"] ol.schritte li:nth-child(2n)::after,
  html[data-ux-web~="steps"] ol.schritte li:nth-child(4n)::after { display: block; top: 46px; bottom: -18px; left: 19px; right: auto; width: 2px; height: auto;
    background: var(--linie, #E6E6EE); }
  html[data-ux-web~="steps"] ol.schritte li:last-child::after { display: none; }
}
/* Bauform 2: ol.af-schritte (Text und Bildschirmausschnitt im Wechsel) */
html[data-ux-web~="steps"] ol.af-schritte { gap: 34px; }
html[data-ux-web~="steps"] ol.af-schritte > li, html[data-ux-web~="steps"] ol.af-schritte > li:nth-child(even) {
  position: relative; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); align-items: start; padding-left: 64px; }
html[data-ux-web~="steps"] ol.af-schritte > li:nth-child(even) .af-schritt__text { order: 0; }
html[data-ux-web~="steps"] ol.af-schritte .af-schritt__nr { position: absolute; top: 0; left: 0; width: 42px; height: 42px; margin: 0; z-index: 1;
  color: #fff; background: var(--tinte, #17171F); box-shadow: 0 0 0 6px var(--grund, #FCFCFC); }
html[data-ux-web~="steps"] ol.af-schritte .af-schritt__text { padding-top: 8px; }
html[data-ux-web~="steps"] ol.af-schritte > li::before { content: ''; position: absolute; top: 48px; bottom: -28px; left: 20px; width: 2px;
  background: var(--linie, #E6E6EE); }
html[data-ux-web~="steps"] ol.af-schritte > li:last-child::before { display: none; }
html[data-ux-web~="steps"] ol.af-schritte .af-schritt__bild img { max-height: 320px; }
@media (max-width: 760px) {
  html[data-ux-web~="steps"] ol.af-schritte > li, html[data-ux-web~="steps"] ol.af-schritte > li:nth-child(even) { grid-template-columns: minmax(0, 1fr); padding-left: 56px; }
  html[data-ux-web~="steps"] ol.af-schritte .af-schritt__nr { width: 38px; height: 38px; }
  html[data-ux-web~="steps"] ol.af-schritte > li::before { left: 18px; top: 44px; }
}
/* Bauform 3: Gruppen als Ablauf (/umstieg, vom Skript mit .ux-steps-gruppen markiert) */
html[data-ux-web~="steps"] .ux-steps-gruppen { counter-reset: ux-steps; gap: 34px; }
html[data-ux-web~="steps"] .ux-steps-gruppen > .gruppe { position: relative; padding-left: 64px; counter-increment: ux-steps; }
html[data-ux-web~="steps"] .ux-steps-gruppen > .gruppe::before { content: counter(ux-steps); position: absolute; top: 0; left: 0; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%; font: 600 .9375rem/1 var(--f); color: #fff; background: var(--tinte, #17171F);
  box-shadow: 0 0 0 6px var(--grund, #FCFCFC); z-index: 1; }
html[data-ux-web~="steps"] .ux-steps-gruppen > .gruppe::after { content: ''; position: absolute; top: 48px; bottom: -28px; left: 20px; width: 2px; background: var(--linie, #E6E6EE); }
html[data-ux-web~="steps"] .ux-steps-gruppen > .gruppe:last-child::after { display: none; }
html[data-ux-web~="steps"] .ux-steps-gruppen .gruppe__kopf { text-align: left; margin-bottom: 8px; padding-top: 6px; }
@media (max-width: 640px) {
  html[data-ux-web~="steps"] .ux-steps-gruppen > .gruppe { padding-left: 56px; }
  html[data-ux-web~="steps"] .ux-steps-gruppen > .gruppe::before { width: 38px; height: 38px; }
  html[data-ux-web~="steps"] .ux-steps-gruppen > .gruppe::after { left: 18px; top: 44px; }
}

/* T-027 Zahlen und Belege (ux_web_stats, Kürzel stats): Standard „Stats“ für die Zahlenblöcke (ul.eckdaten): große Zahl
   mit kleiner Einheit, kurze Beschriftung, Trennlinien statt grauer Karten, Quelle als Fußnote direkt darunter. Zahlen und
   Belege unverändert; hochgezählt wird nur beim Erscheinen (Skript), der Endwert ist der belegte Wert. */
html[data-ux-web~="stats"] ul.eckdaten { gap: 0; border-top: 1px solid var(--linie, #E6E6EE); border-bottom: 1px solid var(--linie, #E6E6EE); }
html[data-ux-web~="stats"] ul.eckdaten li { padding: 30px 28px 28px; background: none; border-radius: 0; }
html[data-ux-web~="stats"] ul.eckdaten li + li { border-left: 1px solid var(--linie, #E6E6EE); }
html[data-ux-web~="stats"] ul.eckdaten b { font-size: clamp(2.4rem, 4.4vw, 3.5rem); font-variant-numeric: tabular-nums; }
html[data-ux-web~="stats"] ul.eckdaten b > span { display: inline; margin: 0; font-size: inherit; color: inherit; }
html[data-ux-web~="stats"] ul.eckdaten b > .ux-stats-einheit { font-size: .42em; font-weight: 500; letter-spacing: -.01em; color: var(--tinte-2, #55556A); }
html[data-ux-web~="stats"] ul.eckdaten li > span { margin-top: 10px; max-width: 34ch; }
html[data-ux-web~="stats"] ul.eckdaten + .fussnote { max-width: 1080px; margin: 12px auto 0; text-align: left; line-height: 1.55; }
@media (max-width: 860px) {
  html[data-ux-web~="stats"] ul.eckdaten li { padding: 22px 4px; }
  html[data-ux-web~="stats"] ul.eckdaten li + li { border-left: 0; border-top: 1px solid var(--linie, #E6E6EE); }
}

/* T-028 Gegenüberstellung (ux_web_compare, Kürzel compare): Standard „Us vs Them Comparison“. Die Spalte „Was Sie
   bekommen“ hervorgehoben mit Haken, die Spalte der Grenzen gedämpft mit Kreuz-Symbolen, Überschrift je Spalte als
   Plakette. Gleiche Gestaltung für die Kästen „Was … nicht tut“, „So ist es heute“ (vom Skript markiert) und die
   Rahmenkarten im Abschnitt #grenzen. Texte und Reihenfolge unverändert (keine Umstellung der Spalten). */
html[data-ux-web~="compare"] .af-grenzen { gap: 18px; align-items: stretch; }
html[data-ux-web~="compare"] .af-grenzen__spalte h3,
html[data-ux-web~="compare"] #grenzen .rahmenkarte h3 { display: inline-block; margin: 0 0 18px; padding: 5px 13px; border-radius: 999px; font-size: .875rem; font-weight: 600; letter-spacing: 0; }
html[data-ux-web~="compare"] .af-grenzen__ja, html[data-ux-web~="compare"] #grenzen .rahmenkarte:first-child {
  background: var(--weiss, #fff); box-shadow: 0 0 0 1.5px var(--tinte, #17171F), 0 14px 30px -18px rgba(23, 23, 31, .35); }
html[data-ux-web~="compare"] .af-grenzen__ja h3, html[data-ux-web~="compare"] #grenzen .rahmenkarte:first-child h3 { color: #fff; background: var(--tinte, #17171F); }
html[data-ux-web~="compare"] .af-grenzen__nein, html[data-ux-web~="compare"] #grenzen .rahmenkarte:nth-child(2) { background: var(--grau-1, #F4F4F6); box-shadow: none; }
html[data-ux-web~="compare"] .af-grenzen__nein h3, html[data-ux-web~="compare"] #grenzen .rahmenkarte:nth-child(2) h3 { color: var(--tinte, #17171F); background: rgba(23, 23, 31, .07); }
html[data-ux-web~="compare"] .af-grenzen__nein li { color: var(--tinte-2, #55556A); }
/* Symbole: Kreis mit Haken bzw. Kreuz, rein in CSS */
html[data-ux-web~="compare"] .af-grenzen__spalte li { padding-left: 34px; }
html[data-ux-web~="compare"] .af-grenzen__spalte li::before { left: 0; top: .12em; width: 22px; height: 22px; border: 0; border-radius: 50%; transform: none; }
html[data-ux-web~="compare"] .af-grenzen__ja li::before { background: var(--tinte, #17171F); }
html[data-ux-web~="compare"] .af-grenzen__ja li::after { content: ''; position: absolute; left: 7px; top: calc(.12em + 6px); width: 8px; height: 5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
html[data-ux-web~="compare"] .af-grenzen__nein li::before { background: rgba(23, 23, 31, .1); }
html[data-ux-web~="compare"] :is(.af-grenzen__nein li, .ux-compare-kreuz)::after { content: ''; position: absolute; width: 10px; height: 10px;
  background: linear-gradient(45deg, transparent 42%, var(--tinte-2, #55556A) 42% 58%, transparent 58%),
              linear-gradient(-45deg, transparent 42%, var(--tinte-2, #55556A) 42% 58%, transparent 58%); }
html[data-ux-web~="compare"] .af-grenzen__nein li::after { left: 6px; top: calc(.12em + 6px); }
/* Kasten „Was … nicht tut“ und „So ist es heute“: gedämpft mit Kreuz */
html[data-ux-web~="compare"] .grenze, html[data-ux-web~="compare"] .ux-compare-heute .ux-compare-karte {
  position: relative; padding: 24px 28px 24px 76px; border-radius: 16px; background: var(--grau-1, #F4F4F6); }
html[data-ux-web~="compare"] .grenze::before, html[data-ux-web~="compare"] .ux-compare-heute .ux-compare-karte::before { content: ''; position: absolute; left: 26px; top: 24px;
  width: 30px; height: 30px; border-radius: 50%; background: rgba(23, 23, 31, .1); }
html[data-ux-web~="compare"] .grenze::after, html[data-ux-web~="compare"] .ux-compare-heute .ux-compare-karte::after { content: ''; position: absolute; left: 35px; top: 33px;
  width: 12px; height: 12px;
  background: linear-gradient(45deg, transparent 42%, var(--tinte-2, #55556A) 42% 58%, transparent 58%),
              linear-gradient(-45deg, transparent 42%, var(--tinte-2, #55556A) 42% 58%, transparent 58%); }
html[data-ux-web~="compare"] .ux-compare-heute .ux-compare-karte { max-width: 760px; margin-inline: auto; }
html[data-ux-web~="compare"] .ux-compare-heute .ux-compare-karte .vorspann { margin: 0; max-width: none !important; color: var(--tinte-2, #55556A); }
@media (max-width: 640px) {
  html[data-ux-web~="compare"] .grenze, html[data-ux-web~="compare"] .ux-compare-heute .ux-compare-karte { padding: 64px 20px 20px; }
  html[data-ux-web~="compare"] .grenze::before, html[data-ux-web~="compare"] .ux-compare-heute .ux-compare-karte::before { left: 20px; top: 20px; }
  html[data-ux-web~="compare"] .grenze::after, html[data-ux-web~="compare"] .ux-compare-heute .ux-compare-karte::after { left: 29px; top: 29px; }
}

/* T-029 Tabelle (ux_web_table, Kürzel table): Standard „Capability Matrix“ für table.tabelle und .se-tabelle: klebende
   Kopfzeile unter der Kopfleiste, Symbole für „ja“, „nein“ und „teilweise“ (Wort bleibt stehen), Zeilen-Hover, auf dem
   Handy als Karten mit Spaltennamen. Inhalte unverändert; die Preisvergleichstabelle gestaltet T-025. */
@media (min-width: 761px) {
  html[data-ux-web~="table"] .se-tabelle, html[data-ux-web~="table"] .w11-tabelle { overflow: clip; }
  html[data-ux-web~="table"] :is(.se-tabelle table, table.tabelle) thead th { position: sticky; top: var(--ux-table-oben, 64px); z-index: 3;
    box-shadow: inset 0 -1px 0 var(--linie-2, #D9D9E3); }
  html[data-ux-web~="table"] table.tabelle thead th { background: var(--grund, #FCFCFC); }
}
html[data-ux-web~="table"] :is(.se-tabelle, table.tabelle) tbody tr { transition: background-color .12s ease; }
html[data-ux-web~="table"] :is(.se-tabelle, table.tabelle) tbody tr:hover > * { background-color: rgba(23, 23, 31, .035); }
/* Symbole vor dem Wort */
html[data-ux-web~="table"] td:is(.ux-table-ja, .ux-table-nein, .ux-table-teil) { white-space: nowrap; }
html[data-ux-web~="table"] td:is(.ux-table-ja, .ux-table-nein, .ux-table-teil)::after { content: ''; display: inline-block; vertical-align: -3px; margin-left: 8px;
  width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box; }
html[data-ux-web~="table"] td.ux-table-ja::after { background: var(--tinte, #17171F)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
html[data-ux-web~="table"] td.ux-table-nein::after { border: 1.5px solid var(--tinte-3, #9A9AAE);
  background: linear-gradient(var(--tinte-3, #9A9AAE), var(--tinte-3, #9A9AAE)) center / 7px 1.5px no-repeat; }
html[data-ux-web~="table"] td.ux-table-teil::after { border: 1.5px solid var(--tinte, #17171F); background: linear-gradient(90deg, var(--tinte, #17171F) 50%, transparent 50%); }
/* Handy: Zeilen als Karten */
@media (max-width: 640px) {
  html[data-ux-web~="table"] table.tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  html[data-ux-web~="table"] table.tabelle { display: flex; flex-direction: column; }
  html[data-ux-web~="table"] table.tabelle tbody { display: block; }
  html[data-ux-web~="table"] table.tabelle caption { display: block; order: 2; }   /* Hinweis wie bisher unter der Tabelle */
  html[data-ux-web~="table"] :is(table.tabelle, .se-tabelle--stapel table) tbody tr { display: block; margin: 0 0 10px; padding: 14px 16px; border: 1px solid var(--linie, #E6E6EE);
    border-radius: 14px; background: var(--weiss, #fff); }
  html[data-ux-web~="table"] .se-tabelle--stapel { border: 0; background: none; }
  html[data-ux-web~="table"] :is(table.tabelle, .se-tabelle--stapel table) :is(tbody th, tbody td) { display: block; padding: 3px 0; border: 0; }
  html[data-ux-web~="table"] :is(table.tabelle, .se-tabelle--stapel table) tbody th { margin-bottom: 4px; font-weight: 600; }
  html[data-ux-web~="table"] table.tabelle td[data-k]::before { content: attr(data-k); display: block; font-size: .75rem; color: var(--tinte-3, #9A9AAE); }
  html[data-ux-web~="table"] td:is(.ux-table-ja, .ux-table-nein, .ux-table-teil) { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { html[data-ux-web~="table"] :is(.se-tabelle, table.tabelle) tbody tr { transition: none; } }

/* T-030 Funktionen und Vorteile (ux_web_features, Kürzel features): Standard „Grid Feature Cards“ für ul.werte,
   ul.vorteile und .rahmenkarten: Zellen im gemeinsamen Raster mit feinen Linien statt einzelner grauer Karten, je Punkt
   das vorhandene Strichsymbol ohne Kachel, Titel, ein Satz. Texte, Links und Knöpfe unverändert. Die Rahmenkarten im
   Abschnitt #grenzen gestaltet T-028 (Gegenüberstellung). */
html[data-ux-web~="features"] :is(ul.werte, ul.vorteile, .rahmenkarten:not(#grenzen .rahmenkarten)) { gap: 0; padding: 0; border: 0; border-top: 1px solid var(--linie, #E6E6EE); border-left: 1px solid var(--linie, #E6E6EE); border-radius: 0; }
html[data-ux-web~="features"] :is(ul.werte, ul.vorteile) > li,
html[data-ux-web~="features"] .rahmenkarten:not(#grenzen .rahmenkarten) > .rahmenkarte {
  margin: 0; padding: 26px 26px 28px; border: 0; border-right: 1px solid var(--linie, #E6E6EE); border-bottom: 1px solid var(--linie, #E6E6EE);
  border-radius: 0; background: var(--weiss, #fff); box-shadow: none;
  transition: background-color .15s ease; }
html[data-ux-web~="features"] :is(ul.werte, ul.vorteile) > li:hover,
html[data-ux-web~="features"] .rahmenkarten:not(#grenzen .rahmenkarten) > .rahmenkarte:hover { background: var(--grau-1, #F4F4F6); }
html[data-ux-web~="features"] :is(ul.werte, ul.vorteile) .ic { width: 26px; height: 26px; padding: 0; margin-bottom: 10px; border-radius: 0; background: none;
  color: var(--tinte, #17171F); stroke-width: 1.6; }
html[data-ux-web~="features"] :is(ul.werte, ul.vorteile) b,
html[data-ux-web~="features"] .rahmenkarten:not(#grenzen .rahmenkarten) .rahmenkarte h3 { font-weight: 600; letter-spacing: -.01em; }
/* Abschnitte mit Links in den Problemen der Startseite: Links füllen die Zelle */
html[data-ux-web~="features"] ul.vorteile.w11-probleme > li { padding: 0; }
html[data-ux-web~="features"] ul.vorteile.w11-probleme a { border-radius: 0; background: none; height: 100%; }
@media (prefers-reduced-motion: reduce) {
  html[data-ux-web~="features"] :is(ul.werte, ul.vorteile) > li, html[data-ux-web~="features"] .rahmenkarten > .rahmenkarte { transition: none; }
}

/* T-070 Kopfzeile und Mega-Menü (ux_w_01, Kürzel w01) nach „Navigation Menu“: im Menü „Funktionen“ links die Kachel
   „Vorschau ohne Anmeldung“, Spaltenköpfe als feine Beschriftung; beim Scrollen wird die Kopfzeile flacher und bekommt einen
   leichten Glas-Hintergrund. Menüpunkte, Mega-Menüs und Links bleiben die der Seite; der Hero bleibt unberührt.
   04.11.2026 abends: Die Oberleiste (Kontakt, Für Anbieter, Kurzprofil) bleibt oben sichtbar (Rubens Wunsch); die erste
   Fassung hatte sie ausgeblendet und ihre Links in Menü und Fuß verteilt. */
html[data-ux-web~="w01"] .kopf { transition: background-color .2s ease, box-shadow .2s ease; }
html[data-ux-web~="w01"] .kopf .kopf__zeile { transition: height .2s var(--weich, ease); }
@media (min-width: 1220px) {
  html[data-ux-web~="w01"] .kopf.ux-w01-klein { background: rgba(252, 252, 252, .78); -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px); box-shadow: 0 1px 0 var(--linie, rgba(13, 13, 13, .1)), 0 10px 28px -22px rgba(13, 13, 13, .35); }
  html[data-ux-web~="w01"] .kopf.ux-w01-klein .kopf__zeile { height: 56px; }
  html[data-ux-web~="w01"] .kopf.ux-w01-klein .mega { max-height: calc(100vh - 56px); }
  html[data-ux-web~="w01"] .kopf.ux-w01-klein ~ .blende { inset: 56px 0 0; }
}
html[data-ux-web~="w01"] .mega__kopf { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-3, #6E6E6E); }
/* Kachel „Vorschau ohne Anmeldung“ links neben den Spalten des Menüs „Funktionen“ */
html[data-ux-web~="w01"] #mega > .huelle.ux-w01-mit-kachel { display: grid; grid-template-columns: 236px minmax(0, 1fr); column-gap: 28px; }
html[data-ux-web~="w01"] #mega > .huelle.ux-w01-mit-kachel > * { grid-column: 2; min-width: 0; }
html[data-ux-web~="w01"] #mega > .huelle.ux-w01-mit-kachel > .ux-w01-kachel { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
html[data-ux-web~="w01"] .ux-w01-kachel { position: relative; display: flex; flex-direction: column; gap: 8px; margin: 24px 0 16px; padding: 20px 18px 18px;
  min-height: 236px; border-radius: 14px; background: var(--pastell-a, #F1EBFF); color: var(--tinte, #0D0D0D); text-decoration: none; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(106, 44, 240, .14); transition: box-shadow .18s ease, transform .18s var(--weich, ease); }
html[data-ux-web~="w01"] .ux-w01-kachel:hover { box-shadow: inset 0 0 0 1px rgba(106, 44, 240, .35), 0 12px 28px -18px rgba(106, 44, 240, .45); transform: translateY(-1px); }
html[data-ux-web~="w01"] .ux-w01-kachel:focus-visible { outline: 2px solid var(--violett, #6A2CF0); outline-offset: 3px; }
html[data-ux-web~="w01"] .ux-w01-marke { align-self: flex-start; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .78);
  font-size: .75rem; font-weight: 600; color: var(--violett, #6A2CF0); }
html[data-ux-web~="w01"] .ux-w01-titel { margin-top: 6px; font-size: 1.125rem; font-weight: 600; line-height: 1.25; text-wrap: balance; }
html[data-ux-web~="w01"] .ux-w01-satz { font-size: .875rem; line-height: 1.45; color: var(--tinte-2, #4A4A4A); }
html[data-ux-web~="w01"] .ux-w01-los { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-size: .875rem; font-weight: 600; color: var(--violett, #6A2CF0); }
html[data-ux-web~="w01"] .ux-w01-los svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s ease; }
html[data-ux-web~="w01"] .ux-w01-kachel:hover .ux-w01-los svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  html[data-ux-web~="w01"] .kopf, html[data-ux-web~="w01"] .kopf .kopf__zeile, html[data-ux-web~="w01"] .ux-w01-kachel,
  html[data-ux-web~="w01"] .ux-w01-los svg { transition: none; }
}

/* T-071 Mobiles Menü (ux_w_02, Kürzel w02) nach „Kinetic Navigation“ in ruhiger Fassung: das Blatt-Menü füllt die
   Fläche unter der Kopfzeile, große Einträge, Unterpunkte als Akkordeon (eines offen), Einträge erscheinen leicht
   gestaffelt, „Kostenlos registrieren“ und „Login“ stehen fest unten. Öffnen, Schließen und alle Links bleiben die von
   site.js und der Seite. Wirkt nur, solange der Menü-Knopf statt des Hauptmenüs sichtbar ist (bis 1219 px). */
@media (max-width: 1219px) {
  html[data-ux-web~="w02"] .blatt-menue { display: flex; flex-direction: column; padding: 4px var(--rand, 16px) 0; }
  html[data-ux-web~="w02"] .blatt-menue summary { padding: 20px 0; font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.1; }
  html[data-ux-web~="w02"] .blatt-menue summary:focus-visible { outline: 2px solid var(--violett, #6A2CF0); outline-offset: 2px; border-radius: 6px; }
  html[data-ux-web~="w02"] .blatt-menue details[open] > summary { color: var(--violett, #6A2CF0); }
  html[data-ux-web~="w02"] .blatt-menue summary .ic { transition: transform .22s var(--weich, ease); }
  html[data-ux-web~="w02"] .blatt-menue .mega__liste { padding: 0 0 16px 2px; }
  html[data-ux-web~="w02"] .blatt-menue .mega__eintrag { padding: 11px 0; font-size: 1.0625rem; }
  html[data-ux-web~="w02"] .blatt-menue details[open] > .mega__liste { animation: ux-w02-auf .24s var(--weich, ease) both; }
  html[data-ux-web~="w02"] .blatt-menue.ist-offen > details,
  html[data-ux-web~="w02"] .blatt-menue.ist-offen > .blatt-menue__zeile { animation: ux-w02-ein .34s var(--weich, ease) both; }
  html[data-ux-web~="w02"] .blatt-menue.ist-offen > details:nth-child(2) { animation-delay: .03s; }
  html[data-ux-web~="w02"] .blatt-menue.ist-offen > details:nth-child(3) { animation-delay: .06s; }
  html[data-ux-web~="w02"] .blatt-menue.ist-offen > details:nth-child(4) { animation-delay: .09s; }
  html[data-ux-web~="w02"] .blatt-menue.ist-offen > details:nth-child(5) { animation-delay: .12s; }
  html[data-ux-web~="w02"] .blatt-menue.ist-offen > details:nth-child(6) { animation-delay: .15s; }
  html[data-ux-web~="w02"] .blatt-menue.ist-offen > details:nth-child(n+7),
  html[data-ux-web~="w02"] .blatt-menue.ist-offen > .blatt-menue__zeile { animation-delay: .18s; }
  html[data-ux-web~="w02"] .blatt-menue__knoepfe { position: sticky; bottom: 0; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px; margin: auto calc(-1 * var(--rand, 16px)) 0; padding: 14px var(--rand, 16px) calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--grund, #FCFCFC); box-shadow: 0 -1px 0 var(--linie, rgba(13, 13, 13, .1)), 0 -12px 24px -20px rgba(13, 13, 13, .3); }
  html[data-ux-web~="w02"] .blatt-menue__knoepfe .knopf { min-height: 48px; }
  html[data-ux-web~="w02"] .blatt-menue__knoepfe a[href="/registrieren"] { order: 2; background: var(--violett, #6A2CF0); color: #fff; box-shadow: none; }
  html[data-ux-web~="w02"] .blatt-menue__knoepfe a[href="/registrieren"]:hover { background: #5A1FDB; }
}
@keyframes ux-w02-ein { from { opacity: 0; transform: translateY(10px); } }
@keyframes ux-w02-auf { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  html[data-ux-web~="w02"] .blatt-menue.ist-offen > *, html[data-ux-web~="w02"] .blatt-menue details[open] > .mega__liste { animation: none; }
}

/* T-072 Fußzeile (ux_w_03, Kürzel w03) nach „Footer column“: fünf Linkspalten mit eigener Überschrift neben der Marke,
   darüber eine schmale Zeile „Vorschau öffnen“ und „Demo anfragen“, Siegel in Graustufen (farbig beim Überfahren und
   mit Fokus). Alle Links, Siegel, Zahlungswege und die Rechtszeile bleiben. */
html[data-ux-web~="w03"] .fuss .ux-w03-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  margin: 0 0 40px; padding: 18px 22px; border-radius: 16px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
html[data-ux-web~="w03"] .fuss .ux-w03-zeile p { margin: 0; color: #fff; font-size: .9375rem; font-weight: 500; }
html[data-ux-web~="w03"] .fuss .ux-w03-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
html[data-ux-web~="w03"] .fuss a.ux-w03-knopf { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px;
  font-weight: 500; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
html[data-ux-web~="w03"] .fuss a.ux-w03-knopf:hover { background: rgba(255, 255, 255, .08); }
html[data-ux-web~="w03"] .fuss a.ux-w03-knopf.ux-w03-haupt { background: #fff; color: var(--tinte, #0D0D0D); box-shadow: none; }
html[data-ux-web~="w03"] .fuss a.ux-w03-knopf.ux-w03-haupt:hover { background: var(--grau-1, #F3F3F3); }
html[data-ux-web~="w03"] .fuss .fuss__raster.ux-w03-raster { grid-template-columns: minmax(0, 1.7fr) repeat(5, minmax(0, 1fr)); gap: 28px 24px; }
html[data-ux-web~="w03"] .fuss .ux-w03-spalte h2 { margin: 0 0 14px; font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255, 255, 255, .92); }
html[data-ux-web~="w03"] .fuss .ux-w03-spalte ul + h2 { margin-top: 0; }
html[data-ux-web~="w03"] .fuss .fuss__verband img { filter: grayscale(1); opacity: .72; transition: filter .2s ease, opacity .2s ease; }
html[data-ux-web~="w03"] .fuss .fuss__verband:hover img, html[data-ux-web~="w03"] .fuss .fuss__verband:focus-visible img { filter: none; opacity: 1; }
html[data-ux-web~="w03"] .fuss .ux-w03-zb { display: contents; }
html[data-ux-web~="w03"] .fuss .fuss__zahlung .zb-pp2 { color: #0079C1; }   /* helles PayPal-Blau #009cde hatte 3,1:1, das dunklere Markenblau 4,8:1 */
@media (max-width: 1100px) {
  html[data-ux-web~="w03"] .fuss .fuss__raster.ux-w03-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-ux-web~="w03"] .fuss .fuss__raster.ux-w03-raster > .fuss__marke { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  html[data-ux-web~="w03"] .fuss .fuss__raster.ux-w03-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-ux-web~="w03"] .fuss .ux-w03-knoepfe, html[data-ux-web~="w03"] .fuss a.ux-w03-knopf { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-ux-web~="w03"] .fuss .fuss__verband img { transition: none; }
}

/* T-073 Preis-Freischaltung (ux_w_04, Kürzel w04) nach „Credenza“: die Freischaltkarte aus preisfrei.js steht als
   Karte an der Stelle der Preise statt als Vollfenster über der Seite (Bild links, Felder nebeneinander); am Handy auf
   Klick als Bodenblatt. Freischalt-Logik, Felder, Texte und Sperre der Zahlen bleiben die von preisfrei.js. */
html[data-ux-web~="w04"] .pf-schleier.ux-w04-eingebettet { position: static; inset: auto; z-index: auto; display: block; margin: 8px 0 32px; padding: 0;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; }
html[data-ux-web~="w04"] .ux-w04-eingebettet .pf-karte { display: grid; grid-template-columns: minmax(220px, 32%) minmax(0, 1fr); max-width: none; max-height: none;
  overflow: hidden; border: 1px solid var(--linie, rgba(13, 13, 13, .1)); box-shadow: var(--schatten-panel, 0 8px 28px rgba(13, 13, 13, .1));
  text-align: left; animation: ux-w04-ein .32s var(--weich, ease) both; }
html[data-ux-web~="w04"] .ux-w04-eingebettet .pf-bild { height: auto; min-height: 240px; }
html[data-ux-web~="w04"] .ux-w04-eingebettet .pf-koerper { padding: 28px 32px 26px; }
html[data-ux-web~="w04"] .ux-w04-eingebettet .pf-logo { display: none; }   /* Schmuck (aria-hidden), ragt im Raster sonst abgeschnitten ins Bild */
html[data-ux-web~="w04"] .ux-w04-eingebettet #pfStufe1 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; align-items: end; }
html[data-ux-web~="w04"] .ux-w04-eingebettet #pfStufe1 > :not(.pf-feld) { grid-column: 1 / -1; }
html[data-ux-web~="w04"] .ux-w04-eingebettet .pf-knopf { justify-self: start; min-width: 220px; }
@media (max-width: 760px) {
  html[data-ux-web~="w04"] .ux-w04-eingebettet .pf-karte { grid-template-columns: minmax(0, 1fr); }
  html[data-ux-web~="w04"] .ux-w04-eingebettet .pf-bild { min-height: 0; height: 112px; }
  html[data-ux-web~="w04"] .ux-w04-eingebettet .pf-koerper { padding: 28px 20px 22px; }
  html[data-ux-web~="w04"] .ux-w04-eingebettet #pfStufe1 { grid-template-columns: minmax(0, 1fr); }
  html[data-ux-web~="w04"] .ux-w04-eingebettet .pf-knopf { justify-self: stretch; min-width: 0; }
}
html[data-ux-web~="w04"] .pf-karte .pf-klein { color: var(--tinte-3, #6E6E6E); }   /* Bestand #8a8aa0 hatte 3,4:1 */
/* Handy, auf Klick: Bodenblatt mit Griff */
@media (max-width: 640px) {
  html[data-ux-web~="w04"] .pf-schleier.ux-w04-blatt { align-items: flex-end; padding: 0; }
  html[data-ux-web~="w04"] .ux-w04-blatt .pf-karte { max-width: none; max-height: 92vh; overflow-y: auto; border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px); animation: ux-w04-hoch .32s var(--weich, ease) both; }
  html[data-ux-web~="w04"] .ux-w04-blatt .pf-bild { height: 84px; }
  html[data-ux-web~="w04"] .ux-w04-blatt .pf-karte::before { content: ''; position: absolute; top: 8px; left: 50%; z-index: 3; width: 40px; height: 4px;
    margin-left: -20px; border-radius: 2px; background: rgba(255, 255, 255, .85); }
}
@keyframes ux-w04-ein { from { opacity: 0; transform: translateY(8px); } }
@keyframes ux-w04-hoch { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) {
  html[data-ux-web~="w04"] .ux-w04-eingebettet .pf-karte, html[data-ux-web~="w04"] .ux-w04-blatt .pf-karte { animation: none; }
}

/* T-074 Abschluss-Band „Digitale-Vergabe.DE kennenlernen“ (ux_w_05, Kürzel w05) und T-078 Handlungsaufforderung
   (ux_web_cta, Kürzel cta) nach „CTA 3“: großzügige helle Fläche mit feinem Rahmen und Eckmarken, kräftige Überschrift,
   Knöpfe mittig (Registrieren violett, Vorschau als zweiter Knopf), darunter eine Vertrauenszeile. Die Skripte beider
   Bausteine markieren ihre Bänder (.ux-w05-band bzw. .ux-cta-band); die Stile hier gelten für beide. Texte und Links
   der Bänder bleiben. */
:is(html[data-ux-web~="w05"] .ux-w05-band, html[data-ux-web~="cta"] .ux-cta-band) {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; max-width: 960px;
  margin-inline: auto; padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 64px) clamp(32px, 4.5vw, 52px); text-align: center;
  border: 1px solid var(--linie-2, rgba(13, 13, 13, .18)); border-radius: 0;
  background: radial-gradient(60% 80% at 50% 0%, var(--violett-hauch, #F1EBFF) 0%, transparent 70%), var(--weiss, #fff); }
:is(html[data-ux-web~="w05"] .ux-w05-band, html[data-ux-web~="cta"] .ux-cta-band) h2 {
  margin: 0; font-size: clamp(1.75rem, 3vw, 2.4rem); font-weight: 600; line-height: 1.15; letter-spacing: -.025em; text-wrap: balance; }
:is(html[data-ux-web~="w05"] .ux-w05-band, html[data-ux-web~="cta"] .ux-cta-band) p:not(.ux-cta-vertrauen) {
  max-width: 56ch; margin: 12px auto 0; color: var(--tinte-2, #4A4A4A); font-size: 1rem; line-height: 1.55; }
:is(html[data-ux-web~="w05"] .ux-w05-band, html[data-ux-web~="cta"] .ux-cta-band) .knoepfe {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 16px; margin-top: 28px; }
:is(html[data-ux-web~="w05"] .ux-w05-band, html[data-ux-web~="cta"] .ux-cta-band) .knoepfe a.knopf[href="/registrieren"] {
  background: var(--violett, #6A2CF0); color: #fff; box-shadow: none; }
:is(html[data-ux-web~="w05"] .ux-w05-band, html[data-ux-web~="cta"] .ux-cta-band) .knoepfe a.knopf[href="/registrieren"]:hover { background: #5620D6; }
:is(html[data-ux-web~="w05"] .ux-w05-band, html[data-ux-web~="cta"] .ux-cta-band) .knoepfe a.knopf.ux-cta-zweit {
  background: var(--weiss, #fff); color: var(--tinte, #0D0D0D); box-shadow: inset 0 0 0 1px var(--linie-2, rgba(13, 13, 13, .18)); }
:is(html[data-ux-web~="w05"] .ux-w05-band, html[data-ux-web~="cta"] .ux-cta-band) .knoepfe a.knopf.ux-cta-zweit:hover { background: var(--grau-1, #F3F3F3); }
:is(html[data-ux-web~="w05"] .ux-w05-band, html[data-ux-web~="cta"] .ux-cta-band) .ux-cta-vertrauen {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 22px 0 0; padding: 0; list-style: none;
  font-size: .8125rem; color: var(--tinte-3, #6E6E6E); }
:is(html[data-ux-web~="w05"] .ux-w05-band, html[data-ux-web~="cta"] .ux-cta-band) .ux-cta-vertrauen li { display: inline-flex; align-items: center; gap: 6px; }
:is(html[data-ux-web~="w05"] .ux-w05-band, html[data-ux-web~="cta"] .ux-cta-band) .ux-cta-vertrauen svg {
  width: 14px; height: 14px; fill: none; stroke: var(--ok, #0A7650); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Eckmarken: vier kleine Kreuze auf den Ecken des Rahmens */
:is(html[data-ux-web~="w05"] .ux-w05-band, html[data-ux-web~="cta"] .ux-cta-band) .ux-cta-ecke {
  position: absolute; width: 13px; height: 13px; pointer-events: none;
  background: linear-gradient(var(--tinte, #0D0D0D), var(--tinte, #0D0D0D)) center / 13px 1px no-repeat,
              linear-gradient(var(--tinte, #0D0D0D), var(--tinte, #0D0D0D)) center / 1px 13px no-repeat; }
:is(html[data-ux-web~="w05"] .ux-w05-band, html[data-ux-web~="cta"] .ux-cta-band) .ux-cta-ecke.e1 { top: -7px; left: -7px; }
:is(html[data-ux-web~="w05"] .ux-w05-band, html[data-ux-web~="cta"] .ux-cta-band) .ux-cta-ecke.e2 { top: -7px; right: -7px; }
:is(html[data-ux-web~="w05"] .ux-w05-band, html[data-ux-web~="cta"] .ux-cta-band) .ux-cta-ecke.e3 { bottom: -7px; left: -7px; }
:is(html[data-ux-web~="w05"] .ux-w05-band, html[data-ux-web~="cta"] .ux-cta-band) .ux-cta-ecke.e4 { bottom: -7px; right: -7px; }
@media (max-width: 640px) {
  :is(html[data-ux-web~="w05"] .ux-w05-band, html[data-ux-web~="cta"] .ux-cta-band) .knoepfe { flex-direction: column; align-items: stretch; width: 100%; }
  :is(html[data-ux-web~="w05"] .ux-w05-band, html[data-ux-web~="cta"] .ux-cta-band) .knoepfe .knopf { justify-content: center; }
}

/* T-075 Startseite: Kontaktformular (ux_w_08, Kürzel w08) und T-079 Formular (ux_web_form, Kürzel form) nach „Form“:
   Gruppen mit Überschrift (nur T-075), größere Felder, Hinweis auf Pflichtfelder, Fehler gleich am Feld, Haken bei
   korrigierten Pflichtfeldern, violetter Fokusring. Die Stile hier gelten für beide Schalter; die Gruppen setzt nur T-075.
   Felder, Absenden und Eingangsbeleg bleiben bei site.js. */
:is(html[data-ux-web~="w08"] form.ux-w08-form, html[data-ux-web~="form"] form.ux-form) { row-gap: 20px; }
:is(html[data-ux-web~="w08"] form.ux-w08-form, html[data-ux-web~="form"] form.ux-form) .ux-form-pflicht {
  grid-column: 1 / -1; margin: 0; font-size: .8125rem; color: var(--tinte-3, #6E6E6E); }
html[data-ux-web~="w08"] form.ux-w08-form .ux-w08-gruppe { grid-column: 1 / -1; margin: 10px 0 -6px; padding-top: 14px; border-top: 1px solid var(--linie, rgba(13, 13, 13, .1));
  font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--tinte-2, #4A4A4A); }
html[data-ux-web~="w08"] form.ux-w08-form .ux-form-pflicht + .ux-w08-gruppe { margin-top: 0; padding-top: 0; border-top: 0; }
:is(html[data-ux-web~="w08"] form.ux-w08-form, html[data-ux-web~="form"] form.ux-form) .feld :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], select) {
  min-height: 50px; }
:is(html[data-ux-web~="w08"] form.ux-w08-form, html[data-ux-web~="form"] form.ux-form) .feld :is(input, select, textarea):focus {
  border-color: var(--violett, #6A2CF0); box-shadow: 0 0 0 3px var(--violett-hauch, #F1EBFF); }
:is(html[data-ux-web~="w08"] form.ux-w08-form, html[data-ux-web~="form"] form.ux-form) .feld :is(input, textarea)[aria-invalid="true"] {
  border-color: var(--frist, #B8321D); background: #FFFBFA; }
:is(html[data-ux-web~="w08"] form.ux-w08-form, html[data-ux-web~="form"] form.ux-form) .feld.ux-form-ok :is(input, textarea) {
  border-color: var(--ok, #0A7650); padding-right: 40px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%230A7650' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px top 16px / 16px 16px; }
:is(html[data-ux-web~="w08"] form.ux-w08-form, html[data-ux-web~="form"] form.ux-form) .feld__fehler:not(:empty) {
  display: flex; align-items: center; gap: 6px; font-weight: 500; }
:is(html[data-ux-web~="w08"] form.ux-w08-form, html[data-ux-web~="form"] form.ux-form) .feld__fehler:not(:empty)::before {
  content: '!'; display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--frist, #B8321D);
  color: #fff; font-size: .6875rem; font-weight: 700; }

/* T-076 Registrieren (ux_w_10, Kürzel w10) nach „Full Screen Signup“: Schrittanzeige über dem Formular, zuerst nur die
   dienstliche E-Mail mit „Weiter“, dann die übrigen Angaben; die Spalte „So läuft es ab“ als helles Vorteile-Panel.
   Felder, Prüfung, Passwortstärke, Code und Absenden bleiben die von registrieren.js und passwort-staerke.js. */
html[data-ux-web~="w10"] .ux-w10-schritte { grid-column: 1 / -1; order: -2; display: flex; gap: 8px; margin: 0 0 6px; padding: 0; list-style: none;
  counter-reset: none; }
html[data-ux-web~="w10"] .ux-w10-schritte li { flex: 1; display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 3px solid var(--grau-2, #ECECEC);
  font-size: .8125rem; font-weight: 500; color: var(--tinte-3, #6E6E6E); }
html[data-ux-web~="w10"] .ux-w10-schritte li[aria-current="step"] { border-top-color: var(--violett, #6A2CF0); color: var(--tinte, #0D0D0D); }
html[data-ux-web~="w10"] .ux-w10-schritte li.ist-fertig { border-top-color: var(--ok, #0A7650); color: var(--tinte-2, #4A4A4A); }
html[data-ux-web~="w10"] .ux-w10-nr { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--grau-1, #F3F3F3); font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
html[data-ux-web~="w10"] li[aria-current="step"] > .ux-w10-nr { background: var(--violett, #6A2CF0); color: #fff; }
html[data-ux-web~="w10"] li.ist-fertig > .ux-w10-nr { background: var(--ok, #0A7650); color: #fff; }
/* Schritt 1: nur die E-Mail; die E-Mail steht immer zuerst */
html[data-ux-web~="w10"] form.ux-w10-a [data-schritt="daten"] > :not(.ux-w10-mail):not(.ux-w10-weiter) { display: none; }
html[data-ux-web~="w10"] form:not(.ux-w10-a) .ux-w10-weiter { display: none; }
html[data-ux-web~="w10"] form[data-registrieren] .ux-w10-mail { order: -1; grid-column: 1 / -1; }
html[data-ux-web~="w10"] form.ux-w10-a .ux-w10-weiter { order: -1; }
html[data-ux-web~="w10"] form.ux-w10-b [data-schritt="daten"] > :not(.ux-w10-mail):not(.honig) { animation: ux-w10-ein .3s var(--weich, ease) both; }
@keyframes ux-w10-ein { from { opacity: 0; transform: translateY(6px); } }
/* Vorteile-Spalte */
html[data-ux-web~="w10"] .kontakt:has(form[data-registrieren]) > .direkt {
  padding: 12px 28px; border-radius: 20px; background: var(--pastell-c, #EEF0FF); }
html[data-ux-web~="w10"] .kontakt:has(form[data-registrieren]) > .direkt > div { border-bottom-color: rgba(13, 13, 13, .08); }
html[data-ux-web~="w10"] .kontakt:has(form[data-registrieren]) > .direkt .direkt__k { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .75rem; color: var(--tinte-2, #4A4A4A); }
html[data-ux-web~="w10"] .kontakt:has(form[data-registrieren]) > .direkt .ablauf { list-style: none; padding: 0; counter-reset: ux-w10; gap: 12px; }
html[data-ux-web~="w10"] .kontakt:has(form[data-registrieren]) > .direkt .ablauf li { position: relative; padding-left: 36px; counter-increment: ux-w10; }
html[data-ux-web~="w10"] .kontakt:has(form[data-registrieren]) > .direkt .ablauf li::before { content: counter(ux-w10); position: absolute; left: 0; top: -1px;
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--weiss, #fff); color: var(--violett, #6A2CF0);
  font-size: .75rem; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(106, 44, 240, .25); }
@media (prefers-reduced-motion: reduce) {
  html[data-ux-web~="w10"] form.ux-w10-b [data-schritt="daten"] > * { animation: none; }
}

/* T-077 Häufige Fragen (ux_web_faq, Kürzel faq) nach „FAQ Accordion Section“: Überschrift mit Kontaktknopf links und
   Fragen rechts (bis fünf Fragen) bzw. Überschrift oben und Fragen in zwei Spalten (ab sechs), jeweils erst ab 880 px
   Breite des Abschnitts; Plus-Symbol statt Winkel, weiches Aufklappen. Fragen, Antworten und FAQPage-Daten bleiben. */
html[data-ux-web~="faq"] .ux-faq-raster { container-type: inline-size; display: grid; gap: 20px 56px; }
html[data-ux-web~="faq"] .ux-faq-kopf > :is(h2, h3) { margin: 0 !important; text-align: left; }
html[data-ux-web~="faq"] .ux-faq-satz { margin: 10px 0 0; color: var(--tinte-2, #4A4A4A); font-size: .9375rem; }
html[data-ux-web~="faq"] .ux-faq-kontakt { display: inline-flex; align-items: center; min-height: 40px; margin-top: 16px; padding: 0 18px; border-radius: 999px;
  background: var(--weiss, #fff); box-shadow: inset 0 0 0 1px var(--linie-2, rgba(13, 13, 13, .18)); color: var(--tinte, #0D0D0D); font-weight: 500; text-decoration: none; }
html[data-ux-web~="faq"] .ux-faq-kontakt:hover { background: var(--grau-1, #F3F3F3); }
html[data-ux-web~="faq"] .ux-faq-kontakt:focus-visible { outline: 2px solid var(--violett, #6A2CF0); outline-offset: 2px; }
html[data-ux-web~="faq"] .ux-faq-liste { max-width: none; margin: 0; }
@container (min-width: 880px) {
  html[data-ux-web~="faq"] .ux-faq-wenige { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); align-items: start; }
  html[data-ux-web~="faq"] .ux-faq-wenige > .ux-faq-kopf { position: sticky; top: 96px; }
  html[data-ux-web~="faq"] .ux-faq-viele > .ux-faq-liste { columns: 2; column-gap: 40px; }
  html[data-ux-web~="faq"] .ux-faq-viele > .ux-faq-liste > details { break-inside: avoid; }
}
/* Plus-Symbol und weiches Aufklappen */
html[data-ux-web~="faq"] .ux-faq-liste > details > summary { position: relative; padding-right: 40px; }
html[data-ux-web~="faq"] .ux-faq-liste > details > summary > svg { display: none; }
html[data-ux-web~="faq"] .ux-faq-liste > details > summary::after { content: ''; position: absolute; right: 4px; top: 50%; width: 22px; height: 22px; margin-top: -11px;
  border-radius: 50%; background:
    linear-gradient(var(--tinte, #0D0D0D), var(--tinte, #0D0D0D)) center / 10px 1.6px no-repeat,
    linear-gradient(var(--tinte, #0D0D0D), var(--tinte, #0D0D0D)) center / 1.6px 10px no-repeat, var(--grau-1, #F3F3F3);
  transition: transform .25s var(--weich, ease), background-color .2s ease; }
html[data-ux-web~="faq"] .ux-faq-liste > details[open] > summary::after { transform: rotate(45deg); }
html[data-ux-web~="faq"] .ux-faq-liste > details > summary:hover::after { background-color: var(--violett-hauch, #F1EBFF); }
html[data-ux-web~="faq"] .ux-faq-liste > details[open] > div { animation: ux-faq-auf .28s var(--weich, ease) both; }
@keyframes ux-faq-auf { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  html[data-ux-web~="faq"] .ux-faq-liste > details > summary::after { transition: none; }
  html[data-ux-web~="faq"] .ux-faq-liste > details[open] > div { animation: none; }
}

/* T-080 Zitat und Ausgangslage (ux_web_quote, Kürzel quote) nach „Testimonials“: die typischen Aussagen „Kennen Sie
   das?“ (ul.w11-probleme) als Zitatkarten mit großem Anführungszeichen, Aussage, Erklärung und Weiterlink; dazu die
   Zitatkarten für freigegebene Kundenstimmen (figure.w11-zitat, heute ausgeblendet). Bewusst ohne Person oder Rolle bei
   den typischen Aussagen: Es sind keine Kundenzitate. Texte und Links bleiben; stärker als T-030 (features). */
html[data-ux-web~="quote"] ul.vorteile.w11-probleme { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0; border: 0; }
html[data-ux-web~="quote"] ul.vorteile.w11-probleme > li { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
html[data-ux-web~="quote"] ul.vorteile.w11-probleme > li > a { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 56px 24px 22px;
  border: 1px solid var(--linie, rgba(13, 13, 13, .1)); border-radius: 18px; background: var(--weiss, #fff); color: var(--tinte, #0D0D0D); text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s var(--weich, ease); }
html[data-ux-web~="quote"] ul.vorteile.w11-probleme > li > a::before { content: '\201C'; position: absolute; top: 14px; left: 20px; font: 700 64px/1 Georgia, 'Times New Roman', serif;
  color: var(--violett, #6A2CF0); opacity: .9; }
html[data-ux-web~="quote"] ul.vorteile.w11-probleme > li > a:hover { border-color: rgba(106, 44, 240, .35); box-shadow: 0 14px 30px -22px rgba(106, 44, 240, .5); transform: translateY(-2px); }
html[data-ux-web~="quote"] ul.vorteile.w11-probleme > li > a:focus-visible { outline: 2px solid var(--violett, #6A2CF0); outline-offset: 3px; }
html[data-ux-web~="quote"] ul.vorteile.w11-probleme > li > a > b { font-size: 1.125rem; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; text-wrap: pretty; }
html[data-ux-web~="quote"] ul.vorteile.w11-probleme > li > a > span:not(.w11-mehr) { color: var(--tinte-2, #4A4A4A); font-size: .9375rem; line-height: 1.55; }
html[data-ux-web~="quote"] ul.vorteile.w11-probleme .w11-mehr { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--linie, rgba(13, 13, 13, .1));
  color: var(--violett, #6A2CF0); font-size: .875rem; font-weight: 600; }
html[data-ux-web~="quote"] ul.vorteile.w11-probleme .w11-mehr::after { content: ' \2192'; }
html[data-ux-web~="quote"] figure.w11-zitat { position: relative; padding-top: 52px; }
html[data-ux-web~="quote"] figure.w11-zitat::before { content: '\201C'; position: absolute; top: 10px; left: 20px; font: 700 56px/1 Georgia, serif; color: var(--violett, #6A2CF0); }
html[data-ux-web~="quote"] figure.w11-zitat blockquote { margin: 0; font-size: 1.0625rem; font-weight: 500; line-height: 1.5; }
@media (max-width: 1000px) { html[data-ux-web~="quote"] ul.vorteile.w11-probleme { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { html[data-ux-web~="quote"] ul.vorteile.w11-probleme { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { html[data-ux-web~="quote"] ul.vorteile.w11-probleme > li > a { transition: none; } }

/* T-081 Mitgliedschaften und Siegel (ux_web_logos, Kürzel logos) nach „Progressive blur“ (Logo-Zeile): Logos in
   Graustufen, beim Überfahren und mit Fokus farbig; gilt für ul.mitglieder (/ueber-uns, /unternehmen), die Siegel im Fuß
   und die Logo-Zeile für freigegebene Häuser (w11-logos, heute ausgeblendet). Ein laufendes Band lohnt erst bei vielen
   Logos; bei vier Mitgliedschaften steht die Zeile still. Links, Namen und Bilder bleiben. */
html[data-ux-web~="logos"] :is(.mitglieder__logo img, .fuss__verband img, .w11-logos img) { filter: grayscale(1); opacity: .7;
  transition: filter .25s ease, opacity .25s ease; }
html[data-ux-web~="logos"] .mitglieder a:is(:hover, :focus-visible) .mitglieder__logo img,
html[data-ux-web~="logos"] .fuss__verband:is(:hover, :focus-visible) img,
html[data-ux-web~="logos"] .w11-logos li:hover img { filter: none; opacity: 1; }
html[data-ux-web~="logos"] .mitglieder a { transition: border-color .2s ease, box-shadow .2s ease; }
html[data-ux-web~="logos"] .mitglieder a:hover { box-shadow: 0 10px 24px -20px rgba(13, 13, 13, .45); }
html[data-ux-web~="logos"] .mitglieder a:focus-visible { outline: 2px solid var(--violett, #6A2CF0); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  html[data-ux-web~="logos"] :is(.mitglieder__logo img, .fuss__verband img, .w11-logos img), html[data-ux-web~="logos"] .mitglieder a { transition: none; }
}

/* T-082 Weiterführende Links (ux_web_more, Kürzel more) nach „Nav List Card“: Karten mit Symbol, Titel, einem Satz und
   Pfeil, im Raster nebeneinander, beim Überfahren violetter Rahmen. Titel, Sätze und Ziele bleiben. */
html[data-ux-web~="more"] .weiter.ux-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
html[data-ux-web~="more"] .weiter.ux-more > a { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; grid-template-rows: auto auto;
  column-gap: 14px; row-gap: 4px; align-items: start; align-content: start; padding: 18px 18px 18px 16px; border: 1px solid var(--linie, rgba(13, 13, 13, .1)); border-radius: 16px;
  background: var(--weiss, #fff); color: var(--tinte, #0D0D0D); text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease; }
html[data-ux-web~="more"] .weiter.ux-more > a:hover { border-color: rgba(106, 44, 240, .4); box-shadow: 0 12px 28px -22px rgba(106, 44, 240, .55); }
html[data-ux-web~="more"] .weiter.ux-more > a:focus-visible { outline: 2px solid var(--violett, #6A2CF0); outline-offset: 3px; }
html[data-ux-web~="more"] .ux-more-ikon { grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--violett-hauch, #F1EBFF); color: var(--violett, #6A2CF0); }
html[data-ux-web~="more"] .ux-more-ikon.ux-more-wissen { background: var(--m-planung-hauch, #EAF1FF); color: var(--m-planung, #1F5FD6); }
html[data-ux-web~="more"] .ux-more-ikon.ux-more-sicherheit { background: var(--m-bieter-hauch, #E5F4ED); color: var(--m-bieter, #0A7650); }
html[data-ux-web~="more"] .ux-more-ikon.ux-more-preise { background: var(--m-vertrag-hauch, #FFF2DC); color: var(--m-vertrag, #9E5800); }
html[data-ux-web~="more"] .ux-more-ikon.ux-more-gemeinschaft { background: var(--m-archiv-hauch, #E2F2F4); color: var(--m-archiv, #0D6B7C); }
html[data-ux-web~="more"] .ux-more-ikon svg, html[data-ux-web~="more"] .ux-more-pfeil { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
html[data-ux-web~="more"] .weiter.ux-more > a > b { grid-column: 2; font-size: 1rem; font-weight: 600; line-height: 1.3; }
html[data-ux-web~="more"] .weiter.ux-more > a > span:not(.ux-more-ikon) { grid-column: 2; margin: 0; font-size: .875rem; line-height: 1.5; color: var(--tinte-2, #4A4A4A); }
html[data-ux-web~="more"] .ux-more-pfeil { grid-column: 3; grid-row: 1; margin-top: 2px; color: var(--tinte-3, #6E6E6E); transition: transform .18s ease, color .18s ease; }
html[data-ux-web~="more"] .weiter.ux-more > a:hover .ux-more-pfeil { transform: translateX(3px); color: var(--violett, #6A2CF0); }
@media (prefers-reduced-motion: reduce) {
  html[data-ux-web~="more"] .weiter.ux-more > a, html[data-ux-web~="more"] .ux-more-pfeil { transition: none; }
}

/* T-083 Über uns und Person (ux_web_team, Kürzel team) nach „Team Section“, auf Rubens Wunsch (04.11.2026) als
   Kontaktkarte des Unternehmens: Symbol statt Porträt, „Ihr Kontakt“, Digitale-Vergabe.DE mit Plakette, Text, Knöpfe
   „E-Mail schreiben“ und „Anrufen“. Porträt, alte Überschrift und Namenszeile bleiben im Code, unter dem Schalter
   ausgeblendet. Der Gründer-Abschnitt auf /ueber-uns bleibt, wie er ist. */
html[data-ux-web~="team"] article.ansprech.ux-team { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 24px; align-items: start;
  max-width: 820px; margin-inline: auto; padding: 28px; border: 1px solid var(--linie, rgba(13, 13, 13, .1)); border-radius: 22px;
  background: radial-gradient(70% 90% at 0% 0%, var(--violett-hauch, #F1EBFF) 0%, transparent 60%), var(--weiss, #fff); }
html[data-ux-web~="team"] article.ansprech.ux-team .ux-team-person { display: none; }
html[data-ux-web~="team"] .ux-team-symbol { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 20px; background: var(--weiss, #fff);
  color: var(--violett, #6A2CF0); box-shadow: inset 0 0 0 1px rgba(106, 44, 240, .22); }
html[data-ux-web~="team"] .ux-team-symbol svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html[data-ux-web~="team"] article.ansprech.ux-team h2.ux-team-titel { margin: 0 0 6px; font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--tinte-3, #6E6E6E); }
html[data-ux-web~="team"] .ux-team-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
html[data-ux-web~="team"] .ux-team-name > br { display: none; }
html[data-ux-web~="team"] .ux-team-name > b { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
html[data-ux-web~="team"] .ux-team-rolle { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: var(--violett-hauch, #F1EBFF); color: var(--violett, #6A2CF0);
  font-size: .8125rem; font-weight: 600; }
html[data-ux-web~="team"] .ux-team-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
html[data-ux-web~="team"] a.ux-team-knopf { background: var(--violett, #6A2CF0); color: #fff; }
html[data-ux-web~="team"] a.ux-team-knopf:hover { background: #5620D6; }
html[data-ux-web~="team"] a.ux-team-knopf.ux-team-zweit { background: var(--weiss, #fff); color: var(--tinte, #0D0D0D); box-shadow: inset 0 0 0 1px var(--linie-2, rgba(13, 13, 13, .18)); }
html[data-ux-web~="team"] a.ux-team-knopf.ux-team-zweit:hover { background: var(--grau-1, #F3F3F3); }
@media (max-width: 640px) {
  html[data-ux-web~="team"] article.ansprech.ux-team { grid-template-columns: minmax(0, 1fr); padding: 22px; }
}

/* T-084 Textabschnitt (ux_web_text, Kürzel text) nach „Editorial service list“ (Typografie): Erzählabschnitte
   (.erzaehlung) und Ratgeber-Texte (.rg-text) mit hervorgehobenem Kernsatz (erster Absatz nach der Überschrift,
   größer und mit violetter Randlinie), Zwischenüberschriften mit feiner Linie und ruhiger Zeilenlänge. Eine
   Randspalte mit Fakten ist nicht gebaut (die Fakten müssten je Text erst belegt werden). Texte und Links bleiben. */
html[data-ux-web~="text"] :is(.erzaehlung, .rg-text) { max-width: 72ch; }
html[data-ux-web~="text"] .erzaehlung > :is(h2, .titel-2) + p,
html[data-ux-web~="text"] .rg-text > p:first-of-type { margin-top: 18px; padding-left: 18px; border-left: 3px solid var(--violett, #6A2CF0);
  font-size: 1.1875rem; line-height: 1.55; color: var(--tinte, #0D0D0D); }
html[data-ux-web~="text"] .rg-text > h2 { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--linie, rgba(13, 13, 13, .1)); letter-spacing: -.015em; }
html[data-ux-web~="text"] .rg-text > h3 { margin-top: 28px; }
html[data-ux-web~="text"] :is(.erzaehlung, .rg-text) p { line-height: 1.7; }
html[data-ux-web~="text"] :is(.erzaehlung, .rg-text) a:not(.knopf):not(.textlink) { text-decoration-color: rgba(106, 44, 240, .45); text-underline-offset: 3px; }
html[data-ux-web~="text"] :is(.erzaehlung, .rg-text) a:not(.knopf):not(.textlink):hover { text-decoration-color: var(--violett, #6A2CF0); }

/* T-085 Aufklappliste (ux_web_accordion, Kürzel accordion) nach „Editorial service list“: Nummer je Eintrag, Titel und
   Kurzbeschreibung schon im zugeklappten Zustand, feine Linien, weicher Übergang beim Aufklappen. Inhalt und Anker bleiben. */
html[data-ux-web~="accordion"] .ux-acc > details { border-top: 1px solid var(--linie, rgba(13, 13, 13, .1)); }
html[data-ux-web~="accordion"] .ux-acc > details:last-child { border-bottom: 1px solid var(--linie, rgba(13, 13, 13, .1)); }
html[data-ux-web~="accordion"] .ux-acc > details > summary { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: start; gap: 16px;
  padding: 20px 4px; cursor: pointer; transition: background-color .2s ease; }
html[data-ux-web~="accordion"] .ux-acc > details > summary:hover { background: var(--grau-1, #F3F3F3); }
html[data-ux-web~="accordion"] .ux-acc > details > summary:focus-visible { outline: 2px solid var(--violett, #6A2CF0); outline-offset: 2px; border-radius: 8px; }
html[data-ux-web~="accordion"] .ux-acc-nr { padding-top: 3px; font-size: .8125rem; font-weight: 600; color: var(--violett, #6A2CF0); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
html[data-ux-web~="accordion"] .ux-acc-text { display: grid; gap: 4px; min-width: 0; }
html[data-ux-web~="accordion"] .ux-acc-titel { font-size: 1.125rem; font-weight: 600; line-height: 1.3; color: var(--tinte, #0D0D0D); }
html[data-ux-web~="accordion"] .ux-acc-kurz { font-size: .9375rem; font-weight: 400; line-height: 1.45; color: var(--tinte-2, #4A4A4A); }
html[data-ux-web~="accordion"] .ux-acc > details > summary > svg { margin-top: 4px; transition: transform .25s var(--weich, ease); }
html[data-ux-web~="accordion"] .ux-acc > details[open] > summary > svg { transform: rotate(180deg); }
html[data-ux-web~="accordion"] .ux-acc > details > div { padding: 0 4px 22px 64px; }
html[data-ux-web~="accordion"] .ux-acc > details[open] > div { animation: ux-acc-auf .28s var(--weich, ease) both; }
@keyframes ux-acc-auf { from { opacity: 0; transform: translateY(-4px); } }
@media (max-width: 640px) {
  html[data-ux-web~="accordion"] .ux-acc > details > summary { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; }
  html[data-ux-web~="accordion"] .ux-acc > details > div { padding-left: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-ux-web~="accordion"] .ux-acc > details[open] > div { animation: none; }
  html[data-ux-web~="accordion"] .ux-acc > details > summary > svg { transition: none; }
}