/* EchoGrid - gemeinsame Gestaltung.
   Farben stammen aus brand/brand.json und sind aus den Logos gemessen. */

:root {
	--oliv: #3D4633;
	--oliv-tief: #2B3126;
	--oliv-hell: #4A5540;
	--badge: #5C644F;
	--anthrazit: #2E3330;
	--creme: #E8E6D6;
	--creme-matt: #A8AB99;
	--rot: #B4472F;
	--gelb: #C9A227;
	--gruen: #6E8C4F;
	--rand: #55604A;
	--schrift: system-ui, -apple-system, "Segoe UI", sans-serif;
	--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	min-height: 100dvh;
	background: var(--oliv-tief);
	color: var(--creme);
	font: 15px/1.5 var(--schrift);
	-webkit-text-size-adjust: 100%;
}

a { color: var(--creme); }

/* --- Kopfleiste ------------------------------------------------------- */
.kopf {
	display: flex; align-items: center; gap: .75rem;
	padding: .5rem .9rem;
	background: var(--oliv);
	border-bottom: 1px solid var(--rand);
	position: sticky; top: 0; z-index: 500;
}
.kopf img { height: 30px; width: 30px; }
.kopf .marke { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.kopf .rolle {
	font: 11px/1 var(--mono); color: var(--creme-matt);
	border: 1px solid var(--rand); padding: .25rem .45rem; border-radius: 3px;
}
.kopf nav { margin-left: auto; display: flex; gap: .4rem; flex-wrap: wrap; }
.kopf nav a {
	text-decoration: none; font-size: 13px; padding: .3rem .6rem;
	border: 1px solid var(--rand); border-radius: 3px; color: var(--creme-matt);
}
.kopf nav a:hover, .kopf nav a.aktiv { color: var(--creme); border-color: var(--creme-matt); }

/* --- Bausteine -------------------------------------------------------- */
.tafel {
	background: var(--oliv);
	border: 1px solid var(--rand);
	border-radius: 4px;
}
.tafel > h2 {
	margin: 0; padding: .5rem .75rem;
	font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--creme-matt); border-bottom: 1px solid var(--rand);
	display: flex; align-items: center; gap: .5rem;
}
.tafel > .inhalt { padding: .75rem; }

button, .knopf {
	font: 600 13px var(--schrift);
	color: var(--creme); background: var(--oliv-hell);
	border: 1px solid var(--rand); border-radius: 3px;
	padding: .45rem .8rem; cursor: pointer; text-decoration: none;
	display: inline-block;
}
button:hover, .knopf:hover { background: var(--badge); }
button.haupt { background: var(--gruen); border-color: var(--gruen); color: #10160C; }
button.warn  { background: var(--rot); border-color: var(--rot); }
button.klein { padding: .2rem .45rem; font-size: 12px; }
button:disabled { opacity: .45; cursor: not-allowed; }

input, select, textarea {
	font: 14px var(--schrift);
	width: 100%;
	color: var(--creme); background: var(--oliv-tief);
	border: 1px solid var(--rand); border-radius: 3px; padding: .45rem .55rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--badge); }
label { display: block; font-size: 12px; color: var(--creme-matt); margin: .5rem 0 .2rem; }
select option { background: var(--oliv-tief); }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--rand); }
th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--creme-matt); }

.marke-status {
	display: inline-block; font: 11px/1 var(--mono);
	padding: .25rem .4rem; border-radius: 3px; text-transform: uppercase;
	border: 1px solid var(--rand);
}
.s-laeuft   { background: var(--gruen); color: #10160C; border-color: var(--gruen); }
.s-pause    { background: var(--gelb); color: #1A1505; border-color: var(--gelb); }
.s-bereit   { color: var(--creme); }
.s-entwurf  { color: var(--creme-matt); }
.s-beendet, .s-abgebrochen { color: var(--creme-matt); opacity: .7; }

.hinweis { color: var(--creme-matt); font-size: 13px; }
.fehler {
	background: rgba(180,71,47,.18); border: 1px solid var(--rot);
	color: #F3C7BC; padding: .5rem .7rem; border-radius: 3px; font-size: 13px;
}

/* --- Anmeldung -------------------------------------------------------- */
.anmeldung {
	min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem;
	background: radial-gradient(circle at 50% 30%, var(--oliv) 0%, var(--oliv-tief) 70%);
}
.anmeldung form { width: min(360px, 100%); text-align: center; }
.anmeldung img { width: 120px; height: 120px; margin-bottom: .5rem; }
.anmeldung h1 {
	margin: 0; font-size: 20px; letter-spacing: .22em; text-transform: uppercase;
}
.anmeldung p.unter {
	margin: .2rem 0 1.2rem; font: 12px var(--mono); color: var(--creme-matt);
	letter-spacing: .1em;
}
.anmeldung button { width: 100%; margin-top: 1rem; padding: .6rem; }