/* ==========================================================================
   Guet gfunde · Branchen (branchen.html), technische Schicht
   - Raster zum Anfassen: jede Branche dreht sich um, dahinter steht immer derselbe Ablauf
   - Bemassung des Rasters: echte Breite, Spalten und Fuge, live gemessen
   Hausbewegung cubic-bezier(.2,.7,.2,1). Amber ist Licht, Navy die Tinte.
   ========================================================================== */
.raster-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin: 0 0 1.4rem; }
.raster-leiste__text { margin: 0; color: var(--fg-muted); font-size: var(--fs-sm); }
.raster-leiste__knopf {
  display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; padding: .55rem .7rem .55rem 1.1rem;
  border: 1px solid rgba(10, 10, 10,.22); border-radius: 0; background: transparent; color: var(--navy-900);
  font: 600 var(--fs-sm)/1 var(--font-sans); cursor: pointer; transition: background .4s var(--ws-haus), border-color .4s var(--ws-haus), color .4s var(--ws-haus);
}
.raster-leiste__knopf:hover { border-color: var(--navy-900); }
.raster-leiste__knopf[aria-pressed="true"] { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.raster-leiste__knopf:focus-visible { outline: 3px solid var(--navy-900); outline-offset: 3px; }
kbd { display: inline-grid; place-items: center; min-width: 1.7em; height: 1.7em; padding: 0 .35em; border-radius: 0;
  border: 1px solid rgba(10, 10, 10,.28); border-bottom-width: 2px; background: var(--paper);
  font: 600 .72rem/1 var(--ws-mono); color: var(--navy-900); }
.raster-leiste__knopf[aria-pressed="true"] kbd { background: var(--navy-800); border-color: rgba(255,255,255,.3); color: var(--amber-400); }
@media (hover: none) { .raster-leiste__knopf kbd { display: none; } .raster-leiste__knopf { padding-right: 1.1rem; } }

/* Masslinie über dem Raster */
.raster-mass { position: relative; height: 22px; margin-bottom: .9rem; }
.raster-mass__linie { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(10, 10, 10,.35); }
.raster-mass__linie::before, .raster-mass__linie::after { content: ""; position: absolute; top: -7px; width: 1px; height: 15px; background: rgba(10, 10, 10,.5); }
.raster-mass__linie::before { left: 0; } .raster-mass__linie::after { right: 0; }
.raster-mass__wert { position: absolute; left: 50%; top: 50%; translate: -50% -50%; padding: 0 .7rem; background: var(--paper); white-space: nowrap;
  font: 500 .7rem/1 var(--ws-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }

/* Eine Branche: zwei Seiten in derselben Zelle, die Kachel dreht sich um die Hochachse */
.dreh.card { display: grid; padding: 0; background: none; border: 0; perspective: 1200px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dreh__innen { position: relative; display: grid; transform-style: preserve-3d;
  rotate: y 0deg; transition: rotate .95s var(--ws-haus); }
.dreh.is-gedreht .dreh__innen { rotate: y 180deg; }
.dreh__vorne, .dreh__hinten {
  grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; min-width: 0;
  border-radius: var(--radius); padding: clamp(1.4rem, 1.1rem + 1vw, 2rem) clamp(1.3rem, 1rem + 1vw, 1.9rem) 4.4rem;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.dreh__vorne { background: var(--bg-raised); border: 1px solid var(--line); transition: box-shadow .5s var(--ws-haus), border-color .5s var(--ws-haus); }
.dreh__vorne h3 { font-size: var(--fs-h4); margin: 0 2.4rem .75rem 0; }
.dreh__vorne p { color: var(--fg-muted); }
.dreh__ort { font: 500 .7rem/1 var(--ws-mono); letter-spacing: .1em; color: var(--accent-text); }
.dreh__vorne > .dreh__ort { position: absolute; top: 1.15rem; right: 1.2rem; padding: .3rem .4rem; border: 1px dashed rgba(200, 5, 15,.45); border-radius: 4px; }

.dreh__hinten { rotate: y 180deg; background: var(--navy-900); color: #e6e6e6; border: 1px solid var(--navy-900);
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 16px 16px; background-position: -1px -1px; }
.dreh__kopf { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; padding-bottom: .6rem; border-bottom: 1px dashed rgba(255,255,255,.22);
  font: 600 .7rem/1 var(--ws-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--amber-400); }
.dreh__kopf .dreh__ort { color: rgba(255,255,255,.55); }
.dreh__ablauf { list-style: none; margin: 0; padding: 0; display: grid; gap: .42rem; font: 500 .76rem/1.35 var(--ws-mono); letter-spacing: .01em; }
.dreh__ablauf li { display: grid; grid-template-columns: 2.1em 1fr; }
.dreh__ablauf b { color: var(--amber-400); font-weight: 600; }
.dreh__fuss { position: absolute; left: clamp(1.3rem, 1rem + 1vw, 1.9rem); bottom: 1.35rem; right: 7.5rem;
  font: 800 1.05rem/1.1 var(--font-sans); color: var(--amber-400); }

/* Der Knopf dreht sich nicht mit: er bleibt wie eine Taste am Gerät an seinem Platz */
.dreh__knopf { position: absolute; right: .9rem; bottom: .9rem; z-index: 2; display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: 0 .9rem; border: 1px solid rgba(10, 10, 10,.18); border-radius: 0; background: var(--paper);
  font: 600 .72rem/1 var(--ws-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--navy-900); cursor: pointer;
  transition: background .5s var(--ws-haus), color .5s var(--ws-haus), border-color .5s var(--ws-haus); }
.dreh__knopf svg { width: 16px; height: 16px; transition: rotate .95s var(--ws-haus); }
.dreh__wort { display: grid; } .dreh__wort > span { grid-area: 1 / 1; transition: opacity .3s; }
.dreh__wort > span + span { opacity: 0; }
.dreh.is-gedreht .dreh__knopf { background: var(--amber-500); border-color: var(--amber-500); color: var(--navy-950); }
.dreh.is-gedreht .dreh__knopf svg { rotate: 180deg; }
.dreh.is-gedreht .dreh__wort > span { opacity: 0; } .dreh.is-gedreht .dreh__wort > span + span { opacity: 1; }
.dreh__knopf:focus-visible { outline: 3px solid var(--navy-900); outline-offset: 3px; }
.dreh.is-gedreht .dreh__knopf:focus-visible { outline-color: var(--amber-400); }

/* Ruhige Fassung: kein Drehen, die Seiten wechseln still */
@media (prefers-reduced-motion: reduce) {
  .dreh__innen, .dreh.is-gedreht .dreh__innen { rotate: none; transform: none; transition: none; }
  .dreh__hinten { rotate: none; visibility: hidden; }
  .dreh.is-gedreht .dreh__hinten { visibility: visible; }
  .dreh.is-gedreht .dreh__vorne { visibility: hidden; }
  .dreh__knopf svg { transition: none; }
}