/* Gaswerkareal: WordPress on top of the design.
   raster.css, bundle.css and tokens.css are the design's files, nearly untouched. This file only
   fits WordPress' block markup to them, and adds nothing the design and its design system don't have. */

/* ---------- WordPress wrappers ---------- */

.wp-site-blocks { padding: 0; }
.wp-site-blocks > * { margin-block: 0; }
.raster { margin: 0; padding: 0; }
.text > * { margin-block: 0; } /* the tile's own gap spaces them, not WordPress' block gap */
.info > * { margin-block-start: 0; }

/* An image block inside a group tile (the intro photo with its title) fills the tile */
.bild > .wp-block-image { height: 100%; margin: 0; }
.kachel.bild img,
.bild .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Large screens: the three columns stop growing and stay centred ---------- */

.orte { padding: 0; }
.orte,
.foerderer-band { max-width: 1320px; margin-inline: auto; }

/* The agenda and intro of a subpage stand in the last column */
.rechts { grid-column: var(--spalten); }

/* ---------- Logo ---------- */

/* The wheel's letters stay red over everything */
.logo,
.greifbar .logo-flug { mix-blend-mode: normal; }

/* The wheel's letters sit tight: at their middle they are spaced like the font's own letters (radius and path in patterns/kopf.php) */
.logo-kreis text { font-size: 76px; }

/* The links on the rings: several on a ring, shortest words innermost */
.logo-ringe text { font-size: 33px; font-weight: 400; letter-spacing: 0; }
.logo-ringe a text { pointer-events: visible; }
.logo-links.offen .logo-ringe a { transition-delay: var(--spaeter, 0s); }

/* In the corner the wheel also crosses tiles of its own colour: there its letters turn (.auf-rot, raster.js) */
.auf-rot .logo-kreis text { fill: var(--gaswerk-creme); }
.kontrast .auf-rot .logo-kreis text { fill: var(--schwarz); }

/* On a phone the corner logo stays clear of the label, which has the size of every title */
@media (max-width: 560px) {
  .logo { top: 10px; right: 6px; width: 60px; }
}

/* The wheel sits top right, on the first tile there: its title stays clear of it */
@media (max-width: 900px) {
  .raster > .rechts:first-child .titel,
  .bild:has(> .bild-titel) + .rechts .titel { margin-right: calc(92px - var(--pad)); }
}
@media (max-width: 560px) {
  .raster > .rechts:first-child .titel { margin-right: calc(70px - var(--pad)); }
  .bild:has(> .bild-titel) + .rechts .titel { margin-right: 0; }
}

/* The links around the wheel and in the menu are plain text */
.logo-ringe text { font-family: var(--font-text); }

/* The menu fits any window: each line a share of the height, nothing scrolls. Its X replaces the wheel, same place, same size. */
@media (max-width: 900px) {
  .menue-offen { overflow: hidden; }
  .menue-offen .logo { visibility: hidden; }
  .menue {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 76px var(--text-links, 28px) 84px; /* room for the label and X above, the switch below */
    background: var(--gaswerk-creme);
  }
  .menue a {
    padding: 0;
    color: var(--gaswerk-rot);
    font-family: var(--font-tape);
    font-size: min(clamp(20px, 5vw, 26px), calc((100vh - 160px) / 27.2));
    font-size: min(clamp(20px, 5vw, 26px), calc((100dvh - 160px) / 27.2));
    line-height: 1.6;
    text-transform: none;
  }
  .menue a:focus-visible { outline-color: var(--gaswerk-rot); }
  .menue-zu {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--gaswerk-rot);
    font: 400 60px/1 var(--font-tape);
    cursor: pointer;
  }
}
/* Too short for one readable column of all 17 links: two columns side by side, nothing cut off */
@media (max-width: 900px) and (max-height: 700px) {
  .menue { flex-direction: row; align-items: center; gap: 4vw; }
  .menue ul { flex: 1; text-align: left; font-size: 0; }
  .menue li { break-inside: avoid; }
  .menue a { font-size: min(22px, 5.4vw, calc((100vh - 160px) / 14.4)); font-size: min(22px, 5.4vw, calc((100dvh - 160px) / 14.4)); }
}
@media (max-width: 560px) {
  .menue-zu { top: 10px; right: 6px; width: 60px; height: 60px; font-size: 48px; }
}

/* A click leaves no outline; moving through the page by keyboard still shows one */
:focus:not(:focus-visible) { outline: none; }
a, button { -webkit-tap-highlight-color: transparent; }

/* ---------- Text tiles ---------- */

/* The opening hours are a table: the design's two-column list */
.info .zeiten { margin: 0 0 .8em; }
.info .zeiten table { width: auto; table-layout: auto; border-collapse: collapse; }
.info .zeiten td { padding: 0 1em 0 0; border: 0; vertical-align: top; }

/* Lines without markers, spaced like the design's dates */
.info .liste { list-style: none; margin: 0 0 .8em; padding: 0; }
.info .liste li + li { margin-top: .6em; }

.info { overflow-wrap: break-word; }

/* An iframe fills its tile like a photo, below its title if it has one */
.rahmen { display: flex; flex-direction: column; background: var(--ort, none); --pad: calc(var(--kachel) * .07); }
.rahmen .titel { margin: var(--pad); }
.rahmen iframe { display: block; flex: 1; width: 100%; min-height: 0; border: 0; }

/* ---------- The label: the way to the landing page ---------- */

.titel a { color: inherit; font: inherit; text-decoration: none; } /* theme.json sets links in Arial */
/* ---------- Entrance (raster.js): the wheel first, then the blocks one after the other ----------
   The head of each page sets .eintritt, unless the visitor asks for reduced motion. */

.eintritt .logo:not(.da) { opacity: 0; }
.eintritt .logo.da { transition: opacity .8s cubic-bezier(.25, .1, .25, 1); }
.eintritt :is(.raster > .kachel, .foerderer-band):not(.da) { opacity: 0; translate: 0 16px; }
.eintritt :is(.raster > .kachel, .foerderer-band).da {
  transition: opacity .6s cubic-bezier(.25, .1, .25, 1) var(--warte, 0s), translate .6s cubic-bezier(.25, .1, .25, 1) var(--warte, 0s);
}

/* ---------- Contrast mode: plain headers ---------- */

.kontrast .titel,
.kontrast .menue a,
.kontrast .menue-zu { font-family: var(--font-text); }
.kontrast .titel { font-size: calc(var(--kachel) * .08); font-weight: 700; line-height: 1.1; text-transform: none; }
.kontrast .gw-tape-b { transform: none; }

/* The switch lines up with the text of the first column */
.kontrast-knopf { left: var(--text-links, 12px); }

/* ---------- Contrast mode: 1px lines between all tiles ----------
   Every tile draws its frame one pixel further right and down, onto the first pixel of its
   neighbour, whose own frame starts there: lines of two tiles fall on the same pixels. */

@media (max-width: 1320px) {
  .kontrast .orte,
  .kontrast .foerderer-band { overflow-x: clip; } /* at the window's edge the last line has nowhere to go */
}
.kontrast .kachel { overflow: visible; }
.kontrast .text,
.kontrast .foerderer-band { position: relative; }
.kontrast .kachel::after,
.kontrast .foerderer-band::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 -1px -1px 0;
  border: 1px solid var(--schwarz);
  pointer-events: none;
}

/* ---------- Sponsors: the footer ---------- */

.foerderer-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 32px;
  padding: calc(var(--spalte, 33.33vw) * .07);
  padding-bottom: 56px; /* clear of the contrast button */
  background: var(--ort);
  color: var(--gaswerk-rot);
  font-size: clamp(14px, calc(var(--spalte, 33.33vw) * .04), 20px);
}
.foerderer-band p { flex-basis: 100%; margin: 0; }
.foerderer-band .link a { text-decoration: underline; }
.foerderer-band img { display: block; width: 180px; max-width: 100%; height: auto; }
.foerderer-band[data-ort="gaswerkareal"] img { mix-blend-mode: multiply; } /* the logos have white in them, the ground is beige */
.foerderer-band a:hover { text-decoration: none; }

/* ---------- Wheel: cursor, click to the start page, no re-opening while the rings fade out ---------- */

.logo-ringe .treffer,
.greifbar .logo-flug span { cursor: pointer; }

/* While the rings are closing they stay visible for a moment (fade-out), but must not catch the pointer:
   otherwise re-entering where they still are would open them again. */
.logo-links:not(.offen) .logo-ringe .ringe,
.logo-links:not(.offen) .logo-ringe .ringe * { pointer-events: none !important; }

/* ---------- The wheel stays when the page changes (cross-document view transition) ---------- */

@view-transition { navigation: auto; }
.logo { view-transition-name: gw-rad; }
.logo-flug { view-transition-name: gw-buchstaben; }
::view-transition-group(root) { animation-duration: .3s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- Burger: the phone menu on wide screens ---------- */

.burger { display: none; }

@media (min-width: 1512px) {
  :root { --rund: clamp(72px, calc((100vw - 1320px) / 2 - 24px), 104px); } /* the small logo and the X: as big as the strip beside the page allows */
  .burger {
    position: fixed;
    z-index: 7;
    top: 14px;
    right: calc((100% - 1320px) / 4);
    translate: 50% 0;
    display: block;
    width: var(--rund);
    height: var(--rund);
    padding: 4px;
    border: 0;
    border-radius: var(--kugel);
    background: none;
    cursor: pointer;
  }
  .burger svg { display: block; width: 100%; height: auto; overflow: visible; }
  .burger text { font-family: var(--font-tape); font-size: 76px; fill: var(--gaswerk-rot); }
  .burger .striche { fill: none; stroke: var(--gaswerk-rot); stroke-width: 9.5; }
  .burger:focus-visible { outline: 3px solid var(--schwarz); outline-offset: 3px; }
  .burger .burger-kreis { rotate: var(--drehung, 0deg); transform-box: view-box; transform-origin: 50% 50%; transition: transform 1.4s var(--weich, ease) .35s; }
  /* hovered, the label and the bars each turn on their own */
  .burger .treffer-kreis { fill: none; stroke: transparent; stroke-width: 50px; pointer-events: stroke; }
  .burger .treffer-striche { fill: transparent; pointer-events: all; }
  /* turning back after the pointer left is slower, and waits a moment */
  .burger .burger-striche .striche { transform-box: fill-box; transform-origin: 50% 50%; transition: transform 1.3s var(--weich, ease) .35s; }
  .burger .burger-kreis:hover { transform: rotate(40deg); transition: transform .5s var(--weich, ease); }
  .burger .burger-striche:hover .striche { transform: rotate(90deg); transition: transform .45s var(--weich, ease); }
  .menue-offen .burger { opacity: 0; pointer-events: none; } /* the X of the menu takes over */
}

/* the menu of the phone, with the same X; the wheel stays in the middle and the links wrap round it */
@media (min-width: 901px) {
  .menue-offen { overflow: hidden; }
  .menue-offen .unschaerfe { visibility: hidden !important; }
  .menue-offen .logo-links .ringe { display: none; }
  .menue-offen .logo-links .treffer { pointer-events: none; }
  .menue-offen .logo-flug span { pointer-events: none !important; color: var(--gaswerk-rot); }
  .menue {
    --H: min(calc(100dvh - 160px), 720px);
    --R: calc(var(--rad) * .47);
    position: fixed;
    z-index: 2; /* below the wheel (3) and its letters (4) */
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 80px var(--text-links, 28px);
    background: var(--gaswerk-creme);
  }
  .menue ul {
    flex: 1;
    max-width: 660px;
    height: var(--H);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: min(40px, calc(var(--H) / var(--n) / 1.6));
  }
  .menue ul.links { text-align: right; }
  .menue ul::before { content: ""; height: var(--H); width: var(--R); }
  .menue ul.links::before { float: right; shape-outside: circle(var(--R) at 100% 50%); }
  .menue ul.rechts::before { float: left; shape-outside: circle(var(--R) at 0 50%); }
  .menue li { padding-block: calc((var(--H) / var(--n) - 1.3em) / 2); line-height: 1.3; }
  .menue ul.links li { padding-right: .7em; }
  .menue ul.rechts li { padding-left: .7em; }
  .menue a {
    display: inline;
    padding: 0;
    color: var(--gaswerk-rot);
    font-family: var(--font-tape);
    font-size: inherit;
    line-height: 1.3;
    text-transform: none;
  }
  .menue a:focus-visible { outline-color: var(--gaswerk-rot); }
  .menue-zu {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--gaswerk-rot);
    font: 400 60px/1 var(--font-tape);
    cursor: pointer;
  }
}

.kontrast .burger { border: 1px solid var(--schwarz); }

/* ---------- Call to action: the design system's tape label as a link ---------- */

.cta { margin: .4em 0 0; }
.cta .gw-label { font-size: clamp(16px, calc(var(--kachel) * .055), 26px); text-decoration: none; cursor: pointer; }
.cta .gw-label:hover { text-decoration: underline; }
.cta .gw-label--m, .cta .gw-label { transform-origin: 0 100%; }
.cta:last-child { margin-bottom: .6em; }
.gw-label--ort { background: var(--ort); color: var(--schwarz); }
.logo-links.auf-rad .halt { cursor: pointer; }
.burger { transition: opacity .3s; }

/* ---------- Burger in the middle of the wheel (an X while the menu is open) ---------- */

.burger-mitte { display: none; }
@media (min-width: 901px) {
  .burger-mitte {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    display: block;
    width: 21%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    pointer-events: auto;
  }
  .burger-mitte svg { display: block; width: 100%; height: auto; overflow: visible; transition: rotate 1.3s var(--weich, ease) .35s; } /* back: slower, after a short wait */
  .burger-mitte:hover svg { rotate: 90deg; transition: rotate .45s var(--weich, ease); } /* the burger turns on its own */
  .burger-mitte path { fill: none; stroke: var(--gaswerk-rot); stroke-width: 8.8; }
  .burger-mitte .kreuz,
  .menue-offen .burger-mitte .striche,
  .logo-links.offen .burger-mitte .striche { display: none; }
  .menue-offen .burger-mitte .kreuz,
  .logo-links.offen .burger-mitte .kreuz { display: inline; } /* open (rings or list): the X that closes it */
}

/* ---------- Arial for the links of the menu, one X for both close buttons ---------- */

.menue a { font-family: var(--font-text); }
.menue-zu svg { display: block; width: 100%; height: auto; }
.menue-zu .kreuz { fill: none; stroke: currentColor; stroke-width: 13.8; }
.menue-zu { padding: 16px !important; }

/* ---------- The blur reaches well beyond the window, so its edges stay out of sight when the page is pulled past its ends ---------- */

.unschaerfe { --ueber: 240px; inset: calc(var(--ueber) * -1); }
.unschaerfe i {
  -webkit-mask: radial-gradient(circle at calc(var(--mx, 50vw) + var(--ueber)) calc(var(--my, 50vh) + var(--ueber)), #000, transparent var(--bis));
  mask: radial-gradient(circle at calc(var(--mx, 50vw) + var(--ueber)) calc(var(--my, 50vh) + var(--ueber)), #000, transparent var(--bis));
}
.unschaerfe::after {
  background: radial-gradient(circle at calc(var(--mx, 50vw) + var(--ueber) - var(--rad) * .5) calc(var(--my, 50vh) + var(--ueber) - 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 calc(var(--mx, 50vw) + var(--ueber)) calc(var(--my, 50vh) + var(--ueber)), #000 calc(var(--rad) * 1.05), transparent calc(var(--rad) * 1.85));
  mask: radial-gradient(circle at calc(var(--mx, 50vw) + var(--ueber)) calc(var(--my, 50vh) + var(--ueber)), #000 calc(var(--rad) * 1.05), transparent calc(var(--rad) * 1.85));
}

/* ---------- Menu: balanced list on wide screens, plain list on phones ---------- */

@media (min-width: 901px) { .menue ul.schmal { display: none; } }
@media (max-width: 900px) { .menue ul.weit { display: none; } }

/* The X sits exactly where the small logo sits */
@media (min-width: 1512px) {
  .menue-zu {
    top: 14px;
    right: calc((100% - 1320px) / 4);
    translate: 50% 0;
    width: var(--rund);
    height: var(--rund);
    padding: calc(var(--rund) * .2) !important;
  }
}



/* ---------- Contrast mode: no blurred ring navigation, only the list (opened by the burger) ---------- */

.kontrast .logo-links .ringe,
.kontrast .unschaerfe { display: none !important; }
/* the wheel itself stays clickable: it opens the plain list */
/* where the nav is otherwise hidden (letters resting in a title) the burger must stay reachable */
.flug.kontrast:not(.greifbar) .logo-links { display: block; }

/* ---------- Burger inside the wheel on phone and tablet ---------- */

.logo-burger { display: none; }
@media (max-width: 900px) {
  .logo-burger { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .logo-burger .striche { fill: none; stroke: var(--gaswerk-rot); stroke-width: 9.5; }
  .auf-rot .logo-burger .striche { stroke: var(--gaswerk-creme); }
  .kontrast .auf-rot .logo-burger .striche { stroke: var(--schwarz); }
}

/* ---------- The label left of the page (raster.js shows it once the strip is wide enough) ---------- */

.rand-label {
  z-index: 8; /* also above the open menu: it keeps its place there */
  position: fixed; /* stays while scrolling, level with the middle of the small logo top right */
  top: calc(14px + var(--rund, 72px) / 2);
  translate: 0 -50%;
  right: calc(50% + 660px + 48px);
  visibility: hidden;
  margin: 0;
  color: var(--gaswerk-rot);
  font-size: min(calc(var(--spalte, 440px) * .1), 44px);
  line-height: .9;
  white-space: nowrap;
}
.rand-label-da .rand-label { visibility: visible; }
.rand-label a { color: inherit; }
/* then the same label on the landing photo is not needed */
.rand-label-da .bild-titel { visibility: hidden; }
@media (max-width: 900px) { .rand-label { display: none; } }

/* ---------- The beige ground of the list menu fades in and out ---------- */

@keyframes menue-grund-ein { from { background-color: transparent; } }
@keyframes menue-grund-aus { to { background-color: transparent; } }
@keyframes menue-text-ein { from { opacity: 0; } }
@keyframes menue-text-aus { to { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .menue:not([hidden]) { animation: menue-grund-ein .5s ease; }
  .menue:not([hidden]) :is(ul, .menue-zu) { animation: menue-text-ein .45s ease .12s backwards; }
  .menue.schliesst { animation: menue-grund-aus .4s ease forwards; }
  .menue.schliesst :is(ul, .menue-zu) { animation: menue-text-aus .25s ease forwards; }
}

/* ---------- The label in the list menu: top left, back to the landing page ---------- */

.menue .menue-label {
  display: block;
  padding: 0;
  font-family: var(--font-tape);
  text-transform: uppercase;
  position: absolute;
  top: 50px; /* level with the middle of the X */
  left: max(var(--text-links, 28px), 16px);
  translate: 0 -50%;
  margin: 0;
  color: var(--gaswerk-rot);
  font-size: 40px;
  line-height: .9;
  white-space: nowrap;
}
@media (min-width: 1512px) { .menue .menue-label { top: calc(14px + var(--rund, 72px) / 2); } }
@media (max-width: 900px) { .menue .menue-label { top: 42px; font-size: 32px; } }
@media (max-width: 560px) { .menue .menue-label { top: 40px; font-size: 28px; } }
@media (prefers-reduced-motion: no-preference) {
  .menue:not([hidden]) .menue-label { animation: menue-text-ein .45s ease .12s backwards; }
  .menue.schliesst .menue-label { animation: menue-text-aus .25s ease forwards; }
}

/* Phone and tablet: the links sit at the right, within reach of the thumb */
@media (max-width: 900px) {
  .menue ul { text-align: right; }
}

.kontrast .menue .menue-label { font-family: var(--font-text); text-transform: none; font-weight: 700; }

/* With the label beside the page, the menu has no label of its own: the first one stays where it is */
.rand-label-da .menue .menue-label { display: none; }

/* ---------- "Hoher Kontrast": in the strip beside the page, else in the list menu ---------- */

.kontrast-knopf.kontrast-knopf--rand { display: none; left: 24px !important; bottom: 24px; }
.rand-label-da .kontrast-knopf.kontrast-knopf--rand,
html:has(.logo-links.offen) .kontrast-knopf.kontrast-knopf--rand { display: inline-flex; } /* also while the blurred ring nav is open */
.kontrast-knopf--menue { position: absolute; z-index: 1; left: var(--text-links, 28px); bottom: 28px; }
.rand-label-da .kontrast-knopf--menue { display: none; }
@media (max-width: 900px) { .kontrast-knopf--menue { left: auto; right: 16px; bottom: 20px; } } /* the thumb's side */

/* ---------- Contrast switch: label left, a toggle that slides left / right ---------- */

.kontrast-knopf {
  display: inline-flex;
  align-items: center;
  gap: .8em;
  padding: .45em .55em .45em 1em;
  border: 1px solid var(--schwarz);
  border-radius: 999px;
  background: var(--weiss);
  color: var(--schwarz);
  font: 17px/1.2 var(--font-text);
}
.kontrast-schalter {
  position: relative;
  flex: none;
  width: 3em;
  height: 1.7em;
  border: 1.5px solid var(--schwarz);
  border-radius: 999px;
  background: var(--weiss);
  transition: background .25s ease;
}
.kontrast-schalter i {
  position: absolute;
  top: 50%;
  left: .22em;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  background: var(--schwarz);
  translate: 0 -50%;
  transition: left .25s ease, background .25s ease;
}
.kontrast-knopf[aria-checked="true"] .kontrast-schalter { background: var(--schwarz); }
.kontrast-knopf[aria-checked="true"] .kontrast-schalter i { left: calc(100% - 1.32em); background: var(--weiss); }
@media (prefers-reduced-motion: reduce) { .kontrast-schalter, .kontrast-schalter i { transition: none; } }

/* ---------- "Zurück zur Startseite": the design's bold back arrow ---------- */

.zurueck .pfeil {
  display: block;
  margin-bottom: .1em;
  font-family: var(--font-tape);
  font-size: calc(var(--kachel) * .3);
  line-height: .8;
  text-decoration: none;
}
.zurueck .link a { text-decoration: none; }
.zurueck .link a:hover .zurueck-text { text-decoration: underline; }

/* ---------- Landing page on phone and tablet: the titles stand level with the wheel (burger) ---------- */

@media (max-width: 900px) {
  /* The wheel's middle is 50px from the top (tablet) or 40px (phone); the capitals of a title (their ink, measured) have their middle .1136 of a cell below the top of its tile. */
  .bild-titel,
  .raster > .rechts:first-child .titel,
  .bild:has(> .bild-titel) + .rechts .titel { translate: 0 calc(50px - var(--kachel) * .1136); }
}
@media (max-width: 560px) {
  .bild-titel,
  .raster > .rechts:first-child .titel,
  .bild:has(> .bild-titel) + .rechts .titel { translate: 0 calc(40px - var(--kachel) * .1136); }
}

/* ---------- Back block: the arrow and the text sit at the right of the block ---------- */

.zurueck .link a { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }

/* ---------- Contrast mode: the label beside the page is as big as the other titles ---------- */

.kontrast .rand-label { font-size: min(calc(var(--spalte, 440px) * .08), 35px); line-height: 1.1; }

/* ---------- First load: no text before GasiFont is there; the wheel starts alone, the rest follows ---------- */

.schrift-warten body { opacity: 0; }

.rand-label, .burger, .kontrast-knopf--rand { transition: opacity .7s ease; }
.eintritt:not(.inhalt-da) :is(.rand-label, .burger, .kontrast-knopf--rand) { opacity: 0; pointer-events: none; }

/* ---------- Links in the content are underlined, those of the navigation are not ---------- */

.info a, .foerderer-band a, .text a, .cta a { text-decoration: underline; text-underline-offset: .15em; }
.titel a, .menue a, .logo-ringe a, .rand-label, .menue-label { text-decoration: none; }
.rechts .info .link-nur { text-align: right; } /* "Alle Termine" and "Archiv" in the agenda tile */

/* ---------- Dates: the day written out where there is room, else short ---------- */

.info { container-type: inline-size; }
.tag-kurz { display: none; }
@container (max-width: 26em) { .datum-bereich .tag-lang { display: none; } .datum-bereich .tag-kurz { display: inline; } }
@container (max-width: 13em) { .datum .tag-lang { display: none; } .datum .tag-kurz { display: inline; } }

/* ---------- "Zurück zur Startseite": the link at the left, only the arrow at the right ---------- */

.zurueck .link a { display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: space-between; gap: 1em; text-align: right; text-decoration: none; }
.zurueck .zurueck-text { text-decoration: underline; text-underline-offset: .15em; }
.zurueck .pfeil { margin: 0; flex: none; text-decoration: none; }

/* ---------- While the blurred ring nav is open the label top left is there too (link to the landing page) ---------- */

@media (min-width: 901px) {
  html:has(.logo-links.offen):not(.rand-label-da) .rand-label {
    visibility: visible;
    right: auto;
    left: max(var(--text-links, 28px), 16px); /* no free strip beside the page: at the page's left edge, like in the list menu */
  }
}

/* ---------- Large screens: the text of the tiles is a little larger (it stopped growing at 17.6px) ---------- */

@media (min-width: 1320px) {
  .info { font-size: calc(var(--kachel) * .045); } /* 19.8px at the page's full width */
}