— semantisch richtig, vorlesbar,
kopierbar. Grenze: bis 6 Pakete, darueber werden die Spalten zu schmal.
---------------------------------------------------------------------- */
.td-pakettabelle{--td-pt-spalten:5}
.td-pakettabelle th,.td-pakettabelle td{text-align:center;vertical-align:middle}
.td-pakettabelle tbody th{text-align:left}
/* Die Produktzeile bleibt beim Scrollen stehen — sonst weiss man nach dem
fuenften Merkmal nicht mehr, welche Spalte welches Paket ist. */
.td-pakettabelle thead th{position:sticky;top:0;z-index:5}
/* Zebra: bei vielen Merkmalen untereinander verrutscht das Auge sonst. */
.td-pakettabelle tbody tr:nth-child(even) th,
.td-pakettabelle tbody tr:nth-child(even) td{background:#FAFBFC}
.td-pakettabelle tbody tr:nth-child(even) th{background:rgba(27,95,143,.055)}
/* Preiszeile und Bestellzeile rahmen die Merkmale ein: oben der Preis, unten
die Handlung — dieselbe Reihenfolge wie in der Auswahl. */
.td-pakettabelle .td-pt-preis td{padding-top:14px;padding-bottom:14px;background:#F5F7FA}
.td-pakettabelle .td-pt-preis .td-pt-betrag{font-size:18px;font-weight:900;color:var(--td-dark);
white-space:nowrap;display:block}
.td-pakettabelle .td-pt-preis .td-pt-takt{font-size:11px;color:var(--td-muted);display:block}
.td-pakettabelle .td-pt-cta td{padding:14px 10px}
.td-pakettabelle .td-pt-cta .btn{width:100%;justify-content:center;padding:8px 10px;font-size:13px}
/* Die Empfehlung steht NUR im Spaltenkopf — dieselbe Linie wie Variante A in der
Auswahlmatrix (MAEB 07.09.2026): die Kennzeichnung traegt der Badge, nicht eine
Dauereinfaerbung. Zuvor lag ueber der ganzen Spalte ein blauer Ton; zusammen mit
dem orangen Bestellknopf las sich das wie eine bereits getroffene Vorauswahl,
und die Zeilen der Spalte hoben sich staerker ab als die Werte, die man
vergleichen will. Damit faellt der Entscheid vom 04.09. («Spalte durchgehend
markiert») — er stammte aus der Zeit, als es die Zeilen-Variante noch gab. */
.td-pakettabelle thead .td-pt-empfohlen{background:var(--td-primary)}
.td-pakettabelle thead .td-pt-empfohlen .badge{background:#fff;color:var(--td-primary);
display:inline-block;margin-top:4px}
/* Zeilen-Hover (Variante 1, MAEB 07.09.2026). Die ganze Zeile hebt sich — das
deckt sich mit der Leserichtung dieser Tabelle: ein Merkmal ueber alle Pakete,
also waagrecht. Die Spalte waere der Gegenweg und braeuchte ausserdem JS, weil
CSS keinen Spalten-Selektor kennt; einzelne Zellen helfen beim Vergleichen gar
nicht. Nur mit echtem Zeiger — auf Touch bliebe der Zustand nach dem Antippen
kleben, dieselbe Falle wie bei den Kacheln.
Spezifitaet gegen das Zebra GERECHNET, nicht geschaetzt:
Zebra tbody tr:nth-child(even) th = (0,2,3)
hier tbody tr:hover th = (0,2,3) -> spaeter im Quelltext, gewinnt
Die Zeile faerbt sich gleichmaessig durch. Seit die Empfehlungsspalte keine
Dauereinfaerbung mehr hat, gibt es in der Zeile nichts auszunehmen. */
@media (hover:hover) and (pointer:fine){
.td-pakettabelle tbody tr:hover th,
.td-pakettabelle tbody tr:hover td{background:rgba(27,95,143,.085)}
}
/* Auf Mobile entfaellt die Tabelle: dort tragen die Swipe-Karten bereits ALLE
Merkmale im Akkordeon (Entscheid 04.09.2026 «Mobile nie Tabellen»).
ACHTUNG BEIM BREAKPOINT — hier lag ein Fehler (gefunden 07.09.2026):
Zuerst stand hier 1023px. Die Auswahl schaltet aber ueber eine
CONTAINER-Query bei 860px Komponentenbreite um, was rund 920px Viewport
entspricht. Zwischen 920 und 1023px war damit die MATRIX aktiv — und dort
ist das Akkordeon ausgeblendet, weil die Details ja in der Tabelle stehen.
Ergebnis: In diesem Fenster waren die uebrigen Merkmale NIRGENDS erreichbar,
und der Lead darueber versprach trotzdem "hier stehen sie vollstaendig".
767px ist der Foundation-Breakpoint fuer Mobile. Dort sind die Karten
sicher aktiv (Container ~727px < 860px), tragen also alles im Akkordeon.
Zwischen 767 und 920px stehen Karten UND Tabelle nebeneinander — doppelt,
aber vollstaendig. Fehlend waere schlimmer als doppelt.
Der Scroll-Wrapper wird mit ausgeblendet, sonst bleibt ein leerer Kasten
stehen. Gilt nur fuer die Pakettabelle — andere Datentabellen scrollen
weiterhin in .td-table-scroll. */
@media(max-width:767px){
.td-table-scroll:has(.td-pakettabelle){display:none}
.td-pakettabelle{display:none}
}
/* ----------------------------------------------------------------------------
11b. Swipe am Rechner - Bildlaufleiste und Greifhand
Mit dem Finger scrollt das Betriebssystem, die ausgeblendete Leiste stoert
dort nicht. Mit der Maus fehlt beides: kein Ziehen, keine Leiste - der
Zustand ist dann unbedienbar, zumal die Karte ein Link ist. Deshalb bekommt
ein praeziser Zeiger die Leiste zurueck; das Ziehen liefert das Komponenten-JS.
---------------------------------------------------------------------------- */
@media (pointer: fine) {
.product-grid[data-swipe-container],
.matrix-responsive .mobile-products[data-swipe-container] {
scrollbar-width: thin;
scrollbar-color: rgba(15,26,36,.28) transparent;
cursor: grab;
}
.product-grid[data-swipe-container]::-webkit-scrollbar,
.matrix-responsive .mobile-products[data-swipe-container]::-webkit-scrollbar {
display: block; height: 8px;
}
.product-grid[data-swipe-container]::-webkit-scrollbar-thumb,
.matrix-responsive .mobile-products[data-swipe-container]::-webkit-scrollbar-thumb {
background: rgba(15,26,36,.28); border-radius: var(--td-radius-pill);
}
.product-grid[data-swipe-container]::-webkit-scrollbar-track,
.matrix-responsive .mobile-products[data-swipe-container]::-webkit-scrollbar-track {
background: transparent;
}
}
/* Waehrend des Ziehens: Greifhand halten, keine Textmarkierung, kein Link-Hover. */
[data-swipe-container].td-zieht { cursor: grabbing; user-select: none; }
[data-swipe-container].td-zieht * { pointer-events: none; }
/* ============================================================================
12. Lightbox — Aufnahmen gross ansehen
Standard seit 28.08.2026: jede Aufnahme oeffnet per Klick, mehrere Aufnahmen
derselben Gruppe lassen sich durchblaettern. Den Dialog baut das
Komponenten-JS; die Seite markiert nur das Bild mit .td-zoom.
Vorlaeufer waren die seitenlokalen .lb-* auf der VDC-Entwicklerseite und
.td-lb auf ThurWeb — zwei Belege, deshalb hier.
============================================================================ */
.td-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.td-zoom{cursor:zoom-in}
.td-zoom:focus-visible{outline:2px solid var(--td-accent);outline-offset:4px;border-radius:var(--td-radius-lg)}
button.td-zoom{display:block;width:100%;padding:0;border:0;background:none;text-align:left;font:inherit;color:inherit}
.td-zoom-hint{display:block;margin-top:10px;font-size:13.5px;color:var(--td-muted)}
.td-lb{border:0;padding:0;background:transparent;width:100vw;height:100vh;max-width:100vw;max-height:100vh;overflow:hidden}
.td-lb::backdrop{background:rgba(15,26,36,.88)}
.td-lb .td-lb-fig{
margin:0;height:100%;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:14px;padding:24px;
overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
.td-lb .td-lb-img{
display:block;max-width:94vw;max-height:78vh;width:auto;height:auto;
border-radius:var(--td-radius);box-shadow:0 24px 60px rgba(0,0,0,.5);background:#fff;
}
/* Videos teilen sich die Buehne mit den Bildern. Das hidden-Attribut braucht
eine eigene Regel, weil display:block es sonst uebersteuert. */
.td-lb .td-lb-video{
display:block;max-width:94vw;max-height:78vh;width:auto;height:auto;
border-radius:var(--td-radius);box-shadow:0 24px 60px rgba(0,0,0,.5);background:#000;
}
.td-lb .td-lb-img[hidden],.td-lb .td-lb-video[hidden]{display:none}
.td-lb .td-lb-cap{max-width:760px;text-align:center;font-size:15px;line-height:1.6;color:rgba(255,255,255,.82)}
.td-lb .td-lb-cap b,.td-lb .td-lb-cap strong{color:#fff;font-weight:600}
.td-lb .td-lb-hint,.td-lb .td-lb-count{font-size:13px;color:rgba(255,255,255,.6);letter-spacing:.06em}
.td-lb .td-lb-btn{
position:fixed;z-index:2;width:44px;height:44px;border-radius:var(--td-radius-pill);
border:1px solid rgba(255,255,255,.4);background:rgba(15,26,36,.6);color:#fff;
font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:background var(--td-transition),border-color var(--td-transition);
}
.td-lb .td-lb-btn:hover{background:rgba(15,26,36,.9);border-color:#fff}
.td-lb .td-lb-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.td-lb .td-lb-close{top:20px;right:20px}
.td-lb .td-lb-prev{left:20px;top:50%;transform:translateY(-50%)}
.td-lb .td-lb-next{right:20px;top:50%;transform:translateY(-50%)}
/* Eine einzelne Aufnahme braucht weder Pfeile noch Zaehler. */
.td-lb.td-lb-einzeln .td-lb-prev,
.td-lb.td-lb-einzeln .td-lb-next,
.td-lb.td-lb-einzeln .td-lb-count{display:none}
/* Originalgroesse: die Figur wird zum Scrollrahmen. Ohne das ist die
Grossansicht auf dem Handy wirkungslos — 367px statt 335px im Fliesstext. */
.td-lb.kann-zoomen .td-lb-img{cursor:zoom-in}
.td-lb.ist-gezoomt .td-lb-fig{align-items:flex-start;justify-content:flex-start}
.td-lb.ist-gezoomt .td-lb-img{max-width:none;max-height:none;cursor:zoom-out}
.td-lb.ist-gezoomt .td-lb-cap,
.td-lb.ist-gezoomt .td-lb-hint,
.td-lb.ist-gezoomt .td-lb-count{display:none}
.td-lb:not(.kann-zoomen) .td-lb-hint{display:none}
@media (max-width:1023px){
.td-lb .td-lb-img{max-height:70vh}
.td-lb .td-lb-close{top:10px;right:10px}
.td-lb .td-lb-prev{left:8px}
.td-lb .td-lb-next{right:8px}
}
/* Flache Viewports: die Bildunterschrift weicht dem Bild. */
@media (orientation:landscape) and (max-height:650px){
.td-lb .td-lb-img{max-height:84vh}
.td-lb .td-lb-cap{display:none}
}
/* ============================================================================
12b. PRODUKTLISTE — ein Markup, zwei Darstellungen
----------------------------------------------------------------------------
Beschlossen ANEB + MAEB 04.09.2026, am Geraet geprueft.
Ersetzt mittelfristig .product-tile / .product-matrix aus Abschnitt 8. Beide
Systeme stehen bewusst nebeneinander, bis die Seiten migriert sind:
ThurBuilder, ThurCloud und ThurWeb laufen heute auf dem alten Markup.
NICHT beide auf derselben Seite mischen.
Das Modell:
| Produkte | breit | schmal |
|----------|------------------------|---------------------------|
| bis 3 | Kacheln nebeneinander | Kacheln gestapelt |
| ab 4 | Zeilenmatrix | Swipe-Bahn |
Es gibt genau EIN Markup. Die Umschaltung passiert ausschliesslich per
Container-Query — kein zweites Markup, keine doppelt gepflegten Zahlen.
Der Wrapper .pl-wrap traegt container-type und die Modusklasse, gestylt
wird .pl: eine Container-Query kann den Container SELBST nicht stylen,
nur seine Nachfahren.
Aufbau eines Eintrags (DOM-Reihenfolge folgt der Matrix):
.pl-item > .pl-kopf · .pl-fakten (4 Merkmale) · .pl-preis ·
.pl-mehr (details, alle uebrigen Merkmale) · .pl-cta
In der Kachelform zieht `order` den Preis nach oben — ein Markup,
zwei Leserichtungen.
Verhalten aus ci-2030-components.js: gemeinsames Aufklappen, Position
in der Swipe-Bahn, Tap-vs-Swipe.
============================================================================ */
/* --pl-spalten ist das Spaltenraster der Zeilenmatrix. Der Standardwert ist das
an ThurWeb gemessene Raster: Paketname, vier Merkmale, Preis, feste
Aktionsspalte. Eine Seite mit weniger Merkmalen ueberschreibt die Variable auf
ihrem eigenen Wrapper — ThurCloud hat nur ein unterscheidendes Merkmal
(Speicher) und braucht deshalb vier Spalten statt sieben. Ohne die Variable
muesste jede solche Seite den kompletten Matrix-Regelsatz kopieren. */
.pl-wrap{container-type:inline-size;container-name:pl;
--pl-spalten:1.5fr .78fr .95fr .68fr .78fr .92fr 132px}
.pl{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
align-items:start}
.pl-matrixkopf{display:none}
.pl-item{
display:flex;flex-direction:column;min-width:0;position:relative;
background:#fff;border:1px solid var(--td-line-strong);border-radius:var(--td-radius-lg);
overflow:hidden;transition:border-color var(--td-transition),box-shadow var(--td-transition);
}
/* Hover = Umrandung, nur mit echtem Zeiger. Auf Touch bliebe er sonst kleben. */
@media (hover:hover) and (pointer:fine){
.pl-item:hover{border-color:var(--td-accent);box-shadow:inset 0 0 0 1px var(--td-accent)}
.pl-item.empfohlen:hover{border-color:var(--td-accent)}
}
.pl-item:focus-within{border-color:var(--td-accent);box-shadow:inset 0 0 0 1px var(--td-accent)}
.pl-item.empfohlen{border-color:rgba(27,95,143,.52)}
.pl-item.empfohlen::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
background:var(--td-primary);z-index:2}
/* Leseführung in der Kachel: Kopf, Preis, Merkmale, Akkordeon, Knopf */
.pl-kopf{order:1}
.pl-preis{order:2}
.pl-fakten{order:3}
.pl-mehr{order:4}
.pl-cta{order:5}
.pl-kopf{padding:21px 22px 17px;background:var(--td-dark);color:#fff}
/* Badge NEBEN dem Namen, nie darunter: sonst waechst der Kopf einer Kachel und
alle folgenden Zeilen fluchten nicht mehr mit den Nachbarkacheln. Deshalb ist
der Text kurz ("Topseller") und der Umbruch unterbunden. */
.pl-name{font-size:19px;font-weight:700;display:flex;align-items:center;
justify-content:space-between;gap:10px;flex-wrap:nowrap;min-width:0}
.pl-name .badge{background:#fff;color:var(--td-primary);font-size:11px;flex:0 0 auto;
white-space:nowrap}
/* Claim-Hoehe reservieren, damit unterschiedlich lange Claims die Zeilen nicht
verschieben. equalizeTileHeads in ci-2030-components.js macht das genauer. */
.pl-claim{font-size:14px;color:rgba(255,255,255,.72);margin-top:6px;min-height:2.9em}
.pl-preis{padding:17px 22px 14px;border-bottom:1px solid var(--td-line);
display:flex;flex-direction:column}
.pl-betrag{font-size:28px;font-weight:900;color:var(--td-dark);letter-spacing:-.025em;
line-height:1.05}
.pl-takt{font-size:13px;color:var(--td-muted);margin-top:4px}
.pl-setup{font-size:12.5px;color:var(--td-body);margin-top:7px}
.pl-fakten{display:flex;flex-direction:column;border-top:1px solid var(--td-line)}
.pl-fakt{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
padding:11px 22px;border-bottom:1px solid var(--td-line);font-size:14px}
.pl-label{color:var(--td-muted)}
.pl-wert{font-weight:700;color:var(--td-dark);text-align:right}
/* --- Akkordeon: traegt ALLE uebrigen Merkmale ---------------------------
Bewusst nativ per : funktioniert ohne JavaScript. Das gemeinsame
Aufklappen kommt aus components.js und ist eine Zutat, keine Bedingung. */
.pl-mehr{border-bottom:1px solid var(--td-line)}
.pl-mehr > summary{list-style:none;cursor:pointer;padding:13px 22px;min-height:44px;
font-size:14px;font-weight:700;color:var(--td-primary);
display:flex;align-items:center;justify-content:space-between;gap:12px}
.pl-mehr > summary::-webkit-details-marker{display:none}
/* Plus und Minus erben Farbe, Groesse und Schnitt vom Text daneben.
U+2212 ist das echte Minuszeichen, nicht der kuerzere Gedankenstrich. */
.pl-mehr > summary::after{content:"+";font-size:inherit;font-weight:inherit;color:inherit;
line-height:1;width:1em;text-align:center}
.pl-mehr[open] > summary::after{content:"\2212"}
@media (hover:hover) and (pointer:fine){
.pl-mehr > summary:hover{color:var(--td-accent)}
}
.pl-mehr > summary:focus-visible{box-shadow:var(--td-focus-ring);border-radius:var(--td-radius-sm)}
.pl-mehr-inhalt .pl-fakt:last-child{border-bottom:0}
/* --- Bestellknopf in jeder Kachel ---------------------------------------
Abweichung vom fruehen CI-Entscheid "ganze Kachel klickbar, kein Button
darin" (MAEB 04.09.2026): Beim Wischen auf dem Handy loeste die klickbare
Flaeche ungewollt den Bestellprozess aus. Nur der Knopf reagiert. */
.pl-cta{padding:16px 22px 20px;margin-top:auto}
.pl-cta .btn{width:100%;justify-content:center}
.pl-cta .hint{display:block;margin-top:9px;font-size:12.5px;color:var(--td-subtle);
text-align:center}
/* ---------------------------------------------- ab 860px: ZEILENMATRIX --
Gilt nur fuer .modus-auto (4+ Produkte). Bis 3 Produkte bleibt es in jeder
Breite bei Kacheln. */
@container pl (min-width:860px){
.modus-auto .pl{display:block;background:#fff;border:1px solid var(--td-line-strong);
border-radius:var(--td-radius-lg);overflow:hidden}
/* Die Aktionsspalte hat eine FESTE Breite. Mit `auto` richtet sie sich nach
ihrem Inhalt — und weil jede Zeile ein eigenes Grid ist, bekommt dann jede
Zeile andere Spaltenbreiten. An ThurWeb gemessen (07.09.2026): Kopf und
Zeilen liefen um bis zu 56px auseinander, die Knoepfe waren 180-213px
breit. Deshalb feste Breite und ein kurzer, fuer alle gleicher Knopftext;
das Produkt steht im aria-label. */
.modus-auto .pl-matrixkopf,
.modus-auto .pl-item{
display:grid;
grid-template-columns:var(--pl-spalten);
align-items:center;column-gap:14px;
}
.modus-auto .pl-matrixkopf{background:var(--td-dark);color:#fff;min-height:54px;
padding:0 22px;font-size:13px;font-weight:700}
.modus-auto .pl-item{border:0;border-top:1px solid var(--td-line);border-radius:0;
padding:12px 22px;min-height:78px;box-shadow:none}
.modus-auto .pl-item:first-of-type{border-top:0}
/* In der Matrix gilt wieder die DOM-Reihenfolge */
.modus-auto .pl-kopf,.modus-auto .pl-preis,.modus-auto .pl-fakten,
.modus-auto .pl-fakt,.modus-auto .pl-mehr,.modus-auto .pl-cta{order:0}
@media (hover:hover) and (pointer:fine){
.modus-auto .pl-item:hover{box-shadow:inset 0 0 0 1.5px var(--td-accent);
border-color:var(--td-line)}
}
/* Variante A (MAEB 07.09.2026): Hintergrund weg, Balken bleibt. Die
empfohlene Zeile soll sich wie die uebrigen vier lesen — die Empfehlung
traegt der Badge, der Balken haelt sie beim Ueberfliegen auffindbar.
Variante B (auch der Balken weg) war zu leise, C (Balken nur bei Hover)
verschenkt die Marke genau beim Ueberfliegen, wo sie wirken soll.
Die Hover-Regel darueber hat dieselbe Spezifitaet (0,3,0) und steht frueher
im Quelltext — .empfohlen schlaegt sie also und loescht den Rahmen. Solange
der Hintergrund da war, fiel das nicht auf; ohne ihn waere die empfohlene
Zeile die einzige, die auf den Zeiger gar nicht reagiert. Deshalb hier
beide Schatten zusammen: Balken UND Rahmen. */
.modus-auto .pl-item.empfohlen{box-shadow:inset 3px 0 0 var(--td-primary)}
@media (hover:hover) and (pointer:fine){
.modus-auto .pl-item.empfohlen:hover{
box-shadow:inset 3px 0 0 var(--td-primary),inset 0 0 0 1.5px var(--td-accent);
border-color:var(--td-line)}
}
.modus-auto .pl-item.empfohlen::before{display:none}
.modus-auto .pl-kopf{background:transparent;color:inherit;padding:0}
.modus-auto .pl-name{font-size:15.5px;font-weight:800;color:var(--td-dark);
display:flex;justify-content:flex-start;gap:8px}
.modus-auto .pl-name .badge{border:1px solid rgba(27,95,143,.3)}
.modus-auto .pl-claim{color:var(--td-muted);font-size:12px;margin-top:2px;min-height:0}
/* Die vier Merkmale werden zu Spalten — Beschriftung traegt der Kopf.
Werte UND Ueberschriften zentriert, sonst fluchten sie bei
unterschiedlich langen Werten nicht. */
.modus-auto .pl-fakten{display:contents}
.modus-auto .pl-fakt{display:block;padding:0;border:0;font-size:15px;text-align:center}
.modus-auto .pl-label{display:none}
.modus-auto .pl-wert{text-align:center;font-weight:700;display:block}
/* Alle Spalten ausser Paketname und Aktionsspalte zentriert — auch der Preis.
Vorher stand die Ueberschrift "Preis" zentriert und der Betrag darunter
rechtsbuendig: Die zentrierende Regel hat wegen der beiden :not() mehr
Gewicht und schlug die rechtsbuendige (MAEB 07.09.2026 auf Devel gesehen).
Statt die Spezifitaeten gegeneinander hochzuziehen, ist der Preis jetzt
wie jede andere Spalte zentriert — Ueberschrift und Wert fluchten. */
.modus-auto .pl-matrixkopf > div:not(:first-child):not(:last-child){text-align:center}
.modus-auto .pl-preis{padding:0;border:0;text-align:center;align-items:center}
.modus-auto .pl-betrag{font-size:17px;font-weight:800;white-space:nowrap}
.modus-auto .pl-takt{font-size:11px}
.modus-auto .pl-setup{display:none}
/* In der Matrix kein Akkordeon — die Details stehen in der Quermatrix */
.modus-auto .pl-mehr{display:none}
.modus-auto .pl-cta{padding:0;margin:0}
.modus-auto .pl-cta .btn{width:100%;justify-content:center;padding:9px 12px;
font-size:13.5px;white-space:nowrap}
}
/* -------------------------------------------- unter 860px: SWIPE-BAHN --
Nur bei 4+ Produkten (.modus-auto). Bis 3 Pakete bleibt es gestapelt:
dort ist die Seite kurz genug, und man scrollt ohnehin an allen vorbei.
Am Geraet geprueft 04.09.2026 — Wischen, Akkordeon und Zurueckwischen
funktionieren zusammen. */
@container pl (max-width:859px){
/* grid-template-columns MUSS zurueckgesetzt werden: sonst landet die erste
Karte in der 1fr-Spalte der Kachelform und wird schmaler als alle
anderen (gemessen 04.09.2026: Kopf 227px statt 113px). */
.modus-auto .pl{
grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;gap:14px;
overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 12px;
overscroll-behavior-x:contain;scrollbar-color:var(--td-line-strong) transparent;
}
.modus-auto .pl > .pl-item{scroll-snap-align:center}
.modus-auto .pl::-webkit-scrollbar{height:8px}
.modus-auto .pl::-webkit-scrollbar-thumb{background:var(--td-line-strong);border-radius:999px}
.modus-auto .pl::-webkit-scrollbar-track{background:transparent}
/* Feste Zeilenhoehen: NUR so stehen die Merkmale auf allen Karten gleich
hoch. Sonst verrutscht die Zeile beim Wischen und der Vergleich ist
dahin — der ganze Zweck der Bahn. Gemessen: 0px Abweichung ueber alle
Karten und Zeilen. */
.modus-auto .pl-fakt{min-height:46px}
.modus-auto .pl-wert{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modus-auto .pl-mehr > summary{min-height:46px}
.modus-auto .pl-preis{min-height:96px}
.modus-auto .pl-kopf{min-height:104px}
.modus-auto .pl-cta{min-height:76px}
}
/* --- Kennzeichnung der Bahn: ohne sie sieht niemand, dass es weitergeht --- */
.pl-swipekopf{display:none;align-items:baseline;gap:10px;margin-bottom:9px;padding:0 2px}
.pl-swipezahl{font-weight:800;font-size:14.5px;color:var(--td-dark)}
.pl-swipehinweis{font-size:13px;color:var(--td-muted)}
.pl-swipepos{font-size:13px;color:var(--td-muted);margin-left:auto;
font-variant-numeric:tabular-nums}
.pl-punkte{display:none;gap:6px;justify-content:center;margin-top:2px}
.pl-punkte i{width:20px;height:4px;border-radius:999px;background:var(--td-line-strong);
transition:background var(--td-transition)}
.pl-punkte i.aktiv{background:var(--td-accent)}
@container pl (max-width:859px){
.modus-auto .pl-swipekopf{display:flex}
.modus-auto .pl-punkte{display:flex}
}
/* ============================================================================
13. Formulare — BESCHLOSSEN 17.09.2026 (ROKA), erster realer Fall: Domaincheck
----------------------------------------------------------------------------
Bis hierher stand an dieser Stelle «OFFEN — bewusst nicht gestaltet». Der
Tool-Hero der Domain-Seite brauchte das erste echte Formularfeld; daran ist
das Muster entstanden und gemessen worden (Desktop 1440, Mobile 375).
Grundsaetze — aus dem CI abgeleitet, nichts Neues erfunden:
* Ein Feld ist RUHE, kein Impuls. Deshalb blaue Familie fuer Fokus und
Auswahl (Primary = Status), NIE Orange am Feld: Orange bleibt dem
Knopf daneben vorbehalten. Zwei orange Rahmen nebeneinander (Feld im
Fokus + Knopf) wuerden um dieselbe Aufmerksamkeit konkurrieren.
* Feldhoehe = Knopfhoehe. Standard 44 px wie .btn, gross 52 px wie der
Hero-Domaincheck. Ein Feld und sein Knopf stehen auf einer Linie.
* Radius --td-radius-sm (6 px) wie Buttons — kleine UI, keine Karte.
* Schrift 15 px im Feld, 16 px mobil (unter 16 px zoomt iOS beim Tippen
in die Seite hinein).
* Beschriftung 14 px / 700 --td-body: sichtbar, nicht laut. Kein
Platzhalter als Ersatz fuer die Beschriftung — er verschwindet beim
Tippen. Im Hero-Werkzeug darf die Beschriftung unsichtbar sein
(.td-sr), weil die H1 darueber die Aufgabe erklaert.
* Fehler sind die einzige zusaetzliche Farbe (--td-error). Sie erscheinen
am Feld UND als Satz darunter — Farbe allein reicht nicht (WCAG 1.4.1).
* Ankreuzfelder ueber accent-color in Primary: das native Element bleibt,
nichts wird nachgebaut. Bedienbar, vorlesbar, 18 px gross.
* Auf dunklem Grund bleibt das Feld weiss — Kontrast der Eingabe geht vor
Stimmung. Beschriftung und Hilfetext wechseln auf die Dunkel-Textfarben.
Klassen:
.td-field Beschriftung + Feld + Hilfe/Fehler, senkrecht
.td-field--error Fehlerzustand (Rahmen + .td-error-text sichtbar)
.td-help Hilfetext unter dem Feld (13 px, --td-muted)
.td-error-text Fehlersatz (13 px, --td-error)
.td-input-group Feld und Knopf in EINER Zeile (Suche, Domaincheck,
Newsletter); mobil gestapelt
.td-input-group--lg 52 px hoch — fuer den Tool-Hero
.td-check Zeile aus Ankreuzfeld/Radio und Text
.td-form-grid zwei Felder nebeneinander, mobil untereinander
.td-form-actions Knopfzeile am Formularende (= .btn-row)
.td-sr nur fuer Screenreader (Beschriftung unsichtbar)
============================================================================ */
:root{
--td-error: #B3261E; /* einzige zusaetzliche Farbe: Fehler am Feld */
--td-success: #3FA66A; /* Bestaetigung; identisch mit dem Hero-Trust-Punkt */
--td-field-h: 44px;
--td-field-h-lg: 52px;
--td-field-ring: 0 0 0 3px rgba(27,95,143,.14); /* blau, nie orange */
}
/* --- Grundelemente ------------------------------------------------------- */
/* Aussehen gilt NUR in unseren Formularkontexten (.td-form, .td-field, .td-input-group,
.td-check) — nicht global. Grund (homepage#81, 24.09.2026): Element-Regeln ohne Klasse
trafen fremde Komponenten im selben DOM (Beiz-Chat-Textarea 128 px hoch, Bunki musste mit
!important dagegenhalten) und WHMCS-Formulare. :where() im Scope haelt die Spezifitaet
unveraendert. Die LAYOUT-Eigenschaften display/width haengen wie bisher an .td-field und
.td-input-group — Croster hat im Kopf eigene Felder (Suche, Waehrung). */
/* :where() haelt die Spezifitaet bei (0,0,1) — sonst schlaegt die :not-Kette
(0,4,1) spaeter jeden Zustand wie :disabled oder .td-field--error. */
:where(.td-form,.td-field,.td-input-group,.td-check) :is(input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"])),select,textarea){
font-family:inherit;font-size:15px;line-height:1.3;color:var(--td-text);
background:#fff;border:1px solid var(--td-line-strong);border-radius:var(--td-radius-sm);
min-height:var(--td-field-h);padding:0 14px;margin:0;
-webkit-appearance:none;appearance:none;
transition:border-color var(--td-transition),box-shadow var(--td-transition);
}
:where(.td-form,.td-field,.td-input-group,.td-check) textarea{min-height:128px;padding:11px 14px;resize:vertical;line-height:1.5}
:where(.td-form,.td-field,.td-input-group,.td-check) select{
padding-right:40px;cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 12px center;background-size:18px;
}
:where(.td-form,.td-field,.td-input-group,.td-check) select[multiple]{padding:8px 14px;background-image:none;min-height:auto}
:where(.td-form,.td-field,.td-input-group,.td-check) ::placeholder{color:var(--td-subtle);opacity:1}
@media (hover:hover){
:where(.td-form,.td-field,.td-input-group,.td-check) :is(input:where(:not([type="checkbox"]):not([type="radio"])),select,textarea):hover{
border-color:#A9B8C6;
}
}
:where(.td-form,.td-field,.td-input-group,.td-check) :is(input,select,textarea):focus{
outline:none;border-color:var(--td-primary);box-shadow:var(--td-field-ring);
}
:where(.td-form,.td-field,.td-input-group,.td-check) :is(input,select,textarea):disabled{
background:var(--td-light);color:var(--td-subtle);cursor:not-allowed;border-color:var(--td-line);
}
:where(.td-form,.td-field,.td-input-group,.td-check) input[readonly]:where(:not([type="checkbox"]):not([type="radio"])){background:var(--td-light)}
@media (max-width:767px){
:where(.td-form,.td-field,.td-input-group,.td-check) :is(input:where(:not([type="checkbox"]):not([type="radio"])),select,textarea){font-size:16px}
}
/* --- Beschriftung, Hilfe, Fehler ----------------------------------------- */
:where(.td-form,.td-field,.td-input-group,.td-check) label{font-size:14px;font-weight:700;color:var(--td-body);line-height:1.35}
.td-field>label{display:block}
:where(.td-form,.td-field,.td-input-group,.td-check) fieldset{border:0;padding:0;margin:0;min-width:0}
legend{padding:0;font-size:16px;font-weight:700;color:var(--td-text);margin-bottom:12px}
.td-field{display:flex;flex-direction:column;gap:6px;margin:0 0 18px}
.td-field>input,.td-field>select,.td-field>textarea,
.td-input-group>input,.td-input-group>select{display:block;width:100%}
.td-field:last-child{margin-bottom:0}
.td-field>label .td-optional{font-weight:400;color:var(--td-subtle);margin-left:.35em}
.td-help{font-size:13px;line-height:1.45;color:var(--td-muted);margin:0}
.td-error-text{display:none;font-size:13px;line-height:1.45;color:var(--td-error);font-weight:500;margin:0}
.td-field--error input,.td-field--error select,.td-field--error textarea{border-color:var(--td-error)}
.td-field--error input:focus,.td-field--error select:focus,.td-field--error textarea:focus{
border-color:var(--td-error);box-shadow:0 0 0 3px rgba(179,38,30,.14);
}
.td-field--error .td-error-text{display:block}
.td-field--error>label{color:var(--td-error)}
/* --- Ankreuzfeld und Radio: nativ, in Primary ------------------------------ */
:where(.td-form,.td-field,.td-input-group,.td-check) :is(input[type="checkbox"],input[type="radio"]){
width:18px;height:18px;margin:0;accent-color:var(--td-primary);cursor:pointer;flex:none;
}
:where(.td-form,.td-field,.td-input-group,.td-check) :is(input[type="checkbox"],input[type="radio"]):focus-visible{
outline:none;box-shadow:var(--td-field-ring);border-radius:3px;
}
:where(.td-form,.td-field,.td-input-group,.td-check) input[type="radio"]:focus-visible{border-radius:50%}
.td-check{display:flex;align-items:flex-start;gap:10px;font-size:15px;font-weight:400;
color:var(--td-body);cursor:pointer;margin:0 0 10px}
.td-check:last-child{margin-bottom:0}
.td-check input{margin-top:2px}
/* Der Text steht in EINEM — als lose Textknoten wuerde jeder Link im
Satz zum eigenen Flex-Element mit 10 px Luft davor und danach. */
.td-check>span{flex:1 1 auto}
.td-check a{color:var(--td-primary)}
/* --- Feld + Knopf in einer Zeile ------------------------------------------ */
.td-input-group{display:flex;gap:10px;align-items:stretch}
.td-input-group>input{flex:1 1 auto;min-width:0}
.td-input-group>.btn{flex:0 0 auto;white-space:nowrap;min-height:var(--td-field-h)}
.td-input-group--lg>input{min-height:var(--td-field-h-lg);font-size:17px;padding:0 16px}
.td-input-group--lg>.btn{min-height:var(--td-field-h-lg);padding:0 22px}
@media (max-width:767px){
.td-input-group{flex-direction:column;gap:8px}
.td-input-group>.btn{width:100%}
.td-input-group--lg>input{min-height:48px;font-size:16px}
.td-input-group--lg>.btn{min-height:48px}
}
/* --- Formular-Layout ------------------------------------------------------ */
.td-form{max-width:640px}
.td-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
/* Im Raster behaelt auch das letzte Feld seinen Abstand — gestapelt (mobil) klebte es
sonst am naechsten Feld (an der Ticket-Maske gesehen, 17.09.2026). */
.td-form-grid>.td-field:last-child{margin-bottom:18px}
@media (max-width:767px){.td-form-grid{grid-template-columns:1fr}}
.td-form-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:24px}
.td-form-note{font-size:13px;color:var(--td-muted);margin:14px 0 0}
/* Nur fuer Screenreader — Beschriftung bleibt im Baum, nicht auf dem Bild */
.td-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px}
/* --- Auf dunklem Grund ---------------------------------------------------- */
.sec-dark label,.hero-dark label{color:#fff}
.sec-dark .td-help,.hero-dark .td-help{color:var(--td-dark-muted)}
.sec-dark .td-check,.hero-dark .td-check{color:var(--td-dark-text)}
.sec-dark input:where(:not([type="checkbox"]):not([type="radio"])),.hero-dark input:where(:not([type="checkbox"]):not([type="radio"])),
.sec-dark select,.hero-dark select,.sec-dark textarea,.hero-dark textarea{
border-color:transparent; /* weisses Feld auf Dunkel braucht keinen Rand */
}
.sec-dark input:focus,.hero-dark input:focus,.sec-dark select:focus,.hero-dark select:focus,
.sec-dark textarea:focus,.hero-dark textarea:focus{
border-color:transparent;box-shadow:0 0 0 3px rgba(255,255,255,.35);
}
.sec-dark .td-error-text,.hero-dark .td-error-text{color:#FF8A7A}
.sec-dark .td-field--error>label,.hero-dark .td-field--error>label{color:#FF8A7A}
/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
/* ============================================================================
14. Dokumentseiten — Vertragstext mit mitlaufendem Inhaltsverzeichnis
----------------------------------------------------------------------------
Realer Fall: AGB, Impressum, Datenschutz, Verhaltenskodex Domains und die
SLA-Bedingungen. Bis 22.09.2026 lag dasselbe Geruest viermal seitenlokal,
mit zwei Fehlern in allen vier Kopien: der Druck quetschte den Text in die
260-px-Spalte, und das Verzeichnis blieb zu, wenn das Fenster nach dem Laden
wuchs. Beide sind hier behoben.
Die Komponente umschliesst NICHT die ganze Seite — sie steht in der Sektion,
die den Dokumentteil traegt; Hero, Matrix und CTA bleiben voll breit.
Markup:
.td-doc-layout Grid, traegt .td-container
nav.td-doc-toc Verzeichnis, sticky
details.td-doc-toc-box Aufklappen auf schmalen Geraeten
.td-doc-content rechte Spalte als EIN Grid-Item
.td-doc-kopf optionaler Dokumentkopf
article.td-doc-text der Dokumenttext
Die Ziffer steht IM Ueberschriftentext (
1. Titel
) — der
Vertragstext verweist auf sich selbst, und beim Zitieren muss sie mitgehen.
Der CSS-Zaehler nummeriert ausschliesslich das Verzeichnis.
Verhalten (Aufklappen, Breitenwechsel): ci-2030-components.js -> docToc().
Entscheide und Messwerte: content/entscheidungen/doc-layout-komponente-vorschlag-2026-09-22.md
============================================================================ */
:root{
/* Hoehe der Kopfleiste. ai-navbar.css fuehrt --bar-h (60 px, ab 767 px 56 px).
Der Fallback traegt Seiten ohne Navbar (Mockups, Standalone-Vorschau) und
muss dort SELBST umschalten — sonst rechnet die Komponente auf dem Handy
mit 60 statt 56 px weiter (gemessen: 84 statt 80 px Ankerversatz). */
--td-header-h: var(--bar-h, 60px);
--td-doc-offset: calc(var(--td-header-h) + var(--td-space-4));
--td-doc-toc-w: 260px;
}
@media (max-width:767px){
:root{ --td-header-h: var(--bar-h, 56px); }
}
/* ---- Grid ---------------------------------------------------------------- */
.td-doc-layout{
display:grid;
grid-template-columns:var(--td-doc-toc-w) minmax(0,1fr);
gap:var(--td-space-7);
align-items:start;
}
/* Die rechte Spalte ist EIN Grid-Item; Kopf und Text liegen darin.
Nicht beide einzeln ins Grid haengen: ein Verzeichnis, das ueber zwei
auto-Zeilen spannt, blaeht die erste Zeile auf ihre halbe Hoehe auf und
reisst ein Loch zwischen Kopf und erster Ziffer (gemessen: ~490 px). */
/* min-width:0 an BEIDEN Stellen: einspaltig loest display:contents den
Wrapper auf, und dann braucht der Text den Schutz selbst — ohne ihn
sprengen breite Tabellen die Spalte (gemessen: 539 px Dokument bei
375 px Viewport). */
.td-doc-content,.td-doc-text,.td-doc-kopf{min-width:0}
/* Dokumentkopf (Titel, Fassung, Lead) — OPTIONAL, nur wenn der Dokumentteil
eine eigene Ueberschrift traegt; bei den Legal-Seiten macht das der Hero.
Er liegt in der Textspalte und flieht damit mit dem Text, den er
ueberschreibt. Ueber die ganze Breite gesetzt flieht er stattdessen mit dem
Verzeichnis, und der Block liest sich als «Titel gehoert zum Verzeichnis». */
.td-doc-kopf{max-width:74ch;margin:0 0 var(--td-space-6)}
.td-doc-kopf > :last-child{margin-bottom:0}
/* ---- Inhaltsverzeichnis -------------------------------------------------- */
.td-doc-toc{
position:sticky;
top:var(--td-doc-offset);
max-height:calc(100vh - var(--td-doc-offset) - var(--td-space-4));
overflow-y:auto;
overscroll-behavior:contain;
/* Platz fuer den Fokusring, der sonst am Scrollrand abgeschnitten wuerde. */
padding-inline:3px;
margin-inline:-3px;
}
.td-doc-toc-box summary{list-style:none;cursor:default}
.td-doc-toc-box summary::-webkit-details-marker{display:none}
.td-doc-toc-box summary .td-kicker{margin-bottom:0}
/* Am Desktop steht die Liste offen darunter — die Nutzenzeile erklaert dort
nichts, was man nicht schon sieht. */
.td-doc-toc-nutzen{display:none}
.td-doc-toc ol{margin:var(--td-space-3) 0 0;padding:0;list-style:none;counter-reset:tddoc}
.td-doc-toc li{counter-increment:tddoc;border-top:1px solid var(--td-line)}
.td-doc-toc li:last-child{border-bottom:1px solid var(--td-line)}
.td-doc-toc li a{
display:grid;grid-template-columns:28px 1fr;gap:6px;
padding:9px 0;
font-size:14px;line-height:1.35;
color:var(--td-body);text-decoration:none;
}
/* Nur die LISTENeintraege nummerieren. Seit 23.09.2026 traegt die Leiste
darunter einen PDF-Link statt eines Knopfes — eine Regel auf alle
im Verzeichnis hing ihm den Zaehlerstand an, er hiess «12. Bedingungen
als PDF». Als