/* PDF-Stempel - Web-Fassung fuer jsconsulting.biz
   Abgeleitet aus C:\claudecode\PDF-Stempel\vorlage.html (Stand 26.08.2026).
   Aenderungen dort bitte hierher nachziehen - siehe HOMEPAGE.md im Projektordner. */
:root{
  --grund:#f4f6f8; --flaeche:#ffffff; --rand:#d8dee5; --text:#1f2933; --leise:#69788a;
  --akzent:#1f5f8b; --akzentHell:#e8f1f7; --warn:#a33a2a; --gut:#166534;
}
*{box-sizing:border-box;}
body{margin:0; font-family:"Segoe UI",system-ui,sans-serif; background:var(--grund); color:var(--text); font-size:14px;}
header{background:var(--flaeche); border-bottom:1px solid var(--rand); padding:10px 16px;
       display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:20;}
header h1{font-size:16px; margin:0 auto 0 0; font-weight:600;}
.btn{background:var(--akzent); color:#fff; border:0; border-radius:6px; padding:7px 13px;
     font-size:13px; cursor:pointer; font-family:inherit;}
.btn:hover{filter:brightness(1.08);}
.btn.zweit{background:var(--flaeche); color:var(--text); border:1px solid var(--rand);}
.btn.klein{padding:4px 9px; font-size:12px;}
.btn:disabled{opacity:.45; cursor:not-allowed;}
main{display:flex; align-items:flex-start; gap:16px; padding:16px; max-width:1500px; margin:0 auto;}
aside{width:240px; flex:0 0 240px; background:var(--flaeche); border:1px solid var(--rand);
      border-radius:8px; padding:12px; position:sticky; top:62px;}
aside h2{font-size:13px; margin:0 0 8px; text-transform:uppercase; letter-spacing:.04em; color:var(--leise);}
.stempel{display:flex; align-items:center; gap:8px; border:1px solid var(--rand); border-radius:6px;
         padding:6px; margin-bottom:7px; background:#fff;}
.stempel img{width:56px; height:34px; object-fit:contain; background:
    linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%),
    linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%);
    background-size:8px 8px; background-position:0 0,4px 4px;}
.stempel .n{flex:1; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.stempel .x{border:0; background:none; color:var(--leise); cursor:pointer; font-size:15px; line-height:1;}
.stempel .x:hover{color:var(--warn);}
#arbeitsflaeche{flex:1; min-width:0;}
.seite{position:relative; margin:0 auto 18px; background:#fff; box-shadow:0 1px 6px rgba(0,0,0,.16);
       width:max-content;}
.seite canvas{display:block;}
.seitennr{text-align:center; font-size:12px; color:var(--leise); margin-bottom:4px;}
.marke{position:absolute; cursor:move; border:1px dashed transparent;}
.marke.aktiv{border-color:var(--akzent); box-shadow:0 0 0 2px rgba(31,95,139,.15);}
.marke img{width:100%; height:100%; display:block; pointer-events:none;}
.griff{position:absolute; right:-6px; bottom:-6px; width:13px; height:13px; background:var(--akzent);
       border:2px solid #fff; border-radius:50%; cursor:nwse-resize;}
.marke:not(.aktiv) .griff{display:none;}
#leer{text-align:center; color:var(--leise); padding:70px 20px; border:2px dashed var(--rand);
      border-radius:10px; background:var(--flaeche);}
#werkzeuge{background:var(--akzentHell); border:1px solid #c7dcea; border-radius:8px;
           padding:10px 12px; margin-bottom:12px; display:none;}
#werkzeuge.an{display:block;}
#werkzeuge label{display:block; font-size:12px; color:var(--leise); margin-bottom:3px;}
#werkzeuge input[type=range]{width:100%;}
.zeile{display:flex; align-items:center; gap:8px; margin-top:8px;}
.hinweis{font-size:12px; color:var(--leise); line-height:1.5;}
#status{font-size:12px; color:var(--leise);}
.chk{display:flex; align-items:center; gap:6px; font-size:12px; margin-top:8px; cursor:pointer;}
.warnung{margin-top:10px; padding:8px 9px; border-radius:6px; font-size:12px; line-height:1.45;
         background:#fdf2f0; border:1px solid #e6c4bd; color:#7d2c1f;}

/* Web-Fassung: Ersatzklassen fuer die frueheren Inline-Styles (die strenge
   Content-Security-Policy der Seite erlaubt keine style-Attribute im HTML) */
.versteckt{display:none;}
.voll-breit{width:100%; margin-top:4px;}
.zeile-abstand{margin-top:10px;}
.hinweis-block{margin:12px 0 0;}
.hinweis-kompakt{margin:0 0 8px;}

/* Web-Fassung: schlanke Fusszeile mit Ruecksprung zur Hauptseite */
.seitenfuss{max-width:1500px; margin:0 auto; padding:6px 16px 22px; font-size:12px; color:var(--leise);}
.seitenfuss a{color:var(--akzent); text-decoration:none;}
.seitenfuss a:hover{text-decoration:underline;}
.fusszeile-links{margin:10px 0 0;}
.rechtliches{background:var(--flaeche); border:1px solid var(--rand); border-radius:8px; padding:10px 12px;}
.rechtliches summary{cursor:pointer; font-weight:600; color:var(--text);}
.rechtliches p{margin:10px 0 0; line-height:1.55; max-width:70ch;}
.datenhinweis{font-size:12px; color:var(--gut); margin-top:14px;}