/* ==========================================================================
   Empathiesolutions, Kabine-Welt
   Wird ausschliesslich von /kabine/ geladen. Rasengruen, Spielfeld,
   Trikots, Aufstellung, Anzeigetafel und Preistafel-Streifen.
   ========================================================================== */

/* --- 22  Kabine-Welt -----------------------------------------------------
   Nur auf /kabine/. Rasengruen ist die Gastfarbe dieser einen Seite,
   die Werte stammen aus dem bestehenden Kabine-Dashboard.            */

.kabine {
  --rasen: #1E7A3C;
  --rasen-hell: #2C8B48;
  --rasen-akzent: #37B45F;
  --tafel: #0B1A12;

  /* Die Feldlinien als ein Bild mit fester Proportion 105 zu 68, den
     echten Massen eines Fussballfelds. Es wird nie gestreckt, nur
     eingepasst oder beschnitten. Steht hier einmal und wird an drei
     Stellen benutzt.                                               */
  --feldlinien: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 105 68%22 preserveAspectRatio=%22xMidYMid slice%22><g fill=%22none%22 stroke=%22rgba(255,255,255,.55)%22 stroke-width=%220.6%22><rect x=%221%22 y=%221%22 width=%22103%22 height=%2266%22/><line x1=%2252.5%22 y1=%221%22 x2=%2252.5%22 y2=%2267%22/><circle cx=%2252.5%22 cy=%2234%22 r=%229.15%22/><circle cx=%2252.5%22 cy=%2234%22 r=%220.5%22 fill=%22rgba(255,255,255,.55)%22/><rect x=%221%22 y=%2213.84%22 width=%2216.5%22 height=%2240.32%22/><rect x=%2287.5%22 y=%2213.84%22 width=%2216.5%22 height=%2240.32%22/><rect x=%221%22 y=%2224.84%22 width=%225.5%22 height=%2218.32%22/><rect x=%2298.5%22 y=%2224.84%22 width=%225.5%22 height=%2218.32%22/><circle cx=%2212%22 cy=%2234%22 r=%220.5%22 fill=%22rgba(255,255,255,.55)%22/><circle cx=%2293%22 cy=%2234%22 r=%220.5%22 fill=%22rgba(255,255,255,.55)%22/><path d=%22M17.5 25.13a9.15 9.15 0 0 0 0 17.74%22/><path d=%22M87.5 25.13a9.15 9.15 0 0 1 0 17.74%22/><path d=%22M1 4a3 3 0 0 0 3-3%22/><path d=%22M104 4a3 3 0 0 1-3-3%22/><path d=%22M1 64a3 3 0 0 1 3 3%22/><path d=%22M104 64a3 3 0 0 0-3 3%22/></g></svg>");
}

.rasen {
  position: relative;
  overflow: hidden;
  border: 3px solid var(--tafel);
  border-radius: 8px;
  color: #fff;
  background-color: var(--rasen);
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 44px, rgba(0, 0, 0, .05) 44px 88px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .06) 0 4px, rgba(255, 255, 255, .03) 4px 8px);
  box-shadow: 8px 8px 0 rgba(11, 26, 18, .35);
}

/* Feldlinien: Aussenlinie, Mittellinie, Mittelkreis, Strafraum,
   Torraum, Elfmeterpunkt, Tore und Eckviertel. Alles in Prozent,
   damit die Markierung auf jeder Breite stimmt. */
.spielfeld {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.spielfeld > * {
  position: absolute;
  border: 3px solid rgba(255, 255, 255, .55);
}

.spielfeld .aussen { inset: 14px; }

.spielfeld .mittellinie {
  top: 14px;
  bottom: 14px;
  left: 50%;
  width: 0;
  border-width: 0 0 0 3px;
}

.spielfeld .kreis {
  top: 50%;
  left: 50%;
  height: 44%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.spielfeld .punkt,
.spielfeld .elfer {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .65);
}

.spielfeld .punkt { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.spielfeld .elfer { top: 50%; transform: translateY(-50%); }
.spielfeld .elfer.links { left: 12%; }
.spielfeld .elfer.rechts { right: 12%; }

.spielfeld .strafraum { top: 50%; transform: translateY(-50%); height: 58%; width: 15%; }
.spielfeld .strafraum.links { left: 14px; border-left: 0; }
.spielfeld .strafraum.rechts { right: 14px; border-right: 0; }

.spielfeld .torraum { top: 50%; transform: translateY(-50%); height: 28%; width: 6%; }
.spielfeld .torraum.links { left: 14px; border-left: 0; }
.spielfeld .torraum.rechts { right: 14px; border-right: 0; }

.spielfeld .tor {
  top: 50%;
  transform: translateY(-50%);
  height: 15%;
  width: 11px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 2px, transparent 2px 5px);
}

.spielfeld .tor.links { left: 3px; border-right: 0; }
.spielfeld .tor.rechts { right: 3px; border-left: 0; }

.spielfeld .ecke {
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

.spielfeld .ecke.ol { top: 14px; left: 14px; transform: translate(-50%, -50%); }
.spielfeld .ecke.or { top: 14px; right: 14px; transform: translate(50%, -50%); }
.spielfeld .ecke.ul { bottom: 14px; left: 14px; transform: translate(-50%, 50%); }
.spielfeld .ecke.ur { bottom: 14px; right: 14px; transform: translate(50%, 50%); }

/* Hochformat: dasselbe Feld, um 90 Grad gedreht gedacht */
.spielfeld.hoch .mittellinie {
  top: 50%;
  left: 14px;
  right: 14px;
  bottom: auto;
  width: auto;
  height: 0;
  border-width: 3px 0 0;
}

.spielfeld.hoch .kreis { height: auto; width: 34%; aspect-ratio: 1; }

.spielfeld.hoch .strafraum {
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  width: 58%;
  height: 12%;
}

.spielfeld.hoch .strafraum.links { top: 14px; border-top: 0; border-left: 3px solid rgba(255, 255, 255, .55); }
.spielfeld.hoch .strafraum.rechts { bottom: 14px; border-bottom: 0; border-right: 3px solid rgba(255, 255, 255, .55); }

.spielfeld.hoch .torraum {
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  width: 28%;
  height: 5%;
}

.spielfeld.hoch .torraum.links { top: 14px; border-top: 0; border-left: 3px solid rgba(255, 255, 255, .55); }
.spielfeld.hoch .torraum.rechts { bottom: 14px; border-bottom: 0; border-right: 3px solid rgba(255, 255, 255, .55); }

.spielfeld.hoch .tor {
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  width: 22%;
  height: 11px;
}

.spielfeld.hoch .tor.links { top: 3px; border-bottom: 0; }
.spielfeld.hoch .tor.rechts { bottom: 3px; border-top: 0; }

.spielfeld.hoch .elfer.links { top: 9%; left: 50%; transform: translateX(-50%); }
.spielfeld.hoch .elfer.rechts { top: auto; bottom: 9%; left: 50%; right: auto; transform: translateX(-50%); }

.rasen-inhalt {
  position: relative;
  z-index: 1;
  padding: clamp(28px, 5vw, 64px);
}

/* Anstoss: der Ball rollt einmal ins Bild und wird zum Satzpunkt */
.ball {
  width: .52em;
  height: .52em;
  margin-left: .08em;
  animation: anstoss 1.9s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes anstoss {
  0% { transform: translateX(-88vw) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateX(0) rotate(1080deg); opacity: 1; }
}

/* Trikot mit Rueckennummer */
.trikot {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 56px;
  padding-top: 6px;
  color: #fff;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1rem;
  background: repeating-linear-gradient(90deg, var(--rasen) 0 9px, var(--rasen-hell) 9px 18px);
  clip-path: polygon(30% 0, 40% 8%, 60% 8%, 70% 0, 100% 17%, 88% 38%, 78% 31%, 78% 100%, 22% 100%, 22% 31%, 12% 38%, 0 17%);
  filter: drop-shadow(2px 2px 0 rgba(11, 26, 18, .45));
}

/* Wappen-Platzhalter, bis das echte Vereinswappen eingesetzt wird */
.wappen {
  display: grid;
  place-items: center;
  width: 76px;
  height: 88px;
  clip-path: polygon(50% 0, 100% 14%, 100% 62%, 50% 100%, 0 62%, 0 14%);
  background: repeating-linear-gradient(135deg, var(--rasen) 0 9px, var(--rasen-hell) 9px 18px);
  color: #fff;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
}

/* Auf dieser Seite ist die Auszeichnungs-Marke ein kleiner Ball */
.kabine .auszeichnung::before {
  width: 17px;
  height: 17px;
  align-self: center;
  margin-top: 0;
  border-radius: 50%;
  transform: none;
  border: 0;
  background: url("ball.png") center / contain no-repeat;
}

/* Trikotstreifen als Kartenhintergrund, grau, weiss und gruen */
.kabine .preistafel {
  background-image: repeating-linear-gradient(90deg,
    rgba(30, 122, 60, .13) 0 12px,
    rgba(110, 122, 118, .12) 12px 24px,
    transparent 24px 36px);
}

.kabine .preistafel.premium {
  background-image:
    repeating-linear-gradient(90deg, rgba(232, 199, 102, .07) 0 12px, transparent 12px 24px),
    linear-gradient(155deg, #101C28 0%, #1B2A38 58%, #241F16 100%);
}

/* Dot-Matrix-Anzeigetafel */
.tafel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 3px;
  padding: 3px;
  border: 3px solid var(--tafel);
  border-radius: 6px;
  background: var(--tafel);
  box-shadow: 8px 8px 0 rgba(11, 26, 18, .3);
}

.tafel > div {
  padding: 22px 20px;
  text-align: center;
  background:
    radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.4px) 0 0 / 6px 6px,
    #0F2418;
}

.tafel-wert {
  display: block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1;
  color: #FFC24D;
  letter-spacing: .02em;
  white-space: nowrap;
}

.tafel-text {
  display: block;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

/* Aufstellung: elf Funktionen als Mannschaft auf dem Feld, zwei auf der Bank */
.aufstellung {
  display: grid;
  gap: 10px;
}

.linie {
  display: grid;
  gap: 10px;
  align-items: stretch;
}

.linie-1 { grid-template-columns: minmax(0, 1fr); max-width: 34%; margin: 0 auto; }
.linie-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.linie-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.linie-label {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  text-align: center;
}

.bank {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.spieler {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 14px 12px;
  text-align: center;
  border: 2px solid rgba(11, 26, 18, .55);
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .96) 0 12px, rgba(224, 243, 235, .96) 12px 24px);
  color: #14261C;
  box-shadow: 4px 4px 0 rgba(11, 26, 18, .35);
  transition: transform var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve);
}

.spieler:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 rgba(11, 26, 18, .35);
}

.nummer {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 2px solid #14261C;
  border-radius: 4px;
  background: var(--rasen);
  color: #fff;
  font-family: var(--mono);
  font-weight: 700;
  font-size: .92rem;
}

.spieler h3 {
  font-size: .98rem;
  margin-bottom: 2px;
}

.spieler p {
  font-size: .85rem;
  line-height: 1.45;
  color: #33463C;
}

/* Spielminuten-Leiste */
.minute {
  position: fixed;
  top: 6px;
  right: 14px;
  z-index: 61;
  padding: 4px 10px;
  border: 2px solid var(--tafel);
  border-radius: 4px;
  background: #0F2418;
  color: #FFC24D;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
}

@media (max-width: 900px) {
  .linie-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .linie-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .linie-1 { max-width: 60%; }
}
@media (max-width: 560px) {
  .linie-4,
  .linie-3,
  .bank { grid-template-columns: minmax(0, 1fr); }
  .linie-1 { max-width: 100%; }
  .spielfeld .aussen { inset: 8px; }
  .spielfeld .mittellinie { top: 8px; bottom: 8px; }
  .spielfeld .strafraum.links, .spielfeld .torraum.links { left: 8px; }
  .spielfeld .strafraum.rechts, .spielfeld .torraum.rechts { right: 8px; }
  .spielfeld .ecke { width: 18px; height: 18px; }
}

/* Kurzhinweis, wenn eine Seite noch nicht gebaut ist */
.zettel {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 70;
  transform: translateX(-50%);
  padding: 13px 20px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--mono);
  font-size: .8rem;
  box-shadow: var(--schatten-hart);
  animation: zettelAuf .26s var(--kurve) both;
}

@keyframes zettelAuf {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}


/* --- Fussball -----------------------------------------------------------
   Freigestellte Zeichnung aus assets/ball.png, Hintergrund entfernt.   */
.fussball {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.08em;
  border: 0;
  border-radius: 0;
  background: url("ball.png") center / contain no-repeat;
  box-shadow: none;
}

.fussball.ball {
  width: .42em;
  height: .42em;
  margin-left: .22em;
  vertical-align: baseline;
  animation: einrollen 1.45s cubic-bezier(.2, .78, .3, 1) both;
}

/* Von ganz links ins Bild, im Uhrzeigersinn: der Winkel waechst bis auf 0. */
@keyframes einrollen {
  from { transform: translateX(-115vw) rotate(-1260deg); opacity: 0; }
  4% { opacity: 1; }
  to { transform: translateX(0) rotate(0deg); opacity: 1; }
}

/* --- Rasen: Maehstreifen, Flutlicht ------------------------------------- */
.rasen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 42% at 50% -8%, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 46px, rgba(0, 0, 0, .05) 46px 92px);
  background-size: 100% 100%, 184px 100%;
  animation: maehen 26s linear infinite;
}

@keyframes maehen {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 0, 184px 0; }
}

/* --- Text auf dem Rasen: eigene abgedunkelte Flaeche --------------------- */
.rasen-text {
  position: relative;
  display: inline-block;
  max-width: 58ch;
  margin-top: 18px;
  padding: 16px 20px;
  border-left: 4px solid rgba(255, 255, 255, .8);
  border-radius: 6px;
  background: rgba(8, 26, 16, .78);
  backdrop-filter: blur(3px);
  color: #FFFFFF;
}

/* Die Kuerzung braucht hier mehr Gewicht, sonst gewinnt das
   inline-block von oben und der Schalter "mehr" bleibt wirkungslos. */
.rasen-text.gekuerzt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

/* --- Trainer an der Seitenlinie ----------------------------------------- */
.seitenlinie {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 14px;
  padding: 16px;
  border: 2px dashed rgba(255, 255, 255, .55);
  border-radius: 8px;
  background: rgba(8, 26, 16, .55);
}

.bank-leer {
  padding: 18px;
  border: 2px dashed rgba(255, 255, 255, .45);
  border-radius: 8px;
  background: rgba(8, 26, 16, .38);
  color: rgba(255, 255, 255, .88);
  text-align: center;
}



@media (prefers-reduced-motion: reduce) {
  .rasen::after { animation: none; }
  .fussball.ball { animation: none; }
  .ki-cursor { animation: none; }
}

/* Zweierlinie im Sturm */
.linie-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 560px) {
  .linie-2 { grid-template-columns: minmax(0, 1fr); max-width: 100% !important; }
}

/* ======================================================================
   MOBIL (bis 700 px)
   1. Die Feldlinien kommen aus einem SVG mit fester Proportion 105:68
      und werden beschnitten statt gestreckt. Damit ist das Feld in
      jedem Behaelter geometrisch richtig.
   2. Die Aufstellung behaelt ihre Reihen 1-4-4-2. Sichtbar ist nur
      Trikot und ein Wort. Antippen klappt die Beschreibung auf.
   ====================================================================== */

@media (max-width: 700px) {
  .spielfeld > * { display: none; }

  .spielfeld {
    background-image: var(--feldlinien);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* Kopfbereich: Feldlinien nur im oberen Band, Text darunter auf Rasen */
  .kabine .rasen > .spielfeld {
    inset: 0 0 auto 0;
    height: 42%;
    min-height: 130px;
    max-height: 220px;
    -webkit-mask-image: linear-gradient(#000 62%, transparent 100%);
    mask-image: linear-gradient(#000 62%, transparent 100%);
  }

  /* Reihen bleiben Reihen */
  .linie-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px; }
  .linie-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: 100% !important; }
  .linie-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .linie-1 { max-width: 46% !important; }
  .aufstellung { gap: 8px; }
  .linie { gap: 6px; }

  .spieler { padding: 0; border-width: 2px; box-shadow: 3px 3px 0 rgba(11, 26, 18, .35); }
  .spieler:hover { transform: none; box-shadow: 3px 3px 0 rgba(11, 26, 18, .35); }

  .spieler-kopf {
    display: grid;
    justify-items: center;
    gap: 3px;
    width: 100%;
    min-height: 92px;
    padding: 8px 3px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
  }

  .spieler .trikot { width: 40px; height: 44px; font-size: .82rem; }

  .spieler-kurz {
    font-family: var(--display);
    font-size: .66rem;
    font-weight: 700;
    line-height: 1.2;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
    color: #14261C;
  }

  /* Beschreibung: zu, bis angetippt. Offen nimmt die Karte die ganze Reihe */
  .spieler-text { display: none; padding: 0 12px 12px; text-align: left; }
  .spieler[data-offen="1"] { grid-column: 1 / -1; }
  .spieler[data-offen="1"] .spieler-text { display: block; }
  .spieler[data-offen="1"] .spieler-kopf { grid-auto-flow: column; justify-items: start; align-items: center; gap: 10px; min-height: 0; justify-content: start; padding: 10px 12px 4px; }
  .spieler[data-offen="1"] .spieler-kurz { display: none; }
  .spieler-text h3 { margin: 0 0 4px; font-size: .96rem; }
  .spieler-text p { margin: 0; font-size: .86rem; line-height: 1.45; }

  .spieler[data-offen="1"] { border-color: var(--tafel); box-shadow: 5px 5px 0 rgba(11, 26, 18, .45); }
}

/* Ab 701 px bleibt alles wie bisher: Kopf und Text stehen zusammen */
@media (min-width: 701px) {
  .spieler-kopf {
    display: contents;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
  }
  .spieler-kurz { display: none; }
}

/* --- Farben auf dem Rasen, vorher als Inline-Stil im Dokument ----------- */

.rasen .rasen-hinweis { color: #FFC24D; }

.rasen .knopf-hell { color: #14261C; }

.rasen .knopf-hell.knopf-geist {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .7);
  box-shadow: 4px 4px 0 rgba(11, 26, 18, .4);
}

/* Am Rechner sind die beiden neuen Huellen reine Gruppen ohne Wirkung.
   display:contents nimmt sie vollstaendig aus dem Kastenbaum, der
   Kopfbereich sieht am Rechner also aus wie vorher.                 */
.rasen-kopf,
.rasen-rest { display: contents; }

@media (max-width: 700px) {
  /* --- Kopfbereich auf dem Telefon --------------------------------------
     Der Rasen endet unter der Ueberschrift. Pille und Ueberschrift stehen
     auf dem Feld, alles darunter steht auf dem Seitengrund. Am Rechner
     bleibt der Kopfbereich unveraendert.                               */

  .rasen-hero {
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
  }

  .rasen-hero::after { display: none; }
  .rasen-hero > .spielfeld { display: none; }
  .rasen-hero > .rasen-inhalt { padding: 0; }

  .rasen-kopf {
    display: block;
    position: relative;
    padding: clamp(20px, 5.5vw, 30px);
    border: 3px solid var(--tafel);
    border-radius: 8px;
    color: #fff;
    background-color: var(--rasen);
    background-image:
      var(--feldlinien),
      repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 44px, rgba(0, 0, 0, .05) 44px 88px),
      repeating-linear-gradient(0deg, rgba(0, 0, 0, .06) 0 4px, rgba(255, 255, 255, .03) 4px 8px);
    background-size: cover, auto, auto;
    background-position: center, 0 0, 0 0;
    background-repeat: no-repeat, repeat, repeat;
    box-shadow: 8px 8px 0 rgba(11, 26, 18, .35);
  }

  .rasen-rest { display: block; padding-top: var(--a4); }

  /* Der Fliesstext braucht auf dem Seitengrund keine abgedunkelte
     Flaeche mehr, er steht wieder in der normalen Textfarbe.        */
  .rasen-rest .rasen-text {
    margin-top: 0;
    padding: 0;
    border-left: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    color: var(--soft);
  }

  .rasen-rest .rasen-hinweis { color: var(--coraldeep); }

  /* Der Schalter "mehr" nimmt sonst die Textfarbe der gefuellten Flaeche
     an. Auf dem Seitengrund ist das die normale Verweisfarbe.        */
  .rasen-rest .mehr { color: var(--link); opacity: 1; }

  .rasen-rest .knopf-hell {
    background: linear-gradient(135deg, var(--petrolmitte) 0%, var(--petrolgruen) 100%);
    color: #fff;
    border-color: var(--petroltief);
    box-shadow: 4px 4px 0 rgba(10, 95, 120, .34);
  }

  .rasen-rest .knopf-hell.knopf-geist {
    background: transparent;
    color: var(--tealdeep);
    border-color: var(--kontur);
    box-shadow: var(--schatten-hart);
  }

  /* --- Abschlussblock: das ganze Feld statt eines beschnittenen Bandes ---
     In einem flachen Band schneidet der Bildausschnitt die Straf- und
     Torraeume an, dann wirken die Linien unproportional. Vollstaendig
     eingepasst stimmen die Verhaeltnisse.                             */
  #abschluss .rasen > .spielfeld {
    inset: 0;
    height: auto;
    min-height: 0;
    max-height: none;
    background-size: contain;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* Die Spielminute kollidiert auf dem Telefon mit dem Vorschau-Band
     und ist dort ohne Erklaerung mehr Raetsel als Hinweis.          */
  .minute { display: none; }
}

/* --- Abschlussblock: das ganze Feld, auf jeder Breite -------------------
   Die Linien lagen hier als einzelne Kaesten in Prozent im Behaelter. In
   einem breiten flachen Kasten wird daraus ein Zerrbild, der Mittelkreis
   eine Ellipse. Jetzt sitzt dasselbe proportionsfeste Feld dahinter wie
   auf dem Telefon, vollstaendig eingepasst.                          */

#abschluss .rasen > .spielfeld {
  inset: 0;
  height: auto;
  min-height: 0;
  max-height: none;
  background-image: var(--feldlinien);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-mask-image: none;
  mask-image: none;
}

#abschluss .rasen > .spielfeld > * { display: none; }