/* Infofactory-Tokens, übernommen aus Firma/Design/Infofactory/styles.css und motion.css (Stand 24.09.2026) */
:root {
  --if-blue: #1A4FA0;
  --if-blue-soft: #2E6BC0;
  --if-blue-night: #082247;
  --if-blue-hint: #E8EFF8;
  --if-grau: #E7E7E7;
  --if-text: #404040;
  --if-muted: #5A6373;
  --if-line: #D9DCE2;
  --if-bg: #FFFFFF;
  --if-ink: #0B1320;
  --if-ink2: #2C3340;
  --if-paper: #F4F4F1;
  --ampel-gruen: #3C8D2F;
  --ampel-gelb: #E3A800;
  --ampel-rot: #C0392B;
  --ampel-grau: #8C929C;
  --luecke-bg: #FFF1B8;
  --luecke-text: #5B4300;
  --fehler: #A3320B;
  --font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --r-1: 0;
  --r-2: 0;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --if-dur-1: 200ms;
  --if-dur-2: 400ms;
  --if-dur-3: 600ms;
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --ease-rise: cubic-bezier(.16,.84,.32,1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { font: 15px/1.5 var(--font-sans); color: var(--if-text); background: var(--if-bg); }
h1, h2, h3, h4, p, ul { margin: 0; }
a { color: var(--if-blue); }

/* Kopf: Titel links, Logo immer oben rechts */
.kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); height: 56px; padding: 0 var(--s-4); background: var(--if-bg); }
.kopf h1 { font-size: 18px; font-weight: 600; color: var(--if-blue); white-space: nowrap; }
.logo { height: 32px; width: auto; }
@media (max-width: 600px) {
  .kopf h1 { font-size: 16px; }
  .logo { height: 22px; }
}

/* Formularfelder: Fläche ohne Rahmen, der Fokus ist die einzige Kontur */
input, select, textarea, button { font: inherit; border-radius: var(--r-2); }
input, select, textarea { width: 100%; border: 0; padding: var(--s-2) var(--s-3); color: var(--if-text); background: var(--if-grau); }
textarea { resize: vertical; }
label { display: block; margin: var(--s-3) 0 var(--s-1); font-size: 13px; font-weight: 600; color: var(--if-ink2); }
button { min-height: 44px; border: 0; padding: var(--s-2) var(--s-4); background: var(--if-blue); color: #FFFFFF; cursor: pointer; transition: background-color var(--if-dur-1) var(--ease-soft), color var(--if-dur-1) var(--ease-soft); }
button:hover:not(:disabled) { background: var(--if-blue-soft); }
button:disabled { opacity: .45; cursor: default; }
.knopf-leise { background: var(--if-grau); color: var(--if-ink); }
.knopf-leise:hover:not(:disabled) { background: var(--if-blue-hint); color: var(--if-blue); }
:focus-visible { outline: 2px solid var(--if-blue); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--if-blue); }

.fehler { color: var(--fehler); }
.fehler:empty { display: none; }
.leer { color: var(--if-muted); }

.seite { max-width: 1200px; margin: 0 auto; padding: var(--s-5) var(--s-4); }
.seiten-titel { font-size: 24px; line-height: 1.2; font-weight: 700; color: var(--if-ink); }

/* Zugang */
.zugang { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-5); align-items: start; max-width: 1040px; }
.intro-zielgruppe { margin-bottom: var(--s-1); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--if-blue); }
.intro-titel { margin-bottom: var(--s-3); font-size: 26px; line-height: 1.2; font-weight: 700; color: var(--if-ink); }
.intro-lead { font-size: 17px; line-height: 1.45; color: var(--if-ink2); }
.zugang form { display: grid; gap: var(--s-1); padding: var(--s-4); background: var(--if-blue-hint); }
.zugang label { margin-top: var(--s-2); }
.anmelden-titel { font-size: 15px; font-weight: 600; color: var(--if-blue); }
.code-zeile { display: flex; gap: var(--s-2); }
.code-zeile input { flex: 1; min-width: 0; min-height: 44px; background: #FFFFFF; }
.code-hinweis { font-size: 13px; color: var(--if-muted); }

/* Einstieg */
.hinweis-daten { margin: var(--s-2) 0 var(--s-4); padding: var(--s-3); background: var(--if-blue-hint); color: var(--if-ink2); }
.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-3); }
.typkarte { display: grid; align-content: start; gap: var(--s-1); min-height: 112px; padding: var(--s-4); text-align: left; background: var(--if-paper); color: var(--if-ink); }
.typkarte:hover:not(:disabled) { background: var(--if-blue); color: #FFFFFF; }
.typkarte-titel { font-size: 17px; font-weight: 600; line-height: 1.25; }
.typkarte-text { font-size: 14px; color: var(--if-blue); }
.typkarte:hover:not(:disabled) .typkarte-text { color: #FFFFFF; }
.typkarte:disabled { opacity: 1; background: var(--if-grau); color: var(--if-muted); }
.typkarte:disabled .typkarte-text { color: var(--if-muted); font-style: italic; }

/* Arbeit */
.arbeit-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); margin-bottom: var(--s-4); }
.paket-hinweis { max-width: 760px; margin-top: var(--s-1); font-size: 13px; color: var(--if-muted); }
.arbeit-raster { display: grid; grid-template-columns: minmax(300px, 2fr) minmax(0, 3fr); gap: var(--s-5); align-items: start; }
.anfrage, .entwurf { min-width: 0; }
.hinweis-flaeche { padding: var(--s-3); background: var(--if-blue-hint); color: var(--if-ink2); font-size: 14px; }
.aktion-zeile { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-3); }
.laufzeit { font-variant-numeric: tabular-nums; color: var(--if-blue); font-weight: 600; }
.anfrage-form .fehler { margin-top: var(--s-2); }
.listen-titel { margin: var(--s-5) 0 var(--s-2); font-size: 16px; font-weight: 600; color: var(--if-blue); }

/* Cockpit-Liste */
.anfragen-liste { list-style: none; padding: 0; display: grid; gap: 2px; }
.eintrag-knopf { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-3); width: 100%; padding: var(--s-2) var(--s-3); text-align: left; background: var(--if-paper); color: var(--if-ink); font-size: 14px; }
.eintrag-knopf:hover:not(:disabled) { background: var(--if-blue-hint); color: var(--if-ink); }
.eintrag-knopf[aria-current="true"] { background: var(--if-blue-hint); box-shadow: inset 4px 0 0 var(--if-blue); }
.eintrag-ampel { display: flex; align-items: center; gap: var(--s-2); font-size: 13px; color: var(--if-ink2); white-space: nowrap; }
.eintrag-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eintrag-status { font-weight: 600; color: var(--if-ink2); }
.eintrag-dauer { min-width: 4.5ch; text-align: right; font-variant-numeric: tabular-nums; color: var(--if-muted); }

.ampel-punkt { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--ampel-grau); flex: none; }
.ampel-punkt[data-ampel="gruen"] { background: var(--ampel-gruen); }
.ampel-punkt[data-ampel="gelb"] { background: var(--ampel-gelb); }
.ampel-punkt[data-ampel="rot"] { background: var(--ampel-rot); }
.ampel-punkt[data-ampel="grau"] { background: var(--ampel-grau); }

/* Entwurf */
.entwurf { animation: auftritt var(--if-dur-2) var(--ease-rise) both; }
.entwurf-kopf { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-3); }
.entwurf-nummer { font-size: 20px; font-weight: 700; color: var(--if-ink); }
.entwurf-status { padding: 2px var(--s-2); background: var(--if-blue-hint); color: var(--if-blue); font-weight: 600; font-size: 13px; }
.entwurf-dauer { font-size: 13px; color: var(--if-muted); font-variant-numeric: tabular-nums; }
.entwurf-ampel { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-2) 0 var(--s-3); font-size: 14px; }

.vorschau { padding: var(--s-4); background: var(--if-paper); overflow-wrap: anywhere; }
.vorschau > * + * { margin-top: var(--s-3); }
.vorschau h3 { font-size: 20px; color: var(--if-ink); }
.vorschau h4 { font-size: 16px; color: var(--if-blue); }
.tabellen-huelle { max-width: 100%; overflow-x: auto; }
.vorschau-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.vorschau-tabelle th, .vorschau-tabelle td { padding: var(--s-1) var(--s-2); vertical-align: top; text-align: left; overflow-wrap: normal; }
.vorschau-tabelle th { background: var(--if-blue-hint); color: var(--if-ink2); font-weight: 600; }
.vorschau-tabelle td { background: #FFFFFF; }
.vorschau-tabelle [data-ausrichtung="rechts"] { text-align: right; white-space: nowrap; }
.vorschau-tabelle [data-ausrichtung="mitte"] { text-align: center; }
.luecke { padding: var(--s-2) var(--s-3); background: var(--luecke-bg); color: var(--luecke-text); }
.luecke-marke { margin-right: var(--s-1); }

.betrag { min-height: 0; padding: 0 var(--s-1); background: var(--if-blue-hint); color: var(--if-blue); font-weight: inherit; }
.betrag:hover:not(:disabled) { background: var(--if-blue); color: #FFFFFF; }

.beleg { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--if-blue-hint); animation: auftritt var(--if-dur-2) var(--ease-rise) both; }
.beleg-kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); }
.beleg-titel { font-size: 15px; color: var(--if-blue); }
.beleg-zu { min-height: 32px; padding: 0 var(--s-3); background: #FFFFFF; color: var(--if-ink); }
.beleg-zu:hover:not(:disabled) { background: var(--if-blue); color: #FFFFFF; }
.beleg-label { margin-top: var(--s-2); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--if-muted); }
.beleg-preisliste { margin: var(--s-1) 0 0; padding-left: var(--s-4); }
.beleg-rechenweg { margin-top: var(--s-1); font-variant-numeric: tabular-nums; }

.knopf-zeile { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.meldung { margin-top: var(--s-2); min-height: 1.5em; }
.meldung[data-art="fehler"] { color: var(--fehler); }
.meldung[data-art="ok"] { color: var(--ampel-gruen); }

@keyframes auftritt { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .arbeit-raster { grid-template-columns: minmax(0, 1fr); }
  .zugang { grid-template-columns: minmax(0, 1fr); }
  .intro-titel { font-size: 22px; }
}
@media (max-width: 600px) {
  .seite { padding: var(--s-4) var(--s-3); }
  .vorschau { padding: var(--s-3) var(--s-2); }
  .vorschau-tabelle { font-size: 12px; }
  .vorschau-tabelle th, .vorschau-tabelle td { padding: 2px 3px; }
  .vorschau-tabelle .betrag { padding: 0 2px; }
  /* Annahme: Spalte 3 der Entwurfstabelle ist «Einheit» (Paketformat Bezeichnung, Menge, Einheit, Einzelpreis, Betrag) */
  .vorschau-tabelle th:nth-child(3), .vorschau-tabelle td:nth-child(3) { display: none; }
  .seiten-titel { font-size: 20px; }
  .arbeit-kopf { flex-direction: column; }
  .eintrag-knopf { grid-template-columns: 7em minmax(0, 1fr) auto; }
  .eintrag-dauer { grid-column: 2 / 4; text-align: left; }
  .knopf-zeile button { flex: 1 1 calc(50% - var(--s-2)); padding-inline: var(--s-2); }
}

/* Text- und Adminseiten */
.textseite .text, .admin { max-width: 1100px; margin: 0 auto; padding: var(--s-4) var(--s-5); }
.textseite .text { max-width: 720px; }
.textseite h2, .admin h2 { font-size: 16px; font-weight: 600; color: var(--if-blue); margin: var(--s-5) 0 var(--s-2); }
.textseite .text ul { padding-left: var(--s-5); }
.textseite .text li, .textseite .text p { margin-bottom: var(--s-2); }
.textseite .zugang { display: block; max-width: 480px; margin: var(--s-5) auto; padding: 0 var(--s-4); }
.admin-leiste { text-align: right; }
.neu-form { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: end; }
.neu-form label { display: grid; gap: var(--s-1); margin: 0; }
.tabelle { overflow-x: auto; }
.admin table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin th, .admin td { padding: var(--s-1) var(--s-2); text-align: left; vertical-align: top; }
.admin tbody tr:nth-child(even) td { background: var(--if-paper); }
.admin th { background: var(--if-blue-hint); }
.admin td button { min-height: 0; padding: 2px var(--s-2); font-size: 12px; }
.frage-eintrag { padding: var(--s-2) 0; background: none; }
.frage-eintrag summary { cursor: pointer; }
.stand { color: var(--if-muted); }

@media print {
  /* Nur die Offerte: Text, Tabelle, Total. Bedienelemente, Ampel, Belege und Lücken entfallen */
  .kopf h1, .arbeit-kopf, .anfrage, .entwurf-kopf, .entwurf-ampel, #entwurf-fehler, #beleg, label, #text-feld,
  .knopf-zeile, .meldung, .luecke, .hinweis-daten { display: none !important; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  body { background: #FFFFFF; font-size: 11pt; }
  .kopf { justify-content: flex-end; height: auto; padding: 0 0 12pt; }
  .logo { height: 28pt; }
  .seite { max-width: none; padding: 0; }
  .arbeit-raster { display: block; }
  .vorschau { padding: 0; background: #FFFFFF; }
  .vorschau h3 { color: var(--if-blue); }
  .vorschau-tabelle th { background: var(--if-blue); color: #FFFFFF; }
  .vorschau-tabelle tbody tr:nth-child(odd) td { background: var(--if-grau); }
  .vorschau-tabelle th, .vorschau-tabelle td { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .tabellen-huelle { overflow: visible; }
  .vorschau-tabelle tr { break-inside: avoid; }
  .betrag { background: none; color: inherit; padding: 0; min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}