/* ============================================================
basis.css — Untergrenzen, die in JEDER Demo gelten
------------------------------------------------------------
Kein Design. Nur die Böden, unter die keine Seite fallen darf.
Abgeleitet aus 12 Demos und rund 60 Korrektur-Commits (19.08.2026):
genau die Sachen, die Pascal jedes Mal von Hand nachgezogen hat.
Einbinden VOR der projekteigenen styles.css:
Alles hier ist mit :where() geschrieben (Spezifität 0), damit das
Projekt-CSS jederzeit ohne !important gewinnt. Die Werte sind
Untergrenzen, nicht Gestaltung. Nach oben ist alles frei.
============================================================ */
/* ---- 1. Lesbarkeit: Kleintext-Untergrenzen -----------------
Korrektur-Muster aus hoeft-karosserie und reifenfit: dutzende
Werte von 11-13px auf 13,5-17,5px hochgezogen. */
:where(body) {
font-size: clamp(17.5px, 1.1rem, 1.6rem); /* Max in rem, sonst skaliert die Seite bei grosser Browserschrift nicht mit */
line-height: 1.6;
-webkit-text-size-adjust: 100%;
overflow-wrap: break-word;
}
/* Kleintext nie unter 15,5px (feedback_lesbarkeit_kleintext) */
:where(small, figcaption, .quelle, .hinweis, .fuss, .meta, .zeit, .legende) {
font-size: max(15.5px, 0.92em);
line-height: 1.55;
}
/* Mono nur für echte Kurzlabels, nie für Lesetext, nie unter 13px */
:where(.mono, .label, .eyebrow, kbd) {
font-size: max(13px, 0.8em);
letter-spacing: 0.11em; /* nie über .12em, sonst zerfällt das Wort */
}
/* Formularfelder: iOS zoomt unter 16px rein, Pascal korrigierte auf 17,5 */
:where(input, select, textarea, button) {
font: inherit;
font-size: max(17.5px, 1em);
}
:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
min-height: 54px;
padding: 14px 15px;
}
/* Zeilenlänge: bewusst NICHT global begrenzt. Ein pauschales max-width verschiebt
zentrierte Absätze aus der Mitte (ohne margin-inline:auto) oder rückt linksbündige
Textspalten ein (mit auto). Das ist eine Gestaltungsentscheidung pro Projekt,
kein Boden. Zu lange Zeilen fallen im Design-Check auf, nicht hier. */
/* ---- 2. Tap-Targets ---------------------------------------
Kam in praktisch jedem Projekt als eigene Fix-Runde nach.
Negative Margin hält die Optik, vergrößert nur die Fläche. */
:where(nav a, .nav a, header a) {
display: inline-flex;
align-items: center;
min-height: 46px;
}
:where(footer a, .foot a, .kontaktliste a) {
display: inline-flex;
align-items: center;
min-height: 46px;
padding: 10px 0;
margin: -10px 0;
}
/* Inline-Links im Fließtext: Fläche vergrößern ohne Layout-Sprung */
:where(main p a:not([class]), main li a:not([class])) {
display: inline-block;
padding: 13px 0;
margin: -13px 0;
}
:where(button, .btn, [role="button"], input[type="submit"]) {
min-height: 48px;
}
/* ---- 3. Kontrast-Böden -----------------------------------
Grau war durchgehend zu blass. Untergrenzen aus den Korrekturen:
auf hell nie heller als #4C5157, auf dunkel nie dunkler als #BFC4CA. */
:where(:root) {
--boden-grau-hell: #4C5157; /* dunkelster zulässiger Grauton auf hellem Grund */
--boden-grau-dunkel: #BFC4CA; /* hellster nötiger Grauton auf dunklem Grund */
}
/* Text auf Bild/Video braucht Schatten statt noch mehr Flächenabdunklung.
Overlay-Basis nie unter .70, sonst reißt der Kontrast (Schroedinger, FeWo). */
:where(.hero h1, .banner h1, .hero__t, [data-ueber-bild]) {
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55), 0 0 30px rgba(0, 0, 0, 0.4);
}
/* ---- 4. Layout-Stabilität --------------------------------
Flex-Wrap zerfranst, Grid mit minmax(0,1fr) nicht. min-width:0
verhindert den Überlauf langer Wörter in Grid-Kindern (Kroll). */
:where(.grid, [class*="grid"], [class*="-liste"], [class*="karten"]) > * {
min-width: 0;
}
/* Karten in einer Reihe immer gleich hoch (WebMK, Schroedinger, SV Vogt) */
:where(.grid, [class*="grid"], [class*="karten"], [class*="stimmen"]) {
align-items: stretch;
}
:where(.karte, .card, .stimme, .rv) {
display: flex;
flex-direction: column;
}
:where(.karte, .card, .stimme, .rv) > :where(p, .text) {
flex: 1;
}
/* ---- 5. Typografie-Feinschliff ----------------------------
text-wrap kam bei Schafpudel und Kroll nachträglich rein. */
:where(h1, h2, h3, h4) {
text-wrap: balance;
line-height: 1.14; /* Hero-h1 nie unter 1.12, sonst kleben die Zeilen */
}
:where(p, li) {
text-wrap: pretty;
}
/* H1 mobil nie unter 2rem, Versal-Tracking mobil halbieren (Schroedinger) */
:where(h1) {
font-size: clamp(2rem, 5.6vw, 3.9rem);
}
/* Versal-Headlines laufen mobil zu weit. Nur greifen, wenn das Projekt ueberhaupt
spreizt (Custom Property), sonst bleibt der Projektwert unangetastet. */
@media (max-width: 520px) {
:where(h1, h2)[style*="uppercase"],
:where(.versal, [data-versal]) {
letter-spacing: 0.07em;
}
}
/* Kursiv als Betonung wirkt billig, Gewicht statt Schräglage (FeWo, Schafpudel) */
:where(h1 em, h2 em, h3 em) {
font-style: normal;
font-weight: 500;
}
/* ---- 6. Bilder --------------------------------------------
Layout-Shift und Verzerrung, dazu der Retina-Boden. */
:where(img, video, svg) {
max-width: 100%;
height: auto;
}
:where(img) {
display: block;
}
/* Slider-/Galerie-Spuren brauchen ein festes Verhältnis, sonst hüpft die
Seite beim Wechsel (Schroedinger) */
:where(.slider-spur, .slid__spur, [class*="spur"]) > img {
height: 100%;
object-fit: cover;
}
/* Logos: feste Höhe + contain, nie max-height mit Flex-Wrap.
MUSS nach der allgemeinen img-Regel stehen, sonst gewinnt height:auto
(beide haben Spezifität 0, die spätere Regel setzt sich durch). */
:where(.marken img, .logos img, [class*="marken"] img) {
height: 56px;
width: auto;
object-fit: contain;
}
/* ---- 7. Bekannte technische Fallen ------------------------ */
/* clip statt hidden: hidden kann position:sticky killen (hoeft) */
:where(html, body) {
overflow-x: clip;
}
/* Ankersprung darf nicht unter der Sticky-Kopfleiste landen */
:where(section[id], [id][data-anker]) {
scroll-margin-top: 84px;
}
/* backdrop-filter auf dem Header macht ihn zum Containing Block und lässt
ein fixed-Menü auf Headerhöhe kollabieren (SoziLupus). Bei offenem
Menue deshalb abschalten. */
:where(body.menue-offen) :where(header, .kopf) {
backdrop-filter: none;
}
/* Hero-Video nie mit opacity dimmen, sonst scheint das Poster durch
(Schroedinger). Abdunkeln gehört auf den Overlay-Layer. */
:where(.hero video, .hero__video) {
opacity: 1;
}
/* ---- 8. Mobile Sticky-CTA ---------------------------------
Vier Projekte bauten unabhängig voneinander exakt dieselbe Lösung:
schwebende Pille, hell mit Blur, zwei gleich breite Buttons
(feedback_sticky_cta_stil). Hier einmal richtig. */
:where(.sticky-cta) {
position: fixed;
left: 14px;
right: 14px;
bottom: calc(14px + env(safe-area-inset-bottom, 0px));
z-index: 60;
display: flex;
gap: 10px;
align-items: stretch;
padding: 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(16px) saturate(1.5);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
transition: transform 0.35s ease;
}
/* Startzustand NUR, wenn das Projekt die Leiste bewusst per Klasse steuert.
Ohne diese Klasse bleibt die Leiste sichtbar — sonst verliert jede
Bestandsdemo mit eigenem Scroll-Listener ihren mobilen CTA. */
:where(body.sticky-an) :where(.sticky-cta:not(.ist-sichtbar)) {
transform: translateY(150%);
}
:where(.sticky-cta > a) {
flex: 1 1 0; /* beide gleich breit, kein 48px-Kreis + Rest */
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 16px;
}
@media (min-width: 1020px) {
:where(.sticky-cta) { display: none; }
}
/* Platz für die Leiste, damit sie nichts verdeckt */
@media (max-width: 1019px) {
:where(body.sticky-an) :where(footer, .foot) { padding-bottom: 100px; }
}
/* ---- 9. Zugänglichkeit -----------------------------------
Sichtbarer Fokus und reduzierte Bewegung sind Pflicht, nicht Kür. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}