/* ============================================================
PaintSlots — Cluster-Seiten (funktionen/*.html)
Aufsatz auf beta.css. Nutzt ausschließlich dessen Tokens
(--card, --line, --teal, --r, --r-lg, --shadow …) und dessen
Schriften — hier stehen nur die Bausteine, die es dort
noch nicht gibt.
VERTRAG: Diese Klassennamen verwenden alle sieben Cluster-
Seiten wortgleich (seit 14.08.2026 — „Gutscheine & Bezahlen"
wurde in „Gutscheine & Rabattcodes" und „Bezahlen &
Rechnungen" geteilt). Wer hier etwas umbenennt, bricht sie alle.
.cl-hero Kopf (Versprechen + Ablauf-Diagramm)
.cl-flow Container für das Inline-SVG (scrollt seitlich)
.cl-block Ein Funktionsblock: Text + Bild, zweispaltig
.cl-block.flip Bild links statt rechts
.cl-copy Textspalte im Block (Pflicht — an ihr hängt die Reihenfolge)
.cl-media Bildspalte im Block (Pflicht — an ihr hängt die Reihenfolge)
.cl-shot.browser Browser-Rahmen (Kopfleiste mit drei Punkten)
.cl-shot.phone Handy-Rahmen (dunkler runder Rand)
.cl-frame Rahmen-Div innerhalb von .cl-shot, umschließt das ![]()
.cl-badge Paket-Badge (Pille)
.cl-help Link in die Hilfe
.cl-xlink Querverweise im Fuß
Zusätzlich (nur auf der Übersicht ../funktionen.html, die seit 13.08.2026
ein Verteiler auf diese Seiten ist — sie bindet diese Datei mit ein):
.vt-grid Raster der sieben Verteiler-Karten
.vt-card Eine Karte — ist selbst das auf die Cluster-Seite
.vt-shot Bildkasten der Karte (festes Seitenverhältnis, beschneidet)
.vt-body Textteil der Karte
.vt-points Die drei Stichpunkte
.vt-more Die „Alle Details"-Zeile am Kartenfuß
Text steht im Quelltext immer vor dem Bild (.cl-copy vor .cl-media) —
.flip tauscht nur die Spaltenreihenfolge per CSS, nicht das Markup.
Mobil rutscht das Bild per order nach oben; stünde das Bild im
Quelltext vorn, würde die Vorlesereihenfolge kippen.
============================================================ */
/* ---- Kopf der Seite ---- */
.cl-hero{ padding:52px 0 8px; }
.cl-hero h1{ margin-bottom:16px; }
.cl-hero .lead{ max-width:60ch; }
/* Ablauf-Diagramm. Auf schmalen Geräten schiebt man es zur Seite,
statt die Beschriftung unlesbar zu schrumpfen. Das Scrollen
passiert IM Container — die Seite selbst bleibt überlauffrei. */
.cl-flow{
margin-top:34px; padding:22px 20px;
background:var(--card); border:1px solid var(--line);
border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.cl-flow svg{ display:block; min-width:660px; width:100%; height:auto; }
.cl-flow-note{ margin-top:12px; font-size:13px; line-height:1.5; color:var(--muted); }
.cl-flow-note .cl-swipe{ color:var(--teal); font-weight:600; }
@media(min-width:761px){ .cl-flow-note .cl-swipe{ display:none; } }
/* ---- Ein Funktionsblock ---- */
.cl-block{
display:grid; grid-template-columns:1fr 1fr; gap:56px;
align-items:center; padding:60px 0; border-top:1px solid var(--line);
}
.cl-block:first-of-type{ border-top:0; padding-top:44px; }
.cl-block h2{ font-size:clamp(26px,3.1vw,38px); margin-bottom:16px; }
.cl-block p{ margin-bottom:14px; font-size:16.5px; line-height:1.62; }
.cl-block p:last-of-type{ margin-bottom:0; }
/* Bild links: nur die Spaltenreihenfolge tauschen, nicht das Markup.
So steht der Text in jeder Quelltext-Fassung an derselben Stelle. */
.cl-block.flip .cl-copy{ order:2; }
.cl-block.flip .cl-media{ order:1; }
.cl-eyebrow{
display:inline-flex; align-items:center; gap:9px;
font:600 12px/1 var(--body); letter-spacing:.13em; text-transform:uppercase;
color:var(--teal); margin-bottom:14px;
}
.cl-eyebrow i{ width:7px; height:7px; border-radius:50%; background:var(--pink); flex:none; }
/* ---- Paket-Badges ---- */
.cl-badges{ display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 4px; }
.cl-badge{
display:inline-flex; align-items:center; gap:7px;
font:600 12.5px/1.3 var(--body); padding:8px 14px;
border-radius:var(--r-pill); background:var(--teal-2); color:var(--teal-ink);
}
.cl-badge::before{
content:""; width:14px; height:14px; flex:none; background-repeat:no-repeat;
background-position:center; background-size:contain;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a3f3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
/* Zubuchbares Add-on — bewusst andere Farbe als „im Paket enthalten“. */
.cl-badge.addon{ background:var(--soft); color:var(--pink); }
.cl-badge.addon::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e94c82' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
/* ---- Hilfe-Link (Antippfläche mind. 44 px) ---- */
.cl-help{
display:inline-flex; align-items:center; gap:9px;
min-height:44px; padding:10px 0;
font:600 15px var(--body); color:var(--teal);
}
.cl-help::after{
content:""; width:16px; height:16px; flex:none; background-repeat:no-repeat;
background-position:center; background-size:contain; transition:transform .15s ease;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b4a44' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.cl-help:hover{ color:var(--pink); }
.cl-help:hover::after{ transform:translateX(3px); }
/* ---- Geräte-Rahmen ---- */
.cl-shot{ margin:0; }
.cl-shot img{ display:block; width:100%; height:auto; }
.cl-shot figcaption{
margin-top:14px; font-size:13.5px; line-height:1.5; color:var(--muted);
}
/* Browser: Kopfleiste mit drei Punkten, gezeichnet über ::before. */
.cl-shot.browser .cl-frame{
position:relative; padding-top:34px;
background:var(--card); border:1px solid var(--line);
border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow);
}
.cl-shot.browser .cl-frame::before{
content:""; position:absolute; top:0; left:0; right:0; height:34px;
background-color:var(--sand); border-bottom:1px solid var(--line);
background-repeat:no-repeat; background-position:14px center;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='10' viewBox='0 0 54 10'%3E%3Ccircle cx='5' cy='5' r='5' fill='%23e7d7c7'/%3E%3Ccircle cx='27' cy='5' r='5' fill='%23e7d7c7'/%3E%3Ccircle cx='49' cy='5' r='5' fill='%23e7d7c7'/%3E%3C/svg%3E");
}
/* Handy: dunkler, abgerundeter Rand. Bewusst schmal — ein Handy-
Screenshot auf halber Seitenbreite wirkt wie ein Tablet. */
.cl-shot.phone .cl-frame{
max-width:320px; margin-inline:auto;
background:#17231f; border:10px solid #17231f; border-radius:38px;
/* enger als var(--shadow): der breite Weichzeichner legt sonst einen
sichtbaren Schleier um Rahmen UND Bildunterschrift. */
box-shadow:0 12px 30px rgba(45,31,23,.20);
overflow:hidden;
}
.cl-shot.phone .cl-frame img{ border-radius:28px; }
.cl-shot.phone figcaption{ max-width:380px; margin-inline:auto; text-align:center; }
/* ---- Kleine Layout-Helfer (statt Inline-Style im Markup) ---- */
.cl-blocks{ padding-top:8px; }
.section-head.cl-tight{ margin-bottom:0; }
/* ---- Querverweise im Fuß ---- */
.cl-xlink{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px; }
.cl-xlink a{
display:flex; align-items:center; justify-content:space-between; gap:14px;
min-height:64px; padding:18px 22px;
background:var(--card); border:1px solid var(--line); border-radius:var(--r);
box-shadow:var(--shadow-sm); font-weight:600; font-size:15.5px; color:var(--ink);
transition:transform .12s ease, border-color .12s ease;
}
.cl-xlink a > span{ min-width:0; }
.cl-xlink a b{ display:block; font-weight:600; color:var(--ink); }
.cl-xlink a b + span{ display:block; margin-top:3px; color:var(--muted); font-weight:500; font-size:13px; }
.cl-xlink a::after{
content:""; width:16px; height:16px; flex:none; background-repeat:no-repeat;
background-position:center; background-size:contain;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b4a44' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.cl-xlink a:hover{ transform:translateY(-2px); border-color:var(--teal); }
/* ---- Verteiler-Karten (nur ../funktionen.html) ----
Die ganze Karte ist das : ein Klickziel statt drei (Bild, Titel, Knopf),
damit Tastatur und Vorlesesoftware die Seite nicht siebenmal doppelt anbieten.
Deshalb steht innen auch kein weiterer Link. */
.vt-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.vt-card{
display:flex; flex-direction:column; overflow:hidden; color:var(--ink);
background:var(--card); border:1px solid var(--line);
border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
transition:transform .12s ease, border-color .12s ease;
}
.vt-card:hover{ transform:translateY(-2px); border-color:var(--teal); }
/* Sieben Karten (seit 14.08.2026) fallen als 3 + 3 + 1. Die letzte stünde
allein links außen und sähe aus, als fehle etwas daneben — deshalb rutscht
sie in die mittlere Spalte. Bewusst NICHT über die volle Breite gedehnt:
Der Bildkasten hat ein festes Seitenverhältnis (16/10), eine Karte über
drei Spalten bekäme also ein Bild von 1200 px Höhe und erschlüge alles
darüber. Die Regel greift nur bei „Rest 1" (7, 10, 13 … Karten); bei sechs
passiert nichts. */
.vt-grid > .vt-card:last-child:nth-child(3n+1){ grid-column:2; }
/* Festes Seitenverhältnis: die sieben Aufnahmen sind zwischen 1,42 und 1,96
breit-zu-hoch (schmalste: uebersicht-teaser-sitzplan/-kommunikation mit
2160×1520; breiteste: zahlungen-frage mit 1100×560).
Ohne feste Höhe stünden die Karten unterschiedlich hoch und
das Raster wäre unruhig. `object-position:left top` behält die Kopfzeile
des Bildschirmfotos — dort steht, worum es geht. */
.vt-shot{ display:block; flex:none; min-height:0; aspect-ratio:16/10; background:var(--soft); border-bottom:1px solid var(--line); }
.vt-shot img{ display:block; width:100%; height:100%; object-fit:cover; object-position:left top; }
.vt-body{ flex:1; display:flex; flex-direction:column; padding:22px 24px 20px; }
.vt-body h2{ font-size:21px; line-height:1.25; margin:0 0 8px; }
.vt-body > p{ margin:0; font-size:15.5px; line-height:1.55; color:var(--muted); }
.vt-points{ list-style:none; display:flex; flex-direction:column; gap:9px; margin:16px 0 0; padding:0; }
.vt-points li{ position:relative; padding-left:25px; font-size:14.5px; line-height:1.5; color:var(--muted); }
.vt-points li::before{
content:""; position:absolute; left:0; top:3px; width:16px; height:16px;
background-repeat:no-repeat; background-position:center; background-size:contain;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b4a44' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
/* margin-top:auto schiebt die Zeile an den Kartenfuß — so stehen die
„Alle Details" aller sieben Karten auf einer Linie, auch bei ungleich
langen Stichpunkten. min-height hält die Antippfläche bei 44 px. */
.vt-more{
display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
margin-top:auto; padding-top:18px; min-height:44px;
font:600 15px var(--body); color:var(--teal);
}
.vt-more::after{
content:""; width:16px; height:16px; flex:none; background-repeat:no-repeat;
background-position:center; background-size:contain; transition:transform .15s ease;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b4a44' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.vt-card:hover .vt-more{ color:var(--pink); }
.vt-card:hover .vt-more::after{ transform:translateX(3px); }
/* ============ RESPONSIVE ============ */
@media(max-width:960px){
/* Einspaltig, Bild zuerst — es erklärt schneller als der erste Absatz.
Gilt für beide Varianten, deshalb auch das .flip zurücksetzen. */
.cl-block,
.cl-block.flip{ grid-template-columns:1fr; gap:30px; padding:46px 0; }
.cl-block .cl-media,
.cl-block.flip .cl-media{ order:1; }
.cl-block .cl-copy,
.cl-block.flip .cl-copy{ order:2; }
.cl-xlink{ grid-template-columns:1fr; }
/* Zwei Karten nebeneinander: bei drei bliebe vom Bildschirmfoto nur ein
briefmarkengroßer Ausschnitt übrig. */
.vt-grid{ grid-template-columns:repeat(2,1fr); gap:20px; }
/* Hier zählt „ungerade" statt „Rest 1" — und die Mitte des zweispaltigen
Rasters liegt zwischen den Spalten, deshalb über beide legen und mittig
setzen. Die Breite bleibt eine Spalte (halbe Breite minus halbe Lücke),
damit die letzte Karte genauso aussieht wie ihre Nachbarn. */
.vt-grid > .vt-card:last-child:nth-child(3n+1){ grid-column:auto; }
.vt-grid > .vt-card:last-child:nth-child(odd){
grid-column:1 / -1; justify-self:center; width:calc(50% - 10px);
}
}
@media(max-width:760px){
.cl-hero{ padding:36px 0 4px; }
.cl-flow{ padding:16px 14px; }
.cl-block{ padding:38px 0; }
.cl-block p{ font-size:16px; }
.vt-grid{ grid-template-columns:1fr; }
/* Einspaltig gibt es keine Waise mehr — Sonderbehandlung zurücknehmen. */
.vt-grid > .vt-card:last-child:nth-child(odd){ grid-column:auto; width:auto; }
}
@media(prefers-reduced-motion:reduce){
.cl-help::after,.cl-xlink a,.vt-card,.vt-more::after{ transition:none; }
}