. Robert
hat den engen Satz am 20.09. gemeldet, behoben wurde er nur dort, wo die Klasse stand;
auf der Kinderseite klebte die Ueberschrift seitdem weiter am Absatz. Dieselbe Sorte
Treffer wie bei der Spaltenregel darunter: wer am Klassennamen aufhaengt, verfehlt die
Seite, die den Fehler hat. Die Werte sind unveraendert, nur der Geltungsbereich. */
.charity-band .kicker{margin-bottom:15px}
.charity-band h2{font-size:clamp(26px,3.2vw,40px);line-height:1.16;margin:0 0 20px}
.charity-band p{margin:0 0 28px;max-width:46ch;line-height:1.74}
/* ⚠️ EIN BAND OHNE BILD IST EINSPALTIG (26.09.2026).
`repeat(2,…)` ist eine feste Zusage auf zwei Spalten — steht nur ein Kind darin, nimmt
es Spalte 1 und die zweite bleibt leer. Gemessen am 26.09.: auf /ein-herz-fuer-kinder
stand der Textblock mit 540 von 1180 px da, 640 px daneben waren nichts. Das war schon
live, seit dort das Bild fehlt — und waere mit dem Wegfall des Gassenbildes auch auf die
Startseite gekommen (Robert zu genau diesem Zustand am 20.09.: „sehr gequetscht").
Die Spaltenzahl wird deshalb am INHALT abgelesen, nicht an einer Zusatzklasse: eine
Klasse muss man an zwei Stellen mitpflegen und vergisst sie beim dritten Band.
`> *` statt `.charity-text`, weil das Band auf /ein-herz-fuer-kinder ein nacktes
traegt — eine Regel am Klassennamen haette genau die Seite verfehlt, die den Fehler
schon hatte.
Die Form ist NICHT neu erfunden: ein Textblock allein in einem Abschnitt sieht auf
dieser Seite aus wie .kopfblock (62ch, mittig, Text zentriert) — so steht es seit dem
ersten Entwurf im Abschnitt „Zwei Welten". Linksbuendig auf 64ch sah dagegen aus, als
fehle rechts etwas — was ja auch stimmte, nur soll man es der Seite nicht ansehen. */
.charity-band:not(:has(> figure, > picture, > img)){grid-template-columns:minmax(0,1fr)}
.charity-band:not(:has(> figure, > picture, > img)) > *{max-width:62ch;margin-inline:auto;text-align:center}
.charity-band:not(:has(> figure, > picture, > img)) p{max-width:56ch;margin-inline:auto}
/* Ein Hinweiskasten ist eine Randnotiz, kein Aushang: er behaelt seine linke Kante, sonst
steht sein Symbol allein vor zentriertem Text und der Kasten liest sich wie eine
zweite Ueberschrift (gesehen am 26.09. auf /ein-herz-fuer-kinder). */
.charity-band:not(:has(> figure, > picture, > img)) .lueckenhinweis{text-align:left}
@media (max-width:880px){.charity-band{grid-template-columns:minmax(0,1fr);gap:30px}}
/* Seit 17.09.2026 hell (Kundenrunde 5). Der Ton laeuft ueber .ton in den Grund aus. */
.band-charity{--ton:var(--creme2)}
/* ---- Kontakt ---- */
.kontakt-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:52px;align-items:start}
.kontakt-neben h2{font-size:24px;margin-bottom:16px}
.kontakt-bild{margin-top:26px}
@media (max-width:880px){.kontakt-grid{grid-template-columns:minmax(0,1fr);gap:34px}}
/* ---- Zeichnungen als ehrlicher Gegenpol ---- */
.zeichnung-paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:20px}
.zeichnung-paar figure{margin:0;padding:26px;text-align:center;
border:1px solid rgba(192,146,95,.3);border-radius:3px;background:var(--papier)}
.zeichnung-paar svg{width:64%;margin:0 auto;color:var(--gold)}
.zeichnung-paar figcaption{margin-top:12px;font:600 12px/1 var(--sans);
letter-spacing:.16em;text-transform:uppercase;color:var(--leise)}
@media (max-width:640px){.zeichnung-paar{grid-template-columns:minmax(0,1fr)}}
/* ---- Hinweiskasten ---- */
.lueckenhinweis{display:flex;gap:13px;align-items:flex-start;
background:rgba(143,50,28,.09);border-left:3px solid var(--rot);
padding:16px 20px;margin:24px 0 0;font-size:14.8px;border-radius:0 3px 3px 0}
.lueckenhinweis .ic{color:var(--rot);margin-top:2px}
/* ---- Entwurfsband + Kopf-Icons ---- */
.entwurfsband{display:flex;gap:10px;align-items:center;justify-content:center}
.entwurfsband .ic{color:var(--goldmetall)}
.tel{gap:9px}.tel span{white-space:nowrap}
.menue-liste a{gap:16px}
.menue-ic{color:var(--goldtext);flex:0 0 auto}
.menue-liste a span{flex:1 1 auto;min-width:0}
.menue-liste i{margin-left:auto}
.fuss-siegel{width:54px;margin-bottom:14px;opacity:.9}
.fuss-kontakt{list-style:none;margin:16px 0 0;padding:0;font-size:15px}
/* ⚠️ DAS SYMBOL GEHOERT AUF DIE ERSTE ZEILE — und die liegt nicht ueberall gleich
(19.09.2026, Roberts Befund „die Icons sind noch nicht auf derselben Höhe wie der
Text"). Gemessen: bei Telefon und E-Mail sass das Symbol **6,5 px zu hoch**, weil der
Link darin ein Tippziel mit 44 px Mindesthoehe ist und seinen Text mittig fuehrt,
waehrend `flex-start` das Symbol an den oberen Rand haengte. Bei der mehrzeiligen
Anschrift stimmte es, weil dort kein Tippziel im Weg steht.
Ein einheitliches `center` richtet zwar Telefon und E-Mail, schiebt aber die Anschrift
um 12,75 px in die Mitte ihres Blocks — gemessen, nicht vermutet. Deshalb zwei Regeln
statt einer Vermutung: Zeilen mit Tippziel bekommen dessen halbe Hoehe als Versatz,
alle anderen den kleinen Ausgleich der Schriftlinie. Ergebnis: ueberall 0,4 px. */
/* ⚠️ GRUNDLINIE STATT KANTE (19.09.2026, Roberts Befund „die Icons sind noch nicht auf
derselben Höhe wie der Text"). Gemessen war das Symbol bei Telefon und E-Mail 6,5 px
zu hoch. Ursache: `.fusszeile a` hat `padding:6px 0`, die danebenstehende Anschrift
als nicht — bei `align-items:flex-start` beginnt der Text der Links also 6 px
tiefer als der der Anschrift, das Symbol aber bei beiden oben.
Zwei feste Zahlen waeren keine Loesung: in der Randspalte von /presse traegt derselbe
Baustein andere Polster, dort braeuchte es 9,5 px statt 2,5. `align-items:baseline`
richtet am TEXT aus statt am Kasten und ist damit von jedem Polster unabhaengig —
gemessen in allen drei Faellen unter 1,2 px Abweichung, vorher 6,5. Der kleine
Versatz in em haelt das Symbol optisch mittig zur Zeile statt auf ihrer Grundlinie. */
.fuss-kontakt li{display:flex;gap:12px;align-items:baseline;padding:8px 0}
.fuss-kontakt .ic{color:var(--goldtext);flex:0 0 auto;transform:translateY(0.28em)}
.fuss-kontakt small{display:block;font-size:12.8px;opacity:.65}
/* Soziale Netzwerke (Robert, 22.09.2026) — waagerecht unter der Anschrift.
⚠️ MINDESTENS 44 px HOCH. `.fusszeile a` bringt nur `padding:6px 0` mit; ein Symbol
von 20 px ergaebe damit 32 px, und die Handy-Messung vom 20.09. verlangt 40 px
(WCAG 2.5.8). Gemessen wird die ausgelieferte Seite, nicht diese Regel.
⚠️ Symbol UND Wort stehen in DEMSELBEN Tippziel — am 20.09. war ein Symbol von
seinem Wort getrennt, und auf dem Telefon trifft man dann zweimal daneben.
Der Randfarbwert ist derselbe wie an `.fuss-unten`, keine zweite Quelle. */
.fuss-social{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.fuss-social li a{display:inline-flex;align-items:center;gap:9px;min-height:44px;
padding:6px 15px 6px 13px;border:1px solid rgba(138,95,42,.3);border-radius:999px;
font-size:14.4px;line-height:1.2;transition:border-color var(--kurz) var(--weich),color var(--kurz) var(--weich)}
.fuss-social li a:hover{border-color:var(--goldtext);color:var(--goldtext)}
.fuss-social .ic{color:var(--goldtext);flex:0 0 auto}
.fuss-liste li a{display:inline-flex;gap:10px;align-items:center}
.fuss-liste .ic{color:var(--goldtext);opacity:.85;flex:0 0 auto}
/* Ein Eintrag OHNE Icon haelt trotzdem die Flucht. In der Spalte "Rechtliches"
tragen Impressum, Datenschutz und Kontakt keins, der Eintrag darunter schon —
ohne diesen Platzhalter beginnt ihr Text 26 px weiter links als der des Nachbarn,
und die Spalte sieht aus wie verrutscht (Robert, 17.09.2026). */
.fuss-liste li a:not(:has(.ic))::before{content:"";flex:0 0 16px}
.fuss-hinweis{margin-top:12px;font-size:13.4px;opacity:.7;max-width:64ch}
/* Im Fliesstext ist Farbe allein kein Linkmerkmal (1,56:1 gemessen) — Unterstrich dauerhaft. */
.fuss-hinweis a{text-decoration:underline;text-underline-offset:2px}
/* ---- Einwilligung: schlanker, nicht bildschirmfuellend ---- */
.einwilligung-kopf{display:flex;gap:11px;align-items:center;margin-bottom:10px}
.einwilligung-kopf .ic{color:var(--gold)}
.einwilligung-kopf h2{margin:0;font-size:19px}
.einwilligung .klein{font-size:13.6px;color:var(--leise)}
.einwilligung[hidden]{display:none!important}
/* ---- Kartenfassade ---- */
.karte-fassade .ic{color:var(--goldtext)}
/* ---- Zierband aus Icons im Held — Roberts "mehr Flaticons" ---- */
.zierband{display:flex;gap:clamp(14px,2.4vw,26px);justify-content:center;align-items:center;
margin:26px 0 0;color:rgba(224,184,120,.55)}
.zierband span{display:inline-flex;animation:zierAtmen 5.5s ease-in-out infinite;
animation-delay:calc(var(--i,0) * 340ms)}
.zierband span:nth-child(even){color:rgba(224,184,120,.34)}
@keyframes zierAtmen{0%,100%{opacity:.5;transform:translateY(0) scale(1)}
50%{opacity:1;transform:translateY(-3px) scale(1.09)}}
@media (max-width:620px){.zierband span:nth-child(n+6){display:none}}
@media (prefers-reduced-motion:reduce){.zierband span{animation:none;opacity:.7}}
/* ---------- Aussteller und Presse (14.09.2026) ---------- */
/* Masse und Bereich stehen ueber dem Beschreibungstext, nicht darin: wer Staende
vergleicht, liest zuerst Groesse und Ort und erst dann den Fliesstext. */
.stand-masse{display:flex;align-items:center;gap:7px;margin:0 0 10px;
font:600 13.5px/1.4 var(--sans);letter-spacing:.04em;color:var(--goldtext)}
.stand-masse .ic{flex:0 0 auto}
@media (max-width:640px){.eckdaten > div{grid-template-columns:1fr;gap:4px;padding:13px 0}}
/* ---------- Handy: der Held war vollgepackt (14.09.2026) ----------
Robert: "wenn man auf der Startseite mit der Hero Session runterscrollt, dann ist es
noch sehr verpackt. Das muss auf jeden Fall fluessiger funktionieren."
Gemessen auf 390 x 844: der Held brauchte 1163 px — 1,38 Bildschirme — bevor der erste
eigentliche Abschnitt kam. Die Hoehe lag nicht dort, wo man sie vermutet:
Entwurfsband 78 px (vier Zeilen) · Kopf 77 px
Wortmarke 85 px · Claim 63 px
Fliesstext 109 px (vier Zeilen) · Knoepfe 122 px
Vertrauen 80 px (drei Zeilen) · FAKTENBAND 459 px
Das Faktenband allein war mehr als ein Drittel. Es stand unter 520 px einspaltig,
vier Karten mit 24 px Polsterung untereinander. Gekuerzt wird deshalb dort, wo es
wirklich kostet — nicht dort, wo es am schnellsten geht. */
@media (max-width:640px){
/* Das Hinweisband sagt dasselbe in einer Zeile statt in vieren. */
.nur-breit{display:none}
.entwurfsband{padding:7px 14px;font-size:12.5px}
/* Der Fliesstext bekommt die volle Breite statt 54 Zeichen — vier Zeilen werden drei. */
.held-unter{max-width:none;font-size:16px;line-height:1.6;margin-bottom:24px}
.held-claim{margin-bottom:12px}
/* Zwei Angaben nebeneinander statt vier untereinander, und ohne die dicke Polsterung. */
.held-fakten .fakten{grid-template-columns:repeat(2,minmax(0,1fr))}
.held-fakten .fakt{padding:15px 13px;gap:9px}
.held-fakten .fakt dd{font-size:15px}
.held-fakten .fakt small{font-size:12px;line-height:1.45}
.held-fakten .fakt:nth-child(-n+2){border-bottom:1px solid rgba(224,184,120,.16)}
/* Die Vertrauenszeile trennt sich sauber, statt in drei Zeilen zu zerfallen. */
.held .vertrauen{margin-top:16px;font-size:13px;line-height:1.7}
/* Etwas weniger Luft um den ganzen Block — aber der Inhalt bleibt ueber der Zone,
in der sich das Bild ins Papier aufloest (hier 180 px statt 250). */
.held-inhalt{padding-top:26px;padding-bottom:150px}
.held::after{background:
linear-gradient(180deg,rgba(254,243,230,0) calc(100% - 180px),rgba(254,243,230,.55) calc(100% - 80px),var(--creme) 100%),
linear-gradient(180deg,rgba(12,9,8,.70) 0%,rgba(12,9,8,.45) 40%,rgba(12,9,8,.5) 62%,rgba(12,9,8,0) calc(100% - 80px))}
.held-fakten{margin-top:-96px}
.zierband{margin:14px 0 4px}
}
/* Ganz schmale Geraete: eine Spalte, aber kompakt — zwei Spalten waeren hier gequetscht. */
/* Zwei Spalten erst ab 420 px: darunter lief „ÖFFNUNGSZEITEN" mit .18em Sperrung ueber
den Kartenrand (gemessen 18.09.2026 bei 380–520 px). */
@media (max-width:419px){
.held-fakten .fakten{grid-template-columns:minmax(0,1fr)}
.held-fakten .fakt{border-right:0;border-bottom:1px solid rgba(224,184,120,.16)}
}
@media (min-width:641px){.nur-schmal{display:none}}
/* ---------- Handy: was auf dem iPhone bremst, obwohl es im Labor nicht auffaellt ----------
Gemessen am 14.09.2026 auf 390 px mit 6-fach gedrosselter CPU: Median 16,7 ms je Bild,
kein einziges Bild ueber 32 ms — im Labor ruckelt nichts. Robert sieht es trotzdem auf
seinem Telefon, und das ist kein Widerspruch: Chrome auf dem Mac rendert anders als
Safari auf einem iPhone. Zwei Dinge bremsen dort regelmaessig, ohne dass eine Messung
am Rechner es zeigt, und beide kosten nichts, wenn man sie auf dem Handy zuruecknimmt:
1. backdrop-filter an einer klebenden Leiste. Safari muss den Bereich hinter der Leiste
bei JEDEM Bildaufbau neu weichzeichnen, auch beim Nachschwingen des Fingers.
Auf dem Handy steht die Leiste ohnehin fast deckend — der Weichzeichner ist dort
nicht zu sehen, nur zu spueren.
2. Drei fest positionierte, dauerhaft animierte Ebenen (der Schnee). Fest positioniert
heisst: sie liegen NICHT im scrollenden Bild und muessen waehrend des Scrollens
gesondert gezeichnet werden.
Deshalb: auf dem Handy kein Weichzeichner und zwei Schneeebenen statt drei. Es bleibt
Schnee, es bleibt eine dunkle Leiste — nur ohne den Teil, den man nicht sieht. */
@media (max-width:760px){
.kopf{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(254,243,230,.97)}
.schneeSeite .flocken:nth-child(2){display:none}
}
/* Auch auf schwachen Geraeten mit feiner Aufloesung (alte iPhones, viele Android-Mittelklassen). */
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
.held-bild{will-change:auto}
}
/* ---------- Datenschutz-Fenster (14.09.2026) ----------
Erreichbar von JEDER Seite ueber die Zustandszeile in der Fusszeile. Ein echtes