/* Nachtrag zu tailwind.css ------------------------------------------------------------------ Diese Utilities werden im HTML verwendet, fehlen aber im kompilierten Tailwind-Build: Pinegrow hat die CSS erzeugt, bevor die H1-Unterzeile und die Karten-Blöcke im Markup existierten. Tailwind generiert nur Klassen, die es beim Kompilieren im Quelltext gefunden hat. Dauerhafte Lösung: Markup in die Pinegrow-Originale übernehmen und dort neu kompilieren. Dann kann diese Datei entfernt werden. ------------------------------------------------------------------ */ .h-16 { height: calc(var(--spacing) * 16); } @media (width >= 64rem) { .lg\:h-14 { height: calc(var(--spacing) * 14); } } .gap-3 { gap: calc(var(--spacing) * 3); } .p-6 { padding: calc(var(--spacing) * 6); } .px-5 { padding-inline: calc(var(--spacing) * 5); } .underline { text-decoration-line: underline; } .max-w-\[22rem\] { max-width: 22rem; } .tracking-\[0\.06em\] { --tw-tracking: 0.06em; letter-spacing: 0.06em; } .bg-white\/60 { background-color: color-mix(in oklab, #fff 60%, transparent); } .bg-black\/50 { background-color: color-mix(in oklab, #000 50%, transparent); } .text-zinc-300 { color: oklch(87.1% 0.006 286.286); } @media (hover: hover) { .hover\:bg-white\/40:hover { background-color: color-mix(in oklab, #fff 40%, transparent); } .hover\:bg-black\/30:hover { background-color: color-mix(in oklab, #000 30%, transparent); } .hover\:text-white:hover { color: #fff; } } @media (width >= 48rem) { .md\:hidden { display: none; } .md\:mt-6 { margin-top: calc(var(--spacing) * 6); } .md\:text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } .md\:tracking-\[0\.14em\] { --tw-tracking: 0.14em; letter-spacing: 0.14em; } } @media (width >= 64rem) { .lg\:mt-10 { margin-top: calc(var(--spacing) * 10); } } /* ===== MASSSTAB AB 1024px =========================================== Der Entwurf ist an einer Vorschau entstanden, die sich wie ein etwa 2560px breiter Bildschirm verhaelt. Auf einem realen Desktop-Fenster (typisch 1280-1536px) wirkt dadurch alles zu gross — genau der Effekt, den du beim Herauszoomen auf 60% korrigiert hast. Statt jeden Wert einzeln zu aendern wird hier die Root-Schriftgroesse an die Fensterbreite gekoppelt. Alle rem-basierten Groessen (Schrift, Abstaende, Logo, Leiste, Container) skalieren gemeinsam mit — wie ein Zoom, nur dass das Layout selbst unberuehrt bleibt. 0.625vw bedeutet: bei 2560px Fensterbreite ergibt sich genau 16px, also die Entwurfsgroesse. Schmalere Fenster werden proportional kleiner, breitere groesser: 1536px -> 10px (62%) dein Fenster 1920px -> 12px (75%) 2560px -> 16px (100%) Entwurfsgroesse 3840px -> 24px (150%) Unter 1024px greift die Regel nicht — Handy und Tablet hoch bleiben exakt wie entworfen. Justieren: --mr-root anheben macht alles groesser, senken kleiner. 0.700vw = etwas groesser | 0.625vw = aktuell | 0.560vw = kleiner ==================================================================== */ :root { --mr-root: 0.625vw; --mr-root-min: 10px; --mr-root-max: 26px; --mr-root-shop: 0.860vw; /* Shop-Seiten: groesser als die Startseite */ } /* html[class] statt html: schlaegt die Utility-Klasse min-[1800px]:[font-size:0.889vw] im Markup, damit der Maßstab ueber den gesamten Bereich stetig bleibt und bei 1800px nicht springt. */ @media (width >= 64rem) { html[class], html { font-size: clamp(var(--mr-root-min), var(--mr-root), var(--mr-root-max)); } } /* ===== KOPFBEREICH: IDENTISCH AUF ALLEN SEITEN ======================= Zwei Ursachen fuer unterschiedliche Kopfgroessen: 1. Die Startseite nutzt lg:h-20 / lg:h-36 (rem, skaliert mit), die uebrigen Seiten lg:h-[80px] / lg:h-[144px] (feste Pixel). 2. Die Shop-Seiten haben einen groesseren Maßstab fuer den Inhalt — ueber rem wuerde der Kopf dort mitwachsen. Loesung: der Kopf haengt an seiner eigenen Groesse --mr-head, nicht an der Root-Schriftgroesse. Damit ist er auf jeder Seite gleich, egal welchen Maßstab der Inhalt hat. --mr-head folgt dem Startseiten-Maßstab. ==================================================================== */ :root { /* Kopfbereich: 0.625vw = Ausgangswert, kleinere Zahl = kleiner. */ --mr-head: clamp(8.5px, 0.530vw, 22px); /* Footer folgt dem Shop-Maßstab — dort stimmten die Groessen. */ --mr-foot: clamp(10px, 0.860vw, 26px); } @media (width >= 64rem) { nav { --spacing: calc(var(--mr-head) * 0.25); --text-xs: calc(var(--mr-head) * 0.75); --text-sm: calc(var(--mr-head) * 0.875); --text-base: var(--mr-head); --text-lg: calc(var(--mr-head) * 1.125); --text-xl: calc(var(--mr-head) * 1.25); --text-2xl: calc(var(--mr-head) * 1.5); } .lg\:h-\[80px\] { height: calc(var(--mr-head) * 5); } .lg\:h-\[144px\] { height: calc(var(--mr-head) * 9); } .lg\:px-\[48px\] { padding-inline: calc(var(--mr-head) * 3); } .lg\:gap-\[48px\] { gap: calc(var(--mr-head) * 3); } .lg\:text-\[16px\] { font-size: var(--mr-head); } /* Die Instagram-Box nutzt max-w-md — eine Breiten-Angabe, die an der Root-Schriftgroesse haengt, nicht an den Footer-Variablen. Auf Startseite und Fuxia (kleinerer Maßstab) war die Box dadurch zu schmal fuer ihren Inhalt und wurde abgeschnitten. Breite folgt jetzt ebenfalls --mr-foot, damit Box und Inhalt zusammenpassen. */ footer .max-w-md { max-width: calc(var(--mr-foot) * 28); } /* Gleiches Problem beim Footer-Container: max-w-screen-xl sind 80rem und haengen an der Root-Schriftgroesse. Auf Startseite und Fuxia ergab das 800px, auf den Shop-Seiten 1000px. Durch justify-between standen Instagram-Box und Boutiquen-Liste dadurch unterschiedlich weit auseinander. Breite folgt jetzt ebenfalls --mr-foot. */ footer .max-w-screen-xl { max-width: calc(var(--mr-foot) * 80); } /* Footer auf allen Seiten gleich: eigene Groesse, unabhaengig davon welchen Maßstab der Inhalt der jeweiligen Seite hat. */ footer { --spacing: calc(var(--mr-foot) * 0.25); --text-xs: calc(var(--mr-foot) * 0.75); --text-sm: calc(var(--mr-foot) * 0.875); --text-base: var(--mr-foot); --text-lg: calc(var(--mr-foot) * 1.125); --text-xl: calc(var(--mr-foot) * 1.25); --text-2xl: calc(var(--mr-foot) * 1.5); --text-3xl: calc(var(--mr-foot) * 1.875); --text-4xl: calc(var(--mr-foot) * 2.25); --text-5xl: calc(var(--mr-foot) * 3); --text-6xl: calc(var(--mr-foot) * 3.75); } } /* ===== SHOP-SEITEN: GROESSERER MASSSTAB ============================= Auf ladies-first und men-shop soll der Hero-Bereich den Viewport fuellen. Diese Seiten bekommen deshalb einen groesseren Maßstab als die Startseite. Ueber --mr-root-shop justierbar. ==================================================================== */ @media (width >= 64rem) { html[data-page="ladies-first"], html[data-page="men-shop"] { font-size: clamp(var(--mr-root-min), var(--mr-root-shop), var(--mr-root-max)); } } /* ===== FUXIA-KACHEL: TYPO STATT FOTO ================================ Die dritte Shop-Kachel auf der Startseite traegt kein Foto, sondern Schrift. Die beiden Nachbar-Kacheln sind Bilder und fuellen ihr Quadrat randlos — unabhaengig von der Wurzel-Schriftgroesse. Eine rem-Klasse (text-5xl) tut das nicht: auf dem Desktop steht die Wurzel bei ~10px, damit waeren es 30px Schrift in einer ~445px breiten Kachel. Der Rahmen ist korrekt, nur der Inhalt darin verschwindet — die Kachel wirkt dadurch leer neben den Fotos. Deshalb haengt die Groesse hier an der Fensterbreite, nicht an rem. Mobil bleibt text-4xl unangetastet, dort stimmt das Verhaeltnis. --mr-tile-type Schriftgroesse der Kachel-Typografie ==================================================================== */ :root { --mr-tile-type: clamp(34px, 3.4vw, 66px); } /* ===== SHOP-KACHELN FUELLEN IHRE SPALTE ============================= Am Live-Stand gemessen (1707px Fenster): die drei Spalten des Grids waren korrekt je 528px breit, die Kacheln darin aber 202, 174 und 141px — jede unterschiedlich, alle zu klein. Ursache ist md:mx-auto auf den drei Grid-Items. Automatische Seitenraender schalten bei einem Grid-Item das Strecken ab: es wird nur so breit wie sein Inhalt und mittig in der Spalte gesetzt. Damit bestimmte der Inhalt die Kachelgroesse — beim Fotomotiv fiel das kaum auf, bei der Schrift-Kachel war sie am kleinsten und damit sichtbar. Raender auf 0 stellt das Strecken wieder her: alle drei Kacheln sind jetzt gleich gross und fuellen ihre Spalte (je 528px, geprueft). Mobil bleibt mx-auto erhalten — dort zentriert es die Kachel wie entworfen. ==================================================================== */ @media (width >= 64rem) { #locations > .grid > div { margin-left: 0; margin-right: 0; } .mr-tile-type { font-size: var(--mr-tile-type); } } /* ===== IMPRESSUM + DATENSCHUTZ: LESBARER LAUFTEXT =================== Die Absaetze auf diesen beiden Seiten tragen keine Groessen-Klasse. Sie erben damit die Wurzel-Schriftgroesse, und die liegt durch den Skalierungs-Block oben bei etwa 10px — fuer Rechtstexte zu klein. Die Zwischentitel (text-xs / text-sm) haengen an derselben Wurzel und waren mit ~8px noch kleiner als der Text darunter. Vorgehen wie bei Kopf- und Fusszeile: innerhalb von
gilt ein eigener Maßstab. Bewusst NICHT ueberschrieben wird --text-6xl, damit die Seitenueberschrift ("Impressum.") ihre entworfene Groesse behaelt. Die Spaltenbreite muss mitwandern: max-w-screen-md rechnet in rem und bliebe sonst bei ~480px stehen — bei groesserer Schrift ergaebe das eine unnoetig schmale Spalte. --mr-legal Grundgroesse des Lauftexts --mr-legal-width Breite der Textspalte ==================================================================== */ :root { --mr-legal: clamp(13px, 1.05vw, 19px); --mr-legal-width: 72ch; } @media (width >= 64rem) { html[data-page="impressum"] main, html[data-page="datenschutz"] main { font-size: var(--mr-legal); --spacing: calc(var(--mr-legal) * 0.25); --text-xs: calc(var(--mr-legal) * 0.82); --text-sm: calc(var(--mr-legal) * 0.92); --text-base: var(--mr-legal); --text-lg: calc(var(--mr-legal) * 1.125); --text-xl: calc(var(--mr-legal) * 1.25); } html[data-page="impressum"] main .max-w-screen-md, html[data-page="datenschutz"] main .max-w-screen-md { max-width: var(--mr-legal-width); } } /* ===== SHOP-SEITEN: HERO-HOEHE AN DIE FENSTERHOEHE BINDEN =========== Die Hero-Abschnitte von Ladies First und Men Shop haben kein min-h-screen — ihre Hoehe entsteht aus rem-Abstaenden, die an der Fensterbreite haengen. Ob der Hero den Bildschirm fuellt, entschied damit die Fensterhoehe, weshalb der Titel zwischen 16" und 17" unterschiedlich hoch stand. Die senkrechten Abstaende laufen jetzt in vh: der Hero waechst und schrumpft mit der Fensterhoehe, der Titel behaelt seine Lage. --mr-shop-hero-top Abstand oben --mr-shop-hero-bottom Abstand unten ==================================================================== */ :root { --mr-shop-hero-top: 15vh; --mr-shop-hero-bottom: 12vh; } @media (width >= 64rem) { html[data-page="ladies-first"] main > section:first-of-type, html[data-page="men-shop"] main > section:first-of-type { padding-top: var(--mr-shop-hero-top); padding-bottom: var(--mr-shop-hero-bottom); } } /* ===== ABSCHNITT "WELCHE KLEIDUNG" (id="philosophie") =============== Zwei Stellschrauben fuer diesen Abschnitt, ab 1024px: --mr-phil-gap Abstand zwischen Bild und Text. gap-16 im Entwurf entspricht 4rem und schrumpft mit dem Maßstab mit — hier auf einen festen Wert gesetzt, damit der Text nicht an das Bild heranrutscht. --mr-phil-aspect Seitenverhaeltnis des Bildes. 3/4 ist der Entwurf, kleinere zweite Zahl = flacher, groessere = hoeher. 3/4.6 macht das Bild deutlich hoeher als der Text. ==================================================================== */ :root { /* Breite des Abschnitts: max-w-screen-xl haengt an der Root-Groesse und schrumpfte auf 800px. Jetzt 70% der Fensterbreite, gedeckelt bei 1280px (= Entwurfswert 80rem bei 16px). */ --mr-phil-width: min(70vw, 1280px); --mr-phil-gap: clamp(3rem, 8vw, 10rem); --mr-phil-aspect: 3 / 4; } @media (width >= 64rem) { #philosophie .max-w-screen-xl { max-width: var(--mr-phil-width); } #philosophie .grid { gap: var(--mr-phil-gap); } #philosophie .aspect-\[3\/4\] { aspect-ratio: var(--mr-phil-aspect); } } /* ===== ZWEITER ABSCHNITT: HERRENFOTO + STREIFEN ===================== Auch hier haengt max-w-screen-xl an der Root-Groesse und schrumpfte auf 800px. Gleiche Breite wie der Abschnitt darueber, damit Herrenfoto und Streifen im selben Maßstab stehen. Der Textabsatz ueber dem Foto behaelt seine Schriftgroessen — nur die Spaltenbreite aendert sich. ==================================================================== */ @media (width >= 64rem) { .max-w-screen-xl.min-\[2000px\]\:max-w-\[1800px\] { max-width: var(--mr-phil-width); } } /* ===== SCHWARZER STREIFEN MIT DEN MARKENNAMEN ======================= Der Streifen ist so hoch, wie der Markenabsatz Zeilen braucht. Um ihn schmaler zu bekommen, verteilen sich die Namen breiter: kleinere Schrift und engerer Zeilenabstand ergeben weniger Zeilen. Zusaetzlich weniger Innenabstand oben und unten. Dadurch wird der Streifen niedriger als das Herrenfoto daneben — das Foto ragt oben und unten heraus. Drei Stellschrauben: --mr-marken-size Schriftgroesse der Markennamen --mr-marken-leading Zeilenabstand --mr-marken-pad Innenabstand des Streifens oben/unten ==================================================================== */ :root { --mr-marken-size: 2rem; --mr-marken-leading: 1.45; --mr-marken-pad: 1.6rem; /* Streifen nach unten versetzen, damit das Herrenfoto oben deutlicher darueber hinausragt — wie im Referenzbild. */ /* Gesamtposition des Streifens - bleibt konstant. */ --mr-marken-total: 12rem; /* Titel nach unten. Wird vom Streifen-Abstand abgezogen, damit der Streifen dabei NICHT mitwandert (beide stehen im gleichen Fluss). */ --mr-marken-title-down: 8rem; } @media (width >= 64rem) { /* Titel wandert nach unten Richtung Streifen ... */ div:has(> .font-accent) { margin-top: var(--mr-marken-title-down); } /* ... und der Streifen bekommt genau diesen Betrag weniger, damit er an seiner Stelle bleibt. Summe ist immer --mr-marken-total. */ div:has(> .bg-black\/95) { padding-block: var(--mr-marken-pad); margin-top: calc(var(--mr-marken-total) - var(--mr-marken-title-down)); } div:has(> .bg-black\/95) > p { font-size: var(--mr-marken-size); line-height: var(--mr-marken-leading); } } /* ===== DESKTOP-HERO HINTERGRUNDBILD ================================= Tailwind erzeugt bg-[url(...)]-Klassen nur fuer die Dateinamen, die beim Kompilieren im Quelltext standen. Die CSS kennt daher nur lg:bg-[url('../assets/hero-wide-fashion.png')] — den alten Namen. Das HTML verweist jetzt auf hero-secondhand-schwabing-desktop.webp, fuer das es keine Regel gab: der Desktop-Hero hatte gar kein Hintergrundbild. Hier nachgetragen. Faellt weg, sobald Pinegrow mit dem neuen Bildnamen neu kompiliert. ==================================================================== */ :root { /* Bildausschnitt des Desktop-Heros. Erste Zahl = waagerecht, zweite = senkrecht. 50% 50% ist mittig (bg-center im Entwurf). Groessere zweite Zahl schiebt den Ausschnitt nach unten: oben wird mehr abgeschnitten, unten weniger — die Tasche kommt ins Bild. 50% = mittig | 65% = aktuell | 80% = noch weiter unten */ --mr-hero-pos: 50% 180%; } @media (width >= 64rem) { .lg\:bg-\[url\(\'\.\.\/assets\/hero-secondhand-schwabing-desktop\.webp\'\)\] { background-image: url('../assets/hero-secondhand-schwabing-desktop.webp'); background-position: var(--mr-hero-pos); /* Kein Kacheln, falls der Ausschnitt ueber den Bildrand hinausgeht: Werte ueber 100% koennen das Bild aus dem Rahmen schieben. Ohne no-repeat wuerde dann eine Wiederholung sichtbar. */ background-repeat: no-repeat; } } /* ===== HERO-TEXTBLOCK TIEFER SETZEN (Desktop) ======================== Titel, Unterzeile mit dem pinken Balken und der Scroll-Hinweis lagen ueber dem Gesicht der Frau im neuen Hero-Bild. Der Textblock wandert deshalb nach unten, der Scroll-Hinweis ebenfalls. Der Selektor greift nur den Hero-Block der Startseite (h1 mit max-w-6xl), nicht die anderen drei Stellen mit lg:mt-24. --mr-hero-top Abstand des Textblocks von oben (Entwurf: 6rem) --mr-scroll-bottom Abstand des Scroll-Hinweises von unten ==================================================================== */ :root { /* In vh, nicht in rem: rem haengt an der Fensterbreite, die Hoehe des Hero-Bereichs aber an der Fensterhoehe. Dadurch wanderte der Titel auf Bildschirmen mit anderem Seitenverhaeltnis ueber das Bild — einmal aufs Gesicht, einmal auf die Schultern. Mit vh folgt der Titel derselben Achse wie das Bild. 18vh = aktuell | kleiner = hoeher | groesser = tiefer */ /* Alle senkrechten Abstaende im Hero in vh statt rem: rem haengt an der Fensterbreite, die Hoehe des Hero-Bereichs an der Fensterhoehe. Nur mit vh behalten Titel, Unterzeile und Scroll-Hinweis ihre Lage zum Bild, egal welches Seitenverhaeltnis der Bildschirm hat. Werte sind auf deine 12rem-Ansicht kalibriert. */ --mr-hero-top: 16vh; /* Titel von oben */ --mr-hero-gap: 15vh; /* Abstand Titel -> Unterzeile */ /* Gesamtmaßstab des Hero-Textblocks: 1 = Entwurfsgroesse, 0.72 = 28 Prozent kleiner. Titel, das "&", die Unterzeile und der pinke Balken (Hoehe in em) skalieren gemeinsam mit. */ --mr-hero-scale: 0.72; } @media (width >= 64rem) { h1.max-w-6xl.lg\:mt-24 { margin-top: var(--mr-hero-top); } h1.max-w-6xl .lg\:text-\[8rem\] { font-size: calc(8rem * var(--mr-hero-scale)); } h1.max-w-6xl .lg\:text-\[5rem\] { font-size: calc(5rem * var(--mr-hero-scale)); } h1.max-w-6xl .lg\:text-4xl { font-size: calc(2.25rem * var(--mr-hero-scale)); } h1.max-w-6xl .lg\:mt-44 { margin-top: var(--mr-hero-gap); } } /* ===== HERO-HELLIGKEIT (Startseite, Desktop) ======================== Das Hero-Bild traegt auf dem Desktop lg:brightness-75, also 75 Prozent Helligkeit. Auf dem Handy gibt es diesen Filter nicht — daher wirkte die Desktop-Fassung deutlich dunkler. Wert anheben macht heller: 100% = ungefiltert wie auf dem Handy, 90% = leicht abgedunkelt, 75% = Ausgangszustand. ==================================================================== */ :root { --mr-hero-brightness: 75%; /* Entwurfswert */ } @media (width >= 64rem) { .lg\:brightness-75 { --tw-brightness: brightness(var(--mr-hero-brightness)); } } /* ===== SCROLL-HINWEIS (Startseite, Desktop) ========================= lg:bottom-16 entspricht 4rem und schrumpft mit dem Maßstab mit — bei 10px Root nur noch 40px Abstand zum unteren Rand, dadurch wurde der Hinweis angeschnitten. Hier auf einen festen Abstand gesetzt. Nur auf der Startseite verwendet. Ueber --mr-scroll-bottom justierbar. ==================================================================== */ :root { --mr-scroll-bottom: 8vh; /* Groesse des Hinweises. Am Live-Stand gemessen: das Wort stand auf 10px mit 0.3em Sperrung (56x15px), darunter eine 32px hohe Linie. Der Textblock darueber liegt bei 17.3px — die grosse Sperrung und die lange Linie liessen den Hinweis trotzdem gleich gross wirken. Beides eine Stufe zurueck. */ --mr-scroll-text: 8.5px; --mr-scroll-track: 0.26em; --mr-scroll-line: 26px; --mr-scroll-gap: 8px; } @media (width >= 64rem) { .lg\:bottom-16 { bottom: var(--mr-scroll-bottom); gap: var(--mr-scroll-gap); } /* das Wort "Scroll" */ .lg\:bottom-16 > span { font-size: var(--mr-scroll-text); letter-spacing: var(--mr-scroll-track); } /* die senkrechte Linie darunter */ .lg\:bottom-16 > div { height: var(--mr-scroll-line); } } /* Scroll-Hinweis in reinem Weiss. Zusaetzlich ein weicher Schatten: das Wort steht ueber dem hellen Pflaster im Foto und war dort kaum zu erkennen — weiss auf hellgrau. Der Schatten macht es lesbar, ohne sichtbar zu wirken. Auch der Strich darunter wird deutlicher. */ .lg\:bottom-16, .bottom-24.lg\:bottom-16 span { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); } .bottom-24.lg\:bottom-16 .bg-white\/50 { background-color: rgba(255, 255, 255, 0.75); box-shadow: 0 0 6px rgba(0, 0, 0, 0.4); } /* ===== KARTEN-PLATZHALTER: PUNKT UNTER DEN BUTTON =================== Der pulsierende Punkt sitzt mittig (top-1/2) — genau dort, wo auch der Button-Text steht, also hinter ihm. Er wandert nach unten, damit er unterhalb von "Karte laden" und dem Hinweistext liegt. --mr-map-dot senkrechte Lage des Punkts im Platzhalter 50% = mittig (Ausgangszustand) | 78% = aktuell ==================================================================== */ :root { --mr-map-dot: 78%; } [data-map] > .absolute.top-1\/2.left-1\/2 { top: var(--mr-map-dot); } /* Herrenfoto Startseite: quadratisches Bild in einem 3:4-Rahmen. "cover" schnitt die Figur an, "contain" liess unten eine Luecke. Deshalb einpassen (contain) und wieder heranzoomen, bis der Kopf fast den oberen Rand erreicht. Am Zoomwert unten laesst sich das justieren: 1.0 = ganz eingepasst, 1.333 = randlos gefuellt (wieder Beschnitt). */ .mr-portrait-fit { object-fit: contain; transform: scale(1.28); transform-origin: center center; }