/* Mini-Styleguide: Eingabe, A4-Vorschau, Druck */
.sg-sec{padding:56px 0 72px;}
.sg-grid{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:40px;align-items:start;}
.sg-box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;margin:0 0 18px;}
.sg-box h2{font-size:1.15rem;color:var(--dark);margin:0 0 12px;}
.sg-box .hilfe{color:var(--grey);font-size:.88rem;line-height:1.5;margin:-6px 0 12px;}
.sg-feld{display:block;margin:0 0 12px;}
.sg-feld > span{display:block;font-weight:700;color:var(--dark);font-size:.9rem;margin-bottom:5px;}
.sg-feld small{font-weight:400;color:var(--grey);}
.sg-sec input[type=text],.sg-sec select,.sg-sec textarea{width:100%;padding:9px 10px;font:inherit;font-size:.93rem;border:1.5px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);}
.sg-sec textarea{min-height:84px;resize:vertical;}
.sg-sec input[type=text]:focus,.sg-sec select:focus,.sg-sec textarea:focus{outline:3px solid var(--red);outline-offset:1px;border-color:var(--red);}
.sg-sec input[aria-invalid="true"]{border-color:var(--red);background:#fff4f4;}
.sg-drei{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.sg-zwei{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.sg-datei{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 6px;}
.sg-datei input[type=file]{font:inherit;font-size:.88rem;max-width:100%;}
.sg-datei button,.sg-link{background:none;border:0;padding:4px 0;font:inherit;font-size:.88rem;font-weight:700;color:var(--red);cursor:pointer;}
.sg-meldung{color:var(--red);font-size:.85rem;font-weight:700;margin:0 0 10px;min-height:0;}
.sg-farben{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.sg-farbe{display:grid;grid-template-columns:minmax(0,1fr) 150px 110px 32px;gap:6px;align-items:end;padding-bottom:10px;border-bottom:1px dashed var(--line);}
.sg-farbe label > span,.sg-farbe .w > span:first-child{display:block;font-size:.75rem;font-weight:700;color:var(--grey);margin-bottom:4px;}
.sg-farbe .paar{display:flex;gap:4px;}
.sg-farbe input[type=color]{flex:0 0 40px;width:40px;height:40px;padding:2px;border:1.5px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;}
.sg-farbe input[data-k=hex]{font-family:ui-monospace,Consolas,monospace;text-transform:uppercase;padding:9px 6px;}
.sg-farbe .x{width:32px;height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0;background:transparent;border:1.5px solid var(--line);border-radius:8px;color:var(--grey);cursor:pointer;}
.sg-farbe .x:hover{color:var(--red);border-color:var(--red);}
.sg-farbe .x svg{width:15px;height:15px;}
.sg-farbe .x[hidden]{display:inline-flex;visibility:hidden;}
.sg-wahl{display:flex;gap:10px;align-items:flex-start;padding:5px 0;cursor:pointer;line-height:1.4;font-size:.92rem;}
.sg-wahl input{width:17px;height:17px;margin:2px 0 0;accent-color:var(--red);flex:0 0 auto;}
.sg-aktionen{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.sg-aktionen .btn{border:0;cursor:pointer;font:inherit;font-weight:700;}
.sg-aktionen .btn-ghost{border:1.5px solid var(--line);}
.sg-aktionen label.btn{cursor:pointer;}
.sg-aktionen label.btn input{position:absolute;width:1px;height:1px;opacity:0;}
.sg-aktionen label.btn:focus-within{outline:3px solid var(--red);outline-offset:2px;}

/* Vorschau */
.sg-vorschau{position:sticky;top:96px;}
.sg-vorschau-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px;}
.sg-vorschau-kopf h2{font-size:1.2rem;color:var(--dark);margin:0;}
.sg-blaetter{max-height:calc(100vh - 170px);overflow:auto;padding:4px 4px 12px;border-radius:12px;background:#ece7e2;}
.sg-blatt{position:relative;width:100%;overflow:hidden;margin:0 0 12px;}
.sg-seite{position:absolute;top:0;left:0;width:794px;height:1123px;transform-origin:0 0;background:#fff;box-shadow:0 6px 20px -10px rgba(34,31,29,.4);padding:56px 60px 70px;box-sizing:border-box;color:#2B2B2B;font-family:'Ubuntu','Trebuchet MS',Arial,sans-serif;overflow:hidden;}
.sg-hinweis{margin:14px 0 0;color:var(--grey);font-size:.88rem;line-height:1.55;}

/* Inhalt der Seiten (feste Pixelmaße für A4 bei 96 dpi) */
.sg-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;border-bottom:4px solid #C00000;padding-bottom:14px;margin-bottom:26px;}
.sg-ueber{margin:0;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6b625c;}
.sg-kopf h2{margin:4px 0 0;font-size:30px;line-height:1.15;color:#221f1d;}
.sg-claim{margin:4px 0 0;font-size:15px;color:#6b625c;}
.sg-stand{margin:0;font-size:12px;color:#6b625c;white-space:nowrap;}
.sg-seite section{margin:0 0 26px;}
.sg-seite h3{font-size:17px;margin:0 0 12px;color:#221f1d;}
.sg-logos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.sg-logos figure{margin:0;}
.sg-flaeche{height:150px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:18px;box-sizing:border-box;border:1px solid #e7e2de;}
.sg-flaeche.hell{background:#fff;}
.sg-flaeche.grau{background:#efecea;}
.sg-flaeche img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
.sg-zone-rahmen{display:flex;align-items:center;justify-content:center;max-width:100%;max-height:100%;box-sizing:border-box;outline:1.5px dashed #C00000;outline-offset:0;}
.sg-zone-rahmen img{max-height:70px;}
.sg-platzhalter{display:inline-flex;align-items:center;justify-content:center;width:120px;height:60px;border:2px dashed #cfc7c0;border-radius:6px;color:#9a918a;font-size:13px;font-weight:700;}
.sg-logos figcaption{font-size:12px;color:#6b625c;margin-top:6px;}
.sg-logo-regeln{margin:14px 0 0;padding-left:18px;font-size:13.5px;line-height:1.6;}
.sg-farbkarten{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.sg-karte{border:1px solid #e7e2de;border-radius:8px;overflow:hidden;}
.sg-feld{height:84px;border-bottom:1px solid #e7e2de;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.sg-werte{padding:10px 12px;font-size:12px;line-height:1.55;display:flex;flex-direction:column;}
.sg-werte b{font-size:14px;color:#221f1d;}
.sg-werte small{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#6b625c;margin-bottom:4px;}
.sg-werte span{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;}
.sg-werte em{font-style:normal;font-weight:700;color:#a30000;font-size:11.5px;margin-top:4px;}
.sg-klein{margin:10px 0 0;font-size:11.5px;color:#6b625c;line-height:1.5;}
.sg-schriften{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.sg-schriften small{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#6b625c;}
.sg-probe-h{margin:4px 0 6px;font-size:30px;font-weight:700;line-height:1.1;}
.sg-probe-zeile{margin:0;font-size:20px;font-weight:700;line-height:1.3;color:#221f1d;}
.sg-probe-zeile.t{font-size:14px;font-weight:400;line-height:1.55;}
.sg-kontrast{width:100%;border-collapse:collapse;font-size:12.5px;}
.sg-kontrast th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#6b625c;padding:0 8px 6px 0;border-bottom:1px solid #e7e2de;}
.sg-kontrast td{padding:7px 8px 7px 0;border-bottom:1px solid #f0ece8;vertical-align:middle;}
.sg-punkt{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:-2px;margin-right:8px;border:1px solid rgba(0,0,0,.15);-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.sg-muster{display:inline-block;width:34px;text-align:center;border-radius:4px;font-weight:700;padding:3px 0;margin-right:8px;border:1px solid rgba(0,0,0,.1);-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.sg-u{font-weight:700;}
.sg-u.gut{color:#1b7a3d;}
.sg-u.mittel{color:#9a6400;}
.sg-u.schlecht{color:#a30000;}
.sg-regelliste{margin:0;padding-left:18px;font-size:13.5px;line-height:1.7;}
.sg-fuss{position:absolute;left:60px;right:60px;bottom:28px;display:flex;justify-content:space-between;font-size:11px;color:#6b625c;border-top:1px solid #e7e2de;padding-top:8px;}

@media (max-width:1020px){
  .sg-grid{grid-template-columns:1fr;}
  .sg-vorschau{position:static;}
  .sg-blaetter{max-height:none;}
}
@media (max-width:600px){
  .sg-box{padding:16px;}
  .sg-farbe{grid-template-columns:1fr 1fr 32px;}
  .sg-farbe .n{grid-column:1 / 3;}
  .sg-farbe .x{grid-column:3;grid-row:1;}
  .sg-drei{grid-template-columns:1fr;}
}

/* Druck: nur die beiden Seiten, in Originalgröße */
@media print{
  @page{size:A4;margin:0;}
  html,body{background:#fff;}
  body > *:not(main),main > *:not(.sg-sec),.sg-sec > .wrap > form,.sg-vorschau-kopf,.sg-hinweis{display:none !important;}
  .sg-sec{padding:0;}
  .sg-sec > .wrap{padding:0;max-width:none;display:block;}
  .sg-vorschau{position:static;}
  .sg-blaetter{max-height:none;overflow:visible;background:none;padding:0;border-radius:0;}
  .sg-blatt{height:auto !important;overflow:visible;margin:0;break-after:page;}
  .sg-blatt:last-child{break-after:auto;}
  .sg-seite{position:relative;transform:none !important;box-shadow:none;width:210mm;height:296mm;}
}