/* =========================================================================
   Fotostudio Elke Deichmann — Stylesheet
   Design-Tokens + Basiskomponenten. Aus dem Design-Handoff abgeleitet.
   ========================================================================= */

/* ---- Fonts ---------------------------------------------------------------- */
@font-face { font-family: 'DejaVu Sans'; src: url('../assets/fonts/DejaVuSans.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'DejaVu Sans'; src: url('../assets/fonts/DejaVuSans-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'DejaVu Sans'; src: url('../assets/fonts/DejaVuSans-ExtraLight.woff2') format('woff2'); font-weight: 200; font-display: swap; }

/* ---- Design-Tokens -------------------------------------------------------- */
:root {
  /* Brand */
  --rot: #ab1a2d;
  --rot-dunkel: #7f1322;   /* Hover */
  --rot-hell: #d94a5c;     /* Rot auf dunklem Grund */
  --rosa: #f0c9ce;         /* Sublines auf Rot/Dunkel */

  /* Text */
  --text: #2e2b2c;         /* primär */
  --text-fliess: #5c5658;  /* Fließtext */
  --text-sek: #7a7475;     /* sekundär */
  --text-schwach: #8a8485; /* schwach */

  /* Flächen */
  --bg: #fbfafa;           /* Seitenhintergrund (Seite selbst) */
  --rahmen: #e6e1e1;       /* Rahmen rund um die 1280px-Seite */
  --flaeche: #f4f1f1;      /* Bänder / Kästen */
  --karte: #fff;           /* Karten */
  --linie: #e7e3e4;        /* Linien */
  --dunkel: #232021;       /* dunkle Hero-Bänder */

  /* Maße */
  --seite-max: 1280px;
  --seite-pad: 56px;

  /* Polaroid-Schatten */
  --polaroid-schatten: 0 12px 32px rgba(0,0,0,.45);
}

/* ---- Reset / Basis -------------------------------------------------------- */
* { box-sizing: border-box; }

html {
  /* iOS Safari nicht automatisch Schriftgrößen aufblähen lassen */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--rahmen);
  font-family: 'DejaVu Sans', sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* Nur echte Langtokens (E-Mail-Adressen) dürfen umbrechen — keine normalen Wörter */
a[href^="mailto:"] { overflow-wrap: anywhere; }

a { color: var(--rot); text-decoration: none; }
a:hover { color: var(--rot-dunkel); }

h1, h2, h3, p { margin: 0; }
img { display: block; }

/* Zentriertes Grundgerüst (max-width 1280px) */
.page {
  max-width: var(--seite-max);
  margin: 0 auto;
  background: var(--bg);
}

/* ---- Header --------------------------------------------------------------- */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--seite-pad);
  border-bottom: 1px solid var(--linie);
}
.brand { display: flex; align-items: center; color: inherit; }
.brand:hover { color: inherit; }
.brand__logo { height: 76px; width: auto; }

.nav { display: flex; gap: 36px; font-size: 15px; }
.nav a { color: var(--text); }
.nav a:hover { color: var(--rot-dunkel); }
.nav a.is-active { color: var(--rot); font-weight: 700; }

/* ---- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 700;
  border: 0;
  cursor: pointer;
}
.btn--primary { background: var(--rot); color: #fff; }
.btn--primary:hover { background: var(--rot-dunkel); color: #fff; }
.btn--ghost-light { color: #fff; border: 1px solid rgba(255,255,255,.6); font-weight: 400; }
.btn--ghost-light:hover { color: #fff; border-color: #fff; }
.btn--on-red { background: #fff; color: var(--rot); }
.btn--on-red:hover { background: #fff; color: var(--rot-dunkel); }

/* ---- Section-Grundlagen --------------------------------------------------- */
.section { padding: 88px var(--seite-pad); }
.section__title { font-weight: 200; font-size: 36px; }

/* ---- Startseite: Hero ----------------------------------------------------- */
.hero {
  position: relative;
  height: 640px;
  background-position: center 25%;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,17,18,.78) 0%, rgba(20,17,18,.2) 55%, rgba(20,17,18,.1) 100%);
}
.hero__content {
  position: absolute; left: var(--seite-pad); right: var(--seite-pad); bottom: 64px;
  display: flex; flex-direction: column; gap: 20px; color: #fff;
}
.hero__title { font-weight: 400; font-size: 58px; line-height: 1.1; max-width: 16ch; }
.hero__sub { font-size: 17px; color: #eee5e6; line-height: 1.6; width: 420px; }
.hero__cta { display: flex; gap: 16px; }

/* ---- Startseite: Leistungen-Liste ----------------------------------------- */
.leistungen-liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  background: var(--linie);
  border: 1px solid var(--linie);
}
.leistung-item {
  display: flex; align-items: center; gap: 24px; min-width: 0;
  background: var(--karte); padding: 20px 24px; color: var(--text);
}
.leistung-item:hover { color: var(--text); }
.leistung-item__thumb {
  width: 88px; height: 88px; flex: none; border-radius: 50%;
  background-size: cover;
}
.leistung-item__body { flex: 1; min-width: 0; }
.leistung-item__title { font-weight: 700; font-size: 17px; }
.leistung-item__sub { font-size: 14px; color: var(--text-sek); margin-top: 5px; line-height: 1.5; }
.leistung-item__arrow { color: var(--rot); font-size: 20px; }

/* ---- Startseite: Galerie-Teaser ------------------------------------------- */
.teaser { padding-bottom: 88px; }
.teaser__head {
  padding: 0 var(--seite-pad) 32px;
  display: flex; align-items: baseline; justify-content: space-between;
}
.teaser__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px; gap: 2px;
}
.teaser__cell { background-size: cover; background-position: center; }
.teaser__cell--tall { grid-row: span 2; }

/* ---- Kontakt-Band --------------------------------------------------------- */
.kontaktband {
  background: var(--rot); color: #fff; padding: var(--seite-pad);
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.kontaktband__headline { font-weight: 200; font-size: 30px; }
.kontaktband__sub { font-size: 15px; color: var(--rosa); margin-top: 8px; }

/* ---- Eyebrow / Meta ------------------------------------------------------- */
.eyebrow {
  display: inline-block;
  font-size: 14px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
}
.eyebrow--rot { color: var(--rot); }
.eyebrow--rot-hell { color: var(--rot-hell); }
.eyebrow--rosa { color: var(--rosa); }
a.eyebrow--rosa:hover, a.eyebrow--rot-hell:hover { opacity: .85; }

/* ---- Dunkles Hero-Band ---------------------------------------------------- */
.hero-band { background: var(--dunkel); color: #fff; padding: 64px var(--seite-pad); }
.hero-band--split {
  padding: 72px var(--seite-pad);
  display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: center;
}
.hero-band__eyebrow { margin-bottom: 14px; }
.hero-band__title { font-weight: 200; font-size: 52px; line-height: 1.1; margin: 0 0 18px; }
.hero-band__lead { font-size: 17px; line-height: 1.6; color: #c9c2c3; margin: 0; max-width: 54ch; }
.hero-band__lead--narrow { max-width: 48ch; }

/* Polaroid-Rahmen (gekippte Fotos im dunklen Band) */
.polaroids { display: flex; gap: 20px; flex: none; }
.polaroid { display: block; height: auto; background: #fff; padding: 8px; box-shadow: var(--polaroid-schatten); }
.polaroid--l { transform: rotate(-2deg); }
.polaroid--r { transform: rotate(2deg); }

/* ---- Foto-Hero (full-bleed) für Detailseiten ------------------------------ */
.photo-hero { position: relative; background-size: cover; background-repeat: no-repeat; }
.photo-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,17,18,.75) 0%, rgba(20,17,18,.15) 60%);
}
.photo-hero__content {
  position: absolute; left: var(--seite-pad); right: var(--seite-pad); bottom: 48px; color: #fff;
}
.photo-hero__eyebrow { margin-bottom: 12px; }
.photo-hero__title { font-weight: 200; font-size: 52px; line-height: 1.1; margin: 0; }

/* ---- Leistungen-Übersicht: Karten ----------------------------------------- */
.karten { padding: 72px var(--seite-pad); display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.karte { display: block; color: var(--text); background: var(--karte); border: 1px solid var(--linie); }
.karte:hover { color: var(--text); }
.karte__img { aspect-ratio: 4/3; background-size: cover; }
.karte__body { padding: 22px 24px 26px; }
.karte__title { font-weight: 700; font-size: 18px; }
.karte__text { font-size: 14px; color: var(--text-sek); margin-top: 8px; line-height: 1.6; }
.karte__more { color: var(--rot); font-size: 14px; font-weight: 700; margin-top: 14px; }

/* ---- Zweispaltiger Intro mit Fakten-Box ----------------------------------- */
.intro { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; padding: 72px var(--seite-pad); align-items: start; }
.intro__title { font-weight: 200; font-size: 32px; margin: 0 0 20px; }
.intro__text { font-size: 16px; line-height: 1.75; color: var(--text-fliess); margin: 0; }
.intro__text + .intro__text { margin-top: 16px; }
.faktenbox { background: var(--flaeche); padding: 32px 36px; display: flex; flex-direction: column; gap: 18px; }
.faktenbox__title { font-weight: 700; font-size: 16px; }
.fakt { display: flex; gap: 14px; align-items: flex-start; }
.fakt__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rot); margin-top: 7px; flex: none; }
.fakt__text { font-size: 14.5px; line-height: 1.6; color: var(--text-fliess); }

/* ---- Beispiel-Galerien ---------------------------------------------------- */
.beispiele { background: var(--flaeche); padding: 72px var(--seite-pad); }
.beispiele__title { font-weight: 200; font-size: 32px; margin: 0 0 36px; }
.beispiele__grid { display: grid; gap: 14px; }
.beispiele__grid--4 { grid-template-columns: repeat(4, 1fr); }
.beispiele__grid--2 { grid-template-columns: repeat(2, 1fr); }
.beispiele__grid--masonry { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 280px; }
.beispiel { background-size: cover; background-position: center; }
.beispiel--34 { aspect-ratio: 3/4; }
.beispiel--43 { aspect-ratio: 4/3; }
.beispiel--tall { grid-row: span 2; }

/* ---- Ablauf-Schritte (Passbilder) ----------------------------------------- */
.ablauf { background: var(--flaeche); padding: 72px var(--seite-pad); }
.ablauf__title { font-weight: 200; font-size: 32px; margin: 0 0 44px; }
.ablauf__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.schritt { background: var(--karte); padding: 28px 26px; }
.schritt__n { font-weight: 200; font-size: 44px; color: var(--rot); line-height: 1; }
.schritt__title { font-weight: 700; font-size: 16px; margin: 16px 0 8px; }
.schritt__text { font-size: 14px; line-height: 1.6; color: var(--text-fliess); }

/* ---- Split-Feature (Foto + Text) ------------------------------------------ */
.split { display: grid; gap: 64px; padding: 72px var(--seite-pad); align-items: center; }
.split--photo-left { grid-template-columns: 1fr 1.4fr; }
.split__photos { display: flex; gap: 16px; }
.split__photo { width: 180px; height: auto; display: block; border: 1px solid var(--linie); }
.split__title { font-weight: 200; font-size: 32px; margin: 0 0 20px; }
.split__text { font-size: 16px; line-height: 1.75; color: var(--text-fliess); margin: 0; }

/* ---- Hausbesuch-Band (Passbilder) ----------------------------------------- */
.hausbesuch { background: var(--flaeche); padding: 64px var(--seite-pad); text-align: center; }
.hausbesuch__eyebrow { display: inline-block; margin-bottom: 14px; }
.hausbesuch__title { font-weight: 200; font-size: 32px; margin: 0 auto 18px; max-width: 22ch; }
.hausbesuch__text { font-size: 16px; line-height: 1.75; color: var(--text-fliess); margin: 0 auto; max-width: 60ch; }
.hausbesuch__cta { margin-top: 28px; }

/* ---- Galerie -------------------------------------------------------------- */
.galerie-head { padding: 64px var(--seite-pad) 32px; }
.galerie-head__title { font-weight: 200; font-size: 52px; margin: 0 0 28px; }
.filter { display: flex; gap: 10px; flex-wrap: wrap; }
.filter__btn {
  padding: 10px 20px; font-size: 14px; font-family: inherit; cursor: pointer;
  border: 1px solid #d8d3d4; background: #fff; color: var(--text);
}
.filter__btn.is-active { background: var(--rot); color: #fff; border-color: var(--rot); }
.masonry { padding: 16px var(--seite-pad) 88px; column-count: 3; column-gap: 6px; }
.masonry__item {
  display: inline-block; width: 100%; vertical-align: top;
  background-color: #eceaea; background-size: cover; background-position: center; background-repeat: no-repeat;
  margin-bottom: 6px; break-inside: avoid;
}
.masonry__item > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.masonry__item--quer { aspect-ratio: 2126/1535; }
.masonry__item--hoch { aspect-ratio: 1535/2126; }
.masonry__item.is-hidden { display: none; }

/* ---- Über mich ------------------------------------------------------------ */
.about { display: grid; grid-template-columns: 380px 1fr; gap: 72px; padding: 88px var(--seite-pad); align-items: start; }
.about__portrait { width: 340px; height: 340px; border-radius: 50%; background-size: cover; background-position: center; }
.about__title { font-weight: 200; font-size: 48px; line-height: 1.15; margin: 0 0 24px; }
.about__text { font-size: 16.5px; line-height: 1.8; color: var(--text-fliess); margin: 0 0 18px; }
.about__cta { display: flex; gap: 16px; margin-top: 14px; }
.btn--ghost-dark { color: var(--text); border: 1px solid #d8d3d4; font-weight: 400; }
.btn--ghost-dark:hover { color: var(--text); border-color: var(--rot); }
.faktenkarten { background: var(--flaeche); padding: 64px var(--seite-pad); display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.faktenkarte { background: var(--karte); padding: 28px 30px; }
.faktenkarte__title { font-weight: 700; font-size: 16px; color: var(--rot); margin-bottom: 10px; }
.faktenkarte__text { font-size: 14.5px; line-height: 1.65; color: var(--text-fliess); }

/* ---- Kontakt -------------------------------------------------------------- */
.kontakt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; padding: 88px var(--seite-pad); align-items: start; }
.kontakt > div { min-width: 0; }
.kontakt__title { font-weight: 200; font-size: 48px; line-height: 1.15; margin: 0 0 24px; }
.kontakt__lead { font-size: 16.5px; line-height: 1.8; color: var(--text-fliess); margin: 0 0 36px; max-width: 420px; }
.kontaktwege { display: flex; flex-direction: column; gap: 24px; }
.kontaktweg { display: flex; gap: 20px; align-items: flex-start; }
.kontaktweg > div { min-width: 0; }
.kontaktweg__icon {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  background: var(--rot); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.kontaktweg__label { font-weight: 700; font-size: 16px; }
.kontaktweg__value { font-size: 15.5px; color: var(--text-fliess); margin-top: 4px; }
.preise { background: var(--flaeche); padding: 40px 44px; }
.preise__title { font-weight: 200; font-size: 30px; margin: 0 0 28px; }
.preisliste { display: flex; flex-direction: column; }
.preis { display: flex; justify-content: space-between; gap: 24px; padding: 16px 0; border-bottom: 1px solid #e2dddd; }
.preis > div { min-width: 0; }
.preis__title { font-weight: 700; font-size: 15.5px; }
.preis__sub { font-size: 13.5px; color: var(--text-sek); margin-top: 3px; }
.preis__value { font-weight: 700; font-size: 15.5px; color: var(--rot); flex: none; }
.preise__note { font-size: 13px; color: var(--text-sek); margin-top: 20px; line-height: 1.6; }

/* ---- Rechtstexte (Impressum / Datenschutz) -------------------------------- */
.legal { max-width: 760px; padding: 72px var(--seite-pad) 96px; }
.legal__title { font-weight: 200; font-size: 44px; margin: 0 0 40px; hyphens: auto; overflow-wrap: break-word; }
.legal h2 { font-size: 20px; font-weight: 700; margin: 0 0 12px; }
.legal p { font-size: 15.5px; line-height: 1.75; color: var(--text-fliess); margin: 0 0 28px; }
.legal p:last-child { margin-bottom: 0; }
.mark { background: #fdf1c7; padding: 1px 6px; }
.legal__stand { margin-top: 40px; font-size: 14px; color: var(--text-sek); }
.hinweis { background: #fdf1c7; color: #7a6a20; padding: 12px 16px; line-height: 1.6; font-size: 14px; margin: 0 0 40px; }

/* ---- Footer --------------------------------------------------------------- */
.footer {
  padding: var(--seite-pad);
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px;
  font-size: 14px; color: var(--text-sek);
  border-top: 1px solid var(--linie); background: var(--flaeche);
}
.footer a { color: var(--text-sek); }
.footer a:hover { color: var(--rot-dunkel); }
.footer__brand-studio { font-size: 13px; }
.footer__brand-name { font-size: 17px; font-weight: 700; color: var(--rot); margin-bottom: 12px; }
.footer__col--right { text-align: right; }

/* ==========================================================================
   Burger-Navigation (Basis) + Responsive / Mobile
   ========================================================================== */
.nav-toggle { display: none; }
.nav-burger { display: none; }

@media (max-width: 820px) {
  :root { --seite-pad: 22px; }

  /* --- Navigation als Burger-Menü (CSS-only) --- */
  .header { position: relative; }
  .brand__logo { height: 58px; }
  .nav-burger {
    display: block; font-size: 30px; line-height: 1;
    color: var(--text); cursor: pointer; user-select: none;
  }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; background: #fff;
    border-bottom: 1px solid var(--linie); box-shadow: 0 10px 26px rgba(0,0,0,.08);
    z-index: 30;
  }
  .nav a { padding: 14px var(--seite-pad); border-top: 1px solid var(--linie); }
  .nav-toggle:checked ~ .nav { display: flex; }

  /* --- Hero (Startseite) --- */
  .hero { height: 460px; }
  .hero__content { bottom: 34px; gap: 14px; }
  .hero__title { font-size: 27px; }
  .hero__sub { width: auto; font-size: 14.5px; }
  .hero__cta { flex-wrap: nowrap; gap: 8px; }
  .hero__cta .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; text-align: center; padding: 12px 8px; font-size: 14px; }

  /* --- Sektionen allgemein --- */
  .section { padding: 48px var(--seite-pad); }
  .section__title { font-size: 28px; }

  /* --- Startseiten-Listen --- */
  .leistungen-liste { grid-template-columns: minmax(0, 1fr); }
  .leistung-item {
    display: grid; grid-template-columns: 60px 1fr;
    column-gap: 16px; row-gap: 6px; align-items: start; padding: 18px 20px;
  }
  .leistung-item__thumb { width: 60px; height: 60px; }
  .leistung-item__arrow { grid-column: 2; }   /* Pfeil unter dem Text als Klick-Hinweis */
  .teaser { padding-bottom: 48px; }
  .teaser__head { padding: 0 var(--seite-pad) 24px; }
  .teaser__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }

  /* --- Hero-Bänder (Detailseiten) --- */
  .hero-band, .hero-band--split {
    padding: 48px var(--seite-pad); grid-template-columns: 1fr; gap: 32px;
  }
  .hero-band__title, .photo-hero__title { font-size: 34px; }
  .polaroids { flex-wrap: wrap; }

  /* --- Leistungen-Übersicht --- */
  .karten { grid-template-columns: 1fr; padding: 48px var(--seite-pad); gap: 20px; }

  /* --- Intro + Fakten --- */
  .intro { grid-template-columns: 1fr; gap: 32px; padding: 48px var(--seite-pad); }
  .intro__title { font-size: 28px; }

  /* --- Beispiele --- */
  .beispiele { padding: 48px var(--seite-pad); }
  .beispiele__grid--4 { grid-template-columns: repeat(2, 1fr); }
  .beispiele__grid--masonry { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }

  /* --- Ablauf --- */
  .ablauf { padding: 48px var(--seite-pad); }
  .ablauf__grid { grid-template-columns: 1fr; gap: 14px; }

  /* --- Split-Feature --- */
  .split, .split--photo-left { grid-template-columns: 1fr; gap: 32px; padding: 48px var(--seite-pad); }
  .split__photos { flex-wrap: wrap; }

  /* --- Galerie --- */
  .galerie-head { padding: 40px var(--seite-pad) 24px; }
  .galerie-head__title { font-size: 34px; }
  .masonry { column-count: 2; padding: 12px var(--seite-pad) 56px; }

  /* --- Über mich --- */
  .about { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 48px var(--seite-pad); justify-items: start; }
  .about > div { width: 100%; min-width: 0; }
  .about__portrait { width: 100%; max-width: 340px; height: auto; aspect-ratio: 1; }
  .about__title { font-size: 32px; }
  .faktenkarten { grid-template-columns: 1fr; padding: 48px var(--seite-pad); }

  /* --- Kontakt --- */
  .kontakt { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 48px var(--seite-pad); }
  .kontakt__title { font-size: 32px; }

  /* --- Kontakt-Band --- */
  .kontaktband { flex-direction: column; align-items: flex-start; gap: 20px; padding: 40px var(--seite-pad); }

  /* --- Rechtstexte --- */
  .legal { padding: 48px var(--seite-pad) 64px; }
  .legal__title { font-size: 32px; }

  /* --- Footer --- */
  .footer { grid-template-columns: 1fr; gap: 20px; padding: 40px var(--seite-pad); }
  .footer__col--right { text-align: left; }
}