/* ========================================================================= mietwohnung-finden.at, Designsystem F & M HandelsGesmbH, gebaut von bildstelle ------------------------------------------------------------------------- DIESE DATEI IST DIE EINZIGE QUELLE DER WAHRHEIT. Keine Seite setzt Farben, Schriftgrössen, Abstände oder Rundungen frei. Jede Seite bindet diese Datei ein und benutzt die Token darunter. Wenn eine Seite etwas braucht, das es hier nicht gibt, kommt es HIER dazu, nicht dort. Ein Wert, der an zwei Stellen steht, ist ab dem nächsten Änderungswunsch falsch. Aufbau: 1 Farbe 2 Schrift 3 Abstand 4 Form und Rahmen 5 Grundgerüst und Grundregeln 6 Kopfzeile 7 Bausteine (Knopf, Chip, Karte, Schritt, FAQ, Kasten) 8 Abschnitte 9 Fusszeile 10 Barrierefreiheit 11 Verhalten auf kleinen Schirmen Die eingebauten Regeln, alle aus der Arbeit an diesem Projekt entstanden: - Schriftgrössen IMMER in rem, nie in px oder vw. Sonst wirkt weder der Schriftgrössen-Schalter noch die Browser-Einstellung. - KEINE Zeilenlänge in ch. Die Zeilenlänge kommt aus der Spaltenbreite im Raster. Ist eine Zeile zu lang, wird die Spalte schmaler, nicht der Text begrenzt. - text-wrap:pretty ja, balance nein. balance kürzt Zeilen absichtlich. - Abstände springen deutlich (Faktor rund 1,6), nicht beinahe gleich. Beinahe-gleiche Abstände erzeugen gar keine Gruppen. - Text ist linksbündig, zweispaltige Blöcke beginnen oben. Zentriert und rechtsbündig nur, wo es ausdrücklich gewollt ist. - Barrierefreiheit wird eingebaut, nicht als Widget davorgeschaltet. ========================================================================= */ /* ---------- 1 FARBE ---------------------------------------------------- Es gibt genau vier Grundfarben, und alle vier stammen pixelgenau aus dem Logo. Alles andere ist eine Mischung daraus. Keine erfundenen Zwischentöne. #005091 Logo-Blau dunkel Fläche des F- und des M-Quadrats #97bfdc Logo-Blau hell Fläche des und-Quadrats #1a171b Logo-Schwarz das und-Zeichen, nicht ganz schwarz #ffffff Weiss F und M ------------------------------------------------------------------------ */ :root{ --blau:#005091; --hell:#97bfdc; --schwarz:#1a171b; --weiss:#ffffff; /* Ableitungen, ausschliesslich Mischungen der vier oben */ --tief:#083f6e; /* 70 % blau + 30 % schwarz, für Überschriften */ --papier:#f7fafd; /* 4 % hell + 96 % weiss, der Seitengrund */ --flaeche:#dbe8f3; /* 33 % hell + 67 % weiss, ruhige Abschnitte */ --linie:#d9e6f0; /* 26 % hell + 74 % weiss, Haarlinien */ --grau:#6b7683; /* Lesegrau für Fliesstext zweiter Ordnung */ /* Warme Akzentfarbe, ABGELEITET UND NICHT ERFUNDEN. Gemessen am 2026-08-07 aus den echten Objektfotos: das Ziegeldach der Lagerhalle liegt bei Farbwinkel 8 bis 12, die Gebäudefotos bei 36 bis 40 (Sand, Ocker). Sand liegt zu nah am Seitengrund, deshalb der Ziegelton. Aufgehellt und gesättigt auf Lesbarkeit: Kontrast 5,43:1 gegen Weiss, also AA erfüllt, und 3,44:1 gegen das Logo-Blau, also unterscheidbar. Wird nur wirksam, wenn am body die Klasse `warm` steht. Ohne sie bleibt die Palette bei den vier Logo-Farben. */ --warm:#a9462d; --warm-zart:#f6ece8; /* 12 % warm auf Weiss, für Flächen */ } /* Grundschriftgrösse. Sie ist die Basis, auf die sich die ganze rem-Skala bezieht, und sie steht an genau EINER Stelle. 99 Prozent bis 1920 Pixel Fensterbreite, Vorgabe Roman am 2026-08-07: auf seinem 1920er Schirm war die Schrift "eine Spur zu gross", gewünscht waren 10 Prozent weniger. 110 mal 0,9 ergibt 99. Oberhalb von 1920 bleibt es beim bisherigen Verhalten, dort wächst die Schrift mit der Fensterbreite (Regel weiter unten). Angenehmer Nebeneffekt: der Sprung an der Grenze verschwindet. Bei 1920 sind es jetzt 15,84 Pixel, ab 1921 beginnt die wachsende Regel bei 16,0. Vorher fiel die Schrift dort von 17,6 auf 16,0 zurück, das war ein Fehler, den nur niemand gesucht hat. DIE ZWEI FAKTOREN, warum das hier so gebaut ist: --fs-basis die Grundgrösse, einmal für schmal, einmal für sehr breit --fs-stufe der Schriftgrössen-Schalter, plus 12 und plus 24 Prozent Vorher standen die Stufen als feste Prozentzahlen (123 und 136) in fm.js und waren damit auf die 110 festgenagelt. Jede Änderung der Grundgrösse hätte den Schalter still verfälscht. Als Faktor kann das nicht passieren: die Stufen sind immer relativ zur Basis, egal wie die aussieht. */ :root{ --fs-basis:99%; --fs-stufe:1; } html[data-schrift="1"]{--fs-stufe:1.12;} html[data-schrift="2"]{--fs-stufe:1.24;} html{ font-size:calc(var(--fs-basis) * var(--fs-stufe)); --grau-hell:#9cb6c9; /* auf dunklem Grund */ /* ---------- 2 SCHRIFT ------------------------------------------------ Zwei Familien, mehr nicht: Fraunces Serif, für Überschriften und Zahlen. Trägt den editorialen Charakter dieser Richtung. Hanken Grotesk Sans, für alles Lesbare. Neun Stufen, nichts dazwischen. ALLE in rem. Zweite Zahl in Klammern ist der Wert bei 1920 Pixel Breite. Lesetext (100 bis 500) braucht keine Viewport-Anpassung. Display (600 bis 900) schrumpft auf kleinen Schirmen, beide Grenzen der clamp-Funktion stehen in rem, damit eine Vergrösserung an beiden Enden voll wirkt. */ --schrift-text:'Hanken Grotesk',system-ui,-apple-system,sans-serif; --schrift-display:'Fraunces',Georgia,'Times New Roman',serif; /* Die zwei kleinsten Stufen sind am 2026-08-07 je eine Sprosse hinauf gewandert, weil die Grundgrösse von 110 auf 99 Prozent gesenkt wurde. Der Eyebrow lag danach bei 11,88 Pixel, und das ist zu klein: er ist Versalschrift mit 0,2em Sperrung, und Versalien brauchen für dieselbe Lesbarkeit MEHR Grösse als Gemeine, nicht weniger. Dass die kleinste Stufe der Skala für Versalien gedacht ist, war von Anfang an die schwächste Stelle des Systems. Das Verhältnis der beiden Stufen bleibt gleich, sie wandern gemeinsam, damit keine zwei Token denselben Wert bekommen. */ --fs-100:.8125rem; /* 12,9 px Versal-Labels, Eyebrow */ --fs-200:.875rem; /* 13,9 px Kleintext, Fussnoten */ --fs-300:.9375rem; /* 15,0 px Navigation, Chips, Bildunterschrift */ --fs-400:1.0625rem; /* 17,0 px FLIESSTEXT, die Basis */ --fs-500:1.1875rem; /* 19,0 px betonter Fliesstext */ --fs-600:clamp(1.125rem,1rem + .55vw,1.5rem); /* 24,0 px H4, FAQ-Frage */ --fs-700:clamp(1.375rem,.9rem + 1.1vw,2rem); /* 32,0 px H3 */ --fs-800:clamp(1.625rem,.9rem + 2vw,2.8125rem); /* 45,0 px H2 */ --fs-900:clamp(2rem,1rem + 3vw,4rem); /* 64,0 px H1 */ /* Drei Zeilenhöhen, mehr braucht niemand */ --zh-eng:1.08; /* Display */ --zh-normal:1.35; /* Zwischenüberschriften, kurze Absätze */ --zh-weit:1.62; /* Fliesstext */ /* Vier Schriftstärken, mehr braucht niemand */ --sw-normal:400; --sw-betont:500; --sw-halbfett:600; --sw-fett:700; /* ---------- 3 ABSTAND ------------------------------------------------ Die Sprünge sind bewusst gross, Faktor rund 1,6. Der häufigste Fehler ist nicht zu wenig Abstand, sondern Beinahe-Gleichheit: liegen fünf Abstände zwischen 29 und 48 Pixel, entstehen gar keine Gruppen und alles wirkt als graue Masse. Regel: innerhalb einer Gruppe die kleinste Stufe, zwischen Gruppen mindestens die doppelte, zwischen Abschnitten noch mehr. */ --luft-eng:clamp(4px,.35vw,7px); /* Zahl zu Einheit, Zeile zu Zeile */ --luft-s:clamp(7px,.6vw,11px); /* innerhalb einer Gruppe */ --luft-m:clamp(12px,1vw,18px); /* Gruppe zu Gruppe */ --luft-l:clamp(19px,1.6vw,29px); /* Block zu Block */ --luft-xl:clamp(30px,2.6vw,47px); /* Abschnitts-Innenteile */ --luft-2xl:clamp(48px,4.2vw,76px); /* Abschnitt zu Abschnitt */ --luft-3xl:clamp(76px,6.8vw,122px); /* die grossen Zäsuren */ /* ---------- 4 FORM UND RAHMEN --------------------------------------- */ --radius-s:6px; /* seit 2026-10-13 alle Rundungen ausser Knoepfen 20 % kleiner (Roman), vorher 8 */ --radius-m:11px; /* vorher 14 */ --radius-l:18px; /* vorher 22 */ --radius-rund:100px; /* Die eine grosse Rundung, die diese Richtung ausmacht. Sie sitzt beim Hero-Bild unten rechts und beim Suche-Bild unten links, dadurch klammern die beiden die Seite. */ --radius-gross:72px; /* vorher 90 */ --schatten-bild:0 30px 60px -30px rgba(8,63,110,.4); --schatten-karte:0 16px 40px -18px rgba(8,63,110,.35); --schatten-knopf:0 10px 24px rgba(0,80,145,.24); /* ---------- 5 GRUNDGERÜST ------------------------------------------- Layoutbreite nach der Workspace-Regel `rules/bildstelle-design.md`: 1440 px als Standard bis 1920 px Viewport, darüber 1920 px. Die erste Fassung stand auf 1200 px, das liess auf einem grossen Schirm links und rechts je 360 Pixel leer und sah nach Vorlage aus. ZEILENLÄNGE, die zwei Regeln zusammengeführt: `rules/bildstelle-design.md` verlangt eine Begrenzung auf 45 bis 75 Zeichen, das Projekt-Gedächtnis verbietet `max-width` in `ch`. Beides gilt, es widerspricht sich nicht: begrenzt wird in rem, weil eine rem-Grenze mitwächst und nie mitten in einer schmalen Spalte greift. 34rem sind bei 17 px Grundschrift rund 578 Pixel, also etwa 65 Zeichen. Eine ch-Grenze bräche in einer 400 Pixel breiten Spalte schon bei 60 Prozent der Breite um, genau das sah wie ein Fehler aus. */ --breite:1440px; --lesebreite:34rem; /* rund 65 Zeichen, für Fliesstext in breiten Blöcken */ --rand:clamp(20px,4vw,44px); --kopf-hoch:118px; /* Kopfzeile oben auf der Seite */ --kopf-klein:76px; /* Kopfzeile nach dem Scrollen */ } /* Über 1920 Pixel: breiteres Raster, und die Schrift wächst mit dem Fenster. Sie setzt bei 16,0 Pixel an und legt 3,5 Pixel je 1000 Pixel Fensterbreite zu. Bewusst weiter über --fs-basis, damit der Schriftgrössen-Schalter auch hier greift. Das `1rem` ist hier NICHT zirkulär: am Wurzelelement bezieht sich rem auf die Ausgangsgrösse des Browsers, nicht auf den eigenen Wert. Damit bleibt eine im Browser eingestellte grössere Schrift wirksam. */ @media(min-width:1921px){ :root{ --breite:1920px; --fs-basis:calc(1rem + (100vw - 1920px) * 0.0035); } } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{font-family:var(--schrift-text);font-size:var(--fs-400); line-height:var(--zh-weit);color:var(--schwarz);background:var(--papier); -webkit-font-smoothing:antialiased;} a{color:inherit;text-decoration:none;} img{max-width:100%;} /* Die Umbruch-Regel, projektweit. pretty verhindert das einsame Wort in der letzten Zeile. balance ist bewusst NICHT gesetzt, es kürzt Zeilen absichtlich und erzeugt genau den Umbruch mitten im Kasten, der wie ein Fehler aussieht. Ebenso gibt es nirgends ein max-width in ch. */ p,li,h1,h2,h3,h4,h5,summary,figcaption{text-wrap:pretty;} /* Adressen und Rufnummern dürfen nie mittendrin brechen */ a[href^="mailto:"],a[href^="tel:"]{overflow-wrap:normal;word-break:keep-all;} .wrap{width:min(var(--breite),100% - var(--rand)*2);margin-inline:auto;} .wrap-weit{width:calc(100% - var(--rand)*2);margin-inline:auto;} /* Fliesstext bekommt eine Lesebreite, Überschriften dürfen breiter laufen. Gilt NICHT innerhalb schmaler Raster-Spalten, dort regelt die Spalte. */ .lesetext{max-width:var(--lesebreite);} /* Breitere Lesebreite fuer den Vorspann eines Abschnitts. 34rem zwingen ihn auf drei Zeilen, obwohl der Kopfblock 49rem breit ist. Roman am 2026-08-07: "der darf maximal zweizeilig sein, geht nochmal um 30 Prozent laenger". 34 mal 1,3 = 44,2rem. Damit bleibt die Zeile mit rund 78 Zeichen noch im Rahmen, den die Workspace-Regel fuer Vorspaenne zulaesst. */ .lesetext.breit{max-width:calc(var(--lesebreite) * 1.3);} /* Hervorgehobener Vorspann: eine Spur groesser und blau, damit er sich vom Fliesstext darunter abhebt. Roman am 2026-08-07 fuer die Ueber-uns-Seite: "koennte noch ein, zwei Punkte groesser sein und blau". Faktor 1,12 auf fs-500 sind rund 2 Punkte, ein groesserer Sprung auf fs-600 waere mit 25,5 px schon fast eine Ueberschrift. */ .lede.hervor{font-size:calc(var(--fs-500) * 1.12);color:var(--blau);} /* Überschriften. Die Grössen kommen aus der Skala, nirgends sonst. */ .h1,h1{font-family:var(--schrift-display);font-size:var(--fs-900); font-weight:var(--sw-betont);line-height:var(--zh-eng); letter-spacing:-.015em;color:var(--tief);} .h2,h2{font-family:var(--schrift-display);font-size:var(--fs-800); font-weight:var(--sw-betont);line-height:1.1; letter-spacing:-.01em;color:var(--tief);} .h3,h3{font-family:var(--schrift-display);font-size:var(--fs-700); font-weight:var(--sw-halbfett);line-height:1.15; letter-spacing:-.01em;color:var(--tief);} .h4,h4{font-family:var(--schrift-text);font-size:var(--fs-500); font-weight:var(--sw-fett);line-height:var(--zh-normal);color:var(--schwarz);} h1 em,h2 em,h3 em,.kursiv{font-style:italic;color:var(--blau);font-weight:inherit;} /* Die Eyebrow, also die kleine Versalzeile über einer Überschrift */ /* Versalien nach Workspace-Regel: Sperrung 0,14 bis 0,22em, Stärke 500. */ .eyebrow{display:block;font-family:var(--schrift-text);font-size:var(--fs-100); letter-spacing:.2em;text-transform:uppercase; font-weight:var(--sw-betont);color:var(--blau);} .lede{font-size:var(--fs-500);color:var(--grau);line-height:var(--zh-weit);} .klein{font-size:var(--fs-300);color:var(--grau);} /* ---------- 6 KOPFZEILE ------------------------------------------------- Das Logo trägt die Zeile "Vermietung und Verpachtung". Das ist die einzige Stelle, an der das Leistungsversprechen als Wortmarke steht, deshalb steht es oben doppelt so gross und schrumpft erst beim Scrollen. ------------------------------------------------------------------------ */ /* Die Kopfzeile weicht beim Runterscrollen nach oben weg und kommt beim Raufscrollen sofort zurück. Auf einem 1080er Schirm sind 118 Pixel Kopfzeile ein Zehntel der Höhe, das gehört beim Lesen nicht dauerhaft belegt. Beim Zurückscrollen ist die Navigation trotzdem sofort da. */ /* OHNE Kontur nach unten, Vorgabe Roman am 2026-08-07. Die Kante entsteht durch die Farbe: die Leiste läuft auf #dbe8f3, die Seite auf #f7fafd. Eine Linie zusätzlich zur Farbkante ist eine Kante zu viel. ACHTUNG bei der weissen Fassung im Design-Regler: dort ist die Leiste fast so hell wie die Seite, und ohne Linie verschwindet die Kante. Das betrifft nur den Regler, ausgeliefert wird "zart". */ .kopf{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--papier) 90%,transparent); backdrop-filter:blur(10px);border-bottom:0; transition:transform .32s cubic-bezier(.4,0,.2,1);} .kopf.weg{transform:translateY(-100%);} @supports not (color:color-mix(in srgb,red,blue)){ .kopf{background:rgba(247,250,253,.92);} } .kopf .nav{display:flex;align-items:center;gap:clamp(16px,2vw,28px); height:var(--kopf-hoch);transition:height .28s ease;} .kopf .logo{height:76px;width:auto;display:block;transition:height .28s ease;} .kopf.klein .nav{height:var(--kopf-klein);} .kopf.klein .logo{height:40px;} .kopf .fueller{flex:1;} .kopf .links{display:flex;gap:clamp(16px,1.8vw,28px);font-size:var(--fs-300); font-weight:var(--sw-halbfett);} .kopf .links a{color:var(--schwarz);opacity:.85;padding-block:4px; border-bottom:1px solid transparent;transition:opacity .2s,color .2s,border-color .2s;} .kopf .links a:hover{opacity:1;color:var(--blau);border-color:var(--blau);} .kopf .links a[aria-current="page"]{color:var(--blau);opacity:1;border-color:var(--blau);} /* Zwei Farbfassungen der Kopfzeile, umschaltbar über den Design-Regler. Beide setzen die Token um, damit jeder Baustein darin mitzieht, statt dass einzelne Elemente Sonderregeln bekommen. Der Hintergrund steht als fester Wert da, weil die Token im selben Block umdefiniert werden. */ .kopf.hell{ background:#97bfdc; --blau:#083f6e; --linie:rgba(8,63,110,.28); --grau:#0d3455; --weiss:#ffffff; } .kopf.hell .links a{color:#0d2b45;opacity:1;} .kopf.hell .links a:hover{color:#00223f;border-color:#00223f;} .kopf.hell .a11y button{background:rgba(255,255,255,.72);border-color:rgba(8,63,110,.3);color:#0d2b45;} .kopf.hell .a11y button:hover{background:#fff;} .kopf.hell .knopf.voll{background:#083f6e;border-color:#083f6e;color:#fff;} /* Sehr helles Blau. Braucht keine Sonderbehandlung: der Text bleibt dunkel wie in der weissen Fassung, und das Logo hebt sich ab, weil seine Quadrate deutlich dunkler sind als dieser Grund. Auf Romans Wunsch vom 2026-08-07. */ .kopf.zart{ background:#dbe8f3; } .kopf.dunkel{ background:#083f6e; } .kopf.dunkel .links a{color:#e6f0f8;opacity:1;} .kopf.dunkel .links a:hover{color:#fff;border-color:#97bfdc;} .kopf.dunkel .a11y button{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.34);color:#fff;} .kopf.dunkel .a11y button:hover{background:rgba(255,255,255,.2);} .kopf.dunkel .knopf.voll{background:#fff;border-color:#fff;color:#083f6e;} .kopf.dunkel .burger{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.34);} .kopf.dunkel .burger span{background:#fff;} /* Das Logo braucht auf dunklem Grund eine weisse Platte. NICHT invertieren: das Logo besteht aus blauen Quadraten mit weissen Buchstaben darin. Eine Invertierung macht die Quadrate weiss UND die Buchstaben weiss, übrig bleiben drei leere Kästchen. Beim ersten Versuch genau so passiert und im Screenshot sofort sichtbar gewesen. */ .kopf.dunkel .logo{background:#fff;padding:10px 14px;border-radius:8px; box-sizing:content-box;} /* ---------- 7 BAUSTEINE ------------------------------------------------- */ /* Knopf. Ziel-Grösse mindestens 44 Pixel, das ist WCAG 2.5.8. */ .knopf{display:inline-flex;align-items:center;gap:9px;min-height:44px; padding:12px 22px;border-radius:var(--radius-rund); font-family:var(--schrift-text);font-size:var(--fs-300); font-weight:var(--sw-halbfett);cursor:pointer; border:1.5px solid transparent; transition:transform .15s,box-shadow .15s,background .2s,color .2s;} .knopf .pfeil{transition:transform .2s;} /* Icons in Knoepfen (seit 2026-10-13): Linien-Icon links, in Textfarbe. Ein Knopf mit Icon traegt keinen Pfeil mehr, sonst ist er ueberladen. */ .knopf .ico{width:1.15em;height:1.15em;flex:none;} .knopf:hover .pfeil{transform:translateX(4px);} .knopf.voll{background:var(--blau);color:var(--weiss);border-color:var(--blau);} .knopf.voll:hover{transform:translateY(-1px);box-shadow:var(--schatten-knopf);} .knopf.linie{background:transparent;color:var(--blau);border-color:var(--blau);} .knopf.linie:hover{background:var(--flaeche);} .knopf.weiss{background:var(--weiss);color:var(--blau);border-color:var(--weiss);} .knopf.weiss:hover{transform:translateY(-1px);box-shadow:var(--schatten-karte);} .knopf:focus-visible{outline:3px solid var(--blau);outline-offset:3px;} /* Chip, die kleine Auszeichnung mit Rand */ .chip{display:inline-flex;align-items:center;gap:8px;padding:8px 15px; background:var(--weiss);border:1px solid var(--linie); border-radius:var(--radius-rund);font-size:var(--fs-300); font-weight:var(--sw-halbfett);color:var(--grau);} /* Die Zahl trägt die Aussage, deshalb eine Stufe grösser als der Rest der Auszeichnung. Nicht mehr: der Chip soll ein Chip bleiben. */ .chip b{color:var(--blau);font-size:var(--fs-400);} /* Karte, der weisse Kasten mit Rand */ /* Kartenpolster als eigenes Token, nicht als freie Zahl. Der Faktor 1,175 sind plus 17,5 Prozent auf beide Achsen, also die Mitte der von Roman genannten Spanne 15 bis 20. Bewusst ein Faktor auf die bestehende Skala statt eines neuen Werts: die nächste Stufe der Skala wäre plus 60 Prozent gewesen, das ist für "mit Augenmass" zu grob. Bei 1920 Pixel Breite: 55 Pixel oben und unten, 34 links und rechts, vorher 47 und 29. */ :root{ --karte-pad-y:calc(var(--luft-xl) * 1.175); --karte-pad-x:calc(var(--luft-l) * 1.175); } .karte{background:var(--papier);border:1px solid var(--linie); border-radius:var(--radius-m);padding:var(--karte-pad-y) var(--karte-pad-x);} /* Die Ziffern-Kreise in den Karten sind am 2026-08-07 entfallen, mit ihnen .karte .zahl und die zwei Ableitungen für die dunkle Sektion und den warmen Akzent. Sie lasen sich wie eine Reihenfolge von Schritten, obwohl "Warum F&M" drei gleichwertige Gründe zeigt. Nicht auskommentiert stehen gelassen: toter Code, den niemand mehr liest, ist schlimmer als eine Zeile Historie. Wer sie zurückwill, findet sie in DESIGNSYSTEM.md. */ /* Karten-Überschriften in der SERIFENLOSEN Schrift. Vorgabe Roman am 2026-08-07 für "Provisionsfrei", "Direkt vom Bauträger", "Familienbetrieb". Begründung dahinter: das Logo ist serifenlos, und in kurzen Sachbegriffen wirkt die Serifenschrift wie eine zweite Stimme. Die Serifenschrift bleibt den Überschriften der Abschnitte. */ .karte h3{font-family:var(--schrift-text);font-weight:var(--sw-betont); font-size:var(--fs-600);letter-spacing:0; margin:var(--luft-m) 0 var(--luft-s);} /* Der obere Abstand war der Abstand ZUM Ziffern-Kreis. Ohne ihn steht die Überschrift zuoberst und darf nicht vom Rand wegrücken, sonst hat die Karte oben mehr Polster als unten. */ .karte h3:first-child{margin-top:0;} .karte p{color:var(--grau);} /* Suchmaske. Bewusst eine eigene Klasse und KEIN Inline-Stil: ein Inline-Stil lässt sich von keiner Media-Query überschreiben. Genau daran ist die erste Fassung gescheitert, die Maske lief auf dem Handy 705 Pixel breit in einem 390 Pixel Fenster. */ .suchformular{display:grid;grid-template-columns:repeat(4,1fr); gap:var(--luft-m);align-items:end;} .suchformular label{display:flex;flex-direction:column;gap:var(--luft-eng);min-width:0;} .suchformular input{font:inherit;font-size:var(--fs-400);min-height:44px;min-width:0;width:100%; padding:12px 14px;border:1px solid var(--linie); border-radius:var(--radius-s);background:var(--weiss);color:var(--schwarz);} .suchformular input:focus-visible{outline:3px solid var(--blau);outline-offset:1px;} .suchformular button{justify-content:center;} @media(max-width:900px){ .suchformular{grid-template-columns:1fr 1fr;} } @media(max-width:560px){ .suchformular{grid-template-columns:1fr;} } /* Enge Fassung für die Maske in einer Spalte statt über die ganze Breite. In 795 Pixel wären vier Spalten je 180 Pixel breit, das ist für "Ort oder Stichwort" zu wenig. Drei Felder plus Knopf ergeben so zwei ruhige Zeilen. Eine Media-Query hilft hier nicht: das Fenster ist breit, nur die Spalte ist schmal, und Container-Abfragen wären für diesen einen Fall zu viel. */ .suchformular.eng{grid-template-columns:1fr 1fr;} /* Der Knopf sitzt in der FREIEN Zelle der zweiten Zeile, nicht in einer eigenen dritten. Reihenfolge im Raster: Ort | Zimmer, dann Flaeche | Knopf. Vorgabe Roman am 2026-08-07. Breite die Haelfte der Spalte, damit er nicht groesser wirkt als die Eingabefelder daneben. */ /* Volle Spaltenbreite, Vorgabe Roman am 2026-08-07. Er sitzt damit genau so breit wie das Eingabefeld links daneben, und die zweite Zeile liest sich als Paar statt als Feld mit angehaengtem Knopf. */ .suchformular.eng button{width:100%;align-self:end;padding-inline:var(--luft-m);} @media(max-width:560px){ .suchformular.eng{grid-template-columns:1fr;} .suchformular.eng button{justify-self:stretch;} } /* Schritt-Liste, nummerierte Zeilen mit Haarlinie */ .schritte{display:flex;flex-direction:column;} .schritt{display:flex;gap:var(--luft-m);padding:var(--luft-m) 0; border-top:1px solid var(--linie);} .schritt:last-child{border-bottom:1px solid var(--linie);} .schritt .nr{font-family:var(--schrift-display);color:var(--blau); font-size:var(--fs-500);font-weight:var(--sw-halbfett); width:34px;flex:none;} .schritt h4{margin-bottom:var(--luft-eng);} .schritt p{color:var(--grau);font-size:var(--fs-300);} /* FAQ. Reines details/summary, damit Tastatur und Screenreader ohne JavaScript funktionieren. Zugeklappt beim Laden, nie offen. */ .faq{display:flex;flex-direction:column;} .faq details{border-top:1px solid var(--linie);} .faq details:last-child{border-bottom:1px solid var(--linie);} .faq summary{list-style:none;cursor:pointer;display:flex;align-items:baseline; gap:var(--luft-m);padding:var(--luft-l) 0; font-family:var(--schrift-display);font-weight:var(--sw-halbfett); font-size:var(--fs-600);color:var(--tief);line-height:var(--zh-normal); letter-spacing:-.01em;transition:color .2s;} .faq summary::-webkit-details-marker{display:none;} .faq summary:hover{color:var(--blau);} .faq summary .nr{font-family:var(--schrift-text);font-size:var(--fs-200); font-weight:var(--sw-fett);color:var(--blau);flex:none;padding-top:.35em;} /* Das Plus wird GEZEICHNET, nicht gesetzt. Vorher stand dort das Zeichen "+" als Text. Ein Plus-Glyph sitzt in seiner Zeile auf der mathematischen Achse und nicht in der Mitte, dazu kam die geerbte Zeilenhöhe. Ergebnis: es sass sichtbar zu hoch im Kreis, und gedreht war das X noch schiefer. Zwei absolut positionierte Balken sind pixelgenau mittig und drehen sauber ins X. Von Roman am 2026-08-07 bemerkt. */ .faq summary .zeichen{margin-left:auto;flex:none;position:relative; width:26px;height:26px;align-self:center; border-radius:50%;border:1px solid var(--linie); font-size:0; /* das "+" im Markup wird unsichtbar */ transition:transform .25s,background .2s,border-color .2s;} .faq summary .zeichen::before, .faq summary .zeichen::after{content:"";position:absolute;top:50%;left:50%; background:var(--blau);transition:background .2s;} .faq summary .zeichen::before{width:11px;height:1.5px;transform:translate(-50%,-50%);} .faq summary .zeichen::after{width:1.5px;height:11px;transform:translate(-50%,-50%);} .faq details[open] summary .zeichen{transform:rotate(45deg);background:var(--blau); border-color:var(--blau);} .faq details[open] summary .zeichen::before, .faq details[open] summary .zeichen::after{background:var(--weiss);} .faq summary:focus-visible{outline:3px solid var(--blau);outline-offset:4px;border-radius:4px;} /* Die Antwort läuft NICHT eingerückt. Vorher standen hier 52 Pixel links, um sie unter dem Fragetext auszurichten. Das sah aus wie ein Einzug ohne Grund. Roman am 2026-08-07: "warum ist hier die Schrift eingerückt". */ .faq .antwort{padding:0 var(--luft-xl) var(--luft-l) 0;color:var(--grau);} .faq .antwort a{color:var(--blau);border-bottom:1px solid currentColor;} /* Weiches Auf- und Zuklappen. Roman am 2026-08-07: "muss auch eine Transition sein, eine Smoothie. Aber nicht zu langsam, dass es quietscht." Deshalb 340 Millisekunden mit einer ausklingenden Kurve: schnell los, sanft aus. Zu ist etwas kürzer als auf, das fühlt sich entschlossener an. WARUM ein zusätzlicher Kasten: details/summary klappt von sich aus hart um, und die Höhe von "auto" lässt sich nicht überblenden. Animiert wird deshalb .klapp mit einem in Pixel gesetzten Wert, den assets/fm.js kurz anlegt und nach dem Lauf wieder entfernt. Bleibt die Höhe nicht stehen, kann sich der Inhalt danach frei ändern (Schriftgrössen-Schalter, Fensterbreite). NICHT über ::details-content gebaut, obwohl das kürzer wäre: das gibt es erst in neueren Chromium- und Safari-Fassungen, und ein Kunde, der die Vorschau im Firefox oder in einem älteren Handy-Browser öffnet, hätte wieder das harte Umklappen gesehen. */ .faq .klapp{overflow:hidden;} .faq .klapp.laeuft{transition:height .34s cubic-bezier(.22,.61,.36,1);} .faq .klapp.laeuft.zu{transition-duration:.28s;} .faq summary .zeichen{transition:transform .34s cubic-bezier(.22,.61,.36,1), background .2s,border-color .2s;} /* Der Text zieht leicht nach. Ohne das wirkt der Kasten wie eine Jalousie, mit dem Nachziehen wie ein Aufblättern. 4 Pixel, mehr wäre Effekt. */ @media (prefers-reduced-motion: no-preference) { .faq details[open] .antwort{animation:faq-ein .34s cubic-bezier(.22,.61,.36,1) both;} } @keyframes faq-ein{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}} /* Bild mit der grossen Rundung. Die Ecke wird per Modifikator gewählt, damit sie nie frei gesetzt wird. */ .bildrahmen{overflow:hidden;border-radius:var(--radius-m);box-shadow:var(--schatten-bild);} .bildrahmen.ecke-ru{border-radius:var(--radius-m) var(--radius-m) var(--radius-gross) var(--radius-m);} .bildrahmen.ecke-lu{border-radius:var(--radius-m) var(--radius-m) var(--radius-m) var(--radius-gross);} .bildrahmen img{width:100%;height:100%;object-fit:cover;display:block;} .bildrahmen.quadrat{aspect-ratio:1/1;} .bildrahmen.hoch{aspect-ratio:1/1.05;} /* Logo-Kacheln statt Foto (Über uns, Vorschlag 2026-10-21): die drei Quadrate aus dem Logo plus eine Textkachel, 2 x 2. Abstand wie im Logo (10 zu 100). Die große Rundung rechts unten wie bei den Fotos, sonst die kleine. Kein Schatten, weil zwischen den Kacheln die Seite durchscheint. */ .bildrahmen.logo-kacheln{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:4.8%; overflow:visible;box-shadow:none;border-radius:0;} .logo-kacheln .kachel{display:block;overflow:hidden;border-radius:var(--radius-m);min-height:0;} .logo-kacheln .kachel img{width:100%;height:100%;object-fit:cover;display:block;} .logo-kacheln .kachel:nth-child(1),.logo-kacheln .kachel:nth-child(3){background:#005496;} .logo-kacheln .kachel:nth-child(2){background:#84b6d9;} .logo-kacheln .kachel.text{display:flex;flex-direction:column;justify-content:flex-end;gap:var(--luft-eng); padding:var(--luft-l);background:var(--flaeche);border-radius:var(--radius-m) var(--radius-m) var(--radius-gross) var(--radius-m);color:var(--tief);} .logo-kacheln .kachel.text .ico{width:2.6em;height:2.6em;color:var(--blau);margin-bottom:auto;} /* größer (Roman, 2026-10-22) */ /* Schriftzug aus dem Logo (VERMIETUNG & / VERPACHTUNG), aus fm-logo-original.svg geschnitten. */ .logo-kacheln .kachel.text .worte{display:flex;flex-direction:column;} .logo-kacheln .kachel.text .worte img+img{margin-top:2.6%;} /* Zeilenabstand ca. 1/3 der Versalhöhe, wächst mit der Kachel */ .logo-kacheln .kachel.text .worte img{width:68%;height:auto;display:block;} /* normale Laufweite, linksbündig, Buchstaben so groß wie vorher (Roman, 2026-10-22) */ .logo-kacheln .kachel.text small{font-size:var(--fs-300);color:var(--grau);margin-top:var(--luft-s);} /* Fliesstext-Bereich für Rechtstexte */ .fliess h2{font-size:var(--fs-700);margin:var(--luft-2xl) 0 var(--luft-m);} .fliess h2:first-child{margin-top:0;} .fliess h3{font-family:var(--schrift-text);font-size:var(--fs-500); font-weight:var(--sw-fett);color:var(--schwarz); margin:var(--luft-l) 0 var(--luft-s);} .fliess p{margin-bottom:var(--luft-m);color:var(--grau);} .fliess ul{margin:0 0 var(--luft-m) 1.2em;color:var(--grau);} .fliess li{margin-bottom:var(--luft-eng);} .fliess a{color:var(--blau);border-bottom:1px solid currentColor;} .fliess strong{color:var(--schwarz);font-weight:var(--sw-halbfett);} /* ---------- 8 ABSCHNITTE ------------------------------------------------ */ section{padding-block:var(--luft-3xl);} /* Der Zitat-Abschnitt bekommt 13 Prozent mehr Polster oben und unten, damit er luftiger steht. Vorgabe Roman am 2026-08-07. Nur dieser Abschnitt, weil er nur ein Zitat und einen kurzen Text traegt und deshalb mehr Ruhe braucht als eine Sektion mit Karten. */ section#about{padding-block:calc(var(--luft-3xl) * 1.13);} section.ruhig{ background:var(--flaeche); /* Haarlinien MÜSSEN hier dunkler sein. Die Standard-Linie #d9e6f0 liegt auf dem Grund #dbe8f3 der ruhigen Abschnitte praktisch deckungsgleich, der Kontrast ist 1,03:1. Die Trennstriche der FAQ waren dadurch unsichtbar, und es sah aus als fehlten sie. Roman am 2026-08-07: "warum sind hier keine Striche, so wie auf der Startseite unten". Nachgemessen, dann gerechnet: #b9d2e6 ergibt 1,35:1 gegen den Grund, sichtbar ohne hart zu wirken. */ --linie:#b9d2e6; } section.schmal{padding-block:var(--luft-2xl);} /* Die Bühne füllt den ersten Bildschirm, ohne ihn zu sprengen. 100svh statt 100vh, weil auf dem Handy sonst die Adresszeile mitrechnet. min-height, nicht height: wächst der Inhalt (grosse Schrift, Mobile), wächst der Abschnitt mit, statt abzuschneiden. */ section.buehne{min-height:calc(100svh - var(--kopf-hoch)); display:flex;align-items:center; padding-block:var(--luft-2xl);} /* Zweispaltig beginnt oben, nicht mittig. Die Aufteilungen folgen dem Goldenen Schnitt (38 zu 62), nicht 50 zu 50. Halbe-halbe wirkt unentschieden, das ist die Vorgabe aus dem Workspace. */ .zwei{display:grid;gap:clamp(38px,4.5vw,84px);align-items:start;} .zwei.gleich{grid-template-columns:1fr 1fr;} .zwei.text-links{grid-template-columns:1.618fr 1fr;} /* 62 zu 38 */ .zwei.bild-links{grid-template-columns:1fr 1.618fr;} /* 38 zu 62 */ .zwei.schmal-links{grid-template-columns:1fr 1.618fr;} .zwei.mitte{align-items:center;} .kopfblock{max-width:calc(var(--lesebreite) * 1.45);} /* AUSNAHME, bewusst als Modifikator und nicht frei gesetzt: ein Kopf, dessen Vorspann auslaufen darf. Roman am 2026-08-07 für "Warum F&M": "bitte auslaufen lassen, kein künstlicher Umbruch." Gilt nur, wo der Vorspann aus zwei kurzen Sätzen besteht und nicht gelesen, sondern überflogen wird. Die Leseweite bleibt überall sonst in Kraft, siehe die Regel "Zeilenlänge aus der Spalte". */ .kopfblock.weit{max-width:none;} /* Karten laufen nicht künstlich auf gleiche Höhe, sie richten sich nach ihrem Inhalt. Das ist die Workspace-Regel "Box-Höhen sind inhaltsgesteuert". */ .drei{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--luft-l);align-items:start;} /* Der blaue Kontakt-Kasten */ /* Die Luft rund um den Kasten. Roman am 2026-08-07, dritte Ansprache dieser Stelle: "Unten sowieso doppelt so viel und oben denselben Abstand wie unten zur Fusszeile." Also ein Wert für beide Seiten, und er ist das Doppelte des normalen Abschnitts-Abstands. Bewusst als Faktor auf die Skala, nicht als neue Zahl: so wandert er mit, wenn die Skala sich ändert. Gemessen bei 1440 Pixel 121, bei 390 Pixel 96, bei 1920 Pixel 152. */ :root{ --kontakt-luft:calc(var(--luft-2xl) * 2); } section.schmal:has(> .wrap > .kontaktkasten){ padding-top:var(--kontakt-luft); padding-bottom:var(--kontakt-luft); } /* Folgt der Kasten auf einen FARBLOSEN Abschnitt, bringt dieser seinen eigenen unteren Innenabstand mit, und die Luft würde sich addieren. Dann trägt nur der Abschnitt davor. Auf der Startseite ist das so, auf Ueber uns und in der Wohnungssuche steht ein farbiger Abschnitt davor: dort endet die Farbe an der Kante, es gibt also nichts, was sich addieren könnte. WARUM RÜCKWÄRTS FORMULIERT: die Vorgänger-Fassung setzte oben 0 und wollte den farbigen Fall per `section.ruhig + section.schmal` ausnehmen. Das hat NIE gegriffen. Die :has()-Regel wiegt drei Klassen, die Ausnahme nur zwei, also gewann die Null. Gemessen waren es 0 Pixel, während die Doku behauptete, es seien 60. Von Roman gesehen, nicht von mir. Lehre: eine Ausnahme, die über die Reihenfolge argumentiert, muss auch die höhere Spezifität haben, und beides gehört gemessen, nicht angenommen. */ section:not(.ruhig):not(.dunkel) + section.schmal:has(> .wrap > .kontaktkasten){ padding-top:0; } .kontaktkasten{background:var(--blau);color:var(--weiss);border-radius:var(--radius-l); padding:var(--luft-3xl) var(--luft-2xl);display:grid; grid-template-columns:1fr 1fr;gap:var(--luft-2xl);align-items:start;} /* So gross wie eine Abschnitts-Ueberschrift, also fs-800 statt fs-700. Roman am 2026-08-07: "so gross wie die Headline bei haeufige Fragen". */ .kontaktkasten h2{color:var(--weiss);font-size:var(--fs-800);} .kontaktkasten p{color:var(--hell);margin-top:var(--luft-m);} .kontaktkasten .zeilen{display:flex;flex-direction:column;gap:var(--luft-m);} /* Ghost-Knopf auf Blau (seit 2026-10-13, Fragen-Knopf). */ .kontaktkasten .knopf.linie{color:var(--weiss);border-color:rgba(255,255,255,.55);margin-top:var(--luft-l);} .kontaktkasten .knopf.linie:hover{background:var(--weiss);color:var(--blau);border-color:var(--weiss);} .kontaktkasten .zeile{display:flex;flex-direction:column;gap:var(--luft-eng); padding-bottom:var(--luft-m); border-bottom:1px solid rgba(255,255,255,.18);} .kontaktkasten .k{font-size:var(--fs-100);letter-spacing:1.5px;text-transform:uppercase; color:var(--hell);} .kontaktkasten .zeile a,.kontaktkasten .zeile span:not(.k){font-size:var(--fs-500); font-weight:var(--sw-halbfett);} .kontaktkasten .zeile a:hover{border-bottom:1px solid currentColor;} /* ---------- 9 FUSSZEILE ------------------------------------------------- */ /* Fusszeile in demselben sehr hellen Blau wie die Kopfzeile. Entscheidung von Roman am 2026-08-07. Damit rahmen Kopf und Fuss die Seite in derselben Farbe ein, und der Text kann dunkel bleiben, also lesbar wie im Rumpf. Das Logo steht als echte Grafik oben, darunter die Anschrift, damit sofort klar ist, wo die Firma sitzt. Keine Serifenschrift in diesem Block. */ .fuss{background:#dbe8f3;color:var(--grau);padding:var(--luft-2xl) 0 var(--luft-l); --linie:rgba(8,63,110,.18);} /* Drei Spalten, aber nicht gleich gewichtet: das Logo braucht Platz, die zwei Listen ruecken nach rechts. Vorher standen sie in der Mitte und "hingen in der Luft". */ /* Der Abstand zwischen den Spalten ist EINER, und er ist gross. Roman am 2026-08-07: "ich wollte eigentlich denselben Abstand der Spalten haben, doppelt so viel wie jetzt". Vorher war der Abstand Logo zu Navigation durch die 1,9fr-Spalte riesig und der zwischen Navigation und Rechtliches klein, dadurch klebte Rechtliches am Rand. Jetzt trägt die erste Spalte den Rest und die beiden rechten stehen im selben, doppelten Abstand. */ .fuss .oben{display:grid;grid-template-columns:1fr auto auto; column-gap:clamp(96px,13vw,260px);row-gap:var(--luft-xl); padding-bottom:var(--luft-xl);border-bottom:1px solid var(--linie);} .fuss .oben > :nth-child(2){justify-self:end;} .fuss .oben > :nth-child(3){justify-self:end;} .fuss .fusslogo{height:64px;width:auto;display:block;} .fuss address{font-style:normal;font-size:var(--fs-300);margin-top:var(--luft-m); line-height:var(--zh-weit);} .fuss address strong{color:var(--tief);font-weight:var(--sw-betont);} .fuss p{font-size:var(--fs-300);margin-top:var(--luft-s);} .fuss h5{font-size:var(--fs-100);text-transform:uppercase;letter-spacing:.2em; font-weight:var(--sw-betont);color:var(--blau);margin-bottom:var(--luft-m);} .fuss ul{list-style:none;display:flex;flex-direction:column;gap:var(--luft-s); font-size:var(--fs-300);} .fuss a{color:inherit;} .fuss a:hover{color:var(--blau);} /* Die Signatur steht zentriert in der unteren Zeile, das Herz ist ein Umriss-Zeichen in der Textfarbe, nicht rot. Beides Workspace-Vorgabe. */ .fuss .unten{display:grid;grid-template-columns:1fr auto 1fr;align-items:center; padding-top:var(--luft-m);font-size:var(--fs-200);gap:var(--luft-s);} /* Signatur rechtsbuendig, Vorgabe Roman am 2026-08-07. Vorher stand sie mittig, das war die aeltere Vorgabe. */ .fuss .unten{grid-template-columns:1fr auto;} .fuss .unten .sig{grid-column:2;text-align:right;color:inherit;} .fuss .unten .sig a{border-bottom:1px solid rgba(8,63,110,.35);} .fuss .unten :last-child{justify-self:end;} @media(max-width:820px){ .fuss .oben{grid-template-columns:1fr 1fr;} .fuss .oben > :nth-child(1){grid-column:1 / -1;} .fuss .oben > :nth-child(2),.fuss .oben > :nth-child(3){justify-self:start;} .fuss .unten{grid-template-columns:1fr;justify-items:center;text-align:center;} .fuss .unten .sig{grid-column:1;} .fuss .unten :last-child{justify-self:center;} } /* ---------- 10 BARRIEREFREIHEIT ----------------------------------------- Eingebaut, nicht davorgeschaltet. Es gibt genau zwei Schalter, und beide tun etwas Echtes: die Schrift wächst wirklich (weil die Skala in rem steht), und der Kontrastmodus stellt die ganze Palette um, nicht nur zwei Grautöne. Beide zeigen ihren Zustand über aria-pressed. Wer im Betriebssystem hohen Kontrast eingestellt hat, bekommt ihn sofort. ------------------------------------------------------------------------ */ .a11y{display:flex;gap:8px;} .a11y button{min-width:44px;min-height:44px;border:1px solid var(--linie); background:var(--weiss);border-radius:50%;cursor:pointer; font-family:var(--schrift-text);font-weight:var(--sw-fett); font-size:var(--fs-300);color:var(--grau); display:flex;align-items:center;justify-content:center;} .a11y button:hover{border-color:var(--blau);color:var(--blau);} .a11y button[aria-pressed="true"]{background:var(--blau);border-color:var(--blau);color:var(--weiss);} .a11y button:focus-visible{outline:3px solid var(--blau);outline-offset:2px;} /* Kontrastmodus. Gemessene Verhältnisse gegen Weiss: --tief 16,1:1, --blau 12,9:1, --grau 17,8:1. Damit ist WCAG 1.4.6 (Stufe AAA, 7:1) in allen Textkombinationen erfüllt, nicht nur die AA-Schwelle. */ body.kontrast{ --blau:#00335c; --hell:#d6e8f5; --tief:#00223f; --papier:#ffffff; --flaeche:#ffffff; --linie:#00335c; --grau:#1a171b; --grau-hell:#e8f1f8; } @media(prefers-contrast:more){ :root{--grau:#3d4650;--linie:#a8c4da;} } /* Sprungmarke für die Tastatur */ .sprung{position:absolute;left:-9999px;top:0;background:var(--blau);color:var(--weiss); padding:12px 18px;border-radius:0 0 var(--radius-s) 0;z-index:100;} .sprung:focus{left:0;} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important;} } /* ---------- 10b EINGANGS-ANIMATION -------------------------------------- Die Elemente bauen sich auf, statt einfach da zu sein. Ruhig, nicht hüpfend: nur Deckkraft und eine kleine Verschiebung nach oben, kein Federn, kein Zoom, kein Drehen. Reihenfolge auf der Bühne: erst die linke Spalte von oben nach unten, dann leicht verzögert das Bild. Das liest sich wie ein Satz, nicht wie ein Feuerwerk. 0,85 Sekunden Dauer, 90 Millisekunden Versatz je Element. Die Kurve startet zügig und läuft weich aus, das ist der Unterschied zwischen "beruhigend" und "träge". html.anim setzt das Skript. Ohne JavaScript ist alles sofort sichtbar, niemand sieht eine leere Seite. Wer weniger Bewegung eingestellt hat, bekommt gar keine. ------------------------------------------------------------------------ */ @media(prefers-reduced-motion:no-preference){ html.anim [data-anim]{opacity:0;transform:translateY(18px);} html.anim [data-anim].sichtbar{opacity:1;transform:none; transition:opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1);} /* Bilder kommen eine Spur weiter von unten und eine Spur langsamer, dadurch wirken sie schwerer als der Text daneben. */ html.anim [data-anim="bild"]{transform:translateY(26px) scale(.995);} html.anim [data-anim="bild"].sichtbar{transform:none; transition:opacity 1.05s cubic-bezier(.22,.61,.36,1), transform 1.05s cubic-bezier(.22,.61,.36,1);} } /* Dunkelblaue Sektion. Alle Token werden umgestellt, damit jeder Baustein darin ohne Sonderregel funktioniert. */ section.dunkel{ /* Der Hintergrund steht als fester Wert da, NICHT als var(--tief). Grund: dieser Block definiert --tief gleich darunter auf Weiss um, und CSS löst Variablen erst nach dem ganzen Block auf. Mit var(--tief) wurde die Sektion also weiss und der Text unsichtbar. Beim ersten Versuch genau so passiert. */ background:#083f6e; --papier:#0a3357; --flaeche:#0a3357; --linie:rgba(255,255,255,.16); --grau:#bcd4e6; --blau:#97bfdc; --tief:#ffffff; --schwarz:#ffffff; color:var(--grau); } section.dunkel .karte{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);} /* Zweiter Blauton für dunkle Abschnitte. Entscheidung von Roman am 2026-08-07: "Warum F&M" läuft auf dem mittleren Logo-Blau #005091, nicht auf dem tiefen #083f6e. Alles andere an .dunkel bleibt gleich, nur der Grund wechselt. Kontraste sind nachgemessen, siehe DESIGNSYSTEM.md. */ section.dunkel.blauton{background:#005091;} /* Der LETZTE Abschnitt vor der Fusszeile darf nicht hellblau sein, sonst laeuft er in die hellblaue Fusszeile hinein und die Kante verschwindet. Er bekommt deshalb dasselbe Dunkelblau wie "Warum F&M" auf der Startseite. Roman am 2026-08-07: "die rennen ineinander, das moechte ich nicht", und "haette ich gerne die haeufige-Fragen-Section dunkelblau". Als Regel und nicht pro Seite, damit es nicht wieder auseinanderlaeuft. */ main > section.ruhig:last-child{background:#005091;} main > section.ruhig:last-child{--papier:#0a3357;--flaeche:#0a3357;--tief:#ffffff; --blau:#bcd4e6;--grau:#bcd4e6;--linie:rgba(255,255,255,.22);color:#e8f1f8;} main > section.ruhig:last-child .eyebrow{color:#d6e6f2;} main > section.ruhig:last-child h1, main > section.ruhig:last-child h2, main > section.ruhig:last-child h3{color:#ffffff;} main > section.ruhig:last-child .knopf.linie{border-color:rgba(255,255,255,.5);color:#ffffff;} main > section.ruhig:last-child .knopf.linie:hover{background:rgba(255,255,255,.12);} /* Der Eyebrow muss auf dem helleren Blau aufgehellt werden. Nachgemessen am 2026-08-07: das Logo-Hellblau #97bfdc liegt auf #005091 nur bei 4,23:1 und fällt damit unter die AA-Schwelle von 4,5:1. Auf dem tiefen #083f6e wäre es in Ordnung gewesen, aber dieser Grund ist heller. */ section.dunkel.blauton .eyebrow{color:#d6e6f2;} /* ---------- 11 KLEINE SCHIRME ------------------------------------------- */ .burger{display:none;width:44px;height:44px;border:1px solid var(--linie); border-radius:var(--radius-s);background:var(--weiss);cursor:pointer; flex-direction:column;gap:4px;align-items:center;justify-content:center;} .burger span{width:20px;height:2px;background:var(--schwarz);} .mobilnav{display:none;} @media(max-width:900px){ .zwei.gleich,.zwei.bild-links,.zwei.text-links,.zwei.schmal-links{grid-template-columns:1fr;} .drei{grid-template-columns:1fr;} .kontaktkasten{grid-template-columns:1fr;padding:var(--luft-2xl) var(--luft-xl);} .fuss .oben{gap:var(--luft-l) var(--luft-xl);} /* Spalten regelt der 820-Block: Navigation und Rechtliches nebeneinander (Roman, 2026-10-13); vorher stand hier 1fr und ueberschrieb ihn */ .faq .antwort{padding-inline:0;} /* Erzwungene Umbrüche in Vorspann-Absätzen gelten nur, wo Platz ist. In der schmalen Spalte bricht der Text sowieso um, und der erzwungene Umbruch erzeugt dann zusätzlich ein kurzes Reststück mitten im Absatz. Gemessen bei 390 Pixel: mit dem
sechs Zeilen, darunter eine mit 125 Pixeln. Der Umbruch selbst bleibt im Markup, er ist eine Desktop-Vorgabe von Roman, keine Textentscheidung. */ .lede br{display:none;} } /* Derselbe Gedanke für die Bühne, nur bei einer anderen Schwelle. Der erzwungene Umbruch vor "Direkt vom Bauträger" ist genau so lange sauber, wie der erste Satz noch in EINE Zeile passt. Er braucht 702 Pixel. Gemessen ist die Spalte bei 1360 Pixel Fensterbreite 748 breit, bei 1280 nur 701, und dort entsteht ein Reststück von 165 Pixeln. Die Grenze liegt also dazwischen. */ @media(max-width:1320px){ .buehne .lede br{display:none;} } @media(max-width:720px){ .kopf .links,.kopf .a11y,.kopf .nav > .knopf{display:none;} .burger{display:flex;} .kopf .nav{height:var(--kopf-klein);} .kopf .logo{height:44px;} .mobilnav{display:block;position:fixed;inset:var(--kopf-klein) 0 auto 0; background:var(--papier);border-bottom:1px solid var(--linie); padding:var(--luft-l) var(--rand);z-index:49; transform:translateY(-120%);transition:transform .3s ease;} .mobilnav.offen{transform:none;} .mobilnav a{display:block;padding:var(--luft-m) 0;font-size:var(--fs-500); font-weight:var(--sw-halbfett);border-bottom:1px solid var(--linie);} .mobilnav a:last-of-type{border-bottom:none;} } /* ---------- 12 OBJEKTKARTEN -------------------------------------------- Bild links, Text rechts, quadratisches Bild. Ein Gebäude in einem flachen Streifen ist keine Abbildung mehr, sondern eine Textur, das war in der Entwurfsphase schon einmal Thema. */ .objektkarte{display:grid;grid-template-columns:34% 1fr;align-items:start; border:1px solid var(--linie);border-radius:var(--radius-m); overflow:hidden;background:var(--papier);margin-bottom:var(--luft-m); transition:border-color .2s,transform .2s,box-shadow .2s;} .objektkarte:hover{border-color:var(--blau);transform:translateY(-2px); box-shadow:var(--schatten-karte);} .objektkarte .bild{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--flaeche);} .objektkarte .bild img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .8s cubic-bezier(.22,.61,.36,1);} .objektkarte:hover .bild img{transform:scale(1.04);} .objektkarte .txt{display:flex;flex-direction:column;gap:var(--luft-eng); padding:var(--luft-m) var(--luft-m) var(--luft-m) var(--luft-l);} .objektkarte .k{font-size:var(--fs-100);letter-spacing:.2em;text-transform:uppercase; font-weight:var(--sw-betont);color:var(--blau);} .objektkarte .n{font-family:var(--schrift-display);font-size:var(--fs-600); font-weight:var(--sw-halbfett);color:var(--tief);line-height:var(--zh-normal);} .objektkarte .d{font-size:var(--fs-300);color:var(--grau);} @media(max-width:560px){ .objektkarte{grid-template-columns:1fr;} } /* Reiche Karte (seit 2026-10-13): der Kopf der Detailseite im Kleinen. Foto ueber die volle Kartenhoehe, rechts Eyebrow, Titel, Adresse, die blaue Eckdaten-Leiste der Detailseite und "Mehr Details". */ /* 28 % Foto: gemessen die breiteste Fotospalte, bei der der Titel in H4 ab 1440 px Bildschirmbreite in zwei Zeilen passt (34 % ergab drei). */ .objektkarte.reich{grid-template-columns:28% 1fr;align-items:stretch;} /* Das Foto fuellt nur aus, die Hoehe der Karte bestimmt der Text. Vorher gab das hochformatige Foto mit seiner natuerlichen Hoehe die Kartenhoehe vor, unter "Mehr Details" blieb dadurch ein grosser Leerraum (Roman, 2026-10-13). */ .objektkarte.reich .bild{aspect-ratio:auto;height:100%;min-height:220px;position:relative;} .objektkarte.reich .bild img{position:absolute;inset:0;} .objektkarte.reich .txt{padding:var(--luft-l);gap:var(--luft-s);} /* Titel in der vorhandenen H4-Groesse (--fs-600, wie FAQ-Frage und die einfache Objektkarte), hoechstens zwei Zeilen, laengere enden mit ... (Roman, 2026-10-13: "nicht immer eine neue Groesse erfinden"). */ .objektkarte.reich .n{font-size:var(--fs-600);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .objektkarte.reich .objekt-eckdaten{margin-top:var(--luft-s);padding:var(--luft-m) 0;} /* eine Spur hoeher (Roman, 2026-10-13) */ .objektkarte.reich .objekt-eckdaten > span{padding:0 var(--luft-s);} .objektkarte.reich .objekt-eckdaten > span + span{border-left:1px solid rgba(8,63,110,.16);} .objektkarte.reich .objekt-eckdaten b{font-size:var(--fs-500);} .objektkarte.reich .objekt-eckdaten small{display:block;font-size:var(--fs-200);color:var(--grau);} .objektkarte.reich .fusszeile{display:flex;justify-content:space-between;align-items:center; gap:var(--luft-m);flex-wrap:wrap;margin-top:calc(var(--luft-l) - var(--luft-s));} /* oben so viel Luft wie unten (Roman, 2026-10-13), abzueglich des Spaltenabstands der Textspalte */ /* Bricht die Zeile um, bleibt der Knopf rechts. */ .objektkarte.reich .fusszeile .knopf{margin-left:auto;} /* Unter 1400 px passt der Titel in H4 nie in zwei Zeilen (gemessen bei 1280), dort drei statt kuerzen. Steht NACH der Zwei-Zeilen-Regel, sonst greift sie nicht. */ @media(max-width:1399px){ .objektkarte.reich .n{-webkit-line-clamp:3;} } .bestand .verfuegbar{margin-bottom:var(--luft-m);} @media(max-width:560px){ .objektkarte.reich{grid-template-columns:1fr;} .objektkarte.reich .bild{min-height:0;aspect-ratio:4/3;} .objektkarte.reich .n{-webkit-line-clamp:3;} .objektkarte.reich .objekt-eckdaten{grid-template-columns:1fr 1fr;row-gap:var(--luft-s);} .objektkarte.reich .objekt-eckdaten > span:nth-child(3){border-left:0;} } /* Objekt ohne Foto. Ohne diese Regel landet der Text im 34-Prozent-Streifen, der für das Bild reserviert ist, und der Titel bricht nach jedem zweiten Wort um. edireal liefert meist ein Bild, aber eben nicht immer, und der Fall darf nicht kaputt aussehen. Gefunden am 2026-08-07 im Zustandstest. */ .objektkarte.ohne-bild{grid-template-columns:1fr;} .objektkarte.ohne-bild .txt{padding:var(--luft-l);} /* ---------- 13 BAUSTEINE STATT INLINE-STILE ---------------------------- In der ersten Fassung standen 52 style-Angaben direkt im Markup. Das ist aus zwei Gründen falsch: ein Inline-Stil lässt sich von keiner Media-Query überschreiben (daran ist die Suchmaske auf dem Handy gescheitert), und dieselbe Entscheidung stand an mehreren Stellen. Jeder Baustein hier bringt seine eigenen Abstände mit, damit im Markup gar kein Abstand mehr gesetzt werden muss. ------------------------------------------------------------------------ */ /* Waagrechte Gruppe, etwa Knopf-Paar oder Chip-Reihe */ .reihe{display:flex;gap:var(--luft-m);flex-wrap:wrap;align-items:center;} .reihe.eng{gap:var(--luft-s);} /* Der Handlungsblock unter dem Bühnentext */ .aktionen{margin:var(--luft-xl) 0;} /* ---------- DER RHYTHMUS EINES ABSCHNITTSKOPFS --------------------------- Eyebrow, Überschrift, Subtext, Knopf, Pills. Diese Folge kommt auf der Website immer wieder, und sie soll überall DASSELBE VERHÄLTNIS haben. Vorgabe Roman am 2026-08-07, und sie ist genauer als ein fester Wert: die Abstände sind PROPORTIONAL ZUR ÜBERSCHRIFT, nach Goldenem Schnitt. Die Bühne ist die Referenz, die Abschnitte haben dieselben Verhältnisse, nur kleiner, weil ihre Überschrift kleiner ist. Die Leiter, jede Stufe mal phi: Eyebrow -> Überschrift 0,236 der Überschriftgrösse Überschrift -> Subtext 0,382 Subtext -> Knopf 0,618 Knopf -> Pills 0,382 0,236 mal 1,618 = 0,382 mal 1,618 = 0,618. Es ist eine echte Fibonacci-Leiter und keine geschätzte Staffel. WIE ES PROPORTIONAL WIRD: jeder Kopfblock trägt --kopf-fs, die Grösse seiner Überschrift. Alle Abstände rechnen daraus. Wächst die Überschrift, wachsen die Abstände im gleichen Verhältnis mit, auch bei mehr Zeichen, mehr Knöpfen oder gar keinen Pills. Eine em-Angabe allein reicht nicht, weil ein Knopf die Grösse der Überschrift nicht kennt. */ /* Die Bezugsgrösse wird nicht am Container geraten, sondern an der Überschrift abgelesen, die tatsächlich darin steht. Erster Versuch hatte sie an Container-Klassen gehängt, und dabei gewann der innere Kasten der Bühne mit H2-Grösse über die Bühne selbst: die Verhältnisse im Hero waren dadurch alle um den Faktor 0,73 zu klein. Gemessen und behoben am 2026-08-07 mit pruefung/kopf-rhythmus.js. */ /* Die Vorgabe steht NUR an der Wurzel. Sie darf nicht als *{...} stehen: das setzt den Wert auf jedem Element neu und zerstoert damit die Vererbung, der Subtext bekaeme wieder die Vorgabe statt des Werts seines Kopfblocks. Genau dieser Fehler war der erste Versuch, gemessen am 2026-08-07: die Hero-Verhaeltnisse blieben falsch, obwohl der Container richtig gesetzt war. */ :root{--kopf-fs:var(--fs-800);} *:has(> h1),*:has(> .h1){--kopf-fs:var(--fs-900);} /* 61 px */ *:has(> h2),*:has(> .h2){--kopf-fs:var(--fs-800);} /* 45 px */ *:has(> h3),*:has(> .h3){--kopf-fs:var(--fs-700);} /* 32 px */ /* Eine Karten-Ueberschrift ist kleiner als eine freie H3, ihr Kopf rechnet deshalb mit der Kartengroesse. */ .karte:has(> h3),.kontaktkasten:has(h3){--kopf-fs:var(--fs-600);} /* 26 px */ .eyebrow{display:block;} .eyebrow + h1,.eyebrow + h2,.eyebrow + h3, .eyebrow + .h1,.eyebrow + .h2,.eyebrow + .h3{margin-top:calc(var(--kopf-fs,var(--fs-800)) * .236);} h1 + .lede,h2 + .lede,h3 + .lede, .h1 + .lede,.h2 + .lede,.h3 + .lede, h1 + .text,h2 + .text,h3 + .text, h1 + p,h2 + p,h3 + p{margin-top:calc(var(--kopf-fs,var(--fs-800)) * .382);} .lede + .knopf,.text + .knopf,p + .knopf, .lede + .reihe,.text + .reihe, .lede + .aktionen,.text + .aktionen, .lede + .schritte,.text + .schritte, .lede + form,.text + form{margin-top:calc(var(--kopf-fs,var(--fs-800)) * .618);} /* Pills nach dem Knopf, eine Stufe enger als Subtext zu Knopf. */ .aktionen + .reihe,.knopf + .reihe{margin-top:calc(var(--kopf-fs,var(--fs-800)) * .382);} /* Ein Knopf direkt nach der Überschrift, also ohne Subtext, hält denselben Abstand wie sonst der Subtext. Sonst sieht es aus wie ein Versehen. */ h2 + .knopf,h3 + .knopf{margin-top:calc(var(--kopf-fs,var(--fs-800)) * .382);} /* KEINE Linie unter der Abschnitts-Überschrift, aber ihr Platz bleibt. Roman am 2026-08-07, zweite Runde: "lass bitte einfach den Strich weg, und was aber den Abstand genauso wie er ist, sodass es auch ein bisschen luftiger ist." Also nur der Rahmen fällt weg, das Polster bleibt. Ergebnis: Überschrift und Subtext atmen, ohne einen Strich, den es sonst nirgends gibt. */ section:not(.buehne) .kopfblock > h2, section:not(.buehne) .zwei > div > h2{ padding-bottom:calc(var(--kopf-fs,var(--fs-800)) * .236); } /* Die alten Fixwerte der Überschriften. Sie greifen nur noch, wenn KEIN Eyebrow davorsteht, sonst gewinnt die Leiter oben durch die höhere Spezifität des Geschwister-Selektors. */ .buehne h1,.kopfblock h1,.kopfblock h2{margin-bottom:0;} .kopfblock h2:last-child{margin-bottom:0;} .kopfblock + .drei,.kopfblock + .zwei{margin-top:var(--luft-2xl);} /* Auf das Attribut, nicht auf .bestand: die Klasse setzt erst das Skript, der Abstand muss aber schon vorher stimmen. */ .kopfblock + [data-objekte]{margin-top:var(--luft-2xl);} /* Fliesstext zweiter Ordnung. Der Folgeabstand steckt in der Regel selbst, damit kein Absatz ein eigenes margin braucht. */ .text{color:var(--grau);} .text + .text,.lede + .text{margin-top:var(--luft-m);} /* Querverweise IM Satz. Sie sollen erkennbar sein, ohne wie ein Knopf zu wirken, denn ihr Zweck ist die Verbindung zwischen den Seiten, nicht der nächste Schritt. Bewusst in der Farbe des umgebenden Textes mit einer Linie darunter, nicht in --blau: auf dem dunklen #005091 kommt --blau nur auf 4,23 zu 1 und liegt damit unter AA. Der Fliesstext selbst ist überall geprüft, also ist currentColor immer die sichere Wahl. */ /* SEIT 2026-10-13 auch der Suchwunsch-Satz unter der Objektliste (.bestand .wunsch). Er war verlinkt, sah aber aus wie Text, weil er weder .lede noch .text ist. Roman hat es bemerkt. Knoepfe ausgenommen. */ .lede a,.text a,.bestand .wunsch a:not(.knopf){border-bottom:1px solid;border-color:color-mix(in srgb,currentColor 45%,transparent); transition:color .2s,border-color .2s;} .lede a:hover,.text a:hover,.bestand .wunsch a:not(.knopf):hover{color:var(--tief);border-color:currentColor;} @supports not (color:color-mix(in srgb,red 50%,transparent)){ .lede a,.text a,.bestand .wunsch a:not(.knopf){border-bottom-color:currentColor;} } .text strong{color:var(--schwarz);font-weight:var(--sw-halbfett);} /* Grosse Kennzahl mit Einheit und Erklärung. Zahl, Einheit und Erklärung stehen eng zusammen, weil sie EIN Block sind. Getrennt wird nach draussen durch die Kachelkante, nicht innen durch Abstand. */ .kennzahl .n{font-family:var(--schrift-display);font-size:var(--fs-800); font-weight:var(--sw-halbfett);color:var(--blau);line-height:1;} .kennzahl h4{margin-top:var(--luft-eng);} .kennzahl p{margin-top:var(--luft-eng);} /* Das kursive Serif-Zitat im Über-uns-Block */ .pullquote{font-family:var(--schrift-display);font-size:var(--fs-800); font-weight:var(--sw-normal);font-style:italic;color:var(--tief); line-height:var(--zh-normal);letter-spacing:-.01em;} /* Die Signaturzeile unter einem Textblock */ .signatur{margin-top:var(--luft-l);padding-top:var(--luft-m); border-top:1px solid var(--linie);font-size:var(--fs-300);color:var(--grau);} /* Der Firmenname NIE in der Serifenschrift. Vorgabe Roman am 2026-08-07: "F&M HandelsGesmbH bitte immer in der anderen Schrift, in der serifenlosen". Das Logo ist serifenlos, ein serifenbetonter Firmenname daneben liest sich wie eine andere Firma. */ .signatur b{color:var(--tief);font-family:var(--schrift-text); font-weight:var(--sw-betont);} /* Das freistehende Schild am Bühnenbild. Auf kleinen Schirmen darf es nicht über den Bildrand hinausragen, deshalb rückt es dort in das Bild hinein. */ .schild{position:absolute;left:-22px;bottom:38px; padding:var(--luft-m) var(--luft-l);box-shadow:var(--schatten-karte);} /* "seit 25 Jahren" in der SERIFENLOSEN Schrift. Roman am 2026-08-07: in der Serifenschrift schaute es falsch aus. Der Grund ist benennbar: die Einstellung 'opsz' 72 ist die optische Grösse für Schaugrössen, sie macht die Serifen fein und die Strichstärken kontrastreich. Auf einem kleinen Schild bei 32 Pixel wirkt das dünn und wie ein Fehler, nicht wie Absicht. Die serifenlose Schrift hat dieses Problem nicht. */ .schild .n{font-family:var(--schrift-text);font-size:var(--fs-700); font-weight:var(--sw-betont);color:var(--blau);line-height:1; letter-spacing:-.01em;} .schild .u{margin-top:var(--luft-eng);} @media(max-width:720px){ .schild{left:12px;bottom:12px;} } /* Die Bühne braucht eine Positionsbasis für das Schild */ .bildfeld{position:relative;} /* Rechtstexte laufen in einer eigenen, schmaleren Spalte */ .rechtsspalte{width:min(840px,100% - var(--rand)*2);margin-inline:auto;} /* Nachträge aus der Inline-Auflösung */ .ueberschrift-karte{margin:var(--luft-m) 0;} .link{color:var(--blau);} .link:hover{border-bottom:1px solid currentColor;} .mb{margin-bottom:var(--luft-m);} /* ---------- 14 BESTAND, und zwar auch wenn er leer ist ----------------- Der wichtigste Zustand dieser Website ist NICHT die gefüllte Liste. F&M vermietet, was frei wird, so schnell wie möglich, also ist "alles vermietet" der Normalfall und nicht die Ausnahme. Deshalb ist der leere Zustand hier kein blasser Hinweis, sondern der auffälligste von allen: wer gerade nichts findet, soll seinen Suchwunsch hinterlassen. Genau das ist der Nutzen der Seite für den Vermieter. Zweite Bedingung: der Bestand ist nicht nur Wohnungen. Gewerbe und Lager kommen vor, und irgendwann etwas Drittes. Deshalb Gruppen mit Überschrift statt einer Liste, die alles gleich benennt. */ .bestand .lage{font-family:var(--schrift-display);font-size:var(--fs-600); font-weight:var(--sw-halbfett);color:var(--tief); line-height:var(--zh-normal);margin-bottom:var(--luft-s);} .bestand .text{margin-bottom:var(--luft-l);} .bestand .stand{font-size:var(--fs-300);color:var(--grau);margin-top:var(--luft-m);} .bestand .wunsch{font-size:var(--fs-300);color:var(--grau);margin-top:var(--luft-l); padding-top:var(--luft-m);border-top:1px solid var(--linie);} /* Gruppen-Überschrift über einem Stapel Objektkarten */ .bestand .gruppe{font-size:var(--fs-100);letter-spacing:.2em;text-transform:uppercase; font-weight:var(--sw-betont);color:var(--blau); margin:var(--luft-l) 0 var(--luft-m);} .bestand .gruppe:first-child{margin-top:0;} /* Der leere Zustand. Kein Kasten in Grau, sondern der Platz, an dem sonst die Objekte stehen, mit einem Rahmen in der Hausfarbe. */ .bestand.leer{border:1px solid var(--linie);border-left:3px solid var(--blau); border-radius:var(--radius-m);background:var(--papier); padding:var(--karte-pad-y) var(--karte-pad-x);} .bestand.leer .lage{font-size:var(--fs-700);} .bestand.leer .text{color:var(--grau);max-width:var(--lesebreite);} /* Fehlerfall: die Datei fehlt oder ist unlesbar. Nie eine leere Fläche zeigen, immer einen Weg zur Suche. */ .bestand.fehler{border:1px solid var(--linie);border-radius:var(--radius-m); padding:var(--luft-l);} /* Kurzfassung auf der Startseite. Sie sitzt seit 2026-08-07 in der rechten Spalte (62 Prozent, rund 795 Pixel bei 1440). Deshalb liegen die Karten UNTEREINANDER: zwei nebeneinander wären dort je 365 Pixel breit, davon 34 Prozent Bild, also ein Vorschaubild von 124 Pixel. Zu klein. Die Vorgängerfassung stand in voller Breite, dort war zweispaltig richtig. */ .bestand.kompakt .karten{display:grid;grid-template-columns:1fr;gap:var(--luft-m);} .bestand.kompakt .karten .objektkarte{margin-bottom:0;} /* Der leere Zustand in voller Breite braucht keinen Text über die ganze Zeile, sonst wird die Zeile zu lang zum Lesen. */ .bestand.leer .lage,.bestand.leer .text{max-width:var(--lesebreite);} /* Trennlinie über einem Unterblock innerhalb derselben Sektion. Ersetzt den Abstand, der bei zwei gleich gewichteten Blöcken nicht ausreicht. Bewusst NICHT auf .kopfblock: der ist auf 838 Pixel begrenzt, und die Suchmaske soll die volle Breite nutzen wie der Kasten darüber. */ .trenner{margin-top:var(--luft-2xl);padding-top:var(--luft-xl); border-top:1px solid var(--linie);} /* Erklärender Nachsatz unter einem Baustein. Vorher stand hier .signatur, das bringt aber eine eigene Trennlinie mit und sah unter der Suchmaske nach einem zweiten Abschnittswechsel aus. */ .hinweis{margin-top:var(--luft-m);} /* ---------- 15 WARMER AKZENT, nur mit body.warm ------------------------ Bewusst SPARSAM und nur an Stellen, die Fakten auszeichnen: die Zahlen in den Kennzahlen und Chips, und die Provisionsfrei-Marke auf der Objektkarte. Die tragende Struktur bleibt blau. Ein warmer Akzent soll Wärme geben und nicht die Marke umfärben. Ohne die Klasse `warm` am body passiert hier nichts. Sie wird nur vom Design-Regler gesetzt, damit sich das Ergebnis beurteilen lässt, bevor jemand es entscheidet. */ body.warm .chip b{color:var(--warm);} body.warm .kennzahl .n{color:var(--warm);} body.warm .objektkarte .k{color:var(--warm);} body.warm .pfeil{color:inherit;} /* In der dunklen Sektion würde der Ziegelton auf Blau absaufen, dort bleibt es beim Hellblau. Gemessen: Kontrast von #a9462d gegen #083f6e ist 1,55:1, also unlesbar. */ body.warm section.dunkel .kennzahl .n{color:var(--hell);} /* ========================================================================= OBJEKT-DETAILSEITE (seit 2026-10-13, dritte Fassung nach Romans Vorgaben) ------------------------------------------------------------------------- Zwei Spalten 62 zu 38 wie .zwei.text-links. Links Ueberschrift und alle Daten, rechts ein kompaktes Foto-Mosaik und darunter der Preiskasten, beide laufen beim Scrollen mit. Bei 1920 x 1080 steht das Wesentliche im ersten Bild. Am Handy: Ueberschrift, Fotos, Preis, dann die Daten. Nur vorhandene Werte: Farben, Luft-Stufen, Radius. Namensraum objekt-. ========================================================================= */ .objekt-raster{display:grid;grid-template-columns:1.618fr 1fr;column-gap:var(--luft-xl); grid-template-areas:"kopf seite" "daten seite";align-items:start;} .objekt-kopfbereich{grid-area:kopf;} .objekt-inhalt{grid-area:daten;} .objekt-seite{grid-area:seite;position:sticky;top:110px;} /* Brotkrumen in eigener Zeile UEBER beiden Spalten, damit Eyebrow und Foto-Mosaik auf derselben Hoehe beginnen. Ersetzen seit 2026-10-13 den Link "Alle freien Objekte" (Roman). Etwa 30 px unter dem Seitenkopf, darunter eine Luft-Stufe mehr Abstand zur Eyebrow als vorher. */ .objekt-brotkrumen{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px; font-size:var(--fs-200); /* eine Stufe kleiner (Roman, 2026-10-13) */color:var(--grau); margin-bottom:calc(var(--luft-l) * 1.5);} /* 50 % mehr Luft ueber Mosaik und Eyebrow (Roman, 2026-10-13) */ .objekt-brotkrumen a{color:var(--grau);border-bottom:1px solid var(--linie);} .objekt-brotkrumen a:hover{color:var(--tief);border-color:currentColor;} .objekt-brotkrumen [aria-current]{color:var(--tief);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:90ch;} /* Weg B: echte Titel sind lang, am Rechner fast ganz zeigen (Pruefagent, 2026-10-13) */ /* Erste Sektion der Objektseite naeher an den Seitenkopf: Abstand Kopf bis Eyebrow/Fotos halbiert, gemessen 150 auf 75 px bei 1920 (Roman, 2026-10-13). */ section.objekt-oben{padding-top:calc(var(--luft-l) / 2);} /* Brotkrumen naeher ans Menue, halber Abstand (Roman, 2026-10-13) */ /* Adresse mit Pin, mittig zwischen Ueberschrift und blauer Box. Gesamtabstand wie vorher (luft-s plus luft-xl), jetzt halb und halb (Roman, 2026-10-13). */ .objekt-ort{display:flex;align-items:center;gap:7px;color:var(--grau);font-size:var(--fs-400); margin-top:calc((var(--luft-s) + var(--luft-xl)) / 2);} .objekt-ort .ico{width:1.1em;height:1.1em;flex:none;color:var(--blau);} .objekt-kopfbereich .objekt-eckdaten{margin-top:calc((var(--luft-s) + var(--luft-xl)) / 2);} /* Foto-Mosaik: ein hohes Bild links, zwei rechts uebereinander. Niedrig gehalten, damit der Preiskasten bei 1080 Pixel Hoehe noch darunter passt. */ .objekt-mosaik{display:grid;grid-template-columns:1.618fr 1fr;grid-template-rows:1fr 1fr; gap:var(--luft-s);height:clamp(260px,22vw,380px);} .objekt-mosaik a{position:relative;overflow:hidden;border-radius:var(--radius-m);display:block;cursor:zoom-in;} .objekt-mosaik a:first-child{grid-row:1 / 3;} /* Weniger als drei Fotos (Weg B): eins fuellt alles, zwei stehen nebeneinander. */ .objekt-mosaik.n1{grid-template-columns:1fr;grid-template-rows:1fr;} .objekt-mosaik.n2{grid-template-rows:1fr;} .objekt-mosaik.n1 a:first-child,.objekt-mosaik.n2 a:first-child{grid-row:auto;} .objekt-mosaik img,.objekt-galerie img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s;} .objekt-mosaik a:hover img,.objekt-galerie a:hover img{transform:scale(1.03);} .objekt-mosaik .alle{position:absolute;left:50%;bottom:var(--luft-s);transform:translateX(-50%);white-space:nowrap; background:var(--weiss);color:var(--tief);font-size:var(--fs-300);font-weight:var(--sw-halbfett); padding:6px 13px;border-radius:999px;box-shadow:0 4px 14px rgba(8,63,110,.18);} /* Preiskasten: gleicher Innenabstand rundum statt der grossen Karten-Abstaende, Preis und Provision in einer Zeile, Knoepfe in natuerlicher Breite nebeneinander (Roman, 2026-10-13: "kompakter, aber trotzdem luftig"). */ .objekt-preis{margin-top:calc(var(--luft-m) * 2);padding:var(--luft-l);} /* doppelter Abstand zum Foto-Raster (Roman, 2026-10-13) */ .objekt-preis .preiszeile{display:flex;justify-content:space-between;align-items:center;gap:var(--luft-m);flex-wrap:wrap;} .objekt-preis .betrag{font-family:var(--schrift-display);font-size:var(--fs-800);color:var(--tief);line-height:1.05;} .objekt-preis .betrag small{font-family:var(--schrift-text);font-size:var(--fs-300);color:var(--grau);} .objekt-preis .fakten{margin-top:var(--luft-s);color:var(--grau);} .objekt-preis .reihe{margin-top:var(--luft-l);gap:var(--luft-s);} /* Beide Knoepfe teilen sich die Breite der Box, der Telefonknopf schliesst rechts mit der Provisions-Pill ab (Roman, 2026-10-13). Ist die Box zu schmal fuer beide, stehen sie untereinander ueber die volle Breite. */ .objekt-preis .reihe .knopf{flex:1 1 0;justify-content:center;min-width:max-content;} .objekt-preis .tel-kurz{display:none;} /* Am Handy nebeneinander (Roman, 2026-10-13): die Nummer passt nicht neben "Besichtigung anfragen", "Anrufen" schon. Die Nummer steht im Kontaktkasten und in der Fusszeile, am Handy tippt man ohnehin. */ @media(max-width:600px){ .objekt-preis .tel-lang{display:none;} .objekt-preis .tel-kurz{display:inline;} /* Etwas knapper, damit beide ab 375 px nebeneinander passen (gemessen 2026-10-13). Werte aus dem System: Schrift eine Stufe kleiner, Luft-Stufen. */ .objekt-preis .reihe .knopf{padding-inline:var(--luft-m);gap:var(--luft-s);font-size:var(--fs-200);} } /* Eckdaten: hinterlegt, mit feinen Strichen zwischen den Werten. */ .objekt-eckdaten{display:grid;grid-template-columns:repeat(var(--n,4),1fr); /* --n: so viele Eckdaten, wie edireal liefert (Weg B) */ margin-top:var(--luft-xl);text-align:center; background:var(--flaeche);border-radius:var(--radius-m);padding:var(--luft-m) 0;} .objekt-eckdaten > div{padding:0 var(--luft-l);} .objekt-eckdaten > div + div{border-left:1px solid rgba(8,63,110,.16);} .objekt-eckdaten b{display:block;font-family:var(--schrift-display);font-size:var(--fs-700);color:var(--tief);font-weight:500;} .objekt-eckdaten span{font-size:var(--fs-300);color:var(--grau);} /* Datentabelle: Bezeichnung grau, Wert dunkel, Haarlinie dazwischen. */ .objekt-block{margin-top:var(--luft-xl);} .objekt-block > h2{font-size:var(--fs-700);} .objekt-block > .text{max-width:none;} .objekt-daten{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--luft-xl);margin-top:var(--luft-m);} .objekt-daten div{display:flex;justify-content:space-between;gap:var(--luft-m); padding:10px 0;border-bottom:1px solid var(--linie);font-size:var(--fs-400);} .objekt-daten dt{color:var(--grau);} .objekt-daten dd{margin:0;color:var(--schwarz);text-align:right;} .objekt-daten .summe dd,.objekt-daten .summe dt{font-weight:var(--sw-halbfett);color:var(--tief);} /* Lage: eine Spalte, Werte linksbuendig (Roman, 2026-10-13). */ .objekt-daten.links{grid-template-columns:1fr;} .objekt-daten.links div{display:grid;grid-template-columns:10em 1fr;justify-content:start;} .objekt-daten.links dd{text-align:left;} .objekt-daten dd a{color:var(--blau);border-bottom:1px solid color-mix(in srgb,currentColor 45%,transparent);} .objekt-daten dd a:hover{border-color:currentColor;} .objekt-merkmale{display:flex;flex-wrap:wrap;gap:var(--luft-s);margin-top:var(--luft-m);} /* Galerie unten: vier je Reihe. */ .objekt-galerie{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--luft-m);margin-top:var(--luft-l);} .objekt-galerie a{aspect-ratio:1/1;overflow:hidden;border-radius:var(--radius-m);display:block;cursor:zoom-in;} /* Die Lightbox ist der bildstelle-Baustein (assets/bildstelle-lightbox.*), hier nur mit F&M-Werten statt bildstelle-Gruen. */ .bs-lb{--bs-green:var(--hell);--bs-on-green:var(--tief);--bs-radius:var(--radius-m);--bs-radius-pill:999px;} @media(max-width:900px){ .objekt-raster{grid-template-columns:1fr;grid-template-areas:"kopf" "seite" "daten";} .objekt-seite{position:static;margin-top:var(--luft-l);} .objekt-eckdaten{grid-template-columns:1fr 1fr;row-gap:var(--luft-m);} .objekt-eckdaten > div:nth-child(3){border-left:0;} .objekt-daten{grid-template-columns:1fr;} .objekt-galerie{grid-template-columns:repeat(2,1fr);} .objekt-daten.links div{grid-template-columns:7.5em 1fr;} } /* ========================================================================= EXPOSE ZUM DRUCKEN (seit 2026-10-13) ------------------------------------------------------------------------- Die Objektseite selbst ist das Expose: "Drucken" oder "Als PDF speichern" ergibt eine A4-Seite. Kein zweites Dokument, keine Software am Server. Entsteht eine Objektseite automatisch, hat sie ihr Expose automatisch mit. ========================================================================= */ .druck-kopf,.druck-fuss{display:none;} /* Expose-Leiste als hellblaue Fusszeile der Preisbox (Roman, 2026-10-13): Abstand zu den Knoepfen wie ueber den Knoepfen, Links als Block zentriert, ohne Bezeichnung davor, weit auseinander (Roman, 2026-10-13). */ .objekt-preis{overflow:hidden;padding-bottom:0;} .objekt-expose{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:var(--luft-s) var(--luft-2xl); margin:var(--luft-l) calc(var(--luft-l) * -1) 0;padding:var(--luft-m) var(--luft-l); background:var(--flaeche);border-top:1px solid var(--linie);font-size:var(--fs-300);} .objekt-expose button,.objekt-expose a{display:inline-flex;align-items:center;gap:7px;background:none;border:0; border-bottom:1px solid rgba(8,63,110,.3);padding:0 0 1px;font:inherit;color:var(--tief);cursor:pointer;} .objekt-expose button:hover,.objekt-expose a:hover{border-color:currentColor;} .objekt-expose .ico{width:1.1em;height:1.1em;align-self:center;} /* Am Handy in einer Zeile. Steht HIER, nicht im Handy-Block der Detailseite: der liegt im Quelltext davor und wuerde ueberschrieben. */ @media(max-width:900px){ .objekt-expose{column-gap:var(--luft-xl);} /* Tippflaeche mindestens 44 px, ohne die Unterstreichung zu verschieben. */ .objekt-expose button,.objekt-expose a{position:relative;} .objekt-expose button::before,.objekt-expose a::before{content:"";position:absolute;inset:-10px -6px;} .objekt-brotkrumen [aria-current]{max-width:40ch;} /* "11 Fotos ansehen" passt in die schmale Kachel. */ .objekt-mosaik .alle{font-size:var(--fs-200);padding:5px 9px;} } @media print{ @page{size:A4;margin:11mm 12mm;} body:has(.objekt-raster){background:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact;} body:has(.objekt-raster) .kopf, body:has(.objekt-raster) .fuss, body:has(.objekt-raster) .mobilnav, body:has(.objekt-raster) #fotos, body:has(.objekt-raster) section:has(.kontaktkasten), body:has(.objekt-raster) .sprung, body:has(.objekt-raster) .a11y, .objekt-brotkrumen,.objekt-preis,.objekt-mosaik .alle,.bs-lb{display:none!important;} body:has(.objekt-raster) [data-anim]{opacity:1!important;transform:none!important;} body:has(.objekt-raster) *{transition:none!important;animation:none!important;box-shadow:none!important;} body:has(.objekt-raster) section{padding:0!important;background:none!important;} body:has(.objekt-raster) .wrap{width:auto!important;max-width:none!important;margin:0!important;} .druck-kopf{display:flex!important;justify-content:space-between;align-items:center; padding-bottom:3mm;margin-bottom:4mm;border-bottom:.3mm solid #c9d8e6;font-size:9pt;color:#6b7683;} .druck-kopf img{height:13mm;width:auto;} .druck-angaben{text-align:right;line-height:1.5;} /* Datumsangaben rechts an der Kante, unter der Objektnummer */ .druck-fuss{display:block!important;margin-top:5mm;padding-top:3mm;border-top:.3mm solid #c9d8e6; font-size:8pt;line-height:1.5;color:#6b7683;} .druck-fuss strong{color:#083f6e;} /* Kopf zweispaltig wie auf der Seite (Roman, 2026-10-13, Variante A mit Balken nur links): links Eyebrow, Ueberschrift, Adresse, Viererbalken; rechts das Mosaik, so hoch wie der linke Block, unten buendig mit dem Balken. Die Fotos sind Hochformate, ein breites flaches Mosaik schnitt sie zu Streifen. Vergleich: durchfuehrung/expose-varianten-2026-10-13/. */ .objekt-raster{display:grid!important;grid-template-columns:1.618fr 1fr;column-gap:6mm; grid-template-rows:auto auto 1fr auto auto;align-items:start;} .objekt-raster > *{min-width:0;} .objekt-kopfbereich{display:contents!important;} .objekt-kopfbereich .eyebrow{grid-column:1;grid-row:1;} .objekt-kopfbereich h1{grid-column:1;grid-row:2;} .objekt-ort{grid-column:1;grid-row:3;} .objekt-kopfbereich .objekt-eckdaten{grid-column:1;grid-row:4;} /* Mindesthoehe fuer kurze Titel (Weg B, andere Objekte): dann waechst der Abstand ueber dem Balken, das Mosaik bleibt gross genug. */ .objekt-seite{position:relative!important;top:auto!important;grid-column:2;grid-row:1 / 5;align-self:stretch;min-height:48mm;} .objekt-inhalt{grid-column:1 / -1;grid-row:5;} .objekt-kopfbereich .eyebrow{font-size:7.5pt;} .objekt-kopfbereich h1{font-size:17pt!important;line-height:1.15;margin-top:1.5mm!important;} .objekt-ort{font-size:9pt;margin-top:2mm!important;} .objekt-kopfbereich .objekt-eckdaten{margin-top:4mm!important;padding:2.5mm 0;border-radius:2.5mm;} .objekt-eckdaten b{font-size:13pt;} .objekt-eckdaten span{font-size:7.5pt;} /* Absolut, damit die Fotos die Hoehe nicht mitbestimmen: der Textblock links gibt sie vor. */ .objekt-mosaik{position:absolute;inset:0;height:auto!important;margin-top:0;gap:1.5mm;} .objekt-mosaik a{border-radius:2mm;} /* Feste Aufteilung auf EINE Seite: Kosten und Lage nebeneinander, Objektdaten zweispaltig ueber die volle Breite, Ausstattung und Beschreibung nebeneinander. Reihenfolge im Quelltext: Kosten, Objektdaten, Ausstattung, Beschreibung, Lage. */ .objekt-inhalt{display:grid!important;grid-template-columns:1fr 1fr;column-gap:7mm; grid-template-areas:"kosten lage" "kosten ausst" "objekt objekt" "besch besch";margin-top:1mm;align-items:start;} /* Weg B: Michaels voller Beschreibungstext ist lang. Ueber die volle Breite in zwei Spalten, Ausstattung rechts neben den Kosten unter der Lage. So bleibt das Expose auf einer Seite (gemessen 2026-10-13). */ .objekt-inhalt > .block-besch{break-inside:auto!important;} .objekt-inhalt > .block-besch h2{column-span:all;} .objekt-inhalt > .block-besch{column-count:2;column-gap:7mm;} .objekt-inhalt > .block-besch .text{break-inside:avoid;} /* Nach Namen, nicht nach Position: fehlt ein Block (Weg B, z. B. keine Ausstattung), rutschen die anderen sonst in fremde Felder. */ .objekt-inhalt > .block-kosten{grid-area:kosten;} .objekt-inhalt > .block-objekt{grid-area:objekt;} .objekt-inhalt > .block-ausst{grid-area:ausst;} .objekt-inhalt > .block-besch{grid-area:besch;} .objekt-inhalt > .block-lage{grid-area:lage;} .objekt-inhalt > .block-objekt .objekt-daten{grid-template-columns:1fr 1fr!important;column-gap:7mm;} /* Das Papier ist schmaeler als 900 px, sonst griffe die Handy-Darstellung. */ .objekt-kopfbereich .objekt-eckdaten{grid-template-columns:repeat(var(--n,4),1fr)!important;} .objekt-kopfbereich .objekt-eckdaten > div:nth-child(3){border-left:1px solid rgba(8,63,110,.16)!important;} .objekt-daten .maps{display:none;} .objekt-block{margin-top:3.5mm!important;break-inside:avoid;} .objekt-block > h2{font-size:10.5pt!important;margin:0;} .objekt-daten{grid-template-columns:1fr!important;margin-top:1mm!important;} .objekt-daten div{padding:.8mm 0!important;font-size:8pt!important;} .objekt-daten.links div{grid-template-columns:23mm 1fr!important;} .objekt-daten dd a{border:0;color:inherit;} .objekt-daten dd a::after{content:"";} .objekt-merkmale{gap:1.2mm;margin-top:1.5mm!important;} .objekt-merkmale .chip{font-size:7.5pt;padding:.6mm 2.2mm;min-height:0;} .objekt-block .text{font-size:8pt!important;line-height:1.45;margin-top:1mm!important;} }