/*
Theme Name: GeneratePress Child - Peuker Immobilien Proof
Template: generatepress
Description: Child theme for the peuker_IMMOBILIEN homepage. Requires the GeneratePress parent theme. Styled to match Rico's 2026 homepage mockup design tokens.
Version: 2.0.0
Author: Shahin
*/

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  --navy: #152d4a;
  --orange: #ed6d04;
  --red: #df4225;
  --green: #1d6b45;
  --lightblue: #b9cdd4;

  --paper: #f7f3ec;
  --paper-2: #efe8dd;
  --ink: #20303f;
  --ink-soft: #5a6b78;
  --navy-700: #1c3a5e;
  --navy-900: #0f2137;
  --line: rgba(21, 45, 74, .12);
  --card: #fffdf9;

  --shadow-s: 0 1px 2px rgba(21, 45, 74, .06), 0 2px 6px rgba(21, 45, 74, .05);
  --shadow-m: 0 6px 16px rgba(21, 45, 74, .08), 0 14px 40px rgba(21, 45, 74, .10);
  --shadow-l: 0 10px 30px rgba(21, 45, 74, .12), 0 30px 70px rgba(21, 45, 74, .16);

  --wrap: 1180px;
  --radius: 16px;
  --radius-s: 10px;

  --ff-display: "Fraunces", Georgia, "Times New Roman", serif;
  --ff-body: "Mulish", "Segoe UI", Tahoma, sans-serif;
}

/* ============================================================
   2. RESET / BASE (mobile-first)
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0;
  font-family: var(--ff-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* subtle noise texture for depth */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

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

h1,
h2,
h3,
h4 {
  font-family: var(--ff-display);
  color: var(--navy);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0
}

p {
  margin: 0 0 1rem
}

strong {
  font-weight: 700;
  color: var(--navy-700)
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 22px
}

.section {
  padding-block: clamp(56px, 9vw, 110px)
}

.kicker {
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 .9rem
}

.kicker.red {
  color: var(--red)
}

.lead {
  font-size: clamp(1.05rem, 2.4vw, 1.22rem);
  color: var(--ink-soft);
  max-width: 60ch
}

/* ============================================================
   3. BUTTONS (Orange = CTA only)
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 1.02rem;
  padding: .95em 1.6em;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, background .25s;
  will-change: transform;
}

.btn-cta {
  background: linear-gradient(180deg, #f5822a 0%, var(--orange) 55%, #d95f00 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(237, 109, 4, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(237, 109, 4, .42), inset 0 1px 0 rgba(255, 255, 255, .3)
}

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

.btn-ghost {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--line);
  font-weight: 600
}

.btn-ghost:hover {
  border-color: var(--navy);
  background: rgba(21, 45, 74, .04)
}

.btn .arw {
  transition: transform .25s
}

.btn-cta:hover .arw {
  transform: translateX(3px)
}

/* ============================================================
   4. HEADER — schwebender Pillen-Header (September 2026)
   Basiert auf Rico's Header-Demo.html.
   Klassen: .kopf / .kopf-inner / .logo / .menue / .rechts /
            .tel / .cta / .burger / .fortschritt
   ============================================================ */
:root {
  --kopf-hoehe: 78px;
}

/* Outer wrapper: fixed, gives the "floating" gap via padding */
header.kopf {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  padding: 18px 24px 0;
  transition: padding .3s cubic-bezier(.4, 0, .2, 1);
}

/* Inner pill */
header.kopf .kopf-inner {
  /* override .wrap max-width centering but keep padding-inline */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--kopf-hoehe);
  padding: 0 26px;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid rgba(21, 45, 74, .10);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(21, 45, 74, .09);
  transition:
    height .3s cubic-bezier(.4, 0, .2, 1),
    box-shadow .3s ease,
    background .3s ease,
    border-radius .3s ease;
}

/* Compact scrolled state — JS adds .eng on kopf when scrollY > 40 */
header.kopf.eng {
  padding: 8px 16px 0;
}

header.kopf.eng .kopf-inner {
  height: 60px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 10px 34px rgba(21, 45, 74, .16);
  border-radius: 11px;
}

header.kopf.eng .logo-img {
  height: 30px;
}

/* Logo */
.logo-img {
  height: 38px;
  width: auto;
  display: block;
  transition: height .3s ease;
}

/* Desktop nav — hidden by default on mobile, shown via media query or .offen */
.menue {
  display: none;
  align-items: center;
  gap: 30px;
}

.menue ul {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menue a {
  position: relative;
  font-size: .93rem;
  font-weight: 500;
  color: var(--navy);
  opacity: .74;
  padding: 6px 0;
  transition: opacity .2s;
}

.menue a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}

.menue a:hover {
  opacity: 1;
}

.menue a:hover::after {
  transform: scaleX(1);
}

.menue a.aktiv,
.menue li.current-menu-item>a,
.menue li.current_page_item>a {
  opacity: 1;
  font-weight: 600;
}

.menue a.aktiv::after,
.menue li.current-menu-item>a::after,
.menue li.current_page_item>a::after {
  transform: scaleX(1);
}

/* Right-side actions */
.rechts {
  display: flex;
  align-items: center;
  gap: 20px;
}

.tel {
  display: none;
  font-size: .92rem;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  text-decoration: none;
}

.cta {
  display: none;
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  font-size: .86rem;
  padding: 11px 21px;
  border-radius: 6px;
  white-space: nowrap;
  text-decoration: none;
  transition: background .2s, transform .2s, box-shadow .2s;
}

.cta:hover {
  background: #d46203;
  color: #fff;
  /* GP a:hover overrides text colour — lock it white */
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(237, 109, 4, .32);
}

/* Burger */
.burger {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 8px;
  margin: -8px;
  cursor: pointer;
}

.burger span {
  display: block;
  width: 23px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform .3s, opacity .25s;
}

.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Optional progress bar (uncomment .fortschritt in header.php to activate) */
.fortschritt {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 0;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  border-radius: 2px;
  opacity: .85;
}

/* Focus ring */
header.kopf :focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── Desktop (≥ 1000 px) ── */
@media (min-width: 1000px) {
  .menue {
    display: flex;
  }

  .tel {
    display: block;
  }

  .cta {
    display: block;
  }

  .burger {
    display: none;
  }
}

/* ── Mobile (< 1000 px) ── */
@media (max-width: 999px) {
  header.kopf {
    padding: 12px 14px 0;
  }

  header.kopf.eng {
    padding: 6px 10px 0;
  }

  header.kopf .kopf-inner {
    padding: 0 16px;
    gap: 14px;
  }

  .rechts {
    gap: 12px;
  }

  .rechts .cta {
    display: block;
    padding: 8px 14px;
    font-size: .82rem;
  }

  .menue {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border: 1px solid rgba(21, 45, 74, .1);
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(21, 45, 74, .15);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s, transform .25s, visibility .25s;
  }

  /* KEY FIX: restore display:flex so the menu actually appears */
  .menue.offen {
    display: flex;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* WP outputs a <ul> inside .menue — make it a flex column */
  .menue ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .menue a {
    display: block;
    padding: 13px 14px;
    border-radius: 8px;
    font-size: 1rem;
    opacity: 1;
  }

  .menue a::after {
    display: none;
  }

  .menue li.current-menu-item>a,
  .menue li.current_page_item>a {
    background: var(--paper);
  }

  /* Show CTA button on mobile inside the open menu */
  .menue .cta {
    display: block;
    margin: 10px 4px 4px;
    text-align: center;
    border-radius: 8px;
  }
}

/* ── Mobile Compact (< 480 px, e.g. 390 px) ── */
@media (max-width: 480px) {
  header.kopf {
    padding: 8px 10px 0;
  }

  header.kopf.eng {
    padding: 5px 8px 0;
  }

  header.kopf .kopf-inner {
    padding: 0 12px;
    gap: 8px;
  }

  .logo-img {
    height: 28px;
    width: auto;
    max-width: 120px;
  }

  .rechts {
    gap: 8px;
  }

  /* At 390px / small screens, keep only logo and burger in the bar.
     The CTA button remains prominently available inside the mobile menu drawer. */
  .rechts .cta {
    display: none;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

  header.kopf,
  header.kopf .kopf-inner,
  .logo-img,
  .menue,
  .menue a::after,
  .cta,
  .burger span {
    transition: none;
  }

  .fortschritt {
    display: none;
  }
}

/* Body offset: push page content below the floating header */
body {
  padding-top: calc(var(--kopf-hoehe) + 28px);
}

/* ── WordPress admin bar compatibility ──
   WP adds margin-top: 32px (desktop) / 46px (mobile) to <html> when logged in.
   Since header.kopf is position:fixed we must shift it down by the same amount,
   otherwise it sits behind/overlaps the admin toolbar. */
body.admin-bar header.kopf {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar header.kopf {
    top: 46px;
  }
}

/* Also push body content down the extra amount so nothing hides under the header */
body.admin-bar {
  padding-top: calc(var(--kopf-hoehe) + 28px + 32px);
}

@media screen and (max-width: 782px) {
  body.admin-bar {
    padding-top: calc(var(--kopf-hoehe) + 28px + 46px);
  }
}

/* ============================================================
   5. HERO (split editorial layout)
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper)
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  width: 42%;
  display: none;
  background: linear-gradient(180deg, var(--paper-2) 0%, rgba(185, 205, 212, .38) 100%);
}

@media(min-width:960px) {
  .hero::after {
    display: block
  }
}

.hero-inner {
  position: relative;
  padding-top: clamp(40px, 7vw, 88px);
  padding-bottom: calc(clamp(40px, 7vw, 88px) + 82px)
}

.hero-grid {
  display: grid;
  gap: clamp(30px, 5vw, 64px);
  align-items: center
}

@media(min-width:960px) {
  .hero-grid {
    grid-template-columns: 1fr .82fr
  }
}

.hero-content {
  max-width: 720px
}

/* --- Photo column --- */
.hero-figure {
  position: relative;
  margin: 0
}

.hero-photo {
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-l)
}

.hero-photo img {
  width: 100%;
  display: block;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: 64% 30%;
  will-change: transform;
  transform-origin: 60% 40%;
}

@media(min-width:960px) {
  .hero-photo img {
    aspect-ratio: 4/5;
    object-position: 62% 32%
  }
}

.hero-figure figcaption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: .15em;
  background: rgba(255, 253, 249, .94);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 9px 13px;
  box-shadow: var(--shadow-s);
}

@media(min-width:960px) {
  .hero-figure figcaption {
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 10px 14px
  }
}

.hero-figure figcaption b {
  font-family: var(--ff-display);
  color: var(--navy);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.2
}

.hero-figure figcaption span {
  color: var(--ink-soft);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.35
}

.hero h1 {
  font-size: clamp(2.15rem, 6.4vw, 4rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--navy);
}

.hero h1 .accent {
  font-style: italic;
  color: var(--navy-700)
}

.hero .claim {
  font-family: var(--ff-body);
  font-weight: 700;
  color: var(--navy-700);
  font-size: clamp(1.1rem, 2.6vw, 1.35rem);
  margin: 1.15rem 0 .5rem
}

.hero .sub {
  color: var(--ink-soft);
  font-size: clamp(1rem, 2.2vw, 1.12rem);
  max-width: 54ch;
  font-style: italic
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 2rem;
  align-items: center
}

.hero-note {
  display: flex;
  align-items: center;
  gap: .5em;
  color: var(--ink-soft);
  font-size: .9rem;
  font-weight: 600
}

.hero-note svg {
  color: var(--red);
  flex: none
}

/* ============================================================
   6. TRUST BAR (partner/portal logos)
   ============================================================ */
.trust {
  background: var(--navy);
  color: #fff
}

.trust-inner {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  align-items: center;
  padding-block: 26px
}

.trust p {
  margin: 0;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  font-weight: 700
}

.trust-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 18px;
  align-items: center;
  justify-content: center
}

.trust-logos img {
  height: 38px;
  width: auto;
  background: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  opacity: .94;
  transition: opacity .25s, transform .25s
}

.trust-logos img[src*="immoscout"] {
  padding: 3px 9px
}

.trust-logos img:hover {
  opacity: 1;
  transform: translateY(-2px)
}

@media(min-width:768px) {
  .trust-inner {
    flex-direction: row;
    justify-content: space-between
  }

  .trust-logos {
    justify-content: flex-end
  }
}

/* ============================================================
   7. FUNNEL (iFrame slot)
   ============================================================ */
.funnel-section {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  position: relative
}

.funnel-embed {
  position: relative;
  margin-top: -70px
}

.funnel-iframe {
  width: 100%;
  height: 580px;
  border: 0;
  display: block;
  min-height: 440px;
  background: transparent
}

/* ============================================================
   8. INTRO / ÜBER MICH
   ============================================================ */
.intro-grid {
  display: grid;
  gap: clamp(30px, 5vw, 60px);
  align-items: center
}

.intro-portrait {
  position: relative
}

.intro-portrait img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-l);
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block
}

.intro-portrait .badge {
  position: absolute;
  left: -6px;
  bottom: 22px;
  background: var(--navy);
  color: #fff;
  padding: 14px 20px;
  border-radius: 12px;
  box-shadow: var(--shadow-m);
  max-width: 230px;
}

.intro-portrait .badge b {
  font-family: var(--ff-display);
  font-size: 1.5rem;
  display: block;
  line-height: 1;
  color: #fff
}

.intro-portrait .badge span {
  font-size: .82rem;
  color: var(--lightblue);
  font-weight: 600
}

.intro-copy h2 {
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  margin-bottom: 1.1rem
}

.intro-copy .contact-inline {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.6rem;
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line)
}

.intro-copy .contact-inline a {
  font-weight: 700;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: .5em
}

.intro-copy .contact-inline svg {
  color: var(--orange)
}

@media(min-width:900px) {
  .intro-grid {
    grid-template-columns: .85fr 1.15fr
  }
}

/* ============================================================
   9. USP "Drei Gründe"
   ============================================================ */
.reasons {
  background: var(--navy);
  color: #fff;
  position: relative;
  overflow: hidden
}

.reasons::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 60%;
  height: 120%;
  background: radial-gradient(closest-side, rgba(185, 205, 212, .14), transparent 70%);
  pointer-events: none
}

.reasons h2,
.reasons h3 {
  color: #fff
}

.reasons .head {
  max-width: 60ch;
  margin-bottom: clamp(34px, 5vw, 56px)
}

.reasons .head h2 {
  font-size: clamp(1.8rem, 4.2vw, 2.7rem)
}

.reasons-grid {
  display: grid;
  gap: 22px
}

.reason {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius);
  padding: 30px 28px;
  position: relative;
}

.reason .num {
  font-family: var(--ff-display);
  font-size: 2.4rem;
  color: var(--orange);
  line-height: 1;
  opacity: .9
}

.reason h3 {
  font-size: 1.28rem;
  margin: .7rem 0 .7rem
}

.reason p {
  color: rgba(255, 255, 255, .78);
  margin: 0;
  font-size: .98rem
}

@media(min-width:820px) {
  .reasons-grid {
    grid-template-columns: repeat(3, 1fr)
  }
}

/* ============================================================
   9b. DIGITALE VERMARKTUNG (360° tour + 3D model)
   ============================================================ */
.digital {
  background: var(--paper-2)
}

.digital-grid {
  display: grid;
  gap: clamp(26px, 4vw, 52px);
  align-items: center
}

@media(min-width:900px) {
  .digital-grid {
    grid-template-columns: 1fr 1.02fr
  }
}

.digital-copy {
  max-width: 56ch
}

.digital-copy h2 {
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  color: var(--navy)
}

.digital-copy>p {
  color: var(--ink-soft)
}

.digital-list {
  list-style: none;
  padding: 0;
  margin: 1.3rem 0 0;
  display: grid;
  gap: 13px
}

.digital-list li {
  display: flex;
  gap: .65em;
  align-items: flex-start;
  color: var(--ink);
  font-size: .98rem
}

.digital-list svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--green);
  margin-top: 3px
}

.digital-note {
  display: flex;
  gap: .85em;
  align-items: flex-start;
  margin-top: 1.6rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: calc(var(--radius) * .6);
  padding: 15px 17px;
}

.digital-note svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--green);
  margin-top: 2px
}

.digital-note strong {
  display: block;
  color: var(--navy);
  font-size: .98rem;
  margin-bottom: .25rem
}

.digital-note p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .9rem;
  line-height: 1.55
}

.digital-figure {
  margin: 0;
  max-width: 460px
}

@media(min-width:900px) {
  .digital-figure {
    margin-inline: auto
  }
}

.digital-player {
  display: block;
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-m);
  background: var(--navy);
  text-decoration: none;
  color: #fff;
}

.digital-player video,
.digital-player img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.digital-player .play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(15, 33, 55, 0) 45%, rgba(15, 33, 55, .55) 100%);
  transition: background .3s;
}

.digital-player .play span {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(15, 33, 55, .35);
  transition: transform .3s;
}

.digital-player .play svg {
  width: 24px;
  height: 24px;
  color: var(--navy);
  margin-left: 3px
}

.digital-player:hover .play span,
.digital-player:focus-visible .play span {
  transform: scale(1.09)
}

.digital-player .play em {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  text-align: center;
  font-style: normal;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-shadow: 0 1px 6px rgba(15, 33, 55, .6);
}

.digital-figure figcaption {
  margin-top: 11px;
  font-size: .83rem;
  color: var(--ink-soft);
  line-height: 1.45
}

/* ============================================================
   10. GALERIE (sold objects with sale duration badges)
   ============================================================ */
.gallery-head {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: clamp(30px, 4vw, 50px);
  max-width: 60ch
}

.gallery-head h2 {
  font-size: clamp(1.8rem, 4.2vw, 2.7rem)
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px
}

.obj {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-s);
  border: 1px solid var(--line);
  transition: transform .3s, box-shadow .3s;
}

.obj:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-m)
}

.obj-media {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden
}

.obj-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s
}

.obj:hover .obj-media img {
  transform: scale(1.05)
}

.obj-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  padding: .4em .8em;
  border-radius: 99px;
  box-shadow: 0 4px 12px rgba(237, 109, 4, .35);
  display: inline-flex;
  align-items: center;
  gap: .4em;
}

.obj-body {
  padding: 16px 18px 20px
}

.obj-body h3 {
  font-size: 1.15rem;
  color: var(--navy)
}

.obj-body p {
  margin: .35rem 0 0;
  color: var(--ink-soft);
  font-size: .92rem
}

@media(min-width:600px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(min-width:960px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr)
  }

  .gallery-grid .obj:last-child:nth-child(3n+1) {
    grid-column: 2
  }
}

/* ============================================================
   11. 7-SCHRITTE ABLAUF
   ============================================================ */
.steps-section {
  background: linear-gradient(180deg, var(--paper-2), var(--paper))
}

.steps-head {
  text-align: center;
  max-width: 56ch;
  margin: 0 auto clamp(36px, 5vw, 58px)
}

.steps-head h2 {
  font-size: clamp(1.8rem, 4.2vw, 2.7rem)
}

.steps-head p {
  color: var(--ink-soft)
}

.steps-grid {
  display: grid;
  gap: 18px
}

.step-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  position: relative;
  box-shadow: var(--shadow-s);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.step-card .n {
  position: absolute;
  top: 20px;
  right: 22px;
  font-family: var(--ff-display);
  font-size: 2.2rem;
  color: var(--lightblue);
  line-height: 1;
}

.step-card .ic {
  width: 40px;
  height: 40px;
  color: var(--orange);
  stroke-width: 1.6
}

.step-card h3 {
  font-size: 1.18rem
}

.step-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .95rem;
  max-width: 34ch
}

@media(min-width:640px) {
  .steps-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(min-width:980px) {
  .steps-grid {
    grid-template-columns: repeat(4, 1fr)
  }
}

/* ============================================================
   12. SERVICE-PLUS
   ============================================================ */
.plus-narrative {
  display: grid;
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
  padding: clamp(30px, 4vw, 46px);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-900) 100%);
  color: #fff;
  box-shadow: var(--shadow-l);
  position: relative;
  overflow: hidden;
}

.plus-narrative::after {
  content: "";
  position: absolute;
  right: -8%;
  bottom: -30%;
  width: 50%;
  height: 130%;
  background: radial-gradient(closest-side, rgba(237, 109, 4, .16), transparent 72%)
}

.plus-narrative h2 {
  color: #fff;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  margin-bottom: .9rem
}

.plus-narrative p {
  color: rgba(255, 255, 255, .82);
  position: relative
}

.plus-narrative .story {
  font-size: .98rem
}

.plus-narrative .tag {
  color: var(--lightblue)
}

.plus-cards {
  display: grid;
  gap: 20px;
  margin-top: clamp(30px, 4vw, 48px)
}

.plus-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-s);
}

.plus-card .ic {
  width: 38px;
  height: 38px;
  color: var(--red);
  stroke-width: 1.6;
  margin-bottom: 12px
}

.plus-card h3 {
  font-size: 1.16rem;
  margin-bottom: .5rem
}

.plus-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .94rem
}

@media(min-width:820px) {
  .plus-cards {
    grid-template-columns: repeat(3, 1fr)
  }
}

/* ============================================================
   13. KAUFGESUCHE (buyer requests)
   ============================================================ */
.buyers {
  background: var(--lightblue);
  position: relative
}

.buyers-head {
  max-width: 56ch;
  margin-bottom: clamp(28px, 4vw, 44px)
}

.buyers-head h2 {
  color: var(--navy);
  font-size: clamp(1.7rem, 4vw, 2.5rem)
}

.buyers-head p {
  color: var(--navy-700)
}

.buyers-grid {
  display: grid;
  gap: 20px
}

.buyer {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-m);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
}

.buyer img {
  width: 100%;
  height: 190px;
  object-fit: cover
}

.buyer .b-body {
  padding: 24px
}

.buyer h3 {
  font-size: 1.24rem;
  margin-bottom: .6rem
}

.buyer p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .96rem
}

.buyer .b-tag {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-weight: 700;
  color: var(--green);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .7rem
}

@media(min-width:640px) and (max-width:1019px) {
  .buyer {
    grid-template-columns: .78fr 1.22fr
  }

  .buyer img {
    height: 100%;
    min-height: 210px
  }
}

@media(min-width:1020px) {
  .buyers-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
  }

  .buyer img {
    height: 212px
  }
}

/* ============================================================
   14. GOOGLE-BEWERTUNGEN (reviews)
   ============================================================ */
.reviews-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
  margin-bottom: clamp(30px, 4vw, 48px)
}

.google-badge {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: .6em 1.2em;
  box-shadow: var(--shadow-s);
  font-weight: 700;
  color: var(--navy)
}

.google-badge .g {
  font-family: var(--ff-display);
  font-size: 1.3rem;
  font-weight: 600
}

.stars {
  color: var(--orange);
  letter-spacing: 2px
}

.reviews-head h2 {
  font-size: clamp(1.7rem, 4vw, 2.5rem)
}

.reviews-grid {
  display: grid;
  gap: 20px
}

.review {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow-s);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.review .stars {
  font-size: 1.05rem
}

.review p {
  margin: 0;
  color: var(--ink);
  font-style: italic;
  font-size: .98rem
}

.review .who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto
}

.review .who .av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-family: var(--ff-display)
}

.review .who b {
  color: var(--navy);
  display: block;
  font-size: .96rem
}

.review .who span {
  color: var(--ink-soft);
  font-size: .82rem
}

@media(min-width:720px) {
  .reviews-grid {
    grid-template-columns: repeat(3, 1fr)
  }
}

/* ============================================================
   14b. RATGEBER / NEWS-BLOG
   ============================================================ */
.ratgeber-head {
  max-width: 56ch;
  margin-bottom: clamp(28px, 4vw, 44px)
}

.ratgeber-head h2 {
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  color: var(--navy)
}

.ratgeber-head p {
  color: var(--ink-soft)
}

.ratgeber-grid {
  display: grid;
  gap: 22px
}

.rg-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-s);
  text-decoration: none;
  color: inherit;
  transition: transform .28s, box-shadow .28s, border-color .28s;
}

.rg-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-m);
  border-color: rgba(21, 45, 74, .22)
}

.rg-card:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px
}

.rg-thumb {
  aspect-ratio: 16/10;
  position: relative;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--lightblue), #dbe6ea);
  color: var(--navy)
}

.rg-thumb .ph {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .5
}

.rg-cat {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--navy);
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .42em .85em;
  border-radius: 99px
}

.rg-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1
}

.rg-date {
  font-size: .78rem;
  color: var(--ink-soft);
  font-weight: 600;
  letter-spacing: .03em
}

.rg-card h3 {
  font-size: 1.24rem;
  color: var(--navy);
  line-height: 1.25;
  margin: 0
}

.rg-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .95rem
}

.rg-more {
  margin-top: auto;
  padding-top: 4px;
  font-weight: 700;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: .4em
}

.rg-more .arw {
  transition: transform .25s
}

.rg-card:hover .rg-more .arw {
  transform: translateX(4px)
}

@media(min-width:720px) {
  .ratgeber-grid {
    grid-template-columns: repeat(3, 1fr)
  }
}

/* ============================================================
   15. FAQ
   ============================================================ */
.faq-section {
  background: linear-gradient(180deg, var(--paper), var(--paper-2))
}

.faq-head {
  max-width: 56ch;
  margin-bottom: clamp(28px, 4vw, 44px)
}

.faq-head h2 {
  font-size: clamp(1.8rem, 4.2vw, 2.6rem)
}

.faq-list {
  display: grid;
  gap: 12px;
  max-width: 860px
}

.faq-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  overflow: hidden;
  transition: box-shadow .25s
}

.faq-item[open] {
  box-shadow: var(--shadow-m)
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 22px;
  font-family: var(--ff-display);
  font-size: 1.08rem;
  color: var(--navy);
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

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

.faq-item summary .plus {
  flex: none;
  width: 24px;
  height: 24px;
  position: relative;
  transition: transform .3s
}

.faq-item summary .plus::before,
.faq-item summary .plus::after {
  content: "";
  position: absolute;
  background: var(--orange);
  border-radius: 2px
}

.faq-item summary .plus::before {
  top: 11px;
  left: 3px;
  right: 3px;
  height: 2px
}

.faq-item summary .plus::after {
  left: 11px;
  top: 3px;
  bottom: 3px;
  width: 2px;
  transition: transform .3s
}

.faq-item[open] summary .plus::after {
  transform: scaleY(0)
}

.faq-item .a {
  padding: 0 22px 22px;
  color: var(--ink-soft);
  font-size: .98rem
}

/* ============================================================
   16. KONTAKT (contact info + form)
   ============================================================ */
.contact-section {
  background: var(--navy);
  color: #fff;
  position: relative;
  overflow: hidden
}

.contact-section::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -10%;
  width: 50%;
  height: 140%;
  background: radial-gradient(closest-side, rgba(185, 205, 212, .12), transparent 70%)
}

.contact-grid {
  display: grid;
  gap: clamp(30px, 5vw, 56px);
  position: relative
}

.contact-info h2 {
  color: #fff;
  font-size: clamp(1.8rem, 4.2vw, 2.6rem);
  margin-bottom: 1rem
}

.contact-info p {
  color: rgba(255, 255, 255, .8)
}

.contact-lines {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 0;
  display: grid;
  gap: 14px
}

.contact-lines li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 600
}

.contact-lines .ic {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  display: grid;
  place-items: center;
  color: var(--orange)
}

.contact-lines a {
  color: #fff
}

.contact-lines span.small {
  display: block;
  font-weight: 400;
  color: rgba(255, 255, 255, .6);
  font-size: .82rem
}

.contact-photo {
  margin: clamp(24px, 3.5vw, 34px) 0 0
}

.contact-photo img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  object-position: center 28%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-l);
  border: 1px solid rgba(255, 255, 255, .1);
  display: block
}

.contact-form {
  background: var(--card);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 36px);
  box-shadow: var(--shadow-l)
}

.contact-form .field {
  margin-bottom: 16px
}

.contact-form label {
  display: block;
  font-weight: 700;
  color: var(--navy);
  font-size: .9rem;
  margin-bottom: 6px
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-family: var(--ff-body);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  transition: border-color .2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--orange)
}

.contact-form textarea {
  resize: vertical;
  min-height: 110px
}

.contact-form .consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .84rem;
  color: var(--ink-soft);
  margin: 6px 0 18px
}

.contact-form .consent input {
  width: auto;
  margin-top: 3px;
  flex: none
}

.contact-form .btn {
  width: 100%;
  justify-content: center
}

.contact-form .req {
  color: var(--red)
}

/* ── CF7 inside .contact-form — full override ─────────────────
   Use !important on visual properties that CF7 / GeneratePress
   would otherwise override with their own stylesheets.
─────────────────────────────────────────────────────────────── */
.contact-form .wpcf7 {
  width: 100%;
}

/* CF7 wraps every field in <p> — reset its margin */
.contact-form .wpcf7-form>p,
.contact-form .wpcf7 p {
  margin-bottom: 16px !important;
  margin-top: 0 !important;
}

/* Labels (when added in CF7 template) */
.contact-form .wpcf7-form label {
  display: block !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  font-size: .88rem !important;
  margin-bottom: 6px !important;
  letter-spacing: 0 !important;
}

/* ── Inputs, textareas, selects ── */
.contact-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.contact-form .wpcf7 input[type="text"],
.contact-form .wpcf7 input[type="email"],
.contact-form .wpcf7 input[type="tel"],
.contact-form .wpcf7 input[type="number"],
.contact-form .wpcf7 input[type="url"],
.contact-form .wpcf7 textarea,
.contact-form .wpcf7 select {
  display: block !important;
  width: 100% !important;
  padding: 13px 15px !important;
  border: 1.5px solid rgba(21, 45, 74, .22) !important;
  border-radius: 10px !important;
  font-family: var(--ff-body) !important;
  font-size: 1rem !important;
  color: var(--ink, #20303f) !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color .2s !important;
  box-sizing: border-box !important;
}

.contact-form .wpcf7 input[type="text"]:focus,
.contact-form .wpcf7 input[type="email"]:focus,
.contact-form .wpcf7 input[type="tel"]:focus,
.contact-form .wpcf7 textarea:focus {
  outline: none !important;
  border-color: var(--orange, #ed6d04) !important;
  box-shadow: 0 0 0 3px rgba(237, 109, 4, .12) !important;
}

.contact-form .wpcf7 textarea {
  resize: vertical !important;
  min-height: 120px !important;
}

/* ── Submit button ── */
.contact-form .wpcf7 input[type="submit"] {
  display: block !important;
  width: 100% !important;
  padding: .85em 2em !important;
  background: var(--orange, #ed6d04) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50px !important;
  font-family: var(--ff-body) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: .03em !important;
  cursor: pointer !important;
  transition: background .2s, transform .15s !important;
  margin-top: 6px !important;
}

.contact-form .wpcf7 input[type="submit"]:hover {
  background: #c45900 !important;
  transform: translateY(-1px) !important;
}

/* ── Acceptance / consent checkbox ── */
/* CF7 structure: .wpcf7-acceptance > .wpcf7-list-item > input + .wpcf7-list-item-label */
.contact-form .wpcf7 .wpcf7-acceptance {
  display: block !important;
}

.contact-form .wpcf7 .wpcf7-list-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
}

.contact-form .wpcf7 .wpcf7-acceptance input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  flex: none !important;
  margin: 0 !important;
  accent-color: var(--orange, #ed6d04) !important;
  cursor: pointer !important;
  padding: 0 !important;
  border: 1.5px solid rgba(21, 45, 74, .3) !important;
  border-radius: 4px !important;
}

.contact-form .wpcf7 .wpcf7-list-item-label {
  font-size: .8rem !important;
  color: var(--ink, #20303f) !important;
  line-height: 1.5 !important;
}

.contact-form .wpcf7 .wpcf7-list-item-label a {
  color: var(--navy, #152d4a) !important;
  text-decoration: underline !important;
}

/* ── Validation messages ── */
.contact-form .wpcf7-not-valid-tip {
  font-size: .78rem !important;
  color: #c0392b !important;
  margin-top: 4px !important;
  display: block !important;
}

.contact-form .wpcf7-response-output {
  margin-top: 14px !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  font-size: .9rem !important;
  border-left: 4px solid var(--orange) !important;
  background: rgba(237, 109, 4, .08) !important;
  color: var(--ink) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
}

.contact-form .wpcf7-mail-sent-ok {
  border-left-color: #27ae60 !important;
  background: rgba(39, 174, 96, .08) !important;
  color: #1a6b3a !important;
}

.contact-form .wpcf7-validation-errors,
.contact-form .wpcf7-spam-blocked {
  border-left-color: #c0392b !important;
  background: rgba(192, 57, 43, .08) !important;
  color: #c0392b !important;
}

/* ── AJAX spinner ── */
.contact-form .wpcf7 .wpcf7-spinner {
  vertical-align: middle;
  margin-left: 8px;
}

/* ── Honeypot field — completely off-screen ── */
.contact-form .wpcf7 .wpcf7-honeypot {
  display: none !important;
}

.contact-form .wpcf7 p:has(> span > .wpcf7-honeypot) {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  margin: 0 !important;
}

@media(min-width:900px) {
  .contact-grid {
    grid-template-columns: 1fr 1.05fr;
    align-items: start
  }
}

/* ============================================================
   17. FOOTER + DRESDEN CTA BAND
   ============================================================ */
.dresden-band {
  position: relative;
  min-height: clamp(340px, 30vw, 480px);
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  overflow: hidden
}

.dresden-band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  z-index: -2
}

.dresden-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(15, 33, 55, .30) 0%, rgba(15, 33, 55, .52) 45%, rgba(15, 33, 55, .72) 100%)
}

.dresden-band .db-inner {
  padding: 60px 22px;
  max-width: 640px
}

.dresden-band h2 {
  color: #fff;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin-bottom: .7rem;
  text-shadow: 0 2px 14px rgba(9, 20, 36, .55)
}

.dresden-band p {
  color: rgba(255, 255, 255, .92);
  margin-bottom: 1.6rem;
  text-shadow: 0 1px 10px rgba(9, 20, 36, .5)
}

.site-footer {
  background: var(--navy-900);
  color: rgba(255, 255, 255, .75)
}

.footer-top {
  display: grid;
  gap: 30px;
  padding-block: 46px
}

.footer-brand img {
  height: 40px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .92;
  margin-bottom: 14px
}

.footer-brand p {
  font-size: .92rem;
  margin: 0;
  max-width: 34ch
}

.footer-col h4,
.footer-col-title {
  color: #fff;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 14px;
  font-family: var(--ff-body);
  font-weight: 700
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px
}

.footer-col a {
  font-size: .94rem;
  transition: color .2s
}

.footer-col a:hover {
  color: var(--orange)
}

.footer-partners {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center
}

.footer-partners img {
  height: 34px;
  width: auto;
  background: #fff;
  padding: 7px 11px;
  border-radius: 7px;
  opacity: .9
}

.footer-partners img[src*="immoscout"] {
  padding: 3px 8px
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-block: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: space-between;
  font-size: .85rem
}

.footer-bottom .legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px
}

/* explicit link colours — prevents GP parent a:hover from going dark on the navy bg */
.footer-bottom .legal a {
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
  transition: color .2s
}

.footer-bottom .legal a:hover {
  color: var(--orange, #ed6d04)
}

/* wp_nav_menu wraps links in <li> — make them transparent to the flex layout */
.footer-bottom .legal li {
  display: contents;
  list-style: none
}

@media(min-width:760px) {
  .footer-top {
    grid-template-columns: 1.6fr 1fr 1fr
  }

  .footer-bottom {
    flex-direction: row;
    align-items: center
  }
}

/* ============================================================
   18. REVEAL ANIMATIONS (staggered on scroll)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s cubic-bezier(.2, .8, .2, 1), transform .5s cubic-bezier(.2, .8, .2, 1)
}

.reveal.in {
  opacity: 1;
  transform: none
}

.reveal.d1 {
  transition-delay: .04s
}

.reveal.d2 {
  transition-delay: .08s
}

.reveal.d3 {
  transition-delay: .12s
}

.reveal.d4 {
  transition-delay: .16s
}

/* Hero photo subtle scale on scroll */
.hero-photo img {
  transition: transform .1s linear
}

@media(prefers-reduced-motion:reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none
  }

  html {
    scroll-behavior: auto
  }

  * {
    animation: none !important
  }
}

/* ============================================================
   19. LANDING PAGE STYLES (Template A - seller landing page)
   These styles are for the single-landing_page.php template
   ============================================================ */
body.single-landing_page {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-body);
  line-height: 1.65;
}

body.single-landing_page h1,
body.single-landing_page h2,
body.single-landing_page h3 {
  font-family: var(--ff-display);
  color: var(--navy);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.15;
}

/* ---- Landing page hero ---- */
.pi-hero {
  background: linear-gradient(104deg, rgb(121 121 121 / 97%) 0%, var(--navy) 120%);
  color: #fff;
  padding: clamp(56px, 9vw, 54px) 24px;
}

.pi-hero__inner {
  max-width: var(--wrap);
  margin: 0 auto;
}

.pi-hero h1 {
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin: 0 0 16px;
}

.pi-hero__subline {
  font-family: var(--ff-body);
  font-size: 1.1rem;
  font-style: italic;
  opacity: .92;
  max-width: 640px;
}

/* ---- Landing page body sections ---- */
.pi-section {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px) 24px;
}

.pi-section h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  border-left: 4px solid var(--orange);
  padding-left: 14px;
  margin-bottom: 14px;
}

.pi-section__body {
  line-height: 1.75;
}

/* ---- Landing page CTA ---- */
.pi-cta {
  background: var(--lightblue);
  border-radius: var(--radius);
  padding: 36px 24px;
  margin: 36px auto;
  max-width: var(--wrap);
  text-align: center;
  box-shadow: var(--shadow-m);
}

.pi-cta a.pi-btn,
.pi-trust a.pi-btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 1.02rem;
  background: linear-gradient(180deg, #f5822a 0%, var(--orange) 55%, #d95f00 100%);
  color: #fff !important;
  padding: .95em 1.8em;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(237, 109, 4, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .25s, box-shadow .25s;
  margin-top: 14px;
}

.pi-cta a.pi-btn:hover,
.pi-trust a.pi-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(237, 109, 4, .42);
}

/* ---- Landing page FAQ ---- */
.pi-faq {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 24px;
}

.pi-faq details {
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}

.pi-faq summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--navy);
}

.pi-faq summary::marker {
  color: var(--orange);
}

/* ---- Landing page related links ---- */
.pi-related {
  max-width: var(--wrap);
  margin: 0 auto 48px;
  padding: 0 24px;
}

.pi-related h3 {
  color: var(--navy);
}

.pi-related ul {
  list-style: none;
  padding: 0;
}

.pi-related li {
  margin-bottom: 8px;
}

.pi-related a {
  color: var(--red);
  text-decoration: underline;
  font-weight: 600;
}

/* ---- Landing page trust band ---- */
.pi-trust {
  background: var(--navy);
  color: #fff;
  padding: 40px 24px;
  text-align: center;
}


#anlaesse h2 {
  font-size: 1.3rem;
}


.ref-grid p {
  margin: 0 0 0rem;
}

.ref-cta-banner {
  margin-bottom: 24px !important;
}

.ref-hero {
  margin-bottom: 0px !important;
}


/* ============================================================
   BLOCKQUOTE → TIP BOX STYLE
   Applies inside both blog single posts (.post-article)
   and Verkaufsseite content (.vs-content, .plain-card).
   Mirrors the .tip-box design from single.php.
   ============================================================ */

/* Shared wrapper: every blockquote in a content area */
.post-article blockquote,
.vs-content blockquote,
.plain-card blockquote {
  background: #0f2137;
  border-radius: 16px;
  padding: 22px 26px 22px 26px;
  margin: 26px 0;
  max-width: 68ch;
  border: none;
  /* remove any GP default left-border */
  border-left: none;
  position: relative;
}


/* All text nodes inside */
.post-article blockquote p,
.post-article blockquote,
.vs-content blockquote p,
.vs-content blockquote,
.plain-card blockquote p,
.plain-card blockquote {
  color: #fff;
  font-size: .95rem;
  line-height: 1.65;
  font-style: normal;
  /* override browser italic default */
  max-width: none;
}

/* Paragraphs specifically */
.post-article blockquote p,
.vs-content blockquote p,
.plain-card blockquote p {
  margin: 0;
  color: #fff;
}

/* cite: show as small orange credit line at bottom */
.post-article blockquote cite,
.vs-content blockquote cite,
.plain-card blockquote cite {
  display: block;
  margin-top: 12px;
  font-size: .78rem;
  font-style: normal;
  font-weight: 700;
  color: var(--orange, #ed6d04);
  letter-spacing: .04em;
}

.post-article blockquote cite::before,
.vs-content blockquote cite::before,
.plain-card blockquote cite::before {
  content: "— ";
}

@media (prefers-reduced-motion: reduce) {

  .post-article blockquote,
  .vs-content blockquote,
  .plain-card blockquote {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Kontakt page — CF7 form  (.contact-form wraps the CF7 output)
   ═══════════════════════════════════════════════════════════════ */

/* Strip CF7's own wrapper margin so .kk-form-box controls spacing */
.contact-form .wpcf7 {
  margin: 0;
}

/* 2-column grid rows */
.contact-form .wpcf7 .kk-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 12px;
}

/* Labels sit above their field */
.contact-form .wpcf7 label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--dark, #1a1a2e);
}

/* Base field styles */
.contact-form .wpcf7 input[type="text"],
.contact-form .wpcf7 input[type="email"],
.contact-form .wpcf7 input[type="tel"],
.contact-form .wpcf7 select,
.contact-form .wpcf7 textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  font-size: .95rem;
  font-family: inherit;
  background: #fafafa;
  color: var(--dark, #1a1a2e);
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}

.contact-form .wpcf7 input:focus,
.contact-form .wpcf7 select:focus,
.contact-form .wpcf7 textarea:focus {
  outline: none;
  border-color: var(--orange, #ed6d04);
  box-shadow: 0 0 0 3px rgba(237, 109, 4, .12);
  background: #fff;
}

.contact-form .wpcf7 textarea {
  min-height: 70px;
  resize: vertical;
  height: 120px;
}

/* Consent / acceptance checkbox row — /kontakt page */
/* CF7 structure: .wpcf7-acceptance > .wpcf7-list-item > input + .wpcf7-list-item-label */
.contact-form .wpcf7 .wpcf7-acceptance {
  display: block;
}

.contact-form .wpcf7 .wpcf7-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.contact-form .wpcf7 .wpcf7-acceptance input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--orange, #ed6d04);
}

.contact-form .wpcf7 .wpcf7-list-item-label {
  font-size: .8rem;
  color: var(--ink, #20303f);
  line-height: 1.5;
}

/* Required-fields note */
.contact-form .wpcf7 .kk-form-required {
  font-size: .8rem;
  color: #888;
  margin: 0;
}

/* Submit button */
.contact-form .wpcf7 input[type="submit"] {
  display: inline-block;
  padding: 14px 36px;
  background: var(--orange, #ed6d04);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: background .2s, transform .15s;
}

.contact-form .wpcf7 input[type="submit"]:hover {
  background: #c85a00;
  transform: translateY(-2px);
}

/* Validation messages */
.contact-form .wpcf7 .wpcf7-not-valid-tip {
  font-size: .78rem;
  color: #dc2626;
  margin-top: 4px;
}

.contact-form .wpcf7 .wpcf7-response-output {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: .9rem;
  border: 1.5px solid #d1d5db;
}

.contact-form .wpcf7.sent .wpcf7-response-output {
  border-color: #16a34a;
  background: #f0fdf4;
  color: #15803d;
}

.contact-form .wpcf7.failed .wpcf7-response-output,
.contact-form .wpcf7.invalid .wpcf7-response-output {
  border-color: #dc2626;
  background: #fef2f2;
  color: #dc2626;
}

.accptance_block {
  color: #5a6b78;
  font-size: 13px;
  display: flex;
  margin-top: 25px;
  margin-bottom: 24px;
  font-weight: bold;
}

.accptance_block a {

  color: #152d4a;
  font-weight: bolder;

}

.accptance_check {
  margin-right: 10px;
  margin-top: 4px;
}


.other-page-funnel .funnel-embed {
  margin-top: 70px;
}


.page-template-page-ueber-mich .other-page-funnel .funnel-embed {
  margin-top: 30px;
}


/* Responsive: stack to 1 column on mobile */
@media (max-width: 640px) {
  .contact-form .wpcf7 .kk-row {
    grid-template-columns: 1fr;
  }
}

/* ── Reset Quiz-Header (#pib-kopf) so it never inherits site header styles sitewide ── */
.pib-quiz .kopf,
.quiz .kopf,
#pib-kopf {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: auto !important;
  padding: 18px 26px 0 !important;
  transition: none !important;
}

/* ── Mobile menu button touch target (>= 44x44px for WCAG/Google mobile audit) ── */
.menu-toggle,
button.menu-toggle {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}