/* =========================================================
   BASE / VARIABLEN
========================================================= */
:root{
  --brand-blue: #0b2a4b;
  --brand-blue-strong: #0b3a67;
  --brand-green: #1b6b3c;
  --text: #0a1220;

  --footer-text: #eaf1fb;
  --footer-muted: rgba(234,241,251,.78);
  --footer-line: rgba(255,255,255,.14);
  --footer-overlap: 0px;

  --content-top: 34px;   /* Abstand Header-Bar → erster Content (global) */
  --block-gap: 42px;     /* Abstand zwischen großen Inhaltsblöcken */

  --bottom-bar-h: 86px;      /* Ziel-Höhe Bottom-Bar (Desktop) */
  --bottom-offset: 0px;      /* wird per JS gesetzt: 0 oder Bottom-Bar Höhe */

  --fab-size: 50px;
  --fab-gap: 18px;
  --contact-gap: 36px;

  --page-pad: 22px;
  --page-max: 1100px;
}

*{ box-sizing: border-box; }
html, body{ height:100%; }

body{
  margin:0;
  font-family: Arial, sans-serif;
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  color:var(--text);
  
  padding-bottom: calc(var(--bottom-offset, 0px) + 24px + env(safe-area-inset-bottom, 0px));
}

a{ color:inherit; text-decoration:none; }

/* =========================================================
   CONTAINER (Header + Content + Footer identisch)
========================================================= */
@media (min-width:1200px){ :root{ --page-max: 1240px; } }
@media (min-width:1600px){ :root{ --page-max: 1320px; } }
@media (max-width:920px){  :root{ --page-pad: 16px; } }

.container{
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

/* =========================================================
   MAIN SPACING (global sauber)
========================================================= */
main{
  flex: 1;
  padding-top: var(--content-top);
  /* ✅ Platz unten: Bottom-Line nur wenn sichtbar + etwas Luft */
  padding-bottom: calc(var(--bottom-offset, 0px) + 24px);
}


/* Hero bekommt keinen Zusatzabstand, weil main bereits Abstand hat */
.hero{ padding-top: 0 !important; }

/* gleichmäßiger Abstand zwischen Sections */
main > section + section{ margin-top: var(--block-gap); }

/* falls irgendwo .section padding-top war */
.section{ padding-top: 0 !important; }

/* =========================================================
   TOP BRANDLINE
========================================================= */
.top-brandline{
  text-align:center;
  padding:10px 20px 8px;
  background:#fff;
}

.top-brandline .brand-name{
  font-weight:800;
  font-size:17px;
  line-height:1.05;
  color:#0b2a4b;
  letter-spacing:.2px;
}

.brand-subline{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:4px;
}

.brand-subline .brand-owner{
  font-weight:700;
  font-size:17px;
  color:#0b2a4b;
  white-space:nowrap;
}

.brand-subline .line{
  width:38px;
  height:2px;
  background:linear-gradient(to right, transparent, rgba(11,58,103,.95), transparent);
  border-radius:2px;
}

/* =========================================================
   HEADER
========================================================= */
.main-header{
  position: sticky;
  top: 0;
  z-index: 50;
}

/* ✅ wichtig: relative, damit mobile-nav absolut darunter sitzen kann */
.header-bar{
  min-height: 80px;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;

  background: linear-gradient(90deg, #0b2a4b, #0f355f 55%, #0b2a4b);

  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 8px 20px rgba(0,0,0,.12);
}

.header-bar-inner{
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);

  width: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;

  padding-top: 6px;
  padding-bottom: 6px;

  position: relative;
  z-index: 2;
}

/* Logo */
.logo-card{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  padding:2px 8px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.1);
  box-shadow:0 4px 18px rgba(0,0,0,.18);
}
.logo-img{
  height:72px;
  width:auto;
  display:block;
}

/* Desktop Navigation */
.main-nav{
  display:flex;
  gap:28px;
  white-space:nowrap;
  flex-wrap: nowrap;
}
.main-nav a{
  color:#fff;
  font-weight:700;
  position:relative;
  padding:6px 0;
  opacity:.95;
}
.main-nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:100%;
  height:2px;
  background:#fff;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s ease;
}
.main-nav a:hover::after,
.main-nav a.is-active::after{
  transform:scaleX(1);
}

/* =========================================================
   BURGER + MOBILE NAV (funktioniert)
========================================================= */
.menu-toggle{ display:none; }
.nav-mobile{ display:none; }

.menu-toggle{
  width:46px;
  height:40px;
  border:0;
  background:transparent;
  cursor:pointer;
  padding:0;
}
.menu-toggle span{
  display:block;
  height:2px;
  width:26px;
  background:#fff;
  border-radius:2px;
  margin:6px auto;
  transition:transform .18s ease, opacity .18s ease;
}

@media (max-width:920px){
  .main-nav{ display:none; }

  .menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  /* ✅ Dropdown direkt unter der blauen Header-Bar */
  .nav-mobile{
    display:block;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    z-index:999;

    background:#071526;
    border-top:1px solid rgba(255,255,255,.14);

    max-height:0;
    overflow:hidden;
    opacity:0;
    transform:translateY(-6px);
    transition:max-height .22s ease, opacity .18s ease, transform .18s ease;
  }

  .nav-mobile.is-open{
    max-height:420px;
    opacity:1;
    transform:translateY(0);
  }

  .nav-mobile a{
    display:block;
    padding:14px var(--page-pad);
    color:#fff;
    font-weight:800;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  .nav-mobile a:last-child{ border-bottom:0; }

  .nav-mobile a.nav-cta{
    background: rgba(255,255,255,.08);
  }

  .nav-mobile a.is-active{
    border-left:4px solid rgba(11,58,103,.95);
    padding-left: calc(var(--page-pad) - 4px);
  }

  /* Burger → X */
  .menu-toggle.is-open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
  .menu-toggle.is-open span:nth-child(2){ opacity:0; }
  .menu-toggle.is-open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

  /* Mobile Bottom-Bar ist höher */
  :root{ --bottom-bar-h:108px; }
}

/* =========================================================
   KONTAKT LAYOUT
========================================================= */
.contact-layout{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--contact-gap);
  align-items:flex-start;
}

@media (max-width:920px){
  .contact-layout{ grid-template-columns:1fr; gap:28px; }
  .contact-right{ order:2; }
}

/* Rechte Seite Bild */
.contact-right{
  margin-top:4px;
  aspect-ratio:16/9;
  max-height:520px;
  width:100%;
}
.contact-right img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:18px;
  box-shadow:0 18px 55px rgba(0,0,0,.12);
}

.form-hint {
  font-size: 13px;
  color: rgba(10,18,32,.65);
  line-height: 1.45;
  margin-top: 6px;
}

.field-hint {
  font-size: 12.5px;
  color: rgba(10,18,32,.65);
  line-height: 1.4;
}


/* ===== Contact Form (wieder sauber) ===== */
.form-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.08);
  padding: 22px;
}

.contact-form{ margin-top: 10px; }

.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.field{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field span{
  font-weight: 700;
  font-size: 13px;
  color: rgba(10,18,32,.78);
}

.field input,
.field textarea{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 14px;
  outline: none;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.field textarea{
  resize: vertical;
  min-height: 140px;
}

.field input:focus,
.field textarea:focus{
  border-color: rgba(11,58,103,.55);
  box-shadow: 0 0 0 4px rgba(11,58,103,.12);
}

.field-full{ grid-column: 1 / -1; }

.form-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 14px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.btn-primary{
  height: 44px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(90deg, #1b6b3c, #2f8f55);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(0,0,0,.14);
}

.hp-field{
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

@media (max-width:920px){
  .form-grid{ grid-template-columns: 1fr; }
}


/* Map größer */
.map-embed iframe{
  width:100%;
  height:420px;
  border:0;
  display:block;
}
@media (max-width:920px){
  .map-embed iframe{ height:320px; }
}


/* =========================
   Kontaktformular – Statusmeldungen
========================= */

.form-status {
  display: none;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
}

.form-status.is-success {
  display: block;
  background: rgba(27,107,60,.10);
  border: 1px solid rgba(27,107,60,.35);
  color: #1b6b3c;
}

.form-status.is-error {
  display: block;
  background: rgba(180,40,40,.10);
  border: 1px solid rgba(180,40,40,.35);
  color: #8b1d1d;
}







/* =========================================================
   MAP Consent Toggle (Hinweis vs. Karte)
========================================================= */
.map-disabled{
  display:none;               /* Default: aus */
  padding:16px 16px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:18px;
  background: rgba(11,42,75,.04);
  color: rgba(10,18,32,.82);
  line-height:1.5;
  margin-top: 10px;
}

.map-embed{
  display:none;               /* Default: aus */
  margin-top: 10px;
}

.map-embed.is-visible{
  display:block;              /* Karte sichtbar wenn erlaubt */
}

.map-disabled.is-visible{
  display:block;              /* Hinweis sichtbar wenn nicht erlaubt */
}

/* iframe Größe (dein vorhandenes Styling darf bleiben) */
.map-embed iframe{
  width:100%;
  height:420px;
  border:0;
  display:block;
}

@media (max-width:920px){
  .map-embed iframe{ height:320px; }
}




/* =========================================================
   FOOTER (inkl. LinkedIn wieder da)
========================================================= */
.footer{
  margin-top: 24px;
  background:#fff;
  color:#0a1220;
  border-top:1px solid rgba(0,0,0,.10);
}

.footer-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:4px;
  padding:calc(4px + var(--boottom-offset, 0px));
}

.footer-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.footer-links a{
  color:#0a1220;
  font-weight:800;
  font-size:14px;
  text-decoration:none;
  position:relative;
}

.footer-links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:100%;
  height:2px;
  background: rgba(11,58,103,.95);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .18s ease;
  border-radius:2px;
}
.footer-links a:hover::after{ transform: scaleX(1); }

.footer-copy{
  font-size:12px;
  color: rgba(10,18,32,.72);
}


/* ✅ LinkedIn Icon wieder sichtbar */
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  padding:0;
  border:none;
  background:none;
  color:#047af0;
  opacity:1;
  line-height:0;
}
.icon-btn svg{
  width:18px;
  height:18px;
  display:block;
}
.icon-btn:hover{ opacity:.85; }

/* =========================================================
   BOTTOM INFO BAR (stabil, fixed, ohne Footer-Docking)
========================================================= */
.bottom-info{
  position:fixed;
  left:0; right:0; bottom:0;
  height:var(--bottom-bar-h);
  z-index:1000;

  opacity:0;
  transform:translateY(16px);
  pointer-events:none;
  transition: 
  opacity .22s ease,
    transform .22s ease,
    bottom .18s ease; /* ✅ wichtig */
}

.bottom-info.is-visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.bottom-info__bg{
  position:absolute;
  inset:0;
  background:url("/assets/stuttgart-fernsehturm.jpg") center/cover no-repeat;
  filter: brightness(1.05) contrast(1.05);
}

.bottom-info__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(7,21,38,.70), rgba(11,42,75,.55) 55%, rgba(7,21,38,.70));
  border-top:1px solid rgba(255,255,255,.14);
}

.bottom-info__inner{
  position:relative;
  z-index:1;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  overflow:hidden;
}

.bottom-info__left{ min-width:0; }

.bottom-info__title{
  color:#fff;
  font-weight:900;
  font-size:15px;
  line-height:1.15;
}

.bottom-info__meta{
  color:rgba(234,241,251,.90);
  font-size:14px;
  line-height:1.2;

  display:flex;
  flex-wrap:wrap;     /* ✅ Umbruch erlaubt */
  gap:8px 10px;
  white-space:normal; /* ✅ kein Überlaufen */
}

.bottom-info__meta .sep{ opacity:.55; }

.bottom-info__meta a{
  color:rgba(234,241,251,.95);
  border-bottom:1px solid rgba(234,241,251,.25);
}
.bottom-info__meta a:hover{
  border-bottom-color: rgba(234,241,251,.55);
}

.bottom-info__right{ flex:0 0 auto; }

.bottom-info__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:38px;
  padding:0 16px;
  border-radius:12px;

  font-weight:900;
  font-size:14px;
  color:#fff;

  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.55);
  transition: background .2s ease, transform .15s ease;
}

.bottom-info__cta:hover{
  background: rgba(255,255,255,.18);
  transform: translateY(-1px);
}

/* Mobile Layout */
@media (max-width:920px){
  :root{ --bottom-bar-h:108px; }

  .bottom-info__inner{
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:10px;
  }

  .bottom-info__right{ width:100%; }
  .bottom-info__cta{ width:100%; }
  .bottom-info__title{ font-size:14px; }
  .bottom-info__meta{ font-size:13px; }
}

/* =========================================================
   FLOATING BUTTONS (immer über der Bottom-Line)
========================================================= */
.back-to-top,
.whatsapp-float{
  position: fixed;
  right: 18px;
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 16px;
  z-index: 950;

  background: #1f5fa8;
  color: #ffffff;
  box-shadow: 0 12px 26px rgba(0,0,0,.22);

  display: flex;
  align-items: center;
  justify-content: center;

  transition: transform .18s ease, opacity .18s ease, bottom .18s ease;
}

.whatsapp-float{
  position: fixed;
  right: 18px;
  bottom: calc(var(--bottom-offset, 0px) + 16px + var(--footer-overlap)); 
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 16px;
  z-index: 950;

  background: #1f5fa8;
  color: #ffffff;
  box-shadow: 0 12px 26px rgba(0,0,0,.22);

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 20px;
}

.back-to-top{
  bottom: calc(
    var(--bottom-offset, 0px)
    + 16px
    + var(--fab-size)
    + var(--fab-gap)
    + var(--footer-overlap)
  );

  font-size: 18px;
  border: none;
  cursor: pointer;

  opacity: 0;
  pointer-events: none;
}

.back-to-top.is-visible{
  opacity: 1;
  pointer-events: auto;
}

.back-to-top:hover,
.whatsapp-float:hover{
  transform: translateY(-2px);
}


/* =========================================================
   CONSENT (Cookies / externe Inhalte)
========================================================= */
.consent{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
}

.consent.is-open{ display:block; }

.consent__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.40);
  backdrop-filter: blur(6px);
}

.consent__card{
  position:absolute;
  left:50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(820px, calc(100% - 28px));
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
  padding: 18px 18px 14px;
}

.consent__top{
  display:flex;
  justify-content:flex-start;
  margin-bottom: 8px;
}

.consent__badge{
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(11,58,103,.10);
  color: rgba(11,58,103,.95);
}

.consent__title{
  margin: 0 0 6px 0;
  font-size: 18px;
  line-height: 1.2;
  color: #0a1220;
}

.consent__text{
  margin: 0 0 14px 0;
  color: rgba(10,18,32,.78);
  font-size: 14px;
  line-height: 1.45;
}

.consent__actions{
  display:flex;
  align-items:center;
  justify-content:center; /* ✅ Buttons zentriert */
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.consent__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 14px;
  text-decoration:none;
  cursor:pointer;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.65);
  color: #0a1220;
}

.consent__btn--ghost{
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.10);
}

.consent__btn--link{
  background: rgba(11,58,103,.08);
  border-color: rgba(11,58,103,.18);
  color: rgba(11,58,103,.95);
}

.consent__btn--primary{
  background: linear-gradient(90deg, #0b2a4b, #0b3a67 55%, #0b2a4b);
  border-color: rgba(255,255,255,.20);
  color:#fff;
}

.consent__btn:hover{ transform: translateY(-1px); }
.consent__btn:active{ transform: translateY(0); }

.consent__hint{
  margin: 0;
  font-size: 12.5px;
  color: rgba(10,18,32,.70);
  text-align: center;
}

/* Beim offenen Dialog: Scroll sperren */
body.consent-open{
  overflow: hidden;
}

/* =========================================================
   EXTERNAL EMBED (Google Maps gated)
========================================================= */
.ext-embed{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 16px 45px rgba(0,0,0,.06);
}

.ext-embed__frame{
  width: 100%;
  height: 420px;
  border: 0;
  display: none; /* ✅ erst nach Zustimmung */
}

.ext-embed.is-enabled .ext-embed__frame{
  display:block;
}

.ext-embed__placeholder{
  min-height: 220px;
  padding: 18px;
  background: rgba(255,255,255,.85);
  color: rgba(10,18,32,.80);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 10px;
}

.ext-embed__actions{
  display:flex;
  justify-content:flex-start;
}

.ext-embed__btn{
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  font-weight: 900;
  border: 1px solid rgba(11,58,103,.22);
  background: rgba(11,58,103,.10);
  color: rgba(11,58,103,.95);
  cursor:pointer;
}

.ext-embed__btn:hover{ filter: brightness(1.02); }

@media (max-width: 920px){
  .consent__card{
    bottom: 12px;
    padding: 16px 14px 12px;
  }
  .ext-embed__frame{ height: 320px; }
}


/* =========================
   Footer Cookie Button
========================= */
.footer-cookie-btn{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
  color: #0a1220;
  font-weight: 800;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 12px;
  cursor: pointer;
}
.footer-cookie-btn:hover{
  background: rgba(0,0,0,.06);
}

/* =========================
   Consent Modal
========================= */
.consent-modal{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
}
.consent-modal.is-open{ display:block; }

.consent-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(6px);
}

.consent-modal__card{
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  width: min(720px, calc(100% - 28px));
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  box-shadow: 0 20px 80px rgba(0,0,0,.22);
  padding: 18px 18px 14px;
}

.consent-modal__badge{
  display:inline-block;
  font-weight: 900;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(11,58,103,.10);
  color: #0b2a4b;
  margin-bottom: 10px;
}

.consent-modal__title{
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 900;
  color: #0a1220;
}

.consent-modal__text{
  margin: 0 0 14px 0;
  color: rgba(10,18,32,.78);
  font-size: 14px;
  line-height: 1.4;
}

.consent-modal__actions{
  display:flex;
  gap: 10px;
  justify-content: center; /* ✅ Buttons zentriert */
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
}

.consent-btn{
  height: 40px;
  padding: 0 14px;
  border-radius: 14px;
  font-weight: 900;
  font-size: 14px;
  border: 1px solid rgba(0,0,0,.12);
  cursor: pointer;
  text-decoration: none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.consent-btn--primary{
  background: linear-gradient(90deg, #0b2a4b, #0b3a67 55%, #0b2a4b);
  color:#fff;
  border-color: rgba(255,255,255,.18);
}

.consent-btn--ghost{
  background: #f1f2f4;
  color:#0a1220;
}

.consent-btn--link{
  background: #ffffff;
  color:#0b2a4b;
}

.consent-modal__hint{
  margin: 12px 0 0 0;
  text-align:center;
  font-size: 12px;
  color: rgba(10,18,32,.62);
}


/* =========================================================
   KUNDENPORTAL – hochwertiges Layout
========================================================= */

/* Wrapper, damit Text + Bild sauber nebeneinander stehen */
.kunden-hero{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 36px;
  align-items: start;
}

/* Headline + Lead */
.kunden-hero__text h1{
  margin: 0 0 10px 0;
  font-size: 34px;
  line-height: 1.15;
  max-width: 100%;
  color: var(--brand-blue);
  letter-spacing: -.2px;
}

.kunden-lead{
  margin: 0 0 16px 0;
  margin-bottom: 18px;
  font-size: 16px;
  color: rgba(10,18,32,.78);
  max-width: 100%;
  width: 100%;
  white-space: normal;
  line-height: 1.6;
}

/* Bullet-Card */
.kunden-bullets{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
  padding: 18px 18px;
  margin: 18px 0 18px 0;
}

.kunden-bullets ul{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
}

.kunden-bullets li{
  color: rgba(10,18,32,.82);
  line-height: 1.45;
}

.kunden-bullets strong{
  color: var(--brand-blue);
}

/* CTA Bereich */
.kunden-actions{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 12px 16px;
  align-items: center;
  margin: 18px 0 10px 0;
}

/* Button im gleichen Look wie deine Primary-Buttons */
.kunden-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 18px;
  border-radius: 14px;
  font-weight: 900;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(90deg, #0b2a4b, #0b3a67 55%, #0b2a4b);
  box-shadow: 0 14px 28px rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.18);
  transition: transform .12s ease, filter .12s ease;
}

.kunden-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.kunden-btn:active{
  transform: translateY(0);
}

.kunden-link{
  font-weight: 800;
  color: var(--brand-blue);
  border-bottom: 1px solid rgba(11,42,75,.28);
  padding-bottom: 2px;
  text-decoration: none;
  transition: border-color .15s ease, opacity .15s ease;
}
.kunden-link:hover{
  border-bottom-color: rgba(11,42,75,.75);
  opacity: .95;
}

/* Hinweistext */
.kunden-hint{
  margin: 12px 0 0 0;
  color: rgba(10,18,32,.70);
  font-size: 13.5px;
  line-height: 1.45;
  max-width: 100%;
  width: 100%;
}

/* Bild / Media Card */
.kunden-hero__media{
  position: sticky;
  top: calc(80px + var(--content-top)); /* sitzt schön unter Header */
  align-self: start;
}

.kunden-hero__media img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.10);
  object-fit: cover;
}

/* Zusatz-Info unterhalb */
.kunden-info{
  margin-top: 34px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
  padding: 20px 20px;
}

.kunden-info h2{
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 900;
  color: var(--brand-blue);
}

.kunden-info ol{
  margin: 0 0 14px 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  color: rgba(10,18,32,.82);
}

.kunden-info li{
  line-height: 1.45;
}

/* Callout */
.kunden-callout{
  margin-top: 18px;
  padding: 18px 14px;
  border-radius: 16px;
  border: 1px solid rgba(11,42,75,.16);
  background: rgba(11,42,75,.04);
  color: rgba(10,18,32,.86);
  line-height: 1.45;
}

.kunden-callout strong{
  color: var(--brand-blue);
}

/* Kleine Badge/Chip optional */
.kunden-chiprow{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0 0;
}
.kunden-chip{
  font-size: 12px;
  font-weight: 800;
  color: rgba(10,18,32,.72);
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 999px;
  padding: 6px 10px;
}

/* Button in Callout wie Bottom-Line CTA */
.kunden-callout .kunden-cta-secondary{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: 14px;
  height: 38px;
  padding: 0 18px;

  border-radius: 12px;
  font-weight: 900;
  font-size: 14px;
  color: #ffffff;

  background: rgba(11,42,75,.85);
  border: 1px solid rgba(11,42,75,.9);
  text-decoration: none;

  transition: transform .15s ease, background .15s ease;
}

.kunden-callout .kunden-cta-secondary:hover{
  background: rgba(11,42,75,1);
  transform: translateY(-1px);
}

.kunden-legal {
  margin-top: 14px;
  padding-left: 14px;
  border-left: 3px solid var(--brand-green);
  color: rgba(10,18,32,.75);
  font-size: 13.5px;
  line-height: 1.5;
}



/* =========================================================
   RESPONSIVE Kundenportal
========================================================= */
@media (max-width: 920px){
  .kunden-hero{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .kunden-hero__media{
    position: static;
  }

  .kunden-hero__text h1{
    font-size: 28px;
  }

  .kunden-btn{
    width: 100%;
  }

  .kunden-actions{
    align-items: stretch;
  }
}



/* =========================================================
   FAQ – Accordion Boxes (+ / -)
========================================================= */
.faq-wrapper{
  margin-top: 14px;
  display: grid;
  gap: 14px;
}

.faq-head{
  margin-bottom: 6px;
}

.faq-lead{
  margin: 0 0 6px 0;
  color: rgba(10,18,32,.78);
  line-height: 1.6;
}

.faq-wrapper h2{
  margin: 22px 0 4px 0;
  color: var(--brand-blue);
  font-size: 18px;
  font-weight: 900;
  position: relative;
  padding-left: 14px;
}

.faq-wrapper h2::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:4px;
  height:70%;
  transform:translateY(-50%);
  background: var(--brand-green);
  border-radius: 2px;
}

.faq-item{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
  overflow: hidden;
}

.faq-item summary{
  list-style: none;
  cursor: pointer;
  padding: 16px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  font-weight: 900;
  color: var(--brand-blue);
}

.faq-item summary::-webkit-details-marker{ display:none; }

.faq-q{
  display: inline-block;
  line-height: 1.35;
  font-size: 15.5px;
  letter-spacing: -.15px;
}





.faq-icon{
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 12px;
  border: 1px solid rgba(11,42,75,.18);
  border-color: rgba(11,42,75,.18);
  background: rgba(11,42,75,.05);
  position: relative;
}

/* Plus */
.faq-icon::before,
.faq-icon::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 14px;
  height: 2px;
  background: rgba(11,42,75,.95);
  transform: translate(-50%, -50%);
  border-radius: 2px;
}
.faq-icon::after{
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Wenn offen -> Minus (vertikale Linie ausblenden) */
.faq-item[open] .faq-icon::after{
  opacity: 0;
  background: rgba(27,107,60,.95);
}

/* Aktiv */
.faq-item[open] .faq-icon{
  border-color: rgba(27,107,60,.55);
  background: rgba(27,107,60,.12);
}

.faq-content{
  padding: 0 16px 16px 16px;
  color: rgba(10,18,32,.82);
  line-height: 1.6;
  font-size: 14.5px;
  max-width: none; /* bessere Lesbarkeit */
  width: 100%;
  animation: faqFade .18s ease;
}

@media (min-width: 980px){
  .faq-content{
    padding-left: 18px;
    padding-right: 18px;
  }
}


@keyframes faqFade{
  from{
    opacity:0;
    transform: translateY(-4px);
  }
  to{
    opacity:1;
    transform:none;
  }
}

.faq-content p{
  margin: 10px 0 0 0;
}

.faq-item summary:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(11,58,103,.14);
  border-radius: 16px;
}

/* leichte Hover-Interaktion */
.faq-item:hover{
  box-shadow: 0 18px 55px rgba(0,0,0,.08);
}

/* CTA Card */
.faq-cta{
  margin-top: 8px;
}
.faq-cta__card{
  background:
    linear-gradient (135deg,
      rgba(27,107,60,.08),
      rgba(11,42,75,.04)
    );
  border-color: rgba(27,107,60,.18);
  border: 1px solid rgba(11,42,75,.14);
  border-radius: 18px;
  padding: 18px 16px;
}

.faq-cta__card .kunden-btn{
  background:
    linear-gradient(
      90deg,
      var(--brand-green),
      #1f7a48 55%,
      var(--brand-green)
    );
}


.faq-cta__card h3{
  margin: 0 0 6px 0;
  color: var(--brand-blue);
  font-size: 16px;
  font-weight: 900;
}
.faq-cta__card p{
  margin: 0 0 12px 0;
  color: rgba(10,18,32,.78);
}

/* Aktive FAQ hervorheben */
.faq-item[open]{
  border-color: rgba(27,107,60,.45);
  box-shadow:
    0 18px 55px rgba(0,0,0,.08),
    0 0 0 1px rgba(27,107,60,.12) inset;
}

/* feine grüne Akzentlinie */
.faq-item[open] summary{
  background: linear-gradient(
    90deg,
    rgba(27,107,60,.08),
    rgba(27,107,60,0) 65%
  );
}

/* =========================================================
   Kundenportal: Text über mehr Breite (bis page-max)
========================================================= */
.kunden-hero--wide{
  grid-template-columns: 1fr; /* Standard: alles volle Breite */
  max-width: 100%;
}

/* Lead und Info nicht künstlich schmal machen */
.kunden-hero--wide .kunden-lead,
.kunden-hero--wide .kunden-hint{
  max-width: 100%;
}

/* Optional: wenn du später wieder 2 Spalten willst (Text + Bild) */
@media (min-width: 980px){
  .kunden-hero--wide.has-media{
    grid-template-columns: 1.2fr 0.8fr;
  }
}

/* Grüner Primary Button als Akzent (passt zum Logo) */
.kunden-btn--green{
  background: linear-gradient(90deg, var(--brand-green), #1f7a48 55%, var(--brand-green));
  border-color: rgba(255,255,255,.18);
}
.kunden-btn--green:hover{
  filter: brightness(1.03);
}

/* Optional: grüner Akzent in Bullet-Card */
.kunden-bullets{
  border-color: rgba(27,107,60,.18);
}

/* =========================================================
   Kundenportal (Option 2) – Login/Info Seite
========================================================= */
.kunden-portal{
  display: grid;
  gap: 18px;
}

.kunden-portal__head h1{
  margin: 0 0 8px 0;
  font-size: 34px;
  line-height: 1.15;
  color: var(--brand-blue);
  letter-spacing: -.2px;
}

.kunden-portal__grid{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 920px){
  .kunden-portal__head h1{ font-size: 28px; }
  .kunden-portal__grid{ grid-template-columns: 1fr; }
}

.kunden-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
  padding: 18px 18px;
  width: 100%;
  box-sizing: border-box;
}

.kunden-card h2{
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 900;
  color: var(--brand-blue);
}

.kunden-card__text{
  margin: 0 0 12px 0;
  color: rgba(10,18,32,.80);
  line-height: 1.6;
}

.kunden-card--soft{
  background: rgba(11,42,75,.03);
  border-color: rgba(11,42,75,.10);
  width: 100%;
}

.kunden-card--wide{
  padding: 18px 18px;
}

.kunden-steps{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  color: rgba(10,18,32,.82);
}

.kunden-checks{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  color: rgba(10,18,32,.82);
}

.kunden-callout--green{
  border: 1px solid rgba(27,107,60,.18);
  background: rgba(27,107,60,.06);
}

.kunden-btn--green{
  background: linear-gradient(90deg, var(--brand-green), #1f7a48 55%, var(--brand-green));
  border: 1px solid rgba(255,255,255,.18);
}

.kunden-btn--green:hover{
  filter: brightness(1.03);
}


/* =========================================================
   Kontakt-CTA – einheitlich mit anderen Kontaktbuttons
========================================================= */
.btn-contact{
  height: 44px;
  padding: 0 20px;
  border-radius: 14px;

  font-weight: 900;
  font-size: 14px;
  letter-spacing: .2px;

  background: linear-gradient(
    90deg,
    var(--brand-blue),
    var(--brand-blue-strong) 55%,
    var(--brand-blue)
  );

  box-shadow: 0 14px 28px rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.18);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition:
    transform .15s ease,
    filter .15s ease,
    box-shadow .15s ease;
}

.btn-contact:hover{
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 18px 34px rgba(0,0,0,.18);
}

.btn-contact:active{
  transform: translateY(0);
  box-shadow: 0 12px 24px rgba(0,0,0,.14);
}

/* =========================
   Kontaktformular – DSGVO Checkbox
========================= */

.consent-field {
  margin-top: 8px;
}

.consent-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  color: rgba(10,18,32,.8);
  line-height: 1.5;
}

.consent-check input[type="checkbox"] {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  accent-color: var(--brand-green);
  cursor: pointer;
}

.consent-check a {
  color: var(--brand-green);
  font-weight: 700;
  text-decoration: underline;
}

.consent-check a:hover {
  text-decoration: none;
}



/* =========================
   Leistungen
========================= */

.lead-text {
  max-width: 800px;
  font-size: 16px;
  color: rgba(10,18,32,.8);
  line-height: 1.6;
}

/* ✅ Leistungen: Intro + Grid exakt wie der Rest der Seite ausrichten */
.services-intro__inner,
.services-grid__inner{
  max-width: var(--page-max);          /* statt 980px: gleiche Breite wie Header/andere Seiten */
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-pad);       /* gleiche Einrückung wie .container */
  padding-right: var(--page-pad);
  width: 100%;
}

/* ✅ Grid-Layout der Karten: NUR hier definieren */
.services-grid__inner{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

/* ✅ Mobile */
@media (max-width: 920px){
  .services-grid__inner{
    grid-template-columns: 1fr;
  }
}

/* ❌ WICHTIG: die SECTION darf KEIN Grid sein (sonst bricht das Container-Raster) */
.services-grid{
  display: block;
  margin-top: 36px;
}


.services-cta {
  text-align: left;
}

.services-usp {
  padding-left: 18px;
  margin-bottom: 22px;
}


.service-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
}

.service-card h2 {
  margin-top: 0;
  color: var(--brand-blue);
}

.service-card ul {
  margin: 14px 0 0;
  margin-top: auto;
  padding-left: 18px;
}

.service-card li {
  margin-bottom: 8px;
  color: rgba(10,18,32,.8);
}

/* USP / Highlight */
.service-highlight {
  background: rgba(27,107,60,.05);
}

.highlight-list {
  max-width: 800px;
  padding-left: 18px;
}

.highlight-list li {
  margin-bottom: 10px;
  color: rgba(10,18,32,.85);
  font-weight: 500;
}

.btn-primary--green {
  background: linear-gradient(90deg, #1b6b3c, #2f8f55);
  border-color: rgba(255,255,255,.25);
}


/* CTA */
.service-cta {
  text-align: left;
}

.service-cta p {
  max-width: 700px;
  margin: 0 auto 18px;
}

/* Responsive */
@media (max-width: 920px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}

.service-highlight,
.service-cta{
  text-align:left;
}


.service-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px;
  padding: 22px 22px;
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
  border-top: 5px solid transparent;
}

.service-card--blue {
  border-top-color: var(--brand-blue);
}

.service-card--green {
  border-top-color: var(--brand-green);
}

.service-card--green-light {
  border-top-color: rgba(27,107,60,.6);
}

.service-card h2 {
  margin-top: 0;
  color: var(--brand-blue);
}


.service-icon {
  font-size: 32px;
  margin-bottom: 8px;
  color: var(--brand-green);
}


.service-card {
  transition: transform .25s ease, box-shadow .25s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,.08);
}


.services-lead {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(10,18,32,.82);
}



/* =========================================================
   STARTSEITE (Index) – clean, aligned, wie restliche Seiten
========================================================= */

.home-hero{
  padding-top: 10px;
}

.home-hero__inner{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 28px;
  align-items: center;
}

.home-kicker{
  margin: 0 0 8px 0;
  font-weight: 900;
  font-size: 12.5px;
  letter-spacing: .2px;
  color: rgba(10,18,32,.70);
  text-transform: uppercase;
}

.home-hero__text h1{
  margin: 0 0 12px 0;
  color: var(--brand-blue);
  font-size: 38px;
  line-height: 1.12;
  letter-spacing: -0.3px;
}

.home-lead{
  margin: 0 0 16px 0;
  max-width: 70ch;
  color: rgba(10,18,32,.78);
  font-size: 16px;
  line-height: 1.65;
}

.home-hero__actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items:center;
  margin: 14px 0 12px 0;
}

.btn-main{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 46px;
  padding: 0 18px;
  border-radius: 14px;
  font-weight: 900;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.12);
  transition: transform .12s ease, filter .12s ease;
}

.btn-main:hover{ transform: translateY(-1px); }
.btn-main:active{ transform: translateY(0); }

/* ✅ Grüner Button (wie von dir gewünscht) */
.btn-main--green{
  color:#fff;
  border-color: rgba(255,255,255,.18);
  background: linear-gradient(90deg, var(--brand-green), #2f8f55 55%, var(--brand-green));
  box-shadow: 0 14px 28px rgba(0,0,0,.14);
}

.btn-main--ghost{
  color: var(--brand-blue);
  background: rgba(255,255,255,.75);
  border-color: rgba(11,42,75,.18);
}

.home-trustrow{
  display:flex;
  flex-wrap:wrap;
  gap: 10px 12px;
  margin-top: 10px;
}

.home-trust{
  font-size: 13px;
  font-weight: 800;
  color: rgba(10,18,32,.72);
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.7);
  padding: 8px 12px;
  border-radius: 999px;
}

.home-hero__media{
  width:100%;
}

.home-hero__imgph{
  aspect-ratio: 16/10;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(10,18,32,.55);
  background: linear-gradient(180deg, rgba(11,42,75,.05), rgba(255,255,255,.65));
  padding: 18px;
  text-align:center;
}

/* Sections sauber trennen: ruhig + professionell */
.home-panel{
  padding: 26px 0;
}

.home-head{
  margin-bottom: 14px;
}

.home-sub{
  margin: 8px 0 0 0;
  color: rgba(10,18,32,.78);
  line-height: 1.65;
  max-width: 85ch;
}

.home-cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
}

.home-card{
  background:#fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
  padding: 18px 18px;
  position: relative;
  overflow: hidden;
}

.home-card h3{
  margin: 0 0 8px 0;
  color: var(--brand-blue);
  font-size: 17px;
}

.home-card p{
  margin: 0;
  color: rgba(10,18,32,.78);
  line-height: 1.6;
}

/* Farb-Akzente ohne "bunt" zu wirken */
.home-card::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 6px;
  opacity: .95;
}

.home-card--blue::before{ background: rgba(11,58,103,.95); }
.home-card--green::before{ background: rgba(27,107,60,.95); }
.home-card--mint::before{ background: rgba(47,143,85,.85); }

.home-center{
  display:flex;
  justify-content:center;
  margin-top: 18px;
}

/* Split Block */
.home-split__inner{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items: start;
}

.home-list{
  margin: 12px 0 0 0;
  padding-left: 18px;
  display:grid;
  gap: 10px;
  color: rgba(10,18,32,.80);
  line-height: 1.6;
}

.home-info{
  background:#fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
  padding: 18px;
}

.home-info h3{
  margin: 0 0 10px 0;
  color: var(--brand-blue);
  font-size: 16px;
  font-weight: 1000;
}

.home-steps{
  margin: 0 0 12px 0;
  padding-left: 18px;
  display:grid;
  gap: 8px;
  color: rgba(10,18,32,.80);
  line-height: 1.6;
}

.home-note{
  border-radius: 16px;
  padding: 14px 14px;
  border: 1px solid rgba(27,107,60,.18);
  background: rgba(27,107,60,.06);
  color: rgba(10,18,32,.82);
  line-height: 1.55;
}

/* Final CTA clean */
.home-cta__inner{
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.08);
  padding: 22px 18px;
  text-align: left;
}

.home-cta__text{
  margin-top: 8px;
}

/* Mobile */
@media (max-width: 920px){
  .home-hero__inner{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .home-hero__text h1{
    font-size: 30px;
  }

  .home-cards{
    grid-template-columns: 1fr;
  }

  .home-split__inner{
    grid-template-columns: 1fr;
  }

  .home-hero__actions .btn-main{
    width: 100%;
  }
}

/* =========================
   HOME CTA: Text links, Button rechts (Desktop)
========================= */
@media (min-width: 921px){
  .home-cta__inner{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 24px;
  }

  .home-cta__inner h2,
  .home-cta__text{
    grid-column: 1 / 2;
  }

  .home-cta__inner .home-center{
    grid-column: 2 / 3;
    justify-content: flex-end;
    margin-top: 0;
  }
}


/* =========================
   HOME PANEL: Elegante Trennlinien
========================= */
.home-panel{
  position: relative;
  padding: 34px 0;
}

.home-panel::before,
.home-panel::after{
  content:"";
  display:block;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(11,42,75,.18),
    transparent
  );
  margin: 0 auto;
}

.home-panel::before{
  margin-bottom: 22px;
}

.home-panel::after{
  margin-top: 26px;
}



.kunden-start{
  margin-top: 28px;
}

/* =========================
   HOME HERO – clean & professionell
========================= */

.home-hero{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}

/* echtes Hintergrundbild */
.home-hero--bg{
  background: url("/assets/bg-hero.png") center/cover no-repeat;
  filter: brightness(1.12) saturate(1.04);
}

/* dunkles Overlay für Lesbarkeit */
.home-hero--bg::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(7,21,38,.55),
    rgba(7,21,38,.35) 55%,
    rgba(7,21,38,.20)
  );
  z-index:0;
}

/* Inhalt nach vorne */
.home-hero__inner{
  position: relative;
  z-index: 1;
  padding: 48px 0;
  display: grid;
  grid-template-columns: 1fr;
}

/* Text-Card */
.home-hero__text{
  width: min(760px, 100%);
   background: rgba(255,255,255,.78); /* deutlich transparenter */
  backdrop-filter: blur(6px);        /* edler Glas-Effekt */
  -webkit-backdrop-filter: blur(6px);
  padding: 22px 22px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 55px rgba(0,0,0,.14);
}

/* Typo */
.home-kicker{
  margin: 0 0 8px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(10,18,32,.65);
}

.home-hero__text h1{
  margin: 0 0 10px;
  font-size: 34px;
  line-height: 1.15;
  color: var(--brand-blue);
}

.home-lead{
  margin: 0 0 14px;
  line-height: 1.6;
  color: rgba(10,18,32,.8);
}

/* Trust Chips */
.home-trustrow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.home-trust{
  background: rgba(11,42,75,.06);
  border: 1px solid rgba(11,42,75,.14);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(10,18,32,.82);
}

/* Mobile */
@media (max-width:920px){
  .home-hero__inner{ padding: 30px 0; }
  .home-hero__text h1{ font-size: 28px; }
}



/* =========================================================
   Kundenportal – Bildfüllung nach Textbox
========================================================= */

/* Kundenportal – Bild kleiner + sauber zugeschnitten */
.kunden-hero__media img{
  width: 100%;
  height: 600px;      /* <- kleiner machen (z.B. 260–340px) */
  object-fit: cover;
  display: block;
  border-radius: 18px;
}
@media (max-width:920px){
  .kunden-hero__media img{ height: 220px; }
}

/* Kundenportal – Sticky deaktivieren, damit nichts überlappt */
.kunden-hero__media{
  position: static;   /* statt sticky */
  top: auto;
}



/* =========================
   KUNDENPORTAL – Abstand Headline → Lead
========================= */

.kunden-portal__head .kunden-lead{
  margin-top: 14px;   /* ⬅ erhöht Abstand zur H1 */
}




/* =========================================================
   STARTSEITE – CTA BG sichtbar (gleiches Prinzip)
   -> setze am CTA-Section-Element class="section home-cta home-cta--bg"
========================================================= */



.home-cta--bg .home-cta__inner{
  position: relative;
  z-index: 2;
  padding: 26px 0;
}


/* =========================
   WARUM SCHMITT – FINAL STABIL
========================= */

.service-highlight--bg{
  position: relative;
  overflow: hidden;
  border-radius: 18px;

  /* ❌ KEIN flex */
  /* ❌ KEIN grid */

  /* ✅ Abstand zur Linie exakt wie andere Sections */
  padding: 0;
}

/* Hintergrundbild */
.service-highlight--bg::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("/assets/bg-cta.png") center/cover no-repeat;
  z-index:0;
}

/* Overlay */
.service-highlight--bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(7,21,38,.35);
  z-index:1;
}

/* Container steuert die Höhe */
.service-highlight--bg .container{
  position: relative;
  z-index: 2;

  /* ✅ HIER passiert die Vertikal-Zentrierung */
  min-height: 420px;
  display: flex;
  align-items: center;

  /* ✅ KEIN zusätzlicher Abstand */
  padding-top: 0;
  padding-bottom: 0;
}

/* Textbox */
.service-highlight__box{
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  border-radius: 18px;
  padding: 20px 26px;   /* ⬅ weniger Luft oben/unten */
  max-width: 820px;     /* ⬅ schmaler */
  margin-left: 0;       /* linksbündig */
}

/* Mobile */
@media (max-width:920px){
  .service-highlight--bg .container{
    min-height: auto;
    padding: 28px 0;
  }

  .service-highlight__box{
    padding: 18px;
  }
}


/* =========================
   FIX: Abstand Linie/Leistungen → Warum-Block kleiner
   (nur Startseite, nur direkt danach)
========================= */

/* Wenn deine Linie im Block .home-panel sitzt */
.home-panel + .service-highlight--bg{
  margin-top: 18px !important; /* kleiner machen (z.B. 14–22) */
}

/* =========================
   PDF PREVIEW (Embed)
========================= */

.pdf-preview{
  margin-top: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
  overflow: hidden;
}

.pdf-preview__head{
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.pdf-preview__head h3{
  margin: 0 0 6px 0;
  color: var(--brand-blue);
  font-size: 16px;
  font-weight: 900;
}

.pdf-preview__head p{
  margin: 0 0 12px 0;
  color: rgba(10,18,32,.75);
}

.pdf-preview__actions{
  display:flex;
  gap: 10px 14px;
  flex-wrap: wrap;
  align-items:center;
}

.pdf-preview__frame{
  width: 100%;
  height: 720px;         /* <- ENTSCHEIDEND */
  border: 0;
  display:block;
  background: #f6f7f9;
}

@media (max-width:920px){
  .pdf-preview__frame{ height: 520px; }
}

.pdf-preview__fallback{
  margin: 0;
  padding: 12px 18px 16px;
  font-size: 13px;
  color: rgba(10,18,32,.65);
  background: rgba(0,0,0,.02);
}



/* =========================================================
   ÜBER MICH – Styles (passend zur Startseite)
========================================================= */

.about-subline{
  margin: 6px 0 12px 0;
  font-weight: 800;
  font-size: 13px;
  color: rgba(10,18,32,.68);
}


.about-hero__inner{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 28px;
  align-items: start;
}

@media (max-width:920px){
  .about-hero__inner{ grid-template-columns: 1fr; gap: 18px; }
}


.about-lead,
.about-text{
  margin: 0;
  color: rgba(10,18,32,.78);
  line-height: 1.65;
  width: 100%;
}


.about-hero__media{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.10);
}
.about-hero__media img{
  width:100%;
  height: 380px;
  object-fit: cover;
  display:block;
}
@media (max-width:920px){
  .about-hero__media img{ height: 260px; }
}

/* Panels / Trennung */
.about-panel{
  position: relative;
  padding: 34px 0;
}
.about-panel--soft{
  background: rgba(11,42,75,.03);
  border-top: 1px solid rgba(11,42,75,.10);
  border-bottom: 1px solid rgba(11,42,75,.10);
}

/* Abstand der rechten Box zur oberen Linie im Split-Block */
.about-panel.about-panel--soft .about-info{
  margin-top: 10px;
}

@media (max-width:920px){
  .about-panel.about-panel--soft .about-info{
    margin-top: 0; /* mobil lieber kompakt */
  }
}


@media (max-width:920px){
  .about-cards{ grid-template-columns: 1fr; }
}



.about-card h3{
  margin: 0 0 8px 0;
  color: var(--brand-blue);
  font-size: 17px;
}
.about-card p{
  margin: 0;
  color: rgba(10,18,32,.78);
  line-height: 1.6;
}

/* Split */
.about-split__inner{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items: start;
}
@media (max-width:920px){
  .about-split__inner{ grid-template-columns: 1fr; }
}

.about-list,
.about-checks{
  margin: 12px 0 0 0;
  padding-left: 18px;
  display:grid;
  gap: 10px;
  color: rgba(10,18,32,.80);
  line-height: 1.6;
}

.about-info{
  background:#fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
  padding: 18px;
}
.about-info h3{
  margin: 0 0 10px 0;
  color: var(--brand-blue);
  font-size: 16px;
  font-weight: 1000;
}

/* Zertifikat Block */
.about-cert{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 18px;
  align-items: start;
}
@media (max-width:920px){
  .about-cert{ grid-template-columns: 1fr; }
}

.about-cert__actions{
  margin-top: 14px;
}

.about-note{
  margin-top: 10px;
  font-size: 13px;
  color: rgba(10,18,32,.65);
  line-height: 1.5;
}

.about-pdf{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.08);
  background: #fff;
  overflow:hidden;
}

/* CTA unten: Button rechts (Desktop) */
.about-cta__inner{
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.08);
  padding: 16px 18px;
  text-align: left;
}

.about-cta__inner h2{
  margin: 0 0 6px 0;
}

.about-cta__inner .about-text{
  margin-top: 0;
}

@media (min-width: 921px){
  .about-cta__inner{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 24px;
  }
  .about-cta__action{ justify-self: end; }
}


/* =========================================================
   ÜBER MICH – Arbeitsweise (NEUES Design, nicht wie Startseite)
========================================================= */

.work-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
}

@media (max-width:920px){
  .work-grid{ grid-template-columns: 1fr; }
}

.work-card{
  position: relative;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
  padding: 18px 18px 18px 18px;
  overflow: hidden;
}

/* Top Accent statt Seitenstreifen */
.work-card::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:4px;
  background: rgba(11,58,103,.95);
}

.work-card--green::before{ background: rgba(27,107,60,.95); }
.work-card--mint::before{ background: rgba(47,143,85,.85); }

.work-icon{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(11,42,75,.06);
  border: 1px solid rgba(11,42,75,.14);
  font-size: 20px;
  margin-bottom: 10px;

  /* kleine Animation */
  animation: workPop .55s ease both;
}

.work-card:nth-child(2) .work-icon{ animation-delay: .06s; }
.work-card:nth-child(3) .work-icon{ animation-delay: .12s; }

@keyframes workPop{
  from{ transform: translateY(6px) scale(.98); opacity:0; }
  to{ transform:none; opacity:1; }
}

.work-card h3{
  margin: 0 0 8px 0;
  color: var(--brand-blue);
  font-size: 17px;
}

.work-card p{
  margin: 0;
  color: rgba(10,18,32,.78);
  line-height: 1.6;
}

/* leichte Hover-Interaktion */
.work-card{
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.work-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 55px rgba(0,0,0,.08);
  filter: brightness(1.01);
}



/* =========================
   ABOUT – Passend für Eigentümer
========================= */

.about-head{
  margin-bottom: 14px;
}

.about-lead2{
  margin: 6px 0 0 0;
  color: rgba(10,18,32,.78);
  line-height: 1.6;
  max-width: 90ch;
}

.about-fit{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 16px;
}

.about-fit__item{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
  padding: 16px 16px;
}

.about-fit__icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(27,107,60,.10);
  border: 1px solid rgba(27,107,60,.18);
  margin-bottom: 10px;
  font-size: 18px;
}

.about-fit__item h3{
  margin: 0 0 6px 0;
  color: var(--brand-blue);
  font-size: 16px;
}

.about-fit__item p{
  margin: 0;
  color: rgba(10,18,32,.78);
  line-height: 1.55;
}

.about-expect{
  margin-top: 18px;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(11,42,75,.12);
  border-radius: 18px;
  padding: 16px 16px;
}

.about-expect h3{
  margin: 0 0 10px 0;
  color: var(--brand-blue);
  font-size: 16px;
  font-weight: 900;
}

@media (max-width: 920px){
  .about-fit{ grid-template-columns: 1fr; }
}




/* =========================================================
   ÜBER MICH – PASSEND FÜR (BG + große Overlay-Box)
========================================================= */

.about-target--bg{
  position: relative;
  overflow: hidden;
  border-radius: 18px;

  /* ✅ sorgt dafür, dass der Inhalt nicht am Bildrand klebt */
  padding: 52px 0;
}

.about-target--bg::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("/assets/bg-target.png") center/cover no-repeat;
  filter: brightness(.88) saturate(1.05) contrast(1.05);
  z-index:0;
}

.about-target--bg::after{
  content:"";
  position:absolute;
  inset:0;
  /* ✅ genug Overlay damit Bild sichtbar bleibt, aber Text nicht leidet */
  background: rgba(7,21,38,.22);
  z-index:1;
}

.about-target--bg .container{
  position: relative;
  z-index: 2;
}

/* ✅ große Lesbarkeits-Box */
.about-target__box{
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.14);

  /* ✅ HIER ist der Schlüssel: oben mehr Luft, damit Überschrift nicht zu hoch wirkt */
  padding: 34px 34px 22px;

  /* Box nicht überbreit, wirkt hochwertiger */
  width: 100%;
  margin: 40px auto 0;
}

/* Head spacing kompakter aber sauber */
.about-target__head h2{
  margin: 0 0 10px 0;
  color: var(--brand-blue);
  line-height: 1.15;
}
.about-target__head p{
  margin: 0;
  color: rgba(10,18,32,.78);
  line-height: 1.6;
  max-width: 90ch;
}

/* ✅ 3 Karten nebeneinander */
.about-target__grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.about-target__card{
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 16px 14px;
}

.about-target__card--blue{ border-top: 5px solid rgba(11,42,75,.95); }
.about-target__card--green{ border-top: 5px solid rgba(27,107,60,.95); }
.about-target__card--mint{ border-top: 5px solid rgba(47,143,85,.85); }

.about-target__icon{ font-size: 26px; margin-bottom: 6px; }
.about-target__card h3{ margin: 0 0 6px 0; color: var(--brand-blue); }
.about-target__card p{ margin: 0; color: rgba(10,18,32,.78); line-height: 1.55; }

/* Foot */
.about-target__foot{ margin-top: 18px; padding-top: 14px;border-top: 1px solid rgba(0, 0, 0, .08);}
.about-target__foot h3{ margin: 0 0 10px 0; color: var(--brand-blue); }
.about-target__foot ul{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  color: rgba(10,18,32,.82);
}

/* Mobile */
@media (max-width: 920px){
  .about-target--bg{ padding: 34px 0; }
  .about-target__box{ padding: 20px 18px 18px; }
  .about-target__grid{ grid-template-columns: 1fr; }
}


/* Eigenes Hero-Bild anpassen */
.about-hero__media{
  background: rgba(11,42,75,.05);   /* ruhige Fläche */
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.about-hero__media img{
  width: 100%;
  
  height: 100%;             /* 🔑 WICHTIG */
  object-fit: contain;      /* 🔑 KEIN crop */
  object-position: center 30%; /* Haare haben Priorität */
  display: block;
  border-radius: 0;
}