/* ===== Basis & Variablen ===== */
:root{
  --green:#005F6A;
  --gold:#D38B2C;
  --bg:#ffffff;
}

*{margin:0;padding:0;box-sizing:border-box}

html,body{height:100%}
body{
  height:100vh;
  min-height:1000px;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--green);
  font-family:"STIXTwoText", serif;
  line-height:1.6;
}

/* Zentrierte Innenbreite für alle Bereiche */
.wrap{
  max-width:1100px;
  margin-inline:auto;
  padding:1.5rem;
}

/* ===== Layout-Fluss ===== */
/* main füllt den Platz; kontakt wird nach unten gedrückt */
main{flex:1;display:flex;flex-direction:column;justify-content:center}
.kontakt{margin-top:auto}

/* ===== Header ===== */
header{
  background:var(--green);
  color:#fff;
}
header .wrap{
  text-align:center;
  padding-block:2rem;
}
header h1{font-size:1.5rem;margin-bottom:.5rem}
header h2{font-size:3rem;margin-bottom:.5rem}
header p{font-size:1.2rem}

/* ===== Hero ===== */
/* Hero */
.hero{
  text-align:center;
  padding-block:3rem;
  /* zieht die Sektion leicht in den Header, damit der Claim überlappt */
  margin-top:-1.2rem;
}
.hero-inner{
  position:relative;
  display:inline-block;       /* eng um das Logo, damit absolute Position sauber ist */
}
.hero img{
  max-width:480px;
  width:100%;
  height:auto; 
  margin-bottom:2rem;
}

/* Claim: Kreis oben rechts über dem Logo, leicht gedreht */
.claim{
  position:absolute;
  top:-105px;         /* höher ziehen = stärker in den Header */
  right:-160px;       /* weiter nach außen = weniger über dem Logo */
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:180px;       /* etwas kleiner als vorher */
  height:180px;
  background:var(--gold);
  color:#fff;
  border-radius:50%;
  font-weight:700;
  text-align:center;
  padding:1rem;
  line-height:1.3;
  font-size:1.3rem;
  transform:rotate(7deg) scale(1.1);
  box-shadow:0 6px 15px rgba(0,0,0,.15);
  
}

/* ===== Kontakt (unten, wie Header eingefärbt) ===== */
.kontakt{
  background:var(--green);
  color:#fff;
}
.kontakt .wrap{
  text-align:center;
  padding-block:2.25rem;
}
.kontakt p{font-size:2rem;margin:.35rem 0}
.kontakt a{
  color:#fff;
  text-decoration:none;
  font-weight:700;
}
.kontakt a:hover{text-decoration:underline}

/* ===== Footer (gelb) ===== */
footer{
  background:var(--gold);
  color:var(--green);
  font-size:.95rem;
}
footer .wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.75rem;
  padding-block:1rem;
  text-align:center;
}
footer a{
  color:var(--green);
  text-decoration:none;
  font-weight:700;
}
footer a:hover{text-decoration:underline}

/* ===== Kleines Responsive-Finetuning ===== */
@media (max-width: 640px){
  header h1{font-size:2.2rem}
  .kontakt p{font-size:1.6rem}
  .hero{padding-block:2rem}
}


/* Responsive: Claim unter Logo und mittig wenn Platz eng */
@media (max-width: 820px){
  .claim{
    position:static;          /* löst aus dem absoluten Overlay */
    transform:none;
    margin:-.5rem auto 0;     /* leicht ins Logo „hinein“ und mittig */
    width:200px;
    height:200px;
    font-size:1.4rem;
  }
  .hero img{
    margin-bottom:1.25rem;    /* enger, da Claim darunter sitzt */
  }
}

@media (max-width: 480px){
  .claim{
    width:170px;
    height:170px;
    font-size:1.15rem;
    padding:1rem;
  }

  .mobilausblender{
    display:none;
  }

  footer a{
    display: block;
    }

  header h1,header h2{
    line-height:110%
}
}