/* Studio Hendrik Krawen – gemeinsames Layout für alle Seiten
   Das Bild füllt immer den ganzen Bildschirm (PC, Tablet, Handy).
   Die Texte schweben darüber und passen ihre Größe an den Bildschirm an.
   Hinweis: In den HTML-Seiten stehen bewusst keine style-Angaben,
   damit die Sicherheitsregel (Content-Security-Policy) streng bleiben kann. */

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

html, body { height: 100%; }

body {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;              /* Handy: berücksichtigt die Browserleisten */
  overflow: hidden;
  background-color: #000;
  font-family: "Courier New", Courier, monospace;
  touch-action: pan-y pinch-zoom;  /* waagerechtes Wischen übernimmt karussell.js */
  -webkit-user-select: none;       /* beim Ziehen keinen Text markieren */
  user-select: none;
  --textfarbe: #fff;               /* Farbe der Texte unten */
}
.block { -webkit-user-select: text; user-select: text; }

/* Hintergrundbild als echtes Bild (mit Alt-Text für Google und Screenreader) */
.hintergrund {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;               /* füllt den Bildschirm, Ränder werden ggf. beschnitten */
  object-position: 50% 50%;        /* Startposition: Mitte */
  z-index: -1;
  -webkit-user-drag: none;
  pointer-events: none;
}
.start-rechts .hintergrund { object-position: 100% 50%; }   /* Seite 2: rechter Rand */
.hintergrund.nachbar { visibility: hidden; will-change: transform; }   /* nächstes/voriges Bild fürs Wischen */

/* Nur Touch-Geräte: Seitenwechsel nach dem Wischen weich überblenden (PC wechselt direkt) */
@media (hover: none) and (pointer: coarse) {
  @view-transition { navigation: auto; }
}
.hintergrund[data-mitte] { object-position: 40% 50%; }      /* Seite 3: etwas links; genaue Mitte rechnet karussell.js */

/* Für Screenreader sichtbar, auf dem Bildschirm nicht */
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Schwebende Texte */
.titel, .untertitel, .unten, .fuss {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  line-height: 1.2;
  text-decoration: none;
  width: max-content;              /* volle Breite nutzen, nicht nur die halbe */
  max-width: 92vw;
}

a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid #ff0000; outline-offset: 3px; }

:root {
  --oben: 7vh;                              /* Abstand Titel vom oberen Rand */
  --titelgroesse: clamp(18px, 3vw, 44px);
}

/* Oben: Studio Hendrik Krawen */
.titel {
  top: var(--oben);
  color: #ff0000;
  font-weight: bold;
  font-size: var(--titelgroesse);
  white-space: nowrap;
}

/* Unter dem Titel: Kontakt */
.untertitel {
  top: calc(var(--oben) + var(--titelgroesse) * 3);
  color: #ff0000;
  font-weight: bold;
  font-size: var(--titelgroesse);
}

/* Leichter Schatten, damit die unteren Texte auf jedem Bildausschnitt lesbar sind */
.unten, .fuss a { text-shadow: 0 0 4px rgba(0, 0, 0, 0.9); }

/* Unten: Bildtext mit Karussell-Pfeilen */
.unten {
  bottom: max(9vh, 2.5vh + 42px);   /* Platz für Impressum/Datenschutz darunter */
  color: var(--textfarbe);
  font-size: clamp(14px, 1.6vw, 24px);
}

/* Ganz unten: Impressum · Datenschutz */
.fuss {
  bottom: 2.5vh;
  display: flex;
  gap: 1.5em;
  font-size: clamp(12px, 1.1vw, 16px);
}
.fuss a { color: var(--textfarbe); text-decoration: none; }
.fuss a:hover { text-decoration: underline; }

/* Einblend-Blöcke Kontakt, Impressum, Datenschutz: mittig vor dem Bild, weich ein- und ausgeblendet */
.block {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  min-width: min(60vw, 420px);
  max-width: 88vw;
  padding: clamp(18px, 3vw, 44px) clamp(20px, 4vw, 64px);
  background: rgba(255, 255, 255, 0.75);   /* 75 % Deckkraft, leicht durchscheinend */
  color: #222;
  text-align: center;
  font-size: clamp(14px, 1.6vw, 22px);
  line-height: 1.4;
  overflow-wrap: anywhere;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
  z-index: 2;
  touch-action: pan-y;
}
.block.offen {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0s;
}
.block .inhalt { max-height: 55vh; overflow-y: auto; }   /* langer Text scrollt, X bleibt stehen */
.block p + p { margin-top: 1em; }
.block a { color: #222; }

/* X oben rechts zum Schließen */
.schliessen {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;                      /* große Tippfläche fürs Handy */
  height: 44px;
  border: 0;
  background: none;
  color: #222;
  font-family: inherit;
  font-size: 28px;
  line-height: 44px;
  cursor: pointer;
}
.schliessen:hover { color: #ff0000; }
.schliessen:focus-visible { outline: 2px solid #ff0000; outline-offset: -4px; }
.block .hinweis { font-size: 0.7em; color: #555; }

/* Datenschutz: klappt im Impressum-Kasten auf; längerer Text, daher linksbündig und etwas kleiner */
#block-impressum { max-width: min(88vw, 720px); }
.block .inhalt { position: relative; }
.datenschutz {
  margin-top: 1.5em;
  padding-top: 1.2em;
  border-top: 1px solid rgba(0, 0, 0, 0.25);
  text-align: left;
  font-size: 0.78em;
}
.datenschutz h2 { font-size: 1.1em; margin: 1.2em 0 0.3em; }
.datenschutz h2:first-child { margin-top: 0; }
.datenschutz p + p { margin-top: 0.6em; }
/* Cafconc Ed.: zwei Bilder gleicher Breite mit Text dazwischen; auf dem PC schön groß */
#block-edition { width: min(88vw, 820px); padding-top: 46px; }   /* oben Platz fürs X, damit es nicht im Bild liegt */
.edition-bild {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
/* Bilder nicht anklick-, zieh- oder per langem Drücken speicherbar (Schutz für normale Besucher) */
.edition-bild {
  pointer-events: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
img { -webkit-touch-callout: none; }
.edition-bild + p { margin-top: 1.2em; }
.block p + .edition-bild { margin-top: 1.4em; }
.edition-titel { font-size: 1.9em; line-height: 1.1; margin-bottom: 0.4em; }
#block-edition .hinweis { margin-top: 0.8em; font-size: 0.75em; }

.aufklappen::after { content: " ▸"; }
.aufklappen[aria-expanded="true"]::after { content: " ▾"; }

/* Handy quer (sehr niedrige Höhe): Abstände verkleinern */
@media (max-height: 500px) {
  :root { --oben: 4vh; }
  .block {
    top: 53%;
    padding: 8px 40px 8px 20px;
    font-size: 14px;
    line-height: 1.2;
  }
  .block p + p { margin-top: 0.25em; }
  .block .inhalt { max-height: calc(100vh - 235px); }        /* passt zwischen „Kontakt“ und Bildtext */
}

/* Normale statt fetter Schrift, z. B. Kontakt-Link */
.duenn { font-weight: normal; }

/* Karussell unten: ◀ Bildtext ▶  (Seite 2 ← Startseite → Seite 3, im Kreis) */
.karussell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.5vw, 36px);
}
.karussell .bildtext { text-align: center; }
.pfeil {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;                      /* große Tippfläche fürs Handy */
  height: 44px;
  color: var(--textfarbe);
}
.pfeil::before {                    /* Dreieck wie die Start-Taste */
  content: "";
  width: 0;
  height: 0;
  border-top: 0.65em solid transparent;
  border-bottom: 0.65em solid transparent;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.9));
}
.pfeil.weiter::before  { border-left:  1.1em solid currentColor; }
.pfeil.zurueck::before { border-right: 1.1em solid currentColor; }
.pfeil:hover { opacity: 0.7; }

/* Nur Handy (hochkant und quer): Links in der Kontakt-Linkliste kräftiger */
@media (max-width: 600px), (max-height: 500px) {
  #block-kontakt a { font-weight: bold; }
  :root { --titelgroesse: clamp(20.7px, 3.45vw, 50.6px); }   /* Titel auf dem Handy 15 % größer */
}

/* Fehlerseite 404 */
.fehler {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
  font-size: clamp(14px, 1.6vw, 22px);
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
}
.fehler a { color: #fff; }