/* E-Rechnung (/e-rechnung und /e-rechnung/oeffnen). Handgepflegt.
   Das Markup im Werkzeug und die Skripte erzeugt build-e-rechnung.py aus Invoice Kit.
   Alles ist unter .ik gekapselt, damit die globalen Stile aus styles.css (h2, p, table,
   button) das Formular nicht verbiegen. Die CSP erlaubt keine style-Attribute: Was die
   Skripte früher inline gesetzt haben, steht hier als Klasse (ik-desc, ik-rate, ik-del, ik-seller,
   ik-format, ik-note). Die frühere accessibility.css von Invoice Kit wird nicht geladen, ihre
   nötigen Regeln (sr-only, field-error, table-scroll, Pro-Bereich) stehen unten unter .ik. */

.ik {
  --ik-bg: var(--surface, #1e1e20);
  --ik-panel: var(--panel, #26262a);
  --ik-line: var(--border, #2f2f34);
  --ik-text: var(--text, #f1f1f2);
  --ik-muted: var(--muted, #a8a8ad);
  --ik-accent: var(--primary, #25f4ee);
  --ik-soft: var(--primary-soft, #10312f);
  --ik-err: #ff6b81;
  --ik-warn: #fbbf24;
  --ik-ok: #4ade80;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 16px;
  color: var(--ik-text);
}
.ik *, .ik *::before, .ik *::after { box-sizing: border-box; }
.ik [hidden], .ik .hide { display: none !important; }
.ik .ik-title { margin: 0 0 6px; }
.ik .ik-links { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 16px; font-size: .95rem; }
.ik .ik-links a::after { content: " \2192"; }
.ik-privacy { font-size: .92rem; color: var(--muted); max-width: 85ch; margin: 0; }

.ik .ik-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 960px) { .ik .ik-grid { grid-template-columns: minmax(0, 1fr); } }

.ik .ik-card { background: var(--ik-bg); border: 1px solid var(--ik-line); border-radius: 14px; padding: 18px; }
.ik .ik-h, .ik .ik-form h3 { font-size: .78rem; margin: 22px 0 6px; color: var(--ik-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; line-height: 1.3; }
.ik .ik-form .ik-h:first-child { margin-top: 0; }
.ik label { display: block; font-size: .8rem; color: var(--ik-muted); margin-top: 8px; }
.ik input, .ik textarea, .ik select {
  width: 100%; padding: 9px 10px; border: 1px solid var(--ik-line); border-radius: 8px;
  font: inherit; font-size: 16px; /* unter 16px zoomt iOS beim Tippen in das Feld */
  background: var(--ik-panel); color: var(--ik-text); margin: 0; min-height: 42px;
}
.ik input:focus-visible, .ik textarea:focus-visible, .ik select:focus-visible { outline: 2px solid var(--ik-accent); outline-offset: 0; border-color: transparent; }
.ik input::placeholder, .ik textarea::placeholder { color: #8a8a92; }
.ik input[type=date] { color-scheme: dark; }
.ik .missing { border-color: var(--ik-err) !important; background: #3a1d24 !important; }
.ik textarea { min-height: 64px; resize: vertical; }
.ik .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ik .row3 { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 10px; }
@media (max-width: 420px) {
  .ik .row { grid-template-columns: 1fr; gap: 0; }
  .ik .row3 { grid-template-columns: 1fr 1fr; gap: 0 10px; }
  .ik .row3 > :nth-child(2) { order: -1; grid-column: 1 / -1; }
}
.ik .mt { margin-top: 8px; }
.ik .hint { font-size: .8rem; color: var(--ik-muted); margin: 4px 0 0; }
.ik .check { display: flex; gap: 8px; align-items: flex-start; font-size: .88rem; color: var(--ik-text); margin-top: 12px; }
.ik .check input { width: auto; min-height: 0; margin-top: 3px; accent-color: var(--ik-accent); }
.ik details { margin-top: 12px; border: 1px dashed var(--ik-line); border-radius: 8px; padding: 8px 10px; }
.ik summary { cursor: pointer; font-size: .88rem; color: var(--ik-accent); font-weight: 600; }

/* Positionen: auf breiten Bildschirmen eine Tabelle, schmal je Position ein Block. */
.ik table.items { width: 100%; border-collapse: collapse; margin: 0; }
.ik table.items th { font-size: .78rem; color: var(--ik-muted); text-align: left; font-weight: 500; padding: 2px 3px; border: 0; background: none; }
.ik table.items td { padding: 3px; border: 0; vertical-align: top; }
.ik table.items .ik-desc { width: 36%; }
.ik table.items input, .ik table.items select { padding: 7px; }
.ik table.items select { min-width: 80px; }
.ik .ik-rate { width: 76px; }
@media (max-width: 560px) {
  .ik table.items thead { display: none; }
  .ik table.items, .ik table.items tbody { display: block; }
  .ik table.items tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 10px 0; border-bottom: 1px solid var(--ik-line); }
  .ik table.items td { display: block; padding: 0; }
  .ik table.items td::before { content: attr(data-label); display: block; font-size: .75rem; color: var(--ik-muted); margin-bottom: 2px; }
  .ik table.items .ik-desc { grid-column: 1 / -1; width: auto; }
  .ik table.items .ik-del { grid-column: 1 / -1; text-align: right; }
  .ik table.items .ik-del::before { content: none; }
  .ik .ik-rate { width: 100%; }
}

.ik button { cursor: pointer; border: 0; border-radius: 8px; padding: 10px 14px; font: inherit; font-weight: 700; font-size: .9rem; min-height: 42px; }
.ik .primary { background: var(--ik-accent); color: #062523; }
.ik .primary:hover { filter: brightness(1.08); }
.ik .ghost { background: var(--ik-soft); color: var(--ik-accent); border: 1px solid var(--primary-line, #1d5a57); }
.ik .del { background: none; color: var(--ik-err); padding: 4px 10px; min-height: 36px; }
.ik #add { margin-top: 8px; }
.ik button:focus-visible { outline: 2px solid var(--ik-accent); outline-offset: 2px; }
.ik .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.ik #msg { margin-top: 12px; font-size: .88rem; white-space: pre-line; }
.ik #msg.ok { color: var(--ik-ok); }
.ik #msg.err { color: var(--ik-err); }
.ik #warn { margin-top: 8px; font-size: .88rem; color: var(--ik-warn); white-space: pre-line; }

/* Anzeige zu Auslandszahlungen im Formular: dieselbe Kennzeichnung wie .ad-box überall. */
.ik .ik-ad { margin: 14px 0 4px; padding: 14px 16px; }
.ik .ik-ad p { font-size: .88rem; margin: 0 0 6px; color: var(--ik-text); line-height: 1.55; }
.ik .ik-ad .btn-accent { margin-top: 6px; }

/* Speicherwahl, Pro-Bereich und Fehlermeldungen am Feld (Invoice Kit ab 27.09.2026). */
.ik .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ik .field-error { display: block; color: #ff8fa0; font-size: .8rem; margin: 4px 0; white-space: normal; }
.ik .table-scroll { overflow-x: auto; }
.ik #clearData { margin-top: 10px; text-align: left; max-width: 100%; }
.ik #storageStatus:empty, .ik #proCodeError:empty, .ik #proStatus:empty { display: none; }
.ik #proCodeError { color: #ff8fa0; }
.ik #proPanel { margin: 16px 0 4px; }
.ik #proPanel p { font-size: .88rem; margin: 8px 0 0; overflow-wrap: anywhere; }
.ik #proPanel button { margin-top: 8px; max-width: 100%; }
.ik #proPanel .actions button { margin-top: 0; }
.ik #proPanel a { color: var(--ik-accent); }
/* Aktives Pro: Hinweis oben im Formular (pro-app.js blendet ihn ein), Farbe wie bei Invoice Kit.
   .ik-pro-badge ist die Wambur-Ergänzung, .pro-badge/#proPanel.active die Fassung aus Invoice Kit. */
.ik .ik-pro-badge, .ik .pro-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 6px 14px; border-radius: 999px; background: #f59e0b; color: #1c2230; font-weight: 700; font-size: .85rem; line-height: 1.3; text-decoration: none; max-width: 100%; overflow-wrap: anywhere; }
.ik .ik-pro-badge::before, .ik .pro-badge::before { content: "\2713"; }
.ik .ik-pro-badge:hover, .ik .pro-badge:hover { filter: brightness(1.08); }
.ik .ik-pro-badge:focus-visible, .ik .pro-badge:focus-visible { outline: 2px solid var(--ik-accent); outline-offset: 2px; }
.ik .ik-pro-aktiv #proPanel, .ik #proPanel.active { border-color: #f59e0b; border-style: solid; }
/* Der verborgene Hinweis steht vor der ersten Überschrift, die sonst ihren Abstand nach oben bekäme. */
.ik .ik-form .ik-pro-badge + .ik-h, .ik .ik-form .pro-badge + .ik-h { margin-top: 0; }
/* Lizenzstatus im Pro-Bereich (Invoice Kit ab 7385516): Bei aktiver Lizenz ersetzt ein grünes Feld das Codefeld. */
.ik #proPanel .pro-state { font-size: .92rem; margin: 10px 0 0; }
.ik #proPanel .pro-state.active { padding: 10px 14px; border-radius: 8px; background: rgba(74, 222, 128, .12); border: 1px solid var(--ik-ok); }
.ik #proPanel .pro-state.active strong { color: var(--ik-ok); }
.ik #proPanel .pro-state.active strong::before { content: "\2713"; margin-right: .3em; }
/* Seit Invoice Kit b1760bc ist .pro-state ein Rahmen um Statusabsatz und Haken „Lizenz merken“. */
.ik #proPanel .pro-state p { margin: 0; font-size: inherit; }
.ik #proPanel .pro-state .check { margin-top: 8px; }
.ik input[type=file] { padding: 7px; min-height: 0; }
.ik .ik-intro { margin: 0 0 12px; }

/* Rechnungsvorschau bleibt weißes Papier, auch im dunklen Seitenlayout. */
.ik #preview { background: #fff; color: #111; padding: 40px; min-height: 800px; border-radius: 14px; font-size: 13px; line-height: 1.5; box-shadow: var(--shadow, 0 14px 34px rgba(0, 0, 0, .55)); overflow-x: auto; }
@media (max-width: 640px) { .ik #preview { padding: 20px; min-height: 0; } }
/* Breit: Die Vorschau läuft neben dem langen Formular mit. Die Höhe ist begrenzt, damit
   auch mehrseitige Rechnungen erreichbar bleiben; sie scrollen dann in sich. */
@media (min-width: 961px) {
  .ik #preview { position: sticky; top: 96px; min-height: 0; max-height: calc(100vh - 116px); overflow: auto; }
}
.ik #preview * { color: inherit; }
.ik #preview h1 { font-size: 26px; margin: 0 0 4px; color: #111; line-height: 1.2; }
.ik #preview p { margin: 10px 0; max-width: none; }
.ik #preview .top { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.ik #preview .ik-seller { text-align: right; }
@media (max-width: 480px) { .ik #preview .top { flex-direction: column-reverse; } .ik #preview .ik-seller { text-align: left; } }
.ik #preview table { width: 100%; border-collapse: collapse; margin: 20px 0; background: #fff; }
.ik #preview th { text-align: left; border: 0; border-bottom: 2px solid #111; padding: 6px 4px; background: #fff; color: #111; }
.ik #preview td { border: 0; border-bottom: 1px solid #ddd; padding: 6px 4px; vertical-align: top; background: #fff; }
.ik #preview .r { text-align: right; white-space: nowrap; }
.ik #preview .tot { width: 320px; max-width: 100%; margin-left: auto; }
.ik #preview .tot div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.ik #preview .tot .big { font-weight: 700; font-size: 16px; border-top: 2px solid #111; margin-top: 4px; padding-top: 6px; }
.ik #preview .legal { margin-top: 18px; font-weight: 600; }
.ik #preview .payrow { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.ik #preview figure.qr { margin: 0; text-align: center; font-size: 10px; color: #555; width: 120px; flex: none; }
.ik #preview .foot { margin-top: 40px; font-size: 11px; color: #555; white-space: pre-line; border-top: 1px solid #ddd; padding-top: 8px; }
.ik .pre { white-space: pre-line; }

/* Viewer */
.ik #drop { border: 2px dashed var(--primary-line, #1d5a57); background: var(--ik-soft); text-align: center; padding: 36px 16px; cursor: pointer; border-radius: 14px; }
.ik #drop:focus-visible { outline: 2px solid var(--ik-accent); outline-offset: 3px; }
.ik #drop.over { border-color: var(--ik-accent); }
.ik #drop strong { font-size: 1.15rem; display: block; margin-bottom: 6px; color: var(--head, #fff); }
.ik #drop p { margin: 0; color: var(--ik-muted); }
.ik #status { font-size: .92rem; margin: 12px 0; white-space: pre-line; }
.ik #status.err { color: var(--ik-err); }
.ik .checks { list-style: none; padding: 0; margin: 0; font-size: .92rem; }
.ik .checks li { padding: 6px 0; border-bottom: 1px solid var(--ik-line); margin: 0; }
.ik .checks li::before { display: inline-block; width: 22px; font-weight: 700; }
.ik .checks .ok::before { content: "\2713"; color: var(--ik-ok); }
.ik .checks .bad::before { content: "\2717"; color: var(--ik-err); }
.ik .checks .hint::before { content: "!"; color: var(--ik-warn); }
.ik #checkCard { margin-bottom: 16px; }
.ik #checkCard h3 { margin: 0 0 8px; font-size: 1rem; }
.ik #checkCard a { color: var(--ik-accent); }
.ik .ik-note { font-size: .8rem; color: var(--ik-muted); margin: 8px 0 0; }
.ik #result .actions { margin: 0 0 16px; }
.ik #inv { background: #fff; color: #111; padding: 36px; border-radius: 14px; font-size: 13px; line-height: 1.5; }
@media (max-width: 640px) { .ik #inv { padding: 18px; } .ik #inv .parties { grid-template-columns: 1fr; } }
.ik #inv * { color: inherit; }
.ik #inv h1 { font-size: 24px; margin: 0 0 4px; color: #111; }
.ik #inv h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #666; margin: 0 0 4px; }
.ik #inv p { margin: 10px 0; max-width: none; }
.ik #inv .top { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.ik #inv .ik-format { text-align: right; font-size: 12px; }
.ik #inv .parties { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 10px; }
.ik #inv table { width: 100%; border-collapse: collapse; margin: 16px 0; background: #fff; }
.ik #inv th { text-align: left; border: 0; border-bottom: 2px solid #111; padding: 6px 4px; background: #fff; color: #111; }
.ik #inv td { border: 0; border-bottom: 1px solid #ddd; padding: 6px 4px; vertical-align: top; background: #fff; }
.ik #inv .r { text-align: right; white-space: nowrap; }
.ik #inv .tot { width: 320px; max-width: 100%; margin-left: auto; }
.ik #inv .tot div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.ik #inv .tot .big { font-weight: 700; font-size: 16px; border-top: 2px solid #111; margin-top: 4px; padding-top: 6px; }
.ik #inv .muted { color: #555; }
.ik .table-wrap { overflow-x: auto; margin: 0; }

/* Drucken: nur die Rechnung, ohne Seitenrahmen, Formular und Hinweise. */
@media print {
  body > *:not(main), main > section:not(.ik-section),
  .ik .ik-title, .ik .ik-links, .ik .ik-intro, .ik .ik-form, .ik #drop, .ik .actions, .ik #status, .ik #checkCard { display: none !important; }
  body, main, .section { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  .ik { padding: 0; max-width: none; }
  .ik .ik-grid { display: block; }
  .ik #preview, .ik #inv { box-shadow: none; border-radius: 0; padding: 0; min-height: 0; position: static; max-height: none; overflow: visible; }
}