/* Übersicht, Vorgangsliste, Import, Export, Verwaltung. */

/* ---- Übersicht ---- */

.zutun { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.zutun-eintrag {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem;
  border-radius: var(--radius-karte); background: var(--weiss); box-shadow: var(--schatten-karte); color: var(--tinte); text-decoration: none;
  transition: transform .18s var(--kurve), box-shadow .18s;
}
a.zutun-eintrag:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(11, 42, 36, .06), 0 12px 32px rgba(11, 42, 36, .11); color: var(--tinte); }
.zutun-zahl {
  display: grid; place-items: center; min-width: 3.5rem; height: 3.5rem; padding: 0 .6rem; border-radius: 1rem;
  font-family: var(--schrift-display); font-weight: 750; font-size: 1.75rem; letter-spacing: -.03em; background: var(--neutral-flaeche); color: var(--neutral);
}
.zutun-eintrag.ton-warn .zutun-zahl { background: var(--warn-flaeche); color: var(--warn); }
.zutun-eintrag.ton-fehler .zutun-zahl { background: var(--fehler-flaeche); color: var(--fehler); }
.zutun-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.zutun-text strong { font-family: var(--schrift-display); font-size: 1rem; letter-spacing: -.01em; }
.zutun-text span { color: var(--gedaempft-tief); font-size: .8125rem; }
.zutun-pfeil { color: var(--gedaempft); transition: transform .18s var(--kurve), color .18s; }
a.zutun-eintrag:hover .zutun-pfeil { transform: translateX(3px); color: var(--teal); }

/* Regelweg: fünf Stationen, verbunden durch eine Linie */
.weg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; }
.weg-schritt { position: relative; }
.weg-schritt + .weg-schritt::before {
  content: ""; position: absolute; top: 1.55rem; right: calc(50% + 1.9rem); width: calc(100% - 3.8rem); height: 2px; background: var(--sand-linie);
}
.weg-link { display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: .25rem .25rem .5rem; border-radius: var(--radius-feld); color: var(--tinte); text-decoration: none; text-align: center; }
.weg-zahl {
  display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: 50%; border: 2px solid var(--sand-linie); background: var(--weiss);
  font-family: var(--schrift-display); font-weight: 700; font-size: 1.125rem; color: var(--gedaempft-tief); transition: border-color .15s, background-color .15s, color .15s;
}
.weg-schritt.belegt .weg-zahl { border-color: var(--teal); background: var(--teal-hauch); color: var(--tanne); }
.weg-link:hover .weg-zahl { border-color: var(--teal); }
.weg-name { font-size: .8125rem; font-weight: 600; color: var(--gedaempft-tief); }
.weg-schritt.belegt .weg-name { color: var(--tinte); }

.abzweige { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--sand-linie); }
.abzweig { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem .35rem .4rem; border-radius: var(--radius-pille); background: var(--neutral-flaeche); color: var(--neutral); font-size: .8125rem; font-weight: 600; text-decoration: none; }
.abzweig:hover { box-shadow: inset 0 0 0 1px currentColor; }
.abzweig-zahl { display: grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .35rem; border-radius: var(--radius-pille); background: rgba(255, 255, 255, .75); font-weight: 700; }
.abzweig.ton-fehler { background: var(--fehler-flaeche); color: var(--fehler); }

.dienste { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.dienst { padding: 1rem 1.1rem; border-radius: var(--radius-feld); border: 1px solid var(--linie); background: #fbfaf7; display: flex; flex-direction: column; gap: .35rem; color: var(--tinte); }
.dienst.ton-fehler { border-color: var(--fehler-rand); background: #fdf3f1; }
.dienst-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .75rem; margin-bottom: .15rem; }
.dienst-name { font-family: var(--schrift-display); font-weight: 650; letter-spacing: -.005em; }
.dienst-zeile { color: var(--tinte); }
.dienst-code, .dienst-zeit { color: var(--gedaempft-tief); font-size: .8125rem; }
.fristen { display: grid; gap: .65rem; }

/* ---- Vorgangsliste ---- */

.listen-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 1rem 2rem; align-items: start; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--linie); }
.listen-kopf > .feldhinweis { grid-column: 1 / -1; }
.reiter { display: flex; flex-wrap: wrap; gap: .4rem; }
.reiter-eintrag {
  padding: .45rem .9rem; border-radius: var(--radius-pille); border: 1px solid var(--sand-linie); background: var(--weiss);
  color: var(--tinte); font-weight: 600; font-size: .8125rem; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s;
}
.reiter-eintrag:hover { border-color: var(--teal); color: var(--tinte); }
.reiter-eintrag.aktiv { background: var(--tanne); border-color: var(--tanne); color: #fff; }
.suche { display: flex; flex-direction: column; gap: .4rem; }
.suche-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.suche-zeile .iconfeld { flex: 1 1 12rem; }
.zellen-fehler { margin-top: .3rem; color: var(--fehler); font-size: .8125rem; max-width: 22rem; }
.offen-zahl { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .4rem; border-radius: var(--radius-pille); background: var(--warn-flaeche); color: var(--warn); font-weight: 700; font-size: .8125rem; }
.filter { max-width: 22rem; }

/* ---- Import ---- */

.karte-ablage { padding: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.ablage {
  display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: 2.75rem 1.5rem; text-align: center; cursor: pointer;
  border: 2px dashed var(--sand-linie); border-radius: 1rem; background: #fbfaf7; transition: border-color .15s, background-color .15s;
}
.ablage:hover, .ablage.ziel { border-color: var(--teal); background: var(--teal-hauch); }
.ablage.ziel { border-style: solid; }
.ablage.gesperrt { cursor: not-allowed; border-color: var(--fehler-rand); background: #fdf3f1; }
input:focus-visible + .ablage { outline: 2px solid var(--teal); outline-offset: 3px; }
.ablage-zeichen { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 1rem; background: var(--teal-hauch); color: var(--teal-tief); }
.ablage.gesperrt .ablage-zeichen { background: var(--fehler-flaeche); color: var(--fehler); }
.ablage-zeichen .icon { width: 1.6rem; height: 1.6rem; }
.ablage-titel { font-family: var(--schrift-display); font-weight: 700; font-size: 1.1875rem; letter-spacing: -.015em; }
.ablage-text { color: var(--gedaempft-tief); max-width: 36rem; }
.ablage .knopf { margin-top: .6rem; pointer-events: none; }
.ablage-hinweis { display: flex; gap: .5rem; align-items: flex-start; padding: 0 .5rem .25rem; color: #4d3200; font-size: .8125rem; font-weight: 550; }
.ablage-hinweis .icon { width: 1rem; height: 1rem; margin-top: .12rem; color: var(--warn); }

.uploads { display: flex; flex-direction: column; }
.upload { padding: .9rem 0; border-top: 1px solid var(--linie); display: flex; flex-direction: column; gap: .45rem; }
.upload:first-child { border-top: 0; padding-top: 0; }
.upload:last-child { padding-bottom: 0; }
.upload-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.upload-kopf { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.upload-icon { color: var(--gedaempft); }
.upload-name { display: flex; flex-direction: column; min-width: 0; }
.upload-datei { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34rem; }
.upload-groesse { color: var(--gedaempft-tief); font-size: .8125rem; }
.upload-text { padding-left: 1.95rem; }
.upload > .fortschritt, .upload > .laufleiste { margin-left: 1.95rem; }

.ablauf { padding: .25rem .25rem 0; }
.ablauf h2 { font-size: .9375rem; color: var(--gedaempft-tief); margin-bottom: .9rem; }
.ablauf-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; counter-reset: schritt; }
.ablauf-liste li { counter-increment: schritt; display: grid; grid-template-columns: auto 1fr; gap: .15rem .75rem; align-content: start; }
.ablauf-liste li::before {
  content: counter(schritt); grid-row: 1 / span 2; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  border: 1.5px solid var(--sand-linie); font-family: var(--schrift-display); font-weight: 700; font-size: .8125rem; color: var(--gedaempft-tief);
}
.ablauf-liste strong { font-family: var(--schrift-display); padding-top: .15rem; }
.ablauf-liste span { grid-column: 2; color: var(--gedaempft-tief); font-size: .8125rem; }

/* ---- Verwaltung ---- */

.ereignis { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.ereignis .icon { width: .95rem; height: .95rem; }
.details { display: flex; flex-wrap: wrap; gap: .3rem .4rem; }
.details > div { display: inline-flex; gap: .3rem; padding: .1rem .5rem; border-radius: var(--radius-s); background: var(--neutral-flaeche); font-size: .75rem; max-width: 100%; }
.details dt { color: var(--gedaempft-tief); }
.details dd { font-weight: 600; overflow-wrap: anywhere; }

.sperrliste { display: grid; gap: .75rem; }
.sperrliste li { display: flex; gap: .65rem; }
.sperrliste .icon { color: var(--fehler); margin-top: .1rem; }
.sperr-bezug { color: var(--gedaempft-tief); font-size: .8125rem; }

.punkte { display: flex; flex-direction: column; }
.punkt-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: start; padding: .75rem 0; border-top: 1px solid var(--linie); }
.punkt-zeile:first-child { border-top: 0; padding-top: 0; }
.punkt-nr { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--neutral-flaeche); color: var(--neutral); font-family: var(--schrift-display); font-weight: 700; font-size: .8125rem; }
.punkt-zeile.ok .punkt-nr { background: var(--ok-flaeche); color: var(--ok); }
.punkt-text p:first-child { font-weight: 600; padding-top: .2rem; }
.punkt-nachweis { color: var(--gedaempft-tief); font-size: .8125rem; margin-top: .15rem; overflow-wrap: anywhere; }

.schemas { display: grid; gap: .75rem; }
.schemas li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; align-items: flex-start; }
.schema-name { font-weight: 600; }
.schema-id { color: var(--gedaempft-tief); font-size: .8125rem; }

@media (max-width: 1100px) {
  .zutun { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .listen-kopf { grid-template-columns: minmax(0, 1fr); padding: 1.1rem; }
  .ablauf-liste { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

@media (max-width: 720px) {
  .weg { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
  .weg-schritt + .weg-schritt::before { content: none; }
  .weg-link { flex-direction: row; gap: .85rem; padding: .3rem; text-align: left; }
  .weg-zahl { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
  .weg-name { font-size: .875rem; }
  .ablage { padding: 2rem 1rem; }
  .upload-text, .upload > .fortschritt, .upload > .laufleiste { padding-left: 0; margin-left: 0; }
  .punkt-zeile { grid-template-columns: auto minmax(0, 1fr); }
  .punkt-zeile .pille { grid-column: 2; justify-self: start; }
  .aktionszeile { flex-direction: column; align-items: flex-start; gap: .5rem; }
}