/* WandelWerk Tickets – Design Tokens und Komponenten (UX-Dokument Abschnitt 3) */
:root {
  --ww-primary: #69747A;
  --ww-primary-hover: #4F585D;
  --ww-line: #939598;
  --ww-line-light: #DADCDD;
  --ww-red: #C9252F;
  --ww-red-bg: #FBEAEA;
  --ww-red-text: #A51E27;
  --ww-text: #1F2326;
  --ww-bg: #F4F5F6;
  --ww-surface: #FFFFFF;
  --ww-ok-bg: #E9F2EC;
  --ww-ok-text: #1E5E36;

  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-size-base: 16px;
  --font-size-small: 0.875rem;
  --font-size-h1: 1.5rem;
  --font-size-h2: 1.25rem;
  --line-height: 1.5;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;

  --border-radius: 6px;
  --button-height: 44px;
  --input-height: 44px;
  --content-max: 1100px;
}

* { box-sizing: border-box; }
html { font-size: var(--font-size-base); }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: var(--font-family); line-height: var(--line-height);
  color: var(--ww-text); background: var(--ww-bg);
}
h1 { font-size: var(--font-size-h1); margin: 0 0 var(--spacing-md); }
h2 { font-size: var(--font-size-h2); margin: 0 0 var(--spacing-md); }
a { color: var(--ww-primary-hover); }
:focus-visible { outline: 2px solid var(--ww-primary); outline-offset: 2px; }
.klein { font-size: var(--font-size-small); color: var(--ww-primary); }
.versteckt { display: none !important; }

/* Kopf und Fuß */
.kopf { background: var(--ww-surface); border-bottom: 1px solid var(--ww-line-light); }
.kopf-innen {
  max-width: var(--content-max); margin: 0 auto; padding: var(--spacing-sm) var(--spacing-md);
  display: flex; align-items: center; gap: var(--spacing-md);
}
.kopf-logo img { height: 32px; display: block; }
.kopf-nav { display: flex; gap: var(--spacing-md); margin-left: auto; align-items: center; flex-wrap: wrap; }
.kopf-nav a { color: var(--ww-text); text-decoration: none; padding: var(--spacing-xs) 0; border-bottom: 2px solid transparent; }
.kopf-nav a.aktiv { border-bottom-color: var(--ww-primary); font-weight: 600; }
.kopf-nav .zaehler { background: var(--ww-red); color: #fff; border-radius: 10px; padding: 0 6px; font-size: 0.75rem; margin-left: 4px; }
.menue-knopf { display: none; margin-left: auto; }
.nutzer-menue { position: relative; }
.nutzer-menue button { min-height: 36px; }
.nutzer-menue .aufklapp { position: absolute; right: 0; top: 100%; background: var(--ww-surface); border: 1px solid var(--ww-line); border-radius: var(--border-radius); padding: var(--spacing-xs); z-index: 20; min-width: 160px; }
.nutzer-menue .aufklapp button { width: 100%; justify-content: flex-start; }

.inhalt { flex: 1; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--spacing-lg) var(--spacing-md); }
.inhalt.schmal { max-width: 440px; padding-top: var(--spacing-xl); }
.fuss { text-align: center; padding: var(--spacing-md); font-size: var(--font-size-small); }
.fuss a { color: var(--ww-primary-hover); margin: 0 var(--spacing-sm); }

/* Flächen */
.karte { background: var(--ww-surface); border: 1px solid var(--ww-line-light); border-radius: var(--border-radius); padding: var(--spacing-lg); }
.karte + .karte { margin-top: var(--spacing-md); }
.ticket-raster > .karte + .karte { margin-top: 0; }
.titelzeile { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); margin-bottom: var(--spacing-md); flex-wrap: wrap; }
.titelzeile h1 { margin: 0; }
.logo-zentriert { text-align: center; margin-bottom: var(--spacing-lg); }
.logo-zentriert img { height: 48px; }

/* Buttons */
button, .knopf {
  font: inherit; min-height: var(--button-height); padding: 0 var(--spacing-md);
  border-radius: var(--border-radius); border: 1px solid var(--ww-primary);
  background: var(--ww-surface); color: var(--ww-primary-hover); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm);
  text-decoration: none;
}
button.primaer, .knopf.primaer { background: var(--ww-primary); color: #fff; }
button.primaer:hover:not(:disabled), .knopf.primaer:hover { background: var(--ww-primary-hover); }
button.gefahr { border-color: var(--ww-red); color: var(--ww-red-text); }
button.link { border: none; background: none; padding: 0; min-height: auto; text-decoration: underline; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.aktionen { display: flex; justify-content: flex-end; gap: var(--spacing-sm); margin-top: var(--spacing-lg); flex-wrap: wrap; }

/* Formulare */
.feld { margin-bottom: var(--spacing-md); }
.feld label, .feld .label { display: block; font-weight: 600; margin-bottom: var(--spacing-xs); }
.feld .hinweis { font-size: var(--font-size-small); color: var(--ww-primary); margin-top: var(--spacing-xs); }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  font: inherit; width: 100%; min-height: var(--input-height); padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--ww-line); border-radius: var(--border-radius); background: var(--ww-surface); color: var(--ww-text);
}
textarea { min-height: 110px; resize: vertical; }
.feld.fehler input, .feld.fehler textarea, .feld.fehler select { border-color: var(--ww-red); }
.feldfehler { color: var(--ww-red-text); font-size: var(--font-size-small); margin-top: var(--spacing-xs); }
.passwort { position: relative; }
.passwort input { padding-right: 52px; }
.passwort .auge { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 36px; width: 44px; padding: 0; border: none; background: none; }
.zeichen { text-align: right; font-size: var(--font-size-small); color: var(--ww-primary); }
.checkbox { display: flex; gap: var(--spacing-sm); align-items: flex-start; }
.feld label.checkbox, fieldset label.checkbox { font-weight: normal; }
.checkbox input { width: 20px; height: 20px; margin-top: 2px; }

/* Meldungen */
.meldungen { position: fixed; top: 56px; left: 50%; transform: translateX(-50%); z-index: 60; width: min(560px, calc(100% - 32px)); }
.meldung { box-shadow: 0 2px 8px rgba(31, 35, 38, 0.15); }
.meldung { margin-top: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--border-radius); display: flex; justify-content: space-between; gap: var(--spacing-md); align-items: center; }
.meldung.ok { background: var(--ww-ok-bg); color: var(--ww-ok-text); }
.meldung.fehler { background: var(--ww-red-bg); color: var(--ww-red-text); }
.meldung button { min-height: 28px; border: none; background: none; color: inherit; }
.hinweisflaeche { padding: var(--spacing-md); border-radius: var(--border-radius); border: 1px solid var(--ww-line-light); background: var(--ww-bg); margin-bottom: var(--spacing-md); }
.hinweisflaeche.fehler { background: var(--ww-red-bg); color: var(--ww-red-text); border-color: var(--ww-red-bg); }
.hinweisflaeche.ok { background: var(--ww-ok-bg); color: var(--ww-ok-text); border-color: var(--ww-ok-bg); }

/* Badges */
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: var(--font-size-small); border: 1px solid var(--ww-line); background: var(--ww-surface); color: var(--ww-text); white-space: nowrap; }
.badge.w-blockierend { background: var(--ww-red-bg); color: var(--ww-red-text); border-color: var(--ww-red-bg); font-weight: 700; }
.badge.w-normal { background: var(--ww-primary); color: #fff; border-color: var(--ww-primary); }
.badge.w-niedrig { color: var(--ww-primary-hover); }
.badge.punkt::before { content: "● "; color: var(--ww-primary); }

/* Tabellen */
table.liste { width: 100%; border-collapse: collapse; background: var(--ww-surface); border: 1px solid var(--ww-line-light); border-radius: var(--border-radius); }
table.liste th, table.liste td { text-align: left; padding: var(--spacing-sm) var(--spacing-md); border-bottom: 1px solid var(--ww-line-light); vertical-align: top; }
table.liste th { font-size: var(--font-size-small); color: var(--ww-primary); font-weight: 600; }
table.liste tr:last-child td { border-bottom: none; }
table.liste tr.klickbar { cursor: pointer; }
table.liste tr.klickbar:hover td { background: var(--ww-bg); }
.platzhalter { height: 20px; background: var(--ww-line-light); border-radius: 4px; margin: var(--spacing-sm) 0; animation: puls 1.2s ease-in-out infinite; }
@keyframes puls { 50% { opacity: 0.5; } }

/* Dialog */
.dialog-hintergrund { position: fixed; inset: 0; background: rgba(31, 35, 38, 0.45); display: flex; align-items: center; justify-content: center; z-index: 50; padding: var(--spacing-md); }
.dialog { background: var(--ww-surface); border-radius: var(--border-radius); padding: var(--spacing-lg); max-width: 460px; width: 100%; }
.dialog h2 { margin-bottom: var(--spacing-sm); }

@media (max-width: 720px) {
  .inhalt { padding: var(--spacing-md); }
  .karte { padding: var(--spacing-md); }
  .menue-knopf { display: inline-flex; }
  .kopf-innen { flex-wrap: wrap; }
  .kopf-nav { display: none; width: 100%; flex-direction: column; align-items: flex-start; margin-left: 0; }
  .kopf-nav.offen { display: flex; }
  .aktionen button, .aktionen .knopf { width: 100%; }
  table.liste.karten thead { display: none; }
  table.liste.karten, table.liste.karten tbody, table.liste.karten tr, table.liste.karten td { display: block; width: 100%; }
  table.liste.karten tr { border-bottom: 1px solid var(--ww-line-light); padding: var(--spacing-sm) 0; }
  table.liste.karten td { border: none; padding: 2px var(--spacing-md); }
}

/* Filterleiste */
.filter { display: flex; flex-wrap: wrap; gap: var(--spacing-md); padding: var(--spacing-md); margin-bottom: var(--spacing-md); }
.filter .feld { margin: 0; min-width: 160px; flex: 1; }
@media (max-width: 720px) { .filter .feld { min-width: 100%; } }

/* Neues Ticket */
.typwahl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); }
.typkarte { flex-direction: column; align-items: flex-start; min-height: 80px; padding: var(--spacing-md); text-align: left; color: var(--ww-text); border-color: var(--ww-line); }
.typkarte span { font-size: var(--font-size-small); color: var(--ww-primary); }
.typkarte[aria-pressed="true"] { border: 2px solid var(--ww-primary); background: var(--ww-bg); }
fieldset.wichtigkeit { border: none; padding: 0; }
fieldset.wichtigkeit .checkbox { margin: var(--spacing-xs) 0; }
.ablage { border: 2px dashed var(--ww-line); border-radius: var(--border-radius); padding: var(--spacing-lg); text-align: center; margin-top: var(--spacing-sm); background: var(--ww-surface); }
.ablage.gesperrt { opacity: 0.5; }
.ablage.aktiv { border-color: var(--ww-primary); background: var(--ww-bg); }
.vorschau { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); margin-top: var(--spacing-sm); }
.vorschau .bild { position: relative; width: 120px; }
.vorschau .bild img { width: 120px; height: 90px; object-fit: cover; border-radius: var(--border-radius); border: 1px solid var(--ww-line-light); display: block; }
.vorschau .bild .weg { position: absolute; top: 4px; right: 4px; min-height: 28px; width: 28px; padding: 0; background: var(--ww-surface); }
.vorschau .bild .status { font-size: 0.75rem; color: var(--ww-primary); }
.vorschau .bild.fehler .status { color: var(--ww-red-text); }
.fortschritt { height: 4px; background: var(--ww-line-light); border-radius: 2px; overflow: hidden; margin-top: 4px; }
.fortschritt div { height: 100%; width: 40%; background: var(--ww-primary); animation: lauf 1s linear infinite; }
@keyframes lauf { from { margin-left: -40%; } to { margin-left: 100%; } }
@media (max-width: 720px) { .typwahl { grid-template-columns: 1fr; } }

/* Ticketansicht */
.ticket-raster { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "inhalt bew" "verlauf bew"; gap: var(--spacing-md) var(--spacing-lg); align-items: start; }
.ticket-raster > .t-inhalt { grid-area: inhalt; } .ticket-raster > .t-verlauf { grid-area: verlauf; } .ticket-raster > .bewertung { grid-area: bew; }
.ticket-raster.ohne-bew { grid-template-columns: minmax(0, 1fr); grid-template-areas: "inhalt" "verlauf"; }
.ticket-kopf .badges { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; margin: var(--spacing-sm) 0; }
.ticket-kopf .meta { font-size: var(--font-size-small); color: var(--ww-primary); }
.inhaltsfeld { margin-bottom: var(--spacing-md); }
.inhaltsfeld .label { font-weight: 600; font-size: var(--font-size-small); color: var(--ww-primary); }
.inhaltsfeld .text { white-space: pre-wrap; overflow-wrap: anywhere; }
.bildleiste { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }
.bildleiste .bild { width: 160px; }
.bildleiste img { width: 160px; height: 110px; object-fit: cover; border-radius: var(--border-radius); border: 1px solid var(--ww-line-light); cursor: zoom-in; display: block; }
.bildleiste .vermerk { width: 160px; height: 110px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: var(--font-size-small); color: var(--ww-primary); border: 1px dashed var(--ww-line); border-radius: var(--border-radius); padding: var(--spacing-sm); }
.bildleiste .bild button { margin-top: 4px; min-height: 32px; width: 100%; }
.gross { max-width: 95vw; max-height: 90vh; border-radius: var(--border-radius); }
.verlauf { list-style: none; padding: 0; margin: 0 0 var(--spacing-md); }
.verlauf li { padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--ww-line-light); }
.verlauf li.statuszeile { color: var(--ww-primary); font-size: var(--font-size-small); border-bottom: none; padding: 2px 0; }
.verlauf .wer { font-weight: 600; }
.verlauf .wann { font-size: var(--font-size-small); color: var(--ww-primary); margin-left: var(--spacing-sm); }
.verlauf .text { white-space: pre-wrap; overflow-wrap: anywhere; }
.bewertung .feld { margin-bottom: var(--spacing-md); }
.bewertung .vorschlag { font-weight: normal; color: var(--ww-primary); font-size: var(--font-size-small); }
@media (max-width: 900px) { .ticket-raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "inhalt" "bew" "verlauf"; } }

/* Verwaltung */
#formbereich .karte { margin-bottom: var(--spacing-md); }
.zeilenaktionen { white-space: nowrap; }
.zeilenaktionen button { min-height: 36px; margin: 2px 0; }
@media (max-width: 720px) { .zeilenaktionen { white-space: normal; } }
fieldset.feld { border: none; padding: 0; }

.filterhinweis { margin: 0 0 var(--spacing-sm); }