@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700;800&display=swap');
/* =====================================================================
   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;
  --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-mid); 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:#fff;border-color:var(--gold); }
:where(.btn-gold:hover){ background:var(--gold-dark);border-color:var(--gold-dark);box-shadow:0 6px 20px rgba(200,150,30,.32); }
:where(.btn-teal){ background:var(--teal-dark);color:#fff;border-color:var(--teal-dark); }
:where(.btn-teal:hover){ background:var(--teal-mid);border-color:var(--teal-mid);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; }

/* 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 <html class="is-mobile"> 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-<style>-
   Regeln der einzelnen Agenten, obwohl dieses Theme zuerst geladen wird.
   Stellschrauben unten als CSS-Variablen → leicht anpassbar.
   ===================================================================== */
:root{ --mobile-bp:720px; }

/* iOS-Auto-Zoom verhindern (16px) + Touch-freundlichere Buttons */
html.is-mobile :where(input,select,textarea){ font-size:16px; }
html.is-mobile :where(.btn){ padding:11px 16px; font-size:.95rem; }

/* Werkzeugleiste der Agenten (#bar) umbruchsicher */
html.is-mobile #bar{ flex-wrap:wrap; gap:8px; padding:10px 12px; }
html.is-mobile #bar select,
html.is-mobile #bar input{ font-size:16px; min-height:38px; }

/* Mehrspaltige Raster → einspaltig */
html.is-mobile .grid2,
html.is-mobile .grid3{ grid-template-columns:1fr; }
html.is-mobile .grid2>div,
html.is-mobile .grid3>div{ min-width:0; }

/* Modale Dialoge → Vollbild */
html.is-mobile .modal{ padding:0; }
html.is-mobile .modal .box{ width:100%; min-height:100%; max-width:none; border-radius:0; margin:0; box-shadow:none; }
html.is-mobile .modal :where(input,select,textarea){ font-size:16px; }

/* Breite Tabellen: standardmäßig horizontal wischbar (ohne Markup-Änderung) */
html.is-mobile :where(main,.card,.scrollx) table:not(.cards){ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Karten-Tabellen (Opt-in: <table class="… cards">, Zellen mit data-label="…") */
html.is-mobile table.cards{ display:block; width:100%; }
html.is-mobile table.cards thead{ display:none; }
html.is-mobile table.cards tbody{ display:block; }
html.is-mobile table.cards tr{ display:block; border:1px solid var(--line); border-radius:12px; margin-bottom:12px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.05); overflow:hidden; }
html.is-mobile table.cards td{ display:flex; justify-content:space-between; align-items:center; gap:12px; border:none; border-bottom:1px solid #eef2f1; padding:9px 14px; min-height:40px; }
html.is-mobile table.cards td:last-child{ border-bottom:none; }
html.is-mobile table.cards td::before{ content:attr(data-label); font-weight:700; color:var(--text-light); font-size:11.5px; flex:0 0 auto; }
html.is-mobile table.cards td:empty{ display:none; }

/* Startseite: Kacheln als einspaltige Liste (Icon links, Titel + Kurztext rechts) */
html.is-mobile .tiles{ grid-template-columns:1fr; gap:10px; }
html.is-mobile .tile{ display:flex; align-items:flex-start; gap:12px; padding:13px 14px; }
html.is-mobile .tile .ic{ width:42px; height:42px; min-width:42px; margin-bottom:0; font-size:1.25rem; }
html.is-mobile .tile h3{ margin:0 0 2px; }
html.is-mobile .tile p{ font-size:.8rem; }
html.is-mobile .tile .go{ display:none; }

/* Shell-App-Leiste umbruchsicher; Agenten-iframe-Höhe an (ggf. höhere) Leiste anpassen */
html.is-mobile .appbar{ flex-wrap:wrap; gap:8px 12px; padding:8px 12px; }
html.is-mobile .appbar .appsw{ margin-left:0; flex:1 1 100%; }
html.is-mobile .appbar .appsw select{ max-width:none; flex:1; }
html.is-mobile .appframe{ height:calc(100vh - var(--appbar-h, 92px)); height:calc(100dvh - var(--appbar-h, 92px)); }

/* =====================================================================
   Zentrale Hilfe / Anleitung (immo-core.js spritzt Knopf + Overlay ein)
   ===================================================================== */
.immo-help-fab{position:fixed;right:16px;bottom:16px;z-index:5000;display:inline-flex;align-items:center;gap:7px;
  background:#005845;color:#fff;border:none;border-radius:24px;padding:10px 16px;font:inherit;font-weight:700;font-size:.92rem;
  box-shadow:0 6px 20px rgba(0,0,0,.28);cursor:pointer;}
.immo-help-fab:hover{background:#00715a;}
.immo-help-fab .q{font-size:1.05rem;line-height:1;}
.immo-help-ov{position:fixed;inset:0;z-index:6000;background:rgba(15,30,27,.55);display:flex;align-items:center;justify-content:center;padding:24px;}
.immo-help-box{background:#fff;width:min(820px,96vw);max-height:92vh;display:flex;flex-direction:column;
  border-radius:14px;box-shadow:0 18px 60px rgba(0,0,0,.45);overflow:hidden;}
.immo-help-hd{display:flex;align-items:center;gap:10px;padding:13px 18px;background:#005845;color:#fff;}
.immo-help-hd b{flex:1;font-size:1.05rem;}
.immo-help-x{background:rgba(255,255,255,.18);color:#fff;border:none;border-radius:7px;width:32px;height:32px;font-size:1rem;cursor:pointer;}
.immo-help-x:hover{background:rgba(255,255,255,.32);}
.immo-help-bd{padding:18px 22px 26px;overflow:auto;line-height:1.6;color:#1e3330;font-size:.97rem;}
.immo-help-bd .immo-help-h1{font-size:1.4rem;font-weight:800;color:#005845;margin:0 0 6px;}
.immo-help-bd .immo-help-lead{font-size:1.02rem;color:#2c4a44;background:#eef6f3;border-left:4px solid #1d6f4f;border-radius:0 8px 8px 0;padding:10px 14px;margin:8px 0 14px;}
.immo-help-bd h3{color:#005845;font-size:1.1rem;margin:20px 0 6px;border-bottom:2px solid #e6f2f0;padding-bottom:4px;}
.immo-help-bd h4{color:#3d8a80;font-size:1rem;margin:14px 0 4px;}
.immo-help-bd p{margin:7px 0;}
.immo-help-bd ol,.immo-help-bd ul{margin:8px 0;padding-left:24px;}
.immo-help-bd li{margin:5px 0;}
.immo-help-bd b{color:#143b33;}
.immo-help-tbl{border-collapse:collapse;width:100%;margin:6px 0 2px;font-size:.93rem;}
.immo-help-tbl th{text-align:left;vertical-align:top;background:#f1f7f5;color:#005845;font-weight:700;border:1px solid #d8e6e1;padding:6px 9px;width:32%;}
.immo-help-tbl td{vertical-align:top;border:1px solid #d8e6e1;padding:6px 9px;}
.immo-help-acc{margin:12px 0;border:1px solid #d8e6e1;border-radius:9px;overflow:hidden;}
.immo-help-acc>summary{cursor:pointer;list-style:none;padding:11px 14px;background:#f1f7f5;color:#005845;font-weight:700;font-size:.98rem;}
.immo-help-acc>summary::-webkit-details-marker{display:none;}
.immo-help-acc>summary::before{content:"▸ ";color:#1d6f4f;}
.immo-help-acc[open]>summary::before{content:"▾ ";}
.immo-help-accbd{padding:6px 14px 14px;}
.immo-help-foot{margin-top:20px;padding-top:12px;border-top:1px solid #e6f2f0;color:#5a7572;font-size:.86rem;}
.immo-help-load{color:#5a7572;padding:14px 0;}
/* Mobil: Knopf kompakt, Overlay als Vollbild */
html.is-mobile .immo-help-fab{right:12px;bottom:12px;padding:11px 14px;}
html.is-mobile .immo-help-fab .t{display:none;}
html.is-mobile .immo-help-fab .q{font-size:1.25rem;}
html.is-mobile .immo-help-ov{padding:0;}
html.is-mobile .immo-help-box{width:100%;max-width:none;height:100%;max-height:100%;border-radius:0;}
html.is-mobile .immo-help-tbl th{width:auto;display:block;border-bottom:none;}
html.is-mobile .immo-help-tbl td{display:block;}
html.is-mobile .immo-help-tbl tr{display:block;margin-bottom:8px;border:1px solid #d8e6e1;border-radius:8px;overflow:hidden;}
/* Hilfe: Häufige Fragen (FAQ) */
.immo-help-faq{margin:6px 0;}
.immo-help-q{border:1px solid #e1ebe8;border-radius:8px;margin:6px 0;background:#fafdfc;}
.immo-help-q>summary{cursor:pointer;list-style:none;padding:9px 13px;font-weight:700;color:#1d6f4f;}
.immo-help-q>summary::-webkit-details-marker{display:none;}
.immo-help-q>summary::before{content:"❔ ";}
.immo-help-q[open]>summary{border-bottom:1px solid #e1ebe8;}
.immo-help-qa{padding:9px 13px;}
.immo-help-qa p{margin:6px 0;}