/* Kern-Stylesheet: Layout und Komponenten. Alle Farben, Schriften und Radien kommen als Tokens aus der Theme-Datei
   der Webseite (static/css/themes/<name>.css, in den Templates vor diesem Stylesheet eingebunden). */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.65;
}

h1, h2, h3, h4, .nav-logo, .portfolio-card, .teaser-card {
  font-family: var(--font-heading);
  font-weight: 500;
}

a { color: var(--accent); text-decoration: none; }
a:hover, a:focus-visible { color: var(--accent-hover); text-decoration: underline; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Sticky: Header bleibt beim Scrollen sichtbar, bewusst hell und ruhig,
   damit er nicht mit den Fotografien konkurriert. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg-elevated);
  /* Editorial: flache Kopfzeile, nur eine feine Linie zum Inhalt. */
  border-bottom: 1px solid var(--hairline);
}

.nav {
  width: 92%;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0;
}

.nav-logo:hover { text-decoration: none; }
/* Bildlogo statt Schriftzug (PNG mit transparentem Hintergrund). */
.nav-logo { display: block; line-height: 0; }
.nav-logo-img {
  display: block;
  height: 4rem;
  width: auto;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--text-muted);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 1.25rem;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
}

.nav-list {
  display: flex;
  gap: 2.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list > li > a { font-size: 0.75rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-muted); padding: 0.25rem 0; border-bottom: 2px solid transparent; border-radius: 2px; }
.nav-list > li > a:hover { color: var(--accent); text-decoration: none; }
/* Aktive Seite: dezente Petrol-Akzentuierung (aria-current setzt nav.js). */
.nav-list a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

.nav-dropdown { position: relative; }
.nav-dropdown-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  min-width: 140px;
  border-radius: var(--radius);
  z-index: 10;
}
.nav-dropdown:hover .nav-dropdown-list,
.nav-dropdown.open .nav-dropdown-list { display: block; }
.nav-dropdown-list li a { display: block; padding: 0.4rem 0.9rem; color: var(--text-muted); }
.nav-dropdown-list li a:hover { color: var(--accent); background: var(--hover-tint); text-decoration: none; }

.site-main {
  width: 92%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3rem 0 5rem;
  min-height: 60vh;
}

.page h1 {
  font-size: clamp(2.2rem, 4.4vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 1.5rem;
  color: var(--text);
}
/* Kleiner Schnörkel (Welle - Punkt - Welle) über der Seitenüberschrift.
   Als Maske gezeichnet, damit die Farbe aus dem Token kommt. */
.page h1::before {
  content: "";
  display: block;
  width: 7.5rem;
  height: 1rem;
  background: var(--accent);
  -webkit-mask: var(--mask-ornament) no-repeat left center / contain;
  mask: var(--mask-ornament) no-repeat left center / contain;
  margin-bottom: 1.2rem;
}
.page h2 { font-size: 1.7rem; font-weight: 500; line-height: 1.2; margin-top: 2.5rem; color: var(--text); }
.page p { color: var(--text-body); max-width: 70ch; line-height: 1.7; }

.page-legal p { font-size: 0.95rem; }

/* Leistungs-/Aufzählungslisten auf Textseiten: feine Zeilen statt Häkchen. */
.page .feature-list {
  list-style: none;
  margin: 1.25rem 0 1.75rem;
  padding: 0;
  max-width: 70ch;
  border-bottom: 1px solid var(--hairline);
}
.page .feature-list li {
  padding: 0.7rem 0;
  border-top: 1px solid var(--hairline);
  line-height: 1.55;
  color: var(--text-body);
}

/* FAQ: Frage in der Überschriftenschrift (Token), Einträge durch Haarlinien getrennt. */
.page .faq-list {
  margin: 1.25rem 0 1.75rem;
  padding: 0;
  max-width: 70ch;
}
.page .faq-list dt {
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--text);
}
.page .faq-list dd {
  margin: 0.3rem 0 0;
  padding-bottom: 1.1rem;
  color: var(--text-body);
}

/* Lange Textseiten (Dein Shooting, Über mich, Rechtstexte): Abschnitte durch
   eine feine Linie gliedern; direkt unter der Seitenüberschrift entfällt sie. */
.page-booking h2, .page-about h2, .page-legal h2, .page-text h2 {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}
.page-booking h1 + h2, .page-about h1 + h2, .page-legal h1 + h2, .page-text h1 + h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Altershinweis (Akt/Dessous): mittig zentriert, Akzentlinie oben statt links,
   damit die Zentrierung symmetrisch wirkt. */
.disclaimer {
  max-width: 52rem;
  margin: 1.5rem auto;
  background: var(--bg-elevated);
  border-top: 2px solid var(--accent);
  padding: 1rem 1.5rem;
  border-radius: var(--radius);
  text-align: center;
  color: var(--text);
  font-weight: bold;
}

/* Button immer mittig zum vorausgehenden Text statt linksbündig - die
   Textspalte selbst bleibt wie gehabt (links in der 70ch-Spalte, auf
   Pakete & Preise als eigener zentrierter Block, siehe .page-pricing
   .cta-row unten). */
.cta-row { margin-top: 2rem; text-align: center; }

/* Nur für Screenreader sichtbar (Überschriften ohne visuelle Entsprechung). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent);
  padding: 0.7rem 1.9rem;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.btn:hover, .btn:focus-visible { text-decoration: none; background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
/* Gesperrter Button (z. B. Kontaktformular, bis die Sicherheitsfrage stimmt). */
.btn:disabled,
.btn:disabled:hover {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--accent);
  border-color: var(--accent);
}
/* Sekundärer Button: Rahmen und Text in Petrol, dezente Hover-Tönung. */
.btn-secondary { background: transparent; color: var(--accent); }
.btn-secondary:hover, .btn-secondary:focus-visible { background: var(--hover-tint); color: var(--accent-hover); border-color: var(--accent-hover); }

.overview-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: center;
}
@media (max-width: 900px) {
  .overview-grid { grid-template-columns: 1fr; }
}

/* Shooting-Detailseiten: Intro-Text nutzt die volle Breite statt der
   70ch-Lesespalte (die bleibt für Übersichts-/Rechtstexte sinnvoll). */
.page-shooting p { max-width: none; }

/* "Über mich": nur die Bild/Text-Kopfzeile (.bio-text, eigene 60ch-Regel in
   home.css, lädt nach app.css und gewinnt daher bei gleicher Spezifität)
   bleibt schmal, der restliche Lebenslauf-Text darunter nutzt die volle
   Breite statt der 70ch-Spalte. */
.page-about p { max-width: none; }

/* "Dein Shooting": Ablauftext nutzt ebenfalls die volle Breite statt der
   70ch-Spalte (Nutzerwunsch, 2026-10-28 - Absätze sind teils kurz, daher erst
   ausprobieren). Rückbau: Regel entfernen. */
.page-booking p { max-width: none; }

/* Kachelreihen mittig: Flex mit Umbruch statt Grid, damit auch eine
   unvollständige letzte Reihe zentriert steht (im Grid bliebe sie linksbündig). */
.teaser-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-top: 1.5rem;
}
.teaser-grid > .teaser-card { flex: 1 1 240px; max-width: 320px; }
.portfolio-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem;
  max-width: 1100px;
  margin: 2.5rem auto 0;
}
.portfolio-cards > .portfolio-card { flex: 1 1 260px; max-width: 340px; }
/* Portfolio-/Teaser-Kacheln: bildzentriert ohne Kasten. Das Foto steht für
   sich, darunter nur eine ruhige Bildlegende (Serife, mittig). */
.portfolio-card, .teaser-card {
  display: block;
  text-align: center;
  color: var(--text);
  font-size: 1.35rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.2;
}
.portfolio-card img, .teaser-card img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
  margin-bottom: 1rem;
  /* Torbogen: oben weit gerundet, unten sanft - wie ein Passepartout. */
  border-radius: 50% 50% var(--radius) var(--radius) / 24% 24% var(--radius) var(--radius);
  box-shadow: 0 4px 18px var(--shadow);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
/* Freigestelltes Bild (Ab 18): hat seinen eigenen Torbogen mit transparentem
   Rand. Der Schatten folgt deshalb der Bildform (drop-shadow) statt dem
   rechteckigen CSS-Rahmen (box-shadow). */
.portfolio-card img.cutout {
  /* height: auto, sonst überstimmt das height-Attribut das Seitenverhältnis. */
  height: auto;
  /* oben bestimmt die Transparenz die Form, unten wie bei den anderen Kacheln. */
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: none;
  filter: drop-shadow(0 4px 12px var(--shadow));
}
.portfolio-card:hover img.cutout {
  box-shadow: none;
  filter: drop-shadow(0 8px 18px var(--shadow));
}
.portfolio-card:hover, .teaser-card:hover { color: var(--accent); text-decoration: none; }
.portfolio-card:hover img, .teaser-card:hover img { transform: translateY(-4px); box-shadow: 0 8px 24px var(--shadow); }

/* Footer: flach mit feiner Linie darüber (Wellenkante entfällt, Editorial-Stil). */
.site-footer {
  margin-top: 3rem;
  background: var(--bg-alt);
  border-top: 1px solid var(--hairline);
}
.footer-inner {
  width: 92%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
}
.footer-links { display: flex; gap: 1.25rem; }
/* Petrol auf Graugrün hat nur 4.2:1 - Footer-Link daher in Anthrazit, unterstrichen. */
.footer-cta { color: var(--text); font-weight: 600; text-decoration: underline; }
/* --text-muted (Abnahmekriterium >=4.5:1) hält den Kontrast auf dem normalen
   --bg nur knapp ein, reicht auf dem helleren --bg-alt des Footers aber nicht
   mehr - deshalb hier --text-body statt --text-muted. */
.footer-links a, .footer-copy { color: var(--text); font-size: 0.9rem; }
.footer-links a:hover, .footer-cta:hover { color: var(--accent); }

@media (max-width: 680px) {
  .nav-logo-img { height: 3rem; }
  .nav-toggle { display: block; }
  .nav-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--hairline);
    padding: 1rem 1.25rem 1.5rem;
    gap: 1rem;
  }
  .nav-list.open { display: flex; }
  .nav-dropdown-list { position: static; border: none; padding-left: 1rem; }
  .site-header { position: relative; }
}

/* Bildausschnitt der Portfolio-Kacheln (Admin: Portfolio-Kacheln). Je Achse 21 Stufen
   in 5-%-Schritten; die Klassen fx-N/fy-N setzen nur die Hilfsvariablen. */
.portfolio-card img { object-position: var(--fx, 50%) var(--fy, 50%); }
.fx-0 { --fx: 0%; } .fy-0 { --fy: 0%; }
.fx-5 { --fx: 5%; } .fy-5 { --fy: 5%; }
.fx-10 { --fx: 10%; } .fy-10 { --fy: 10%; }
.fx-15 { --fx: 15%; } .fy-15 { --fy: 15%; }
.fx-20 { --fx: 20%; } .fy-20 { --fy: 20%; }
.fx-25 { --fx: 25%; } .fy-25 { --fy: 25%; }
.fx-30 { --fx: 30%; } .fy-30 { --fy: 30%; }
.fx-35 { --fx: 35%; } .fy-35 { --fy: 35%; }
.fx-40 { --fx: 40%; } .fy-40 { --fy: 40%; }
.fx-45 { --fx: 45%; } .fy-45 { --fy: 45%; }
.fx-50 { --fx: 50%; } .fy-50 { --fy: 50%; }
.fx-55 { --fx: 55%; } .fy-55 { --fy: 55%; }
.fx-60 { --fx: 60%; } .fy-60 { --fy: 60%; }
.fx-65 { --fx: 65%; } .fy-65 { --fy: 65%; }
.fx-70 { --fx: 70%; } .fy-70 { --fy: 70%; }
.fx-75 { --fx: 75%; } .fy-75 { --fy: 75%; }
.fx-80 { --fx: 80%; } .fy-80 { --fy: 80%; }
.fx-85 { --fx: 85%; } .fy-85 { --fy: 85%; }
.fx-90 { --fx: 90%; } .fy-90 { --fy: 90%; }
.fx-95 { --fx: 95%; } .fy-95 { --fy: 95%; }
.fx-100 { --fx: 100%; } .fy-100 { --fy: 100%; }