:root {
  --ink: #2f3330;
  --muted: #676766;
  --line: #d7dad8;
  --soft: #ebecec;
  --paper: #ffffff;
  --green: #007943;
  --green-dark: #005d34;
  --green-pale: #e4f1ea;
  --blue-pale: #e7f0f5;
  --amber: #8b6214;
  --amber-pale: #fff5dc;
  --red: #9c3737;
  --red-pale: #fbeaea;
  --shadow: 0 10px 30px rgba(47, 51, 48, 0.07);
  --radius: 5px;
}

body {
  background: #f6f7f6;
  font-family: Arial, Helvetica, sans-serif;
}

body::before {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  height: 5px;
  background: var(--green);
  content: "";
}

.site-header {
  height: 96px;
  padding-top: 5px;
  border-bottom-color: #d5d8d6;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(14px);
}

.brand {
  min-width: 0;
  gap: 20px;
}

.brand-logo {
  display: block;
  width: 238px;
  height: 50px;
  object-fit: contain;
}

.brand-product {
  min-width: 98px;
  padding: 3px 0 3px 19px;
  border-left: 1px solid #c9cdca;
  line-height: 1;
}

.brand-product small {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brand-product strong {
  color: var(--green);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.09em;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.pilot-badge {
  padding: 6px 9px;
  border: 1px solid #b8cfbf;
  border-radius: 2px;
  color: var(--green);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

nav {
  gap: 6px;
}

nav a {
  padding: 9px 12px;
  border-bottom: 2px solid transparent;
  color: #4f5551;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

nav a:hover {
  border-bottom-color: var(--green);
  color: var(--green);
}

.page-shell {
  padding-top: 42px;
}

.hero {
  position: relative;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 34px;
  margin-bottom: 28px;
  padding: 34px 36px 32px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-left: 7px solid var(--green);
  border-radius: var(--radius);
  background: white;
}

.hero::after {
  position: absolute;
  top: -92px;
  right: -42px;
  width: 250px;
  height: 250px;
  border: 44px solid rgba(0, 121, 67, 0.045);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.eyebrow,
.step {
  color: var(--green);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

h1 {
  max-width: 760px;
  margin: 9px 0 14px;
  font: 800 clamp(34px, 4.1vw, 50px)/1.06 Arial, Helvetica, sans-serif;
  letter-spacing: -0.035em;
}

h2 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.hero p,
.simple-hero p,
.order-hero p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

.flow {
  position: relative;
  z-index: 1;
  justify-content: flex-start;
  align-content: flex-end;
  gap: 6px;
}

.flow span {
  padding: 8px 10px;
  border-color: #cdd3cf;
  border-radius: 2px;
  color: #4f5551;
  font-size: 10px;
  text-transform: uppercase;
}

.flow span:last-child {
  border-color: var(--green);
  background: var(--green);
  color: white;
}

.flow i {
  color: var(--green);
}

.workspace-grid,
.review-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.55fr);
  gap: 20px;
}

.card {
  padding: 28px;
  border-color: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.intake-card,
.line-card {
  position: relative;
}

.intake-card::before,
.line-card::before {
  position: absolute;
  inset: -1px -1px auto;
  height: 4px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--green);
  content: "";
}

.muted-card {
  background: var(--soft);
}

.card-heading {
  margin-bottom: 22px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--line);
}

.card-heading h2 {
  margin-left: 10px;
}

.channel-live {
  padding: 6px 9px;
  border: 1px solid #b8cfbf;
  border-radius: 2px;
  background: var(--green-pale);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

input,
textarea,
select {
  border-color: #c7ccc9;
  border-radius: 3px;
  background: white;
  font-size: 14px;
}

input,
select {
  height: 46px;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0, 121, 67, 0.12);
}

label {
  color: #464c48;
  font-size: 11px;
  letter-spacing: 0.015em;
}

.button {
  min-height: 46px;
  border-radius: 3px;
  font-size: 12px;
  letter-spacing: 0.035em;
}

.button-primary {
  background: var(--green);
}

.button-primary:hover {
  background: var(--green-dark);
}

.button-secondary {
  border-color: var(--green);
  color: var(--green);
}

.button-danger {
  border-radius: 3px;
}

.demo-picker {
  margin-top: 0;
}

.demo-picker-label {
  color: #4d534f;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-option {
  border-radius: 3px;
  background: #f5f6f5;
}

.demo-option strong {
  font-size: 11px;
}

.demo-option:hover,
.demo-option.active {
  border-color: var(--green);
  background: var(--green);
  color: white;
}

.demo-option.active small,
.demo-option:hover small {
  color: rgba(255, 255, 255, 0.8);
}

.privacy-note {
  border-left-color: var(--green);
  background: var(--green-pale);
  color: #355846;
}

.process-list li > span {
  border-radius: 2px;
  background: var(--green);
  color: white;
}

.future-channels span,
.future-channels a {
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.55);
}

.recent-section {
  margin-top: 48px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
}

.section-heading h2 {
  font-size: 24px;
}

.order-list {
  border-top-color: #cdd1ce;
}

/* Ein Eintrag ist die Zeile PLUS ihr Pruefergebnis: eine Flaeche, eine Verknuepfung, eine
   Hervorhebung. Trennlinie und Ueberfahren-Zustand gehoeren deshalb hierher.
   Erreicht wird das ueber die Flaeche unten (.order-row-main::after), nicht durch
   Verschachtelung: im Ergebnisblock steht im Fall "Fehlt in Acriba" ein Knopf, und eine
   Schaltfläche in einer Verknuepfung waere nicht bedienbar. */
.order-entry {
  position: relative;
  border-bottom: 1px solid var(--line);
  transition: background 0.15s ease;
}

.order-entry:hover {
  background: #f4f7f5;
}

/* Die Verknuepfung der Zeile deckt den GANZEN Eintrag ab - auch das Pruefergebnis darunter.
   Damit ist anklickbar, was sich hervorhebt; vorher lag die Anmerkung ausserhalb und die
   Hervorhebung versprach eine Flaeche, die nicht reagierte. */
.order-row-main::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Was selbst handelt, liegt darueber: das Loeschkreuz und die Knoepfe im Ergebnisblock.
   Ohne das verschluckt die Flaeche sie. */
.order-row .icon-button-danger,
.acriba-stand button,
.acriba-stand form {
  position: relative;
  z-index: 1;
}

/* KEINE Sonderbehandlung des Innenabstands, wenn eine Anmerkung folgt. Ein kleineres
   padding-bottom machte die Zeile unsymmetrisch (18px oben, 8px unten): der Inhalt sass damit
   fuenf Pixel ueber der Boxmitte, das Loeschkreuz aber genau auf ihr - Status und Kreuz
   standen nicht mehr auf einer Hoehe. Symmetrisch bleiben ist mehr wert als die enge
   Anordnung, und es spart die Abhaengigkeit von :has(). */

.order-row {
  /* Die Linie liegt jetzt am Eintrag; hier waere sie doppelt. */
  border-bottom: none;
  /* Der Loeschknopf ist ein Flex-Geschwister der Verknuepfung und sass bisher buendig an der
     rechten Kante. 8px sind dieselben, die .order-row-main weiter unten links setzt - damit
     steht die Zeile symmetrisch statt rechts angeschnitten. */
  padding-right: 8px;
}

/* Aus styles.css - die Hervorhebung liegt am Eintrag, nicht an der Zeile, sonst faerbte sich
   nur deren halbe Hoehe ein. */
.order-row:hover {
  background: transparent;
}

/* Das Pruefergebnis ist eine Anmerkung zu der Zeile darueber, kein eigener Eintrag: gleiche
   Fluchtlinie wie der Betreff, gedaempft, und dicht darunter.
   ACHTUNG bei der Zahl: .order-row-main bekommt in styles.css 4px, WIRD ABER weiter unten in
   dieser Datei auf `padding: 18px 8px` ueberschrieben. Maßgeblich sind die 8px - mit 4px stand
   die Anmerkung um vier Pixel links vom Betreff, sichtbar und falsch. */
.acriba-stand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  /* Kein negativer Aussenabstand mehr. Er zog den Block um 8px ueber die Zeile, und weil er
     im Markup DANACH kommt, lag er darueber - die unteren 8px der Verknuepfung waren nicht
     mehr anklickbar. Der Ueberfahren-Zustand kam trotzdem, weil der am Eintrag haengt: es sah
     aus wie eine klickbare Zeile, die nicht reagiert. Naeher heran gehoert die Anmerkung
     ueber weniger Innenabstand der Zeile, nicht ueber eine Ueberlappung. */
  padding: 0 8px 14px;
  font-size: 11px;
  color: var(--muted);
}

.acriba-stand strong {
  color: var(--red);
}

/* Bei einer Dublette stehen mehrere Belege untereinander - die Zeile wird zum Block.
   .acriba-stand ist ein Flex-Behaelter; ohne die volle Breite wuerde der Block auf seine
   Inhaltsbreite zusammengedrueckt und die Belege umbrechen mitten in der Nummer. */
.acriba-doppelt {
  flex: 1 1 100%;
}

.acriba-doppelt ul {
  margin: 5px 0 0;
  padding-left: 15px;
  list-style: disc;
}

.acriba-doppelt li {
  margin-top: 2px;
  /* Beleg links, Storno-Knopf rechts - der Knopf soll die Zeile nicht umbrechen. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* Ziffernfolgen untereinander lesen sich als Tabelle, nicht als Fliesstext - genau das
     braucht man, wenn man zwei Belegnummern vergleicht. */
  font-variant-numeric: tabular-nums;
}

/* Der Knopf sass als 32px-Kasten mit eckigen Ecken in einer gut 50px hohen Zeile: beim
   Ueberfahren erschien ein Rechteck, das mit nichts anderem in der Liste eine Kante teilte.
   Ein Kreis war der falsche Gegenentwurf - in dieser Oberflaeche ist nichts rund, die Knoepfe
   haben 8px, die Karten 20px. Also derselbe abgerundete Kasten wie die Knoepfe, nur klein.
   Das Kreuz ist ein SVG statt des Zeichens ×: das ist ein Mathe-Operator und sitzt auf der
   Mathe-Achse, also sichtbar ueber der Mitte - zentrieren laesst sich das nur erraten. Ein
   gezeichnetes Kreuz ist mittig, weil es so konstruiert ist. */
.order-row .icon-button-danger {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.order-row-main {
  padding: 18px 8px;
}

.order-row strong {
  color: #303532;
}

.row-arrow {
  font-size: 18px;
}

.status {
  border-radius: 2px;
  font-size: 9px;
  letter-spacing: 0.07em;
}

.status-ready_for_review,
.status-imported {
  background: var(--green);
  color: white;
}

.alert {
  border-radius: 3px;
}

.simple-hero,
.order-hero {
  padding: 30px 32px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--green);
  border-radius: var(--radius);
  background: white;
}

.simple-hero h1,
.order-hero h1 {
  margin-top: 8px;
}

.order-topline {
  margin-bottom: 18px;
}

.back-link {
  color: var(--green);
  font-weight: 700;
}

.order-hero {
  margin-bottom: 24px;
}

.order-hero h1 {
  font-size: clamp(30px, 4vw, 45px);
}

.import-ticket {
  border-radius: 3px;
  background: var(--green);
}

.import-ticket span,
.import-ticket strong,
.import-ticket small {
  color: white;
}

.source-card {
  background: var(--soft);
}

.mail-body {
  border-radius: 3px;
}

.confidence {
  border-radius: 2px;
  background: var(--green-pale);
  color: var(--green);
}

.line-number {
  color: var(--green);
  font: 800 16px/1 Arial, Helvetica, sans-serif;
}

.action-bar {
  border-radius: 3px;
}

.empty-state {
  border-radius: 3px;
  background: #f7f8f7;
}

footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  border-top: 4px solid var(--green);
  background: white;
}

footer img {
  width: 132px;
  height: 28px;
  object-fit: contain;
}

@media (max-width: 850px) {
  .site-header {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .brand-logo {
    width: 180px;
    height: 38px;
  }

  .brand-product {
    padding-left: 14px;
  }

  .brand-product strong {
    font-size: 16px;
  }

  .pilot-badge {
    display: none;
  }

  .hero,
  .workspace-grid,
  .review-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: 28px;
  }
}

@media (max-width: 620px) {
  body::before {
    height: 4px;
  }

  .site-header {
    align-items: flex-start;
    gap: 12px;
  }

  .brand {
    gap: 10px;
  }

  .brand-logo {
    width: 142px;
    height: 30px;
  }

  .brand-product {
    min-width: 0;
    padding-left: 10px;
  }

  .brand-product small {
    font-size: 7px;
  }

  .brand-product strong {
    font-size: 13px;
  }

  .header-actions {
    align-items: flex-end;
  }

  nav {
    gap: 2px;
  }

  nav a {
    padding: 7px 5px;
    font-size: 9px;
  }

  .page-shell {
    width: min(100% - 24px, 720px);
    padding-top: 24px;
  }

  .hero,
  .simple-hero,
  .order-hero {
    padding: 22px 20px;
  }

  h1 {
    font-size: 34px;
  }

  .recent-section {
    padding: 20px;
  }

  footer {
    flex-direction: column;
    gap: 8px;
  }
}