, damit die
-Zeilen als Adress-Block gelten und nicht als Fliesstext. */
.ws-secsin-addr { font-style: normal; margin: 0 0 var(--ws-space-m); }
.ws-secsin-h1 {
font-family: var(--ws-font-display);
font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.4rem);
line-height: 1.02;
color: var(--ws-ink);
margin-bottom: var(--ws-space-l);
}
.ws-secsin-chapter {
padding-bottom: var(--ws-space-l);
margin-bottom: var(--ws-space-l);
border-bottom: 1px solid var(--ws-hairline);
scroll-margin-top: 7rem;
}
.ws-secsin-chapter:last-of-type { border-bottom: 0; }
.ws-secsin-chapter-h {
font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem);
margin-bottom: var(--ws-space-s);
}
.ws-secsin-list { margin: 0 0 var(--ws-space-m); }
.ws-secsin-list li {
position: relative; padding-left: 1.15rem; margin-bottom: 0.3rem;
}
.ws-secsin-list li::before {
content: ""; position: absolute; left: 0; top: 0.7em;
width: 6px; height: 6px; background: var(--ws-brand);
}
/* Offene Pflicht-Angabe sichtbar markiert — kein stiller Platzhalter */
.ws-secsin-todo {
background: var(--ws-surface-2);
border-left: 3px solid var(--ws-brand-deep);
padding: var(--ws-space-s) var(--ws-space-m);
font-size: var(--ws-fs-small);
color: var(--ws-brand-deeper);
}
.ws-secsin-meta { font-size: var(--ws-fs-small); color: var(--ws-ink-muted); }
.ws-secsin-back { margin-top: var(--ws-space-l); }
@media (max-width: 860px) {
.ws-secsin-inner { grid-template-columns: 1fr; }
.ws-secsin-nav {
position: static;
padding-bottom: var(--ws-space-m);
border-bottom: 1px solid var(--ws-hairline);
}
.ws-secsin-nav-list {
display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem;
border-left: 0;
}
.ws-secsin-nav-item a { padding: 0.35rem 0; border-left: 0; margin-left: 0; }
.ws-secsin-nav-item.ws-is-active a { border-left: 0; text-decoration: underline; }
}
/* =========================================================================
Reveal-Basisschicht (zaehlt NICHT als Signature-Moment)
========================================================================= */
[data-ws-reveal] {
opacity: 0; transform: translateY(16px);
transition: opacity var(--ws-dur-reveal) var(--ws-ease),
transform var(--ws-dur-reveal) var(--ws-ease);
}
[data-ws-reveal].ws-is-in { opacity: 1; transform: none; }
/* =========================================================================
Reduced Motion — alle drei Signature-Momente auf Endzustand
========================================================================= */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
[data-ws-maskreveal] span { clip-path: inset(0 0 0 0); }
[data-ws-clipwipe] { clip-path: inset(0 0 round 0); }
[data-ws-reveal] { opacity: 1; transform: none; }
.ws-vn-grid[data-animate="reveal"] .ws-vn-grid__card { opacity: 1; transform: none; }
.ws-secsct-track { height: auto; }
.ws-secsct-sticky { position: static; }
.ws-secsct-stage { display: grid; width: auto; gap: var(--ws-space-xl); transform: none !important; }
.ws-secsct-scene { flex: none; max-width: none; padding-inline: var(--ws-gutter); }
.ws-secsct-dots { display: none; }
}
/* =========================================================================
INSTANZ-FIXES · Mode T-I, holz-luecke
Behebt drei a11y-Befunde, die aus der Vorlage geerbt sind. Bewusst am Ende
der Datei: gleiche Spezifitaet, spaetere Quellreihenfolge gewinnt, die
Original-Regeln bleiben unangetastet und damit vergleichbar.
Die Vorlage selbst bleibt unrepariert (Owner-Override 2026-08-10) — der
Befund ist in der Varianten-Karte §6 festgehalten.
========================================================================= */
/* 1) Honeypot-Feld behielt trotz 1x1-Container seine eigene Box (153x21) und
riss damit WCAG 2.5.8 (>= 24x24). Der Container clippt nur visuell.
Das Feld bleibt im DOM und bleibt fuer Bots ausfuellbar — kein
display:none, security-baseline §6 also weiter erfuellt. */
.ws-cform-honeypot input { width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; }
/* 2) DSGVO-Checkbox war 22x22 und damit knapp unter der 24-px-Schwelle. */
.ws-cform-checkbox { width: 24px; height: 24px; }
/* 3) Der Datenschutz-Link in der Checkbox-Zeile war 158x18. WCAG 2.5.8 nimmt
Inline-Links im Textfluss aus, das Pruefwerkzeug wertet ihn aber als
Verstoss. Inline-Block mit vertikalem Padding loest beides, ohne die
Zeile umzubrechen. */
.ws-cform-checkbox-text a { display: inline-block; min-height: 24px; padding-block: 3px; }
/* 4) Der dunkle Grund lag nur auf .ws-secsct-section und damit nur ueber der
Viewport-Breite. Die Buehne ist 400vw breit: die Schritte 02 bis 04 stehen
bei x = 1457 bis 4189 px, also NEBEN der bemalten Flaeche. Am DOM gemessen
tragen die Ziffern #8FD673 auf #241304 = 10,93:1 — das Pruefwerkzeug fand
dort aber keinen Hintergrund und rechnete gegen Weiss (2,0:1).
Der Grund wandert jetzt mit der Buehne. Visuell identisch, aber die
Aussage "helle Ziffer auf dunklem Grund" gilt an jeder Position. */
.ws-secsct-stage { background: var(--ws-dark); }
/* 5) Das Honeypot-Feld braucht eine Box von mindestens 24x24 (WCAG 2.5.8),
sonst meldet das Pruefwerkzeug es als zu kleines Ziel — 1x1 war der
Fehler des ersten Versuchs. Der umgebende Container ist 1x1 mit
overflow:hidden und liegt bei left:-9999px, das Feld bleibt also
unsichtbar, im DOM und fuer Bots ausfuellbar. Kein display:none. */
.ws-cform-honeypot input { width: 24px; height: 24px; min-height: 24px; padding: 0; border: 0; }
/* 6) Geschlossene Accordion-Panels hielten ihre Textknoten gelayoutet und nur
per opacity:0 unsichtbar. Die Render-Pruefung zaehlt genau das als
"Inhalt haengt an einem Reveal-Script": 28 von 44 Elementen, ERROR ab 60 %.
ERSTER VERSUCH content-visibility:hidden — am DOM nachgemessen und
VERWORFEN: die Eigenschaft greift (computed "hidden"), aber Chromium
liefert fuer Nachfahren weiter eine Box (558x30 px). Die Quote fiel nur
auf 59 % und lag damit einen Punkt unter der Fehlergrenze. Ein Fix, der
an einer Schwelle klebt, ist kein Fix.
display:none loest es an der Ursache: geschlossene Panels sind nicht
gelayoutet, haben keine Box und werden von der Pruefung korrekt als
"nicht gerendert" uebersprungen statt als "unsichtbar" gezaehlt.
Der Inhalt bleibt im DOM und damit fuer Suchmaschinen lesbar
(mobile-ux: SEO-Inhalt nie entfernen), und bei aria-expanded="false"
gehoert er ohnehin nicht in den Accessibility-Baum.
Preis: die Opacity-Blende beim Aufklappen entfaellt, die
Hoehen-Animation der Grid-Zeile bleibt. Bewusst in Kauf genommen. */
.ws-secapi-item:not(.ws-is-open) .ws-secapi-panel-inner { display: none; }
/* 7) Die Sprunglinks im Inhaltsverzeichnis der Rechtsseiten standen auf 36 px
Hoehe und rissen damit das 44-px-Ziel aus mobile-ux §4 — 21 Warnungen aus
einer einzigen Regel. Es sind echte Tap-Ziele, also gehoert das gefixt und
nicht gewaivt. Flex statt Block, damit die Zeile vertikal zentriert bleibt. */
.ws-secsin-nav-list a { display: flex; align-items: center; min-height: 44px; }
/* 8) "Route planen" stand auf 124x29 px. Gleiches Ziel, gleicher Fix. */
.ws-contact-nap-route, .ws-mnf-route { display: inline-flex; align-items: center; min-height: 44px; }
/* 9) Die H1 im Farbkeil stand auf --ws-ink, weil die Vorlage ihr Tuerkis nur
mit dunkler Typo tragen konnte (weiss auf #00AAAD war 2,86:1).
Auf der Tanne #1A9100 ist es umgekehrt, in APCA sogar deutlich:
dunkel #241304 Lc 35,0 — reisst das Headline-Ziel 45
weiss Lc 73,2 — mit grosser Reserve
WCAG sieht beide fast gleich (4,41 zu 4,46) und haette den Unterschied
verdeckt. Erst APCA trennt sie, weil es die Polaritaet mitrechnet.
Weiss nimmt zudem die weisse Tannen-Silhouette des Logos auf. */
.ws-hphoto-h1 { color: var(--ws-on-dark); }
/* 10) GEERBTER VORLAGEN-DEFEKT, in der Instanz behoben: der Basis-Reset deckt
nur "ul", nicht "ol". Die Karten-Liste von sec-werte-pinned-scroll-001
ist ein