/* =============== FONTS =============== */ /* Inter selbst gehostet (statt Google-Fonts-Import): keine IP-Weitergabe an Google (DSGVO) und die CSP kann komplett auf 'self' bleiben. Variable Font 400–900. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('../fonts/Inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('../fonts/Inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'ZIGZAG'; src: url('../fonts/ZIGZAG-NotRounded.woff2') format('woff2'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Andron'; src: url('../fonts/Andron Freefont LAT Reg.woff2') format('woff2'); font-weight: normal; font-style: normal; } /* =============== CSS CUSTOM PROPERTIES =============== */ /* Responsive values using clamp(min, preferred, max) */ /* Themebewusst: verhindert das erzwungene Auto-Darkening mancher Android-Browser (Samsung Internet Dunkelmodus / Chrome „Force dark"), das Orange zu Dunkelrot und Menue-Icons zu Gelb/Gruen verfaelscht. Klasse liegt via setTheme() auf . */ :root { color-scheme: light; } :root.dark-mode { color-scheme: dark; } :root { /* Colors */ --color-primary: #ff6633; --color-dark: #333333; --color-light: #E9E9E4; --color-gray: #cccccc; --color-gray-dark: #666666; /* Typography - fluid scaling */ --font-size-heading-large: clamp(48px, 8vw + 1rem, 108px); --font-size-heading-medium: clamp(36px, 6vw + 0.5rem, 81px); --font-size-body: clamp(14px, 1vw + 0.5rem, 18px); --font-size-body-large: clamp(16px, 1.2vw + 0.5rem, 20px); /* Spacing - fluid scaling */ --spacing-section: clamp(40px, 8vh, 100px); --spacing-container: clamp(16px, 5vw, 80px); --spacing-box-padding: clamp(24px, 4vw, 80px); /* Frame sizes */ --frame-width: clamp(12px, 1.5vw, 20px); --nav-height: 30px; --header-height-max: 123px; --header-height-min: 43px; /* Image sizes - responsive */ --image-alex-width: clamp(288px, 50.4vw, 605px); --image-ben-height: clamp(200px, 40vh, 500px); /* Grid system (Müller-Brockmann) – 3 Spalten + 2 Gutters innerhalb der Seitenränder */ --grid-gutter: 40px; /* 1 Spalte = (Viewport − 2×Seitenrand − 2×Gutter) / 3. Untergrenze 440px = der Wert am 2-Spalten-Bereich (≤1300px), damit die Bilder beim Überschreiten von 1300px nicht schrumpfen (stetiger Übergang statt Sprung 440→372). */ --img-col-width: clamp(440px, calc((100vw - 2 * var(--spacing-container) - 2 * var(--grid-gutter)) / 3), 500px); /* Komposition: Abstand MALEREI-Oberkante zu Daniel-Oberkante. Font-proportional (statt clamp(50px, 8vw, 100px)), damit die Bild-Oberkante MALEREI bei jeder Fensterbreite zum gleichen Anteil penetriert. Kalibriert auf 1240px Fensterbreite: (99.2 + 17) / 108 — inkl. der früheren +17px des Desktop-Blocks (≥1025px), dessen Gap-Override damit entfällt. */ --malerei-alex-gap: calc(var(--font-size-heading-large) * 1.0759); /* Komposition: Abstand KONZEPT-Anchor-Oberkante zu Box-Oberkante */ --konzept-anchor-box-gap: 80px; /* Kalibrierung für Anchor-Position (fester Pixel-Wert) */ --konzept-anchor-calibration: 200px; /* Position offsets - these replace hard-coded vh values */ --heading-top-offset: clamp(100px, 18vh, 200px); --konzept-offset: clamp(300px, 53vh, 600px); --gesichten-offset: clamp(250px, 47vh, 550px); /* Box-Offset jetzt fix in Pixel für konstanten Anchor-Abstand */ --box-margin-offset: 550px; } /* =============== RESET / BASIS =============== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; /* clip statt hidden: verhindert horizontalen Overflow, OHNE die iOS-Fixed-Positionierung zu brechen (overflow:hidden auf dem Root ließ position:fixed / das Grain mitscrollen). */ background-color: #ff6633; /* orange Rahmenfarbe für Overscroll/Safe-Area-Ränder */ overscroll-behavior-y: none; overflow-anchor: none; /* iOS-Scroll-Anchoring aus: die Spacer-Höhenänderung beim Klappen darf scrollY NICHT verschieben (sonst zuckt scrollY → Parallax-Boxen springen). */ } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.6; position: relative; overflow-x: clip; /* s. html: clip bricht die Fixed-Positionierung auf iOS nicht */ color: #333333; background-color: #ff6633; /* Match html background - prevents transparency issues */ overscroll-behavior-y: none; /* Prevent rubber band effect */ overflow-anchor: none; /* s. html: kein scrollY-Zucken bei Dokumenthöhen-Änderungen */ hyphens: auto; -webkit-hyphens: auto; } /* Fixed frame border - split into separate elements for different z-indexes */ /* Bottom border - above everything */ body::before { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 20px; background-color: #E9E9E4; pointer-events: none; z-index: 9997; /* Über allem Inhalt (≤30), aber UNTER dem Klappentext/#bottom-stair-menu (9998) und dem Grain (10000) */ } /* Left and right vertical frame borders - above content but below nav layers */ .frame-border-left, .frame-border-right { position: fixed; top: 29px; /* 1px Überlappung mit stripe-top gegen Sub-Pixel-Linie */ bottom: 19px; /* 1px Überlappung mit stripe-bottom */ width: 20px; background-color: #E9E9E4; pointer-events: none; z-index: 999; /* Above header (998), below nav/stripe-top (1000) */ } .frame-border-left { left: 0; } .frame-border-right { right: 0; } /* Fix for Safari bottom bar color sampling */ .bottom-bar-fix { position: fixed; bottom: 0; left: 0; right: 0; height: 1px; background-color: #E9E9E4; /* Match light frame */ z-index: 10001; /* Above everything */ pointer-events: none; } body.dark-mode .bottom-bar-fix { background-color: #1a1a1a; /* Match dark frame */ } /* Paper texture overlay - coarser grain for main page */ body::after { content: ''; position: fixed; /* Safe Areas aussparen, damit sich der Grain nicht mit den orangen Safe-Area-Flächen überlagert (auf iOS verdrängte das Overlay sonst die Flächen). Desktop: Insets = 0. */ top: env(safe-area-inset-top, 0); bottom: env(safe-area-inset-bottom, 0); left: 0; right: 0; pointer-events: none; z-index: 10000; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.3 0.3 0.3 0 0 0.3 0.3 0.3 0 0 0.3 0.3 0.3 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)' fill='%23808080'/%3E%3C/svg%3E"); background-size: 250px 250px; background-repeat: repeat; opacity: 0.25; /* Light mode - stronger grain */ /* iOS: position:fixed „driftet" beim Momentum-Scroll mit, wenn das Element nicht auf einer eigenen GPU-Ebene liegt → Grain schien mitzuscrollen. Eigene Compositing-Ebene erzwingen, damit es wirklich viewport-fix stehen bleibt. */ transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* Grain-Diagnose (per URL-Hash gesetzt) */ body.no-grain::after, body.no-grain #safe-area-top::after, body.no-grain #safe-area-bottom::after { opacity: 0 !important; } body.loud-grain::after { opacity: 0.9 !important; } /* Grain testweise KOMPLETT entfernt (Nutzer-Wunsch — diesen Block einfach löschen zum Zurückholen). */ body::after, #safe-area-top::after, #safe-area-bottom::after, #safe-area-bottom-dark::after { display: none !important; } /* Dark mode grain - reduced opacity */ body.dark-mode::after { opacity: 0.20; } /* ===== Mobile ===== */ @media (max-width: 640px) { /* Grain als absolute-Layer statt fixed-Overlay: Das ganzflächige FIXED-Overlay verdrängte auf iOS die orangen Safe-Area-Flächen (Konflikt mehrfach bestätigt). Als absolute-Layer (body ist position:relative, #scroll-spacer streckt die volle Höhe) scrollt der Grain mit dem Inhalt → kein fixed-Geschwister mehr, die Safe-Area-Flächen bleiben erhalten. Bonus: absolute repaintet beim Scrollen nicht. */ body::after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: block; } } /* Touch-Mobile: MYTHUS-Sektion (und alles danach) im Dokumentfluss näher an RIVUS rücken. Negativer margin-top zieht den MYTHUS-Anker-Container + nachfolgende Geschwister (mythus-box-wrapper, Daniel, GESICHTEN, Michael) hoch → kleinerer docTop → kürzerer Scrollweg zwischen den Snaps. Nur echtes Touch (hover:none) → narrowHover bleibt unberührt. Wert tunbar. */ @media (hover: none) and (pointer: coarse) and (max-width: 600px) { /* Hinweis: Abstände der Snap-Blöcke werden NICHT hier per margin gesteuert (margin verändert den gemessenen docTop / s-Wert nicht zuverlässig), sondern direkt im JS über die gecachten docTops (z.B. _box2WrapperDocTop für RIVUS). */ #mythus-anchor-container { margin-top: -600px; } } /* Klappbare Textblöcke – nur auf dem Smartphone per JS injiziert. Außerhalb von Touch ausgeblendet, damit der Pfeil nie auf Desktop/Tablet auftaucht. */ .block-arrow { display: none; } /* Initiales Einklappen ohne Animation: sonst misst ein schneller (gecachter) Load-Recalc die Boxen mitten in der 0,5s-Klapp-Animation (zu hoch) → loses Layout, das beim ersten Toggle zusammenrutscht. Klasse wird beim Init kurz gesetzt und nach 2 Frames wieder entfernt. */ body.no-collapse-anim .lang-container { transition: none !important; } @media (hover: none) and (pointer: coarse) and (max-width: 600px) { .content-box, .content-box-2 { position: relative; /* Anker für den absolut zentrierten Pfeil */ } /* Text smooth ein-/ausklappen; oben Platz für den Pfeil, damit er IMMER über dem Text steht. clip-path = unsichtbare Linie an der Oberkante der ersten Zeile (46px): beim Zuklappen rutscht der Text (padding-top 46→0) HINTER dieser Linie weg statt sichtbar über der obersten Zeile in den Pfeilbereich zu ragen (overflow:hidden schneidet erst an der Padding-Box-Oberkante ab). Offen liegt der Text komplett unterhalb → clip wirkungslos. */ .content-box .lang-container, .content-box-2 .lang-container { overflow: hidden; clip-path: inset(46px 0 0 0); max-height: 3000px; opacity: 1; padding-top: 46px; transition: max-height 0.5s ease, opacity 0.35s ease; } .content-box.collapsed .lang-container, .content-box-2.collapsed .lang-container { max-height: 0; opacity: 0; padding-top: 0; /* sonst bleiben 46px stehen (border-box) → ungleich hohe eingeklappte Boxen */ /* NUR beim Zuklappen auch das Padding animieren: der Text gleitet sanft hinter die Clip-Linie. Beim Aufklappen bleibt das Padding schlagartig (wie bisher) — JS misst direkt nach dem Toggle scrollHeight für die max-height, ein animiertes Padding würde dort 46px zu wenig liefern (Text-Pop beim Settle). */ transition: max-height 0.5s ease, opacity 0.35s ease, padding-top 0.5s ease; } /* content-box-2: erster Absatz sitzt durch das globale margin-top:-10px schon bei 36px (nicht 46) → Clip-Linie 10px höher, sonst schneidet sie offen die erste Zeile an. */ .content-box-2 .lang-container { clip-path: inset(36px 0 0 0); } /* Smartphone: kleinerer Zeilenabstand der Box-Texte (war 1.8) */ .content-box p, .content-box-2 p { line-height: 1.25; } /* Eingeklappt: alle Boxen 58px. */ .content-box.collapsed, .content-box-2.collapsed { min-height: 58px; } /* MYTHUS: Basis-Padding 65px → eingeklappt auf 20px reduzieren, damit min-height:58 greift (wie die anderen). */ #mythus-box.collapsed { padding-top: 20px !important; padding-bottom: 20px !important; } /* Padding-Wechsel (65↔20) beim Klappen mitanimieren, sonst springt die MYTHUS-Box schlagartig um +45px (weiter als die anderen Blöcke) und flackert. */ #mythus-box { transition: padding-top 0.5s ease, padding-bottom 0.5s ease; } body.no-collapse-anim #mythus-box { transition: none !important; } /* Dropdown-Pfeil: links, knapp über dem Text, orange, dreht sich beim Aufklappen */ .content-box .block-arrow, .content-box-2 .block-arrow { display: block; position: absolute; top: 23px; left: 24px; /* links, etwa auf Höhe des Text-Anfangs */ z-index: 30; padding: 6px; background: none; border: none; cursor: pointer; line-height: 0; color: #ff6633; /* Light-Mode orange */ pointer-events: auto; /* Wrapper sind pointer-events:none → Pfeil explizit aktivieren */ /* Keine Container-Rotation mehr: der Auf/Zu-Wechsel morpht über die SVG-Linien (s.u.) */ -webkit-tap-highlight-color: transparent; /* kein dunkler Tap-Schleier auf iOS */ -webkit-touch-callout: none; outline: none; } .content-box .block-arrow:focus, .content-box-2 .block-arrow:focus { outline: none; } /* Dark-Mode: dunkelgrau wie der Seiten-Hintergrund (#333333), subtil auf der #1a1a1a-Box */ body.dark-mode .content-box .block-arrow, body.dark-mode .content-box-2 .block-arrow { color: #333333; } .block-arrow svg { width: 38px; height: 38px; display: block; overflow: visible; /* Spitze fährt beim Morph bis y=2 hoch (Round-Cap ragt minimal über) */ } /* Morph auf der Stelle: jede Linie dreht um ihren MITTELPUNKT (8.5,12.5)/(15.5,12.5). Die Spitze fährt vertikal (16→9), die äußeren Endpunkte gegenläufig (9→16) — der Pfeil bleibt als Ganzes an seiner Position (∨ → — → ∧). Basis-Zustand = offen (Spitze oben). */ .block-arrow line { transform-box: view-box; transition: transform 0.45s ease; } .block-arrow .arrow-left { transform-origin: 8.5px 12.5px; transform: rotate(-90deg); } .block-arrow .arrow-right { transform-origin: 15.5px 12.5px; transform: rotate(90deg); } .content-box.collapsed .block-arrow .arrow-left, .content-box-2.collapsed .block-arrow .arrow-left, .content-box.collapsed .block-arrow .arrow-right, .content-box-2.collapsed .block-arrow .arrow-right { transform: rotate(0deg); /* zu: Spitze zeigt nach unten (= aufklappen) */ } /* Pfeil bleibt beim Auf-/Zuklappen fix an seiner Position (top:23px, s. Basis) — die früheren :not(.collapsed)-top-Overrides ließen ihn vertikal mitwandern. */ } /* Background stripes - dark gray frame behind navigation */ .background-stripe-top, .background-stripe-bottom, .background-stripe-left, .background-stripe-right { position: fixed; background-color: #333333; z-index: 1; /* Above body background, below content (5) and header (998) */ pointer-events: none; } .background-stripe-top { top: 0; left: 0; right: 0; height: 30px; z-index: 1000; /* Same level as nav — covers frame-border corners at top */ } .background-stripe-bottom { bottom: 0; left: 0; right: 0; height: 20px; } .background-stripe-left { top: 0; bottom: 0; left: 0; width: 20px; } .background-stripe-right { top: 0; bottom: 0; right: 0; width: 20px; } /* Vertikale Backing-Streifen hell wie der Rahmen (#E9E9E4). Sie liegen hinter den hellen frame-border-left/right und sind normal verdeckt — aber wenn die Safari-URL-Leiste beim Hochscrollen die Viewport-Höhe ändert, ziehen die fixierten Rahmen kurz nach und gäben sonst das dunkle #333333 frei (kurzes schwarzes Durchblitzen). Dark-Mode bleibt #1a1a1a. */ body:not(.dark-mode) .background-stripe-left, body:not(.dark-mode) .background-stripe-right { background-color: #E9E9E4; } /* =============== NAVIGATION =============== */ /* Nav-Streifen-Hintergrund: nur Mobile sichtbar (s. @media unten); Desktop aus. */ .nav-bar-bg { display: none; } .main-nav { position: fixed; top: 0; left: 0; width: 100%; background-color: rgba(51, 51, 51, 0.8); /* 80% opaque dark gray with blur */ backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); z-index: 1000; box-shadow: none; height: 30px; cursor: pointer; } /* Solid layer below nav - content scrolls between these layers */ .nav-container { max-width: 1400px; margin: 0 auto; padding: 0 5%; display: flex; justify-content: center; align-items: center; height: 30px; position: relative; } .nav-logo { display: none; } .nav-menu { display: flex; list-style: none; gap: 2.5rem; } .nav-menu li a { color: #E9E9E4; text-decoration: none; font-weight: 500; transition: color 0.3s; position: relative; } /* Hover (Desktop) / kurzer Tap (iPad): Wort orange einfaerben (statt Unterstrich-Animation). */ .nav-menu li a:hover { color: #ff6633; } /* "Impressum & Datenschutz": In der Desktop-Leiste einzeilig — der
im Label gilt nur dem Burger-Menue (dort wieder display: inline). */ .nav-menu li a.nav-legal br { display: none; } body.dark-mode .nav-menu li a:hover { color: #ff6633; /* eigene Regel: sonst gewinnt body.dark-mode .nav-menu li a (gleiche Spezifitaet, spaeter) */ } /* Mobile Navigation Toggle */ .nav-toggle { display: none; flex-direction: column; background: none; border: none; cursor: pointer; padding: 0; } .nav-toggle span { width: 25px; height: 3px; background-color: #E9E9E4; margin: 3px 0; transition: 0.3s; } /* =============== HEADER =============== */ /* Orange backdrop behind header - prevents blur artifacts */ .header-backdrop { position: fixed; top: 0; left: 0; right: 0; height: 153px; /* Nav (30px) + shrinking Header max (123px) */ background-color: #ff6633; z-index: 2; /* Above background-stripes (1), below content (5) */ pointer-events: none; } .sub-page .header-backdrop { height: 73px; /* Nav (30px) + fixed header (43px) */ } header { position: fixed; top: 30px; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; background-color: rgba(255, 102, 51, 0.75); /* 75% opaque orange with blur */ backdrop-filter: blur(25px) saturate(100%); -webkit-backdrop-filter: blur(25px) saturate(100%); border-top: none; border-bottom: none; z-index: 998; box-shadow: none; } /* Shrinking header (landing page) - starts at 123px, shrinks to 43px */ .shrinking-header { height: 123px; transition: none; /* No CSS transition, JS handles it directly */ } /* Fixed header (other pages) - always 43px */ .fixed-header { height: 43px; } .fixed-header .logo-gif { height: 32px; transform: translate(-50%, calc(-50% - 2px)); } .header-content { position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } /* Logo video - replaces logo text */ .logo-video, .logo-gif { height: 86px; /* 20% smaller than MALEREI (108px × 0.8 = 86px) */ width: auto; max-width: calc(100vw - 2rem - 40px); /* Nie breiter als Fenster minus Padding und Rahmen */ object-fit: contain; /* Seitenverhältnis beibehalten, nie stauchen */ will-change: transform, height; transition: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; } /* Logo text »MARTIN ZANKER« (ersetzt das frühere Logo-GIF). Auf der Landingpage skaliert die Shrink-Animation (updateHeaderSize) die font-size; der Clamp hier ist nur der initiale Wert vor dem ersten JS-Frame. Subseiten: feste Größe (s. unten). */ .logo-text { font-family: 'Inter', sans-serif; font-size: clamp(34px, 6vw, 86px); font-weight: 800; letter-spacing: -0.08em; /* Same tight spacing as MALEREI */ text-transform: uppercase; margin: 0; color: var(--color-dark); /* exakt wie »MALEREI« (main-heading-filled) */ will-change: transform, font-size; transition: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; display: none; /* Standard (Desktop/iPad): animiertes Logo-Bild; Text nur auf Smartphones */ } body.dark-mode .logo-text { color: #ff6633; /* orange im Dark-Mode (wie das frühere dunkle Logo) */ } /* Subseiten haben einen fixen (nicht schrumpfenden) Header → feste Logo-Größe */ .fixed-header .logo-text { font-size: 28px; } /* Echte Smartphones: Text-Logo (mit Intro-Animation) statt animiertem Bild */ @media (hover: none) and (pointer: coarse) and (max-width: 600px) { .logo-gif { display: none !important; } .logo-text { display: block; } } /* =============== MAIN HEADING =============== */ .main-heading-container { position: relative; display: grid; place-items: start center; min-height: 100vh; padding-top: var(--heading-top-offset); z-index: 5; } /* =============== KONZEPT HEADING =============== */ .konzept-heading-container { position: relative; display: grid; place-items: start start; min-height: 100vh; padding-top: calc(50vh + 18.5vh); /* Bei schmalem Fenster nach rechts verschieben (26px bei ≤400px, 0px bei ≥1400px) */ margin-left: max(0px, calc(26px - (100vw - 400px) * 0.026)); padding-left: var(--spacing-container); } .konzept-heading { font-family: 'Inter', sans-serif; font-size: var(--font-size-heading-large); font-weight: 850; letter-spacing: -0.08em; text-transform: uppercase; margin: 0; white-space: nowrap; /* kein Zeilenumbruch (z.B. spanisch CONCEPTO) */ } /* Spanisch: CONCEPTO ist breiter als das Fenster → Überschrift weiter nach links (Anker folgt automatisch, da _konzeptAnchorLeft aus der Filled-Position gemessen wird). NUR der echte KONZEPT-Container — der MYTHUS-Anker teilt sich die Klasse, soll aber wie auf der deutschen Seite stehen bleiben, daher per :not() ausgenommen. */ @media (max-width: 640px) { body.is-es .konzept-heading-container:not(#mythus-anchor-container) { margin-left: -20px; } } /* iPhone-Block-Rotation: X-Position der Anker mitrotieren. MYTHUS-Anker (zeigt RIVUS) verliert sein margin-left, GESICHTEN-Anker (zeigt MYTHUS) bekommt MYTHUS' margin-left. RIVUS-Anker = unverändert (RIVUS und GESICHTEN teilen ohnehin dieselbe X-Position). */ body.phone-blocks-rotated #mythus-anchor-container { margin-left: 135px !important; /* RIVUS-Schriften nach rechts (122 + 8 + 5) */ } /* GESICHTEN-Anker zeigt jetzt MYTHUS → linksbündig (start start) + volle Größe wie das echte MYTHUS, statt rechtsbündig/60px der GESICHTEN-Position. */ body.phone-blocks-rotated #gesichten-anchor-container { place-items: start start !important; padding-left: var(--spacing-container) !important; padding-right: 0 !important; margin-left: max(0px, calc(26px - (100vw - 400px) * 0.026)) !important; } body.phone-blocks-rotated #gesichten-anchor-container .gesichten-anchor-filled, body.phone-blocks-rotated #gesichten-anchor-container .gesichten-anchor-outline, body.phone-blocks-rotated #gesichten-anchor-gray { font-size: var(--font-size-heading-large) !important; } /* RIVUS-Anker zeigt nach Rotation GESICHTEN (längeres Wort) → kleiner. */ body.phone-blocks-rotated .rivus-anchor-filled, body.phone-blocks-rotated .rivus-anchor-outline, body.phone-blocks-rotated .rivus-anchor-gray { font-size: calc(var(--font-size-heading-large) * 0.85) !important; } /* GESICHTEN (im rivus-anchor-Slot): z-Ebenen über die Bilder heben (gray z:3, filled z:4 – wie das MYTHUS/GESICHTEN-Anchor-System), sonst verschwindet GESICHTEN durch die Bild-Rotation hinter dem pos2-Bild (Bild erreicht beim Wipe z:2 und liegt im DOM nach .rivus-anchor-gray). Position bleibt nativ rivus (Basis-Top +40px), damit Anchor→Textblock-Abstand wie bei RIVUS ist. */ body.phone-blocks-rotated .rivus-anchor-gray { z-index: 3 !important; } body.phone-blocks-rotated .rivus-anchor-filled { z-index: 4 !important; } /* GESICHTEN-Anchor filled+outline 15px tiefer (Basis +40px → +55px). */ body.phone-blocks-rotated #rivus-anchor-container .rivus-anchor-filled, body.phone-blocks-rotated #rivus-anchor-container .rivus-anchor-outline { top: calc(var(--gesichten-offset) + 38px + 352px) !important; } /* RIVUS-Schriften (im mythus-anchor-Slot) filled+outline: ~320px tiefer, damit sie am Snap-Punkt auf dem grauen Anker liegen (Debug: fill lag ~342px über gray). Basis +352px → +912px. */ body.phone-blocks-rotated #mythus-anchor-container .konzept-heading-filled, body.phone-blocks-rotated #mythus-anchor-container .konzept-heading-outline { top: calc(var(--konzept-offset) + 352px + 560px) !important; } /* Ben-Treppentext (nach Rotation im daniel-Slot) 2px höher. */ body.phone-blocks-rotated #mythus-daniel-image-with-info .words-stair { transform: translate3d(0, -2px, 0) !important; } /* Michael-Treppentext: Nach der Rotation liegen Michaels Zeilen in #ben-image-with-info (sichtbar bzw. als Klon im #ben-stair-overlay), während #michael-image-with-info jetzt Daniel enthält. Die michael-Treppen-Regeln (auf #michael-image-with-info gescoped) greifen dadurch nirgends mehr → nth-child-Fallback verschiebt die Stufen (versteckte name-full/desktop-3 mitgezählt). michael-* ist eindeutig, daher hier per Klasse global (gated) – greift im Container UND im Klon. */ body.phone-blocks-rotated .michael-name { left: 16px; transform: skew(60deg, -30deg) scaleY(0.66667); } body.phone-blocks-rotated .michael-paren { left: 32px; transform: skew(0deg, -30deg) scaleY(1.33333); } body.phone-blocks-rotated .michael-year { left: 48px; transform: skew(60deg, -30deg) scaleY(0.66667); } body.phone-blocks-rotated .michael-mobile-3 { left: 64px; transform: skew(0deg, -30deg) scaleY(1.33333); } body.phone-blocks-rotated .michael-mobile-4 { left: 80px; transform: skew(60deg, -30deg) scaleY(0.66667); } body.phone-blocks-rotated .michael-canvas { left: 96px; transform: skew(0deg, -30deg) scaleY(1.33333); } body.phone-blocks-rotated .michael-size { left: 112px; transform: skew(60deg, -30deg) scaleY(0.66667); } /* Michael-Treppentext (ben-Slot bzw. Overlay-Klon) 50px höher (ul-Transform, Zeilen-Skews bleiben). */ body.phone-blocks-rotated #ben-image-with-info .words-stair, body.phone-blocks-rotated #ben-stair-overlay .words-stair { transform: translate3d(0, -50px, 0) !important; } /* Fading effect for filled headings */ .main-heading-filled, .konzept-heading-filled, .unterpunkt-heading-filled, .gesichten-anchor-filled { transition: opacity 0.3s ease; } .faded-out { opacity: 0; } /* FOUC vermeiden: Anchor-Schriften (KONZEPT/RIVUS/MYTHUS/GESICHTEN) erst zeigen, wenn JS sie positioniert hat — vorher stehen sie per transform:0 oben links übereinander. body.layout-ready wird nach dem ersten recalculateLayout() gesetzt. */ .konzept-heading-container, #rivus-anchor-container, #gesichten-anchor-container, .konzept-heading-anchor, .rivus-anchor-gray, #mythus-anchor, #gesichten-anchor-gray { transition: opacity 0.25s ease; } body:not(.layout-ready) .konzept-heading-container, body:not(.layout-ready) #rivus-anchor-container, body:not(.layout-ready) #gesichten-anchor-container, body:not(.layout-ready) .konzept-heading-anchor, body:not(.layout-ready) .rivus-anchor-gray, body:not(.layout-ready) #mythus-anchor, body:not(.layout-ready) #gesichten-anchor-gray { opacity: 0; /* auch die GRAUEN Anker (separate h2 außerhalb der Container) — stapelten sonst beim Laden oben links */ } .konzept-heading-filled { color: #333333; grid-column: 1; grid-row: 1; margin: 0; position: relative; z-index: 1; /* Behind box (2) */ pointer-events: none; } .konzept-heading-anchor { color: var(--color-gray); position: absolute; /* Position (top/left) wird per JavaScript auf load/resize gesetzt */ top: 0; left: 0; pointer-events: none; will-change: transform; font-family: 'Inter', sans-serif; font-size: var(--font-size-heading-large); font-weight: 850; letter-spacing: -0.08em; text-transform: uppercase; margin: 0; z-index: 0; /* Hinter box (DOM-Reihenfolge: Box überdeckt Anchor-Überlappung) */ } .konzept-heading-outline { color: transparent; -webkit-text-stroke: 2px var(--color-dark); text-stroke: 2px var(--color-dark); grid-column: 1; grid-row: 1; margin: 0; position: relative; z-index: 5; pointer-events: none; } /* =============== CONTENT BOX =============== */ .content-box-wrapper { position: relative; padding-top: 0px; margin-top: calc(var(--box-margin-offset) * -1); padding-left: var(--spacing-container); z-index: 2; } .content-box { background-color: var(--color-gray); padding: var(--spacing-box-padding); width: 120vw; max-width: none; border-radius: 0; position: relative; will-change: transform; } /* Hintergrund nach links verlängern (Boxen sind rechtsseitig positioniert) */ .content-box::before { content: ''; position: absolute; top: 0; bottom: 0; right: 100%; width: 100vw; background-color: var(--color-gray); z-index: 0; } /* Box-specific grain removed - using global page grain instead */ .content-box h2, .content-box p { position: relative; z-index: 2; } .content-box h2 { color: #ff6633; font-size: 2rem; margin-bottom: 1.5rem; font-weight: 700; } .content-box p { color: #1a1a1a; /* Light-Mode: dunkelgrau statt orange (Dark-Mode-Override bleibt #E9E9E4) */ font-size: clamp(0.9rem, 0.7rem + 1vw, 1.2rem); line-height: 1.8; margin-bottom: 1.2rem; max-width: calc(80vw - 175px); /* Adjusted for frame, +80px weiter links */ hyphens: auto; text-align: justify; } .content-box p:last-child { margin-bottom: 0; } /* =============== RIVUS ANCHOR CONTAINER =============== */ .gesichten-anchor-container, .rivus-anchor-container { position: relative; display: grid; place-items: start end; /* Rechtsbündig */ min-height: 100vh; padding-top: calc(50vh + 18.5vh); /* Abstand zum rechten Rand (gleich wie Box 1 zum linken Rand) */ padding-right: var(--spacing-container); } .gesichten-anchor-filled, .gesichten-anchor-outline, .gesichten-anchor-gray, .rivus-anchor-filled, .rivus-anchor-outline, .rivus-anchor-gray { font-family: 'Inter', sans-serif; font-size: var(--font-size-heading-large); font-weight: 850; letter-spacing: -0.08em; text-transform: uppercase; margin: 0; } .gesichten-anchor-filled, .gesichten-anchor-outline, .gesichten-anchor-gray { hyphens: none; } .gesichten-anchor-filled, .rivus-anchor-filled { color: var(--color-dark); grid-column: 1; grid-row: 1; position: relative; top: var(--gesichten-offset); z-index: 1; pointer-events: none; } .gesichten-anchor-gray, .rivus-anchor-gray { color: var(--color-gray); position: absolute; /* Position (top/left) wird per JavaScript auf load/resize gesetzt */ top: 0; left: 0; pointer-events: none; will-change: transform; z-index: 0; } .gesichten-anchor-outline, .rivus-anchor-outline { color: transparent; -webkit-text-stroke: 2px var(--color-dark); text-stroke: 2px var(--color-dark); grid-column: 1; grid-row: 1; position: relative; top: var(--gesichten-offset); z-index: 5; pointer-events: none; } /* =============== SECOND CONTENT BOX =============== */ .content-box-wrapper-2 { position: relative; padding-top: 0px; margin-top: clamp(-500px, -74vh, -350px); /* Rechts-Offset wird per JavaScript im Transform gesteuert */ padding-right: var(--spacing-container); z-index: 2; } .content-box-2 { background-color: var(--color-gray); padding: var(--spacing-box-padding); padding-top: calc(var(--spacing-box-padding) + 5px); width: 120vw; max-width: none; border-radius: 0; position: relative; will-change: transform; margin-left: -20vw; } /* RIVUS: Hintergrund nach rechts verlängern (linksseitig positioniert) */ .content-box-wrapper-2 > .content-box-2::after { content: ''; position: absolute; top: 0; bottom: 0; left: 100%; width: 100vw; background-color: var(--color-gray); z-index: 0; } /* GESICHTEN: Hintergrund nach links verlängern (rechtsseitig positioniert) */ #gesichten-content-box::before { content: ''; position: absolute; top: 0; bottom: 0; right: 100%; width: 100vw; background-color: var(--color-gray); z-index: 0; } .content-box-2 h2, .content-box-2 p { position: relative; z-index: 2; } /* RIVUS-Text: sanfter Übergang der per JS gesetzten Zentrierung/Breite bei Breiten-Änderung. An .theme-transitioning gekoppelt → beim ersten Laden kein Animations-Slide. */ body.theme-transitioning #rivus-content-box p { transition: transform 0.35s ease, max-width 0.35s ease; } /* Niveau-/Sprachwechsel (slideTransition, verdeckt unterm Overlay): Transition aussetzen, damit die Blockpositionierung die ENDhöhe der RIVUS-Box misst statt eines animierten Zwischenwerts (sonst variiert der RIVUS→MYTHUS-Abstand um bis zu ~70px). */ body.no-image-transition #rivus-content-box p { transition: none !important; } .content-box-2 h2 { font-family: 'Inter', sans-serif; font-size: 1.8rem; margin-top: 0; margin-bottom: 1.5rem; color: #ff6633; font-weight: 700; } .content-box-2 p { color: #1a1a1a; /* Light-Mode: dunkelgrau statt orange (Dark-Mode-Override bleibt #E9E9E4) */ font-size: clamp(0.9rem, 0.7rem + 1vw, 1.2rem); line-height: 1.8; margin-bottom: 1.2rem; max-width: calc(70vw - 20px - 10rem - 150px); margin-left: calc(20vw + 20px + 180px); text-align: justify; } .content-box-2 p:first-child { margin-top: -10px; } #rivus-content-box .lang-container { padding-top: 1.5em; } #mythus-box .lang-container { margin-top: -1.5em; } /* GESICHTEN-Box: Text zentriert, breiter (Landscape + Desktop) */ #gesichten-content-box p { margin-left: 20vw; margin-right: auto; max-width: calc(60vw - 2 * var(--spacing-box-padding)); } /* =============== UNTERPUNKT 1 HEADING =============== */ .unterpunkt-heading-container { position: relative; display: grid; place-items: start start; min-height: 100vh; padding-top: calc(50vh + 735px); padding-left: var(--spacing-container); } .unterpunkt-heading { font-family: 'Inter', sans-serif; font-size: var(--font-size-heading-medium); font-weight: 850; letter-spacing: -0.08em; text-transform: uppercase; margin: 0; } .unterpunkt-heading-filled { color: var(--color-dark); grid-column: 1; grid-row: 1; margin: 0; position: relative; z-index: 1; pointer-events: none; } .unterpunkt-heading-outline { color: transparent; -webkit-text-stroke: 2px var(--color-dark); text-stroke: 2px var(--color-dark); grid-column: 1; grid-row: 1; margin: 0; position: relative; z-index: 5; pointer-events: none; } .unterpunkt-heading-image { display: block; width: var(--img-col-width); height: auto; object-fit: cover; will-change: transform; } /* Container for unterpunkt heading image */ .unterpunkt-heading-container .image-with-info { position: absolute; right: calc(clamp(20px, 5vw, 55px) + 80px); /* 80px weiter links */ /* top wird per JavaScript berechnet */ grid-column: 1; grid-row: 1; z-index: 4; /* Unter RIVUS Outline (5) */ transition: top 0.3s ease; } body.no-image-transition .unterpunkt-heading-container .image-with-info, body.no-image-transition .content-box-wrapper, body.no-image-transition .content-box-wrapper-2, body.no-image-transition .mythus-box-wrapper, body.no-image-transition .gesichten-content-box-wrapper, body.no-image-transition .main-heading-image { transition: none !important; } .main-heading { font-family: 'Inter', sans-serif; font-size: var(--font-size-heading-large); font-weight: 850; letter-spacing: -0.08em; text-transform: uppercase; margin: 0; } /* MALEREI-Überschrift: 2° von links nach rechts ansteigend (nur CSS, kein JS-Transform) */ .main-heading { rotate: -2deg; } /* Alle anderen Überschriften: rotate(-2deg) wird im JS-Transform eingebaut */ .main-heading-filled { color: var(--color-dark); grid-column: 1; grid-row: 1; z-index: 1; } .main-heading-image { display: block; width: 100%; max-width: var(--image-alex-width); height: auto; object-fit: cover; will-change: transform; } /* Container for main heading image */ /* Alex's top edge is --malerei-alex-gap below MALEREI's top edge */ .main-heading-container .image-with-info { grid-column: 1; grid-row: 1; z-index: 2; margin-top: var(--malerei-alex-gap); } /* iPad im Landscape: MALEREI (bzw. PAINTING/PINTURA) UNTER das Alex-Bild legen und das Bild höher setzen — ähnlich wie auf dem iPhone. Klasse wird per JS gesetzt (ipad-landscape), da iPad-Landscape per CSS nicht von Desktop unterscheidbar ist. Werte tunbar: - heading-top-offset: vertikale Position von MALEREI (größer = tiefer) - malerei-alex-gap : negativ → Bild über MALEREI (mehr negativ = Bild höher / mehr Abstand) - image-alex-width : Bildgröße (Alex ist ~quadratisch, Höhe ≈ Breite) */ body.ipad-landscape { --image-alex-width: clamp(431px, 43.1vw, 546px); /* wächst nach unten (Oberkante = margin-top, bleibt) */ --heading-top-offset: 630px; /* MALEREI 160px tiefer */ --malerei-alex-gap: calc(-30vw - 70px); /* kompensiert die 160px, damit die Bild-Oberkante bleibt */ } @media (min-width: 641px) { .main-heading-container .words-stair { margin-bottom: 36px; /* 40px höher (war -4) */ margin-left: 72px; /* 40px weiter rechts (war 32) */ } } @media (min-width: 641px) { #mythus-daniel-container .words-stair { margin-left: 182px; /* 230px weiter rechts als globale -48px */ margin-bottom: -14px; /* 110px tiefer als globale 96px */ } #michael-image-with-info .words-stair { margin-left: 152px; /* 200px weiter rechts als globale -48px */ margin-bottom: 1px; /* 95px tiefer als globale 96px */ } } @media (min-width: 1025px) { #michael-image-with-info .words-stair { width: max-content; /* verhindert Flex-Stretch-Kollaps bei großem margin-left */ margin-left: 432px; /* 250px weiter rechts als 182px */ margin-bottom: -99px; /* 100px tiefer als 1px */ } #ben-image-with-info .words-stair { margin-bottom: 51px; } #mythus-daniel-image-with-info .image-info { top: 80px; } #mythus-daniel-image-with-info .words-stair { transform: translate(30px, 200px); } } .main-heading-outline { color: transparent; -webkit-text-stroke: 2px var(--color-dark); text-stroke: 2px var(--color-dark); grid-column: 1; grid-row: 1; z-index: 3; } /* =============== SECTIONS =============== */ section { position: relative; width: 100%; min-height: 50vh; padding: 5% 8%; } .hero-section { min-height: 60vh; padding-top: 3%; /* margin-top set dynamically by JavaScript */ } .gallery-section { min-height: 100vh; padding-top: 10%; } .theory-section { min-height: 60vh; padding: 10% 8%; } .design-section { min-height: 60vh; padding: 10% 8%; } /* =============== TEXT-CONTAINER =============== */ .text-container { position: relative; font-family: 'Inter', sans-serif; line-height: 0.8; margin-bottom: 5%; } .text-container-2 { margin-bottom: 5%; } .text-container-3 { text-align: right; margin-left: auto; margin-right: 10%; max-width: 600px; } .text-container-4 { margin-top: 5%; } .andron-part { font-family: 'Inter', sans-serif; margin-left: 12%; } /* =============== TEXT-STYLES =============== */ .text-behind, .text-front { position: absolute; font-size: clamp(3rem, 8vw, 8rem); font-weight: bold; transition: opacity 0.3s ease-in-out; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; white-space: nowrap; } /* =============== IMAGE GRID =============== */ .image-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 5%; } /* =============== IMAGE CONTAINER =============== */ .image-container, .image-container-2, .image-container-3, .image-container-4, .image-container-5 { position: relative; width: 100%; aspect-ratio: 3/4; overflow: hidden; border-radius: 4px; cursor: pointer; } .parallax-image, .hover-image { position: absolute; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.5s ease-in-out, transform 0.5s ease; } .hover-image { opacity: 0; } .image-container:hover .hover-image, .image-container-2:hover .hover-image, .image-container-3:hover .hover-image, .image-container-4:hover .hover-image, .image-container-5:hover .hover-image { opacity: 1; z-index: 4; } .image-container:hover .parallax-image, .image-container-2:hover .parallax-image, .image-container-3:hover .parallax-image, .image-container-4:hover .parallax-image, .image-container-5:hover .parallax-image { opacity: 0; transform: scale(1.05); } /* =============== RESPONSIVE DESIGN =============== */ /* 3 Breakpoints: Desktop (>1024px), Tablet (641-1024px), Mobile (<=640px) */ /* ===== TABLET (max-width: 1024px) ===== */ @media (max-width: 1024px) { :root { --spacing-container: clamp(16px, 4vw, 60px); --spacing-box-padding: clamp(20px, 3vw, 60px); --image-alex-width: clamp(180px, 40vw, 350px); --image-ben-height: clamp(180px, 35vh, 400px); /* Box-Offset und Kalibrierung fix für Tablet */ --box-margin-offset: 450px; --konzept-anchor-calibration: 160px; /* Tablet: 2-Spalten-Raster (Bild + Text) statt 3-Spalten */ --grid-gutter: 30px; --img-col-width: clamp(200px, calc((100vw - 2 * var(--spacing-container) - var(--grid-gutter)) / 2), 420px); } } /* ===== SCHMALMODUS HOVER-GERÄT (≤ 639px, Maus/Trackpad) ===== */ @media (hover: hover) and (pointer: fine) and (max-width: 639px) { :root { --image-alex-width: clamp(252px, 56vw, 490px); } } /* ===== SCHMALES DESKTOP (1025–1300px): noch 2-Spalten für größere Bilder ===== */ @media (min-width: 1025px) and (max-width: 1300px) { :root { --grid-gutter: 30px; --img-col-width: clamp(260px, calc((100vw - 2 * var(--spacing-container) - var(--grid-gutter)) / 2), 440px); } } /* ===== TABLET - Ben neben Text (601-1024px) ===== */ @media (max-width: 1024px) and (min-width: 641px) { .unterpunkt-heading-container .image-with-info { right: clamp(20px, 3vw, 40px); } .content-box-2 p { max-width: calc(60vw - 40px - 8rem); margin-left: calc(20vw + 20px + 120px); } #ben-container .words-stair { margin-left: -128px; /* 80px weiter links als globale -48px */ margin-bottom: -154px; /* 250px tiefer als globale 96px */ } } @media (max-width: 1024px) and (min-width: 641px) { body:not(.orient-landscape) #ben-container .words-stair { margin-left: -98px; /* +30px gegenüber iPad allgemein */ } } @media (max-width: 1400px) and (min-width: 641px) { body.orient-landscape #ben-container .words-stair { margin-left: -38px; /* 90px rechts von iPad allgemein (-128px) */ margin-bottom: 21px; /* 45px tiefer als vorher (66px) */ } body.orient-landscape #mythus-daniel-container .words-stair { margin-left: -18px; /* 200px links von Desktop (182px) */ margin-bottom: 56px; /* 70px höher als Desktop (-14px) */ } /* iPad Portrait: Daniel-Treppentext 280px links, 30px hoch (ggü. global -48px/96px). Media bis 1400px (nicht 1024), da iPad-Safari im Desktop-Modus in Portrait oft >1024 meldet. */ body:not(.orient-landscape) #mythus-daniel-container .words-stair { margin-left: -328px; margin-bottom: 126px; } } /* ===== MOBILE (max-width: 640px) ===== */ @media (max-width: 640px) { :root { --spacing-container: 16px; --spacing-box-padding: 20px; --image-alex-width: clamp(242px, 82.6vw, 386px); --image-ben-height: 80vh; --heading-top-offset: 490px; /* MALEREI + Alex 50px höher (war 540) */ --malerei-alex-gap: clamp(-385px, 8vw, -335px); /* -385px tiefer als Standard */ --konzept-offset: clamp(200px, 40vh, 350px); --gesichten-offset: clamp(180px, 35vh, 300px); /* Schriftgrößen proportional zum iPad skaliert (Faktor ~0.5) */ --font-size-heading-large: clamp(63px, 19.6vw, 82px); --font-size-heading-medium: clamp(43px, 13.7vw, 59px); /* Box-Offset fix für Mobile */ --box-margin-offset: 350px; /* Kalibrierung für Mobile (fester Pixel-Wert) */ --konzept-anchor-calibration: 120px; } /* Letter-spacing-Kompensation: trailing -0.08em verschiebt visuellen Mittelpunkt */ .main-heading { padding-right: 0.08em; } /* Unterpunkt-Bild: Position wird per JS gesetzt */ .unterpunkt-heading-container .image-with-info { position: absolute; right: auto; left: auto; } /* Wrapper-Container transparent — pointer-events werden über .content-box/.content-box-2 geregelt */ .content-box-wrapper, .content-box-wrapper-2, #mythus-box-wrapper, #gesichten-content-box-wrapper { z-index: 10; pointer-events: none; } /* Mobile: Bilder hinter allem (Schriften + Textboxen) */ #ben-image-with-info, #mythus-daniel-image-with-info, #michael-image-with-info, #marcus-image-with-info { position: fixed !important; left: 20px !important; width: calc(100vw - 40px) !important; height: auto !important; max-height: 80vh !important; overflow: visible; opacity: 0; transition: opacity 0.2s ease; z-index: 0; transform: none !important; pointer-events: none; } /* Klappentexte (Bild-Captions) über die Rahmen (999/9997) heben – aber UNTER Grain (10000) und Hamburger (10002). Dazu die Bild-Container entkoppeln (kein Stacking-Context): auch die per JS beim Einblenden gesetzte inline z-index:0 wird mit !important überstimmt. Die Treppenschrift steigt dadurch im Root-Context auf 9998; die Bilder bleiben statisch dahinter. Gewollter Nebeneffekt: der Text liegt dann auch über den großen Schriftzügen (RIVUS/MYTHUS …). */ #ben-image-with-info, #mythus-daniel-image-with-info, #michael-image-with-info, #marcus-image-with-info { z-index: auto !important; } #mythus-daniel-image-with-info .words-stair, #michael-image-with-info .words-stair, #marcus-image-with-info .words-stair { position: relative; z-index: 9998; } #ben-stair-overlay { z-index: 9998; /* war 20 – Ben-Caption liegt als Root-Overlay ebenfalls über dem Rahmen */ } #ben-container, #mythus-daniel-container { z-index: auto; /* Kein Stacking-Context – Ben/Daniel landen im Root-Context */ } #ben-image-with-info .unterpunkt-heading-image, #mythus-daniel-image-with-info .unterpunkt-heading-image, #michael-image-with-info .unterpunkt-heading-image, #marcus-image-with-info .unterpunkt-heading-image { width: 100% !important; height: auto !important; max-height: 80vh !important; margin-top: 0 !important; object-fit: cover; object-position: top center; } .konzept-heading-outline, .gesichten-anchor-outline, .rivus-anchor-outline { z-index: 15; } /* RIVUS: Bild+Gradient(0) < Anchor(2) < Filled(3) < Outline(15) < StairOverlay(20) < Ghost(21) */ .rivus-anchor-gray { z-index: 2; } .rivus-anchor-filled { z-index: 3; } /* Original-Treppentext im Bild-Container verstecken (Gradient bleibt sichtbar) */ #ben-image-with-info .words-stair { visibility: hidden; } /* Ben-Treppentext-Overlay: eigener Stacking-Context im Root, über allen Anchor-Schriften */ #ben-stair-overlay { position: fixed; z-index: 20; left: 20px; width: calc(100vw - 40px); display: flex; flex-direction: column; justify-content: flex-end; padding: 14px 16px; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; box-sizing: border-box; } /* Anchor-Container transparent, aber sichtbare Kindelemente blockieren Taps */ #rivus-anchor-container, #mythus-anchor-container, #gesichten-anchor-container { pointer-events: none; } /* Wipe-Z-Reihenfolge: Images(z:1/2) < Gray(z:3) < Filled(z:4) < TextBox(z:10) < Outline(z:15) */ #mythus-anchor { z-index: 3; } #gesichten-anchor-gray { z-index: 3; } #mythus-anchor-container .konzept-heading-filled, #gesichten-anchor-container .gesichten-anchor-filled { z-index: 4; } /* Graue Ebenen blockieren weiterhin Taps auf verdeckten Bildbereichen. */ .rivus-anchor-gray, .gesichten-anchor-gray { pointer-events: auto; } /* Filled + Outline tap-DURCHLÄSSIG machen: die Outline liegt mit z:15 über der Box (z:10) und damit über den Aufklapp-Pfeilen; sonst fängt sie deren Taps ab. Sie tragen keine eigene Interaktion, daher gefahrlos auf pointer-events:none. */ .rivus-anchor-filled, .rivus-anchor-outline, .konzept-heading-filled, .konzept-heading-outline, .gesichten-anchor-filled, .gesichten-anchor-outline { pointer-events: none; } /* Content-Boxen blockieren Taps auf verdeckten Bildbereichen (Wrapper bleibt transparent) */ .content-box, .content-box-2 { pointer-events: auto; } /* RIVUS-Schriften tiefer auf Mobile */ #rivus-anchor-container .rivus-anchor-filled, #rivus-anchor-container .rivus-anchor-outline { top: calc(var(--gesichten-offset) + 40px + 352px) !important; } /* MYTHUS-Schriften tiefer auf Mobile (analog RIVUS) */ #mythus-anchor-container .konzept-heading-filled, #mythus-anchor-container .konzept-heading-outline { top: calc(var(--konzept-offset) + 352px) !important; } /* GESICHTEN-Schriften tiefer auf Mobile (analog RIVUS/MYTHUS) */ #gesichten-anchor-container .gesichten-anchor-filled, #gesichten-anchor-container .gesichten-anchor-outline { top: calc(var(--gesichten-offset) + 352px) !important; font-size: 60px !important; } #gesichten-anchor-gray { font-size: 60px !important; } /* Clip-Container übernimmt overflow:hidden; äußerer Container kann overflow:visible */ .image-clip { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } /* Mobile: Overlay deckt volle Bildfläche ab (inset: 0 aus Basis-Regel bleibt erhalten) */ /* Zeichen werden via .info-active .char (aus Basis-Regel) sichtbar */ .unterpunkt-heading-container .info-line { font-size: clamp(12px, 2.5vw, 16px); } .unterpunkt-heading-container .info-details { font-size: clamp(10px, 2vw, 14px); margin-left: 0; } /* KONZEPT-Box: Blocksatz, symmetrisch innerhalb des sichtbaren Bereichs */ .content-box p { text-align: justify; max-width: calc(100vw - 72px); /* 2×spacing-container (16px) + 2×box-padding (20px) */ margin-left: 0; margin-right: 0; } /* Text nimmt volle Breite ein (kein Ben daneben) */ .content-box-2 p { max-width: calc(100vw - 40px - 3rem); margin-left: calc(20vw + 20px); } /* Boxen weniger breit auf Mobile */ .content-box, .content-box-2 { width: 110vw; } .content-box-2 { margin-left: -10vw; } /* KONZEPT-Box: Volle Breite, Blocksatz, mittig */ .content-box:not(#mythus-box) { padding-left: var(--spacing-box-padding) !important; padding-right: var(--spacing-box-padding) !important; margin-left: auto !important; margin-right: auto !important; } .content-box:not(#mythus-box) p { text-align: justify; max-width: calc(100vw - 80px) !important; /* je 4px mehr Abstand zum Rahmen (mit margin-left) */ margin-left: 4px !important; margin-right: 0 !important; } /* RIVUS-Box: Volle Breite, Blocksatz — margin-left:0 damit ::after-Hintergrund lückenlos */ /* padding-left = spacing-box-padding + spacing-container, damit Text bündig mit KONZEPT/MYTHUS */ #rivus-content-box { padding-left: calc(var(--spacing-box-padding) + var(--spacing-container)) !important; padding-right: var(--spacing-box-padding) !important; margin-left: 0 !important; margin-right: 0 !important; } #rivus-content-box p { text-align: justify; max-width: calc(100vw - 80px) !important; /* je 4px mehr Abstand zum Rahmen (mit margin-left) */ margin-left: 4px !important; margin-right: 0 !important; } /* MYTHUS-Box: Volle Breite, Blocksatz, mittig */ #mythus-box { padding-left: var(--spacing-box-padding) !important; padding-right: var(--spacing-box-padding) !important; margin-left: auto !important; margin-right: auto !important; } #mythus-box p { text-align: justify; max-width: calc(100vw - 80px) !important; /* je 4px mehr Abstand zum Rahmen (mit margin-left) */ margin-left: 4px !important; margin-right: 0 !important; } /* GESICHTEN-Box: Volle Breite, Blocksatz */ #gesichten-content-box { width: 110vw !important; padding-left: var(--spacing-box-padding) !important; padding-right: var(--spacing-box-padding) !important; padding-top: calc(var(--spacing-box-padding) + 5px + 12px) !important; margin-top: -12px !important; margin-left: 0 !important; margin-right: 0 !important; } #gesichten-content-box p { text-align: justify; max-width: calc(100vw - 80px) !important; /* je 4px mehr Abstand zum Rahmen (mit margin-left) */ margin-left: 4px !important; margin-right: 0 !important; } /* Michael: wrapper-transform entfernen, damit position:fixed korrekt zum Viewport funktioniert */ #michael-marcus-wrapper { transform: none !important; } } /* ===== MOBILE NAVIGATION (max-width: 980px) ===== */ @media (max-width: 980px) { .lang-switch { right: auto; left: 60px; } .nav-menu { position: fixed; bottom: 25px; right: 0; left: auto; width: auto; min-width: 140px; background: rgba(233, 233, 228, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); flex-direction: column; align-items: flex-start; padding: 0; gap: 0; display: none; box-shadow: none; border-radius: 0; z-index: 10002; /* über dem Link-Klappentext (#bottom-stair-menu: 9998) */ } .nav-menu.active { display: flex; } .nav-menu li { width: 100%; /* ganze Zeile klickbar, nicht nur das Wort */ } .nav-menu li a { display: block; width: 100%; padding: 9px 14px; font-size: 13px; font-weight: 500; white-space: nowrap; text-decoration: none; color: #333; transition: none; } .nav-menu li a::after { display: none; } .nav-menu li a:hover { opacity: 1; background: #333333; color: #E9E9E4; } /* "Impressum &
Datenschutz": im Burger-Menue zweizeilig mit sehr engem Zeilenabstand (Desktop-Leiste unterdrueckt den
, s. Basisregel). */ .nav-menu li a.nav-legal br { display: inline; } .nav-menu li a.nav-legal { line-height: 1.05; } body.dark-mode .nav-menu { background: rgba(26, 26, 26, 0.95); } .nav-toggle { display: flex; } .nav-container { padding: 0 5%; justify-content: flex-end; } .shrinking-header { height: 83px; } .fixed-header { height: 43px; } .fixed-header .logo-gif { height: 28px; } .page-title-section { margin-top: 73px; } .text-behind, .text-front { font-size: clamp(2rem, 10vw, 5rem); white-space: normal; } .andron-part { margin-left: 5%; } section { padding: 8% 5%; } .image-grid { grid-template-columns: 1fr; gap: 1.5rem; } .text-container-3 { text-align: left; margin-right: 0; } .content-wrapper { padding: 1.5rem; } .footer-content { flex-direction: column; text-align: center; } .footer-links { flex-direction: column; gap: 1rem; } /* Dropdowns öffnen nach oben, nur Inhaltshöhe, kein Schatten */ .mobile-dropdown__menu { top: auto !important; bottom: 25px !important; box-shadow: none !important; } #gesichten-anchor-container { pointer-events: none; } #mythus-daniel-image-with-info .words-stair { margin-left: -60px; } .daniel-desktop-1, .daniel-desktop-3 { display: none !important; } .daniel-mobile-1, .daniel-mobile-2, .daniel-mobile-3, .daniel-mobile-4 { display: list-item !important; } #mythus-daniel-image-with-info .daniel-mobile-1 { left: 16px; transform: skew(60deg, -30deg) scaleY(0.66667); } #mythus-daniel-image-with-info .daniel-mobile-2 { left: 32px; transform: skew(0deg, -30deg) scaleY(1.33333); } #mythus-daniel-image-with-info .daniel-year { left: 48px; transform: skew(60deg, -30deg) scaleY(0.66667); } #mythus-daniel-image-with-info .daniel-mobile-3 { left: 64px; transform: skew(0deg, -30deg) scaleY(1.33333); } #mythus-daniel-image-with-info .daniel-mobile-4 { left: 80px; transform: skew(60deg, -30deg) scaleY(0.66667); } #mythus-daniel-image-with-info .daniel-canvas { left: 96px; transform: skew(0deg, -30deg) scaleY(1.33333); } #mythus-daniel-image-with-info .daniel-size { left: 112px; transform: skew(60deg, -30deg) scaleY(0.66667); } /* Michael Mobile (≤768): Name in zwei Zeilen splitten (MICHAEL / (AT THE CROSS)). 7 sichtbare Zeilen, alle explizit positioniert → unabhängig von nth-child. */ .michael-name-full, .michael-desktop-3 { display: none !important; } .michael-name, .michael-paren, .michael-mobile-3, .michael-mobile-4 { display: list-item !important; } #michael-image-with-info .michael-name { left: 16px; transform: skew(60deg, -30deg) scaleY(0.66667); } #michael-image-with-info .michael-paren { left: 32px; transform: skew(0deg, -30deg) scaleY(1.33333); } #michael-image-with-info .michael-year { left: 48px; transform: skew(60deg, -30deg) scaleY(0.66667); } #michael-image-with-info .michael-mobile-3 { left: 64px; transform: skew(0deg, -30deg) scaleY(1.33333); } #michael-image-with-info .michael-mobile-4 { left: 80px; transform: skew(60deg, -30deg) scaleY(0.66667); } #michael-image-with-info .michael-canvas { left: 96px; transform: skew(0deg, -30deg) scaleY(1.33333); } #michael-image-with-info .michael-size { left: 112px; transform: skew(60deg, -30deg) scaleY(0.66667); } body:not(.dark-mode) .image-info { background: linear-gradient(to bottom, transparent 15%, rgba(255,102,51,0) 100%); transition: background 0.2s ease; } body:not(.dark-mode) .info-active .image-info, body:not(.dark-mode) #ben-image-with-info.info-active .image-info, body:not(.dark-mode) #mythus-daniel-image-with-info.info-active .image-info, body:not(.dark-mode) .main-heading-container .info-active .image-info, body:not(.dark-mode) #michael-image-with-info.info-active .image-info { background: linear-gradient(to bottom, transparent 15%, rgba(255,102,51,0.85) calc(100% - 15px), rgba(255,102,51,1) 100%); } body:not(.dark-mode) .words-stair__line p { color: #E9E9E4; } body.dark-mode .words-stair__line p { color: #E9E9E4; } /* Dark-Mode-Tap-Gradient für ALLE Bilder. Zuvor global definiert; ging beim Refactor auf .image-info::after verloren (das ::after-Fade greift erst ab 641px, Mobile nutzt aber sein eigenes background-System). */ body.dark-mode .info-active .image-info, body.dark-mode #ben-image-with-info.info-active .image-info, body.dark-mode #mythus-daniel-image-with-info.info-active .image-info, body.dark-mode .main-heading-container .info-active .image-info, body.dark-mode #michael-image-with-info.info-active .image-info { background: linear-gradient(to bottom, transparent 15%, rgba(51,51,51,0.72) calc(100% - 15px), rgba(51,51,51,1) 100%); } #stair-ghost .words-stair { transform: perspective(700px) rotateY(-8deg); transform-origin: left bottom; } } /* ===== SMALL MOBILE (max-width: 480px) ===== */ @media (max-width: 480px) { :root { --nav-height: 25px; } .main-nav { font-size: 14px; height: 25px; top: auto; /* +4px: Platz fuer die Toenung-Sampling-Streifen (#safe-area-bottom/-dark) an der Unterkante — die Nav muss >3px vom Rand weg, sonst sampelt iOS 26 SIE fuer die Leisten-Toenung und der Dark/Light-Toggle greift nicht (s. Safe-Area-Block unten). */ bottom: calc(env(safe-area-inset-bottom, 0px) + 4px); /* über dem iOS-Home-Indicator halten */ color: #333333; /* Hintergrund (cremefarbener Rahmenstreifen) kommt jetzt aus .nav-bar-bg (z-index 9997, UNTER der Treppe). .main-nav selbst bleibt transparent + hoch (z 9999), damit das geöffnete Menü/die Dropdowns ÜBER der Treppe (9998) liegen. */ background-color: transparent!important; backdrop-filter: none!important; -webkit-backdrop-filter: none!important; z-index: 9999; } /* Sichtbarer Nav-Streifen als eigenes Element UNTER der Link-Treppe (9998). */ .nav-bar-bg { display: block; position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 4px); /* +4px wie .main-nav (Sampling-Streifen) */ height: 25px; background-color: #E9E9E4; z-index: 9997; pointer-events: none; } body.dark-mode .nav-bar-bg { background-color: #1a1a1a; } /* Unterer Rahmen wird durch Nav ersetzt */ body::before { display: none; } .nav-container { height: 25px; } /* Originale Toggles auf Mobile verstecken */ .locale-switch, .lang-switch { display: none !important; } /* Mobile Dropdowns anzeigen */ .mobile-dropdown { display: flex; align-items: center; position: relative; margin-left: 20px; /* doppelter Abstand zwischen den rechten Buttons */ } /* Abstand zwischen Aa-Button und Hamburger (doppelt: 10px → 20px) */ .nav-toggle { margin-left: 20px; /* Hitbox nach rechts bis zum Bildschirmrand: padding fuellt das Container-Padding (5%), das gleich grosse negative margin haelt die sichtbaren Striche an ihrer Position. */ padding-right: 5vw; margin-right: -5vw; } /* Light-Dark-Toggle: sichtbare Position bleibt bei left:20px (alte Position). Die Hitbox wird per unsichtbarem Pseudo-Element bis zum linken Bildschirmrand erweitert – der Klick landet im