/* Terminfenster. Farbwelt der Startseite: Nacht, Petrol, Gold, Papier. */
:root, :host {
  --nacht: #0e1416; --petrol: #1e2a2c; --gold: #c99a55; --gold-tief: #a8722c; --papier: #f6f2ea; --grau: #a79c8b;
  --serif: 'Source Serif 4', Georgia, serif; --sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --weich: cubic-bezier(.2, .7, .1, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: radial-gradient(1200px 700px at 50% -10%, #1a2628 0%, var(--nacht) 60%); color: var(--papier); font-family: var(--serif); }
a { color: inherit; }

.leiste { display: flex; justify-content: space-between; align-items: center; padding: 26px clamp(20px, 4vw, 56px); font-family: var(--sans); }
.wortmarke { display: flex; gap: 10px; align-items: center; font-size: 13px; letter-spacing: .28em; text-transform: uppercase; text-decoration: none; }
.wortmarke .c { color: var(--gold); }
.wortmarke .m-icon { width: 24px; height: 24px; margin-right: 4px; border-radius: 3px; flex: none; }
.probe { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--grau); border: 1px solid rgba(167,156,139,.4); padding: 5px 10px; border-radius: 2px; }

main { display: grid; place-items: start center; padding: clamp(8px, 3vh, 40px) 16px 60px; }
.fenster { width: min(760px, 100%); background: rgba(30,42,44,.72); border: 1px solid rgba(201,154,85,.32); border-radius: 4px;
  padding: clamp(24px, 4vw, 44px); box-shadow: 0 30px 80px rgba(0,0,0,.45); backdrop-filter: blur(6px); }
.kopf .strich { width: 64px; height: 2px; background: var(--gold); margin-bottom: 18px; }
.vorzeile { font-family: var(--sans); font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); margin: 0 0 8px; }
h1 { margin: 0; font-weight: 600; font-size: clamp(1.8rem, 4vw, 2.5rem); letter-spacing: -.015em; line-height: 1.1; }
h2 { margin: 0 0 10px; font-weight: 600; font-size: 1.6rem; }
.unterzeile { margin: 12px 0 0; color: #ded6c7; font-size: 1.05rem; line-height: 1.55; max-width: 560px; }
.ort { margin: 18px 0 0; padding: 12px 16px; border-left: 2px solid var(--gold); background: rgba(201,154,85,.07); font-family: var(--sans); font-size: 14.5px; line-height: 1.55; color: #ded6c7; max-width: 560px; }
.ort[hidden] { display: none; }
.ort b { display: block; font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.ort span { display: block; }

.schritt { margin-top: 28px; }
.lade { font-family: var(--sans); font-size: 14px; color: var(--grau); }

/* Tage als Leiste zum Wischen */
.tage { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: rgba(201,154,85,.5) transparent; }
.tag { flex: none; min-width: 84px; padding: 10px 12px; text-align: center; font-family: var(--sans); color: #ded6c7; background: transparent;
  border: 1px solid rgba(233,224,208,.22); border-radius: 3px; cursor: pointer; transition: border-color .3s var(--weich), color .3s var(--weich), background .3s var(--weich); }
.tag small { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--grau); }
.tag b { display: block; font-family: var(--serif); font-size: 1.35rem; font-weight: 600; margin: 2px 0; color: var(--papier); }
.tag:hover { border-color: rgba(201,154,85,.7); }
.tag[aria-selected="true"] { border-color: var(--gold); background: rgba(201,154,85,.12); }
.tag[aria-selected="true"] small { color: var(--gold); }

.zeiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 14px; }
.zeit { padding: 12px 0; font-family: var(--sans); font-size: 16px; color: var(--papier); background: transparent; border: 1px solid rgba(233,224,208,.22);
  border-radius: 3px; cursor: pointer; transition: border-color .3s var(--weich), color .3s var(--weich), background .3s var(--weich); }
.zeit:hover, .zeit:focus-visible { border-color: var(--gold); color: var(--gold); outline: none; }
.keine { font-family: var(--sans); color: var(--grau); font-size: 14px; }

/* Angaben */
.zurueck { background: none; border: 0; padding: 0; color: var(--gold); font-family: var(--sans); font-size: 13px; letter-spacing: .04em; cursor: pointer; }
.gewaehlt { margin: 12px 0 22px; padding: 14px 16px; border-left: 2px solid var(--gold); background: rgba(201,154,85,.08); font-size: 1.1rem; }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.felder label { display: block; font-family: var(--sans); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); }
.felder label em { font-style: normal; text-transform: none; letter-spacing: 0; }
.felder .breit { grid-column: 1 / -1; }
.felder input:not([type=checkbox]), .felder select, .felder textarea { display: block; width: 100%; margin-top: 6px; padding: 12px 12px; font: 16px var(--sans); color: var(--papier);
  background: rgba(14,20,22,.6); border: 1px solid rgba(233,224,208,.22); border-radius: 3px; transition: border-color .3s var(--weich); }
.felder select option { color: #111; }
.felder input:focus, .felder select:focus, .felder textarea:focus { outline: none; border-color: var(--gold); }
.felder .haken { display: flex; gap: 12px; align-items: flex-start; text-transform: none; letter-spacing: 0; font-size: 14px; line-height: 1.5; color: #ded6c7; }
.felder .haken input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--gold); flex: none; }
.falle { position: absolute; left: -9999px; }
.fehler { margin: 16px 0 0; color: #f0a48a; font-family: var(--sans); font-size: 14px; }

/* Knopf wie auf der Startseite: füllt sich nicht, feine Goldlinie und Pfeil */
.knopf { display: inline-flex; align-items: center; gap: 14px; margin-top: 24px; padding: 14px 22px; font-family: var(--sans); font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--papier); background: transparent; border: 1px solid rgba(201,154,85,.55); border-radius: 2px; cursor: pointer; text-decoration: none; transition: color .4s var(--weich), border-color .4s var(--weich); }
.knopf i { display: block; width: 22px; height: 1px; background: currentColor; position: relative; transition: width .4s var(--weich); }
.knopf i::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.knopf:hover { color: var(--gold); border-color: var(--gold); } .knopf:hover i { width: 34px; }
.knopf[disabled] { opacity: .5; cursor: wait; }

.fertig { text-align: left; }
.haken-gross { width: 46px; height: 46px; border: 1px solid var(--gold); border-radius: 50%; position: relative; margin-bottom: 18px; }
.haken-gross::after { content: ""; position: absolute; left: 15px; top: 9px; width: 12px; height: 21px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(40deg); }
.fertig p { font-size: 1.1rem; line-height: 1.55; margin: 0 0 8px; }
.fertig .klein { font-family: var(--sans); font-size: 14px; color: var(--grau); }

@media (max-width: 600px) { .felder { grid-template-columns: 1fr; } .probe { display: none; } }