/* ============================================================
   MIRIAM CORNELIUS FOTOGRAFIE — Design System
   Konzept: Kontaktabzug bei Tageslicht. Echte Fotografie-Sprache
   (Brennweite, Blende, EXIF) als Gestaltungsmittel auf hellem
   Papier-Grund. Zwei Akzente aus der Fotopraxis: Gold für die
   goldene Stunde, Türkis für Wasser- und Himmeltöne aus der Luft.
   ============================================================ */

/* Lokal eingebundene Schriftarten (kein externer Aufruf an Google-Server) */
@font-face{
  font-family:'Big Shoulders Display';
  font-style:normal; font-weight:500 700;
  font-display:swap;
  src:url('fonts/big-shoulders-display.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal; font-weight:400;
  font-display:swap;
  src:url('fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal; font-weight:500;
  font-display:swap;
  src:url('fonts/ibm-plex-mono-500.woff2') format('woff2');
}
@font-face{
  font-family:'Newsreader';
  font-style:italic; font-weight:400;
  font-display:swap;
  src:url('fonts/newsreader-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Newsreader';
  font-style:normal; font-weight:400 500;
  font-display:swap;
  src:url('fonts/newsreader-normal.woff2') format('woff2');
}

:root{
  /* Farbe — benannt nach Fotolabor-Materialien, nicht generisch */
  --paper:#faf7f1;         /* Basiston: Seitenhintergrund, helles Papier */
  --paper-2:#f1ece1;        /* Etwas kräftigeres Papier — Bandsektionen, Chips */
  --surface:#ffffff;        /* Karten / Abzüge — hellste Fläche */
  --border:#e6ded0;         /* Haarlinie, dezent */
  --border-strong:#d5c8ac;  /* Haarlinie, betont */

  --ink:#1c1712;            /* Überschriften, Primärtext */
  --ink-soft:#463c30;       /* Fließtext */
  --stone:#8a7d68;          /* Labels, Bildunterschriften, Sekundärtext */
  --stone-dim:#b7ac93;      /* sehr leiser Text / Platzhalter */

  --tungsten:#b8860b;       /* Gold — goldene Stunde, warmer Akzent */
  --daylight:#127a75;       /* Türkis — Wasser/Himmel von oben, kühler Akzent */

  --on-photo:#fff8ed;       /* Text/Labels über abgedunkeltem Foto (Hero, Karten) */
  --scrim:rgba(24,19,14,.90); /* Abdunklung auf Fotos für Lesbarkeit */

  --font-display:'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --font-body:'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono:'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  --fs-hero: clamp(2.6rem, 5.6vw, 5.4rem);
  --fs-h2: clamp(1.9rem, 3.6vw, 3rem);
  --fs-h3: clamp(1.2rem, 1.8vw, 1.5rem);
  --fs-body: 1.05rem;
  --fs-small: 0.9rem;
  --fs-label: 0.72rem;

  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.25rem;
  --space-5: 3.5rem;
  --space-6: 5.5rem;
  --space-7: 8rem;

  --wrap: 1220px;
  --radius: 2px; /* fast keine Rundung — Foto-/Druckästhetik */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-soft);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; margin:0; text-wrap:balance; letter-spacing:0.01em; color:var(--ink); }
p{ margin:0; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--space-3); }
@media (min-width:640px){ .wrap{ padding-inline:var(--space-4); } }

.label{
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--stone);
}
.label.on-tungsten{ color:var(--tungsten); }
.label.on-daylight{ color:var(--daylight); }

.exif{
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  letter-spacing:0.06em;
  color:var(--stone);
  display:inline-flex;
  gap:.55em;
  align-items:center;
}
.exif b{ color:var(--tungsten); font-weight:500; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-mono);
  font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.95em 1.5em;
  border:1px solid var(--tungsten);
  color:var(--surface);
  background:var(--tungsten);
  text-decoration:none;
  border-radius:var(--radius);
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.btn:hover{ background:transparent; color:var(--tungsten); }
.btn:focus-visible{ outline:2px solid var(--daylight); outline-offset:3px; }
.btn.ghost{
  background:transparent; color:var(--ink); border-color:var(--border-strong);
}
.btn.ghost:hover{ border-color:var(--ink); }

/* ---------- Nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:40;
  background:rgba(250,247,241,.86);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:var(--space-2);
  gap:var(--space-3);
}
.brand{ text-decoration:none; display:flex; flex-direction:column; line-height:1; gap:.35em; }
.brand-name{
  font-family:var(--font-display); font-size:1.35rem; font-weight:600;
  letter-spacing:.02em; color:var(--ink); white-space:nowrap;
}
.brand-tag{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.28em;
  color:var(--tungsten); text-transform:uppercase;
}
.nav-links{ display:flex; align-items:center; gap:var(--space-4); }
.nav-links a{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em;
  text-transform:uppercase; text-decoration:none; color:var(--stone);
  padding-block:.3em; border-bottom:1px solid transparent;
}
.nav-links a:hover{ color:var(--ink); border-color:var(--tungsten); }
.nav-toggle{ display:none; }
@media (max-width: 860px){
  .nav-links{ display:none; }
}

/* ---------- Hero ---------- */
/* Fotos brauchen weiterhin einen dunklen Verlauf für lesbaren Text —
   unabhängig vom hellen Seitenton (wie eine Bildunterschrift auf einem
   Abzug bleibt auch ein dunkler Himmel dunkel). Der Hero rotiert langsam
   durch fünf Genres, damit kein einzelnes Bild die ganze Positionierung
   trägt — Hochzeit ist bewusst als zweites Bild im Zyklus platziert. */
.hero{
  position:relative;
  min-height: min(84vh, 760px);
  display:flex; align-items:flex-end;
  overflow:hidden;
  padding-top: var(--space-7);
}
.hero-slides{ position:absolute; inset:0; z-index:0; }
.hero-slides img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 45%;
  opacity:0;
  animation:heroFade 25s infinite;
}
.hero-slides img:nth-child(1){ animation-delay:0s; }
.hero-slides img:nth-child(2){ animation-delay:5s; }
.hero-slides img:nth-child(3){ animation-delay:10s; }
.hero-slides img:nth-child(4){ animation-delay:15s; }
.hero-slides img:nth-child(5){ animation-delay:20s; }
@keyframes heroFade{
  0%{ opacity:0; }
  4%{ opacity:1; }
  19%{ opacity:1; }
  24%{ opacity:0; }
  100%{ opacity:0; }
}
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(24,19,14,.22) 0%, rgba(24,19,14,.58) 60%, var(--scrim) 100%);
}
@media (prefers-reduced-motion: reduce){
  .hero-slides img{ animation:none; opacity:0; }
  .hero-slides img:first-child{ opacity:1; }
}
.hero-frame{ z-index:2;
  position:absolute; inset:clamp(14px,3vw,34px);
  pointer-events:none;
}
.hero-frame::before,.hero-frame::after,
.hero-frame b::before,.hero-frame b::after{
  content:""; position:absolute; width:26px; height:26px; border:1.5px solid rgba(255,248,237,.65);
}
.hero-frame::before{ top:0; left:0; border-right:none; border-bottom:none; }
.hero-frame::after{ top:0; right:0; border-left:none; border-bottom:none; }
.hero-frame b::before{ bottom:0; left:0; border-right:none; border-top:none; }
.hero-frame b::after{ bottom:0; right:0; border-left:none; border-top:none; }

.hero-body{ position:relative; z-index:2; padding-block:var(--space-6) var(--space-5); }
.hero-eyebrow{ margin-bottom:var(--space-2); }
.hero-eyebrow.label.on-tungsten{ color:#e8c468; } /* leicht aufgehellt für Kontrast auf Foto */
.hero h1{
  font-size:var(--fs-hero); color:var(--on-photo); max-width:14ch; line-height:.98;
}
.hero h1 em{ font-style:normal; color:#e8c468; }
.hero-sub{
  margin-top:var(--space-3); max-width:52ch; color:#e7dfd1;
  font-size:1.05rem;
}
.hero-actions{ margin-top:var(--space-4); display:flex; gap:var(--space-2); flex-wrap:wrap; }
.hero-actions .btn.ghost{ color:var(--on-photo); border-color:rgba(255,248,237,.5); }
.hero-actions .btn.ghost:hover{ border-color:var(--on-photo); }
.hero-meta{
  margin-top:var(--space-5); display:flex; flex-wrap:wrap; gap:var(--space-4);
  border-top:1px solid rgba(255,248,237,.25); padding-top:var(--space-2);
}
.hero-meta .exif{ color:#e7dfd1; }
.hero-meta .exif b{ color:#e8c468; }

/* ---------- Section scaffolding ---------- */
section{ padding-block:var(--space-6); }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:var(--space-3);
  margin-bottom:var(--space-5); flex-wrap:wrap;
}
.section-head h2{ font-size:var(--fs-h2); max-width:16ch; }
.section-head .label{ margin-bottom:var(--space-1); display:block; }
.section-note{ max-width:38ch; color:var(--stone); font-size:var(--fs-small); }

.film-rule{
  height:10px; display:flex; gap:6px; align-items:center;
  padding-inline:var(--space-3);
}
.film-rule span{ width:6px; height:6px; background:var(--border-strong); border-radius:1px; }

/* ---------- Genre grid (EXIF cards) ---------- */
.genre-grid{
  display:grid; gap:2px;
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
  background:var(--border);
  border:1px solid var(--border);
}
.genre-card{
  position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--paper-2);
}
.genre-card img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .4s ease;
  filter:saturate(.96);
}
.genre-card:hover img{ transform:scale(1.045); filter:saturate(1.08); }
.genre-card .overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, var(--scrim) 100%);
}
.genre-card .content{
  position:absolute; left:0; right:0; bottom:0; padding:var(--space-3);
}
.genre-card h3{ color:var(--on-photo); font-size:1.35rem; margin-bottom:.4em; }
.genre-card .exif{ color:var(--on-photo); opacity:.9; }
.genre-card .exif b{ color:#e8c468; }

/* Hochzeit als Schwerpunkt hervorgehoben — größere Kachel + Marke */
.genre-card.featured{ grid-column:span 2; aspect-ratio:8/5; }
.genre-card.featured h3{ font-size:1.7rem; }
.genre-card .ribbon{
  position:absolute; top:0; left:var(--space-2); z-index:2;
  background:var(--tungsten); color:var(--surface);
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; padding:.5em .8em;
  clip-path:polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
}
@media (max-width:640px){ .genre-card.featured{ grid-column:span 1; aspect-ratio:4/5; } }

/* ---------- Hochzeit im Fokus ---------- */
.wedding-feature{
  background:var(--paper-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.wedding-gallery{
  display:grid; grid-template-columns:1.3fr 1fr; grid-template-rows:1fr 1fr;
  gap:var(--space-2); height:min(70vh, 560px);
}
.wg-big{ grid-row:span 2; overflow:hidden; }
.wg-small{ overflow:hidden; }
.wedding-gallery img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:760px){
  .wedding-gallery{ grid-template-columns:1fr; grid-template-rows:none; height:auto; }
  .wg-big{ grid-row:auto; aspect-ratio:4/3; }
  .wg-small{ aspect-ratio:16/9; }
}
.wedding-copy{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  flex-wrap:wrap; margin-top:var(--space-4);
}
.wedding-copy p{ color:var(--ink-soft); max-width:56ch; }

/* ---------- About ---------- */
.about{
  display:grid; grid-template-columns:1fr; gap:var(--space-5);
}
@media (min-width:900px){ .about{ grid-template-columns:.85fr 1.15fr; align-items:center; } }
.about-media{ position:relative; }
.about-media img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.about-media .tag{
  position:absolute; left:var(--space-2); bottom:var(--space-2);
  background:var(--scrim); color:var(--on-photo); border:1px solid var(--tungsten);
  padding:.5em .8em;
}
.about-media .tag.exif{ color:var(--on-photo); }
.about-media .tag.exif b{ color:#e8c468; }
.about h2{ font-size:var(--fs-h2); margin-bottom:var(--space-3); max-width:14ch; }
.about p{ color:var(--ink-soft); max-width:56ch; }
.about p + p{ margin-top:var(--space-2); }
.about-quote{
  margin-top:var(--space-4); padding-left:var(--space-3);
  border-left:2px solid var(--tungsten);
  font-family:var(--font-body); font-style:italic; font-size:1.2rem; color:var(--ink);
  max-width:46ch;
}

/* ---------- Portfolio / contact sheet ---------- */
.sheet-grid{
  display:grid; gap:var(--space-3);
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
}
.frame{
  background:var(--surface); padding:.6rem .6rem 1.1rem; position:relative;
  border:1px solid var(--border);
  box-shadow:0 14px 26px -20px rgba(28,23,18,.35);
}
.frame img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.frame .frame-no{
  position:absolute; top:.55rem; right:.7rem;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.05em;
  color:var(--ink); opacity:.5;
}
.frame figcaption{
  margin-top:.6rem; font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.04em; color:var(--stone); text-align:left;
}
figure{ margin:0; }

/* ---------- Warum / Testimonial-style band ---------- */
.testimonial{
  background:var(--paper-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.testimonial blockquote{
  margin:0 auto; max-width:62ch; text-align:center;
  font-family:var(--font-body); font-style:italic; color:var(--ink);
  font-size:clamp(1.2rem, 2.4vw, 1.65rem); line-height:1.55;
}
.testimonial cite{
  display:block; margin-top:var(--space-3); font-style:normal;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em;
  color:var(--tungsten); text-transform:uppercase;
}

/* ---------- Process (Ablauf) ---------- */
.process{ display:grid; gap:var(--space-3); grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.process-step{ border-top:1px solid var(--border); padding-top:var(--space-2); }
.process-step .num{ font-family:var(--font-mono); color:var(--daylight); font-size:.8rem; }
.process-step h3{ margin-block:.4em .3em; }
.process-step p{ color:var(--stone); font-size:var(--fs-small); }

/* ---------- Contact ---------- */
.contact{ background:var(--paper-2); }
.contact-grid{ display:grid; gap:var(--space-5); grid-template-columns:1fr; }
@media (min-width:900px){ .contact-grid{ grid-template-columns:1fr 1fr; } }
.contact h2{ font-size:var(--fs-h2); max-width:12ch; }
.contact-list{ list-style:none; margin:var(--space-3) 0 0; padding:0; display:grid; gap:var(--space-2); }
.contact-list a{ text-decoration:none; }
.contact-list .k{ display:block; }
.contact-list .k .label{ margin-bottom:.25em; }
.contact-list .v{ font-family:var(--font-body); font-size:1.15rem; color:var(--ink); }
.contact-list .v.placeholder{ color:var(--stone-dim); font-family:var(--font-mono); font-size:.85rem; letter-spacing:.02em; }

.form-field{ display:grid; gap:.4em; margin-bottom:var(--space-2); }
.form-field label{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--stone); }
.form-field input, .form-field select, .form-field textarea{
  background:var(--surface); border:1px solid var(--border-strong); color:var(--ink);
  padding:.85em .9em; font-family:var(--font-body); font-size:1rem; border-radius:var(--radius);
}
.form-field textarea{ resize:vertical; min-height:120px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none; border-color:var(--tungsten);
}
.form-note{ font-size:.78rem; color:var(--stone-dim); margin-top:var(--space-2); }

/* ---------- Footer ---------- */
footer{
  border-top:1px solid var(--border); padding-block:var(--space-4);
}
.footer-row{
  display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4);
  align-items:center; justify-content:space-between;
}
.footer-links{ display:flex; gap:var(--space-3); flex-wrap:wrap; }
.footer-links a{ font-family:var(--font-mono); font-size:.78rem; color:var(--stone); text-decoration:none; letter-spacing:.04em; }
.footer-links a:hover{ color:var(--ink); }
.footer-copy{ font-family:var(--font-mono); font-size:.72rem; color:var(--stone-dim); }

/* ---------- Utility ---------- */
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.stack-tight > * + *{ margin-top:var(--space-2); }