/* ===================================================================
   pozo.media — schwarz, weisse Schrift, eine Seite.
   Keine fremden Server: Schriften kommen aus dem System (DSGVO).
   =================================================================== */

:root{
  --schwarz:#000;
  --weiss:#fff;
  --grau:rgba(255,255,255,.55);
  --linie:rgba(255,255,255,.18);
  /* Der Blauton aus dem Logo -- am 14.09.2026 aus der Datei gemessen,
     nicht geschaetzt (haeufigster Wert des Punktes: #1399f4). */
  --blau:#1399f4;
  --rand:clamp(18px,4vw,56px);
  --schrift:"Helvetica Neue",Helvetica,Inter,"Segoe UI",Arial,sans-serif;
  --weich:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  background:var(--schwarz);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--schwarz);
  color:var(--weiss);
  font-family:var(--schrift);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.5;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body.ist-gesperrt{overflow:hidden}

img{display:block;max-width:100%;height:auto}

a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:1px solid var(--weiss);
  outline-offset:3px;
}

::selection{background:var(--weiss);color:var(--schwarz)}

/* ————————————————————————— Fortschrittslinie ————————————————————————— */
.fortschritt{
  position:fixed;inset:0 0 auto 0;height:1px;z-index:60;
  background:rgba(255,255,255,.12);
}
.fortschritt i{
  display:block;height:100%;background:var(--blau);
  transform:scaleX(var(--fortschritt,0));transform-origin:0 50%;
}

/* ——————————————————————————— Kopfzeile ——————————————————————————— */
.kopf{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  padding:calc(var(--rand)*.6) var(--rand);
  mix-blend-mode:difference;
}

.kopf__mark{
  width:clamp(90px,9vw,130px);
  line-height:0;
  opacity:0;transform:translateY(-6px);
  transition:opacity .5s var(--weich),transform .5s var(--weich);
  pointer-events:none;
}
.kopf.ist-fest .kopf__mark{opacity:1;transform:none;pointer-events:auto}
.kopf__mark picture{display:block}

.kopf__nav{display:flex;gap:clamp(16px,2.4vw,36px)}
.kopf__nav a{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  opacity:.75;transition:opacity .3s var(--weich);
}
.kopf__nav a:hover{opacity:1}

/* ————————————————————————————— Buehne ————————————————————————————— */
.buehne{
  position:relative;
  height:100svh;min-height:520px;
  display:grid;place-items:center;
  overflow:hidden;
  isolation:isolate;
}

.buehne__bild{position:absolute;inset:0;z-index:-2}
.buehne__bild picture{display:block;width:100%;height:100%}
.buehne__bild img{
  width:100%;height:100%;object-fit:cover;
  /* Der Kopf sitzt im Bild links oben. Beim Beschneiden muss er im Rahmen
     bleiben -- deshalb 28% von links, 36% von oben. */
  object-position:28% 36%;
  /* sanftes Mitlaufen beim Scrollen, in JS ueber --p gesteuert */
  transform:scale(calc(1.04 + var(--p,0) * .1)) translateY(calc(var(--p,0) * 4vh));
  /* grayscale bleibt drin, damit auch ein spaeteres Farbfoto passt */
  filter:grayscale(1) contrast(1.05) brightness(calc(1 - var(--p,0) * .55));
  will-change:transform,filter;
}

/* Verlaeufe nur dort, wo Schrift steht: oben die Navigation, unten die
   Zeile mit den Stichworten, links ein Hauch fuer die Stimmung. Die rechte
   Haelfte bleibt unangetastet -- sie ist im Foto ohnehin schwarz. */
.buehne::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 56%, rgba(0,0,0,.9) 100%),
    linear-gradient(to right, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 40%);
}

.buehne__mitte{
  width:100%;
  padding:0 var(--rand);
  display:grid;place-items:center;
  opacity:calc(1 - var(--p,0) * 1.6);
  transform:translateY(calc(var(--p,0) * -6vh));
}

.wortmarke{
  display:block;
  width:min(100%, 1180px);
  animation:marke-auf 1.5s var(--weich) both;
}
.wortmarke img{width:100%;height:auto}

/* Die Unterzeile des Logos, als Text nachgebaut: gleiche Woerter, gleiche
   blaue Schraegstriche -- aber bei jeder Groesse scharf und auffindbar. */
.unterzeile{
  margin:clamp(10px,1.4vw,20px) 0 0;
  font-size:clamp(8.5px,1.05vw,14px);
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:400;
  color:var(--weiss);
  animation:marke-auf 1.5s var(--weich) .25s both;
}
.unterzeile i{font-style:normal;color:var(--blau);padding:0 .4em}

/* Ab Tablet: der Schriftzug steht rechts, in der schwarzen Flaeche neben
   dem Kopf -- und damit in seiner Blickrichtung. */
@media (min-width:900px){
  .buehne__mitte{justify-items:end}
  .wortmarke{width:min(50vw,640px)}
}

/* Auf dem Telefon wuerde der Beschnitt nur noch das Gesicht zeigen, und
   darauf kann keine Schrift stehen. Deshalb sitzt das Foto oben, blendet
   nach unten in Schwarz aus, und der Schriftzug steht darunter. */
@media (max-width:899px){
  .buehne__bild{inset:0 0 auto 0;height:64svh}
  .buehne__bild img{
    object-position:34% 26%;
    -webkit-mask-image:linear-gradient(to bottom,#000 58%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 58%,transparent 100%);
  }
  .buehne::after{
    background:linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 22%);
  }
  .buehne__mitte{align-self:end;padding-bottom:20svh}
  .wortmarke{width:min(88%,420px)}
}
@keyframes marke-auf{
  from{opacity:0;transform:scale(.94);filter:blur(6px)}
  to  {opacity:1;transform:none;filter:none}
}

.buehne__fuss{
  position:absolute;left:var(--rand);right:var(--rand);bottom:calc(var(--rand)*.9);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  opacity:calc(1 - var(--p,0) * 2);
}

.klein{
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grau);
}
.buehne__hinweis{display:inline-flex;align-items:center;gap:10px}

.pfeil{
  width:1px;height:26px;background:currentColor;display:inline-block;
  transform-origin:50% 0;
  animation:pfeil 2.4s var(--weich) infinite;
}
@keyframes pfeil{
  0%,100%{transform:scaleY(.2);opacity:.3}
  50%    {transform:scaleY(1);opacity:1}
}

/* ———————————————————————————— Abschnitte ———————————————————————————— */
.aussage,.kontakt{
  padding:clamp(90px,16vh,200px) var(--rand);
  max-width:1400px;margin:0 auto;
}

.gross{
  margin:0 0 .6em;
  font-size:clamp(28px,5.2vw,76px);
  line-height:1.04;
  letter-spacing:-.035em;
  font-weight:500;
  max-width:18ch;
}

/* Drei Woerter untereinander. Gross geschrieben wird ueber CSS, nicht im
   Text -- sonst buchstabieren manche Sprachausgaben jeden Buchstaben. */
.gross--zeilen{
  text-transform:uppercase;
  font-size:clamp(42px,9vw,150px);
  line-height:.92;
  letter-spacing:-.045em;
  font-weight:600;
  max-width:none;
  margin-bottom:clamp(28px,5vh,64px);
}
/* ⚠ Muss spezifischer sein als `[data-enthuellen] .wort` weiter unten --
   beide haben sonst dasselbe Gewicht, und die spaetere Regel gewinnt:
   die drei Woerter stehen dann wieder nebeneinander. */
[data-enthuellen].gross--zeilen .wort{display:block}

.text{
  margin:0;
  font-size:clamp(16px,1.5vw,22px);
  line-height:1.55;
  color:var(--grau);
  max-width:46ch;
}

/* Wortweises Aufdecken beim Hereinscrollen */
[data-enthuellen] .wort{
  display:inline-block;
  transform:translateY(.9em);
  opacity:0;
}
[data-enthuellen].ist-da .wort{
  transform:none;opacity:1;
  transition:transform .9s var(--weich),opacity .9s var(--weich);
  transition-delay:calc(var(--i,0) * 28ms);
}

/* ———————————————————————————— Formular ———————————————————————————— */
.formular{max-width:640px;margin-top:clamp(28px,5vh,56px)}

.feld{margin-bottom:clamp(22px,3.4vh,38px)}
.feld label{
  display:block;margin-bottom:10px;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--grau);
}
.feld input,.feld textarea{
  width:100%;
  background:transparent;border:0;border-bottom:1px solid var(--linie);
  color:var(--weiss);font:inherit;font-size:clamp(16px,1.4vw,20px);
  padding:8px 0 12px;border-radius:0;
  transition:border-color .35s var(--weich);
}
.feld textarea{resize:vertical;min-height:120px;line-height:1.5}
.feld input:focus,.feld textarea:focus{outline:none;border-bottom-color:var(--blau)}
.feld input:user-invalid,.feld textarea:user-invalid{border-bottom-color:#ff6b5e}

.zustimmung{
  display:flex;gap:12px;align-items:flex-start;
  font-size:13px;line-height:1.5;color:var(--grau);
  margin-bottom:clamp(24px,4vh,40px);cursor:pointer;
}
.zustimmung input{
  flex:0 0 auto;width:15px;height:15px;margin-top:3px;
  accent-color:var(--blau);
}
.zustimmung a{text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--blau);color:var(--weiss)}

.knopf{
  appearance:none;cursor:pointer;
  background:transparent;color:var(--weiss);
  border:1px solid var(--weiss);border-radius:999px;
  padding:15px 34px;font:inherit;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  transition:background .35s var(--weich),color .35s var(--weich);
}
.knopf:hover:not(:disabled){background:var(--weiss);color:var(--schwarz)}
.knopf:disabled{opacity:.4;cursor:progress}

.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.meldung{margin:20px 0 0;font-size:14px;min-height:1.4em}
.meldung--ok{color:#8ef0b5}
.meldung--fehler{color:#ff8a7d}

/* —————————————————————————————— Fuss —————————————————————————————— */
.fuss{
  border-top:1px solid var(--linie);
  padding:calc(var(--rand)*.8) var(--rand);
  display:flex;flex-wrap:wrap;gap:16px;
  align-items:center;justify-content:space-between;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grau);
}
.fuss nav{display:flex;gap:clamp(16px,2.4vw,32px)}
.fuss a:hover{color:var(--weiss)}

/* ————————————————————————— Rechtliche Tafeln ————————————————————————— */
.tafel{
  position:fixed;inset:0;z-index:100;
  background:var(--schwarz);
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;transition:opacity .4s var(--weich);
}
.tafel.ist-offen{opacity:1}
.tafel[hidden]{display:none}

.tafel__innen{
  max-width:760px;margin:0 auto;
  padding:clamp(70px,12vh,130px) var(--rand) clamp(70px,14vh,140px);
}
.tafel h2{
  margin:0 0 clamp(28px,5vh,52px);
  font-size:clamp(26px,4vw,48px);letter-spacing:-.03em;font-weight:500;
}
.tafel h3{
  margin:clamp(28px,4vh,44px) 0 10px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--grau);
  font-weight:400;
}
.tafel p{margin:0 0 14px;font-size:15px;line-height:1.65;color:rgba(255,255,255,.8)}
.tafel .hinweis{font-size:13px;color:var(--grau)}
.tafel a{text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--blau)}

.tafel__zu{
  position:fixed;top:calc(var(--rand)*.5);right:var(--rand);
  width:44px;height:44px;
  background:transparent;border:1px solid var(--linie);border-radius:50%;
  color:var(--weiss);font-size:22px;line-height:1;cursor:pointer;
  transition:background .3s var(--weich),color .3s var(--weich);
}
.tafel__zu:hover{background:var(--weiss);color:var(--schwarz)}

/* ————————————————————————————— Ruecksicht ————————————————————————————— */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-enthuellen] .wort{transform:none;opacity:1}
  .buehne__bild img{transform:none;filter:grayscale(1) contrast(1.05) brightness(1)}
  .buehne__mitte,.buehne__fuss{opacity:1;transform:none}
}

@media (max-width:640px){
  .kopf{mix-blend-mode:normal}
  .buehne__fuss{flex-direction:column;align-items:flex-start;gap:10px}
  .gross{max-width:none}
}