/* Medienstation „Webe dein Muster“ */

main[data-ansicht="weben"] { max-width: 1180px; }
.webstuhl { padding: 1.4rem 0 1rem; }
.ws-kopf h1 { font-size: clamp(2.2rem, 8vw, 3.5rem); }
.ws-intro { max-width: 64ch; margin: .7rem 0 0; color: var(--tinte-2); font-size: 1.05rem; }
.ws-flaeche { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: 1.4rem; }
@media (min-width: 900px) {
  .ws-flaeche { grid-template-columns: minmax(330px, 440px) 1fr; align-items: start; }
}
.ws-werkzeuge { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }

/* Die Karte aus Pappe, mit abgeschnittener Ecke wie bei echten Lochkarten */
.ws-kartenrahmen {
  --pappe: #E6D4AE;
  position: relative; padding: 14px 10px 12px;
  background:
    repeating-linear-gradient(90deg, transparent 0 23px, rgb(122 88 12 / .06) 23px 24px),
    var(--pappe);
  clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%, 0 22px);
  border-radius: 6px;
  box-shadow: 0 1px 0 rgb(0 0 0 / .06), 0 18px 34px -22px rgb(0 0 0 / .55);
  color: #2A2117;
}
@media (max-width: 520px) {
  .ws-kartenrahmen { margin: 0 calc(-1 * var(--rand)); padding: 12px 0 10px; border-radius: 0; }
}
.ws-karte { display: flex; flex-direction: column; gap: 3px; width: min(100%, calc(var(--spalten) * 32px)); margin: 0 auto; touch-action: none; }
.ws-reihe { display: grid; grid-template-columns: repeat(var(--spalten), minmax(0, 1fr)); gap: 3px; border-radius: 4px; }
.ws-reihe.aktiv { background: rgb(158 47 37 / .22); box-shadow: 0 0 0 2px rgb(158 47 37 / .55); }
.ws-loch {
  aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: 50%;
  background: rgb(42 33 23 / .12); cursor: crosshair;
  transition: background 120ms, transform 120ms;
}
.ws-loch:hover { background: rgb(42 33 23 / .26); }
.ws-loch[aria-pressed="true"] {
  background: radial-gradient(circle at 50% 38%, #4A3A28 0, #1A140D 70%);
  box-shadow: inset 0 2px 3px rgb(0 0 0 / .65), 0 1px 0 rgb(255 255 255 / .35);
  transform: scale(.94);
}
.ws-loch:focus-visible { outline: 3px solid var(--indigo); outline-offset: 1px; position: relative; z-index: 1; }
.ws-zeile2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-top: .9rem; }
.klein-schalter { min-height: 44px; }
.ws-name { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1 1 260px; min-width: 0; }
.ws-name input { flex: 1 1 140px; min-width: 0; min-height: 44px; padding: 0 .9rem; border-radius: 999px; border: 1.5px solid var(--linie-2); background: var(--papier); text-transform: uppercase; font-family: var(--schrift-mono); }

.ws-rechts { display: flex; flex-direction: column; gap: 0; }
.ws-stuhl { width: 100%; height: 210px; border-radius: var(--r) var(--r) 0 0; background: var(--papier); border: 1px solid var(--linie); border-bottom: 0; }
.ws-gewebe { width: 100%; aspect-ratio: 5 / 3; border-radius: 0 0 var(--r) var(--r); background: #141A33; box-shadow: var(--schatten-hoch); }
.ws-zaehler { margin: .7rem 0 0; font-size: .82rem; letter-spacing: .04em; color: var(--leise); min-height: 1.4em; }
.ws-steuer { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: .7rem; }
.ws-tempo { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--leise); min-height: 44px; }
.ws-tempo input { width: 110px; accent-color: var(--indigo); }
.ws-hilfe { margin-top: 1.6rem; }
.ws-hilfe ol { margin: 0; padding-left: 1.3rem; display: grid; gap: .45rem; max-width: 70ch; }
.ws-zitat { margin: 2rem 0 .5rem; padding: 1.4rem 1.4rem 1.2rem; border-radius: var(--r-gross); background: var(--indigo); color: var(--auf-indigo); }
.ws-zitat blockquote { margin: 0; font-family: var(--schrift-titel); font-style: italic; font-size: clamp(1.25rem, 3.6vw, 1.7rem); line-height: 1.3; }
.ws-zitat-uebersetzung { margin: .8rem 0 0; opacity: .88; }
.ws-zitat figcaption { margin-top: .9rem; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wau-auf-indigo); }

/* Station im Ausstellungsraum (weben.html?station) */
.kiosk { padding: 2rem 2.4rem; }
.kiosk .ws-kopf h1 { font-size: 4rem; }
.kiosk .ws-intro { font-size: 1.3rem; max-width: 70ch; }
.kiosk .chip { min-height: 52px; padding: .4rem 1.2rem; font-size: 1.1rem; }
.kiosk .knopf { min-height: 60px; font-size: 1.15rem; padding: .8rem 1.6rem; }
.kiosk .ws-hilfe ol { font-size: 1.15rem; }
.ws-ruhe {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: #18224C; color: #F8F4EA; text-align: center;
}
.ws-ruhe[hidden] { display: none; }
.ws-ruhe canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.ws-ruhe p { position: relative; margin: 0; padding: 2rem 3rem; border-radius: 18px; background: rgb(24 34 76 / .78); font-family: var(--schrift-titel); font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.35; }
.ws-ruhe p span { font-size: .72em; opacity: .9; }

body.ohne-leiste { padding-bottom: 0; }
body.kiosk-seite { cursor: default; user-select: none; -webkit-user-select: none; }
body.kiosk-seite .musterhinweis { font-size: .9rem; }

/* Bildschirm im Raum: drei Spalten, kein Scrollen */
@media (min-width: 1400px) {
  .kiosk .ws-flaeche { grid-template-columns: minmax(380px, 460px) minmax(480px, 1fr) minmax(280px, 340px); }
  .kiosk .ws-hilfe { margin: 0; border: 0; }
  .kiosk .ws-hilfe summary { pointer-events: none; }
  .kiosk .ws-hilfe summary::after { display: none; }
}
.kiosk .ws-hilfe ol { gap: .9rem; }
.ws-ruhe .ws-zitat { position: absolute; left: 50%; bottom: 6vh; transform: translateX(-50%); width: min(900px, 86vw); margin: 0; background: rgb(24 34 76 / .85); color: #F8F4EA; }
.ws-ruhe .ws-zitat figcaption { color: #E8BE4F; }

body.kiosk-seite main[data-ansicht="weben"] { max-width: 1720px; }
@media (min-width: 1400px) {
  body.kiosk-seite main[data-ansicht="weben"] { position: relative; }
  .kiosk-seite .ws-sprachen { position: absolute; top: 1.2rem; right: 2.4rem; z-index: 2; padding: 0; }
  .kiosk { padding: 1.2rem 2.4rem .8rem; }
  .kiosk .ws-kopf h1 { font-size: 3.3rem; }
  .kiosk .ws-intro { font-size: 1.15rem; max-width: 105ch; margin-top: .35rem; }
  .kiosk .ws-flaeche { margin-top: 1.1rem; }
  .kiosk .ws-stuhl { height: 176px; }
  /* Das Gewebe nimmt die Höhe, die übrig bleibt; Knöpfe und Tempo bleiben im Bild */
  .kiosk .ws-gewebe { aspect-ratio: auto; height: clamp(260px, calc(100vh - 560px), 560px); }
}

.ws-sprachen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; padding-top: 1rem; }
.kiosk-seite .ws-sprachen .chip { min-height: 48px; padding: .3rem 1.1rem; font-size: 1.05rem; }