/* ===========================================================================
   DER SAAL - Abschnitt fuer die neue Startseite.

   Nimmt die Formsprache aus _soul.css auf: Sand-Felder auf weissem Blatt,
   grosse Radien, Anton nur in Versalien, Poppins fuer alles andere. Keine
   neuen Farben, keine dritte Schrift.

   Weil es kein brauchbares Foto vom Haus gibt, steht in der Mitte des
   Abschnitts eine Zeichnung statt eines Bildes: ein schematischer Grundriss
   mit vier umschaltbaren Aufstellungen. Jede zeigt genau 80 Plaetze - so
   viele, wie im Text daneben stehen.

   Jede Regel hier beginnt mit .t-saal, jedes Keyframe mit saal-.
   =========================================================================== */

.t-saal{
  position:relative;background:var(--papier);color:var(--tinte);
  padding:clamp(48px,6.4vw,100px) 0;
}

.t-saal .vor{
  margin:0 0 clamp(16px,2vw,26px);font-size:10.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--stumm);font-weight:500;
}

.t-saal :focus-visible{outline:2px solid var(--tinte);outline-offset:3px;border-radius:4px}

/* ---------- Kopf ---------------------------------------------------------- */
.t-saal .s-kopf{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:start;
}
.t-saal .s-kopf h2{
  font-family:var(--anton);font-weight:400;text-transform:uppercase;
  /* 1.12: das AE in GEBAELK. Gemessener Bedarf 1.108 bei 1920px. */
  font-size:clamp(38px,6.2vw,86px);line-height:1.12;margin:0;letter-spacing:.004em;
}
.t-saal .s-ein p{margin:0 0 16px;font-size:clamp(15px,1.15vw,17px);color:#3B3A36;max-width:46ch}
.t-saal .s-ein p.s-gross{font-size:clamp(17px,1.4vw,20px);color:var(--tinte)}
.t-saal .s-ein b{font-weight:500}

.t-saal .s-marken{
  list-style:none;margin:clamp(20px,2.4vw,30px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:9px;
}
.t-saal .s-marken li{
  background:var(--sand);border-radius:var(--pille);padding:11px 20px;
  display:flex;align-items:baseline;gap:9px;
}
.t-saal .s-marken b{
  font-family:var(--anton);font-weight:400;font-size:clamp(19px,2vw,26px);line-height:1;
  font-variant-numeric:tabular-nums;
}
.t-saal .s-marken small{
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--stumm);
  font-weight:500;white-space:nowrap;
}

/* ---------- Plan ---------------------------------------------------------- */
.t-saal .s-plan{
  margin-top:clamp(34px,4.8vw,74px);
  background:var(--sand);border-radius:var(--radius);
  padding:clamp(20px,2.6vw,40px);
}

.t-saal .s-schalter{
  display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(20px,2.6vw,32px);
}
.t-saal .s-schalter button{
  font:inherit;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  font-weight:500;cursor:pointer;line-height:1.3;text-align:center;
  background:transparent;color:var(--tinte);border:1px solid var(--linie);
  border-radius:var(--pille);padding:12px 20px;
  transition:background .26s ease,color .26s ease,border-color .26s ease;
}
.t-saal .s-schalter button:hover{background:var(--sand-hell)}
.t-saal .s-schalter button[aria-pressed="true"]{
  background:var(--tinte);color:var(--sand-hell);border-color:var(--tinte);
}

.t-saal .s-buehne{
  display:grid;grid-template-columns:minmax(0,1.58fr) minmax(0,1fr);
  gap:clamp(20px,2.8vw,46px);align-items:start;
}

.t-saal .s-riss{
  margin:0;background:var(--sand-hell);border-radius:calc(var(--radius) - 12px);
  padding:clamp(10px,1.3vw,18px);
}
.t-saal .s-riss svg{display:block;width:100%;height:auto}
.t-saal .s-riss figcaption{
  margin-top:12px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--stumm);font-weight:500;
}

/* ---------- die Zeichnung ------------------------------------------------- */
.t-saal .s-wand{fill:none;stroke:var(--tinte);stroke-width:2.4;stroke-linejoin:miter}
.t-saal .s-schwelle{fill:none;stroke:var(--tinte);stroke-width:5;stroke-linecap:butt;opacity:.28}
.t-saal .s-kueche{fill:var(--linie);stroke:var(--tinte);stroke-width:1.2}
.t-saal .s-schrift{
  font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;fill:var(--stumm);
}
.t-saal .s-tisch{fill:var(--sand);stroke:var(--tinte);stroke-width:1.2}
.t-saal .s-tischlinie{fill:none;stroke:var(--tinte);stroke-width:.8;opacity:.3}
.t-saal .s-sitz{fill:var(--papier);stroke:var(--tinte);stroke-width:.9}
.t-saal .s-lehne{fill:var(--tinte)}
.t-saal .s-frei{fill:none;stroke:var(--tinte);stroke-width:1;stroke-dasharray:5 6;opacity:.34}

/* Der Wechsel: erst leise abraeumen, dann Stueck fuer Stueck neu decken.
   Bewegt wird nur die Deckkraft - eine transform wuerde die Drehung der
   Stuehle ueberschreiben. */
.t-saal .s-moebel{transition:opacity .2s ease}
.t-saal .s-moebel.s-geht{opacity:0}
.t-saal .s-moebel > *{animation:saal-auf .5s ease both}
@keyframes saal-auf{from{opacity:0}to{opacity:1}}

/* ---------- Text neben dem Plan ------------------------------------------- */
.t-saal .s-zahl{
  display:flex;align-items:baseline;gap:11px;margin:0 0 clamp(16px,2vw,24px);
  padding-bottom:14px;border-bottom:1px solid var(--linie);
}
.t-saal .s-zahl b{
  font-family:var(--anton);font-weight:400;font-size:clamp(30px,3.4vw,48px);
  line-height:1;font-variant-numeric:tabular-nums;
}
.t-saal .s-zahl span{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--stumm);
  font-weight:500;
}

.t-saal .s-fall{display:none}
.t-saal .s-fall[data-an="1"]{display:block;animation:saal-ein .38s ease both}
@keyframes saal-ein{from{opacity:0}to{opacity:1}}
.t-saal .s-fall h3{
  font-family:var(--anton);font-weight:400;text-transform:uppercase;
  font-size:clamp(21px,2.3vw,32px);line-height:1.06;margin:0 0 11px;
}
.t-saal .s-fall p{margin:0 0 12px;font-size:14.5px;color:#3B3A36}
.t-saal .s-fall p.s-note{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--stumm);
  font-weight:500;margin:16px 0 0;padding-top:12px;border-top:1px solid var(--linie);
}

.t-saal .s-dabei{
  list-style:none;margin:clamp(18px,2.2vw,28px) 0 0;padding:0;
  border-top:1px solid var(--linie);
}
.t-saal .s-dabei li{
  display:flex;gap:10px;padding:9px 0;font-size:13.5px;color:#3B3A36;
  border-bottom:1px solid var(--linie);
}
.t-saal .s-dabei li:last-child{border-bottom:0}
.t-saal .s-dabei li::before{content:'—';color:var(--stumm);flex:none}

.t-saal .s-fein{
  margin:clamp(20px,2.4vw,30px) 0 0;padding-top:16px;border-top:1px solid var(--linie);
  font-size:12.5px;line-height:1.62;color:var(--stumm);max-width:84ch;
}
.t-saal .s-fein b{color:var(--tinte);font-weight:500}

/* ---------- Karten -------------------------------------------------------- */
.t-saal .s-fakten{
  list-style:none;margin:clamp(12px,1.4vw,20px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px);
}
.t-saal .s-fakten li{
  background:var(--sand);border-radius:var(--radius);
  padding:clamp(22px,2.5vw,36px);display:flex;flex-direction:column;min-height:250px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),background .3s;
}
.t-saal .s-fakten li:hover{transform:translateY(-5px);background:var(--sand-hell)}
.t-saal .s-fakten h3{
  font-family:var(--anton);font-weight:400;text-transform:uppercase;
  font-size:clamp(21px,2.1vw,29px);line-height:1.04;margin:0 0 10px;
}
.t-saal .s-fakten p{margin:0;font-size:14.5px;color:#3B3A36}
.t-saal .s-fakten b{font-weight:500;color:var(--tinte)}
.t-saal .s-fuss{
  margin-top:auto;padding-top:20px;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--stumm);font-weight:500;
}

/* ---------- schmal -------------------------------------------------------- */
@media(max-width:1000px){
  .t-saal .s-kopf{grid-template-columns:1fr;gap:22px}
  .t-saal .s-buehne{grid-template-columns:1fr}
  .t-saal .s-fakten{grid-template-columns:repeat(2,1fr)}
  .t-saal .s-ein p{max-width:none}
}
@media(max-width:720px){
  .t-saal .s-fakten{grid-template-columns:1fr}
  .t-saal .s-fakten li{min-height:0}
  .t-saal .s-plan{padding:16px;border-radius:26px}
  .t-saal .s-riss{padding:7px;border-radius:18px}
  .t-saal .s-schalter{gap:6px}
  .t-saal .s-schalter button{padding:10px 14px;font-size:9.5px;letter-spacing:.1em}
  .t-saal .s-marken li{padding:10px 16px}
}

/* ---------- Ruhe ---------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .t-saal .s-moebel > *,
  .t-saal .s-fall[data-an="1"]{animation:none}
  .t-saal .s-fakten li:hover{transform:none}
  .t-saal *{transition-duration:.001ms!important}
}