/* assets/css/style.css */
@font-face {
  font-family: "ArialNarrowCustom";
  src:
    url("../typeface/arialnarrow.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Typo */
  --font-family: "ArialNarrowCustom", "Arial Narrow", Arial, system-ui, sans-serif;
  --font-size-base: 16px;        /* Desktop-Basis (rem) */
  --font-size-body: 1.7rem;      /* Body-Größe relativ zur Basis */

  /* Farben */
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-muted: #c4c4c4;
  --color-inverse: #ffffff;
  --color-selection-bg: rgba(27, 187, 125, 0.5);
  --color-selection-text: #000000;

  /* Layout & UI */
  --radius-xs: 0.15rem;
  --pad-xxs: 0.3rem;
  --shadow-lg: 10px 10px 40px rgba(0, 0, 0, 0.4);

  /* Z-Index Leitplanken */
  --z-overlay-low: 9999;
  --z-overlay: 10000;
  --z-viewer: 12000;
  --z-about: 13000;
  --z-ui: 9999999999; /* UI-Buttons (Close etc.) */
}

/* ==========================================================================
   Reset & Basics
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: var(--font-size-base); }

body {
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  line-height: 1;
  background: var(--color-bg);
  color: var(--color-text);
}

/* Skalierende Basis-Schriftgröße auf kleineren Screens */
@media (max-width: 820px) {
  html { font-size: calc(17px + 6 * ((100vw - 320px) / 680)); }
}

/* Form-Controls erben Typo */
button, input, select, textarea { font: inherit; line-height: inherit; }

/* Viewer-Overlay erbt Typo/Farbwerte für neutrale Bühne */
.viewer,
.viewer * {
  font: inherit !important;
  line-height: inherit !important;
  color: var(--color-muted);
}

/* Textauswahl */
::selection {
  background-color: var(--color-selection-bg);
  color: var(--color-selection-text);
}

/* Bilder block-level für verlässliches Layout */
img { display: block; }

/* ==========================================================================
   Layout
   ========================================================================== */
.wrap { width: 100vw; margin: 0; padding: 0; }

/* 7-Spalten Grid (Desktop) – bleibt für die Startübersicht */
.six-columns {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  align-items: start;
}

/* Karten/Spalten */
.col {
  position: relative;
  overflow: visible; /* Bilder dürfen überstehen */
  isolation: isolate;
  height: 20vh;
  cursor: pointer;
}

/* Karten-Inhalt */
.col-content { position: relative; z-index: 1; padding: var(--pad-xxs); }

/* Grund-Texte in Spalten standardmäßig ausblenden; spezifisch einblenden */
.col p {
  font-family: var(--font-family);
  line-height: 1;
  color: var(--color-inverse);
  display: none;
}

/* Spezieller Hinweis-Text in erster Kachel, fix positioniert */
.col:first-child p {
  color: var(--color-muted);
  transition: color 0.3s ease-in;
  position: fixed;
  display: block !important;
  z-index: var(--z-ui);
}
.col:first-child p:hover { color: var(--color-text); }

/* ==========================================================================
   Hover-/Overlay-Bilder (werden via JS positioniert)
   ========================================================================== */
.hover-image,
.overlay-image {
  position: fixed;
  opacity: 0;
  pointer-events: none;
  z-index: var(--z-overlay-low);
  transition: opacity 0.3s ease-in;
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-xs);
}
.overlay-image { z-index: var(--z-overlay); } /* wird per JS weiter erhöht */

@media (prefers-reduced-motion: reduce) {
  .hover-image,
  .overlay-image { transition: none; }
}

/* ==========================================================================
   Fullscreen Viewer
   ========================================================================== */
.viewer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: var(--color-bg);
  z-index: var(--z-viewer);
  display: none;
}
.viewer--open { display: block; }

/* Mobile: vertikales Scrollen erlauben, horizontale Gesten selbst handeln */
.viewer { touch-action: pan-y; }

/* Close-Button des Viewers */
.viewer__close {
  position: fixed;
  top: 0; right: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: var(--z-ui);
  color: var(--color-muted);
  padding: var(--pad-xxs);
  transition: color 0.3s ease-in;
}
.viewer__close:hover { color: var(--color-text); }

/* Fix: Feld 1 links oben (wie im Grid) – wird im Viewer als fixierter Bereich benutzt */
.viewer__fixed {
  position: fixed;
  overflow: auto;
  padding: var(--pad-xxs);
  display: none;
}

/* Textbereich des aktiven Feldes (unten links) */
.viewer__text {
  position: fixed;
  bottom: 0; left: 0;
  overflow: auto;
  padding: var(--pad-xxs);
}
.viewer__text p { color: var(--color-text); }

/* Bildbühne mittig */
.viewer__stage {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center; justify-content: center;
}

/* Bild groß & vollständig sichtbar */
.viewer__img {
  max-width: 60vw;
  max-height: 90vh;
  object-fit: contain;
  image-rendering: auto;
  border-radius: var(--radius-xs);
}

/* Klick-Hotzones für Vor/Zurück */
.viewer__hit { position: absolute; }

/* Counter unten rechts */
.viewer__counter {
  position: absolute;
  right: 0; bottom: 0;
  padding: var(--pad-xxs);
  color: var(--color-text);
  font: inherit; line-height: inherit;
}

.viewer__cursor {
  position: fixed;
  z-index: var(--z-ui) !important; /* 9,999,999,999 in :root */
  pointer-events: none;
}

/* ==========================================================================
   About Overlay – KEIN Grid mehr
   ========================================================================== */
.about {
  position: fixed;
  inset: 0;
  width: 100vw; height: 100vh;
  background: var(--color-bg);
  z-index: var(--z-about);
  display: none;
  padding: var(--pad-xxs);
  overflow: auto;
}
.about--open { display: block; }

.about__close {
  position: absolute;
  top: 0; right: 0;
  border: 0; padding: var(--pad-xxs);
  background: transparent; cursor: pointer;
  z-index: calc(var(--z-about) + 1);
  color: var(--color-muted);
  transition: color 0.3s ease-in;
  text-align: right !important;
}
.about__close:hover { color: var(--color-text); }

/* Container ist neutral – kein Grid/Flex erzwungen */
.about__grid { position: relative; min-height: 100%; }

/* Allgemeine Zellen */
.about__cell { height: auto; }
.about__cell p { hyphens: auto; }
.about__cell a {
  text-decoration: none;
  color: var(--color-muted);
  transition: color 0.3s ease-in;
}
.about__cell a:hover { color: var(--color-text); }

/* --- Texte links verankern (Desktop) --- */
.about__c4r1,
.about__c4r2,
.about__c4r3 {
  position: fixed;
  left: 0.5rem;              /* Ecke links */
  max-width: 40vw;         /* Vorgabe */
  z-index: 1;              /* über Hero */
}


/* Links mittig */
.about__c4r2 {
  top: 50%;
  transform: translateY(-50%);
}

/* Links unten */
.about__c4r3 { bottom: 0.5rem; }

/* --- Hero zentriert (Desktop) --- */
.about__hero {
  position: fixed;
  /* bottom: 0.5rem;
  right: 0.5rem; */
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 20vw;             /* Breite 30vw */
  z-index: 999;              /* hinter Texten */
  perspective: 1000px;     /* für 3D-Flip */
}


/* Flip-Wrapper nimmt die Breite des Hero an und bestimmt die Höhe über das Front-Bild */
.about__flip {
  position: relative;
  width: 100%;
  height: auto;
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--radius-xs);
}

/* 3D-Innenleben */
.about__flip-inner {
  position: relative;      /* wichtig: nicht absolute, damit Höhe vom Frontbild kommt */
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .6s;
}

/* Flip-Steuerung:
   - Desktop mit echter Hover-Fähigkeit → via :hover
   - Touch/Keyboard → via .is-flipped (JS toggelt) */
@media (hover: hover) {
  .about__flip:hover .about__flip-inner { transform: rotateY(180deg); }
}
.about__flip.is-flipped .about__flip-inner { transform: rotateY(180deg); }

.about__front,
.about__back {
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: var(--radius-xs);
}

/* Front im Fluss → bestimmt die Höhe (auto) */
.about__front {
  display: block;
  height: auto;
  object-fit: contain;
}

/* Back überlagert die Front */
.about__back {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  transform: rotateY(180deg);
}

.about__hero figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--pad-xxs);
  color: var(--color-inverse);
  background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0));
  font-size: 0.9em;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* <= 820px: Viewer + About mobil */
@media (max-width: 820px) {
  /* Viewer-Fixed-Text sichtbar und oben fixiert */
  .viewer__fixed { 
    display: block !important;
    position: fixed;
    top: 0; left: 0; right: 0;
    padding: var(--pad-xxs);
    max-height: 35vh;
    overflow: auto;
    z-index: calc(var(--z-about) + 2);
    background: transparent;
    color: var(--color-text);
    pointer-events: auto;
    cursor: pointer;
  }

  .viewer__fixed p {
    display: block !important;
    position: fixed;
    top: 0; left: 0; right: 0;
    padding: var(--pad-xxs);
    max-height: 35vh;
    overflow: auto;
    z-index: calc(var(--z-about) + 3);
    background: transparent;
    color: var(--color-muted);
    pointer-events: auto;
  }

  .viewer__text { bottom: 0; top: unset; }
  .viewer__stage { top: 40%; }
  .viewer__img { max-width: 70vw; }

  /* --- ABOUT: alles untereinander mit 2rem Abstand --- */
  .about__grid { 
    padding: 3rem var(--pad-xxs);
    display: flex;
    flex-direction: column;
  }

  /* Positionierung lösen und stapeln */
  .about__c4r1,
  .about__c4r2,
  .about__c4r3,
  .about__hero {
    position: static;
    transform: none;
    left: auto; right: auto; top: auto; bottom: auto;
    z-index: auto;
    max-width: 100%;
    margin: 0 0 1rem 0;      /* 2rem Abstand */
  }

  /* Reihenfolge: c4r1 → Hero → c4r2 → c4r3
     (DOM-Reihenfolge im Template sollte so sein; andernfalls kannst du hier order: setzen) */
  .about__c4r1 { order: 1 !important; }
  .about__hero { order: 2 !important; }
  .about__c4r2 { order: 3 !important; }
  .about__c4r3 { order: 4 !important; }

  /* Hero mobil: volle Breite */
  .about__hero { width: 100%; }
  .about__front,
  .about__back { border-radius: var(--radius-xs); }
}

/* <= 620px: Grid ausblenden, Viewer übernimmt, Farbanpassungen */
@media (max-width: 620px) {
  .six-columns { display: none; }  /* Grid nicht „aufblitzen“ lassen */
  .viewer__fixed,
  .viewer__fixed p,
  .viewer__fixed a { color: var(--color-text); }
}

/* <= 520px: Einspaltiges Grid (falls sichtbar) */
@media (max-width: 520px) {
  .six-columns { grid-template-columns: 1fr; }
}