/* ZERO TO FOUR – Website
   Keine externen Schriften, Skripte von Drittanbietern oder Cookies. */
:root{
  --gruen-dunkel:#3c4f1d;   /* Ø im Logo */
  --gruen:#768f54;          /* TO im Logo */
  --gruen-hell:#9cb060;     /* 4 im Logo */
  --grau:#a7a5a6;           /* Claim */
  --grau-text:#8d8b8c;
  --flaeche:#e9e8e9;        /* Türschild-Hintergrund */
  --font:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);font-weight:300;color:var(--gruen-dunkel);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--gruen);outline-offset:4px}

/* ---------- Seite 1: Türschild ---------- */
.schild{position:fixed;inset:0;background:var(--flaeche);overflow:hidden}
.schild-logo{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:min(46vw, 92vh);            /* skaliert mit Breite und Höhe */
  height:auto;display:block;
}
.menue{
  position:absolute;right:clamp(1.25rem,4vw,4rem);top:50%;transform:translateY(-50%);
  text-align:right;font-size:clamp(.8rem,1.05vw,1.05rem);letter-spacing:.18em;text-transform:uppercase;
  color:var(--gruen);
}
.menue a{display:inline-block;padding:.5em 0;transition:color .2s}
.menue a:hover{color:var(--gruen-dunkel)}
.firmenblock{
  position:absolute;left:50%;bottom:clamp(1.25rem,4vh,3rem);transform:translateX(-50%);
  width:max-content;max-width:92vw;text-align:center;
  font-size:clamp(.56rem,.72vw,.8rem);line-height:1.75;letter-spacing:.12em;text-transform:uppercase;color:var(--grau-text);
}
.firmenblock span{white-space:nowrap}
.firmenblock span+span{margin-left:1.6em}

@media (max-width:700px){
  .schild-logo{width:82vw;top:40%}
  .menue{top:58%;right:1.25rem;font-size:.8rem}
  .firmenblock{font-size:.56rem;line-height:1.7}
  .firmenblock .zeile{display:block}
  .firmenblock span{display:inline-block}
  .firmenblock span+span{margin-left:.9em}
}

/* ---------- Seite 2: Kontakt ---------- */
.kontakt-body{background:#fff}
.kontakt-body.gesperrt{overflow:hidden}
.foto{position:relative;height:100vh;height:100dvh;overflow:hidden;background:#a39f9c}
/* Bühne im Bildformat 2048 × 1363, die den Bildschirm immer füllt (wie "cover").
   Texte sitzen in Prozent der Bühne und bleiben so am Bild verankert. */
.buehne{
  --r:1.5026;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  --w:max(100vw, calc(100dvh * var(--r)));
  width:var(--w);
  aspect-ratio:2048/1363;
  container-type:inline-size;
}
.buehne picture{display:contents}
.buehne img{position:absolute;inset:0;width:100%;height:100%;display:block}
.person{font-style:normal;position:absolute;bottom:31.7%;font-size:1.45cqw;line-height:1.5;color:var(--gruen-dunkel);font-weight:400}
.person a{transition:color .2s}
.person a:hover{color:#fff}
.person.fp{right:min(74.2%, calc((var(--w) + 100vw) / 2 - 15cqw));text-align:right}
.person.me{left:min(78.9%, calc((var(--w) + 100vw) / 2 - 15cqw));text-align:left}
.person span,.person a{display:block;white-space:nowrap}
/* Textblock links oben, gleiche Schrift und Zeilenabstand wie die Kontaktblöcke */
.antrieb span{display:block}
.antrieb span+span{margin-top:1.5em}
.antrieb{position:absolute;left:10.4%;top:15.6%;margin:0;font-size:1.595cqw;line-height:1.5;font-weight:400;color:#fff;white-space:nowrap}
.impressum-link{
  position:absolute;left:10.4%;top:70.2%;transform:translateX(-.4em);
  font-size:.82cqw;letter-spacing:.06em;text-transform:uppercase;color:var(--gruen-dunkel);font-weight:400;
  padding:.6em .4em;cursor:pointer;background:none;border:0;font-family:inherit;
}
.impressum-link:hover{color:#fff}

/* Logo oben rechts auf der Kontaktseite */
.logo-oben{position:absolute;top:clamp(1rem,3vw,2.75rem);right:clamp(1.25rem,4vw,4rem);z-index:3;display:block;width:clamp(90px,11vw,200px)}
.logo-oben img{display:block;width:100%;height:auto}

/* Hochformat (Smartphone): Bild oben, Kontakte darunter */
@media (max-aspect-ratio:6/5){
  .foto{height:auto;overflow:visible;background:#fff}
  .buehne{position:relative;left:auto;top:auto;transform:none;width:100%;aspect-ratio:auto;container-type:normal}
  .buehne img{position:static;height:auto}
  /* Reihenfolge: Bild, Kontakte, Textblock */
  .buehne{display:flex;flex-direction:column}
  .person{position:static}
  /* Textblock direkt unter dem Bild, linksbündig, Größe wie Headline Impressum */
  /* Textblock auf dem Bild über den Köpfen, weiß */
  .antrieb{position:absolute;left:6.2vw;right:6.2vw;top:7.5vw;white-space:normal;color:#fff;font-size:3.7vw;font-weight:400;line-height:1.4;margin:0;padding:0}
  .antrieb br.z{display:none}
  .antrieb span+span{margin-top:.6em}
  /* Kontaktdaten jeweils mittig unter der Person (Florian ca. 37,6 %, Moritz ca. 69,4 % der Bildbreite) */
  .kontakte-mobil{display:grid;padding-top:1.5rem}
  .person{grid-area:1/1;justify-self:start;transform:translateX(-50%);font-size:min(1rem,3.1vw)}
  .person.fp,.person.me{text-align:center;right:auto;left:auto}
  .person.fp{margin-left:37.6%}
  .person.me{margin-left:69.4%}
  .person span,.person a{white-space:nowrap}
  /* kein Menüpunkt Impressum: das Impressum folgt direkt unter den Kontakten */
  .impressum-link{display:none}
  .person a:hover{color:var(--gruen)}
  .kontakt-body .impressum,.kontakt-body .impressum[hidden]{display:block;padding-top:3rem}
}
@media (min-aspect-ratio:6/5){ .kontakte-mobil{display:contents} }

/* Impressum (weiß, unter dem Foto) */
.impressum{background:#fff;color:#333;padding:clamp(3rem,8vw,6rem) 1.5rem clamp(4rem,8vw,6rem)}
.impressum[hidden]{display:none}
.impressum .inhalt{max-width:760px;margin:0 auto;font-size:.95rem;line-height:1.65;font-weight:300}
.impressum h1{font-size:1.5rem;font-weight:300;letter-spacing:.14em;text-transform:uppercase;color:var(--gruen-dunkel);margin-bottom:2rem}
.impressum h1.abstand{margin-top:4rem}
.impressum h2{font-size:.82rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--gruen);margin:2rem 0 .5rem}
.impressum p,.impressum address{font-style:normal;margin-bottom:.8rem}
.impressum a{color:var(--gruen-dunkel);border-bottom:1px solid var(--gruen-hell)}
.impressum a:hover{color:var(--gruen)}
.impressum .fuss{margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid #e3e1e2;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.impressum .fuss a{border:0;color:var(--gruen)}