/* ===================================================================== Nacharbeit der Beispielseiten --------------------------------------------------------------------- Gemessen am 27.08.2026 bei 375 Punkten Breite. Drei Befunde zogen sich durch alle sechs Demos: 1. Zielflaechen unter 44 Punkten - Fusszeilenlinks bei 11 bis 25 Punkten Hoehe, Wortmarken, Menueknoepfe, Navigationslinks. 2. Schrift zwischen 7 und 11,2 Punkten - Fusszeilen, Nummern, Kennzeichnungen, Personenrollen, Formularbeschriftungen. 3. Ueberschriften mit Zeilenabstaenden bis hinunter zu 0,74 - auf kleinen Schirmen kleben die Zeilen ineinander. Die Entwuerfe setzen ihre Werte mit genaueren Selektoren, als eine allgemeine Nacharbeit erreichen kann. Deshalb steht vor jeder Regel ein "html" und dahinter !important: die Datei ist eine Korrekturschicht, keine Gestaltung. Abschnitte 1 bis 11 greifen unter 860 Punkten, Abschnitt 12 daruber. ===================================================================== */ @media (max-width: 860px) { /* =================================================================== 1. ZIELFLAECHEN Mindesthoehe statt Innenabstand: mehrere Demos setzen eine feste Hoehe bei border-box, dort verpufft jedes Padding. =================================================================== */ html header a, html header button, html footer a, html footer button, html nav a, html nav button, html .mainNav a, html .nav-links a, html .servicesGrid article a, html .manifestoBody a, html .manifesto-side a, html .contactDetails a, html .contact-details a, html .hero-caption a, html .hero-footer a, html .footer-legal a, html .footer-legal button, html .footerBottom a, html .foot-base a, html .foot-col a, html .footerMain a, html .footer-bottom a, html .backTop, html .text-link, html .textLink { min-height: 44px !important; height: auto !important; padding-block: max(0px, calc((44px - 1.3em) / 2)) !important; } /* Wortmarken und Knoepfe tragen Bild oder Zeichen */ html header .brand, html header .brandLink, html header .wordmark, html footer .brand, html footer .wordmark, html .menu-toggle, html .panel-close, html .close { justify-content: center; align-items: center; min-width: 44px !important; min-height: 44px !important; } html header .brand:not([hidden]), html header .brandLink, html header .wordmark, html footer .brand, html footer .wordmark { display: inline-flex; } /* Knopfgruppen in Formularen */ html .seg > button, html .choice-row > button, html .district-selector > button, html .propertyTabs button { min-height: 44px !important; height: auto !important; } /* =================================================================== 2. KLEINSCHRIFT Unter etwa 11,5 Punkten wird Mono in Versalien auf dem Handy unleserlich. Die Werte bleiben klein - nur nicht mehr winzig. =================================================================== */ /* --- LUMEN --- */ html[data-demo="lumen"] .footerMain div a, html[data-demo="lumen"] .footerBottom span, html[data-demo="lumen"] .heroKicker span, html[data-demo="lumen"] .heroFoot span, html[data-demo="lumen"] .facts span, html[data-demo="lumen"] .facts strong, html[data-demo="lumen"] .munichQualities span, html[data-demo="lumen"] .munichNotes article span, html[data-demo="lumen"] .propertiesList ol li span, html[data-demo="lumen"] .servicesGrid article a, html[data-demo="lumen"] .contactForm label span, html[data-demo="lumen"] .formRow label span, html[data-demo="lumen"] .logoType small, html[data-demo="lumen"] .propertyTabs button small, html[data-demo="lumen"] .propertyTabs button span, html[data-demo="lumen"] .sectionNumber, html[data-demo="lumen"] .imageBadge, html[data-demo="lumen"] .propertyInfo p, html[data-demo="lumen"] .textLink span, html[data-demo="lumen"] .imageStory figcaption { font-size: 11.5px !important; } /* --- ECKWERK --- */ html[data-demo="eckwerk"] .footer-bottom a, html[data-demo="eckwerk"] .footer-bottom span, html[data-demo="eckwerk"] .site-header nav a, html[data-demo="eckwerk"] .site-header .wordmark small, html[data-demo="eckwerk"] .hero-footer span, html[data-demo="eckwerk"] .meta span, html[data-demo="eckwerk"] .section-label span, html[data-demo="eckwerk"] .situation-number, html[data-demo="eckwerk"] .notes-list article span, html[data-demo="eckwerk"] .profile-figure figcaption, html[data-demo="eckwerk"] .statement-note span, html[data-demo="eckwerk"] .site-header button span, html[data-demo="eckwerk"] figcaption { font-size: 11.5px !important; } /* --- BRICK & TIDE --- */ html[data-demo="brick-tide"] .property-specs dt, html[data-demo="brick-tide"] dl div dt { font-size: 11px !important; } html[data-demo="brick-tide"] .property-specs dd, html[data-demo="brick-tide"] dl div dd { font-size: 11.5px !important; } html[data-demo="brick-tide"] .credits-list li, html[data-demo="brick-tide"] .district-selector button span, html[data-demo="brick-tide"] .choice-row button, html[data-demo="brick-tide"] form label span, html[data-demo="brick-tide"] .hero-meta span, html[data-demo="brick-tide"] .property-titleline span, html[data-demo="brick-tide"] .menu-panel nav a span, html[data-demo="brick-tide"] .menu-panel nav a b, html[data-demo="brick-tide"] .property-demo { font-size: 11.5px !important; } /* --- FORTAN --- */ html[data-demo="fortan"] .eyebrow, html[data-demo="fortan"] .eyebrow .num, html[data-demo="fortan"] .voice .who, html[data-demo="fortan"] .foot-col h5, html[data-demo="fortan"] .foot-base span, html[data-demo="fortan"] .foot-base a, html[data-demo="fortan"] .hud-tag, html[data-demo="fortan"] .hud .nav-cta, html[data-demo="fortan"] .daten-src, html[data-demo="fortan"] .ho-hint, html[data-demo="fortan"] .cta-assur, html[data-demo="fortan"] .split .yes h3, html[data-demo="fortan"] .split .no h3 { font-size: 11.6px !important; } /* --- KONFETTI --- */ html[data-demo="konfetti"] .hdr .brand .sub, html[data-demo="konfetti"] .who span .rl, html[data-demo="konfetti"] .playcard h4, html[data-demo="konfetti"] .foot-grid h5, html[data-demo="konfetti"] .rtag, html[data-demo="konfetti"] .disclaimer, html[data-demo="konfetti"] .foot-legal { font-size: 11.6px !important; } /* --- ATELIER LICHTRAUM --- */ html[data-demo="atelier-lichtraum"] .kicker, html[data-demo="atelier-lichtraum"] .kicker .n, html[data-demo="atelier-lichtraum"] .hero-hint span, html[data-demo="atelier-lichtraum"] .person-role, html[data-demo="atelier-lichtraum"] .hud .brand small { font-size: 11.6px !important; } /* =================================================================== 3. ZEILENABSTAND Je groesser die Schrift, desto enger darf der Satz stehen - aber nicht so eng, dass Oberlaengen an Unterlaengen stossen. =================================================================== */ html h1 { line-height: 1.0 !important; } html h2 { line-height: 1.08 !important; } html h3, html h4 { line-height: 1.15 !important; } /* Die ganz grossen Zeilen im Kopfbereich vertragen weniger */ html .hero h1, html .hero-h1, html .hero-content h1, html .hero-main h1, html .heroContent h1, html .hero-text h1 { line-height: 0.96 !important; } /* Grosse Absaetze, die als Aussage gesetzt sind */ html .panorama p, html .footerMain p, html .manifesto-side p { line-height: 1.14 !important; } /* =================================================================== 4. LUFT =================================================================== */ html h1 + p, html h2 + p, html h3 + p { margin-top: 0.75em; } /* =================================================================== 5. NACHLESE Was beim ersten Durchgang noch unter 11 Punkten stand. Der Wert bleibt bewusst bei 11 - die Mikrotypografie der Entwuerfe soll erhalten bleiben, nur nicht mehr unlesbar sein. =================================================================== */ /* --- LUMEN --- */ html[data-demo="lumen"] .propertiesList ol li span, html[data-demo="lumen"] .panorama span, html[data-demo="lumen"] .submitButton span, html[data-demo="lumen"] .backTop, html[data-demo="lumen"] .floatingCta span { font-size: 11px !important; } /* --- ECKWERK --- */ html[data-demo="eckwerk"] .case-copy small, html[data-demo="eckwerk"] .contact button span, html[data-demo="eckwerk"] .wordmark--footer small, html[data-demo="eckwerk"] .contact-details span { font-size: 11px !important; } /* --- BRICK & TIDE --- */ html[data-demo="brick-tide"] .section-kicker span, html[data-demo="brick-tide"] .hero-index span, html[data-demo="brick-tide"] .demo-pill, html[data-demo="brick-tide"] .orbit-link span, html[data-demo="brick-tide"] .vertical-caption, html[data-demo="brick-tide"] .editorial-right span, html[data-demo="brick-tide"] .district-panel span, html[data-demo="brick-tide"] .district-panel p, html[data-demo="brick-tide"] .district-panel li, html[data-demo="brick-tide"] .seller-visual-copy span, html[data-demo="brick-tide"] .seller-visual-copy p, html[data-demo="brick-tide"] .seller-steps li span, html[data-demo="brick-tide"] .footer-address span, html[data-demo="brick-tide"] .footer-contact span, html[data-demo="brick-tide"] .footer-legal a, html[data-demo="brick-tide"] .footer-legal span, html[data-demo="brick-tide"] .footer-legal button, html[data-demo="brick-tide"] .menu-panel-inner p, html[data-demo="brick-tide"] .menu-panel-inner small, html[data-demo="brick-tide"] .side-panel-number, html[data-demo="brick-tide"] .dialog-copy, html[data-demo="brick-tide"] .primary-button span, html[data-demo="brick-tide"] fieldset legend span, html[data-demo="brick-tide"] .postal-field b, html[data-demo="brick-tide"] .property-titleline p, html[data-demo="brick-tide"] .collection-head p, html[data-demo="brick-tide"] .property-specs dt { font-size: 11px !important; } /* Letzte Nachzuegler */ html .approachContent ol li span, html .seller-steps li div p { font-size: 11px !important; } html .closing-image p { line-height: 1.14 !important; } /* Die Rechtsseiten der Demos teilen eine gemeinsame Vorlage: der Zurueckverweis war 17 bis 20 Punkte hoch. */ html a.back { min-height: 44px !important; height: auto !important; padding-block: max(0px, calc((44px - 1.3em) / 2)) !important; font-size: 11.5px !important; } html p.brand { font-size: 11.5px !important; } /* Grosse Aussagesaetze mit zu engem Satz */ html .seller-copy p, html .compass-intro p { line-height: 1.14 !important; } } /* Sehr schmale Geraete: lange Wortmarken duerfen trennen */ @media (max-width: 400px) { html h1 { hyphens: auto; overflow-wrap: anywhere; } } /* ===================================================================== 6. GEMESSENE EINZELFEHLER Gefunden am 27.08.2026 bei 375 Punkten. ===================================================================== */ @media (max-width: 860px) { /* --- LUMEN, Sektion 02 --------------------------------------------- Die drei Bilder sind im Entwurf fuer grosse Schirme verschieden gross - ein Versatz im Raster. Einspaltig untereinander wirkt das dritte schlicht wie ein Fehler. Mobil stehen alle drei gleich. */ html[data-demo="lumen"] .imageStory figure, html[data-demo="lumen"] .storyTall, html[data-demo="lumen"] .storyWide, html[data-demo="lumen"] .storySmall { width: 100% !important; max-width: none !important; /* Nachtrag 28.08.: das Format stand nur am Bild, die figure behielt ihre 520 Punkte aus dem Entwurf. Unter jedem der drei Bilder standen dadurch 286 Punkte leere Flaeche - zusammen mehr als ein ganzer Bildschirm. Die Huelle folgt jetzt dem Bild. */ height: auto !important; min-height: 0 !important; margin-top: 0 !important; } html .storySmall img, html .storyTall img, html .storyWide img { width: 100% !important; aspect-ratio: 4 / 3 !important; height: auto !important; object-fit: cover; } /* --- BRICK & TIDE, Sektion 02 --------------------------------------- Die Karten waren 308 Punkte breit im 375-Punkte-Fenster: das naechste Objekt ragte immer angeschnitten herein. Jetzt fuellt ein Objekt die Ansicht, der Rand bleibt als Griff stehen. */ html[data-demo="brick-tide"] .property-list { scroll-padding-inline: 24px; scrollbar-width: none; padding-bottom: 8px; } html .property-list::-webkit-scrollbar { display: none; } /* 100% meint hier die Inhaltsbreite der Bahn, nicht die des Fensters - deshalb 100vw als Bezug. */ /* Nur solange die Bahn wirklich eine Bahn ist: der Entwurf schaltet erst unter 720 Punkten auf waagerechtes Blaettern um. Darueber ist die Liste ein zweispaltiges Raster - dort hat diese Mindestbreite jede Spalte auf Fensterbreite aufgeblasen und die Liste bei 860 Punkten um 801 herauslaufen lassen. */ @media (max-width: 720px) { html .property-list > .property-card, html .property-list > * { flex: 0 0 calc(100vw - 48px) !important; width: calc(100vw - 48px) !important; min-width: calc(100vw - 48px) !important; max-width: none !important; scroll-snap-align: center; } } /* --- BRICK & TIDE, Sektion 03 --------------------------------------- Die Stadtteilwahl stand rechts eingerueckt und in Weiss mit 55 Prozent Deckkraft ueber einem Bild - schwer zu lesen und ohne Bezug zum Satzspiegel. Jetzt links buendig und deckend. */ /* Nicht die Knoepfe waren versetzt, sondern ihr Behaelter: er sass 251 Punkte breit rechts im Flexraster. */ html .district-content { flex-direction: column !important; align-items: stretch !important; } html .district-selector { width: 100% !important; max-width: none !important; padding-inline: 24px !important; margin-inline: 0 !important; } html .district-selector > button, html .district-selector button { justify-content: flex-start !important; gap: 14px; width: 100% !important; max-width: none !important; margin-inline: 0 !important; text-align: left; } html .district-selector button span, html .district-selector button b { color: #fffdf8 !important; } html .district-selector button:not(.is-active) span, html .district-selector button:not(.is-active) b { color: #fffdf8c4 !important; } html .district-panel { padding-inline: 24px !important; } /* --- BRICK & TIDE, Sektion 05 --------------------------------------- Der Wertkompass stapelte Knopfpaare und Felder auf 1172 Punkte Hoehe. Mehr Luft zwischen den Fragen, klarere Trennung. */ html[data-demo="brick-tide"] .compass-form fieldset { padding-block: 20px !important; border-top: 1px solid #11181614; } html .compass-form fieldset:first-of-type { border-top: 0; } html .compass-form legend { margin-bottom: 12px; } html .choice-row { gap: 10px !important; } html .choice-row > button { min-height: 48px !important; } } /* ===================================================================== 7. MASSYSTEM --------------------------------------------------------------------- Gemessen bei 375 Punkten: LUMEN kam auf 17 verschiedene Schriftgroessen, KONFETTI auf 25 - und drei verschiedene Randmasse auf einer Seite. Nicht die einzelne Groesse war falsch, sondern dass es keine gab, die sich wiederholt. Das ergibt den schwammigen Eindruck. Hier steht eine Staffel im Verhaeltnis 1,3 und ein Randmass. Die Entwuerfe fuer grosse Schirme bleiben unberuehrt. ===================================================================== */ @media (max-width: 860px) { /* --- Schriftstaffel --- Eine feste Groesse hatte zwei Fehler: von 600 bis 860 Punkten stand die Ueberschrift unveraendert bei 42 Punkten - auf einem Tablet also in Handygroesse - und bei 861 sprang sie auf bis zu 90. Gemessen: Faktor 2,14 bei BRICK & TIDE, 2,00 bei ECKWERK, ueber einen einzigen Punkt Breite. Jetzt waechst die Staffel mit dem Schirm und trifft bei 860 genau den Wert, den der Entwurf selbst setzt. --zx-h1 und --zx-h2 stehen im :root jeder Demo und tragen deren eigene Steigung. */ html h1 { font-size: clamp(2.4rem, calc(var(--zx-h1, 8.6vw) * .95), 5.6rem) !important; line-height: 1.02 !important; } html h2 { font-size: clamp(1.9rem, var(--zx-h2, 6vw), 4.2rem) !important; line-height: 1.1 !important; } html h3 { font-size: clamp(1.28rem, 2.6vw, 2.3rem) !important; line-height: 1.22 !important; } html h4, html h5 { font-size: 1.06rem !important; line-height: 1.3 !important; } html p, html li, html dd { font-size: 1rem !important; line-height: 1.62 !important; } html blockquote { font-size: 1.22rem !important; line-height: 1.36 !important; } html h1 span, html h2 span, html h3 span { font-size: inherit !important; } /* Der Kopf traegt die volle Steigung */ html .hero h1, html .hero-h1, html .hero-content h1, html .hero-main h1, html .heroContent h1, html .hero-text h1 { font-size: clamp(2.5rem, var(--zx-h1, 8.6vw), 5.9rem) !important; } /* --- ein Randmass --- FORTAN ist ausgenommen. Dort haelt .wrap den Text mit padding-left:var(--gutter) rechts der fixierten Achse; 24 Punkte setzen ihn 4 Punkte LINKS der Linie ab, und die Linie liegt dann mitten in der Schrift. Die Demo regelt ihren linken Rand selbst, bis 560 Punkte auf 40 - das ist richtig und bleibt. */ html .section-pad > .container, html .section-shell, html .sectionPad, html .container, html:not([data-demo="fortan"]) .wrap { padding-inline: 24px !important; } /* Was volle Breite tragen soll, behaelt sie */ html .hero, html .closing-image, html .panorama, html figure, html img, html .property-list { padding-inline: 0 !important; } /* Mehrspaltige Raster passen bei 375 Punkten nicht mehr, sobald ein Randmass gilt: der Fuss von BRICK stand auf zwei Spalten von zusammen 403 Punkten und lief 97 ueber. Mobil einspaltig. */ html footer.site-footer, html .site-footer.section-shell, html header.site-header { grid-template-columns: 1fr !important; } html .site-footer > * { min-width: 0; } /* --- Rhythmus --- */ /* 72 Punkte oben und unten ergaben mit den Abstaenden der Elemente Uebergaenge von 154 bis 219 Punkten - auf einem 812 Punkte hohen Schirm ein Viertel Bildschirm ohne Inhalt. Gemessen: 29 Prozent der LUMEN-Seite bestanden aus Luecken ueber 70 Punkten. 56 Punkte lassen den Abschnitten Luft und der Seite Tempo. */ html section { padding-block: 56px !important; } /* Der Kopf und die eingeblendeten Tafeln tragen ihren eigenen Rhythmus */ html .hero, html section.hero, html .side-panel section, html .contact-sheet, html .menu-panel section { padding-block: 0 !important; } /* In den Tafeln stand Schrift bis hinunter zu 7 Punkten. Nur die benannten Stellen anheben - ein pauschales inherit hat hier Elemente aufgeblaeht und die Seite um 97 Punkte ueberlaufen lassen. */ html .side-panel-inner p, html .side-panel-inner li, html .menu-panel-inner p, html .contact-sheet p { font-size: 1rem !important; } html .side-panel-number, html .credits-list li, html .menu-panel-inner small, html .footer-contact span, html .footer-address span { font-size: .72rem !important; } } @media (max-width: 380px) { html h1 { font-size: 2.2rem !important; } html h2 { font-size: 1.75rem !important; } html .hero h1, html .hero-h1, html .hero-content h1, html .hero-main h1, html .heroContent h1, html .hero-text h1 { font-size: 2.3rem !important; } } @media (max-width: 860px) { /* Elemente ohne eigene Klasse haben keine eigene Rolle - sie erben. Das nimmt die Zwischengroessen heraus, die aus em-Werten entstehen. */ html span:not([class]), html b:not([class]), html em:not([class]) { font-size: inherit !important; } } /* ===================================================================== 8. UNTERGRENZE --------------------------------------------------------------------- Steht bewusst am Ende. Viele Mikroelemente tragen relative Groessen - sobald die Staffel ihre Elternelemente aendert, rutschen sie wieder unter elf Punkte. Diese Regeln fangen das ab. ===================================================================== */ @media (max-width: 860px) { html .hero-meta span, html .hero-index span, html .section-kicker span, html .orbit-link span, html .orbit-link b, html .seller-visual-copy span, html .primary-button span, html .contact-orbit b, html .demo-pill, html .vertical-caption, html .editorial-right span, html .property-demo, html .property-titleline span, html .heroKicker span, html .heroFoot span, html .facts span, html .facts strong, html .footerBottom span, html .floatingCta span, html .imageBadge, html .sectionNumber, html .logoType small, html .munichQualities span, html .munichNotes article span, html .propertyTabs button small, html .propertyTabs button span, html .meta span, html .section-label span, html .situation-number, html .statement-note span, html .hero-footer span, html .wordmark small, html .case-copy small, html figcaption, html .kicker, html .kicker .n, html .hero-hint span, html .person-role, html .hud .brand small, html .hdr .brand .sub, html .rtag, html .eyebrow, html .eyebrow .num, html .foot-col h5, html .foot-base span, html .foot-base a, html .hud-tag, html .voice .who, html .who span .rl, html .playcard h4, html .foot-grid h5, html .credits-list li, html .dialog-copy, html .side-panel-number, html .menu-panel-inner small, html .footer-contact span, html .footer-address span, html .footer-legal a, html .footer-legal span, html .footer-legal button, html .footer-bottom a, html .footer-bottom span, html .footerMain div a, html .backTop { font-size: 11.2px !important; } html .contact-sheet span, html .contact-details span, html .contact-sheet .section-label span { font-size: 11.2px !important; } /* Definitionslisten bleiben etwas kleiner, sie stehen paarweise */ html .property-specs dt, html dl div dt { font-size: 11px !important; } } /* KONFETTI arbeitet mit em-Werten, die bei 375 Punkten sieben Zwischenstufen im Fliesstextbereich ergeben. Auf eine Stufe. */ @media (max-width: 860px) { html[data-demo="konfetti"] .lab, html[data-demo="konfetti"] .ml, html[data-demo="konfetti"] .em, html[data-demo="konfetti"] .btn, html[data-demo="konfetti"] button.btn, html[data-demo="konfetti"] a.btn, html[data-demo="konfetti"] .dot { font-size: 1rem !important; } } /* ===================================================================== 9. NACHLESE VOM 27.08. — ZWEITE MESSREIHE --------------------------------------------------------------------- Die erste Reihe lief bei 375, 768 und 1440 Punkten. Genau dazwischen, im Band von 481 bis 760, sass der Fehler, den niemand sehen konnte: dort schalten mehrere Entwuerfe auf kleinere Masse um, ohne dass die Inhalte mitschrumpfen. Diese Reihe misst 375, 600 und 900. ===================================================================== */ @media (max-width: 860px) { /* --- Zielflaechen: Formularfelder waren bisher nicht erfasst ------- */ html select, html input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), html textarea { min-height: 44px !important; } /* Ankreuzfelder bleiben klein - die Beschriftung daneben traegt die Flaeche, also bekommt sie eine. */ html label:has(input[type="checkbox"]), html label:has(input[type="radio"]), html .privacy, html .check-field, html .lab { min-height: 44px !important; display: flex !important; align-items: center; gap: 10px; } html input[type="checkbox"], html input[type="radio"] { flex: 0 0 auto; width: 20px !important; height: 20px !important; /* Der anklickbare Rand reicht ueber das Kaestchen hinaus */ outline-offset: 2px; margin: 12px !important; margin-inline-start: -12px !important; } /* --- Weite Sperrung bei angehobener Kleinschrift ------------------ Punkt 2 hebt Mikroschrift auf 11,2 Punkte. Wo zusaetzlich mit 0,3em und mehr gesperrt wird, waechst die Zeile dabei ueber ihren Kasten hinaus - gemessen bei Atelier Lichtraum: 239 statt 216 Punkte. Die Sperrung faellt mit, nicht die Groesse. */ html .brand small, html .wordmark small, html .logoType small, html .hud .brand small, html .hdr .brand .sub, html .brandLink small { letter-spacing: .18em !important; } } /* ===================================================================== 10. DACHZEILEN SIND KEIN FLIESSTEXT --------------------------------------------------------------------- Gemessen ueber die Grenze bei 860/861 Punkten: die Regel "html p { 1rem }" hat Beschriftungen mit angehoben, die als

ausgezeichnet sind - p.section-label achtmal von 9 auf 16 Punkte in ECKWERK, p.section-kicker viermal von 10 auf 16 in BRICK & TIDE. Eine Dachzeile in Fliesstextgroesse nimmt der Seite die Hierarchie: alles wirkt gleich wichtig, und genau das liest sich beliebig. Sie bleiben klein - nur nicht winzig. ===================================================================== */ @media (max-width: 860px) { html p.section-label, html p.meta, html p.section-kicker, html p.eyebrow, html p.kicker, html p.label, html p.tag, html p.hero-eyebrow, html p.sectionNumber, html p.heroKicker, html .section-label, html .section-kicker, html .eyebrow, html .meta, html .kicker, html .hud-tag, html .rtag { font-size: 11.5px !important; line-height: 1.4 !important; letter-spacing: .14em !important; } /* Die Nummer in der Dachzeile bleibt bei der Dachzeile */ html .section-label span, html .section-kicker span, html .eyebrow span, html .eyebrow .num, html .kicker .n, html .meta span { font-size: inherit !important; } } /* ===================================================================== 11. LETZTER REST --------------------------------------------------------------------- Die Regel "span ohne Klasse erbt" hat in ECKWERK auch das Pfeilzeichen im Kopf erfasst: der Entwurf setzt es bewusst auf 14 Punkte neben einer 9 Punkte kleinen Beschriftung, geerbt waren es dann 9. Die Beschriftung steigt, das Zeichen behaelt seine Rolle. ===================================================================== */ @media (max-width: 860px) { html .hero-caption a { font-size: 11.5px !important; } html .hero-caption a span, html .hero-caption a > span:not([class]) { font-size: 15px !important; } } /* ===================================================================== 12. OBERHALB VON 860 PUNKTEN --------------------------------------------------------------------- Die Abschnitte davor greifen nur auf kleinen Schirmen. Am Desktop gemessen (900 und 1440 Punkte) blieben zwei Sorten Befund stehen: Schrift bis hinunter zu 7 Punkten — 82 Stellen bei BRICK & TIDE, 55 bei LUMEN, 33 bei ECKWERK. Sieben Punkte sind auf keinem Bildschirm zu lesen, acht kaum. Neun Punkte in Versalien sind dagegen eine bewusste redaktionelle Groesse: die bleibt. Deshalb hebt diese Schicht nur an, was darunter liegt. Klickflaechen von 11 bis 23 Punkten Hoehe — Fusszeilenlinks bei BRICK sind 50x11, bei ECKWERK 54x12. WCAG 2.2 fordert auf Stufe AA 24x24. Das ist kein Geschmack, sondern eine Anforderung. Die Trefferflaeche waechst, die Schrift nicht: das Aussehen bleibt bis auf etwas mehr Luft in den Zeilen unveraendert. ===================================================================== */ @media (min-width: 861px) { /* --- Untergrenze 9 Punkte ------------------------------------------ */ html small, html figcaption, html dt, html dd, html .property-demo, html .imageBadge, html .demo-pill, html .credits-list li, html .credits-list a, html .footer-legal a, html .footer-legal span, html .footer-legal button, html .footer-bottom a, html .footer-bottom span, html .footerBottom span, html .footerBottom a, html .foot-base span, html .foot-base a, html .property-specs dt, html .property-specs dd, html .meta span, html .facts span, html .facts strong, html .side-panel-number, html .menu-panel-inner small, html .hero-hint span, html .wordmark small, html .brand small, html .logoType small, html .case-copy small { font-size: max(9px, 1em) !important; } /* Wo 1em selbst schon klein ist, greift max() nicht - diese Stellen tragen ihren Wert fest. */ html .property-demo, html .imageBadge, html .demo-pill, html small, html figcaption, html dt { font-size: 9px !important; } html .property-card dt, html .property-card dd { font-size: 9.5px !important; } /* Namentlich nachgetragen, nachdem die Messung sie einzeln benannt hat. Die Merkmalsmarken der Stadtteilwahl standen bei sieben Punkten. */ html .vertical-caption, html .editorial-left span, html .editorial-right span, html .district-selector button span, html .district-panel > span, html .hero-footer span { font-size: 9px !important; } html .district-panel li { font-size: 9px !important; padding: 6px 11px !important; } /* Zweiter Durchgang: Formularbeschriftungen, Fusszeilenangaben und die Zeile unter der Wortmarke standen bei sieben bis neun Punkten. Die Tafeln sind geschlossen unsichtbar - geoeffnet sind sie es nicht. */ html .footer-address span, html .footer-contact span, html legend span, html .compass-form legend span, html .side-panel-inner label span, html .side-panel-inner legend span, html .menu-panel-inner p, html .hdr .brand .sub, html .brand .sub, html .brandLink .sub { font-size: 9.5px !important; } /* --- Klickflaechen auf 24 Punkte ----------------------------------- */ html footer a, html footer button, html nav a, html nav button, html .footer-legal a, html .footer-legal button, html .footer-bottom a, html .footerBottom a, html .foot-base a, html .foot-col a, html .footerMain a, html .credits-list a, html .backTop, html .nav-links a, html .mainNav a, html .wordmark, html .brand, html .contactDetails a, html .contact-details a, html .district-selector button, html .propertyTabs button, html .servicesGrid article a, html .site-header button, html .hero-caption a, html .text-link, html .textLink { min-height: 24px !important; } /* Was der Entwurf als Block setzt, bleibt Block - sonst bricht die Karte um. Die Hoehe traegt hier das Padding. */ html .servicesGrid article a, html .site-header button { display: flex !important; padding-block: 6px !important; } /* Die Objektauswahl bleibt unangetastet: ihre Knoepfe sind selbst Raster (grid-template-columns: 38px minmax(0,1fr) auto). Jede Aenderung an display zerstoert das innere Layout, die Mindestbreite des Knopfes waechst und sprengt seine Spalte - gemessen 320 statt 303 Punkte, die Seite lief bei 925 Punkten um 92 ueber. Fuer eine Mindesthoehe braucht es kein display. */ html .contactDetails a, html .contact-details a, html .district-selector button { display: inline-flex; } /* "Impressum" und "Datenschutz" stehen bei KONFETTI, FORTAN und Atelier Lichtraum gleich gebaut als display:inline in einem span - dort verpufft jede Mindesthoehe. inline-flex verhaelt sich nach aussen weiter wie inline, die Zeile bleibt also, wie sie ist. */ html[data-demo="konfetti"] .foot-base a, html[data-demo="konfetti"] .foot-base button { display: inline-flex; min-height: 24px !important; align-items: center; } /* Bloecke, die als Flaeche gedacht sind, behalten ihre Anzeigeart */ html .brand, html .wordmark, html .brandLink { display: inline-flex; } } /* ===================================================================== 13. BILDFORMATE --------------------------------------------------------------------- Gemessen bei 375 Punkten, Originalformat gegen gezeigtes Format: LUMEN propertyStage 1.78 gezeigt als 0.56 -> 32% sichtbar LUMEN approachImage 1.78 gezeigt als 0.75 -> 42% BRICK seller-visual 1.50 gezeigt als 0.69 -> 46% ECKWERK Werkbild 2.12 gezeigt als 0.91 -> 43% ATELIER vier Aufnahmen 0.67 gezeigt als 1.60 -> 42% (Hoehe ab) Die Ursache ist ueberall dieselbe: die Entwuerfe setzen eine feste Mindesthoehe statt eines Formats. Ein Querformat in einem 520 Punkte hohen Kasten wird zum senkrechten Streifen - was darauf zu sehen war, ist weg. Das liest sich nicht als Gestaltung, sondern als Versehen. Hintergruende sind ausgenommen: unter panorama, closing-image und district-backdrop steht Text, dort ist starker Beschnitt richtig. Drei Formate, mehr braucht keine dieser Seiten: 0.85 Bild im Fluss (zeigt von einem 1.78er die Haelfte) 1.10 liegend, in Gruppen 1.50 Band Bei gemischten Vorlagen steht das geometrische Mittel: aus 0.67 und 1.50 wird 1.00, dann verlieren beide Seiten gleich viel. ===================================================================== */ @media (max-width: 860px) { /* --- LUMEN --- */ html[data-demo="lumen"] .propertyStage, html[data-demo="lumen"] .munichFeatureImage, html[data-demo="lumen"] .approachImage { aspect-ratio: 0.85 !important; height: auto !important; min-height: 0 !important; max-height: none !important; } html .propertyStage > img, html .munichFeatureImage img, html .approachImage img { height: 100% !important; width: 100% !important; } /* --- BRICK & TIDE --- */ html[data-demo="brick-tide"] .seller-visual { aspect-ratio: 0.85 !important; height: auto !important; min-height: 0 !important; } html .seller-visual > img { height: 100% !important; width: 100% !important; } /* --- ECKWERK: hier stand aspect-ratio 1.1 auf den figures. Dieselbe Falle wie in Abschnitt 15, die ich dort schon aufgeschrieben und hier nicht angewendet habe: steht die figure in einem Raster mit gestreckter Hoehe, rechnet aspect-ratio daraus die BREITE. Die figure wurde 968 statt 389 Punkte breit, die Spalte wuchs mit, und der Textblock daneben rutschte bis 1389 - die Seite lief bei 820 und 860 Punkten um ueber 500 Punkte waagerecht ueber. Die Regel ist entfernt; die figures fuellen ihre Zelle wieder. */ html[data-demo="eckwerk"] .case-study figure img, html[data-demo="eckwerk"] .situations figure img, html[data-demo="eckwerk"] .profile-figure img { height: 100% !important; width: 100% !important; } /* --- ECKWERK: das Kopfbild war 115 Punkte breit ------------------ 32 Prozent von 375 ergeben einen Streifen, auf dem nichts mehr zu erkennen ist - weder Motiv noch Flaeche. Breiter und mit Format. ACHTUNG, div: BRICK & TIDE nennt sein Vollbild-Hero ebenfalls .hero-image, dort aber als img. Ohne die Einschraenkung traf diese Regel beide - BRICKs Kopfbild schrumpfte auf 195 mal 212 Punkte und klebte oben links in einem 375 mal 812 Punkte grossen Kopf. Klassennamen wiederholen sich zwischen den Demos; jede Regel hier muss so eng gefasst sein, dass sie nur die gemeinte Seite trifft. */ html[data-demo="eckwerk"] div.hero-image { width: 52% !important; height: auto !important; aspect-ratio: 0.92 !important; } html div.hero-image img { height: 100% !important; width: 100% !important; } /* --- Atelier Lichtraum: gemischte Vorlagen, also quadratisch --- */ html[data-demo="atelier-lichtraum"] .shot { aspect-ratio: 1 !important; height: auto !important; min-height: 0 !important; } html .shot img { height: 100% !important; width: 100% !important; } } /* ===================================================================== 14. INNENABSTAENDE BEI BRICK & TIDE --------------------------------------------------------------------- Die Bloecke tragen 80 bis 90 Punkte eigenen Abstand - Werte aus dem Entwurf fuer grosse Schirme, die mobil unveraendert galten. Mit den 56 Punkten Sektionsrhythmus ergab das Uebergaenge bis 309 Punkte. Nicht angetastet: der Kopf von FORTAN und die Stille vor dem Knopf "Halten zum Loslassen" - dort ist der Leerraum die Aussage. ===================================================================== */ @media (max-width: 860px) { html .hero-bottomline { margin-top: 36px !important; } html .manifesto-copy { margin-top: 40px !important; } html .property-list { margin-top: 44px !important; } html .collection-marquee { margin-top: 44px !important; padding-block: 14px !important; } html .district-content { padding-block: 48px !important; } html .seller-copy { padding-block: 44px !important; } html .contact-top { padding-top: 48px !important; } html .seller h2, html .value-compass h2 { margin-top: 32px !important; } } /* ===================================================================== 15. BILDFORMATE OBERHALB VON 860 PUNKTEN - ZURUECKGENOMMEN --------------------------------------------------------------------- Hier standen aspect-ratio-Regeln fuer die Bilder am Desktop. Sie sollten den Beschnitt begrenzen (LUMENs approachImage zeigte 29 Prozent der Vorlage). Sie haben aber die Bilder aus ihrer Rasterzelle geloest, und darunter klaffte Leerraum - gemessen: LUMEN approachImage 424 bis 871 Punkte Luecke ECKWERK hero-image 518 bis 544 Punkte, oben ECKWERK case-study figure 457 bis 496 Punkte ATELIER shot 65 bis 494 Punkte Ein zu enger Beschnitt sieht ungeschickt aus. Ein Bild, das seine Flaeche nicht fuellt, sieht kaputt aus - und faellt sofort auf. Die Regeln sind entfernt; die Bilder fuellen ihre Zelle wieder. Gelernt: bei jeder Formatregel nicht nur auf Ueberlauf pruefen, sondern auch auf Luecke. Beides sind Fehler. ===================================================================== */ /* ===================================================================== 16. FORMULARFELDER MUESSEN ALS FELDER ERKENNBAR SEIN --------------------------------------------------------------------- Gemessen, Kontrast der Feldbegrenzung gegen ihren Grund: LUMEN Unterstrich rgb(168,167,159) auf rgb(243,240,233) 2,12:1 KONFETTI Rand mit 10 Prozent Deckkraft ~1,1:1 BRICK schwarz auf Neongelb 15,72:1 WCAG 1.4.11 verlangt 3:1 fuer die Begrenzung eines Bedienelements. Darunter sieht man nicht, wo ein Feld anfaengt und aufhoert - das Formular wirkt wie loser Text mit Beschriftungen. Die Farbe wird aus der Schriftfarbe des Feldes gemischt, nicht fest gesetzt: so bleibt jede Demo bei ihrem eigenen Ton und bekommt trotzdem genug Kontrast. ===================================================================== */ html input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), html textarea, html select { border-bottom-color: color-mix(in srgb, currentColor 58%, transparent); } html .contact-form input, html .contact-form textarea, html .contact-form select, html .contactForm input, html .contactForm textarea, html .contactForm select { border-bottom-color: color-mix(in srgb, currentColor 58%, transparent); } /* Wo ein voller Rahmen steht, gilt dasselbe fuer alle vier Seiten */ html .w-field input, html .w-field textarea, html .w-field select, html .field input, html .field textarea, html .field select { border-color: color-mix(in srgb, currentColor 56%, transparent); } /* ===================================================================== 17. SPERRUNG IST EINE FUNKTION DER GROESSE --------------------------------------------------------------------- LUMENs Kopfzeile stand mobil bei 37 Punkten mit -0,055em - ein Wert fuer 100 Punkte. Bei 37 fehlen jedem Zeichen zwei Punkte und die Buchstaben beruehren sich. Dasselbe bei den Menuepunkten. ===================================================================== */ @media (max-width: 860px) { html h1, html .hero h1, html .hero-h1, html .heroContent h1 { letter-spacing: -.028em !important; } html h2 { letter-spacing: -.024em !important; } html h3, html .service-titel, html .propertyTitle { letter-spacing: -.014em !important; } } /* LUMEN setzt seinen Fliesstext auf -0,045em - bei 16 Punkten sind das 0,7 Punkte, die jedem Zeichen fehlen. Fliesstext vertraegt keine negative Sperrung. */ @media (max-width: 860px) { html[data-demo="lumen"] p, html[data-demo="lumen"] p em, html[data-demo="lumen"] li, html[data-demo="lumen"] blockquote, html[data-demo="lumen"] dd { letter-spacing: -.006em !important; } html .eyebrow, html [class*="eyebrow"], html .kicker, html .section-label, html .meta, html .heroKicker { letter-spacing: .14em !important; } } /* ===================================================================== 18. DER KOPF STAND AUF DER ERSTEN ZEILE --------------------------------------------------------------------- ECKWERK: die Kopfleiste reicht bis 66 Punkte, die Ortszeile "Frankfurt am Main · Strategieberatung für den Mittelstand" beginnt bei 0 - sie lag vollstaendig unter der Navigation. Bei 375 und 600 Punkten gemessen. ===================================================================== */ @media (max-width: 860px) { /* Auf ECKWERK gebunden: KONFETTI hat im Kopf ebenfalls ein .meta, dort gibt es aber keine Kopfleiste, die etwas verdecken koennte - 78 Punkte waeren dort nur ein Loch. */ html[data-demo="eckwerk"] .hero .meta, html[data-demo="eckwerk"] .hero > .meta, html[data-demo="eckwerk"] .hero p.meta { margin-top: 78px !important; } }