/* ELB-MAKLER – Design-Aufwertung (Vorschau, nicht live)
   Alles rein CSS + ein kleines Skript für Scroll-Einblendungen.
   Läuft ausschließlich über transform/opacity → GPU, keine Layout-Arbeit.
   prefers-reduced-motion wird überall beachtet. */

/* ---------- 1. Hero: ruhige, langsame Bildbewegung + gestaffelter Texteinstieg ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero.start{background-image:none !important}
.hero.start::before{
  content:"";position:absolute;inset:-4%;z-index:-1;
  background:linear-gradient(rgba(12,40,64,.68),rgba(12,40,64,.68)),
    image-set(url(images/versicherungsmakler-hamburg-elbmakler-hero-800.webp) type('image/webp'),
              url(images/versicherungsmakler-hamburg-elbmakler-hero-800.jpg) type('image/jpeg'))
    center 30%/cover no-repeat;
  animation:hero-drift 26s ease-in-out infinite alternate;
  will-change:transform;
}
@media (min-width:801px){
  .hero.start::before{
    background:linear-gradient(rgba(12,40,64,.68),rgba(12,40,64,.68)),
      image-set(url(images/versicherungsmakler-hamburg-elbmakler-hero.webp) type('image/webp'),
                url(images/versicherungsmakler-hamburg-elbmakler-hero.jpg) type('image/jpeg'))
      center 30%/cover no-repeat;
  }
}
@keyframes hero-drift{from{transform:scale(1) translateY(0)}to{transform:scale(1.06) translateY(-1.5%)}}

.hero .badge{animation:rise-in .6s .05s ease-out backwards}
.hero h1{animation:rise-in .6s .15s ease-out backwards}
.hero p.sub{animation:rise-in .6s .3s ease-out backwards}
.hero .ctas{animation:rise-in .6s .45s ease-out backwards}
@keyframes rise-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Kupferlinie als unterer Abschluss des Heros */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--accent) 0%,rgba(192,102,47,.15) 70%,transparent 100%)}

/* ---------- 2. Abschnittsüberschriften: kurze Kupfer-Unterstreichung ---------- */
.sec{position:relative;padding-bottom:14px}
.sec::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:3px;
  border-radius:2px;background:var(--accent)}
.kontakt-dark .sec::after{background:var(--accent)}

/* ---------- 3. Kacheln & Karten: Anheben beim Überfahren, Bild leicht vergrößern ---------- */
.card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover{transform:translateY(-5px);box-shadow:0 14px 32px rgba(18,57,91,.14);border-color:#d4c39e}
.card img{transition:transform .45s ease}
.card:hover img{transform:scale(1.045)}
.card a.more{display:inline-block;transition:transform .2s ease}
.card:hover a.more{transform:translateX(4px)}

.step{transition:transform .25s ease,box-shadow .25s ease}
.step:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(18,57,91,.12)}
.step .num{transition:transform .25s ease}
.step:hover .num{transform:scale(1.12)}

.quote{transition:transform .25s ease,box-shadow .25s ease}
.quote:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(18,57,91,.10)}

.chips span,.chips a{transition:border-color .2s ease,background .2s ease,transform .2s ease}
.chips a:hover{border-color:var(--accent);background:var(--bg-soft);transform:translateY(-2px)}

/* ---------- 4. Knöpfe: weiche Übergänge + leichtes Anheben ---------- */
.btn{transition:background .2s ease,border-color .2s ease,transform .15s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(141,71,25,.28)}
.btn:active{transform:translateY(0)}
.btn.ondark:hover{box-shadow:0 6px 16px rgba(0,0,0,.25)}
.nav-schaden{transition:transform .15s ease,box-shadow .2s ease}
.nav-schaden:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.25)}

.wa-float{transition:transform .2s ease,box-shadow .2s ease}
.wa-float:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(0,0,0,.35)}

/* ---------- 5. Scroll-Einblendung: Inhalte gleiten sanft herein ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.rv.da{opacity:1;transform:none}
/* Kacheln, Schritte und Zitate hintereinander gestaffelt */
.rv:nth-child(2){transition-delay:.08s}
.rv:nth-child(3){transition-delay:.16s}
.rv:nth-child(4){transition-delay:.24s}
/* Ohne JavaScript bleibt alles sichtbar */
html:not(.js) .rv{opacity:1;transform:none}

/* ---------- 6. Mobile Kontaktleiste am unteren Rand ---------- */
.kontakt-leiste{display:none}
@media(max-width:700px){
  .kontakt-leiste{position:fixed;left:0;right:0;bottom:0;z-index:60;
    display:grid;grid-template-columns:1fr 1fr 1fr;
    background:var(--navy);box-shadow:0 -2px 12px rgba(10,25,40,.35);
    padding:env(safe-area-inset-bottom) 0 0;
    transform:translateY(110%);transition:transform .3s ease}
  .kontakt-leiste.da{transform:none}
  .kontakt-leiste a{display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:9px 4px 10px;color:#fff;text-decoration:none;font-size:12px;font-weight:600}
  .kontakt-leiste a+a{border-left:1px solid rgba(255,255,255,.15)}
  .kontakt-leiste svg{width:20px;height:20px;fill:currentColor}
  .kontakt-leiste .kl-termin{background:var(--accent)}
  /* WhatsApp steckt in der Leiste – der schwebende Ball ist mobil überflüssig */
  body.hat-kontakt-leiste .wa-float{display:none}
  body.hat-kontakt-leiste .einwilligung-leiste{bottom:calc(58px + env(safe-area-inset-bottom))}
}

/* ---------- Bewegung aus, wenn das System es verlangt ---------- */
@media (prefers-reduced-motion: reduce){
  .hero.start::before{animation:none}
  .hero .badge,.hero h1,.hero p.sub,.hero .ctas{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  .card,.card img,.step,.quote,.btn,.wa-float,.kontakt-leiste{transition:none}
  .card:hover,.step:hover,.quote:hover,.btn:hover{transform:none}
  .card:hover img{transform:none}
}

/* ---------- 7. Google-Bewertungen: Knopf statt unterstrichenem Textlink ---------- */
.google-knopf{display:inline-flex;align-items:center;gap:10px;
  background:var(--card);border:1px solid var(--line);border-radius:28px;
  padding:12px 24px;font-size:15px;font-weight:600;color:var(--ink);
  text-decoration:none;box-shadow:0 2px 8px rgba(18,57,91,.07);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.google-knopf svg{width:20px;height:20px;flex:none}
.google-knopf:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(18,57,91,.14);border-color:#d4c39e}
@media (prefers-reduced-motion: reduce){.google-knopf{transition:none}.google-knopf:hover{transform:none}}

/* ---------- 8. Ratgeber: unvollständige letzte Kartenreihe mittig ---------- */
.cards3.mittig{display:flex;flex-wrap:wrap;justify-content:center}
.cards3.mittig .card{flex:0 1 342px;min-width:280px}

/* ---------- 9. Kontaktblock als Karte mit Symbolen ---------- */
.k-karte{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:6px 22px;box-shadow:0 2px 10px rgba(18,57,91,.06)}
.k-karte .k-zeile{display:flex;gap:16px;align-items:flex-start;padding:16px 0;color:var(--ink)}
.k-karte .k-zeile+.k-zeile{border-top:1px solid var(--line)}
.k-karte svg{width:22px;height:22px;flex:none;fill:var(--accent);margin-top:2px}
.k-karte b{color:var(--ink)}
.k-karte a{color:var(--accent-dark);font-weight:600;text-decoration:none}
.k-karte a:hover{text-decoration:underline}
/* dunkle Variante, falls der Block auf Navy steht */
.kontakt-dark .k-karte{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2)}
.kontakt-dark .k-karte .k-zeile{color:var(--footer-ink)}
.kontakt-dark .k-karte .k-zeile+.k-zeile{border-top-color:rgba(255,255,255,.15)}
.kontakt-dark .k-karte b{color:#fff}
.kontakt-dark .k-karte a{color:#fff}

/* Ratgeber, zweite Reihe: die zwei letzten Karten liegen quer und füllen die Breite */
@media (min-width:821px){
  .cards3.mittig .card:nth-child(4),.cards3.mittig .card:nth-child(5){
    flex:1 1 42%;flex-direction:row;align-items:stretch}
  .cards3.mittig .card:nth-child(4) img,.cards3.mittig .card:nth-child(5) img,
  .cards3.mittig .card:nth-child(4) picture,.cards3.mittig .card:nth-child(5) picture{
    width:42%;height:auto;min-height:100%;object-fit:cover}
  .cards3.mittig .card:nth-child(4) picture img,.cards3.mittig .card:nth-child(5) picture img{
    width:100%;height:100%}
  .cards3.mittig .card:nth-child(4) .pad,.cards3.mittig .card:nth-child(5) .pad{width:58%}
}

/* Kontaktseite: Formular bekommt denselben Kartenrahmen wie der Infoblock rechts */
.kontakt-hell .form{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:24px;box-shadow:0 2px 10px rgba(18,57,91,.06);align-self:start}
.kontakt-hell .form input,.kontakt-hell .form textarea{background:#fff}

/* Kontakt-Karte: festes Raster, damit Symbole, Text und Trennlinien exakt fluchten */
.k-karte{padding:4px 24px}
.k-karte .k-zeile{display:grid;grid-template-columns:24px 1fr;gap:0 16px;align-items:start;padding:18px 0}
.k-karte svg{width:21px;height:21px;margin-top:3px;justify-self:center}
.k-karte .k-zeile b{display:block;line-height:1.45}
.k-karte .k-zeile div{min-width:0}

/* Footer: Abschlusszeile mit Rechtslinks links und Social-Symbolen rechts */
.footer-unten{display:flex;justify-content:space-between;align-items:center;gap:14px 28px;flex-wrap:wrap;
  margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16)}
.footer-unten .legal-links{display:flex;gap:10px 22px;flex-wrap:wrap}

/* Kontaktseite: beide Spalten enden auf einer Fluchtlinie */
.kontakt-hell .k-grid{align-items:stretch}
.kontakt-hell .form{align-self:stretch}
.kontakt-hell .k-info{align-self:stretch}
.kontakt-hell .k-info .k-karte{height:100%;display:flex;flex-direction:column}
.kontakt-hell .k-karte .k-actions{margin-top:auto;padding-top:20px}
.kontakt-hell .k-karte .note{padding-top:14px}

/* Knöpfe in der Kontakt-Karte behalten ihre weiße Schrift (Kartenlinkfarbe gilt nur für Textlinks) */
.k-karte a.btn{color:var(--accent-ink);text-decoration:none}
.k-karte a.btn.wa{color:#fff}
.k-karte a.btn:hover{text-decoration:none}

/* Die Überschrift der Kartenzeile ist ein eigener Block – der alte <br> dahinter würde doppeln */
.k-karte .k-zeile b + br{display:none}

/* Footer: Adressteil als zwei geordnete Spalten mit kleinen Rubriken statt Textblock */
.footer-spalten{display:grid;grid-template-columns:auto auto;gap:24px 72px;justify-content:start}
.f-titel{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#d9915e;margin:0 0 10px;font-weight:700}
.f-block p{margin:0 0 10px;line-height:1.65}
.f-block p:last-child{margin-bottom:0}
.f-block b{color:#fff}
.f-block a{color:var(--footer-ink);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.f-block a:hover{color:#fff;border-bottom-color:#fff}
@media(max-width:560px){.footer-spalten{grid-template-columns:1fr}}

/* ---------- Über mich: großes Zitat, Fakten-Häkchen, Porträt mit Versatzrahmen ---------- */
.zitat-gross{position:relative;margin:26px 0 24px;padding:10px 0 10px 34px;
  font-size:clamp(22px,2.6vw,30px);font-weight:700;line-height:1.3;color:var(--ink)}
.zitat-gross::before{content:"\201E";position:absolute;left:-6px;top:-34px;
  font-size:110px;line-height:1;color:var(--accent);opacity:.32;font-family:Georgia,serif;pointer-events:none}
.zitat-gross::after{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;
  border-radius:2px;background:linear-gradient(180deg,var(--accent),rgba(192,102,47,.25))}
.zitat-gross cite{display:block;margin-top:10px;font-style:normal;font-weight:600;
  font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-dark)}
.fakten-zeile{display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:26px}
.fakten-zeile span{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--ink)}
.fakten-zeile svg{width:17px;height:17px;fill:var(--accent);flex:none}
/* Porträt bekommt einen kupferfarbenen Versatzrahmen */
.split .framed{position:relative;border:none;box-shadow:0 10px 28px rgba(18,57,91,.14)}
.split > div:first-child{position:relative}
.split > div:first-child::before{content:"";position:absolute;inset:14px -14px -14px 14px;
  border:2px solid var(--accent);border-radius:12px;opacity:.55;z-index:-1}
.split > div:first-child{isolation:isolate}

/* Zier-Anführungszeichen entfernt – es stand frei im Raum */
.zitat-gross::before{content:none}
.zitat-gross{padding-left:22px}

/* Der Versatzrahmen saß auf dem falschen Element – das Bild steckt in einem <picture> */
.split > picture{position:relative;display:block;isolation:isolate}
.split > picture::before{content:"";position:absolute;inset:14px -14px -14px 14px;
  border:2px solid var(--accent);border-radius:12px;opacity:.55;z-index:-1}
.split > picture img{position:relative;box-shadow:0 10px 28px rgba(18,57,91,.14)}

/* Über mich, neu gedacht: nur EIN Kupferakzent (die Abschnitts-Unterstreichung).
   Das Zitat steht groß und ruhig in Hafenblau – ohne Balken, ohne Namenszeile. */
.zitat-ruhig{margin:22px 0 20px;font-size:clamp(22px,2.6vw,30px);font-weight:700;
  line-height:1.3;color:var(--navy);letter-spacing:-.01em}
/* Häkchen zurückhaltend statt als weiterer Kupferakzent */
.fakten-zeile svg{fill:var(--navy);opacity:.7}

/* Kontakt-Karte: Termin-Knopf führt, WhatsApp begleitet als ruhiger Rahmen-Knopf */
.k-karte .k-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.k-karte .k-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 16px}
.k-karte a.btn.wa-ruhig{background:#fff;border:2px solid var(--line);color:var(--ink)}
.k-karte a.btn.wa-ruhig svg{width:19px;height:19px;fill:#25d366;flex:none}
.k-karte a.btn.wa-ruhig:hover{border-color:#25d366;box-shadow:0 6px 16px rgba(37,211,102,.2)}
@media(max-width:480px){.k-karte .k-actions{grid-template-columns:1fr}}

/* Fluchtlinie der Knopfreihen: beide Karten verankern Knöpfe und Hinweis unten gleich */
.k-karte{padding:4px 24px 24px}
.k-karte a.btn.wa{color:#fff}
.k-karte .k-actions .btn{min-height:48px;padding:0 16px}
.kontakt-hell .form button.btn{margin-top:auto;min-height:48px}
.kontakt-hell .form .note,.k-karte .note{min-height:4.8em;margin:0;padding:0}
.kontakt-hell .form .note{margin-top:2px}
.k-karte .note{margin-top:14px}
.k-karte .k-actions{padding-top:0;margin-top:auto}

/* Beide Hinweistexte reservieren dieselbe Höhe, Knöpfe brechen nicht um → eine Fluchtlinie */
.kontakt-hell .form .note,.k-karte .note{min-height:78px}
.kontakt-hell .form .note{margin-top:2px}
.k-karte .k-actions .btn{font-size:14px;white-space:nowrap;padding:0 12px}

/* Das Anliegen-Feld nimmt die Resthöhe der Karte auf – kein toter Raum unter dem Hinweis */
.kontakt-hell .form .feld:has(textarea){flex:1;display:flex;flex-direction:column}
.kontakt-hell .form textarea{flex:1;min-height:130px}
.kontakt-hell .form button.btn{margin-top:0}

/* Anliegen-Feld kompakt: die ganze Kartenzeile wird niedriger; wächst nur,
   wenn die rechte Karte höher ist, damit beide bündig bleiben */
.kontakt-hell .form textarea{min-height:88px}
.k-karte .k-zeile{padding:14px 0}
/* Rechte Karte weiter gestrafft, damit die ganze Zeile niedriger wird */
.k-karte{padding:0 24px 20px}
.k-karte .k-zeile{padding:12px 0}
.kontakt-hell .form .note,.k-karte .note{min-height:0}
.k-karte .note{min-height:0}
/* Gleiche Hinweishöhe ist der Anker der Knopf-Flucht – wiederhergestellt */
.kontakt-hell .form .note,.k-karte .note{min-height:78px}
/* Unterer Kartenrand beidseitig gleich – sonst wandern die Knöpfe 4 px auseinander */
.k-karte{padding-bottom:24px}

/* Rechte Infospalte schmaler – das Formular führt, rechts bleibt kompakt */
@media(min-width:821px){
  .kontakt-hell .k-grid{grid-template-columns:1.45fr 1fr;gap:36px}
}

/* Das Anliegen-Feld selbst: klein und fest – wächst nicht mehr mit */
.kontakt-hell .form .feld:has(textarea){flex:0 0 auto}
.kontakt-hell .form textarea{flex:none;height:76px;min-height:76px}
.kontakt-hell .form button.btn{margin-top:auto}

/* Knöpfe fest am Kartenboden, Hinweise in natürlicher Höhe darüber –
   die Flucht stimmt damit bei jeder Fensterbreite ohne reservierten Leerraum */
.kontakt-hell .form .note,.k-karte .note{min-height:0;margin:0 0 14px}
.kontakt-hell .form .note{margin-top:auto;padding-top:10px}
.k-karte .note{margin-top:auto;padding-top:10px}
.kontakt-hell .form button.btn{margin-top:0}
.k-karte .k-actions{margin-top:0}