/* ============================================================
   ABOUT ME · neu
   Form + Foto + schwarzer Balken (Illustrator-Layout 1866 × 987)
   Alles wird über --u skaliert: 1 Illustrator-Pixel = --u.
   Anton: SIL Open Font License (Quelle: @fontsource/anton)
   ============================================================ */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/web/anton-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

.about-neu{
  --an-font-body:'Inter','Helvetica Neue',sans-serif;
  --an-font-head:'Anton','Impact',sans-serif;
  position:relative;
  background:#fff;
  color:#000;
  display:flex;
  align-items:center;
  overflow:hidden;
  /* Abstand oben/unten: füllt den Bildschirm wie vorher, wird bei hohen/schmalen Fenstern aber begrenzt */
  padding-block:clamp(56px, calc((100vh - 52.9vw) / 2), 150px);
  /* Klare Trennung Hero → About: feine Linie + weicher Schatten nach oben (wie bei Services) */
  border-top:1px solid rgba(20,20,18,0.06);
  box-shadow:0 -26px 50px -30px rgba(20,20,18,0.22);
}
.an-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Bühne: exakt das Seitenverhältnis der Zeichenfläche (ohne Navigationsleiste) */
.an-stage{
  --u:calc(100cqw / 1866.15);
  position:relative;
  width:100%;
  aspect-ratio:1866.15 / 987.08;
  container-type:inline-size;
  flex:none;
}
/* Alles, was von rechts hereinfährt: Überschrift + Form + Foto + Balken + Sätze */
.an-rig{position:absolute;inset:0;will-change:transform;}
.an-svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block;overflow:visible;}
.an-svg .an-ttl{font-family:var(--an-font-head);font-size:132px;fill:#000;text-rendering:geometricPrecision;}

/* ── Sätze im schwarzen Balken ───────────────────────────── */
.an-deck{
  position:absolute;
  left:calc(1010 * var(--u));
  top:calc(375 * var(--u) - 89.45 * var(--u));
  width:calc(800 * var(--u));
  height:calc(370 * var(--u));
  cursor:grab;
  touch-action:pan-y;
  user-select:none;-webkit-user-select:none;
}
.an-deck:active{cursor:grabbing;}
.an-chunk{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;
  color:#fff;
  text-transform:uppercase;
  font-family:var(--an-font-body);
}
.an-chunk:not(:first-child){visibility:hidden;}   /* ohne JS: nur der erste Satz sichtbar */
.an-chunk br{display:none;}      /* jede Zeile ist ein eigener Block */
.an-chunk .w{display:block;}
.an-chunk .w-sm{
  font-size:max(12px, calc(24 * var(--u)));
  line-height:1.2;
  letter-spacing:.01em;
  font-weight:400;
}
.an-chunk .w-xl{
  font-family:var(--an-font-head);
  font-weight:400;
  font-size:max(32px, calc(82 * var(--u)));
  line-height:1;
  letter-spacing:.01em;
  margin:.12em 0 .14em;
}

/* ── Steuerung (Pfeile + Zähler) ─────────────────────────── */
.an-controls{
  position:absolute;
  right:calc(66 * var(--u));
  /* Die Mitte der Steuerung sitzt immer 40 Einheiten über der Unterkante des Balkens.
     Der Abstand ist an --u gekoppelt und skaliert deshalb mit dem Balken mit. */
  bottom:calc(233.69 * var(--u) + 40 * var(--u));
  transform:translateY(50%);
  display:flex;align-items:center;gap:calc(10 * var(--u));
  color:#fff;
}
.an-arrow{
  width:max(28px, calc(34 * var(--u)));height:max(28px, calc(34 * var(--u)));   /* kleiner, dünner Kreis */
  border:1px solid rgba(255,255,255,.45);border-radius:50%;background:transparent;
  color:rgba(255,255,255,.8);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;
  transition:color .25s ease,border-color .25s ease,background-color .25s ease;
}
.an-arrow svg{width:max(11px, calc(15 * var(--u)));height:auto;aspect-ratio:1;display:block;transition:transform .25s ease;}
.an-arrow svg path{stroke-width:1.8;}
.an-arrow:hover,.an-arrow:focus-visible{color:#fff;border-color:#fff;background:rgba(255,255,255,.08);}
#an-prev:hover svg{transform:translateX(-2px);}
#an-next:hover svg{transform:translateX(2px);}
.an-arrow:focus-visible{outline:1px solid rgba(255,255,255,.7);outline-offset:1px;}
.an-counter{
  font-family:var(--an-font-body);
  font-size:max(11px, calc(15 * var(--u)));
  letter-spacing:.08em;
  color:rgba(255,255,255,.8);
  min-width:5.2em;text-align:right;margin-left:calc(12 * var(--u));
}

/* ── Intro-Text unten links (bleibt stehen) ──────────────── */
.an-intro{
  position:absolute;
  /* unabhängig vom Balken: immer unten links in der Ecke der Zeichenfläche (wie im Illustrator-Entwurf) */
  left:calc(64.18 * var(--u));
  top:calc(982 * var(--u) - 89.45 * var(--u));
  margin:0;
  font-family:var(--an-font-body);
  font-size:max(11px, calc(17 * var(--u)));
  line-height:1.4;
  letter-spacing:.02em;
  font-weight:400;
  text-transform:uppercase;
  color:#6b6b6b;
}
.an-intro .w,.an-intro .w-xl,.an-intro .w-sm{display:inline;font:inherit;margin:0;letter-spacing:inherit;}
/* Wichtigste Punkte im Intro: fett und schwarz */
.an-intro .an-em{font-weight:700;color:#000;}

/* Schmale Fenster / Tablet: Der leere Streifen links der Überschrift wird abgeschnitten,
   die Komposition füllt dadurch die Breite besser (Balken endet weiter am rechten Rand). */
@media (max-width:1100px){
  .about-neu{padding-block:clamp(40px, calc((100vh - 61.3vw) / 2), 110px);}
  .an-stage{
    width:calc(100% * 1866.15 / 1611.15);
    margin-left:calc(-100% * 255 / 1611.15);
  }
  .an-intro{left:calc(305 * var(--u));}   /* der leere Streifen links ist abgeschnitten: Text beginnt am sichtbaren linken Rand */
}

@media (prefers-reduced-motion: reduce){
  .an-rig{will-change:auto;}
}

/* ============================================================
   HANDY (bis 640 px) – eigener Entwurf (Illustrator, 390 x 900):
   ABOUT ME waagerecht, Foto in der Logo-Form, die Sätze unten im schwarzen Balken,
   Intro-Text darunter. Alles skaliert über --u (1 Einheit = 1 px bei 390 px Breite).
   ============================================================ */
.an-svg-m{display:none;}
.an-svg-m .an-ttl-m{font-family:var(--an-font-head);font-size:89.6px;letter-spacing:3px;fill:#000;text-rendering:geometricPrecision;}   /* Schriftzug füllt 20 → 370 px: gleiche Ränder links und rechts, rechts bündig mit dem Burger-Menü */

@media (max-width:640px){
  .about-neu{
    display:flex; align-items:center;
    min-height:100svh;
    padding-block:72px 40px;
  }
  .an-stage{
    --u:calc(100cqw / 390);
    width:100%; margin-left:0;
    aspect-ratio:390 / 510;           /* Ausschnitt y 190 … 700 aus dem Entwurf */
  }
  .an-svg{display:none;}
  .an-svg-m{display:block;position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;}

  /* Sätze: unten im Balken, über dem abgedunkelten Foto */
  .an-deck{
    left:calc(50 * var(--u)); top:calc(458 * var(--u) - 190 * var(--u));
    width:calc(308 * var(--u)); height:calc(128 * var(--u));   /* unten verankert: lange Sätze wachsen nach oben, die Unterkante bleibt */
  }
  .an-chunk{justify-content:flex-end;}
  .an-chunk .w-sm{font-size:max(10.5px, calc(11.5 * var(--u)));line-height:1.3;letter-spacing:.02em;}
  .an-chunk .w-xl{font-size:max(24px, calc(29 * var(--u)));line-height:1;margin:.12em 0 .14em;}

  /* Steuerung: nur der Zähler; die Pfeile bleiben für Tastatur/Screenreader erreichbar, aber unsichtbar */
  .an-controls{
    right:calc(20 * var(--u)); left:auto; bottom:auto;   /* rechtsbündig mit dem Burger-Menü */
    top:calc(600 * var(--u) - 190 * var(--u));
    transform:translateY(-50%);
  }
  .an-arrow{position:absolute;width:1px;height:1px;padding:0;border:0;overflow:hidden;opacity:0;clip:rect(0,0,0,0);}
  .an-counter{font-size:max(9.5px, calc(10.5 * var(--u)));min-width:0;margin:0;text-align:right;color:rgba(255,255,255,.6);}

  /* Intro-Text unter dem Balken: zwei lange Zeilen statt drei kurze */
  .an-intro br{display:none;}
  .an-intro br + .w::before{content:' ';}   /* englische Fassung: Leerzeichen statt Zeilenumbruch */

  .an-intro{
    left:calc(20 * var(--u)); right:calc(20 * var(--u)); text-align:center;
    top:calc(660 * var(--u) - 190 * var(--u));      /* mehr Luft zum Balken */
    font-size:max(8.4px, calc(9.5 * var(--u)));
    letter-spacing:.01em;
    line-height:1.35;
    color:#666;
  }
}