/* Handwerk-Demo "Ein Auftrag bei Haustechnik Berger" (W09-F4).
   Struktur, Namen und Skalen: WEB_STYLEGUIDE 1.1 (Kanon fuer Demos und Kundenseiten), Stand 2026-10-11.
   Werte: Haut des erfundenen Musterbetriebs, Herkunft je Wert in demos/handwerk/README.md ("Woher"). */
:root {
  /* Schrift: Systemschrift, wie Postfach und PDF-Ansicht am Buero-PC (Woher: Arbeitsplatz Buero). */
  --font-text: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;  /* impeccable-disable-line overused-font -- Systemschrift ist Absicht: so sieht die Buerokraft ihre Mails */
  --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;

  --type-micro:           .6875rem;
  --type-meta:            .75rem;
  --type-label:           .8125rem;
  --type-body:            .9375rem;
  --type-control:         1rem;
  --type-subheading:      1.125rem;
  --type-section-heading: 1.375rem;
  --type-page-heading:    clamp(2rem, 3vw, 2.5rem);

  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radien knapp wie in Mailprogramm und Formular (Woher: Bueroprogramm, kein Werbeauftritt). */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-pill: 999px;

  --shadow-card:  0 1px 2px rgba(20, 35, 50, .06), 0 8px 24px rgba(20, 35, 50, .06);

  --control-height: 44px;

  /* Farben: Akzent = Hausfarbe der PDF-Vorlage (scripts/pp_pdf_common.py ACCENT #1F3B57),
     damit Seite und PDF aus einem Haus kommen. Flaechen kuehl-grau wie ein Postfach. */
  --page:            #f3f5f7;
  --surface:         #ffffff;
  --surface-subtle:  #eef1f4;
  --line:            #d5dbe1;
  --line-soft:       #e6eaee;
  --ink:             #1b2430;  /* 15,4:1 auf --page */
  --muted:           #535e6a;  /* 6,0:1 auf --page */
  --accent:          #1f3b57;  /* 10,9:1 auf --surface */
  --accent-strong:   #152a3f;
  --accent-soft:     #e2e9f0;
  --paper:           #fffdf6;  /* Auftragszettel */
  --focus-ring:      0 0 0 3px rgba(31, 59, 87, .28);

  --status-ok-bg:  #dcece2;
  --status-ok-ink: #2c6548;   /* 5,8:1 auf --status-ok-bg */
}

/* Demo-Leiste, Kern (alle Demos). Quelle: WEB_STYLEGUIDE 3.10, Version 1.4, Stand 2026-10-11.
   Nicht nachbauen, mit dieser Herkunftszeile kopieren (WSG-128). Farben = ProzessPilot
   --primary oklch(0.32 0.05 60) und --primary-foreground oklch(0.98 0.005 80) als Hex. */
:root {
  --demo-leiste-bg:  #452c17;
  --demo-leiste-ink: #faf8f5;
}
.demo-leiste {
  background: var(--demo-leiste-bg);
  color: var(--demo-leiste-ink);
  font: 400 var(--type-label) / 1.2 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0;
  text-align: left;
}
/* Breite wie die Kopfzeile von prozesspilot.app: 72rem, Rand 16 px, ab 640 px 24 px, ab 1024 px 32 px.
   Die Stufen kommen ohne Media-Query aus clamp(), damit die Leiste in jedem Projekt dieselben Werte hat. */
.demo-leiste__inhalt {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-4);
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: calc(var(--space-4)
    + clamp(0px, (100vw - 639px) * 1000, var(--space-2))
    + clamp(0px, (100vw - 1023px) * 1000, var(--space-2)));
}
.demo-leiste a { color: inherit; text-decoration: none; }
.demo-leiste a:hover { text-decoration: underline; text-underline-offset: 4px; }
.demo-leiste a:focus-visible { outline: 3px solid var(--demo-leiste-ink); outline-offset: -3px; }
.demo-leiste__zurueck {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  font-weight: 600;
  white-space: nowrap;
}
.demo-leiste__hinweis {
  justify-self: end;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  line-height: var(--control-height);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.demo-leiste__kurz { display: none; }

/* --- Grundlagen ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 var(--type-control) / 1.55 var(--font-text);
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* Gleiche Breite wie Demo-Leiste und Markenseite. */
.breite {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: calc(var(--space-4)
    + clamp(0px, (100vw - 639px) * 1000, var(--space-2))
    + clamp(0px, (100vw - 1023px) * 1000, var(--space-2)));
}

/* --- Kopf des Musterbetriebs ----------------------------------------- */
.kopf { background: var(--surface); border-bottom: 1px solid var(--line); }
.kopf__inhalt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
}
.marke { display: grid; line-height: 1.2; }
.marke__name { font-size: var(--type-subheading); font-weight: 700; color: var(--accent); }
.marke__zusatz { font-size: var(--type-label); color: var(--muted); }
.kopf__bereich { font-size: var(--type-label); color: var(--muted); }

/* --- Einstieg -------------------------------------------------------- */
.einstieg { padding-block: var(--space-7) var(--space-6); }
.einstieg h1 {
  max-width: 22ch;
  font-size: var(--type-page-heading);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.einstieg__text {
  max-width: 60ch;
  margin-top: var(--space-4);
  font-size: var(--type-subheading);
  color: var(--muted);
  text-wrap: pretty;
}

/* --- Station: Vorher links, Nachher rechts --------------------------- */
.station { padding-block: var(--space-6) var(--space-7); border-top: 1px solid var(--line); }
.station h2 { font-size: var(--type-section-heading); line-height: 1.25; }
.station__wann { margin-top: var(--space-1); font-size: var(--type-label); color: var(--muted); }
.paar {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.paar__seite { display: grid; align-content: start; gap: var(--space-3); min-width: 0; }
.etikett { font-size: var(--type-label); font-weight: 600; color: var(--muted); }
.paar__pfeil { display: flex; justify-content: center; color: var(--muted); }
.paar__pfeil svg { width: 28px; height: 28px; transform: rotate(90deg); }

/* --- Mail ------------------------------------------------------------ */
.mail {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.mail__kopf {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-subtle);
  font-size: var(--type-label);
}
.mail__kopf div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-2); }
.mail__kopf dt { color: var(--muted); }
.mail__kopf dd { min-width: 0; overflow-wrap: anywhere; }
.mail__betreff { font-weight: 600; }
.mail__text { display: grid; gap: var(--space-3); padding: var(--space-4); font-size: var(--type-body); }
.mail__anhang { display: grid; gap: var(--space-2); }
.pdf {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
}
.pdf img { width: 100%; }
.pdf:hover { border-color: var(--accent); }
.mail__datei { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: var(--type-label); }
.mail__datei-name { font-family: var(--font-mono); color: var(--muted); overflow-wrap: anywhere; }
.mail__datei a { display: inline-flex; align-items: center; min-height: var(--control-height); font-weight: 600; }

/* --- Freigabe -------------------------------------------------------- */
.freigabe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-4);
}
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  padding: 0 var(--space-5);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #ffffff;
  font: 600 var(--type-control) / 1 var(--font-text);
  text-decoration: none;
  cursor: pointer;
}
.knopf:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.knopf[disabled] { cursor: default; background: var(--surface-subtle); border-color: var(--line); color: var(--muted); }
.knopf--ruhig { background: var(--surface); color: var(--accent); }
.knopf--ruhig:hover { background: var(--accent-soft); border-color: var(--accent); }
.freigabe__status:empty { display: none; }
.freigabe__status {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--status-ok-bg);
  color: var(--status-ok-ink);
  font-size: var(--type-label);
  font-weight: 600;
}

/* --- Auftragszettel -------------------------------------------------- */
.zettel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  font-size: var(--type-body);
}
.zettel__kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--ink);
}
.zettel__titel { font-weight: 700; }
.zettel__nr { font-family: var(--font-mono); color: var(--muted); }
.zettel__felder { display: grid; margin-top: var(--space-2); }
.zettel__felder div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--space-2);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--line-soft);
}
.zettel__felder dt { color: var(--muted); font-size: var(--type-label); padding-top: 2px; }
.zettel table { width: 100%; margin-top: var(--space-4); border-collapse: collapse; font-size: var(--type-body); }
.zettel caption { text-align: left; font-size: var(--type-label); color: var(--muted); padding-bottom: var(--space-1); }
.zettel th, .zettel td { padding: var(--space-2) 0; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.zettel th { font-size: var(--type-label); font-weight: 600; color: var(--muted); }
.zettel .zahl { width: 4.5rem; text-align: right; padding-right: var(--space-3); font-variant-numeric: tabular-nums; }
.zettel__notiz { margin-top: var(--space-4); }
.zettel__notiz span { display: block; font-size: var(--type-label); color: var(--muted); }

/* --- Schluss und Fuss ------------------------------------------------ */
.schluss { padding-block: var(--space-6) var(--space-8); border-top: 1px solid var(--line); }
.schluss__inhalt { display: grid; gap: var(--space-4); justify-items: start; }
.schluss p { max-width: 60ch; color: var(--muted); }
.fuss { border-top: 1px solid var(--line); background: var(--surface); font-size: var(--type-label); color: var(--muted); }
.fuss__inhalt { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); padding-block: var(--space-5); }
.fuss a { display: inline-flex; align-items: center; min-height: var(--control-height); color: var(--muted); }

/* --- Responsive-Schicht: Breakpoints aus 1.1 (650 / 920 px) ---------- */
@media (max-width: 650px) {
  .demo-leiste__voll { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .demo-leiste__kurz { display: inline; }
  .kopf__bereich { display: none; }
  .einstieg { padding-block: var(--space-6) var(--space-5); }
  .zettel__felder div { grid-template-columns: 5.5rem minmax(0, 1fr); }
}
@media (min-width: 921px) {
  .paar { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: var(--space-5); }
  .paar__pfeil { align-items: flex-start; padding-top: 140px; }
  .paar__pfeil svg { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}