/* Workshops as a bento grid (since 2026-10-14, after Vincent's reference image and his favourite setting from the
   old Beratung test panel: corners 8 px, gap 14 px, one tile in the accent colour).

   One grid of tiles. A closed tile shows only its name, one line and its
   machine. The plus (or a click anywhere on the tile) grows it over the whole grid and reveals its text; the
   machine travels from its spot in the tile to its spot in the detail view.

   How the growth works without anything re-wrapping (bento.js measures and writes the variables):
   - the tile moves from its grid cell (--cx, --cy) to the grid's corner and grows to the grid's size (--bw, --bh),
     every value in one direction only;
   - the detail layer (.k-lang) has its final size from the start and stays put on the page while the tile opens
     around it (its offset runs against the tile's, with the same timing);
   - the machine (.k-bild) goes from its teaser slot (--x0, --y0, --w0) to its detail slot (--x1, --y1, --w1).
   Timing: the teaser fades out (140 ms), the tile grows (--dauer), the detail fades in from halfway.
   Closing runs the same steps backwards in order (not the animation in reverse): detail out, tile shrinks, teaser in. */

.bento { --luecke: 14px; --ecken: 8px; --pad: clamp(22px, 2.3vw, 32px); --dauer: 650ms; --kurve: cubic-bezier(.65, 0, .35, 1); --vor: 120ms;
  position: relative; max-width: var(--raster); margin: 0 auto; display: grid; gap: var(--luecke); align-content: start;
  transition: height var(--dauer) var(--kurve) var(--vor); }
.bento.still, .bento.still * { transition: none !important; }

/* ——— The arrangement ——— */
.bento--workshops { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 4fr); grid-template-rows: 176px 262px 330px;
  grid-template-areas: "intro grund cta" "intro grund sorgen" "arbeit arbeit sorgen"; }
.kachel[data-feld="intro"] { grid-area: intro; }
.kachel[data-feld="grund"] { grid-area: grund; }
.kachel[data-feld="cta"] { grid-area: cta; }
.kachel[data-feld="arbeit"] { grid-area: arbeit; }
.kachel[data-feld="sorgen"] { grid-area: sorgen; }

/* ——— Tiles ——— */
/* z-index: a closing tile stays on top until it is small again */
.kachel { position: relative; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; min-width: 0; overflow: hidden;
  border: 1px solid rgba(26, 43, 102, .16); border-radius: var(--ecken); background: var(--weiss); color: var(--tinte);
  transition: left var(--dauer) var(--kurve) 100ms, top var(--dauer) var(--kurve) 100ms, width var(--dauer) var(--kurve) 100ms, height var(--dauer) var(--kurve) 100ms,
    z-index 0s linear calc(var(--dauer) + 100ms), border-color .25s; }
.kachel.k-papier { background: var(--papier); }
.kachel.k-blau { background: var(--blau); border-color: var(--blau); color: var(--weiss); }
.kachel.k-tief { background: var(--tief); border-color: var(--tief); color: var(--weiss); }
.kachel:not(.k-fest):not(.offen) { cursor: pointer; }
/* hover only where there is a pointer that hovers: on a phone a tap leaves :hover stuck on the tile */
@media (hover: hover) {
  .kachel:not(.k-fest):not(.offen):hover { border-color: rgba(26, 43, 102, .5); }
  .kachel.k-blau:not(.offen):hover { border-color: var(--blau); }
}
.kachel, .k-zu, .k-knopf, .k-rahmen { -webkit-tap-highlight-color: transparent; }   /* no grey flash (the rotated cross showed it as a diamond) */
.kachel.offen { z-index: 3; left: calc(-1 * var(--cx, 0px)); top: calc(-1 * var(--cy, 0px)); width: var(--bw, 100%); height: var(--bh, 100%);
  transition-delay: var(--vor), var(--vor), var(--vor), var(--vor), 0s, 0s; }
/* once a tile has grown over the grid, the tiles under it go (their antialiased edges showed as a hairline along the
   open tile's edge); they are back at once when it starts to close. Phones open tiles in place, so not there. */
@media (min-width: 761px) {
  .bento:has(> .kachel.offen) > .kachel:not(.offen) { visibility: hidden; transition: visibility 0s linear calc(var(--vor) + var(--dauer)); }
}

/* the teaser: the closed tile's own layout, kept at the cell's size while the tile grows */
.k-kurz { position: absolute; left: 0; top: 0; width: var(--zw, 100%); height: var(--zh, 100%); padding: var(--pad);
  display: grid; column-gap: 24px; transition: opacity 250ms ease calc(var(--dauer) + 60ms); }
.offen .k-kurz { opacity: 0; transition: opacity 140ms ease; }
.k-platz { min-width: 0; min-height: 0; }

.k-name { font: 700 clamp(1.4rem, 2.1vw, 2rem)/1.15 var(--display); letter-spacing: -.03em; }
.k-knopf { all: unset; cursor: pointer; }
.k-knopf:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; border-radius: 2px; }
.k-zeile { margin-top: 10px; font-size: 1rem; line-height: 1.5; color: var(--text-2); max-width: 36ch; }
.k-blau .k-zeile { color: var(--weiss); }

/* the round plus on every tile that opens: a sign only, the name is the button (and the whole tile reacts).
   Open, it turns into the cross that closes the tile (.k-zu). */
.k-plus { grid-area: mehr; }
.k-plus::after { content: ""; width: 11px; height: 11px;
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; }
.k-plus { justify-self: end; align-self: end; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(26, 43, 102, .3); border-radius: 50%;
  color: var(--tinte); background: var(--weiss); transition: border-color .25s, transform .3s var(--kurve); }
@media (hover: hover) {
  .kachel:hover .k-plus { border-color: var(--navy); transform: rotate(90deg); }
}

/* the teaser arrangements */
.k-kurz { grid-template-columns: minmax(0, 1fr) auto; }
[data-art="oben"] .k-kurz { grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "name mehr" "zeile zeile" "platz platz"; }
[data-art="oben"] .k-platz { margin-top: 12px; }
[data-art="oben"] .k-plus { align-self: start; }
[data-art="unten"] .k-kurz { grid-template-rows: minmax(0, 1fr) auto auto; grid-template-areas: "platz platz" "name mehr" "zeile mehr"; }
[data-art="unten"] .k-platz { margin-bottom: 16px; }
[data-art="links"] .k-kurz { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: 1fr auto auto auto 1fr;
  grid-template-areas: ". platz" "name platz" "zeile platz" "mehr platz" ". platz"; }
[data-art="links"] .k-plus { justify-self: start; align-self: start; margin-top: 22px; }
[data-art="rechts"] .k-kurz { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: 1fr auto auto auto 1fr;
  grid-template-areas: "platz ." "platz name" "platz zeile" "platz mehr" "platz ."; }
[data-art="rechts"] .k-plus { justify-self: start; margin-top: 18px; }
[data-art="rechts"] .k-name { font-size: clamp(1.3rem, 1.85vw, 1.75rem); }
.k-name { grid-area: name; }
.k-zeile { grid-area: zeile; }
.k-kurz .k-platz { grid-area: platz; }

.k-lang .k-titel { font: 700 clamp(2.1rem, 3.6vw, 3.1rem)/1 var(--display); letter-spacing: -.03em; }

/* the intro tile of Workshops (fixed, it doesn't grow): the section heading and its text (one sentence per line),
   always visible; at its foot "Rahmen und Preis", a bar that grows upward over the text and shows the facts.
   The facts are the box's content, anchored at its foot, so they come into view from the bottom up as it grows
   (one direction, nothing moves inside); closed, the bar's row lies over them. Open, the row fades and a small cross
   shows top right. It grows to --auf: the facts' height, but never past the heading (bento.js measures both). */
.kachel.k-intro { justify-content: flex-start; padding-bottom: calc(var(--pad) + 74px); }   /* room for the bar (beats .k-fest below) */
.k-intro .k-gross { font: 800 clamp(2.3rem, 4vw, 3.5rem)/1 var(--display); letter-spacing: -.045em; }   /* like the other section headings (styles.css) */
.k-intro .k-gross::before { content: ""; display: block; width: 44px; height: 2px; margin-bottom: 26px; background: var(--tinte); }
.k-intro .k-zeile { margin-top: 18px; font-size: 1.05rem; max-width: 38ch; text-wrap: balance; }   /* even lines, no word left alone */
.k-intro .k-zeile + .k-zeile { margin-top: 8px; }
.k-rahmen { --zu: 58px; position: absolute; z-index: 2; left: var(--pad); right: var(--pad); bottom: var(--pad); display: flex; flex-direction: column; justify-content: flex-end;
  max-height: var(--zu); overflow: hidden; cursor: pointer; background: var(--weiss); border: 1px solid rgba(26, 43, 102, .22); border-radius: 6px;
  transition: max-height .45s var(--kurve), border-color .25s, box-shadow .25s; }
.k-rahmen.auf { max-height: var(--auf, 300px); border-color: var(--navy); box-shadow: 0 -12px 28px -14px rgba(14, 23, 34, .18); }
@media (hover: hover) {
  .k-rahmen:hover { max-height: var(--auf, 300px); border-color: var(--navy); box-shadow: 0 -12px 28px -14px rgba(14, 23, 34, .18); }
}
.k-rahmen .fakten { flex: none; margin: 0; padding: 8px 40px 6px 18px; border-top: 0; font-size: .92rem; line-height: 1.4; }
.k-rahmen .fakten div { grid-template-columns: 4.6em 1fr; gap: 10px; padding: 7px 0; }
.k-rahmen .fakten div:last-child { border-bottom: 0; }
/* the bar's own row lies over the facts' foot while closed */
.k-rahmen-knopf { all: unset; box-sizing: border-box; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--zu) - 2px); display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px; background: var(--weiss); cursor: pointer; font: 500 1.05rem/1.2 var(--display); letter-spacing: -.01em; color: var(--tinte); transition: opacity .2s; }
.k-rahmen-knopf:focus-visible { outline: 3px solid var(--navy); outline-offset: -3px; border-radius: 6px; }
.k-rahmen .k-plus { align-self: center; width: auto; height: auto; border: 0; background: none; }
.kachel:hover .k-rahmen .k-plus { transform: none; }
.k-rahmen-x { position: absolute; z-index: 1; top: 10px; right: 12px; width: 14px; height: 14px; opacity: 0; transition: opacity .2s;
  background: linear-gradient(var(--tinte), var(--tinte)) center / 100% 1.5px no-repeat, linear-gradient(var(--tinte), var(--tinte)) center / 1.5px 100% no-repeat; transform: rotate(45deg); }
.k-rahmen.auf .k-rahmen-knopf { opacity: 0; }
.k-rahmen.auf .k-rahmen-knopf:focus-visible { opacity: 1; background: transparent; color: transparent; }
.k-rahmen.auf .k-rahmen-x { opacity: 1; }
@media (hover: hover) {
  .k-rahmen:hover .k-rahmen-knopf:not(:focus-visible) { opacity: 0; }
  .k-rahmen:hover .k-rahmen-x { opacity: 1; }
}

/* ——— The machine: one figure per tile, placed by bento.js ——— */
.k-bild { position: absolute; z-index: 1; left: var(--x0, 0); top: var(--y0, 0); width: var(--w0, 0);
  transition: left var(--dauer) var(--kurve) 100ms, top var(--dauer) var(--kurve) 100ms, width var(--dauer) var(--kurve) 100ms; }
.offen .k-bild { left: var(--x1, 0); top: var(--y1, 0); width: var(--w1, 0); transition-delay: var(--vor); }
.kachel:not(.offen) .k-bild { pointer-events: none; }   /* closed, a click opens the tile; open, it plays the machine's interludes */
/* on the blue tile the machine is drawn in white on the tile's blue (no other shades) */
.k-blau .fig[data-ton="dunkel"] { --anatomy-paper: var(--blau); --anatomy-face: var(--blau); --anatomy-top: var(--blau); --anatomy-shade-0: var(--blau); --anatomy-shade-1: var(--blau);
  --anatomy-shade-2: var(--blau); --anatomy-shade-3: var(--blau); --anatomy-lit-top: var(--blau); --anatomy-lit-shade: var(--blau); }

/* ——— The detail view ——— */
.k-lang { position: absolute; left: calc(-1 * var(--cx, 0px)); top: calc(-1 * var(--cy, 0px)); width: var(--lw, 100%); height: var(--lh, auto);
  padding: calc(var(--pad) + 8px) calc(var(--pad) + 8px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 80px);
  opacity: 0; visibility: hidden;
  transition: left var(--dauer) var(--kurve) 100ms, top var(--dauer) var(--kurve) 100ms, opacity 140ms ease, visibility 0s 140ms; }
.offen .k-lang { left: 0; top: 0; opacity: 1; visibility: visible;
  transition: left var(--dauer) var(--kurve) var(--vor), top var(--dauer) var(--kurve) var(--vor), opacity 320ms ease calc(var(--vor) + var(--dauer) * .5), visibility 0s; }
.bento.misst .k-lang { height: auto; }
.k-lang:focus { outline: none; }
.k-text { align-self: center; max-width: 62ch; }
.k-lang .k-titel { font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1.1; margin-bottom: 6px; }
.k-text > p:not(.k-titel) { margin-top: 16px; color: var(--text-2); }
.k-text strong { font-weight: 700; color: var(--tinte); }
.k-text .liste-titel { margin-top: 22px; font-weight: 600; color: var(--tinte); }
.k-lang .k-platz { align-self: center; width: 100%; aspect-ratio: 1; max-height: min(560px, 100%); }

.k-blau .k-text > p:not(.k-titel), .k-blau .k-text strong, .k-blau .k-text .liste-titel, .k-blau .liste { color: var(--weiss); }
.k-blau .liste li::before { background: var(--weiss); }

/* the close button: the plus turned into a cross, top right of the grown tile */
.k-zu { position: absolute; z-index: 2; top: calc(var(--pad) - 4px); right: calc(var(--pad) - 4px); width: 46px; height: 46px; padding: 0; border: 1px solid rgba(26, 43, 102, .3); border-radius: 50%;
  background: var(--weiss); color: var(--tinte); cursor: pointer; opacity: 0; visibility: hidden; transform: rotate(0deg);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s 140ms; }
.k-zu::before, .k-zu::after { content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 1.5px; margin: -.75px 0 0 -7.5px; background: currentColor; }
.k-zu::after { transform: rotate(90deg); }
.offen .k-zu { opacity: 1; visibility: visible; transform: rotate(45deg);
  transition: opacity 300ms ease calc(var(--vor) + var(--dauer) * .6), transform 500ms var(--kurve) calc(var(--vor) + var(--dauer) * .6), visibility 0s, border-color .25s; }
@media (hover: hover) { .k-zu:hover { border-color: var(--navy); } }
.k-zu:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.k-blau .k-zu { border-color: var(--weiss); color: var(--blau); }
.k-blau .k-zu:focus-visible { outline-color: var(--weiss); }

/* ——— Buttons inside tiles: the hero's button (metal, metall.js); white with steel type on the metal tile ——— */
.k-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 26px; padding: 0 22px; height: 56px; border-radius: 6px;
  background: var(--blau); color: var(--weiss); font: 600 1.05rem/1 var(--display); letter-spacing: -.01em; text-decoration: none; transition: background .2s; }
.k-cta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.k-cta:hover { background: var(--blau-tief); }
.k-cta:hover svg { transform: translateX(3px); }
.k-cta:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; }
.k-blau .k-cta { background: var(--weiss); color: var(--blau); }
.k-blau .k-cta:focus-visible { outline-color: var(--weiss); }

/* ——— Fixed tiles (they don't open) ——— */
.k-fest { padding: var(--pad); display: flex; flex-direction: column; justify-content: center; }
.k-fest .k-cta { margin-top: 0; height: 64px; font-size: 1.15rem; }
.k-klein { margin-top: 16px; font-size: .95rem; line-height: 1.5; color: var(--text-2); max-width: 40ch; }

/* ——— Tablets: two columns ——— */
@media (max-width: 1099px) {
  .bento--workshops { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(300px, auto) 300px 300px;
    grid-template-areas: "intro grund" "arbeit arbeit" "sorgen cta"; }
  [data-art="rechts"] .k-kurz { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto auto; grid-template-areas: "platz platz" "name mehr" "zeile mehr"; }
  [data-art="rechts"] .k-platz { margin-bottom: 14px; }
  [data-art="rechts"] .k-plus { justify-self: end; align-self: end; margin-top: 0; }
  [data-art="rechts"] .k-zeile { font-size: .95rem; }
  .k-name { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
  .k-lang { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

/* ——— Phones: one column; a tile opens in place and the page grows with it (bento.js animates the height and fades
   the text). The plus stays where it is and turns into the cross that closes the tile; .schliesst keeps the text laid
   out while the tile shrinks over it. ——— */
@media (max-width: 760px) {
  .bento { display: flex; flex-direction: column; height: auto !important; }
  .kachel, .kachel.offen { left: 0; top: 0; width: auto; height: auto; transition: border-color .25s; }
  .kachel[data-feld="cta"] { order: 9; }
  .k-kurz, [data-art] .k-kurz { position: relative; width: auto; height: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto;
    grid-template-areas: "platz platz" "name mehr" "zeile zeile"; row-gap: 0; }
  .k-kurz .k-platz { height: 200px; margin: 0 0 18px; }
  .k-plus, [data-art] .k-plus { position: static; justify-self: end; align-self: center; margin: 0; }
  .offen .k-kurz { opacity: 1; }
  .offen .k-kurz .k-zeile, .schliesst .k-kurz .k-zeile { display: none; }
  .k-lang, .offen .k-lang { position: relative; left: 0; top: 0; width: auto; height: auto; display: none; padding: 4px var(--pad) var(--pad); margin-top: -10px;
    opacity: 1; visibility: visible; transition: none; }
  .offen .k-lang, .schliesst .k-lang { display: block; }
  .k-lang .k-titel, .k-lang .k-platz { display: none; }
  .k-lang .k-text + .k-text { margin-top: 8px; }
  .k-bild, .offen .k-bild { left: var(--x0, 0); top: var(--y0, 0); width: var(--w0, 0); transition: none; }
  .kachel.offen .k-bild { pointer-events: none; }   /* a tap on the machine goes to the lid below it and closes the tile */
  .kachel.offen .k-kurz { cursor: pointer; }
  .k-zu, .offen .k-zu { display: none; }
  .k-plus, [data-art] .k-plus { cursor: pointer; transition: transform 420ms cubic-bezier(.32, .72, 0, 1), background-color .25s, border-color .25s; }
  .offen .k-kurz .k-plus { transform: rotate(135deg); border-color: var(--navy); }
  .k-blau.offen .k-kurz .k-plus { border-color: var(--weiss); }
}

@media (prefers-reduced-motion: reduce) {
  .bento, .bento * { transition: none !important; }
}