/*
 * Claude 2026-07-20: Fundament des dmi_de-Redesigns (Schritt 1 aus
 * docs/2026-07-20-dmi_de-redesign-coding-prompt.md). Rein ADDITIV zum toten
 * Realia-/Bootstrap-Bundle: Design-Tokens, Welt-Scoping (Denkmal/Pflege),
 * self-hosted Serif (Fraunces) und das neue Header/Nav/Footer-Layout.
 *
 * Regeln (aus dem Coding-Prompt):
 *  - Neue Klassen tragen den Praefix `dmi-` (die generischen Dummy-Namen wie
 *    .top/.nav/.wrap/.foot kollidieren mit Bootstrap/Realia -> umbenannt).
 *  - KEINE globalen Element-Selektoren (body/h1/*) hier: die wuerden jede noch
 *    nicht umgebaute Seite treffen. Alles ist auf die dmi-Komponenten gescoped.
 *  - Werte (Hex/Abstaende/Radius/Schatten) 1:1 aus dem Klickdummy uebernommen.
 * Diese Datei wird global via view.yml geladen (Header/Nav/Footer sind auf jeder Seite).
 */

/* ============================ Serif: Fraunces (self-hosted, DSGVO) ============================
 * Variable Font (opsz+wght); wir nutzen den Gewichtsbereich 400-600 aus EINER Datei je Subset. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/fraunces-v38-latin-wght.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: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/fraunces-v38-latin-ext-wght.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;
}

/* ============================ Design-Tokens ============================ */
:root {
  --ink:#20211c; --ink-soft:#3c3d35; --paper:#f7f4ee; --card:#fff; --line:#e7e1d5; --slate:#6c6a60; --dk-gilt:#b98f4b;
  --dk:#2f6b5b; --dk-deep:#234f43; --dk-tint:#e7f0ec; --dk-edge:#cfe0d8;
  /* --pf 2026-07-20 von #bf7327 auf #a35e1c abgedunkelt: weisser Text auf dem Honig-Akzent (Chip/Pill/
     Button/Badge) und Honig-Text auf Weiss (Eyebrow) erfuellen so den WCAG-Kontrast (>=4.5:1, war ~3.7).
     Bleibt warmer Honig (Rose: Farbeindruck erhalten, Kontrast-Alternativen erlaubt). Tints unveraendert. */
  --pf:#a35e1c; --pf-deep:#8c5117; --pf-tint:#f6ecdc; --pf-edge:#ecd8bb;
  --bad:#c0392b;
  --serif:'Fraunces', Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --sans:'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --r:14px; --r-sm:9px;
  --sh:0 12px 34px -18px rgba(32,33,28,.5); --sh-sm:0 5px 16px -9px rgba(32,33,28,.4);
  /* Standard-Akzent = Denkmal; per .world-pf auf Pflege umschaltbar. */
  --accent:var(--dk); --accent-deep:var(--dk-deep); --tint:var(--dk-tint); --edge:var(--dk-edge);
}

/* Welt-Scoping: Komponenten lesen nur var(--accent…); die Welt-Klasse setzt sie um. */
.world-dk { --accent:var(--dk); --accent-deep:var(--dk-deep); --tint:var(--dk-tint); --edge:var(--dk-edge); }
.world-pf { --accent:var(--pf); --accent-deep:var(--pf-deep); --tint:var(--pf-tint); --edge:var(--pf-edge); }

/* Gemeinsamer Zeilencontainer der neuen Komponenten (Header/Nav/Footer). */
.dmi-wrap { max-width:1160px; margin:0 auto; padding:0 24px; }

/* Wiederverwendbare Buttons (Welt-Akzent via var(--accent…)). Bewusst .dmi-btn* statt .btn (Bootstrap-Kollision). */
.dmi-btn { border:0; border-radius:var(--r-sm); padding:12px 20px; font-weight:700; font-size:14px; cursor:pointer; font-family:var(--sans); text-decoration:none; display:inline-block; text-align:center; line-height:1.3; }
.dmi-btn:hover, .dmi-btn:focus { text-decoration:none; }
.dmi-btn-accent { background:var(--accent); color:#fff; }
.dmi-btn-accent:hover, .dmi-btn-accent:focus { background:var(--accent-deep); color:#fff; }
.dmi-btn-ghost { background:#fff; color:var(--accent-deep); border:1px solid var(--edge); }
.dmi-btn-ghost:hover, .dmi-btn-ghost:focus { background:var(--tint); color:var(--accent-deep); }
.dmi-btn-lg { padding:14px 28px; font-size:15px; }

/* ============================ Kopfleiste (Ink) ============================ */
.dmi-top { background:var(--ink); color:var(--paper); }
.dmi-top .dmi-wrap { display:flex; align-items:center; gap:16px; min-height:66px; }
.dmi-brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.dmi-brand svg { height:38px; width:38px; flex:0 0 auto; display:block; }
.dmi-wm { font-family:var(--serif); font-weight:600; font-size:21px; line-height:1; color:var(--paper); }
.dmi-wm .dmi-de { color:var(--dk-gilt); }
.dmi-tag { font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:#b6b6aa; border-left:1px solid #38382f; padding-left:14px; }
.dmi-hdr-phone { margin-left:auto; display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:17px; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--paper); text-decoration:none; }
.dmi-hdr-phone:hover, .dmi-hdr-phone:focus { color:#fff; text-decoration:none; }
.dmi-hdr-phone:hover .dmi-hdr-phone-ic { background:var(--dk-gilt); color:var(--ink); }
.dmi-hdr-phone-ic { flex:0 0 auto; width:34px; height:34px; padding:7px; border-radius:50%; border:1px solid #4a4a3f; color:var(--dk-gilt); transition:background .15s, color .15s; }
.dmi-hdr-phone-txt { text-align:right; }
.dmi-hdr-phone small { display:block; font-weight:400; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#b6b6aa; }

/* ============================ Navigation (weiss, sticky) ============================ */
.dmi-nav { position:sticky; top:0; z-index:40; background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--sh-sm); }
.dmi-nav .dmi-wrap { display:flex; gap:4px; min-height:56px; }
.dmi-nav a { font-size:14.5px; font-weight:600; color:var(--ink-soft); text-decoration:none; padding:18px 16px; border-bottom:3px solid transparent; white-space:nowrap; }
.dmi-nav a:hover, .dmi-nav a:focus { color:var(--ink); text-decoration:none; }
.dmi-nav a.on { color:var(--dk-deep); border-bottom-color:var(--dk); }
.dmi-burger { display:none; margin-left:auto; background:none; border:0; padding:16px; cursor:pointer; }
.dmi-burger i { display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; }

/* ============================ Footer (Ink) ============================
 * Anker auf #footer.dmi-foot, weil Realia den Footer per ID-Selektor stylt
 * (#footer{background:#650c0c}, #footer ul li{...rot, dashed...}). Ein reiner
 * Klassen-Selektor verliert gegen die ID -> hier ID+Klasse fuer hoehere
 * Spezifitaet. Die id="footer" bleibt (realia.js-Affix liest $('#footer').outerHeight). */
#footer.dmi-foot { background:var(--ink); color:#cfcfc6; }
#footer.dmi-foot .dmi-wrap { display:grid; grid-template-columns:repeat(4,1fr); gap:26px; padding:44px 24px 30px; }
#footer.dmi-foot .dmi-fcol { min-width:0; }
#footer.dmi-foot h4 { font-family:var(--sans); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid #34342d; color:#cfcfc6; }
#footer.dmi-foot .dmi-fdk h4 { color:#8fc7b6; }
#footer.dmi-foot .dmi-fpf h4 { color:#e0a45f; }
#footer.dmi-foot ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:13.5px; }
#footer.dmi-foot li { padding:0; line-height:1.35; color:#cfcfc6; list-style:none; border:0; }
#footer.dmi-foot a { color:#cfcfc6; text-decoration:none; }
#footer.dmi-foot a:hover, #footer.dmi-foot a:focus { color:#fff; text-decoration:none; }
#footer.dmi-foot address { font-style:normal; font-size:13.5px; line-height:1.7; margin:0; }
#footer.dmi-foot .badge { background:#34342d; color:#cfcfc6; font-weight:700; }
/* Claude 2026-07-21 (Rose): dezenter Objektanzahl-Chip statt Bootstrap-Badge (app_footer_city_counts, Default aus). */
#footer.dmi-foot .dmi-fcount { float:right; min-width:1.7em; margin-left:8px; padding:1px 7px; border-radius:999px; background:#34342d; color:#9a9a90; font-size:11px; font-weight:700; line-height:1.5; text-align:center; }
#footer.dmi-foot .dmi-foot-copy { border-top:1px solid #34342d; padding:16px 24px; font-size:12.5px; color:#9a9a90; text-align:center; }
/* Inline-Link im Copy-Text: Unterstrich, damit er nicht nur ueber Farbe erkennbar ist (WCAG link-in-text-block). */
#footer.dmi-foot .dmi-foot-copy a { color:#cfcfc6; text-decoration:underline; text-underline-offset:2px; }
#footer.dmi-foot .dmi-foot-copy a:hover { color:#fff; }

/* ============================ Responsive ============================ */
@media (max-width:900px) {
  #footer.dmi-foot .dmi-wrap { grid-template-columns:1fr 1fr; }
}
@media (max-width:680px) {
  .dmi-top .dmi-tag { display:none; }
  .dmi-top .dmi-wrap { min-height:60px; flex-wrap:wrap; padding:8px 24px; gap:2px 12px; }
  .dmi-wm { font-size:18px; }
  .dmi-hdr-phone { font-size:15px; }
  .dmi-hdr-phone small { display:none; }
  .dmi-nav .dmi-wrap { flex-wrap:wrap; }
  .dmi-nav a { display:none; }
  .dmi-nav a.on { display:block; }
  .dmi-nav.open a { display:block; flex:1 1 100%; }
  .dmi-burger { display:block; }
  #footer.dmi-foot .dmi-wrap { grid-template-columns:1fr; }
  #footer.dmi-foot h4 { overflow-wrap:anywhere; }
}
/* select2-Platzhalter dunkler: war #999 (~2.85:1) -> Slate (>=4.5:1, WCAG). Nur der Default-/Platzhalter-
 * Zustand (.select2-default), damit ausgewaehlte Werte ihre eigene (dunkle) Farbe behalten. Global, weil
 * select2 in Suchkarte/estatelist-Filter/Kontakt-/Anfrageformular vorkommt. */
.select2-container .select2-default .select2-chosen { color:#6c6a60; }

/* Datenschutz-Hinweis unter den Formularen war #aaa (~2.3:1) -> Slate (WCAG). Gilt fuers Kontakt- UND
 * das Objekt-Anfrageformular (beide .cform). */
.cform .hint, .cform .hint p { color:#6c6a60; }
.cform .hint a { color:var(--accent-deep); text-decoration:underline; text-underline-offset:2px; }

/* ============================ DSGVO: Cookie-Banner + Maps-Click-to-load ============================ */
.dmi-cookie { position:fixed; left:16px; right:16px; bottom:16px; z-index:130; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:0 18px 50px -18px rgba(0,0,0,.5); padding:20px 22px; max-width:560px; margin:0 auto; }
.dmi-cookie.hide { display:none; }
.dmi-cookie h4 { font-family:var(--serif); font-weight:600; font-size:18px; margin:0 0 6px; color:var(--ink); }
.dmi-cookie p { font-size:13px; color:var(--slate); margin:0 0 14px; line-height:1.55; }
.dmi-cookie .row { display:flex; gap:10px; flex-wrap:wrap; margin:0; }
.dmi-cookie .dmi-btn { flex:1; min-width:150px; }

.dmi-map { position:relative; min-height:340px; background:var(--tint); border:1px solid var(--edge); border-radius:var(--r-sm); overflow:hidden; }
.dmi-map #property-map { height:340px; }
.dmi-map .dmi-map-consent { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; padding:24px; background:var(--tint); }
.dmi-map.dmi-map-loaded .dmi-map-consent { display:none; }
.dmi-map .dmi-map-consent p { max-width:48ch; color:var(--accent-deep); font-size:14px; margin:0; line-height:1.55; }
.dmi-map .dmi-map-remember { font-size:12.5px; color:var(--slate); display:flex; gap:7px; align-items:center; }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
}