:root{
  --content: #f0eae4;
  --footer: #bc6740;
  --text: #766f6f;
  --muted: #766f6f;
  --wrap: 1000px;
  --pad: 30px;
  --overlap: 160px;      /* Bild ragt in Content */
  --gap-title: 22px;
  --hero-h: 560px;       /* <<< HIER: Hero-Hoehe schnell aendern */
  --portrait-top: 150px; /* <<< HIER: Abstand Bild von oben (unter Logo) */
}

html {max-width: 100%; overflow-x: hidden; }

*{ box-sizing: border-box; }
html,body{ height: 100%; }
body{
  margin: 0;
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #fff;
  font-family: 'Hind';     
}
body.start{
animation: body 1.5s ease-out forwards;    
}

@keyframes body {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}





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

.wrap{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* Hero with full-width background */
.hero{
  position: relative;
  overflow: hidden; /* sonst sieht man beim Zoomen ggf. Kanten */
}

.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: url("img/back.webp") center / cover no-repeat;
  transform: scale(1);
  transform-origin: center;
  will-change: transform;
  animation: heroKenBurns 18s ease-in-out infinite alternate;
  z-index: 0;
}

/* Inhalt bleibt oben */
.hero > *{
  position: relative;
  z-index: 1;
}

@keyframes heroKenBurns{
  0%   { transform: scale(1) translate(0,0); }
  100% { transform: scale(1.08) translate(-1.5%, -1.5%); }
}





.hero__wrap{
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
padding-top: 60px;
}

.brand{
order: 2;
}
.portrait{
order: 1;
margin-bottom: -50px;
text-align: left;
padding: 0;
margin-left: 6px;
}

.brand__logo{
  display: block;
  max-width: 135px;
  height: auto;
}

.portrait__img{
display: block;
width: 400px;
max-width: 100%:
height: auto;
margin-top: 90px;
margin-bottom:-50px;
}

/* Content panel */
.content{
  background: var(--content);
  position: relative;
  overflow: hidden;
  padding: 150px 0 0 10px ; /* einheitlich */
}


.content__wrap{
  position: relative;
}

header,
.hero,
.wrap,
.hero__wrap,
.portrait,
figure {overflow: visible !important; position: relative;}

figure {text-align: left; padding: 0;}


/* Big translucent "a" watermark */
.content__wrap::after{
  content: "";
  position: absolute;
  right: 25%;
  top: -140px;
  width: 450px;
  height: 450px;
  background: url("img/a.png?1") no-repeat center / contain;
  opacity: 1;
  pointer-events: none;
  transform: translate(20%, 0);
z-index: -1;
}
.content__wrap.ds::after{
  top: auto;
bottom: 0;

}

.content__inner{
max-width: 660px;
padding-left: 6px; /* slight optical align */
padding-bottom: 80px;
}
.content__inner.ds {
  max-width: 900px; 
}

.content__inner.ds ul {
padding: 0 0 0 15px; 
list-style-type: square;
}


.content__inner.ds p {
font-size: 14px;
}

.content__title{
  font-family: 'Hind';  
  font-weight: 400;
  font-size: 18px;
  margin: 0 0 var(--gap-title);
}

@media (min-width:700px){ .start .content__title br {display: none;} }

h1, h2, h3, h4, h5 {
  font-weight: 400;
}

.ds h1 {font-size: 21px; margin: 0 0 0 0;}
.ds h2 {font-size: 17px; margin: 30px 0 0px 0;} 
.ds h3 {font-size: 16px; margin: 30px 0 0px 0;}  

.content__text{
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.content__signature{
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}


.hero{
  position: relative;
  z-index: 2;
}

.portrait{
  position: relative;
  z-index: 3; /* sicher über content */
animation: portraet 1s ease-out forwards;
}

@keyframes portraet {
  from {
    opacity: 0;
filter: blur(10px);
    transform: translateX(30px);
  }
  to {
    opacity: 1;
filter: blur(0px);  
    transform: translateX(0);
  }
}




.content{
  position: relative;
  z-index: 1;
}

/* Footer bar */
.footer{
  background: var(--footer);
  color: rgba(0,0,0,.78);
  padding: 16px 0;
animation: footer 1.5s ease-out forwards;  
}


@keyframes footer {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}




.footer__wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.footer__links{
  font-size: 13px;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
font-weight: 600;
padding-left: 10px;   
}
.footer__sep{
  opacity: .6;
}

.footer__ig{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.12);
}
.footer__ig svg{
  fill: rgba(0,0,0,.72);
}

/* Mobile layout */
@media (max-width:700px){


.brand__logo{
width: 160px;
max-width: 80%;
margin: 0 auto;
}

.hero__wrap{
position: relative;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 40px;
flex-wrap: wrap;
}

.portrait__img{
margin-top: 40px;
margin-bottom:-300px;
width: 100%;  
}

.brand{
order: 1;
}
.portrait{
order: 2;
margin-bottom: -50px;
text-align: left;
padding: 0 !important;
margin-left: 0px;
margin-right: 0px;   
width: 100%; 
}
.content{
padding: 380px 0 0 0; /* einheitlich */
text-align: center;
}
.content .ds {
text-align: left !important;
}

figure img {max-width: 100% !important;}

  /* Footer mobil: Navigation untereinander zentriert */
  .footer__wrap{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .footer__links{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
padding-left: 0px;     
  }

  .footer__sep{
    display: none;
  }

 /* Big translucent "a" watermark */
.content__wrap::after{  right: 25%; top: auto; bottom: 0;  width: 350px; height: 350px; transform: translate(20%, 0);}



}




@media (max-width:500px){ .portrait__img{ margin-bottom:-200px; margin-top: 30px; } .content{ padding-top: 280px !important; }}
@media (max-width:400px){ .portrait__img{ margin-bottom:-120px;margin-top: 15px; } .content{ padding-top: 200px !important; } .content__wrap::after{  right: 35%; top: auto; bottom: 0;  width: 150px; height: 150px; transform: translate(20%, 0);}   }