/* PL-FOTO — Seiten
   Layouts, die nur auf einzelnen Seitentypen vorkommen. Alles, was auf mehr
   als einem Seitentyp auftaucht, gehört nach components.css.
   Reihenfolge: reset → tokens → glass → components → pages


   ============================================================
   1 — SEITENKOPF (alle Unterseiten)
   Kein zweiter Hero. Eine Zeile Kicker, ein Titel, ein Absatz —
   darunter sofort der Inhalt. Der Grund bleibt sichtbar.
   ============================================================ */

.page-head {
  padding-block: calc(var(--kopf-h) + var(--space-16)) var(--space-16);
  margin-block-start: calc(-1 * var(--kopf-h) - 1px);   /* + Haarlinie der Kopfzeile */            /* Kopfzeile liegt im Seitenkopf */
  border-block-end: 1px solid var(--c-line);
}
.page-head .lead { margin-block-start: var(--space-6); }
.page-head h1 { max-inline-size: 20ch; }
/* Zweite Zeile der H1: Ort und Leistung für Suchmaschinen, optisch als Unterzeile */
.titel-zusatz {
  display: block; margin-block-start: var(--space-3);
  font-size: var(--fs-lg); line-height: 1.2; letter-spacing: 0; text-transform: none;
  font-weight: 400; color: var(--c-text-muted); max-inline-size: 32ch; text-wrap: balance;
}

/* Variante mit Bildstreifen: das Motiv trägt, der Text steht darunter. */
.page-head--media { padding-block-start: 0; border-block-end: 0; }
.page-head--media .page-head__media {
  position: relative;
  block-size: clamp(320px, 46svh, 520px);
  margin-block-end: var(--space-12);
}
.page-head--media .page-head__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* Variante „größer“: mehr Bildfläche, wenn das Motiv sie braucht — z. B. ein
   tief im Bild sitzendes Auto, das im normalen Streifen zu knapp beschnitten würde. */
.page-head--media .page-head__media--xl { block-size: clamp(420px, 64svh, 760px); }

/* Variante „ganzer Bildschirm“: der Seitenkopf füllt genau den ersten Bildschirm.
   Der Grid-Container braucht eine feste Höhe — sonst hat die 1fr-Zeile keine
   Fläche zu verteilen und fällt auf die Eigenhöhe des Bildes zurück. */
.page-head--media:has(.page-head__media--voll) {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  row-gap: var(--space-12);
  block-size: 100svh;
  padding-block-end: var(--space-12);
}
.page-head--media .page-head__media--voll {
  block-size: 100%;
  margin-block-end: 0;          /* Abstand trägt row-gap */
}
/* Das Motiv füllt die Fläche randlos; die Sonne sitzt rechts, der Strand unten —
   object-position hält beides im Beschnitt. */
.page-head--media .page-head__media--voll picture { display: block; block-size: 100%; }
.page-head--media .page-head__media--voll img { object-fit: cover; object-position: 62% 60%; }
.page-head--media .page-head__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgb(11 14 24 / .70) 0%, rgb(11 14 24 / .10) 30%, transparent 55%),
    linear-gradient(to top,    rgb(11 14 24 / .85) 0%, transparent 60%);
}

/* Variante „geteilt“: Text links, Bild rechts im vollen Seitenverhältnis —
   für Motive, die ein breiter Streifen zu stark beschneiden würde (Portrait). */
.page-head__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-12);
  align-items: center;
}
.page-head__raster .page-facts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
.page-head__bild { margin: 0; }
.page-head__bild picture { display: block; }
/* <picture> als Hülle: volle Höhe, sonst rechnet block-size:100% des Bildes gegen die Hülle */
.page-head--media .page-head__media picture { display: block; block-size: 100%; }
.page-head__bild img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-l2);
}
.page-head__bild figcaption { margin-block-start: var(--space-3); font-size: var(--fs-xs); color: var(--c-text-faint); }
@media (max-width: 960px) {
  .page-head__raster { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .page-head__bild { order: -1; }
}

/* Kennzahlen unter dem Seitenkopf — dieselbe Bauweise wie im Hero. */
.page-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--space-8);
  margin-block-start: var(--space-12);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--c-line-strong);
}
.page-facts dt {
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-block-end: var(--space-1);
}
.page-facts dd { font-size: var(--fs-md); }


/* ============================================================
   2 — LEISTUNGSSEITE
   Galerie oben, Erklärtext unten. Wer Bilder sucht, soll nicht
   an einem Textblock vorbeiscrollen müssen.
   ============================================================ */

/* Ablauf in Schritten. Die Nummer ist eine Textmarke, kein Kreis. */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--grid-gap);
  margin: 0; padding: 0;
  list-style: none;
  counter-reset: schritt;
}
.steps > li {
  counter-increment: schritt;
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--c-line-strong);
}
.steps > li::before {
  content: counter(schritt, decimal-leading-zero);
  display: block;
  margin-block-end: var(--space-4);
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: var(--fs-lg);
  font-variant-numeric: tabular-nums;
  color: var(--c-accent);
}
.steps h3 { font-size: var(--fs-md); margin-block-end: var(--space-2); }
.steps p { margin: 0; font-size: var(--fs-sm); color: var(--c-text-muted); }

/* Was drin ist / was es kostet — Beschreibungsliste mit Haarlinien. */
.info-list { display: grid; gap: 0; margin: 0; }
.info-list > div {
  display: grid;
  gap: var(--space-2) var(--space-8);
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--c-line);
}
@media (min-width: 700px) {
  .info-list > div { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: baseline; }
}
.info-list dt {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.info-list dd { margin: 0; }

/* FAQ auf nativen <details>. Kein JavaScript, funktioniert auch ohne. */
.faq { display: grid; }
.faq > details { border-block-end: 1px solid var(--c-line); }
.faq > details > summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-block-size: 56px;
  padding-block: var(--space-4);
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: var(--fs-md);
  cursor: pointer;
  list-style: none;
}
.faq > details > summary::-webkit-details-marker { display: none; }
.faq > details > summary::after {
  content: "+";
  margin-inline-start: auto;
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--c-accent);
}
.faq > details[open] > summary::after { content: "–"; }
.faq > details > summary:hover { color: var(--c-accent); }
.faq > details > div {
  padding-block-end: var(--space-6);
  max-inline-size: var(--measure);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

/* Hinweis auf eine Galerie, für die noch keine Bilder vorliegen. */
.gallery-empty {
  display: grid;
  place-items: center;
  gap: var(--space-4);
  padding: var(--space-24) var(--gutter);
  border: 1px dashed var(--c-line-strong);
  text-align: center;
  color: var(--c-text-muted);
}
.gallery-empty p { margin: 0; max-inline-size: 46ch; }


/* ============================================================
   3 — ÜBER MICH
   ============================================================ */

.about { display: grid; gap: var(--space-12); align-items: start; }
@media (min-width: 860px) {
  .about { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-16); }
  .about__media { position: sticky; inset-block-start: calc(var(--kopf-h) + var(--space-8)); }
}
.about__media { margin: 0; }
/* Das Portrait ist ein Studiobild mit eigenem Hintergrund — Haarlinien-Rahmen
   statt Verlauf, damit die Bildkante sauber auf dem Grund steht. */
.about__media img {
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-l2);
}
.about__media figcaption {
  margin-block-start: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--c-text-faint);
}
.about__text > * + * { margin-block-start: var(--space-6); }
.about__text h2 { font-size: var(--fs-lg); margin-block-start: var(--space-12); }
.about__text p { max-inline-size: var(--measure); }
.about__bild { margin-inline: 0; margin-block-end: 0; }
.about__bild img { inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--c-line); box-shadow: var(--shadow-l2); }
.about__bild figcaption { margin-block-start: var(--space-3); font-size: var(--fs-xs); color: var(--c-text-faint); }


/* ============================================================
   4 — AKTUELLES: LISTE UND BEITRAG
   ============================================================ */

.posts { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.posts > li { border-block-start: 1px solid var(--c-line); }
.posts > li:last-child { border-block-end: 1px solid var(--c-line); }

.post-teaser {
  position: relative;
  display: grid;
  gap: var(--space-4) var(--space-12);
  padding-block: var(--space-8);
  align-items: start;
  transition: background-color var(--dur-fast) var(--ease-out);
}
@media (min-width: 760px) {
  .post-teaser { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) minmax(0, 16rem); }
  .post-teaser__media { order: 3; }
}
.post-teaser:hover { background: rgb(236 238 242 / .03); }
.post-teaser__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.post-teaser h2 { font-size: var(--fs-lg); margin-block-end: var(--space-3); }
.post-teaser h2 a { text-decoration: none; }
.post-teaser h2 a::after { content: ""; position: absolute; inset: 0; }
.post-teaser h2 a:hover { color: var(--c-accent); }
.post-teaser p { margin: 0; font-size: var(--fs-sm); color: var(--c-text-muted); max-inline-size: var(--measure); }
.post-teaser__media img { inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Einzelbeitrag: eine schmale Spalte, Bilder dürfen ausbrechen. */
.post { --post-w: var(--container-text); }
.post__head { margin-block-end: var(--space-12); }
.post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block-end: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}
.post__body > * + * { margin-block-start: var(--space-6); }
.post__body p, .post__body ul, .post__body ol { max-inline-size: var(--measure); }
.post__body h2 { font-size: var(--fs-lg); margin-block-start: var(--space-16); }
.post__body ul, .post__body ol { padding-inline-start: 1.2em; display: grid; gap: var(--space-2); }
.post__body blockquote {
  margin: 0;
  padding-inline-start: var(--space-6);
  border-inline-start: 2px solid var(--c-accent);
  font-size: var(--fs-md);
}
/* Bild bricht aus der Textspalte aus, solange Platz ist. */
.post__body figure { margin: var(--space-12) 0; }
@media (min-width: 1100px) {
  .post__body figure { inline-size: min(var(--container), calc(100vw - 2 * var(--gutter))); margin-inline: calc((var(--container-text) - min(var(--container), 100vw - 2 * var(--gutter))) / 2); }
}
.post__body figcaption { margin-block-start: var(--space-3); font-size: var(--fs-xs); color: var(--c-text-faint); }


/* ============================================================
   5 — KONTAKT
   Formular links, Direktwege rechts. Wer lieber anruft, soll nicht
   erst durch ein Formular scrollen.
   ============================================================ */

.contact { display: grid; gap: var(--space-16); align-items: start; }
@media (min-width: 900px) {
  .contact { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--space-16); }
}
.contact__aside { display: grid; gap: var(--space-8); }
.contact__block { padding-block-start: var(--space-6); border-block-start: 1px solid var(--c-line-strong); }
.contact__block h2 {
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-block-end: var(--space-3);
}
.contact__big {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: var(--fs-lg);
  text-decoration: none;
  color: var(--c-text);
}
.contact__big:hover { color: var(--c-accent); }
.contact__block address { font-style: normal; color: var(--c-text-muted); line-height: var(--lh-loose); }


/* ============================================================
   6 — RECHTSTEXTE
   Eine schmale Spalte, lockere Zeilen, sprungfähige Gliederung.
   ============================================================ */

.legal { max-inline-size: var(--container-text); line-height: var(--lh-loose); }
.legal h2 {
  font-size: var(--fs-lg);
  margin-block: var(--space-16) var(--space-4);
  scroll-margin-block-start: 6rem;
}
.legal h3 { font-size: var(--fs-md); margin-block: var(--space-8) var(--space-3); text-transform: none; }
.legal p, .legal ul, .legal ol { margin-block-end: var(--space-4); }
.legal ul, .legal ol { padding-inline-start: 1.2em; }
.legal li + li { margin-block-start: var(--space-2); }
.legal address { font-style: normal; }
.legal dl > div { padding-block: var(--space-3); border-block-end: 1px solid var(--c-line); }
.legal dt { color: var(--c-text-muted); font-size: var(--fs-sm); }
.legal dd { margin: 0; }

/* Inhaltsverzeichnis für die Datenschutzerklärung */
.toc {
  margin-block-end: var(--space-16);
  padding-block: var(--space-6);
  border-block: 1px solid var(--c-line);
}
.toc h2 {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: 0 0 var(--space-4);
}
.toc ol {
  margin: 0; padding: 0;
  list-style: none;
  counter-reset: toc;
  display: grid;
  gap: var(--space-2);
  font-size: var(--fs-sm);
}
.toc li { counter-increment: toc; }
.toc a { color: var(--c-text); text-decoration: none; }
.toc a::before { content: counter(toc, decimal-leading-zero) " "; color: var(--c-text-faint); font-variant-numeric: tabular-nums; }
.toc a:hover { color: var(--c-accent); }

.legal-updated {
  margin-block-start: var(--space-16);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--c-line);
  font-size: var(--fs-xs);
  color: var(--c-text-faint);
}


/* ============================================================
   7 — 404
   ============================================================ */

.notfound { display: grid; place-items: center; gap: var(--space-8); padding-block: var(--space-32); text-align: center; }
.notfound p { color: var(--c-text-muted); max-inline-size: 44ch; }