/* Helikon Angebote — UI-Stil (dokumentarisch-technisch, Helikon-Design-System).
   Papier/Ink/Cherry, Inter Tight (Headlines) + Inter (Text) + IBM Plex Mono (Labels).
   Fonts self-hosted unter /assets/fonts/ (CSP default-src 'self' — kein data:). */

@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family:'Inter Tight'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/inter-tight-500.woff2') format('woff2'); }
@font-face { font-family:'Inter Tight'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/inter-tight-700.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2'); }

:root {
  --paper:#F7F5F2; --paper-pure:#FFFFFF; --panel:#EFEBE4;
  --ink:#111111; --line:#E6E3DF; --line-strong:#D6D1C9; --muted:#6B6B6B;
  --accent:#C8102E; --accent-deep:#A60C24;
  --font-display:'Inter Tight','Inter',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --radius:3px;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:15px; line-height:1.55;
  font-feature-settings:"kern" 1,"liga" 1; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color:var(--ink); text-decoration:none; border-bottom:1px solid var(--accent); padding-bottom:1px; }
a:hover { color:var(--accent-deep); border-bottom-color:var(--accent-deep); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
::selection { background:var(--ink); color:var(--paper); }

/* Metazeile / Versallabel (Signatur des Systems) */
.meta, label.f > span, .pos label.inline > span, .kicker {
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.12em;
  font-size:11px; font-weight:500; color:var(--muted);
}

/* ── Kopfzeile / Navigation ─────────────────────────────────────────────── */
.nav {
  display:flex; align-items:center; gap:.15rem 1.4rem; flex-wrap:wrap;
  padding:.75rem clamp(1rem,4vw,2.5rem); background:var(--paper-pure);
  border-bottom:2px solid var(--ink); position:sticky; top:0; z-index:10;
}
.nav .brand { border:0; margin-right:.8rem; display:inline-flex; align-items:center; padding:0; }
.nav .brand:hover { border:0; }
.nav .brand-logo { height:24px; width:auto; display:block; }
.nav a {
  border:0; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.09em;
  font-size:12px; color:var(--muted); padding:.2rem 0; position:relative;
}
.nav a:hover { color:var(--ink); }
.nav a.active { color:var(--ink); }
.nav a.active::after { content:""; position:absolute; left:0; right:0; bottom:-.35rem; height:2px; background:var(--accent); }
.nav .nav-konto { margin-left:auto; }
.nav-logout { margin:0; }
.nav-logout button { background:transparent; border:1px solid var(--line-strong); color:var(--muted); padding:.28rem .7rem; font-size:11px; text-transform:uppercase; letter-spacing:.09em; }
.nav-logout button:hover { border-color:var(--ink); color:var(--ink); }

/* ── Seiten-Container ───────────────────────────────────────────────────── */
.page { max-width:1080px; margin:0 auto; padding:clamp(1.5rem,4vw,2.75rem) clamp(1rem,4vw,2.5rem) 5rem; }
h1 { font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; font-size:clamp(1.7rem,3.4vw,2.3rem); line-height:1.05; margin:0 0 1.4rem; }
h1 small { font-family:var(--font-mono); font-weight:400; font-size:.5em; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; vertical-align:middle; }
h2 { font-family:var(--font-display); font-weight:700; letter-spacing:-.01em; font-size:1.15rem; margin:2.4rem 0 .9rem; padding-top:.9rem; border-top:1px solid var(--line); }
h3 { font-family:var(--font-display); font-weight:700; font-size:1rem; margin:1.2rem 0 .5rem; }

/* ── Formulare ──────────────────────────────────────────────────────────── */
form { margin:0 0 1rem; }
label.f { display:flex; flex-direction:column; gap:.3rem; margin:0 0 1rem; max-width:34rem; }
label.f > span { color:var(--muted); }
input, select, textarea {
  font-family:var(--font-body); font-size:14px; color:var(--ink); background:var(--paper-pure);
  border:1px solid var(--line-strong); border-radius:var(--radius); padding:.5rem .6rem; width:100%;
  transition:border-color .12s ease, box-shadow .12s ease;
}
input[type="date"] { width:auto; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(200,16,46,.12); }
textarea { min-height:4.5rem; resize:vertical; line-height:1.5; }
input::placeholder, textarea::placeholder { color:#a8a29a; }

/* Buttons */
button, .btn {
  font-family:var(--font-mono); font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.08em;
  background:var(--ink); color:var(--paper); border:1px solid var(--ink); border-radius:var(--radius);
  padding:.5rem .95rem; cursor:pointer; display:inline-block; line-height:1.2; transition:background .12s ease, color .12s ease;
}
button:hover, .btn:hover { background:var(--accent-deep); border-color:var(--accent-deep); color:#fff; }
button:disabled { background:var(--panel); border-color:var(--line-strong); color:var(--muted); cursor:not-allowed; }
/* sekundäre Buttons (kleine Aktionen: Löschen, ↑↓, Phase/Position) */
.pos button, [data-phasen-ui] button, form[action$="/duplizieren"] button,
form[action*="/status"] button, form[action*="/loeschen"] button, form[action*="/logo"] button, button.link {
  background:var(--paper-pure); color:var(--ink); border:1px solid var(--line-strong);
}
.pos button:hover, [data-phasen-ui] button:hover, form[action$="/duplizieren"] button:hover,
form[action*="/status"] button:hover, form[action*="/loeschen"] button:hover, form[action*="/logo"] button:hover, button.link:hover {
  background:var(--panel); color:var(--accent-deep); border-color:var(--ink);
}
.link { border:0; background:none; color:var(--accent-deep); font:inherit; text-transform:none; letter-spacing:0; padding:0; cursor:pointer; text-decoration:underline; }

/* ── Panels / Fieldsets (Phasen, Upload, Schnellanlage) ─────────────────── */
fieldset { border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem 1.1rem; margin:0 0 1rem; background:var(--paper-pure); }
legend { padding:0 .5rem; }
fieldset > legend { font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.1em; font-size:11px; color:var(--muted); }
[data-phasen-ui] fieldset { background:var(--panel); border-color:var(--line-strong); }
[data-phasen-ui] > button { margin-top:.3rem; }

/* Positionszeile: tabellenartig mit Mono-Spaltenlabels */
.pos {
  display:flex; gap:.6rem .8rem; align-items:flex-end; flex-wrap:wrap;
  margin:.5rem 0; padding:.7rem .8rem; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--paper-pure);
}
.pos > input[type="text"]:first-child { flex:1 1 12rem; min-width:10rem; }
.pos label.inline { display:flex; flex-direction:column; gap:.25rem; margin:0; }
.pos label.inline input { width:6.5rem; }
.pos label.inline > span { color:var(--muted); }
.pos select { width:auto; }

/* Live-Summen */
.summen {
  font-family:var(--font-mono); font-size:13px; font-weight:500; letter-spacing:.02em;
  background:var(--ink); color:var(--paper); display:inline-block; padding:.6rem .9rem; border-radius:var(--radius); margin:.6rem 0;
}

/* ── Tabellen (Angebote-/Kundenliste) ──────────────────────────────────── */
.page > table { width:100%; border-collapse:collapse; margin:.5rem 0 1.5rem; background:var(--paper-pure); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.page > table thead th {
  text-align:left; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.1em; font-size:11px; font-weight:500; color:var(--muted);
  padding:.6rem .8rem; border-bottom:1px solid var(--ink); background:var(--panel);
}
.page > table td { padding:.6rem .8rem; border-bottom:1px solid var(--line); font-size:14px; }
.page > table tbody tr:last-child td { border-bottom:0; }
.page > table tbody tr:hover { background:var(--panel); }

/* Karten (Absenderliste) */
ul.cards { list-style:none; padding:0; margin:0; display:grid; gap:.8rem; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
ul.cards li { background:var(--paper-pure); border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem; display:flex; flex-direction:column; gap:.5rem; }
ul.cards li a { border:0; font-family:var(--font-display); font-weight:700; }

/* generische Listen (Dashboard, Verfügbare Leistungen) */
.page ul:not(.cards) { padding-left:1.1rem; margin:.4rem 0 1rem; }
.page ul:not(.cards) li { margin:.15rem 0; }

/* ── Status-/Hinweis-Bausteine ─────────────────────────────────────────── */
.warn, .ok, .error, .muted { font-size:13px; }
.warn { background:#fdf0e2; border-left:3px solid #d98324; padding:.55rem .8rem; border-radius:var(--radius); margin:.5rem 0; }
.ok { background:#e7f4ec; border-left:3px solid var(--accent); padding:.55rem .8rem; border-radius:var(--radius); margin:.5rem 0; }
.error { background:#fbeaec; color:#7a0c1c; border-left:3px solid var(--accent); padding:.55rem .8rem; border-radius:var(--radius); margin:0 0 1rem; }
.muted { color:var(--muted); }
details { margin:.5rem 0 1rem; }
summary { cursor:pointer; font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
summary:hover { color:var(--ink); }

/* Statuswechsel: aktueller Zustand als Text, Übergänge als Aktions-Buttons */
.statuszeile { margin:.2rem 0 .8rem; }
.statuszeile strong { font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em; font-size:.9em; }
.status-aktionen { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; }
.status-aktionen form { margin:0; }
/* folgenreiche Bestätigung (Einfrieren) als Primäraktion — schlägt den Sekundär-Override */
.status-aktionen button.primary { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.status-aktionen button.primary:hover { background:var(--accent-deep); border-color:var(--accent-deep); color:#fff; }

/* Absender-Marke beim Arbeiten (Editor-Chip + Neu-Maske-Vorschau) */
.absender-chip { display:flex; align-items:center; gap:.7rem; margin:0 0 1.2rem; padding:.5rem .8rem; background:var(--paper-pure); border:1px solid var(--line); border-radius:var(--radius); width:max-content; max-width:100%; }
.absender-chip .meta { border-right:1px solid var(--line-strong); padding-right:.7rem; }
.absender-logo { max-height:34px; max-width:150px; width:auto; display:block; }

/* Absender-Auswahl im neuen Angebot: Karten mit Logo+Name, gewählte mit Cherry-Rahmen */
.absender-wahl { border:0; background:none; padding:0; margin:0 0 1.2rem; }
.absender-karten { display:flex; flex-wrap:wrap; gap:.8rem; }
.absender-karte { cursor:pointer; margin:0; }
.absender-karte input { position:absolute; opacity:0; width:0; height:0; }
.absender-karte .karte-inner { display:flex; flex-direction:column; align-items:flex-start; gap:.6rem;
  min-width:190px; padding:1rem 1.1rem; background:var(--paper-pure); border:2px solid var(--line-strong);
  border-radius:var(--radius); transition:border-color .12s ease, box-shadow .12s ease; }
.absender-karte:hover .karte-inner { border-color:var(--muted); }
.absender-karte input:checked + .karte-inner { border-color:var(--accent); box-shadow:0 0 0 3px rgba(200,16,46,.10); }
.absender-karte input:focus-visible + .karte-inner { outline:2px solid var(--accent); outline-offset:2px; }
.karte-logo { max-height:36px; max-width:160px; width:auto; display:block; }
.karte-logo-leer { height:36px; }
.karte-name { font-family:var(--font-display); font-weight:700; font-size:1rem; }

/* Aktionen in der Absenderliste (Deaktivieren/Löschen) */
.card-aktionen { display:flex; gap:.8rem; align-items:center; margin-top:.3rem; }
.card-aktionen form { margin:0; }

/* Logo-Upload in der Absender-Maske */
.logo-upload { max-width:34rem; }
.logo-preview { max-width:220px; max-height:80px; background:var(--paper-pure); border:1px solid var(--line); border-radius:var(--radius); padding:.5rem; }

/* ── Login ─────────────────────────────────────────────────────────────── */
.login { max-width:340px; margin:14vh auto; padding:2.2rem 2rem; background:var(--paper-pure); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 1px 0 var(--line-strong); }
.login-brand { text-align:center; margin:0 0 1.8rem; }
.login-logo { display:block; width:168px; height:auto; margin:0 auto; }
.login label { display:block; margin:0 0 .3rem; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.1em; font-size:11px; color:var(--muted); }
.login input { margin:0 0 1.1rem; }
.login button { width:100%; padding:.7rem; }