/* STEFAN FRIEDRICH MAYR PHOTOGRAPHY — das einzige Stylesheet.

   Richtung: klar und ruhig, angelehnt an apple.com. Nur Schwarz und Weiß:
   Weiß und ein kühles Hellgrau als Flächen, Schwarz für die Bildbühnen,
   Links in der Textfarbe. Einzige Farbe ist das Orange des Knopfs
   "Anfrage". Die Bilder tragen die Farbe, die Seite nicht.

   Schrift: die Systemschrift des Geräts. Auf iPhone und Mac ist das SF Pro,
   unter Windows Segoe UI. Es wird keine Schrift nachgeladen - weder von
   Google noch vom eigenen Server. Die Seite baut beim Aufruf keine einzige
   Verbindung nach außen auf; das sagt die Datenschutzerklärung zu. */

:root {
  --weiss: #ffffff;
  --grau: #f5f5f7;          /* Flächen, Kontaktband */
  --tinte: #1d1d1f;         /* Text */
  --tinte-2: #6e6e73;       /* Nebentext */
  --linie: #d2d2d7;
  --orange: #d4460c;        /* NUR der Knopf "Anfrage" - weiße Schrift, Kontrast 4,5:1 */
  --orange-dunkel: #b83c0a; /* dasselbe beim Überfahren */
  --nacht: #000000;         /* Bildbühnen */
  --nacht-2: #1d1d1f;
  --nacht-tinte: #f5f5f7;
  --nacht-tinte-2: #a1a1a6;

  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
             "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;

  --rahmen: 1120px;
  --rand: max(22px, env(safe-area-inset-left, 0px));
  --kopf: 48px;
  --radius: 18px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopf) + 16px);
}

body {
  margin: 0;
  background: var(--weiss);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.18em; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--tinte); color: var(--weiss); padding: 10px 16px;
}
.skip:focus { left: 16px; top: 8px; }

/* ---------- Raster und Abschnitte ---------- */

.rahmen { max-width: var(--rahmen); margin-inline: auto; padding-inline: var(--rand); }
.rahmen--text { max-width: calc(700px + 2 * 22px); }
.mittig { text-align: center; }
.mittig .lead { margin-inline: auto; }

.abschnitt { padding-block: clamp(64px, 10vw, 120px); }
.abschnitt--grau { background: var(--grau); color: var(--tinte); }
.abschnitt--nacht { background: var(--nacht); color: var(--nacht-tinte); }
.abschnitt--nacht .lead,
.abschnitt--nacht .eyebrow { color: var(--nacht-tinte-2); }

/* ---------- Schrift ---------- */

h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }

.titel-hero {
  font-size: clamp(44px, 8vw, 96px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 700;
}
.titel-1 {
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.titel-2 {
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.028em;
}
.titel-3 {
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.eyebrow {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tinte-2);
}

.lead {
  margin: 18px 0 0;
  max-width: 34em;
  font-size: clamp(19px, 2.1vw, 24px);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--tinte-2);
  text-wrap: pretty;
}

/* Links mit Winkel, wie "Mehr erfahren >" */
.pfeil { font-size: inherit; white-space: nowrap; font-weight: 500; }
.pfeil::after {
  content: "";
  display: inline-block;
  width: 0.42em; height: 0.42em;
  margin-left: 0.3em;
  border-right: 0.1em solid currentColor;
  border-top: 0.1em solid currentColor;
  transform: translateY(-0.08em) rotate(45deg);
}

.knopf {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 980px;
  background: var(--orange);
  color: var(--weiss);
  font-size: 17px;
  line-height: 1.18;
  font-weight: 400;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.022em;
}
.knopf:hover { background: var(--orange-dunkel); text-decoration: none; }

.knopfzeile, .links-zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px;
  margin: 28px 0 0;
  font-size: clamp(17px, 1.8vw, 21px);
}
.mittig .knopfzeile, .mittig .links-zeile, .seitenkopf .links-zeile { justify-content: center; }

/* ---------- Kopf ---------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
/* Milchglas als eigene Ebene: stuende backdrop-filter direkt auf .kopf,
   wuerde das fest positionierte Mobil-Menue nur 48 px hoch. */
.kopf::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.kopf__innen {
  max-width: var(--rahmen);
  margin-inline: auto;
  padding-inline: var(--rand);
  height: var(--kopf);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.wortmarke {
  color: var(--tinte);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.wortmarke:hover { text-decoration: none; }

.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 30px; }
.nav a { color: var(--tinte); opacity: 0.8; font-size: 13px; letter-spacing: -0.01em; }
.nav a:hover { opacity: 1; text-decoration: none; }
.nav a[aria-current="page"] { opacity: 1; font-weight: 600; }

.nav-schalter {
  display: none;
  width: 44px; height: 44px; margin-right: -12px;
  background: none; border: 0; cursor: pointer; position: relative;
}
.nav-schalter span {
  position: absolute; left: 14px; right: 14px; height: 1.5px;
  background: var(--tinte); border-radius: 1px;
  transition: transform 0.25s ease, top 0.25s ease;
}
.nav-schalter span:first-child { top: 18px; }
.nav-schalter span:last-child { top: 25px; }
.nav-schalter[aria-expanded="true"] span:first-child { top: 21.5px; transform: rotate(45deg); }
.nav-schalter[aria-expanded="true"] span:last-child { top: 21.5px; transform: rotate(-45deg); }

@media (max-width: 820px) {
  .nav-schalter { display: block; }
  .nav {
    position: fixed; left: 0; right: 0;
    top: calc(var(--kopf) + env(safe-area-inset-top, 0px));
    bottom: 0;
    background: var(--weiss);
    padding: 20px var(--rand) 40px;
    display: none;
    overflow-y: auto;
  }
  .nav[data-open="true"] { display: block; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a {
    display: block; padding: 10px 0;
    font-size: 28px; font-weight: 600; letter-spacing: -0.02em; opacity: 1;
  }
  body.menue-offen { overflow: hidden; }
}

/* ---------- Startseite: Bühne ---------- */

.buehne {
  background: var(--nacht);
  color: var(--nacht-tinte);
  text-align: center;
  padding-top: clamp(56px, 8vw, 96px);
  overflow: hidden;
}
.buehne .eyebrow { color: var(--nacht-tinte-2); }
.buehne .lead { color: var(--nacht-tinte-2); margin-inline: auto; }
.buehne__bild {
  margin: clamp(40px, 6vw, 72px) auto 0;
  max-width: 1400px;
  position: relative;
}
.buehne__bild img { width: 100%; }
.buehne__preis {
  position: absolute; left: 50%; bottom: clamp(20px, 4vw, 48px);
  transform: translateX(-50%);
  margin: 0;
  font-size: 14px; letter-spacing: 0; color: var(--nacht-tinte-2);
  white-space: nowrap;
}

/* ---------- Startseite: Kacheln ---------- */

.kacheln {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  max-width: 1600px;
  margin-inline: auto;
}
.kachel {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  min-height: clamp(460px, 48vw, 620px);
  padding-top: clamp(40px, 5vw, 56px);
  overflow: hidden;
  text-align: center;
  color: var(--nacht-tinte);
  background: var(--nacht);
  isolation: isolate;
}
.kachel--hell { background: var(--grau); color: var(--tinte); }
/* picture kommt vom Bild-Shortcode; ein nacktes img nur, wenn die
   Bilddaten fehlen. Beides soll die ganze Kachel fuellen. */
.kachel > picture, .kachel > img {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%;
}
.kachel > picture img, .kachel > img { width: 100%; height: 100%; object-fit: cover; }
/* Verlauf von oben, damit die Schrift auf jedem Bild lesbar bleibt */
.kachel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 60%; z-index: -1;
  background: linear-gradient(rgba(0,0,0,0.72), rgba(0,0,0,0.35) 55%, rgba(0,0,0,0));
  pointer-events: none;
}
/* Helle Kachel: Text auf ruhiger grauer Flaeche, Bild erst darunter.
   Fuer unruhige, helle Motive, auf denen Schrift nicht zu lesen waere. */
.kachel--hell::before { content: none; }
.kachel--hell > picture, .kachel--hell > img { top: clamp(190px, 36%, 240px); height: auto; bottom: 0; }
.kachel.kachel--hell h2, .kachel.kachel--hell p { text-shadow: none; }
.kachel.kachel--hell p:not(.links-zeile) { color: var(--tinte-2); }
.kachel h2, .kachel p { text-shadow: 0 1px 12px rgba(0,0,0,0.35); }
.kachel h2 { font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -0.03em; line-height: 1.08; }
.kachel p { margin: 8px 20px 0; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.3; }
.kachel .links-zeile { margin-top: 16px; font-size: 17px; }
.kachel .links-zeile a { position: relative; z-index: 2; }
.kachel img { transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.kachel:hover img { transform: scale(1.03); }

@media (max-width: 760px) {
  .kacheln { grid-template-columns: 1fr; padding: 12px 0; gap: 12px; }
  .kachel { min-height: 520px; }
}

/* ---------- Startseite: Panorama ---------- */

.panorama { background: var(--nacht); color: var(--nacht-tinte); padding-block: clamp(64px, 10vw, 120px) 0; }
.panorama__streifen {
  margin-top: clamp(40px, 6vw, 64px);
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.panorama__streifen::-webkit-scrollbar { display: none; }
.panorama__streifen picture { width: max-content; }
.panorama__streifen img {
  height: clamp(300px, 46vw, 560px);
  width: auto; max-width: none;
}
.panorama__hinweis {
  margin: 0; padding: 16px var(--rand) clamp(40px, 6vw, 64px);
  text-align: center; font-size: 14px; color: var(--nacht-tinte-2);
}

/* ---------- Zweispaltig: Text und Bild ---------- */

.zweispaltig {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.zweispaltig--bild-links > :first-child { order: 2; }
.zweispaltig img { border-radius: var(--radius); }
@media (max-width: 820px) {
  .zweispaltig { grid-template-columns: 1fr; }
  .zweispaltig--bild-links > :first-child { order: 0; }
}

.siegel { display: flex; align-items: center; gap: 16px; margin-top: 28px; }
.siegel img { width: 88px; border-radius: 10px; }
.siegel p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--tinte-2); letter-spacing: -0.01em; }

/* Kennzahlen, knapp */
.fakten {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px;
  border-top: 1px solid var(--linie); padding-top: 28px;
}
.fakten strong { display: block; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.fakten span { display: block; margin-top: 4px; font-size: 15px; color: var(--tinte-2); letter-spacing: -0.01em; }
.abschnitt--nacht .fakten { border-color: #333336; }
.abschnitt--nacht .fakten span { color: var(--nacht-tinte-2); }

/* ---------- Galerieseiten ---------- */

.seitenkopf { text-align: center; padding-block: clamp(56px, 9vw, 110px) clamp(40px, 6vw, 72px); }
.seitenkopf .lead { margin-inline: auto; }

.galerie { padding: 0 12px clamp(64px, 10vw, 120px); max-width: 1600px; margin-inline: auto; }
.raster {
  list-style: none; margin: 0; padding: 0;
  columns: 4 280px;
  column-gap: 12px;
}
.raster__zelle { break-inside: avoid; margin-bottom: 12px; }
.raster__zelle a { display: block; overflow: hidden; border-radius: 12px; background: var(--grau); }
.raster__zelle img { width: 100%; transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s; }
.raster__zelle a:hover img { transform: scale(1.025); }
@media (max-width: 600px) {
  .raster { columns: 2; column-gap: 8px; }
  .raster__zelle { margin-bottom: 8px; }
  .raster__zelle a { border-radius: 8px; }
  .galerie { padding-inline: 8px; }
}

/* Luftbilder: randlose Panoramen untereinander */
.panoramen { list-style: none; margin: 0; padding: 0 0 clamp(64px, 10vw, 120px); display: grid; gap: 12px; }
.panoramen a { display: block; }
.panoramen img { width: 100%; }

.body-nacht { background: var(--nacht); color: var(--nacht-tinte); }
.body-nacht .kopf { border-bottom-color: rgba(255,255,255,0.08); }
.body-nacht .kopf::before { background: rgba(22, 22, 23, 0.8); }
.body-nacht .wortmarke, .body-nacht .nav a { color: var(--nacht-tinte); }
.body-nacht .nav-schalter span { background: var(--nacht-tinte); }
.body-nacht .seitenkopf .lead, .body-nacht .eyebrow { color: var(--nacht-tinte-2); }
.body-nacht .raster__zelle a { background: var(--nacht-2); }
@media (max-width: 820px) {
  .body-nacht .nav { background: var(--nacht); }
}

/* ---------- Breites Bild (Über mich) ---------- */

.bild-breit { max-width: 1600px; margin-inline: auto; padding-inline: 12px; }
.bild-breit img { width: 100%; border-radius: var(--radius); }

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

.kontakt-raster {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 80px); align-items: start;
}
@media (max-width: 860px) { .kontakt-raster { grid-template-columns: 1fr; } }

.karte { background: var(--grau); border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); }
.karte h2 { font-size: 21px; letter-spacing: -0.02em; margin-bottom: 12px; }
.karte p { margin: 0 0 14px; }
.karte img { border-radius: 12px; margin-bottom: 24px; }
.karte__zeile { display: block; font-size: 21px; letter-spacing: -0.02em; }

.formular { display: grid; gap: 16px; }
.formular__reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .formular__reihe { grid-template-columns: 1fr; } }
.feld { display: grid; gap: 6px; }
.feld label { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.feld input, .feld select, .feld textarea {
  width: 100%;
  font: inherit; font-size: 17px;
  color: var(--tinte);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 13px 14px;
  appearance: none;
}
.feld select {
  background-image: linear-gradient(45deg, transparent 50%, var(--tinte-2) 50%), linear-gradient(135deg, var(--tinte-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat;
  padding-right: 40px;
}
.feld textarea { min-height: 160px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; border-color: var(--tinte); box-shadow: 0 0 0 3px rgba(29, 29, 31, 0.12);
}
.haken { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 14px; color: var(--tinte-2); }
.haken input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--tinte); }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Textseiten ---------- */

.prosa { margin-top: 40px; }
.prosa h2 { font-size: 24px; letter-spacing: -0.02em; margin: 48px 0 12px; }
.prosa h3 { font-size: 19px; margin: 32px 0 8px; }
.prosa p, .prosa ul { margin: 0 0 16px; }
.prosa ul { padding-left: 1.2em; }
.prosa li { margin-bottom: 6px; }

/* ---------- Fuß ---------- */

.fuss {
  background: var(--grau);
  color: var(--tinte-2);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  padding-block: 40px 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--linie);
}
.body-nacht .fuss { border-top: 0; }
.fuss a { color: var(--tinte-2); }
.fuss a:hover { color: var(--tinte); }
.fuss p { margin: 0; }
.fuss__spalten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 760px) { .fuss__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fuss__titel { color: var(--tinte); font-weight: 600; margin-bottom: 8px !important; }
.fuss__leiste {
  margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--linie);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
}

/* ---------- Grossansicht ---------- */

.lightbox {
  border: 0; padding: 0; margin: 0;
  width: 100vw; height: 100vh; max-width: none; max-height: none;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.96);
  color: var(--nacht-tinte);
}
.lightbox::backdrop { background: rgba(0, 0, 0, 0.96); }
.lightbox__bild {
  margin: 0; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 64px 72px 56px; gap: 14px;
}
.lightbox__bild img { max-width: 100%; max-height: calc(100% - 40px); width: auto; height: auto; object-fit: contain; }
.lightbox__bild figcaption { font-size: 14px; color: var(--nacht-tinte-2); text-align: center; max-width: 60ch; }
.lightbox__knopf {
  position: absolute;
  width: 44px; height: 44px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.12); color: var(--nacht-tinte);
  display: grid; place-items: center;
}
.lightbox__knopf:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox__knopf svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lightbox__zu { top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; }
.lightbox__zurueck { left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox__weiter { right: 14px; top: 50%; transform: translateY(-50%); }
.lightbox__zaehler {
  position: absolute; top: calc(24px + env(safe-area-inset-top, 0px)); left: 0; right: 0;
  margin: 0; text-align: center; font-size: 14px; color: var(--nacht-tinte-2);
  font-variant-numeric: tabular-nums; pointer-events: none;
}
@media (max-width: 600px) {
  .lightbox__bild { padding: 64px 8px 72px; }
  .lightbox__zurueck, .lightbox__weiter { top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: none; }
  .lightbox__zurueck { left: calc(50% - 56px); }
  .lightbox__weiter { right: calc(50% - 56px); }
}

/* ---------- Einblenden beim Scrollen ----------
   Nur wenn Javascript laeuft (Klasse .js am <html>) und niemand reduzierte
   Bewegung eingestellt hat. Ohne beides ist alles sofort sichtbar. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-einblenden] { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js [data-einblenden].sichtbar { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- 404 ---------- */
.leer { min-height: 50vh; display: grid; place-items: center; text-align: center; }