/* Raleway LOKAL eingebunden (M-5d/T-17): der frühere Google-Fonts-Import übertrug bei jedem Seitenaufruf die IP-Adresse an Google (LG München I, 3 O 17493/20) — auch auf den öffentlichen Mieterseiten. Variable Schrift (ein File je Zeichensatz deckt 400–800). */ @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/raleway-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/raleway-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ===================================================================== Immoservice-Agents – gemeinsames Erscheinungsbild (Theme) Orientiert am Webauftritt www.immoservice-luckei.de Markenfarben Teal/Waldgrün + Gold-Akzent, Schrift Raleway. Basisregeln nutzen :where() (geringe Spezifität), damit app-eigene Stile nicht überschrieben werden. ===================================================================== */ :root{ --teal-dark:#005845; --teal:#007060; --teal-mid:#3d8a80; --teal-light:#e6f2f0; --sage:#7ba8a4; --sage-dark:#4a807a; --gold:#c8961e; --gold-dark:#a97d18; /* E-2 (04 B3): Werte für SCHRIFT. --teal-mid und --gold sind Flächenfarben und tragen als Schrift auf Weiß nur 4,08:1 bzw. 2,68:1 — dafür stehen hier eigene Werte. Gemessen nach WCAG 2.1 gegen Weiß (Testfall 38 rechnet sie nach): --text-muted 5,62:1 gedämpfte Erklär- und Hinweistexte (ISL-Briefgenerator hat ein eigenes `--muted`; der Name hier ist deshalb bewusst anders). Bericht 04 B3 schlug #5a6b68 vor — der trägt auf dem hellsten Markenton #e6f2f0 exakt 4,4998:1 und verfehlt den Wert knapp. --teal-text 5,86:1 Verweise, Gruppentitel · zugleich Flächenfarbe mit weißer Schrift --gold-text 4,90:1 Gold als Schrift auf hellem Grund --on-gold 5,18:1 Schrift AUF dem goldenen Knopf (weiß trug dort nur 2,68:1) --gold-hover 6,72:1 Überfahren hellt auf; --gold-dark wäre mit dunkler Schrift 3,72:1 */ --text-muted:#5a6b68; --teal-text:#2f6f66; --gold-text:#8a6d1a; --on-gold:#3a2a05; --gold-hover:#d3a334; --gray:#d8e4e2; --line:#cfdad7; --bg:#f7faf9; --card:#ffffff; --text:#1e3330; --text-light:#5a7572; --ok:#0a7d4f; --warn:#a8071a; --font:'Raleway','Segoe UI',system-ui,Arial,sans-serif; --radius:12px; --shadow:0 4px 20px rgba(0,88,69,.10); --shadow-lg:0 14px 40px rgba(0,88,69,.16); } /* sanfte Grunddefaults (überschreibbar durch App-CSS) */ :where(body){ font-family:var(--font); color:var(--text); background:var(--bg); line-height:1.6; } :where(h1,h2,h3,h4){ font-family:var(--font); color:var(--teal-dark); font-weight:800; letter-spacing:.2px; } :where(a){ color:var(--teal-text); text-decoration:none; transition:color .2s; } :where(a:hover){ color:var(--teal-dark); } :where(.ok){ color:var(--ok); font-weight:700; } :where(.warn){ color:var(--warn); font-weight:700; } /* Buttons – gold (CTA), teal, outline – wie auf der Website */ :where(.btn){ display:inline-flex;align-items:center;gap:7px;justify-content:center; padding:10px 18px;border-radius:9px;border:2px solid transparent; background:#fff;color:var(--teal-dark);font:inherit;font-weight:700;font-size:.9rem;letter-spacing:.3px; cursor:pointer;transition:transform .18s,background .2s,border-color .2s,box-shadow .2s; } :where(.btn:hover){ transform:translateY(-2px); } :where(.btn-gold){ background:var(--gold);color:var(--on-gold);border-color:var(--gold); } :where(.btn-gold:hover){ background:var(--gold-hover);border-color:var(--gold-hover);box-shadow:0 6px 20px rgba(200,150,30,.32); } :where(.btn-teal){ background:var(--teal-dark);color:#fff;border-color:var(--teal-dark); } /* E-2: Überfahren ging bisher auf --teal-mid — weiße Schrift trug dort 4,08:1. */ :where(.btn-teal:hover){ background:var(--teal-text);border-color:var(--teal-text);box-shadow:0 6px 20px rgba(0,88,69,.25); } :where(.btn-outline){ background:#fff;color:var(--teal-dark);border-color:var(--gray); } :where(.btn-outline:hover){ border-color:var(--teal-mid); } :where(input,textarea,select){ font:inherit;color:var(--text);background:#fff; border:1.5px solid var(--line);border-radius:8px;padding:9px 11px;outline:none;transition:border-color .2s,box-shadow .2s; } :where(input:focus,textarea:focus,select:focus){ border-color:var(--teal-mid);box-shadow:0 0 0 3px rgba(61,138,128,.14); } :where(.card){ background:var(--card);border:1px solid var(--gray);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px; } /* ===================================================================== E-2 (04 B5): sichtbarer Fokusrahmen — wer mit der Tastatur arbeitet, sieht, wo er steht. `:focus-visible` kam bisher NULL-mal vor. Warum `!important`: die Agenten setzen an vielen Stellen `outline:none` auf `:focus` (z. B. `.fld input:focus{outline:none;…}`). Diese Regeln greifen auch im Fall `:focus-visible` und haben mit ihrer Klasse die höhere Spezifität — eine Regel ohne `!important` bliebe wirkungslos. Dasselbe Muster nutzt schon die Mobil-Schicht weiter unten. Die Maus bleibt unberührt: `:focus-visible` greift nur bei Tastatur- bedienung. Der Rahmen liegt AUSSERHALB des Elements (outline-offset), deshalb gilt er auch auf goldenen und grünen Knöpfen gegen den hellen Seitengrund (8,46:1) und verschiebt kein Layout. ===================================================================== */ :where(a,button,summary,input,select,textarea,[role="button"],[tabindex]:not([tabindex="-1"])):focus-visible{ outline:3px solid var(--teal-dark) !important; outline-offset:2px !important; border-radius:3px; } /* Auf dunklem Grund (App-Leiste, Sperrbild) wäre Waldgrün auf Waldgrün unsichtbar. */ :where(.immo-appbar,.appbar) :where(a,button,select,input):focus-visible{ outline-color:#ffffff !important; } /* dezente, markenfarbene Scrollbalken */ *::-webkit-scrollbar{ width:11px;height:11px; } *::-webkit-scrollbar-thumb{ background:#c2d6d1;border-radius:8px;border:3px solid transparent;background-clip:content-box; } *::-webkit-scrollbar-thumb:hover{ background:#9fc0b9;border:3px solid transparent;background-clip:content-box; } /* ===== Einheitliche App-Leiste (für eigenständig geöffnete Agenten) ===== */ .immo-appbar{ display:flex;align-items:center;gap:12px; background:linear-gradient(135deg,var(--teal-dark) 0%,var(--teal) 60%,var(--teal-mid) 100%); color:#fff;padding:10px 18px;font-family:var(--font); } .immo-appbar .logo{ width:34px;height:34px;border-radius:9px;background:#fff; display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto;overflow:hidden; } .immo-appbar .logo img{ width:100%;height:100%;object-fit:contain; } .immo-appbar .titles{line-height:1.2;} .immo-appbar .titles b{display:block;font-size:.95rem;font-weight:800;letter-spacing:.3px;} .immo-appbar .titles span{font-size:.74rem;opacity:.85;} .immo-in-shell .immo-appbar{ display:none; } /* ===================================================================== ZENTRALE MOBIL-/KOMPAKT-SCHICHT (nur Darstellung, keine Funktion) Greift ausschließlich, wenn gesetzt ist – das übernimmt immo-core.js (automatisch via matchMedia(--mobile-bp) ODER manuell über den Ansicht-Umschalter Auto/Handy/Desktop). Erhöhte Spezifität (html.is-mobile …) überschreibt die Inline-