/* Optik „Sommertag“: Festwiese von oben. Breit drei Spalten, mittel zwei, schmal alles untereinander. */
:root {
  --wiese: #8fce6b; --flaeche: #ffffff; --fg: #17402a; --leise: #3f5f4c; --rand: #17402a; --linie: #c9dcc4;
  --weg: #ecd9a2; --akzent: #c2233c; --akzent-text: #ffffff; --titel: #b5302a; --fokus: #1b62b5;
  --display: Fredoka, "Segoe UI", system-ui, sans-serif;
  --text: Nunito, "Segoe UI", system-ui, sans-serif;
}
:root[data-bs-theme="dark"] {
  --wiese: #24492f; --flaeche: #18281e; --fg: #eaf4e6; --leise: #b7cdb3; --rand: #cfe3c8; --linie: #3c5a44;
  --weg: #6b5f3e; --akzent: #f0788c; --akzent-text: #2a0d13; --titel: #ff9d8f; --fokus: #8cc4ff; color-scheme: dark }
#app, #app * { box-sizing: border-box; }
body { background: var(--wiese); color: var(--fg); font: 600 1.0625rem/1.45 var(--text); }
#app { max-width: 88rem; margin: 0 auto; padding-block: 1rem 2rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
#app > * { min-width: 0; }
#app h1 { font: 700 clamp(2.4rem, 8vw, 3.6rem)/1.05 var(--display); margin: 0 0 .3rem; text-wrap: balance; }
#app h2 { font: 700 1.5rem/1.2 var(--display); margin: 0 0 .4rem; text-wrap: balance; }
#app p { margin: 0 0 .6rem; max-width: 65ch; }
#app .karte { background: var(--flaeche); border: 3px solid var(--rand); border-radius: 18px; padding: .9rem 1.1rem; min-width: 0; }
.einzeln { max-width: 34rem; margin: 0 auto; display: grid; gap: 1rem; }

.buehne { display: grid; gap: 1rem 1.25rem; align-items: start;
  grid-template-columns: minmax(0, 1fr); grid-template-areas: "tag" "brett" "stand" "plan"; }
.tag-feld { grid-area: tag; } .brett-feld { grid-area: brett; } .plan-feld { grid-area: plan; } .stand-feld { grid-area: stand; }
@media (min-width: 760px) { .buehne { grid-template-columns: minmax(0, 1fr) 19rem; grid-template-rows: auto auto 1fr;
  grid-template-areas: "brett tag" "brett plan" "brett stand"; } }
@media (min-width: 1180px) { .buehne { grid-template-columns: 17rem minmax(0, 1fr) 19rem; grid-template-rows: auto 1fr;
  grid-template-areas: "tag brett plan" "stand brett plan"; } }

.tag-karte .nr { font-weight: 800; font-size: .95rem; }
.tag-karte .name { font: 700 clamp(1.55rem, 3vw, 2rem)/1.15 var(--display); color: var(--titel); }
.tag-karte .satz { font-size: 1.05rem; }

.brett-feld { container-type: inline-size; width: 100%; max-width: min(100%, calc(100vh - 2rem)); margin: 0 auto; }
.brett { position: relative; width: 100%; aspect-ratio: 1; }
.weg { position: absolute; border-radius: 50%; border: 4.2cqw solid var(--weg); }
.baum { position: absolute; left: 50%; top: 50%; width: 1.7cqw; height: 21cqw; transform: translate(-50%, -50%);
  background: repeating-linear-gradient(-45deg, #1b62b5 0 1.7cqw, #fff 1.7cqw 3.4cqw); border: 2px solid #17402a; border-radius: 1cqw; }
.kranz { position: absolute; left: 50%; top: calc(50% - 12.5cqw); width: 8cqw; height: 8cqw; transform: translateX(-50%);
  border-radius: 50%; border: 1.3cqw solid #2f8a4a; }

#app .platz { position: absolute; transform: translate(-50%, -50%); width: 17.5%; height: 15%; display: block; padding: 0; margin: 0; border: 0;
  background: none; min-height: 0; border-radius: 10px; color: #17402a; font: 800 clamp(.68rem, 1.75cqw, .8rem)/1.15 var(--text); text-align: center; }
#app .platz b { display: block; font: 700 clamp(.72rem, 2.15cqw, .98rem)/1.1 var(--display); }
#app .frei { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #ffffffd9;
  border: 2px dashed #2e6b3f; border-radius: 10px; }
#app .frei b { font-size: clamp(1rem, 3cqw, 1.4rem); }
.dach { display: block; height: 34%; border: 2px solid #17402a; border-bottom: 0; border-radius: 10px 10px 0 0;
  background: repeating-linear-gradient(90deg, var(--c) 0 16%, #fff 16% 32%); }
.theke { height: 66%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff;
  border: 2px solid #17402a; border-radius: 0 0 8px 8px; }
.wer { display: none; }
@container (min-width: 480px) { .wer { display: block; } }
#app .platz.geplant .dach, .platz.geplant .theke { opacity: .68; border-style: dashed; }
.marker { position: absolute; top: -.6em; background: #f0b400; color: #17402a; border: 2px solid #17402a; border-radius: 1em;
  padding: 0 .4em; font: 700 max(.72rem, 1.6cqw)/1.25 var(--display); }
.marker.plus { right: -.4em; } .marker.stern { left: -.4em; }
#app .platz.waehlbar { cursor: pointer; outline: 3px solid var(--akzent); outline-offset: 2px; }
#app .platz.gewaehlt .frei { background: #fff; border: 3px solid var(--akzent); }
@media (prefers-reduced-motion: no-preference) { #app .platz.waehlbar { animation: winken 1.1s ease-in-out infinite; } }
@keyframes winken { 50% { outline-offset: 5px; } }

#app .knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
#app button { font: 700 1rem/1.15 var(--display); min-height: 44px; padding: .35rem .85rem; border-radius: 12px;
  border: 2px solid var(--rand); background: var(--flaeche); color: var(--fg); cursor: pointer; }
#app button.haupt { width: 100%; min-height: 54px; font-size: 1.25rem; border-width: 3px; background: var(--akzent); color: var(--akzent-text); }
#app button:disabled { opacity: .45; cursor: default; }
#app button:focus-visible, #app input:focus-visible, #app select:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.reihe { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.reihe input { font: inherit; flex: 1 1 9rem; min-width: 0; min-height: 44px; padding: .35rem .6rem; border: 2px solid var(--rand); border-radius: 10px; background: var(--flaeche); color: var(--fg); }
.reihe select { font: inherit; min-height: 44px; padding: .35rem; border: 2px solid var(--rand); border-radius: 10px; background: var(--flaeche); color: var(--fg); }
.punkt { display: inline-block; flex: none; width: .95em; height: .95em; border-radius: 50%; margin-right: .35em; border: 2px solid #17402a; vertical-align: -.1em; }
ul.plan { list-style: none; margin: .3rem 0 .6rem; padding: 0; }
ul.plan li { display: flex; justify-content: space-between; gap: .5rem; align-items: center; padding: .25rem 0; }
ul.stand { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
ul.stand small { display: block; font-size: .92rem; color: var(--leise); }
#app .leise { color: var(--leise); font-size: .95rem; }
#app .tab { overflow-x: auto; }
#app table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
#app th, #app td { text-align: left; padding: .3rem .5rem; border-bottom: 1px solid var(--linie); }
th { font-size: .9rem; color: var(--leise); }
.z { text-align: right; }
ul.log { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .95rem; color: var(--leise); }
.beta { display: inline-block; font-weight: 800; font-size: .8rem; letter-spacing: .04em; padding: .05rem .5rem; border-radius: 1em; background: #f0b400; color: #17402a; margin-right: .4rem; }
/* Kopfzeile auf der Wiese: die Blau- und Grautoene aus theme.css sind hier zu schwach. */
.app-header__titel, .app-header__titel a, .app-header__zurueck, .app-header__unterzeile { color: var(--fg) !important; }