/* ==========================================================================
   WeFin GmbH — Website wefin-holding.com
   Stand 03.09.2026 · Erscheinungsbild: wiki/konzepte/WeFin Markenhandbuch (Logo und Dateien).md

   Farben und Schriften sind unveraendert aus Marke/Web/WeFin_Basis.css
   uebernommen. Farben nie neu erfinden.
   ========================================================================== */

:root{
  /* Markenfarben — unveraenderlich */
  --wf-navy:      #061526;
  --wf-gold:      #CBA85D;   /* nur auf dunklem Grund */
  --wf-gold-hell: #A87F32;   /* auf hellem Grund, 3,3:1 Kontrast */
  --wf-creme:     #F6F3EC;
  --wf-grau:      #C9CFD4;   /* Nebentext auf dunklem Grund */
  --wf-grau-hell: #5C6B7A;   /* Nebentext auf hellem Grund, 4,9:1 */

  /* Flaechen */
  --grund:      #F4F1E9;
  --flaeche:    #FFFFFF;
  --flaeche-2:  #EAE5D9;
  --navy-2:     #0C2038;     /* aufgehellte Navy-Flaeche */
  --navy-tief:  #030E19;     /* Verlaeufe, Fussbereich */
  --text:       #0A1B2E;
  --linie:      #D8D1C0;
  --linie-dunkel:#1B3550;

  --breite: 1200px;          /* Satzspiegel */
  --rand: clamp(24px, 5vw, 64px);
}

*{ box-sizing:border-box; }

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

body{
  margin:0;
  background:var(--grund);
  color:var(--text);
  font-family:'Archivo','Segoe UI',system-ui,sans-serif;
  font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

/* --- Typografie ---------------------------------------------------------- */
h1,h2,h3{
  font-family:'Source Serif 4',Georgia,serif;
  font-weight:600; margin:0; text-wrap:balance;
  letter-spacing:-.02em;
}
h1{ font-size:clamp(2.6rem,6.4vw,4.75rem); line-height:1.03; }
h2{ font-size:clamp(1.9rem,3.9vw,3rem); line-height:1.12; }
h3{ font-size:clamp(1.15rem,1.7vw,1.4rem); line-height:1.25; }
p{ margin:0; }
a{ color:inherit; }

/* Beschriftungen: gesperrte Versalien — wie das „GmbH“ im Logo */
.label{
  font-size:.7rem; font-weight:600; letter-spacing:.19em;
  text-transform:uppercase; color:var(--wf-grau-hell);
  margin:0 0 22px;
}
.dunkel .label{ color:var(--wf-gold); }

.wrap{ width:min(var(--breite), 100% - 2*var(--rand)); margin-inline:auto; }

/* Trenner im Markenwinkel (30°, wie die Balken) */
.strich{
  width:104px; height:4px; border:0; margin:0;
  background:var(--wf-gold-hell);
  transform:skewX(-30deg);
}
.dunkel .strich{ background:var(--wf-gold); }

/* --- Sprungmarke fuer Tastaturbedienung ---------------------------------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--wf-creme); color:var(--wf-navy);
  padding:12px 20px; font-weight:600;
}
.skip:focus{ left:12px; top:12px; }

/* --- Navigation ---------------------------------------------------------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:20px var(--rand);
  background:linear-gradient(var(--navy-tief), transparent);
  transition:background .25s ease, padding .25s ease, box-shadow .25s ease;
}
.nav.fest{
  background:var(--wf-navy); padding-block:13px;
  box-shadow:0 1px 0 rgba(203,168,93,.22);
}
.nav .marke img{ height:31px; width:auto; }          /* Vollversion: 205 px breit */
.nav .marke .kurz{ display:none; }
.nav .marke .kurz img{ height:25px; }                 /* Kurzfassung: 130 px breit */

.navLinks{ display:flex; align-items:center; gap:clamp(18px,2.6vw,38px); }
.navLinks a{
  color:var(--wf-creme); text-decoration:none;
  font-size:.78rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  padding-bottom:4px; border-bottom:1px solid transparent;
}
.navLinks a:hover,.navLinks a:focus-visible{ border-bottom-color:var(--wf-gold); }
.navLinks .navCta{
  border:1px solid rgba(246,243,236,.42); border-radius:2px;
  padding:9px 19px; color:var(--wf-creme);
}
.navLinks .navCta:hover,.navLinks .navCta:focus-visible{
  background:var(--wf-gold); border-color:var(--wf-gold); color:var(--wf-navy);
}

/* --- Kopfbereich --------------------------------------------------------- */
.hero{
  position:relative; isolation:isolate;
  min-height:min(880px, 100vh); display:flex; flex-direction:column; justify-content:center;
  background:url('bilder/Immobilie_Abenddaemmerung.jpg') center/cover no-repeat var(--wf-navy);
  padding:170px 0 118px;
}
.hero::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(3,14,25,.96) 0%, rgba(4,18,32,.78) 46%, rgba(3,12,20,.24) 82%),
    linear-gradient(rgba(3,14,25,.55), rgba(3,14,25,0) 38%, rgba(3,14,25,.72));
}
.heroInner{ width:min(var(--breite), 100% - 2*var(--rand)); margin-inline:auto; }
.hero .label{ color:var(--wf-gold); }
.hero h1{ color:var(--wf-creme); max-width:15ch; }
.hero h1 span{ color:var(--wf-gold); }
.heroLead{
  color:var(--wf-grau); max-width:60ch; margin:30px 0 40px; font-size:1.03rem; line-height:1.8;
}

.knopf{
  display:inline-flex; align-items:center; gap:14px;
  background:var(--wf-gold); color:var(--wf-navy);
  padding:16px 30px; border-radius:2px; text-decoration:none;
  font-size:.79rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  transition:background .2s ease, transform .2s ease;
}
.knopf:hover,.knopf:focus-visible{ background:var(--wf-creme); transform:translateY(-2px); }
.knopf b{ font-size:1rem; line-height:1; }

/* Fussleiste des Kopfbereichs: die drei Geschaeftsfelder = die drei Balken */
.heroFoot{
  position:absolute; inset:auto var(--rand) 0 var(--rand); z-index:1;
  width:min(var(--breite), 100% - 2*var(--rand)); margin-inline:auto;
  display:grid; grid-template-columns:repeat(3,1fr); align-items:center;
  height:84px; border-top:1px solid rgba(246,243,236,.24);
}
.heroFoot span{
  display:flex; align-items:center; gap:12px;
  color:var(--wf-creme); font-size:.72rem; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase;
}
.heroFoot span+span{ padding-left:clamp(14px,3vw,30px); border-left:1px solid rgba(246,243,236,.24); }
.heroFoot svg{ flex:none; }

/* --- Abschnitte ---------------------------------------------------------- */
.abschnitt{ padding:clamp(80px,10vw,140px) 0; }
.dunkel{ background:var(--wf-navy); color:var(--wf-creme); }
.hell{ background:var(--grund); color:var(--text); }
.tief{ background:var(--navy-tief); color:var(--wf-creme); }

.kopf{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(30px,5vw,80px); align-items:end; margin-bottom:clamp(48px,6vw,78px);
}
.kopf > p{ color:var(--wf-grau); font-size:1.02rem; line-height:1.85; }
.hell .kopf > p{ color:var(--wf-grau-hell); }
@media (max-width:860px){ .kopf{ grid-template-columns:1fr; align-items:start; } }

/* --- Leistungen (Beratung) ----------------------------------------------- */
.leistungen{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--linie-dunkel); }
@media (max-width:900px){ .leistungen{ grid-template-columns:1fr; } }

.leistung{
  background:var(--wf-navy); padding:clamp(34px,3.4vw,46px);
  display:flex; flex-direction:column; gap:18px;
  transition:background .25s ease;
}
.leistung:hover{ background:var(--navy-2); }
.leistung .nr{
  font-family:'Source Serif 4',Georgia,serif; font-size:2.5rem; line-height:1;
  color:var(--wf-gold); opacity:.5;
}
.leistung h3{ color:var(--wf-creme); }
.leistung p{ color:var(--wf-grau); font-size:.95rem; line-height:1.8; }
.marker{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:14px; }
.marker span{
  border:1px solid rgba(201,207,212,.3); border-radius:2px; padding:6px 12px;
  font-size:.66rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  color:var(--wf-grau);
}

/* --- Immobilien ---------------------------------------------------------- */
.zweispalt{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(36px,5vw,78px); align-items:center;
}
@media (max-width:900px){ .zweispalt{ grid-template-columns:1fr; } }

.bildfeld{ position:relative; }
.bildfeld img{ width:100%; height:clamp(360px,52vh,620px); object-fit:cover; object-position:72% center; }
.bildunterschrift{
  position:absolute; left:0; right:0; bottom:0; padding:26px 30px;
  background:linear-gradient(transparent, rgba(6,21,38,.9));
  color:var(--wf-creme);
}
.bildunterschrift span{
  display:block; font-size:.68rem; font-weight:600; letter-spacing:.19em;
  text-transform:uppercase; color:var(--wf-gold); margin-bottom:6px;
}
.bildunterschrift b{ font-family:'Source Serif 4',Georgia,serif; font-weight:600; font-size:1.1rem; }

.fliess p{ color:var(--wf-grau-hell); font-size:1rem; line-height:1.85; margin-top:22px; }
.fliess p strong{ color:var(--text); }

.zahlen{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px; }
.zahlen > div{ border-top:2px solid var(--wf-gold-hell); padding-top:14px; }
.zahlen b{
  display:block; font-family:'Source Serif 4',Georgia,serif;
  font-size:1.7rem; color:var(--wf-gold-hell); line-height:1;
}
.zahlen span{
  display:block; margin-top:8px; font-size:.68rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--wf-grau-hell);
}
@media (max-width:560px){ .zahlen{ grid-template-columns:1fr; gap:12px; } }

/* --- Investments --------------------------------------------------------- */
.beteiligungen{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--linie-dunkel); }
@media (max-width:820px){ .beteiligungen{ grid-template-columns:1fr; } }

.beteiligung{
  background:var(--navy-tief); padding:clamp(36px,4vw,54px);
  display:flex; flex-direction:column; gap:20px;
}
.firmenname{
  font-family:'Source Serif 4',Georgia,serif; font-size:1.5rem; font-weight:600;
  letter-spacing:.06em; color:var(--wf-creme); line-height:1.2;
}
.firmenname small{
  display:block; margin-top:6px; font-family:'Archivo',sans-serif;
  font-size:.68rem; font-weight:500; letter-spacing:.19em; text-transform:uppercase;
  color:var(--wf-grau);
}
.beteiligung h3{ color:var(--wf-gold); }
.beteiligung p{ color:var(--wf-grau); font-size:.95rem; line-height:1.8; }
.beteiligung a{
  margin-top:auto; padding-top:16px; text-decoration:none; color:var(--wf-creme);
  font-size:.72rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  border-top:1px solid rgba(201,207,212,.24);
}
.beteiligung a:hover,.beteiligung a:focus-visible{ color:var(--wf-gold); }

.fokus{
  margin-top:1px; background:var(--navy-tief); padding:clamp(36px,4vw,54px);
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,4vw,60px); align-items:center;
}
@media (max-width:820px){ .fokus{ grid-template-columns:1fr; } }
.fokus h3{ color:var(--wf-creme); font-size:1.5rem; }
.themen{ display:flex; flex-wrap:wrap; gap:10px; }
.themen span{
  border:1px solid rgba(203,168,93,.42); border-radius:2px; padding:9px 16px;
  font-size:.72rem; font-weight:500; letter-spacing:.1em; color:var(--wf-creme);
}

/* --- Kontakt ------------------------------------------------------------- */
.kontakt{ display:grid; grid-template-columns:44% 56%; background:var(--flaeche); }
@media (max-width:900px){ .kontakt{ grid-template-columns:1fr; } }
.kontakt .portrait img{
  width:100%; height:100%; min-height:clamp(420px,62vh,760px);
  object-fit:cover; object-position:center 16%;
}
.kontaktText{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(52px,7vw,110px) var(--rand);
}
.kontaktText h2{ max-width:19ch; }
.name{
  font-family:'Source Serif 4',Georgia,serif; font-size:1.6rem; font-weight:600;
  margin-top:34px;
}
.rolle{ color:var(--wf-grau-hell); font-size:.95rem; margin-top:6px; }
.mail{
  display:inline-flex; align-items:center; gap:12px; align-self:flex-start;
  margin-top:32px; padding-bottom:8px; text-decoration:none;
  border-bottom:2px solid var(--wf-gold-hell);
  font-size:clamp(.95rem,1.7vw,1.15rem); font-weight:500; color:var(--text);
  overflow-wrap:anywhere;
}
.mail:hover,.mail:focus-visible{ color:var(--wf-gold-hell); }

/* --- Fussbereich --------------------------------------------------------- */
footer{
  background:var(--wf-navy); color:var(--wf-grau);
  padding:clamp(44px,5vw,64px) var(--rand);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:26px; font-size:.82rem;
}
footer .fussMarke img{ height:29px; width:auto; }
footer .felder{ letter-spacing:.14em; text-transform:uppercase; font-size:.7rem; }
footer .rechtliches{ display:flex; flex-wrap:wrap; align-items:center; gap:22px; }
footer .rechtliches a{ text-decoration:none; }
footer .rechtliches a:hover,footer .rechtliches a:focus-visible{ color:var(--wf-gold); }

/* --- Rechtliche Seiten (Impressum, Datenschutz) --------------------------- */
.rechtKopf{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:22px var(--rand); background:var(--wf-navy);
}
.rechtKopf img{ height:30px; width:auto; }
.rechtKopf a{
  color:var(--wf-creme); text-decoration:none;
  font-size:.74rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase;
}
.rechtKopf a:hover,.rechtKopf a:focus-visible{ color:var(--wf-gold); }

.rechtHero{ background:var(--wf-navy); color:var(--wf-creme); padding:clamp(56px,7vw,104px) 0 clamp(60px,7vw,110px); }
.rechtHero .label{ color:var(--wf-gold); }
.rechtHero h1{ font-size:clamp(2.3rem,5vw,3.6rem); }
.rechtHero .stand{ color:var(--wf-grau); margin-top:20px; font-size:.9rem; }

.rechtText{
  width:min(760px, 100% - 2*var(--rand)); margin:clamp(56px,7vw,90px) auto clamp(70px,8vw,120px);
}
.rechtText section+section{ margin-top:44px; padding-top:44px; border-top:1px solid var(--linie); }
.rechtText h2{
  font-size:clamp(1.15rem,2vw,1.42rem); margin-bottom:16px;
  display:flex; align-items:baseline; gap:13px;
}
.rechtText h2 svg{ flex:none; align-self:center; }
.rechtText p{ color:#2C3E52; margin-top:14px; line-height:1.85; }
.rechtText p:first-of-type{ margin-top:0; }
.rechtText a{ color:var(--wf-gold-hell); text-underline-offset:3px; }

.rechtFuss{
  background:var(--wf-navy); color:var(--wf-grau);
  padding:34px var(--rand); display:flex; flex-wrap:wrap; gap:22px;
  align-items:center; font-size:.82rem;
}
.rechtFuss a{ text-decoration:none; }
.rechtFuss a:hover,.rechtFuss a:focus-visible{ color:var(--wf-gold); }

/* --- Kleine Bildschirme --------------------------------------------------- */
@media (max-width:640px){
  .nav .marke .voll{ display:none; }          /* Vollversion unter 190 px nicht zulaessig */
  .nav .marke .kurz{ display:block; }
  .navLinks a:not(.navCta){ display:none; }
  .heroFoot{ height:70px; }
  .heroFoot span{ font-size:.6rem; letter-spacing:.12em; gap:7px; }
  .heroFoot svg{ display:none; }
  footer{ flex-direction:column; align-items:flex-start; }
}

/* --- Fokus sichtbar halten ------------------------------------------------ */
a:focus-visible,button:focus-visible{ outline:2px solid var(--wf-gold); outline-offset:3px; }