/* ============================================================ AVISON — Rebuild im Original-Look Creme / Terracotta / Olive / Schiefer Schriften: Chillax + Martian Mono (fonts.css) FARBEN Die Seite hat genau eine Palette: Almond als Grund, Blue Charcoal als Schrift, Burnt Orange als Akzent. Kein Umschalter, kein Attribut am , keine gespeicherte Wahl. ============================================================ */ :root { color-scheme: light; --bg: #e9dac5; /* Almond */ /* Als Komponenten, damit Verlaeufe sauber nach durchsichtig laufen: "transparent" mischt in Verlaeufen ueber durchsichtiges Schwarz und zieht dabei einen grauen Streifen. */ --bg-rgb: 233, 218, 197; --bg-soft: #f8f6f3; --paper: #f8f6f3; --ink: #232425; /* Blue Charcoal */ --ink-dim: rgba(35, 36, 37, 0.65); --ink-faint: rgba(35, 36, 37, 0.22); --accent: #be5e21; /* Burnt Orange */ --accent-soft: rgba(190, 94, 33, 0.12); --accent-line: rgba(190, 94, 33, 0.5); --on-accent: #f8f6f3; --olive: #8f8f45; /* Moss Green */ --shadow-rgb: 35, 36, 37; --nav-bg: #e9dac5; /* deckend — Milchglas kommt sonst nirgends vor */ /* Spiegelbild des dunklen Themes: Fläche Burnt Orange, Schrift Almond, Highlights Blue Charcoal. */ --panel-bg: #be5e21; /* Burnt Orange */ --panel-fg: #e9dac5; /* Almond */ --panel-dim: rgba(233, 218, 197, 0.85); --panel-em: #232425; /* Blue Charcoal — Highlights */ --panel-cta-bg: #e9dac5; --panel-cta-fg: #232425; --panel-faint: rgba(233, 218, 197, 0.3); --frame: rgba(233, 218, 197, 0.9); /* Im hellen Theme auch der Footer hell — abgesetzt über den Papier-Ton, damit die Fläche gegen den Almond-Grund steht. */ --footer-bg: #f8f6f3; /* Papier */ --footer-fg: #232425; /* Blue Charcoal */ --footer-dim: rgba(35, 36, 37, 0.66); --footer-line: rgba(35, 36, 37, 0.28); --footer-rule: rgba(35, 36, 37, 0.16); --footer-em: #be5e21; /* Burnt Orange */ /* Die Preloader-Farben stehen direkt am Block .preloader. */ --hero-bg: #232425; --hero-fg: #be5e21; --particle-glow: #be5e21; --particle-base: #232425; /* Im hellen Theme wäre Powder Blue ein Fremdkörper — hier trägt eine aufgehellte Terracotta aus der CI, schwarze Schrift bleibt. */ --chip-bg: #d97a3d; --chip-fg: #1c1d1e; /* Nur zwei Schriften, beide lokal (siehe fonts.css): Chillax traegt die lauten Aufhaenger, Martian Mono den Fliesstext und die kleinen Ueberschriften. --font-serif ist ein Altbestand aus der Zeit mit drei Familien und zeigt bewusst auf dieselbe Familie wie --font-display, damit alte Regeln weiter greifen. */ --font-display: "Chillax", sans-serif; --font-body: "Chillax", sans-serif; --font-mono: "Chillax", sans-serif; --font-type: "Chillax", sans-serif; --font-serif: "Gambarino", Georgia, serif; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --pad: clamp(1.25rem, 4vw, 4rem); } /* ------------------------------------------------------------ LIGHT — der bisherige Creme/Terracotta-Look ------------------------------------------------------------ */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Sprungziele nicht unter die feste Kopfzeile scrollen lassen */ [id] { scroll-margin-top: clamp(5rem, 9vh, 7rem); } html { scroll-behavior: initial; /* iOS bläht sonst im Querformat einzelne Textblöcke selbsttätig auf */ -webkit-text-size-adjust: 100%; } /* Lange deutsche Wörter ("unübersehbar", "Videoproduktion") sprengen in großen Schriftgraden sonst den Handy-Bildschirm. Die Silben- trennung greift über lang="de" am . */ h1, h2, h3, p, li, figcaption, label, .line__inner { overflow-wrap: break-word; } .case__title, .services__title, .about__title, .pitch__title, .kontakt__title, .about__hi, .journey__finish-title, .legal h1 { hyphens: auto; -webkit-hyphens: auto; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } ::selection { background: var(--accent); color: var(--on-accent); } em { font-style: normal; } /* ============ PRELOADER: „Blende auf" ============ Orange Flaeche (Burnt Orange, wie der Grund der Startseite), darauf die Bildmarke in Almond, Details als Negativraum. Das Loch, das sich spaeter von der Marke aus oeffnet, ist eine Maske mit radialem Verlauf; main.js dreht nur den Radius (--r) hoch. Deshalb liegt die Marke nicht IN der Flaeche, sondern daneben: sie darf nicht mit ausgeschnitten werden. Im Edit-Modus blendet edit.css alles aus. */ .preloader { position: fixed; inset: 0; z-index: 1000; overflow: hidden; --preloader-bg: #be5e21; /* Burnt Orange */ --preloader-fg: #e9dac5; /* Almond */ } .preloader__flaeche { position: absolute; inset: 0; background: var(--preloader-bg); --r: 0px; /* Die Blende: ein Loch mit dem Radius --r, den main.js aufzieht. Der weiche Rand liegt bewusst HINTER dem Radius (+1px), nicht davor: mit "calc(var(--r) - 1px)" stuende dort am Anfang ein negativer Radius, und Safari verwirft dann die ganze Maske — die orange Flaeche fehlte beim Start komplett. */ -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + 1px)); mask-image: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + 1px)); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* Sobald die Blende aufgeht, soll die Seite dahinter bedienbar sein */ .preloader.is-auf { pointer-events: none; } /* Die Marke mit dem Ladestrich darunter, exakt in der Mitte — der Mittelpunkt der Marke ist zugleich der Mittelpunkt der Blende. Der Slot zentriert per CSS, die Marke selbst bleibt ohne Transform: das verwaltet GSAP (Aufbau, Blinzeln, Ausblenden). */ .preloader__slot { position: absolute; z-index: 2; left: 50%; top: 50%; width: clamp(84px, 12vw, 140px); transform: translate(-50%, -50%); } .preloader__mark { display: block; width: 100%; height: auto; overflow: visible; color: var(--preloader-fg); --logo-main: var(--preloader-fg); --logo-detail: var(--preloader-bg); will-change: transform; } .preloader__strich { display: block; position: absolute; left: 50%; top: 100%; width: 100%; height: 1px; margin-top: 1.5rem; transform: translateX(-50%); background: rgba(233, 218, 197, 0.22); overflow: hidden; } /* Der Balken laeuft als reine CSS-Animation. Frueher zog GSAP ihn auf; auf dem iPhone blieb er dabei gelegentlich leer stehen. */ .preloader__strich i { display: block; width: 100%; height: 100%; background: var(--preloader-fg); transform: scaleX(0); transform-origin: 0 50%; animation: ladebalken 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards; } @keyframes ladebalken { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { /* Ohne Bewegung: Strich sofort voll, Marke steht; main.js blendet dann nur noch weich aus. */ .preloader__strich i { transform: scaleX(1); } } /* Der Seitenaufbau nach der Blende (Bildmarke, Menuepunkte, Wortmarke nacheinander) steckt komplett in main.js, initIntro: GSAP versteckt die Teile erst, wenn es laeuft — bis dahin deckt der Preloader ohnehin alles ab. */ /* Der eigene Mauszeiger (Punkt + Ring, der beim Hovern aufging) ist entfallen. Über Fotos und Videos bleibt der Auge-Cursor, den Rest machen jetzt die Wimpern. */ /* Die Hover-Effekte (.magnetic und die Wimpern) stehen in assets/css/hover.css — sie werden auch auf den Projektseiten gebraucht, die diese Datei hier nicht laden. */ /* ============ NAV ============ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 1.4rem var(--pad); transition: transform 0.5s var(--ease-out); /* Reine CSS-Einblendung — unabhängig von JS, kann nie haengen bleiben. Grundzustand (ohne Animation) ist sichtbar. */ animation: navIn 0.9s var(--ease-out) 0.25s backwards; } @keyframes navIn { from { transform: translateY(-115%); } to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .nav { animation: none; } } /* Beim Scrollen legt sich eine deckende Flaeche in der Grundfarbe unter die Kopfzeile, damit die Links ueber allen Sektionen lesbar bleiben. Bewusst ohne Milchglas: diesen Effekt benutzt die Seite sonst nirgends, alle Flaechen hier sind deckend. Die Flaeche liegt auf einem ::before statt auf .nav selbst, weil die untere Menueleiste am Handy ein fixed-Kind von .nav ist — ein Filter oder Transform auf .nav wuerde sie an die falsche Stelle setzen. Als reiner Hintergrund waere das kein Problem mehr, aber ::before traegt zugleich die weiche Einblendung. */ .nav::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--nav-bg); opacity: 0; transition: opacity 0.4s var(--ease-out); pointer-events: none; } .nav.is-scrolled::before { opacity: 1; } .nav.is-scrolled { padding-top: 0.9rem; padding-bottom: 0.9rem; box-shadow: 0 1px 0 rgba(var(--shadow-rgb), 0.08), 0 8px 30px -18px rgba(var(--shadow-rgb), 0.4); } .nav__logo { color: var(--accent); text-decoration: none; display: inline-flex; } /* Bildmarke färbt sich wie die Marquee-Augen: Fläche = Akzent (über currentColor), Details = Hintergrundfarbe als Negativraum. */ .nav__logo-mark { width: 48px; height: 38px; display: block; --logo-detail: var(--bg); } .nav__logo img { width: 48px; height: 38px; display: block; } .nav__logo img { width: 48px; height: auto; display: block; transition: transform 0.4s var(--ease-out); } .nav__logo:hover img { transform: rotate(-6deg) scale(1.08); } /* Rechtsbuendig: das Logo steht links, die Punkte sammeln sich am rechten Rand. */ .nav__links { display: flex; justify-content: flex-end; gap: clamp(1.1rem, 2.5vw, 3rem); } .nav__links a { white-space: nowrap; } .nav__links a { font-family: var(--font-display); font-weight: 500; color: var(--accent); text-decoration: none; font-size: 1.05rem; /* kein overflow:hidden — der Unterstrich unten skaliert nur und bräuchte es nicht; die Wimpern beim Hovern würden sonst clippen */ position: relative; display: inline-block; transition: color 0.3s; } .nav__links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease-out); } .nav__links a:hover { color: var(--ink); } .nav__links a:hover::after { transform: scaleX(1); transform-origin: left; } /* ---------- Handy: Navigation teilt sich auf ---------- Oben bleiben Logo und Design-Schalter, die vier Menüpunkte wandern als Tab-Bar an den unteren Bildschirmrand — wie in einer App, inklusive Abstand zur Home-Indicator-Zone. */ @media (max-width: 760px) { /* Kein transform auf .nav — sonst wäre der Header (siehe oben) für die 0,9 s der Einblendung Bezugsrahmen der unteren Leiste und die Leiste käme kurz an der falschen Stelle hoch. Sie bringt mit navInBottom ihre eigene Einblendung mit. */ .nav { padding: 0.9rem 1rem; animation: none; } .nav.is-scrolled { padding: 0.7rem 1rem; } .nav__logo-mark { width: 34px; height: 27px; } .nav__links { position: fixed; bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px)); left: 0.7rem; right: 0.7rem; z-index: 100; display: flex; justify-content: space-around; align-items: center; gap: 0.35rem; padding: 0.65rem 0.5rem; border-radius: 22px; background: var(--nav-bg); box-shadow: 0 14px 38px -14px rgba(var(--shadow-rgb), 0.55), inset 0 0 0 1px var(--ink-faint); animation: navInBottom 0.9s var(--ease-out) 0.25s backwards; } .nav__links a { font-size: 0.85rem; text-align: center; } /* Der Unterstrich beim Antippen würde in der Leiste seltsam sitzen */ .nav__links a::after { display: none; } /* Chip und Seitenfuß machen der Leiste Platz — die Regeln dafür stehen am Ende der Datei, weil ihre Grundregeln später kommen. */ } @keyframes navInBottom { from { transform: translateY(140%); } to { transform: translateY(0); } } /* Sehr schmale Geräte (ab iPhone SE): die Schreibmaschine baut breit, deshalb Schriftgröße und Abstände weiter zurück. */ @media (max-width: 400px) { .nav { padding-left: 0.8rem; padding-right: 0.8rem; } .nav__links { gap: 0.15rem; padding: 0.6rem 0.3rem; } /* „Startseite · Projekte · Datenschutz" auf den Rechtsseiten ist die längste Kombination — bei 320 px passt sie nur so in die Leiste. */ .nav__links a { font-size: 0.72rem; padding-left: 0.1rem; padding-right: 0.1rem; } .nav__logo-mark { width: 30px; height: 24px; } } @media (prefers-reduced-motion: reduce) { .nav__links { animation: none; } } /* ============ THEME-SCHALTER ============ */ /* ============ FLOATING CHIP ============ Traegt die Chip-Token (auf der Startseite Blue Charcoal mit Almond), nicht --ink/--bg: die stehen dort auf Papier und Orange, und der Papierton gehoert nicht zur CI. Hover dreht auf Almond mit Blue Charcoal. */ .float-chip { position: fixed; bottom: 1.75rem; right: 1.75rem; z-index: 95; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; background: var(--chip-bg); color: var(--chip-fg); text-decoration: none; padding: 0.85rem 1.5rem; border-radius: 99px; box-shadow: 0 14px 40px -10px rgba(var(--shadow-rgb), 0.5); transition: background-color 0.35s, color 0.35s, transform 0.35s var(--ease-out); /* Kein Dauer-Schweben mehr (chipFloat): die laufende Animation ueberschrieb den Hover-Transform, der Effekt kam erst beim Verlassen. Der Knopf steht still und reagiert sofort. */ } /* Hover ausdruecklich in Burnt Orange mit Papier, unabhaengig davon, was --accent auf der jeweiligen Flaeche gerade ist. */ /* Kein Farbwechsel beim Hovern: die Wimpern (hover.css) reichen. */ .float-chip:hover { background: var(--chip-bg); color: var(--chip-fg); } /* Grundzustand mit JS: unsichtbar und nicht antippbar. main.js blendet den Knopf ein, sobald der Hero verlassen wird — im Hero selbst soll nur die Wortmarke stehen. */ .js .float-chip { opacity: 0; pointer-events: none; } .js .float-chip.is-da { pointer-events: auto; } /* Ueber der Fusszeile ausblenden: sonst liegt der Knopf auf den Rechtslinks. Beide Selektoren, weil `.js .float-chip.is-da` oben drei Klassen hat und sonst bei pointer-events gewinnt: der Knopf war dann unsichtbar, fing aber weiter die Klicks auf Datenschutz und Impressum ab. */ .float-chip.is-weg, .js .float-chip.is-da.is-weg { opacity: 0 !important; pointer-events: none; transform: translateY(12px); } @media (max-width: 720px) { .float-chip { font-size: 0.85rem; padding: 0.7rem 1.2rem; } } /* ============ HERO ============ */ .hero { min-height: 100svh; position: relative; display: flex; flex-direction: column; justify-content: center; /* Die Wortmarke schliesst unten links buendig mit dem Hero ab. Deshalb hat der Hero unten und links keinen Innenabstand mehr; der Scroll-Hinweis rechts steht absolut und bringt seinen eigenen mit. */ padding: 7rem 0 0; } /* --- Showreel als Hintergrund --- */ .hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--hero-bg); } .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .hero__canvas.is-an { opacity: 1; } /* Die Wortmarke sitzt unten links im Bild: mehr Redaktion, weniger Plakat. Der Hero ist ein Flex-Container, deshalb schiebt margin-top:auto den Block nach unten. */ .hero__content { position: relative; z-index: 2; width: 100%; margin-top: auto; display: flex; align-items: flex-end; gap: clamp(1.5rem, 4vw, 4rem); flex-wrap: wrap; } /* Die grosse Bildmarke rechts daneben ist entfallen — im Hero steht nur noch die Wortmarke. Sie wächst mit der Fensterbreite (vw) und bleibt durch max-width auch auf sehr schmalen Geräten im Bild. */ .hero__wordmark { font-family: var(--font-display); font-weight: 700; font-size: clamp(3.4rem, 16.5vw, 15rem); line-height: 0.95; letter-spacing: -0.065em; /* Die enge Laufweite zieht den Kasten hinter dem letzten Buchstaben zusammen — ohne das Polster schnitte overflow das „n" rechts an. */ padding-right: 0.07em; text-transform: lowercase; /* „avison" steht in Chillax immer klein */ color: var(--hero-fg); overflow: hidden; white-space: nowrap; max-width: 100%; } /* Die Wortmarke steht nicht mehr bündig in der Ecke: links fluchtet sie mit dem Logo in der Kopfzeile (--pad), unten hat sie etwas Luft zur Hero-Kante. Im Zeilenkasten liegt die Grundlinie 0.15em über der Unterkante — das wird abgezogen, damit der Abstand an den Buchstaben gemessen ist und nicht am Kasten. Das -0.031em links ist der gemessene Vorlauf des „a": damit steht die sichtbare Kante des Buchstabens genau auf --pad, wie der Claim und die Überschriften darunter. */ .hero__wordmark { margin-left: calc(var(--pad) - 0.031em); margin-bottom: calc(clamp(1rem, 2.2vw, 2.4rem) - 0.15em); max-width: calc(100% - var(--pad)); } .hero__wordmark .char { display: inline-block; will-change: transform; } .js .hero__wordmark .char { transform: translateY(115%); } /* line-reveal mechanics */ /* max-width: die Wort-Container sind inline-block und wären sonst so breit wie ihr längstes Wort — am Handy sprengt das die Seite. Mit Deckel greifen Silbentrennung und, zur Not, ein harter Umbruch. */ .line { display: block; overflow: hidden; max-width: 100%; } /* Die Serife hat lange Unterlängen (g, j, p), und die Überschriften stehen mit line-height 1 — der Kasten schnitt sie unten ab. Das Polster gibt ihnen Raum, der gleich große negative Rand hält den Zeilenabstand unverändert. */ .line { padding: 0.06em 0.05em 0.26em; margin: -0.06em -0.05em -0.26em; } .line__inner { display: inline-block; will-change: transform; max-width: 100%; overflow-wrap: anywhere; } /* ---- Film von Hand starten ---- iPhones starten Videos nicht von selbst, sobald der Stromsparmodus an ist (und auch sonst kann der Browser es verweigern). Dann steht oben rechts im Bild ein oranger Knopf. main.js zeigt ihn, sobald der Film steht, und blendet ihn aus, wenn er laeuft. */ .hero__play { /* Ueber der Kopfzeile (z-index 100): die liegt als unsichtbare Leiste ueber dem oberen Rand des Films und hat die Klicks abgefangen. */ position: absolute; z-index: 102; top: calc(5.5rem + env(safe-area-inset-top, 0px)); right: var(--pad); display: none; align-items: center; justify-content: center; width: 3.4rem; height: 3.4rem; padding: 0; border: 0; border-radius: 99px; background: #be5e21; color: #e9dac5; /* Burnt Orange mit Almond */ box-shadow: 0 10px 30px -10px rgba(var(--shadow-rgb), 0.6); cursor: pointer; transition: transform 0.3s var(--ease-out), background-color 0.3s; } .hero__play.is-da { display: inline-flex; } .hero__play svg { width: 1.5rem; height: 1.5rem; display: block; margin-left: 0.12rem; } .hero__play:hover { transform: scale(1.06); } .hero__play:focus-visible { outline: 2px solid #f8f6f3; outline-offset: 4px; } /* ============ LEISTUNGEN-MARQUEE ============ Das Band liegt IM Hero und klebt an dessen Unterkante — so sieht man es sofort beim Ankommen, ohne zu scrollen. Es liegt über Video und Canvas (z-index), der dunkle Rand des Scrims trägt die Schrift. */ .logos { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; overflow: hidden; white-space: nowrap; padding: clamp(1rem, 2vw, 1.5rem) 0 clamp(1.1rem, 2.2vw, 1.8rem); } /* Am Handy läuft das Band über eine reine CSS-Animation statt über den JS-Ticker — die läuft im Compositor und kann nicht ins Stocken geraten. Der Track enthält denselben Text zweimal, deshalb ist -50 % genau ein nahtloser Durchlauf. (main.js überlässt es hier dem CSS.) */ @media (max-width: 760px) { .marquee__track { animation: marqueeLauf 22s linear infinite; } } @keyframes marqueeLauf { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } } /* versteckter Symbol-Vorrat */ .svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; } /* ============ CASE STUDY ============ */ .case { padding: clamp(6rem, 12vw, 11rem) var(--pad) clamp(4rem, 8vw, 7rem); } .case__title, .services__title, .about__title { font-family: var(--font-serif); font-weight: 600; font-size: clamp(3rem, 10vw, 9rem); line-height: 1; letter-spacing: -0.01em; } .journey__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .js .journey__flag { transform: scale(0); } /* Ergebnis-Pillen: komplett hellblaue Fläche, schwarze Schrift, kein Rahmen — in beiden Themes gleich. */ .result { display: flex; align-items: baseline; gap: 0.8rem; background: var(--chip-bg); color: var(--chip-fg); border: none; border-radius: 99px; padding: 0.85rem 1.6rem; box-shadow: 0 12px 28px -14px rgba(var(--shadow-rgb), 0.3); transition: transform 0.35s var(--ease-out), box-shadow 0.35s; } .result:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -16px rgba(var(--shadow-rgb), 0.45); } /* mobile: vertikale Timeline statt Karte */ @media (max-width: 700px) { .journey { aspect-ratio: auto; } .journey__svg { display: none; } .journey__stop { position: relative; /* WICHTIG: left/top aus der Kartenansicht zurücksetzen. Sonst verschiebt --x (bis 85 %) jede Station nach rechts aus dem Bild heraus — der Browser zoomt dann die ganze Seite heraus und nichts wirkt mehr responsiv. */ left: auto; top: auto; display: flex; align-items: flex-start; gap: 1rem; padding: 0 0 1.75rem 0.25rem; margin-left: 0.5rem; border-left: 2px dashed var(--accent-line); } /* Die gestrichelte Linie endete bisher einfach im Nichts — die letzte Station schließt sie jetzt mit einem Punkt ab. */ .journey__stop:last-child::after { content: ""; position: absolute; left: -7px; bottom: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg); } .journey__marker { position: static; transform: none; flex: none; margin-left: -12px; } .journey__card { position: static; transform: none; width: auto; flex: 1; } } /* ============ PITCH ============ */ /* Einfarbige Fläche — kein Verlauf mehr. */ .pitch { padding: clamp(7rem, 14vw, 13rem) var(--pad); background: var(--panel-bg); color: var(--panel-fg); border-radius: clamp(20px, 3vw, 40px); margin: 0 clamp(0.5rem, 1.5vw, 1.5rem); } /* ============ SERVICES ============ */ /* Die Sektion selbst hat unten kein Polster: unter Punkt 03 folgt direkt die naechste Flaeche, die ihren eigenen Abstand mitbringt. */ .services { padding: 0 var(--pad); } /* „Kommt dir das bekannt vor?" steht wie das Statement unter dem Film allein auf einer ganzen Bildschirmhoehe: gross, mittig, in der Serife; darunter folgen die drei Punkte. Groesse und Schnitt wie .intro__text. */ .services__head { min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: clamp(3rem, 6vw, 5rem) 0; } .services .services__title { max-width: none; margin: 0 auto; font-weight: 400; font-size: min(10.5vw, 15vh); line-height: 1.02; letter-spacing: -0.02em; text-align: center; text-wrap: balance; hyphens: manual; -webkit-hyphens: manual; } @media (max-width: 720px) { .services .services__title { font-size: min(15vw, 11vh); } } .services__list { margin-top: 0; } /* Zwei ruhige Spalten wie bei COLLINS: links Zitat mit angekoppeltem Pfeil, rechts Antwort mit den Tags direkt darunter — die Zeile liest sich als eine Einheit, keine leere Mitte mehr. */ .service { position: relative; display: grid; grid-template-columns: 5rem 1.1fr 1fr; grid-template-areas: "index name desc" "index . leistung"; gap: 1.15rem clamp(1rem, 3vw, 3rem); align-items: start; padding: clamp(2rem, 4vw, 3.25rem) 0; border-top: 1px solid var(--ink-faint); transition: padding-left 0.5s var(--ease-out); } /* Punkt 03 behaelt sein unteres Polster: ohne stand die Leistungszeile direkt auf der Abschlusslinie. */ .service:last-child { border-bottom: 1px solid var(--ink-faint); } .service:hover { padding-left: 1.25rem; } /* Die Nummer steht in derselben Schrift und Größe wie die Kundenstimme daneben, nur in der Akzentfarbe — sie liest sich als Teil der Zeile. */ .service__index { grid-area: index; font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.1; color: var(--accent); } .service__name { grid-area: name; font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.1; transition: color 0.3s; } .service:hover .service__name { color: var(--accent); } .service__desc { grid-area: desc; color: var(--ink-dim); max-width: 32rem; } @media (max-width: 900px) { .service { grid-template-columns: 3rem 1fr; grid-template-areas: "index name" ". desc" ". leistung"; } } /* ============ ABOUT — dieselbe einfarbige Fläche wie der Pitch ============ */ .about { padding: clamp(4.5rem, 9vw, 8rem) var(--pad); text-align: center; overflow: hidden; } /* Der Textblock bleibt schmal und mittig; Ueberschrift und Polaroids stehen jetzt darueber und duerfen die volle Breite nutzen. */ .about__inner { max-width: 760px; margin: 0 auto; } .about__hi { font-family: var(--font-serif); font-weight: 600; font-size: clamp(2.6rem, 7vw, 5.5rem); line-height: 1.05; color: var(--panel-fg); } .about__hi em { font-family: var(--font-serif); font-weight: 400; margin-right: 0.08em; color: var(--panel-em); } .about__text { font-family: var(--font-type); font-size: clamp(0.95rem, 1.5vw, 1.15rem); line-height: 1.9; margin-top: 0; color: var(--panel-dim); } .about__cta { display: inline-block; margin-top: 2.75rem; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; background: var(--panel-cta-bg); color: var(--panel-cta-fg); text-decoration: none; padding: 0.9rem 1.9rem; border-radius: 99px; transition: background-color 0.35s, color 0.35s; } /* Hover nur ueber die Wimpern, keine Farbaenderung */ .about__cta:hover { background: var(--panel-cta-bg); color: var(--panel-cta-fg); } /* ---- Team: zwei Polaroids zwischen Ueberschrift und Text ---- Die Aufnahmen bringen den weissen Rand schon mit, der Name steht auf dem unteren Streifen. Die Schraeglage ist minimal und rein dekorativ: kein Tesafilm, keine Physik, nichts Anfassbares. Das Seitenverhaeltnis der beiden Scans ist praktisch gleich (1157x1446 und 1130x1413), sie stehen deshalb ohne Ausgleich nebeneinander. */ .about__polaroids { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 4rem); margin: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(2.75rem, 5vw, 4rem); } .polaroid { position: relative; margin: 0; width: clamp(190px, 26vw, 330px); /* container-type, damit der Name mit dem Polaroid waechst und nicht mit dem Fenster */ container-type: inline-size; filter: drop-shadow(0 18px 34px rgba(var(--shadow-rgb), 0.35)); } .polaroid img { display: block; width: 100%; /* height: auto, sonst zieht das height-Attribut */ height: auto; } .polaroid--endrit { transform: rotate(-1.6deg); } .polaroid--simon { transform: rotate(1.4deg); } /* Der Name sitzt auf dem weissen Streifen, genau auf dessen vertikaler Mitte und parallel zu seiner Kante. Die Scans liegen nicht ganz gerade: bei Simon faellt der Streifen nach rechts um rund 1° ab, bei Endrit kaum. Gemessen an den Bildern (Unterkante Foto und Unterkante Papier), deshalb je Polaroid eigene Werte: --streifen = Abstand der Streifenmitte von der Unterkante, --kippung = Neigung des Streifens im Scan. Feste Tinte statt --panel-fg: das Polaroidpapier ist immer hell. */ .polaroid figcaption { position: absolute; left: 6%; right: 6%; bottom: var(--streifen, 14%); transform: translateY(50%) rotate(var(--kippung, 0deg)); font-family: var(--font-type); font-weight: 500; /* Chillax Semibold */ font-size: 1rem; /* Rueckfall, falls cqw fehlt */ font-size: 9.2cqw; letter-spacing: 0.03em; line-height: 1.2; text-align: center; color: rgba(35, 36, 37, 0.88); pointer-events: none; } .polaroid--endrit figcaption { --streifen: 14.1%; --kippung: 0.3deg; } .polaroid--simon figcaption { --streifen: 15.4%; --kippung: 1deg; } @media (prefers-reduced-motion: reduce) { .polaroid--endrit, .polaroid--simon { transform: none; } } /* ============ SCHLUSS: KONTAKT + FUSS ============ Die letzte Flaeche der Seite: Almond wie die anderen, aber unten sitzt in ihr der dunkle Fuss. Sie laeuft bis zur Unterkante durch, kein oranger Streifen mehr darunter. */ .schluss { overflow: hidden; margin-bottom: 0; } /* ---- Kontakt (oberer Teil, Burnt Orange) ---- „Wo drueckt der Schuh?" steht auf Orange. Auf Burnt Orange kommt keine CI-Farbe auf 4,5:1, Papier ist mit 4,05:1 der beste Wert und traegt deshalb Schrift und Felder; Almond setzt die Akzente. Die --footer-Token werden hier umgedeutet, das Formular folgt. */ .kontakt { padding: clamp(6rem, 12vw, 11rem) var(--pad) clamp(6.5rem, 11vw, 9.5rem); background: #be5e21; --footer-bg: #be5e21; --footer-fg: #f8f6f3; --footer-dim: rgba(248, 246, 243, 0.85); --footer-line: rgba(248, 246, 243, 0.45); --footer-rule: rgba(248, 246, 243, 0.2); --footer-em: #e9dac5; color: var(--footer-fg); } /* Der Absende-Knopf: Blue Charcoal mit Almond, wie der Chip */ .kontakt .contact__submit { background: #232425; color: #e9dac5; } .kontakt .contact__submit { --wimpern-farbe: #232425; } /* Der Schluss beginnt orange, die Haarlinie zur Flaeche darueber entfaellt; hinter den runden Ecken des Fusses liegt Orange. */ div.schluss.flaeche { background: #be5e21; border-top: 0; } /* schlaegt .flaeche + .flaeche weiter unten */ .kontakt__inner { max-width: 880px; margin: 0 auto; text-align: center; } .kontakt__title { font-family: var(--font-serif); font-weight: 600; font-size: clamp(2.8rem, 8vw, 7rem); line-height: 1.02; letter-spacing: -0.015em; color: var(--footer-fg); } .kontakt__title em { color: var(--footer-em); } .kontakt__direct { margin-top: 1.75rem; } .kontakt__direct a { font-family: var(--font-type); font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--footer-fg); text-decoration: none; border-bottom: 1px solid var(--footer-line); padding-bottom: 0.15rem; transition: border-color 0.3s ease; } .kontakt__direct a:focus-visible { outline: 2px solid var(--footer-em); outline-offset: 4px; } /* Der Fuß (.footer) steht in footer.css — dieselbe Datei nutzen die Projektseiten. */ /* Das Formular selbst (.contact) steht in kontakt.css — dieselbe Datei nutzen die Projektseiten im Fuss. */ /* reveal default state (only applied when JS runs) */ /* Einstieg: nichts blendet mehr aus dem Nichts ein. Der Text steht sofort da; kommt er ins Bild, läuft einmal ein Strich darunter durch — von links auf volle Breite und sofort nach rechts wieder weg. main.js setzt .einstrich und startet ihn mit .is-dran. Als Hintergrund gezeichnet, damit er bei mehrzeiligem Text jeder Zeile folgt (box-decoration-break). */ /* Der Strich existiert nur, solange er läuft: Chrome zeichnet einen Hintergrund der Breite 0 sonst als Pixelrest am Zeilenende. */ .einstrich { background-repeat: no-repeat; background-position: 0 100%; background-size: 0 max(2px, 0.05em); -webkit-box-decoration-break: clone; box-decoration-break: clone; } .einstrich.is-dran { background-image: linear-gradient(currentColor, currentColor); animation: einstrich 1.1s cubic-bezier(0.65, 0, 0.35, 1) both; } .einstrich.is-fertig { background-image: none; } @keyframes einstrich { 0% { background-size: 0 max(2px, 0.05em); background-position: 0 100%; } 48% { background-size: 100% max(2px, 0.05em); background-position: 0 100%; } 52% { background-size: 100% max(2px, 0.05em); background-position: 100% 100%; } 100% { background-size: 0 max(2px, 0.05em); background-position: 100% 100%; } } @media (prefers-reduced-motion: reduce) { .einstrich.is-dran { animation: none; } } /* ============ RECHTLICHES (Impressum, Datenschutz) ============ Bewusst schlicht: eine Textspalte, keine Animationen. */ body[data-page="legal"] .nav { animation: none; } .legal { max-width: 46rem; margin: 0 auto; padding: calc(var(--pad) + 5rem) var(--pad) clamp(4rem, 8vw, 7rem); } .legal__back { font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); display: inline-block; margin-bottom: 2.5rem; } /* Der Unterstrich beim Hovern kommt aus dem Block TEXT-LINKS weiter unten (Linie als Hintergrund). Ein zusaetzliches text-decoration hier ergab zwei Striche uebereinander. */ .legal h1 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.05; letter-spacing: -0.015em; margin-bottom: 2.5rem; } .legal h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 2.4vw, 1.5rem); margin: 2.75rem 0 0.75rem; } .legal h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; margin: 1.75rem 0 0.4rem; } .legal p, .legal li { color: var(--ink-dim); } .legal p { margin-bottom: 0.9rem; } .legal ul { margin: 0 0 0.9rem 1.2rem; } .legal li { margin-bottom: 0.35rem; } .legal a { color: var(--accent); } .legal address { font-style: normal; color: var(--ink-dim); margin-bottom: 0.9rem; } /* Noch auszufüllende Angaben sichtbar markieren */ .legal mark { background: var(--chip-bg); color: var(--chip-fg); padding: 0.05em 0.4em; border-radius: 0.3em; font-family: var(--font-mono); font-size: 0.9em; } .legal__updated { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--ink-faint); font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-dim); } /* ============ PLATZ FÜR DIE HANDY-LEISTE ============ Muss ganz am Ende stehen: die Grundregeln von .float-chip und .footer kommen weiter oben in dieser Datei und würden eine früher notierte Media-Query sonst überschreiben. */ @media (max-width: 760px) { .legal { padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0px)); } /* Der Chip wandert in die Kopfzeile: rechts neben dem Logo, auf der Mitte der Zeile. Ueber dem Inhalt schwebend nahm er zu viel Platz weg. Die Kopfzeile ist oben 0.9rem gepolstert und das Logo 27px hoch; der Chip ist rund 33px hoch. Beim Scrollen wird die Zeile flacher (0.7rem), der Chip rutscht mit. Unten verdeckt er nichts mehr, deshalb muss er dort auch nicht weichen. */ /* In der Kopfzeile steht er als schlichter Text, ohne Pille: neben Bildmarke und Play-Knopf waeren zwei Kaesten zu viel. */ .float-chip { top: calc(0.9rem + 13.5px - 10px); bottom: auto; right: 1rem; z-index: 101; font-size: 0.85rem; padding: 0; background: none; color: var(--accent); box-shadow: none; transition: color 0.35s, top 0.5s var(--ease-out), opacity 0.35s; } .float-chip:hover { background: none; color: var(--ink); } .nav.is-scrolled ~ .float-chip { top: calc(0.7rem + 13.5px - 10px); } .float-chip.is-weg, .js .float-chip.is-da.is-weg { opacity: 1 !important; pointer-events: auto; transform: none; } /* Und die Fußzeile wird nicht mehr verdeckt. Mit body davor, weil footer.css erst nach dieser Datei lädt und sonst gewinnen würde. */ body[data-page="home"] .footer { padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); } /* Die Fußleiste stapelt sich mittig (Regel steht beim Fuss selbst). */ /* Der Play-Knopf sitzt am Handy ganz oben rechts im Film, auf einer Hoehe mit der Bildmarke links. */ .hero__play { top: calc(0.8rem + env(safe-area-inset-top, 0px)); right: 1rem; width: 3rem; height: 3rem; } .hero__play svg { width: 1.3rem; height: 1.3rem; } /* Am Handy steht die Wortmarke mittig im Bild statt unten links — daneben ist ohnehin nichts, und so wirkt der Hero ruhiger. */ .hero { padding-top: 6rem; padding-bottom: 8rem; justify-content: center; } .hero__content { margin-top: 0; justify-content: center; } .hero__wordmark { font-size: clamp(3.4rem, 21vw, 9rem); margin-left: 0; margin-right: 0; max-width: 100%; text-align: center; } /* Das Band muss über die untere Menüleiste rutschen, sonst liegt die Leiste darauf. */ .hero .logos { bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); } /* Fingerfreundliche Trefferflächen in der unteren Leiste */ .nav__links a { padding: 0.35rem 0.2rem; } /* Formularfelder: mindestens 16 px, sonst zoomt iOS beim Antippen */ .contact__field input, .contact__field textarea { font-size: 1rem; } } /* ---------- Flache Bildschirme (Handy im Querformat) ---------- Hier ist nicht die Breite knapp, sondern die Höhe: mit den normalen Werten würde der Hero höher als das Fenster und das Leistungs-Band rutschte unter die Menüleiste. Deshalb rechnet hier alles in vh. */ @media (max-height: 560px) { .hero { padding-top: 4.5rem; padding-bottom: 7rem; } .hero__wordmark { font-size: clamp(2.4rem, 14vh, 9rem); } .logos { padding: 0.6rem 0 0.75rem; } .marquee__track span { font-size: clamp(1rem, 4.2vh, 2.6rem); } .marquee__track i svg { height: 0.6em; width: 0.75em; } } /* Sehr schmale Geräte (iPhone SE & Co.) */ @media (max-width: 380px) { .journey__results { gap: 0.6rem; } .result { padding: 0.7rem 1.1rem; gap: 0.5rem; } } /* ------------------------------------------------------------ Media-Cursor — über Fotos & Videos wird der Mauszeiger zum AVISON-Auge (SVG, PNG als Fallback z. B. für Safari). ------------------------------------------------------------ */ .hero { cursor: url("/assets/img/cursor-eye.svg") 20 16, url("/assets/img/cursor-eye.png") 20 16, auto; } /* ================================================================ UMBAU 2026 — Kreativstudio-Struktur Hero-Statement, Kundenzeile, Projekte-Grid, "Was wir machen". Nutzt durchgehend die bestehenden Tokens; keine neuen Farben. ================================================================ */ .nav__logo { display: inline-flex; align-items: center; } /* Scroll-Hinweis: eine schmale Linie, die ruhig nach unten läuft */ .hero__cue { position: absolute; right: var(--pad); bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px)); z-index: 2; width: 1px; height: 3rem; overflow: hidden; pointer-events: none; } .hero__cue span { display: block; width: 100%; height: 100%; background: var(--hero-fg); opacity: 0.55; animation: heroCue 2.6s cubic-bezier(0.22, 1, 0.36, 1) infinite; } @keyframes heroCue { 0% { transform: translateY(-100%); } 55% { transform: translateY(0); } 100% { transform: translateY(102%); } } @media (prefers-reduced-motion: reduce) { .hero__cue { display: none; } } /* ---- Kunden: durchlaufendes Band ---- Steht oben in den Projekten, ueber „Letztes Projekt". Zwei identische Spuren laufen nebeneinander; nach der halben Strecke springt die Animation zurueck, was nahtlos aussieht. Weiche Raender per Maske, damit nichts hart abgeschnitten wirkt. Der negative Rand hebt den Seitenabstand der Flaeche wieder auf, damit das Band ueber die ganze Breite laeuft. */ .clients { margin: 0 calc(-1 * var(--pad)) clamp(2.5rem, 5vw, 4rem); padding: 0; } .clients__ticker { overflow: hidden; color: var(--ink-dim); -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%); } .clients__track { display: inline-flex; white-space: nowrap; animation: clientsLauf 42s linear infinite; will-change: transform; } .clients__strip { display: inline-flex; align-items: center; gap: clamp(2.4rem, 6vw, 5rem); padding-right: clamp(2.4rem, 6vw, 5rem); } @keyframes clientsLauf { to { transform: translateX(-50%); } } /* Reduzierte Bewegung: Band steht still und laesst sich schieben */ @media (prefers-reduced-motion: reduce) { .clients__track { animation: none; } .clients__ticker { overflow-x: auto; } } /* Logos als Alpha-Masken in der aktuellen Textfarbe — laufen so in beiden Designs mit. Breite = Hoehe x Seitenverhaeltnis der Datei. */ .clogo { display: inline-block; /* nur als Traeger fuer die Maske, nicht als Auszeichnung */ font-style: normal; height: clamp(2rem, 3.4vw, 2.75rem); background: currentColor; -webkit-mask: var(--clogo) no-repeat center / contain; mask: var(--clogo) no-repeat center / contain; } .clogo--delius { --clogo: url("../img/kunden/delius.png"); aspect-ratio: 800 / 165; } .clogo--crockid { --clogo: url("../img/kunden/crockid.png"); aspect-ratio: 500 / 146; } .clogo--versanel { --clogo: url("../img/kunden/versanel.png"); aspect-ratio: 1024 / 223; } .clogo--spd { --clogo: url("../img/kunden/spd-shs.png"); aspect-ratio: 1 / 1; } .clogo--uganda { --clogo: url("../img/kunden/uganda-verl.png"); aspect-ratio: 512 / 454; } /* ---- Projekte: Delcotex breit, die anderen daneben ---- */ .work { padding: clamp(3rem, 6vw, 5rem) var(--pad) clamp(4rem, 8vw, 7rem); } .work__title { font-family: var(--font-serif); font-weight: 600; font-size: clamp(3rem, 10vw, 9rem); line-height: 1; letter-spacing: -0.01em; margin-bottom: clamp(2rem, 4vw, 3.5rem); /* Die Serife ragt links minimal ueber ihren Kasten — der Einzug holt die sichtbare Kante auf --pad zurueck. */ padding-left: 0.031em; } .work__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 2.5vw, 2.2rem); } .work__card { display: block; text-decoration: none; color: inherit; border-radius: 14px; } /* Die breite Kachel wird ueber die Hoehe gedeckelt: Film und Unterschrift sollen gleichzeitig im Bild stehen. 62vh Filmhoehe mal 16:9 ergibt die Breite, der Rest bleibt fuer Name und Satz. Wichtig: justify-self statt margin:0 auto. Ein auto-Rand laesst ein Rasterelement auf Inhaltsbreite schrumpfen, statt es bis zur Maximalbreite zu fuellen. Genau daran war die Kachel zu klein. */ .work__card--wide { grid-column: 1 / -1; width: 100%; } /* Die breite Kachel läuft über die volle Satzbreite, damit Überschrift, Bild, Projektname und „Weitere Projekte" an derselben linken Kante beginnen. Früher war sie auf 66vh Höhe gedeckelt und deshalb schmaler und mittig — drei Textanfänge statt einem. Jetzt deckelt die Höhe nur noch das Bild: es wird notfalls flacher als 16:9 und oben und unten leicht beschnitten, statt schmaler zu werden. */ .work__card--wide .work__media { aspect-ratio: auto; height: min(calc((100vw - 2 * var(--pad)) * 9 / 16), 66vh); } .work__card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } .work__media { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--bg-soft); } .work__media img, .work__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .work__media img { transition: transform 0.7s var(--ease-out); } .work__card:hover .work__media img { transform: scale(1.035); } /* Video liegt über dem Standbild und blendet erst ein, wenn es wirklich läuft (main.js setzt .is-playing beim Hovern) */ .work__media video { opacity: 0; transition: opacity 0.4s ease; } /* Der Projektname liegt unten links im Bild, in Almond. Ein weicher Schatten von unten hält ihn auf hellen Stellen des Films lesbar. */ .work__media .work__name { position: absolute; z-index: 2; left: clamp(1rem, 2.4vw, 2rem); bottom: clamp(0.8rem, 2vw, 1.6rem); font-size: clamp(2rem, 5.5vw, 4.6rem); line-height: 1; letter-spacing: -0.02em; color: #e9dac5; /* Almond */ pointer-events: none; } .work__media:has(.work__name)::after { content: ""; position: absolute; inset: auto 0 0 0; z-index: 1; height: 45%; background: linear-gradient(to top, rgba(20, 21, 22, 0.55), rgba(20, 21, 22, 0)); pointer-events: none; } .work__media video.is-playing { opacity: 1; } .work__meta { display: block; padding: 1rem 0 0; /* kein seitlicher Einzug: Text fluchtet mit dem Bild */ } .work__name { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 1.8vw, 1.5rem); letter-spacing: -0.01em; color: var(--ink); } .work__desc { display: block; margin-top: 0; font-family: var(--font-type); font-size: 0.92rem; line-height: 1.55; color: var(--ink-dim); max-width: 52ch; } /* Kundenzitat in der Kachel — bleibt unsichtbar, solange leer */ .work__quote { display: block; margin-top: 0.7rem; font-family: var(--font-type); font-size: 0.92rem; line-height: 1.55; color: var(--ink-dim); max-width: 52ch; } .work__quote[hidden] { display: none; } .work__quote:empty { display: none; } .work__all { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: clamp(2.2rem, 4vw, 3.2rem); font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink-faint); padding-bottom: 0.2rem; transition: border-color 0.3s ease; } .work__all svg { width: 1.1em; height: 1.1em; } .work__all:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } /* ---- Über uns: Firmierung & Standort unter dem Text ---- */ .about__firm { margin-top: 1.4rem; font-family: var(--font-type); font-size: 0.88rem; letter-spacing: 0.06em; color: var(--ink-dim); opacity: 0.85; } /* ---- Responsiv ---- */ @media (max-width: 760px) { .work__grid { grid-template-columns: 1fr; } /* Einspaltig waere die gedeckelte Kachel schmaler als die anderen */ .work__card--wide { max-width: 100%; } } /* ---- Skip-Link: erst beim Tastaturfokus sichtbar ---- */ .skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--accent); color: var(--on-accent); font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; padding: 0.6rem 1rem; border-radius: 0 0 8px 0; text-decoration: none; } .skip:focus { left: 0; } /* Ausgeschriebene Nav-Punkte: auf mittleren Breiten etwas kompakter, damit nichts zweizeilig umbricht */ @media (min-width: 761px) and (max-width: 1080px) { .nav__links a { font-size: 0.92rem; } } /* ============================================================ STARTSEITE: Grund und Flaeche getauscht Burnt Orange traegt jetzt die Seite, Almond die Flaechen darauf. Dieselben drei CI-Farben, nur andersherum verteilt. Zum Kontrast, gemessen nach WCAG: Blue Charcoal auf Almond 11,3:1 (Flaechen, Fuss, Formular) Papier auf Burnt Orange 4,05:1 (Fliesstext auf dem Grund) Almond auf Burnt Orange 3,18:1 (nur grosse Schrift) Auf Burnt Orange kommt keine Farbe der CI auf 4,5:1. Der Papierton ist der beste verfuegbare Wert und traegt deshalb den Text auf dem Grund; alles, was laenger als ein Absatz ist, steht auf Almond. ============================================================ */ body[data-page="home"] { --bg: #be5e21; /* Burnt Orange */ --bg-rgb: 190, 94, 33; --ink: #f8f6f3; /* Papier */ --ink-dim: rgba(248, 246, 243, 0.9); --ink-faint: rgba(248, 246, 243, 0.3); --accent: #e9dac5; /* Almond */ --accent-soft: rgba(233, 218, 197, 0.16); --accent-line: rgba(233, 218, 197, 0.55); --on-accent: #232425; --nav-bg: #be5e21; /* deckend, wie der Grund */ /* Die Flaechen sind jetzt die hellen: Almond mit Blue Charcoal, Burnt Orange als Hervorhebung darin. */ --panel-bg: #e9dac5; /* Almond */ --panel-fg: #232425; /* Blue Charcoal */ --panel-dim: rgba(35, 36, 37, 0.72); --panel-em: #be5e21; /* Burnt Orange */ --panel-faint: rgba(35, 36, 37, 0.22); --panel-cta-bg: #232425; --panel-cta-fg: #e9dac5; --frame: rgba(35, 36, 37, 0.9); /* Der Fuss ist die unterste Flaeche und traegt deshalb dieselben Farben wie die anderen. Das Formular erbt sie ueber die --footer-Token, ohne eigene Regel. */ --footer-bg: #e9dac5; --footer-fg: #232425; --footer-dim: rgba(35, 36, 37, 0.68); --footer-line: rgba(35, 36, 37, 0.32); --footer-rule: rgba(35, 36, 37, 0.16); --footer-em: #be5e21; /* Der Knopf unten rechts liegt auf dem orangen Grund: dunkel statt aufgehellte Terracotta, sonst verschwimmt er damit. */ --chip-bg: #232425; --chip-fg: #e9dac5; } /* ---- Flaechen im Wechsel ---- Beige, orange, beige, orange: sonst laufen die Bloecke ineinander. .flaeche faerbt nicht nur den Grund, sie deutet die Farbtoken um. Dadurch muss kein einziger Baustein darin angepasst werden: was --ink oder --accent benutzt, nimmt automatisch die Werte der Flaeche. Dasselbe Prinzip wie bei den Farbwelten der Case-Seiten. */ .flaeche { background: var(--panel-bg); color: var(--panel-fg); /* Volle Breite, keine Rundung: die Flaechen sind Baender ueber die ganze Seite, keine Kaesten auf dem orangen Grund. */ margin: clamp(2rem, 4vw, 3.5rem) 0 0; --ink: var(--panel-fg); /* Auf der Almond-Flaeche steht Blue Charcoal bei 11:1. Die Daempfung kostet davon rund 0,8 Stufen und bleibt damit weit ueber der Schwelle, bringt aber die Hierarchie zurueck. */ --ink-dim: var(--panel-dim); --ink-faint: var(--panel-faint); --accent: var(--panel-em); --bg: var(--panel-bg); } /* Zwei Flaechen hintereinander (Wir, dann Kontakt) laufen als ein Band durch; ein orangener Streifen dazwischen saehe bei voller Breite wie ein Fehler aus. Eine Haarlinie markiert den Wechsel. */ .flaeche + .flaeche { margin-top: 0; border-top: 1px solid var(--panel-faint); } /* ---- Einordnung direkt unter dem Film ---- Kein Claim, sondern ein Satz, der erklaert, was hier passiert. Deshalb Fliesstextgroesse statt Plakatschrift, aber breiter gesetzt als der uebrige Text. */ /* Der Satz bekommt eine ganze Bildschirmhoehe fuer sich: die orange Flaeche fuellt das Fenster, der Satz steht genau in der Mitte, und beim Hereinkommen laeuft der Einstrich darunter durch (main.js). */ .intro { min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: clamp(3rem, 6vw, 5rem) var(--pad); } .intro__text { /* Der Satz fuellt fast den ganzen Bildschirm: gross in der Serife, auf mehrere Zeilen gleichmaessig verteilt (balance). Die Groesse haengt an Breite UND Hoehe des Fensters: 10.5vw fuellt die Breite, 15vh deckelt sie, damit drei Zeilen auch auf flachen Schirmen in die eine Bildschirmhoehe passen. */ margin: 0 auto; font-family: var(--font-serif); font-size: min(10.5vw, 15vh); font-weight: 400; line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; color: var(--ink); text-align: center; } /* Am Handy steht der Satz auf vier, fuenf Zeilen — dort darf er mehr von der Breite nehmen. */ @media (max-width: 720px) { .intro__text { font-size: min(15vw, 11vh); } /* mehr sprengt „Unternehmen" */ } /* ---- Leistungen: alles steht direkt da ---- Frueher klappte hier ein Panel auf. Ein Klick, um Text zu sehen, ist eine Huerde ohne Gegenwert, deshalb steht jetzt alles offen. Die Ordnung tragen Groesse und Gewicht: Zitat gross, Antwort im Fliesstext, Leistung eine Stufe kleiner. */ .service__leistung { grid-area: leistung; font-family: var(--font-type); font-size: 0.92rem; line-height: 1.7; color: var(--ink-dim); max-width: 34rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--ink-faint); } .service__leistung a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink-faint); } /* ---- „Wir" auf breiten Schirmen ---- Die Folge Ueberschrift, Polaroids, Text steht auch hier untereinander. Damit die Sektion trotzdem in ein 16:9-Fenster passt, rechnen die Abstaende in vh und die Fensterhoehe deckelt die Bilder (Seitenverhaeltnis der Scans ist 1157:1446). */ @media (min-width: 1000px) { .about { padding-block: clamp(3rem, 7vh, 5.5rem); } .about__hi { font-size: clamp(2.6rem, 4.6vw, 5rem); } .about__polaroids { margin: clamp(1.5rem, 3.5vh, 2.75rem) 0 clamp(1.75rem, 4vh, 3rem); } .about__cta { margin-top: clamp(1.5rem, 3.5vh, 2.25rem); } .polaroid { width: min(clamp(200px, 19vw, 330px), calc(38vh * 1157 / 1446)); } } /* ============================================================ TEXT-LINKS — Unterstrich wie in der Kopfzeile Beim Hovern zieht sich eine Linie von links unter den Text, beim Verlassen läuft sie nach rechts wieder weg (wie .nav__links a). Als Hintergrund statt ::after gezeichnet: so folgt sie auch umbrechenden Links im Fließtext, und bestehende ::after (Pfeile) bleiben frei. background-origin: border-box legt die Linie genau auf eine vorhandene feine Grundlinie (border-bottom), statt einen zweiten Strich darunterzusetzen. Die Links im Fuß stehen in footer.css. ============================================================ */ .work__all, .service__leistung a, .kontakt__direct a, .legal a, .legal__back { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-origin: border-box; background-position: 100% 100%; background-size: 0 1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 0.45s var(--ease-out), color 0.3s ease; } .work__all:hover, .work__all:focus-visible, .service__leistung a:hover, .service__leistung a:focus-visible, .kontakt__direct a:hover, .kontakt__direct a:focus-visible, .legal a:hover, .legal a:focus-visible, .legal__back:hover, .legal__back:focus-visible { background-position: 0 100%; background-size: 100% 1px; }