/* MGG-Design (Skill mgg-design): Segoe UI, Grau für Überschriften, Orange nur als Akzent, offene Tabellen. */
:root {
  --mgg-orange:  #FF6C0E;
  --mgg-grau:    #5B6670;
  --mgg-grau-2:  #6E7A85;
  --mgg-linie:   #D2D7DC;
  --mgg-flaeche: #F2F3F4;
  --mgg-text:    #262C31;
  --mgg-weiss:   #FFFFFF;
  --mgg-font: "Segoe UI", "Segoe UI Web", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --breite: 1120px;
}

* { box-sizing: border-box; }
html { background: var(--mgg-weiss); }
body {
  margin: 0; font-family: var(--mgg-font); color: var(--mgg-text); background: var(--mgg-weiss);
  font-size: 15px; line-height: 1.55; text-align: left;
}
a { color: var(--mgg-grau); }
h1, h2, h3 { color: var(--mgg-grau); font-weight: 700; letter-spacing: 0; }
h1 { font-size: 1.6rem; border-bottom: 1.5px solid var(--mgg-orange); padding-bottom: .3em; margin: .2em 0 .8em; }
h2 { font-size: 1.2rem; margin: 1.6em 0 .6em; }
.eyebrow { font-size: .75rem; font-weight: 700; color: var(--mgg-orange); letter-spacing: .28em; text-transform: uppercase; margin: 0; }
.meta { font-size: .85rem; color: var(--mgg-grau-2); margin: .2em 0; }
.grau { color: var(--mgg-grau-2); }

/* Kopf */
.kopf { border-bottom: 1px solid var(--mgg-linie); }
.kopf-innen, .fuss-innen, .inhalt { max-width: var(--breite); margin: 0 auto; padding: 0 16px; }
.kopf-innen { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 12px; }
.marke { text-decoration: none; display: flex; flex-direction: column; }
.marke-titel { font-size: 1.35rem; font-weight: 700; color: var(--mgg-grau); line-height: 1.2; }
.person { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .85rem; color: var(--mgg-grau-2); }
.person input { width: 12em; }
.person strong { color: var(--mgg-grau); }

/* Anmeldung */
.anmeldung { max-width: 34rem; padding: 24px 0 48px; }
.anmelde-formular { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.anmelde-formular label { width: 100%; font-weight: 600; color: var(--mgg-grau); }
.anmelde-formular input { flex: 1 1 16rem; min-width: 0; }

/* Formularelemente */
input, select, button { font: inherit; color: var(--mgg-text); }
input[type=text], input[type=search], input:not([type]), select {
  border: 1px solid var(--mgg-linie); background: var(--mgg-weiss); padding: .35em .55em; border-radius: 2px;
}
input:focus, select:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--mgg-orange); outline-offset: 1px; }
.knopf, .knopf-klein {
  border: 1px solid var(--mgg-grau); background: var(--mgg-weiss); color: var(--mgg-grau);
  padding: .35em .9em; cursor: pointer; border-radius: 2px; font-weight: 600; text-decoration: none; display: inline-block;
}
.knopf-klein { padding: .3em .7em; font-size: .85rem; }
.knopf:hover, .knopf-klein:hover { background: var(--mgg-flaeche); }
.knopf.aktiv { background: var(--mgg-grau); color: var(--mgg-weiss); }
.knopf-potenzial { border-color: var(--mgg-orange); color: var(--mgg-text); }
.knopf-potenzial.aktiv { background: var(--mgg-orange); border-color: var(--mgg-orange); color: var(--mgg-text); }
.knopf[disabled] { opacity: .5; cursor: wait; }

/* Statuszeile der Läufe */
.status { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .8rem; color: var(--mgg-grau-2); padding: 12px 0 4px; }
.lauf::before { content: "\25CF"; color: #3f8f5a; margin-right: .4em; font-size: .8em; }
.lauf.grau::before { content: none; }
.lauf-fehler { color: #b3261e; font-weight: 600; }
.lauf-fehler::before { color: #b3261e; }

/* Reiter */
.reiter { display: flex; flex-wrap: wrap; gap: 4px 22px; border-bottom: 1px solid var(--mgg-linie); margin: 12px 0 0; }
.reiter a { text-decoration: none; color: var(--mgg-grau-2); padding: 8px 0; border-bottom: 3px solid transparent; font-weight: 600; }
.reiter a.aktiv { color: var(--mgg-grau); border-bottom-color: var(--mgg-orange); }
.zahl { font-weight: 400; color: var(--mgg-grau-2); margin-left: .2em; }

/* Filter */
.filter { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 14px 0; }
.filter input[type=search] { flex: 1 1 260px; min-width: 0; }
.haken { font-size: .9rem; color: var(--mgg-grau-2); display: inline-flex; gap: .35em; align-items: center; }
.zuruecksetzen { font-size: .85rem; }
.hinweis { border-left: 3px solid var(--mgg-orange); background: var(--mgg-flaeche); padding: .6em .9em; margin: 0 0 14px; }
.leer { color: var(--mgg-grau-2); padding: 2em 0; }

/* Karten */
.liste { display: flex; flex-direction: column; gap: 12px; padding-bottom: 32px; }
.karte { border: 1px solid var(--mgg-linie); border-top: 4px solid var(--mgg-linie); padding: 12px 16px; background: var(--mgg-weiss); }
.karte.prio-hoch { border-top-color: var(--mgg-orange); }
.karte.hat-status { background: var(--mgg-flaeche); }
.karte.status-kein_potenzial .karte-titel a { color: var(--mgg-grau-2); }
.karte-kopf { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; }
.karte-titel { font-weight: 700; font-size: 1.02rem; line-height: 1.35; display: flex; gap: .55em; align-items: baseline; min-width: 0; }
.karte-titel a { color: var(--mgg-grau); text-decoration: none; overflow-wrap: anywhere; }
.karte-titel a:hover { text-decoration: underline; }
.punkt { flex: none; width: .65em; height: .65em; border-radius: 50%; display: inline-block; border: 1.5px solid var(--mgg-grau-2); }
.punkt-hoch { background: var(--mgg-orange); border-color: var(--mgg-orange); }
.punkt-mittel { background: var(--mgg-grau-2); }
.frist { flex: none; text-align: right; white-space: nowrap; font-size: .85rem; color: var(--mgg-grau-2); display: flex; flex-direction: column; }
.frist-datum { font-weight: 700; color: var(--mgg-grau); }
.frist-knapp .frist-rest { color: var(--mgg-text); font-weight: 700; }
.frist-vorbei .frist-datum { color: var(--mgg-grau-2); text-decoration: line-through; }
.begruendung { margin: .4em 0; font-size: .9rem; }
.dabei { font-style: italic; }
.etikett { font-size: .75rem; font-weight: 700; padding: .1em .5em; border: 1px solid var(--mgg-grau); color: var(--mgg-grau); margin-right: .4em; }
.etikett-relevant { border-color: var(--mgg-orange); background: var(--mgg-orange); color: var(--mgg-text); }
.etikett-eventuell { border-color: var(--mgg-grau); }
.etikett-nicht-relevant { border-color: var(--mgg-linie); color: var(--mgg-grau-2); }
ul { list-style: none; padding-left: 1.2em; }
ul li::before { content: "\25CF"; color: var(--mgg-orange); margin-left: -1.2em; margin-right: .7em; font-size: .7em; }
.aktion { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-top: 8px; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.notiz { flex: 1 1 220px; min-width: 0; }
.grund-wahl { display: inline-flex; gap: 6px; align-items: center; }
.grund-wahl[hidden] { display: none; }
.status-zeile { min-height: 1.2em; }
.status-zeile.fehler { color: #b3261e; }

/* Detail */
.zurueck { font-size: .9rem; }
.kennfeld { margin-bottom: 1em; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th { text-align: left; font-weight: 700; color: var(--mgg-grau); border-bottom: 2px solid var(--mgg-orange); padding: .5em .8em .5em 0; vertical-align: top; }
td { border-bottom: 1px solid var(--mgg-linie); padding: .5em .8em .5em 0; vertical-align: top; }
.kennfeld th { width: 30%; color: var(--mgg-grau-2); font-weight: 400; border-bottom: 1px solid var(--mgg-linie); }
.kennfeld td { font-weight: 600; color: var(--mgg-grau); }
.volltext { white-space: pre-line; font-size: .92rem; max-width: 80ch; padding-bottom: 32px; }

/* Fuss mit geschwungenem Eck */
.fuss { position: relative; border-top: 1px solid var(--mgg-linie); font-size: .75rem; color: var(--mgg-grau-2); min-height: 56px; }
.fuss-innen { display: flex; flex-wrap: wrap; gap: 4px 24px; justify-content: space-between; padding-top: 12px; padding-bottom: 12px; padding-right: 70px; }
.eck { position: absolute; right: 0; bottom: 0; width: 52px; height: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 738 684'%3E%3Cpath d='M0 684C400 684 710 300 738 0V684Z' fill='%23FF6C0E'/%3E%3C/svg%3E") no-repeat right bottom / contain; }

@media (max-width: 640px) {
  .karte-kopf { flex-direction: column; gap: 4px; }
  .frist { text-align: left; flex-direction: row; gap: .6em; }
  .person input { width: 9em; }
}