/* Bauer Objekteinrichtung — Werkzeichnung als Interface */ /* Geist trägt Überschrift und Fließtext, Geist Mono alles, was auf einer Zeichnung stehen würde: Blattnummern, Maße, Positionen. Eine Familie, zwei Stimmen — die Mono zitiert die Beschriftung eines Plots. */ @font-face{font-family:Geist;src:url(../fonts/geist-latin.woff2) format('woff2'); font-weight:300 700;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:Geist;src:url(../fonts/geist-latin-ext.woff2) format('woff2'); font-weight:300 700;font-style:normal;font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304, U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0, U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Geist Mono';src:url(../fonts/geistmono-latin.woff2) format('woff2'); font-weight:400 600;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Geist Mono';src:url(../fonts/geistmono-latin-ext.woff2) format('woff2'); font-weight:400 600;font-style:normal;font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304, U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0, U+2113,U+2C60-2C7F,U+A720-A7FF} /* Hier lag Archivo Expanded und trug in der Objektmappe die Objektnamen. Sie ist raus. Zwei Schriftfamilien im Haus hießen: die Referenzenseite sprach mit einer anderen Stimme als alles davor, und der Bruch fiel genau an der Stelle auf, an der ein Besucher von der Startseite kommt. Der Museumston entsteht jetzt aus Satz statt aus Schnitt — Versalien, enge Laufweite, viel Weiß —, und die Seite lädt eine Schriftdatei weniger. */ :root{ --paper:#FFFAF2; --surface:#F8F1E6; --ink:#2E2E2E; /* Rot und Grau sind gegen den dunkleren der beiden hellen Gründe gerechnet, also gegen --surface, nicht gegen --paper. Die Vorgänger #E74C39 und #8A8580 sahen zwar leichter aus, kamen als Schrift aber nur auf 3,4 bis 3,7 zu 1 — unter dem, was die WCAG für Text unter 24 px verlangt, und das betraf jede Beschriftung, jede Bildunterschrift und jede Positionsnummer auf der Seite. Die Werte jetzt: Rot 5,0 / 4,6 · Grau 5,0 / 4,6. Weiße Schrift auf der roten Fläche der Hauptschaltfläche kommt auf 5,0. */ --accent:#CF2D1A; /* Zwei Marken für ein Rot, weil es zwei Aufgaben hat. --accent ist Fläche und Linie: Schaltfläche, Fokusrahmen, Strich unter einem Link. --accent-ink ist dasselbe Rot als Schrift: Positionsnummern, Pflichtstern, Blattzähler. Auf hellem Grund sind beide gleich. Erst auf den dunklen Abschnitten laufen sie auseinander — dort muss die rote Fläche dunkel bleiben, damit die weiße Schrift darauf trägt, und die rote Schrift aufgehellt werden, damit sie selbst trägt. Eine Marke kann beides nicht. */ --accent-ink:#CF2D1A; --graphite:#716C67; --rule:rgba(46,46,46,.13); --rule-strong:rgba(46,46,46,.24); /* Die Ausweichkette steht einmal für sich, damit die Kundenschriften in der Objektmappe dieselbe Reserve erben, ohne sie zu wiederholen. */ --sans-fallback:'Helvetica Neue',Arial,sans-serif; --display:Geist,var(--sans-fallback); --sans:Geist,var(--sans-fallback); --tech:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace; --gutter:clamp(20px,5vw,88px); --sheet:clamp(14px,2.4vw,34px); --ease:cubic-bezier(.22,1,.36,1); /* Vier Größen für alles, was kein Titel ist. Jeder Fließtext auf der Seite greift auf --fs-body zu, jede Beschriftung auf --fs-label — so bleiben die Blätter untereinander gleich, auch wenn später Abschnitte dazukommen. */ --fs-lead:clamp(1.19rem,1.1rem + .58vw,1.5rem); --fs-body:clamp(1.0625rem,1.02rem + .25vw,1.1875rem); --fs-meta:clamp(.9375rem,.91rem + .16vw,1rem); --fs-label:clamp(.75rem,.73rem + .1vw,.8125rem); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--sans);font-weight:400;font-size:var(--fs-body); line-height:1.62;letter-spacing:.004em; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; /* Deutsch baut Wörter wie „Agrarmarketinggesellschaft“ — 26 Zeichen, die auf einem 320-px-Gerät breiter sind als ihre Spalte. Zusammen mit dem overflow-x oben würden sie nicht überstehen, sondern abgeschnitten. hyphens trennt nach den Regeln der Sprache aus dem lang-Attribut, overflow-wrap fängt ab, was auch das nicht trennen kann. */ hyphens:auto;overflow-wrap:break-word; } /* Maßangaben, Dateinamen und Positionsnummern werden nicht getrennt — dort ist die ungebrochene Zeichenfolge die Information. */ .tnum,.mono,[class*="__nr"],[class*="__pos"],[class*="__tag"],code{hyphens:none} body.is-locked{overflow:hidden} img,svg{display:block;max-width:100%} a{color:inherit} h1,h2,h3,h4,p,figure,ol,ul,dl{margin:0} ol,ul{list-style:none;padding:0} ::selection{background:var(--accent);color:var(--paper)} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px} /* ─────────────────────────────── Typografie */ /* Alles, was auf einer Zeichnung als Beschriftung stünde, läuft in der Mono. */ .eyebrow{ font-family:var(--tech);font-weight:500;font-size:var(--fs-label); letter-spacing:.12em;text-transform:uppercase;color:var(--graphite); } .eyebrow .no{color:var(--accent-ink)} .display{ font-family:var(--display);font-weight:600; letter-spacing:-.03em;line-height:1.04; } .claim,.field__key,.menu__list a,.doc h2,.card__title{ font-family:var(--display);font-weight:600;letter-spacing:-.03em; } h1.display{font-size:clamp(2.15rem,8vw,6.2rem);line-height:1.01;letter-spacing:-.04em} h2.display{font-size:clamp(2rem,4.6vw,3.7rem);letter-spacing:-.035em} h3.display{font-size:clamp(1.4rem,2.4vw,1.95rem);line-height:1.12} /* Für Abschnitte, die einem anderen untergeordnet sind: Größe wie eine dritte Ebene, Rang im Dokument aber weiter h2. Vorher trug die Werkschau dort eine nackte h2 — Gewicht 700 und positive Laufweite, während jede andere Überschrift der Seite auf 600 steht und negativ läuft. */ h2.display--klein{font-size:clamp(1.4rem,2.4vw,1.95rem);line-height:1.12;letter-spacing:-.03em} /* Reveals laufen hinter overflow:hidden. Ohne Polster kappt die Kante Ober- und Unterlängen; das Polster wird per negativem Rand wieder herausgerechnet. */ .clip{overflow:hidden;padding-block:.12em .2em;margin-block:-.12em -.2em} .lead{font-size:var(--fs-lead);line-height:1.54;font-weight:300} .muted{color:var(--graphite)} .tnum{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1} /* Nur für Screenreader. Sichtbar ist an diesen Stellen ein Bild; wer nichts sieht, braucht trotzdem zu hören, was die Schaltfläche tut. */ .u-sr{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; } /* ─────────────────────────────── Raster */ .wrap{padding-inline:var(--gutter)} /* Drei Polsterstufen statt einer. Vorher trug jede Sektion dasselbe Maß und zwischen je zweien lief eine Linie — die Seite atmete im Gleichtakt und las sich dadurch wie ein Satz gleicher Blätter. Jetzt entscheidet der Inhalt: Bildstrecken stehen eng, Argumente stehen weit, und eine Trennlinie steht nur dort, wo wirklich ein Schnitt ist. */ .section{padding-block:clamp(84px,11vw,180px);position:relative} .section--tight{padding-block:clamp(44px,5.4vw,84px)} .section--wide{padding-block:clamp(104px,13vw,220px)} .section--rule{border-top:1px solid var(--rule)} /* ── Die Naht zwischen zwei Abschnitten ────────────────────────────────── Nachgemessen lagen zwischen den neun Abschnittsgrenzen 180, 232, 400, 221, 0, 180, 264, 265 und 360 px, und bis auf die Stelle, an der ein Foto randlos übernimmt, war überall dasselbe zu sehen: leeres Papier. Der einzige Tonwechsel, den die Seite hat (Papier #FFFAF2 auf Fläche #F8F1E6, keine zwei Helligkeitsstufen Unterschied), fiel ausgerechnet in die größte dieser Lücken — über 400 px verteilt sieht den niemand. Damit stand jeder Abschnitt gleich weit vom nächsten entfernt, und die Seite zerfiel in zehn gleich gewichtete Blöcke ohne erkennbare Kapitel. Im Möbelbau gibt es für zwei Flächen, die aneinanderstoßen, genau zwei saubere Antworten: bündig — eine Ebene, Fuge geschlossen — oder eine Schattenfuge, also ein bewusst stehengelassener Spalt. Was es nicht gibt, ist ein unentschiedener Abstand; daran erkennt man die Arbeit. Dieselbe Regel gilt jetzt für die Abschnitte: bündig gehört zusammen. Knappes Polster, keine Kante. Haarlinie gleiches Kapitel, neuer Abschnitt. Läuft genau einmal, zwischen Bereichen und Vorgehen. Schattenfuge Kapitelschnitt. Die Fuge trägt den Tonwechsel, statt ihn in der leeren Fläche verlaufen zu lassen. Die Fuge ist 7 px hoch und besteht aus zwei Lagen: oben die scharfe Kante der oberen Platte, darunter der Schatten, der nach unten ausläuft. Kein Trennstrich — ein Spalt. Der Unterschied ist, dass man ihn als Tiefe liest und nicht als Zierat. */ .section--fuge::before{ content:"";position:absolute;inset:0 0 auto;height:7px;pointer-events:none; background: linear-gradient(rgba(46,46,46,.2),rgba(46,46,46,.2)) top/100% 1px no-repeat, linear-gradient(rgba(46,46,46,.09),rgba(46,46,46,0)); } /* Gegen den dunklen Abschluss greift ein Schatten nicht — die Fläche ist dort selbst schon dunkel. Also andersherum gebaut: die dunkle Platte sitzt vor dem Papier, wirft ihren Schatten nach oben darauf und bekommt oben die helle Kante, die das Licht fängt. */ .section--fuge-tief{box-shadow:inset 0 1px 0 rgba(255,250,242,.12)} .section--fuge-tief::before{ content:"";position:absolute;left:0;right:0;bottom:100%;height:10px; pointer-events:none; background:linear-gradient(rgba(46,46,46,0),rgba(46,46,46,.11)); } /* Fuß eines Abschnitts, der bündig an den nächsten stößt. */ .section--eng-unten{padding-bottom:clamp(30px,3.6vw,60px)} .section-head{display:grid;gap:clamp(20px,3vw,38px);grid-template-columns:1fr;margin-bottom:clamp(44px,6vw,86px)} @media (min-width:900px){ .section-head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end} } /* ─────────────────────────────── Kopf */ .head{ position:fixed;top:0;left:0;right:0;z-index:70; display:flex;align-items:center;justify-content:space-between; /* Das Polster ist kleiner als früher, weil die Bedienelemente darin größer geworden sind. Streifenhöhe bleibt dadurch bei 95 px wie zuvor. */ padding:clamp(14px,1.9vw,24px) var(--gutter); transition:transform .5s var(--ease),background-color .35s ease,border-color .35s ease; border-bottom:1px solid transparent; } .head.is-solid{background:rgba(255,250,242,.9);backdrop-filter:blur(9px);border-bottom-color:var(--rule)} /* Der Weichzeichner zwingt das Telefon, den Streifen bei jedem Scrollbild neu zu rastern. Ohne Hauptnavigation ist darunter ohnehin nichts zu sehen. */ @media (max-width:899px){.head.is-solid{background:var(--paper);backdrop-filter:none}} .head.is-up{transform:translateY(-104%)} /* Das Zeichen bleibt so groß wie bisher, der anklickbare Kasten darum wächst auf die Mindestgröße einer Trefffläche. */ .head__logo{display:inline-flex;align-items:center;min-height:44px} .head__logo img{height:clamp(26px,3vw,34px);width:auto} .nav{display:flex;align-items:center;gap:clamp(20px,2.6vw,40px)} @media (max-width:899px){.nav{display:none}} /* :not(.btn) ist kein Schmuck: ohne den Ausschluss gewinnt padding-block hier gegen das Polster von .btn — höhere Spezifität — und drückt die Schaltfläche im Kopf auf 31 px zusammen, während dieselbe Schaltfläche im Fließtext 53 px hoch ist. Das war ein Fehler, kein Entwurf. */ .nav a:not(.btn){ text-decoration:none;font-size:var(--fs-label);letter-spacing:.09em;text-transform:uppercase; font-weight:500;color:var(--ink);position:relative; /* 12 px statt 4 px heben die Zeile auf 45 px Trefffläche. Die Schrift bleibt, wo sie war — nur der Kasten um sie herum wird größer. */ display:inline-flex;align-items:center;padding-block:12px;min-height:44px; } .nav a:not(.btn)::after{ /* 8 px über der Kastenunterkante, damit der Strich denselben Abstand zur Schrift hält wie vor der Vergrößerung. */ content:"";position:absolute;left:0;bottom:8px;height:1px;width:100%;background:var(--accent); transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease); } .nav a:not(.btn):hover::after,.nav a:not(.btn):focus-visible::after{ transform:scaleX(1);transform-origin:left} /* Etwas flacher als im Fließtext, damit der Kopfstreifen seine Höhe behält — 47 px liegen weiterhin über der geforderten Mindestgröße. */ .nav .btn{margin-left:8px;padding-block:12px} /* Die Füllung läuft von unten auf, der Pfeil verlässt das Feld rechts und kommt links zurück. Oben links saß zusätzlich eine rote Passermarke, sieben mal sieben Pixel, auf jedem einzelnen Knopf der Seite — die Ecke einer Zeichnung, die hier nicht liegt. */ .btn{ --fill:var(--accent); position:relative;isolation:isolate;overflow:hidden; display:inline-flex;align-items:center;gap:14px;text-decoration:none; font-size:var(--fs-label);letter-spacing:.11em;text-transform:uppercase;font-weight:500; padding:15px 26px 15px 24px;border:1px solid var(--ink); background:transparent;color:var(--ink);cursor:pointer; transition:color .34s var(--ease),border-color .34s var(--ease); } .btn::before{ content:"";position:absolute;inset:0;z-index:-1;background:var(--fill); transform:translateY(100%);transition:transform .5s var(--ease); } .btn:hover,.btn:focus-visible{color:var(--paper);border-color:var(--fill)} .btn:hover::before,.btn:focus-visible::before{transform:translateY(0)} .btn svg{width:15px;height:9px;stroke:currentColor;stroke-width:1.4;fill:none} .btn:hover svg,.btn:focus-visible svg{animation:arrowpass .52s var(--ease)} @keyframes arrowpass{ 0%{transform:none;opacity:1} 42%{transform:translateX(180%);opacity:0} 58%{transform:translateX(-180%);opacity:0} 100%{transform:none;opacity:1} } .btn--accent{--fill:var(--ink);border-color:var(--accent);background:var(--accent);color:var(--paper)} .btn--accent:hover,.btn--accent:focus-visible{border-color:var(--ink)} /* Zweitweg: nur eine Haarlinie, damit der rote Hauptweg allein laut bleibt. */ .btn--ghost{--fill:var(--ink);border-color:var(--rule-strong);background:rgba(255,250,242,.9)} /* Burger — gestapelte Striche unterschiedlicher Breite (Branding-Muster) */ .burger{ display:none;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer; position:relative;margin-right:-10px; } @media (max-width:899px){.burger{display:block}} .burger span{ position:absolute;left:50%;height:1.5px;background:var(--ink);border-radius:1px; transition:transform .5s var(--ease),width .5s var(--ease),opacity .3s ease; } .burger span:nth-child(1){width:26px;top:15px;transform:translateX(-50%)} .burger span:nth-child(2){width:17px;top:21px;transform:translateX(-50%)} .burger span:nth-child(3){width:26px;top:27px;transform:translateX(-50%)} .is-open .burger span:nth-child(1){transform:translateX(-50%) translateY(6px) rotate(45deg)} .is-open .burger span:nth-child(2){opacity:0;width:0} .is-open .burger span:nth-child(3){transform:translateX(-50%) translateY(-6px) rotate(-45deg)} /* ─────────────────────────────── Mobiles Menü */ .menu{ position:fixed;inset:0;z-index:65;background:var(--paper); display:flex;flex-direction:column;justify-content:center; padding:clamp(76px,14vw,120px) var(--gutter) clamp(30px,6vw,60px); clip-path:inset(0 0 100% 0);visibility:hidden; transition:clip-path .72s var(--ease),visibility 0s linear .72s; } .is-open .menu{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .72s var(--ease),visibility 0s} .menu__list{position:relative;display:flex;flex-direction:column;gap:clamp(6px,1.4vw,14px)} .menu__list li{overflow:hidden;padding-block:.06em .16em;margin-block:-.06em -.16em} .menu__list a{ display:flex;align-items:baseline;gap:16px;text-decoration:none; font-family:var(--display);font-size:clamp(2.4rem,13vw,4.4rem);line-height:1.06; transform:translateY(105%);transition:transform .68s var(--ease); } .is-open .menu__list a{transform:translateY(0)} .menu__list li:nth-child(1) a{transition-delay:.10s} .menu__list li:nth-child(2) a{transition-delay:.16s} .menu__list li:nth-child(3) a{transition-delay:.22s} .menu__list li:nth-child(4) a{transition-delay:.28s} .menu__list li:nth-child(5) a{transition-delay:.34s} .menu__foot{ position:relative;margin-top:clamp(38px,7vw,64px);padding-top:22px;border-top:1px solid var(--rule); display:flex;flex-wrap:wrap;gap:8px 28px;font-size:var(--fs-meta); opacity:0;transition:opacity .5s ease .42s; } .is-open .menu__foot{opacity:1} .menu__foot a{text-decoration:none;border-bottom:1px solid var(--rule-strong);padding-bottom:2px} /* Hier stand die Ladeanimation: ein Rahmen, der sich zeichnete, dazu ein Zähler von 000 auf 100 und die Zeile „Blatt wird aufgezogen“. Sie hat 1,5 Sekunden lang nichts geladen — die Seite ist statisch und war längst da — und sie hat jedem Besucher als erstes gesagt, er sei bei einem Planer gelandet. Beides Gründe, sie zu streichen. Das erste Bild ist jetzt der Raum. */ /* ─────────────────────────────── Zeichnungen */ .plan-svg{width:100%;height:auto;overflow:visible;--sheet:var(--paper)} .plan .plan-svg{--sheet:var(--surface)} .plan-svg .w{stroke:var(--ink);stroke-width:15;stroke-linecap:butt} .plan-svg .w.wi{stroke-width:7.5} .plan-svg .w.wl{stroke-width:5} .plan-svg .ln{stroke:var(--ink);stroke-width:1.3;fill:none;vector-effect:non-scaling-stroke} .plan-svg .thin{stroke-width:.85} .plan-svg .solid{fill:var(--paper)} .plan-svg .fill{fill:var(--surface)} .plan-svg .op{fill:var(--sheet);stroke:none} .plan-svg .gl{stroke:var(--graphite);stroke-width:.85;fill:none;vector-effect:non-scaling-stroke} .plan-svg .dash{stroke-dasharray:4 5} .plan-svg .door{stroke-width:.9} .plan-svg .dim{stroke:var(--graphite);stroke-width:.8;fill:none;vector-effect:non-scaling-stroke} /* Mono für alle Beschriftungen — so schreibt ein Plotter. Sie läuft breiter als die alte schmale Groteske, deshalb durchweg einen Tick kleiner gesetzt. */ .plan-svg text{font-family:var(--tech);font-variant-numeric:tabular-nums} .plan-svg .dtxt{fill:var(--graphite);font-size:9px;letter-spacing:0} .plan-svg .atxt{fill:var(--graphite);font-size:8px;letter-spacing:.01em} .plan-svg .ttxt{fill:var(--accent);font-size:7.5px;letter-spacing:.02em} .plan-svg .axtxt{fill:var(--graphite);font-weight:600;font-size:9px} .plan-svg .rtxt{fill:var(--ink);font-weight:600;font-size:9px;letter-spacing:.08em} .plan-svg .mark rect,.plan-svg .mark circle{fill:var(--accent);stroke:none} .plan-svg .mark text{fill:var(--paper);font-weight:600;font-size:11px} .plan-svg .mlead{stroke:var(--accent);stroke-width:1.2} .plan-svg .mdot{fill:var(--accent);stroke:none} /* Aufbau der Ebenen */ .s>*{opacity:0;transition:opacity .55s ease var(--d,0ms)} .s.is-on>*{opacity:1} .s .w{transition:stroke-dashoffset 1.05s var(--ease) var(--d,0ms),opacity .25s ease} .s.is-on .w{stroke-dashoffset:0} /* ─────────────────────────────── Hero Eine Raumaufnahme über die volle Fläche, randlos bis in alle vier Ecken. Darüber nur Schlagzeile, zwei Ziele und der Scroll-Hinweis, in Papierweiß. Blattangabe und Maßband sind raus; sie haben den Raum zugeschrieben. */ .hero{ position:relative;min-height:100svh;overflow:hidden; display:flex;flex-direction:column;justify-content:flex-end; padding-top:clamp(70px,9vh,132px);padding-bottom:clamp(14px,2.6vh,40px); color:var(--paper); /* Das helle Rot aus dem Kontaktblatt: Vollrot säuft auf dem Foto ab. */ --accent-ink:#EE8477; } .hero__stage{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} /* Der erste Blick fährt ins Bild: das steht anfangs leicht vergrößert und zieht sich beim Aufbau des Blatts auf 1 zurück. Der Zoom liegt auf dem Rahmen, nicht auf dem Bild — in das Bild schreibt main.js die Parallaxe, und zwei Hände am selben transform verlieren beide. */ .hero__stage picture{position:absolute;inset:0;display:block;transform:scale(1.07);transition:transform 2.8s var(--ease)} .hero.is-drawn .hero__stage picture{transform:scale(1)} @media (prefers-reduced-motion:reduce){ .hero__stage picture{transform:none;transition:none} } /* 112 % Höhe und −6 % Versatz geben der Parallaxe in main.js Luft: das Bild wandert beim Scrollen bis zu 6svh nach oben, ohne dass Papier aufblitzt. */ .hero__img{ position:absolute;left:0;top:-6%;width:100%;height:112%; object-fit:cover;object-position:center; } /* Auf dem Telefon steht ein 3:2-Querformat in einem hohen Hochformat. Weil die Höhe den Maßstab vorgibt, bleibt von 1200 Pixeln Breite ein Streifen von knapp 28 Prozent übrig — beschnitten wird waagerecht, nicht senkrecht. Mittig lag dieser Streifen auf Lamellendecke und Holzwand: das Eröffnungs- bild einer Einrichtungsfirma zeigte Ausbau statt Einrichtung. Tisch, Stühle, Pendelleuchten und Fenster stehen im linken Drittel, dorthin geht der Ausschnitt. */ @media (max-width:600px){ .hero__img{object-position:16% 50%} } /* Die Parallaxe rechnete bisher main.js bei jedem Bildaufbau: messen, rechnen, schreiben, und das auf demselben Faden, der auch das Scrollen verarbeitet. Kann der Browser Bewegung direkt an den Scrollstand koppeln, nimmt er sie hier ab; main.js prüft dieselbe Fähigkeit und hält sich dann heraus. Weg und Kurve bleiben gleich: 6 % Bildhöhe auf eine Fensterhöhe Scrollweg. */ @supports (animation-timeline:scroll()){ @media (prefers-reduced-motion:no-preference){ .hero__img{ animation:hero-zug linear both; animation-timeline:scroll(root block); animation-range:0px 100vh; } } } @keyframes hero-zug{ from{transform:translate3d(0,0,0)} to{transform:translate3d(0,-6svh,0)} } /* Der alte Schleier war zu schwach. Gemessen wurde im Browser, Pixel für Pixel: die Schlagzeile liegt zum Teil über dem hellen Fenster und kam dort auf 1,19:1, der Vorspann auf 2,28:1, die Fußzeile auf 3,99:1. Lesbar ist ab 4,5:1 — der Vorspann als Fließtext soll 7:1 erreichen. Drei Verläufe statt zwei, und einer davon läuft quer: · von unten — er trägt Vorspann, Knöpfe und Fußzeile · von links — er fängt die Schlagzeile ab, die weiter oben steht als der untere Verlauf reicht; rechts neben dem Textblock bleibt das Foto hell, der Schleier ist dort fast weg · von oben — ein schmaler Streifen für Logo und Navigation Die oberen 30 Prozent des Fotos bleiben offen: dort steht die Holzwand, die dem Bild seine Tiefe gibt. */ .hero__veil{ position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(to right, rgba(22,19,15,.43),rgba(22,19,15,.33) 32%,rgba(22,19,15,.09) 64%,rgba(22,19,15,0) 82%), linear-gradient(to top, rgba(22,19,15,.78),rgba(22,19,15,.68) 24%,rgba(22,19,15,.56) 46%,rgba(22,19,15,.26) 66%,rgba(22,19,15,0) 85%), linear-gradient(to bottom,rgba(22,19,15,.42),rgba(22,19,15,0) 22%); } /* Auf dem Telefon liegt derselbe Text über einem anderen Bildausschnitt: die Sitzbank am Fenster ist dort fast weiß. Der Querverlauf hilft hier nicht, weil der Text die ganze Breite nimmt — stattdessen steht der untere Verlauf höher und dichter an. Die oberen 30 Prozent bleiben frei. Nachgemessen bei 390 × 844: mit .80/.60/.26 kam die Schlagzeile auf 4,64:1, gerade über der Grenze. Die Oberkante der Schlagzeile liegt genau auf der 56-Prozent-Marke, deshalb wurde dort angesetzt. Jetzt: Schlagzeile 6,14:1, Vorspann 7,74:1, Fußzeile 15,4:1. */ @media (max-width:600px){ .hero__veil{ background: linear-gradient(to top, rgba(22,19,15,.92),rgba(22,19,15,.82) 34%,rgba(22,19,15,.68) 56%,rgba(22,19,15,.32) 74%,rgba(22,19,15,0) 92%), linear-gradient(to bottom,rgba(22,19,15,.46),rgba(22,19,15,0) 18%); } } /* container-type macht den Textblock zur Bezugsgröße für die Schlagzeile darin. Warum, steht bei .hero h1.display. */ .hero__body{position:relative;z-index:2;container-type:inline-size} .hero__foot{position:relative;z-index:2} @media (min-width:1000px){ .hero__body{max-width:min(64vw,1010px)} } /* Papierweiß auf Foto: dieselben Bauteile, nur die Farben gedreht. */ .hero .eyebrow{color:rgba(255,250,242,.82)} /* Der Vorspann steht sonst in 300 — bei 24 px auf Papier ist das richtig, große Schrift verträgt weniger Gewicht. Über einem Foto gilt das Gegenteil. Helle Haarstriche auf unruhigem Grund sind das, was zuerst wegbricht: der Schleier nimmt dem Foto zwar die Spitzen, aber eine 300er Schattierung hat bei 24 px kaum mehr Fläche als die Körnung darunter. Hier stand zuletzt die Beschwerde, die Schrift ganz oben sei schlecht zu lesen; dagegen half der dunklere Schleier nur zur Hälfte, die zweite Hälfte ist das Gewicht. Nebenbei stehen im Hero damit drei Schnitte statt vier. */ .hero .lead{color:rgba(255,250,242,.94);font-weight:400} /* Solange der Kopf über dem Foto liegt — nur auf der Startseite beginnt er ohne .is-solid —, stehen Logo, Navigation und Burger in Papierweiß. Offenes Menü ausgenommen: dort liegt Papier hinter dem Burger. */ html:not(.is-open) .head:not(.is-solid) .head__logo img{filter:brightness(0) invert(1)} html:not(.is-open) .head:not(.is-solid) .nav a:not(.btn){color:var(--paper)} html:not(.is-open) .head:not(.is-solid) .nav .btn{border-color:rgba(255,250,242,.72);color:var(--paper)} html:not(.is-open) .head:not(.is-solid) .burger span{background:var(--paper)} .hero h1{margin-block:clamp(14px,2.4vw,30px)} /* Die drei Zeilen laufen auf nowrap, damit die Maske sie sauber hochschiebt. Also darf die Schrift nie breiter werden als ihr Kasten — sonst schneidet das overflow:hidden der Maske das letzte Wort weg. Genau das passierte zwischen 1000 und 1300 px: dort ist der Textblock auf 64vw begrenzt, die Schrift wuchs aber weiter mit 8vw. cqw misst den Kasten selbst statt des Fensters und hält das Verhältnis über jede Breite. 11.3 statt der rechne- risch möglichen 11.9 lässt Luft für andere Schriftschnitte. */ .hero h1.display{font-size:clamp(2.15rem,11.3cqw,6.2rem)} .hero h1 .ln{display:block;white-space:nowrap;overflow:hidden;padding-block:.1em .18em;margin-block:-.1em -.18em} /* Auch hier das .js davor: die Zeilen starten 102 % tief, also hinter der Kante des überlaufverdeckten Rahmens. Holt main.js sie nicht herauf, wäre die Schlagzeile unsichtbar — dasselbe gilt für Beizeile und Fuß unten. */ .js .hero h1 .ln>span{display:block;transform:translateY(102%);transition:transform 1s var(--ease)} .hero h1 .ln>span{display:block} .hero.is-drawn h1 .ln>span{transform:translateY(0)} .hero h1 .ln:nth-child(2)>span{transition-delay:.08s} .hero h1 .ln:nth-child(3)>span{transition-delay:.16s} /* Die Verzögerungen waren auf die Ladeanimation gerechnet: der Hero fing erst an, wenn der Zähler bei 100 stand. Ohne sie beginnt alles 250 ms früher. */ .js .hero__meta{opacity:0;transform:translateY(14px);transition:opacity .8s ease .28s,transform .8s var(--ease) .28s} .hero.is-drawn .hero__meta{opacity:1;transform:none} .hero__intro{display:grid;gap:clamp(20px,2.6vw,34px)} .hero__intro .lead{max-width:46ch} .hero__cta{display:flex;flex-wrap:wrap;gap:12px} /* Im Fuß stand ein Maßband: 60 bis 100 Striche, die main.js nach Fensterbreite erzeugt hat, dazu die Blattnummer. Beides zusammen hat aus dem Foto wieder ein Blatt gemacht. Jetzt steht dort die Bildangabe und der Hinweis, dass es weitergeht — mehr hat dieser Fuß nie zu sagen gehabt. */ .hero__foot{ margin-top:clamp(18px,3.2vh,60px);padding-top:14px; border-top:1px solid rgba(255,250,242,.26);display:flex;justify-content:space-between;align-items:center;gap:20px; transition:opacity .8s ease .55s} .js .hero__foot{opacity:0} .hero.is-drawn .hero__foot{opacity:1} /* Auf dem Telefon ist im Fuß nur für eine Zeile Platz. Nebeneinander hat „Ballenstedt · Sachsen-Anhalt“ umgebrochen und sich unter das „Scrollen“ geschoben. Der Scroll-Hinweis fliegt dort raus: wer ein Telefon in der Hand hält, muss nicht aufgefordert werden zu wischen. */ @media (max-width:600px){ .hero__foot .scroll-hint{display:none} } .scroll-hint{display:flex;align-items:center;gap:11px;font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,250,242,.8);white-space:nowrap} .scroll-hint span{display:block;width:26px;height:1px;background:var(--accent-ink);animation:slide 2.4s var(--ease) infinite} @keyframes slide{0%{transform:scaleX(0);transform-origin:left}45%{transform:scaleX(1);transform-origin:left}55%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}} /* ─────────────────────────────── Manifest */ .claim{font-family:var(--display);font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.24;letter-spacing:-.01em;max-width:26ch} .manifest__head{ display:grid;gap:clamp(30px,4vw,56px);grid-template-columns:1fr; margin-bottom:clamp(44px,6vw,86px); } .manifest__text .claim{max-width:29ch} @media (min-width:900px){ /* Das Teamfoto steht breiter und rückt an den Text heran: aus 7/4 mit weiter Rinne wird 6/5 mit halber. Wer darauf abgebildet ist, soll erkennbar sein — bei einem Viertel Blattbreite war das eine Briefmarke. */ .manifest__head{ grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(22px,2.4vw,38px);align-items:start; } } .manifest__team{margin:0} /* Bildunterschrift wie jede andere auf der Seite: Satzschrift, Satzzeichen, gemischte Schreibung. Hier stand sie in gesperrten Großbuchstaben in der Technikschrift — eine Beschriftung aus einem Planrahmen, kein Satz über ein Foto. Der Rest der Seite setzt Bildunterschriften längst als .room__cap. */ .frame__cap{margin-top:13px; font-size:var(--fs-label);line-height:1.5;color:#4a4744;max-width:60ch} .manifest .cols{display:grid;gap:clamp(26px,4vw,60px);grid-template-columns:1fr;margin-top:clamp(40px,5vw,72px)} @media (min-width:760px){.manifest .cols{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1100px){.manifest .cols{grid-template-columns:repeat(3,minmax(0,1fr))}} /* Über jeder der drei Spalten lag eine Linie und darunter ein Wort in gesperrten Großbuchstaben. Drei gleich breite Spalten, drei Striche, drei Etiketten — das ist die Standardreihe, die auf jeder zweiten Firmenseite steht. Das Wort gehört in den Satz, nicht darüber. */ .manifest .cols p{font-size:var(--fs-meta);line-height:1.6;color:#4a4744} .manifest .cols b{font-weight:600;color:var(--ink)} /* ─────────────────────────────── Vorgehen · Fünf Schritte Früher eine scrollgebundene Grundriss-Sequenz, jetzt ein ruhiges Blatt: ein Foto, darunter die fünf Schritte als Felder in derselben Tabellen- Grammatik wie der Zeitnachweis weiter unten. */ .plan{background:var(--surface);border-top:1px solid var(--rule)} .steps-sect{padding-block:clamp(84px,11vw,180px) clamp(44px,5vw,80px)} .steps__photo{margin:0 0 clamp(34px,4.4vw,64px)} .steps{ display:grid;gap:1px;background:var(--rule); border-block:1px solid var(--rule-strong); } @media (min-width:700px){.steps{grid-template-columns:repeat(2,1fr)}} @media (min-width:1100px){.steps{grid-template-columns:repeat(5,1fr)}} .steps__i{ background:var(--surface); padding:clamp(24px,2.6vw,34px) clamp(20px,2.2vw,30px) clamp(28px,3vw,38px); display:flex;flex-direction:column;gap:12px; } /* Fünf Felder in zwei Spalten lassen eine Lücke — der letzte Schritt läuft dort über die volle Breite, wie die Summenzeile im Zeitnachweis. */ @media (min-width:700px) and (max-width:1099px){.steps__i:last-child{grid-column:1 / -1}} .steps__k{font-size:var(--fs-label);line-height:1.5;color:var(--graphite)} .steps__k b{font-family:var(--tech);font-weight:600;color:var(--accent-ink);margin-right:9px} .steps__t{ font-family:var(--display);font-weight:600;letter-spacing:-.02em; font-size:clamp(1.2rem,1.5vw,1.4rem);line-height:1.2; } .steps__d{font-size:var(--fs-meta);line-height:1.6;color:#4a4744;max-width:46ch} /* ── Entlastung ─────────────────────────────────────────────────────────── Die zweite Hälfte von Blatt 03. Oben ein Zeitnachweis, wie ihn ein Büro schreibt: Dauer über der Benennung, unten die Summe. Darunter das Abnahmeprotokoll — jede Zeile ein Punkt, der sonst offen bliebe, jede mit einem gesetzten Haken. Die Haken sind hier keine Dekoration: sie sind die Aussage des Abschnitts. */ .relief{padding-block:clamp(60px,7.5vw,116px);border-top:1px solid var(--rule-strong)} .effort{ margin-top:clamp(34px,4.4vw,64px); display:grid;gap:1px;background:var(--rule); border-block:1px solid var(--rule-strong); } @media (min-width:760px){.effort{grid-template-columns:repeat(3,1fr)}} .effort__i,.effort__sum{ background:var(--surface); padding:clamp(24px,2.6vw,34px) clamp(20px,2.2vw,30px); display:flex;flex-direction:column;gap:9px; } .effort__t{ font-family:var(--tech);font-size:clamp(1.5rem,2.4vw,2rem); line-height:1;letter-spacing:-.01em;color:var(--accent-ink); } .effort__k{font-size:var(--fs-label);line-height:1.5;color:var(--graphite)} .effort__d{font-size:var(--fs-body);line-height:1.55;color:#4a4744} /* Die Summenzeile läuft über die volle Breite und steht dadurch unter dem Strich — so, wie eine Summe auf einem Nachweis steht. */ .effort__sum{ flex-direction:row;align-items:baseline;justify-content:space-between;gap:18px; background:var(--paper); } @media (min-width:760px){.effort__sum{grid-column:1 / -1}} /* ── Was Sie davon haben ────────────────────────────────────────────────── Vier Aussagen, jede so breit wie der Zeitnachweis darüber. Die Nummer steht in einer eigenen schmalen Spalte, weil die Aussagen aufeinander aufbauen: erst die Entlastung, dann die Auswahl, dann der Raum, dann die Haltbarkeit. Keine Kästchen, keine Haken — hier wird nichts abgehakt, hier wird etwas behauptet und begründet. */ .worth{margin-top:clamp(48px,6vw,88px)} .worth__list{border-top:1px solid var(--rule-strong)} .worth__i{ position:relative; display:grid;gap:9px 0;align-items:start; grid-template-columns:3.5ch minmax(0,1fr); padding-block:clamp(22px,2.6vw,34px); } /* Der Trennstrich war eine Animation: eine Linie, die von links nach rechts wächst, „wie man mit dem Bleistift am Lineal entlangfährt“. Dazu kamen die vier Zeilen zeitversetzt von links herein, je 90 Millisekunden auseinander. Beides zusammen war eine Staffel-Einblendung auf einer Liste, und die Linie hat das Blattmotiv noch einmal in Bewegung wiederholt. Eine Liste braucht einen Strich, keinen Auftritt. */ .worth__i{border-bottom:1px solid var(--rule)} .worth__no{ grid-row:1 / span 2; font-family:var(--tech);font-size:var(--fs-label);font-weight:600; letter-spacing:.14em;color:var(--accent-ink);line-height:1.7; } .worth__q{ font-family:var(--display);font-size:clamp(1.15rem,1.7vw,1.45rem); line-height:1.26;letter-spacing:-.015em;font-weight:500; } .worth__a{font-size:var(--fs-body);line-height:1.62;color:#4a4744} @media (min-width:880px){ .worth__i{grid-template-columns:3.5ch minmax(0,5fr) minmax(0,7fr);column-gap:40px} .worth__no{grid-row:1} .worth__q,.worth__a{grid-row:1} } /* Das ehemalige Abnahmeprotokoll, auf einen Satz eingedampft. Steht bewusst kleiner als die vier Aussagen darüber. */ .worth__foot{ margin-top:clamp(20px,2.4vw,30px);max-width:64ch; font-size:var(--fs-meta);line-height:1.6;color:var(--graphite); } /* ─────────────────────────────── Einblick · Bildband Die dunkle Zäsur, die vorher der gezeichnete Schnitt war, übernimmt jetzt eine Aufnahme in voller Breite — ein Satz darauf, mehr nicht. */ .band{ position:relative;overflow:hidden; min-height:clamp(420px,72svh,760px); display:flex;align-items:flex-end; } .band__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .band__veil{ position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top,rgba(26,22,18,.78),rgba(26,22,18,.3) 46%,rgba(26,22,18,.06) 74%); } .band__body{ position:relative;z-index:1;width:100%; padding-block:clamp(40px,6vw,88px);color:var(--paper); display:flex;flex-direction:column;gap:16px; } .band__claim{ font-family:var(--display);font-weight:600;letter-spacing:-.02em; font-size:clamp(1.6rem,3.6vw,2.9rem);line-height:1.18;max-width:24ch; } .band__cap{ font-size:var(--fs-label);line-height:1.5;color:rgba(255,250,242,.72); } /* ─────────────────────────────── Musterplanung Ein Raum im Hochformat statt sieben in der Übersicht. Zeichnung links, Erklärung rechts — und weil beide Spalten gestreckt sind, endet das Bildfeld der Erklärung auf derselben Linie wie die Zeichnung. */ .room__grid{display:grid;gap:clamp(26px,3.4vw,54px);align-items:start} @media (min-width:1000px){ .room__grid{grid-template-columns:minmax(0,7fr) minmax(0,9fr);align-items:stretch} .room__panel{height:100%;min-height:0} .room__card:not([hidden]){height:100%} } .room__draw{background:var(--surface);padding:clamp(10px,1.6vw,26px); display:grid;align-content:center} /* Auf dem Telefon zählt jeder Millimeter Blattbreite — die Positionen sollen noch antippbar bleiben. */ @media (max-width:699px){.room__draw{margin-inline:calc(var(--gutter) * -1)}} /* Blatt 05 ist im Maßstab 1:75 gezeichnet, doppelt so groß wie der Übersichtsgrundriss. Wandstärke und Schriftgrad folgen dem Maßstab — sonst wäre die Wand ein Faden und die Beschriftung nicht zu lesen. */ .plan-svg--suite{--sheet:var(--surface)} .plan-svg--suite .w{stroke-width:20} .plan-svg--suite .w.wl{stroke-width:6} .plan-svg--suite .scr{stroke:var(--ink);stroke-width:3;fill:none;vector-effect:non-scaling-stroke} .plan-svg--suite .dtxt{font-size:15px} .plan-svg--suite .atxt{font-size:13px} .plan-svg--suite .ttxt{font-size:13px} .plan-svg--suite .rtxt{font-size:17px} /* Die Sichtachse ist eine Begründung, keine Bauteilkante — deshalb rot und gestrichelt, damit sie sich von den Baffeln darüber unterscheidet. */ .plan-svg--suite .sight{fill:none;stroke:var(--accent);stroke-width:1.1; stroke-dasharray:6 4;opacity:.85;vector-effect:non-scaling-stroke} .hot__item{cursor:pointer} /* Fängt den Zeiger, färbt sich aber nie ein. Nur dort im Einsatz, wo das gezeichnete Möbel zu flach für eine Trefffläche von 44 px ist. */ .hot__hit{fill:var(--accent);fill-opacity:0;pointer-events:all} .hot__fill{fill:var(--accent);fill-opacity:0;pointer-events:all;transition:fill-opacity .4s var(--ease)} .hot__edge{fill:none;stroke:var(--accent);stroke-width:2;stroke-opacity:0; pointer-events:none;transition:stroke-opacity .4s var(--ease)} .hot__item:hover .hot__fill,.hot__item:focus-visible .hot__fill{fill-opacity:.07} .hot__item:hover .hot__edge,.hot__item:focus-visible .hot__edge{stroke-opacity:.55} .hot__item.is-on .hot__fill{fill-opacity:.11} .hot__item.is-on .hot__edge{stroke-opacity:1} .hot__item:focus{outline:none} .hot__item:focus-visible .hot__edge{stroke-opacity:1;stroke-dasharray:8 5} /* Die Positionsnummer ist die Schaltfläche: ein Kreis mit Fahne auf sein Möbel, so wie in jedem Möblierungsplan. */ .hot__mark{pointer-events:none} .hot__pin{pointer-events:all;transition:transform .45s var(--ease)} .hot__pin circle{fill:var(--paper);stroke:var(--accent);stroke-width:1.5; vector-effect:non-scaling-stroke;transition:fill .35s ease} .hot__pin text{fill:var(--accent);font-family:var(--tech);font-weight:600; font-size:19px;letter-spacing:.02em;transition:fill .35s ease} /* Die Nummer wuchs beim Überfahren auf 116 Prozent. Dass sie anklickbar ist, sagen schon die Bezugslinie, die auf volle Deckkraft geht, und die Kante des Möbels, die sich hervorhebt. Ein drittes Signal, das auch noch die Größe verändert, ist der Hover-Zoom, den jede zweite Seite auf alles Klickbare legt. */ .hot__item:hover .hot__pin circle, .hot__item:focus-visible .hot__pin circle{fill:var(--surface)} .hot__item.is-on .hot__pin circle{fill:var(--accent)} .hot__item.is-on .hot__pin text{fill:var(--paper)} .hot__lead{fill:none;stroke:var(--accent);stroke-width:1.1;stroke-dasharray:5 4; opacity:.5;pointer-events:none;vector-effect:non-scaling-stroke; transition:opacity .4s ease} .hot__item:hover .hot__lead,.hot__item.is-on .hot__lead{opacity:1} /* Hier lag ein Ring auf jeder Position, der zweimal von innen nach außen aufging und dabei ausblendete, die sechs um je 1,33 s versetzt. Er sollte sagen: hier ist etwas anzutippen. Das Muster ist nur leider das bekannteste Fertigteil, das es gibt — eine Hilfsklasse, die in jedem Framework unter diesem Namen steht und auf Zehntausenden Seiten identisch aussieht. Wer sie einmal gesehen hat, sieht sie überall wieder, und sie verrät die Herkunft einer Seite schneller als jedes andere Element. Auf einem Möblierungsplan hat sie ohnehin nichts verloren: so zeichnet niemand. Nötig war sie auch nicht. Dass die Nummern Schaltflächen sind, sagen hier vier Dinge: die Positionsnummern sind die einzigen roten Kreise auf einem Blatt in Grau, jede hängt an einer Bezugslinie, beim Überfahren wechselt die Füllung und die Möbelkante tritt hervor, und auf dem Blatt steht „Positionen 01–06 anklickbar“. Dazu der Zeiger darunter. Der Ring war das fünfte Signal und das einzige, das von außen kam. */ /* Ein Mauszeiger, der eine Positionsnummer antippt. Er behauptet nicht, „hier passiert etwas“, er zeigt die Geste selbst — stellvertretend für alle sechs. Nach der ersten Berührung ist er überflüssig und geht. Er steht im Blatt bei 310/466 und damit an Position 02, den sechs Arbeitsplätzen (Marke bei 300/450); an dieser Stelle stand zweimal „Position 01“ geschrieben, was schlicht nicht stimmte. 02 liegt in der Mitte der linken Blatthälfte und ist von allen sechs Marken die, die am wenigsten am Rand klebt — als Beispiel also die richtige. */ .room__hand{pointer-events:none;transition:opacity .5s ease} /* Endlich statt endlos: neun Tipper, rund 23 Sekunden, danach steht der Zeiger still und zeigt weiter auf die Nummer. Ein Hinweis, der sich wiederholt, bis jemand reagiert, ist keine Hilfe mehr, sondern Druck. */ .room__hand-i{animation:handtap 2.6s var(--ease) 9} .room__hand-p{fill:var(--paper);stroke:var(--ink);stroke-width:1.4; stroke-linejoin:round;vector-effect:non-scaling-stroke} @keyframes handtap{ 0%,62%,100%{transform:translate(0,0)} 72%,84%{transform:translate(-1.6px,-2.4px)} } /* Außer Sicht blendet der Zeiger nicht nur aus, er hört auch auf zu tippen. Beim Ring stand das so im Stylesheet, beim Zeiger fehlte es — er lief weiter, unsichtbar, und kostete Rechenzeit für nichts. */ .room__draw.is-touched .room__hand{opacity:0} .room__draw.is-touched .room__hand-i{animation:none} /* Der Zeiger ist Hinweis, keine Information. Wer Bewegung abbestellt hat, bekommt ihn nicht ersatzweise als Dauerblinken: er steht still und zeigt weiter auf die Nummer. Das ist der ganze Inhalt, den er hatte. */ @media (prefers-reduced-motion:reduce){ .room__hand-i{animation:none} } .room__panel{position:relative;border-top:2px solid var(--accent); padding-top:clamp(22px,2.6vw,32px)} .room__card[hidden]{display:none} .room__card{animation:cardin .5s var(--ease) both;display:flex;flex-direction:column} @keyframes cardin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .room__card .eyebrow{justify-content:flex-start} .room__card .eyebrow .tnum{margin-left:auto;color:var(--accent-ink)} .room__card h3{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:14px 0 0} .room__card > p{margin-top:16px;color:#4a4744;max-width:52ch} .room__card dl{margin:clamp(20px,2.4vw,28px) 0 0;display:grid;gap:0} .room__card dl > div{display:grid;gap:4px;padding-block:14px;border-top:1px solid var(--rule)} @media (min-width:520px){.room__card dl > div{grid-template-columns:8.5rem 1fr;gap:4px 20px}} .room__card dt{font-size:var(--fs-label);color:var(--accent-ink)} .room__card dd{margin:0;font-size:var(--fs-body);line-height:1.55;color:#4a4744;max-width:58ch} @media (prefers-reduced-motion:reduce){.room__card{animation:none}} /* Das Bildfeld nimmt, was die Erklärung übrig lässt. Deshalb endet es exakt auf der Unterkante der Zeichnung, gleich wie lang der Text ausfällt. */ .room__shot{margin:clamp(22px,2.6vw,32px) 0 0;display:flex;flex-direction:column; flex:1 1 auto;min-height:0} /* Einspaltig hat das Bildfeld ein festes Seitenverhältnis und sonst nichts: eine Mindesthöhe würde zusammen mit aspect-ratio eine Mindestbreite erzeugen (210 px × 16/10 = 336 px) und die ganze Seite auf dem Telefon nach rechts schieben. Erst zweispaltig darf es sich strecken. */ .room__shot .frame{flex:none;aspect-ratio:16 / 10} @media (min-width:1000px){ .room__shot .frame{flex:1 1 auto;aspect-ratio:auto;min-height:210px} } /* Hier hing an jeder der sieben Bildunterschriften ein eingerahmter Stempel „SYMBOLBILD“ in Technikschrift. Dass die Musterplanung kein ausgeführtes Objekt ist, steht im Einleitungssatz des Abschnitts — siebenmal derselbe Kasten dahinter war Misstrauen gegen den eigenen Text. */ .room__cap{margin-top:13px; font-size:var(--fs-label);line-height:1.5;color:#4a4744;max-width:60ch} /* ─────────────────────────────── Bereiche Vorher: vier gleich breite Spalten nebeneinander, jede mit einem Bild von 280 px Breite. Vier Räume auf der Fläche einer Postkarte — in einem Beruf, der vom Raum lebt, ist das die falsche Größe. Jetzt vier Bahnen untereinander, wechselseitig. Das Bild nimmt die halbe Seite und läuft nach außen über den Satzspiegel hinaus bis an die Fensterkante; der Text steht in der Spalte daneben und hält die Satzkante. Büro bricht links aus, Pflege rechts, Bildung links, Wohnen rechts. Ein Raum hat keinen Rahmen, deshalb bekommt er hier auch keinen: keine Karte, keine Linie, kein Schatten. ── Die Naht ─────────────────────────────────────────────────────────── Der zweite Durchgang hat drei Dinge geändert, und alle drei haben dieselbe Ursache: die vier Bahnen waren nicht bündig. 1. Die Spalten standen auf 10fr zu 9fr. Weil das Bild in den ungeraden Bahnen links und in den geraden rechts sitzt, bekam es einmal die 10er- und einmal die 9er-Spalte: gemessen 975 px gegen 877 px. Vier Bilder, zwei Breiten. Jetzt 1fr zu 1fr — die Kante liegt in jeder Bahn auf derselben Senkrechten. 2. Die Bahnhöhe kam aus zwei Clamps im Wechsel (615 px gegen 559 px), ausdrücklich „damit die vier Bahnen nicht im Gleichtakt laufen“. Der Gleichtakt war aber genau das, was gefehlt hat. Eine Höhe für alle. 3. Zwischen Bild und Text lag eine Fuge von bis zu 68 px, zwischen den Bahnen eine von 92 px. Beide sind weg. Foto und Papier stoßen jetzt direkt aneinander, und weil die Kante in allen vier Bahnen auf derselben Senkrechten liegt, läuft eine einzige Naht durch den ganzen Abschnitt und wechselt viermal die Seite. Den Abstand, den die Fuge vorher gemacht hat, macht jetzt der Innenrand des Textes — dort gehört er hin, denn er ist ein Satzrand und kein Bauteil. Dass die Bilder nebenbei wirklich gleich groß sind, hängt an der festen Bahnhöhe: ohne sie bestimmt der längste Text die Höhe seiner Bahn, und vier verschieden lange Texte geben wieder vier verschiedene Bilder. */ /* Der Abschnitt liegt einen Ton tiefer als das übrige Papier. Das genügt, um ihn als eigenen Teil zu lesen; eine Farbfläche wäre hier zu laut. */ #bereiche{background:var(--surface)} .fields{display:grid;gap:clamp(48px,5.6vw,92px)} .field{display:grid;gap:clamp(18px,2.4vw,30px);position:relative} .field__body{ padding-inline:var(--gutter); display:flex;flex-direction:column;gap:clamp(10px,1.2vw,16px); max-width:56ch; } /* Einspaltig läuft das Bild über die volle Breite — der Seitenrand gilt für Schrift, nicht für Räume. */ .field__fig{position:relative;margin:0;overflow:hidden} .field__img{ display:block;width:100%;height:auto; aspect-ratio:3 / 2;object-fit:cover;background:var(--rule); } @media (min-width:900px){ /* grid-auto-rows:1fr ist hier der eigentliche Hebel, und es tut etwas anderes, als es aussieht. Der Container hat keine feste Höhe; in einem solchen Raster bedeutet 1fr nicht „ein Anteil von irgendetwas“, sondern „alle Zeilen so hoch wie die höchste“. Die vier Bahnen messen sich damit selbst aneinander aus — ohne dass irgendwo eine Zahl steht, die bei längerem Text wieder falsch wäre. Gemessen bei 1920 px: vorher 615 / 559 / 615 / 559, jetzt viermal 716. --bahn ist nur noch die Untergrenze für den Fall, dass alle vier Texte kurz sind. 56vh, damit auf einem flachen Schirm noch etwas vom nächsten Abschnitt zu sehen ist und die Reihe nicht wie eine Diaschau wirkt, bei der jedes Bild einmal das Fenster füllt. */ .fields{--bahn:clamp(470px,56vh,640px);gap:0;grid-auto-rows:1fr} /* align-items stand auf center. Gemessen war der Textblock 289 px hoch und das Bild daneben 551 — über und unter der Schrift schwammen je 130 px leeres Papier, und die erste Zeile begann irgendwo in der Bildmitte. stretch zieht beide Spalten auf dieselbe Höhe: die Schrift fängt oben an, wo auch das Bild anfängt, und die Oberkante ist eine Linie. */ .field{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0;align-items:stretch;min-height:var(--bahn); } /* Ungerade Bahn: Bild links an der Kante, Text rechts. Gerade Bahn: umgekehrt. Die Spaltenzuweisung macht den Wechsel, nicht die Reihenfolge im Dokument — vorgelesen bleibt es Bild, dann Text. */ .field:nth-child(odd) .field__fig{grid-column:1;grid-row:1} .field:nth-child(even) .field__fig{grid-column:2;grid-row:1} .field:nth-child(odd) .field__body{grid-column:2;grid-row:1} .field:nth-child(even) .field__body{grid-column:1;grid-row:1} /* Der Text hängt zwischen zwei ungleichen Rändern: außen der Seitenrand der ganzen Seite, innen der Abstand zur Naht. Innen darf er kleiner sein — zur Fensterkante hin braucht Schrift mehr Luft als zu einer Bildkante, an der ohnehin ein Motiv steht. Oben und unten derselbe Betrag wie innen, damit der Textblock in einem gleichmäßigen Rahmen sitzt und nicht an der Oberkante klebt. */ .field__body{ --innen:clamp(34px,3.6vw,64px); padding-block:var(--innen); } .field:nth-child(odd) .field__body{padding-left:var(--innen);padding-right:var(--gutter)} .field:nth-child(even) .field__body{padding-right:var(--innen);padding-left:var(--gutter)} /* Das Bild liegt absolut im Rahmen. Mit height:100% im normalen Fluss hätte es zwar ausgesehen wie gewollt, aber bei der Frage „wie hoch wird die Zeile?“ zählt eine Prozenthöhe nicht — der Browser rechnet dann mit der natürlichen Höhe des Fotos. Beim Hochformat im vierten Feld waren das 698 px, und unter dem Text standen 139 px leer. Absolut gesetzt hat das Bild auf diese Frage keine Antwort mehr: die Höhe gibt die Bahn vor, das Bild füllt sie. */ .field__fig{min-height:var(--bahn)} .field__img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto} } /* Über dem Wort steht, für wen der Bereich ist. Vorher war das eine Kopfzeile in Technikschrift, in Großbuchstaben gesperrt, mit Haarlinie darunter und der Positionsnummer „Pos. 01“ rechts daneben. Von den drei Bauteilen hat keines etwas erklärt. Jetzt eine Zeile in der Lesefarbe, so groß wie der Text drunter — sie ordnet ein, sie betitelt nicht. */ .field__sector{font-size:var(--fs-meta);line-height:1.5;color:var(--graphite)} /* Herkunft des Fotos, eine Zeile, an der Unterkante der Bahn. margin-top:auto schiebt sie dorthin und nimmt dabei den ganzen Rest an freier Höhe auf — der Textblock sitzt damit oben bündig mit der Bildoberkante, die Herkunftszeile unten bündig mit der Bildunterkante. Beide Kanten der Bahn sind gehalten, und zwar in allen vier Bahnen auf denselben Linien. Nebeneffekt, der mehr wert ist als der Anlass: ein aufgeklapptes Feld schiebt jetzt nichts mehr; vorher stand der Block mittig und rutschte beim Öffnen nach oben weg. Einspaltig gibt es keine freie Höhe, dort wirkt nur der Abstand. */ .field__cred{ margin-top:auto;padding-top:clamp(16px,1.8vw,26px); font-size:var(--fs-meta);line-height:1.5;color:var(--graphite); } /* Das Wort darf jetzt groß werden: die Spalte ist nicht mehr ein Viertel Seite, sondern die halbe. */ .field__key{ font-family:var(--display); font-size:clamp(1.9rem,3.4vw,3.1rem);line-height:1.04;letter-spacing:-.03em; } /* Hier standen einmal erfundene Produktnamen („Bauer Office“, „Bauer Care“). Jetzt steht die Nutzung selbst da — Büro, Pflege, Bildung, Wohnen —, also genau die vier Wörter der Sektionsüberschrift. Ein Wort je Feld, in einer Zeile, ohne zweite Farbe. */ .field__desc{font-size:var(--fs-body);line-height:1.55;color:#4a4744} /* Drei Stichworte, mehr nicht. Sie stehen in einer Zeile mit senkrechten Strichen dazwischen — wie die Kurzangaben unter einer Positionsnummer, nicht wie Filter-Pillen. */ .field__tags{ display:flex;flex-wrap:wrap;gap:6px 0;margin:2px 0 0;padding:0;list-style:none; font-size:var(--fs-label);color:var(--graphite); } .field__tags li{padding-inline:0 10px;margin-right:10px;border-right:1px solid var(--rule-strong)} .field__tags li:last-child{margin-right:0;padding-right:0;border-right:0} /* Aufklappen. Das Zeichen daneben ist ein Plus, das beim Öffnen zum Minus wird: der senkrechte Strich dreht sich weg. Das margin-top:auto von früher ist raus — es hat die vier Knöpfe in vier gleich hohen Spalten auf eine Linie gezogen. Die Spalten gibt es nicht mehr. */ .field__more{ margin-top:8px;padding:14px 0 0;border:0;border-top:1px solid var(--rule); background:none;color:var(--ink);cursor:pointer;text-align:left; display:flex;align-items:center;justify-content:space-between;gap:14px; min-height:44px; font-size:var(--fs-meta);font-weight:500; } .field__more:hover,.field__more:focus-visible{color:var(--accent-ink)} .field__more:focus-visible{outline:2px solid var(--accent);outline-offset:4px} .field__sign{position:relative;flex:none;width:13px;height:13px} .field__sign::before,.field__sign::after{ content:"";position:absolute;left:0;top:6px;width:13px;height:1px; background:currentColor; } .field__sign::after{transform:rotate(90deg);transition:transform .22s var(--ease)} .field__more[aria-expanded="true"] .field__sign::after{transform:rotate(0deg)} /* 0fr auf 1fr ist die einzige Art, eine unbekannte Höhe zu animieren, ohne sie vorher in JavaScript auszumessen. visibility nimmt den eingeklappten Inhalt zugleich aus der Tabulator-Reihenfolge. */ .field__panel{ display:grid;grid-template-rows:0fr;visibility:hidden; transition:grid-template-rows .22s var(--ease),visibility 0s linear .22s; } .field__panel-in{overflow:hidden;min-height:0} .field__more[aria-expanded="true"] + .field__panel{ grid-template-rows:1fr;visibility:visible; transition:grid-template-rows .22s var(--ease),visibility 0s; } @media (prefers-reduced-motion:reduce){ .field__panel,.field__more[aria-expanded="true"] + .field__panel, .field__sign::after{transition:none} } /* Ab 1200 px ist die Textspalte kürzer als das Bild daneben — unten blieb Papier übrig, und hinter dem Aufklapper lag genau der Inhalt, der die Lücke füllt. Auf dem großen Schirm steht die Positionsliste deshalb offen da und der Knopf fällt weg; es gibt dort nichts mehr aufzuklappen. Schmaler bleibt er, dort zählt jede Bildschirmhöhe. Die Regel steht hinter den Grundregeln von .field__more und .field__panel, nicht bei den anderen Bereiche-Breakpoints: eine Medienabfrage erhöht die Spezifität nicht, bei Gleichstand gewinnt das, was später steht. */ @media (min-width:1200px){ .field__more{display:none} .field__panel{grid-template-rows:1fr;visibility:visible;transition:none} .field__panel-in{ margin-top:clamp(15px,1.7vw,24px);padding-top:3px; border-top:1px solid var(--rule); } .field__list{margin-top:10px} } /* Positionsliste: Nummer und Benennung in zwei Spalten, jede Zeile auf einer Linie — so steht es auch auf dem Papier. */ .field__list{margin-top:14px;display:grid} .field__list li{ display:grid;grid-template-columns:3rem 1fr;gap:10px;align-items:baseline; padding-block:9px;border-top:1px solid var(--rule); font-size:var(--fs-body);line-height:1.4; } .field__nr{ font-family:var(--tech);font-size:var(--fs-label);letter-spacing:.04em; color:var(--accent-ink); } /* Spannweite: die kleinste und die größte je ausgeführte Position, als ein Satz. Sie steht hier, weil die häufigste Sorge „das ist sicher zu groß für uns“ heißt. */ .field__range{ margin-top:18px;padding-top:18px;border-top:1px solid var(--rule); font-size:var(--fs-meta);line-height:1.55;color:#4a4744; } .field__range span{ display:block;margin-bottom:7px; font-size:var(--fs-label);line-height:1.5;color:var(--graphite); } .field__range b{font-weight:500;color:var(--ink)} /* Das Zahlenband unter den Referenzen ist entfallen. Zwei seiner drei Zahlen waren nicht belegt, und eine Zahlenreihe zwischen Referenzliste und Kontakt ist ohnehin die Stelle, an der Seiten anfangen, sich selbst zu loben. Die Regeln dazu stehen nicht mehr hier, damit niemand sie versehentlich wieder anschaltet. */ /* ─────────────────────────────── Kontakt */ /* Der Kontaktabschluss dreht nur Grund und Schrift um, nicht den ganzen Markensatz — die rote Schaltfläche soll hier dieselbe bleiben wie oben auf dem Blatt. Umgedreht wird deshalb allein das Rot der Schrift: Blattzähler, Pflichtstern und Ortsangabe standen sonst im dunklen Rot auf dunklem Grund und kamen auf 2,4 bis 2,6 zu 1. */ .contact{background:var(--ink);color:var(--paper);border-top:0;--accent-ink:#EE8477} .contact .eyebrow,.contact .muted{color:rgba(255,250,242,.56)} .contact a{text-decoration:none} /* align-items:start — sonst zieht das Raster das Schriftfeld auf die Höhe der Nebenspalte und unter der Schaltfläche steht ein leeres Stück Kasten. */ .contact__grid{display:grid;gap:clamp(34px,5vw,72px);grid-template-columns:1fr; align-items:start;margin-top:clamp(36px,5vw,64px)} @media (min-width:860px){.contact__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}} .contact dl{display:grid;gap:22px} /* „TELEFON“ und „E-MAIL“ standen in Großbuchstaben mit 0,2 em Sperrung über den Angaben. Zwei Wörter, die ohnehin über einer Rufnummer und einer Adresse stehen — sie müssen nicht als Etikett auftreten. */ .contact dt{font-size:var(--fs-label);color:rgba(255,250,242,.62);margin-bottom:5px} .contact dd{margin:0;font-size:clamp(1.05rem,1.6vw,1.3rem)} .contact dd a{border-bottom:1px solid rgba(255,250,242,.3);padding-bottom:2px;transition:border-color .3s ease} .contact dd a:hover{border-bottom-color:var(--accent)} .contact .btn{--fill:var(--paper);border-color:rgba(255,250,242,.42);color:var(--paper)} .contact .btn:hover,.contact .btn:focus-visible{color:var(--ink);border-color:var(--paper)} .contact .btn--accent{--fill:var(--paper);background:var(--accent);border-color:var(--accent)} /* Die Ortsliste ist der vierte Eintrag derselben Beschreibungsliste wie Telefon, E-Mail und Anschrift. Den Abstand nach oben gibt deshalb das dt vor (5 px), nicht die Liste selbst. */ .regions{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:3px} /* Eckig, nicht als Pille. Auf der ganzen Seite gibt es sonst keinen Radius über 2 px; zwei runde Ausreißer lesen sich wie aus einem anderen Baukasten. */ .regions li{font-size:var(--fs-meta);border:1px solid rgba(255,250,242,.24);padding:5px 13px} /* ── Anfrage als Schriftfeld ─────────────────────────────────────── Das Schriftfeld sitzt auf jeder Werkzeichnung unten rechts und nimmt auf, wer baut, was gebaut wird und in welchem Maßstab. Das Formular übernimmt diesen Aufbau eins zu eins: Kopfleiste mit Blattzähler, darunter Zeilen aus Hairlines, Beschriftung links in der Mono, Eintrag rechts. Es ist damit das einzige Feld der Seite, das der Besucher selbst ausfüllt. */ .contact__side{display:grid;gap:clamp(24px,2.8vw,34px);align-content:start} /* Telefonnummer und Adresse sind auf dem Telefon die meistgetippten Stellen der Seite. Sie stehen allein in ihrer Zeile, also gilt für sie die volle Mindestgröße — das Polster geht nach unten, damit der Zeilenabstand zur nächsten Angabe erhalten bleibt. */ .contact__side dd a{display:inline-flex;align-items:center;min-height:44px;padding-block:7px} .contact__main{display:grid;gap:clamp(20px,2.4vw,30px);align-content:start} /* Der Anruf steht gleichberechtigt neben dem Formular, nicht als Fußnote. */ .req__alt{font-size:var(--fs-body);line-height:1.55;max-width:74ch; color:rgba(255,250,242,.62);padding-left:clamp(0px,1vw,14px)} .req__alt a{color:var(--paper);border-bottom:1px solid var(--accent); padding-bottom:2px;white-space:nowrap;transition:color .3s ease} .req__alt a:hover{color:var(--accent-ink)} .req{ color-scheme:dark;position:relative; border:1px solid rgba(255,250,242,.26); background:rgba(255,250,242,.028); } .req__hd{ display:flex;justify-content:space-between;gap:16px;align-items:baseline; padding:13px clamp(16px,2vw,24px); border-bottom:1px solid rgba(255,250,242,.26); font-weight:600;font-size:var(--fs-meta);color:rgba(255,250,242,.72); } /* Vier Eintragungen, also darf jede Zeile atmen. Vorher standen hier acht Felder auf engem Raum — das Schriftfeld sah aus wie ein Antragsformular. */ .req__row{ display:grid;gap:5px; padding:clamp(15px,1.8vw,20px) clamp(16px,2vw,26px); border-bottom:1px solid rgba(255,250,242,.16); transition:background .3s ease; } @media (min-width:560px){ .req__row{grid-template-columns:7.5rem minmax(0,1fr);gap:4px 22px;align-items:baseline} } .req label,.req .req__lab{ font-weight:500;font-size:var(--fs-meta);color:rgba(255,250,242,.66); } .req label b{color:var(--accent-ink);font-weight:500} .req input,.req textarea{ width:100%;font:inherit;line-height:1.5; font-size:clamp(1.0625rem,1rem + .35vw,1.25rem); color:var(--paper);background:transparent; border:0;border-bottom:1px solid transparent; min-height:46px; /* 1 px Polster ergab 33 px hohe Felder — zu eng zum Tippen und unter der geforderten Mindestgröße. Mit 9 px oben und 8 px unten steht die Schrift auf derselben Grundlinie. Die Mindesthöhe steht daneben, weil das Polster allein von der Schriftgröße abhängt und auf schmalen Geräten sonst knapp unter das geforderte Maß rutscht. Das Kästchen ist ausgenommen, es bringt seine Trefffläche selbst mit. */ padding:9px 0 8px; transition:border-color .3s ease; } /* Das Kästchen ist ein Sonderfall: 44 px sichtbare Kantenlänge wären neben einer Textzeile ein Klotz. Es bekommt deshalb eine 44-px-Trefffläche, die per negativem Rand nur 24 px Platz beansprucht — sichtbar bleibt die Marke in ihrer alten Größe. Die Regel steht hier und nicht bei .req__consent, weil der Attributselektor sonst gewinnt. Mit appearance:none entfällt accent-color, die Marke wird selbst gezeichnet. */ .req input[type=checkbox]{ appearance:none;-webkit-appearance:none; width:44px;height:44px;min-height:44px;margin:-10px;padding:0; display:grid;place-content:center;cursor:pointer;background:transparent;border:0; } .req input[type=checkbox]::before, .req input[type=checkbox]::after{content:"";grid-area:1 / 1} .req input[type=checkbox]::before{ width:24px;height:24px;box-sizing:border-box; border:1px solid rgba(255,250,242,.42); transition:background-color .25s ease,border-color .25s ease; } .req input[type=checkbox]:checked::before{background:var(--accent);border-color:var(--accent)} .req input[type=checkbox]::after{ width:6px;height:11px;place-self:center; border:solid var(--paper);border-width:0 2px 2px 0; transform:translateY(-1px) rotate(42deg) scale(0); transition:transform .2s var(--ease); } .req input[type=checkbox]:checked::after{transform:translateY(-1px) rotate(42deg) scale(1)} .req input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:-9px} .req textarea{resize:vertical;min-height:5.5em} .req ::placeholder{color:rgba(255,250,242,.28);font-size:var(--fs-body)} .req input:focus,.req textarea:focus{border-bottom-color:var(--accent)} /* Nach der Media Query, damit die Textzeile über die volle Breite läuft. */ .req__row--full{grid-template-columns:minmax(0,1fr);gap:9px} /* Die Bereichswahl ist eine Zeile des Schriftfelds wie jede andere — die Marken sitzen in derselben Spalte wie die Eingaben darüber. */ .req__row--chips{align-items:center} .req__chips{display:flex;flex-wrap:wrap;gap:9px} .req__chips > span{position:relative;display:inline-block} .req__chips input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer} .req__chips label{ display:inline-block;cursor:pointer; border:1px solid rgba(255,250,242,.24);padding:5px 14px; font-size:var(--fs-meta);color:rgba(255,250,242,.78); transition:background .3s ease,border-color .3s ease,color .3s ease; } .req__chips input:hover + label{border-color:rgba(255,250,242,.5)} .req__chips input:checked + label{background:var(--accent);border-color:var(--accent);color:var(--paper)} .req__chips input:focus-visible + label{outline:2px solid var(--accent);outline-offset:3px} .req__consent{ display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;align-items:start; padding:16px clamp(16px,2vw,24px);border-bottom:1px solid rgba(255,250,242,.16); } .req__consent label{ font-family:var(--sans);font-size:var(--fs-meta);letter-spacing:0;text-transform:none; line-height:1.5;color:rgba(255,250,242,.7); } .req__consent a{border-bottom:1px solid rgba(255,250,242,.38);padding-bottom:1px} .req__consent a:hover{border-bottom-color:var(--accent)} /* Honigtopf: für Menschen unsichtbar, für einfache Bots das erste Feld. */ .req__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .req__foot{display:flex;flex-wrap:wrap;gap:15px 24px;align-items:center; padding:clamp(17px,2.2vw,23px) clamp(16px,2vw,24px)} .req__hint{font-size:var(--fs-label); line-height:1.5;color:rgba(255,250,242,.66);max-width:46ch} .req__hint b{color:var(--accent-ink);font-weight:500} .req__note{margin:0 clamp(16px,2vw,24px) clamp(18px,2.2vw,24px);padding:13px 16px; border-left:2px solid var(--accent);background:rgba(207,45,26,.12); font-size:var(--fs-meta);line-height:1.5;color:var(--paper)} .req__note--ok{border-left-color:#7FB77E;background:rgba(127,183,126,.13)} /* Fehlerhafte Zeile wird als Position markiert, nicht mit einem Ausrufezeichen. */ /* Der Wert ist das Rot aus --accent, hier ausgeschrieben, weil eine Marke sich nicht als Anteil in rgba() einsetzen lässt. Er muss mitgezogen werden, wenn --accent sich ändert. Das alte, hellere Rot hob den Grund der Zeile so weit an, dass die rote Beschriftung darauf unter 4,5 zu 1 fiel — die Fehlermeldung war ausgerechnet dort am schlechtesten zu lesen, wo sie gebraucht wird. */ .req__row.is-bad,.req__consent.is-bad{background:rgba(207,45,26,.1)} .req__row.is-bad > label,.req__consent.is-bad > label{color:var(--accent-ink)} .req__row.is-bad input,.req__row.is-bad textarea{border-bottom-color:var(--accent)} /* Das Foto liegt im selben Rahmen wie die Videofelder der Objektmappe, nur auf dunklem Grund — die Rahmenfarben kommen aus eigenen Token. */ .frame--169{--ar:16 / 9} .frame--43 {--ar:4 / 3} .frame--32 {--ar:3 / 2} .frame--11 {--ar:1 / 1} .frame--23 {--ar:2 / 3} /* Hochformat kippt auf schmalen Schirmen ins Querformat, sonst füllt ein einzelnes Feld den ganzen Bildschirm. */ @media (max-width:819px){.frame--23{--ar:3 / 2}} .contact .frame{--rule:rgba(255,250,242,.16);--rule-strong:rgba(255,250,242,.26); --surface:rgba(255,250,242,.04)} .contact .frame__tag{background:transparent;border-color:rgba(255,250,242,.22); color:rgba(255,250,242,.48)} .frame__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* space-between hat die Straße nach links und den Ort nach rechts außen gezogen, dazwischen eine leere Spanne — zwei Hälften einer Adresse, die aussahen wie zwei getrennte Angaben. Der Ort stand zusätzlich in Rot. */ .shot__cap{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px; font-size:var(--fs-label);line-height:1.5;color:rgba(255,250,242,.62)} .shot__cap-st{color:inherit} .shot__cap-st::before{content:"· "} /* ─────────────────────────────── Fuß */ .foot{background:var(--ink);color:rgba(255,250,242,.66);padding-bottom:clamp(28px,4vw,44px)} .foot__top{border-top:1px solid rgba(255,250,242,.16);padding-top:clamp(28px,3.4vw,44px); display:flex;flex-wrap:wrap;gap:26px 40px;justify-content:space-between;align-items:flex-start} .foot img{height:30px;width:auto;filter:invert(1) brightness(1.9);opacity:.92} /* Der Zeilenabstand geht auf null, weil die Links ihn jetzt selbst mitbringen: 9 px Polster oben und unten heben die 26 px hohe Zeile auf 44 px. Gestapelt auf schmalen Geräten steht der Fuß dadurch so locker wie vorher. */ .foot nav{display:flex;flex-wrap:wrap;gap:0 26px} .foot a{text-decoration:none;font-size:var(--fs-meta);transition:color .3s ease} .foot nav a,.foot__legal a{display:inline-flex;align-items:center;min-height:44px;padding-block:9px} .foot a:hover{color:var(--paper)} .foot__legal{margin-top:clamp(30px,4vw,52px);display:flex;flex-wrap:wrap;align-items:center;gap:0 26px;font-size:var(--fs-meta);color:rgba(255,250,242,.56)} /* ─────────────────────────────── Rechtstexte */ .doc{max-width:74ch;padding-top:clamp(120px,17vh,190px)} .doc h1{margin-bottom:clamp(28px,4vw,48px)} .doc h2{font-family:var(--display);font-size:clamp(1.35rem,2.4vw,1.9rem);margin-top:clamp(34px,4vw,54px);margin-bottom:12px;letter-spacing:-.01em} .doc h3{font-size:var(--fs-body);font-weight:500;margin-top:26px;margin-bottom:8px} .doc p,.doc li{color:#4a4744} .doc p+p{margin-top:14px} .doc ul{list-style:disc;padding-left:1.2em;margin-top:12px;display:grid;gap:6px} .doc a{color:var(--ink)} .doc dl{margin-top:12px;display:grid;gap:4px;color:#4a4744} .doc .back{display:inline-flex;margin-top:clamp(44px,6vw,72px)} /* ═══════════════════════════════ Objektmappe · referenzen.html Die Startseite ist eine Werkzeichnung. Diese Seite ist die Ausstellung, in der das Gezeichnete hängt — und sie darf deshalb anders aussehen: weißer Grund statt Papierton, Objektnamen in Versalien, keine Zwischenüberschriften, keine Zeichnungen, keine Passermarken. Die Schrift bleibt die des Hauses; anders ist nur, wie sie gesetzt wird. Alles hängt an einer einzigen Klasse am body. Wer sie setzt, dreht die Farbmarken um; Kopf, Fußzeile, Menü und Rahmen folgen von allein, weil sie dieselben Marken lesen. */ body.mappe{ --paper:#FFFFFF; --surface:#F1EFEC; /* die Wand hinter einem noch leeren Feld */ --ink:#161514; /* Drucktiefe statt Bleistiftgrau */ --graphite:#6F6A63; /* Gegen reines Weiß darf das Rot eine Spur tiefer stehen als auf dem cremefarbenen Blatt — sonst wirkt es auf der Museumswand grell. 5,3 zu 1 auf Weiß, 4,6 auf der Wandfläche. */ --accent:#CC2D19; --accent-ink:#CC2D19; --rule:rgba(22,21,20,.13); --rule-strong:rgba(22,21,20,.24); /* Die Schrift der Ausstellung ist die Schrift des Hauses. Sie unterscheidet sich von der Startseite allein durch Versalien und die engere Laufweite, die große Grade vertragen. */ --mus:var(--display); background:var(--paper); } /* Die Passermarken sind das Zeichen der Werkstatt. In der Ausstellung hat der Rahmen nichts anzumelden — er hält nur die Fläche, bis das Video da ist. */ body.mappe .frame{border-color:var(--rule);background:var(--surface)} body.mappe .frame::before,body.mappe .frame::after{display:none} /* ── Kopf ───────────────────────────────────────────────────────────────── Ein Titel, ein Satz, viel Luft darunter. Der Eyebrow entfällt: die Seite heißt Referenzen, das steht in der Navigation und im Titel. */ .page-head{ padding-top:clamp(128px,20vh,230px); padding-bottom:clamp(56px,8vw,120px); } .page-head h1{ margin:0;font-family:var(--mus);font-weight:650; font-size:clamp(2.1rem,6.2vw,5rem);line-height:.96; /* Geist ist schmaler als die abgelegte Versalschrift und läuft in großen Graden auseinander, wenn man sie lässt. −.035 em holt die Versalien zusammen, ohne dass sie sich berühren. */ letter-spacing:-.035em;text-transform:uppercase; } .page-head .lead{ margin-top:clamp(26px,3.4vw,44px);max-width:46ch; color:#3B3833; } /* Das Objektverzeichnis auf der Startseite — die anklickbare Liste der drei Auftraggeber. Steht hier, weil es zur Mappe gehört, wird aber nur von index.html benutzt. */ .idx{margin-top:clamp(38px,5vw,66px);border-top:1px solid var(--ink)} /* align-items:center, nicht baseline. Auf der Grundlinie saßen Nummer, Name und Ort oben an der Zeile, während das Bild daneben 213 px hoch ist — unter der Schrift stand ein leeres Feld von der doppelten Höhe des Namens. */ .idx a{ position:relative;text-decoration:none; display:grid;grid-template-columns:auto auto 1fr auto auto;gap:10px 22px;align-items:center; padding-block:clamp(14px,1.8vw,22px);border-bottom:1px solid var(--rule); transition:padding-left .5s var(--ease); } /* Ein Blick in das Objekt, bevor man es aufschlägt. Das Feld war 108 bis 188 px breit, also eine Briefmarke neben einer 28-px-Überschrift. Jetzt ist es ungefähr ein Viertel der Zeile und man erkennt den Raum darin. Die Vergrößerung beim Überfahren ist raus: sie lag auf jedem anklickbaren Bild der Seite und war damit kein Hinweis mehr, sondern Hintergrundrauschen. Den Hinweis gibt der rote Strich, der unter der Zeile einläuft. */ .idx__pic{ position:relative;display:block;align-self:center; width:clamp(132px,22vw,320px);aspect-ratio:3 / 2;overflow:hidden; } .idx__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .idx a::before{ content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--accent); transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease); } .idx a:hover,.idx a:focus-visible{padding-left:14px} .idx a:hover::before,.idx a:focus-visible::before{transform:scaleX(1)} .idx__no{font-family:var(--tech);font-size:var(--fs-label);letter-spacing:.16em;color:var(--accent-ink)} .idx__name{font-family:var(--display);font-weight:600;letter-spacing:-.03em; font-size:clamp(1.25rem,2.6vw,1.75rem);line-height:1.1} .idx__meta{font-size:var(--fs-label);line-height:1.5;color:var(--graphite)} .idx__arw{width:15px;height:9px;stroke:var(--accent);stroke-width:1.4;fill:none; align-self:center;opacity:0;transform:translateX(-8px); transition:opacity .4s ease,transform .5s var(--ease)} .idx a:hover .idx__arw,.idx a:focus-visible .idx__arw{opacity:1;transform:none} @media (max-width:700px){ .idx a{grid-template-columns:auto auto 1fr auto} .idx__meta{grid-column:3;text-align:left} .idx__arw{grid-row:1;grid-column:4;opacity:1;transform:none} .idx__pic{grid-row:1 / span 2} } /* ── Ein Objekt ─────────────────────────────────────────────────────────── Der Rahmen ist dreimal gleich, die Wand nicht. Schild, Film und Aufgabe sind bei allen drei Objekten identisch gebaut, damit die Seite eine Stimme behält; die Kundenschriften und Kundenfarben, die hier einmal standen, sind deshalb ersatzlos weg. Verschieden ist allein die Hängung: Haberkorn zwei groß und vier dicht, Ambulanz Mobile ein Solitär, drei, zwei, die Agrarmarketinggesellschaft vier dicht und zwei groß. Eine erste Fassung hatte auch die Hängung dreimal gleich getaktet — die drei Abschnitte waren dann nicht mehr auseinander- zuhalten, und ein Kunde soll sich nicht anfühlen wie eine Zeile in einer Liste. Welcher Takt zu welchem Haus gehört, steht in referenzen.html. Der Trennstrich läuft über die volle Blattbreite und nicht über den Satz- spiegel: er ist die Fuge zwischen zwei Ausstellungswänden. */ .obj{padding-block:clamp(64px,9vw,150px);position:relative} /* Kein negativer Versatz: .obj trägt selbst die Klasse wrap, sein Kasten reicht also schon von Fensterkante zu Fensterkante — der Steg liegt innen als Polsterung. Ein absolut gesetztes Kind bezieht sich auf eben diesen Kasten einschließlich Polsterung, links 0 ist damit bereits die Kante. Mit -1 × Steg schoss der Strich auf jeder Breite genau einen Steg über den rechten Rand hinaus und die Seite ließ sich waagerecht schieben. */ .obj::before{ content:"";position:absolute;top:0;height:1px;background:var(--rule-strong); left:0;right:0; } @media (min-width:960px){ .obj__hd{ display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(40px,5vw,96px);align-items:start; } } /* Die Inventarnummer, wie sie neben einem Exponat steht: die laufende Zahl groß, der Bestand klein daneben. */ .obj__no{ margin:0;display:flex;align-items:baseline;gap:10px; font-family:var(--tech);letter-spacing:.1em; } .obj__no b{font-size:clamp(1rem,1.5vw,1.2rem);font-weight:600;color:var(--ink)} .obj__no span{font-size:var(--fs-label);color:var(--graphite)} .obj__name{ margin:clamp(14px,1.8vw,22px) 0 0; font-family:var(--mus);font-weight:650; font-size:clamp(1.7rem,3.7vw,3rem);line-height:1.02; letter-spacing:-.035em;text-transform:uppercase; /* Breite Versalien und Silbentrennung vertragen sich nicht: „E-SER-VICE“ sieht aus wie ein Satzfehler. Umbrochen wird an Leerzeichen. */ hyphens:none; } .obj__lead{ margin:clamp(20px,2.4vw,30px) 0 0;max-width:46ch; font-size:var(--fs-body);line-height:1.62;color:#3B3833; } /* Das Schild an der Wand: Zeile für Zeile, Begriff und Angabe, kein Kasten. */ .obj__facts{margin:clamp(26px,3vw,38px) 0 0;display:grid} .obj__facts > div{ display:grid;gap:3px;padding-block:12px;border-top:1px solid var(--rule); } .obj__facts > div:last-child{border-bottom:1px solid var(--rule)} @media (min-width:520px){ .obj__facts > div{grid-template-columns:8.5rem minmax(0,1fr);gap:3px 20px} } .obj__facts dt{ font-family:var(--tech);font-size:var(--fs-label);letter-spacing:.14em; text-transform:uppercase;color:var(--graphite); } .obj__facts dd{margin:0;font-size:var(--fs-meta);line-height:1.5;color:#3B3833} /* Die Anschrift im Netz steht allein in ihrer Zeile und ist damit eine eigene Trefffläche, kein Link mitten im Satz — sie braucht die vollen 44 px Höhe. Der gleich große negative Rand nimmt den Zuwachs wieder aus dem Fluss, sonst stünde diese eine Zeile höher als die vier darüber. Der Unterstrich sitzt am Text und nicht am Kastenrand: er zeichnet das Wort aus, nicht die Kante. */ .obj__facts a{ display:inline-flex;align-items:center;min-height:44px; padding-block:11px;margin-block:-11px; color:inherit;text-decoration:none; --strich:var(--rule-strong); background-image:linear-gradient(var(--strich),var(--strich)); background-size:100% 1px;background-repeat:no-repeat; background-position:0 calc(50% + .72em); } .obj__facts a:hover,.obj__facts a:focus-visible{--strich:var(--accent)} /* ── O-Ton, rechts neben dem Schild ─────────────────────────────────────── Ohne Überschrift: ein Film und ein Zitat brauchen keine Ansage, man sieht, was es ist. Kein farbiger Grund, kein Kasten — der Rand links genügt, um das Zitat vom Schild zu trennen. */ .obj__say{margin-top:clamp(38px,5vw,56px)} @media (min-width:960px){.obj__say{margin-top:0}} .obj__film{margin:0} .obj__film .frame{--ar:16 / 9} .obj__cap{ margin-top:12px; font-size:var(--fs-label);line-height:1.5;color:var(--graphite); } .obj__quote{ margin:clamp(24px,2.8vw,34px) 0 0;padding:0 0 0 clamp(16px,1.8vw,24px); border-left:1px solid var(--ink); } .obj__quote p{ margin:0;font-size:clamp(1.1rem,1.5vw,1.32rem);line-height:1.42; letter-spacing:-.012em;color:var(--ink); } .obj__quote cite{ display:block;margin-top:14px;font-style:normal; font-size:var(--fs-label);line-height:1.5;color:var(--graphite); } /* Solange nichts freigegeben ist, steht der Platzhalter zurück: gestrichelte Kante, gedämpfter Text. Er behauptet damit nichts. */ .obj__quote--offen{border-left-style:dashed;border-left-color:var(--rule-strong)} .obj__quote--offen p{color:var(--graphite)} /* ── Die Aufgabe ────────────────────────────────────────────────────────── Was der Auftraggeber zu lösen hatte, bevor Möbel überhaupt zur Sprache kamen. Steht zwischen Schild und Wand, weil es genau dort hingehört: die Zahlen darüber sagen, wer der Kunde ist, die Bilder darunter, was daraus wurde, und dazwischen fehlt sonst das Warum. Gebaut ist der Block aus einer einzigen Linie über die volle Blattbreite, in die das Wort „Aufgabe“ eingesetzt ist wie eine Beschriftung in einem Plan. Kein Kasten, kein Schatten, kein Zeichen davor: der Abschnitt soll die Hängung darunter ankündigen und ihr nicht die Aufmerksamkeit nehmen. Der Satz links ist die Schwierigkeit in einem Zug, rechts steht, woran sie hing. Zwei Spalten, weil eine Aussage und ihre Begründung nebeneinander schneller zu erfassen sind als untereinander. */ .task{position:relative;margin-top:clamp(50px,6.6vw,96px);padding-top:clamp(30px,3.6vw,48px)} /* Dieselbe Bauart wie die Hängelinie: über den Satzspiegel hinaus bis an den Rand des Fensters. Beide Linien gehören derselben Wand. */ .task::before{ content:"";position:absolute;top:0; left:calc(var(--gutter) * -1);right:calc(var(--gutter) * -1); height:1px;background:var(--rule-strong); } /* Die Beschriftung sitzt auf der Linie und deckt sie ab. Links davon läuft die Linie im Bund weiter, das ist gewollt: sie kommt vom Blattrand. */ .task__label{ position:absolute;top:0;left:0;transform:translateY(-50%); margin:0;padding-right:15px;background:var(--paper); font-size:var(--fs-label);line-height:1.5;color:var(--accent-ink); } .task__body{display:grid;gap:clamp(16px,2.2vw,26px)} .task__q{ margin:0;font-family:var(--mus);font-weight:600; font-size:clamp(1.4rem,2.9vw,2.35rem);line-height:1.1;letter-spacing:-.03em; max-width:20ch;text-wrap:balance; /* Wie beim Kundennamen: in großem Grad wird an Leerzeichen umbrochen und nicht getrennt. Auf dem Telefon stand hier sonst „Kund-schaft“, und ein Trennstrich in der einzigen fetten Zeile des Abschnitts liest sich wie ein Fehler. Das overflow-wrap aus der Grundregel bleibt als Notnagel für den Fall, dass ein Wort allein breiter wird als die Spalte. */ hyphens:none; } .task__a{margin:0;max-width:60ch;color:#3B3833} @media (min-width:900px){ .task__body{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(32px,4vw,72px);align-items:start; } .task__q{max-width:none} } /* ── Die Hängung ────────────────────────────────────────────────────────── Im Museum hängen Bilder auf einer gemeinsamen Mittelachse, gleich welches Format sie haben — deshalb wirkt eine Wand mit Hoch- und Querformaten ruhig und ein Raster mit gleich großen Kacheln steif. Genau so ist es gebaut: eine Haarlinie läuft randlos quer über die Seite, jedes Bild hat dieselbe Höhe --h und sitzt mit seiner Mitte auf der Linie. Die Breite ergibt sich aus dem Seitenverhältnis --w, das jedes Bild selbst mitbringt. Die Linie ist damit keine Zierde, sondern die Begründung dafür, dass 4:5, 3:2 und 1:1 nebeneinander stehen dürfen. Unter 1000 px hat eine Wand keinen Platz mehr. Dann fällt die Hängung auf eine, ab 620 px auf zwei Spalten zurück, die Linie entfällt, und die Bilder behalten ihr Format über aspect-ratio. */ .hang{margin-top:clamp(52px,7vw,110px)} .hang__row{ display:grid;grid-template-columns:1fr; gap:clamp(30px,4vw,48px) clamp(18px,2.4vw,34px); } .hang__row + .hang__row{margin-top:clamp(44px,6vw,96px)} .work{margin:0;min-width:0;position:relative} .work__box{ display:block;width:100%;aspect-ratio:var(--w); background:var(--surface);overflow:hidden; } /* clip statt hidden, sobald der Browser es kennt. Beide beschneiden gleich, aber hidden macht den Rahmen zu einem scrollbaren Kasten — und view() im Bild sucht sich dann diesen Kasten als Bezug statt des Fensters. Das Motiv steht darin immer gleich, die Bewegung bliebe bei 50 % hängen. clip beschneidet, ohne einen Scrollbereich aufzumachen. */ @supports (overflow:clip){ .work__box{overflow:clip} } .work__img{display:block;width:100%;height:100%;object-fit:cover} .work__cap{ display:flex;gap:10px;margin-top:14px; font-size:var(--fs-label);line-height:1.5;color:var(--graphite); } .work__no{flex:none;color:var(--ink);font-weight:600} /* Unterhalb der Hängung bleibt vom Takt einer Reihe die Spaltenzahl übrig. Sie wird mitgenommen, sonst sähen die drei Objekte auf dem Telefon wieder gleich aus, und dort wird die Seite am häufigsten gelesen. Eine dichte Reihe rückt schon auf dem Telefon zweispaltig zusammen, das einzelne Blatt bleibt auf jeder Breite allein. */ @media (max-width:619.98px){ .hang__row--dicht .work__cap{gap:7px;line-height:1.4} } /* Unterhalb der Hängung stapeln sich fast alle Bilder auf volle Breite, und das einzelne Blatt wäre dann keines mehr. Ein Ausschnitt im Breitformat hält es auch auf dem Telefon vom Rest getrennt: es liegt quer über der Spalte, wo darunter Hoch- und Querformate wechseln. */ @media (max-width:999.98px){ .hang__row--solo .work__box{aspect-ratio:1.6} } /* Vier Bilder nebeneinander ergäben auf dem Tablet Spalten um 160 px, unter denen „Lamellenwand mit Bildschirmplatz“ dreizeilig bricht. Die dichte Reihe rückt deshalb schon hier ins Quadrat, wie auf dem Telefon. Das Quadrat war einmal der Kompromiss für einen gemischten Satz, eigene 3:2-Aufnahmen gegen gekaufte Hochformate. Seit auch das Magdeburger Haus fotografiert ist, liegen alle neunzehn Bilder als 3:2 vor, der gemischte Satz ist also aufgelöst. Das Quadrat bleibt trotzdem: bei zwei Spalten ist es das höchste Format, das die Bildunterschrift noch einzeilig trägt, und die Höhenrechnung der beiden Regeln darunter — 55 vw und 83 vw — ist auf genau dieses Format gelegt. Ein anderes Format hieße, beide neu zu rechnen. */ @media (max-width:999.98px){ .hang__row--dicht{grid-template-columns:repeat(2,minmax(0,1fr))} .hang__row--dicht .work__box{aspect-ratio:1} } /* Und hier die Folge daraus, die man erst im Bild sieht: ein Quadrat ist bei gleicher Spaltenbreite das höchste Format, das es gibt. Über die ganze Breite gelegt wurde die dichte Reihe damit zum größten Block der Seite — bei 760 px 333 px hoch gegen 175 px der großen Reihe daneben. Die Wand hing verkehrt herum: die Nebenreihe schrie, die Hauptreihe flüsterte. Die Breite ist die Stellschraube, nicht das Format. 55 vw sind so gewählt, dass eine Quadratkachel genau die Höhe der großen Reihe bekommt: 162/161 bei 620 px, 200/198 bei 760, 262/255 bei 999. Beide Reihen hängen also gleich hoch, und die dichte steht als geschlossener Block in der Mitte — wie am großen Bildschirm, wo sie ebenfalls schmaler ist als die Wand. */ @media (min-width:620px) and (max-width:999.98px){ .hang__row--dicht{max-width:min(100%,55vw);margin-inline:auto} /* Eine dichte Reihe aus genau drei Bildern steht im Zweispalter als 2+1 da — eine Waise unten links, und beim Haberkorn-Haus ausgerechnet der Schulungsraum. Drei Spalten lösen das, und weil die Reihe dann drei statt zwei Kacheln tragen muss, darf sie breiter werden: 83 vw sind rund 92 % des Satzspiegels und halten die Kachelhöhe wieder bei der großen Reihe (174/161 bei 620 px, 207/198 bei 760, 266/255 bei 999). Kennt ein Browser :has() nicht, bleibt es beim Zweispalter darüber — das ist kein Schaden, nur die Waise kommt zurück. */ .hang__row--dicht:has(> .work:nth-child(3):last-child){ max-width:min(100%,83vw); grid-template-columns:repeat(3,minmax(0,1fr)); } } /* Auf dem Tablet trägt die Linie weiter, solange eine Reihe höchstens drei Bilder hat. Das ist mehr als Zierde: nur auf einer gemeinsamen Höhe stehen auch die Bildunterschriften auf einer Zeile. Ohne sie stünde unter einem Hochformat die Unterschrift 200 px tiefer als daneben, und die Reihe sähe verrutscht aus statt gehängt. Die dichte Reihe und das einzelne Blatt bleiben außen vor, sie haben unten ihre eigene Regel. */ @media (min-width:620px) and (max-width:999.98px){ .hang__row:not(.hang__row--dicht):not(.hang__row--solo){ position:relative; display:flex;flex-wrap:nowrap;align-items:flex-start;justify-content:center; /* Nach unten begrenzt nicht die Reihe, sondern die Bildunterschrift: das schmalste Format ist 0,75, unter --h 150 fällt seine Spalte unter 112 px und „Teeküche an der Verwaltung“ bricht auf vier Zeilen. Nach oben begrenzt die breiteste Reihe, 2,83 Einheiten plus Fuge. */ --h:clamp(150px,21vw,215px); } /* Die beiden :not() stehen hier nicht aus Laune. Die Regel darüber wiegt drei Klassen, ein blankes .hang__row--gross nur eine — die große Reihe bekam also weiter die Höhe der gewöhnlichen, und zwar still: kein Fehler, nur eine Wand, auf der alles gleich groß hängt. Gemessen bei 760 px waren es 160 px statt 175 px. Gleiches Gewicht, später notiert, also gilt sie. Die Werte sind nach der breitesten großen Reihe gerechnet, 2,83 Einheiten plus einer Fuge, und lassen überall rund ein Achtel des Satzspiegels frei: 474 von 540 bei 620 px, 578 von 666 bei 760, 746 von 875 bei 999. */ .hang__row--gross:not(.hang__row--dicht):not(.hang__row--solo){ --h:clamp(160px,26vw,255px); } .hang__row:not(.hang__row--dicht):not(.hang__row--solo)::before{ content:"";position:absolute; left:calc(var(--gutter) * -1);right:calc(var(--gutter) * -1); top:calc(var(--h) / 2);height:1px;background:var(--rule-strong); } .hang__row:not(.hang__row--dicht):not(.hang__row--solo) .work{ flex:0 1 calc(var(--h) * var(--w)); } .hang__row:not(.hang__row--dicht):not(.hang__row--solo) .work__box{ height:var(--h);aspect-ratio:auto; } } @media (min-width:1000px){ .hang__row{ position:relative; display:flex;flex-wrap:nowrap;align-items:flex-start;justify-content:center; /* Die gemeinsame Höhe. Die breiteste Reihe misst 3,59 × --h plus zwei Fugen; bei 19,5 vw bleibt auf jeder geprüften Breite gut ein Sechstel des Satzspiegels frei, die Wand hat also Rand. */ --h:clamp(200px,19.5vw,420px); } /* Die Hängelinie selbst. Sie läuft über den Satzspiegel hinaus bis an den Rand des Fensters und liegt hinter den Bildern: die Bilder decken sie ab, zwischen ihnen und außen bleibt sie stehen. Weil sie im Dokument vor den Bildern steht und beide gleichrangig positioniert sind, malt der Browser sie zuerst — ohne z-index, der hier hinter den Seitengrund fiele. */ .hang__row::before{ content:"";position:absolute; left:calc(var(--gutter) * -1);right:calc(var(--gutter) * -1); top:calc(var(--h) / 2);height:1px;background:var(--rule-strong); } /* flex-shrink bleibt an: sollte eine Reihe je zu breit geraten, schrumpfen die Felder und die Bilder beschneiden sich stärker — die Linie bleibt heil. Ein waagerechter Überlauf wäre der schlimmere Fehler. */ .work{flex:0 1 calc(var(--h) * var(--w))} .work__box{height:var(--h);aspect-ratio:auto} /* Drei Hängehöhen. Im Museum hängt nicht jede Wand gleich: ein einzelnes Blatt bekommt Platz und Größe, eine Folge von vieren hängt kleiner und enger. Weil --h allein die Höhe setzt und die Breite aus --w folgt, behält jedes Bild sein Format, gleich in welcher Reihe es hängt. Die Werte sind nach der jeweils breitesten vorkommenden Reihe gerechnet, Summe der --w mal --h plus Fugen, damit auch auf 1000 px Rand bleibt: dicht trägt 4,58 Einheiten, groß 2,83, solo genau eine. */ .hang__row--gross{--h:clamp(240px,25vw,480px)} .hang__row--dicht{--h:clamp(168px,14.5vw,278px)} .hang__row--solo {--h:clamp(280px,30vw,560px)} } /* ── Die Wand wird gehängt ──────────────────────────────────────────────── Eine einzige Bewegung, in drei Sätzen erzählt, und alle drei hängen an der Hängelinie — nicht drei Effekte nebeneinander. 1 · Die Linie zieht sich von der Mitte nach außen, bevor Bilder darauf sitzen. Sie ist die Begründung der Wand, also kommt sie zuerst. 2 · Die Bilder blenden auf der fertigen Linie ein (das macht .rv). 3 · Solange eine Reihe im Bild steht, wandert das Motiv langsam in seinem Rahmen. Das ist die Bewegung, die man beim Scrollen tatsächlich spürt; sie läuft in beide Richtungen und hat weder Anfang noch Ende. */ @media (min-width:1000px){ .hang__row::before{ transform:scaleX(0);transform-origin:center; /* Eine Sekunde für gut zwei Fensterbreiten Strich: langsamer als jede andere Bewegung im Haus, weil eine Linie, die schnell wächst, wie ein Ladebalken aussieht. */ transition:transform 1s var(--ease); } .hang__row.rv-in::before{transform:scaleX(1)} } /* Der Bildlauf im Rahmen. Wo der Browser Bewegung an den Scrollstand koppeln kann, macht er es selbst: die Rechnung läuft dann neben dem Hauptfaden und überlebt auch den Schwung-Scroll eines Telefons, bei dem Scroll-Ereignisse in Paketen und nicht Bild für Bild eintreffen. Kann er es nicht, übernimmt main.js dieselbe Rechnung — gleiche Formel, gleiche 3,4 %. scale(1.08) gibt oben und unten je 4 % Überstand. Nur deshalb kann sich das Motiv um 3,4 % verschieben, ohne dass eine Blöße entsteht. */ @keyframes werk-lauf{ from{transform:translate3d(0,-3.4%,0) scale(1.08)} to {transform:translate3d(0, 3.4%,0) scale(1.08)} } @supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference){ .work__img{ /* Einzeln notiert, nicht als Kurzschrift. Die Kurzschrift setzt animation-duration auf 0s zurück, und eine Bewegung ohne Dauer steht auf einer Fortschrittsleiste aus Scroll ewig bei 50 % — sichtbar passiert dann gar nichts. Scroll-Zeitleisten brauchen auto. */ animation-name:werk-lauf; animation-duration:auto; animation-timing-function:linear; animation-fill-mode:both; animation-timeline:view(); animation-range:cover 0% cover 100%; } } } /* Die Schaltfläche ist nur der Griff am Bild: keine eigene Fläche, kein Rahmen. Der Zeiger sagt, dass es größer geht. */ .work__btn{ display:block;width:100%;padding:0;border:0;background:none; cursor:zoom-in;-webkit-tap-highlight-color:transparent; } .work__btn:focus-visible{outline:2px solid var(--accent);outline-offset:6px} /* Beim Überfahren tritt das Bild einen Hauch zurück statt vorzuspringen: ein Exponat wächst nicht, wenn man davorsteht. */ .work__img{transition:opacity .45s var(--ease)} .work__btn:hover .work__img,.work__btn:focus-visible .work__img{opacity:.86} /* Der Vermerk unter der Hängung. Er steht klein und am linken Rand, wie der Hinweis auf einer Museumswand, dass ein Werk gerade als Leihgabe fehlt — und er sagt geradeheraus, dass hier noch keine Objektfotos hängen. */ .hang__note{ margin:clamp(30px,3.6vw,48px) 0 0;max-width:62ch; font-size:var(--fs-label);line-height:1.6;color:var(--graphite); } /* Der Ausgang. Der dunkle Block behält die Hausfarben der Startseite, seine Überschrift aber die Ausstellungsschrift — sonst spränge die Seite auf den letzten Metern in eine andere Stimme. */ body.mappe .cta-end h2{ margin:0;font-family:var(--mus);font-weight:650; font-size:clamp(1.8rem,3.9vw,3.1rem);line-height:1.02; letter-spacing:-.035em;text-transform:uppercase;hyphens:none; } body.mappe .cta-end .lead{margin-top:clamp(22px,2.8vw,32px)} /* Das Bildfeld hielt bis hierher ein Andreaskreuz aus Haarlinien und zwei rote Passermarken, die beim Überfahren nach außen rückten — die Zeichnung eines noch nicht ausgeführten Feldes. Über einem Foto ist beides nur Dekor und zieht den Blick von dem ab, was zu sehen sein soll. Geblieben ist, wofür .frame wirklich da ist: ein festes Seitenverhältnis und ein ruhiger Grund, solange das Bild noch lädt. */ .frame{ position:relative;aspect-ratio:var(--ar,16 / 9);overflow:hidden; display:grid;place-items:center;background:var(--surface); } .frame__tag{ position:relative;background:var(--paper);padding:9px 16px;border:1px solid var(--rule); font-size:var(--fs-label);font-weight:500;line-height:1.5;color:var(--graphite); } .frame__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0} /* Platzhalter statt Foto. Ein Foto darf beschnitten werden, ein Platzhalter nicht: er trägt Text, und abgeschnittener Text liest sich als Fehler. Deshalb contain statt cover. Die Felder der Musterplanung haben ab 1000 px ohnehin kein festes Seitenverhältnis mehr — sie strecken sich über die Resthöhe der Karte, und keine feste Form könnte das treffen. Die Leiste, die contain dabei frei lässt, fällt nicht auf: .frame trägt dieselbe Papierfarbe wie der Platzhalter selbst. */ img[src*="/img/p/"]{object-fit:contain} /* ── Blicke ─────────────────────────────────────────────────────────────── Sechs Aufnahmen zwischen Haltung und Bereichen. Kein Rahmen, kein Schatten, keine Karte: das Bild steht auf dem Papier, darunter eine Zeile Text in der technischen Schrift — dieselbe Beschriftung, die auf einer Zeichnung unter einem Detail steht. Die Hängung läuft breit / Paar / Paar / breit: die erste und die letzte Aufnahme nehmen die ganze Breite und stehen im liegenden Ausschnitt, die vier dazwischen stehen paarweise. Jede Zeile trägt damit nur Bilder gleicher Höhe — das ist der Unterschied zum Versuch davor, in dem gemischte Seitenverhältnisse und eine abgesenkte Mittelspalte ab 1180 px große Löcher zwischen die Reihen gerissen haben. Zwei Spalten ab 760 px, darunter eine. Die Zeilenfuge ist deutlich größer als die Spaltenfuge, damit die Bildunterschrift zu ihrem Bild gehört und nicht zum nächsten. */ .blicke{padding-top:clamp(30px,4vw,52px)} .blicke__grid{ display:grid;grid-template-columns:1fr; gap:clamp(34px,4vw,54px) clamp(16px,2vw,26px); margin:0;padding:0;list-style:none; } .blicke__i figure{margin:0} .blicke__i img{ display:block;width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover; background:var(--rule); } .blicke__i figcaption{ margin-top:10px; font-size:var(--fs-label);line-height:1.5;color:var(--graphite); } .blicke__note{ margin:clamp(26px,3vw,40px) 0 0;max-width:60ch; font-size:var(--fs-meta);line-height:1.6;color:#4a4744; } @media (min-width:760px){ .blicke__grid{grid-template-columns:repeat(2,minmax(0,1fr))} .blicke__i:first-child,.blicke__i:last-child{grid-column:1 / -1} /* 21:9 ist der Ausschnitt, den eine Raumaufnahme verträgt, ohne dass Decke oder Boden das Motiv auffressen. object-fit:cover beschneidet aus derselben Datei — kein neuer Zuschnitt nötig. */ .blicke__i:first-child img,.blicke__i:last-child img{aspect-ratio:21 / 9} } /* ── Werkschau ──────────────────────────────────────────────────────────── Ein Kontaktbogen zwischen Musterplanung und Referenzen: eine Reihe Aufnahmen in ihren echten, gemischten Formaten, seitlich verschiebbar. Die Höhe ist gesetzt, die Breite folgt dem Format — Hochformat steht schmal, Querformat breit, wie Abzüge auf dem Leuchttisch. Deshalb kein Grid: ein Grid würde die Formate wieder gleichschneiden. */ .strip__row{ display:flex;align-items:flex-start;gap:clamp(16px,2.2vw,30px); margin:clamp(26px,3.4vw,46px) 0 0;list-style:none; padding:0 var(--gutter) 14px; /* unten Luft zur Laufleiste */ overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter); scrollbar-width:thin;scrollbar-color:var(--graphite) transparent; } .strip__i{flex:0 0 auto;scroll-snap-align:start} .strip__i figure{margin:0} /* 48vh statt 36: in der Reihe standen Abzüge von 240 px Höhe unter einer Sektion, die 180 px oben und unten polstert — das Bild war kleiner als sein eigener Rand. Die Sektion trägt jetzt .section--tight, das Bild wächst. */ .strip__i img{ display:block;height:clamp(260px,48vh,520px);width:auto; background:var(--rule); } /* width:0 + min-width:100% nimmt die Zeile aus der Breitenrechnung: sonst würde eine lange Bildunterschrift das schmale Hochformat aufschieben. */ .strip__i figcaption{ width:0;min-width:100%;margin-top:10px; font-size:var(--fs-label);line-height:1.5;color:var(--graphite); } /* ── Große Ansicht ──────────────────────────────────────────────────────── Eine Tafel über der Seite: das Bild groß, darunter eine Zeile Schild und zwei Pfeile. Die achtzehn Aufnahmen sind eine Ausstellung, deshalb läuft die Zählung über alle drei Objekte durch und die Zeile nennt das Haus. */ .lb{position:fixed;inset:0;z-index:90;display:grid;place-items:center; padding:clamp(14px,3vw,48px)} .lb[hidden]{display:none} .lb__scrim{position:absolute;inset:0;background:rgba(255,255,255,.96); opacity:0;transition:opacity .34s ease} .lb.is-open .lb__scrim{opacity:1} .lb__panel{ position:relative;width:min(1180px,100%);max-height:100%; display:flex;flex-direction:column;gap:clamp(14px,2vw,22px); opacity:0;transform:translateY(10px); transition:opacity .34s var(--ease),transform .34s var(--ease); } .lb.is-open .lb__panel{opacity:1;transform:none} .lb__bar{display:flex;align-items:center;justify-content:space-between;gap:16px} .lb__no{margin:0;font-family:var(--tech);font-size:var(--fs-label); letter-spacing:.14em;text-transform:uppercase;color:var(--ink)} .lb__of{color:var(--graphite)} .lb__x,.lb__arrow{ display:grid;place-items:center;border:1px solid var(--rule-strong); background:none;cursor:pointer;color:var(--ink); transition:border-color .3s ease,background .3s ease; } .lb__x{width:44px;height:44px;flex:none} .lb__arrow{width:44px;height:44px} .lb__x:hover,.lb__x:focus-visible, .lb__arrow:hover,.lb__arrow:focus-visible{border-color:var(--ink);background:var(--surface)} .lb__x svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4} .lb__arrow svg{width:15px;height:9px;fill:none;stroke:currentColor;stroke-width:1.3} .lb__stage{min-height:0;display:grid;place-items:center} .lb__img{ display:block;max-width:100%;max-height:min(66vh,700px); width:auto;height:auto;background:var(--surface); } .lb__foot{display:flex;align-items:center;justify-content:space-between;gap:20px; border-top:1px solid var(--rule);padding-top:14px} .lb__cap{margin:0;font-size:var(--fs-meta);line-height:1.5;color:#3B3833} .lb__cap b{font-weight:600;font-size:var(--fs-label);color:var(--ink); display:block;margin-bottom:4px} .lb__nav{display:flex;gap:8px;flex:none} @media (max-width:600px){ .lb__foot{flex-direction:column;align-items:flex-start;gap:14px} } /* Offene Position: steht als Text da, ohne vorangestellten Strich. */ .todo{font-family:var(--tech);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--graphite)} .cta-end__grid{display:grid;gap:clamp(34px,5vw,72px)} @media (min-width:860px){.cta-end__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}} .cta-end h2{margin-top:20px} .cta-end .lead{margin-top:clamp(20px,2.6vw,30px);max-width:44ch} .cta-end__go{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3.4vw,44px)} .cta-end dl > div{padding-block:clamp(14px,1.8vw,20px);border-top:1px solid rgba(255,250,242,.16)} .cta-end dl > div:first-child{border-top:0;padding-top:0} /* Telefon und E-Mail sind auf dem Handy die zwei wichtigsten Ziele der ganzen Seite und waren 25 px hoch. Das Polster hebt den Kasten auf 44, der gleich große negative Rand nimmt den Zuwachs wieder aus dem Fluss — die Haarlinien zwischen den Zeilen bleiben damit stehen, wo sie stehen. */ .cta-end dl dd a{display:inline-flex;align-items:center;min-height:44px; padding-block:10px;margin-block:-10px} /* ─────────────────────────────── Reveal Von 22 px auf 14 und von .95 s auf .62: die Einblendung war länger als der Blick braucht, um die Zeile zu finden, und wer zügig scrollte, sah die halbe Seite in Bewegung. Kurz und knapp sieht nicht hektisch aus, sondern fertig. Die gestaffelten Verzögerungen schrumpfen mit. */ /* Das .js davor ist die Reißleine. Die Klasse setzt ein Einzeiler im Kopf der Seite, und das onerror am Skript-Tag nimmt sie wieder weg, falls main.js nicht lädt. Ohne diese Bedingung hing die ganze Seite am Skript: am 20.10.2026 lagen die Dateien nach einem Upload eine Ebene zu tief, das Skript kam mit 404 zurück, und weil niemand mehr rv-in setzte, blieben alle 61 Abschnitte auf opacity:0 — die Seite war vollständig weiß statt nur unanimiert. Ein Besucher soll lesen können, was dasteht, auch wenn die Bewegung ausfällt. */ .js .rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .62s var(--ease)} .js .rv.rv-in{opacity:1;transform:none} .rv-d1{transition-delay:.05s}.rv-d2{transition-delay:.1s}.rv-d3{transition-delay:.15s}.rv-d4{transition-delay:.2s} /* ─────────────────────────────── Nicht rechnen, was niemand sieht Die Startseite ist knapp 17 000 px hoch; beim ersten Aufbau hat der Browser für jeden dieser Pixel Satz und Anstrich gerechnet, auch für die Musterplanung mit ihrer Bildschirmzeichnung aus über hundert Linien, die sechs Fensterhöhen weiter unten liegt. content-visibility:auto erlaubt ihm, einen Abschnitt zu überspringen, solange er nicht im Bild steht. contain-intrinsic-size gibt dafür eine Platzhalterhöhe an, damit die Bildlaufleiste beim Herunterfahren nicht springt — die Zahlen sind gemessen, nicht geschätzt. Das vorangestellte auto sagt: hast du den Abschnitt einmal gesehen, merke dir seine echte Höhe und nimm ab dann die. Nicht angewandt auf alles über der Falzkante und nicht auf die Bereiche: was beim Laden schon im Bild steht oder gleich danach kommt, soll fertig dastehen, wenn jemand hinsieht. */ #vorgehen {content-visibility:auto;contain-intrinsic-size:auto 3290px} .band {content-visibility:auto;contain-intrinsic-size:auto 708px} #musterplanung {content-visibility:auto;contain-intrinsic-size:auto 1413px} #werkschau {content-visibility:auto;contain-intrinsic-size:auto 845px} #referenzen {content-visibility:auto;contain-intrinsic-size:auto 1423px} #kontakt {content-visibility:auto;contain-intrinsic-size:auto 1424px} .foot {content-visibility:auto;contain-intrinsic-size:auto 211px} /* Auf der Objektmappe sind es drei gleich gebaute Objekte untereinander, jedes mit sechs Aufnahmen. Das erste bleibt stehen, die beiden darunter werden übersprungen. */ .mappe .obj + .obj{content-visibility:auto;contain-intrinsic-size:auto 3400px} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} .js .hero h1 .ln>span{transform:none} /* Gleiche Spezifität wie die Grundregel oben, sonst gewinnt dort das opacity:0 und wer Bewegung abbestellt hat, säße vor einer leeren Seite. */ .js .rv{opacity:1;transform:none} /* Die vier Aussagen: ohne diese Zeilen bliebe der Trennstrich auf scaleX(0) stehen und die Zeilen stünden 26 px nach links versetzt — wer Bewegung abbestellt hat, bekäme eine kaputte Liste statt einer ruhigen. Die Linie ist hier einfach da, von Anfang an. */ .worth__i.rv{transform:none} .worth__i::after{transform:scaleX(1)} .s>*{opacity:1} .s .w{stroke-dashoffset:0 !important} .menu__list a{transform:none} /* Dieselbe Vorsorge wie bei den vier Aussagen: die Hängelinie steht sonst auf scaleX(0) und die Wand hätte keinen Nagel. Das Motiv steht still im Rahmen, ohne Vergrößerung — sonst wäre es beschnitten, ohne sich je zu bewegen. */ .hang__row::before{transform:scaleX(1)} .work__img{transform:none;animation:none} }