/* dieimmobilienmaklerwiesbaden.de — Designsystem
   Hergeleitet aus den beiden Seiten, die im SERP fuer "immobilienmakler wiesbaden"
   organisch vorn stehen: makler-wiesbaden.de (Platz 1) und grundum.de.
   Uebernommen: heller Kopf, Logo links, Telefon farbig oben rechts, Panorama-Hero,
   ruhige Flaechen, viel Weissraum. Nicht uebernommen: Goldton (Wagner) — wir
   nehmen Petrol, damit die Seite nicht wie eine Kopie wirkt. */

:root{
  --brand:#0f4c5c;        /* Petrol: Kopf, Ueberschriften, Links */
  --brand-dark:#0a3642;
  --accent:#a8600f;       /* Handlung: Schaltflaechen, Telefon */
  --accent-dark:#8a4e0b;
  --ink:#16232e;
  --ink-soft:#4d5c6a;
  --line:#e2e8ec;
  --bg:#ffffff;
  --bg-alt:#f5f7f8;
  --bg-dark:#0f2430;
  --ok:#1c6b3f;
  --max:1140px;
  --radius:8px;
  --shadow:0 1px 3px rgba(15,36,48,.08),0 8px 24px rgba(15,36,48,.06);
  --font-head:"Iowan Old Style",Georgia,"Times New Roman",serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:17px;line-height:1.65;
     color:var(--ink);background:var(--bg)}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-underline-offset:2px}
a:hover{color:var(--brand-dark)}

h1,h2,h3,h4{font-family:var(--font-head);line-height:1.22;color:var(--brand);
            margin:0 0 .5em;font-weight:600}
h1{font-size:clamp(1.9rem,4.2vw,2.9rem)}
h2{font-size:clamp(1.45rem,2.8vw,2.05rem);margin-top:0}
h3{font-size:1.18rem}
p{margin:0 0 1.1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}

/* --- Kopf --- */
.site-header{background:var(--bg);border-bottom:1px solid var(--line);
             position:sticky;top:0;z-index:50}
.nav{max-width:var(--max);margin:0 auto;padding:12px 20px;display:flex;
     align-items:center;gap:20px;flex-wrap:wrap}
.nav__logo{font-family:var(--font-head);font-size:1.14rem;font-weight:600;
           color:var(--brand);text-decoration:none;line-height:1.2;margin-right:auto}
.nav__logo span{display:block;font-family:var(--font-body);font-size:.7rem;
                font-weight:400;letter-spacing:.09em;text-transform:uppercase;
                color:var(--ink-soft)}
.nav__links{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0}
.nav__links a{color:var(--ink);text-decoration:none;font-size:.95rem}
.nav__links a:hover{color:var(--accent-dark)}
/* Telefon ist immer sichtbar — Karims stehende Regel seit den Umzugsseiten. */
.nav__call{font-weight:700;color:var(--accent-dark)!important;white-space:nowrap}
.nav__toggle{display:none;background:none;border:1px solid var(--line);
             border-radius:var(--radius);font-size:1.3rem;padding:4px 11px;cursor:pointer}

/* --- Hero --- */
/* Hero: Bild und Text werden im selben Rasterfeld gestapelt statt den Text
   absolut zu positionieren. Mit position:absolute konnte der Text den Hero
   nicht hoeher machen — auf 375 px Breite lief er um 17 px heraus und wurde
   abgeschnitten. Beim Stapeln bestimmt der hoehere der beiden die Hoehe. */
/* HERO — dreimal korrigiert, deshalb ausfuehrlich:
   1. Erst war .hero__inner absolut positioniert: Der Text konnte den Hero nicht
      hoeher machen und lief auf 375 px Breite unten heraus.
   2. Dann Rasterstapelung: behob den Ueberlauf, aber das Bild mit opacity:.42
      erzeugt einen Stapelkontext und lag ueber dem Text.
   3. Dann min-height am Hero: begrenzt nur nach unten. Das Bild (1600x1200) hatte
      weiterhin keine definite Bezugshoehe, height:100% loeste sich zu auto auf,
      und bei 1440 px Breite wurde der Hero 1080 px hoch.

   Loesung: Das BILD liegt absolut und traegt damit nichts zur Hoehe bei. Der
   INHALT steht im normalen Fluss und bestimmt die Hoehe — mit min-height als
   Untergrenze. Waechst der Text (Handy), waechst der Hero mit; ist er kurz,
   bleibt es beim knappen Band. */
.hero{position:relative;background:var(--bg-dark);isolation:isolate}
.hero__media{position:absolute;inset:0;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover;
                 object-position:50% 38%;   /* Kurhaus sitzt im oberen Drittel */
                 opacity:.55}
/* Abdunkelung hinter dem Text. Ohne sie steht weisse Schrift vor der hellen
   Kurhausfassade und ist praktisch unlesbar — die Deckkraft des Bildes allein
   reicht nicht, weil das Motiv selbst hell ist. Der Verlauf ist links stark
   und rechts schwach: Dort steht der Text, rechts bleibt der Brunnen sichtbar. */
.hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(11,28,38,.88) 0%, rgba(11,28,38,.78) 38%,
    rgba(11,28,38,.45) 68%, rgba(11,28,38,.30) 100%)}
.hero__inner{position:relative;z-index:1;
             min-height:clamp(320px,44vh,440px);
             display:flex;flex-direction:column;justify-content:center;
             width:100%;max-width:var(--max);margin:0 auto;padding:28px 20px;
             box-sizing:border-box}

.hero__inner h1{color:#fff;max-width:16em;margin-bottom:.35em;
                text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hero__eyebrow{color:#e8c9a0;text-transform:uppercase;letter-spacing:.11em;
               font-size:.76rem;font-weight:700;margin:0 0 .7em;
               text-shadow:0 1px 10px rgba(0,0,0,.5)}
.hero__inner>p:not(.hero__eyebrow){color:#fff;max-width:34em;font-size:1.06rem;
                                   text-shadow:0 1px 12px rgba(0,0,0,.45)}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}

/* --- Schaltflaechen --- */
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
     padding:12px 24px;border-radius:var(--radius);font-weight:600;font-size:.98rem;
     border:2px solid var(--accent);transition:background .15s,border-color .15s}
.btn:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}
.btn--ghost{background:transparent;border-color:currentColor;color:var(--brand)}
.btn--ghost:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.btn--lg{padding:15px 32px;font-size:1.04rem}
.hero .btn--ghost{color:#fff;border-color:rgba(255,255,255,.7)}
.hero .btn--ghost:hover{background:#fff;color:var(--brand);border-color:#fff}

/* --- Abschnitte --- */
.section{padding:56px 0}
.section--alt{background:var(--bg-alt)}
.section--tight{padding:26px 0}
.section__lead{font-size:1.08rem;color:var(--ink-soft);max-width:46em}
.center{text-align:center}

.grid{display:grid;gap:22px}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
      padding:24px;box-shadow:var(--shadow)}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}

/* --- Datentabelle (Bodenrichtwerte) --- */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.95rem;background:var(--bg)}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)}
th{background:var(--brand);color:#fff;font-weight:600;white-space:nowrap}
tbody tr:nth-child(even){background:var(--bg-alt)}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.trend-up{color:var(--ok);font-weight:600}
.trend-down{color:#a13232;font-weight:600}

/* --- FAQ --- */
.faq details{border:1px solid var(--line);border-radius:var(--radius);
             margin-bottom:10px;background:var(--bg)}
.faq summary{padding:15px 18px;cursor:pointer;font-weight:600;color:var(--brand);
             font-family:var(--font-head);font-size:1.04rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;font-weight:400;font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details>*:not(summary){padding:0 18px}
.faq details>p:last-child{padding-bottom:15px}

/* --- Linkliste (Stadtteile/Orte) --- */
.linklist{list-style:none;padding:0;margin:0;display:grid;gap:8px;
          grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.linklist a{display:block;padding:10px 14px;background:var(--bg);
            border:1px solid var(--line);border-radius:var(--radius);
            text-decoration:none;color:var(--ink);font-size:.94rem}
.linklist a:hover{border-color:var(--brand);color:var(--brand)}

/* --- CTA-Band --- */
.cta-band{background:var(--brand);color:#fff;padding:52px 0;text-align:center}
.cta-band h2,.cta-band p{color:#fff}
.cta-band p{max-width:38em;margin-left:auto;margin-right:auto}

/* --- Formular --- */
.form-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
           max-width:720px}
.field{display:flex;flex-direction:column;gap:5px}
.field--full{grid-column:1/-1}
label{font-weight:600;font-size:.92rem;color:var(--ink)}
input,select,textarea{font:inherit;font-size:1rem;padding:11px 13px;
                      border:1px solid #b9c4cc;border-radius:var(--radius);
                      background:var(--bg);color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);
                                        outline-offset:1px;border-color:var(--brand)}
.consent{grid-column:1/-1;display:flex;gap:11px;align-items:flex-start;
         font-size:.9rem;color:var(--ink-soft);line-height:1.5}
.consent input{width:auto;margin-top:3px;flex:0 0 auto}

/* --- Fuss --- */
.site-footer{background:var(--bg-dark);color:rgba(255,255,255,.82);
             padding:46px 0 22px;font-size:.94rem;margin-top:0}
.site-footer h4{color:#fff;font-size:1rem;margin:0 0 12px}
.site-footer a{color:rgba(255,255,255,.86)}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:7px}
.footer-note{font-size:.84rem;color:rgba(255,255,255,.6);line-height:1.55}
.footer-bottom{border-top:1px solid rgba(255,255,255,.16);margin-top:30px;
               padding-top:16px;font-size:.86rem;color:rgba(255,255,255,.6)}

/* --- Klein --- */
@media (max-width:860px){
  .nav__toggle{display:block;order:2}
  .nav__links{display:none;order:3;flex-basis:100%;flex-direction:column;
              align-items:flex-start;gap:0;padding-top:8px}
  .nav__links.open{display:flex}
  .nav__links li{width:100%;border-top:1px solid var(--line)}
  .nav__links a{display:block;padding:12px 2px;width:100%}
  .section{padding:40px 0}
  body{font-size:16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}