/* Die Abschnitte unterhalb des Kopfs: Bild, Aussagen, Facetten, Fuss. */

/* ================= Bild mit Glitch ================= */
.bild-teil{padding-top:clamp(50px,10vh,120px);padding-bottom:clamp(50px,10vh,120px)}

.bild-reihe{
  display:flex;gap:clamp(20px,4vw,64px);
  /* Text am Bildfuss ausgerichtet - bewusst so, nicht oben. */
  align-items:flex-end;flex-wrap:wrap;
}

.bild-rahmen{
  position:relative;flex:none;
  width:clamp(240px,30vw,380px);aspect-ratio:550/730;
  overflow:hidden;background:var(--tinte);
}
.bild-rahmen img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 20%;
  filter:grayscale(1) contrast(1.28) brightness(1.02);
}

/* Versetzte Scheiben desselben Bildes, vom Skript kurz eingeblendet */
.bild-rahmen .scheibe{
  position:absolute;inset:0;opacity:0;
  /* Pfad relativ zu DIESER Datei, nicht zum Dokument. */
  background-image:url('../bilder/portraet.jpg');
  background-size:cover;background-position:50% 20%;
  filter:grayscale(1) contrast(1.28);
  will-change:transform,clip-path,opacity;
}
.bild-rahmen .scheibe.gruen{
  filter:grayscale(1) contrast(1.4) sepia(1) hue-rotate(35deg) saturate(5);
  mix-blend-mode:multiply;
}

.bild-rahmen .streifen{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,#0000 0 2px,#00000014 2px 3px);
}

.bild-text{flex:1 1 320px;min-width:260px}
.bild-text h2{
  margin:0;font-size:clamp(24px,3.4vw,44px);
  line-height:1.1;letter-spacing:-.02em;font-weight:600;
}
.bild-text p{
  margin:1em 0 0;font-size:clamp(14px,1.5vw,17px);
  line-height:1.62;color:var(--grau);max-width:50ch;
}

/* ================= Aussagen ================= */
.aussagen{padding-bottom:clamp(50px,10vh,120px)}

.aussage{
  display:flex;gap:clamp(16px,4vw,56px);align-items:flex-start;
  padding:clamp(22px,4vh,42px) 0;border-top:1px solid var(--linie);
  opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),
             transform .7s cubic-bezier(.2,.7,.2,1);
}
.aussage.da{opacity:1;transform:none}

.aussage .nr{
  flex:none;width:3.4em;padding-top:.7em;
  font-family:'Space Mono',monospace;font-size:11px;
  letter-spacing:.14em;color:var(--leise);
}
.aussage h2{
  margin:0;font-size:clamp(24px,3.8vw,50px);
  line-height:1.1;letter-spacing:-.02em;font-weight:600;
}
.aussage h2 mark{background:var(--saeure);color:var(--tinte);padding:0 .12em}
.aussage p{
  margin:.8em 0 0;font-size:clamp(14px,1.5vw,17px);
  line-height:1.62;color:var(--grau);max-width:56ch;
}

/* ================= Facetten, dunkel =================
   Bricht die weisse Strecke und nimmt den Eintritt am Ende wieder auf. */
.facetten{
  background:var(--tinte);color:var(--weiss);
  padding:clamp(50px,10vh,120px) var(--rand-seite);
}

.facetten-gitter{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--dunkel-linie);border:1px solid var(--dunkel-linie);
}
/* Feste Spaltenzahl, damit die Zellen aufgehen. Bei auto-fit bleiben Lücken,
   und die zeigen dann die Linienfarbe als Block. */
@media (max-width:860px){.facetten-gitter{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.facetten-gitter{grid-template-columns:1fr}}

.facette{
  background:var(--tinte);padding:clamp(18px,2.6vw,30px);min-height:150px;
  display:flex;flex-direction:column;justify-content:space-between;gap:14px;
}
.facette .jahr{
  font-family:'Space Mono',monospace;font-size:11px;
  letter-spacing:.16em;color:var(--saeure);
}
.facette .was{
  margin:0;font-size:clamp(17px,2vw,23px);
  font-weight:600;line-height:1.2;letter-spacing:-.01em;
}
.facette .dazu{margin:0;font-size:13px;line-height:1.5;color:var(--dunkel-text)}
.facette .zeichen{
  font-family:'Noto Sans JP',sans-serif;font-weight:200;
  font-size:26px;color:var(--dunkel-zeichen);line-height:1;
}

/* ================= Fuss ================= */
.fuss{
  padding:clamp(36px,6vh,70px) var(--rand-seite);
  background:var(--tinte);border-top:1px solid var(--dunkel-linie);
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;flex-wrap:wrap;
  font-family:'Space Mono',monospace;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--leise);
}
.fuss .zeichen{
  font-family:'Noto Sans JP',sans-serif;font-size:15px;
  letter-spacing:.3em;color:var(--saeure);
}

/* ================= Weniger Bewegung ================= */
@media (prefers-reduced-motion:reduce){
  .aussage{opacity:1;transform:none;transition:none}
  .glitch.zuckt::before,
  .glitch.zuckt::after{animation:none;opacity:0}
}