/* ============================================================
   Typowerkstatt – style.css (weisse Rückseite)
   Kein Framework, kein Ballast.
   ============================================================ */

/* --- Reset & Box-Model ------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: "Plus Sans W01 Regular", sans-serif; }

/* --- Web Fonts (Plus Sans W01) ---------------------------- */
@font-face {
  font-family: "Plus Sans W01 Regular";
  font-display: swap;
  src: url("../fonts/FS-WebFonts-1042442074/Fonts/6070360/bb64cd0f-b931-48df-991c-028f0b5f53ca.woff2") format("woff2"),
       url("../fonts/FS-WebFonts-1042442074/Fonts/6070360/22753970-8b5e-490d-a2f1-c7b1f2db23bf.woff") format("woff");
}
@font-face {
  font-family: "Plus Sans W01 Italic";
  font-display: swap;
  src: url("../fonts/FS-WebFonts-1042442074/Fonts/6070380/0772134a-c5d2-45d8-858a-1ac44416d671.woff2") format("woff2"),
       url("../fonts/FS-WebFonts-1042442074/Fonts/6070380/ab95e014-7d69-4e49-85c0-983eb8e61869.woff") format("woff");
}
@font-face {
  font-family: "Plus Sans W01 Bold";
  font-display: swap;
  src: url("../fonts/FS-WebFonts-1042442074/Fonts/6070410/2aacb8e9-fd83-4ebe-85c0-7679ad2ba309.woff2") format("woff2"),
       url("../fonts/FS-WebFonts-1042442074/Fonts/6070410/7c426650-94d7-4c17-8b2b-123c6abaefad.woff") format("woff");
}
@font-face {
  font-family: "Plus Sans W01 Bold Italic";
  font-display: swap;
  src: url("../fonts/FS-WebFonts-1042442074/Fonts/6070416/0a8fbe8e-d130-47d1-9a68-30fbc03471ef.woff2") format("woff2"),
       url("../fonts/FS-WebFonts-1042442074/Fonts/6070416/7a9e599d-09a9-47f2-8974-ccf5ff546e79.woff") format("woff");
}

/* --- Typografie ------------------------------------------- */
h1, h2 {
  font-family: ff-ginger-pro, sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  margin: 0 0 0.125rem;
  font-size: 18px;
  line-height: 1.125;
}
@media screen and (min-width: 40em) { h1, h2 { font-size: 1.875rem; } }


p { font-size: 14px; line-height: 1.333; text-align: center; margin: 0; }
@media screen and (min-width: 40em) { p { font-size: 1.375rem; } }

a { color: #ffa500; text-decoration: none; transition: color 0.25s ease-in-out; }
a:hover { color: #cc8400; }


/* --- Backdrop --------------------------------------------- */
.ty-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.80);
  z-index: 100;
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}
.ty-backdrop.ty-backdrop-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Platzhalter: sichtbare «Geist»-Kachel in der Originalfarbe */
.ty-placeholder {
  flex-shrink: 0;
  border-radius: 8px;
  opacity: 0.25;
}

/* --- Layout: Kachel-Raster -------------------------------- */
.ty-container { display: flex; flex-wrap: wrap; margin: 5px; }
@media screen and (min-width: 40em) { .ty-container { margin: 10px; } }

/* --- Einzelne Kachel -------------------------------------- */
.ty-card {
  position: relative;
  perspective: 200vw;
  width:  calc((100vw - 10px) / 2 - 10px);
  height: calc((100vw - 10px) / 2 - 10px);
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ty-card img { width: 50%; }
@media screen and (min-width: 40em) {
  .ty-card { width: calc((100vw - 20px) / 2 - 20px); height: calc((100vw - 20px) / 2 - 20px); margin: 10px; }
}
@media screen and (min-width: 64em) {
  .ty-card { width: calc((100vw - 20px) / 3 - 20px); height: calc((100vw - 20px) / 3 - 20px); margin: 10px; }
}
@media screen and (min-width: 88em) {
  .ty-card { width: calc((100vw - 20px) / 4 - 20px); height: calc((100vw - 20px) / 4 - 20px); margin: 10px; }
}

/* Grosse Kachel */
.ty-card-big { width: calc((100vw - 10px) / 1 - 10px); height: calc((100vw - 10px) / 1 - 10px); }
.ty-card-big .ty-card-front h1 { font-size: 1.875rem; }
.ty-card-big p  { font-size: 1.375rem; margin-bottom: 0; }
@media screen and (min-width: 40em) {
  .ty-card-big { width: calc((100vw - 20px) / 2 - 20px); height: calc((100vw - 20px) / 2 - 20px); margin: 10px; }
}
@media screen and (min-width: 64em) {
  .ty-card-big { width: calc((100vw - 20px) / 3 - 20px); height: calc((100vw - 20px) / 3 - 20px); margin: 10px; }
}
@media screen and (min-width: 88em) {
  .ty-card-big { width: calc((100vw - 20px) / 4 - 20px); height: calc((100vw - 20px) / 4 - 20px); margin: 10px; }
}

/* Titel auf der Rückseite deutlich grösser –
   steht nach allen anderen h1-Regeln damit nichts überschreibt */
.ty-card-back h1 {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}
@media screen and (min-width: 40em) {
  .ty-card-back h1 { font-size: 2.75rem; }
}

/* --- Flip-Mechanismus ------------------------------------- */
.ty-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 1000ms;
}

.ty-card-inner:not(.ty-is-open):not(.ty-is-closing):hover { transform: rotateY(15deg); }

/* Kachel liegt über dem Backdrop wenn expanded */
.ty-card.ty-is-expanded { z-index: 200; }
.ty-card-inner.ty-is-open { transform: rotateY(180deg); }

.ty-card-front,
.ty-card-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

.ty-card-front { cursor: pointer; }
.ty-card-front:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.8);
  outline-offset: -4px;
}

/* Rückseite: weiss mit grauer Schrift */
.ty-card-back {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  background: #fff !important;
  color: #555;
  overflow-y: auto;
  flex-direction: column;
}


/* Pointer-Events */
.ty-card-inner:not(.ty-is-open):not(.ty-is-closing) .ty-card-back { pointer-events: none; }
.ty-card-inner.ty-is-open    .ty-card-front,
.ty-card-inner.ty-is-closing .ty-card-front { pointer-events: none; }

/* Inhalt Rückseite */
.ty-content { padding: 1rem; width: 100%; }

/* Abstand zwischen mehreren Absätzen auf der Rückseite */
.ty-card-back p + p { margin-top: 0.5rem; }


/* Schliessen-Button: geometrisches Kreuz, oben rechts */
.ty-flip-back {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  left: auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  z-index: 10;
  user-select: none;
  -webkit-user-select: none;
  transition: background 250ms ease;
  /* × Zeichen visuell verstecken – aria-label bleibt für Screenreader */
  font-size: 0;
  color: transparent;
}
.ty-flip-back:hover {
  background: rgba(0, 0, 0, 0.08);
}

/* Die zwei Linien des Kreuzes via Pseudo-Elemente */
.ty-flip-back::before,
.ty-flip-back::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 1.5px;
  background: #999;
  border-radius: 1px;
  transition: background 250ms ease;
}
.ty-flip-back::before { transform: translate(-50%, -50%) rotate(45deg); }
.ty-flip-back::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.ty-flip-back:hover::before,
.ty-flip-back:hover::after { background: #333; }

/* --- Farben ----------------------------------------------- */
.ty-color-orange      { background: #ffa500; }
.ty-color-pink        { background: #e14e92; }
.ty-color-weinrot     { background: #781447; }
.ty-color-gelb        { background: #ffcc01; }
.ty-color-dunkelblau  { background: #003d61; }
.ty-color-lindengruen { background: #9eb102; }
.ty-color-tuerkis     { background: #2c958c; }
.ty-color-blau        { background: #0080c8; }
.ty-color-berry       { background: #a11f61; }
.ty-color-gray        { background: #b0a79c; }

/* --- Titel auf der Kachel-Vorderseite --------------------- */
.ty-front-title {
  position: absolute;
  top: 75%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  text-align: center;
  font-family: ff-ginger-pro, sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #fff;
  padding: 0 0.5rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease;
}
@media screen and (min-width: 40em) {
  .ty-front-title { font-size: 1.75rem; }
}
.ty-card-front:hover .ty-front-title { opacity: 1; }

/* --- Mapbox-Karte ----------------------------------------- */
#map { position: absolute; inset: 0; width: 100%; height: 100%; }
.marker { background: #ffa500; width: 16px; height: 16px; border-radius: 50%; cursor: pointer; }
.mapboxgl-popup { max-width: 200px; }
.mapboxgl-popup-content {
  text-align: left; font-family: "Open Sans", sans-serif;
  color: rgb(102, 103, 102); padding-bottom: 0; font-size: 16px;
}