/* ==========================================================================
   DAN Fotografie — Stylesheet der Website

   Grundlage ist das Markenkit (52_Marke/DAN-Fotografie-Markenkit):
   Leinen als Fläche, Tabak für Logo, Titel und Leistungsliste,
   Hanken Grotesk als einzige Schrift, eckig, keine Schatten.

   Inhalt
     1. Schrift
     2. Farben und Maße  ← DER EINZIGE BLOCK, DEN DU GEFAHRLOS ÄNDERN KANNST
     3. Grundlagen
     4. Typografie
     5. Knöpfe, Links, Bausteine
     6. Bilder
     7. Kopf
     8. Startseite
     9. Unterseiten (Übersicht, Leistung, Über mich, Rechtstexte)
    10. Anfrage und Formular
    11. Fuß
    12. Schmale Bildschirme
   ========================================================================== */


/* ===== 1. Schrift ==========================================================
   Hanken Grotesk (= HK Grotesk aus Canva), SIL Open Font License.
   Liegt in gestaltung/schriften/ und wird vom eigenen Server geladen —
   keine Verbindung zu Google, kein Cookie-Banner nötig. */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("schriften/HankenGrotesk-VF.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("schriften/HankenGrotesk-Italic-VF.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}


/* ===== 2. Farben und Maße ==================================================
   Einen Hexwert zu tauschen ist ungefährlich. Die Namen entsprechen dem
   Markenkit. Tabak auf Leinen ist nur für große Schrift gedacht (ab 22 px),
   Fließtext läuft in Walnuss oder Espresso. */
:root {
  --leinen:   #eae4d6;   /* Fläche, wie die Visitenkarte */
  --papier:   #f6f2ea;   /* hellere Fläche: Felder, Kontaktkarte */
  --sand:     #ddd3bf;   /* abgesetzte Bänder, Bildplätze ohne Foto */
  --linie:    #bfb197;   /* Haarlinien */
  --tabak:    #8f6c40;   /* Marke: Logo, Titel, Leistungsliste, Knöpfe */
  --walnuss:  #5c4326;   /* Fließtext, Knopf beim Darüberfahren */
  --espresso: #2a2119;   /* stärkster Kontrast */
  --gedaempft:#6b5843;   /* Nebentext, Bildunterschriften */
  --fjord:    #465c70;   /* Textlinks und Fokus, sparsam */
  --nebel:    #d3dbe0;   /* Hinweiskästen */
  --moos:     #55603d;   /* „Gesendet“ */
  --rost:     #963c28;   /* Fehler im Formular */

  --breite:   1240px;    /* größte Inhaltsbreite */
  --rand:     48px;      /* Seitenrand */
  --abstand:  96px;      /* Abstand zwischen großen Abschnitten */
  --schrift:  "Hanken Grotesk", "HK Grotesk", "Helvetica Neue", Arial, sans-serif;
}


/* ===== 3. Grundlagen ====================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--leinen); color: var(--walnuss);
  font-family: var(--schrift); font-size: 17px; line-height: 28px; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; }
a:hover { color: var(--espresso); }
:focus-visible { outline: 2px solid var(--fjord); outline-offset: 2px; }
.wrap { max-width: var(--breite); margin: 0 auto; padding-left: var(--rand); padding-right: var(--rand); }

.sprung {
  position: absolute; left: 16px; top: -60px; z-index: 50;
  background: var(--espresso); color: var(--leinen); padding: 10px 16px; text-decoration: none;
}
.sprung:focus { top: 12px; color: var(--leinen); }


/* ===== 4. Typografie ====================================================== */
.display { font-size: clamp(40px, 5vw, 64px); line-height: 1; font-weight: 700; letter-spacing: -0.01em; color: var(--tabak); }
.h1      { font-size: 44px; line-height: 50px; font-weight: 700; letter-spacing: -0.005em; color: var(--tabak); }
.h2      { font-size: 30px; line-height: 38px; font-weight: 600; color: var(--espresso); }
.h3      { font-size: 22px; line-height: 30px; font-weight: 600; color: var(--espresso); }
.lead    { font-size: 20px; line-height: 32px; color: var(--walnuss); }
.text    { color: var(--walnuss); }
.ink     { font-size: 20px; line-height: 32px; color: var(--espresso); }
.klein   { font-size: 14px; line-height: 22px; }
.label   { font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--walnuss); }
.stapel  { display: flex; flex-direction: column; gap: 16px; }
.schmal  { max-width: 640px; }

/* [eckige Klammern] in den Texten: noch offen, farbig hervorgehoben */
.offen-wert { color: var(--fjord); }


/* ===== 5. Knöpfe, Links, Bausteine ======================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  font-family: inherit; font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: .01em;
  padding: 12px 24px; border-radius: 2px; border: 1px solid var(--tabak);
  background: var(--tabak); color: #fff; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--walnuss); border-color: var(--walnuss); color: #fff; }
.btn.o { background: transparent; color: var(--walnuss); border-color: var(--tabak); }
.btn.o:hover { background: var(--papier); color: var(--espresso); border-color: var(--walnuss); }

.tlink { color: var(--fjord); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.tlink:hover { color: var(--fjord); text-decoration-thickness: 2px; }
.tlink.klein { font-size: 15px; }

.liste li { position: relative; padding: 12px 0 12px 24px; border-bottom: 1px solid var(--linie); }
.liste li:first-child { border-top: 1px solid var(--linie); }
.liste li::before { content: ""; position: absolute; left: 0; top: 25px; width: 12px; height: 1px; background: var(--tabak); }

.zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--linie); }
.zeile:first-child { border-top: 1px solid var(--linie); }
.z-name { color: var(--espresso); }
.z-zusatz { font-size: 14px; line-height: 22px; color: var(--gedaempft); }
.z-preis { font-size: 22px; line-height: 30px; font-weight: 600; color: var(--tabak); white-space: nowrap; }

.hinweis { margin-top: 16px; font-size: 14px; line-height: 22px; color: var(--gedaempft); }

.blaettern { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--linie); }
.krumen { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gedaempft); }
.krumen a { text-decoration: none; }
.krumen a:hover { text-decoration: underline; text-underline-offset: .22em; }

.abschnitt { padding-bottom: var(--abstand); }
.abschnitt-kopf { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 32px; }
.abschnitt-oben { margin-top: var(--abstand); }
.abstand-oben { margin-top: 24px; }
.abstand-oben-gross { margin-top: 48px; }
.band { background: var(--sand); padding: var(--abstand) 0; }


/* ===== 6. Bilder ===========================================================
   Jedes Seitenverhältnis steht hier genau einmal. Beschnitten wird über
   object-fit, das Original bleibt unverändert. */
.bild-hoch { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: var(--sand); }
.bild-leer { display: block; }
.portraet  { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--sand); }
.bildtext { margin-top: 12px; font-size: 12px; line-height: 18px; letter-spacing: .02em; color: var(--gedaempft); }
.bildtext b { font-weight: 700; color: var(--tabak); margin-right: 8px; }


/* ===== 7. Kopf ============================================================ */
.kopf { position: sticky; top: 0; z-index: 20; background: var(--leinen); }
.kopf-in { display: flex; align-items: center; gap: 32px; min-height: 80px; }
.kopf-logo { display: block; width: 51px; color: var(--tabak); flex: none; }
.kopf-logo:hover { color: var(--walnuss); }
.kopf-logo svg { display: block; width: 100%; height: auto; fill: currentColor; }
.nav { display: flex; gap: 32px; margin-left: auto; }
.nav a {
  font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--walnuss); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; white-space: nowrap;
}
.nav a:hover, .nav a.on { color: var(--espresso); border-bottom-color: currentColor; }


/* ===== 8. Startseite ======================================================
   Der Öffner übersetzt die Visitenkarte: Wortmarke oben links, die
   Leistungsliste rechts auf gleicher Höhe. Die linke Spalte richtet sich in
   der Höhe nach der Liste — Wortmarke oben, Knöpfe unten bündig. */
.oeffner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "links liste";
  column-gap: 64px; align-items: stretch; padding-top: 96px; padding-bottom: 120px;
}
.o-links { grid-area: links; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.o-titel {
  grid-area: titel; font-size: clamp(40px, 6.4vw, 88px); line-height: 1; font-weight: 700;
  letter-spacing: -0.01em; color: var(--tabak); text-box: trim-both cap alphabetic;
}
.o-text { grid-area: text; max-width: 440px; }
.knoepfe { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.knoepfe .tlink { font-size: 15px; }
.o-liste {
  grid-area: liste; align-self: start; text-align: right;
  font-size: clamp(26px, 2.7vw, 36px); line-height: 1.38; font-weight: 400;
  text-box: trim-both cap alphabetic;
}
.leist a, .leist span { color: var(--tabak); text-decoration: none; transition: color .15s ease; }
.leist a:hover { color: var(--espresso); }

.kacheln { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
.kachel { display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
.kachel .bild-hoch { transition: opacity .15s ease; }
a.kachel:hover .bild-hoch { opacity: .8; }
a.kachel:hover .kachel-titel { color: var(--espresso); }
.kachel-text { display: flex; flex-direction: column; }
.kachel-titel { font-size: 22px; line-height: 30px; font-weight: 600; color: var(--tabak); }
.kachel-preis { font-size: 14px; line-height: 22px; color: var(--gedaempft); }

.ueber-kurz { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 48px; align-items: start; }
.ueber-kurz.ohne-bild { grid-template-columns: minmax(0, 1fr); }
.ueber-kurz .stapel { max-width: 640px; gap: 20px; }

.kontakt-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.kontakt-text { max-width: 480px; gap: 20px; }
.kontakt { display: flex; gap: 32px; align-items: flex-start; }
.senkrecht {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 20px; line-height: 24px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tabak);
}
.kontakt-liste { display: grid; gap: 24px; min-width: 0; }
.kontakt-liste dt { font-size: 14px; line-height: 22px; color: var(--walnuss); text-decoration: underline; text-underline-offset: .22em; }
.kontakt-liste dd { margin-top: 4px; font-size: 20px; line-height: 30px; color: var(--espresso); overflow-wrap: anywhere; }
.kontakt-liste dd a { text-decoration: none; }
.kontakt-liste dd a:hover { text-decoration: underline; text-underline-offset: .22em; }


/* ===== 9. Unterseiten ===================================================== */
.seite { padding-top: 48px; padding-bottom: var(--abstand); }
.seitenkopf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; margin: 32px 0 64px; }
.seitenkopf .stapel { max-width: 640px; }
.preis { margin-top: 20px; color: var(--gedaempft); }

/* Übersicht: zwei Spalten mit Trennlinien */
.kat-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kat { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 24px; align-items: start; padding: 32px 0; border-bottom: 1px solid var(--linie); text-decoration: none; }
.kat:nth-child(1), .kat:nth-child(2) { border-top: 1px solid var(--linie); }
.kat:nth-child(odd)  { padding-right: 44px; }
.kat:nth-child(even) { padding-left: 44px; border-left: 1px solid var(--linie); }
.kat .bild-hoch { transition: opacity .15s ease; }
a.kat:hover .bild-hoch { opacity: .8; }
a.kat:hover .kat-titel { color: var(--espresso); }
.kat-text { display: flex; flex-direction: column; min-width: 0; }
.kat-kopf { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; }
.kat-titel { font-size: 24px; line-height: 30px; font-weight: 600; color: var(--tabak); }
.kat-preis { white-space: nowrap; color: var(--gedaempft); }
.kat-teaser { margin-top: 10px; font-size: 15px; line-height: 24px; color: var(--walnuss); }

/* Leistung */
.galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.galerie.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zwei-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; align-items: start; }
.zwei-spalten .h2 { margin-bottom: 24px; }
.ablauf { margin-top: var(--abstand); background: var(--sand); padding: 48px; }
.ablauf .h2 { margin-bottom: 32px; }
.schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-bottom: 40px; }
.schritte .nummer { color: var(--tabak); }
.schritte .h3 { margin-top: 8px; }
.schritte .text { margin-top: 8px; font-size: 15px; line-height: 24px; }

/* Über mich */
.ueber-seite { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 96px; align-items: start; margin-top: 32px; }
.ueber-seite.ohne-bild { grid-template-columns: minmax(0, 1fr); }
.ueber-seite .stapel { max-width: 640px; gap: 20px; }
.ueber-seite .display { margin-bottom: 12px; }
.ueber-seite .portraet { margin-top: 8px; }

/* Rechtstexte */
.rechtstext { max-width: 680px; margin-top: 16px; }
.rechtstext .h3 { margin: 32px 0 8px; }
.rechtstext p { margin-top: 8px; }
.rechtstext .hinweis { margin-top: 32px; }


/* ===== 10. Anfrage und Formular =========================================== */
.anfrage-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: start; margin-top: 32px; }
.anfrage-raster .stapel { max-width: 600px; }
.anfrage-seite { display: flex; flex-direction: column; gap: 24px; }
.karte { background: var(--papier); padding: 40px; }
.karte .kontakt-liste dd { font-size: 17px; line-height: 26px; }
.kennenlernen { background: var(--nebel); color: var(--espresso); padding: 24px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 24px; }
.kennenlernen strong { color: var(--fjord); }
.kennenlernen .text { color: var(--espresso); }
.kennenlernen .klein { color: var(--walnuss); }
.kalender { margin-top: 64px; scroll-margin-top: 96px; }
.kalender iframe { display: block; width: 100%; border: 0; background: #fff; }
.kalender .klein { margin-top: 12px; text-align: center; }

.formular { display: grid; gap: 24px; max-width: 680px; }
.zwei-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.feld { display: grid; gap: 8px; min-width: 0; }
.feld label { font-size: 14px; line-height: 22px; font-weight: 600; color: var(--walnuss); }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 52px; padding: 12px 16px;
  font: 400 17px/26px var(--schrift); color: var(--espresso);
  background: var(--papier); border: 1px solid var(--tabak); border-radius: 2px;
}
.feld textarea { min-height: 156px; resize: vertical; }
.feld input::placeholder, .feld textarea::placeholder { color: var(--gedaempft); }
.feld.mit-fehler input, .feld.mit-fehler textarea { border: 2px solid var(--rost); }
.feld-fehler { font-size: 14px; line-height: 22px; font-weight: 600; color: var(--rost); }
.haken { display: flex !important; gap: 12px; align-items: flex-start; font-weight: 400 !important; }
.haken input { width: 20px; height: 20px; min-height: 0; margin: 1px 0 0; padding: 0; accent-color: var(--tabak); flex: none; }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.meldung { padding: 16px 24px; font-size: 15px; line-height: 24px; color: var(--espresso); background: var(--papier); border-left: 0; }
.meldung.erfolg strong { color: var(--moos); }
.meldung.fehler strong { color: var(--rost); }
.meldung.fehler { margin-bottom: 24px; }


/* ===== 11. Fuß ============================================================ */
.fuss { border-top: 1px solid var(--linie); }
.fuss-in { padding-top: 64px; padding-bottom: 32px; }
.fuss-raster { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 48px; }
.fuss-marke { display: flex; flex-direction: column; gap: 16px; }
.fuss-marke p { font-size: 14px; line-height: 22px; color: var(--gedaempft); max-width: 300px; }
.fuss-logo { display: block; width: 232px; color: var(--tabak); }
.fuss-logo svg { display: block; width: 100%; height: auto; fill: currentColor; }
.fuss .label { margin-bottom: 16px; }
.fuss ul { display: grid; gap: 6px; font-size: 14px; line-height: 22px; }
.fuss ul a { color: var(--walnuss); text-decoration: none; }
.fuss ul a:hover { color: var(--espresso); text-decoration: underline; text-underline-offset: .22em; }
.fuss-aus { color: var(--gedaempft); }
.fuss-aus em { font-style: normal; font-size: 12px; letter-spacing: .02em; margin-left: 4px; }
.fuss-ende { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--linie); font-size: 14px; line-height: 22px; color: var(--gedaempft); }


/* ===== 12. Schmale Bildschirme ============================================ */
@media (max-width: 1100px) {
  .kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  :root { --rand: 24px; --abstand: 72px; }
  .seitenkopf, .zwei-spalten, .kontakt-raster, .anfrage-raster { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ueber-kurz, .ueber-seite { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ueber-kurz .portraet { max-width: 160px; }
  .ueber-seite .portraet { max-width: 200px; order: -1; margin-top: 0; }
  .kat-raster { grid-template-columns: minmax(0, 1fr); }
  .kat:nth-child(odd), .kat:nth-child(even) { padding-left: 0; padding-right: 0; border-left: 0; }
  .kat:nth-child(2) { border-top: 0; }
  .schritte { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h1 { font-size: 36px; line-height: 42px; }
}
@media (max-width: 600px) {
  :root { --rand: 16px; --abstand: 64px; }
  body { font-size: 16px; line-height: 26px; }
  .kopf-in { gap: 14px; min-height: 64px; }
  .kopf-logo { width: 40px; }
  .nav { gap: 16px; }
  .nav a { font-size: 11px; letter-spacing: .1em; }
  .kopf .btn { min-height: 40px; padding: 8px 12px; font-size: 14px; }

  .oeffner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titel" "liste" "text"; row-gap: 40px; padding-top: 48px; padding-bottom: 72px; }
  .o-links { display: contents; }
  .o-liste { text-align: left; }
  .o-titel { font-size: 9.4vw; white-space: nowrap; }

  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .kachel-titel { font-size: 19px; line-height: 26px; }
  .kat { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
  .galerie, .galerie.zwei, .zwei-felder { grid-template-columns: minmax(0, 1fr); }
  .ablauf { padding: 32px 20px; }
  .karte { padding: 28px 20px; }
  .kontakt { gap: 20px; }
  .kontakt-liste dd { font-size: 18px; line-height: 28px; }
  .fuss-raster { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .h2 { font-size: 26px; line-height: 34px; }
  .ink, .lead { font-size: 18px; line-height: 29px; }
}
@media (max-width: 360px) {
  .kopf-in { gap: 10px; }
  .kopf-logo { width: 34px; }
  .nav { gap: 12px; }
  .nav a { letter-spacing: .06em; }
  .kopf .btn { padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print { .kopf, .fuss, .knoepfe, .blaettern { display: none; } body { background: #fff; } }