/* ============================================================ frecvisuals — freihand ============================================================ */ /* ── Hausschrift ───────────────────────────────────────────── Sora, wie auf der bestehenden Seite und in den AGB. Variabel 100–800, zwei Ausschnitte: der erste deckt Latin inkl. Umlaute und ß ab, der zweite Latin-Extended. Beide liegen lokal im Ordner — kein Google-Aufruf, kein Nachladen von aussen. */ @font-face{ font-family:'Sora';font-style:normal;font-weight:100 800;font-display:swap; src:url('sora-xmqbuffyt72xzqupdg.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+2074,U+20AC,U+2122,U+2191, U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Sora';font-style:normal;font-weight:100 800;font-display:swap; src:url('sora-xmqbuffyt72xzqspdre2.woff2') format('woff2'); unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020, U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } :root{ --black:#08080a; /* kein reines Schwarz — nimmt dem Bild die Härte */ /* Kein reines Weiss, so wenig wie es ein reines Schwarz gibt: #fff wirkt hart und kalt. #fbf8f2 hat dieselbe Waerme wie --tinte, das Weiss auf dunklem Grund (beide R minus B = +9) — damit ist es dasselbe Gebrochen-Weiss auf beiden Seiten der Seite, statt warm oben und kalt unten. Alle Kontraste bleiben ueber 4.5: Text 15.88, Graustufe 4.78, Rot 4.83. */ --paper:#fbf8f2; --paper-2:#f2eee6; --ink:#1d1d1f; --tinte:#f5f2ec; /* warmes Weiss auf Dunkel, passt zum Rot */ --dim-d:#8d8880; /* grau auf dunkel */ --dim-l:#6e6e73; /* grau auf hell */ --hair-d:rgba(245,242,236,.13); --hair-l:rgba(0,0,0,.10); --accent:#e2543c; /* das Rot */ --nav-h:52px; --pad:clamp(1.25rem,5vw,4.5rem); --max:82.5rem; --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --sans:'Sora',-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif; } *,*::before,*::after{box-sizing:border-box} /* Die Wurzelgrösse ist der einzige Hebel für die ganze Skala: alle Schriftgrössen, der Seitenrand und die Inhaltsbreite stehen in rem. Bis 1520 px bleibt sie bei 16 px, dort ändert sich also nichts. Darüber wächst sie mit dem Schirm bis 20 px — sonst steht die Seite auf einem 27-Zöller als kleine Insel in der Mitte, weil clamp() längst am Anschlag ist und px gar nie mitwachsen. */ html{-webkit-text-size-adjust:100%;background:var(--black);font-size:16px} @media (min-width:1520px){ html{font-size:clamp(16px,1.05vw,20px)} /* Die Leistenhöhe bleibt bewusst in px: app.js liest sie mit parseFloat aus, um die Sprungziele zu setzen. Ein rem-Wert käme dort als blosse Zahl an und die Anker lägen falsch. Sie wächst deshalb hier von Hand mit, damit die grösseren Links nicht an die Kante stossen. */ :root{--nav-h:64px} } /* Lenis — bewusst KEIN overflow-x auf , sonst stirbt jedes position:sticky */ html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto!important} .lenis.lenis-stopped{overflow:hidden} body{ margin:0; background:var(--black); color:var(--tinte); font-family:var(--sans); font-size:1.0625rem; line-height:1.56; /* Sora hat eine hohe x-Höhe, braucht mehr Luft */ letter-spacing:-.004em; /* Sora läuft von sich aus offen — kaum negativ */ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* height:auto ist Pflicht, nicht Kosmetik. Die width/height-Attribute im HTML wirken als Stilvorgabe. Setzt CSS nur die Breite, bleibt die Höhe aus dem Attribut stehen — beide gesetzt heisst, aspect-ratio wird ignoriert. Genau so wurde Martins 16:9-Bild als 335x720 gerendert und von object-fit:cover auf einen Streifen beschnitten. Wer eine echte Höhe braucht (Kopfbild, Sticky-Clips), setzt sie weiter unten ausdrücklich und schlägt diese Regel. */ img,video{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} h1,h2,h3,p,figure,ol,ul{margin:0} ol{list-style:none;padding:0} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} [hidden]{display:none!important} .skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--tinte);color:#000;padding:12px 18px;border-radius:0 0 10px 0} .skip:focus{left:0} ::selection{background:var(--accent);color:var(--tinte)} /* ── Der Flug durch das F ──────────────────────────────────── Eine Fläche in Grundfarbe liegt über allem, das F ist aus ihr ausgespart. Das Loch wächst, man fliegt hindurch. Der zweite Teil ist kein Zierrat: das F besteht aus zwei Balken mit einem Spalt dazwischen. Der Spalt bleibt auch bei 340vmax ein Streifen quer über den Schirm — er würde nie von allein hinauswachsen. Also fährt die Fläche im Winkel der Balken selbst aus dem Bild. Einmal pro Sitzung: beim ersten Besuch ein Auftritt, beim dritten Aufruf nur noch Wartezeit. */ @property --loch{syntax:'';inherits:false;initial-value:56px} .flug{ position:fixed;inset:0;z-index:250;background:var(--black); pointer-events:none;--loch:56px; -webkit-mask-image:linear-gradient(#000,#000),url('img/f.svg'); -webkit-mask-size:100% 100%,auto var(--loch); -webkit-mask-position:center,center; -webkit-mask-repeat:no-repeat,no-repeat; -webkit-mask-composite:xor; mask-image:linear-gradient(#000,#000),url('img/f.svg'); mask-size:100% 100%,auto var(--loch); mask-position:center,center; mask-repeat:no-repeat,no-repeat; mask-composite:exclude; transition:--loch 1.1s cubic-bezier(.66,0,.34,1), transform .92s .6s cubic-bezier(.55,0,.32,1), opacity .3s 1.3s; } .flug.durch{--loch:340vmax;transform:translate(225vmax,-131vmax);opacity:0} /* ── Typo-Skala ────────────────────────────────────────────── Sora trägt die Schaugrössen im Gewicht 200. Die Betonung entsteht nicht durch Farbe, sondern durch das Gewicht selbst: ein einziges Wort je Titel steht auf 600. Das ist der ganze Trick — und er hört auf zu wirken, wenn man ihn überall macht. */ .d1{ font-size:clamp(1.95rem,5.5vw,4.7rem); line-height:1.06; letter-spacing:-.03em; font-weight:200; overflow-wrap:break-word; } .d2{ font-size:clamp(1.7rem,4.3vw,3.7rem); line-height:1.1; letter-spacing:-.026em; font-weight:200; overflow-wrap:break-word; } .d3{ font-size:clamp(1.65rem,3.1vw,2.6rem); line-height:1.14; letter-spacing:-.022em; font-weight:300; overflow-wrap:break-word; } .d1 em,.d2 em,.d3 em{font-style:normal;font-weight:600;letter-spacing:-.03em} .lead{ font-size:clamp(1.02rem,1.45vw,1.24rem); line-height:1.5; letter-spacing:-.004em; color:var(--dim-d); font-weight:400; } .lead-dim{max-width:46ch;margin-top:16px} .eyebrow{ font-size:0.75rem; letter-spacing:.15em; text-transform:uppercase; font-weight:500; color:var(--accent); margin-bottom:20px; } .eyebrow-dark{color:#c0442c} /* ── Buttons ─────────────────────────────────────────────── */ .btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;align-items:center} .btn{ display:inline-flex;align-items:center;gap:2px; font-size:0.9375rem;font-weight:500;letter-spacing:-.004em; padding:.8125rem 1.5625rem;border-radius:980px; transition:transform .25s var(--ease),background .25s var(--ease), border-color .25s var(--ease),color .25s var(--ease); white-space:nowrap; } .btn-solid{background:var(--tinte);color:#000} .btn-solid:hover{transform:scale(1.035);background:#fff} /* Rahmen frisst 2 px Höhe: umrandete Knöpfe waren 51,4 px hoch, gefüllte 49,4 px. Das Polster wird um die Rahmenstärke gekürzt, dann sind alle gleich hoch. Rechts bleibt es enger, weil der Winkel optisch schon Luft macht. */ .btn-ghost{border:1px solid rgba(245,242,236,.32);color:var(--tinte);padding:.75rem 1.125rem .75rem 1.5rem} .btn-ghost:hover{border-color:var(--accent);color:var(--accent)} .chev{margin-left:7px;font-size:1.15em;line-height:1;transform:translateY(-1px);transition:transform .25s var(--ease)} .btn:hover .chev{transform:translate(3px,-1px)} /* ── Navigation ────────────────────────────────────────────── Über dem Kopfbild schwebt sie frei: Links ausgeschrieben, aber kein Balken, keine Milchscheibe, keine Linie. Dafür das Zeichen deutlich grösser — auf der ersten Seite ist es das Signet, nicht ein Rückweg zur Startseite. Sobald das Kopfbild durch ist, fährt die Leiste zusammen und der Balken kommt. */ .nav{ position:fixed;inset:0 0 auto 0;z-index:100; height:var(--nav-h); /* KEIN backdrop-filter mehr. Er stand hier mit blur(22px) und saturate(180%) — auf einem 2000-px-Fenster mit doppelter Aufloesung heisst das: einen Streifen von 4000 Pixeln Breite sechzigmal pro Sekunde neu abtasten, weichzeichnen und saettigen. Das ist das Teuerste auf der ganzen Seite, es laeuft dauerhaft (ueber dem Kopfbild ist es aus, ab da an), und es erklaert eine Zaehigkeit ohne sichtbare Aussetzer. Deckende Farbe statt Weichzeichner: auf fast schwarzem Grund ist der Unterschied kaum zu sehen und kostet nichts. */ background:rgba(8,8,10,.93); border-bottom:1px solid var(--hair-d); /* height MUSS mit rein — sonst springt die Leiste von 86 auf 52 px in einem Bild, während Zeichen und Knopf sauber überblenden. Genau das liest sich als „kommt hart rein". */ transition:height .5s var(--ease),background .45s var(--ease), border-color .45s var(--ease); } .nav.is-light{ background:rgba(255,255,255,.95); border-bottom-color:rgba(0,0,0,.09); color:var(--ink); } .nav.is-hero{ height:clamp(64px,8vh,86px); background:transparent; border-bottom-color:transparent; } .nav-in{ max-width:var(--max);height:100%;margin:0 auto; padding:0 var(--pad); display:flex;align-items:center;gap:28px; } .nav-mark{display:flex;align-items:center;gap:11px;margin-right:auto} .mark{ width:12px;height:20px;display:block;flex-shrink:0; background:currentColor; -webkit-mask:url(img/f.svg) center/contain no-repeat; mask:url(img/f.svg) center/contain no-repeat; transition:width .4s var(--ease),height .4s var(--ease); } .mark-sm{width:10px;height:17px} /* Wortmarke wie im echten Logo: Versalien, weit gesperrt, mit Abstand zwischen den beiden Wörtern. Die Sperrung hängt hinten Luft an das letzte Zeichen — die wird wieder abgezogen. */ .wordmark{ font-size:0.75rem;font-weight:500; text-transform:uppercase; letter-spacing:.24em; word-spacing:.5em; margin-right:-.24em; white-space:nowrap; transition:font-size .4s var(--ease),letter-spacing .4s var(--ease); } /* Über dem Kopfbild: Zeichen und Wortmarke deutlich grösser */ .nav.is-hero .mark{width:clamp(19px,2.1vw,26px);height:clamp(32px,3.5vw,44px)} .nav.is-hero .wordmark{font-size:clamp(13px,1.15vw,16px);letter-spacing:.28em} .nav-links{display:flex;gap:26px;transition:opacity .3s var(--ease)} .nav-links a{font-size:0.8125rem;opacity:.82;transition:opacity .2s} .nav-links a:hover{opacity:1} /* ── Die Tür in der Navigation ──────────────────────────────── Kein Knopf oben rechts. „Anfragen" ist der letzte Punkt der Navigation, im Rot der Seite. Damit gibt es in der Leiste gar keinen Zustandswechsel mehr — vorher erschien dort eine Pille, die erst zu weit rechts sass, dann hart hereinkam und zuletzt quer über den Schirm flog. Alle drei Probleme hatten dieselbe Ursache: ein Element, das kommt und geht. */ /* Höhere Gewichtung nötig: .nav-links a setzt opacity:.82 */ .nav-links a.nav-tuer{color:var(--accent);opacity:1} .nav-links a.nav-tuer:hover{opacity:.72} .nav.is-light .nav-links a.nav-tuer{color:#c0442c} /* Menüzeichen und Menüblatt für schmale Schirme */ .nav-burger{display:none;width:26px;height:26px;position:relative;flex-shrink:0} .nav-burger span{ position:absolute;left:3px;width:20px;height:1.5px; background:currentColor;transition:transform .3s var(--ease); } .nav-burger span:nth-child(1){top:10px} .nav-burger span:nth-child(2){top:16px} .nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)} .nav-burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)} .nav-sheet{ position:absolute;top:var(--nav-h);left:0;right:0; background:rgba(8,8,10,.97); padding:14px var(--pad) 26px; display:flex;flex-direction:column;gap:2px; border-bottom:1px solid var(--hair-d); } .nav.is-light .nav-sheet{background:rgba(255,255,255,.96);border-bottom-color:var(--hair-l)} .nav-sheet a{ font-size:1.25rem;font-weight:300;letter-spacing:-.014em; padding:13px 0;border-bottom:1px solid var(--hair-d); } .nav.is-light .nav-sheet a{border-bottom-color:var(--hair-l)} .nav-sheet a:last-child{border-bottom:0;color:var(--accent)} /* ── HERO ────────────────────────────────────────────────── */ .hero{height:190vh;position:relative} .hero-stage{ position:sticky;top:0;height:100vh;height:100svh; display:grid;place-items:center; } .hero-frame{ position:absolute; top:calc(var(--p,0) * 4.2vh); bottom:calc(var(--p,0) * 4.2vh); left:calc(var(--p,0) * 5.5vw); right:calc(var(--p,0) * 5.5vw); border-radius:calc(var(--p,0) * 34px); overflow:hidden; background:#111; } /* Beide Fassungen liegen deckungsgleich übereinander: die leichte Anfangsschlaufe unten, die volle darüber. Sie wird eingeblendet, sobald sie durchläuft — ohne absolute Lage stünde sie darunter und die Sektion würde doppelt so hoch. */ .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* Der Schleier hat zwei Aufgaben, und beide sind nötig: quer nach rechts hält er die dünne 200er-Schrift lesbar, egal welches Bild gerade läuft; von oben hält er die Navigation lesbar, ohne dass dafür ein Balken nötig wäre. Er läuft weich aus — man sieht keine Kante, nur ein dunkleres Bild. */ .hero-veil{ /* z-index MUSS sein: app.js haengt die volle Fassung des Films als zweites Video in denselben Rahmen. Ohne Stapelwert laege es NACH dem Schleier und damit darueber — der Text wurde unlesbar, sobald die bessere Fassung uebernahm. */ position:absolute;inset:0;z-index:1; /* Zurueckgenommen: der Film soll heller durchkommen. Die Schrift steht links, also bleibt dort genug Deckung — nach rechts loest sich der Schleier jetzt frueher auf, und der Streifen oben ist schwaecher, weil die Navigation ohnehin ihren eigenen Verlauf mitbringt. Unten bleibt es kraeftig: dort geht das Bild in die naechste Sektion ueber. */ background: linear-gradient(100deg,rgba(8,8,10,.74) 0%,rgba(8,8,10,.44) 44%,rgba(8,8,10,.1) 74%,rgba(8,8,10,0) 100%), linear-gradient(180deg,rgba(8,8,10,.44) 0%,rgba(8,8,10,.04) 24%,rgba(8,8,10,.1) 60%,rgba(8,8,10,.84) 100%); } .hero-copy{ position:relative;z-index:2; width:100%;max-width:var(--max); padding:0 var(--pad); margin-top:6vh; opacity:var(--fade,1); transform:translate3d(0,calc(var(--p,0) * -52px),0); /* Videohintergrund ist unvorhersehbar hell — minimale Absicherung */ text-shadow:0 1px 34px rgba(0,0,0,.45); } /* Mehr Abstand als innerhalb des Titels — sonst liest sich der Ort wie die erste Zeile des Fliesstexts statt wie Teil des Titels. */ .hero-copy .lead{color:rgba(245,242,236,.8);max-width:46ch;margin-top:32px} .br-lg{display:none} .hero-hint{ position:absolute;z-index:3;left:var(--pad);bottom:36px; font-size:0.6875rem;letter-spacing:.2em;text-transform:uppercase; color:rgba(245,242,236,.6); opacity:var(--fade,1); } .hero-hint span{display:inline-block;animation:bob 2.6s var(--ease) infinite} @keyframes bob{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(5px);opacity:1}} /* ── MANIFEST ────────────────────────────────────────────── */ .manifest{ padding:clamp(120px,20vh,230px) var(--pad); max-width:1180px;margin:0 auto; } /* Kurzer Satz, grosse Fläche — er darf mehr Raum nehmen als vorher, sonst steht er verloren in der Mitte. */ .reveal-line{ font-size:clamp(1.75rem,4.4vw,3.8rem); line-height:1.24; letter-spacing:-.024em; font-weight:300; overflow-wrap:break-word; } .reveal-line .w{color:rgba(245,242,236,.15);transition:color .45s var(--ease)} .reveal-line .w.on{color:var(--tinte)} /* Ein einziges betontes Wort, wie bei jedem Titel der Seite */ .reveal-line .w-fett{font-weight:600} /* ── Reveal-Basis ────────────────────────────────────────── */ .r{opacity:0;transform:translate3d(0,26px,0);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)} .r.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .r{opacity:1;transform:none;transition:none} .hero-hint span{animation:none} } /* ── Sektionskopf ────────────────────────────────────────── */ .sec-head{max-width:var(--max);margin:0 auto;padding:0 var(--pad)} /* ── ARBEITEN ────────────────────────────────────────────── */ .works{padding:0 0 clamp(90px,13vh,150px)} /* Sechs Filme in einem Sechserraster: eine Kopfkarte über die ganze Breite, dann drei nebeneinander, dann zwei grössere. So geht die Rechnung ohne Lücke auf — bei drei Spalten bliebe unten eine leer. */ .work-grid{ max-width:var(--max);margin:44px auto 0;padding:0 var(--pad); display:grid;grid-template-columns:repeat(6,1fr); gap:clamp(14px,1.6vw,22px); } .work{ grid-column:span 2; display:block;width:100%; background:none;border:0;padding:0;margin:0; color:inherit;font:inherit;text-align:left;cursor:pointer; } .work-wide{grid-column:span 6} .work:nth-last-child(-n+2){grid-column:span 3} .work:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px} /* Abspielzeichen: keine Zierde, sondern der Hinweis, dass hier ein Film liegt und kein Standbild. */ .work-play{ position:absolute;left:16px;bottom:16px; width:clamp(38px,3.4vw,48px);aspect-ratio:1;border-radius:50%; /* Auch hier ohne Weichzeichner: sechs davon wandern beim Scrollen ueber bewegte Standbilder, und jeder kostet eine eigene Kompositionsschicht. Deckender Grund sieht gleich aus. */ background:rgba(8,8,10,.72); border:1px solid rgba(245,242,236,.35); transition:background .3s var(--ease),border-color .3s var(--ease); } .work-play::after{ content:'';position:absolute;top:50%;left:calc(50% + 1px); transform:translate(-50%,-50%); border-style:solid;border-width:6px 0 6px 10px; border-color:transparent transparent transparent var(--tinte); } .work:hover .work-play{background:var(--accent);border-color:var(--accent)} .work-media{ position:relative; border-radius:clamp(14px,1.5vw,22px); overflow:hidden;background:#111; } .work-media img{ width:100%;height:100%;object-fit:cover; aspect-ratio:16/9; transition:transform 1.1s var(--ease-out),filter .6s var(--ease); filter:saturate(.92); } .work-wide .work-media img{aspect-ratio:21/9} .work:hover .work-media img{transform:scale(1.045);filter:saturate(1.05)} .work-meta{padding:16px 4px 0} .work-meta h3{font-size:clamp(1.02rem,1.4vw,1.32rem);font-weight:500;letter-spacing:-.016em;transition:color .25s var(--ease)} .work:hover .work-meta h3{color:var(--accent)} .work-meta p{font-size:0.875rem;color:var(--dim-d);margin-top:4px;line-height:1.45} /* ── LEISTUNGEN ──────────────────────────────────────────── */ .svc{padding:clamp(60px,9vh,110px) 0 clamp(80px,12vh,150px);border-top:1px solid var(--hair-d)} .svc-inner{ max-width:var(--max);margin:0 auto;padding:0 var(--pad); display:grid;grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); /* bewusst kein align-items:start — die Medienspalte muss die volle Zeilenhöhe bekommen, sonst hat das sticky-Element keine Strecke */ } .svc-media-col{position:relative;height:100%} /* Der Rahmen haengt am Seitenverhaeltnis, nicht an der Fensterhoehe. Vorher stand hier height:74vh — dann waechst der Rahmen auf einem 27-Zoeller in die Hoehe, waehrend die Spaltenbreite gedeckelt bleibt. Gemessen: auf 14 Zoll 550x666 (0.83), auf 27 Zoll 695x1036 (0.67). Derselbe Film wurde also je nach Schirm anders beschnitten. Mit festem 5:6 ist der Bildausschnitt ueberall derselbe, und 74vh bleibt nur noch als Deckel fuer flache Fenster. */ .svc-media{position:sticky;top:calc(var(--nav-h) + 5vh)} .svc-frame{ position:relative;width:100%;aspect-ratio:5/6;max-height:74vh; border-radius:clamp(16px,1.6vw,24px); overflow:hidden;background:#111; } /* Harter Schnitt statt Blende. Eine weiche Blende ist der beliebigste Uebergang, den es gibt — sie koennte auf jeder Website stehen. Filme werden aber geschnitten; geblendet wird nur, wenn der Cutter etwas Bestimmtes sagen will. Der Schnitt kostet nichts, laesst den Film in voller Groesse und ist das Handwerk der Branche statt eine Anleihe aus dem Effektkatalog. Bedingung dafuer steht in app.js: der naechste Clip muss geladen sein, BEVOR geschnitten wird. Ohne das ersetzt der Schnitt die Blende durch ein schwarzes Bild. */ .svc-clip{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transform:none;transition:none; } .svc-clip.is-on{opacity:1;transform:none} /* Auch die hochkant gedrehten fuellen den Rahmen. Vorher standen sie schmal in der Mitte mit Rahmengrund an den Seiten — begruendet damit, dass Social-Content nun mal hochkant ist. Im Betrieb sah es aber schlicht nach zwei verschiedenen Formaten in derselben Reihe aus. Jetzt beschneidet cover sie auf das Format der anderen fuenf, das kostet oben und unten etwas Bild und gibt dafuer eine ruhige Reihe. */ .svc-clip-hoch{object-fit:cover} .svc-index{ position:absolute;left:20px;bottom:18px; font-size:0.75rem;letter-spacing:.14em; color:rgba(245,242,236,.85); display:flex;gap:6px;align-items:baseline; text-shadow:0 1px 12px rgba(0,0,0,.6); } .svc-index span{color:var(--accent)} .svc-index i{font-style:normal;color:rgba(245,242,236,.5)} /* Nachlauf, damit der Pin so lange hält, bis Punkt 04 aktiv ist — sonst wäre der letzte Schritt tote Scroll-Strecke ohne Bild */ .svc-list{padding-top:2vh;padding-bottom:34vh} .svc-head{padding:0;margin-bottom:clamp(40px,7vh,90px)} /* Zurueck auf die kompakte Polsterung. Die Strecke war zwischenzeitlich auf 11vh gezogen, damit man nicht so schnell durchwischt — auf dem Desktop wirkte die Sektion dadurch auseinandergezogen. Das Problem war ohnehin ein Handy-Problem, und dort steht der Film jetzt bei seinem Text, also braucht es die Streckung nicht mehr. */ .svc-item{ padding:clamp(34px,5vh,54px) 0; border-top:1px solid var(--hair-d); opacity:.4;transition:opacity .5s var(--ease); } .svc-item.is-on{opacity:1} .svc-item:first-of-type{border-top:0} .svc-n{ display:block;font-size:0.75rem;letter-spacing:.15em; color:var(--accent);margin-bottom:14px;font-weight:500; } .svc-item h3{font-size:clamp(1.4rem,2.3vw,1.95rem);font-weight:300;letter-spacing:-.024em;margin-bottom:12px} .svc-item p{color:var(--dim-d);max-width:42ch;font-size:clamp(.98rem,1.15vw,1.08rem)} /* ── SOCIAL ──────────────────────────────────────────────── */ .social{padding:clamp(80px,12vh,140px) 0 clamp(70px,10vh,120px);border-top:1px solid var(--hair-d)} /* ACHTUNG: .social ist die SEKTION "Was gerade läuft". Die Verweise im Fuss heissen deshalb .fuss-profile — eine Regel auf .social traf sonst die ganze Sektion und stellte Ueberschrift und Leiste nebeneinander. */ .social-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px} .rail-nav{display:flex;gap:8px;flex-shrink:0} .rail-btn{ width:38px;height:38px;border-radius:50%; background:rgba(245,242,236,.1); display:grid;place-items:center;font-size:1.25rem;line-height:1; transition:background .2s,color .2s; } .rail-btn:hover{background:var(--accent);color:var(--tinte)} .rail-btn:disabled{opacity:.3;cursor:default} .rail{ display:flex;gap:clamp(12px,1.4vw,20px); margin-top:36px; overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .rail::-webkit-scrollbar{display:none} /* Passt alles ins Bild, wird die Klasse von app.js gesetzt: die Kacheln stehen dann mittig statt links, mit totem Raum rechts. Bewusst nur in diesem Fall — justify-content:center auf einem überlaufenden Scroll-Behälter macht den Anfang unerreichbar. */ .rail.rail-passt{justify-content:center} .rail.rail-passt .rail-pad{display:none} .rail-pad{flex:0 0 calc(var(--pad) - clamp(12px,1.4vw,20px));min-width:1px} .post{ flex:0 0 clamp(210px,20vw,286px); scroll-snap-align:center; border-radius:clamp(14px,1.4vw,20px); overflow:hidden;background:#111; } .post video{width:100%;aspect-ratio:9/16;object-fit:cover} /* ── FOTOGRAFIE ────────────────────────────────────────────── Vorher lief hier ein grauer, halbdurchsichtiger Streifen im Dauerlauf durch. Das war gleich zweimal falsch: was sich bewegt, kann man nicht betrachten, und Graustufen bei 50 % Deckkraft erklären die Bilder zur Tapete. Es sind Arbeiten, keine Textur. Jetzt: volle Farbe, feste Höhe, freie Breite — Hoch- und Querformat nebeneinander, von Hand durchschiebbar. */ .fotos{padding:clamp(40px,6vh,80px) 0 clamp(90px,13vh,150px);border-top:1px solid var(--hair-d)} /* Die vier Bereiche als Text, nicht als Pillen — Pillen gibt es auf dieser Seite schon, und die heissen „hier klicken". Hier wird ausgewählt, nicht ausgelöst. Der aktive trägt den roten Strich. */ .fotofilter{ max-width:var(--max);margin:clamp(26px,3vh,38px) auto 0;padding:0 var(--pad); display:flex;gap:clamp(18px,2.2vw,32px);flex-wrap:wrap; } /* Groesser als die 0.8125rem von vorher: Das hier sind die einzigen Schalter der Sektion, und sie waren die kleinste Schrift der Seite — direkt unter einer Zeile in Displaygroesse sah das aus wie eine Fussnote statt wie eine Auswahl. Dazu mehr Polsterung, damit die Trefferflaeche auf dem Handy die 44 px erreicht. */ .ff{ font-size:clamp(0.9375rem,1.05vw,1.0625rem);letter-spacing:.01em;color:var(--dim-d); padding:10px 0;border-bottom:2px solid transparent; transition:color .25s var(--ease),border-color .25s var(--ease); } .ff:hover{color:var(--tinte)} .ff.is-on{color:var(--tinte);border-bottom-color:var(--accent)} .rail-fotos{align-items:center} .bild{ flex:0 0 auto; scroll-snap-align:center; border-radius:clamp(12px,1.2vw,18px); overflow:hidden;background:#111; } .bild img{ height:clamp(230px,36vh,420px);width:auto;max-width:none; object-fit:cover; transition:transform 1s var(--ease-out); } .bild:hover img{transform:scale(1.03)} /* ── ABLAUF (hell) ───────────────────────────────────────── */ .flow{ background:var(--paper);color:var(--ink); padding:clamp(90px,14vh,170px) 0 clamp(80px,12vh,140px); border-radius:clamp(20px,2.6vw,42px) clamp(20px,2.6vw,42px) 0 0; } .flow .lead{color:var(--dim-l)} .tiles{ max-width:var(--max);margin:clamp(40px,6vh,72px) auto 0;padding:0 var(--pad); display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.1vw,16px); } /* Raster statt flex mit auto-Rand: so beginnen Zahl, Titel und Text in jeder Karte auf derselben Höhe. Vorher drückte die Zahl den Titel nach unten, und wie weit hing an der Textlänge der Karte — eine Zeile mehr, und der Titel stand einen Zeilenabstand höher. */ .tile{ background:var(--paper-2); border-radius:clamp(14px,1.5vw,22px); padding:clamp(20px,2vw,28px); display:grid; grid-template-rows:auto auto 1fr; align-content:start; } .tile-n{ font-size:clamp(2rem,2.6vw,2.7rem);font-weight:200;letter-spacing:-.03em; color:var(--accent);line-height:1;padding-bottom:clamp(22px,2.4vw,34px); } .tile h3{font-size:1.06rem;font-weight:500;letter-spacing:-.018em;margin-bottom:8px} /* Fünf schmale Spalten heisst wenig Platz pro Zeile: ohne Hilfe franst der rechte Rand aus und eine Zeile endet nach zwei Wörtern. pretty verteilt die Wörter über alle Zeilen statt gierig von oben. */ .tile p{font-size:0.90625rem;line-height:1.5;color:var(--dim-l);text-wrap:pretty} /* ── KUNDEN (hell) ───────────────────────────────────────── */ .clients{ background:var(--paper);color:var(--ink); padding:clamp(40px,6vh,70px) var(--pad) clamp(90px,13vh,150px); text-align:center; } /* Erste Stufe: die fünf bekannten Namen, gross. */ /* Warum keine gleiche Hoehe und keine gleichen Spalten: Beides sah ungleich aus. Fuenf gleich breite Spalten plus contain heisst, dass breite Wortmarken an der Spaltenbreite haengen bleiben und dadurch flach werden (Hilti kam auf 23 px Hoehe), waehrend eine quadratische Marke die volle Hoehe bekommt (V-ZUG 64 px). Gleiche Hoehe ist genauso falsch, nur andersherum. Gleich gross heisst: gleich viel Tinte auf der Seite. Der Faktor --f steht an jedem Bild im HTML und ist aus Seitenverhaeltnis und Deckungsgrad der Datei gerechnet — mit Wurzel gedaempft, sonst wuerden Haarlinien-Logos wie Hyatt riesig. Breite ergibt sich. */ .logo-gross{ --lg:clamp(30px,3.2vw,44px); max-width:1080px;margin:clamp(32px,4vh,48px) auto 0; display:flex;flex-wrap:wrap;justify-content:center;align-items:center; gap:clamp(24px,3.4vw,48px); } /* flex:0 0 auto ist hier kein Beiwerk, sondern der Kern: Flex-Kinder schrumpfen von sich aus, wenn die Zeile zu eng wird. Die Hoehe steht aber fest — dann wird das Logo schmaler gequetscht statt kleiner. Auf dem Handy kam Hilti so auf 5.12 statt 6.80, V-ZUG auf 1.67 statt 1.00. object-fit:contain ist der Sicherheitsgurt fuer den Fall, dass die Breite doch einmal beschnitten wird. */ .logo-gross img{ flex:0 0 auto;object-fit:contain; width:auto;height:calc(var(--lg) * var(--f,1));max-width:100%; filter:brightness(0);opacity:.5; transition:opacity .35s var(--ease); } .logo-gross img:hover{opacity:.9} /* Zweite Stufe: alle übrigen, kleiner und enger — sechs Spalten statt fünf, damit der Unterschied nicht nur an der Höhe hängt. */ .logo-grid{ --lg:clamp(17px,1.7vw,24px); max-width:1120px;margin:clamp(40px,6vh,72px) auto 0; display:flex;flex-wrap:wrap;justify-content:center; align-items:center; gap:clamp(22px,2.6vw,44px) clamp(26px,3vw,52px); } /* Alle Dateien sind auf ihren Inhalt beschnitten — vorher hatte jedes Logo einen anderen leeren Rand mitgeliefert (Hyatt füllte nur 39 % seiner Datei) und wurde dadurch unterschiedlich gross dargestellt. Jetzt entscheidet allein die Form über die Grösse. */ .logo-grid img{ flex:0 0 auto;object-fit:contain; width:auto;height:calc(var(--lg) * var(--f,1));max-width:100%; filter:brightness(0);opacity:.38; transition:opacity .35s var(--ease); } .logo-grid img:hover{opacity:.85} /* Ausnahme für zweifarbige Logos mit ausgestanzter Schrift (diga: „ga" steht weiss auf schwarzer Platte). brightness(0) würde auch das Weiss schwärzen und einen vollen Klotz ergeben — hier braucht es Graustufen statt Silhouette. */ .logo-grid img.zweifarbig{filter:grayscale(1) contrast(1.04);opacity:.52} .logo-grid img.zweifarbig:hover{opacity:.95} /* ── ÜBER (hell) ─────────────────────────────────────────── */ .about{background:var(--paper);color:var(--ink);padding:0 0 clamp(60px,9vh,110px)} .about-grid{ max-width:var(--max);margin:0 auto;padding:0 var(--pad); display:grid;grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px);align-items:center; } .about-photo{border-radius:clamp(16px,1.8vw,26px);overflow:hidden;background:var(--paper-2)} /* Die Vorlage ist 16:9 und liegt nur in 1280 px vor. Ein 4:3-Rahmen schnitte seitlich 320 px weg, die auf einem Retina-Schirm gerade die fehlenden sind. Deshalb im Seitenverhältnis der Datei zeigen, bis ein grösseres Original von Martin da ist. */ .about-photo img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 40%} .about-text p{color:var(--dim-l);margin-top:20px;max-width:46ch;font-size:clamp(.98rem,1.15vw,1.08rem)} .about-text .d3{margin-bottom:4px} .about-facts{ display:grid;gap:1px;background:var(--hair-l); margin-top:38px;border-top:1px solid var(--hair-l);border-bottom:1px solid var(--hair-l); } .about-facts div{background:var(--paper);padding:18px 0} .about-facts strong{display:block;font-size:0.9375rem;font-weight:500;letter-spacing:-.012em} .about-facts span{display:block;font-size:0.875rem;color:var(--dim-l);margin-top:2px} /* ── STIMMEN (hell) ────────────────────────────────────────── Keine Karten und keine Sternenreihen: gesetzt wie eine Seite Zitate. Der mehrspaltige Satz lässt die Texte fliessen, statt sie in gleich hohe Kästchen zu zwängen — acht Rezensionen unterschiedlicher Länge sehen als Kartenraster immer kaputt aus. */ .stimmen{ background:var(--paper);color:var(--ink); padding:clamp(70px,10vh,120px) var(--pad) clamp(50px,7vh,80px); } .stimmen .sec-head{max-width:var(--max);margin:0 auto clamp(34px,5vh,54px)} .stimmen-satz{ max-width:var(--max);margin:0 auto; columns:2;column-gap:clamp(32px,4vw,72px); } /* Ab drei Spalten, sobald Platz da ist: bei 19 Rezensionen wird eine zweispaltige Wand sonst sehr lang, und kurze Stimmen wie die von Carina stehen als halbleere Zeile herum. */ @media (min-width:1280px){ .stimmen-satz{columns:3} } /* Die Rahmen sind weg. Der Kommentar darueber sagte seit jeher "keine Karten", gebaut waren aber Karten: Rahmen, Radius, Polster. Bei acht Stimmen faellt das nicht auf, bei neunzehn ergibt es neunzehn Kaesten auf einer Seite, die sonst mit Haarlinien und Typografie auskommt. Jetzt traegt ein Strich links die Zuordnung — dieselbe Geste wie ein Zitat am Seitenrand. */ .stimme{ break-inside:avoid; margin:0 0 clamp(26px,3.4vh,38px); padding:2px 0 2px clamp(16px,1.4vw,22px); border-left:2px solid var(--hair-l); } .stimme:hover{border-left-color:var(--accent)} .stimme{transition:border-color .3s var(--ease)} /* Die aufklappbaren: erst ab dem Schalter sichtbar. Nicht per display:none aufgeloest, sondern ganz aus dem Satzfluss genommen, sonst reisst der Mehrspaltensatz Loecher. */ .stimmen-satz:not(.alle) .stimme-mehr{display:none} .stimmen-schalter{ max-width:var(--max);margin:clamp(6px,1vh,14px) auto 0; display:flex;justify-content:center; } .stimmen-schalter button{ font-size:clamp(0.9375rem,1.05vw,1.0625rem);color:var(--dim-l); padding:10px 0;border-bottom:2px solid var(--hair-l); transition:color .25s var(--ease),border-color .25s var(--ease); } .stimmen-schalter button:hover{color:var(--ink);border-bottom-color:var(--accent)} .stimme-kopf{display:flex;align-items:center;gap:11px;margin-bottom:12px} /* Initiale statt Profilbild: Google gibt die Bilder nicht frei zum Weiterverwenden, und ein leerer Platzhalterkopf sieht schlechter aus als ein Buchstabe. */ .stimme-ini{ flex:0 0 auto;width:2.25rem;height:2.25rem;border-radius:50%; display:grid;place-items:center; background:var(--paper-2);color:var(--dim-l); font-size:0.875rem;font-weight:500; } .stimme-wer{display:flex;flex-direction:column;gap:1px;margin-right:auto;min-width:0} .stimme cite{ font-style:normal;font-size:0.875rem;font-weight:500;color:var(--ink); letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* Sterne in der Tinte der Seite, nicht in Googles Gold. Zwei Gruende: das Gold besteht die Kontrastpruefung nicht (1.71 bei noetigen 4.5), und es ist Googles Markenfarbe, nicht seine. Schwarz kommt auf 16.83 und fuegt sich in eine Seite aus Schwarz, Weiss und einem Rot. Das Google-Zeichen daneben sagt ohnehin, woher die Bewertung stammt. */ .sterne{color:var(--ink);font-size:0.8125rem;letter-spacing:.06em;line-height:1} .g-mark{flex:0 0 auto;width:1.125rem;height:1.125rem} .stimme p{ color:var(--dim-l); font-size:clamp(.94rem,1.05vw,1rem); line-height:1.6; text-wrap:pretty; } /* Kopfzeile der Sektion: dieselben Zeichen wie in den Rezensionen, damit klar ist, woher die Note stammt. */ .g-kopf{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; margin-top:18px;color:var(--dim-l);font-size:0.875rem; } .g-kopf strong{font-size:1.25rem;font-weight:500;color:var(--ink);letter-spacing:-.02em} .g-kopf .g-mark{width:1.25rem;height:1.25rem} .g-kopf .sterne{font-size:1rem} /* Zwei Spalten brauchen Breite. Darunter untereinander, sonst bleiben von jeder Zeile drei Wörter übrig. */ @media (max-width:860px){ .stimmen-satz{columns:1} .stimme{padding-left:14px} } /* ── BAUM (hell) ───────────────────────────────────────────── Liegt noch im hellen Teil, direkt vor dem schwarzen Schluss. Eigene Knopffarben, weil die weisse Pille auf Weiss verschwände. */ .baum{ background:var(--paper);color:var(--ink); padding:0 var(--pad) clamp(100px,15vh,180px); } .baum-in{ max-width:var(--max);margin:0 auto; border-top:1px solid var(--hair-l);padding-top:clamp(60px,9vh,110px); display:grid;grid-template-columns:1fr auto; gap:clamp(30px,5vw,72px);align-items:center; } .baum .lead{color:var(--dim-l);max-width:44ch;margin-top:22px} .baum-bild{ width:clamp(220px,28vw,380px); display:flex;align-items:center;justify-content:center; } .baum-bild img{width:100%;height:auto;display:block} /* Der Baum trägt die Tintenfarbe der hellen Sektion, nicht das Rot: er ist Illustration, nicht Handlung. */ .baum-svg{width:100%;height:auto;display:block;color:var(--ink)} /* Klickbar, aber leise: kein Knopf-Aussehen, nur der Zeiger und ein kaum sichtbares Nachgeben. Wer es findet, findet es. */ .baum-bild[role="button"]{cursor:pointer;border-radius:8px;transition:transform .25s var(--ease)} .baum-bild[role="button"]:active{transform:scale(.97)} .baum-bild[role="button"]:focus-visible{outline:2px solid var(--accent);outline-offset:8px} @media (prefers-reduced-motion:reduce){ /* Wer Bewegung abbestellt hat, sieht den fertigen Baum. */ .baum-svg *{visibility:visible!important} } /* Die Note trägt die Sektion, nicht ein Sternenband. Die Zahl steht in Schaugrösse auf der Grundlinie der kleinen Zeilen daneben — dieselbe Mechanik wie bei den Titeln: ein Element gross, der Rest klein. Der rote Strich links bindet sie an den Knopf darunter. */ .note{ display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px; margin-top:30px;padding-left:16px; border-left:2px solid var(--accent); } .note strong{ font-size:clamp(2.1rem,3.4vw,2.9rem); font-weight:300;letter-spacing:-.03em;line-height:1; color:var(--ink); } .note-von{font-size:0.875rem;color:var(--dim-l)} .note-quelle{ flex-basis:100%; font-size:0.8125rem;letter-spacing:.01em;color:var(--dim-l); margin-top:4px; } .btn-dunkel{background:var(--ink);color:var(--paper)} .btn-dunkel:hover{transform:scale(1.035);background:#000} .btn-linie{border:1px solid rgba(0,0,0,.22);color:var(--ink);padding:12px 18px 12px 24px} .btn-linie:hover{border-color:var(--accent);color:#c0442c} /* ── KONTAKT ─────────────────────────────────────────────── */ .contact{ background:var(--black); padding:clamp(110px,17vh,200px) var(--pad) clamp(90px,13vh,150px); border-radius:clamp(20px,2.6vw,42px) clamp(20px,2.6vw,42px) 0 0; margin-top:-1px; } .contact-in{max-width:var(--max);margin:0 auto} .d1-contact{font-size:clamp(2.3rem,5.6vw,4.9rem)} .contact .lead{margin-top:26px;max-width:48ch} .contact-grid{ /* Vier Spalten statt drei: die Rechtsseiten stehen jetzt hier statt klein in der Fusszeile. Damit ist der Raster gefuellt, ohne dass ein Wort erfunden werden musste. */ display:grid;grid-template-columns:repeat(4,1fr); gap:30px;margin-top:clamp(60px,9vh,110px); border-top:1px solid var(--hair-d);padding-top:34px; } .contact-grid span{ display:block;font-size:0.75rem;letter-spacing:.14em;text-transform:uppercase; color:var(--dim-d);margin-bottom:12px; } .contact-grid p{font-size:0.9375rem;line-height:1.7} .contact-grid a{border-bottom:1px solid rgba(245,242,236,.25);transition:border-color .2s,color .2s} .contact-grid a:hover{border-color:var(--accent);color:var(--accent)} /* Die drei Profile: nebeneinander statt untereinander, mit einem Mittelpunkt dazwischen. Untereinander mit Unterstreichung sahen sie aus wie eine Liste von Fehlermeldungen. Keine Unterstreichung im Ruhezustand — die Trennzeichen sagen schon, dass es Verweise sind — und ein kleiner Pfeil erscheint erst beim Darueberfahren, weil er dann etwas bedeutet: es geht hier weg. */ /* Untereinander statt nebeneinander: bei vier Spalten ist jede rund 270 px breit, nebeneinander braechen die drei Namen ohnehin um — und ein Mittelpunkt am Zeilenanfang sieht kaputt aus. */ .fuss-profile,.fuss-recht{display:flex;flex-direction:column;align-items:flex-start;gap:6px} .fuss-profile a,.fuss-recht a{border-bottom:0;white-space:nowrap;transition:color .2s} /* Der Pfeil steht DAUERHAFT da, nicht erst beim Darueberfahren. Er sagt: das fuehrt hier weg. Auf einem Telefon gibt es kein Darueberfahren — dort waere ein Hinweis, den man nur mit der Maus sieht, gar kein Hinweis. Gedaempft, damit er das Wort nicht ueberstimmt; beim Darueberfahren rueckt er ein Stueck mit. */ .fuss-profile a::after{ content:"↗"; font-size:.78em;margin-left:.3em; display:inline-block; color:var(--dim-d); transition:transform .2s var(--ease),color .2s var(--ease); } .fuss-profile a:hover,.fuss-recht a:hover{color:var(--accent)} .fuss-profile a:hover::after{transform:translate(1px,-1px);color:var(--accent)} /* Auf schmalen Schirmen bricht die Zeile um — der Mittelpunkt darf dann nicht am Zeilenanfang stehen bleiben. */ /* ── RECHTSSEITEN ──────────────────────────────────────────── Impressum, AGB, Datenschutz. Eine Textspalte, sonst nichts. Die Leiste steht hier fest, ohne Zustandswechsel. */ /* Auf den Rechtsseiten läuft kein app.js: die Leiste hat also keinen Zustandswechsel und kein Burgermenü. Deshalb steht sie fest im schmalen Schnitt, und statt der fünf Punkte steht ein Rückweg — der bleibt auch auf dem Handy sichtbar, wo .nav-links sonst zugunsten des (hier nicht vorhandenen) Burgers verschwindet. */ .rechtsseite .nav{background:rgba(8,8,10,.92)} /* Die Regel muss die spätere .nav-links{display:none} im Handy-Umbruch schlagen, darum zwei Klassen statt einer. */ .rechtsseite .recht-nav{display:flex} .recht-nav a{font-size:0.75rem;letter-spacing:.02em} .recht{padding:clamp(90px,14vh,150px) var(--pad) clamp(80px,12vh,130px)} .recht-in{max-width:74ch;margin:0 auto} .recht h1{margin-bottom:clamp(30px,5vh,52px)} .recht h2{ font-size:clamp(1.06rem,1.35vw,1.22rem);font-weight:500;letter-spacing:-.014em; margin:clamp(34px,4.5vh,52px) 0 12px; } .recht p{color:var(--dim-d);margin-bottom:14px;font-size:clamp(.98rem,1.1vw,1.05rem)} .recht a{color:var(--tinte);border-bottom:1px solid rgba(245,242,236,.28);transition:border-color .2s} .recht a:hover{border-color:var(--accent)} .recht strong{color:var(--tinte);font-weight:500} .recht h3{ font-size:clamp(.98rem,1.1vw,1.05rem);font-weight:500;color:var(--tinte); margin:22px 0 8px; } .recht-lead{color:var(--tinte);opacity:.9} .recht-datei{margin:22px 0 8px;font-size:0.8125rem;letter-spacing:.02em} .recht-datei a{color:var(--accent);border-bottom-color:rgba(226,84,60,.4)} /* Aufzählungen ohne Punkte: der rote Strich links ordnet sie dem Absatz darüber zu, ohne dass Bullets die Textspalte unterbrechen. */ .recht-punkte{list-style:none;margin:14px 0 20px;border-left:2px solid var(--accent);padding-left:20px} .recht-punkte li{ color:var(--dim-d);margin-bottom:9px; font-size:clamp(.98rem,1.1vw,1.05rem);line-height:1.6; } .recht-punkte strong{color:var(--tinte);font-weight:500} .recht-stand{margin-top:clamp(34px,5vh,54px);font-size:0.8125rem;opacity:.7} /* ── LUPE ──────────────────────────────────────────────────── Bilder und Hochkant-Beiträge in gross. Selbst gebaut, damit kein fremdes Skript dazukommt. Beim Video kommen die Bedienelemente des Browsers dazu — dort will man springen und den Ton hören. */ .lupe{ position:fixed;inset:0;z-index:300; background:rgba(8,8,10,.95); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); display:flex;align-items:center;justify-content:center; padding:clamp(16px,4vw,56px); animation:lupeAuf .25s var(--ease); } @keyframes lupeAuf{from{opacity:0}to{opacity:1}} /* Feste Breite nötig: sonst zieht sich die Bühne auf ihren Inhalt zusammen, und das 100 % des Abspielers bezieht sich auf nichts — der Rahmen bliebe bei den 300 px Voreinstellung stehen. */ .lupe-buehne{ display:flex;align-items:center;justify-content:center; width:100%;height:100%; } .lupe-buehne img,.lupe-buehne video{ max-width:100%; max-height:calc(100svh - 2 * clamp(16px,4vw,56px)); width:auto;height:auto; border-radius:clamp(8px,1vw,14px); display:block; } /* Die sechs Filme laufen seit 17.08.2026 im eigenen Abspieler. Der bringt sein Seitenverhaeltnis selber mit — auch 2.39:1 beim Immobilienvideo — deshalb hier nur Breite und Grund, kein festes Verhaeltnis wie beim YouTube-Rahmen darunter. */ .lupe-buehne .lupe-film{ width:min(100%, calc((100svh - 2 * clamp(16px,4vw,56px)) * 16 / 9)); background:#000; } /* Der YouTube-Rahmen der Reels bleibt 16:9 und füllt, was übrig ist */ .lupe-buehne iframe{ width:min(100%, calc((100svh - 2 * clamp(16px,4vw,56px)) * 16 / 9)); aspect-ratio:16/9;height:auto; border:0;border-radius:clamp(8px,1vw,14px); display:block;background:#000; } /* Die Hochkant-Beiträge sind 9:16. Im 16:9-Rahmen von oben stünden sie als schmaler Streifen zwischen zwei schwarzen Feldern. */ .lupe-buehne iframe.lupe-hoch{ aspect-ratio:9/16; width:min(100%, calc((100svh - 2 * clamp(16px,4vw,56px)) * 9 / 16)); } .lupe-zu{ position:absolute;top:clamp(12px,2vw,26px);right:clamp(12px,2vw,26px); width:46px;height:46px;border-radius:50%; background:rgba(245,242,236,.12);color:var(--tinte); font-size:1.625rem;line-height:1; display:grid;place-items:center; transition:background .2s var(--ease); } .lupe-zu:hover{background:rgba(245,242,236,.26)} /* Anfassbar machen, was sich vergrössern lässt */ .bild,.post{cursor:zoom-in} .bild:focus-visible,.post:focus-visible{outline:2px solid var(--accent);outline-offset:3px} @media (prefers-reduced-motion:reduce){.lupe{animation:none}} /* ── FOOTER ──────────────────────────────────────────────── */ .foot{background:var(--black);padding:0 var(--pad) 46px} .foot-in{ max-width:var(--max);margin:0 auto; border-top:1px solid var(--hair-d);padding-top:26px; display:flex;align-items:center;gap:18px;flex-wrap:wrap; } /* Der Anspruch steht unten als Konstante — oben trägt ihn schon der Titel, hier schliesst er die Seite. */ .foot-mark{display:flex;align-items:center;gap:10px;flex-shrink:0} .foot-claim{font-size:0.78125rem;letter-spacing:.01em;color:var(--tinte);white-space:nowrap} /* Keine feste Breite: der Satz soll die Zeile nutzen, die da ist, statt auf 48 Zeichen umgebrochen zu werden, obwohl Platz wäre. */ /* Das Kleingedruckte rechts, nicht links: links steht die Signatur, rechts die Pflichtangabe. margin-left statt margin-right — vorher schob es sich selbst nach links und klebte am Anspruch. */ .foot p{font-size:0.75rem;color:var(--dim-d);margin-left:auto;text-align:right;line-height:1.6} .foot nav{display:flex;gap:20px} .foot nav a{font-size:0.75rem;color:var(--dim-d);transition:color .2s} .foot nav a:hover{color:var(--accent)} /* ── Responsive ──────────────────────────────────────────── */ @media (min-width:900px){ .br-lg{display:inline} } @media (max-width:1100px){ .tiles{grid-template-columns:repeat(3,1fr)} } @media (max-width:1000px){ .logo-grid{--lg:clamp(15px,2.2vw,22px)} /* zwei Filme pro Reihe statt drei */ .work{grid-column:span 3} } @media (max-width:720px){ .tiles{grid-template-columns:repeat(2,1fr)} } @media (max-width:760px){ /* Fünf grosse Logos nebeneinander werden auf dem Telefon zu Briefmarken. Drei Spalten wären richtig — aber ein Raster lässt die letzten zwei linksbündig stehen, und die Lücke rechts liest sich, als fehle ein Logo. Also flex mit Zentrierung: die zweite Reihe sitzt mittig und wirkt gewollt. */ .logo-gross{ display:flex;flex-wrap:wrap;justify-content:center; gap:clamp(26px,6vw,40px) clamp(20px,5vw,34px); } /* KEINE feste Spaltenbreite mehr. Genau die hat die Logos verzogen: flex-basis 1/3 zwingt jedes Bild auf 98 px Breite, die Hoehe steht aber fest — also wird die Form gequetscht. Gemessen auf 375 px: Hilti 5.12 statt 6.80, V-ZUG 1.67 statt 1.00. Stattdessen behaelt jedes Logo seine eigene Breite und die Zeile bricht von selbst um. Damit sie klein genug bleiben, faellt --lg auf dem Telefon niedriger aus. */ .logo-gross{--lg:clamp(20px,5.6vw,30px)} .logo-gross img{flex:0 0 auto;width:auto;min-width:0} } @media (max-width:860px){ .nav-links{display:none} .nav-burger{display:block} /* Auf dem Telefon gibt es keinen Landeplatz — der Knopf bleibt, wo er steht. Das Skript setzt .statisch. */ .hero{height:170vh} .hero-copy{margin-top:4vh} .hero-hint{display:none} .nur-gross{display:none} /* Auf dem Telefon läuft die Schrift über die volle Breite — der Schleier muss dann von oben kommen statt von der Seite. */ .hero-veil{ /* Auf dem Handy steht die Schrift ueber der Bildmitte, nicht am Rand — hier darf weniger weg als auf dem Desktop, sonst wird sie unlesbar. Nur leicht aufgehellt. */ background: linear-gradient(180deg,rgba(8,8,10,.62) 0%,rgba(8,8,10,.26) 26%,rgba(8,8,10,.42) 58%,rgba(8,8,10,.88) 100%), linear-gradient(100deg,rgba(8,8,10,.44) 0%,rgba(8,8,10,.28) 60%,rgba(8,8,10,.2) 100%); } .work{grid-column:span 6} .work:nth-last-child(-n+2){grid-column:span 6} .work-wide .work-media img{aspect-ratio:16/9} /* Auf dem Handy steht der Film ueber seinem eigenen Text. Vorgeschichte, damit das nicht nochmal jemand "verbessert": Zuerst klebte ein Rahmen oben und die Liste lief dahinter durch. Das verdeckte die Ueberschrift des Punkts, den man gerade las. Der Versuch, das ueber Haltestrecke und Zielhoehe zu richten, hat es nur verschoben — auf 375 px liegen Film und Text uebereinander, also frisst das eine zwangslaeufig das andere. Jetzt gibt es das Kleben auf dem Handy gar nicht mehr. app.js haengt jeden Film in seinen Punkt ein, hier steht nur noch, wie er dort aussieht. Damit kann sich nichts mehr ueberdecken. */ .svc-inner{display:block} .svc-media-col[hidden]{display:none} .svc-list{padding-top:0;padding-bottom:8vh} .svc-item{opacity:1;padding:clamp(30px,5vh,52px) 0} /* Huelle statt nacktem Video: darin liegen Film und Standbild uebereinander. Das Standbild ist die Versicherung gegen das schwarze Blitzen — ein Video ohne Daten malt sich schwarz, ein Bild nie. Es geht erst weg, wenn der Film meldet, dass er laeuft. */ .clip-huelle{ position:relative;width:100%;aspect-ratio:5/6; border-radius:clamp(12px,3vw,18px);overflow:hidden; background:#111;margin-bottom:26px; } .clip-huelle .svc-clip{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;opacity:1;transform:none;transition:none; border-radius:0;margin:0; } /* Auch die hochkanten fuellen die Huelle, statt schmal in der Mitte zu stehen — auf dem Handy gibt es nichts daneben, wogegen sie sich abgrenzen muessten. */ .clip-huelle .svc-clip-hoch{object-fit:cover} .clip-standbild{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;pointer-events:none; opacity:1;transition:opacity .18s linear; } .clip-standbild.weg{opacity:0} .about-grid{grid-template-columns:1fr} .baum-in{grid-template-columns:1fr;gap:34px} /* Nicht volle Breite: der Baum wäre sonst ein Drittel des Fensters hoch, und die ganze Wachstums-Animation müsste durch entsprechend wenig Scrollweg. Begrenzt bleibt der Weg lang genug. */ .baum-bild{width:min(58vw,230px);margin:0 auto} .contact-grid{grid-template-columns:1fr 1fr;gap:26px} .social-head{flex-direction:column;align-items:flex-start} .rail-nav{display:none} } /* Fuenf Bereiche passen auf 375 px nicht in eine Zeile — gemessen 335 px Text auf 335 px Platz, die vier Abstaende fehlen komplett. Umbrechen liess "Immobilien" als Waise auf Zeile zwei stehen, was nach Fehler aussieht. Also eine Zeile, die man schiebt: dieselbe Geste wie bei den Reels und den Fotos daneben, kein neuer Mechanismus. Die Leiste wird am Rand angeschnitten, damit man sieht, dass rechts noch etwas kommt. */ @media (max-width:620px){ .fotofilter{ flex-wrap:nowrap;overflow-x:auto; scrollbar-width:none;-ms-overflow-style:none; gap:20px; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); } .fotofilter::-webkit-scrollbar{display:none} .ff{white-space:nowrap;flex:0 0 auto} /* Der letzte braucht rechts Luft, sonst klebt er unter der Blende. */ .ff:last-child{padding-right:24px} } @media (max-width:560px){ body{font-size:1rem} .tiles{grid-template-columns:1fr} .logo-grid{--lg:clamp(13px,3.6vw,18px);gap:26px 22px} .tile-n{padding-bottom:22px} .foot-in{flex-direction:column;align-items:flex-start;gap:14px} /* Rechtsbuendig ergibt nur neben der Signatur Sinn. Untereinander stand die Pflichtangabe als einziger Block der Seite rechts — das sah aus, als waere sie verrutscht. */ .foot p{margin-left:0;text-align:left} /* Der zweite Satz auf eine eigene Zeile. Zusammenlaufend ergab er drei Zeilen, in denen Jahr, Firma, Ort und Herkunftshinweis ineinander liefen — man las es als einen langen Satz. */ .foot-satz{display:block;margin-top:4px} /* Zwei Spalten liessen "Einsatzgebiet" mit einer Zeile neben "Rechtliches" mit dreien stehen; darunter klaffte ein Loch von zwei Zeilen. Untereinander ist es laenger, aber ohne Luecken. */ .contact-grid{grid-template-columns:1fr;gap:30px} } /* ── DER STAPEL ("?tisch") ──────────────────────────────────── Abzüge, die auf einen Tisch fallen, statt ineinander zu blenden. Warum das hier erlaubt ist, was sonst verboten wäre: Der Schatten. Das Playbook untersagt Deko-Schatten und lässt sie zu, wo ein Objekt real einen wirft — Teller auf dem Tisch, Tafel an der Wand. Ein Abzug auf einem Tisch ist genau dieser Fall. Deshalb schwarz, kurz und dicht am Papier, nicht der weiche bunte Schleier. Alles hängt an body.svc-tisch, damit die bestehende Fassung unberührt bleibt. Nur Zeigergeräte: auf dem Handy liegt der Film beim Text, dort fällt nichts aufeinander. Winkel und Versatz sind fest verdrahtet, nicht zufällig — beim Zurückscrollen müssen dieselben Abzüge wieder dieselbe Lage einnehmen, sonst zappelt der Stapel. */ @media (hover:hover) and (min-width:901px){ body.svc-tisch .svc-frame{ overflow:visible;background:none;border-radius:0; } /* Mittig verankert statt ueber Raender eingerueckt: mit inset in Prozent wuchs der Abzug samt Rahmenbreite und Drehung ueber die Spalte hinaus und legte sich auf den Text — gemessen ragten drei von fuenf bis 60 px in die Liste. Jetzt steht die Breite fest, der Rest ergibt sich, und die Drehung kostet nur noch die paar Pixel, die der Kasten beim Kippen breiter wird. */ body.svc-tisch .svc-clip{ inset:auto;left:50%;top:50%; width:76%;height:auto;aspect-ratio:5/6; border:9px solid var(--paper);border-bottom-width:26px; /* unten breiter, so ist Fotopapier beschnitten */ border-radius:2px;background:var(--paper);box-sizing:content-box; box-shadow:0 9px 16px rgba(0,0,0,.55); opacity:0;transform-origin:50% 50%; transform:translate(-50%,-50%) translate3d(0,-42px,0) scale(1.05); transition:opacity .22s var(--ease-out), transform .42s cubic-bezier(.2,.85,.3,1.05); } /* Hochkant bleibt hochkant — ein Abzug wird nicht beschnitten. */ body.svc-tisch .svc-clip-hoch{width:50%;aspect-ratio:9/16;object-fit:cover} body.svc-tisch .svc-clip.gelegt{opacity:1} body.svc-tisch .svc-clip[data-i="0"].gelegt{transform:translate(-50%,-50%) translate3d(-14px,10px,0) rotate(-3.6deg)} body.svc-tisch .svc-clip[data-i="1"].gelegt{transform:translate(-50%,-50%) translate3d(12px,-6px,0) rotate(2.8deg)} body.svc-tisch .svc-clip[data-i="2"].gelegt{transform:translate(-50%,-50%) translate3d(-8px,4px,0) rotate(-1.4deg)} body.svc-tisch .svc-clip[data-i="3"].gelegt{transform:translate(-50%,-50%) translate3d(16px,8px,0) rotate(4.2deg)} body.svc-tisch .svc-clip[data-i="4"].gelegt{transform:translate(-50%,-50%) translate3d(-16px,-4px,0) rotate(-2.6deg)} body.svc-tisch .svc-clip[data-i="5"].gelegt{transform:translate(-50%,-50%) translate3d(6px,6px,0) rotate(1.6deg)} body.svc-tisch .svc-clip[data-i="6"].gelegt{transform:translate(-50%,-50%) translate3d(-4px,-2px,0) rotate(-0.9deg)} body.svc-tisch .svc-index{bottom:-6px;left:2px;background:none;padding:0} } /* ── EIGENER ABSPIELER ──────────────────────────────────────── Ohne controls-Attribut, mit einer Leiste UNTER dem Film. Der Grund ist kein Geschmack: Die eingebaute Leiste des Browsers legt beim Hovern einen dunklen Verlauf über das untere Drittel des Bildes. Auf der Seite eines Filmers verdeckt sie damit genau das, was verkauft werden soll — und stylen lässt sie sich nicht, das haben die Browser abgeschafft. Also eine eigene, die nichts verdeckt, immer da ist und keine Hover-Logik braucht. */ .film-huelle{ display:flex;flex-direction:column;gap:12px; width:min(100%, calc((100svh - 2 * clamp(16px,4vw,56px) - 54px) * 16 / 9)); max-height:calc(100svh - 2 * clamp(16px,4vw,56px)); } .film-huelle .lupe-film{ width:100%;height:auto;background:#000; border-radius:clamp(8px,1vw,14px); cursor:pointer; /* Klick aufs Bild hält an, wie man es erwartet */ } .film-huelle:fullscreen{gap:0;background:#000;justify-content:center} .film-huelle:fullscreen .lupe-film{border-radius:0} .film-bar{ display:flex;align-items:center;gap:clamp(10px,1.2vw,18px); color:var(--tinte); } .film-bar button{ flex:0 0 auto;width:30px;height:30px;border-radius:50%; display:grid;place-items:center; border:1px solid rgba(245,242,236,.28);background:none; transition:border-color .2s var(--ease),background .2s var(--ease); } .film-bar button:hover{border-color:var(--accent);background:rgba(245,242,236,.06)} .film-bar button:focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* Zeichen aus reinem CSS statt Symbolschrift: die Seite lädt sonst für fünf Dreiecke eine ganze Datei. */ .film-knopf::before{ content:'';border-style:solid; border-width:5px 0 5px 8px;margin-left:2px; border-color:transparent transparent transparent var(--tinte); } .film-knopf.laeuft::before{ border:0;width:8px;height:10px;margin:0; border-left:3px solid var(--tinte);border-right:3px solid var(--tinte); } .film-ton::before{content:'';width:9px;height:9px;background:var(--tinte); clip-path:polygon(0 30%,35% 30%,70% 0,70% 100%,35% 70%,0 70%)} .film-ton.stumm{opacity:.45} .film-voll::before{content:'';width:10px;height:10px; border:2px solid var(--tinte);border-radius:1px; clip-path:polygon(0 0,40% 0,40% 20%,20% 20%,20% 40%,0 40%,0 100%,40% 100%,40% 80%,20% 80%,20% 60%,0 60%,0 0,100% 0,100% 40%,80% 40%,80% 20%,60% 20%,60% 0,100% 0,100% 100%,60% 100%,60% 80%,80% 80%,80% 60%,100% 60%,100% 100%,0 100%)} .film-zeit{ flex:0 0 auto;font-size:0.75rem;letter-spacing:.02em; color:var(--dim-d);font-variant-numeric:tabular-nums; } /* Die Strecke ist ein echtes range-Feld: damit funktionieren Pfeil- tasten, Tabulator und Vorlesesoftware ohne Zutun. Nur das Aussehen ist ausgetauscht. */ .film-strecke{ flex:1 1 auto;appearance:none;-webkit-appearance:none; height:20px;background:none;cursor:pointer;margin:0; } /* Gelaufen in Rot, Rest in Grau — dieselbe Leserichtung wie bei jedem Abspieler: die Farbe zeigt, wie weit man ist, nicht was noch kommt. Die Spur ist ein Pseudo-Element und kann nicht aus dem Skript beschrieben werden; sie liest deshalb --p vom Feld darueber. */ .film-strecke::-webkit-slider-runnable-track{ height:2px; background:linear-gradient(90deg, var(--accent) calc(var(--p,0) * 100%), rgba(245,242,236,.25) 0); } .film-strecke::-moz-range-track{ height:2px; background:linear-gradient(90deg, var(--accent) calc(var(--p,0) * 100%), rgba(245,242,236,.25) 0); } .film-strecke::-webkit-slider-thumb{ -webkit-appearance:none;width:11px;height:11px;border-radius:50%; background:var(--accent);margin-top:-4.5px;border:0; } .film-strecke::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:var(--accent);border:0} .film-strecke:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:3px} /* ── BLÄTTERN IN DER BILDERGALERIE ──────────────────────────── Die Pfeile liegen am Rand des Fensters, nicht am Bild: bei hochkanten Bildern wäre daneben zu wenig Platz, und ein Pfeil auf dem Bild verdeckt das, was man anschauen will. */ .lupe-pfeil{ position:absolute;top:50%;transform:translateY(-50%);z-index:2; width:clamp(40px,4vw,52px);aspect-ratio:1;border-radius:50%; display:grid;place-items:center; background:rgba(8,8,10,.55);border:1px solid rgba(245,242,236,.28); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); transition:background .25s var(--ease),border-color .25s var(--ease); } .lupe-pfeil:hover{background:rgba(8,8,10,.8);border-color:var(--accent)} .lupe-pfeil:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .lupe-pfeil[hidden]{display:none} .lupe-pfeil-links{left:clamp(10px,2vw,26px)} .lupe-pfeil-rechts{right:clamp(10px,2vw,26px)} .lupe-pfeil::before{ content:'';width:9px;height:9px; border-top:2px solid var(--tinte);border-right:2px solid var(--tinte); } .lupe-pfeil-links::before{transform:rotate(-135deg);margin-left:3px} .lupe-pfeil-rechts::before{transform:rotate(45deg);margin-right:3px} /* Auf dem Telefon wischt man ohnehin — dort nehmen die Pfeile nur Bildfläche weg. */ @media (max-width:620px){ .lupe-pfeil{display:none} } /* Beiträge, für die nur das Standbild vorliegt (YouTube sperrt den Download vom Server, siehe app.js). Sie sollen in der Leiste exakt aussehen wie die bewegten — nur eben still. */ .post-still img{display:block;width:100%;height:100%;object-fit:cover} /* ── FEHLERSEITE ────────────────────────────────────────────── Voll hoch, Fusszeile wirklich unten. Vorgeschichte, damit niemand zurueckbaut: Hier lief zuerst ein Hintergrundfilm. Er war laut, hat die Schrift erschlagen und lief obendrein falsch — die absolute Lage griff nicht, der Streifen stand ueber statt hinter dem Text. Simpel schlaegt aufwendig: Jetzt ein gezeichneter Filmstreifen, der reisst. Nichts, was laden oder kaputtgehen kann, und das Wort traegt den Rest. */ body.fehlerseite{ min-height:100svh;display:flex;flex-direction:column; background:var(--black);color:var(--tinte); } .fehler{ flex:1 0 auto;display:flex;align-items:center; padding:clamp(90px,13vh,150px) var(--pad) clamp(50px,8vh,90px); } .fehler-in{width:100%;max-width:var(--max);margin:0 auto} /* Der Streifen fuehrt, die Schrift folgt. Breite gedeckelt, damit er auf einem 27-Zoeller nicht zur Litfasssaeule wird. */ .riss{ display:block;width:min(100%,620px);height:auto; color:rgba(245,242,236,.22); margin-bottom:clamp(30px,5vh,56px); } .d1-fehler{font-size:clamp(2.8rem,7vw,6rem);margin-top:10px} .fehler .lead{max-width:48ch;margin-top:20px} .fehlerseite .foot{flex:0 0 auto} @media (max-width:620px){ .riss{width:100%} }