/* laua.ch — Tools-Seiten: gemeinsames Kit (ergänzt leistung.css, nutzt base.css-Tokens) */

/* Formular-Elemente */
.tool-box{background:var(--weiss);border:1px solid var(--creme-dunkel);border-radius:var(--radius);padding:24px;margin:24px 0}
.tool-box .feld{margin-bottom:18px;min-width:0}
.tool-box label{display:block;font-family:var(--font-head);font-weight:600;font-size:14.5px;margin-bottom:6px}
.tool-box select,.tool-box input[type="date"],.tool-box input[type="text"],.tool-box input[type="email"],.tool-box input[type="tel"],.tool-box input[type="number"],.tool-box input[type="search"]{width:100%;padding:11px 14px;border:1px solid var(--creme-dunkel);border-radius:10px;background:#FDFAF5;color:var(--petrol);font:inherit;font-size:15.5px}
.tool-box select:focus,.tool-box input:focus{outline:2px solid var(--petrol);outline-offset:1px;border-color:var(--petrol)}
.tool-zeile{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.tool-zeile{grid-template-columns:1fr 1fr}}
.feld-hinweis{font-size:13px;color:var(--petrol-75);margin-top:5px}

/* Ergebnis-Karte */
.tool-ergebnis{background:var(--petrol);color:var(--creme);border-radius:var(--radius);padding:26px 28px;margin:22px 0;display:none}
.tool-ergebnis.da{display:block}
.tool-ergebnis .klein{font-size:14px;color:rgba(247,236,224,.8);margin-bottom:4px}
.tool-ergebnis .gross{font-family:var(--font-head);font-size:clamp(26px,5vw,34px);font-weight:700;line-height:1.15}
.tool-ergebnis .zusatz{font-size:14px;color:rgba(247,236,224,.85);margin-top:10px}
.tool-ergebnis .zusatz b{color:var(--creme)}
.tool-ergebnis.warnung{background:#7A2E2E}
.tool-aktionen{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}

/* Richtwert-Tabelle */
.tool-tabelle{width:100%;border-collapse:collapse;margin:18px 0;font-size:14.5px}
.tool-tabelle th{font-family:var(--font-head);text-align:left;padding:10px 12px;border-bottom:2px solid var(--petrol);white-space:nowrap}
.tool-tabelle td{padding:10px 12px;border-bottom:1px solid var(--creme-dunkel);vertical-align:top}
.tool-tabelle td:first-child{font-weight:600}
.tabelle-scroll{overflow-x:auto;margin:0 -4px;padding:0 4px}

/* MiGeL-Suche */
.migel-kopf{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:6px}
@media(min-width:720px){.migel-kopf{grid-template-columns:2fr 1fr 132px}}
.migel-status{font-size:13.5px;color:var(--petrol-75);margin:10px 2px 18px}
.migel-treffer{display:grid;gap:12px;margin:0 0 26px}
.migel-karte{background:var(--weiss);border:1px solid var(--creme-dunkel);border-radius:var(--radius);padding:18px 20px;min-width:0}
.migel-karte .pos{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--petrol-75);letter-spacing:.03em}
.migel-karte h3{font-family:var(--font-head);font-size:16px;margin:4px 0 10px;line-height:1.35}
.migel-fakten{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px}
.migel-fakten span{color:var(--petrol-75)}
.migel-fakten b{font-variant-numeric:tabular-nums}
.migel-karte details{margin-top:12px;font-size:13.5px;color:var(--petrol-75)}
.migel-karte summary{cursor:pointer;font-weight:600;color:var(--petrol)}
.migel-karte details p{white-space:pre-line;margin:8px 0 0}
.migel-mehr{display:block;margin:0 auto 26px;background:var(--petrol);color:var(--creme);border:none;border-radius:999px;padding:11px 26px;font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.migel-mehr[hidden]{display:none}
.migel-mehr:hover{opacity:.9}
.migel-leer{background:var(--weiss);border:1px dashed var(--creme-dunkel);border-radius:var(--radius);padding:26px;text-align:center;color:var(--petrol-75)}

/* Zusatz-Knopf auf hellem Grund */
.tool-knopf{display:inline-block;background:var(--petrol);color:var(--creme);border:none;border-radius:999px;padding:11px 24px;font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.tool-knopf:hover{opacity:.9}

/* Einzel-Etikette (Rechner-Kopf, mit Logo) */
.eti-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:6px}
.eti-kopf svg{flex:none;color:#000}

/* Etiketten des Bogens: mm-genau, gilt für Vorschau UND Druck */
.eti{position:relative;overflow:hidden;box-sizing:border-box;background:#fff;color:#000;font-family:Arial,Helvetica,sans-serif;line-height:1.25;padding:2mm 2.2mm}
.eti .e-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5mm}
.eti .e-t{font-size:6.5pt;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.eti .e-logo{flex:none;color:#000}
.eti .e-n{font-weight:700;overflow:hidden;text-overflow:ellipsis}
.eti .e-z{display:flex;justify-content:space-between;gap:1.5mm;white-space:nowrap}
.eti .e-lg{font-style:italic;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eti.g .e-lg{font-size:7pt;margin-top:.4mm}
.eti.k .e-lg{font-size:6pt;margin-top:.3mm}
.eti .e-z b{font-weight:700}
.eti .e-visum{white-space:nowrap}
.eti.g{font-size:9pt}.eti.g .e-n{font-size:10.5pt;margin:1mm 0}
.eti.k{font-size:7.5pt;padding:1.5mm 1.8mm}.eti.k .e-n{font-size:8.5pt;margin:.6mm 0}
.eti.s{font-size:6.5pt;padding:1.2mm 1.5mm;line-height:1.2}.eti.s .e-n{font-size:7pt;margin:.4mm 0}
.eti.m{font-size:5.5pt;padding:.8mm 1.2mm;line-height:1.15}.eti.m .e-n{font-size:6pt;margin:.2mm 0}
.eti.blanko .e-z i{font-style:normal;letter-spacing:.06em}
.eti.schnittlinie{outline:.3mm dashed #9a9a9a;outline-offset:-.15mm}

/* Etiketten-Liste: mehrere Etiketten je Bogen, «+» fügt hinzu */
.eti-liste{background:#FDFAF5;border:1px solid var(--creme-dunkel);border-radius:12px;padding:18px;margin-top:4px}
.eti-liste .ee-titel{font-family:var(--font-head);font-weight:600;font-size:15px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px}
.eti-liste .ee-titel span{font-family:var(--font-body,inherit);font-weight:400;font-size:13px;color:var(--petrol-75)}
.eti-liste .ee-titel span.zuviel{color:#7A2E2E;font-weight:600}
.ee-kopfz,.ee-zeile{display:grid;grid-template-columns:1fr 122px 106px 64px 30px;gap:8px;align-items:center}
.ee-kopfz{font-size:11.5px;color:var(--petrol-75);margin-bottom:5px;padding:0 2px}
.ee-zeile{margin-bottom:8px}
.ee-zeile input,.ee-zeile select{border:1px solid var(--creme-dunkel);border-radius:8px;background:#fff;padding:8px 10px;font:inherit;font-size:13.5px;color:var(--petrol);min-width:0;width:100%}
.ee-zeile input:focus,.ee-zeile select:focus{outline:2px solid var(--petrol);outline-offset:1px}
.ee-zeile .weg{width:28px;height:28px;border:1px solid var(--creme-dunkel);border-radius:8px;background:#fff;color:var(--petrol-75);cursor:pointer;font-size:15px;line-height:1;padding:0}
.ee-zeile .weg:hover{color:#7A2E2E;border-color:#7A2E2E}
.ee-plus{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;border:1.5px dashed var(--petrol-75);border-radius:10px;padding:10px;background:transparent;color:var(--petrol);font:inherit;font-weight:600;font-size:14px;margin-top:4px;cursor:pointer}
.ee-plus:hover{border-color:var(--petrol)}
@media(max-width:680px){
  .ee-kopfz{display:none}
  .ee-zeile{grid-template-columns:1fr 1fr 64px 30px}
  .ee-zeile input[type="text"]{grid-column:1/-1}

  /* Mobil straffen (moreno 21.07.: «Felder teilweise deutlich zu gross»). Die Feldhöhe
     selbst bleibt bei ~44 px — darunter wird die Bedienung mit dem Finger unsicher.
     Gekürzt wird, was drumherum Platz frisst: Innenabstand der Box, Abstände zwischen
     den Feldern und die Hinweiszeilen. */
  .tool-box{padding:16px 14px;margin:16px 0}
  .tool-box .feld{margin-bottom:12px}
  .tool-box label{font-size:13.5px;margin-bottom:4px}
  .tool-zeile{gap:10px}
  .feld-hinweis{font-size:12.5px;margin-top:3px;line-height:1.45}

  /* Tabellen mit langen Textspalten als Karten statt als Raster — sonst ragt die Tabelle
     seitlich aus dem Bild (gemessen: 153 px Überhang auf 390 px Breite) und man muss zum
     Lesen hin- und herschieben. Bewusst OPT-IN über .karten-mobil: Umrechnungstabellen
     (Blutzucker, BMI, Pflege-Umrechner) sind als Raster besser aufgehoben. */
  .tabelle-scroll:has(.karten-mobil){overflow-x:visible;margin:0;padding:0}
  .tool-tabelle.karten-mobil{font-size:14px}
  .tool-tabelle.karten-mobil thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tool-tabelle.karten-mobil tr{display:block;background:var(--weiss);border:1px solid var(--creme-dunkel);border-radius:12px;padding:12px 14px;margin:0 0 10px}
  .tool-tabelle.karten-mobil td{display:block;border:0;padding:0}
  .tool-tabelle.karten-mobil td:first-child{font-family:var(--font-head);font-weight:700;font-size:15px;margin-bottom:5px}
  .tool-tabelle.karten-mobil td:nth-child(2){font-weight:600;margin-bottom:5px}
  .tool-tabelle.karten-mobil td:nth-child(n+3){font-size:13px;color:var(--petrol-75);line-height:1.5}
}

/* Vorschau auf der Seite (Originalgrösse) */
.eti-vorschau{background:repeating-conic-gradient(#f1e6d6 0 25%,#faf3e9 0 50%) 0 0/16px 16px;border:1px solid var(--creme-dunkel);border-radius:var(--radius);padding:18px;display:flex;justify-content:center;align-items:center;overflow-x:auto;margin-top:16px}
.eti-vorschau .eti{box-shadow:0 2px 10px rgba(0,45,64,.18)}

/* Druck: Einzel-Etikette ODER ganzer Bogen (body.druck-bogen) —
   NUR auf Seiten mit body.eti-druckseite (sonst drucken Tool-Seiten normal) */
.etikette-druck,.bogen-druck{display:none}
/* @page (A4, Rand 0) steht INLINE auf der Etiketten-Seite — hier würde sie alle Tool-Seiten treffen */
@media print{
  body.eti-druckseite>*{display:none !important}
  body.eti-druckseite:not(.druck-bogen)>.etikette-druck{display:block !important}
  .etikette-druck{width:9cm;border:1.5px solid #000;border-radius:6px;padding:14px 16px;margin:14mm;font-family:Arial,Helvetica,sans-serif;color:#000}
  .etikette-druck .t{font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
  .etikette-druck .n{font-size:16px;font-weight:700;margin-bottom:10px;min-height:20px}
  .etikette-druck .z{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}
  .etikette-druck .z b{font-size:14px}
  .etikette-druck .lg{font-size:11.5px;font-style:italic;margin-top:6px}
  .etikette-druck .visum{margin-top:10px;font-size:12px}
  body.eti-druckseite.druck-bogen>.bogen-druck{display:block !important}
  .bogen-druck{position:relative;width:210mm;height:297mm;background:#fff}
  .bogen-druck .eti{position:absolute}
  /* Rollendrucker (Brother QL): EINE Etikette je Seite statt Raster auf A4. Die Seitengrösse
     setzt das Modul dynamisch per @page auf das Mass der gewählten Rolle — der Drucker zieht
     dann genau eine Etikette ein und druckt ohne Skalierung. */
  .bogen-druck.rolle{width:auto;height:auto}
  .bogen-druck.rolle .eti{position:static;margin:0;break-after:page;page-break-after:always}
  .bogen-druck.rolle .eti:last-child{break-after:auto;page-break-after:auto}
  .eti{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* Breitere Inhaltsspalte auf Tool-Seiten (moreno 13.07.: weniger Scrollen, mehr nebeneinander) */
.wrap{max-width:1120px}
