/* =========================================================
   Philipp Dias – Stylesheet
   Schrift: Arial (Systemschrift, wird nicht nachgeladen,
   daher keine Lizenz- oder Datenschutzfragen).
   ========================================================= */

:root {
  --weiss: #ffffff;
  --schwarz: #000000;
  --grau: #6f6f6f;
  --rand: 32px;
  --kopf-h: 76px;
  --schrift: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--schrift);
  font-size: 15px;
  line-height: 1.5;
  color: var(--schwarz);
  background: var(--weiss);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }

a:focus-visible,
button:focus-visible,
.bild:focus-visible {
  outline: 2px solid var(--schwarz);
  outline-offset: 3px;
}

.unsichtbar {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Kopfzeile ---------- */

.kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 32px;
  min-height: var(--kopf-h);
  padding: 0 var(--rand);
}

.kopf .name {
  display: flex;
  flex-direction: column;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  padding: 10px 0;
}

/* kleine Zeile unter dem Namen, z. B. „Photography“ */
.kopf .name-zusatz {
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.03em;
  margin-top: 3px;
}

.reiter {
  display: flex;
  gap: 30px;
  list-style: none;
}

.reiter a,
.fuss a {
  display: inline-block;
  padding: 6px 0;
}

.reiter a:hover,
.reiter a[aria-current="page"],
.fuss a:hover,
.fuss a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.menue-knopf {
  display: none;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 12px 0;
}

/* Kompaktes Menü: auf schmalen Bildschirmen und immer dann,
   wenn die Reiter nicht in eine Zeile passen (setzt das Skript) */
.js .kopf.kompakt .menue-knopf { display: block; }
.js .kopf.kompakt nav { width: 100%; }
.js .kopf.kompakt .reiter { display: none; flex-direction: column; gap: 0; padding: 4px 0 20px; }
.js .kopf.kompakt.offen .reiter { display: flex; }
.js .kopf.kompakt .reiter a { font-size: 20px; padding: 8px 0; }

@media (max-width: 760px) {
  .js .kopf .menue-knopf { display: block; }
  .js .kopf nav { width: 100%; }
  .js .kopf .reiter { display: none; flex-direction: column; gap: 0; padding: 4px 0 20px; }
  .js .kopf.offen .reiter { display: flex; }
  .js .kopf .reiter a { font-size: 20px; padding: 8px 0; }
}

main { flex: 1 0 auto; }

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

.fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--rand) 16px;
  font-size: 13px;
}

.fuss ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
  list-style: none;
}

/* ---------- Startseite: ein großes Bild ---------- */

/* Das Bild füllt genau den Platz zwischen Kopf und Fußzeile,
   egal wie hoch die beiden gerade sind. */
.start {
  position: relative;
  flex: 1 1 auto;
  min-height: 240px;
}

.start img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--rand);
  width: calc(100% - 2 * var(--rand));
  height: 100%;
  object-fit: contain;       /* ganzes Bild, nichts abgeschnitten */
  object-position: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.start img:not(:first-of-type) { display: none; }

/* Variante: randlos und bildfüllend (wird dabei beschnitten) */
.start.vollbild img { left: 0; width: 100%; object-fit: cover; }

/* ---------- Galerie: Bilder direkt aneinander ---------- */

.galerie {
  --zeile: clamp(220px, 27vw, 440px);   /* Wunschhöhe einer Zeile */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 0 var(--rand) 48px;
}

.galerie.gross { --zeile: clamp(260px, 40vw, 640px); }

.galerie::after { content: ""; flex-grow: 999999; }

.bild {
  position: relative;
  display: block;
  flex-grow: var(--g, 150);
  flex-basis: calc(var(--zeile) * var(--r, 1.5));
  aspect-ratio: var(--r, 1.5);
  overflow: hidden;
  background: #f3f3f3;
  cursor: zoom-in;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

a.bild { cursor: pointer; }

/* Zeilenaufteilung per Skript: jede Zeile möglichst nah an der Wunschhöhe */
.galerie.justiert::after { display: none; }
.galerie.justiert .bild { flex-basis: calc(var(--r, 1.5) * 10px); }
.galerie.justiert .bild.letzte {
  flex-grow: 0;
  flex-basis: calc(var(--zeile) * var(--r, 1.5));
  max-width: 100%;
}
.umbruch { flex-basis: 100%; height: 0; }

.bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;      /* Rechtsklick trifft nicht das Bild */
  user-select: none;
  -webkit-user-drag: none;
}

.bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--schwarz);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.bildtext {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 15px;
  z-index: 1;
  color: var(--weiss);
  font-size: 14px;
  line-height: 1.4;
  opacity: 0;
  transition: opacity 0.25s ease;
}

@media (hover: hover) {
  .bild:hover::after { opacity: 0.55; }
  .bild:hover .bildtext { opacity: 1; }
}

.bild:focus-visible::after { opacity: 0.55; }
.bild:focus-visible .bildtext { opacity: 1; }

/* Ohne Maus: Serientitel im Journal bleiben sichtbar */
@media (hover: none) {
  .serien .bild::after {
    opacity: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 45%);
  }
  .serien .bildtext { opacity: 1; }
}

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

.text {
  max-width: calc(38em + 2 * var(--rand));
  padding: 44px var(--rand) 72px;
  overflow-wrap: break-word;
}

.text h1 {
  font-size: 28px;
  font-weight: normal;
  line-height: 1.2;
  margin-bottom: 28px;
}

.text h2 {
  font-size: 15px;
  font-weight: bold;
  margin: 36px 0 8px;
}

.text p,
.text li {
  font-size: 16px;
  line-height: 1.6;
}

.text p { margin-bottom: 14px; }
.text ul { margin: 0 0 14px 1.2em; }

.text a { border-bottom: 1px solid var(--schwarz); }
.text a:hover { border-bottom-width: 2px; }

.text .unterzeile {
  color: var(--grau);
  margin-top: -18px;
  margin-bottom: 22px;
}

.serie-kopf { padding-bottom: 36px; }

.zurueck { padding: 0 var(--rand) 56px; }
.zurueck a { display: inline-block; padding: 8px 0; border-bottom: 1px solid var(--schwarz); }

/* ---------- Wartungsseite („Coming soon“) ---------- */

.wartung {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px var(--rand) 12vh;
}

.wartung h1 {
  font-size: clamp(40px, 8vw, 112px);
  font-weight: normal;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.wartung p {
  max-width: 32em;
  font-size: 16px;
  line-height: 1.6;
}

.wartung a { border-bottom: 1px solid var(--schwarz); }

/* ---------- Großansicht ---------- */

.lb {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--weiss);
  display: none;
  flex-direction: column;
}

.lb.offen { display: flex; }

.lb-oben {
  flex: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 56px;
  padding: 0 var(--rand);
}

.lb-zu {
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 12px 0;
}

.lb-zu:hover { text-decoration: underline; text-underline-offset: 5px; }

.lb-bild {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 var(--rand);
}

.lb-bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 0.2s ease;
}

.lb-bild img.laedt { opacity: 0; }

.lb-zurueck,
.lb-weiter {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: none;
  border: 0;
  -webkit-tap-highlight-color: transparent;
}

.lb-zurueck { left: 0; cursor: w-resize; }
.lb-weiter { right: 0; cursor: e-resize; }

/* Beschreibung am unteren Rand; lange Texte schieben das Bild nach oben,
   statt es zu überdecken */
.lb-unten {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  min-height: 56px;
  padding: 16px var(--rand) 18px;
}

.lb-text { font-size: 14px; line-height: 1.4; max-width: 60ch; }
.lb-zahl { flex: none; font-size: 13px; color: var(--grau); }

.lb.einzeln .lb-zurueck,
.lb.einzeln .lb-weiter,
.lb.einzeln .lb-zahl { display: none; }

/* ---------- Handy ---------- */

@media (max-width: 760px) {
  :root { --rand: 20px; --kopf-h: 64px; }

  .galerie { --zeile: 240px; margin-left: 0; margin-right: 0; }
  .galerie.gross { --zeile: 300px; }

  .lb-bild { margin: 0; }
}

/* Handy quer und andere niedrige Bildschirme */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --kopf-h: 52px; }
  .fuss { padding-top: 8px; padding-bottom: 8px; }
  .lb-oben { height: 44px; }
  .lb-unten { min-height: 40px; padding-top: 8px; padding-bottom: 10px; }
}

/* Touchbildschirme: größere Tippflächen */
@media (pointer: coarse) {
  .reiter a, .fuss a { padding-top: 11px; padding-bottom: 11px; }
  .fuss { padding-top: 6px; padding-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}