/* =================================================================
   Immobilien Simon – Abteilung "Immobilie in besonderen Lebenslagen"
   Gemeinsames Stylesheet. Markenpalette aus Flyer & Landingpage.
   Diese Datei einmal hochladen, alle Artikel verlinken sie.
   ================================================================= */


:root{
  --gruen:#213B37;
  --gruen-tief:#1A2F2B;
  --gold:#B0915E;
  --gold-hell:#C9AE83;
  --gold-linie:#BFA06A;
  --creme:#F9F4EE;
  --creme-hell:#FCF9F3;
  --creme-dunkel:#F2EBE1;
  --skizze:#C9B79A;
  --text:#3C3B34;
  --text-hell:#6E6C66;
  --rose:#B7A18E;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --maxread:46rem;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:var(--creme);
  background-image:linear-gradient(180deg,var(--creme-hell),var(--creme) 40%);
  line-height:1.7;
  font-size:18px;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Gold-Raute Signatur (vom Flyer) ---------- */
.raute-line{
  display:flex;align-items:center;justify-content:center;
  gap:.9rem;margin:1.4rem 0;color:var(--gold);
}
.raute-line::before,.raute-line::after{
  content:"";height:1px;flex:1;max-width:120px;
  background:linear-gradient(90deg,transparent,var(--gold-linie));
}
.raute-line::after{background:linear-gradient(90deg,var(--gold-linie),transparent);}
.raute{width:7px;height:7px;background:var(--gold);transform:rotate(45deg);flex:none;}

/* ---------- Kopfband ---------- */
.kopf{
  background:var(--gruen);
  background-image:linear-gradient(160deg,var(--gruen),var(--gruen-tief));
  color:var(--creme-hell);
  padding:1.1rem 1.5rem;
}
.kopf-inner{max-width:64rem;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.marke{font-family:var(--serif);font-weight:600;font-size:1.5rem;letter-spacing:.06em;color:var(--creme-hell);text-decoration:none;}
.marke span{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.34em;color:var(--gold-hell);text-transform:uppercase;margin-top:.1rem;}
.kopf-nav{display:flex;gap:1.4rem;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;}
.kopf-nav a{color:var(--gold-hell);text-decoration:none;transition:color .2s;}
.kopf-nav a:hover{color:#fff;}

/* ---------- Brotkrumen ---------- */
.crumbs{max-width:var(--maxread);margin:1.4rem auto 0;padding:0 1.5rem;font-size:.82rem;color:var(--text-hell);}
.crumbs a{color:var(--text-hell);text-decoration:none;border-bottom:1px solid var(--skizze);}
.crumbs a:hover{color:var(--gruen);}
.crumbs span{color:var(--gold);}

/* ---------- Artikelkopf ---------- */
.hero{max-width:var(--maxread);margin:0 auto;padding:1.6rem 1.5rem .4rem;}
.eyebrow{font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:600;}
h1{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(2.1rem,5.4vw,3.15rem);
  line-height:1.1;color:var(--gruen);margin:.5rem 0 .6rem;letter-spacing:.005em;
}
.lede{font-size:1.18rem;color:var(--text-hell);margin:.4rem 0 0;}
.meta{font-size:.8rem;color:var(--text-hell);margin-top:1.1rem;display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center;}
.meta b{color:var(--text);font-weight:600;}

/* ---------- Inhalt ---------- */
article{max-width:var(--maxread);margin:0 auto;padding:.5rem 1.5rem 2rem;}
article h2{
  font-family:var(--serif);font-weight:600;font-size:clamp(1.6rem,3.6vw,2.1rem);
  color:var(--gruen);line-height:1.15;margin:2.6rem 0 .5rem;
}
article h3{
  font-family:var(--sans);font-weight:700;font-size:1.12rem;color:var(--gruen-tief);
  margin:1.7rem 0 .3rem;
}
article p{margin:.7rem 0;}
article a{color:var(--gruen);text-decoration:underline;text-decoration-color:var(--gold-linie);text-underline-offset:3px;}
article a:hover{text-decoration-color:var(--gruen);}
article ul,article ol{margin:.7rem 0;padding-left:1.3rem;}
article li{margin:.45rem 0;}
strong{color:var(--gruen-tief);}

/* ---------- Kurzantwort-Box (AI-/Snippet-Anker) ---------- */
.kurzantwort{
  background:var(--creme-hell);
  border:1px solid var(--creme-dunkel);
  border-left:3px solid var(--gold);
  border-radius:4px;padding:1.2rem 1.4rem;margin:1.6rem 0 .5rem;
}
.kurzantwort .label{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700;}
.kurzantwort p{margin:.4rem 0 0;font-size:1.04rem;}

/* ---------- Zahlen-/Faktentabelle ---------- */
.tabelle{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.98rem;}
.tabelle th,.tabelle td{text-align:left;padding:.65rem .8rem;border-bottom:1px solid var(--creme-dunkel);}
.tabelle th{background:var(--gruen);color:var(--creme-hell);font-weight:600;font-size:.84rem;letter-spacing:.04em;}
.tabelle tr:nth-child(even) td{background:var(--creme-hell);}
.tabelle td:last-child{font-weight:600;color:var(--gruen-tief);white-space:nowrap;}

/* ---------- Schritt-Liste ---------- */
.schritte{counter-reset:s;list-style:none;padding:0;margin:1rem 0;}
.schritte li{position:relative;padding:.2rem 0 1rem 3rem;}
.schritte li::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:0;top:.05rem;
  width:2rem;height:2rem;border-radius:50%;
  background:var(--gruen);color:var(--gold-hell);
  font-family:var(--serif);font-weight:700;font-size:1.05rem;
  display:flex;align-items:center;justify-content:center;
}
.schritte li strong{display:block;}

/* ---------- FAQ ---------- */
.faq{margin:1rem 0;}
.faq-item{border-bottom:1px solid var(--creme-dunkel);padding:1.1rem 0;}
.faq-item h3{margin:0 0 .35rem;font-size:1.08rem;}
.faq-item p{margin:0;color:var(--text);}

/* ---------- CTA ---------- */
.cta{
  background:var(--gruen);background-image:linear-gradient(155deg,var(--gruen),var(--gruen-tief));
  color:var(--creme-hell);border-radius:6px;padding:2rem 1.8rem;margin:2.6rem 0 1rem;text-align:center;
}
.cta h2{color:var(--creme-hell);margin:0 0 .4rem;}
.cta p{color:var(--gold-hell);margin:.2rem auto 1.2rem;max-width:34rem;}
.btn{
  display:inline-block;background:var(--gold);color:var(--gruen-tief);
  font-weight:700;font-size:.92rem;letter-spacing:.04em;text-decoration:none;
  padding:.85rem 1.8rem;border-radius:3px;transition:background .2s,transform .2s;
}
.btn:hover{background:var(--gold-hell);transform:translateY(-1px);}
.btn-zweit{display:inline-block;margin-left:.6rem;color:var(--gold-hell);text-decoration:underline;text-underline-offset:3px;font-size:.92rem;}

/* ---------- Querverweise ---------- */
.weiter{margin:2.4rem 0 0;}
.weiter .label{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:.6rem;}
.weiter-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.karte{
  display:block;background:var(--creme-hell);border:1px solid var(--creme-dunkel);
  border-radius:5px;padding:1.1rem 1.2rem;text-decoration:none;color:var(--text);
  transition:border-color .2s,transform .2s;
}
.karte:hover{border-color:var(--gold);transform:translateY(-2px);}
.karte .k-titel{font-family:var(--serif);font-weight:600;font-size:1.25rem;color:var(--gruen);line-height:1.15;display:block;}
.karte .k-text{font-size:.92rem;color:var(--text-hell);margin-top:.3rem;display:block;}

/* ---------- Hinweis / Disclaimer ---------- */
.hinweis{font-size:.86rem;color:var(--text-hell);background:var(--creme-hell);border:1px dashed var(--skizze);border-radius:4px;padding:.9rem 1.1rem;margin:2rem 0 0;}

/* ---------- Fuß ---------- */
.fuss{background:var(--gruen-tief);color:var(--gold-hell);margin-top:2.5rem;padding:2rem 1.5rem;font-size:.86rem;}
.fuss-inner{max-width:64rem;margin:0 auto;display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;}
.fuss a{color:var(--gold-hell);text-decoration:none;border-bottom:1px solid rgba(201,174,131,.35);}
.fuss a:hover{color:#fff;}
.fuss .marke-f{font-family:var(--serif);font-size:1.2rem;color:var(--creme-hell);}

/* ---------- Hub-Seite ---------- */
.hub-hero{max-width:64rem;margin:0 auto;padding:2.4rem 1.5rem 1rem;text-align:center;}
.hub-grid{max-width:64rem;margin:1.5rem auto 0;padding:0 1.5rem;display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.hub-karte{
  display:flex;flex-direction:column;background:var(--creme-hell);
  border:1px solid var(--creme-dunkel);border-top:3px solid var(--gold);
  border-radius:5px;padding:1.6rem 1.5rem;text-decoration:none;color:var(--text);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.hub-karte:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(33,59,55,.1);border-top-color:var(--gold-hell);}
.hub-karte .hk-eyebrow{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700;}
.hub-karte h2{font-family:var(--serif);font-weight:600;font-size:1.6rem;color:var(--gruen);line-height:1.12;margin:.4rem 0 .5rem;}
.hub-karte p{margin:0;font-size:.96rem;color:var(--text-hell);flex:1;}
.hub-karte .hk-link{margin-top:1rem;font-weight:700;font-size:.88rem;color:var(--gruen);letter-spacing:.03em;}
.hub-karte .hk-link::after{content:" →";color:var(--gold);}
.hub-intro{max-width:var(--maxread);margin:1rem auto 0;padding:0 1.5rem;}

/* ---------- Zugänglichkeit & Responsive ---------- */
a:focus-visible,.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
@media (max-width:560px){
  body{font-size:17px;}
  .kopf-nav{gap:1rem;font-size:.74rem;}
  .meta{gap:.8rem;}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important;}
}

/* ---------- Conversion-Elemente (Telefon, Kontaktblock) ---------- */
.kopf-tel{color:var(--creme-hell)!important;font-weight:700;border:1px solid var(--gold-linie);border-radius:3px;padding:.22rem .7rem;white-space:nowrap;letter-spacing:.02em;}
.kopf-tel:hover{background:var(--gold);color:var(--gruen-tief)!important;}
.fruehkontakt{background:var(--creme-hell);border:1px solid var(--creme-dunkel);border-left:3px solid var(--gruen);border-radius:4px;padding:.85rem 1.1rem;font-size:.98rem;margin:1.5rem 0 .3rem;}
.fruehkontakt a{font-weight:700;color:var(--gruen);text-decoration:none;border-bottom:2px solid var(--gold-linie);white-space:nowrap;}
.fruehkontakt a:hover{border-bottom-color:var(--gruen);}
.cta-tel{margin:1.1rem 0 .2rem!important;color:var(--creme-hell)!important;font-size:1.05rem;}
.cta-tel a{color:#fff;font-weight:700;text-decoration:none;border-bottom:1px solid var(--gold-hell);white-space:nowrap;}
.cta-reassure{margin:.3rem 0 0!important;color:var(--gold-hell)!important;font-size:.82rem;letter-spacing:.03em;}
.ortsblock{background:var(--creme-hell);border-top:1px solid var(--creme-dunkel);}
.ortsblock-inner{max-width:64rem;margin:0 auto;padding:2.2rem 1.5rem;display:flex;justify-content:space-between;gap:1.8rem;flex-wrap:wrap;}
.ortsblock-inner>div{flex:1;min-width:240px;}
.ob-eyebrow{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700;margin:0;}
.ob-name{font-family:var(--serif);font-size:1.35rem;color:var(--gruen);margin:.3rem 0 .4rem;font-weight:600;}
.ob-text{font-size:.92rem;color:var(--text-hell);margin:0;}
.ob-kontakt{display:flex;flex-direction:column;gap:.55rem;align-items:flex-start;justify-content:center;}
.ob-tel{font-size:1.3rem;font-weight:700;color:var(--gruen)!important;text-decoration:none;}
.ob-tel:hover{color:var(--gold)!important;}
.ob-mail{color:var(--text);text-decoration:none;border-bottom:1px solid var(--skizze);}
.ob-mail:hover{color:var(--gruen);}
.ob-google{color:var(--gold);font-weight:600;text-decoration:none;font-size:.92rem;}
.ob-google:hover{color:var(--gruen);}
@media (max-width:560px){.ortsblock-inner{flex-direction:column;gap:1.2rem;}}

/* =================================================================
   ANGLEICHUNG AN DAS HAUPTSEITEN-DESIGN
   Palette + Schrift der Artikel auf die Hauptseite umgestellt und
   die identische Kopf-Navigation + Legal-Footer ergaenzt.
   ================================================================= */
:root{
  /* Artikel-Palette -> Hauptseite */
  --gruen:#12362d;
  --gruen-tief:#0c2922;
  --gold:#b58c4f;
  --gold-hell:#d6bb86;
  --gold-linie:#b58c4f;
  --creme:#fbf6ee;
  --creme-hell:#fffaf2;
  --creme-dunkel:#f2ebe1;
  --skizze:#d6bb86;
  --sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  /* Chrome-Variablen der Hauptseite */
  --green:#12362d;
  --gold-line:rgba(181,140,79,.34);
  --cream:#fbf6ee;
}

/* ---------- Kopf-Navigation (identisch zur Hauptseite) ---------- */
.nav{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:26px clamp(24px,4vw,72px);gap:28px;}
.brand{display:flex;align-items:center;gap:14px;color:var(--green);letter-spacing:.28em;text-transform:uppercase;font-size:11px;font-weight:500;white-space:nowrap;text-decoration:none;font-family:var(--sans);}
.nav-links{display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:flex-end;}
.nav-link{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:rgba(22,54,46,.68);position:relative;padding:8px 0;text-decoration:none;font-family:var(--sans);}
.nav-link::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:.25s;}
.nav-link:hover{color:var(--green);}
.nav-link:hover::after{transform:scaleX(1);}
.nav-cta{border:1px solid var(--gold-line);padding:10px 16px;color:var(--green);background:rgba(255,250,242,.52);}
.nav-cta::after{display:none;}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;margin:0;background:none;border:0;cursor:pointer;flex:0 0 auto;}
.nav-toggle span{display:block;height:2px;width:100%;background:var(--green,#12362d);border-radius:2px;transition:transform .25s ease,opacity .2s ease;}
@media(max-width:768px){
  .nav{flex-direction:row!important;align-items:center!important;justify-content:space-between!important;flex-wrap:nowrap!important;gap:12px!important;position:relative!important;}
  .nav .brand{order:1;flex:1 1 auto;min-width:0;}
  .nav-toggle{display:flex!important;order:2;}
  .nav-links{display:none!important;}
  nav.open .nav-links{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:2px!important;position:absolute!important;top:100%;left:0;right:0;z-index:60;background:var(--cream,#fbf6ee);border-top:1px solid var(--gold-line,rgba(181,140,79,.34));box-shadow:0 18px 40px rgba(12,41,34,.14);padding:8px clamp(20px,5vw,28px) 16px;margin:0;}
  nav.open .nav-links a{width:100%;padding:13px 2px!important;}
  nav.open .nav-cta{margin-top:8px;}
  nav.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  nav.open .nav-toggle span:nth-child(2){opacity:0;}
  nav.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}

/* ---------- Legal-Footer (identisch zur Hauptseite) ---------- */
.site-legal-footer{background:#0c2922;border-top:1px solid rgba(214,187,134,.18);padding:26px clamp(24px,5vw,84px);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:rgba(251,246,238,.48);font-size:11px;position:relative;z-index:2;font-family:var(--sans);}
.site-legal-footer a{color:rgba(251,246,238,.58);margin-left:18px;text-decoration:none;border:0;}
.site-legal-footer span:first-child{margin-right:auto;}
@media(max-width:760px){.site-legal-footer a{margin-left:0;margin-right:14px;}}