/* ========================================================================= Richtung 6, gemeinsames Designsystem fuer alle Seiten des Entwurfs mietwohnung-finden.at, bildstelle fuer F&M ------------------------------------------------------------------------- FARBDISZIPLIN (Vorgabe Roman 2026-08-04): Es gibt genau zwei Blaus, und beide stammen pixelgenau aus dem Logo. Alles andere ist Weiss, Logo-Schwarz oder eine Ableitung daraus. Keine frei erfundenen Zwischentoene mehr. #005091 Logo-Blau dunkel (Flaeche des F- und des M-Quadrats) #97bfdc Logo-Blau hell (Flaeche des und-Quadrats) #1a171b Logo-Schwarz (das und-Zeichen, "nicht ganz schwarz") #ffffff Weiss Alle weiteren Werte sind Mischungen genau dieser vier, per color-mix berechnet und mit Hex-Fallback fuer aeltere Browser hinterlegt. Gemessen wurden die Logo-Werte aus assets/fm-logo.png und den drei Quadrat-PNGs, nicht geschaetzt. ========================================================================= */ :root{ /* Die vier Grundfarben, unantastbar */ --blau:#005091; --hell:#97bfdc; --schwarz:#1a171b; --weiss:#ffffff; /* Ableitungen, ausschliesslich Mischungen der vier oben */ --tief:#083f6e; /* 70% blau + 30% schwarz */ --bg:#eef5f9; /* 16% hell + 84% weiss */ --linie:#d3e4f0; /* 42% hell + 58% weiss */ --grau:#7a787b; /* 58% schwarz + 42% weiss */ --papier:#ffffff; --gap:clamp(10px,0.85vw,20px); --pad:clamp(14px,1.15vw,26px); --wrap:min(1560px,94vw); --navh:clamp(54px,4.6vh,68px); --radius:clamp(10px,.85vw,18px); } @supports (color:color-mix(in srgb,red,blue)){ :root{ --tief:color-mix(in srgb, var(--blau) 70%, var(--schwarz)); --bg:color-mix(in srgb, var(--hell) 16%, var(--weiss)); --linie:color-mix(in srgb, var(--hell) 42%, var(--weiss)); --grau:color-mix(in srgb, var(--schwarz) 58%, var(--weiss)); } } /* Ab 1920 skaliert die ganze Seite proportional mit */ @media(min-width:1921px){ :root{--wrap:min(1860px,88vw);} html{font-size:calc(16px + (100vw - 1920px) * 0.0055);} } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{font-family:'Archivo',system-ui,sans-serif;color:var(--schwarz);background:var(--bg); line-height:1.5;-webkit-font-smoothing:antialiased;} /* Kontrastmodus. Vorher hat der Schalter nur das Grau und die Linien etwas nachgedunkelt, also praktisch nichts. Jetzt wird die ganze Palette auf hohen Kontrast umgestellt: alle Blaus wandern nach unten, Flaechen werden weiss. Gemessene Verhaeltnisse 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 Text-Kombinationen erfuellt, nicht nur die AA-Schwelle von 4,5:1. */ body.contrast{ --blau:#00335c; --hell:#d6e8f5; --tief:#00223f; --bg:#ffffff; --papier:#ffffff; --linie:#00335c; --grau:#1a171b; } /* Wer im Betriebssystem hohen Kontrast eingestellt hat, bekommt ihn sofort, ohne den Schalter zu suchen. */ @media(prefers-contrast:more){ body:not(.kontrast-aus){ --blau:#00335c; --hell:#d6e8f5; --tief:#00223f; --bg:#ffffff; --papier:#ffffff; --linie:#00335c; --grau:#1a171b; } } a{color:inherit;text-decoration:none;} img{max-width:100%;} /* ---------- Umbruch-Disziplin ------------------------------------------- Kein einzelnes Wort darf allein in der letzten Zeile stehen, und kurze Ueberschriften sollen auf gleich lange Zeilen verteilt werden statt eine volle Zeile plus ein Wort zu ergeben. Genau dieses Muster liest sich wie automatisch erzeugter Text. balance verteilt kurze Bloecke gleichmaessig, pretty verhindert die einsame letzte Zeile bei Fliesstext. Beides ist reines Fortschritts-CSS: wo der Browser es nicht kennt, bricht nichts, es sieht nur aus wie vorher. */ h1,h2,h3,h4,h5, .claim,.leer .gross,.faq summary,.objekt h3,.card h3, .seitenkopf h1,.stat .l,.keinewohnung strong{text-wrap:balance;} p,li,.faq .a,.cta p,.about p,.leer p,.seitenkopf .lede,.suchbox .fuss{text-wrap:pretty;} /* Lange technische Zeichenketten (E-Mail, URL) nie mitten im Wort brechen */ a[href^="mailto:"],a[href^="tel:"]{overflow-wrap:normal;word-break:keep-all;} .wrap{width:var(--wrap);margin:0 auto;} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} /* ---------- Kopfzeile ---------------------------------------------------- Die Barrierefreiheits-Schalter haengen jetzt IM Layout, buendig mit der rechten Kante des Rasters, und kleben mit der Kopfzeile am oberen Rand. Vorher hingen sie frei am Bildschirmrand, das hat das Raster gebrochen. */ .topnav{position:sticky;top:0;z-index:40;background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(12px);} @supports not (color:color-mix(in srgb,red,blue)){ .topnav{background:rgba(238,245,249,.92);} } .topnav .in{width:var(--wrap);margin:0 auto;display:flex;align-items:center;justify-content:flex-end; gap:clamp(16px,1.6vw,32px);height:var(--navh);} .topnav a.nv{font-size:clamp(13px,.82rem,15px);font-weight:600;color:var(--tief);padding:4px 0; border-bottom:2px solid transparent;transition:border-color .2s;} .topnav a.nv:hover,.topnav a.nv[aria-current="page"]{border-color:var(--blau);} /* Barrierefreiheits-Schalter. 44 mal 44 Pixel ist die komfortable Ziel-Groesse, WCAG 2.5.8 verlangt mindestens 24. Vorher waren es 32 bis 38 Pixel und im Beschriftungstext stand hinter dem A ein Figure-Space ( ), der das A optisch aus der Mitte geschoben hat. Beides korrigiert. */ .a11y{display:flex;gap:8px;margin-left:clamp(8px,1vw,18px);} .a11y button{width:clamp(40px,2.8vw,46px);height:clamp(40px,2.8vw,46px);border:1px solid var(--linie); background:var(--weiss);border-radius:10px;cursor:pointer;font-family:inherit;font-weight:800; color:var(--tief);display:flex;align-items:center;justify-content:center;line-height:1; font-size:clamp(15px,1rem,18px);transition:border-color .2s,color .2s,background .2s;} .a11y button[aria-pressed="true"]{background:var(--blau);border-color:var(--blau);color:var(--weiss);} .a11y button:hover{border-color:var(--blau);color:var(--blau);background:var(--bg);} .a11y button:focus-visible{outline:3px solid var(--blau);outline-offset:2px;} /* ---------- Kacheln (Grundform, von allen Seiten genutzt) ---------------- */ .t{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--papier); border:1px solid var(--linie);display:flex;flex-direction:column;min-height:0; opacity:0;transform:translateY(14px) scale(.987);animation:tileIn .6s cubic-bezier(.22,.61,.36,1) forwards;} @keyframes tileIn{to{opacity:1;transform:none;}} .pad{padding:var(--pad);min-height:0;} .t.hoverable{transition:transform .2s,box-shadow .2s;} .t.hoverable:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(26,23,27,.5);} .t.tief{background:var(--tief);border-color:var(--tief);color:var(--weiss);} .t.blau{background:var(--blau);border-color:var(--blau);color:var(--weiss);} .t.hellblau{background:var(--hell);border-color:var(--hell);color:var(--tief);} .lbl{font-size:clamp(9.5px,.66rem,12px);font-weight:800;letter-spacing:2px;text-transform:uppercase; color:var(--blau);display:block;} .t.tief .lbl,.t.blau .lbl{color:var(--hell);} .t.hellblau .lbl{color:var(--tief);} /* ---------- Buttons ----------------------------------------------------- */ .btn{display:inline-flex;align-items:center;gap:10px;border-radius:100px;font-weight:800; font-family:inherit;cursor:pointer;border:1px solid transparent; padding:clamp(11px,.95vw,16px) clamp(18px,1.5vw,26px);font-size:clamp(.86rem,.98rem,1.15rem); transition:transform .18s,box-shadow .18s,background .2s,color .2s;} .btn .arr{transition:transform .2s;} .btn:hover .arr{transform:translateX(5px);} .btn.weiss{background:var(--weiss);color:var(--blau);} .btn.weiss:hover{transform:translateY(-2px);box-shadow:0 14px 32px -12px rgba(8,63,110,.55);} .btn.voll{background:var(--blau);color:var(--weiss);} .btn.voll:hover{transform:translateY(-2px);box-shadow:0 14px 32px -12px rgba(0,80,145,.5);} .btn.linie{background:transparent;color:var(--blau);border-color:var(--blau);} .btn.linie:hover{background:var(--bg);} .btn.klein{padding:9px 16px;font-size:clamp(12px,.82rem,14px);} .btn:focus-visible{outline:3px solid var(--blau);outline-offset:3px;} /* ---------- Status-Chips ------------------------------------------------ Frueher gab es hier ein erfundenes Gruen. Ersetzt durch die zwei Logo-Blaus: "frei" ist die volle helle Flaeche, "demnaechst" nur Kontur. */ .chip{font-size:clamp(10px,.68rem,13px);font-weight:800;padding:4px 11px;border-radius:100px; white-space:nowrap;letter-spacing:.2px;} .chip.frei{background:var(--hell);color:var(--tief);} .chip.bald{background:transparent;color:var(--hell);border:1px solid currentColor;} .chip.gewerbe{background:var(--weiss);color:var(--blau);} .puls{display:inline-flex;align-items:center;gap:7px;font-size:clamp(10px,.7rem,13px);font-weight:700; color:var(--hell);white-space:nowrap;} .puls::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--hell); box-shadow:0 0 0 4px color-mix(in srgb, var(--hell) 26%, transparent);} @supports not (color:color-mix(in srgb,red,blue)){ .puls::before{box-shadow:0 0 0 4px rgba(151,191,220,.26);} } /* ---------- Objektliste (edireal) --------------------------------------- */ .objliste{list-style:none;display:flex;flex-direction:column;min-height:0;} .objliste li{display:flex;justify-content:space-between;align-items:center;gap:12px; padding:clamp(6px,.62vh,12px) 0;border-bottom:1px solid rgba(255,255,255,.16);} .objliste li:last-child{border-bottom:none;} .objliste .m{font-weight:700;font-size:clamp(.86rem,1rem,1.25rem);} .objliste .s{font-size:clamp(10.5px,.72rem,13.5px);color:var(--hell);margin-top:1px;} /* Fallback-Zustand: kein einziges freies Objekt */ .leer{display:flex;flex-direction:column;gap:.7em;} .leer .gross{font-size:clamp(1.05rem,1.5vw,1.7rem);font-weight:900;letter-spacing:-.02em;line-height:1.15; max-width:22ch;} .leer p{font-size:clamp(.8rem,.9rem,1.05rem);color:var(--hell);max-width:40ch;line-height:1.45;} .leer .karte{border:1px solid rgba(255,255,255,.24);border-radius:12px;padding:clamp(11px,1vw,16px); display:flex;flex-direction:column;gap:5px;} .leer .karte .k{font-size:clamp(9.5px,.64rem,11.5px);letter-spacing:1.6px;text-transform:uppercase;color:var(--hell);} .leer .karte .n{font-weight:800;font-size:clamp(.85rem,.98rem,1.15rem);line-height:1.25;} .leer .karte .d{font-size:clamp(10.5px,.72rem,13px);color:var(--hell);} .more{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-weight:700; font-size:clamp(12px,.84rem,15px);color:var(--weiss);border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:2px;transition:border-color .2s;} .more:hover{border-color:var(--weiss);} /* Der Demo-Schalter existiert NUR im Entwurf, nicht in der spaeteren Website */ .demo{position:absolute;right:10px;bottom:8px;font-size:10px;letter-spacing:.6px;text-transform:uppercase; font-weight:700;color:rgba(255,255,255,.5);background:transparent;border:1px solid rgba(255,255,255,.24); border-radius:100px;padding:4px 10px;cursor:pointer;font-family:inherit;transition:color .2s,border-color .2s;} .demo:hover{color:var(--weiss);border-color:rgba(255,255,255,.6);} /* ---------- FAQ --------------------------------------------------------- Reines details/summary, kein JavaScript. Tastatur und Screenreader funktionieren dadurch ohne Zutun. */ .faq{display:flex;flex-direction:column;min-height:0;} /* Beide Schreibweisen: im Markup steht teils ein Element mit "faq liste", teils eine .liste INNERHALB von .faq. Der reine Nachfahren-Selektor hat den ersten Fall nicht erwischt, dadurch fehlte flex:1 und die Kachel hatte unten ein Loch. */ .faq.liste,.faq .liste{flex:1;min-height:0;overflow:auto;} .faq details{border-bottom:1px solid var(--linie);} .faq details:last-child{border-bottom:none;} .faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:10px; padding:clamp(9px,.85vh,14px) 0;font-weight:700;color:var(--tief); font-size:clamp(.8rem,.9rem,1.05rem);line-height:1.3;} .faq summary::-webkit-details-marker{display:none;} .faq summary::after{content:"+";margin-left:auto;font-weight:800;color:var(--blau); font-size:1.15em;line-height:1;transition:transform .22s;flex:none;} .faq details[open] summary::after{transform:rotate(45deg);} .faq summary:focus-visible{outline:3px solid var(--blau);outline-offset:2px;border-radius:4px;} .faq .a{padding:0 22px clamp(10px,1vh,15px) 0;color:var(--grau); font-size:clamp(.76rem,.85rem,1rem);line-height:1.5;max-width:52ch;} .faq .a a{color:var(--blau);border-bottom:1px solid currentColor;} /* Dunkle FAQ-Variante fuer farbige Flaechen */ .faq.aufdunkel details{border-color:rgba(255,255,255,.2);} .faq.aufdunkel summary{color:var(--weiss);} .faq.aufdunkel summary::after{color:var(--hell);} .faq.aufdunkel .a{color:var(--hell);} /* ---------- Inhaltsseiten (Unterseiten) --------------------------------- */ .seite{padding:clamp(30px,4.4vh,58px) 0 clamp(48px,6vh,84px);} /* Seitenkopf der Unterseiten. Die Logo-Quadrate stehen LINKS OBEN ueber der Ueberschrift, nicht rechts. Links oben ist der Ort, an dem eine Marke gesucht wird, und die Seite liest sich dadurch in einer Achse von oben nach unten. */ .seitenkopf{margin-bottom:clamp(24px,3.2vh,44px);} .seitenkopf h1{font-size:clamp(1.9rem,4vw,3.6rem);font-weight:900;letter-spacing:-.035em;line-height:1.02; color:var(--tief);margin-top:.24em;} .seitenkopf .lede{color:var(--grau);font-size:clamp(.95rem,1.05rem,1.25rem);max-width:46ch;margin-top:.8em;} .seitenkopf .marke{display:flex;gap:6px;margin-bottom:clamp(16px,1.8vh,26px);} .seitenkopf .marke img{width:clamp(38px,3.4vw,58px);height:auto;border-radius:6px;display:block;} h2.ab{font-size:clamp(1.4rem,2.3vw,2.2rem);font-weight:900;letter-spacing:-.03em;color:var(--tief); line-height:1.08;margin-top:.28em;max-width:24ch;} h3.ab{font-size:clamp(1.02rem,1.25vw,1.32rem);font-weight:800;color:var(--tief);letter-spacing:-.015em; margin:1.6em 0 .4em;} .fliess p{color:var(--grau);font-size:clamp(.88rem,.98rem,1.12rem);max-width:70ch;margin-bottom:.85em;line-height:1.6;} .fliess p strong{color:var(--schwarz);} .fliess ul{color:var(--grau);font-size:clamp(.88rem,.98rem,1.12rem);max-width:70ch; margin:0 0 .9em 1.15em;line-height:1.6;} .fliess li{margin-bottom:.3em;} .fliess a{color:var(--blau);border-bottom:1px solid currentColor;} .kasten{background:var(--papier);border:1px solid var(--linie);border-radius:var(--radius); padding:clamp(18px,1.8vw,30px);} .kasten.blau{background:var(--blau);border-color:var(--blau);color:var(--weiss);} .kasten.blau p{color:var(--hell);} .kasten.tief{background:var(--tief);border-color:var(--tief);color:var(--weiss);} .kasten.tief p{color:var(--hell);} /* Auf farbigen Kaesten muss das Kicker-Label hell werden, sonst steht Dunkelblau auf Dunkelblau. Gleicher Fehler wie zuvor in der Such-Box. */ .kasten.blau .lbl,.kasten.tief .lbl{color:var(--hell);} .kasten.hinweis{border-left:4px solid var(--blau);} .raster2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);} .raster3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);} /* ---------- Suchformular (GET direkt an edireal) ------------------------ */ .suchbox{background:var(--tief);border-radius:var(--radius);padding:clamp(20px,2.2vw,34px);color:var(--weiss);} .suchbox .lbl{color:var(--hell);} /* sonst dunkelblau auf dunkelblau */ .suchbox .felder{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr auto;gap:12px;align-items:end;margin-top:1.1em;} .suchbox label{display:flex;flex-direction:column;gap:6px;font-size:clamp(10px,.68rem,12px); letter-spacing:1.4px;text-transform:uppercase;font-weight:800;color:var(--hell);} .suchbox input,.suchbox select{font-family:inherit;font-size:clamp(.85rem,.95rem,1.05rem);font-weight:600; padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.1);color:var(--weiss);width:100%;} .suchbox input::placeholder{color:rgba(255,255,255,.5);font-weight:400;} .suchbox select option{background:var(--tief);color:var(--weiss);} .suchbox input:focus,.suchbox select:focus{outline:none;border-color:var(--hell);background:rgba(255,255,255,.16);} .suchbox .fuss{margin-top:1em;font-size:clamp(11px,.76rem,13px);color:var(--hell);max-width:66ch;line-height:1.5;} /* ---------- Ergebniskarten ---------------------------------------------- */ .treffer{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:var(--gap);} .objekt{background:var(--papier);border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden; display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;} .objekt:hover{transform:translateY(-3px);box-shadow:0 20px 44px -26px rgba(26,23,27,.45);} .objekt .bild{aspect-ratio:4/3;background:var(--bg);overflow:hidden;position:relative;} .objekt .bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.22,.61,.36,1);} .objekt:hover .bild img{transform:scale(1.05);} .objekt .bild .chip{position:absolute;top:12px;left:12px;} .objekt .txt{padding:clamp(15px,1.4vw,22px);display:flex;flex-direction:column;flex:1;gap:.42em;} .objekt h3{font-size:clamp(.98rem,1.08rem,1.24rem);font-weight:800;color:var(--tief);letter-spacing:-.015em;line-height:1.25;} .objekt .ort{font-size:clamp(11.5px,.78rem,13.5px);color:var(--grau);font-weight:600;} .objekt .daten{display:flex;gap:16px;flex-wrap:wrap;margin-top:.2em;padding-top:.6em;border-top:1px solid var(--linie);} .objekt .daten div{display:flex;flex-direction:column;} .objekt .daten .k{font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--grau);font-weight:800;} .objekt .daten .v{font-weight:800;color:var(--tief);font-size:clamp(.9rem,1rem,1.15rem);} .objekt .btn{margin-top:auto;align-self:flex-start;} /* ---------- Fussbereich -------------------------------------------------- */ footer{background:var(--tief);color:var(--hell);padding:clamp(40px,5vh,64px) 0 24px;margin-top:clamp(30px,4vh,60px);} .ft{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px;padding-bottom:26px; border-bottom:1px solid rgba(255,255,255,.16);} .ft .b{font-weight:900;color:var(--weiss);font-size:1.2rem;letter-spacing:-.02em;} .ft p{font-size:.9rem;max-width:34ch;margin-top:9px;} .ft h5{font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--hell);margin-bottom:12px;} .ft ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:.94rem;} .ft ul a:hover{color:var(--weiss);} .fb{display:flex;justify-content:space-between;padding-top:20px;font-size:.85rem;flex-wrap:wrap;gap:10px;} /* ---------- Mobile ------------------------------------------------------- */ @media(max-width:900px){ .seitenkopf{grid-template-columns:1fr;gap:18px;} .seitenkopf .marke{justify-self:start;} .raster2,.raster3{grid-template-columns:1fr;} .suchbox .felder{grid-template-columns:1fr 1fr;} .suchbox .felder .weit{grid-column:1 / -1;} .ft{grid-template-columns:1fr;gap:22px;} } @media(max-width:560px){ .suchbox .felder{grid-template-columns:1fr;} .topnav .in{gap:14px;} .topnav a.nv{font-size:12.5px;} } @media(prefers-reduced-motion:reduce){ .t{animation:none;opacity:1;transform:none;} *{transition:none!important;} }