/* Gaswerkareal — Orte
   One square text tile and one tall image tile (1 × 2) per place, packed with grid-auto-flow: dense.
   Kept as plain as the Figma phone frame (gw / iPhone 18 Pro - 5): flat colour, Arial, italic labels.
   Every size derives from --kachel, the width of one grid cell. */

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

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

body {
  margin: 0;
  background: var(--gaswerk-creme);
  color: var(--tinte);
  font-family: var(--font-text);
}

img { display: block; }

a { color: inherit; text-decoration: none; text-underline-offset: .15em; }
/* Underlined: web and mail addresses, "Mehr Infos" and plain links like
   "Alle Termine" (.link). Event titles and place names stay plain. */
.link a, .mehr a, a[href^="mailto:"] { text-decoration: underline; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ---------- Raster ----------
   A cell is --kachel wide and split into 240 thin rows. Text tiles are as tall as their
   content (--zeilen, measured by raster.js; square without it).
   Each photo spans a fixed number of rows (--zeilen) by its orientation: portrait photos are 2:3 (360 rows), landscape photos 3:2 across two
   columns (160 rows each), so there are exactly two photo sizes. A photo of a slightly
   different shape is trimmed at its edges to fit, never stretched.
   Dense auto-placement then finds the best order. Landscape photos (.quer) span two columns. */

.orte { container-type: inline-size; }

.raster {
  --spalten: 3;
  --kachel: calc(100cqw / var(--spalten));
  display: grid;
  grid-template-columns: repeat(var(--spalten), 1fr);
  grid-auto-rows: calc(var(--kachel) / 240);
  grid-auto-flow: dense;
}

/* In three columns the middle one belongs to the photos: text tiles take the
   outer columns: .links tiles stack on the left, the places (.ort) alternate
   from the right. Photos fill in around them. */
.links { grid-column: 1; }
.ort:nth-child(odd of .ort) { grid-column: 3; }
.ort:nth-child(even of .ort) { grid-column: 1; }

@media (max-width: 900px) {
  .raster { --spalten: 2; }
  .links, .ort:nth-child(n of .ort) { grid-column: auto; }
}

.kachel { margin: 0; overflow: hidden; min-width: 0; }

.text { grid-row: span var(--zeilen, 240); }

.bild { grid-row: span var(--zeilen); position: relative; }
/* A title set straight onto a photo, top left */
.bild-titel { position: absolute; top: var(--pad); left: var(--pad); right: var(--pad); --pad: calc(var(--kachel) * .07); }

.bild.quer { grid-column: span 2; grid-row: span calc(var(--zeilen) * 2); }
.bild img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 560px) {
  .raster { --spalten: 1; }
  .bild.quer { grid-column: span 1; grid-row: span var(--zeilen); }
}

/* ---------- Text tile ---------- */

.text {
  --pad: calc(var(--kachel) * .07);
  display: flex;
  flex-direction: column;
  gap: calc(var(--kachel) * .07);
  padding: var(--pad);
  background: var(--ort);
  color: var(--gaswerk-rot); /* text in the pair's second colour, as display pairs (contrast is lower on purpose) */
}

.titel {
  color: var(--gaswerk-rot);
  font-size: calc(var(--kachel) * .1);
  line-height: .9;
  margin: 0;
}

.info {
  font-size: clamp(14px, calc(var(--kachel) * .04), 20px);
  line-height: 1.3;
}
.info p, .info dl, .info address { margin: 0 0 .8em; font-style: normal; }
.info > :last-child { margin-bottom: 0; }
.info .label { font-style: italic; margin-bottom: 0; }
.info dl { display: grid; grid-template-columns: auto 1fr; column-gap: 1em; }
.info dt, .info dd { margin: 0; }
.info .ort-tag { font-style: italic; }
.info > :not(.mehr) { max-width: 22em; } /* comfortable line length for the text */
.info .mehr { text-align: right; } /* the tile's call to action sits at its right edge */
.termine { list-style: none; margin: 0 0 .8em; padding: 0; }
.termine li + li { margin-top: .6em; }
.termine .datum { display: block; }
.termine li > * { display: block; } /* date, title and place each on their own line */

/* ---------- Places: colour pairs from the design system ---------- */

[data-ort="gaswerkareal"] { --ort: var(--gaswerk-creme); }
[data-ort="kunstraum"] { --ort: var(--kunstraum); }
[data-ort="freestylehalle"] { --ort: var(--freestylehalle); }
[data-ort="kugelbistro"] { --ort: var(--kugelbistro); }
[data-ort="halle"] { --ort: var(--halle); }
[data-ort="rhywerkstatt"] { --ort: var(--weiss); }
[data-ort="s10i"] { --ort: var(--weiss); }
[data-ort="agenda"] { --ort: var(--gaswerk-rot); color: var(--gaswerk-creme); }
[data-ort="agenda"] .titel { color: inherit; }

/* ---------- Logo: in the middle of the window, turned by scrolling (raster.js) ---------- */

/* The letters reach radius 130 of the 328 box, so the visible wheel is .8 of the width:
   .76 × a column makes it 60 % of a column (--spalte, set by raster.js). */
:root { --rad: min(calc(var(--spalte, 33.33vw) * .76), 95vh); }
.logo,
.logo-links {
  position: fixed;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: var(--rad);
  translate: -50% -50%;
}
.logo {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: none; /* decoration only on wide screens: links underneath stay clickable */
}
.logo-kreis { display: block; width: 100%; height: auto; overflow: visible; rotate: var(--drehung, 0deg); }
.logo-kreis text { font-family: var(--font-tape); font-size: 70px; fill: var(--gaswerk-rot); }

/* Hovering the GASWERKAREAL letters puts the pages around them, one link per ring, each
   ring wider than the one before, in the letters' own shape; the open rings keep the hover. Hidden rings must not
   catch the pointer, hence the visible… values. */
.logo-links { pointer-events: none; }
.logo-ringe { display: block; width: 100%; height: auto; overflow: visible; rotate: var(--drehung, 0deg); }
.logo-ringe .treffer { fill: none; stroke: transparent; stroke-width: 50px; pointer-events: stroke; } /* the band of letters, radius 80 – 130 */
/* With the flight (raster.js) the flying letters themselves open the rings (.offen), also on their way */
.flug .logo-ringe .treffer { pointer-events: none; }
@media (min-width: 901px) { .greifbar .logo-flug span { pointer-events: auto; } }
.logo-links { --weich: cubic-bezier(.25, .1, .25, 1); }
.logo-ringe .ringe { visibility: hidden; transition: visibility 0s .6s; }
.logo-links:is(:hover, :focus-within, .offen) .ringe { visibility: visible; transition: none; }
/* the rings fade in one after the other, from the inside out */
.logo-ringe a { opacity: 0; transition: opacity .45s var(--weich); }
.logo-links:is(:hover, :focus-within, .offen) .logo-ringe a { opacity: 1; transition-duration: .6s; }
.logo-links:is(:hover, :focus-within, .offen) .logo-ringe a:nth-of-type(2) { transition-delay: .05s; }
.logo-links:is(:hover, :focus-within, .offen) .logo-ringe a:nth-of-type(3) { transition-delay: .1s; }
.logo-links:is(:hover, :focus-within, .offen) .logo-ringe a:nth-of-type(4) { transition-delay: .15s; }
.logo-links:is(:hover, :focus-within, .offen) .logo-ringe a:nth-of-type(5) { transition-delay: .2s; }
.logo-links:is(:hover, :focus-within, .offen) .logo-ringe a:nth-of-type(6) { transition-delay: .25s; }
.logo-links:is(:hover, :focus-within, .offen) .logo-ringe a:nth-of-type(7) { transition-delay: .3s; }
/* the borders between the links, on the underlines' lines so an underline darkens its stretch of border */
.logo-ringe .grenze { fill: none; stroke: var(--gaswerk-rot); stroke-width: 1px; pointer-events: none; opacity: 0; transition: opacity .45s var(--weich); }
.logo-links:is(:hover, :focus-within, .offen) .logo-ringe .grenze { opacity: 1; transition-duration: .6s; transition-delay: .15s; }
.logo-ringe .halt { fill: none; pointer-events: visible; }
.logo-ringe .band { fill: none; stroke: transparent; stroke-width: 26px; pointer-events: visibleStroke; } /* the whole ring is the link */
.logo-ringe text { font-family: var(--font-tape); font-size: 25px; letter-spacing: .08em; fill: var(--gaswerk-rot); }
.logo-ringe a:hover { text-decoration: none; } /* a hovered link only turns black */
.logo-ringe a:hover text,
.logo-ringe a:focus-visible text { fill: var(--schwarz); }
.logo-ringe a:focus-visible { outline: none; }

/* Meanwhile the page behind goes out of focus, the more the nearer the letters (--mx/--my,
   their middle, set by raster.js): stacked blurs, each masked to a smaller circle, add up towards the middle. Below the logo
   (z-index 3) and the flying letters (4), so those stay sharp. The blur itself fades,
   not an opacity, which would cut the layers off from the page behind. */
.unschaerfe { position: fixed; inset: 0; z-index: 2; pointer-events: none; visibility: hidden; transition: visibility 0s .7s; }
.unschaerfe i {
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  -webkit-mask: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), #000, transparent var(--bis));
  mask: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), #000, transparent var(--bis));
  transition: backdrop-filter .7s cubic-bezier(.25, .1, .25, 1), -webkit-backdrop-filter .7s cubic-bezier(.25, .1, .25, 1);
}
.unschaerfe i:nth-child(1) { --unschaerfe: 8px; --bis: calc(var(--rad) * 7); }
.unschaerfe i:nth-child(2) { --unschaerfe: 18px; --bis: calc(var(--rad) * 5.6); }
.unschaerfe i:nth-child(3) { --unschaerfe: 36px; --bis: calc(var(--rad) * 4.4); }
.unschaerfe i:nth-child(4) { --unschaerfe: 60px; --bis: calc(var(--rad) * 3.4); }
.unschaerfe i:nth-child(5) { --unschaerfe: 90px; --bis: calc(var(--rad) * 2.5); }
/* behind the rings a ball in the gas holder's grey, lit from the upper left, so the links read on any photo */
.unschaerfe::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at calc(var(--mx, 50%) - var(--rad) * .5) calc(var(--my, 50%) - var(--rad) * .6), color-mix(in srgb, #f2f2f2 85%, transparent), color-mix(in srgb, #a2a2a2 85%, transparent) calc(var(--rad) * 2.4));
  -webkit-mask: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), #000 calc(var(--rad) * 1.05), transparent calc(var(--rad) * 1.85));
  mask: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), #000 calc(var(--rad) * 1.05), transparent calc(var(--rad) * 1.85));
  opacity: 0;
  transition: opacity .7s cubic-bezier(.25, .1, .25, 1);
}
.logo-links:is(:hover, :focus-within, .offen) ~ .unschaerfe { visibility: visible; transition: none; }
.logo-links:is(:hover, :focus-within, .offen) ~ .unschaerfe i {
  -webkit-backdrop-filter: blur(var(--unschaerfe));
  backdrop-filter: blur(var(--unschaerfe));
}
.logo-links:is(:hover, :focus-within, .offen) ~ .unschaerfe::after { opacity: 1; }
.flug:not(.greifbar) .logo-links { display: none; } /* not while the letters sit in the title or the end label */

.menue[hidden] { display: none; }

/* ---------- End of the page: the wheel's letters land here (raster.js) ---------- */

.schluss {
  display: flex;
  justify-content: flex-end;
  padding: calc(var(--spalte, 33.33vw) * .07);
  padding-top: calc(var(--spalte, 33.33vw) * .14);
}
.schluss-titel { font-size: calc(var(--spalte, 33.33vw) * .1); }
.flug [data-vom-logo] .gw-tape-b { visibility: hidden; }

@media (max-width: 900px) {

  .logo-links { display: none; } /* the menu takes over */

  /* Logo top right, opens the menu */
  .logo {
    top: 12px;
    right: 12px;
    left: auto;
    width: 76px;
    translate: none;
    cursor: pointer;
    pointer-events: auto;
  }
  .logo:focus-visible { outline: 3px solid var(--schwarz); outline-offset: 3px; border-radius: var(--kugel); }
  .logo[aria-expanded="true"] .logo-kreis text { fill: var(--gaswerk-creme); }

  .menue {
    position: fixed;
    z-index: 2;
    inset: 0;
    overflow-y: auto;
    padding: 100px 16px 32px;
    background: var(--gaswerk-rot);
  }
  .menue ul { list-style: none; margin: 0; padding: 0; }
  .menue a {
    display: block;
    padding: .12em 0;
    color: var(--gaswerk-creme);
    font-family: var(--font-tape);
    font-size: clamp(36px, 11vw, 64px);
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
  }
  .menue a:focus-visible { outline: 3px solid var(--gaswerk-creme); outline-offset: 2px; }
}

/* ---------- Title flies into the logo (raster.js) ----------
   While scrolling, the letters of the [data-zum-logo] title leave the tile and settle on
   the logo's circle. The page's own title and logo text stay in place but invisible,
   so layout and screen readers are unchanged. */

.flug [data-zum-logo] .gw-tape-b,
.flug .logo-kreis text { visibility: hidden; }

.logo-flug { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
.logo-flug span {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--gaswerk-rot);
  font-family: var(--font-tape);
  line-height: 1;
  white-space: pre;
  will-change: transform;
}
.menue-offen .logo-flug span { color: var(--gaswerk-creme); }

/* The wheel blends with what it turns over; the title and the end label, where the same letters rest, stay red. */
.logo:where(:has(svg.logo-kreis)),
.greifbar .logo-flug { mix-blend-mode: exclusion; }
.menue-offen .logo,
.menue-offen .logo-flug { mix-blend-mode: normal; }

/* ---------- Contrast mode (raster.js): black and white only ----------
   Every ground white, all text and lines black, photos without colour; 1px lines between the tiles (gaswerk.css). */

.kontrast .unschaerfe::after { background: var(--weiss); }

.kontrast {
  --gaswerk-rot: var(--schwarz);
  --gaswerk-creme: var(--weiss);
}
.kontrast [data-ort] { --ort: var(--weiss); color: var(--schwarz); }
.kontrast .menue { background: var(--weiss); }
.kontrast .menue a,
.kontrast .menue-zu { color: var(--schwarz); }
.kontrast .logo,
.kontrast .logo-flug { mix-blend-mode: normal; }
.kontrast img,
.kontrast iframe { filter: grayscale(1); }

.kontrast-knopf {
  position: fixed;
  z-index: 5;
  left: 12px;
  bottom: 12px;
  padding: .35em .7em;
  border: 1px solid var(--schwarz);
  border-radius: 1em;
  background: var(--weiss);
  color: var(--schwarz);
  font: 14px/1.2 var(--font-text);
  cursor: pointer;
}
.kontrast-knopf[aria-pressed="true"] { background: var(--schwarz); color: var(--weiss); border-color: var(--weiss); }
.kontrast-knopf:focus-visible { outline: 2px solid var(--schwarz); outline-offset: 2px; }