/* ============================================================
   AZ VTS — Portal-Stylesheet (Phase 9, Slice 3)
   ============================================================
   Gemeinsame Gestaltung für offer_public.php, partner.php und
   anfrage.html. Vorher hatte jede der drei Seiten ihr eigenes,
   per echo zusammengesetztes CSS — mit unterschiedlichen Farben,
   Radien und Schriften. Der Kunde sah in einem Vorgang drei
   verschiedene Absender: das PDF, das Portal und die App.

   Die Farbe: Das Firmenlogo ist rein monochrom, #1D1D1B auf Weiß.
   Die App folgt dem (Akzent #1a1a1a, Radius 3px, Jost/Inter/Plex
   Mono). Die Portale liefen in Goldbraun #b8860b mit 12px-Radien
   und Systemschrift — eine Farbe und Formensprache, die sonst
   nirgends im Unternehmen vorkommt. Beides ist hier vereinheitlicht.

   Das Motiv: Die PDFs tragen millimetergenaue Falz- und Lochmarken
   nach DIN 5008. Genau diese Randspalte wird im Portal zur
   Statusspur (.steps). Der digitale Beleg sieht damit aus wie das
   Blatt, das der Kunde ohnehin kennt — nur lebendig.

   Die Klassennamen sind bewusst unverändert übernommen, damit das
   HTML der Portale nicht angefasst werden muss.
   ============================================================ */

:root{
  /* Tinte aus dem Logo */
  --ink:#1d1d1b;
  --ink-dim:#5c5c58;
  --ink-faint:#8e8e88;
  --page:#edede9;
  --sheet:#ffffff;
  --rule:#dbdbd5;
  --rule-soft:#ebebe6;
  --tint:#f7f7f4;

  /* Statusfarben 1:1 aus index.html — Grün bedeutet im Portal
     dasselbe wie in der App. */
  --ok:#2e7d4f;      --ok-bg:#eaf5ee;
  --warn:#a83227;    --warn-bg:#fbeceb;
  --pending:#8a5a10; --pending-bg:#f7ecd9;
  --info:#2f5f96;    --info-bg:#e8eff8;

  --r:3px;
  --disp:'Jost',system-ui,-apple-system,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;
}

/* Dunkelmodus folgt der Systemeinstellung. Die App kann das längst,
   die Portale bisher nicht — wer abends auf dem Handy ein Angebot
   öffnet, wurde geblendet. */
@media (prefers-color-scheme:dark){
  :root{
    --ink:#ececed; --ink-dim:#b2b3b8; --ink-faint:#8a8b91;
    --page:#111214; --sheet:#1c1d20;
    --rule:#3a3b41; --rule-soft:#2a2b30; --tint:#232428;
    --ok:#7fc99a;      --ok-bg:#16271d;
    --warn:#e79289;    --warn-bg:#2b1a18;
    --pending:#dcb974; --pending-bg:#2a2416;
    --info:#86a9db;    --info-bg:#182534;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:var(--body);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}

/* Sichtbarer Tastaturfokus. Fehlte in offer_public.php und
   partner.php vollständig — wer mit der Tastatur navigiert, sah
   nicht, wo er ist. */
:focus-visible{outline:2px solid var(--info);outline-offset:2px;border-radius:2px}

/* ---------- Bogen ---------- */
.wrap{max-width:940px;margin:0 auto;padding:30px 20px 70px}
.card{
  background:var(--sheet);border:1px solid var(--rule);
  border-radius:var(--r);padding:34px 36px 30px;
}

/* ---------- Briefkopf ---------- */
.brand{
  display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;
  margin:0 0 26px;padding-bottom:13px;border-bottom:1.5px solid var(--ink);
}
/* Das Logo enthält rechts eine Leistungsliste in kleiner Schrift. Unter etwa
   80 px Höhe ist die nur noch graues Rauschen — deshalb bewusst größer als ein
   reines Wortmarken-Logo. */
.brand img,.brand-logo img{max-height:84px;max-width:320px;width:auto;height:auto;display:block}
/* Sicherheitsnetz: Im Partnerportal hängt das Logo an einer eigenen ID und
   nicht in einem .brand-Block. Ohne Begrenzung wurde es in Originalgröße
   (900 px breit) ausgeliefert und füllte den halben Bildschirm. */
#logo{max-height:84px;max-width:320px;width:auto;height:auto;display:block}
.top img{max-height:52px;max-width:230px;width:auto;height:auto;border-radius:0}
/* Kein Bild im Portal darf über seinen Container hinauslaufen. */
.card img,.wrap img{max-width:100%}
.brand .bn,.brand-txt .bn{
  font-family:var(--disp);font-weight:600;font-size:17px;
  letter-spacing:.13em;line-height:1.15;text-transform:uppercase;
}
.brand .bs,.brand-txt .bs{
  font-family:var(--body);font-weight:400;font-size:10.5px;
  letter-spacing:.14em;color:var(--ink-faint);margin-top:5px;text-transform:uppercase;
}
/* Der Adressblock rechts im Kopf (wird im PHP inline gesetzt) */
.brand > div:last-child{font-family:var(--mono);font-size:11px;line-height:1.8}

/* ---------- Überschriften ---------- */
h1{
  font-family:var(--disp);font-weight:500;font-size:31px;
  letter-spacing:-.01em;margin:0 0 6px;line-height:1.15;
}
h2{
  font-family:var(--disp);font-size:11px;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--ink-faint);
  margin:38px 0 14px;padding-top:24px;border-top:1px solid var(--rule-soft);
}
/* Als erstes Element eines Blocks gehört weder Abstand noch Trennlinie davor —
   sonst beginnt die Karte mit einem leeren Streifen samt Linie. */
.card > h2:first-child,.card-body > h2:first-child,.sec > h2:first-child,
.card > *:first-child > h2:first-child{
  margin-top:0;padding-top:0;border-top:none;
}
.muted,.hint,.validity,.sub{color:var(--ink-dim);font-size:13px}
.hint,.validity{font-size:12px;color:var(--ink-faint)}

/* ---------- Statusspur als Randspalte ----------
   Das eigentliche Motiv: Die PDFs tragen millimetergenaue Falz- und
   Lochmarken nach DIN 5008 am linken Blattrand. Genau diese Randspalte
   wird hier zur Statusspur — der digitale Beleg sieht aus wie das Blatt,
   das der Kunde ohnehin von uns kennt, nur lebendig.

   Umgesetzt ohne Eingriff ins HTML: die Karte wird zum zweispaltigen
   Raster, die Schrittliste in die schmale linke Spalte gesetzt, alles
   andere in die breite rechte. */
/* Nur der Angebotsbogen bekommt den Blattrand — im Partnerportal gibt es
   keine Statusspur, dort bliebe sonst eine leere Randspalte stehen. Die
   Kennzeichnung kommt aus offer_public.php (class="card sheet"), damit sie
   nicht von der Browser-Unterstützung für :has() abhängt. */
.card.sheet{
  display:grid;
  grid-template-columns:128px minmax(0,1fr);
  column-gap:28px;
  align-items:start;
}
.card.sheet > *{grid-column:2;min-width:0}
/* Briefkopf und Firmenfuß laufen über die volle Breite. */
.card.sheet > .brand,.card.sheet > .cofoot,.card.sheet > .foot{grid-column:1/-1}
.card.sheet > .steps{
  grid-column:1;
  grid-row:2/span 60;          /* neben allem, was nach dem Briefkopf kommt */
  align-self:stretch;          /* Die Randlinie muss durchlaufen wie am Blatt */
  display:block;margin:6px 0 0;list-style:none;
  border-top:none;border-right:1px solid var(--rule);
  padding:0 22px 0 0;
}
/* Die Lochmarke: ein kurzer Strich auf halber Höhe der Randlinie,
   genau wie auf dem Briefbogen. */
.card.sheet > .steps:after{
  content:"";position:absolute;right:-1px;top:50%;
  width:11px;height:1px;background:var(--ink-faint);
}
.steps{position:relative}
.steps li{
  position:relative;padding:0 0 30px;text-align:right;
  font-family:var(--disp);font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-faint);
}
.steps li:last-child{padding-bottom:0}
/* Die Falzmarke: ein kurzer Strich, der aus der Randlinie heraussteht.
   Der erreichte Schritt bekommt ihn länger und kräftiger. */
.steps li:before{
  content:"";position:absolute;right:-22px;top:8px;
  width:15px;height:1px;background:var(--rule);
}
.steps li.on{color:var(--ink);font-weight:600}
.steps li.on:before{width:21px;height:1.5px;background:var(--ink)}
.steps li:after{display:none}
.steps li .d{
  display:block;font-family:var(--mono);font-size:10.5px;
  letter-spacing:0;text-transform:none;color:var(--ink-faint);margin-top:3px;font-weight:400;
}

/* ---------- Statusetiketten ---------- */
.pill,.tag{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--disp);font-size:11px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;
}
.pill:before,.tag:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pill.open,.pill.info,.tag.info{background:var(--info-bg);color:var(--info)}
.pill.done,.pill.ok,.tag.done{background:var(--ok-bg);color:var(--ok)}
.pill.warn,.tag.warn{background:var(--pending-bg);color:var(--pending)}
/* Verfügbarkeitsampel im Partnerportal: g = frei, y = knapp, r = belegt,
   u = unbekannt. Ohne diese Farben war die Ampel funktionslos. */
.pill.g{background:var(--ok-bg);color:var(--ok)}
.pill.y{background:var(--pending-bg);color:var(--pending)}
.pill.r{background:var(--warn-bg);color:var(--warn)}
.pill.u{background:var(--tint);color:var(--ink-faint)}
/* Eigenständige Zustandsklassen (ohne .banner davor) */
.ok{color:var(--ok)}
.err{color:var(--warn)}
.info{color:var(--info)}
.statusbar{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:16px 0 6px}

/* ---------- Hinweisbänder ---------- */
.banner,.msg{
  padding:13px 15px;border-radius:var(--r);font-size:13.5px;margin:18px 0;
  border:1px solid;line-height:1.55;
}
.banner.ok,.msg.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok)}
.banner.info,.msg.info{background:var(--info-bg);color:var(--info);border-color:var(--info)}
.banner.err,.msg.err{background:var(--warn-bg);color:var(--warn);border-color:var(--warn)}

/* ---------- Positionstabelle: Spalten wie im PDF ---------- */
table{width:100%;border-collapse:collapse;margin:26px 0 2px;font-size:13.5px}
thead th,th{
  font-family:var(--disp);font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
  text-align:left;padding:0 8px 8px;border-bottom:1.5px solid var(--ink);
}
tbody td,td{padding:11px 8px;border-bottom:1px solid var(--rule-soft);vertical-align:top}
th:first-child,td:first-child{padding-left:0}
th:last-child,td:last-child{padding-right:0}
td.num,th.num{
  text-align:right;white-space:nowrap;
  font-family:var(--mono);font-variant-numeric:tabular-nums;
}

/* ---------- Summen ---------- */
.tot{
  display:flex;justify-content:space-between;gap:26px;
  padding:5px 0;font-size:13.5px;color:var(--ink-dim);
  margin-left:auto;max-width:330px;
}
.tot span:last-child,.tot b:last-child{
  font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);
}
.tot.grand{
  font-weight:600;font-size:17px;color:var(--ink);
  border-top:1.5px solid var(--ink);margin-top:8px;padding-top:11px;
}

/* ---------- Belegliste ---------- */
.docs{list-style:none;margin:0;padding:0}
.docs li{
  display:flex;align-items:center;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--rule-soft);
  background:none;border-radius:0;margin:0;
}
.docs li:last-child{border-bottom:none}
.docs .ic{
  flex:none;width:auto;min-width:44px;height:auto;padding:4px 6px;
  border:1px solid var(--rule);border-radius:var(--r);background:none;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;color:var(--ink-faint);
}
.docs .nm{flex:1;min-width:0}
.docs .nm b{display:block;font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.docs .nm span{font-family:var(--mono);font-size:11px;color:var(--ink-faint)}
.docs a.dl{
  flex:none;text-decoration:none;background:none;border:none;
  border-bottom:1px solid var(--ink);border-radius:0;padding:0 0 1px;
  font-family:var(--disp);font-size:11.5px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink);white-space:nowrap;
}

/* ---------- Zahlung ---------- */
.pay{
  display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start;
  background:var(--tint);border:1px solid var(--rule-soft);
  border-radius:var(--r);padding:22px;
}
.pay img{
  width:132px;height:132px;display:block;background:#fff;
  border:1px solid var(--rule);border-radius:var(--r);padding:6px;
}
.pay .pd{flex:1;min-width:200px;font-size:13.5px}
.pay .pd .row{
  display:flex;justify-content:space-between;gap:12px;
  padding:5px 0;border-bottom:1px solid var(--rule-soft);
}
.pay .pd .row:last-child{border-bottom:none}
.pay .pd .row b{font-weight:500;font-family:var(--mono);font-size:12.5px}
.pay .cap{
  font-family:var(--mono);font-size:10px;color:var(--ink-faint);
  margin-top:8px;text-align:center;width:132px;line-height:1.5;
}
.ppbtn{
  display:inline-block;margin-top:12px;text-decoration:none;
  font-family:var(--disp);font-size:11.5px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink);background:none;border:1px solid var(--ink);
  padding:9px 15px;border-radius:var(--r);
}
.ppbtn:hover{background:var(--ink);color:var(--sheet)}

/* ---------- Formulare ---------- */
label,.fl{
  display:block;font-family:var(--disp);font-size:10.5px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint);
  margin:20px 0 6px;
}
input[type=text],input[type=email],input[type=tel],input[type=date],
input[type=number],input[type=search],select,textarea{
  width:100%;padding:11px 12px;font-family:var(--body);font-size:15px;
  color:var(--ink);background:var(--sheet);
  border:1px solid var(--rule);border-radius:var(--r);
}
textarea{resize:vertical;min-height:96px}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--rule-soft);
}
.consent,.check{
  display:flex;gap:10px;align-items:flex-start;margin-top:18px;
  font-size:12.5px;color:var(--ink-dim);font-weight:400;
  letter-spacing:0;text-transform:none;
}
.consent input,.check input{margin-top:3px;accent-color:var(--ink);width:auto}
/* Beschriftungen innerhalb von Zustimmungszeilen sind Fließtext, keine
   Feldbeschriftung — sonst laufen sie in Versalien und Sperrung. */
.consent label,.check label,label.plain{
  margin:0;font-family:var(--body);font-size:12.5px;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--ink-dim);
}
.req{color:var(--warn)}
/* Honigtopf-Feld gegen Spam — muss unsichtbar bleiben */
.hp{position:absolute!important;left:-9999px!important;opacity:0!important;height:0!important}
.hidden{display:none!important}

/* ---------- Schaltflächen ---------- */
button,.btn,.submit{
  font-family:var(--disp);font-size:13px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;
  padding:13px 20px;border-radius:var(--r);
  border:1px solid var(--ink);background:var(--ink);color:var(--sheet);
  cursor:pointer;text-decoration:none;display:inline-block;
  margin-top:18px;width:100%;
  transition:opacity .12s,background .12s,color .12s;
}
button:hover,.btn:hover,.submit:hover{opacity:.85}
/* Deaktivierte Schaltflächen sahen wie aktive aus — beim Absenden eines
   Formulars war dadurch nicht erkennbar, dass gerade gesendet wird. */
button:disabled,.btn:disabled,.submit:disabled{opacity:.5;cursor:default}
button:disabled:hover,.btn:disabled:hover,.submit:disabled:hover{opacity:.5}
button.ghost,.btn.ghost,.rm{
  background:none;color:var(--ink);border-color:var(--rule);width:auto;
}
button.ghost:hover,.btn.ghost:hover{background:var(--tint);opacity:1}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Partnerportal: Reiter, Katalog, Warenkorb ---------- */
.tabs{
  display:flex;gap:0;border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;margin-bottom:26px;background:var(--sheet);
}
.tab{
  flex:1;font-family:var(--disp);font-size:12px;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;padding:13px 8px;
  border:none;border-right:1px solid var(--rule);background:none;
  color:var(--ink-faint);cursor:pointer;text-align:center;
  text-decoration:none;margin:0;width:auto;border-radius:0;
}
.tab:last-child{border-right:none}
.tab.on{background:var(--ink);color:var(--sheet)}
.sec{margin-top:24px;padding-top:22px;border-top:1px solid var(--rule-soft)}
.sec:first-child{border-top:none;padding-top:0}
/* ACHTUNG Namenskonflikt: Im Partnerportal bezeichnet .sec kein Gliederungs-
   element, sondern ein umschaltbares Panel — sichtbar nur mit .on. Diese Regel
   fehlte zunächst, dadurch waren beide Panels gleichzeitig sichtbar und der
   Umschalter schien wirkungslos. Gezielt über die IDs, damit .sec anderswo
   weiterhin ein normaler Abschnitt bleibt. */
#sec-check,#sec-mine{display:none;margin-top:0;padding-top:0;border-top:none}
#sec-check.on,#sec-mine.on{display:block}
.row,.line{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}
.row > *{flex:1;min-width:170px}
.search-wrap{position:relative}
/* Die Ergebnisliste ist standardmäßig eingeklappt und wird per .show geöffnet.
   Ohne display:none stand sie dauerhaft offen. */
.results{
  border:1px solid var(--rule);border-radius:var(--r);margin-top:7px;
  background:var(--sheet);overflow:auto;max-height:250px;display:none;
}
.results.show{display:block}
.ritem{
  padding:10px 13px;border-bottom:1px solid var(--rule-soft);
  font-size:13.5px;display:flex;justify-content:space-between;gap:10px;cursor:pointer;
}
.ritem:last-child{border-bottom:none}
.ritem:hover,.ritem:focus{background:var(--tint)}
.cat{font-family:var(--mono);font-size:11px;color:var(--ink-faint)}
/* v6.87: Stornierte Rechnungen bleiben sichtbar, treten aber zurück. */
.vg-row.vg-storniert{opacity:.6}
.vg-row.vg-storniert s{color:var(--ink-faint)}

/* v6.74: Sets in Trefferliste und Warenkorb erkennbar machen. Bewusst eigene
   Klassen (.kind/.setparts) statt Umdeutung vorhandener — die Portal-Reiter
   reagieren empfindlich auf Klassennamen, die mehrfach belegt sind. */
.kind{
  font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint);border:1px solid var(--rule);border-radius:10px;
  padding:1px 7px;margin-left:7px;flex:none;white-space:nowrap;
}
.ritem .setparts{display:block;font-size:12px;color:var(--ink-faint);margin-top:3px;line-height:1.5}
.cart .line .setparts{flex-basis:100%;font-size:12px;color:var(--ink-faint);margin:3px 0 0 88px;line-height:1.5}
@media (max-width:560px){ .cart .line .setparts{margin-left:0} }
.cart{list-style:none;margin:16px 0 0;padding:0}
.cart li,.cart .line{
  display:flex;align-items:center;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--rule-soft);
}
.cart .nm,.cname{flex:1;font-size:14px;min-width:0}
.cart .qty,input.qty{width:74px;text-align:center;font-family:var(--mono);flex:none}
.rm{
  border:none;background:none;color:var(--ink-faint);font-size:17px;
  cursor:pointer;padding:2px 6px;margin:0;width:auto;
}
.rm:hover{color:var(--warn);opacity:1}
.empty{
  padding:22px;text-align:center;color:var(--ink-faint);font-size:13px;
  border:1px dashed var(--rule);border-radius:var(--r);
}
.acc{border:1px solid var(--rule);border-radius:var(--r);margin-bottom:10px;overflow:hidden}
.card-head{
  font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;padding:12px 14px;background:var(--tint);
  border-bottom:1px solid var(--rule);
}
.card-body{padding:16px}
.done-card{border-color:var(--ok)}
.g,.grand{font-weight:600}
.top{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.top .t1{font-family:var(--disp);font-weight:600;font-size:16px;letter-spacing:.04em}
.top .t2{font-size:12.5px;color:var(--ink-dim)}
.card-head h2{margin:0;font-size:12px;border:none;padding:0;letter-spacing:.11em}
.card-head .sub{font-size:11.5px;color:var(--ink-faint);font-weight:400;
  letter-spacing:0;text-transform:none;margin-top:3px}
.cart .empty{padding:10px 0;border:none;text-align:left}
.done-card .check{color:var(--ok);font-weight:600}
.foot a{color:inherit}
.foot .cname{display:block;font-family:var(--disp);letter-spacing:.06em}
.brand-txt h1{margin:0}
.brand-txt .tag{margin-top:6px}
fieldset{border:none;margin:0;padding:0 0 20px}
fieldset + fieldset{border-top:1px solid var(--rule-soft);padding-top:20px}
legend{font-family:var(--disp);font-size:10.5px;font-weight:600;letter-spacing:.19em;
  text-transform:uppercase;color:var(--ink-faint);padding:0}
p{line-height:1.6}

/* ---------- AGB-Kasten und Fuß ---------- */
.agbbox{
  margin-top:22px;padding:15px 17px;background:var(--tint);
  border:1px solid var(--rule-soft);border-radius:var(--r);
  font-size:12.5px;color:var(--ink-dim);line-height:1.6;
}
.agbbox a{color:var(--ink);font-weight:500;border-bottom:1px solid var(--rule)}
.cofoot{
  margin-top:26px;padding-top:20px;border-top:1px solid var(--rule);
  display:flex;gap:24px;flex-wrap:wrap;
  font-size:11.5px;color:var(--ink-dim);line-height:1.75;
}
.cofoot div{flex:1;min-width:150px}
.cofoot b{
  display:block;font-family:var(--disp);font-size:9.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:5px;
}
.foot{text-align:center;color:var(--ink-faint);font-size:11.5px;margin-top:24px}

/* ---------- Mobil ---------- */
@media (max-width:760px){
  .wrap{padding:20px 14px 90px}
  .card{padding:22px 18px}
  h1{font-size:25px}
  .brand{gap:12px}
  .brand > div:last-child{font-size:10px}
  .cofoot{gap:16px}
  .cofoot div{min-width:130px}
  .row > *{min-width:100%}
  .pay{gap:18px}
  .pay img,.pay .cap{width:100%;max-width:200px;height:auto;margin-left:auto;margin-right:auto}
  /* Auf schmalen Geräten gibt es keinen Blattrand — die Spur legt sich
     waagerecht über den Inhalt. */
  .card.sheet{display:block}
  .card.sheet > *,.card.sheet > .steps{grid-column:auto}
  .card.sheet > .steps{
    position:static;display:flex;gap:0;margin:20px 0 6px;padding:0;
    border-right:none;border-top:1px solid var(--rule);
  }
  .card.sheet > .steps:after{display:none}
  .steps li{
    flex:1;text-align:left;padding:11px 8px 0 0;font-size:10.5px;
  }
  .steps li:before{
    right:auto;left:0;top:-1px;width:100%;height:1px;
  }
  .steps li.on:before{width:100%;height:2px}
  .steps li .d{font-size:9.5px}
  .tot{max-width:none}

  /* Die Positionstabelle wird zu Karten. Vorher scrollte sie auf dem
     Handy horizontal weg — genau da schauen Kunden ein Angebot an. */
  table{font-size:13px;margin-top:20px}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  tbody tr{
    display:grid;grid-template-columns:repeat(3,1fr);gap:7px 12px;
    padding:14px 0;border-bottom:1px solid var(--rule-soft);
  }
  tbody td{border:none;padding:0;font-size:12.5px}
  /* Die Bezeichnung läuft über die volle Breite, darunter stehen Menge,
     Einzel- und Gesamtpreis nebeneinander — ruhiger als abwechselnd
     links/rechts umgebrochene Paare. */
  tbody td:not([data-l]){grid-column:1/-1;font-size:13.5px;line-height:1.45}
  tbody td[data-l]{text-align:left}
  tbody td[data-l]:last-child{text-align:right}
  tbody td[data-l]:before{
    content:attr(data-l);display:block;font-family:var(--mono);font-size:9.5px;
    letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:1px;
  }
}

/* ---------- Druck ----------
   Kunden drucken das Angebot aus dem Portal. Bisher landete der
   Kartenrahmen samt Schaltflächen mit auf dem Papier. */
@media print{
  :root{--page:#fff;--sheet:#fff;--ink:#000;--ink-dim:#333;--ink-faint:#555;--rule:#999;--rule-soft:#ccc;--tint:#fff}
  body{background:#fff;font-size:11pt}
  .wrap{max-width:none;padding:0}
  .card{border:none;padding:0}
  button,.submit,.tabs,.ppbtn,.rm,form .consent,.agbbox{display:none!important}
  /* Auf Papier trägt das Blatt seine echten Falzmarken — die
     nachgebildete Spur wäre doppelt gemoppelt. */
  .card.sheet{display:block}
  .card.sheet > .steps{display:none}
  .docs a.dl{display:none}
  a{text-decoration:none}
  h2{page-break-after:avoid}
  tr,.docs li{page-break-inside:avoid}
  .cofoot{page-break-inside:avoid}
}

/* ---------- Anmeldeseite (PIN) ----------
   Eine reine Eingabeseite braucht keine Bogenbreite. Vorher war sie eine
   schmale, zentrierte Karte; das ging beim Zusammenführen der Stylesheets
   verloren, wodurch Feld und Schaltfläche über die volle Breite liefen. */
body.gate .wrap{max-width:420px;padding-top:60px}
body.gate .card{padding:28px 26px}
body.gate #logo{margin:0 auto 18px}
body.gate h1{font-size:24px;text-align:center;margin-bottom:8px}
body.gate p{text-align:center;color:var(--ink-dim);font-size:13.5px;margin:0 0 6px}
body.gate input{text-align:center;font-family:var(--mono);font-size:20px;letter-spacing:.3em;padding:13px 12px}
body.gate .err{
  margin-top:12px;text-align:center;font-size:13px;color:var(--warn);min-height:19px;
}

/* v6.65: Positions-Detailzeile + Rabatt im Angebotsportal */
.lndetail{font-size:11.5px;color:var(--p-muted,#6b7280);margin-top:3px;}
.lndisc{color:#8a5a00;font-weight:600;}

/* v6.65: PDF-Download */
.pdfdl{margin:10px 0 4px;}
.pdfdl .dl{display:inline-block;padding:8px 14px;border:1px solid var(--p-border,#d7d2c8);
  border-radius:8px;text-decoration:none;font-size:13.5px;background:var(--p-panel,#fff);}
.pdfdl .dl:hover{border-color:var(--p-accent,#b8860b);}

/* v6.65: Unterschriftenfeld in der Bestätigung */
.sigwrap{position:relative;margin:6px 0 4px;}
.sigwrap canvas{width:100%;max-width:600px;height:150px;display:block;background:#fff;
  border:1px dashed var(--p-border,#c9c3b8);border-radius:8px;touch-action:none;cursor:crosshair;}
.siglink{position:absolute;top:6px;right:6px;font-size:11.5px;padding:3px 9px;border:1px solid var(--p-border,#d7d2c8);
  border-radius:6px;background:#fff;color:#555;cursor:pointer;}
.sigshow{margin-top:10px;}
.sigshow img{max-height:70px;max-width:280px;display:block;background:#fff;
  border:1px solid var(--p-border,#e2ddd4);border-radius:6px;padding:4px 8px;}
.sigshow .cap{font-size:11px;color:#888;margin-top:3px;}

/* v6.66: "Ihre Vorgänge" im Partnerportal */
.vg{border:1px solid var(--p-border,#e2ddd4);border-radius:10px;padding:12px 14px;margin-bottom:10px;background:var(--p-panel,#fff);}
.vg-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:14.5px;}
.vg-sub{font-size:12px;color:#777;margin-top:2px;}
.vg-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:13px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--p-border,#eae5dc);}
.vg-row>span:first-child{color:#666;}
.vg-row .dl{margin-left:6px;text-decoration:none;border-bottom:1px solid currentColor;font-size:12.5px;}
.vg-total{margin-top:6px;padding:10px 14px;border-radius:10px;background:#fdf6e7;border:1px solid #eadfc3;font-size:13.5px;text-align:right;}