/* === KIM INVESTMENT MANAGEMENT ============================================

   Ergaenzt basis.css. Gleiche Marke wie M.Knuf Immobilien:
     Schrift  Cormorant Garamond (Ueberschriften), Jost (alles andere)
     Farbe    #404A54 Charcoal Blue, #EFF0F1 Light Grey, #FFFFFF, #252B30 nur Text
   Kein fuenfter Farbwert, keine dunklen Flaechen.

   Die Bloecke sind aus der Maklerseite uebernommen (Fussleiste mit
   Hausmarke, Inhaltsformen, Formular, Handy-Menue) und hier in einer Datei
   zusammengefasst. */

:root{ --surface:#EFF0F1; }

/* --- Kopfzeile: KIM-Logo im Querformat --------------------------------- */
/* Das Querformat ist ein langes Band (1211 x 144). Es braucht mehr Breite
   als die M.Knuf-Wortmarke, damit "KIM" gleich gross wirkt. */
.brand img{width:300px;height:auto;display:block}
@keyframes logoCompact{ from{width:300px} to{width:250px} }
@media(max-width:680px){
  .brand img{width:230px}
  @keyframes logoCompact{ from{width:230px} to{width:200px} }
}

/* --- Seitenabschluss (abschluss.css) ----------------------------------- */
.ctaSection{max-width:none;margin:0;background:#fff;padding:120px 5vw 130px}
.ctaSection>*{max-width:720px;margin-left:auto;margin-right:auto}
.siteFooter{background:var(--surface);border-top:1px solid var(--line)}
.footerDivider{background:rgba(64,74,84,.24)}
main > section:last-child.soft,
main > section:last-child.quoteSection{background:#fff;border-top:1px solid var(--line)}

/* --- Fussleiste mit Hausmarke (fussleiste.css) ------------------------- */
.footerBrand{display:none}
.footerTop{
  width:min(60vw,100%);
  margin-inline:auto;
  grid-template-columns:auto auto auto;
  justify-content:space-between;
  align-items:center;
  gap:clamp(20px,3vw,56px);
}
.footerTop > .footerColumn:nth-child(2){grid-column:1;grid-row:1}
.footerTop > .footerColumn:nth-child(3){grid-column:3;grid-row:1;text-align:right}
.footerTop::after{
  content:"";
  grid-column:2;
  grid-row:1;
  align-self:center;
  justify-self:center;
  width:150px;
  height:168px;
  background:url("/haus-logo.svg") no-repeat center/contain;
}
@media(max-width:1000px){
  .footerTop{width:100%;grid-template-columns:1fr 1fr;justify-content:normal;gap:70px}
  .footerTop > .footerColumn:nth-child(2){grid-column:1;grid-row:1}
  .footerTop > .footerColumn:nth-child(3){grid-column:2;grid-row:1;text-align:left}
  .footerTop::after{grid-column:1 / -1;grid-row:2;width:143px;height:160px}
}
@media(max-width:680px){
  .footerTop{grid-template-columns:1fr}
  .footerTop > .footerColumn:nth-child(2){grid-column:1;grid-row:1}
  .footerTop > .footerColumn:nth-child(3){grid-column:1;grid-row:2}
  .footerTop::after{grid-column:1;grid-row:3;width:125px;height:140px}
}

/* --- Inhaltsformen (inhalte.css) --------------------------------------- */
.blockIntro{max-width:720px;margin:0 auto 64px;color:var(--muted);line-height:1.8;font-size:18px}
.schwerpunkte{display:grid;grid-template-columns:1fr 1fr;gap:0 70px;max-width:1100px;margin:0 auto}
.schwerpunkt{padding:34px 0 38px;border-top:1px solid var(--line)}
.schwerpunkt h3{font-family:var(--font-serif);font-size:clamp(24px,2.3vw,30px);font-weight:500;letter-spacing:-.02em;line-height:1.1;color:var(--charcoal);margin:0 0 12px}
.schwerpunkt p{margin:0;color:var(--muted);line-height:1.8;font-size:16px}
.hinweis{max-width:720px;margin:0 auto;text-align:center}
.hinweis h2{font-size:clamp(32px,3.6vw,46px);color:var(--charcoal);margin:16px 0 18px}
.hinweis p{margin:0;color:var(--muted);line-height:1.8;font-size:17px}
.hinweis p + p{margin-top:16px}
.schwerpunkt{animation:riseIn linear both;animation-timeline:view();animation-range:entry 0% cover 26%}
@supports not (animation-timeline: view()){ .schwerpunkt{animation:none;opacity:1;transform:none} }
@media (prefers-reduced-motion:reduce){ .schwerpunkt{animation:none;opacity:1;transform:none} }
@media(max-width:900px){
  .schwerpunkte{grid-template-columns:1fr;gap:0}
  .blockIntro{margin-bottom:48px;font-size:17px}
}

/* --- Leistungsbereiche mit Aufzaehlung (Seite "Leistung") -------------- */
/* Links Titel und Erklaerung, rechts die Einzelleistungen als ruhige
   Liste mit Haarlinien - wie die Vita, ohne Icons. */
.bereich{
  display:grid;
  grid-template-columns:.46fr .54fr;
  gap:18px 64px;
  align-items:start;
  max-width:1100px;
  margin:0 auto;
  padding:44px 0;
  border-top:1px solid var(--line);
}
.bereich:last-child{border-bottom:1px solid var(--line)}
.bereichNum{font-size:11px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.bereich h3{font-family:var(--font-serif);font-size:clamp(26px,2.6vw,34px);font-weight:500;letter-spacing:-.02em;line-height:1.08;color:var(--charcoal);margin:0 0 14px}
.bereich > div > p:not(.bereichNum){margin:0;color:var(--muted);line-height:1.8;font-size:17px}
.bereich .fussnote{margin-top:14px !important;font-size:14px !important}
.punktListe{list-style:none;margin:0;padding:0}
.punktListe li{
  padding:13px 0;
  border-bottom:1px solid var(--line);
  font-size:16px;
  color:var(--charcoal);
  line-height:1.5;
}
.punktListe li:first-child{border-top:1px solid var(--line)}
.bereich{animation:riseIn linear both;animation-timeline:view();animation-range:entry 0% cover 24%}
@supports not (animation-timeline: view()){ .bereich{animation:none;opacity:1;transform:none} }
@media (prefers-reduced-motion:reduce){ .bereich{animation:none;opacity:1;transform:none} }
@media(max-width:900px){ .bereich{grid-template-columns:1fr;gap:20px;padding:34px 0} }

/* --- Versprechen (Startseite) ------------------------------------------ */
.versprechen{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0 48px;
  max-width:1100px;
  margin:56px auto 0;
}
.versprechen li{
  list-style:none;
  padding:30px 0 0;
  border-top:1px solid var(--charcoal);
  font-family:var(--font-serif);
  font-size:clamp(22px,2.2vw,28px);
  line-height:1.2;
  letter-spacing:-.015em;
  color:var(--charcoal);
}
.versprechen{padding:0}
@media(max-width:900px){
  .versprechen{grid-template-columns:1fr;gap:0}
  .versprechen li{padding:24px 0 26px}
}

/* --- Bild in der Fokus-Sektion (Bogenfenster, Portrait) ----------------- */
.bogenImage{object-position:center 40%}
.portraitImage{object-position:center 22%}
@media(max-width:900px){
  .focusSection .focusImageWrap:has(.bogenImage),
  .bogenImage{min-height:360px}
}

/* --- Vita (Seite "Info") ----------------------------------------------- */
.vita{max-width:610px;margin-top:44px}
.vitaLabel{font-family:var(--font-sans) !important;font-size:11px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--charcoal);margin:0 0 6px}
.vitaList{list-style:none;margin:0;padding:0}
.vitaList li{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:13px 0;border-bottom:1px solid var(--line);font-family:var(--font-sans);font-size:16px;color:var(--charcoal)}
.vitaList li:first-child{border-top:1px solid var(--line)}
.vitaBody{flex:0 0 auto;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media(max-width:620px){ .vitaList li{flex-direction:column;align-items:flex-start;gap:4px} }

/* --- Zitatband ohne dunkle Flaeche ------------------------------------- */
.quoteSection p:not(.quoteLabel):not(.quoteAuthor){
  max-width:760px;
  margin:18px auto 0;
  color:var(--muted);
  line-height:1.8;
  font-size:17px;
}

/* --- Partnerstreifen: alle Marken einheitlich zurueckgenommen ---------- */
.partnerLogo img{filter:grayscale(1) saturate(0) contrast(1.08) !important;opacity:.78 !important}

/* --- Formular-Rueckmeldungen (formular.css) ---------------------------- */
.formHinweis{margin:0;padding:22px 24px;background:var(--surface);color:var(--charcoal);font-family:var(--font-sans);font-size:16px;line-height:1.7}
.formFehler{margin:4px 0 0;padding:12px 0 0;border-top:1px solid var(--charcoal);color:var(--ink);font-family:var(--font-sans);font-size:14px;line-height:1.6;font-weight:500}
.contactSubmit:disabled{opacity:.55;cursor:progress}
.contactForm .privacyRow{max-width:none;margin:6px 0 0}
.contactForm .privacyRow a{color:var(--charcoal);text-decoration:underline;text-underline-offset:3px}

/* --- Handy-Menue (mobil.css) ------------------------------------------- */
.menuKnopf{display:none;justify-self:end;width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.menuKnopf span{display:block;width:24px;height:1.5px;background:var(--charcoal);transition:transform .25s ease,opacity .18s ease}
.menuKnopf[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.menuKnopf[aria-expanded="true"] span:nth-child(2){opacity:0}
.menuKnopf[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.menuKnopf:focus-visible{outline:1px solid var(--charcoal);outline-offset:3px}
.telefonMenue{position:fixed;inset:0;z-index:45;background:#fff;padding:96px 6vw 48px;display:flex;flex-direction:column;overflow-y:auto;animation:menueAuf .28s cubic-bezier(.16,.8,.24,1) both}
.telefonMenue[hidden]{display:none}
@keyframes menueAuf{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){ .telefonMenue{animation:none} .menuKnopf span{transition:none} }
.telefonMenue a{display:flex;align-items:center;min-height:62px;padding:4px 0;border-bottom:1px solid var(--line);font-family:var(--font-serif);font-size:clamp(26px,6.5vw,32px);font-weight:500;letter-spacing:-.02em;color:var(--charcoal)}
.telefonMenue a[aria-current="page"]{font-weight:600}
.telefonMenue .menueRuf{justify-content:center;margin-top:34px;min-height:56px;border:1px solid var(--charcoal);background:var(--charcoal);color:#fff;font-family:var(--font-sans);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
html:has(.telefonMenue:not([hidden])){overflow:hidden}
@media(max-width:1000px){ .menuKnopf{display:flex} .headerCta{display:none} }
@media(max-width:680px){ .telefonMenue{padding:88px 6vw 44px} .telefonMenue a{min-height:58px} }

/* --- Knopf im Kontakt-Aufruf (abschluss.css) --------------------------- */
.ctaSection .button,
.hinweis .button{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:220px;min-height:54px;padding:0 28px;margin-top:10px;
  background:var(--charcoal);color:#fff;border:1px solid var(--charcoal);
  font-family:var(--font-sans);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  transition:transform .2s ease,background .2s ease;
}
.ctaSection .button:hover,
.hinweis .button:hover{transform:translateY(-2px);background:var(--ink);border-color:var(--ink)}
.ctaSection p{margin:0 auto 18px}
.ctaSection p:last-of-type{margin-bottom:34px}
@media(max-width:680px){
  .ctaSection{padding:84px 6vw 92px}
  .ctaSection .button,.hinweis .button{width:100%}
}

/* --- Schriften: liegen auf dem eigenen Webspace, keine Verbindung zu Google --- */
@font-face{font-family:"Cormorant Garamond";src:url("/schriften/cormorant-garamond.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url("/schriften/jost.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --font-serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-sans:"Jost",Futura,"Century Gothic",Avenir,"Helvetica Neue",Arial,sans-serif;
}

/* --- Titel am Handy: "Zinshausverwaltung" ist ein langes Wort ----------- */
.hero h1{font-size:clamp(48px,6vw,88px)}
@media(max-width:680px){
  .hero h1{font-size:clamp(34px,10.4vw,56px)}
}