/* Konzept 3: Elegant Bronze – Graphit, ausgeprägte Bronzeflächen, feine Serifen */
:root{--bg:#1C1C1C;--text:#fff;--muted:#C1BAAF;--line:rgba(212,180,131,.24);--font-head:Fraunces,Georgia,serif;--font-body:Jost,system-ui,sans-serif;--head-weight:300;--radius:40px;--nav-bg:rgba(28,28,28,.86);--eyebrow:var(--gold-light)}
h1 em,h2 em{color:var(--gold-light);font-weight:300}

.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding-block:120px 72px}
.hero{background:#0B0B0B}
.hero__photo{position:absolute;inset:0 -12% 0 0;background:url("/site/shared/hero-familie.jpg.png") right center/cover no-repeat;animation:photoIn 1.6s var(--ease) both}
.hero__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,11,.9) 0%,rgba(11,11,11,.78) 42%,rgba(11,11,11,0) 64%),linear-gradient(180deg,rgba(11,11,11,.78),transparent 22%,transparent 82%,#0F0F0F)}
@keyframes photoIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
.hero__content{position:relative;z-index:1}
@media (min-width:861px){
  .nav .wrap,.hero__content{width:100%;padding-inline:clamp(40px,6vw,104px)}
  .nav .btn{display:none}
  .nav .nav__links{display:flex;gap:34px;margin-left:auto}
  .logo,.nav__links{transition:transform .4s var(--ease)}
  .logo{gap:14px}
  .nav:not(.is-scrolled) .logo,.nav:not(.is-scrolled) .nav__links,.nav:not(.is-scrolled) .nav__call{transform:translateY(32px)}
  .nav .nav__call{display:inline-flex;align-items:center;gap:9px;width:auto;height:50px;margin-left:18px;padding-inline:24px;border-radius:999px;font-size:15.5px;font-weight:600;letter-spacing:.03em}
  .nav .nav__call span{display:inline}
  .logo__emblem{width:48px;height:52px}
  .logo__word{width:176px;height:21px}
}
.hero h1{font-size:clamp(44px,6vw,88px);max-width:min(9em,46vw);line-height:1.04;margin-block:22px 26px;letter-spacing:-.025em}
.hero h1 em{display:block}
.hero__claim{max-width:min(30em,48vw);margin-bottom:14px;font-family:var(--font-head);font-size:clamp(20px,1.9vw,26px);line-height:1.3}
.hero .lead{max-width:min(50ch,48vw)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.tel-icon{width:18px;height:18px;flex:none}
.nav__call{display:grid;flex:none;width:42px;height:42px;margin-left:auto;border:1px solid var(--gold-light);border-radius:50%;place-items:center;background:#0B0B0B;color:var(--gold-light);box-shadow:0 6px 22px rgba(0,0,0,.55);text-decoration:none;transition:transform .4s var(--ease),background-color .3s,color .3s}
.nav__call span{display:none}
.nav__call:hover{background:var(--gold-light);color:#0B0B0B}

.head h2{font-size:clamp(36px,5vw,68px);margin-top:14px;letter-spacing:-.02em}

.imagine{background:#0F0F0F;text-align:center}
.imagine h2{font-size:clamp(46px,7vw,96px);letter-spacing:-.025em}
.imagine__text{max-width:34ch;margin:30px auto 0;color:#E9E3D9;font-family:var(--font-head);font-weight:300;font-size:clamp(24px,2.8vw,36px);line-height:1.35}
.imagine__pause{margin-top:34px;color:var(--gold-light);font-size:clamp(14px,1.4vw,17px);font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.imagine__turn{margin:46px 0 22px;font-family:var(--font-head);font-size:clamp(24px,2.6vw,34px)}

.calm{background:#0F0F0F}
.founder{background:#0F0F0F}
.calm__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,44px);margin-top:54px}
.calm__item{padding-top:22px;border-top:1px solid var(--gold)}
.calm__item h3{font-size:clamp(23px,2vw,28px);margin-bottom:12px}
.calm__item p{color:var(--muted);font-size:16.5px}

.founder__row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(36px,7vw,100px);align-items:center}
.founder__photo{aspect-ratio:4/5;max-width:400px;width:100%;overflow:hidden;border-radius:20px;background:#0F0F0F;box-shadow:0 26px 60px rgba(0,0,0,.5)}
.founder__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.founder h2{font-size:clamp(32px,4vw,56px);margin-block:14px 20px;letter-spacing:-.02em}
.founder__sign{margin-top:24px;color:var(--muted);font-size:15.5px}
.founder__sign strong{display:block;color:var(--gold-light);font-family:var(--font-head);font-size:clamp(23px,2vw,28px);font-weight:400;line-height:1.3}
.founder .btn{margin-top:26px}

.nav__links{display:none}
.nav__links a{text-decoration:none;font-size:15.5px;font-weight:500;letter-spacing:.03em;transition:color .3s}
.nav__links a:hover,.nav__links a[aria-current]{color:var(--gold-light)}

.page-first{padding-top:clamp(150px,16vw,200px)}
.contact__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,7vw,100px)}
.contact h1{font-size:clamp(42px,5vw,70px);white-space:nowrap;letter-spacing:-.025em;margin-block:14px 22px}
.smile{display:inline-block;width:.78em;height:.78em;margin-left:.08em;vertical-align:-.08em;color:var(--gold-light)}
.contact__facts{margin-top:30px;display:grid;gap:12px}
.contact form{display:grid;gap:18px}
.dropzone{display:grid;gap:4px;padding:22px;border:1px dashed rgba(212,180,131,.55);border-radius:12px;background:rgba(255,255,255,.04);text-align:center;cursor:pointer;transition:border-color .3s,background-color .3s}
.dropzone:hover{border-color:var(--gold-light);background:rgba(212,180,131,.08)}
.dropzone__title{color:#fff;font-weight:500}
.dropzone__hint{color:var(--muted);font-size:14px}
.dropzone input{margin-top:10px;min-height:0;padding:0;border:0;background:none;font-size:14px;color:var(--muted);text-align:center}
.contact .check{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--muted)}
.contact .check input{margin-top:4px;accent-color:#B08D57}

.story{background:#0F0F0F;border-top:1px solid var(--line)}
.story__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,7vw,100px);align-items:center}
.story .eyebrow{margin-bottom:18px}
.story h1{font-size:clamp(36px,4.6vw,64px);margin-block:28px;letter-spacing:-.02em}
.story .lead+.lead{margin-top:16px}
.story__win{margin-block:36px 18px;font-size:clamp(34px,4.2vw,58px);letter-spacing:-.02em}
.story__turn{margin-block:22px;font-family:var(--font-head);font-size:clamp(22px,2.2vw,30px);line-height:1.25}
.story__turn em{color:var(--gold-light)}
.story__grid{align-items:start}
.story__frame{position:sticky;top:110px;width:100%;max-width:400px;margin-left:auto}
.story__photo{position:relative;aspect-ratio:4/5;background:#0F0F0F;border-radius:20px;overflow:hidden;box-shadow:0 26px 60px rgba(0,0,0,.5)}
.story__photo img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:24% 50%}
.story__label{position:absolute;bottom:18px;left:18px;padding:5px 14px;border-radius:999px;background:rgba(11,11,11,.72);color:var(--gold-light);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;backdrop-filter:blur(8px)}
.story__heute{display:flex;align-items:center;gap:16px;margin-top:30px}
.story__heute img{flex:none;width:76px;height:76px;border-radius:50%;object-fit:cover;object-position:50% 10%}
.story__heute .founder__sign{margin-top:0}

.quals__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:50px}
.qual{position:relative;overflow:hidden;padding:30px 24px;border-radius:20px;border:1px solid var(--line);background:linear-gradient(150deg,#262320,#151412);box-shadow:0 22px 50px rgba(0,0,0,.34);text-align:center;transition:transform .5s var(--ease),border-color .4s}
.qual:hover{transform:translateY(-6px);border-color:var(--gold-light)}
.qual::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#8C6A43,#D4B483,#8C6A43)}
.qual__seal{display:block;width:76px;height:76px;margin:0 auto 18px;filter:drop-shadow(0 6px 14px rgba(176,141,87,.35))}
.qual__kind{color:var(--gold-light);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.qual h3{font-size:clamp(23px,2.1vw,29px);margin-block:12px 10px}
.qual p:last-child{color:var(--muted);font-size:15.5px;line-height:1.45}

.cases h2{font-size:clamp(36px,5vw,66px);margin-top:14px;letter-spacing:-.02em}

.process{background:#0F0F0F}
.steps{list-style:none;margin:54px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s}
.steps li{counter-increment:s;padding:28px 24px;background:#1C1C1C;border:1px solid var(--line);border-radius:6px}
.steps li::before{content:counter(s);display:grid;place-items:center;width:42px;height:42px;margin-bottom:22px;border-radius:50%;background:linear-gradient(135deg,#D4B483,#8C6A43);color:#0B0B0B;font-weight:600}
.steps h3{font-size:24px;margin-bottom:9px}
.steps p{color:var(--muted);font-size:16px}

.finale{background:linear-gradient(120deg,#8C6A43,#B08D57 50%,#7A5A38);color:#0B0B0B;text-align:center;padding-block:clamp(70px,10vw,130px)}
.finale h2{font-size:clamp(36px,5.4vw,76px);letter-spacing:-.025em;max-width:15em;margin-inline:auto}
.finale h2 em{color:#fff}
.finale .lead{color:#0B0B0B;margin:20px auto 32px}
.btn--dark{background:#0B0B0B;color:#fff}
.btn--dark:hover{transform:translateY(-2px)}

@media (max-width:860px){
  .hero{align-items:flex-start;min-height:100svh;padding-top:calc(max(280px,62vw) - 18px);padding-bottom:32px}
  .hero__photo{inset:0 0 auto;height:max(280px,62vw);background-position:78% center}
  .hero__photo::after{background:linear-gradient(180deg,rgba(11,11,11,.55),transparent 28%,transparent 62%,#0B0B0B)}
  .hero h1,.hero .lead,.hero__claim{max-width:none}
  .hero h1{font-size:clamp(42px,8vw,66px);margin-block:12px 16px}
  .hero .eyebrow{font-size:clamp(10.5px,1.6vw,12px);letter-spacing:.14em;white-space:nowrap}
  .hero .lead{font-size:clamp(15.5px,2.4vw,19px);line-height:1.55}
  .hero__claim{font-size:clamp(20px,3vw,26px)}
  .hero__cta{margin-top:22px}
  .nav__row{gap:12px}
  .story__grid,.founder__row,.contact__grid{grid-template-columns:1fr}
  .steps,.calm__grid{grid-template-columns:1fr 1fr}
  .founder__photo{max-width:320px;margin-inline:auto}
  .story__frame{position:relative;top:auto;order:-1;max-width:320px;margin-inline:auto}
}
@media (max-width:1100px){.quals__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.quals__grid{grid-template-columns:1fr}}
@media (max-width:520px){.nav .btn{padding-inline:11px;font-size:12.5px;white-space:nowrap}.logo{gap:7px}.logo__word{width:88px;height:11px}.nav__row{gap:8px}.steps,.calm__grid{grid-template-columns:1fr}.hero__cta .btn,.finale .btn{width:100%}}

/* Hochgeladene Unterlagen */
.uploads{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.uploads li{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid rgba(212,180,131,.3);border-radius:10px;background:rgba(255,255,255,.03)}
.uploads img,.uploads__pdf{width:48px;height:48px;object-fit:cover;border-radius:6px;flex:none}
.uploads__pdf{display:grid;place-items:center;background:rgba(212,180,131,.15);color:var(--gold-light);font-size:12px;font-weight:600}
.uploads__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.uploads__groesse{display:block;color:var(--muted);font-size:12px}
.uploads button{flex:none;background:none;border:0;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;padding:6px 10px}
.uploads button:hover{color:var(--gold-light)}
.calc__upload-status,.form-status{color:var(--muted);font-size:14px;margin:6px 0 0}
.calc__fern{display:grid;gap:12px;margin:14px 0 6px}.calc__fern .calc__tip{margin:0}.calc__fern .calc__upload-status:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.kontakt-danke h3{margin:0 0 8px}

/* Anrede als zwei Auswahlknöpfe */
.calc__anrede{display:flex;gap:10px;flex-wrap:wrap;margin:0;padding:0;border:0}
.calc__anrede legend{width:100%;margin-bottom:6px;font-size:14px;color:var(--muted)}
.calc__radio{position:relative;cursor:pointer}
.calc__radio input{position:absolute;opacity:0;pointer-events:none}
.calc__radio span{display:inline-block;min-width:96px;padding:10px 18px;border:1px solid rgba(212,180,131,.45);border-radius:999px;text-align:center;transition:background-color .2s,border-color .2s,color .2s}
.calc__radio input:checked+span{background:var(--gold-light);border-color:var(--gold-light);color:#1c1c1c}
.calc__radio input:focus-visible+span{outline:2px solid var(--gold-light);outline-offset:2px}
.calc__row--name{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}

/* Impressum und Datenschutz */
.legal{max-width:780px}
.legal h1{font-size:clamp(40px,6vw,64px);margin:10px 0 28px}
.legal h2{font-size:clamp(22px,2.6vw,28px);margin:46px 0 14px;color:var(--gold-light)}
.legal p{color:var(--muted);margin:0 0 14px}
.legal a{color:var(--gold-light);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.legal strong{color:var(--text);font-weight:500}
.legal__stand{margin-top:40px!important;font-size:14px}

/* Kopfzeile auf dem Telefon wie am Computer: kein „Projekt berechnen“ oben, rechts „Anrufen“ als dunkle Pille mit Text */
.nav .btn{display:none}
.nav__call{display:inline-flex;align-items:center;gap:8px;width:auto;height:44px;padding-inline:18px;border-radius:999px;font-size:14.5px;font-weight:600;letter-spacing:.03em}
.nav__call span{display:inline}

/* iPhone/Safari: die verkleinerte Adresszeile liegt beim Scrollen über dem oberen Rand.
   Kopfzeile etwas höher, Logo und „Anrufen“ unten ausrichten, damit nichts darunter verschwindet. */
@supports (-webkit-touch-callout:none){
  @media (max-width:860px){
    .nav.is-scrolled .nav__row{min-height:88px;align-items:flex-end;padding-bottom:12px}
  }
}