/* Styles nur für die Startseite. Die übrigen Seiten (Impressum, Datenschutz, Platzhalter) bleiben beim schmucklosen Fließtext aus legal.css. Dieses Blatt wird ausschließlich von home.html geladen und steht dort HINTER legal.css im . Warum beide Dateien und nicht nur diese: Der Footer soll auf allen Seiten Zeile für Zeile gleich aussehen. Er liegt schon zweimal im Projekt (legal.css und inline in markt.html); eine dritte Kopie hier wäre die Stelle, an der die drei Fassungen endgültig auseinanderlaufen. home.html holt sich den Footer also weiter aus legal.css, und hier steht nur, was die Startseite darüber hinaus braucht. Herkunft: Der Entwurf kam als Claude-Design-Artboard mit fester Breite 1180px und 64px Innenabstand. Übernommen sind Farben und Schriftgrößen; aus der festen Breite ist .bahn geworden, aus den festen Größen clamp(). */ :root { /* Alle Farben mit --home- vorangestellt, damit sie nicht mit den gleichnamigen Variablen aus legal.css kollidieren, an denen der Footer hängt. */ --home-bg: #F7F4EE; --home-ink: #14171C; --home-ink-soft: #3D434B; --home-rule: #DDD7CB; --home-outline: #C9C2B4; --home-accent: #2456E8; --home-accent-hover: #1A43BD; /* Der dunkle Block "So funktioniert es". Eigener Satz Farben, weil dort alles umgedreht ist: Text hell, Linien heller als der Grund, Akzent aufgehellt, damit er auf Schwarz noch lesbar bleibt. */ --home-dark: #14171C; --home-dark-text: #F7F4EE; --home-dark-muted: #B9BEC6; --home-dark-rule: #3A4048; --home-dark-accent: #6F8DFF; --home-cta-text: #DBE3FF; /* Der Entwurf setzte überall Arial. Das war die Ersatzschrift des Design-Werkzeugs, keine Festlegung: die übrige Seite (legal.css, markt.html) nimmt die Systemschrift, und die sieht auf jedem Gerät besser aus als ein erzwungenes Arial. Wer doch Arial will, ändert genau diese eine Zeile. */ --home-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* ── Die drei Abstände der Seite ────────────────────────────── Mehr gibt es nicht, und jeder wird überall gleich verwendet. Vorher hatte fast jeder Übergang seinen eigenen Wert (34, 36, 40, 56, 64, 72, 88px); untereinander auf dem Handy las sich das als Unruhe statt als Gliederung. block = von einem Abschnitt zu seiner Kante: der Innenabstand des dunklen Blocks, von "Was Ihr Markt davon hat" und der Kontaktkarte gross = zwischen den Teilen EINES Abschnitts (Überschrift zu Inhalt, Rasterspalten) und im Aufmacher durchgehend, oben wie unten wie zwischen allen sieben Teilen klein = innerhalb eines Bausteins (Innenabstand der grauen Bänder, die drei Zeilen eines Schritts, die zwei Schaltflächen im Abschluss, der Abstand unter der Linie eines Schritts) Waagerecht gilt das nicht überall: die Kontaktkarte behält seitlich ihren eigenen Wert, weil er auf die Breite der beiden Pillen abgestimmt ist. Mit --home-block liefe die Mailadresse auf 320px breiten Geräten über den Rand. Alle drei laufen mit der Fensterbreite mit: die Entwurfswerte gelten am Desktop, auf dem Handy stünde sonst mehr Luft als Inhalt auf dem Schirm. */ --home-block: clamp(48px, 8vw, 88px); --home-gap: clamp(20px, 3vw, 36px); --home-gap-klein: 14px; /* Die drei Absätze des Aufmachers liegen auf einem Band, das wie der dunkle Block weiter unten über die volle Fensterbreite läuft. Alle drei im selben Grau: die Bänder wechseln sich mit den Fotos ab, und ein zusätzlicher Tonwechsel von Band zu Band brächte eine zweite Ordnung in eine Reihe, die schon eine hat. Kontrast des Fließtextes (--home-ink-soft) darauf: 8,2. WCAG AA verlangt 4,5, da ist also reichlich Luft. */ --home-band: #E8E8E8; } body { background: var(--home-bg); color: var(--home-ink); } /* Weiches Scrollen für den Sprung vom Aufmacher zur Abschlusskarte: ein harter Sprung ueber die halbe Seite laesst offen, wo man gelandet ist. Nur, wenn im System keine reduzierte Bewegung eingestellt ist. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* legal.css spannt
auf 760px Lesebreite mit eigenem Innenabstand auf. Die Startseite ist randlos: Kopfzeile und dunkler Block gehen über die ganze Breite, begrenzt wird erst weiter innen von .bahn. */ main { max-width: none; padding: 0; } /* legal.css gibt jedem
20px Abstand nach unten, sinnvoll bei den Rechtstexten, hier störend: der dunkle Block bekäme darunter einen cremefarbenen Streifen, und der Abstand käme zu dem der Abschnitte noch obendrauf. Den Abstand macht auf dieser Seite jeder Abschnitt selbst über seinen Innenabstand, damit es genau eine Stelle dafür gibt. */ main section { margin-bottom: 0; } /* ── Bahn ──────────────────────────────────────────────────────── Die Spur, in der aller Inhalt steht: mittig, höchstens so breit wie das Artboard, mit dessen 64px Innenabstand. 1180 - 2*64 = 1052px nutzbare Breite, also genau die Maße des Entwurfs. Der Innenabstand schrumpft mit der Fensterbreite bis auf 20px, denselben Wert, den legal.css auf dem Handy verwendet und den auch markt.html im Kopf benutzt. */ .bahn { max-width: 1180px; margin: 0 auto; padding-left: clamp(20px, 5vw, 64px); padding-right: clamp(20px, 5vw, 64px); } /* ── Kopfzeile ───────────────────────────────────────────────── */ /* Die Trennlinie sitzt am
, nicht an der .bahn: sie soll über die volle Fensterbreite laufen, der Inhalt darüber aber in der Spur bleiben. */ .kopf { border-bottom: 1px solid var(--home-rule); } /* Maße wie im Kopf von markt.html: Logo 34px, Schriftzug 19px, 12px dazwischen. Der Innenabstand ist hier symmetrisch (10px statt der 11,5 oben und 8,5 unten drüben). Die Asymmetrie dort gleicht den unsichtbaren Vorlauf der ZWEI Textzeilen aus (Wortmarke plus Marktname); hier ist das höchste Element das Logo, und dessen transparenter Rand ist oben wie unten gleich. 10 + 34 + 10 ergibt 54px Kopfhöhe. */ .kopf .bahn { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; padding-bottom: 10px; } .marke { display: flex; align-items: center; gap: 12px; } /* Das Logo liegt im Querformat (3:2) vor. Deshalb steht hier nur die Höhe und die Breite ergibt sich daraus. Gleiche Datei, gleiche Höhe wie in markt.html. */ .marke-bild { height: 34px; width: auto; display: block; } /* Der Schriftzug ist ein Bild mit transparentem Rand. Bei 19px Höhe sind das links gut 3px (14 von 400 Pixeln Breite der Datei, herunterskaliert). Der negative Rand zieht sie wieder heraus, sonst stünde das "T" weiter vom Einkaufswagen entfernt als in markt.html. Gerechnet ist auf denselben sichtbaren Abstand wie dort: rund 13px von der Wagenkante zum "T". Achtung beim Austauschen der Grafik: der Wert hängt am transparenten Rand GENAU dieser Datei. Andere Datei, anderer Wert. */ .marke-schriftzug { height: 19px; width: auto; max-width: 100%; margin-left: -3.75px; object-fit: contain; object-position: left center; display: block; } /* ── Aufmacher ───────────────────────────────────────────────── */ /* Der Aufmacher läuft komplett auf --home-gap: oben unter der Trennlinie der Kopfzeile, zwischen allen sieben Teilen (Überschrift, drei Bänder, zwei Bilder, Knopf) und unten bis zur Kante des dunklen Blocks. Der Knopf ist der Grund. Vorher standen über ihm 36px und unter ihm 88px, der Abstand eines Abschnittswechsels. Er hing dadurch am Band über sich und darunter klaffte eine leere Fläche. Jetzt hat er auf beiden Seiten denselben Wert, und der Aufmacher steht zwischen seinen zwei harten Kanten symmetrisch. */ .hero { padding-top: var(--home-gap); padding-bottom: var(--home-gap); } /* Überschrift, drei Absätze, zwei Bilder und der Knopf liegen als gleichrangige Geschwister untereinander, jeweils --home-gap auseinander. Die Breitenbegrenzung sitzt deshalb an den einzelnen Teilen und nicht mehr hier: die Bilder sollen die ganze Spur nutzen, die Überschrift und der Fließtext dagegen früher umbrechen. */ .hero-inhalt { display: flex; flex-direction: column; gap: var(--home-gap); } /* Der Entwurf hatte 82px. Die Überschrift ist inzwischen deutlich länger und stünde damit vierzeilig über der halben Seite, deshalb 72px. Darunter läuft die Größe an der Fensterbreite mit, damit auf 320px breiten Geräten nicht mitten im Wort umgebrochen wird. */ /* 900px statt der vollen 1052px: die Überschrift soll umbrechen, bevor sie die ganze Spur ausfüllt. Stand früher an .hero-inhalt, gilt jetzt nur noch für die Überschrift selbst. */ .hero h1 { max-width: 900px; font-family: var(--home-display); font-weight: 400; font-size: clamp(34px, 6.2vw, 72px); line-height: 1.05; letter-spacing: -0.02em; text-wrap: pretty; margin: 0; } /* 52ch waeren die klassische Lesebreite, der Absatz lief damit aber zwoelf schmale Zeilen lang, waehrend rechts daneben die halbe Bahn leer blieb: der einzige Block der Seite, der seine Breite nicht nutzt. 68ch liegt noch im gut lesbaren Bereich und bringt ihn auf neun Zeilen, ungefaehr auf die Breite der Ueberschrift darueber. */ /* Die Schriftgröße steht HIER und nicht an den

, obwohl nur die Absätze sie brauchen. Grund: ch rechnet mit der Schriftgröße des Elements, an dem max-width steht. Läge sie nur an den Absätzen, rechnete 68ch mit den 16px des Kastens statt mit den 20px des Textes, und die Blöcke wären rund 150px zu schmal. Dieselbe Falle steckte im Entwurf der Abschlusskarte. */ /* Das Band läuft über die volle Fensterbreite, der Text bleibt trotzdem in seiner Spalte. Erreicht wird das ohne zusätzliche Hüllen im HTML: box-shadow mit 100vmax Ausbreitung und ohne Versatz malt den Ton rund um den Absatz herum bis weit über den Bildschirmrand hinaus. clip-path schneidet das oben und unten bündig an der Absatzkante ab und lässt es nur waagerecht stehen. Ein Schatten zählt nicht zum scrollbaren Bereich, deshalb entsteht dabei kein waagerechter Scrollbalken; die übliche Alternative mit 100vw und negativen Rändern tut das sehr wohl, sobald ein Scrollbalken Platz wegnimmt. Innenabstand nur senkrecht: waagerecht sitzt der Text schon in der Bahn und soll dort mit Überschrift, Bildern und Knopf auf einer Kante bleiben. Die Schriftgröße steht an derselben Regel wie max-width, weil ch mit der Schriftgröße genau dieses Elements rechnet. Läge sie woanders, wären die 68ch rund 150px zu schmal. */ .hero-text { max-width: 68ch; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--home-ink-soft); text-wrap: pretty; margin: 0; padding: var(--home-gap-klein) 0; background: var(--home-band); box-shadow: 0 0 0 100vmax var(--home-band); clip-path: inset(0 -100vmax); } /* Mittig, im Gegensatz zum linksbündigen Text darüber. Der Knopf ist der einzige Handlungsaufruf des Aufmachers und steht damit für sich, statt am linken Rand als Fortsetzung des letzten Absatzes gelesen zu werden. */ .knoepfe { display: flex; flex-wrap: wrap; gap: var(--home-gap-klein); align-items: center; justify-content: center; } /* Die Schaltfläche ist ein Link, kein