/* Mixed Captures - Design-System
   Ein Akzent (Blaze Orange), sonst Schwarz/Weiss: die Fotos bringen die Farbe.
   Bewusst KEINE Web-Fonts (kein Google-Fonts-Request, saubere CSP, schneller
   erster Frame) - System-Stack mit engem Tracking traegt den Sport-Look. */

:root {
  --bg:        #0a0a0b;
  --bg-2:      #121215;
  --bg-3:      #191a1e;
  --fg:        #f5f5f6;
  --muted:     #a0a0a8;
  --muted-2:   #6d6d76;
  --line:      rgba(255, 255, 255, 0.10);
  --line-soft: rgba(255, 255, 255, 0.06);
  --accent:    #ff4a1c;
  --accent-dim: rgba(255, 74, 28, 0.14);

  --maxw: 1180px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --radius: 4px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Layout-Bausteine ---------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

section { padding-block: clamp(4rem, 9vw, 7.5rem); }

.section-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 1.25rem;
}

.section-label::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--accent);
  flex: none;
}

h1, h2, h3 {
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  font-weight: 700;
}

h2 {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  max-width: 22ch;
}

h3 { font-size: 1.05rem; letter-spacing: -0.01em; }

p { margin: 0 0 1rem; }

.lead {
  font-size: clamp(1.02rem, 1.9vw, 1.18rem);
  color: var(--muted);
  max-width: 62ch;
  margin-top: 1.5rem;
}

/* ---------- Kopfzeile ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(10, 10, 11, 0.72);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.site-header[data-scrolled="true"] {
  border-bottom-color: var(--line);
  background: rgba(10, 10, 11, 0.92);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 4.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-size: 1.02rem;
}

/* Die Klammer-Marke traegt die Wiedererkennung, der Schriftzug den Namen -
   das komplette Logo mit Untertitel waere in einer Kopfzeile von 4,25rem
   unlesbar klein. Unten in der Fusszeile steht es dafuer vollstaendig. */
.brand-mark {
  height: 1.65rem;
  width: auto;
}

.brand-wort em {
  font-style: normal;
  color: var(--accent);
}

@media (max-width: 420px) {
  .brand-wort { display: none; }
  .brand-mark { height: 1.9rem; }
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.nav a {
  text-decoration: none;
  font-size: 0.875rem;
  color: var(--muted);
  position: relative;
  padding-block: 0.35rem;
  transition: color 0.2s var(--ease);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.nav a:hover { color: var(--fg); }
.nav a:hover::after { transform: scaleX(1); }


.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  color: var(--fg);
  border-radius: var(--radius);
  padding: 0.4rem 0.6rem;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute;
    top: 4.25rem;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg-2);
    border-block: 1px solid var(--line);
    padding: 0.5rem var(--pad) 1rem;
  }
  .nav[hidden] { display: none; }
  .nav a { padding-block: 0.7rem; font-size: 0.95rem; }
  .nav a::after { display: none; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--ease), background 0.2s var(--ease),
              border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--accent);
  color: #120602;
}

.btn-primary:hover { background: #ff6136; }

.btn-ghost {
  border-color: var(--line);
  color: var(--fg);
}

.btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.04);
}

.btn .arrow { transition: transform 0.25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: min(88vh, 780px);
  display: flex;
  align-items: flex-end;
  padding-block: clamp(5rem, 12vw, 8rem) clamp(3rem, 7vw, 5rem);
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Der Hero-Streifen ist deutlich breiter als ein Kamerabild hoch ist,
     cover schneidet also oben und unten ab. Mit dem Schwerpunkt bei 30 %
     faellt der Beschnitt nach unten (Rasen) statt nach oben (Koepfe). */
  object-position: 50% 30%;
  opacity: 0.62;
  filter: contrast(1.03) saturate(1.05);
  transform: scale(1.02);
  animation: heroDrift 26s var(--ease) infinite alternate;
}

/* Sehr zurueckhaltend: jede Zehntelstufe Zoom schneidet zusaetzlich Bild weg. */
@keyframes heroDrift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.06) translate3d(0, -0.8%, 0); }
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Zwei Verlaeufe mit getrennten Aufgaben: der waagerechte legt einen
     Schleier unter die Schrift links, der senkrechte blendet nach unten in
     den Seitenhintergrund. So bleibt die rechte Bildhaelfte fast frei -
     dort steht kein Text. */
  background:
    linear-gradient(to right, rgba(10, 10, 11, 0.92) 0%, rgba(10, 10, 11, 0.65) 38%, rgba(10, 10, 11, 0.15) 75%, rgba(10, 10, 11, 0.05) 100%),
    linear-gradient(to top, var(--bg) 2%, rgba(10, 10, 11, 0.55) 30%, rgba(10, 10, 11, 0.1) 100%);
}

.hero .wrap { position: relative; z-index: 1; }

.hero h1 {
  font-size: clamp(2.6rem, 8.5vw, 5.75rem);
  letter-spacing: -0.035em;
  max-width: 16ch;
}

.hero h1 em {
  font-style: normal;
  color: var(--accent);
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.6rem;
}

.hero-kicker .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-dim);
  animation: pulse 2.8s var(--ease) infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 74, 28, 0.45); }
  70%  { box-shadow: 0 0 0 12px rgba(255, 74, 28, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 74, 28, 0); }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

/* ---------- Zahlen-Leiste ---------- */

.facts {
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-2);
}

.facts .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  padding: 0;
}

.fact {
  background: var(--bg-2);
  padding: 1.75rem var(--pad);
}

.fact dt {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 0.4rem;
}

.fact dd {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ---------- Galerie ---------- */

/* Spalten statt Raster.

   Die Bilder kommen in gemischten Seitenverhaeltnissen aus der Kamera
   (5:4 quer, 4:5 hoch). Ein Raster mit fester Kachelhoehe muesste sie
   beschneiden - bei Sportfotos genau das Falsche, da haengt der Ball
   schnell ausserhalb des Bildes. In Spalten behaelt jedes Foto sein
   eigenes Verhaeltnis, nichts wird abgeschnitten, und es entstehen keine
   Luecken, weil sich die Spalten unabhaengig voneinander fuellen.

   Preis dafuer: die Lesereihenfolge laeuft spaltenweise nach unten statt
   zeilenweise nach rechts. Fuer eine Bildergalerie ohne Reihenfolge ist
   das egal. */
.gallery {
  columns: 3 clamp(200px, 20vw, 320px);
  column-gap: 0.85rem;
  margin-top: 2.5rem;
}

.shot {
  display: block;
  width: 100%;
  margin: 0 0 0.85rem;
  padding: 0;
  border: 0;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  position: relative;
  background: var(--bg-3);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  color: inherit;
  font: inherit;
  text-align: left;
}

.shot img {
  width: 100%;
  height: auto;
  transition: transform 0.6s var(--ease), filter 0.4s var(--ease);
}

.shot:hover img { transform: scale(1.045); filter: brightness(1.06); }

.shot figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.5rem 1rem 0.9rem;
  font-size: 0.8rem;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), transparent);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.shot:hover figcaption,
.shot:focus-visible figcaption { opacity: 1; transform: none; }

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 6, 7, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade 0.22s var(--ease);
}

.lightbox[hidden] { display: none; }

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

.lightbox img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: var(--radius);
}

.lightbox-caption {
  margin-top: 0.9rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

.lightbox button {
  position: absolute;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  color: var(--fg);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s var(--ease);
}

.lightbox button:hover { background: rgba(255, 255, 255, 0.14); }

.lb-close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lb-prev  { left: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb-next  { right: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }

/* ---------- Leistungen: Text links, Liste rechts ---------- */

.split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: start;
  margin-top: 2rem;
}

@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; gap: 2.25rem; }
}

.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-soft);
}

.ticks li {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 0.95rem;
}

.ticks li::before {
  content: "✓";
  color: var(--accent);
  font-size: 0.85rem;
}

/* ---------- Ablauf ---------- */

.steps {
  counter-reset: step;
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line-soft);
  align-items: start;
}

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

.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted-2);
  padding-top: 0.2rem;
}

.steps p { color: var(--muted); font-size: 0.92rem; margin: 0.35rem 0 0; }

/* ---------- Hinweis-Box ---------- */

.note {
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg-2);
  padding: 1.25rem 1.35rem;
  margin-top: 2rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.note strong { color: var(--fg); }

/* ---------- Preis-Block ---------- */

.price {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(90% 120% at 100% 0%, var(--accent-dim), transparent 55%),
    var(--bg-2);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  margin-top: 2.5rem;
}

.price .tag {
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
}

.price .tag small {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.price ul {
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--muted);
}

.price li { display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.5rem; }
.price li::before { content: "\2713"; color: var(--accent); }

/* ---------- Kontakt ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
}

.contact-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-decoration: none;
  display: block;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.contact-card:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background: var(--bg-2);
}

.contact-card .k {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
  display: block;
  margin-bottom: 0.5rem;
}

.contact-card .v {
  font-size: 1rem;
  font-weight: 600;
  word-break: break-word;
}

/* ---------- Fusszeile ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 2.5rem;
  color: var(--muted-2);
  font-size: 0.85rem;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  align-items: center;
  justify-content: space-between;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.footer-brand img {
  /* Gross genug, dass "FUSSBALLFOTOGRAFIE" unter dem Schriftzug noch
     lesbar ist - darunter wird die Zeile zu einem grauen Strich. */
  height: 5.25rem;
  width: auto;
  opacity: 0.9;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.site-footer a { text-decoration: none; transition: color 0.2s var(--ease); }
.site-footer a:hover { color: var(--fg); }

/* ---------- Rechtstexte ---------- */

.legal { padding-block: clamp(3rem, 7vw, 5rem); }

.legal .wrap { max-width: 760px; }

.legal h1 { font-size: clamp(2rem, 5vw, 2.75rem); margin-bottom: 0.75rem; }

.legal h2 {
  font-size: 1.3rem;
  margin-top: 2.75rem;
  margin-bottom: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  max-width: none;
}

.legal h3 { margin-top: 1.75rem; margin-bottom: 0.4rem; }

.legal p, .legal li { color: var(--muted); }

.legal ul { padding-left: 1.15rem; }
.legal li { margin-bottom: 0.4rem; }

.legal address {
  font-style: normal;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  padding: 1.15rem 1.35rem;
  color: var(--fg);
  display: inline-block;
}

.legal a { color: var(--fg); text-decoration-color: var(--accent); }

.stand {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 2rem;
}

/* ---------- Einblenden beim Scrollen ---------- */

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

.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Kleine Helfer ---------- */

.band {
  background: var(--bg-2);
  border-block: 1px solid var(--line-soft);
}

.band.band-top { border-bottom: 0; }

.mt { margin-top: 2rem; }

.empty { color: var(--muted); }

.empty code {
  color: var(--fg);
  background: var(--bg-3);
  padding: 0.1em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
}

/* ---------- Galerie-Uebersicht (galerie.mixedcaptures.de) ---------- */

.galerien {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--line-soft);
}

.galerien li { border-bottom: 1px solid var(--line-soft); }

.galerien a {
  display: grid;
  grid-template-columns: 13rem 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: 1.3rem 0.5rem 1.3rem 0;
  text-decoration: none;
  transition: background 0.2s var(--ease), padding 0.2s var(--ease);
}

.galerien a:hover {
  background: rgba(255, 255, 255, 0.03);
  padding-left: 0.75rem;
}

.g-datum {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.g-titel { font-weight: 700; letter-spacing: -0.01em; }

.g-zahl { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }

@media (max-width: 680px) {
  .galerien a { grid-template-columns: 1fr; gap: 0.3rem; }
  .g-zahl { justify-self: start; }
}