/* twouse.css - gemeinsames CSS aller Seiten (bis 2026-09-11 in twouse-shared.js) */
:root{
  /* Basisgröße einer Zelle im unskalierten Grid */
  --cell-base-w: 400px;
  --cell-base-h: 500px;
  /* Skalierungsfaktor für das gesamte Grid (wird per JS gesetzt) */
  --scale: 1;
  /* Sichtbare Zellenbreite in Pixeln (für Elemente außerhalb des skalierten Blocks) */
  --cell-screen-px: 320px;
  /* sichtbare (skalierte) Höhe des Grids für den Wrapper */
  --grid-height: 100vh;
}

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

html,
body{
  margin: 0;
  padding: 0;
  scroll-behavior: smooth; /* weiches Scrollen zu Ankern (z.B. #3) */
}

body{
  font-family: Helvetica Neue, Helvetica, Arial, Roboto, sans-serif;
  font-weight: bold;
  background: #ffffff;
  color: #000000;
  overflow-x: hidden;
}

/* ───────── Wrapper für den skalierenden Block ───────── */

.grid-outer{
  position: relative;
  width: 100%;
  height: var(--grid-height);
  /* kein overflow-x hier, da body das bereits übernimmt */
}

/* ───────── Grid als fester Block, der komplett skaliert wird ───────── */

.grid{
  position: absolute;
  top: 0;
  left: 50%;
  transform-origin: top center;
  transform: translateX(-50%) scale(var(--scale));
  display: grid;
}

/* 3x2-Layout: 3 Spalten, 2 Zeilen */
body.layout-wide .grid{
  grid-template-columns: repeat(3, var(--cell-base-w));
  grid-template-rows: repeat(2, var(--cell-base-h));
  width: calc(3 * var(--cell-base-w));
  height: calc(2 * var(--cell-base-h));
}

/* 1x6-Layout: 1 Spalte, 6 Zeilen */
body.layout-tall .grid{
  grid-template-columns: var(--cell-base-w);
  grid-template-rows: repeat(6, var(--cell-base-h));
  width: var(--cell-base-w);
  height: calc(6 * var(--cell-base-h));
}

.cell{
  position: relative;
  overflow: hidden;
}

.cell img{
  width: 100%;
  height: 100%;
  object-fit: fill; /* Bild füllt die Zelle immer vollständig */
  display: block;
}

/* ───────── Allgemeine Text-Box für Zellen ───────── */

.text-box{
  position: absolute;
  top: 20px;
  right: 80px;
  bottom: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* oben */
  align-items: flex-start;     /* links */
  text-align: left;
  /* Textfarbe und Schrift kommen von body */
}

/* Vertikale Ausrichtung der Text-Box */
.text-box--top{
  justify-content: flex-start;
}

.text-box--bottom{
  justify-content: flex-end;
}

/* Textgrößen in pt bezogen auf unskalierte Zelle */
.text-large{
  font-size: 30pt;
  line-height: 27pt; /* fix */
}

.text-medium{
  font-size: 15pt;
  line-height: 19pt; /* fix */
}

.text-small{
  font-size: 7.5pt;
  line-height: 9pt; /* fix */
}

/* Textstile / Ausrichtungen */

/* style-regular: linksbündig, unten bündig, Flattersatz */
.style-regular{
  justify-content: flex-end;     /* unten */
  align-items: flex-start;       /* links */
  text-align: left;
}

/* style-menu: rechtsbündig, unten bündig, Flattersatz */
.style-menu{
  justify-content: flex-end;     /* unten */
  align-items: flex-end;         /* rechts */
  text-align: right;
}

/* ───────── Navigation im Menü (Zelle 3) ───────── */

.menu-links{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--cell-base-w) * 0.04); /* größerer Zeilenabstand */
  text-transform: uppercase;
}

.menu-links a{
  color: inherit;
  text-decoration: none;
  display: block;    /* weiterhin ein Eintrag pro Zeile */
  position: relative; /* Basis für das unsichtbare Overlay */
}

/* unsichtbare Vergrößerung des Klick-/Hover-Bereichs,
   ohne die Textposition zu verändern */
.menu-links a::before{
  content: "";
  position: absolute;
  top: -0.2em;
  bottom: -0.2em;
  left: -0.3em;
  right: -0.3em;
}

/* zusätzlicher Kontaktblock unter dem Menü in Zelle 3 */
.menu-contact{
  margin-top: calc(var(--cell-base-w) * 0.015);
  text-align: right;
}

.menu-contact a{
  color: inherit;
  text-decoration: none;
}

/* helper for mixed alignment blocks */
.line-left,
.line-block{
  display: block;
  width: 100%;
  line-height: inherit;
  margin: 0;
}

.line-left{
  text-align: left;
  white-space: nowrap;
}

.line-block{
  text-align: left;
  white-space: pre;
}

/* ───────── Generische Link-Stile ───────── */

.link_rose,
.link_green{
  color: #000000;          /* Basisfarbe schwarz */
  text-decoration: none;   /* keine Unterstreichung */
}

.link_rose:hover,
.link_rose:focus{
  color: rgb(243, 194, 245);
}

.link_green:hover,
.link_green:focus{
  color: rgb(0, 140, 90);
}

/* spezieller Link: dauerhaft grün */
.link_green_static{
  color: rgb(0, 140, 90);
}

.link_green_static:hover,
.link_green_static:focus{
  color: rgb(0, 140, 90);
}

/* Material-Link: Shake-Animation */
.link-shake{
  display: inline-block;
}

.link-shake.is-shaking{
  animation: link-shake 0.4s ease-in-out 1;
}

@keyframes link-shake{
  0%{ transform: translateX(0); }
  33%{ transform: translateX(-4px); }
  66%{ transform: translateX(4px); }
  100%{ transform: translateX(0); }
}

/* ───────── Schwebendes Menü-Icon ───────── */

.floating-icon{
  position: fixed;
  /* 10% größerer Randabstand als zuvor: 22px (statt 20px) im unskalierten Design */
  top: calc(22px * var(--scale));
  right: calc(22px * var(--scale));
  z-index: 10;
  transition: opacity 0.2s ease;
  display: inline-block;
}

.floating-icon.is-hidden{
  opacity: 0;
  pointer-events: none;
}

/* Basis-Stil für beide Icon-Bilder */
.floating-icon__img{
  width: calc(0.08 * var(--cell-screen-px)); /* 8% der sichtbaren Zellenbreite */
  height: auto;
  aspect-ratio: 1 / 1;
  display: block;
}

/* normales (schwarzes) Icon */
.floating-icon__img--regular{
  position: relative;
  z-index: 0;
  transition: none; /* kein Überblend-Effekt */
}

/* Hover-Icon (rosa) liegt darüber und ist zunächst unsichtbar */
.floating-icon__img--hover{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: none; /* kein Überblend-Effekt */
}

.floating-icon:hover .floating-icon__img--hover,
.floating-icon:active .floating-icon__img--hover{
  opacity: 1;
}

.floating-icon:hover .floating-icon__img--regular,
.floating-icon:active .floating-icon__img--regular{
  opacity: 0;
}

/* ───────── Ergänzungen 2026-09-11 ───────── */

/* Fotos stehen in <picture> (AVIF, JPG als Rückfall). Das picture-Element
   bildet keine eigene Box, damit .cell img wie zuvor die Zelle füllt. */
.cell picture{
  display: contents;
}

/* Rosa Farbflächen als Hintergrund der Zelle statt als SVG-Datei
   (vorher impressum-2 bis -6.svg und twouse-5.svg = #f6d6f5, kontakt-2.svg = #f5d5f4) */
.flaeche-rosa{
  background: #f6d6f5;
}
.flaeche-rosa-2{
  background: #f5d5f4;
}

/* Titel mit Unterzeile (Shop Zelle 1, seit 2026-09-11): die Box reicht bis
   zum rechten Rand, damit "KLEINER HOCKER" in einer Zeile steht. */
.text-box--breit{
  right: 20px;
}
.text-box--breit .text-large,
.text-box--breit .text-medium{
  white-space: nowrap;
}