/* ================================================================ Fitz AG Bausteine nach ~/.claude/skills/einheitliche-gestaltung Grundsatz aus dem Logo: rechter Winkel, zwei Werte, Gewicht statt Farbe. ================================================================ */ /* ---------- Schrift ---------- */ @font-face{ font-family:'Archivo'; font-style:normal; font-weight:100 900; font-stretch:62% 125%; font-display:swap; src:url('../schriften/archivo-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; } @font-face{ font-family:'Archivo'; font-style:normal; font-weight:100 900; font-stretch:62% 125%; font-display:swap; src:url('../schriften/archivo-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ---------- Bausteine ---------- */ :root{ /* Abstände – nur diese Werte für margin, padding, gap */ --a-1:4px; --a-2:8px; --a-3:12px; --a-4:16px; --a-5:24px; --a-6:32px; --a-7:48px; --a-8:64px; --a-9:96px; --a-10:128px; /* Rundung: keine. Das Logo kennt keinen gerundeten Übergang. */ --rundung:0; /* Flächen */ --papier:#FFFFFF; --tinte:#000000; --neben:#4A4A4A; /* Nebeninformation, 8.9:1 auf Weiss */ --neben-hell:#B5B5B5; /* Nebeninformation auf Schwarz, 8.9:1 */ --linie:#000000; --linie-hell:rgba(255,255,255,.28); --linie-leise:#C9C7C3; /* Haarlinie der Masskette, 1.9:1 – reine Zeichnung */ --balken:3px; /* Stärke der kräftigen Linie: Kante über dem Bild, Balken */ /* Fünf Firmenfarben – je Firma drei Werte, mehr nicht: --ton-* Hauptton auf Weiss: Quadrat, Linie, Abzeichen, Kante über dem Bild. --tint-* heller Tint, nur als getönte Fläche eines ganzen Abschnitts. --hell-* aufgehellte Fassung für das schwarze Band und den Fuss. Alle Töne stammen aus dem Akzentquadrat des jeweiligen Firmenlogos (bilder/logos/, Farben mit Pillow aus den Vorlagen gemessen): Bau #E94E1A · Facility #58B030 · Immobilien #0F70B7 · Verwaltung #E4D612. --ton-* ist dieses Quadrat, nur so weit abgedunkelt, dass es auf Weiss 4.5:1 erreicht und damit auch als Schrift zulässig wäre. Bei Immobilien war nichts zu tun. Verwaltung verliert dabei am meisten: ein Gelb mit 4.5:1 auf Weiss ist Oliv – das Logo-Gelb selbst steht nur auf Schwarz (--hell-verwaltung) und im Logo. Architektur hat noch kein Logo; der Platzhalter benutzt dieses Violett. Kontrast auf Weiss: Bau 4.51, Facility 4.55, Immobilien 5.22, Verwaltung 4.56, Architektur 7.18. Kontrast auf Schwarz (--hell-*): Bau 9.07, Facility 8.94, Immobilien 8.78, Verwaltung 13.93 (das Logo-Gelb selbst), Architektur 8.63. Nie Vollfläche über einen ganzen Abschnitt, nie Verlauf. */ --ton-immobilien:#0F70B7; --tint-immobilien:#EEF6FC; --hell-immobilien:#54AFF1; --ton-bau:#D44514; --tint-bau:#FCF2EE; --hell-bau:#F4906F; --ton-facility:#428524; --tint-facility:#F2FAEF; --hell-facility:#62BE38; --ton-verwaltung:#80780A; --tint-verwaltung:#FBFAEC; --hell-verwaltung:#E4D612; --ton-architektur:#70409F; --tint-architektur:#F2EDFA; --hell-architektur:#B997E6; /* Raster */ --breite:1280px; --rand-seite:var(--a-4); /* Knöpfe – eine Form (eckig), zwei Höhen */ --knopf-h:48px; --knopf-h-klein:44px; /* Schriftstufen – feste Werte je Haltepunkt, kein clamp */ --t-mikro:12px; --t-klein:14px; --t-text:16px; --t-lead:18px; --t-h3:19px; --t-h2:27px; --t-h1:38px; /* Bewegung: genau ein Mechanismus – die Blende */ --blende-zeit:1100ms; --blende-kurve:cubic-bezier(.16,.84,.26,1); } @media (min-width:600px){ :root{ --rand-seite:var(--a-5); --t-lead:20px; --t-h3:21px; --t-h2:32px; --t-h1:52px; } } @media (min-width:1000px){ :root{ --rand-seite:var(--a-6); --t-mikro:13px; --t-text:17px; --t-lead:22px; --t-h3:24px; --t-h2:42px; --t-h1:62px; } } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--papier); color:var(--tinte); font-family:'Archivo','Helvetica Neue',Arial,sans-serif; font-size:var(--t-text); font-weight:400; line-height:1.55; font-variant-numeric:tabular-nums lining-nums; overflow-wrap:break-word; hyphens:auto; } [hidden]{ display:none !important; } img,svg{ display:block; max-width:100%; } img{ height:auto; } a{ color:inherit; } :focus-visible{ outline:3px solid var(--tinte); outline-offset:2px; } .dunkel :focus-visible{ outline-color:#FFFFFF; } h1,h2,h3,h4{ margin:0; line-height:1.04; text-wrap:balance; font-weight:800; letter-spacing:-.018em; } h1{ font-size:var(--t-h1); } h2{ font-size:var(--t-h2); } h3{ font-size:var(--t-h3); line-height:1.15; letter-spacing:-.01em; } p{ margin:0; text-wrap:pretty; max-width:62ch; } ul,ol{ margin:0; padding:0; list-style:none; } /* Gewichtskontrast statt Farbkontrast – wie „FITZ“ fett neben „AG“ dünn */ .leicht{ font-weight:300; letter-spacing:-.005em; } .fett{ font-weight:800; } /* Schmale Schnittbreite nur für Datenspalten (Archivo kann wdth) */ .daten{ font-stretch:88%; font-variant-numeric:tabular-nums; } /* Sinnumbruch: der zweite Satz beginnt auf einer neuen Zeile, nicht am Zeilenende */ .satz{ display:block; margin-top:var(--a-1); } .kopfzeile p .satz,.held-kasten p .satz,.band-adresse p .satz{ margin-top:var(--a-2); } /* ---------- Raster ---------- */ .breite{ max-width:var(--breite); margin-inline:auto; padding-inline:var(--rand-seite); } .abschnitt{ padding-block:var(--a-7); } @media (min-width:600px){ .abschnitt{ padding-block:var(--a-8); } } @media (min-width:1000px){ .abschnitt{ padding-block:var(--a-9); } } /* Hell getönte Fläche: neutral, auf den Firmenseiten im Ton der Firma. */ .getoent{ background:var(--getoent,#F4F3F1); } .dunkel{ background:var(--tinte); color:var(--papier); } .dunkel p{ color:#E6E6E6; } .dunkel a{ color:var(--papier); } /* ---------- Logo ---------- Ein Bild, kein Nachbau: bilder/logos/fitz-ag.svg enthält Rahmen, F, © und „FITZ AG“ als eine Einheit. Darum keine getrennte Wortmarke mehr. Die Grösse richtet sich nach der Kopfzeile (64 px hoch): 48 px auf dem Handy, 52 px ab Tablet – darunter wird „FITZ AG“ im Logo unleserlich. */ .logo{ display:flex; align-items:center; min-height:var(--knopf-h-klein); text-decoration:none; color:inherit; } .logo-mal{ width:48px; height:48px; flex:none; } @media (min-width:600px){ .logo-mal{ width:52px; height:52px; } } /* gestapelte Fassung auf schwarzem Grund (Fuss) */ .logo-gross{ display:block; width:168px; height:auto; } /* ---------- Kopf ---------- */ .kopf{ position:sticky; top:0; z-index:40; background:var(--papier); border-bottom:1px solid var(--linie); } .kopf-inhalt{ display:flex; align-items:center; justify-content:space-between; gap:var(--a-4); min-height:64px; } .kopf-nav{ display:none; } .kopf-nav ul{ display:flex; align-items:center; gap:var(--a-5); } .kopf-nav a{ display:flex; align-items:center; min-height:var(--knopf-h-klein); font-size:var(--t-klein); font-weight:500; text-decoration:none; } .kopf-nav a[aria-current],.kopf-nav a:hover{ text-decoration:underline; text-underline-offset:4px; } .kopf-nav .quadrat{ margin-right:var(--a-2); } .kopf-umschalt{ display:flex; align-items:center; justify-content:center; gap:var(--a-2); min-height:var(--knopf-h-klein); padding-inline:var(--a-3); background:var(--papier); color:var(--tinte); border:1px solid var(--linie); border-radius:var(--rundung); font:inherit; font-size:var(--t-klein); font-weight:600; cursor:pointer; white-space:nowrap; } /* Ab 900 px stehen die fünf Bereiche offen in der Kopfzeile, kein Burger (N20). Zwischen 900 und 1180 px wird die Navigation über die Schnittbreite von Archivo schmaler gesetzt – so passt sie, ohne dass ein Bereich abgekürzt wird. Diese Regeln stehen bewusst NACH .kopf-umschalt, sonst gewinnt die Grundregel. */ @media (min-width:900px){ .kopf-nav{ display:block; } .kopf-umschalt{ display:none; } .schublade{ display:none; } } @media (min-width:900px) and (max-width:1179px){ .kopf-nav ul{ gap:var(--a-4); } .kopf-nav a{ font-stretch:84%; } .kopf-nav .quadrat{ margin-right:var(--a-1); } } .schublade{ border-top:1px solid var(--linie); } .schublade[hidden]{ display:none; } .schublade ul{ padding-block:var(--a-2); } .schublade a{ display:flex; align-items:center; gap:var(--a-3); min-height:var(--knopf-h-klein); text-decoration:none; font-weight:600; border-bottom:1px solid #E2E2E0; } .schublade li:last-child a{ border-bottom:0; } /* Bereichsquadrat – das Logo-Quadrat als Kennzeichen, der Ton als einzige Farbe */ .quadrat{ display:inline-block; width:12px; height:12px; flex:none; background:var(--ton,var(--tinte)); } /* Mehrere Quadrate nebeneinander bekommen Luft – sonst stossen bei fünf beteiligten Firmen fünf Farben zu einem Streifen zusammen. */ .quadratreihe{ display:inline-flex; align-items:center; gap:var(--a-1); vertical-align:middle; } /* Firmenlogo als Kennzeichen – es tritt an die Stelle, an der vorher nur das farbige Quadrat stand. Klein in der Firmenübersicht, gross im Kopf der Firmenseite. Der Firmenname steht daneben beziehungsweise darunter im Text, das Logo trägt ihn nicht allein. */ .firmen-mal{ width:56px; height:56px; flex:none; } .firmen-mal-gross{ width:96px; height:96px; } @media (min-width:600px){ .firmen-mal-gross{ width:112px; height:112px; } } /* Das Logo steht über dem Titel, nicht davor – sonst klebt es am Buchstaben und schiebt die Überschrift aus der linken Kante (N42). */ .titel-marke{ display:grid; gap:var(--a-4); justify-items:start; } /* ---------- Knöpfe ---------- */ .knopf{ display:inline-flex; align-items:center; justify-content:center; min-height:var(--knopf-h); padding-inline:var(--a-5); background:var(--tinte); color:var(--papier); border:1px solid var(--tinte); border-radius:var(--rundung); font:inherit; font-size:var(--t-text); font-weight:700; line-height:1.1; text-decoration:none; white-space:nowrap; cursor:pointer; } .knopf:hover{ background:var(--papier); color:var(--tinte); } .knopf-offen{ background:transparent; color:var(--tinte); } .knopf-offen:hover{ background:var(--tinte); color:var(--papier); } /* Auf schwarzem Grund dreht der Knopf um. Der Held-Kasten ist schwarz, steht aber nicht in einem .dunkel-Abschnitt – ohne diese Zeile wäre der Knopf im Held schwarz auf schwarz und nur am Text zu erkennen. */ .dunkel .knopf,.held-kasten .knopf{ background:var(--papier); color:var(--tinte); border-color:var(--papier); } .dunkel .knopf:hover,.held-kasten .knopf:hover{ background:transparent; color:var(--papier); } /* ---------- Die Blende: der eine bewegte Moment ---------- */ /* Grundzustand: offen. Die Klasse .js setzt ein Einzeiler im ; ohne JavaScript bleibt jedes Bild vollständig sichtbar statt dauerhaft beschnitten. */ .blende{ clip-path:inset(0 0 0 0); } @media (prefers-reduced-motion:no-preference){ .js .blende{ clip-path:inset(0 26% 0 26%); transition:clip-path var(--blende-zeit) var(--blende-kurve); } .js .blende.offen{ clip-path:inset(0 0 0 0); } /* Der Held hat weder eine eigene Blende noch eine Einblendung: Überschrift, Lead und Knopf stehen vom ersten Bild an da. Damit bleibt es bei genau einem bewegten Mechanismus (E6-46) und im Held steht nie eine leere Fläche oder weisse Schrift auf hellem Himmel. */ } /* ---------- Held ---------- */ .held{ position:relative; border-bottom:1px solid var(--linie); } /* Die Bühne hat je Haltepunkt ein festes Seitenverhältnis. Standbild und Video liegen deckungsgleich darin – deshalb springt beim Einhängen des Videos nichts. Auf dem Handy ist die Bühne quadratisch, nicht hochkant. Ab 1000 px steht 2:1 statt der früheren 21:9: Der Film ist 16:9, bei 21:9 blieben vom Kranausleger und vom Hausfuss zu wenig übrig. Dazu eine Höhengrenze in „svh“: Wächst die Bildhöhe nur mit der Breite, steht auf einem flachen Laptop der Satz, der die Firma erklärt, unter der Falz und der Knopf ausserhalb des Bildes. Die Grenze rechnet rückwärts aus der Fensterhöhe – Kopf und Textkasten abgezogen. Seit das Hinweisband über dem Held weg ist, beginnt das Bild direkt unter dem Kopf: Der ganze Held rückt gut 100 px höher. Ab 820 px ist die Grenze deshalb um die Höhe des Bandes angehoben, das Bild wird dort grösser. Darunter bleibt sie, wie sie war: Auf Handy und Tablet gibt nicht der untere Fensterrand das Mass vor, sondern die Masskette unter dem Bild – sie muss über dem WhatsApp-Knopf in der Ecke enden (an 20 Fenstergrössen nachgemessen). */ .held-buehne{ position:relative; width:100%; aspect-ratio:1/1; max-height:36svh; min-height:var(--a-10); overflow:hidden; background:#DAD9D6; } @media (min-width:600px){ .held-buehne{ aspect-ratio:16/10; max-height:calc(100svh - var(--a-10) - var(--a-10) - var(--a-10) - var(--a-9)); min-height:calc(var(--a-10) + var(--a-9)); } } @media (min-width:820px){ .held-buehne{ max-height:calc(100svh - var(--a-9) - var(--a-5)); min-height:calc(var(--a-10) + var(--a-10) + var(--a-10)); } } @media (min-width:1000px){ .held-buehne{ aspect-ratio:2/1; min-height:calc(var(--a-10) + var(--a-10) + var(--a-10) + var(--a-9)); } } .held-buehne picture{ display:contents; } .held-standbild,.held-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; } /* Bildausschnitt, an den Einzelbildern des Films nachgemessen. Unter 600 px läuft die Hochformat-Fassung (1080×1920) in einem flachen Rahmen: oben wird beschnitten, 35 % hält Kranausleger und Hausfuss gleichzeitig im Bild. 600–999 px: Querformat, beschnitten wird seitlich – 35 % lässt den Kranmast am linken Rand stehen, oben und unten fehlt nichts. Ab 1000 px: Querformat in 2:1 und flacher, beschnitten wird oben und unten – 20 % hält den Ausleger der ersten Hälfte im Bild und lässt am Ende den Hausfuss samt Strasse stehen. */ .held-standbild,.held-video{ object-position:50% 35%; } @media (min-width:600px){ .held-standbild,.held-video{ object-position:35% 50%; } } @media (min-width:1000px){ .held-standbild,.held-video{ object-position:50% 20%; } } /* Das Video liegt über dem Standbild und wird erst sichtbar, wenn es wirklich läuft. Spielt es nicht (verweigertes Autoplay, Fehler), bleibt das Standbild. */ .held-video{ opacity:0; } @media (prefers-reduced-motion:no-preference){ .held-video{ transition:opacity 500ms var(--blende-kurve); } } .held-video.laeuft{ opacity:1; } /* „Nochmals abspielen“ – nur vorhanden, wenn das Video eingehängt wurde, und nur sichtbar, solange der Film steht (js/seite.js). Steht unter dem Bild in der Fusszeile, nicht schwebend darüber (N25). */ .held-wieder{ min-height:var(--knopf-h-klein); font-size:var(--t-klein); padding-inline:var(--a-4); } /* Der Textkasten bricht aus der Bildkante aus. Unter 820 px schiebt ihn ein negativer Abstand von unten ins Bild. */ .held-text{ position:relative; margin-top:calc(var(--a-9) * -1); } .held-kasten{ background:var(--tinte); color:var(--papier); padding:var(--a-5); max-width:30rem; } @media (min-width:600px){ .held-text{ margin-top:calc(var(--a-10) * -1); } .held-kasten{ padding:var(--a-6); max-width:34rem; } } /* Ab 820 px liegt der Kasten IM Bild: Bühne und Text teilen sich dieselbe Rasterzeile, der Kasten sitzt unten darin und ragt nur noch um a-7 heraus. So steht rechts daneben Bild statt einer leeren weissen Fläche, und die ganze Bühne samt Kasten passt in den ersten Bildschirm. */ @media (min-width:820px){ .held{ display:grid; grid-template-rows:auto auto; } .held-buehne{ grid-row:1; grid-column:1; } /* width:100% ist nötig: Ein Rasterfeld mit „margin-inline:auto“ schrumpft sonst auf den Inhalt und rutscht in die Mitte – die linke Kante des Kastens flüchtete dann nicht mehr mit den Abschnitten darunter. */ .held-text{ grid-row:1; grid-column:1; align-self:end; width:100%; margin-top:0; margin-bottom:calc(var(--a-7) * -1); } /* Der Textkasten ragt hier a-7 aus dem Bild. Die Masskette beginnt deshalb erst a-9 unter der Bildkante – sonst klebte sie an seiner Unterkante. */ .held-unten{ grid-row:2; grid-column:1; width:100%; padding-top:var(--a-9); } } @media (min-width:1000px){ .held-kasten{ padding:var(--a-7); max-width:46rem; } } .held-kasten h1{ color:var(--papier); } .held-kasten h1 span{ display:block; } .held-kasten p{ color:#E6E6E6; margin-top:var(--a-4); max-width:40ch; } .held-kasten .knopf{ margin-top:var(--a-5); } /* Flache Fenster – kleine Handys hochkant, ältere Laptops. Der Kasten wird kompakt, damit Satz und Knopf im ersten Bildschirm stehen. Muss nach den Breiten-Abfragen oben stehen, sonst greift es nicht. */ @media (max-height:700px) and (max-width:819px){ /* Vom Film bleibt hier nur ein schmales Band. Der Ausschnitt rutscht deshalb nach unten, sonst stünde darin fast nur Himmel. */ .held-buehne{ max-height:27svh; } .held-standbild,.held-video{ object-position:50% 58%; } } /* Schmalstes Handy (320 x 568): Dort endete die Masskette genau auf Höhe des WhatsApp-Knopfs in der Ecke. Die 17 px gibt das Bild her, die Kette bleibt frei. Das gedrehte Kleinhandy darunter hat eigene Werte und bleibt aussen vor. */ @media (max-width:359px) and (min-height:501px) and (max-height:700px){ .held-buehne{ max-height:24svh; } } @media (max-height:500px) and (max-width:819px){ /* Gedrehtes Handy: Vom Bild bleibt ein Streifen, der Text zählt. Der Kasten rückt genauso weit hoch wie der Streifen hoch ist – weiter nicht, sonst deckte er den Kopf darüber zu. */ .held-buehne{ min-height:var(--a-9); } .held-text{ margin-top:calc(var(--a-9) * -1); } } @media (max-height:700px) and (min-width:820px){ /* Gedrehtes Handy und flaches Tablet: Hier ist die Fensterhöhe die knappe Grösse, nicht die Breite – die Mindesthöhe der Bühne muss weichen. */ .held-buehne{ min-height:calc(var(--a-10) + var(--a-8)); } } @media (max-height:700px){ .held-kasten{ padding:var(--a-4); } .held-kasten h1{ font-size:var(--t-h2); } .held-kasten p{ margin-top:var(--a-3); } .held-kasten .knopf{ margin-top:var(--a-4); } } /* Der Film soll sichtbar bleiben (Gregor, 17.10.2026): Der Textkasten ist kein massiver Block mehr, sondern nur ein Hauch Schwarz: 10 % Deckkraft (Wunsch: „nur minimal“). Lesbar bleibt der weisse Text über einen weichen Schatten. Auf dem Handy hochkant wird die Bühne hoch und der Kasten liegt unten IM Film – darüber steht der Film frei. Steht nach den Höhen-Abfragen oben, damit es greift; gedrehte Handys (max-height:500px) behalten ihre Werte. */ @media (min-width:820px){ .held-kasten{ background:rgb(0 0 0 / .1); } /* Halbdurchsichtig darf der Kasten nicht mehr aus dem Bild ragen – über dem weissen Grund sähe der Rest grau aus. Er sitzt deshalb ganz im Film. */ .held-text{ margin-bottom:var(--a-7); } .held-unten{ padding-top:var(--a-6); } } @media (max-width:819px) and (min-height:501px){ .held{ display:grid; grid-template-rows:auto auto; } .held-buehne{ grid-row:1; grid-column:1; aspect-ratio:auto; height:72svh; max-height:none; min-height:22rem; } .held-standbild,.held-video{ object-position:50% 40%; } .held-text{ grid-row:1; grid-column:1; align-self:end; width:100%; margin-top:0; margin-bottom:var(--a-5); } .held-kasten{ background:rgb(0 0 0 / .1); } .held-unten{ grid-row:2; grid-column:1; width:100%; } } @media (min-width:0){ .held-kasten h1,.held-kasten p{ text-shadow:0 1px 3px rgb(0 0 0 / .55), 0 2px 18px rgb(0 0 0 / .5); } } /* ---------- Masskette unter dem Film ---------- Fünf Stationen, dazu ein Balken, der mit dem Film mitläuft. Die Form ist dieselbe wie bei den Datenzeilen der Seite: eine Haarlinie, kurze Teilstriche, Schrift in der schmalen Schnittbreite von Archivo – keine Fläche, keine Farbe. Warum fünf gleich breite Spalten und nicht die echten Zeitanteile? Der Film staucht vier Jahre in 15,4 Sekunden, und zwar ungleich: Die Baugrube dauert eine Sekunde, der Rohbau neun. Echte Zeitanteile ergäben für „Planung“ eine Spalte von drei Prozent – darin steht kein Wort. Die Spalten sind deshalb gleich breit, und der Balken füllt innerhalb jeder Spalte linear von ihrem Anfangs- zu ihrem Endzeitpunkt (js/seite.js). Damit stimmt immer beides: die hervorgehobene Station passt zum Bild, und der Balken läuft ohne Sprung von links nach rechts durch. Zeitpunkte, an den Einzelbildern des Films nachgemessen: 0,0 s Planung (Anfang) · 0,5 s Baugrube (Bagger, offene Grube) · 1,5 s Rohbau (Bodenplatte, dann vier Geschosse in Beton und Holz) · 11,0 s Vermarktung (Gerüst abgebaut, Fassade und Umgebung fertig) · 13,6 s Bezug (Abend, Fenster beleuchtet) bis 15,4 s Schluss. */ .held-mass{ --lauf:1; /* Grundzustand: voll. Ohne Film steht das fertige Haus. */ position:relative; padding-top:var(--a-5); } .held-lauf{ position:absolute; left:0; top:var(--a-5); width:calc(var(--lauf) * 100%); height:var(--balken); background:var(--tinte); pointer-events:none; } @media (prefers-reduced-motion:no-preference){ .held-lauf{ transition:width 180ms linear; } } .held-phasen{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin-top:var(--balken); border-top:1px solid var(--linie-leise); } /* Schmalster Fall zuerst: Bei 320 px ist eine Spalte 57,6 px breit, und „Vermarktung“ ist das längste Wort der Kette. Archivo kann die Schnittbreite bis 62 % – damit misst es 46 px und steht auf einer Zeile, ohne dass die Schrift unter 11 px fällt. Ab 400 px ist die Spalte breit genug für 70 %, ab 600 px für die gewohnten 88 % der Datenzeilen. */ .held-phasen li{ position:relative; min-width:0; padding:var(--a-3) var(--a-1) 0 0; font-size:11px; font-stretch:62%; font-weight:600; line-height:1.2; letter-spacing:.01em; color:var(--neben); hyphens:none; } /* Teilstrich am Anfang jeder Station, dazu einer am rechten Schluss – die Kette ist damit an beiden Enden geschlossen wie eine Masskette. */ .held-phasen li::before, .held-phasen li:last-child::after{ content:""; position:absolute; top:-1px; left:0; width:1px; height:8px; background:var(--linie-leise); } .held-phasen li:last-child::after{ left:auto; right:0; } /* Die Station, die gerade im Bild ist. Unterschieden wird über den Ton, nicht über das Gewicht: Ein Wechsel der Strichstärke würde „Vermarktung“ in der schmalsten Spalte umbrechen und die Zeile in der Höhe springen lassen. */ .held-phasen li.jetzt{ color:var(--tinte); } .held-phasen li.jetzt::before{ background:var(--tinte); width:2px; } @media (min-width:400px){ .held-phasen li{ padding-right:var(--a-2); font-stretch:70%; } } @media (min-width:600px){ .held-phasen li{ padding-right:var(--a-3); font-size:var(--t-mikro); font-stretch:88%; } } @media (min-width:1000px){ .held-mass{ padding-top:var(--a-6); } .held-lauf{ top:var(--a-6); } .held-phasen li{ padding-top:var(--a-4); padding-right:var(--a-5); } } .held-fuss{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--a-2) var(--a-5); max-width:none; /* sonst greift die Zeilenlänge von p und der Knopf bricht um */ padding-block:var(--a-4); font-size:var(--t-klein); color:var(--neben); } /* Unter der Masskette steht nur der Knopf zum Film, und auch der erst, wenn der Film steht. Die Höhe ist hier schon reserviert, damit beim Erscheinen nichts nachrutscht. Läuft gar kein Film – kein JavaScript, „weniger Bewegung“ –, bleibt die Zeile leer und fällt ganz weg. */ .held-unten .held-fuss{ min-height:calc(var(--knopf-h-klein) + var(--a-4) + var(--a-4)); } .held-unten .held-fuss:empty{ display:none; } .held-fuss a:not(.knopf){ text-decoration:underline; text-underline-offset:4px; } /* ---------- Bildband über volle Breite ---------- */ .bildband{ margin:0; position:relative; } .bildband-bild{ width:100%; aspect-ratio:4/3; overflow:hidden; background:#DAD9D6; } @media (min-width:600px){ .bildband-bild{ aspect-ratio:16/9; } } @media (min-width:1000px){ .bildband-bild{ aspect-ratio:21/9; } } .bildband-bild img{ width:100%; height:100%; object-fit:cover; object-position:var(--bildpos,50% 50%); } .bildband figcaption{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--a-2) var(--a-3); padding-block:var(--a-3); font-size:var(--t-klein); color:var(--neben); } .bildband figcaption .bu{ max-width:62ch; } .bildband figcaption b{ color:var(--tinte); font-weight:700; } /* ---------- Abschnittskopf ---------- */ .kopfzeile{ display:grid; gap:var(--a-4); margin-bottom:var(--a-6); } /* Gitterkinder dürfen nicht von einem langen Wort aufgezogen werden (N41) */ .kopfzeile > *{ min-width:0; } /* Steht der Kopf allein im Abschnitt, braucht es darunter keinen zweiten Abstand */ .kopfzeile:last-child{ margin-bottom:0; } .kopfzeile p{ font-size:var(--t-lead); font-weight:300; max-width:46ch; } .kopfzeile p.fett,.zweispalt > div > p.fett{ font-weight:800; } @media (min-width:1000px){ .kopfzeile{ grid-template-columns:minmax(0,1fr) minmax(0,27rem); gap:var(--a-8); align-items:start; margin-bottom:var(--a-8); } /* Langer Fliesstext: schmale Titelspalte, breite Textspalte – sonst steht links eine halbe Bildschirmhöhe leer. */ .kopfzeile.lang{ grid-template-columns:minmax(0,16rem) minmax(0,1fr); } .kopfzeile.lang p{ max-width:62ch; } } /* Zwei Spalten für Abschnitte, deren rechte Hälfte sonst leer bliebe */ .zweispalt{ display:grid; gap:var(--a-6); } @media (min-width:1000px){ .zweispalt{ grid-template-columns:minmax(0,1fr) minmax(0,34rem); gap:var(--a-9); align-items:start; } /* Das Formular ist deutlich höher als der Text daneben. Damit die linke Spalte beim Ausfüllen nicht leer dasteht, läuft sie mit. 5rem hält den Abstand zur klebenden Kopfzeile. */ .zweispalt > div:first-child{ position:sticky; top:5rem; } } .zweispalt > *{ min-width:0; } .zweispalt > div{ display:grid; gap:var(--a-5); align-content:start; } .zweispalt > div > p{ font-size:var(--t-lead); font-weight:300; max-width:46ch; } .zweispalt .formular{ max-width:none; } /* ---------- Die Spur: ein Haus durch fünf Bereiche ---------- */ .spur{ display:grid; gap:var(--a-7); } @media (min-width:1000px){ .spur{ gap:var(--a-9); } } .station{ display:grid; gap:var(--a-4); align-items:start; } @media (min-width:820px){ .station{ grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:var(--a-6); align-items:center; } .station:nth-child(even) .station-bild{ order:2; } } @media (min-width:1000px){ .station{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--a-8); } } .station-bild{ margin:0; min-width:0; } .station-bild > div{ aspect-ratio:3/2; overflow:hidden; background:#DAD9D6; border-top:var(--balken) solid var(--ton); } .station-bild img{ width:100%; height:100%; object-fit:cover; } .station-text{ min-width:0; display:flex; flex-direction:column; gap:var(--a-3); } .station-marke{ display:flex; align-items:center; gap:var(--a-3); font-size:var(--t-klein); font-weight:700; } .station-marke .jahr{ font-weight:300; color:var(--neben); } .station-text p{ font-size:var(--t-text); } /* ---------- Die fünf Bereiche als Liste ---------- */ .bereiche{ border-top:1px solid var(--linie); } .bereich-zeile{ border-bottom:1px solid var(--linie); } .bereich-zeile > a{ display:grid; gap:var(--a-3); align-items:center; padding-block:var(--a-5); text-decoration:none; min-width:0; } /* Die erste Spalte trägt seit den echten Logos das Firmenlogo neben dem Namen und ist darum breiter als früher – sonst bricht „Fitz AG Architektur & Planung“ auf drei Zeilen. */ @media (min-width:820px){ .bereich-zeile > a{ grid-template-columns:minmax(0,18rem) minmax(0,1fr) auto; gap:var(--a-5); padding-block:var(--a-5); } } @media (min-width:1080px){ .bereich-zeile > a{ grid-template-columns:minmax(0,21rem) minmax(0,1fr) auto 176px; gap:var(--a-6); } } .bereich-name{ display:flex; align-items:center; gap:var(--a-4); min-width:0; font-size:var(--t-h3); font-weight:800; letter-spacing:-.01em; hyphens:none; text-wrap:balance; } .bereich-satz{ min-width:0; font-weight:300; font-size:var(--t-text); max-width:52ch; } .bereich-zahl{ font-size:var(--t-klein); color:var(--neben); white-space:nowrap; } .bereich-bild{ display:none; } @media (min-width:1080px){ .bereich-bild{ display:block; aspect-ratio:16/9; overflow:hidden; background:#DAD9D6; } .bereich-bild img{ width:100%; height:100%; object-fit:cover; } } .bereich-zeile > a:hover .bereich-name{ text-decoration:underline; text-underline-offset:5px; } /* ---------- Dunkles Band ---------- */ .band{ display:grid; gap:var(--a-6); } @media (min-width:1000px){ .band{ grid-template-columns:minmax(0,1fr) minmax(0,26rem); gap:var(--a-9); align-items:start; } } .band h2 span{ display:block; } .band-adresse{ display:grid; gap:var(--a-3); font-size:var(--t-text); } .band-adresse a{ text-decoration:underline; text-underline-offset:4px; } .band-dienste{ display:grid; gap:var(--a-3); margin-top:var(--a-6); } @media (min-width:600px){ .band-dienste{ grid-template-columns:repeat(2,minmax(0,1fr)); } } .band-dienste .knopf{ width:100%; } /* ---------- Projekte ---------- */ .projektgitter{ display:grid; gap:var(--a-6); } @media (min-width:820px){ .projektgitter{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--a-7); } /* Die Leitkarte und eine Karte, die sonst allein in einer Reihe stünde, nehmen die ganze Breite. js/projekte.js vergibt die Klasse. */ .projektgitter > .projekt.weit{ grid-column:1 / -1; } } .projektgitter.gross{ grid-template-columns:minmax(0,1fr); } .projekt{ display:flex; flex-direction:column; min-width:0; } .projekt > a{ display:flex; flex-direction:column; gap:var(--a-4); height:100%; text-decoration:none; min-width:0; } .projekt-bild{ aspect-ratio:3/2; overflow:hidden; background:#DAD9D6; border-top:var(--balken) solid var(--ton,var(--tinte)); } .projekt.weit .projekt-bild{ aspect-ratio:16/9; } @media (min-width:1000px){ .projekt.weit .projekt-bild{ aspect-ratio:16/9; } } .projekt-bild img{ width:100%; height:100%; object-fit:cover; } .projekt-kopf{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--a-2) var(--a-4); } .projekt h3{ min-width:0; } .projekt > a:hover h3{ text-decoration:underline; text-underline-offset:5px; } .projekt dl{ display:flex; flex-wrap:wrap; gap:var(--a-2) var(--a-5); margin:0; font-size:var(--t-klein); } .projekt dt{ color:var(--neben); } .projekt dd{ margin:0; font-weight:600; } .projekt-feld{ display:flex; gap:var(--a-2); min-width:0; } .projekt p{ font-size:var(--t-text); font-weight:300; } /* Abzeichen: Status und Beispiel – eine Höhe, eine Form */ .abzeichen{ display:inline-flex; align-items:center; gap:var(--a-2); min-height:24px; padding-inline:var(--a-2); border:1px solid var(--linie); border-radius:var(--rundung); font-size:var(--t-mikro); font-weight:700; line-height:1; white-space:nowrap; } .abzeichen-voll{ background:var(--tinte); color:var(--papier); border-color:var(--tinte); } .dunkel .abzeichen{ border-color:var(--linie-hell); } /* ---------- Register / Filter ---------- */ .filterzeile{ display:grid; gap:var(--a-4); padding-block:var(--a-5); border-block:1px solid var(--linie); } /* Etikett und Knopfreihe stehen in zwei Spalten. Die Knöpfe liegen in einem eigenen Kasten: So beginnt eine umbrechende zweite Knopfzeile wieder unter den Knöpfen und nicht unter dem Etikett (E2-15). */ .filtergruppe{ display:grid; gap:var(--a-2); min-width:0; } .filtergruppe > h2,.filtergruppe > p:first-child,.filterkopf{ font-size:var(--t-klein); font-weight:700; margin:0; } .filterknoepfe{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--a-2); min-width:0; } /* Auf schmalen Geräten bleibt rechts die Breite des WhatsApp-Knopfs frei. Sonst steht er auf einem Filterknopf, sobald die Zeile gerade am unteren Bildschirmrand liegt – nachgemessen bei 320 px. */ @media (max-width:599px){ .filterknoepfe{ padding-right:calc(56px + var(--a-2)); } } @media (min-width:600px){ .filtergruppe{ grid-template-columns:5.5rem minmax(0,1fr); column-gap:var(--a-2); align-items:start; } .filtergruppe > h2,.filtergruppe > p:first-child,.filterkopf{ display:flex; align-items:center; min-height:var(--knopf-h-klein); } } .filterknopf{ display:inline-flex; align-items:center; gap:var(--a-2); min-height:var(--knopf-h-klein); padding-inline:var(--a-3); background:var(--papier); color:var(--tinte); border:1px solid var(--linie); border-radius:var(--rundung); font:inherit; font-size:var(--t-klein); font-weight:600; line-height:1.1; cursor:pointer; white-space:nowrap; } .filterknopf[aria-pressed="true"]{ background:var(--tinte); color:var(--papier); } .filterknopf[aria-pressed="true"] .quadrat{ outline:1px solid var(--papier); } .trefferzeile{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--a-3); padding-block:var(--a-5); } .trefferzeile p{ font-size:var(--t-klein); font-weight:700; } .leerzustand{ padding-block:var(--a-8); display:grid; gap:var(--a-4); justify-items:start; } /* ---------- Projektseite ---------- */ .tatsachen{ display:grid; gap:0; border-top:1px solid var(--linie); margin:0; } .tatsachen > div{ display:grid; gap:var(--a-1); padding-block:var(--a-3); border-bottom:1px solid var(--linie); } @media (min-width:600px){ .tatsachen > div{ grid-template-columns:minmax(7rem,10rem) minmax(0,1fr); gap:var(--a-4); align-items:baseline; } } .tatsachen dt{ font-size:var(--t-klein); color:var(--neben); } .tatsachen dd{ margin:0; font-weight:600; min-width:0; } /* „liegt noch nicht vor“ ist keine Angabe, sondern eine offene Stelle – sie darf nicht so laut stehen wie die Adresse daneben. */ .tatsachen dd.leicht{ font-weight:400; color:var(--neben); } .bildstrecke{ display:grid; gap:var(--a-5); } @media (min-width:820px){ .bildstrecke{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--a-6); } .bildstrecke figure:first-child{ grid-column:1 / -1; } .bildstrecke figure:first-child > div{ aspect-ratio:21/9; } .bildstrecke figure:only-child > div{ aspect-ratio:3/2; } /* Bliebe das letzte Bild allein in der linken Spalte, nimmt es die ganze Breite – statt einer leeren Hälfte daneben. */ .bildstrecke figure:last-child:nth-child(even){ grid-column:1 / -1; } .bildstrecke figure:last-child:nth-child(even) > div{ aspect-ratio:21/9; } } .bildstrecke figure{ margin:0; } .bildstrecke figure > div{ aspect-ratio:3/2; overflow:hidden; background:#DAD9D6; } .bildstrecke img{ width:100%; height:100%; object-fit:cover; } .bildstrecke figcaption{ padding-top:var(--a-3); font-size:var(--t-klein); color:var(--neben); } .flieztext{ display:grid; gap:var(--a-4); } .flieztext p{ max-width:62ch; } /* ---------- Ohne JavaScript ---------- */ /* Die Projektlisten werden erst im Browser gesetzt. Ohne JavaScript bleiben sonst ein Ladehinweis und eine Filterzeile stehen, die nichts tun. Statt dessen erscheint das