:root {
  --bg: #f4f1ec;
  --ink: #16130f;
  --muted: #6f6a62;
  --line: rgba(22, 19, 15, 0.14);
  --accent: #96794c;
  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-accent: "Fraunces", Georgia, serif;
  --font-text: "Instrument Sans", -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Ladescreen */

body.loading { overflow: hidden; }

/* Ersatzschrift für das Fenster, in dem Anton noch lädt. Ohne
   Angleichung ist die Zeile rund ein Drittel breiter und läuft am
   Handy über den Rand. */
@font-face {
  font-family: "Anton Ersatz";
  src: local("Arial Narrow"), local("Arial"), local("Helvetica Neue"), local("Roboto Condensed");
  size-adjust: 71%;
  ascent-override: 166%;
  descent-override: 46%;
  line-gap-override: 0%;
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}

/* Einzeilige Wortmarke, beide Wörter gleich groß. Anton misst dafür
   6,91em für die ganze Zeile. Bei 375px sind 12vw gleich 45px, macht
   311px Zeile plus 48px Rand, also 16px Luft. Ab 634px Fensterbreite
   greift die Obergrenze von 76px.
   Die ganze Marke blendet zusätzlich als Ganzes auf, darüber laufen
   die einzelnen Buchstaben. */
.loader-mark {
  font-family: "Anton", "Anton Ersatz", sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 12vw, 76px);
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  animation: lmAuf 900ms var(--ease) both paused;
}

@keyframes lmAuf {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Beide Wörter sind inline-block und sitzen dadurch von selbst auf
   einer gemeinsamen Grundlinie. Hier niemals overflow setzen: ein
   inline-block mit overflow nimmt seine Unterkante als Grundlinie
   und die Zeile verkantet. */
.lm-word {
  display: inline-block;
  --w: 0;
}

/* Barber steht gleich groß daneben, nur die Position im Takt ändert sich. */
.lm-word + .lm-word {
  --w: 6;
}

/* Sperrung wirkt auch hinter dem letzten R und schöbe die zentrierte
   Zeile sichtbar nach links. Am letzten Buchstaben also weglassen,
   dann deckt sich der Kasten mit dem, was man sieht. */
.lm-word + .lm-word span:last-child { letter-spacing: 0; }

/* Jeder Buchstabe steigt einzeln auf. 140ms Vorlauf, danach 100ms je
   Position. TIMCO belegt 0 bis 4, Position 5 bleibt frei als Pause an
   der Wortlücke, Barber belegt 6 bis 11. Der letzte Buchstabe ist bei
   1620ms fertig. */
.lm-word span {
  display: inline-block;
  opacity: 0;
  animation: lmLetter 380ms var(--ease) both paused;
  animation-delay: calc(140ms + (var(--w) + var(--n, 0)) * 100ms);
}

.lm-word span:nth-child(1) { --n: 0; }
.lm-word span:nth-child(2) { --n: 1; }
.lm-word span:nth-child(3) { --n: 2; }
.lm-word span:nth-child(4) { --n: 3; }
.lm-word span:nth-child(5) { --n: 4; }
.lm-word span:nth-child(6) { --n: 5; }

@keyframes lmLetter {
  from { opacity: 0; transform: translateY(0.16em); }
  to { opacity: 1; transform: translateY(0); }
}

/* Haarlinie unter der Wortmarke. Sie wächst von links mit und bleibt
   als Grundlinie stehen. Kein Blinken, das wäre der Terminal-Effekt. */
.loader-mark::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 0.18em;
  background: var(--ink);
  opacity: 0.26;
  transform: scaleX(0);
  transform-origin: left center;
  animation: lmRule 1480ms linear 140ms both paused;
}

@keyframes lmRule {
  to { transform: scaleX(1); }
}

/* Die Animation startet erst, wenn Anton steht. Sonst springt die
   Schriftgröße mitten in den Schriftzug hinein. site.js setzt die
   Klasse, spätestens nach 900ms. */
.loader.bereit .loader-mark,
.loader.bereit .lm-word span,
.loader.bereit .loader-mark::after {
  animation-play-state: running;
}

.loader.done {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s var(--ease), visibility 0s 0.7s;
}

@media (prefers-reduced-motion: reduce) {
  .loader-mark { animation: none; opacity: 1; }
  .lm-word span { animation: none; opacity: 1; transform: none; }
  .loader-mark::after { animation: none; transform: scaleX(1); }
}

/* Navigation */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 32px;
  transition: background 0.4s var(--ease), padding 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.nav.scrolled {
  background: rgba(244, 241, 236, 0.88);
  backdrop-filter: blur(14px);
  padding: 14px 32px;
  box-shadow: 0 1px 0 var(--line);
}

.nav-mark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.nav-links a {
  opacity: 0.75;
  transition: opacity 0.25s;
}

.nav-links a:hover { opacity: 1; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 42px;
  height: 42px;
  cursor: pointer;
  position: relative;
  z-index: 60;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  margin: 6px auto;
  transition: transform 0.4s var(--ease), opacity 0.3s;
}

.nav.open .nav-toggle span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav.open .nav-toggle span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

body.menu-open { overflow: hidden; }

/* Hero. Hintergrundbild über --hero-bg tauschen */

.hero {
  --hero-bg: url("../img/hero-2.webp");
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: left;
  background: var(--hero-bg) 30% center / cover no-repeat, var(--bg);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(244, 241, 236, 0) 34%, rgba(244, 241, 236, 0.82) 58%, rgba(244, 241, 236, 0.95) 80%);
}

.hero-inner {
  width: min(48%, 640px);
  padding-right: 6vw;
  position: relative;
  z-index: 1;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(72px, 11vw, 180px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  /* Der Kasten legt sich eng um TIMCO. Nur so kann Barber darunter
     exakt auf dessen rechter Kante sitzen. */
  width: fit-content;
  margin: 0 0 22px;
  animation: rise 1.1s var(--ease) 0.3s both;
}

/* Barber sitzt rechtsbündig unter dem Namen, gleiche Schrift, kleiner.
   Der Versatz nach rechts bricht die starre Achse auf. */
.hero-title span {
  display: block;
  text-align: right;
  font-size: 0.3em;
  letter-spacing: 0.28em;
  /* Der Buchstabenabstand hängt hinter dem letzten R und würde die
     Kante nach links ziehen. Der negative Rand holt das zurück. */
  margin-right: -0.11em;
  margin-top: 0.1em;
  color: var(--ink);
}

.hero-sub {
  font-size: clamp(15px, 1.6vw, 19px);
  /* Über dem hellen Bild war --muted zu blass, der Satz ging unter. */
  color: rgba(22, 19, 15, 0.78);
  font-weight: 500;
  animation: rise 1.1s var(--ease) 0.5s both;
}

.hero-scroll {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
}

.hero-scroll span {
  display: block;
  width: 1px;
  height: 56px;
  background: var(--ink);
  opacity: 0.35;
  animation: scrollline 2.4s var(--ease) infinite;
  transform-origin: top;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scrollline {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Hero-Animation startet erst nach dem Ladescreen */


body.loading .hero-title,
body.loading .hero-sub {
  animation-play-state: paused;
}

/* Sektionen */

.section { padding: 140px 0; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 22px;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4.2vw, 50px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.08;
  margin-bottom: 26px;
  max-width: 18em;
}

.statement {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4.8vw, 60px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.08;
  margin-bottom: 30px;
}

.body-text {
  color: var(--muted);
  max-width: 34em;
  margin-bottom: 18px;
}

/* Timcos Statement */

.manifest-text {
  color: rgba(22, 19, 15, 0.82);
  font-size: 17px;
  line-height: 1.7;
  max-width: 32em;
  margin-bottom: 20px;
}

.signature {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
  color: var(--ink);
}

/* Zitatstrich vor dem Namen, wie eine Unterschrift. */
.signature::before {
  content: "";
  width: 42px;
  height: 2px;
  background: var(--ink);
  flex-shrink: 0;
}

.signature em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: 30px;
  letter-spacing: 0.04em;
}

/* Split-Layouts */

.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: center;
}

.split-rev { grid-template-columns: 0.95fr 1.05fr; }

/* Zertifikate: seit die Station im Fließtext steht, ist die Textspalte
   kurz. Ein Bild in voller Spaltenbreite würde die Sektion kippen,
   also wird die Bildspalte schmaler und der Text bekommt Platz. */
#zertifikate .split {
  grid-template-columns: 1.3fr 0.7fr;
  gap: 56px;
}

.split-media img {
  width: 100%;
  /* Ohne das erzwingt ein height-Attribut am Bild seine Rohhöhe
     und das Bild wird gestaucht. */
  height: auto;
  display: block;
  border-radius: 4px;
}

.split-media figcaption {
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
}

/* Leistungen */

.service-list { list-style: none; margin-top: 30px; }

.service {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: baseline;
  padding: 30px 0;
  border-top: 1px solid var(--line);
  transition: padding-left 0.35s var(--ease);
}

.service:last-child { border-bottom: 1px solid var(--line); }

.service:hover { padding-left: 14px; }

.service h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 21px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.service p {
  color: var(--muted);
  font-size: 15px;
  margin-top: 4px;
  max-width: 32em;
}

.service-meta {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* Die Station steht im Fließtext statt in einer eigenen Liste.
   Etwas dunkler und kräftiger, damit sie sich heraushebt, ohne dass
   der Absatz auseinanderfällt. */
.body-text strong {
  font-weight: 600;
  color: var(--ink);
}

/* Buttons */

.section-cta { margin-top: 44px; }

.button {
  display: inline-block;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 15px 34px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}

.button:hover { transform: translateY(-2px); }

.button-ghost {
  background: transparent;
  color: var(--ink);
}

.button-ghost:hover {
  background: var(--ink);
  color: var(--bg);
}

.cta-note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
}

/* Galerie */

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 40px 24px 0;
  max-width: 1400px;
  margin: 0 auto;
}

.gallery figure {
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 4 / 5;
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}

.gallery figure:hover img { transform: scale(1.045); }

/* Wissen */

.academy { background: #ece8e0; }

.lessons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  margin-top: 44px;
}

.lesson {
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.lesson h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.lesson p {
  color: var(--muted);
  font-size: 15px;
  max-width: 36em;
}

/* Kontakt */

.contact { padding-bottom: 110px; }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 50px;
}

.contact-grid h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
}

.contact-grid a { border-bottom: 1px solid var(--line); }

.contact-grid a:hover { border-color: var(--ink); }

/* Footer mit Stern */

.footer {
  border-top: 1px solid var(--line);
  padding: 46px 0 40px;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

.footer-small {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.06em;
}

.footer-legal { text-align: right; }

.footer-legal a:hover { color: var(--ink); }

.footer-star {
  justify-self: center;
  color: var(--ink);
  opacity: 0.3;
  transition: opacity 0.5s var(--ease), transform 0.9s var(--ease);
}

.footer-star:hover {
  opacity: 1;
  transform: rotate(90deg);
}

/* Rechtsseiten */

.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 170px 24px 110px;
}

.legal h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4.5vw, 48px);
  margin-bottom: 40px;
}

.legal h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  margin: 38px 0 10px;
}

.legal p {
  color: var(--muted);
  margin-bottom: 12px;
}

.legal a { border-bottom: 1px solid var(--line); }
.legal a:hover { border-color: var(--ink); }

/* Scroll-Reveals */

.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-title, .hero-sub { animation: none; }
  .hero-scroll span { animation: none; }
}

/* Responsiv */

@media (max-width: 900px) {
  .section { padding: 90px 0; }
  /* Am Handy steht der Text unter der Zeichnung statt darüber. Ein flächiger
     Schleier über dem ganzen Bild macht es blass, ein Verlauf von unten
     lässt die Zeichnung oben klar und trägt den Text trotzdem. */
  .hero {
    justify-content: center;
    align-items: flex-end;
    text-align: center;
    background-position: 42% top;
  }
  .hero::before {
    background: linear-gradient(
      to bottom,
      rgba(244, 241, 236, 0) 30%,
      rgba(244, 241, 236, 0.55) 46%,
      rgba(244, 241, 236, 0.93) 58%,
      rgba(244, 241, 236, 0.97) 100%);
  }
  .hero-inner {
    width: auto;
    /* Genug Luft, damit der Text nicht in den Scrollhinweis läuft. */
    padding: 0 24px 132px;
  }
  /* fit-content würde den Titel sonst nach links kleben. */
  .hero-title { margin-left: auto; margin-right: auto; }
  .split, .split-rev {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .split-rev .split-media { order: 2; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .lessons { grid-template-columns: 1fr; gap: 0; }
  .lesson { padding: 22px 0; }
  .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .nav { padding: 18px 20px; }
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed;
    inset: 0;
    background: var(--bg);
    flex-direction: column;
    justify-content: center;
    gap: 26px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s var(--ease), visibility 0s 0.45s;
    z-index: 50;
  }
  .nav.open .nav-links {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.45s var(--ease);
  }
  .nav-links a {
    font-family: var(--font-display);
    font-size: 27px;
    font-weight: 400;
    letter-spacing: 0.02em;
    opacity: 1;
  }
  .service {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .footer-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .footer-legal { text-align: center; }
}

@media (max-width: 620px) {
  .wrap { padding: 0 20px; }
  .section { padding: 72px 0; }
  .hero-title { font-size: clamp(58px, 20vw, 96px); letter-spacing: 0.08em; }
  /* TIMCO hat hier mehr Buchstabenabstand, also muss der Ausgleich
     hinter Barber kleiner ausfallen, sonst ragt es rechts raus. */
  .hero-title span { margin-right: -0.013em; }

  .hero-sub { font-size: 15px; max-width: 22em; margin: 0 auto; }
  .statement { font-size: clamp(28px, 8.5vw, 40px); }
  .section-title { font-size: clamp(25px, 7.5vw, 36px); }
  .manifest-text { font-size: 16px; }
  .signature { gap: 12px; margin-top: 28px; }
  .signature em { font-size: 25px; }
  .signature::before { width: 32px; }
  .gallery { gap: 8px; padding: 30px 20px 0; }
  .split, .split-rev { gap: 34px; }
  .service { padding: 22px 0; }
  .service h3 { font-size: 19px; }
  .lessons { margin-top: 30px; }
  .contact-grid { margin-top: 34px; }
  .nav-links a { font-size: 24px; }
  .footer { padding: 36px 0 32px; }
}

/* iPhone-Notch und Home-Indicator */
@supports (padding: env(safe-area-inset-left)) {
  .nav { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
  .footer { padding-bottom: max(32px, env(safe-area-inset-bottom)); }
}