/* ========================================================================== OMNISON — Alexander Matthäi style.css — Basis, Header, Footer, Seitenlayouts, Responsive ========================================================================== */ /* -------------------------------------------------------------------------- 1. Design-Tokens -------------------------------------------------------------------------- */ :root { --color-bg: #b6796e; --color-text: #2a2620; /* Kachel-Platzhalter (work.css .tile__media), bevor das Bild geladen ist: dieselbe Farbe wie der Seiten-Hintergrund, nur 10% dunkler — folgt automatisch, wenn nur --color-bg geändert wird. */ --tile-placeholder-bg: color-mix(in oklch, var(--color-bg) 90%, #000 10%); --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* bündig mit dem Work-Grid (css/work.css --grid-pad): 84px Desktop, 48.6px Tablet (768–979px), 16px Mobile (<=767px) */ --side-padding: 84px; --header-height: 100px; --logo-size: 92px; /* Versal-Schriftgröße des Logo-Namenszugs */ --footer-height: 110px; } /* -------------------------------------------------------------------------- 2. Reset & Basis -------------------------------------------------------------------------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* Auf JEDER Seite reserviert (nicht nur im Work-Grid): sonst haben Seiten mit/ohne echte Scrollbar unterschiedliche Content-Breite, wodurch der Header (Logo/Menü rechts) beim Seitenwechsel um die Scrollbar-Breite nach rechts/links "springt". */ scrollbar-gutter: stable; /* Hintergrund auch auf html (nicht nur body): sonst malt der Browser im kurzen Moment des Seitenwechsels seine weiße Standard-Leinwand — das war der "Weißframe" zwischen Übersicht und Zielseite. */ background-color: var(--color-bg); /* iOS Safari: ohne das hier zeigt der elastische Overscroll-Bounce am oberen Rand kurz die Übersichtsfarbe unter der hochfahrenden Projekt-/Über-Karte durch (#project-overlay ist zwar fixed+inset:0, der Bounce malt aber jenseits davon die Farbe von html/body). Dieselbe Regel steht in project.css für die Unterseiten selbst — hier fehlte sie für die Übersicht als Trägerseite. */ overscroll-behavior-y: none; } body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-serif); font-weight: 400; font-size: 18px; line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; } img, video { display: block; max-width: 100%; } a { color: inherit; } main { flex: 1 0 auto; display: flex; flex-direction: column; } /* Sichtbarer Tastatur-Fokus */ a:focus-visible, button:focus-visible { outline: 2px solid var(--color-text); outline-offset: 3px; } /* -------------------------------------------------------------------------- 3. Header -------------------------------------------------------------------------- */ .site-header { display: flex; align-items: center; justify-content: space-between; /* Exakt dieselbe Flucht wie das Work-Grid (css/work.css: width:100% + max-width:1800px + margin:0 auto + Seiten-Padding). WICHTIG: width:100% ist zwingend — der ist ein Column-Flex; ein Flex-Item mit margin:0 auto ohne width:100% schrumpft auf Inhaltsbreite und zentriert sich (Logo + Menü klumpen mittig zusammen). Erst width:100% zwingt den Header auf volle 1800px-Breite, sodass justify-content:space-between das Logo an den linken und das Menü an den rechten Kachel-Rand schiebt. */ width: 100%; max-width: 1800px; margin: 0 auto; /* neuer, höherer Header (aus dem Design gemessen: Logo-Oberkante ~78px) */ padding: 78px var(--side-padding) 58px; align-items: flex-start; position: relative; z-index: 200; } /* Logo: AM_logo.svg (Schriften als Konturen — rendert überall identisch, keine Font-Abhängigkeit mehr). viewBox in der Datei auf den Inhalt beschnitten (300 Einheiten hoch bei Name-Schriftgröße 197.18). */ .header-title-logo { display: block; text-decoration: none; } .logo-svg { display: block; /* viewBox-Höhe 300 : Name-Schriftgröße 197.18 = 1.522 — --logo-size entspricht damit weiterhin der Versal-Schriftgröße des Namenszugs. 120px ist aus dem Design gemessen: Schriftzug-Tinte 179px hoch bei 35px-Menü (Verhältnis ~5.1:1). */ height: calc(var(--logo-size) * 1.522); width: auto; } /* Eigenes Mobile-Logo (AM_logo_mbl.svg): auf dem Handy steht statt des breiten Desktop-Schriftzugs (AM_logo.svg) eine kompakte, dreizeilige Fassung (Tagline über "ALEXANDER" über "MATTHÄI"). Beide liegen nebeneinander im DOM, nur eines ist je Breite sichtbar — Desktop per Default an, Mobile per Media Query getauscht (siehe unten). */ .logo-svg--mobile { display: none; } /* Desktop-Navigation */ .header-nav { display: flex; align-items: baseline; gap: 18px; /* +1 Leerzeichen-Breite (~6px bei 21px Jost) */ margin-top: -4px; margin-right: 4px; } /* Nav-Item: Jost Light, Figma-Werte halbiert (Layout liegt im 2x-Maßstab: 35px/40 -> 17.5px/20). Inaktive Punkte dunkel; bei Hover weiß mit einfahrendem Unterstrich. Aktive Seite dauerhaft weiß + unterstrichen. */ .header-nav-item { position: relative; font-family: 'Jost', var(--font-sans); font-size: 21px; /* 17.5 +20% */ font-weight: 300; line-height: 1.143; letter-spacing: .02em; text-transform: uppercase; color: var(--color-text); text-decoration: none; padding-bottom: 2px; transition: color .3s ease; } .header-nav-item:hover, .header-nav-item.is-active { color: #fff; } .header-nav-item::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #fff; transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .header-nav-item:hover::after, .header-nav-item.is-active::after { transform: scaleX(1); } /* Sprach-Umschalter (DE/ENG): kleine Pille rechts unten im Header. Schaltet bislang nur die Anzeige um — englische Seiten existieren noch nicht, der Zustand ist fürs spätere Verdrahten vorbereitet. */ /* Figma-Werte halbiert (2x-Layout): 95x37 -> 48x19, Radius 12, 1px weißer Rand, kein Fill, weißer Knopf links, Label "DE" in Jost weiß. Sitzt 28px über der ersten Kachel: das Work-Grid beginnt 61px unter der Header-Unterkante (grid-gap 16 + 45), also bottom = -(61-28) = -33px. */ .lang-toggle { position: absolute; right: var(--side-padding); bottom: -32px; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; width: 60px; /* 48 +25% */ height: 24px; padding: 3px 9px 3px 4px; border: 1px solid #fff; /* Outline bleibt bewusst exakt 1px */ border-radius: 15px; background: transparent; cursor: pointer; font-family: 'Jost', var(--font-sans); font-size: 12.5px; font-weight: 400; letter-spacing: .02em; color: #fff; } .lang-toggle .knob { width: 15px; height: 15px; border-radius: 50%; background: #fff; } /* EN-Zustand: Knopf wandert nach rechts, Label nach links */ .lang-toggle.is-en { flex-direction: row-reverse; padding: 3px 4px 3px 9px; } /* Hamburger (Mobile) */ .header-burger { display: none; flex-direction: column; justify-content: center; gap: 8px; width: 44px; height: 44px; background: none; border: none; cursor: pointer; z-index: 300; } .header-burger span { display: block; width: 36px; height: 2px; background-color: var(--color-text); margin-left: auto; transition: transform 0.3s ease, opacity 0.3s ease; } .header-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(10px) rotate(45deg); } .header-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .header-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); } /* Mobile-Menü-Overlay */ .mobile-nav { display: none; position: fixed; inset: 0; background-color: var(--color-bg); z-index: 250; flex-direction: column; align-items: center; justify-content: center; gap: 2.2em; } .mobile-nav.is-open { display: flex; } .mobile-nav a { font-family: var(--font-serif); font-size: 28px; text-decoration: none; } body.nav-open { overflow: hidden; } /* X zum Schließen (Über/Kontakt als Overlay-Karte) — nur auf dem Handy sichtbar, Desktop behält den normalen Header samt Navigation. */ .page-close { display: none; position: fixed; top: 18px; right: 16px; z-index: 300; padding: 6px; color: var(--color-text); opacity: .8; transition: opacity .3s ease, transform .3s ease; } .page-close svg { width: 22px; height: 22px; display: block; } .page-close:hover { opacity: 1; transform: rotate(90deg); } /* -------------------------------------------------------------------------- 4. Footer -------------------------------------------------------------------------- */ #footer-sections { flex-shrink: 0; text-align: center; width: 100%; /* siehe .site-header: ohne width:100% schrumpft das Flex-Item */ max-width: 1800px; /* selbe Flucht wie Header/Work-Grid, siehe .site-header */ margin: 0 auto; padding: 28px var(--side-padding) 40px; font-family: var(--font-serif); } .footer-copyright { font-size: 18px; letter-spacing: 0.06em; font-weight: 400; } .footer-copyright strong { font-weight: 600; letter-spacing: 0.06em; } .footer-copyright .copy-years { font-weight: 500; } body.workpage .footer-copyright { color: #fff; } .footer-links { margin-top: 8px; font-size: 16px; } .footer-links a { position: relative; text-decoration: none; transition: color 0.3s ease; } /* Unterstrich: erscheint bei Hover genau wie im Hauptmenü (siehe .header-nav-item::after), ohne Overshoot/Bounce. */ .footer-links a::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px; background-color: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } /* Hover wie im Hauptmenü: weiß, Unterstrich fährt ein (currentColor im ::after wird dadurch automatisch weiß) */ .footer-links a:hover { color: #fff; } .footer-links a:hover::after { transform: scaleX(1); } .footer-sep { display: inline-block; margin: 0 0.5em; } /* -------------------------------------------------------------------------- 5. Startseite — Video -------------------------------------------------------------------------- */ .video-section { position: relative; padding: 0 var(--side-padding); } .video-background { position: relative; overflow: hidden; } .video-background video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } /* Footer auf der Startseite dicht unter dem Video — siehe animations.css (body.homepage #footer-sections { margin-top: -60px; }) */ body.homepage main { justify-content: flex-start; } /* -------------------------------------------------------------------------- 6. Profil -------------------------------------------------------------------------- */ .profil-main { justify-content: center; } .profil-section { display: flex; justify-content: space-between; align-items: flex-start; gap: 4vw; padding: 20px 8vw 80px; max-width: 1500px; width: 100%; margin: 0 auto; } .profil-item { text-align: center; flex: 0 1 auto; } .profil-item:first-child { flex: 0 1 auto; } .profil-title { font-family: var(--font-serif); font-size: 28px; font-weight: 300; margin-bottom: 32px; letter-spacing: 0.01em; } .profil-list { list-style: none; font-size: 21px; line-height: 1.5; font-weight: 300; } .profil-list li { margin-bottom: 15px; } .profil-list strong { font-weight: 600; } .studio-link { color: inherit; text-decoration: none; border-bottom: none; transition: opacity 0.25s ease; } .studio-link:hover { opacity: 0.5; text-decoration: none; } /* -------------------------------------------------------------------------- 7. Über -------------------------------------------------------------------------- */ .ueber-main { justify-content: center; } .ueber-section { padding: 40px 6vw 80px; } .ueber-text { font-family: var(--font-serif); font-size: clamp(22px, 2.05vw, 35px); font-weight: 400; line-height: 1.75; letter-spacing: 0.01em; max-width: 1700px; margin: 0 auto; } /* -------------------------------------------------------------------------- 8. Kontakt -------------------------------------------------------------------------- */ .kontakt-main { justify-content: center; } .kontakt-section { display: flex; align-items: center; justify-content: center; padding: 40px var(--side-padding); } .kontakt-content { text-align: center; font-size: 24px; line-height: 1.85; font-weight: 400; } .kontakt-content .kontakt-name { font-weight: 600; letter-spacing: 0.05em; } .kontakt-content .kontakt-block { margin-bottom: 1.6em; } .kontakt-content a { text-decoration: underline; text-underline-offset: 4px; transition: opacity 0.25s ease; } .kontakt-content a:hover { opacity: 0.6; } /* -------------------------------------------------------------------------- 9. Rechtsseiten (Impressum / Datenschutz) -------------------------------------------------------------------------- */ /* Gleiche Flucht wie .site-header (width:100% + max-width:1800px + margin:auto + --side-padding), damit Impressum/Datenschutz bei jeder Breite links bündig mit dem Logo stehen. Die Textbreite wird separat auf den Elementen selbst auf 860px gedeckelt. */ .legal-section { width: 100%; max-width: 1800px; margin: 0 auto; padding: 40px var(--side-padding) 80px; } .legal-section h1 { font-family: var(--font-serif); font-size: 34px; font-weight: 500; margin-bottom: 1.2em; max-width: 860px; } .legal-section h2 { font-family: var(--font-serif); font-size: 23px; font-weight: 600; margin: 1.6em 0 0.5em; max-width: 860px; } .legal-section p { font-size: 18px; line-height: 1.65; margin-bottom: 0.9em; max-width: 860px; } .legal-section a { text-decoration: underline; text-underline-offset: 3px; } /* -------------------------------------------------------------------------- 9b. Responsive — Zwischenstufe (980px – 1059px) Menütypo verkleinert sich schon hier und rückt bündig auf die Logo-Oberkante, bevor bei 979px das eigentliche Tablet-Layout greift. */ @media (max-width: 1060px) and (min-width: 980px) { .header-nav-item { font-size: 17px; } .header-nav { align-items: flex-start; margin-top: 0; } } /* -------------------------------------------------------------------------- 10. Responsive — Tablet (768px – 979px) Breakpoint bündig mit dem Work-Grid (css/work.css), damit --side-padding auf jeder Seite exakt mit den Kachel-Rändern fluchtet. -------------------------------------------------------------------------- */ @media (max-width: 979px) and (min-width: 768px) { :root { --side-padding: 48.6px; --header-height: 80px; } :root { --logo-size: 60px; } .site-header { padding: 40px var(--side-padding) 32px; } .header-nav { align-items: flex-start; margin-top: 0; } .header-nav-item { font-size: 17.8px; } .profil-section { padding: 20px 5vw 80px; gap: 3vw; } .profil-title { font-size: 24px; } .profil-list { font-size: 18px; } .ueber-text { font-size: clamp(20px, 2.6vw, 30px); line-height: 1.7; } .kontakt-content { font-size: 21px; } } /* -------------------------------------------------------------------------- 11. Responsive — Mobile (bis 767px) -------------------------------------------------------------------------- */ @media (max-width: 767px) { :root { --side-padding: 16px; --header-height: 64px; } /* Logo zentriert, Nav klein direkt darunter — kein Burger/Dropdown auf dem Handy. Maße aus dem Figma-Layout (393px-Viewport): sichtbarer Schriftzug ~64% der Viewportbreite. Das PNG (1132x195, symmetrisch beschnitten) hat seitlich ~1% Rand und oben/unten je ~34% der Bildhöhe Weißraum (~15px bei dieser Größe) — daher padding-top 29px (44px bis zum Text) und gap 0 (15px Text→Nav). Nav→erste Kachel ~60px liefert das Work-Grid über sein padding-top schon selbst, daher unten kein Header-Padding. */ .site-header { flex-direction: column; justify-content: center; gap: 0; padding: 29px var(--side-padding) 0; } :root { --logo-size: clamp(29px, 8.1vw, 40px); } .site-header { padding: 29px var(--side-padding) 18px; align-items: center; } .logo-svg { margin-inline: auto; } /* AM_logo_mbl.svg statt AM_logo.svg. Die Datei wurde neu zugeschnitten (viewBox jetzt 1920x703.09, vorher 1920x1080 mit viel Leerraum). Per Bildvermessung (Headless-Screenshot + Pixel-Bounds) liegt die Tinte jetzt bei x 54–1866 / y 74–646, also 572px von 703.09px Bildhöhe (81.3% statt vorher 35% — deutlich enger zugeschnitten). Damit die Schriftzug-Höhe --logo-size entspricht, muss die BILDHÖHE 703.09/572 = 1.229-mal so groß sein wie --logo-size; die Breite folgt im selben Seitenverhältnis (1920/703.09): 1.229 * 1920/703.09 = 3.357. Faktor am Ende (* 2) ist reine Geschmacksgröße, keine Messung — bei Bedarf einfach diese eine Zahl anpassen. Breite bewusst NICHT auto: die SVG hat kein eigenes width/height- Attribut, nur viewBox. Safari auf iOS leitet daraus die Breite bei width:auto teils NICHT korrekt über das Seitenverhältnis ab, sondern löst sie auf die rohen viewBox-Einheiten auf (1920px) — auf einem 414px-iPhone-Viewport war das Logo dadurch ein Vielfaches zu groß. Feste Breite umgeht das browserunabhängig. */ .logo-svg--desktop { display: none; } .logo-svg--mobile { display: block; margin-inline: auto; height: calc(var(--logo-size) * 1.229 * 2); width: calc(var(--logo-size) * 3.357 * 2); } .header-nav { gap: .9em; margin-top: 14px; } .header-nav-item { font-size: 14px; font-weight: 400; letter-spacing: 0.02em; padding-bottom: 1px; } /* Toggle auf dem Handy rechtsbündig und tiefer gesetzt — sitzt über der ersten Grid-Kachel, wie auf dem Desktop (dort per bottom:-32px gegen den Header-Boden). Bleibt position:absolute aus der Basisregel. */ .lang-toggle { bottom: -32px; } .header-burger { display: none; } /* Über/Kontakt auf dem Handy: wie Projektseiten — ohne Menü, nur mit X oben rechts. Sie fahren aus der Work-Übersicht als Karte hoch (Overlay-Mechanik in js/work.js). */ body.overlay-page .site-header, body.overlay-page .mobile-nav { display: none; } body.overlay-page .page-close { display: block; } /* Startseite */ .video-section { padding: 0 var(--side-padding); } /* Profil: Spalten untereinander */ .profil-section { flex-direction: column; align-items: center; justify-content: flex-start; gap: 56px; /* unten 76.8px = 64px + 20%: mehr Luft zum Footer (gilt handyweit). */ padding: 24px var(--side-padding) 76.8px; } .profil-title { font-size: 23px; margin-bottom: 22px; } .profil-list { font-size: 19px; } /* Über: volle Breite, vw-Schrift für saubere Umbrüche */ .ueber-section { /* Als Overlay-Karte ohne Header braucht der Text oben mehr Luft zum X. */ padding: 76px var(--side-padding) 56px; } .ueber-text { font-size: 5vw; line-height: 1.6; } /* Kontakt: vertikal zentriert, etwas tiefer */ .kontakt-section { padding-top: 10vh; } .kontakt-content { font-size: 19px; } .footer-copyright { font-size: 16px; } .footer-links { font-size: 14px; } .legal-section h1 { font-size: 27px; } /* Impressum/Datenschutz als Overlay-Karte: ohne Header braucht die Überschrift oben Luft zum X (analog Über). */ body.overlay-page .legal-section { padding-top: 66px; } }