:root{
  --gold:#B89B5E;
  --gold2:#D8C08A;

  --serif:"Cormorant Garamond", serif;
  --sans:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --r:22px;
  --shadow:0 18px 70px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:#fff;
  background:#111;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit}
img{max-width:100%;display:block}

.container{width:min(1120px, calc(100% - 2.2rem)); margin-inline:auto;}

main{padding-top:62px;}

.bar{
  position:fixed; top:0; left:0; right:0;
  z-index:50;
  background:rgba(10,10,11,.76);
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.bar__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.85rem 0;
}
.bar__left{display:flex; gap:.7rem; align-items:center; min-width:0;}
.dot{
  width:.55rem;height:.55rem;border-radius:999px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  box-shadow:0 0 0 6px rgba(184,155,94,.14);
  flex:0 0 auto;
}
.bar__txt{
  font-size:.92rem;
  color:rgba(255,255,255,.86);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bar__cta{
  text-decoration:none;
  border-radius:999px;
  padding:.72rem 1rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.82rem;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#111;
  box-shadow:0 14px 40px rgba(184,155,94,.18);
  flex:0 0 auto;
}

/* HERO */
.hero{
  position:relative;
  min-height: clamp(680px, 96vh, 980px);
  overflow:clip;
  background:#000;
}
.hero__media{position:absolute; inset:0; z-index:0;}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center;}
.hero__veil{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(65% 90% at 20% 70%, rgba(0,0,0,.84) 0%, rgba(0,0,0,.40) 48%, rgba(0,0,0,.10) 100%),
    linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.18) 58%, rgba(0,0,0,.02) 100%);
}
.hero__content{
  position:relative; z-index:2;
  padding: clamp(3.1rem, 6vw, 6.8rem) 0;
  max-width: 980px;
}
.kicker{
  margin:0 0 .75rem 0;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:.78rem;
  color:rgba(255,255,255,.72);
}
h1{
  margin:0 0 1rem 0;
  font-family:var(--serif);
  font-weight:600;
  font-size: clamp(2.9rem, 5.6vw, 4.7rem);
  line-height:.95;
}
.stop{
  display:inline-block;
  border-bottom:1px solid rgba(184,155,94,.55);
  padding-bottom:.18rem;
  color:rgba(255,255,255,.94);
}
.lead{
  margin:0 0 1.25rem 0;
  max-width:62ch;
  font-size:1.06rem;
  line-height:1.6;
  color:rgba(255,255,255,.88);
}
.cta{
  display:flex; gap:.85rem; flex-wrap:wrap;
  margin: 1rem 0 1.2rem 0;
}
.btn{
  border:1px solid transparent;
  border-radius:999px;
  padding:.95rem 1.25rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.82rem;
  text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.btn--gold{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#111;
  box-shadow:0 18px 50px rgba(184,155,94,.22);
}
.btn--ghost{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
  color:#fff;
}
.btn--full{width:100%;}

.trustrow{
  display:flex; flex-wrap:wrap; gap:1rem;
  margin-top:.6rem;
  color:rgba(255,255,255,.80);
  font-size:.95rem;
}
.trustrow span{position:relative; padding-left:1.05rem;}
.trustrow span:before{
  content:"";
  position:absolute; left:0; top:.55em;
  width:.45rem; height:.45rem; border-radius:999px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
}

.danger{
  margin-top: 1.0rem;
  padding: 1rem 1rem;
  border-radius: calc(var(--r) + 6px);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(12,12,14,.55);
  box-shadow: 0 16px 60px rgba(0,0,0,.32);
  max-width: 780px;
}
.danger__t{
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.78rem;
  color:rgba(255,255,255,.78);
  margin-bottom:.55rem;
}
.danger ul{margin:0; padding-left: 1.15rem; color:rgba(255,255,255,.86); line-height:1.6;}
.danger li::marker{color:var(--gold);}

/* Sections */
.section{padding: clamp(3.4rem, 6vw, 5.6rem) 0; background:#111;}
.section--soft{
  background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%);
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.eyebrow{
  margin:0 0 .7rem 0;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:.78rem;
  color:rgba(255,255,255,.66);
}
h2{
  margin:0;
  font-family:var(--serif);
  font-weight:600;
  font-size: clamp(2.0rem, 3.4vw, 2.9rem);
  line-height:1.04;
}
.sub{
  margin:.9rem 0 0 0;
  max-width: 75ch;
  color: rgba(255,255,255,.78);
  line-height: 1.65;
}

/* Why */
.why{
  margin-top: 1.4rem;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 1rem;
  align-items:start;
}
.panel{
  border-radius: calc(var(--r) + 10px);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  padding: 1.15rem 1.1rem;
}
.panel h3{
  margin:0 0 .4rem 0;
  font-family: var(--serif);
  font-weight:600;
  font-size: 1.55rem;
}
.panel p{margin:0; color: rgba(255,255,255,.80); line-height:1.65;}
.panel__note{margin-top:.85rem; color:rgba(255,255,255,.70);}
.bullets{margin:.85rem 0 0 0; padding-left: 1.15rem; color: rgba(255,255,255,.82); line-height:1.6;}
.bullets li{margin:.12rem 0;}
.bullets li::marker{color: var(--gold);}

/* CTA wide */
.ctaWide{
  margin-top: 1.4rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1.2rem;
  padding: 1.25rem 1.2rem;
  border-radius: calc(var(--r) + 10px);
  border: 1px solid rgba(184,155,94,.30);
  background: linear-gradient(135deg, rgba(184,155,94,.16), rgba(255,255,255,.05));
  box-shadow: var(--shadow);
}
.ctaWide__tag{
  display:inline-block;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.72rem;
  color:#111;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  border-radius: 999px;
  padding:.35rem .65rem;
  margin-bottom: .5rem;
}
.ctaWide__title{font-family: var(--serif); font-weight:600; font-size: 1.5rem;}
.ctaWide__sub{color: rgba(255,255,255,.72); margin-top:.15rem; font-size:.95rem;}

/* Reviews */
.reviews{
  margin-top: 1.4rem;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.rev{
  border-radius: calc(var(--r) + 10px);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  padding: 1.1rem 1.05rem;
}
.stars{display:flex; gap:.22rem; margin-bottom:.6rem;}
.star{width:18px;height:18px; fill:url(#goldg);}
.quote{margin:0; color: rgba(255,255,255,.86); line-height: 1.65;}
.who{margin:.85rem 0 0 0; color: rgba(255,255,255,.66); font-size:.92rem;}

/* Scenarios */
.tri{
  margin-top: 1.4rem;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.tile{
  border-radius: calc(var(--r) + 10px);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  padding: 1.1rem 1.05rem;
}
.tile h3{
  margin:0 0 .35rem 0;
  font-family: var(--serif);
  font-weight:600;
  font-size: 1.55rem;
}
.tile p{margin:0 0 .85rem 0; color: rgba(255,255,255,.74); line-height:1.55;}
.tile ul{margin:0 0 1rem 0; padding-left: 1.15rem; color: rgba(255,255,255,.82); line-height:1.6;}
.tile ul li::marker{color: var(--gold);}
.tile a{
  display:inline-flex;
  text-decoration:none;
  border-radius:999px;
  padding:.72rem .95rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.78rem;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(184,155,94,.35);
}

/* FAQ */
.faq{
  margin-top: 1.25rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: calc(var(--r) + 10px);
  overflow:hidden;
  background: rgba(255,255,255,.06);
}
.faq__item + .faq__item{border-top: 1px solid rgba(255,255,255,.12);}
.faq__q{
  width:100%;
  text-align:left;
  background: transparent;
  border:0;
  padding: 1.05rem 1.1rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  cursor:pointer;
  font-weight:800;
  color: rgba(255,255,255,.92);
}
.faq__icon{
  width: 2rem;
  height: 2rem;
  border-radius:999px;
  border:1px solid rgba(184,155,94,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(216,192,138,.95);
  font-family: var(--serif);
  font-size: 1.35rem;
}
.faq__a{
  padding: 0 1.1rem 1.1rem 1.1rem;
  color: rgba(255,255,255,.78);
  line-height:1.6;
}

/* Contact */
.contact{
  margin-top: 1.2rem;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 1rem;
  align-items:start;
}
.bigcall{
  margin-top: 1rem;
  display:block;
  text-decoration:none;
  border-radius: calc(var(--r) + 12px);
  padding: 1.1rem 1.1rem;
  border: 1px solid rgba(184,155,94,.32);
  background: linear-gradient(135deg, rgba(184,155,94,.18), rgba(255,255,255,.05));
  box-shadow: var(--shadow);
}
.bigcall__top{display:block; font-size:.85rem; letter-spacing:.22em; text-transform:uppercase; color: rgba(255,255,255,.72);}
.bigcall__num{display:block; font-family: var(--serif); font-weight:600; font-size: 2.0rem; margin:.25rem 0;}
.bigcall__sub{display:block; color: rgba(255,255,255,.70);}

.form{
  border-radius: calc(var(--r) + 10px);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  padding: 1.15rem 1.1rem;
}
.lab{display:block; margin:.6rem 0 .35rem 0; color: rgba(255,255,255,.78); font-size:.92rem;}
.in{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  color:#fff;
  padding: .85rem .9rem;
  font: inherit;
  outline:none;
}
.in:focus{border-color: rgba(184,155,94,.70); box-shadow: 0 0 0 4px rgba(184,155,94,.18);}
textarea.in{resize:vertical;}
.chk{display:flex; gap:.6rem; align-items:flex-start; margin:.9rem 0 1rem 0; color: rgba(255,255,255,.72); font-size:.92rem;}
.chk input{margin-top:.25rem;}
.mini{font-size:.9rem; color: rgba(255,255,255,.64); line-height:1.55; margin:.9rem 0 0 0;}
.links{margin-top:1rem; display:flex; gap:1rem; flex-wrap:wrap;}
.links a{color: rgba(255,255,255,.62); text-decoration:none; border-bottom:1px solid transparent;}
.links a:hover{color:#fff; border-bottom-color: rgba(184,155,94,.45);}

/* Responsive */
@media (max-width: 980px){
  .why, .contact{grid-template-columns: 1fr;}
  .reviews{grid-template-columns: 1fr;}
  .tri{grid-template-columns: 1fr;}
}
@media (max-width: 720px){
  .bar__txt{display:none;}
  .ctaWide{flex-direction:column; align-items:flex-start;}
}








/* ================================
   STATE POWER (sehr deutlich)
================================ */
.state-power{
  padding: clamp(3.4rem, 6vw, 5.6rem) 0;
  background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%);
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.state-power__eyebrow{
  margin:0 0 .7rem 0;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:.78rem;
  color: rgba(255,255,255,.66);
}

.state-power__title{
  margin:0;
  font-family: var(--serif);
  font-weight:600;
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
  line-height:1.02;
}
.state-power__title span{
  display:block;
  margin-top:.35rem;
  color: rgba(255,255,255,.88);
  border-bottom: 1px solid rgba(184,155,94,.55);
  width: fit-content;
  padding-bottom:.15rem;
}

.state-power__lead{
  margin:1rem 0 0 0;
  max-width: 85ch;
  color: rgba(255,255,255,.80);
  line-height:1.7;
  font-size: 1.02rem;
}

.state-power__grid{
  margin-top: 1.5rem;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}

.state-card{
  border-radius: calc(var(--r) + 10px);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  padding: 1.15rem 1.1rem;
}

.state-card--gold{
  border-color: rgba(184,155,94,.34);
  background: linear-gradient(135deg, rgba(184,155,94,.18), rgba(255,255,255,.05));
  box-shadow: var(--shadow);
}

.state-card__title{
  margin:0 0 .75rem 0;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:800;
  font-size:.82rem;
  color: rgba(255,255,255,.86);
}

.state-list{
  margin:0;
  padding-left: 1.15rem;
  color: rgba(255,255,255,.86);
  line-height:1.65;
}
.state-list li{ margin:.22rem 0; }
.state-list li::marker{ color: var(--gold); }

.state-card__note{
  margin: .95rem 0 0 0;
  padding-top: .85rem;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.78);
  line-height:1.65;
}

.state-steps{
  margin:0;
  padding-left: 1.15rem;
  color: rgba(255,255,255,.90);
  line-height:1.65;
}
.state-steps li{ margin:.22rem 0; }
.state-steps li::marker{ color: var(--gold); }

.one-sentence{
  margin-top: 1rem;
  padding: 1rem 1rem;
  border-radius: calc(var(--r) + 6px);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.22);
}
.one-sentence__label{
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:800;
  font-size:.74rem;
  color: rgba(255,255,255,.74);
  margin-bottom:.35rem;
}
.one-sentence__text{
  font-family: var(--serif);
  font-weight:600;
  font-size: 1.35rem;
  line-height:1.15;
  color: rgba(255,255,255,.95);
}

.state-cta{
  margin-top: 1rem;
  display:inline-flex;
  text-decoration:none;
  border-radius: 999px;
  padding: .85rem 1rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.78rem;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color:#111;
  box-shadow: 0 16px 50px rgba(184,155,94,.20);
}

.state-mini{
  margin:.75rem 0 0 0;
  color: rgba(255,255,255,.70);
  font-size:.92rem;
}

@media (max-width: 980px){
  .state-power__grid{ grid-template-columns: 1fr; }
}





.hero.hero--lp-muc .hero__media img{
  object-fit: cover;
  object-position: 98% 20%; /* X = rechts halten, Y = weiter nach unten */
}





.hero.hero--lp-portrait .hero__media img{
  object-fit: cover;
  object-position: 78% 38%; /* X = mehr rechts, Y = leicht runter */
}










/* 1) Bild nach rechts schieben (Gesicht sichtbar) */
.hero__media img{
  object-fit: cover;
  object-position: 100% 0%; /* X = weiter rechts | Y = leicht runter */
}

/* 2) Text links halten und schmaler machen (damit er nicht ins Gesicht läuft) */
.hero__content.container{
  max-width: 680px;   /* Textblock begrenzen */
  margin-left: 50px;     /* links anlehnen */
  margin-right: auto; /* nicht zentrieren */
}


/* Hero-Bild muss die Fläche füllen, dann funktioniert "nach rechts" */
.hero.hero--lp-portrait{ position:relative; overflow:clip; }

.hero.hero--lp-portrait .hero__media{
  position:absolute;
  inset:0;
  z-index:0;
}

.hero.hero--lp-portrait .hero__img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position: 92% 40%; /* HIER: nach rechts schieben */
}





/* FINAL: nur Ausschnitt verschieben – keine Ränder */
.hero.hero--lp-portrait .hero__media img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;

  object-position: 98% 20% !important; /* 2. Wert = nach unten */
  transform: none !important;
}




.hero--lp-portrait {
  position: relative;
  background: #000; /* links echte schwarze Fläche */
  overflow: hidden;
}


.hero--lp-portrait .hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero--lp-portrait .hero__img {
  position: absolute;
  top: 0;
  right: -18%;      /* ← HIER passiert es */
  height: 100%;
  width: auto;      /* wichtig: nicht strecken */
  min-width: 100%;
  object-fit: cover;
}











@media (max-width: 800px) {

  /* Textblock etwas nach oben holen */
  .hero--lp-portrait .hero__content {
    padding-top: 6.5rem;   /* Platz unter Header */
    padding-bottom: 2.5rem;
  }

  /* Headline mobiltauglich */
  .hero--lp-portrait h1 {
    font-size: clamp(2rem, 6.5vw, 2.4rem);
    line-height: 1.15;
    max-width: 90%;
  }

  /* Lead kürzer & ruhiger */
  .hero--lp-portrait .lead {
    font-size: 1rem;
    line-height: 1.45;
    max-width: 92%;
  }

  /* Buttons untereinander, zentriert */
  .hero--lp-portrait .cta {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
  }

  /* Trustrow etwas kleiner */
  .hero--lp-portrait .trustrow {
    font-size: 0.85rem;
    opacity: 0.85;
  }
}

@media (max-width: 800px) {
  .hero--lp-portrait .hero__content {
    top: auto;
    bottom: 2rem;
  }
}



/* =========================
   MOBILE HERO – FINAL CLEAN
   ========================= */
@media (max-width: 800px){

  /* Hero-Höhe: nicht endlos */
  .hero.hero--lp-portrait{
    min-height: 100svh;
    padding-top: 62px; /* wegen deiner fixed bar */
  }

  /* Bild: bleibt cover, Gesicht rechts */
  .hero.hero--lp-portrait .hero__media{ position:absolute; inset:0; }
  .hero.hero--lp-portrait .hero__media img,
  .hero.hero--lp-portrait .hero__img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position: 92% 35%;
  }



  /* Textblock: links, schmal, NICHT ins Gesicht */
  .hero.hero--lp-portrait .hero__content{
    position: relative;
    z-index: 2;
    padding: 8rem 0 1.75rem 0;   /* runter, aber nicht absurd */
    max-width: 92%;
  }
  .hero.hero--lp-portrait .container.hero__content{
    width: min(520px, calc(100% - 2.2rem));
    margin-left: 1.1rem;
    margin-right: auto;
  }

  /* Typo: mobile sauber */
  .hero.hero--lp-portrait .kicker{
    font-size: .72rem;
    letter-spacing: .18em;
    margin-bottom: .55rem;
  }
  .hero.hero--lp-portrait h1{
    font-size: clamp(2.05rem, 7.2vw, 2.55rem);
    line-height: 1.08;
    margin-bottom: .85rem;
  }
  .hero.hero--lp-portrait .lead{
    font-size: .98rem;
    line-height: 1.45;
    max-width: 40ch;
    margin-bottom: 1rem;
  }

  /* CTAs: untereinander, volle Breite */
  .hero.hero--lp-portrait .cta{
    display:flex;
    flex-direction:column;
    gap:.65rem;
    margin: .9rem 0 0 0;
  }
  .hero.hero--lp-portrait .cta .btn{
    width:100%;
    justify-content:center;
    padding: .95rem 1rem;
  }

  /* Diese beiden sprengen mobile im Hero -> raus damit */
  .hero.hero--lp-portrait .trustrow
  {
    display:none !important;
  }
}


@media (max-width: 800px){

  .hero.hero--lp-portrait .hero__content{
    position: relative;
    top: 25vh;              /* <- DAS schiebt den Text wirklich runter */
    padding-top: 0 !important;
  }

}



@media (max-width: 800px){
  .danger{
    display: none !important;
  }
}





@media (max-width: 800px){
  .hero.hero--lp-portrait .container.hero__content{
    margin-top: 15vh !important;
  }
}














/* WHY: Layout mit Portrait nur auf Desktop */
.why{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 1rem;
  align-items:start;
}

/* Portrait block */
.why__portrait{
  margin: 0;
  border-radius: calc(var(--r) + 12px);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.why__portrait img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 30%;
  filter: grayscale(100%) contrast(1.05);
}

/* Desktop: 3 Spalten (Portrait rechts) */
@media (min-width: 981px){
  .why{
    grid-template-columns: 1.05fr .95fr .80fr;
  }
  .why__portrait{
    min-height: 420px;
  }
}

/* Mobile/Tablet: Portrait komplett raus */
@media (max-width: 980px){
  .why__portrait{ display:none !important; }
}






/* WHY: Basis */
.why{
  display:grid;
  gap: 1rem;
  align-items:start;
}

/* Desktop: 3 Spalten (Portrait rechts) */
@media (min-width: 981px){
  .why{
    grid-template-columns: 1.05fr .95fr .80fr;
  }
}

/* Portrait Card */
.why__portrait{
  margin:0;
  border-radius: calc(var(--r) + 12px);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  overflow:hidden;
  box-shadow: var(--shadow);
  min-height: 420px;
}

.why__portrait img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position: 50% 28%;
}

/* Mobile/Tablet: Portrait raus */
@media (max-width: 980px){
  .why__portrait{ display:none !important; }
}




/* WHY: 3 Spalten sauber, gleiche Höhe */
@media (min-width: 981px){
  .why{
    grid-template-columns: 1.05fr .95fr .80fr;
    align-items: stretch; /* alle Zellen gleich hoch */
  }
}

/* Portrait-Card: KEIN min-height, sondern feste Proportion */
.why__portrait{
  margin:0;
  padding:0;
  border-radius: calc(var(--r) + 12px);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  overflow:hidden;
  box-shadow: var(--shadow);

  aspect-ratio: 4 / 5;   /* wirkt wie Editorial Portrait */
  height: 100%;          /* füllt die Grid-Zelle */
}

/* Bild füllt die Card wirklich komplett */
.why__portrait img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
  object-position: 55% 35%;
}

/* Mobile/Tablet: raus (wie geplant) */
@media (max-width: 980px){
  .why__portrait{ display:none !important; }
}



@media (max-width: 980px){

  .why{
    grid-template-columns: 1fr; /* <-- DAS ist der Schlüssel */
    gap: 1rem;
  }

  .why .panel{
    width: 100%;
  }

  /* Portrait auf mobil AUS */
  .why__portrait{
    display:none !important;
  }
}



/* Honeypot: für Nutzer unsichtbar, für Bots im DOM */
.hp{
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}