/* ===================================================================
   Der Finanzierungs-Lotse - zentrales Stylesheet
   Eine Datei fuer alle Seiten. Aenderungen hier wirken ueberall.
   =================================================================== */

@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/nunito-400.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/nunito-600.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/nunito-700.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/nunito-800.woff2') format('woff2');}

:root{
  --ink:#2B2B2B;
  --marine:#0D3B66;
  --marine-light:#12488033;
  --accent:#A9762E;
  --accent-dark:#8C6023;
  --bg:#ffffff;
  --muted-bg:#EEF3F8;
  --border:#E1E6EB;
  --text-muted:#5B5A56;

  /* Abstands-Stufen */
  --space-section:96px;
  --space-section-sm:64px;
  --space-block:40px;
  --space-item:20px;

  /* Typo-Stufen */
  --fs-h1:46px;
  --fs-h2:32px;
  --fs-h3:19px;
  --fs-lede:18px;
  --fs-body:16px;
  --fs-small:14.5px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Nunito',sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.container{max-width:1120px;margin:0 auto;padding:0 24px;}
a{color:inherit;}

/* Navbar */
.nav-section{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 0 rgba(13,59,102,0.04), 0 4px 16px rgba(13,59,102,0.05);
}
/* Einzeilig: Logo | Links | CTA. Alle drei auf einer Grundlinie ueber
   align-items:center -- deshalb sind Links und Button jetzt buendig. */
.nav-wrapper{
  display:flex;
  align-items:center;
  gap:32px;
  padding:14px 0;
}
.nav-logo{height:30px;width:auto;display:block;}
.nav-brand{display:flex;align-items:center;flex-shrink:0;}

/* nimmt den freien Raum, schiebt den CTA nach rechts */
.nav-links{
  display:flex;
  align-items:center;
  gap:28px;
  flex:1 1 auto;
  min-width:0;
}
.nav-link{
  font-weight:600;font-size:14.5px;text-decoration:none;color:var(--ink);
  white-space:nowrap;
  padding:4px 0;
  border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s;
}
.nav-link:hover{color:var(--marine);}
.nav-link.active{color:var(--marine);border-bottom-color:var(--marine);}

.nav-cta{
  flex-shrink:0;
  background:var(--accent);color:#fff;font-weight:700;font-size:14px;
  padding:11px 22px;border-radius:999px;text-decoration:none;white-space:nowrap;
  line-height:1.2;
  box-shadow:0 2px 8px rgba(169,118,46,0.35);
  transition:transform .15s, box-shadow .15s, background .15s;
}
.nav-cta:hover{background:var(--accent-dark);transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(169,118,46,0.45);color:#fff;}

.nav-toggle{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;cursor:pointer;padding:8px;margin-left:auto;
}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;}

/* Priority-Navigation: Eintraege, die nicht mehr in die Zeile passen,
   wandern einzeln ins Ueberlauf-Menue (siehe nav.js). Nur die ueberzaehligen,
   nicht alle auf einmal. Der CTA bleibt immer sichtbar. */
.nav-more{position:relative;flex-shrink:0;display:none;}
.nav-more.is-visible{display:block;}
.nav-more-btn{
  background:none;border:none;cursor:pointer;
  font-family:inherit;font-weight:600;font-size:14.5px;color:var(--ink);
  padding:4px 2px;display:flex;align-items:center;gap:6px;white-space:nowrap;
}
.nav-more-btn:hover{color:var(--marine);}
.nav-more-btn::after{
  content:"";width:6px;height:6px;flex-shrink:0;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
}
.nav-more-panel{
  position:absolute;top:calc(100% + 12px);right:0;
  background:#fff;border:1px solid var(--border);border-radius:12px;
  box-shadow:0 12px 32px rgba(13,59,102,0.14);
  padding:8px;min-width:210px;display:none;flex-direction:column;
}
.nav-more.open .nav-more-panel{display:flex;}
.nav-more-panel .nav-link{
  padding:10px 14px;border-radius:8px;border-bottom:none;width:100%;
}
.nav-more-panel .nav-link:hover{background:var(--muted-bg);}
.nav-more-panel .nav-link.active{background:var(--muted-bg);border-bottom:none;}

/* Fallback ohne JavaScript und zugleich die Mobilschwelle: ab hier
   klassisches Hamburger-Menue. Muss dieselbe Grenze sein wie MOBILE in
   nav.js -- sonst kollidieren CSS-Spalten-Layout und JS-Zeilen-Layout. */
@media(max-width:760px){
  .nav-wrapper{flex-wrap:wrap;gap:0 16px;}
  .nav-brand{margin-right:auto;}
  .nav-toggle{display:flex;order:3;margin-left:0;}
  .nav-cta{order:2;font-size:13.5px;padding:10px 18px;}
  .nav-links{
    display:none;
    order:4;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    width:100%;
    flex-basis:100%;
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid var(--border);
  }
  .nav-links.open{display:flex;}
  .nav-link{width:100%;padding:11px 0;}
  .nav-link.active{border-bottom-color:transparent;}
}
@media(max-width:400px){
  .nav-logo{height:26px;}
  .nav-cta{font-size:13px;padding:9px 15px;}
}

/* Sobald nav.js laeuft, uebernimmt es die Steuerung: Links bleiben in der
   Zeile, Ueberlauf regelt das Mehr-Menue. Erst unterhalb der Mobilschwelle
   greift wieder das klassische Hamburger-Menue. */
.js-nav .nav-links{display:flex;}
.js-nav .nav-toggle{display:none;}
@media(max-width:760px){
  .js-nav .nav-links{display:none;flex-direction:column;align-items:flex-start;
    gap:2px;width:100%;flex-basis:100%;margin-top:12px;padding-top:12px;
    border-top:1px solid var(--border);}
  .js-nav .nav-links.open{display:flex;}
  .js-nav .nav-toggle{display:flex;}
  .js-nav .nav-more{display:none !important;}
}

/* Buttons */
.btn{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  font-size:15px;
  padding:15px 30px;
  border-radius:999px;
  text-decoration:none;
  border:none;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(169,118,46,0.3);
  transition:transform .15s, box-shadow .15s, background .15s;
}
.btn:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:0 8px 20px rgba(169,118,46,0.4);}
.btn-outline{
  display:inline-block;background:transparent;color:var(--marine);font-weight:700;font-size:15px;
  padding:14px 28px;border-radius:999px;text-decoration:none;border:1.5px solid var(--marine);transition:background .15s,color .15s;
}
.btn-outline:hover{background:var(--marine);color:#fff;}

/* Sections */
section{padding:var(--space-section) 0;}
section.alt{background:var(--muted-bg);}
section.tight{padding:var(--space-section-sm) 0;}
h1{font-size:var(--fs-h1);font-weight:800;line-height:1.12;margin:0 0 16px;letter-spacing:-0.02em;overflow-wrap:break-word;hyphens:auto;}
h1 .hl-accent{color:var(--marine);}
h1::after{content:"";display:block;width:52px;height:4px;border-radius:2px;background:var(--marine);margin:18px 0 22px;}
h2{font-size:var(--fs-h2);font-weight:800;margin:0 0 18px;letter-spacing:-0.02em;line-height:1.2;}
h3{font-size:var(--fs-h3);font-weight:700;margin:0 0 8px;letter-spacing:-0.01em;}
p{margin:0 0 16px;font-size:var(--fs-body);}
.lede{font-size:var(--fs-lede);color:var(--text-muted);max-width:640px;line-height:1.65;}
.section-head{margin-bottom:var(--space-block);}
.section-head h2{margin-bottom:12px;}
.section-head .lede{margin-bottom:0;}
@media(max-width:760px){
  :root{--space-section:64px;--space-section-sm:48px;--fs-h1:34px;--fs-h2:26px;}
}
.eyebrow{
  display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.06em;color:var(--marine);
  text-transform:uppercase;margin:0 0 14px;background:#fff;border:1px solid #D7E2EC;padding:6px 14px;border-radius:999px;
}

/* Grids */

/* Drei Kernfragen (Startseite). War vorher inline gesetzt und konnte
   dadurch auf schmalen Displays nicht umbrechen -> horizontales Scrollen. */
.q-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:28px;}
.q-item{text-align:center;padding:0 24px;}
/* Trennlinien nur zwischen den Spalten, nicht vor der ersten */
.q-item + .q-item{border-left:1px solid rgba(13,59,102,0.15);}
@media(max-width:760px){
  .q-grid{grid-template-columns:1fr;gap:28px;}
  .q-item{padding:0;}
  /* einspaltig: senkrechte Linien wuerden neben dem Text stehen */
  .q-item + .q-item{border-left:0;}
}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
@media(max-width:760px){.grid-3,.grid-2{grid-template-columns:1fr;}}

.card{
  background:#fff;border:1px solid var(--border);border-radius:12px;padding:28px;
  box-shadow:0 1px 2px rgba(13,59,102,0.04);
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.card:hover{border-color:var(--marine);box-shadow:0 10px 24px rgba(13,59,102,0.1);transform:translateY(-3px);}
.card h3{margin-bottom:10px;}
.card p{color:var(--text-muted);font-size:15px;margin:0;}

/* Icon circle */
.icon-circle{
  height:52px;width:52px;border-radius:50%;
  background:linear-gradient(135deg,#EEF3F8,#DCE9F4);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
  color:var(--marine);
}
.icon-circle svg{width:24px;height:24px;stroke:var(--marine);}

/* Art panel (illustration placeholder instead of flat box) */
.art-panel{
  position:relative;border-radius:14px;overflow:hidden;
  background:linear-gradient(135deg,#F3F7FB,#D9E7F2);
  display:flex;align-items:center;justify-content:center;
}
.art-panel svg{width:70%;height:70%;}
.art-caption{
  position:absolute;bottom:12px;left:14px;font-size:11px;color:#6E8CA3;background:rgba(255,255,255,.75);
  padding:3px 9px;border-radius:999px;font-weight:600;
}

/* Placeholder boxes for tool/widget embeds (genuinely pending) */
.placeholder{
  border:1.5px dashed #B9C7D2;
  border-radius:12px;
  background:#FAFBFC;
  color:#7C8A94;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:14px;
  padding:24px;
}
.placeholder.tool{height:220px;margin:32px 0;}
.placeholder.logo{height:48px;width:140px;font-size:12px;}

/* Lists */
ul.plain{list-style:none;padding:0;margin:0;}
ul.plain li{padding:12px 0;border-bottom:1px solid var(--border);font-size:15.5px;padding-left:26px;position:relative;}
ul.plain li::before{content:"";position:absolute;left:0;top:19px;width:8px;height:8px;border-radius:2px;background:var(--marine);}
ul.plain li:last-child{border-bottom:none;}

/* Forms */
form.contact-form{display:grid;gap:16px;max-width:520px;}
form.contact-form label{display:block;font-size:14px;font-weight:600;margin-bottom:6px;}
form.contact-form input, form.contact-form select, form.contact-form textarea{
  width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:8px;font-family:inherit;font-size:15px;
}
form.contact-form input:focus, form.contact-form select:focus, form.contact-form textarea:focus{
  outline:2px solid var(--marine);outline-offset:1px;
}

/* Footer */
footer{background:var(--marine);color:#EAF0F6;padding:52px 0 28px;}
footer a{text-decoration:none;color:#EAF0F6;}
footer a:hover{color:#fff;}
.footer-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:32px;margin-bottom:32px;}
.footer-partner{display:flex;align-items:center;gap:10px;font-size:13px;color:#C7D6E4;}
.footer-partner .placeholder{height:20px;width:70px;font-size:9px;border-color:#3E6389;color:#9FB9CE;background:transparent;}
.footer-links{display:flex;gap:24px;flex-wrap:wrap;font-size:13px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.15);padding-top:20px;font-size:12px;color:#B7C9D9;}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media(max-width:760px){.steps{grid-template-columns:1fr 1fr;}}
/* Unter 560px reicht die Breite fuer zwei Spalten nicht mehr --
   ohne diese Stufe laufen die Karten aus dem Viewport. */
@media(max-width:560px){.steps{grid-template-columns:1fr;}}

/* Hero with photographic background (Startseite) */
.hero-photo{
  position:relative;
  min-height:600px;
  display:flex;
  align-items:center;
  background-size:cover;
  background-position:center;
  overflow:hidden;
  padding:72px 0;
}
/* leichte Grundabdunklung, damit die Karte auf jedem Motiv sitzt */
.hero-photo::before{
  content:"";
  position:absolute; inset:0;
  background:rgba(20,30,45,0.18);
}
/* .hero-photo ist ein Flex-Container. Ohne width:100% schrumpft der
   .container als Flex-Item auf seine Inhaltsbreite -- dann stimmt weder
   die Kartenbreite noch die Ausrichtung am Raster der Sektionen darunter. */
.hero-photo .container{position:relative; z-index:1; width:100%;}
/* halbtransparente weiße Karte: traegt den Text */
.hero-logo{
  width:100%;
  max-width:440px;
  height:auto;
}
/*
  Die Karte selbst ist reines Gestaltungselement (Hintergrund/Schatten) und
  darf frei positioniert sein. Der TEXT darin muss aber exakt auf derselben
  Linie stehen wie der Text in den Sektionen darunter (.container hat 24px
  Innenabstand). Statt die ganze Karte per negativem Margin zu verschieben,
  bekommt die Karte selbst keinen Innenabstand -- dafuer sitzt darin ein
  eigenes Element (.hero-photo-content) mit dem Innenabstand. Damit bleibt
  die Textkante in jeder Breite exakt im Raster, ohne Sonderfaelle je
  Breakpoint.
*/
.hero-photo-inner{
  --hero-pad-x:44px;
  --hero-pad-y-top:44px;
  --hero-pad-y-bottom:40px;
  max-width:940px;
  margin-right:auto;      /* linksbuendig, nicht zentriert */
  margin-left:calc(-1 * var(--hero-pad-x)); /* Kartenrand beginnt am Container-Rand */
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:16px;
  box-shadow:0 18px 50px rgba(13,59,102,0.18);
  overflow:hidden;
}
/* Skip-Link: unsichtbar, aber ohne die Seite zu verbreitern.
   left:-9999px wuerde horizontales Scrollen erzeugen. */
.skip-link{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  background:var(--marine);color:#fff;font-weight:700;z-index:999;
}
.skip-link:focus{
  width:auto;height:auto;clip:auto;clip-path:none;
  left:0;top:0;padding:12px 20px;border-radius:0 0 8px 0;
}
.hero-photo-content{
  padding:var(--hero-pad-y-top) var(--hero-pad-x) var(--hero-pad-y-bottom);
}
/* Vertrauensbeleg neben dem Conversion-Punkt, bewusst zurueckhaltend gesetzt */
.trust-line{
  margin:18px 0 0;
  font-size:13.5px;
  line-height:1.6;
  color:var(--text-muted);
  max-width:62ch;
}
.hero-photo h1{color:var(--ink);}
.hero-photo h1::after{background:var(--marine); opacity:1;}
/* Karte ist breiter als der Standard-Lauftext -- Zeilenlaenge trotzdem
   im lesbaren Korridor halten (ca. 60-75 Zeichen), nicht volle Breite. */
.hero-photo .lede{color:var(--text-muted);max-width:68ch;}
.hero-photo .hl-accent{color:var(--marine);}

/* Container waechst mit, bis er die volle Breite einnimmt.
   Sobald die Karte die volle Containerbreite ausfuellt, muss der
   negative Margin verschwinden -- sonst rutscht die Textkante wieder
   nach links aus dem Raster. */
@media(max-width:1000px){
  /* Karte spannt ueber die volle Breite der Sektion (bis zum Bildschirmrand)
     und traegt den Innenabstand selbst. Der Innenabstand entspricht exakt dem
     Container-Padding, dadurch fluchtet der Hero-Text mit den Sektionen
     darunter UND behaelt sichtbaren Abstand zur Kartenkante.
     Umgesetzt ueber das Container-Padding, nicht ueber negative Margins --
     die wuerden horizontales Scrollen erzeugen. */
  .hero-photo .container{padding:0;}
  .hero-photo-inner{
    max-width:100%;
    margin-left:0;
    border-radius:0;
    --hero-pad-x:24px;
  }
  .hero-photo{min-height:auto;padding:56px 0;}
}
@media(max-width:640px){
  .hero-photo-inner{--hero-pad-y-top:32px;--hero-pad-y-bottom:30px;}
  .hero-logo{max-width:300px;}
}
@media(max-width:480px){
  .hero-logo{max-width:250px;}
}



/* Prozess-Flow (Startseite: So arbeiten wir zusammen) */
.flow{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;margin:36px 0 28px;position:relative;
}
.flow-step{position:relative;padding:0 14px;text-align:left;}
.flow-step::after{
  content:"";position:absolute;top:26px;left:calc(50% + 34px);right:calc(-50% + 34px);
  height:2px;background:rgba(13,59,102,0.18);
}
.flow-step:last-child::after{display:none;}
.flow-icon{
  position:relative;height:52px;width:52px;border-radius:50%;
  background:#fff;border:2px solid rgba(13,59,102,0.18);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  color:var(--marine);z-index:1;
}
.flow-icon svg{width:22px;height:22px;stroke:var(--marine);}
.flow-num{
  position:absolute;top:-6px;right:-6px;height:22px;width:22px;border-radius:50%;
  background:var(--marine);color:#fff;font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.flow-title{font-weight:700;font-size:15px;line-height:1.3;margin-bottom:4px;}
.flow-sub{font-size:14px;color:var(--text-muted);line-height:1.45;}

/* Leistungs-Karten */
.svc-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--border);border-radius:14px;padding:30px 28px 26px;
  text-decoration:none;color:inherit;
  box-shadow:0 1px 2px rgba(13,59,102,0.04);
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.svc-card:hover{border-color:var(--marine);box-shadow:0 14px 30px rgba(13,59,102,0.12);transform:translateY(-4px);}
.svc-icon{
  height:50px;width:50px;border-radius:13px;
  background:linear-gradient(135deg,#EEF3F8,#DCE9F4);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.svc-icon svg{width:24px;height:24px;stroke:var(--marine);}
.svc-card h3{margin-bottom:8px;}
.svc-card p{color:var(--text-muted);font-size:15px;margin:0 0 16px;}
.svc-list{list-style:none;margin:0 0 22px;padding:0;flex-grow:1;}
.svc-list li{
  position:relative;padding-left:20px;font-size:14.5px;color:var(--text-muted);
  margin-bottom:8px;line-height:1.45;
}
.svc-list li::before{
  content:"";position:absolute;left:0;top:8px;
  width:7px;height:7px;border-radius:50%;background:var(--marine);opacity:0.35;
}
.svc-link{font-weight:700;font-size:14.5px;color:var(--marine);display:inline-flex;align-items:center;gap:7px;}
.svc-arrow{transition:transform .18s;display:inline-block;}
.svc-card:hover .svc-arrow{transform:translateX(4px);}

/* Fakten-Liste (Über mich Teaser) */
.fact-list{list-style:none;margin:0 0 24px;padding:0;}
.fact-list li{
  position:relative;padding-left:26px;font-size:15.5px;color:var(--text-muted);
  margin-bottom:11px;line-height:1.5;
}
.fact-list li strong{color:var(--ink);font-weight:700;}
.fact-list li::before{
  content:"";position:absolute;left:0;top:7px;width:12px;height:12px;
  border-radius:50%;border:2px solid var(--marine);opacity:0.5;
}

/* Feinschliff */
a{transition:color .15s, opacity .15s;}
.container a:not(.btn):not(.nav-link):not(.nav-cta):not(.svc-card):not(.svc-link){
  color:var(--marine);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(13,59,102,0.3);
}
.container a:not(.btn):not(.nav-link):not(.nav-cta):not(.svc-card):not(.svc-link):hover{
  text-decoration-color:var(--marine);
}
.svc-link{text-decoration:none;}
img{max-width:100%;}
footer a,
footer .footer-links a,
footer .container a{
  color:#F2F6FA !important;text-decoration:none;opacity:.9;
}
footer a:hover,
footer .footer-links a:hover,
footer .container a:hover{
  opacity:1;text-decoration:underline;text-underline-offset:3px;color:#fff !important;
}
footer a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px;}
::selection{background:rgba(13,59,102,0.15);}
@media(max-width:760px){
  .flow{grid-template-columns:1fr 1fr;gap:28px 0;}
  .flow-step::after{display:none;}
  .svc-card{padding:26px 22px 22px;}
}
@media(max-width:480px){
  .flow{grid-template-columns:1fr;}
}

/* ===================================================================
   Visitenkarte (Kontaktseite)
   Drei Spalten: Person | Daten | QR. Bricht gestuft um.
   =================================================================== */
.vcard{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:36px;
  align-items:start;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:32px 36px;
  box-shadow:0 10px 34px rgba(13,59,102,0.07);
}
.vcard-person{display:flex;flex-direction:column;align-items:center;gap:16px;}
.vcard-portrait{
  width:150px;height:150px;border-radius:50%;object-fit:cover;
  object-position:center 22%;
  border:3px solid #fff;box-shadow:0 4px 16px rgba(13,59,102,0.16);
}
.vcard-logo{width:150px;height:auto;}

.vcard-data{min-width:0;}
.vcard-name{font-size:23px;font-weight:800;color:var(--ink);margin:0 0 2px;line-height:1.2;}
.vcard-role{font-size:var(--fs-small);color:var(--marine);font-weight:600;margin:0 0 22px;}

/* dt/dd nebeneinander -- Label schmal, Wert fluessig */
.vcard-list{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;margin:0;}
.vcard-list dt{
  font-size:12px;font-weight:700;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:0.06em;padding-top:3px;
}
.vcard-list dd{margin:0;font-size:var(--fs-body);color:var(--ink);line-height:1.5;
  overflow-wrap:anywhere;}
/* kein eigener Border-Unterstrich -- der globale Link-Unterstrich reicht,
   sonst entsteht eine doppelte Linie */
.vcard-list a:hover{color:var(--marine);}

.vcard-cred{
  margin:22px 0 0;padding-top:16px;border-top:1px solid var(--border);
  font-size:12.5px;line-height:1.6;color:var(--text-muted);
}

.vcard-qr{text-align:center;flex-shrink:0;}
.vcard-qr img{
  width:170px;height:170px;display:block;
  border:1px solid var(--border);border-radius:10px;padding:8px;background:#fff;
}
.vcard-qr-hint{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--text-muted);}
.vcard-qr-alt{
  display:inline-block;margin-top:10px;font-size:12.5px;
  color:var(--marine);
}

/* QR wandert unter die Daten, Person bleibt links */
@media(max-width:900px){
  .vcard{grid-template-columns:auto 1fr;gap:28px 32px;}
  .vcard-qr{
    grid-column:1 / -1;
    display:flex;align-items:center;gap:18px;text-align:left;
    border-top:1px solid var(--border);padding-top:24px;
  }
  .vcard-qr img{width:130px;height:130px;}
  .vcard-qr-hint{margin:0;}
  .vcard-qr-alt{margin-top:6px;}
}
/* alles gestapelt und zentriert */
@media(max-width:620px){
  .vcard{grid-template-columns:1fr;padding:26px 22px;gap:24px;text-align:center;}
  .vcard-data{text-align:center;}
  .vcard-list{grid-template-columns:1fr;gap:2px;justify-items:center;}
  .vcard-list dt{padding-top:12px;}
  .vcard-list dt:first-child{padding-top:0;}
  .vcard-qr{flex-direction:column;text-align:center;gap:10px;}
}

/* ===================================================================
   Rechner-Platzhalter
   Steht dort, wo spaeter der eingebettete Rechner sitzt. Signalisiert
   ruhig "kommt bald", ohne wie ein Fehler oder eine Baustelle zu wirken.
   =================================================================== */
.calc-placeholder{
  border:1.5px dashed var(--border);
  border-radius:16px;
  background:
    linear-gradient(rgba(238,243,248,0.6), rgba(238,243,248,0.6));
  padding:48px 40px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.calc-placeholder-icon{
  width:52px;height:52px;flex-shrink:0;
  color:var(--marine);opacity:0.75;
}
.calc-placeholder h3{
  margin:0;font-size:var(--fs-h3);color:var(--ink);
}
.calc-placeholder p{
  margin:0;max-width:46ch;color:var(--text-muted);
  font-size:var(--fs-body);line-height:1.6;
}
.calc-placeholder .calc-note{
  margin-top:4px;font-size:var(--fs-small);color:var(--marine);
  font-weight:600;letter-spacing:0.02em;
}
@media(max-width:640px){
  .calc-placeholder{padding:36px 22px;}
}
/* Eingebetteter Rechner (Europace baufi-passt-flex) */
.calc-embed{
  margin-top:24px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  overflow:hidden;
}
.calc-embed baufi-passt-flex{
  display:block;
  width:100%;
}
.section-head + .calc-embed,
.calc-embed + .calc-note{ margin-top:20px; }
#rechner .calc-note{
  margin-top:16px;font-size:var(--fs-small);color:var(--marine);
  font-weight:600;letter-spacing:0.02em;
}
@media(max-width:640px){
  .calc-embed{padding:10px;border-radius:12px;}
}

/* ===================================================================
   Ablauf: Nachsatz in Schritt 4 + Zusammenfassungs-Block
   =================================================================== */
.step-followup{
  display:inline-block;margin-top:8px;
  font-size:13px;line-height:1.5;color:var(--text-muted);
}

.summary-highlight{
  display:flex;gap:22px;align-items:flex-start;
  background:#fff;border:1px solid var(--border);border-radius:16px;
  padding:30px 34px;box-shadow:0 8px 26px rgba(13,59,102,0.06);
}
.summary-icon{
  width:40px;height:40px;flex-shrink:0;color:var(--marine);
  margin-top:4px;
}
.summary-highlight h2{margin:0 0 8px;font-size:var(--fs-h3);}
.summary-highlight p{margin:0;color:var(--text-muted);line-height:1.6;max-width:60ch;}
@media(max-width:640px){
  .summary-highlight{flex-direction:column;gap:14px;padding:24px 22px;}
}

/* ===================================================================
   Ueber mich: herausgestellte Kernaussage
   =================================================================== */
.pull-quote{
  margin:22px 0;padding:4px 0 4px 20px;
  border-left:3px solid var(--accent);
  font-size:19px;line-height:1.5;font-weight:600;color:var(--ink);
  font-style:normal;
}
@media(max-width:640px){
  .pull-quote{font-size:17px;}
}

/* ===================================================================
   Rechtstexte (Impressum, Datenschutz)
   =================================================================== */
.legal{max-width:760px;}
.legal h2{
  font-size:20px;margin:38px 0 10px;
  padding-top:20px;border-top:1px solid var(--border);
}
.legal h2:first-of-type{border-top:none;padding-top:0;margin-top:8px;}
.legal h3{font-size:16px;margin:22px 0 6px;color:var(--ink);}
.legal p{color:var(--text-muted);line-height:1.7;margin:0 0 14px;max-width:70ch;}
.legal a{color:var(--marine);overflow-wrap:anywhere;word-break:break-word;}
.legal strong{color:var(--ink);}
/* Cookie-Tabelle (Kundenportal-Datenschutz) */
.legal-table-wrap{
  width:100%;overflow-x:auto;margin:8px 0 20px;
  -webkit-overflow-scrolling:touch;
}
.legal-table{
  width:100%;border-collapse:collapse;
  font-size:var(--fs-small);min-width:560px;
}
.legal-table th,.legal-table td{
  border:1px solid var(--border);
  padding:10px 12px;text-align:left;vertical-align:top;
  color:var(--text-muted);line-height:1.5;
}
.legal-table th{
  background:var(--muted-bg);color:var(--ink);font-weight:700;
}
.legal-stand{margin-top:24px;color:var(--text-muted);}
@media(max-width:640px){
  .legal-table{font-size:12.5px;}
  .legal-table th,.legal-table td{padding:8px 9px;}
}

/* ===================================================================
   Netzwerk: klickbare Partner-Karten mit Logo + nützliche Links
   =================================================================== */
.partner-link{
  display:flex;flex-direction:column;align-items:flex-start;
  text-decoration:none;color:inherit;height:100%;
}
.partner-logo{
  height:64px;display:flex;align-items:center;
  margin-bottom:18px;
}
.partner-logo img{
  max-height:52px;max-width:180px;width:auto;height:auto;
}
/* Logo mit hellen Bildteilen (z. B. 3NERGY, weisser Schriftzug) auf dunklem Grund lesbar machen */
.partner-logo--dark{
  height:auto;align-self:flex-start;
  background:var(--ink);border-radius:8px;
  padding:14px 18px;
}
.partner-link h3{margin:0 0 8px;color:var(--ink);}
.partner-link p{margin:0 0 16px;color:var(--text-muted);line-height:1.6;flex:1;}
.partner-visit{
  font-size:14px;font-weight:700;color:var(--marine);
  transition:transform .15s;
}
.card:hover .partner-visit{transform:translateX(3px);}
.card:has(.partner-link){transition:box-shadow .15s, transform .15s;}
.card:has(.partner-link):hover{
  box-shadow:0 10px 30px rgba(13,59,102,0.10);transform:translateY(-2px);
}

/* Nützliche Websites: dezente Liste, keine grossen Karten */
.link-list{list-style:none;margin:0;padding:0;max-width:720px;}
.link-list li{
  padding:16px 0;border-bottom:1px solid var(--border);
}
.link-list li:last-child{border-bottom:none;}
.link-list a{
  font-weight:700;font-size:16px;color:var(--marine);
  display:inline-block;margin-bottom:3px;
}
.link-list span{
  display:block;color:var(--text-muted);font-size:14px;line-height:1.55;
}

/* ===================================================================
   Terminbuchung: Auswahl-Kacheln + eingebettetes fincrm-Widget
   =================================================================== */
.termin-auswahl{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px;
}
.termin-karte{
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  gap:6px;padding:24px 22px;background:#fff;
  border:1.5px solid var(--border);border-radius:16px;
  cursor:pointer;font-family:inherit;text-decoration:none;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.termin-karte:hover{
  border-color:var(--marine);box-shadow:0 6px 22px rgba(13,59,102,0.08);
  transform:translateY(-2px);text-decoration:none;
}
.termin-karte.is-active{
  border-color:var(--marine);box-shadow:0 0 0 2px var(--marine) inset;
}
.termin-karte-titel{font-size:18px;font-weight:800;color:var(--ink);}
.termin-karte-dauer{
  font-size:13px;font-weight:700;color:var(--marine);letter-spacing:0.02em;
}
.termin-karte-text{
  font-size:14px;color:var(--text-muted);line-height:1.55;margin-top:2px;flex:1;
}
.termin-karte-cta{
  margin-top:10px;font-size:14px;font-weight:700;color:var(--accent);
}
.termin-karte--bald{opacity:0.6;cursor:not-allowed;}
.termin-karte--bald:hover{
  border-color:var(--border);box-shadow:none;transform:none;
}
.termin-karte--bald .termin-karte-cta{color:var(--text-muted);}
.termin-widget-wrap{
  margin-top:28px;background:#fff;border:1px solid var(--border);
  border-radius:16px;padding:14px;
}
.termin-widget-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:6px 6px 12px;flex-wrap:wrap;
}
#termin-widget-label{font-weight:800;color:var(--ink);font-size:16px;}
.termin-widget-extern{font-size:14px;font-weight:600;color:var(--marine);white-space:nowrap;}
#termin-iframe{
  width:100%;min-height:760px;border:none;border-radius:10px;display:block;
}
.termin-widget-fallback{
  margin:12px 6px 4px;font-size:14px;color:var(--text-muted);line-height:1.6;
}
.termin-widget-fallback a{color:var(--marine);font-weight:600;}
@media(max-width:820px){
  .termin-auswahl{grid-template-columns:1fr;}
  #termin-iframe{min-height:640px;}
}

/* ===================================================================
   fincrm Lead-Widget (Antragsstrecke) auf der Kontaktseite
   =================================================================== */
.leadform-wrap{
  margin-top:24px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px;
  min-height:400px;
}
.leadform-wrap fc-leadform{
  display:block;
  width:100%;
}
@media(max-width:640px){
  .leadform-wrap{padding:12px;border-radius:12px;}
}

/* Ankersprung-Ziele nicht hinter der fixierten Navigation verstecken */
#anfrage, #termin{ scroll-margin-top:90px; }


/* ===================================================================
   Cookie-Consent (fl-cc) – in Marken-Design integriert
   =================================================================== */
.fl-cc,.fl-cc *{box-sizing:border-box;}
.fl-cc-overlay{
  position:fixed;inset:0;background:rgba(43,43,43,.45);
  z-index:9998;display:none;
}
.fl-cc-overlay.is-open{display:block;}
.fl-cc-banner{
  position:fixed;z-index:9999;left:50%;bottom:24px;transform:translateX(-50%);
  width:min(680px,calc(100% - 32px));
  background:#fff;color:var(--ink);
  border:1px solid var(--border);border-top:3px solid var(--marine);
  border-radius:10px;box-shadow:0 6px 28px rgba(13,59,102,.16);
  padding:26px 28px;display:none;
}
.fl-cc-banner.is-open{display:block;}
.fl-cc-title{font-size:18px;font-weight:800;color:var(--marine);margin:0 0 10px;}
.fl-cc-text{font-size:14.5px;color:var(--ink);margin:0 0 18px;line-height:1.65;}
.fl-cc-text a{color:var(--marine);text-decoration:underline;}
.fl-cc-actions{display:flex;flex-wrap:nowrap;gap:8px;}
.fl-btn{
  font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;
  border-radius:8px;padding:11px 12px;border:1px solid transparent;
  transition:background .15s,border-color .15s,color .15s;
  flex:1 1 0;min-width:0;text-align:center;white-space:nowrap;
}
.fl-btn-accept{background:var(--accent);color:#fff;border-color:var(--accent);}
.fl-btn-accept:hover{background:var(--accent-dark);border-color:var(--accent-dark);}
.fl-btn-reject{background:#fff;color:var(--ink);border-color:#C9CCD1;}
.fl-btn-reject:hover{border-color:var(--marine);color:var(--marine);}
.fl-btn-settings{background:#fff;color:var(--marine);border-color:#C9CCD1;}
.fl-btn-settings:hover{border-color:var(--marine);}
.fl-cc-modal{
  position:fixed;z-index:9999;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(620px,calc(100% - 32px));max-height:88vh;overflow:auto;
  background:#fff;border-radius:10px;
  box-shadow:0 6px 28px rgba(13,59,102,.16);border-top:3px solid var(--marine);
  padding:28px;display:none;
}
.fl-cc-modal.is-open{display:block;}
.fl-cc-modal h2{font-size:19px;color:var(--marine);margin:0 0 6px;font-weight:800;}
.fl-cc-modal .fl-cc-text{margin-bottom:20px;}
.fl-cat{border:1px solid var(--border);border-radius:8px;padding:16px 18px;margin-bottom:12px;}
.fl-cat-head{display:flex;justify-content:space-between;align-items:center;gap:16px;}
.fl-cat-name{font-weight:800;font-size:15px;color:var(--ink);}
.fl-cat-desc{font-size:13.5px;color:var(--text-muted);margin:8px 0 0;line-height:1.6;}
.fl-cat-cookies{font-size:12px;color:#8A8A8A;margin:8px 0 0;}
.fl-switch{position:relative;width:46px;height:26px;flex:0 0 auto;}
.fl-switch input{opacity:0;width:0;height:0;}
.fl-slider{position:absolute;inset:0;background:#C9CCD1;border-radius:26px;transition:background .15s;cursor:pointer;}
.fl-slider::before{content:"";position:absolute;height:20px;width:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .15s;}
.fl-switch input:checked + .fl-slider{background:var(--marine);}
.fl-switch input:checked + .fl-slider::before{transform:translateX(20px);}
.fl-switch input:disabled + .fl-slider{background:var(--marine);opacity:.5;cursor:not-allowed;}
.fl-cc-modal .fl-cc-actions{margin-top:22px;}
@media (max-width:520px){
  .fl-cc-banner{padding:22px 20px;bottom:0;border-radius:8px 8px 0 0;}
  .fl-cc-actions{flex-wrap:wrap;}
  .fl-btn{flex:1 1 100%;padding:12px 16px;font-size:14.5px;}
  .fl-btn-accept{order:-1;}
}

/* Widget-Platzhalter im Anfrage-Slot (bis Statistik-Einwilligung) */
.leadform-wrap .consent-platzhalter{
  background:var(--muted-bg);border:1px dashed var(--border);border-radius:14px;
  padding:32px 24px;text-align:center;
}
.consent-platzhalter-titel{font-weight:800;color:var(--ink);font-size:16px;margin:0 0 8px;}
.consent-platzhalter p{color:var(--text-muted);font-size:14.5px;line-height:1.6;margin:0 0 16px;}
.consent-platzhalter .fl-btn{display:inline-block;flex:0 0 auto;min-width:0;margin:0 auto;}
.consent-platzhalter-alt{margin-top:12px !important;font-size:13.5px;}
.consent-platzhalter-alt a{color:var(--marine);font-weight:600;}

/* Adresse als Google-Maps-Routenlink in der Visitenkarte */
.vcard-maps{color:inherit;text-decoration:none;display:inline-block;}
.vcard-maps:hover{color:var(--marine);}
.vcard-maps-hint{
  display:block;margin-top:4px;font-size:13px;font-weight:700;color:var(--marine);
}
.vcard-maps:hover .vcard-maps-hint{text-decoration:underline;}

/* Fördermittel-Teaser (Baufinanzierung) – dezent, nicht im Fokus */
.foerder-teaser{
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  flex-wrap:wrap;
  background:var(--muted-bg);border:1px solid var(--border);border-radius:16px;
  padding:28px 32px;
}
.foerder-teaser-text{flex:1 1 340px;}
.foerder-teaser-text h2{margin:0 0 8px;font-size:22px;}
.foerder-teaser-text p{margin:0;color:var(--text-muted);line-height:1.6;font-size:var(--fs-body);}
.foerder-teaser .btn-outline{flex:0 0 auto;white-space:nowrap;}
@media(max-width:640px){
  .foerder-teaser{padding:24px 22px;}
  .foerder-teaser .btn-outline{width:100%;text-align:center;}
}