:root{--green:#102E27;--green900:#0B211B;--bone:#EFEDE3;--greige:#A6A294;
    --graphit:#1C1A17;--nebel:#8A857B;--hair:rgba(28,26,23,.14);--hair-d:rgba(239,237,227,.20)}
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bone);color:var(--graphit);
    font-family:"Inter",system-ui,sans-serif;line-height:1.6;font-size:1.0625rem;-webkit-font-smoothing:antialiased}
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px}
  .narrow{max-width:680px}
  a{color:inherit}
  .caps{text-transform:uppercase;letter-spacing:.1em;font-size:.8125rem;color:var(--nebel)}
  .display{font-family:"Gambetta",Georgia,serif;font-weight:600;color:var(--green);line-height:1.06;
    /* lange deutsche Komposita ("Immobilienfinanzierung") sprengen sonst auf
       schmalen Telefonen die Zeile — html hat lang="de", also trennt der Browser richtig */
    hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
  .rule{border:0;border-top:1px solid var(--hair)}
  .btn{display:inline-block;background:var(--green);color:var(--bone);font-weight:600;
    padding:15px 30px;border:1px solid var(--green);text-decoration:none;font-size:.9375rem;
    letter-spacing:.02em;cursor:pointer;transition:background .15s,color .15s}
  .btn:hover{background:var(--green900)}
  .btn--ghost{background:transparent;color:var(--green);border-color:var(--greige)}
  .btn--ghost:hover{border-color:var(--green);background:transparent}
  /* header */
  header{border-bottom:1px solid var(--hair);position:sticky;top:0;background:rgba(239,237,227,.92);
    backdrop-filter:blur(8px);z-index:30}
  header .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
  .wordmark{font-family:"Gambetta",Georgia,serif;text-transform:uppercase;letter-spacing:.12em;
    font-size:1.4rem;font-weight:600;color:var(--green);text-decoration:none}
  .htel{font-size:.9375rem;font-weight:500}
  /* hero */
  .hero{padding:84px 0 64px}
  .hero .kick{color:var(--green);font-weight:600}
  .hero h1{font-size:clamp(2.4rem,5vw,3.6rem);margin:18px 0 0}
  .hero .sub{font-size:1.1875rem;color:var(--graphit);max-width:620px;margin:22px 0 34px}
  .hero .micro{margin-top:18px;color:var(--nebel);font-size:.875rem}
  /* value */
  section{padding:56px 0}
  .vtitle{margin:0 0 32px}
  .vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
  .vcell{background:var(--bone);padding:28px 24px}
  .vcell h3{font-family:"Gambetta",Georgia,serif;font-weight:500;color:var(--green);font-size:1.25rem;margin:0 0 8px}
  .vcell p{margin:0;color:var(--graphit);font-size:.9688rem}
  /* form */
  .formwrap{background:var(--green);color:var(--bone)}
  .formwrap .display{color:var(--bone)}
  .formwrap .caps{color:var(--greige)}
  .formcard{max-width:680px;margin:0 auto}
  .formcard h2{font-size:2rem;margin:8px 0 6px}
  .formcard .fnote{color:var(--greige);margin:0 0 28px}

  /* Signaturzeile mit Portrait — hell (Hero) und dunkel (Formularblock) */
  .sig{display:flex;align-items:center;gap:16px;width:fit-content;
    margin:28px 0 0;padding-top:22px;border-top:1px solid var(--hair)}
  .sig img{width:72px;height:72px;border-radius:50%;object-fit:cover;display:block;
    box-shadow:0 0 0 1px rgba(28,26,23,.14),0 0 0 5px var(--bone),0 0 0 6px var(--greige)}
  .sig .sn{font-family:"Gambetta",Georgia,serif;font-weight:600;font-size:1.0625rem;
    color:var(--green);line-height:1.2}
  .sig .sr{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--nebel);margin-top:6px}
  .formcard .sig{margin:0 0 28px;padding-top:0;border-top:0}
  .sig--dark img{box-shadow:0 0 0 1px rgba(239,237,227,.22),0 0 0 5px var(--green),0 0 0 6px rgba(166,162,148,.55)}
  .sig--dark .sn{color:var(--bone)}
  .sig--dark .sr{color:var(--greige)}
  @media(max-width:720px){.sig img{width:64px;height:64px}.sig{gap:14px}}

  form{display:grid;gap:16px}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  label{display:block;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;
    color:var(--greige);margin:0 0 6px}
  input,select,textarea{width:100%;background:var(--green900);color:var(--bone);
    border:1px solid var(--hair-d);padding:13px 14px;font-family:inherit;font-size:1rem;border-radius:0}
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--greige)}
  textarea{resize:vertical;min-height:90px}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .consent{display:flex;gap:10px;align-items:flex-start;font-size:.875rem;color:var(--greige)}
  .consent input{width:auto;margin-top:3px;flex:0 0 auto}
  .consent a{color:var(--bone);text-decoration:underline}
  .submit-row{margin-top:6px}
  .btn--light{background:var(--bone);color:var(--green);border-color:var(--bone);width:100%}
  .btn--light:hover{background:#fff}

  /* Druck-Zustand: der Knopf senkt sich, damit ein Klick spuerbar ist */
  .btn:active{transform:translateY(1px);transition-duration:.08s;background:var(--green900)}
  .btn--ghost:active{background:rgba(16,46,39,.07);border-color:var(--green)}
  .btn--light:active{background:var(--greige-l);border-color:var(--greige-l)}
  @media(prefers-reduced-motion:reduce){.btn:active{transform:none}}
  .danke{display:none;text-align:center;padding:20px 0}
  .danke.show{display:block}
  .danke h2{font-size:2rem;margin:0 0 10px}
  .danke p{color:var(--greige)}
  .err{display:none;color:#E7B0A0;font-size:.875rem;margin-top:8px}
  .err.show{display:block}
  /* footer */
  footer{background:var(--green900);color:var(--greige);font-size:.8125rem;line-height:1.7;padding:36px 0}
  footer a{color:var(--bone)}
  footer .flinks a{margin-right:18px}
  @media(max-width:720px){.vgrid{grid-template-columns:1fr}.row2{grid-template-columns:1fr}.hero{padding:56px 0 40px}}

  /* ---- Bausteine der Zielgruppenseiten (ab 31.07.2026) ------------------ */

  /* Rechtshinweis. Ruhig gesetzt, aber NICHT ausgegraut: auf diesen Text
     stützt sich beim Consent-Gate eine Einwilligung, und --nebel auf --bone
     ergibt nur rund 3:1 Kontrast. Das reißt WCAG AA und wäre ausgerechnet
     an der Stelle schlecht lesbar, an der Lesbarkeit rechtlich zählt.
     Zurückhaltend wirkt der Block über Schriftgrad, Spaltenbreite und
     die Randlinie, nicht über blasse Farbe. */
  .note{border-left:2px solid var(--greige);padding:14px 0 14px 18px;margin:28px 0;
    color:var(--graphit);font-size:.9375rem;line-height:1.62;max-width:74ch}
  .note b{color:var(--graphit);font-weight:600}
  .note a{color:var(--graphit)}

  /* Ablauf ohne 01/02/03-Nummerierung — die Reihenfolge trägt sich selbst. */
  .steps{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--hair)}
  .steps li{border-bottom:1px solid var(--hair);padding:20px 0;display:grid;
    grid-template-columns:200px 1fr;gap:24px;align-items:baseline}
  .steps h3{font-family:"Gambetta",Georgia,serif;font-weight:500;color:var(--green);
    font-size:1.125rem;margin:0}
  .steps p{margin:0;color:var(--graphit);font-size:.9688rem}

  /* Wofür wir stehen / worin wir nicht helfen — Positiv-Negativ-Paar. */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);
    border:1px solid var(--hair)}
  .split > div{background:var(--bone);padding:26px 24px}
  .split h3{font-family:"Gambetta",Georgia,serif;font-weight:500;font-size:1.1875rem;
    color:var(--green);margin:0 0 12px}
  .split ul{margin:0;padding-left:18px;color:var(--graphit);font-size:.9688rem}
  .split li{margin-bottom:8px}

  .faq{border-top:1px solid var(--hair)}
  .faq details{border-bottom:1px solid var(--hair);padding:18px 0}
  .faq summary{cursor:pointer;font-weight:600;color:var(--green);list-style:none;
    display:flex;justify-content:space-between;gap:16px;align-items:baseline}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";color:var(--nebel);font-weight:400;flex:0 0 auto}
  .faq details[open] summary::after{content:"–"}
  .faq p{margin:12px 0 0;color:var(--graphit);font-size:.9688rem;max-width:70ch}

  .crosslinks{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
  .crosslinks a{border:1px solid var(--hair);padding:9px 15px;font-size:.875rem;
    text-decoration:none;color:var(--graphit);transition:border-color .15s}
  .crosslinks a:hover{border-color:var(--green)}

  /* Terminschritt im Danke-Zustand */
  .danke .btn--light{width:auto;margin-top:8px}
  .danke .alt{margin-top:16px;font-size:.9375rem}

  /* Termin-Einstiege. Der Header ist sticky, dieser Button ist damit auf
     jeder Seite dauerhaft erreichbar — die wichtigste der mehreren Stellen. */
  header .wrap{gap:16px}
  .hcta{display:inline-block;background:var(--green);color:var(--bone);
    padding:9px 18px;font-size:.875rem;font-weight:600;text-decoration:none;
    border:1px solid var(--green);white-space:nowrap;transition:background .15s}
  .hcta:hover{background:var(--green900)}
  .hright{display:flex;align-items:center;gap:18px}

  /* Zweitweg direkt unter dem Haupt-CTA im Hero */
  .hero .cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
  .hero .alt-link{font-size:.9375rem;color:var(--green);text-decoration:none;
    border-bottom:1px solid var(--greige);padding-bottom:2px}
  .hero .alt-link:hover{border-bottom-color:var(--green)}

  @media(max-width:560px){
    .htel{display:none}          /* auf schmalen Geräten hat der Termin-Button Vorrang */
    .hright{gap:12px}
  }

  @media(max-width:720px){
    .steps li{grid-template-columns:1fr;gap:6px}
    .split{grid-template-columns:1fr}
  }